@canlooks/can-ui 0.0.21 → 0.0.22

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -12,10 +12,10 @@ const loadingIndicator_1 = require("../loadingIndicator");
 const popper_style_1 = require("../popper/popper.style");
 const tag_1 = require("../tag");
 const treeSelect_style_1 = require("./treeSelect.style");
-const selectionHook_1 = require("../selectionContext/selectionHook");
-exports.TreeSelect = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+const selectionContext_1 = require("../selectionContext");
+exports.TreeSelect = (0, react_1.memo)(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>
-placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
+placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     props.labelKey ??= 'label';
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const openChangeHandler = (open) => {
@@ -43,7 +43,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
         };
         return fn(react_1.Children.toArray(props.children));
     }, [options, nodes, props.children]);
-    const { innerValue, setInnerValue, toggleSelected, optionsMap } = (0, selectionHook_1.useTreeSelect)({
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = (0, selectionContext_1.useSelection)({
         options: actualOptions,
         primaryKey: props.primaryKey ?? 'value',
         childrenKey: props.childrenKey ?? 'children',
@@ -73,10 +73,10 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, ref: ref, css: treeSelect_style_1.style, className: (0, utils_1.classnames)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.classnames)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
                         : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                             : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
-}));
+});
 exports.TreeSelect.Option = exports.TreeSelect.Node = tree_1.TreeNode;

package/dist/cjs/components/treeSelect/treeSelect.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     placeholder: string;
-    arrow: string;
     contentWrap: string;
+    arrow: string;
     backfill: string;
     backfillWrap: string;
 } & {

package/dist/cjs/components/typography/typography.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ColorPropsValue, OverridableProps } from '../../../types';
 import { ButtonProps } from '../button';
 import { InputProps } from '../input';
@@ -15,8 +15,8 @@ export type TypographyProps = {
     expandable?: boolean;
     expandButtonProps?: ButtonProps;
 };
