deepsea-components 5.7.4 → 5.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.7.4",
+  "version": "5.7.6",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -32,7 +32,7 @@
     "hls.js": "^1.5.17",
     "smooth-scrollbar": "^8.8.4",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
-    "deepsea-tools": "5.14.1"
+    "deepsea-tools": "5.15.0"
   },
   "peerDependencies": {
     "@types/react": "^18.3.1",

package/src/components/AutoFit.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
 
 export interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/AutoScroll.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { useSize } from "ahooks"
 import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
 import { Scroll, ScrollProps } from "./Scroll"
 

package/src/components/AutoSizeTextarea.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
 
 /**

package/src/components/CircleText.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { FC, Fragment, HTMLAttributes } from "react"
 
 export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {

package/src/components/CopyButton.tsx

@@ -1,10 +1,12 @@
+"use client"
+
 import { useLatest } from "ahooks"
 import ClipboardJS, { Event } from "clipboard"
-import { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 
 export { Event } from "clipboard"
 
-export type CopyButtonProps = ComponentProps<"button"> & {
+export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string
     onCopySuccess?: (e: Event) => void
     onCopyError?: (e: Event) => void

package/src/components/Echart.tsx

@@ -1,21 +1,23 @@
+"use client"
+
 import {
     BarSeriesOption,
     ComposeOption,
     DatasetComponentOption,
     ECharts,
     GridComponentOption,
-    init,
     LineSeriesOption,
     PieSeriesOption,
     TitleComponentOption,
     TooltipComponentOption,
+    init,
 } from "echarts"
 import {
-    ComponentProps,
-    ForwardedRef,
-    forwardRef,
+    ComponentPropsWithoutRef,
     ForwardRefExoticComponent,
+    ForwardedRef,
     RefAttributes,
+    forwardRef,
     useEffect,
     useImperativeHandle,
     useLayoutEffect,
@@ -28,7 +30,7 @@ export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | D
 
 export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
 
-export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
+export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     width: number
     height: number
     option: T

package/src/components/Flow.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
 import { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from "react"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
 
 export interface FlowSizeData {
@@ -239,7 +240,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
 }
 
 /** 自适应浮动组件 */
-export function Flow<T>(props: FlowProps<T>) {
+export function Flow<T>(props: FlowProps<T>): ReactNode {
     const {
         itemWidth,
         itemHeight,

package/src/components/FormLabel.tsx

@@ -1,8 +1,9 @@
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { ComponentProps, FC, Fragment } from "react"
+import { ComponentPropsWithoutRef, FC, Fragment } from "react"
+
+import { css } from "@emotion/css"
 
-export type FormLabelProps = ComponentProps<"div"> & {
+export type FormLabelProps = ComponentPropsWithoutRef<"div"> & {
     /**
      * Label 的宽度.
      */
@@ -16,23 +17,19 @@ export type FormLabelProps = ComponentProps<"div"> & {
 /**
  * 为 Ant Design 的 FormItem 设计的 Label 组件
  */
-export const FormLabel: FC<FormLabelProps> = props => {
-    const { className, style, before, width, ...rest } = props
-
-    return (
-        <Fragment>
-            {!!before && <div style={{ width: 11 }}>&ensp;</div>}
-            <div
-                className={clsx(
-                    css`
-                        text-align: justify;
-                        text-align-last: justify;
-                    `,
-                    className,
-                )}
-                style={{ width, ...style }}
-                {...rest}
-            />
-        </Fragment>
-    )
-}
+export const FormLabel: FC<FormLabelProps> = ({ className, style, before, width, ...rest }) => (
+    <Fragment>
+        {!!before && <div style={{ width: 11 }}>&ensp;</div>}
+        <div
+            className={clsx(
+                css`
+                    text-align: justify;
+                    text-align-last: justify;
+                `,
+                className,
+            )}
+            style={{ width, ...style }}
+            {...rest}
+        />
+    </Fragment>
+)

package/src/components/InfiniteScroll.tsx

@@ -1,9 +1,12 @@
-import { css } from "@emotion/css"
+"use client"
+
 import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
-import { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
+import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+import { css } from "@emotion/css"
 
-export type InfiniteScrollProps = ComponentProps<"div"> & {
+export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {
     /**
      * 滚动的方向
      * @default "vertical"

package/src/components/LoopSwiper.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
+
+import { css } from "@emotion/css"
 
 export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
     direction?: "horizontal" | "vertical"

package/src/components/Ring.tsx

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

package/src/components/Scroll.tsx

@@ -1,11 +1,13 @@
 "use client"
 
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
-import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
+import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
+
 export { default as Scrollbar } from "smooth-scrollbar"
 export * from "smooth-scrollbar/interfaces"
 

package/src/components/SectionRing.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { DrawArcOptions, drawArc } from "deepsea-tools"
-import { FC, HTMLAttributes } from "react"
+import { HTMLAttributes, forwardRef } from "react"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number
@@ -10,7 +10,7 @@ export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     angel: number
 }
 
-export const SectionRing: FC<SectionRingProps> = props => {
+export const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props
 
     const s = (Math.PI * 2) / c - a
@@ -21,8 +21,8 @@ export const SectionRing: FC<SectionRingProps> = props => {
 
     return (
         <div
+            ref={ref}
             style={{
-                ...style,
                 width: o * 2,
                 height: o * 2,
                 clipPath: `path("${Array(c)
@@ -32,8 +32,9 @@ export const SectionRing: FC<SectionRingProps> = props => {
                             `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,
                     )
                     .join(" ")} Z")`,
+                ...style,
             }}
             {...rest}
         />
     )
-}
+})

package/src/components/Skeleton.tsx

@@ -1,17 +1,14 @@
-"use client"
+import { clsx } from "deepsea-tools"
+import { HTMLAttributes, forwardRef } from "react"
 
 import { css } from "@emotion/css"
-import { clsx } from "deepsea-tools"
-import { forwardRef, HTMLAttributes } from "react"
 
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean
 }
 
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
-    let { className, loading, children, ...rest } = props
-
-    loading ??= children === undefined || children === null
+    const { className, children, loading = children === undefined || children === null, ...rest } = props
 
     return (
         <div

package/src/components/Title.tsx

@@ -1,8 +1,11 @@
-import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
+"use client"
+
+import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { createPortal } from "react-dom"
+
 import { getReactVersion } from "../utils/getReactVersion"
 
-export type TitleProps = ComponentProps<"title">
+export type TitleProps = ComponentPropsWithoutRef<"title">
 
 const [major] = getReactVersion()
 

package/src/components/TransitionBox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useSize } from "ahooks"
-import { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react"
+import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
 
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
     containerClassName?: string

package/src/components/Trapezium.tsx

@@ -1,8 +1,7 @@
-"use client"
-
-import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { HTMLAttributes, forwardRef } from "react"
+
+import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "../utils"
 
 export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {