@yamada-ui/scroll-area 1.0.25 → 1.0.26-dev-20240507152455

package/dist/{chunk-IEXANJUU.mjs → chunk-JLJG5FAP.mjs}

@@ -9,6 +9,7 @@ import {
 } from "@yamada-ui/core";
 import {
   cx,
+  dataAttr,
   handlerAll,
   isMac,
   merge,
@@ -149,12 +150,23 @@ var ScrollArea = forwardRef((props, ref) => {
       InternalScrollArea,
       {
         ref: mergeRefs(ref, scrollAreaRef),
+        "data-key": componentKey,
+        "data-hovered": dataAttr(isHovered),
+        "data-scrolling": dataAttr(isScrolling),
         ...computedProps
       },
       componentKey
     );
   } else {
-    return /* @__PURE__ */ jsx(InternalScrollArea, { ref, ...computedProps });
+    return /* @__PURE__ */ jsx(
+      InternalScrollArea,
+      {
+        ref,
+        "data-hovered": dataAttr(isHovered),
+        "data-scrolling": dataAttr(isScrolling),
+        ...computedProps
+      }
+    );
   }
 });
 var InternalScrollArea = forwardRef(
@@ -175,4 +187,4 @@ var InternalScrollArea = forwardRef(
 export {
   ScrollArea
 };
-//# sourceMappingURL=chunk-IEXANJUU.mjs.map
+//# sourceMappingURL=chunk-JLJG5FAP.mjs.map

package/dist/chunk-JLJG5FAP.mjs.map

@@ -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  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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":[]}

package/dist/index.js

@@ -155,12 +155,23 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
       InternalScrollArea,
       {
         ref: (0, import_utils.mergeRefs)(ref, scrollAreaRef),
+        "data-key": componentKey,
+        "data-hovered": (0, import_utils.dataAttr)(isHovered),
+        "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
         ...computedProps
       },
       componentKey
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalScrollArea, { ref, ...computedProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      InternalScrollArea,
+      {
+        ref,
+        "data-hovered": (0, import_utils.dataAttr)(isHovered),
+        "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
+        ...computedProps
+      }
+    );
   }
 });
 var InternalScrollArea = (0, import_core.forwardRef)(

package/dist/index.js.map

@@ -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  handlerAll,\n  isMac,\n  merge,\n  mergeRefs,\n  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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        {...computedProps}\n      />\n    )\n  } else {\n    return <InternalScrollArea ref={ref} {...computedProps} />\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":[]}
+{"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  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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":[]}

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   ScrollArea
-} from "./chunk-IEXANJUU.mjs";
+} from "./chunk-JLJG5FAP.mjs";
 export {
   ScrollArea
 };

package/dist/scroll-area.js

