fix(demo): fix React 19 type issues and reproduction for much overflow

release-npm

Author: tobua

arrow.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, JSX, ReactNode } from 'react'
+import type React from 'react'
 import type { FadeDirection } from './types'
 
 type ArrowIcon = 'arrow-rounded' | 'pointer-rounded' | 'arrow' | 'pointer'
@@ -9,7 +9,7 @@ export interface ArrowProps {
   icon: ArrowIcon
   color: string
   image?: string
-  markup?: JSX.Element | ReactNode
+  markup?: React.JSX.Element | React.ReactNode
 }
 
 export const defaultArrowProps: ArrowProps = {
@@ -26,7 +26,7 @@ const directionToRotation = {
 }
 
 export function Arrow({ icon, color, markup, image, direction }: ArrowProps & { direction: FadeDirection }) {
-  const style: CSSProperties = {
+  const style: React.CSSProperties = {
     width: 12,
     height: 12,
     display: 'block',

demo/index.tsx

@@ -309,6 +309,13 @@ const MyGrid = () => (
         <Box />
         <Box />
       </Scroll>
+      <Heading as="h3">Tons of overflow</Heading>
+      <Paragraph>Fade in takes a long time to appear.</Paragraph>
+      <Scroll overflowStyle={{ gap: scale(10) }}>
+        {Array.from({ length: 200 }).map((_, i) => (
+          <Box key={i} />
+        ))}
+      </Scroll>
       <Heading as="h3">Dynamic Content Size</Heading>
       <Scroll style={{ maxWidth: 360 }} overflowStyle={{ gap: scale(10) }}>
         <DynamicContent>

demo/package.json

@@ -6,16 +6,16 @@
     "types": "tsc"
   },
   "dependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@rsbuild/core": "^1.0.1-beta.11",
-    "@rsbuild/plugin-react": "^1.0.1-beta.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "optica": "^3.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sugar-high": "^0.7.0",
-    "typescript": "^5.5.4"
+    "@biomejs/biome": "^1.9.4",
+    "@rsbuild/core": "^1.3.21",
+    "@rsbuild/plugin-react": "^1.3.1",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "optica": "^3.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sugar-high": "^0.9.3",
+    "typescript": "^5.8.3"
   },
   "localDependencies": {
     "overflow-scroll-fade": ".."

index.tsx

@@ -1,22 +1,23 @@
-import { type CSSProperties, type Dispatch, type JSX, type SetStateAction, useEffect, useRef, useState } from 'react'
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Arrow, type ArrowProps, defaultArrowProps, getArrowPosition } from './arrow'
 import type { FadeDirection, Props, ScrollDirection } from './types'
 
 const supportsScrollTimeline = 'scrollTimeline' in document.documentElement.style
 
-const wrapperStyles: CSSProperties = {
+const wrapperStyles: React.CSSProperties = {
   position: 'relative',
 }
 
-const overflowStyles = (direction: ScrollDirection): CSSProperties => ({
+const overflowStyles = (direction: ScrollDirection): React.CSSProperties => ({
   display: 'flex',
   overflow: 'auto',
   height: direction === 'vertical' ? '100%' : 'auto',
   scrollTimelineName: '--indicate-scroll-element',
   scrollTimelineAxis: direction === 'horizontal' ? 'x' : 'y',
 })
 
-const fadeStyles = (direction: FadeDirection, horizontal: boolean, color: string): CSSProperties => ({
+const fadeStyles = (direction: FadeDirection, horizontal: boolean, color: string): React.CSSProperties => ({
   display: 'flex',
   position: 'absolute',
   outline: 'none',
@@ -74,7 +75,7 @@ function checkOverflow(
   element: HTMLDivElement,
   direction: ScrollDirection,
   hasOverflow: boolean,
-  setHasOverflow: Dispatch<SetStateAction<boolean>>,
+  setHasOverflow: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   if (element) {
     if (direction === 'horizontal') {
@@ -102,7 +103,7 @@ function getUserNodes(element: HTMLDivElement) {
   return nodes
 }
 
-function Fallback<T extends keyof JSX.IntrinsicElements = 'div'>({
+function Fallback<T extends keyof React.JSX.IntrinsicElements = 'div'>({
   children,
   overflowStyle,
   style,
@@ -134,7 +135,7 @@ function Fade({
   arrow,
 }: {
   direction: FadeDirection
-  style?: CSSProperties
+  style?: React.CSSProperties
   color: string
   arrow: ArrowProps | boolean
 }) {
@@ -165,7 +166,7 @@ function Fade({
   )
 }
 
-export function Scroll<T extends keyof JSX.IntrinsicElements = 'div'>({
+export function Scroll<T extends keyof React.JSX.IntrinsicElements = 'div'>({
   direction = 'horizontal',
   color = '#FFF',
   style = {},
@@ -201,7 +202,7 @@ export function Scroll<T extends keyof JSX.IntrinsicElements = 'div'>({
     observer.observe(element, { childList: true, subtree: true })
 
     // Observe if any of the children change their size.
-    if (userNodes.length) {
+    if (userNodes.length > 0) {
       for (const node of userNodes) {
         resizeObserver.observe(node)
       }

package.json

@@ -14,10 +14,10 @@
     "demo"
   ],
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@types/react": "^18.3.3",
-    "typescript": "^5.5.4",
-    "zero-configuration": "^0.17.2"
+    "@biomejs/biome": "^1.9.4",
+    "@types/react": "^19.1.4",
+    "typescript": "^5.8.3",
+    "zero-configuration": "^0.19.0"
   },
   "peerDependencies": {
     "react": ">= 18",

types.ts

@@ -1,15 +1,15 @@
-import type { CSSProperties, JSX } from 'react'
+import type React from 'react'
 import type { ArrowProps } from './arrow'
 
 export type FadeDirection = 'top' | 'right' | 'bottom' | 'left'
 export type ScrollDirection = 'horizontal' | 'vertical'
 
-export type Props<T extends keyof JSX.IntrinsicElements = 'div'> = JSX.IntrinsicElements[T] & {
+export type Props<T extends keyof React.JSX.IntrinsicElements = 'div'> = React.JSX.IntrinsicElements[T] & {
   as?: T
   direction?: ScrollDirection
   color?: string
-  overflowStyle?: CSSProperties
-  indicatorStyle?: CSSProperties
-  fallbackStyle?: CSSProperties
+  overflowStyle?: React.CSSProperties
+  indicatorStyle?: React.CSSProperties
+  fallbackStyle?: React.CSSProperties
   arrow?: ArrowProps | boolean
 }