-export type OverridedTypographyProps<C> = TypographyProps & Omit<OverridableProps<C>, 'onCopy'>;
-type TypographyComponent<C extends keyof JSX.IntrinsicElements = 'p'> = (props: OverridedTypographyProps<C>) => ReactNode;
+export type OverrideTypographyProps<C> = TypographyProps & Omit<OverridableProps<C>, 'onCopy'>;
+type TypographyComponent<C extends keyof React.JSX.IntrinsicElements = 'p'> = (props: OverrideTypographyProps<C>) => ReactNode;
 export declare const Typography: TypographyComponent & {
     h1: TypographyComponent<"h1">;
     h2: TypographyComponent<"h2">;

package/dist/cjs/components/typography/typography.js

@@ -10,7 +10,7 @@ const icons_1 = require("@ant-design/icons");
 const tooltip_1 = require("../tooltip");
 const input_1 = require("../input");
 const textarea_1 = require("../textarea");
-exports.Typography = (0, react_1.memo)((0, react_1.forwardRef)(({ component: Component = 'p', color = 'text', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }, ref) => {
+exports.Typography = (0, react_1.memo)(({ ref, component: Component = 'p', color = 'text.secondary', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }) => {
     /**
      * -------------------------------------------------------------------
      * 编辑
@@ -44,7 +44,7 @@ exports.Typography = (0, react_1.memo)((0, react_1.forwardRef)(({ component: Com
             return;
         }
         const text = textRef.current.innerText;
-        navigator.clipboard.writeText(text);
+        navigator.clipboard.writeText(text).then();
         onCopy?.(text);
         setCopied(true);
         setTimeout(() => {
@@ -74,18 +74,18 @@ exports.Typography = (0, react_1.memo)((0, react_1.forwardRef)(({ component: Com
                     (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F16\u8F91", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: editHandler, children: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}) }) }), copyable && (copied
                     ? (0, jsx_runtime_1.jsx)("div", { className: typography_style_1.classes.copied, children: (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}) })
                     : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u590D\u5236", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: typography_style_1.classes.action, variant: "plain", onClick: copyHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}) }) }))] });
-}));
-exports.Typography.h1 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h1" })));
-exports.Typography.h2 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h2" })));
-exports.Typography.h3 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h3" })));
-exports.Typography.h4 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h4" })));
-exports.Typography.h5 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h5" })));
-exports.Typography.h6 = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "h6" })));
-exports.Typography.mark = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "mark" })));
-exports.Typography.code = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "code" })));
-exports.Typography.kbd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "kbd" })));
-exports.Typography.a = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "a" })));
-exports.Typography.i = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "i" })));
-exports.Typography.b = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "b" })));
-exports.Typography.u = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "u" })));
-exports.Typography.del = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, ref: ref, component: "del" })));
+});
+exports.Typography.h1 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h1" }));
+exports.Typography.h2 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h2" }));
+exports.Typography.h3 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h3" }));
+exports.Typography.h4 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h4" }));
+exports.Typography.h5 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h5" }));
+exports.Typography.h6 = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "h6" }));
+exports.Typography.mark = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "mark" }));
+exports.Typography.code = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "code" }));
+exports.Typography.kbd = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "kbd" }));
+exports.Typography.a = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "a" }));
+exports.Typography.i = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "i" }));
+exports.Typography.b = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "b" }));
+exports.Typography.u = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "u" }));
+exports.Typography.del = (0, react_1.memo)((props) => (0, jsx_runtime_1.jsx)(exports.Typography, { ...props, component: "del" }));

package/dist/cjs/components/typography/typography.style.d.ts

@@ -1,8 +1,8 @@
 import { TypographyProps } from './typography';
 export declare const classes: {
     text: string;
-    ellipsis: string;
     action: string;
+    ellipsis: string;
     expand: string;
     copied: string;
     editWrap: string;

package/dist/cjs/components/typography/typography.style.js

@@ -61,7 +61,7 @@ function useStyle({ color }) {
             }
 
             &[data-component=mark] {
-                background-color: ${(0, color_1.default)(colors.warning).lighten(.2).hex()};
+                background-color: ${(0, color_1.default)(colors.warning.main).lighten(.2).hex()};
             }
 
             &[data-component=kbd] {
@@ -85,7 +85,7 @@ function useStyle({ color }) {
             }
 
             &[data-component=a] {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
                 transition: color .2s ${easing.easeOut};
 
                 &:hover {
@@ -139,7 +139,7 @@ function useStyle({ color }) {
 
             .${exports.classes.copied} {
                 align-items: center;
-                color: ${colors.success};
+                color: ${colors.success.main};
                 animation: ${copyCheckAnim} .2s ${easing.swing};
             }
         `;

package/dist/cjs/components/upload/dropArea.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { DIVProps } from '../../../types';
 export interface DropAreaProps extends Omit<DIVProps, 'onDrop'> {
     description?: ReactNode;
     onDrop?(files: FileList): void;
 }
-export declare const DropArea: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DropAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const DropArea: React.MemoExoticComponent<({ description, onDrop, ...props }: DropAreaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/upload/dropArea.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const dropArea_style_1 = require("./dropArea.style");
 const utils_1 = require("../../utils");
 const icons_1 = require("@ant-design/icons");
-exports.DropArea = (0, react_1.memo)((0, react_1.forwardRef)(({ description = '将文件拖拽到这里', onDrop, ...props }, ref) => {
+exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const fn = (e) => e.preventDefault();
@@ -26,11 +26,11 @@ exports.DropArea = (0, react_1.memo)((0, react_1.forwardRef)(({ description = '
         files.length && onDrop?.(files);
         setDraggingOver(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: dropArea_style_1.style, className: (0, utils_1.classnames)(dropArea_style_1.classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dropArea_style_1.style, className: (0, utils_1.classnames)(dropArea_style_1.classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
             props.onDragEnter?.(e);
             setDraggingOver(true);
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
         }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(icons_1.InboxOutlined, { className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
-}));
+});

package/dist/cjs/components/upload/dropArea.style.js

@@ -28,7 +28,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
     }
 
     &[data-over=true] {
-        border-color: ${colors.primary};
-        color: ${colors.primary};
+        border-color: ${colors.primary.main};
+        color: ${colors.primary.main};
     }
 `);

package/dist/cjs/components/upload/fileItem.d.ts

@@ -1,5 +1,3 @@
-import { ReactElement, Ref } from 'react';
-import { ItemProps, ItemRef } from './itemStatus';
-export declare const FileItem: <R, A extends any[]>(props: ItemProps<R, A> & {
-    ref?: Ref<ItemRef<R, A>>;
-}) => ReactElement;
+import { ReactElement } from 'react';
+import { ItemProps } from './itemStatus';
+export declare const FileItem: <R, A extends any[]>(props: ItemProps<R, A>) => ReactElement;

package/dist/cjs/components/upload/fileItem.js

@@ -8,17 +8,17 @@ const icons_1 = require("@ant-design/icons");
 const loadingIndicator_1 = require("../loadingIndicator");
 const button_1 = require("../button");
 const progress_1 = require("../progress");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const itemStatus_1 = require("./itemStatus");
-exports.FileItem = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
-    const { status, progress } = (0, itemStatus_1.useItemStatus)(props, ref);
-    const { colors } = (0, app_1.useTheme)();
+exports.FileItem = (0, react_1.memo)((props) => {
+    const { status, progress } = (0, itemStatus_1.useItemStatus)(props);
+    const { colors } = (0, theme_1.useTheme)();
     const statusToIcon = {
         'default': (0, jsx_runtime_1.jsx)(icons_1.PaperClipOutlined, {}),
         uploading: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}),
-        success: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { style: { color: colors.success } }),
-        error: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { style: { color: colors.error } })
+        success: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { style: { color: colors.success.main } }),
+        error: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { style: { color: colors.error.main } })
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.file, "data-status": status, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.icon, children: statusToIcon[status] }), (0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.name, children: props.file.name }), status !== 'default' &&
                         (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: upload_style_1.classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.control, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) }) })] }));
-}));
+});

package/dist/cjs/components/upload/imageItem.d.ts

@@ -1,5 +1,3 @@
-import { ReactElement, Ref } from 'react';
-import { ItemProps, ItemRef } from './itemStatus';
-export declare const ImageItem: <R, A extends any[]>(props: ItemProps<R, A> & {
-    ref?: Ref<ItemRef<R, A>>;
-}) => ReactElement;
+import { ReactElement } from 'react';
+import { ItemProps } from './itemStatus';
+export declare const ImageItem: <R, A extends any[]>(props: ItemProps<R, A>) => ReactElement;

package/dist/cjs/components/upload/imageItem.js

@@ -10,9 +10,9 @@ const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const progress_1 = require("../progress");
 const utils_1 = require("../../utils");
-exports.ImageItem = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+exports.ImageItem = (0, react_1.memo)((props) => {
     const [previewOpen, setPreviewOpen] = (0, react_1.useState)(false);
-    const { status, progress } = (0, itemStatus_1.useItemStatus)(props, ref);
+    const { status, progress } = (0, itemStatus_1.useItemStatus)(props);
     return ((0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, children: (0, jsx_runtime_1.jsx)(image_1.Image, { className: upload_style_1.classes.image, src: props.file.url, previewProps: {
                 open: previewOpen,
                 onOpenChange: setPreviewOpen
@@ -21,4 +21,4 @@ exports.ImageItem = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
                 (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}) }, "delete")
             ], children: status !== 'default' &&
                 (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classnames)(upload_style_1.classes.progress), children: (0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
-}));
+});

package/dist/cjs/components/upload/itemStatus.d.ts

@@ -6,10 +6,11 @@ export type ItemRef<R, A extends any[]> = {
     setProgress: Dispatch<SetStateAction<number>>;
 };
 export interface ItemProps<R, A extends any[]> extends UploadSharedProps<R, A> {
+    ref?: Ref<ItemRef<R, A>>;
     file: UploadFile<R, A>;
     onRemove(): void;
 }
-export declare function useItemStatus<R, A extends any[]>(props: ItemProps<R, A>, ref: Ref<ItemRef<R, A>>): {
+export declare function useItemStatus<R, A extends any[]>(props: ItemProps<R, A>): {
     status: "success" | "error" | "default" | "uploading";
     progress: number;
 };

package/dist/cjs/components/upload/itemStatus.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemStatus = useItemStatus;
 const react_1 = require("react");
-function useItemStatus(props, ref) {
+function useItemStatus(props) {
     if (props.type === 'image') {
         props.file.url ||= URL.createObjectURL(props.file);
     }
@@ -24,6 +24,6 @@ function useItemStatus(props, ref) {
     props.file.status = status;
     const [progress, setProgress] = (0, react_1.useState)(0);
     props.file.progress = progress;
-    (0, react_1.useImperativeHandle)(ref, () => ({ upload, setStatus, setProgress }));
+    (0, react_1.useImperativeHandle)(props.ref, () => ({ upload, setStatus, setProgress }));
     return { status, progress };
 }

package/dist/cjs/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import React, { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { DIVProps } from '../../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
@@ -15,14 +15,14 @@ export interface UploadSharedProps<R, A extends any[]> {
     onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
 export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     accept?: string;
     max?: number;
     /**
      * 是否显示"选择文件"按钮
      * {@link type}为"file"生效
-     * @default true
+     * 默认为true
      */
     showButton?: boolean;
     buttonProps?: ButtonProps;

package/dist/cjs/components/upload/upload.js

@@ -22,10 +22,10 @@ const markFileId = (files) => {
         }
     }
 };
-exports.Upload = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }, ref) => {
+exports.Upload = (0, react_1.memo)(({ inputProps, inputRef, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
     const wrapperRef = (0, react_1.useRef)(null);
     const itemRefs = (0, react_1.useRef)(new Map());
-    (0, react_1.useImperativeHandle)(ref, () => {
+    (0, react_1.useImperativeHandle)(props.ref, () => {
         wrapperRef.current.upload = async (...args) => {
             for (const [, itemRef] of itemRefs.current) {
                 itemRef?.setStatus('uploading');
@@ -95,7 +95,17 @@ exports.Upload = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputR
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.classnames)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showButton &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => itemRefs.current.set(file.id, r), file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
-                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => itemRefs.current.set(file.id, r), type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
-}));
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
+                                                itemRefs.current.set(file.id, r);
+                                                return () => {
+                                                    itemRefs.current.delete(file.id);
+                                                };
+                                            }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
+                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
+                                            itemRefs.current.set(file.id, r);
+                                            return () => {
+                                                itemRefs.current.delete(file.id);
+                                            };
+                                        }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
+});
 exports.Upload.DropArea = dropArea_1.DropArea;

package/dist/cjs/components/upload/upload.style.d.ts

@@ -1,10 +1,10 @@
 export declare const classes: {
     info: string;
+    name: string;
+    icon: string;
     input: string;
     progress: string;
     image: string;
-    icon: string;
-    name: string;
     file: string;
     control: string;
     files: string;

package/dist/cjs/components/upload/upload.style.js

@@ -20,7 +20,7 @@ exports.classes = (0, utils_1.defineClasses)('upload', [
     'sortable'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
-    const maskBg = (0, color_1.default)(background.card).alpha(.9).string();
+    const maskBg = (0, color_1.default)(background.content).alpha(.9).string();
     return (0, react_1.css) `
         position: relative;
 
@@ -82,7 +82,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadiu
 
                     &[data-status=error] {
                         .${exports.classes.name} {
-                            color: ${colors.error};
+                            color: ${colors.error.main};
                         }
 
                         .${exports.classes.control} {
@@ -111,8 +111,8 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadiu
                     transition: border-color .2s ${easing.easeOut}, color .2s ${easing.easeOut};
 
                     &:hover {
-                        border-color: ${colors.primary};
-                        color: ${colors.primary};
+                        border-color: ${colors.primary.main};
+                        color: ${colors.primary.main};
                     }
                 }
 

package/dist/cjs/components/waterfall/waterfall.d.ts

@@ -1,10 +1,10 @@
 import { ResponsiveProp } from '../../../types';
 import { TransportStyleProps } from '../transportStyle';
 export interface WaterfallProps extends TransportStyleProps {
-    /** 布局列数，@default xs: 4 */
+    /** 布局列数，默认为`{xs: 4}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
 }
-export declare const Waterfall: import("react").ForwardRefExoticComponent<Omit<WaterfallProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Waterfall({ ref, columnCount, gap, columnGap, rowGap, ...props }: WaterfallProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/waterfall/waterfall.js

@@ -1,39 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Waterfall = void 0;
+exports.Waterfall = Waterfall;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const waterfall_style_1 = require("./waterfall.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
-    columnCount = (0, utils_1.responsiveValue)(columnCount);
-    gap = (0, utils_1.responsiveValue)(gap);
-    columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
-    rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
+function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+    columnCount = (0, utils_1.toResponsiveValue)(columnCount);
+    gap = (0, utils_1.toResponsiveValue)(gap);
+    columnGap = (0, utils_1.toResponsiveValue)(columnGap) ?? gap;
+    rowGap = (0, utils_1.toResponsiveValue)(rowGap) ?? gap;
     const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
     const container = (0, react_1.useRef)(null);
-    const items = (0, react_1.useRef)([]);
-    items.current = [];
-    (0, react_1.useEffect)(() => {
-        const elements = items.current;
+    const items = (0, react_1.useRef)(new Map());
+    (0, react_1.useLayoutEffect)(() => {
         const resizeObserver = new ResizeObserver(() => {
             const heights = Array(columnCountNum).fill(0);
-            for (let i = 0, { length } = elements; i < length; i++) {
-                const el = elements[i];
-                const order = heights.indexOf(Math.min(...heights));
-                heights[order] += el.offsetHeight;
-                el.style.order = order + '';
-                el.dataset.ordered = 'true';
+            for (const [, el] of items.current) {
+                if (el) {
+                    const order = heights.indexOf(Math.min(...heights));
+                    heights[order] += el.offsetHeight;
+                    el.style.order = order + '';
+                }
             }
-            container.current.style.height = Math.max(...heights) + 2 + 'px';
+            container.current.style.height = Math.max(...heights) + 1 + 'px';
         });
-        for (let i = 0, { length } = elements; i < length; i++) {
-            resizeObserver.observe(elements[i]);
+        for (const [, el] of items.current) {
+            el && resizeObserver.observe(el);
         }
         return () => {
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(ref, container), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
-});
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(ref, container), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => {
+            const key = (0, react_1.isValidElement)(child) ? child.key ?? i : i;
+            return ((0, jsx_runtime_1.jsx)("div", { ref: r => {
+                    items.current.set(key, r);
+                    return () => {
+                        items.current.delete(key);
+                    };
+                }, className: waterfall_style_1.classes.item, children: child }, key));
+        }) }));
+}

package/dist/cjs/components/waterfall/waterfall.style.js

@@ -8,8 +8,8 @@ exports.classes = (0, utils_1.defineClasses)('waterfall', [
     'item'
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {
-    return (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(k => `
+    return (0, utils_1.useCss)(theme => (0, react_1.css) `
+        ${(0, utils_1.responsiveVariables)(theme, k => `
             ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};
@@ -31,5 +31,5 @@ function useStyle({ columnCount, columnGap, rowGap }) {
                 display: flex;
             }
         }
-    `;
+    `);
 }

package/dist/cjs/extensions/documentViewer/documentViewer.d.ts

@@ -5,7 +5,7 @@ export type DocumentViewerBaseProps = {
     src?: string;
     filename?: string;
     onError?(e: any): void;
-    /** 是否将文件名设置成页面的标题，@default true */
+    /** 是否将文件名设置成页面的标题，默认为true */
     setDocumentTitle?: boolean;
 };
 export interface DocumentViewerProps extends DocumentViewerBaseProps {
@@ -24,7 +24,6 @@ export declare const DocumentViewer: {
 export declare function useDocumentTitle({ filename, setDocumentTitle }: Pick<DocumentViewerBaseProps, 'filename' | 'setDocumentTitle'>): void;
 /**
  * 获取文件内容
- * @param param0
  */
 export declare function useBlob({ src, onError }: DocumentViewerBaseProps): {
     blob: Blob | undefined;

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -14,8 +14,8 @@ const icons_1 = require("@ant-design/icons");
 const documentViewer_style_1 = require("./documentViewer.style");
 const utils_1 = require("../../utils");
 const pdfViewer_1 = require("./pdfViewer");
-const imagePreview_1 = require("../../components/image/imagePreview");
-exports.DocumentViewer = (0, react_1.memo)((0, react_1.forwardRef)(({ src, filename, onError, type, extension, setDocumentTitle = true }, ref) => {
+const image_1 = require("../../components/image");
+exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = (0, react_1.useMemo)(() => {
         if (!src) {
             return null;
@@ -27,7 +27,7 @@ exports.DocumentViewer = (0, react_1.memo)((0, react_1.forwardRef)(({ src, filen
             return mime_1.default.getType(extension);
         }
         if (filename) {
-            const [ext] = filename.match(/\.([^\\/\.])+$/) || [null];
+            const [ext] = filename.match(/\.([^\\/.])+$/) || [null];
             return ext && mime_1.default.getType(ext);
         }
         return null;
@@ -64,10 +64,10 @@ exports.DocumentViewer = (0, react_1.memo)((0, react_1.forwardRef)(({ src, filen
     }
     // image
     if (mimeType.includes('image/')) {
-        return (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: src, open: true, showClose: false });
+        return (0, jsx_runtime_1.jsx)(image_1.ImagePreview, { src: src, open: true, showClose: false });
     }
     return empty;
-}));
+});
 exports.DocumentViewer.Svg = svgViewer_1.SvgViewer;
 exports.DocumentViewer.Pdf = pdfViewer_1.PdfViewer;
 /**
@@ -82,7 +82,6 @@ function useDocumentTitle({ filename, setDocumentTitle }) {
 }
 /**
  * 获取文件内容
- * @param param0
  */
 function useBlob({ src, onError }) {
     // src改变会清空data

package/dist/cjs/extensions/documentViewer/documentViewer.style.js

@@ -31,7 +31,7 @@ exports.svgStyle = (0, utils_1.defineCss)(({ spacing, background, divider, text,
 
     .${exports.classes.svgToolbar} {
         padding: ${spacing[3]}px ${spacing[8]}px;
-        background: ${background.card};
+        background: ${background.content};
         border-bottom: 1px solid ${divider};
         display: flex;
         align-items: center;
@@ -44,7 +44,7 @@ exports.svgStyle = (0, utils_1.defineCss)(({ spacing, background, divider, text,
             color: ${text.primary};
 
             .${exports.classes.svgIcon} {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
         }
 

package/dist/cjs/extensions/documentViewer/pdfViewer.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { DocumentViewerBaseProps } from './documentViewer';
-export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<JSX.IntrinsicElements['iframe'], 'onError'> {
+export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<React.JSX.IntrinsicElements['iframe'], 'onError'> {
 }
-export declare const PdfViewer: import("react").MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const PdfViewer: React.MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;