deepsea-components 5.18.4 → 5.18.6

package/src/components/AutoScroll.tsx

@@ -1,16 +1,16 @@
 "use client"
 
-import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
+import { type CSSProperties, type FC, type MouseEvent as ReactMouseEvent, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
-import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+import type { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"
 
-import { Scroll, ScrollProps } from "./Scroll"
+import { type ScrollProps, Scroll } from "./Scroll"
 
 export interface AutoScrollProps extends ScrollProps {
     /** 轮播元素的个数 */
@@ -127,6 +127,7 @@ export const AutoScroll: FC<AutoScrollProps> = ({
         return () => {
             clearTimeout(timeout.current)
             bar.current?.removeListener(listener)
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             bar.current?.scrollTo(0, 0)
         }
     }, [size, count, itemSize, gap, duration, animation, isVertical])

package/src/components/AutoSizeTextarea.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { type TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/CircleText.tsx

@@ -1,81 +1,81 @@
-"use client"
-
-import { FC, Fragment, HTMLAttributes } from "react"
-
-export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
-    /** 每一个方块的宽度 */
-    width: number
-    /** 每一个方块的高度 */
-    height: number
-    /** 圆弧的半径，不包含方块的高度 */
-    radius: number
-    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
-    startAngel?: number
-    /** 每一个方块之间间隔的弧度 */
-    gapAngel?: number
-    /** 文字对齐的方式，默认居中 */
-    align?: "left" | "center" | "right"
-    /** 文字朝向圆心还是外侧，默认外侧 */
-    direction?: "inner" | "outer"
-    /** 是否反转文字顺序 */
-    reverse?: boolean
-    /** 分割文字的方法 */
-    separator?: string | RegExp | ((text: string) => string[])
-    /** 显示的文字 */
-    children: string
-}
-
-/** 环形文字 */
-export const CircleText: FC<CircleTextProps> = props => {
-    const {
-        width,
-        height,
-        radius,
-        startAngel = 0,
-        gapAngel = 0,
-        align = "center",
-        style,
-        direction = "outer",
-        reverse = false,
-        separator,
-        children,
-        ...rest
-    } = props
-    const unitAngle = Math.atan(width / 2 / radius) * 2
-    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
-    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
-
-    function getTransform(idx: number) {
-        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
-        const x = (radius + height / 2) * Math.cos(angle) - width / 2
-        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
-        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
-        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
-    }
-
-    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
-
-    if (reverse) words.reverse()
-
-    return (
-        <Fragment>
-            {words.map((w, idx) => (
-                <span
-                    key={idx}
-                    style={{
-                        position: "absolute",
-                        ...style,
-                        transform: getTransform(idx),
-                        textAlign: "center",
-                        width,
-                        lineHeight: `${height}px`,
-                        height: height,
-                    }}
-                    {...rest}
-                >
-                    {w}
-                </span>
-            ))}
-        </Fragment>
-    )
-}
+"use client"
+
+import { type FC, type HTMLAttributes, Fragment } from "react"
+
+export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 每一个方块的宽度 */
+    width: number
+    /** 每一个方块的高度 */
+    height: number
+    /** 圆弧的半径，不包含方块的高度 */
+    radius: number
+    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
+    startAngel?: number
+    /** 每一个方块之间间隔的弧度 */
+    gapAngel?: number
+    /** 文字对齐的方式，默认居中 */
+    align?: "left" | "center" | "right"
+    /** 文字朝向圆心还是外侧，默认外侧 */
+    direction?: "inner" | "outer"
+    /** 是否反转文字顺序 */
+    reverse?: boolean
+    /** 分割文字的方法 */
+    separator?: string | RegExp | ((text: string) => string[])
+    /** 显示的文字 */
+    children: string
+}
+
+/** 环形文字 */
+export const CircleText: FC<CircleTextProps> = props => {
+    const {
+        width,
+        height,
+        radius,
+        startAngel = 0,
+        gapAngel = 0,
+        align = "center",
+        style,
+        direction = "outer",
+        reverse = false,
+        separator,
+        children,
+        ...rest
+    } = props
+    const unitAngle = Math.atan(width / 2 / radius) * 2
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
+    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
+
+    function getTransform(idx: number) {
+        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
+        const x = (radius + height / 2) * Math.cos(angle) - width / 2
+        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
+        const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
+        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
+    }
+
+    const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
+
+    if (reverse) words.reverse()
+
+    return (
+        <Fragment>
+            {words.map((w, idx) => (
+                <span
+                    key={idx}
+                    style={{
+                        position: "absolute",
+                        ...style,
+                        transform: getTransform(idx),
+                        textAlign: "center",
+                        width,
+                        lineHeight: `${height}px`,
+                        height: height,
+                    }}
+                    {...rest}
+                >
+                    {w}
+                </span>
+            ))}
+        </Fragment>
+    )
+}

package/src/components/CopyButton.tsx

@@ -1,11 +1,13 @@
 "use client"
 
-import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+/* eslint-disable no-restricted-syntax */
 
-import ClipboardJS, { Event } from "clipboard"
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+import ClipboardJS, { type Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 
-export { Event } from "clipboard"
+export type { Event } from "clipboard"
 
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string
@@ -19,13 +21,16 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props,
     const onCopySuccess = useLatest(_onCoptSuccess)
     const onCopyError = useLatest(_onCopyError)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useImperativeHandle(ref, () => ele.current!, [ele.current])
 
     useEffect(() => {
         const clipboard = new ClipboardJS(ele.current!)
         clipboard.on("success", event => onCopySuccess.current?.(event))
         clipboard.on("error", event => onCopyError.current?.(event))
+
         return () => clipboard.destroy()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return <button ref={ele} {...rest} data-clipboard-text={text} />

package/src/components/DraggableGrid.tsx

@@ -1,7 +1,9 @@
-import { ComponentProps, CSSProperties, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+/* eslint-disable no-restricted-syntax */
+
+import { type ComponentProps, type CSSProperties, type Key, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
 
 import { clsx, getArray, isNullable } from "deepsea-tools"
-import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
+import { type DragMoveEvent, type DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"
 
@@ -347,8 +349,11 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             setKeyToOrder(newOrderMap)
             onOrderMapChange?.(newOrderMap)
             const newRenderKeys = new Set(newOrderMap.keys())
+
+            // eslint-disable-next-line react-hooks/immutability
             setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
         }
+        // eslint-disable-next-line react-hooks/refs
     }, [dragging, cache, orders, keyToItem, keyToOrder, orderPriority, onOrderMapChange])
 
     /** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
@@ -384,6 +389,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
 
         if (!!orderMap && isLegalOrderMap({ orders, keys: keyToItem.keys(), orderMap })) setKeyToOrder(orderMap)
         else onOrderMapChange?.(keyToOrder)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [orderMap, keyToOrder, onOrderMapChange])
 
     function onDragMoveStart(key: K, event: DragMoveEvent<HTMLDivElement>) {
@@ -512,6 +518,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             }
             {...rest}
         >
+            {/* eslint-disable-next-line react-hooks/refs */}
             {Array.from(renderKeys).map(key => {
                 if (!keyToItem.has(key)) return undefined
                 const item = keyToItem.get(key)!

package/src/components/Echart.tsx

@@ -1,71 +1,71 @@
 "use client"
 
-import { ComponentProps, FC, ReactNode, Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { type ComponentProps, type FC, type ReactNode, type Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 
 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,
+    type AngleAxisComponentOption,
+    type AriaComponentOption,
+    type AxisPointerComponentOption,
+    type BarSeriesOption,
+    type BoxplotSeriesOption,
+    type BrushComponentOption,
+    type CalendarComponentOption,
+    type CandlestickSeriesOption,
+    type ChordSeriesOption,
+    type ComposeOption,
+    type ContinousVisualMapComponentOption,
+    type CustomSeriesOption,
+    type DatasetComponentOption,
+    type DataZoomComponentOption,
+    type ECharts,
+    type EChartsInitOpts,
+    type EffectScatterSeriesOption,
+    type FunnelSeriesOption,
+    type GaugeSeriesOption,
+    type GeoComponentOption,
+    type GraphicComponentOption,
+    type GraphSeriesOption,
+    type GridComponentOption,
+    type HeatmapSeriesOption,
+    type InsideDataZoomComponentOption,
+    type LegendComponentOption,
+    type LineSeriesOption,
+    type LinesSeriesOption,
+    type MapSeriesOption,
+    type MarkAreaComponentOption,
+    type MarkLineComponentOption,
+    type MarkPointComponentOption,
+    type MatrixComponentOption,
+    type ParallelSeriesOption,
+    type PictorialBarSeriesOption,
+    type PiecewiseVisualMapComponentOption,
+    type PieSeriesOption,
+    type PlainLegendComponentOption,
+    type PolarComponentOption,
+    type RadarComponentOption,
+    type RadarSeriesOption,
+    type RadiusAxisComponentOption,
+    type SankeySeriesOption,
+    type ScatterSeriesOption,
+    type ScrollableLegendComponentOption,
+    type SeriesOption,
+    type SingleAxisComponentOption,
+    type SliderDataZoomComponentOption,
+    type SunburstSeriesOption,
+    type ThemeRiverSeriesOption,
+    type ThumbnailComponentOption,
+    type TimelineComponentOption,
+    type TitleComponentOption,
+    type ToolboxComponentOption,
+    type TooltipComponentOption,
+    type TreemapSeriesOption,
+    type TreeSeriesOption,
+    type VisualMapComponentOption,
+    type XAXisComponentOption,
+    type YAXisComponentOption,
     init,
-    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"
+import type { ECBasicOption } from "echarts/types/src/util/types.js"
 import hash from "stable-hash"
 
 export type ChartOption<T extends SeriesOption = never> = ComposeOption<
@@ -179,13 +179,16 @@ export function Echart<T extends ECBasicOption = ECBasicOption>({
     useLayoutEffect(() => {
         const ele = container.current!
         chartRef.current = init(ele, option, { ...initOption, width, height, locale })
+
         return () => chartRef.current?.dispose()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     useImperativeHandle(ref, () => container.current!)
 
     useImperativeHandle(chart, () => chartRef.current!)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => chartRef.current?.setOption(option), [hash(option)])
 
     // @ts-expect-error width and height can be string

package/src/components/Flow.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -154,6 +154,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
         return index >= maxRows * columnCount
     }
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(element, () => ele.current!, [ele.current])
 
     useEffect(() => {
@@ -180,6 +181,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
             itemCount: data.length,
             maxRows: maxRows ?? null,
         })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])
 
     return (
@@ -266,8 +268,16 @@ export function Flow<T>(props: FlowProps<T>): ReactNode {
     const ele = useRef<HTMLDivElement>(null)
     const size = useSize(ele)
     const width = useRef(size?.width || 0)
+
+    // eslint-disable-next-line react-hooks/refs
     if (size && size.width !== 0) width.current = size.width
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(element, () => ele.current!, [ele.current])
+
+    // eslint-disable-next-line react-hooks/refs
     if (width.current === 0) return <div ref={ele} {...rest} />
+
+    // eslint-disable-next-line react-hooks/refs
     return <ManualFlow element={ele} {...props} width={width.current} />
 }

package/src/components/FormLabel.tsx

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

package/src/components/HlsPlayer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, FC, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentProps, type FC, useEffect, useImperativeHandle, useRef } from "react"
 
 import Hls from "hls.js"
 

package/src/components/IconFileType.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react"
+import type { ComponentProps, FC } from "react"
 
 const GOLD = (Math.sqrt(5) - 1) / 2
 const GOLD_T = Math.sqrt(1 - GOLD * GOLD)

package/src/components/InfiniteScroll.tsx

@@ -1,6 +1,16 @@
 "use client"
 
-import { ComponentPropsWithoutRef, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+/* eslint-disable no-restricted-syntax */
+
+import {
+    type ComponentPropsWithoutRef,
+    type CSSProperties,
+    type MouseEvent as ReactMouseEvent,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+} from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -58,6 +68,7 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
 
     const ele = useRef<HTMLDivElement>(null)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])
 
     const container = useRef<HTMLDivElement>(null)
@@ -87,7 +98,9 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
             },
             { duration, iterations: Infinity },
         )
+
         return () => animation.current?.cancel()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wrapperSize, containerSize, overflow, direction, duration])
 
     function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
@@ -102,6 +115,7 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
 
     useEffect(() => {
         if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [animation.current, pauseOnHover])
 
     return (

package/src/components/InputFile.tsx

@@ -1,6 +1,8 @@
 "use client"
 
-import { ChangeEvent, ComponentProps, ReactNode, useState } from "react"
+/* eslint-disable no-restricted-syntax */
+
+import { type ChangeEvent, type ComponentProps, type ReactNode, useState } from "react"
 
 export interface InputFileDataTypeMap {
     base64: string
@@ -21,9 +23,11 @@ export function getFileData<T extends InputFileDataType>(file: File, type: T): P
         fileReader.addEventListener("load", () => {
             resolve(fileReader.result as any)
         })
+
         fileReader.addEventListener("error", () => {
             reject(fileReader.error ?? new Error("Failed to read file"))
         })
+
         fileReader.addEventListener("abort", () => {
             reject(fileReader.error ?? new Error("File reading was aborted"))
         })
@@ -34,6 +38,7 @@ export function getFileData<T extends InputFileDataType>(file: File, type: T): P
                     fileReader.readAsArrayBuffer(file)
                     break
                 case "binary":
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated
                     fileReader.readAsBinaryString(file)
                     break
                 case "base64":

package/src/components/InputFileButton.tsx

@@ -1,29 +1,31 @@
 "use client"
 
+/* eslint-disable no-restricted-syntax */
+
 import {
-    ComponentProps,
-    ComponentRef,
+    type ComponentProps,
+    type ComponentRef,
+    type DragEvent,
+    type JSX,
+    type JSXElementConstructor,
+    type MouseEvent as ReactMouseEvent,
     createElement,
-    DragEvent,
     Fragment,
-    JSX,
-    JSXElementConstructor,
-    MouseEvent as ReactMouseEvent,
     useImperativeHandle,
     useRef,
     useState,
 } from "react"
 
 import {
-    DataType,
-    FileType,
+    type DataType,
+    type FileType,
+    type InputFileBaseProps,
+    type InputFileDataType,
+    type InputFileDataTypeMap,
+    type InputFileExtraProps,
+    type ValueType,
     getFileData,
     InputFile,
-    InputFileBaseProps,
-    InputFileDataType,
-    InputFileDataTypeMap,
-    InputFileExtraProps,
-    ValueType,
 } from "./InputFile"
 
 export type InputFileButtonProps<
@@ -68,6 +70,7 @@ export function InputFileButton<
     const input = useRef<HTMLInputElement>(null)
     const isDisabled = disabled || _disabled || __disabled
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/refs
     useImperativeHandle(ref, () => input.current!, [input.current])
 
     function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
@@ -116,6 +119,7 @@ export function InputFileButton<
         e.preventDefault()
     }
 
+    /* eslint-disable react-hooks/refs */
     return (
         <Fragment>
             <InputFile<Multiple, Type>
@@ -141,4 +145,5 @@ export function InputFileButton<
             })}
         </Fragment>
     )
+    /* eslint-enable react-hooks/refs */
 }

package/src/components/LoopSwiper.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ComponentProps, CSSProperties, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { type ComponentProps, type CSSProperties, type FC, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
@@ -39,6 +39,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
     const container = useRef<HTMLDivElement>(null)
     const [swiper, setSwiper] = useState(false)
     const directionRef = useRef(direction)
+    // eslint-disable-next-line react-hooks/refs
     directionRef.current = direction
     const flexDirection: CSSProperties["flexDirection"] = direction === "vertical" ? (reverse ? "column-reverse" : "column") : reverse ? "row-reverse" : "row"
     const animationName = swiper