deepsea-components 5.17.10 → 5.17.12

package/dist/components/DraggableGrid.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, Key, ReactNode } from "react";
+import { ComponentProps, CSSProperties, Key, ReactNode } from "react";
 import { DragMoveEvents } from "soda-hooks";
 export type MustBeReactNode<T> = false extends (T extends ReactNode ? true : false) ? false : true;
 export type MustBeReactKey<T> = false extends (T extends Key ? true : false) ? false : true;

package/dist/components/Echart.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, FC, ReactNode, Ref } from "react";
-import { AngleAxisComponentOption, AriaComponentOption, AxisPointerComponentOption, BarSeriesOption, BoxplotSeriesOption, BrushComponentOption, CalendarComponentOption, CandlestickSeriesOption, ChordSeriesOption, ComposeOption, ContinousVisualMapComponentOption, CustomSeriesOption, DataZoomComponentOption, DatasetComponentOption, ECharts, EChartsInitOpts, EffectScatterSeriesOption, FunnelSeriesOption, GaugeSeriesOption, GeoComponentOption, GraphSeriesOption, GraphicComponentOption, GridComponentOption, HeatmapSeriesOption, InsideDataZoomComponentOption, LegendComponentOption, LineSeriesOption, LinesSeriesOption, MapSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, ParallelSeriesOption, PictorialBarSeriesOption, PieSeriesOption, PiecewiseVisualMapComponentOption, PlainLegendComponentOption, PolarComponentOption, RadarComponentOption, RadarSeriesOption, RadiusAxisComponentOption, SankeySeriesOption, ScatterSeriesOption, ScrollableLegendComponentOption, SeriesOption, SingleAxisComponentOption, SliderDataZoomComponentOption, SunburstSeriesOption, ThemeRiverSeriesOption, ThumbnailComponentOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, TreeSeriesOption, TreemapSeriesOption, VisualMapComponentOption, XAXisComponentOption, YAXisComponentOption } from "echarts";
+import { AngleAxisComponentOption, AriaComponentOption, AxisPointerComponentOption, BarSeriesOption, BoxplotSeriesOption, BrushComponentOption, CalendarComponentOption, CandlestickSeriesOption, ChordSeriesOption, ComposeOption, ContinousVisualMapComponentOption, CustomSeriesOption, DatasetComponentOption, DataZoomComponentOption, ECharts, EChartsInitOpts, EffectScatterSeriesOption, FunnelSeriesOption, GaugeSeriesOption, GeoComponentOption, GraphicComponentOption, GraphSeriesOption, GridComponentOption, HeatmapSeriesOption, InsideDataZoomComponentOption, LegendComponentOption, LineSeriesOption, LinesSeriesOption, MapSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, ParallelSeriesOption, PictorialBarSeriesOption, PiecewiseVisualMapComponentOption, PieSeriesOption, PlainLegendComponentOption, PolarComponentOption, RadarComponentOption, RadarSeriesOption, RadiusAxisComponentOption, SankeySeriesOption, ScatterSeriesOption, ScrollableLegendComponentOption, SeriesOption, SingleAxisComponentOption, SliderDataZoomComponentOption, SunburstSeriesOption, ThemeRiverSeriesOption, ThumbnailComponentOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, TreemapSeriesOption, TreeSeriesOption, VisualMapComponentOption, XAXisComponentOption, YAXisComponentOption } from "echarts";
 import { ECBasicOption } from "echarts/types/src/util/types.js";
 export type ChartOption<T extends SeriesOption = never> = ComposeOption<T | DatasetComponentOption | GridComponentOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption | AxisPointerComponentOption | GeoComponentOption | MarkLineComponentOption | MarkPointComponentOption | MarkAreaComponentOption | DataZoomComponentOption | AriaComponentOption | BrushComponentOption | PolarComponentOption | RadarComponentOption | XAXisComponentOption | YAXisComponentOption | MatrixComponentOption | GraphicComponentOption | ToolboxComponentOption | CalendarComponentOption | TimelineComponentOption | AngleAxisComponentOption | RadiusAxisComponentOption | SingleAxisComponentOption | VisualMapComponentOption | ThumbnailComponentOption | PlainLegendComponentOption | InsideDataZoomComponentOption | SliderDataZoomComponentOption | PiecewiseVisualMapComponentOption | ContinousVisualMapComponentOption | ScrollableLegendComponentOption>;
 export type BarOption = ChartOption<BarSeriesOption>;

