@yamada-ui/scroll-area 1.0.37 → 1.0.38-dev-20240917033401

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -174,4 +174,4 @@ var InternalScrollArea = forwardRef(
174
174
  export {
175
175
  ScrollArea
176
176
  };
177
- //# sourceMappingURL=chunk-X5P7TVZN.mjs.map
177
+ //# sourceMappingURL=chunk-QHYMGAA2.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport interface ScrollAreaProps\n extends HTMLUIProps,\n ThemeProps<\"ScrollArea\">,\n ScrollAreaOptions {}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/scroll-area.tsx"],"sourcesContent":["export { ScrollArea } from \"./scroll-area\"\nexport type { ScrollAreaProps } from \"./scroll-area\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n //Added the safari check here, reduce computing for other browsers\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n // Added the key here\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps<\"div\"> &\n Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/scroll-area.tsx"],"sourcesContent":["export { ScrollArea } from \"./scroll-area\"\nexport type { ScrollAreaProps } from \"./scroll-area\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport interface ScrollAreaProps\n extends HTMLUIProps,\n ThemeProps<\"ScrollArea\">,\n ScrollAreaOptions {}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ScrollArea
4
- } from "./chunk-X5P7TVZN.mjs";
4
+ } from "./chunk-QHYMGAA2.mjs";
5
5
  export {
6
6
  ScrollArea
7
7
  };
@@ -1,7 +1,7 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
3
3
 
4
- type ScrollAreaOptions = {
4
+ interface ScrollAreaOptions {
5
5
  /**
6
6
  * Scrollbar visibility type.
7
7
  *
@@ -11,7 +11,7 @@ type ScrollAreaOptions = {
11
11
  /**
12
12
  * Props for inner element.
13
13
  */
14
- innerProps?: HTMLUIProps<"div">;
14
+ innerProps?: HTMLUIProps;
15
15
  /**
16
16
  * Delay in milliseconds before scrollbars are hidden.
17
17
  *
@@ -25,8 +25,9 @@ type ScrollAreaOptions = {
25
25
  x: number;
26
26
  y: number;
27
27
  }) => void;
28
- };
29
- type ScrollAreaProps = HTMLUIProps<"div"> & ThemeProps<"ScrollArea"> & ScrollAreaOptions;
28
+ }
29
+ interface ScrollAreaProps extends HTMLUIProps, ThemeProps<"ScrollArea">, ScrollAreaOptions {
30
+ }
30
31
  /**
31
32
  * `ScrollArea` is a component that displays a customized scrollbar.
32
33
  *
@@ -1,7 +1,7 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
3
3
 
4
- type ScrollAreaOptions = {
4
+ interface ScrollAreaOptions {
5
5
  /**
6
6
  * Scrollbar visibility type.
7
7
  *
@@ -11,7 +11,7 @@ type ScrollAreaOptions = {
11
11
  /**
12
12
  * Props for inner element.
13
13
  */
14
- innerProps?: HTMLUIProps<"div">;
14
+ innerProps?: HTMLUIProps;
15
15
  /**
16
16
  * Delay in milliseconds before scrollbars are hidden.
17
17
  *
@@ -25,8 +25,9 @@ type ScrollAreaOptions = {
25
25
  x: number;
26
26
  y: number;
27
27
  }) => void;
28
- };
29
- type ScrollAreaProps = HTMLUIProps<"div"> & ThemeProps<"ScrollArea"> & ScrollAreaOptions;
28
+ }
29
+ interface ScrollAreaProps extends HTMLUIProps, ThemeProps<"ScrollArea">, ScrollAreaOptions {
30
+ }
30
31
  /**
31
32
  * `ScrollArea` is a component that displays a customized scrollbar.
32
33
  *
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n //Added the safari check here, reduce computing for other browsers\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n // Added the key here\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps<\"div\"> &\n Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport interface ScrollAreaProps\n extends HTMLUIProps,\n ThemeProps<\"ScrollArea\">,\n ScrollAreaOptions {}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ScrollArea
4
- } from "./chunk-X5P7TVZN.mjs";
4
+ } from "./chunk-QHYMGAA2.mjs";
5
5
  export {
6
6
  ScrollArea
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/scroll-area",
3
- "version": "1.0.37",
3
+ "version": "1.0.38-dev-20240917033401",
4
4
  "description": "Yamada UI scroll area component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,8 +36,8 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.14.0",
40
- "@yamada-ui/utils": "1.5.0"
39
+ "@yamada-ui/core": "1.14.1-dev-20240917033401",
40
+ "@yamada-ui/utils": "1.5.1-dev-20240917033401"
41
41
  },
42
42
  "devDependencies": {
43
43
  "clean-package": "2.2.0",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isMac,\n merge,\n mergeRefs,\n useSafeLayoutEffect,\n vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n \"@-moz-document url-prefix()\": {\n scrollbarColor: \"transparent transparent\",\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n },\n}\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see Docs https://yamada-ui.com/components/data-display/scroll-area\n */\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n } = omitThemeProps(mergedProps)\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isSafari = isMac() && vendor(/apple/i)\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current || !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" || isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const css: CSSUIObject = useMemo(() => {\n const baseStyle = { overflow, ...styles }\n\n if (isNever) {\n return merge(baseStyle, neverStyles)\n } else {\n return merge(\n baseStyle,\n !isAlways && !isHovered && !isScrolling ? hiddenStyles : {},\n )\n }\n }, [isAlways, isHovered, isNever, isScrolling, overflow, styles])\n\n const computedProps = useMemo(\n () => ({\n __css: css,\n ...rest,\n onMouseEnter: handlerAll(rest.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(rest.onMouseLeave, onMouseLeave),\n onScroll: handlerAll(rest.onScroll, onScroll),\n }),\n [css, onMouseEnter, onMouseLeave, onScroll, rest],\n )\n\n if (isSafari) {\n //Added the safari check here, reduce computing for other browsers\n const componentKey = `${isHovered}-${isScrolling}`\n\n return (\n <InternalScrollArea\n // Added the key here\n key={componentKey}\n ref={mergeRefs(ref, scrollAreaRef)}\n data-key={componentKey}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n } else {\n return (\n <InternalScrollArea\n ref={ref}\n data-hovered={dataAttr(isHovered)}\n data-scrolling={dataAttr(isScrolling)}\n {...computedProps}\n />\n )\n }\n})\n\ntype InternalScrollAreaProps = HTMLUIProps<\"div\"> &\n Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, innerProps, children, ...rest }, ref) => {\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\n tabIndex={0}\n {...rest}\n >\n {innerProps ? (\n <ui.div className=\"ui-scroll-area__inner\" {...innerProps}>\n {children}\n </ui.div>\n ) : (\n children\n )}\n </ui.div>\n )\n },\n)\n"],"mappings":"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","names":[]}