@yamada-ui/scroll-area 1.0.40-dev-20241005224505 → 1.0.40-dev-20241006032009

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/dist/{chunk-O3DMBP23.mjs → chunk-IONF7VKP.mjs} +24 -24
  2. package/dist/{chunk-O3DMBP23.mjs.map → chunk-IONF7VKP.mjs.map} +1 -1
  3. package/dist/index.js +22 -22
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/scroll-area.d.mts +5 -5
  7. package/dist/scroll-area.d.ts +5 -5
  8. package/dist/scroll-area.js +22 -22
  9. package/dist/scroll-area.js.map +1 -1
  10. package/dist/scroll-area.mjs +1 -1
  11. package/package.json +3 -3
package/dist/{chunk-O3DMBP23.mjs → chunk-IONF7VKP.mjs} RENAMED
@@ -2,9 +2,9 @@
2
2
 
3
3
  // src/scroll-area.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
6
  omitThemeProps,
7
+ ui,
8
8
  useComponentStyle
9
9
  } from "@yamada-ui/core";
10
10
  import {
@@ -20,36 +20,36 @@ import {
20
20
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
21
21
  import { jsx } from "react/jsx-runtime";
22
22
  var neverStyles = {
23
- scrollbarWidth: "none",
23
+ "&::-webkit-scrollbar": { display: "none" },
24
24
  _scrollbar: { display: "none" },
25
- "&::-webkit-scrollbar": { display: "none" }
25
+ scrollbarWidth: "none"
26
26
  };
27
27
  var hiddenStyles = {
28
- _scrollbarTrack: { bg: "transparent" },
29
- "&::-webkit-scrollbar-track": { bg: "transparent" },
30
- _scrollbarThumb: { bg: "transparent" },
31
28
  "&::-webkit-scrollbar-thumb": { bg: "transparent" },
32
- _light: {
33
- _scrollbarTrack: { bg: "transparent" },
29
+ "&::-webkit-scrollbar-track": { bg: "transparent" },
30
+ "@-moz-document url-prefix()": {
31
+ _dark: {
32
+ scrollbarColor: "transparent transparent"
33
+ },
34
+ _light: {
35
+ scrollbarColor: "transparent transparent"
36
+ },
37
+ scrollbarColor: "transparent transparent"
38
+ },
39
+ _dark: {
40
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
34
41
  "&::-webkit-scrollbar-track": { bg: "transparent" },
35
42
  _scrollbarThumb: { bg: "transparent" },
36
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
43
+ _scrollbarTrack: { bg: "transparent" }
37
44
  },
38
- _dark: {
39
- _scrollbarTrack: { bg: "transparent" },
45
+ _light: {
46
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
40
47
  "&::-webkit-scrollbar-track": { bg: "transparent" },
41
48
  _scrollbarThumb: { bg: "transparent" },
42
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
49
+ _scrollbarTrack: { bg: "transparent" }
43
50
  },
44
- "@-moz-document url-prefix()": {
45
- scrollbarColor: "transparent transparent",
46
- _light: {
47
- scrollbarColor: "transparent transparent"
48
- },
49
- _dark: {
50
- scrollbarColor: "transparent transparent"
51
- }
52
- }
51
+ _scrollbarThumb: { bg: "transparent" },
52
+ _scrollbarTrack: { bg: "transparent" }
53
53
  };
54
54
  var ScrollArea = forwardRef((props, ref) => {
55
55
  const [styles, mergedProps] = useComponentStyle("ScrollArea", props);
@@ -137,8 +137,8 @@ var ScrollArea = forwardRef((props, ref) => {
137
137
  InternalScrollArea,
138
138
  {
139
139
  ref: mergeRefs(ref, scrollAreaRef),
140
- "data-key": componentKey,
141
140
  "data-hovered": dataAttr(isHovered),
141
+ "data-key": componentKey,
142
142
  "data-scrolling": dataAttr(isScrolling),
143
143
  ...computedProps
144
144
  },
@@ -159,7 +159,7 @@ var ScrollArea = forwardRef((props, ref) => {
159
159
  ScrollArea.displayName = "ScrollArea";
160
160
  ScrollArea.__ui__ = "ScrollArea";
161
161
  var InternalScrollArea = forwardRef(
162
- ({ className, innerProps, children, ...rest }, ref) => {
162
+ ({ className, children, innerProps, ...rest }, ref) => {
163
163
  return /* @__PURE__ */ jsx(
164
164
  ui.div,
165
165
  {
@@ -178,4 +178,4 @@ InternalScrollArea.__ui__ = "InternalScrollArea";
178
178
  export {
179
179
  ScrollArea
180
180
  };
181
- //# sourceMappingURL=chunk-O3DMBP23.mjs.map
181
+ //# sourceMappingURL=chunk-IONF7VKP.mjs.map
package/dist/{chunk-O3DMBP23.mjs.map → chunk-IONF7VKP.mjs.map} RENAMED
@@ -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\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\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 type { UIEvent } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n \"&::-webkit-scrollbar\": { display: \"none\" },\n _scrollbar: { display: \"none\" },\n scrollbarWidth: \"none\",\n}\n\nconst hiddenStyles: CSSUIObject = {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n \"@-moz-document url-prefix()\": {\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _light: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\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-hovered={dataAttr(isHovered)}\n data-key={componentKey}\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, children, innerProps, ...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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\n"],"mappings":"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","names":[]}
package/dist/index.js CHANGED
@@ -31,36 +31,36 @@ var import_utils = require("@yamada-ui/utils");
31
31
  var import_react = require("react");
32
32
  var import_jsx_runtime = require("react/jsx-runtime");
33
33
  var neverStyles = {
34
- scrollbarWidth: "none",
34
+ "&::-webkit-scrollbar": { display: "none" },
35
35
  _scrollbar: { display: "none" },
36
- "&::-webkit-scrollbar": { display: "none" }
36
+ scrollbarWidth: "none"
37
37
  };
38
38
  var hiddenStyles = {
39
- _scrollbarTrack: { bg: "transparent" },
40
- "&::-webkit-scrollbar-track": { bg: "transparent" },
41
- _scrollbarThumb: { bg: "transparent" },
42
39
  "&::-webkit-scrollbar-thumb": { bg: "transparent" },
43
- _light: {
44
- _scrollbarTrack: { bg: "transparent" },
40
+ "&::-webkit-scrollbar-track": { bg: "transparent" },
41
+ "@-moz-document url-prefix()": {
42
+ _dark: {
43
+ scrollbarColor: "transparent transparent"
44
+ },
45
+ _light: {
46
+ scrollbarColor: "transparent transparent"
47
+ },
48
+ scrollbarColor: "transparent transparent"
49
+ },
50
+ _dark: {
51
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
45
52
  "&::-webkit-scrollbar-track": { bg: "transparent" },
46
53
  _scrollbarThumb: { bg: "transparent" },
47
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
54
+ _scrollbarTrack: { bg: "transparent" }
48
55
  },
49
- _dark: {
50
- _scrollbarTrack: { bg: "transparent" },
56
+ _light: {
57
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
51
58
  "&::-webkit-scrollbar-track": { bg: "transparent" },
52
59
  _scrollbarThumb: { bg: "transparent" },
53
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
60
+ _scrollbarTrack: { bg: "transparent" }
54
61
  },
55
- "@-moz-document url-prefix()": {
56
- scrollbarColor: "transparent transparent",
57
- _light: {
58
- scrollbarColor: "transparent transparent"
59
- },
60
- _dark: {
61
- scrollbarColor: "transparent transparent"
62
- }
63
- }
62
+ _scrollbarThumb: { bg: "transparent" },
63
+ _scrollbarTrack: { bg: "transparent" }
64
64
  };
65
65
  var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
66
66
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("ScrollArea", props);
@@ -148,8 +148,8 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
148
148
  InternalScrollArea,
149
149
  {
150
150
  ref: (0, import_utils.mergeRefs)(ref, scrollAreaRef),
151
- "data-key": componentKey,
152
151
  "data-hovered": (0, import_utils.dataAttr)(isHovered),
152
+ "data-key": componentKey,
153
153
  "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
154
154
  ...computedProps
155
155
  },
@@ -170,7 +170,7 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
170
170
  ScrollArea.displayName = "ScrollArea";
171
171
  ScrollArea.__ui__ = "ScrollArea";
172
172
  var InternalScrollArea = (0, import_core.forwardRef)(
173
- ({ className, innerProps, children, ...rest }, ref) => {
173
+ ({ className, children, innerProps, ...rest }, ref) => {
174
174
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
175
175
  import_core.ui.div,
176
176
  {
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\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\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 type { UIEvent } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n \"&::-webkit-scrollbar\": { display: \"none\" },\n _scrollbar: { display: \"none\" },\n scrollbarWidth: \"none\",\n}\n\nconst hiddenStyles: CSSUIObject = {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n \"@-moz-document url-prefix()\": {\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _light: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\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-hovered={dataAttr(isHovered)}\n data-key={componentKey}\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, children, innerProps, ...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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\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-O3DMBP23.mjs";
4
+ } from "./chunk-IONF7VKP.mjs";
5
5
  export {
6
6
  ScrollArea
7
7
  };
package/dist/scroll-area.d.mts CHANGED
@@ -7,17 +7,17 @@ interface ScrollAreaOptions {
7
7
  *
8
8
  * @default 'hover'
9
9
  */
10
- type?: "always" | "scroll" | "hover" | "never";
11
- /**
12
- * Props for inner element.
13
- */
14
- innerProps?: HTMLUIProps;
10
+ type?: "always" | "hover" | "never" | "scroll";
15
11
  /**
16
12
  * Delay in milliseconds before scrollbars are hidden.
17
13
  *
18
14
  * @default 1000
19
15
  */
20
16
  scrollHideDelay?: number;
17
+ /**
18
+ * Props for inner element.
19
+ */
20
+ innerProps?: HTMLUIProps;
21
21
  /**
22
22
  * Callback function for when the scroll position changes.
23
23
  */
package/dist/scroll-area.d.ts CHANGED
@@ -7,17 +7,17 @@ interface ScrollAreaOptions {
7
7
  *
8
8
  * @default 'hover'
9
9
  */
10
- type?: "always" | "scroll" | "hover" | "never";
11
- /**
12
- * Props for inner element.
13
- */
14
- innerProps?: HTMLUIProps;
10
+ type?: "always" | "hover" | "never" | "scroll";
15
11
  /**
16
12
  * Delay in milliseconds before scrollbars are hidden.
17
13
  *
18
14
  * @default 1000
19
15
  */
20
16
  scrollHideDelay?: number;
17
+ /**
18
+ * Props for inner element.
19
+ */
20
+ innerProps?: HTMLUIProps;
21
21
  /**
22
22
  * Callback function for when the scroll position changes.
23
23
  */
package/dist/scroll-area.js CHANGED
@@ -29,36 +29,36 @@ var import_utils = require("@yamada-ui/utils");
29
29
  var import_react = require("react");
30
30
  var import_jsx_runtime = require("react/jsx-runtime");
31
31
  var neverStyles = {
32
- scrollbarWidth: "none",
32
+ "&::-webkit-scrollbar": { display: "none" },
33
33
  _scrollbar: { display: "none" },
34
- "&::-webkit-scrollbar": { display: "none" }
34
+ scrollbarWidth: "none"
35
35
  };
36
36
  var hiddenStyles = {
37
- _scrollbarTrack: { bg: "transparent" },
38
- "&::-webkit-scrollbar-track": { bg: "transparent" },
39
- _scrollbarThumb: { bg: "transparent" },
40
37
  "&::-webkit-scrollbar-thumb": { bg: "transparent" },
41
- _light: {
42
- _scrollbarTrack: { bg: "transparent" },
38
+ "&::-webkit-scrollbar-track": { bg: "transparent" },
39
+ "@-moz-document url-prefix()": {
40
+ _dark: {
41
+ scrollbarColor: "transparent transparent"
42
+ },
43
+ _light: {
44
+ scrollbarColor: "transparent transparent"
45
+ },
46
+ scrollbarColor: "transparent transparent"
47
+ },
48
+ _dark: {
49
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
43
50
  "&::-webkit-scrollbar-track": { bg: "transparent" },
44
51
  _scrollbarThumb: { bg: "transparent" },
45
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
52
+ _scrollbarTrack: { bg: "transparent" }
46
53
  },
47
- _dark: {
48
- _scrollbarTrack: { bg: "transparent" },
54
+ _light: {
55
+ "&::-webkit-scrollbar-thumb": { bg: "transparent" },
49
56
  "&::-webkit-scrollbar-track": { bg: "transparent" },
50
57
  _scrollbarThumb: { bg: "transparent" },
51
- "&::-webkit-scrollbar-thumb": { bg: "transparent" }
58
+ _scrollbarTrack: { bg: "transparent" }
52
59
  },
53
- "@-moz-document url-prefix()": {
54
- scrollbarColor: "transparent transparent",
55
- _light: {
56
- scrollbarColor: "transparent transparent"
57
- },
58
- _dark: {
59
- scrollbarColor: "transparent transparent"
60
- }
61
- }
60
+ _scrollbarThumb: { bg: "transparent" },
61
+ _scrollbarTrack: { bg: "transparent" }
62
62
  };
63
63
  var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
64
64
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("ScrollArea", props);
@@ -146,8 +146,8 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
146
146
  InternalScrollArea,
147
147
  {
148
148
  ref: (0, import_utils.mergeRefs)(ref, scrollAreaRef),
149
- "data-key": componentKey,
150
149
  "data-hovered": (0, import_utils.dataAttr)(isHovered),
150
+ "data-key": componentKey,
151
151
  "data-scrolling": (0, import_utils.dataAttr)(isScrolling),
152
152
  ...computedProps
153
153
  },
@@ -168,7 +168,7 @@ var ScrollArea = (0, import_core.forwardRef)((props, ref) => {
168
168
  ScrollArea.displayName = "ScrollArea";
169
169
  ScrollArea.__ui__ = "ScrollArea";
170
170
  var InternalScrollArea = (0, import_core.forwardRef)(
171
- ({ className, innerProps, children, ...rest }, ref) => {
171
+ ({ className, children, innerProps, ...rest }, ref) => {
172
172
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
173
173
  import_core.ui.div,
174
174
  {
package/dist/scroll-area.js.map CHANGED
@@ -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\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\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 type { UIEvent } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nconst neverStyles: CSSUIObject = {\n \"&::-webkit-scrollbar\": { display: \"none\" },\n _scrollbar: { display: \"none\" },\n scrollbarWidth: \"none\",\n}\n\nconst hiddenStyles: CSSUIObject = {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n \"@-moz-document url-prefix()\": {\n _dark: {\n scrollbarColor: \"transparent transparent\",\n },\n _light: {\n scrollbarColor: \"transparent transparent\",\n },\n scrollbarColor: \"transparent transparent\",\n },\n _dark: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _light: {\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n },\n _scrollbarThumb: { bg: \"transparent\" },\n _scrollbarTrack: { bg: \"transparent\" },\n}\n\ninterface ScrollAreaOptions {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\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-hovered={dataAttr(isHovered)}\n data-key={componentKey}\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})\nScrollArea.displayName = \"ScrollArea\"\nScrollArea.__ui__ = \"ScrollArea\"\n\ntype InternalScrollAreaProps = HTMLUIProps & Pick<ScrollAreaProps, \"innerProps\">\n\nconst InternalScrollArea = forwardRef<InternalScrollAreaProps, \"div\">(\n ({ className, children, innerProps, ...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\nInternalScrollArea.displayName = \"InternalScrollArea\"\nInternalScrollArea.__ui__ = \"InternalScrollArea\"\n"],"mappings":"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","names":[]}
package/dist/scroll-area.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  ScrollArea
4
- } from "./chunk-O3DMBP23.mjs";
4
+ } from "./chunk-IONF7VKP.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.40-dev-20241005224505",
3
+ "version": "1.0.40-dev-20241006032009",
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.15.2-dev-20241005224505",
40
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-dev-20241006032009",
40
+ "@yamada-ui/utils": "1.5.3-dev-20241006032009"
41
41
  },
42
42
  "devDependencies": {
43
43
  "clean-package": "2.2.0",