package/dist/components/InfiniteScroll.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef, CSSProperties } from "react";
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {
     /**
      * 滚动的方向

package/dist/components/LoopSwiper.cjs

@@ -76,7 +76,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -85,7 +84,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(calc(100% + ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -94,7 +92,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -107,11 +104,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                     display: flex;
                     flex-direction: ${flexDirection};
                     gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
-                    ${pauseOnHover ? `&:hover > * {
-                        animation-play-state: paused;
-                    }` : ""}
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
                 `, className, rootClassName),
         ...rest,
         children: [

package/dist/components/LoopSwiper.js

@@ -48,7 +48,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -57,7 +56,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(calc(100% + ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -66,7 +64,6 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -79,11 +76,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                     display: flex;
                     flex-direction: ${flexDirection};
                     gap: ${gap}px;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
-                    ${pauseOnHover ? `&:hover > * {
-                        animation-play-state: paused;
-                    }` : ""}
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
                 `, className, rootClassName),
         ...rest,
         children: [

package/dist/components/Scroll.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ForwardedRef, HTMLAttributes } from "react";
 import Scrollbar from "smooth-scrollbar";
-import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces";
+import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
 export { default as Scrollbar } from "smooth-scrollbar";
 export * from "smooth-scrollbar/interfaces";
 export interface ScrollOptions extends Partial<ScrollbarOptions> {

package/dist/components/ScrollMask.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, FC } from "react";
+import { ComponentProps, CSSProperties, FC } from "react";
 export type ScrollMaskPosition = "top" | "bottom" | "left" | "right";
 export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
     position?: ScrollMaskPosition;

package/dist/components/Unify.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode } from "react";
+import { ComponentProps, CSSProperties, FC, JSX, JSXElementConstructor, ReactNode } from "react";
 export interface UnifyConfig {
     className?: string;
     style?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.10",
+  "version": "5.17.12",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -41,18 +41,18 @@
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
     "stable-hash": "^0.0.6",
-    "soda-hooks": "6.16.0",
-    "deepsea-tools": "5.43.1"
+    "deepsea-tools": "5.43.3",
+    "soda-hooks": "6.16.2"
   },
   "devDependencies": {
-    "typescript": "^5.9.3"
+    "typescript": ">=5.8.3"
   },
   "peerDependencies": {
-    "@types/node": ">=20",
-    "@types/react": ">=19.2.4",
+    "@types/node": ">=24.10.1",
+    "@types/react": ">=19.2.7",
     "@types/react-dom": ">=19.2.3",
-    "react": ">=19.2.0",
-    "react-dom": ">=19.2.0"
+    "react": ">=19.2.1",
+    "react-dom": ">=19.2.1"
   },
   "scripts": {
     "dev": "rslib build --watch",

package/src/components/AutoFit.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 
@@ -39,33 +40,40 @@ export const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) =>
     const [height, setHeight] = useState<string | undefined>(undefined)
 
     useImperativeHandle(ref, () => ele.current!, [ele.current])
+
     useLayoutEffect(() => {
         const element = ele.current
         const parent = element?.parentElement
         if (!element || !parent) return
+
         function listener(entries: ResizeObserverEntry[]) {
             const entry = entries[0]
             const { contentRect } = entry
+
             if (direction === "horizontal") {
                 const scale = contentRect.width / designWidth
                 setTransform(`scale(${scale})`)
                 setWidth(px(designWidth))
                 setHeight(px(contentRect.height / scale))
-            } else if (direction === "vertical") {
-                const scale = contentRect.height / designHeight
-                setTransform(`scale(${scale})`)
-                setWidth(px(contentRect.width / scale))
-                setHeight(px(designHeight))
             } else {
-                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)
-                setTransform(
-                    `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,
-                )
-                setWidth(px(designWidth))
-                setHeight(px(designHeight))
+                if (direction === "vertical") {
+                    const scale = contentRect.height / designHeight
+                    setTransform(`scale(${scale})`)
+                    setWidth(px(contentRect.width / scale))
+                    setHeight(px(designHeight))
+                } else {
+                    const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)
+                    setTransform(
+                        `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,
+                    )
+                    setWidth(px(designWidth))
+                    setHeight(px(designHeight))
+                }
             }
+
             setShow(true)
         }
+
         const observer = new ResizeObserver(listener)
         observer.observe(parent)
         return () => observer.disconnect()
@@ -76,9 +84,7 @@ export const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) =>
             const parent = ele.current?.parentElement
             if (!parent) return
             const style = getComputedStyle(parent)
-            if (style.position === "static") {
-                console.warn("AutoFit 组件的父元素的 position 属性不应该是 static")
-            }
+            if (style.position === "static") console.warn("AutoFit 组件的父元素的 position 属性不应该是 static")
         }, [ele.current?.parentElement])
     }
 

package/src/components/AutoScroll.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
@@ -93,6 +94,7 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
         const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
         const scrollHeight = range[range.length - 1]
         if (height >= scrollHeight) return
+
         function scroll(target: number) {
             clearTimeout(timeout.current)
             timeout.current = setTimeout(() => {
@@ -100,13 +102,16 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
                 bar.current?.scrollTo(0, target, 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)!
             scroll(target)
         }
+
         bar.current?.addListener(listener)
         return () => {
             clearTimeout(timeout.current)

package/src/components/AutoSizeTextarea.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 
@@ -18,10 +19,12 @@ export const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttr
 
     useLayoutEffect(() => {
         const textarea = ele.current!
+
         function resizeTextarea() {
             setHeight("auto")
             setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))
         }
+
         resizeTextarea()
         textarea.addEventListener("input", resizeTextarea)
         textarea.addEventListener("change", resizeTextarea)

package/src/components/CopyButton.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
 import ClipboardJS, { Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 

package/src/components/DraggableGrid.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, ComponentProps, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { ComponentProps, CSSProperties, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+
 import { clsx, getArray, isNullable } from "deepsea-tools"
 import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
 
@@ -41,9 +42,11 @@ export type DraggableGridOrderToKey<K extends Key> = Map<number, K>
 
 function isTheSameArray<T>(a: T[], b: T[]) {
     if (a.length !== b.length) return false
+
     for (let i = 0; i < a.length; i++) {
         if (a[i] !== b[i]) return false
     }
+
     return true
 }
 
@@ -69,10 +72,13 @@ function getOrderMap<K extends Key>({ prev, orders, keys, orderPriority }: GetOr
     if (!!prev) {
         const entries = Array.from(prev.entries()).toSorted((a, b) => (orderPriority ? orderPriority(b[1], a[1]) : b[1] - a[1]))
         const newPrev = new Map<K, number>()
+
         const newOrders = [...orders]
+
         for (const [key, order] of entries) {
             if (!keys.includes(key)) continue
             const index = newOrders.indexOf(order)
+
             if (index >= 0) {
                 newPrev.set(key, order)
                 newOrders.length = index
@@ -81,19 +87,23 @@ function getOrderMap<K extends Key>({ prev, orders, keys, orderPriority }: GetOr
                 newPrev.set(key, newOrder)
             }
         }
+
         prev = newPrev
     }
 
     const newKeys = keys.filter(key => {
         if (!prev) return true
+
         if (prev.has(key)) {
             const prevOrder = prev.get(key)!
             orderMap.set(key, prevOrder)
             orderSet.delete(prevOrder)
             return false
         }
+
         return true
     })
+
     orders = Array.from(orderSet)
     newKeys.forEach((key, index) => orderMap.set(key, orders[index]))
     return orderMap
@@ -290,10 +300,12 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
 }: DraggableGridProps<T, K>) {
     const keyToItem = useMemo(() => {
         const keyToItem = new Map<K, T>()
+
         items.forEach(item => {
             const key = keyExtractor ? keyExtractor(item) : (item as unknown as K)
             keyToItem.set(key, item)
         })
+
         return keyToItem
     }, [items, keyExtractor])
 
@@ -358,6 +370,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
                 !isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys()))
         ) {
             setDragging(undefined)
+
             if (isTheSameArray(dragging.orders, orders) && isTheSameIterable(dragging.keyToOrder.keys(), keyToItem.keys())) {
                 setKeyToOrder(dragging.keyToOrder)
                 onOrderMapChange?.(dragging.keyToOrder)
@@ -368,6 +381,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
     /** 受控 */
     useEffect(() => {
         if (orderMap === keyToOrder) return
+
         if (!!orderMap && isLegalOrderMap({ orders, keys: keyToItem.keys(), orderMap })) setKeyToOrder(orderMap)
         else onOrderMapChange?.(keyToOrder)
     }, [orderMap, keyToOrder, onOrderMapChange])
@@ -376,6 +390,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
         _onDragMoveStart?.(event)
         const position = getPosition({ order: keyToOrder.get(key)!, columns, gapX, gapY, itemWidth, itemHeight })
         recent.current = key
+
         setDragging({
             key,
             startX: position.x,
@@ -426,6 +441,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
 
         /** 以元素开始移动前的次序为基准，计算元素当前最近的位置 */
         const newKeyToOrder = new Map(keyToOrder)
+
         newKeyToOrder.set(key, nearestOrder)
 
         const orderToKey = getOrderToKey(keyToOrder)

package/src/components/Echart.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { ComponentProps, FC, ReactNode, Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+
 import {
     AngleAxisComponentOption,
     AriaComponentOption,
@@ -14,18 +15,19 @@ import {
     ComposeOption,
     ContinousVisualMapComponentOption,
     CustomSeriesOption,
-    DataZoomComponentOption,
     DatasetComponentOption,
+    DataZoomComponentOption,
     ECharts,
     EChartsInitOpts,
     EffectScatterSeriesOption,
     FunnelSeriesOption,
     GaugeSeriesOption,
     GeoComponentOption,
-    GraphSeriesOption,
     GraphicComponentOption,
+    GraphSeriesOption,
     GridComponentOption,
     HeatmapSeriesOption,
+    init,
     InsideDataZoomComponentOption,
     LegendComponentOption,
     LineSeriesOption,
@@ -37,8 +39,8 @@ import {
     MatrixComponentOption,
     ParallelSeriesOption,
     PictorialBarSeriesOption,
-    PieSeriesOption,
     PiecewiseVisualMapComponentOption,
+    PieSeriesOption,
     PlainLegendComponentOption,
     PolarComponentOption,
     RadarComponentOption,
@@ -57,12 +59,11 @@ import {
     TitleComponentOption,
     ToolboxComponentOption,
     TooltipComponentOption,
-    TreeSeriesOption,
     TreemapSeriesOption,
+    TreeSeriesOption,
     VisualMapComponentOption,
     XAXisComponentOption,
     YAXisComponentOption,
-    init,
 } from "echarts"
 import { ECBasicOption } from "echarts/types/src/util/types.js"
 import hash from "stable-hash"

package/src/components/Flow.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { useSize } from "soda-hooks"
@@ -159,6 +160,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
         function task() {
             setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))
         }
+
         if (throttle === 0) return task()
         const timeout = setTimeout(task, throttle || 200)
         return () => clearTimeout(timeout)

package/src/components/FormLabel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from "react"
+import { ComponentPropsWithoutRef, createContext, FC, Fragment, ReactNode, useContext } from "react"
 
 export interface FormLabelConfig {
     /**

package/src/components/HlsPlayer.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { forwardRef, MediaHTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
+
 import Hls from "hls.js"
 
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
@@ -16,10 +17,12 @@ export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, re
     useEffect(() => {
         const { current: player } = video
         if (!player || !src) return
+
         if (player.canPlayType("application/vnd.apple.mpegurl")) {
             player.src = src
             return
         }
+
         if (Hls.isSupported()) {
             const hls = new Hls()
             hls.loadSource(src)

package/src/components/IconFileType.tsx

@@ -125,10 +125,7 @@ export const IconFileTypeText: FC<IconFileTypeTextProps> = ({
 )
 
 export interface IconFileTypeProps
-    extends IconFileTypePagePropsBase,
-        Omit<IconFileTypeDogEarPropsBase, "pageWidth">,
-        IconFileTypeTextPropsBase,
-        ComponentProps<"svg"> {}
+    extends IconFileTypePagePropsBase, Omit<IconFileTypeDogEarPropsBase, "pageWidth">, IconFileTypeTextPropsBase, ComponentProps<"svg"> {}
 
 export const IconFileType: FC<IconFileTypeProps> = ({
     pageColor,

package/src/components/InfiniteScroll.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { ComponentPropsWithoutRef, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { useSize } from "soda-hooks"

package/src/components/InputFile.tsx

@@ -14,6 +14,7 @@ export type InputFileDataType = keyof InputFileDataTypeMap
 
 export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
     const fileReader = new FileReader()
+
     switch (type) {
         case "arrayBuffer":
             fileReader.readAsArrayBuffer(file)
@@ -30,6 +31,7 @@ export async function getFileData<T extends InputFileDataType>(file: File, type:
         default:
             return file as any
     }
+
     return new Promise(resolve => {
         fileReader.addEventListener("load", () => {
             resolve(fileReader.result as any)
@@ -40,6 +42,7 @@ export async function getFileData<T extends InputFileDataType>(file: File, type:
 export interface InputFileBaseProps extends Omit<ComponentProps<"input">, "multiple" | "type"> {}
 
 export type FileType<Multiple extends boolean> = Multiple extends true ? File[] : File
+
 export type ValueType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true
     ? InputFileDataTypeMap[Type][]
     : InputFileDataTypeMap[Type]
@@ -62,8 +65,7 @@ export interface InputFileExtraProps<Multiple extends boolean = false, Type exte
 }
 
 export interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = "file">
-    extends InputFileBaseProps,
-        InputFileExtraProps<Multiple, Type> {}
+    extends InputFileBaseProps, InputFileExtraProps<Multiple, Type> {}
 
 /** 专用于读取文件的组件 */
 export function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode {
@@ -86,14 +88,18 @@ export function InputFile<Multiple extends boolean = false, Type extends InputFi
         const { files } = input
         if (!files || files.length === 0) return
         setDisabled(true)
+
         try {
             if (multiple) {
                 const files2: File[] = Array.from(files)
+
                 const values: InputFileDataTypeMap[Type][] = []
+
                 for (const file of files2) {
                     const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
                     values.push(value)
                 }
+
                 onFileChange?.(files2 as FileType<Multiple>)
                 onValueChange?.(values as ValueType<Multiple, Type>)
                 onDataChange?.(files2.map((file, index) => ({ file, value: values[index] })) as DataType<Multiple, Type>)

package/src/components/InputFileButton.tsx

@@ -3,12 +3,12 @@
 import {
     ComponentProps,
     ComponentRef,
+    createElement,
     DragEvent,
     Fragment,
     JSX,
     JSXElementConstructor,
     MouseEvent as ReactMouseEvent,
-    createElement,
     useImperativeHandle,
     useRef,
     useState,
@@ -17,13 +17,13 @@ import {
 import {
     DataType,
     FileType,
+    getFileData,
     InputFile,
     InputFileBaseProps,
     InputFileDataType,
     InputFileDataTypeMap,
     InputFileExtraProps,
     ValueType,
-    getFileData,
 } from "./InputFile"
 
 export type InputFileButtonProps<
@@ -81,14 +81,18 @@ export function InputFileButton<
         const { files } = e.dataTransfer
         if (!files || files.length === 0) return
         setDisabled(true)
+
         try {
             if (multiple) {
                 const files2: File[] = Array.from(files)
+
                 const values: InputFileDataTypeMap[Type][] = []
+
                 for (const file of files2) {
                     const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
                     values.push(value)
                 }
+
                 onFileChange?.(files2 as FileType<Multiple>)
                 onValueChange?.(values as ValueType<Multiple, Type>)
                 onDataChange?.(files2.map((file, index) => ({ file, value: values[index] })) as DataType<Multiple, Type>)

package/src/components/LoopSwiper.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { CSSProperties, ComponentProps, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { ComponentProps, CSSProperties, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 
@@ -66,9 +67,11 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                 if (entry.target === wrapperEle) {
                     wrapperWidth = entry.contentRect.width
                     wrapperHeight = entry.contentRect.height
-                } else if (entry.target === containerEle) {
-                    containerWidth = entry.contentRect.width
-                    containerHeight = entry.contentRect.height
+                } else {
+                    if (entry.target === containerEle) {
+                        containerWidth = entry.contentRect.width
+                        containerHeight = entry.contentRect.height
+                    }
                 }
             })
 
@@ -92,7 +95,6 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
@@ -101,7 +103,6 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateX(calc(100% + ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -110,7 +111,6 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                             transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
-
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
@@ -124,12 +124,8 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
                     display: flex;
                     flex-direction: ${flexDirection};
                     gap: ${gap}px;
-                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-
-                    ${pauseOnHover
-                        ? `&:hover > * {
-                        animation-play-state: paused;
-                    }`
+                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover
+                        ? `&:hover > * { animation-play-state: paused; }`
                         : ""}
                 `,
                 className,

package/src/components/ReadSheet.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { FC } from "react"
-import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
+
+import { readSheet, WorkBookData, WorkSheetData } from "deepsea-tools"
 
 import { InputFile, InputFileProps } from "./InputFile"
 

package/src/components/Ring.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { HTMLAttributes, forwardRef } from "react"
+import { forwardRef, HTMLAttributes } from "react"
 
 export interface RingProps extends HTMLAttributes<HTMLDivElement> {
     outerWidth: number

package/src/components/Scroll.tsx

@@ -1,14 +1,16 @@
 "use client"
 
-import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
-import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces"
+import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
 
 import { px, transformCSSVariable } from "@/utils"
 
 export { default as Scrollbar } from "smooth-scrollbar"
+
 export * from "smooth-scrollbar/interfaces"
 
 export interface ScrollOptions extends Partial<ScrollbarOptions> {

package/src/components/ScrollMask.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, ComponentProps, FC, useRef } from "react"
+import { ComponentProps, CSSProperties, FC, useRef } from "react"
+
 import { clsx, isNonNullable } from "deepsea-tools"
 import { useSize } from "soda-hooks"
 

package/src/components/SectionRing.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { HTMLAttributes, forwardRef } from "react"
-import { DrawArcOptions, drawArc } from "deepsea-tools"
+import { forwardRef, HTMLAttributes } from "react"
+
+import { drawArc, DrawArcOptions } from "deepsea-tools"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number

package/src/components/Skeleton.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { HTMLAttributes, forwardRef } from "react"
+import { forwardRef, HTMLAttributes } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 

package/src/components/Title.tsx

@@ -3,6 +3,7 @@
 import { ComponentProps, FC, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { createPortal } from "react-dom"
 import { renderToString } from "react-dom/server"
+
 import { isBrowser } from "deepsea-tools"
 
 import { getReactVersion } from "@/utils/getReactVersion"

package/src/components/TransitionBox.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
+import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
+
 import { useSize } from "soda-hooks"
 
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/TransitionNum.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
+
 import { setFrameInterval } from "deepsea-tools"
 
 export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
@@ -21,9 +22,7 @@ export interface TransitionNumIns {
 /** 渐变数字组件 */
 export const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {
     const { children: num, period, numToStr, ins, ...rest } = props
-    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
-        throw new RangeError("目标数字必须是整数，周期必须是正整数")
-    }
+    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("目标数字必须是整数，周期必须是正整数")
     const ele = useRef<HTMLDivElement>(null)
     const cache = useRef({ num, period, numToStr, show: num })
     cache.current = { ...cache.current, num, period, numToStr }
@@ -37,13 +36,16 @@ export const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((pro
         if (num === show) return
         const div = ele.current!
         const speed = (num - show) / period
+
         const cancel = setFrameInterval(() => {
             const { num, numToStr } = cache.current
             cache.current.show += speed
+
             if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {
                 cancel()
                 cache.current.show = num
             }
+
             div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))
         }, 1)
 

package/src/components/Trapezium.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { HTMLAttributes, forwardRef } from "react"
+import { forwardRef, HTMLAttributes } from "react"
+
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 

package/src/components/Unify.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
+import { ComponentProps, createContext, createElement, CSSProperties, FC, JSX, JSXElementConstructor, ReactNode, useContext } from "react"
+
 import { clsx } from "deepsea-tools"
 
 export interface UnifyConfig {

package/src/components/WriteSheet.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
-import { WriteSheetParams, writeSheet } from "deepsea-tools"
+import { ComponentProps, createElement, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent } from "react"
+
+import { writeSheet, WriteSheetParams } from "deepsea-tools"
 
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS