fix(deps): update react monorepo to v19 (major) (#699)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Phil Parsons <[email protected]>

.changeset/selfish-rocks-exercise.md

@@ -0,0 +1,5 @@
+---
+'@boxslider/react': major
+---
+
+Update components for use with React 19

package.json

@@ -26,8 +26,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.5.2",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -43,8 +43,8 @@
     "jsdom": "^25.0.0",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "stylelint": "^16.9.0",
     "stylelint-config-standard": "^36.0.1",
     "typescript": "^5.5.4",

packages/docs/docs/examples/01-product-card.md

@@ -0,0 +1,7 @@
+---
+title: Product Card
+---
+
+import { ProductCard } from '@site/src/components/ProductCard'
+
+<ProductCard />

packages/docs/docs/examples/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Examples",
+  "position": 4
+}

packages/docs/package.json

@@ -24,8 +24,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.3",

packages/docs/src/components/Examples/Example.tsx

@@ -17,7 +17,7 @@ export function Example({
   const [options, setOptions] = useState({
     autoScroll: true,
     loop: true,
-    speed: '800',
+    speed: 800,
     swipe: true,
     swipeTolerance: 30,
     timeout: 5000,

packages/docs/src/components/Examples/Slides.tsx

@@ -45,7 +45,7 @@ export function Slides() {
           />
         </picture>
       </div>
-      <div className={styles.slide} aria-label="4 of 4" role="region">
+      <div className={styles.slide} aria-label="4 of 4">
         <picture>
           <source
             srcSet="/slider/img/slides/ram-square.webp"

packages/docs/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,82 @@
+import { FadeSlider } from '@boxslider/react'
+import { createRef } from 'react'
+import type { BoxSlider } from '@boxslider/slider'
+
+import styles from './styles.module.css'
+
+export function ProductCard() {
+  const sliderRef = createRef<BoxSlider>()
+  const buttonBar = createRef<HTMLDivElement>()
+
+  const handleActiveButton = (button: HTMLButtonElement) => {
+    const buttons = buttonBar.current?.querySelectorAll('button')
+    const index = Array.from(buttons).indexOf(button)
+
+    buttons?.forEach((btn) => (btn.tabIndex = -1))
+    button.tabIndex = 0
+    sliderRef.current?.skipTo(index)
+  }
+
+  return (
+    <article className={styles.card}>
+      <section className={styles.details}>
+        <h2>Tartan paint</h2>
+        <p>
+          Our tartan paint is made from the finest Scottish tartans, and is
+          perfect for painting your walls, ceilings, and floors.
+        </p>
+      </section>
+      <section className={styles.images}>
+        <FadeSlider
+          className={styles.slider}
+          autoScroll={false}
+          sliderRef={sliderRef}>
+          <div className={styles.slide}>Image one</div>
+          <div className={styles.slide}>Image two</div>
+          <div className={styles.slide}>Image three</div>
+          <div className={styles.slide}>Image four</div>
+          <div className={styles.slide}>Image five</div>
+        </FadeSlider>
+        <div
+          ref={buttonBar}
+          className={styles.thumbnails}
+          onClick={(ev) => {
+            if (ev.target instanceof HTMLButtonElement) {
+              handleActiveButton(ev.target)
+            }
+          }}
+          onKeyDown={(ev) => {
+            const current = ev.target as HTMLButtonElement
+            const prev = current.previousElementSibling as HTMLButtonElement
+            const next = current.nextElementSibling as HTMLButtonElement
+
+            if (ev.code === 'ArrowRight' && next) {
+              handleActiveButton(next)
+              next.focus()
+            }
+
+            if (ev.code === 'ArrowLeft' && prev) {
+              handleActiveButton(prev)
+              prev.focus()
+            }
+          }}>
+          <button tabIndex={0} className={styles.thumbnail}>
+            Thumbnail
+          </button>
+          <button tabIndex={-1} className={styles.thumbnail}>
+            Thumbnail
+          </button>
+          <button tabIndex={-1} className={styles.thumbnail}>
+            Thumbnail
+          </button>
+          <button tabIndex={-1} className={styles.thumbnail}>
+            Thumbnail
+          </button>
+          <button tabIndex={-1} className={styles.thumbnail}>
+            Thumbnail
+          </button>
+        </div>
+      </section>
+    </article>
+  )
+}

packages/docs/src/components/ProductCard/index.ts

@@ -0,0 +1 @@
+export * from './ProductCard'

packages/docs/src/components/ProductCard/styles.module.css

@@ -0,0 +1,23 @@
+.card {
+  display: flex;
+  flex-flow: row-reverse;
+}
+
+.details {
+  width: 40%;
+}
+
+.images {
+  width: 60%;
+}
+
+.slider {
+  display: block;
+  height: 300px;
+  width: 100%;
+}
+
+.slide {
+  width: 100%;
+  height: 100%;
+}

packages/react/package.json

@@ -46,7 +46,7 @@
     "@boxslider/slider": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   }
 }

packages/react/src/Carousel.tsx

@@ -1,3 +1,4 @@
+import type { CarouselSliderElement } from '@boxslider/components/Carousel'
 import {
   extractSliderAttributes,
   type BaseComponentProps,
@@ -6,20 +7,21 @@ import {
 
 import '@boxslider/components/Carousel'
 
-export interface CarouselSliderProps extends BaseComponentProps<'bs-carousel'> {
+export interface CarouselSliderProps
+  extends BaseComponentProps<CarouselSliderElement> {
   timingFunction?: string
   cover?: boolean
 }
 
 export function CarouselSlider({
   children,
-  className,
   cover,
   sliderRef,
   timingFunction,
   ...props
 }: CarouselSliderProps) {
-  const { attributes, eventHandlers } = extractSliderAttributes(props)
+  const { attributes, elementProps, eventHandlers } =
+    extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (timingFunction) {
@@ -32,9 +34,9 @@ export function CarouselSlider({
 
   return (
     <bs-carousel
+      {...elementProps}
       {...htmlAttributes}
-      ref={sliderRefCallback(eventHandlers, sliderRef)}
-      class={className}>
+      ref={sliderRefCallback(eventHandlers, sliderRef)}>
       {children}
     </bs-carousel>
   )

packages/react/src/Controls.tsx

@@ -1,9 +1,22 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { SliderControlsElement } from '@boxslider/components/SliderControls'
 
 import '@boxslider/components/SliderControls'
 
-export interface SliderControlsProps
-  extends ComponentPropsWithoutRef<'bs-slider-controls'> {
+type BaseProps = Omit<
+  DetailedHTMLProps<
+    HTMLAttributes<SliderControlsElement>,
+    SliderControlsElement
+  >,
+  | 'index-btn-label'
+  | 'index-label'
+  | 'next-btn-label'
+  | 'pause-btn-label'
+  | 'play-btn-label'
+  | 'prev-btn-label'
+>
+
+export interface SliderControlsProps extends BaseProps {
   indexBtnLabel?: string
   indexLabel?: string
   nextBtnLabel?: string
@@ -13,7 +26,6 @@ export interface SliderControlsProps
 }
 
 export function SliderControls({
-  className,
   indexBtnLabel,
   indexLabel,
   nextBtnLabel,
@@ -31,7 +43,7 @@ export function SliderControls({
   if (playBtnLabel) htmlAttributes['play-btn-label'] = playBtnLabel
   if (prevBtnLabel) htmlAttributes['prev-btn-label'] = prevBtnLabel
 
-  return <bs-slider-controls class={className} {...htmlAttributes} {...props} />
+  return <bs-slider-controls {...htmlAttributes} {...props} />
 }
 
 export default SliderControls

packages/react/src/Cube.tsx

@@ -1,3 +1,4 @@
+import type { CubeSliderElement } from '@boxslider/components/Cube'
 import {
   extractSliderAttributes,
   type BaseComponentProps,
@@ -6,20 +7,20 @@ import {
 
 import '@boxslider/components/Cube'
 
-export interface CubeSliderProps extends BaseComponentProps<'bs-cube'> {
+export interface CubeSliderProps extends BaseComponentProps<CubeSliderElement> {
   direction?: 'horizontal' | 'vertical'
   perspective?: number
 }
 
 export function Cube({
   children,
-  className,
   direction,
   perspective,
   sliderRef,
   ...props
 }: CubeSliderProps) {
-  const { attributes, eventHandlers } = extractSliderAttributes(props)
+  const { attributes, elementProps, eventHandlers } =
+    extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (direction !== undefined) {
@@ -32,9 +33,9 @@ export function Cube({
 
   return (
     <bs-cube
+      {...elementProps}
       {...htmlAttributes}
-      ref={sliderRefCallback(eventHandlers, sliderRef)}
-      class={className}>
+      ref={sliderRefCallback(eventHandlers, sliderRef)}>
       {children}
     </bs-cube>
   )

packages/react/src/Fade.tsx

@@ -1,3 +1,4 @@
+import type { FadeSliderElement } from '@boxslider/components/Fade'
 import {
   extractSliderAttributes,
   type BaseComponentProps,
@@ -6,18 +7,18 @@ import {
 
 import '@boxslider/components/Fade'
 
-export interface FadeSliderProps extends BaseComponentProps<'bs-fade'> {
+export interface FadeSliderProps extends BaseComponentProps<FadeSliderElement> {
   timingFunction?: string
 }
 
 export function FadeSlider({
   children,
-  className,
   sliderRef,
   timingFunction,
   ...props
 }: FadeSliderProps) {
-  const { attributes, eventHandlers } = extractSliderAttributes(props)
+  const { attributes, elementProps, eventHandlers } =
+    extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (timingFunction) {
@@ -26,9 +27,9 @@ export function FadeSlider({
 
   return (
     <bs-fade
+      {...elementProps}
       {...htmlAttributes}
-      ref={sliderRefCallback(eventHandlers, sliderRef)}
-      class={className}>
+      ref={sliderRefCallback(eventHandlers, sliderRef)}>
       {children}
     </bs-fade>
   )

packages/react/src/Tile.tsx

@@ -1,3 +1,4 @@
+import type { TileSliderElement } from '@boxslider/components/Tile'
 import type { TileEffect } from '@boxslider/slider'
 import {
   extractSliderAttributes,
@@ -7,22 +8,22 @@ import {
 
 import '@boxslider/components/Tile'
 
-export interface TileSliderProps extends BaseComponentProps<'bs-tile'> {
+export interface TileSliderProps extends BaseComponentProps<TileSliderElement> {
   tileEffect?: TileEffect
   rows?: number
   rowOffset?: number
 }
 
 export function TileSlider({
   children,
-  className,
   sliderRef,
   rows,
   rowOffset,
   tileEffect,
   ...props
 }: TileSliderProps) {
-  const { attributes, eventHandlers } = extractSliderAttributes(props)
+  const { attributes, elementProps, eventHandlers } =
+    extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (rows !== undefined) {
@@ -39,9 +40,9 @@ export function TileSlider({
 
   return (
     <bs-tile
+      {...elementProps}
       {...htmlAttributes}
-      ref={sliderRefCallback(eventHandlers, sliderRef)}
-      class={className}>
+      ref={sliderRefCallback(eventHandlers, sliderRef)}>
       {children}
     </bs-tile>
   )