deepsea-components 5.17.13 → 5.17.14

package/dist/components/AutoScroll.cjs

@@ -34,15 +34,14 @@ const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const external_Scroll_cjs_namespaceObject = require("./Scroll.cjs");
-const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
-    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
+const AutoScroll = ({ ref, count, itemSize, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, direction = "vertical", ...rest })=>{
+    const isVertical = "vertical" === direction;
     const bar = (0, external_react_namespaceObject.useRef)(null);
     const timeout = (0, external_react_namespaceObject.useRef)(void 0);
     const ele = (0, external_react_namespaceObject.useRef)(null);
     const size = (0, external_soda_hooks_namespaceObject.useSize)(ele);
     const pausedRef = (0, external_react_namespaceObject.useRef)(false);
-    const pausedProps = (0, external_react_namespaceObject.useRef)(paused);
-    pausedProps.current = paused;
+    const getPaused = (0, external_react_namespaceObject.useEffectEvent)(()=>paused);
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, []);
     (0, external_react_namespaceObject.useImperativeHandle)(scrollbar, ()=>bar.current, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -53,23 +52,24 @@ const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
     (0, external_react_namespaceObject.useEffect)(()=>{
         var _bar_current;
         if (!size || 0 === count) return;
-        const { height } = size;
-        const range = (0, external_deepsea_tools_namespaceObject.getArray)(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
-        const scrollHeight = range[range.length - 1];
-        if (height >= scrollHeight) return;
+        const containerSize = isVertical ? size.height : size.width;
+        if (0 === itemSize || 0 === containerSize) return;
+        const range = (0, external_deepsea_tools_namespaceObject.getArray)(count, (index)=>(itemSize + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+        const scrollLength = range.at(-1);
+        if (containerSize >= scrollLength) return;
         function scroll(target) {
             clearTimeout(timeout.current);
             timeout.current = setTimeout(()=>{
                 var _bar_current;
-                if (pausedRef.current || pausedProps.current) return scroll(target);
-                null == (_bar_current = bar.current) || _bar_current.scrollTo(0, target, animation);
+                if (pausedRef.current || getPaused()) return scroll(target);
+                null == (_bar_current = bar.current) || _bar_current.scrollTo(isVertical ? 0 : target, isVertical ? target : 0, animation);
             }, duration);
         }
         scroll(range[0]);
         function listener(status) {
-            const { y } = status.offset;
-            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
-            const target = scrollToBottom ? 0 : range.find((item)=>item > y);
+            const offset = isVertical ? status.offset.y : status.offset.x;
+            const scrollToEnd = Math.abs(offset + containerSize - scrollLength) / itemSize <= 0.05;
+            const target = scrollToEnd ? 0 : range.find((item)=>item > offset);
             scroll(target);
         }
         null == (_bar_current = bar.current) || _bar_current.addListener(listener);
@@ -82,10 +82,11 @@ const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
     }, [
         size,
         count,
-        itemHeight,
+        itemSize,
         gap,
         duration,
-        animation
+        animation,
+        isVertical
     ]);
     function onContainerMouseEnter(e) {
         if (playOnMouseEnter) return;
@@ -97,6 +98,15 @@ const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         pausedRef.current = false;
         null == onMouseLeave || onMouseLeave(e);
     }
+    const containerStyle2 = (0, css_namespaceObject.css)`
+        display: flex;
+        flex-direction: var(--flex-direction, column);
+        gap: var(--gap, 0);
+
+        & > * {
+            flex: none;
+        }
+    `;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Scroll_cjs_namespaceObject.Scroll, {
         ref: ele,
         scrollbar: bar,
@@ -104,21 +114,15 @@ const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         onMouseLeave: onContainerMouseLeave,
         ...rest,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
-                    `, containerClassName),
+            className: (0, external_deepsea_tools_namespaceObject.clsx)(containerStyle2, containerClassName),
             style: (0, index_cjs_namespaceObject.transformCSSVariable)({
-                gap: (0, index_cjs_namespaceObject.px)(gap)
+                gap: (0, index_cjs_namespaceObject.px)(gap),
+                flexDirection: isVertical ? "column" : "row"
             }, containerStyle),
             children: children
         })
     });
-});
+};
 exports.AutoScroll = __webpack_exports__.AutoScroll;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "AutoScroll"

package/dist/components/AutoScroll.d.ts

@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import { CSSProperties, FC } from "react";
 import { ScrollProps } from "./Scroll";
 export interface AutoScrollProps extends ScrollProps {
     /** 轮播元素的个数 */
     count: number;
-    /** 轮播元素的高度 */
-    itemHeight: number;
+    /** 轮播元素的尺寸（垂直滚动时为高度，水平滚动时为宽度） */
+    itemSize: number;
     /**
      * 轮播动画的时间，单位毫秒
      * @default 1000
@@ -24,6 +24,11 @@ export interface AutoScrollProps extends ScrollProps {
     containerClassName?: string;
     /** 容器样式 */
     containerStyle?: CSSProperties;
+    /**
+     * 滚动方向
+     * @default vertical
+     */
+    direction?: "vertical" | "horizontal";
     /**
      * 在鼠标移入时是否继续播放
      * @default false
@@ -35,4 +40,4 @@ export interface AutoScrollProps extends ScrollProps {
      */
     paused?: boolean;
 }
-export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AutoScroll: FC<AutoScrollProps>;

package/dist/components/AutoScroll.js

@@ -1,20 +1,19 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useEffect, useEffectEvent, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx, getArray } from "deepsea-tools";
 import { useSize } from "soda-hooks";
 import { px, transformCSSVariable } from "../utils/index.js";
 import { Scroll } from "./Scroll.js";
-const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
+const AutoScroll = ({ ref, count, itemSize, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, direction = "vertical", ...rest })=>{
+    const isVertical = "vertical" === direction;
     const bar = useRef(null);
     const timeout = useRef(void 0);
     const ele = useRef(null);
     const size = useSize(ele);
     const pausedRef = useRef(false);
-    const pausedProps = useRef(paused);
-    pausedProps.current = paused;
+    const getPaused = useEffectEvent(()=>paused);
     useImperativeHandle(ref, ()=>ele.current, []);
     useImperativeHandle(scrollbar, ()=>bar.current, []);
     useEffect(()=>{
@@ -25,23 +24,24 @@ const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     useEffect(()=>{
         var _bar_current;
         if (!size || 0 === count) return;
-        const { height } = size;
-        const range = getArray(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
-        const scrollHeight = range[range.length - 1];
-        if (height >= scrollHeight) return;
+        const containerSize = isVertical ? size.height : size.width;
+        if (0 === itemSize || 0 === containerSize) return;
+        const range = getArray(count, (index)=>(itemSize + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+        const scrollLength = range.at(-1);
+        if (containerSize >= scrollLength) return;
         function scroll(target) {
             clearTimeout(timeout.current);
             timeout.current = setTimeout(()=>{
                 var _bar_current;
-                if (pausedRef.current || pausedProps.current) return scroll(target);
-                null == (_bar_current = bar.current) || _bar_current.scrollTo(0, target, animation);
+                if (pausedRef.current || getPaused()) return scroll(target);
+                null == (_bar_current = bar.current) || _bar_current.scrollTo(isVertical ? 0 : target, isVertical ? target : 0, animation);
             }, duration);
         }
         scroll(range[0]);
         function listener(status) {
-            const { y } = status.offset;
-            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
-            const target = scrollToBottom ? 0 : range.find((item)=>item > y);
+            const offset = isVertical ? status.offset.y : status.offset.x;
+            const scrollToEnd = Math.abs(offset + containerSize - scrollLength) / itemSize <= 0.05;
+            const target = scrollToEnd ? 0 : range.find((item)=>item > offset);
             scroll(target);
         }
         null == (_bar_current = bar.current) || _bar_current.addListener(listener);
@@ -54,10 +54,11 @@ const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     }, [
         size,
         count,
-        itemHeight,
+        itemSize,
         gap,
         duration,
-        animation
+        animation,
+        isVertical
     ]);
     function onContainerMouseEnter(e) {
         if (playOnMouseEnter) return;
@@ -69,6 +70,15 @@ const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
         pausedRef.current = false;
         null == onMouseLeave || onMouseLeave(e);
     }
+    const containerStyle2 = css`
+        display: flex;
+        flex-direction: var(--flex-direction, column);
+        gap: var(--gap, 0);
+
+        & > * {
+            flex: none;
+        }
+    `;
     return /*#__PURE__*/ jsx(Scroll, {
         ref: ele,
         scrollbar: bar,
@@ -76,19 +86,13 @@ const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
         onMouseLeave: onContainerMouseLeave,
         ...rest,
         children: /*#__PURE__*/ jsx("div", {
-            className: clsx(css`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
-                    `, containerClassName),
+            className: clsx(containerStyle2, containerClassName),
             style: transformCSSVariable({
-                gap: px(gap)
+                gap: px(gap),
+                flexDirection: isVertical ? "column" : "row"
             }, containerStyle),
             children: children
         })
     });
-});
+};
 export { AutoScroll };

package/dist/components/Scroll.cjs

@@ -87,9 +87,7 @@ var __webpack_exports__ = {};
         return smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref)=>{
-        const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
-        const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
+    const Scroll = ({ ref, children, options: { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = {}, className, scrollbar, onScrollbar, style, ...rest })=>{
         const ele = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
         const bar = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
         (0, react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(()=>{
@@ -101,17 +99,15 @@ var __webpack_exports__ = {};
         }, []);
         (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, ()=>ele.current, []);
         (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+        const onScrollbarListener = (0, react__WEBPACK_IMPORTED_MODULE_1__.useEffectEvent)(onScrollbar ?? (()=>void 0));
         (0, react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
             var _bar_current;
-            if (!onScrollbar) return;
-            null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbar);
+            null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbarListener);
             return ()=>{
                 var _bar_current;
-                return null == (_bar_current = bar.current) ? void 0 : _bar_current.removeListener(onScrollbar);
+                return null == (_bar_current = bar.current) ? void 0 : _bar_current.removeListener(onScrollbarListener);
             };
-        }, [
-            onScrollbar
-        ]);
+        }, []);
         const style2 = (0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
         .scrollbar-track.scrollbar-track-x {
             ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
@@ -147,7 +143,7 @@ var __webpack_exports__ = {};
             ...rest,
             children: children
         });
-    });
+    };
 })();
 exports.Scroll = __webpack_exports__.Scroll;
 exports.Scrollbar = __webpack_exports__.Scrollbar;

package/dist/components/Scroll.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ForwardedRef, HTMLAttributes } from "react";
+import { ComponentProps, CSSProperties, FC, ForwardedRef } from "react";
 import Scrollbar from "smooth-scrollbar";
 import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
 export { default as Scrollbar } from "smooth-scrollbar";
@@ -13,7 +13,7 @@ export interface ScrollOptions extends Partial<ScrollbarOptions> {
     /** 滚动条背景颜色 */
     trackColor?: CSSProperties["backgroundColor"];
 }
-export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
+export interface ScrollProps extends ComponentProps<"div"> {
     /** 滚动的配置 */
     options?: ScrollOptions;
     /** 滚动条实例 */
@@ -21,4 +21,4 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动条滚动事件 */
     onScrollbar?: ScrollListener;
 }
-export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Scroll: FC<ScrollProps>;

package/dist/components/Scroll.js

@@ -1,14 +1,12 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
 import smooth_scrollbar from "smooth-scrollbar";
 import { px, transformCSSVariable } from "../utils/index.js";
 export * from "smooth-scrollbar/interfaces";
-const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
-    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
+const Scroll = ({ ref, children, options: { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = {}, className, scrollbar, onScrollbar, style, ...rest })=>{
     const ele = useRef(null);
     const bar = useRef(null);
     useLayoutEffect(()=>{
@@ -20,17 +18,15 @@ const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     }, []);
     useImperativeHandle(ref, ()=>ele.current, []);
     useImperativeHandle(scrollbar, ()=>bar.current, []);
+    const onScrollbarListener = useEffectEvent(onScrollbar ?? (()=>void 0));
     useEffect(()=>{
         var _bar_current;
-        if (!onScrollbar) return;
-        null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbar);
+        null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbarListener);
         return ()=>{
             var _bar_current;
-            return null == (_bar_current = bar.current) ? void 0 : _bar_current.removeListener(onScrollbar);
+            return null == (_bar_current = bar.current) ? void 0 : _bar_current.removeListener(onScrollbarListener);
         };
-    }, [
-        onScrollbar
-    ]);
+    }, []);
     const style2 = css`
         .scrollbar-track.scrollbar-track-x {
             ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
@@ -66,5 +62,5 @@ const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...rest,
         children: children
     });
-});
+};
 export { Scroll, smooth_scrollbar as Scrollbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.13",
+  "version": "5.17.14",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {

package/src/components/AutoScroll.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
@@ -16,8 +16,8 @@ export interface AutoScrollProps extends ScrollProps {
     /** 轮播元素的个数 */
     count: number
 
-    /** 轮播元素的高度 */
-    itemHeight: number
+    /** 轮播元素的尺寸（垂直滚动时为高度，水平滚动时为宽度） */
+    itemSize: number
 
     /**
      * 轮播动画的时间，单位毫秒
@@ -43,6 +43,12 @@ export interface AutoScrollProps extends ScrollProps {
     /** 容器样式 */
     containerStyle?: CSSProperties
 
+    /**
+     * 滚动方向
+     * @default vertical
+     */
+    direction?: "vertical" | "horizontal"
+
     /**
      * 在鼠标移入时是否继续播放
      * @default false
@@ -56,30 +62,31 @@ export interface AutoScrollProps extends ScrollProps {
     paused?: boolean
 }
 
-export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
-    const {
-        count,
-        itemHeight,
-        animation = 1000,
-        duration = 3000,
-        onMouseEnter,
-        onMouseLeave,
-        gap = 0,
-        containerClassName,
-        containerStyle,
-        children,
-        playOnMouseEnter,
-        scrollbar,
-        paused,
-        ...rest
-    } = props
+export const AutoScroll: FC<AutoScrollProps> = ({
+    ref,
+    count,
+    itemSize,
+    animation = 1000,
+    duration = 3000,
+    onMouseEnter,
+    onMouseLeave,
+    gap = 0,
+    containerClassName,
+    containerStyle,
+    children,
+    playOnMouseEnter,
+    scrollbar,
+    paused,
+    direction = "vertical",
+    ...rest
+}) => {
+    const isVertical = direction === "vertical"
     const bar = useRef<Scrollbar | null>(null)
     const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
     const ele = useRef<HTMLDivElement>(null)
     const size = useSize(ele)
     const pausedRef = useRef(false)
-    const pausedProps = useRef(paused)
-    pausedProps.current = paused
+    const getPaused = useEffectEvent(() => paused)
 
     useImperativeHandle(ref, () => ele.current!, [])
     useImperativeHandle(scrollbar, () => bar.current!, [])
@@ -90,35 +97,39 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
 
     useEffect(() => {
         if (!size || count === 0) return
-        const { height } = size
-        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
-        const scrollHeight = range[range.length - 1]
-        if (height >= scrollHeight) return
+        const containerSize = isVertical ? size.height : size.width
+        if (itemSize === 0 || containerSize === 0) return
+        const range = getArray(count, index => (itemSize + gap) * (index + 1) - (index === count - 1 ? gap : 0))
+        const scrollLength = range.at(-1)!
+
+        // 如果容器大小大于滚动长度，则不进行滚动
+        if (containerSize >= scrollLength) return
 
         function scroll(target: number) {
             clearTimeout(timeout.current)
             timeout.current = setTimeout(() => {
-                if (pausedRef.current || pausedProps.current) return scroll(target)
-                bar.current?.scrollTo(0, target, animation)
+                if (pausedRef.current || getPaused()) return scroll(target)
+                bar.current?.scrollTo(isVertical ? 0 : target, isVertical ? target : 0, animation)
             }, duration)
         }
 
         scroll(range[0])
 
         function listener(status: ScrollStatus) {
-            const { y } = status.offset
-            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
-            const target = scrollToBottom ? 0 : range.find(item => item > y)!
+            const offset = isVertical ? status.offset.y : status.offset.x
+            const scrollToEnd = Math.abs(offset + containerSize - scrollLength) / itemSize <= 0.05
+            const target = scrollToEnd ? 0 : range.find(item => item > offset)!
             scroll(target)
         }
 
         bar.current?.addListener(listener)
+
         return () => {
             clearTimeout(timeout.current)
             bar.current?.removeListener(listener)
             bar.current?.scrollTo(0, 0)
         }
-    }, [size, count, itemHeight, gap, duration, animation])
+    }, [size, count, itemSize, gap, duration, animation, isVertical])
 
     function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
         if (playOnMouseEnter) return
@@ -132,24 +143,24 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
         onMouseLeave?.(e)
     }
 
+    const containerStyle2 = css`
+        display: flex;
+        flex-direction: var(--flex-direction, column);
+        gap: var(--gap, 0);
+
+        & > * {
+            flex: none;
+        }
+    `
+
     return (
         <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
             <div
-                className={clsx(
-                    css`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
-                    `,
-                    containerClassName,
-                )}
-                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}
+                className={clsx(containerStyle2, containerClassName)}
+                style={transformCSSVariable({ gap: px(gap), flexDirection: isVertical ? "column" : "row" }, containerStyle)}
             >
                 {children}
             </div>
         </Scroll>
     )
-})
+}

package/src/components/Scroll.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { ComponentProps, CSSProperties, FC, ForwardedRef, useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -24,7 +24,7 @@ export interface ScrollOptions extends Partial<ScrollbarOptions> {
     trackColor?: CSSProperties["backgroundColor"]
 }
 
-export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
+export interface ScrollProps extends ComponentProps<"div"> {
     /** 滚动的配置 */
     options?: ScrollOptions
     /** 滚动条实例 */
@@ -33,9 +33,16 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     onScrollbar?: ScrollListener
 }
 
-export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
-    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
-    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}
+export const Scroll: FC<ScrollProps> = ({
+    ref,
+    children,
+    options: { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = {},
+    className,
+    scrollbar,
+    onScrollbar,
+    style,
+    ...rest
+}) => {
     const ele = useRef<HTMLDivElement>(null)
     const bar = useRef<Scrollbar | null>(null)
 
@@ -48,11 +55,12 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
 
     useImperativeHandle(scrollbar, () => bar.current!, [])
 
+    const onScrollbarListener = useEffectEvent(onScrollbar ?? (() => void 0))
+
     useEffect(() => {
-        if (!onScrollbar) return
-        bar.current?.addListener(onScrollbar)
-        return () => bar.current?.removeListener(onScrollbar)
-    }, [onScrollbar])
+        bar.current?.addListener(onScrollbarListener)
+        return () => bar.current?.removeListener(onScrollbarListener)
+    }, [])
 
     const style2 = css`
         .scrollbar-track.scrollbar-track-x {
@@ -96,4 +104,4 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
             {children}
         </div>
     )
-})
+}