@@ -153,12 +153,23 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
       InternalScrollArea,
       {
         ref: (0, import_utils.mergeRefs)(ref, scrollAreaRef),
+        "data-key": componentKey,
+        "data-hovered": (0, import_utils.dataAttr)(isHovered),
+        "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
         ...computedProps
       },
       componentKey
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalScrollArea, { ref, ...computedProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      InternalScrollArea,
+      {
+        ref,
+        "data-hovered": (0, import_utils.dataAttr)(isHovered),
+        "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
+        ...computedProps
+      }
+    );
   }
 });
 var InternalScrollArea = (0, import_core.forwardRef)(

package/dist/scroll-area.js.map

@@ -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  handlerAll,\n  isMac,\n  merge,\n  mergeRefs,\n  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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        {...computedProps}\n      />\n    )\n  } else {\n    return <InternalScrollArea ref={ref} {...computedProps} />\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":[]}
+{"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  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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":[]}

package/dist/scroll-area.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   ScrollArea
-} from "./chunk-IEXANJUU.mjs";
+} from "./chunk-JLJG5FAP.mjs";
 export {
   ScrollArea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/scroll-area",
-  "version": "1.0.25",
+  "version": "1.0.26-dev-20240507152455",
   "description": "Yamada UI scroll area component",
   "keywords": [
     "yamada",

package/dist/chunk-IEXANJUU.mjs.map

@@ -1 +0,0 @@
-{"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  handlerAll,\n  isMac,\n  merge,\n  mergeRefs,\n  vendor,\n} from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} 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  useLayoutEffect(() => {\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        {...computedProps}\n      />\n    )\n  } else {\n    return <InternalScrollArea ref={ref} {...computedProps} />\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":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6KD;AAhJN,IAAM,cAA2B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,YAAY,EAAE,SAAS,OAAO;AAAA,EAC9B,wBAAwB,EAAE,SAAS,OAAO;AAC5C;AAEA,IAAM,eAA4B;AAAA,EAChC,iBAAiB,EAAE,IAAI,cAAc;AAAA,EACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,EAClD,iBAAiB,EAAE,IAAI,cAAc;AAAA,EACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,EAClD,QAAQ;AAAA,IACN,iBAAiB,EAAE,IAAI,cAAc;AAAA,IACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,IAClD,iBAAiB,EAAE,IAAI,cAAc;AAAA,IACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,IACL,iBAAiB,EAAE,IAAI,cAAc;AAAA,IACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,IAClD,iBAAiB,EAAE,IAAI,cAAc;AAAA,IACrC,8BAA8B,EAAE,IAAI,cAAc;AAAA,EACpD;AAAA,EACA,+BAA+B;AAAA,IAC7B,gBAAgB;AAAA,IAChB,QAAQ;AAAA,MACN,gBAAgB;AAAA,IAClB;AAAA,IACA,OAAO;AAAA,MACL,gBAAgB;AAAA,IAClB;AAAA,EACF;AACF;AAOO,IAAM,aAAa,WAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,cAAc,KAAK;AACnE,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkB,KAAK;AACzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,WAAW,SAAS;AAC1B,QAAM,UAAU,SAAS;AACzB,QAAM,WAAW,MAAM,KAAK,OAAO,QAAQ;AAE3C,QAAM,eAAe,OAAY,MAAS;AAC1C,QAAM,gBAAgB,OAAY,MAAS;AAC3C,QAAM,gBAAgB,OAAuB,IAAI;AACjD,QAAM,iBAAiB,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAE5C,kBAAgB,MAAM;AACpB,QAAI,CAAC,cAAc,WAAW,CAAC;AAAU;AAEzC,kBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,kBAAc,QAAQ,YAAY,eAAe,QAAQ;AAAA,EAC3D,CAAC;AAED,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAS;AAAS;AAEtB,iBAAa,aAAa,OAAO;AAEjC,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAS;AAAS;AAEtB,iBAAa,UAAU;AAAA,MACrB,MAAM,aAAa,KAAK;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,WAAW;AAAA,IACf,CAAC,OAAgC;AAC/B,YAAM,KAAK,GAAG;AAEd,YAAM,EAAE,YAAY,GAAG,WAAW,EAAE,IAAI;AACxC,YAAM,EAAE,GAAG,OAAO,GAAG,MAAM,IAAI,eAAe;AAC9C,YAAM,UAAU,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK;AAEnE,uEAAyB,EAAE,GAAG,EAAE;AAChC,qBAAe,UAAU,EAAE,GAAG,EAAE;AAEhC,UAAI,SAAS,YAAY;AAAS;AAElC,UAAI,CAAC;AAAa,uBAAe,IAAI;AAErC,mBAAa,cAAc,OAAO;AAElC,oBAAc,UAAU;AAAA,QACtB,MAAM,eAAe,KAAK;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,aAAa,wBAAwB,iBAAiB,IAAI;AAAA,EAC7D;AAEA,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa;AAAS,qBAAa,aAAa,OAAO;AAC3D,UAAI,cAAc;AAAS,qBAAa,cAAc,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,MAAmB,QAAQ,MAAM;AACrC,UAAM,YAAY,EAAE,UAAU,GAAG,OAAO;AAExC,QAAI,SAAS;AACX,aAAO,MAAM,WAAW,WAAW;AAAA,IACrC,OAAO;AACL,aAAO;AAAA,QACL;AAAA,QACA,CAAC,YAAY,CAAC,aAAa,CAAC,cAAc,eAAe,CAAC;AAAA,MAC5D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,SAAS,aAAa,UAAU,MAAM,CAAC;AAEhE,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL,OAAO;AAAA,MACP,GAAG;AAAA,MACH,cAAc,WAAW,KAAK,cAAc,YAAY;AAAA,MACxD,cAAc,WAAW,KAAK,cAAc,YAAY;AAAA,MACxD,UAAU,WAAW,KAAK,UAAU,QAAQ;AAAA,IAC9C;AAAA,IACA,CAAC,KAAK,cAAc,cAAc,UAAU,IAAI;AAAA,EAClD;AAEA,MAAI,UAAU;AAEZ,UAAM,eAAe,GAAG,SAAS,IAAI,WAAW;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QAGC,KAAK,UAAU,KAAK,aAAa;AAAA,QAChC,GAAG;AAAA;AAAA,MAFC;AAAA,IAGP;AAAA,EAEJ,OAAO;AACL,WAAO,oBAAC,sBAAmB,KAAW,GAAG,eAAe;AAAA,EAC1D;AACF,CAAC;AAKD,IAAM,qBAAqB;AAAA,EACzB,CAAC,EAAE,WAAW,YAAY,UAAU,GAAG,KAAK,GAAG,QAAQ;AACrD,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,UAAU;AAAA,QACT,GAAG;AAAA,QAEH,uBACC,oBAAC,GAAG,KAAH,EAAO,WAAU,yBAAyB,GAAG,YAC3C,UACH,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;","names":[]}