deepsea-components 5.17.12 → 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/LoopSwiper.cjs

@@ -31,7 +31,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
+const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, paused, gap = 0, ...rest })=>{
     const wrapper = (0, external_react_namespaceObject.useRef)(null);
     const container = (0, external_react_namespaceObject.useRef)(null);
     const [swiper, setSwiper] = (0, external_react_namespaceObject.useState)(false);
@@ -65,6 +65,14 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
         observer.observe(wrapperEle);
         observer.observe(containerEle);
     }, []);
+    const style = (0, css_namespaceObject.css)`
+        display: flex;
+        flex-direction: ${flexDirection};
+        gap: ${gap}px;
+        ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+        ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
+        ${paused ? "& > * { animation-play-state: paused; }" : ""}
+    `;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: wrapper,
         className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
@@ -100,12 +108,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(100% + ${gap}px));
                         }
                     }
-                `, (0, css_namespaceObject.css)`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
-                `, className, rootClassName),
+                `, style, rootClassName, className),
         ...rest,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/LoopSwiper.d.ts

@@ -10,6 +10,7 @@ export interface LoopSwiperProps extends ComponentProps<"div"> {
     reverse?: boolean;
     period: number;
     pauseOnHover?: boolean;
+    paused?: boolean;
     gap?: number;
 }
 /** 循环播放组件 */

package/dist/components/LoopSwiper.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
+const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, paused, gap = 0, ...rest })=>{
     const wrapper = useRef(null);
     const container = useRef(null);
     const [swiper, setSwiper] = useState(false);
@@ -37,6 +37,14 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
         observer.observe(wrapperEle);
         observer.observe(containerEle);
     }, []);
+    const style = css`
+        display: flex;
+        flex-direction: ${flexDirection};
+        gap: ${gap}px;
+        ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+        ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
+        ${paused ? "& > * { animation-play-state: paused; }" : ""}
+    `;
     return /*#__PURE__*/ jsxs("div", {
         ref: wrapper,
         className: clsx(css`
@@ -72,12 +80,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(100% + ${gap}px));
                         }
                     }
-                `, css`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
-                `, className, rootClassName),
+                `, style, rootClassName, className),
         ...rest,
         children: [
             /*#__PURE__*/ jsx("div", {

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,33 +99,41 @@ 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);" : ""}
+            ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-x {
+            ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
+            ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} 
+            ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+        }
+
+        .scrollbar-track.scrollbar-track-y {
+            ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
+            ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-y {
+            ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
+            ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} 
+            ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+        }
+    `;
         return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
             ref: ele,
-            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                    .scrollbar-track.scrollbar-track-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                `, className),
+            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)(style2, className),
             style: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.transformCSSVariable)({
                 thumbWidth: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbWidth),
                 thumbRadius: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbRadius),
@@ -137,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,33 +18,41 @@ 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);" : ""}
+            ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-x {
+            ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
+            ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} 
+            ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+        }
+
+        .scrollbar-track.scrollbar-track-y {
+            ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
+            ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-y {
+            ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
+            ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} 
+            ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+        }
+    `;
     return /*#__PURE__*/ jsx("div", {
         ref: ele,
-        className: clsx(css`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                    .scrollbar-track.scrollbar-track-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                `, className),
+        className: clsx(style2, className),
         style: transformCSSVariable({
             thumbWidth: px(thumbWidth),
             thumbRadius: px(thumbRadius),
@@ -56,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.12",
+  "version": "5.17.14",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -41,14 +41,14 @@
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
     "stable-hash": "^0.0.6",
-    "deepsea-tools": "5.43.3",
-    "soda-hooks": "6.16.2"
+    "deepsea-tools": "5.43.4",
+    "soda-hooks": "6.16.3"
   },
   "devDependencies": {
     "typescript": ">=5.8.3"
   },
   "peerDependencies": {
-    "@types/node": ">=24.10.1",
+    "@types/node": "^24.10.2",
     "@types/react": ">=19.2.7",
     "@types/react-dom": ">=19.2.3",
     "react": ">=19.2.1",

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/LoopSwiper.tsx

@@ -17,6 +17,7 @@ export interface LoopSwiperProps extends ComponentProps<"div"> {
     reverse?: boolean
     period: number
     pauseOnHover?: boolean
+    paused?: boolean
     gap?: number
 }
 
@@ -30,6 +31,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
     period,
     reverse,
     pauseOnHover = true,
+    paused,
     gap = 0,
     ...rest
 }) => {
@@ -82,6 +84,15 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
         observer.observe(containerEle)
     }, [])
 
+    const style = css`
+        display: flex;
+        flex-direction: ${flexDirection};
+        gap: ${gap}px;
+        ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+        ${pauseOnHover ? `&:hover > * { animation-play-state: paused; }` : ""}
+        ${paused ? "& > * { animation-play-state: paused; }" : ""}
+    `
+
     return (
         <div
             ref={wrapper}
@@ -120,16 +131,9 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                         }
                     }
                 `,
-                css`
-                    display: flex;
-                    flex-direction: ${flexDirection};
-                    gap: ${gap}px;
-                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover
-                        ? `&:hover > * { animation-play-state: paused; }`
-                        : ""}
-                `,
-                className,
+                style,
                 rootClassName,
+                className,
             )}
             {...rest}
         >

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,40 +55,41 @@ 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 {
+            ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+            ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-x {
+            ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
+            ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""} 
+            ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+        }
+
+        .scrollbar-track.scrollbar-track-y {
+            ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+            ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+        }
+
+        .scrollbar-thumb.scrollbar-thumb-y {
+            ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
+            ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""} 
+            ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+        }
+    `
 
     return (
         <div
             ref={ele}
-            className={clsx(
-                css`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${trackColor !== undefined
-                            ? "background-color: var(--track-color);"
-                            : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${thumbRadius !== undefined
-                            ? "border-radius: var(--thumb-radius);"
-                            : ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
-                    }
-                    .scrollbar-track.scrollbar-track-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${trackColor !== undefined
-                            ? "background-color: var(--track-color);"
-                            : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${thumbRadius !== undefined
-                            ? "border-radius: var(--thumb-radius);"
-                            : ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
-                    }
-                `,
-                className,
-            )}
+            className={clsx(style2, className)}
             style={transformCSSVariable(
                 {
                     thumbWidth: px(thumbWidth),
@@ -96,4 +104,4 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
             {children}
         </div>
     )
-})
+}