@yamada-ui/scroll-area 0.3.23 → 0.3.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-WMLMTTAK.mjs → chunk-YNRTBOQQ.mjs} +1 -0
- package/dist/chunk-YNRTBOQQ.mjs.map +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -0
- package/dist/scroll-area.js +1 -0
- package/dist/scroll-area.js.map +1 -0
- package/dist/scroll-area.mjs +2 -1
- package/dist/scroll-area.mjs.map +1 -0
- package/package.json +5 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx, handlerAll, merge } from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n}\n\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n className,\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n children,\n innerProps,\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\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\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 onScrollPositionChange?.({\n x: (ev.target as HTMLDivElement).scrollLeft,\n y: (ev.target as HTMLDivElement).scrollTop,\n })\n\n if (type !== \"scroll\") 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 return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\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 {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"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -0,0 +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 { cx, handlerAll, merge } from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n}\n\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n className,\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n children,\n innerProps,\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\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\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 onScrollPositionChange?.({\n x: (ev.target as HTMLDivElement).scrollLeft,\n y: (ev.target as HTMLDivElement).scrollTop,\n })\n\n if (type !== \"scroll\") 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 return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\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 {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"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/scroll-area.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/scroll-area.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { cx, handlerAll, merge } from \"@yamada-ui/utils\"\nimport type { UIEvent } from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype ScrollAreaOptions = {\n /**\n * Scrollbar visibility type.\n *\n * @default 'hover'\n */\n type?: \"always\" | \"scroll\" | \"hover\" | \"never\"\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps<\"div\">\n /**\n * Delay in milliseconds before scrollbars are hidden.\n *\n * @default 1000\n */\n scrollHideDelay?: number\n /**\n * Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport type ScrollAreaProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"ScrollArea\"> &\n ScrollAreaOptions\n\nconst neverStyles: CSSUIObject = {\n scrollbarWidth: \"none\",\n _scrollbar: { display: \"none\" },\n \"&::-webkit-scrollbar\": { display: \"none\" },\n}\n\nconst hiddenStyles: CSSUIObject = {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n _light: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n _dark: {\n _scrollbarTrack: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n _scrollbarThumb: { bg: \"transparent\" },\n \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n },\n}\n\nexport const ScrollArea = forwardRef<ScrollAreaProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"ScrollArea\", props)\n const {\n className,\n type = \"hover\",\n overflow = \"overlay\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n children,\n innerProps,\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\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\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 onScrollPositionChange?.({\n x: (ev.target as HTMLDivElement).scrollLeft,\n y: (ev.target as HTMLDivElement).scrollTop,\n })\n\n if (type !== \"scroll\") 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 return (\n <ui.div\n ref={ref}\n className={cx(\"ui-scroll-area\", className)}\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 {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"],"mappings":"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","names":[]}
|
package/dist/scroll-area.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/scroll-area",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.25",
|
|
4
4
|
"description": "Yamada UI scroll area component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.14.
|
|
39
|
-
"@yamada-ui/utils": "0.
|
|
38
|
+
"@yamada-ui/core": "0.14.2",
|
|
39
|
+
"@yamada-ui/utils": "0.5.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"react": "^18.0.0",
|
|
@@ -55,7 +55,8 @@
|
|
|
55
55
|
],
|
|
56
56
|
"banner": {
|
|
57
57
|
"js": "\"use client\""
|
|
58
|
-
}
|
|
58
|
+
},
|
|
59
|
+
"sourcemap": true
|
|
59
60
|
},
|
|
60
61
|
"module": "dist/index.mjs",
|
|
61
62
|
"types": "dist/index.d.ts",
|