@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/tree/treeNode.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes } from './tree.style';
 import { classnames } from '../../utils';
 import { Collapse } from '../transitionBase';
@@ -8,7 +8,7 @@ import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { useTreeContext } from './tree';
 import { useSelectionContext } from '../selectionContext';
-export const TreeNode = memo(forwardRef(({ value, label, prefix, suffix, disabled, _level = 0, ...props }, ref) => {
+export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
     disabled ??= context.disabled;
     const { selectionStatus, toggleSelected } = useSelectionContext();
@@ -19,7 +19,7 @@ export const TreeNode = memo(forwardRef(({ value, label, prefix, suffix, disable
         clickLabelToExpand && toggleExpanded?.(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, className: classnames(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: classnames(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded?.(value);
                         }, children: renderExpandIcon
@@ -37,4 +37,4 @@ export const TreeNode = memo(forwardRef(({ value, label, prefix, suffix, disable
                             ? cloneElement(child, { _level: _level + 1 })
                             : child;
                     }) })] }));
-}));
+});

package/dist/esm/components/treeSelect/treeSelect.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
 import { PopperProps, PopperRef } from '../popper';
-import { NodeType, TreeBaseProps, TreeMultipleProps, TreeNode, TreeSingleProps } from '../tree';
-import { Id } from '../../../types';
+import { NodeType, TreeBaseProps, TreeNode } from '../tree';
+import { Id, SelectableSingleProps } from '../../../types';
 interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
     /** <select />内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
@@ -20,10 +20,10 @@ interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends
     clearable?: boolean;
     onClear?(): void;
 }
-export interface TreeSelectSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeSingleProps<N, V> {
+export interface TreeSelectSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, SelectableSingleProps<V> {
     renderBackfill?(selectedValue: V): ReactNode;
 }
-export interface TreeSelectMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeMultipleProps<N, V> {
+export interface TreeSelectMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, SelectableSingleProps<V> {
     renderBackfill?(selectedValue: V[]): ReactNode;
 }
 export type TreeSelectProps<N extends NodeType<V>, V extends Id = Id> = TreeSelectSingleProps<N, V> | TreeSelectMultipleProps<N, V>;

package/dist/esm/components/treeSelect/treeSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Children, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { Children, isValidElement, memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { Tree, TreeNode } from '../tree';
 import { CaretDownOutlined } from '@ant-design/icons';
@@ -9,10 +9,10 @@ import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
 import { Tag } from '../tag';
 import { classes, style } from './treeSelect.style';
-import { useTreeSelect } from '../selectionContext/selectionHook';
-export const TreeSelect = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+import { useSelection } from '../selectionContext';
+export const TreeSelect = 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] = useControlled(defaultOpen, open, onOpenChange);
     const openChangeHandler = (open) => {
@@ -40,7 +40,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
         };
         return fn(Children.toArray(props.children));
     }, [options, nodes, props.children]);
-    const { innerValue, setInnerValue, toggleSelected, optionsMap } = useTreeSelect({
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = useSelection({
         options: actualOptions,
         primaryKey: props.primaryKey ?? 'value',
         childrenKey: props.childrenKey ?? 'children',
@@ -70,10 +70,10 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
     return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!props.multiple, ref: ref, css: style, className: classnames(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 }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: classnames(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 }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})
                             : _jsx(CaretDownOutlined, {}) })] }) }) }));
-}));
+});
 TreeSelect.Option = TreeSelect.Node = TreeNode;

package/dist/esm/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/esm/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/esm/components/typography/typography.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
+import { memo, useLayoutEffect, useRef, useState } from 'react';
 import { classnames, cloneRef, useUnmounted } from '../../utils';
 import { useStyle, classes, editStyle } from './typography.style';
 import { Button } from '../button';
@@ -7,7 +7,7 @@ import { CheckOutlined, CopyOutlined, EditOutlined } from '@ant-design/icons';
 import { Tooltip } from '../tooltip';
 import { Input } from '../input';
 import { Textarea } from '../textarea';
-export const Typography = memo(forwardRef(({ component: Component = 'p', color = 'text', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }, ref) => {
+export const Typography = memo(({ ref, component: Component = 'p', color = 'text.secondary', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }) => {
     /**
      * -------------------------------------------------------------------
      * 编辑
@@ -41,7 +41,7 @@ export const Typography = memo(forwardRef(({ component: Component = 'p', color =
             return;
         }
         const text = textRef.current.innerText;
-        navigator.clipboard.writeText(text);
+        navigator.clipboard.writeText(text).then();
         onCopy?.(text);
         setCopied(true);
         setTimeout(() => {
@@ -71,18 +71,18 @@ export const Typography = memo(forwardRef(({ component: Component = 'p', color =
                     _jsx(Tooltip, { title: "\u7F16\u8F91", children: _jsx(Button, { className: classes.action, variant: "plain", onClick: editHandler, children: _jsx(EditOutlined, {}) }) }), copyable && (copied
                     ? _jsx("div", { className: classes.copied, children: _jsx(CheckOutlined, {}) })
                     : _jsx(Tooltip, { title: "\u590D\u5236", children: _jsx(Button, { className: classes.action, variant: "plain", onClick: copyHandler, children: _jsx(CopyOutlined, {}) }) }))] });
-}));
-Typography.h1 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h1" })));
-Typography.h2 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h2" })));
-Typography.h3 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h3" })));
-Typography.h4 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h4" })));
-Typography.h5 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h5" })));
-Typography.h6 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h6" })));
-Typography.mark = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "mark" })));
-Typography.code = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "code" })));
-Typography.kbd = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "kbd" })));
-Typography.a = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "a" })));
-Typography.i = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "i" })));
-Typography.b = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "b" })));
-Typography.u = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "u" })));
-Typography.del = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "del" })));
+});
+Typography.h1 = memo((props) => _jsx(Typography, { ...props, component: "h1" }));
+Typography.h2 = memo((props) => _jsx(Typography, { ...props, component: "h2" }));
+Typography.h3 = memo((props) => _jsx(Typography, { ...props, component: "h3" }));
+Typography.h4 = memo((props) => _jsx(Typography, { ...props, component: "h4" }));
+Typography.h5 = memo((props) => _jsx(Typography, { ...props, component: "h5" }));
+Typography.h6 = memo((props) => _jsx(Typography, { ...props, component: "h6" }));
+Typography.mark = memo((props) => _jsx(Typography, { ...props, component: "mark" }));
+Typography.code = memo((props) => _jsx(Typography, { ...props, component: "code" }));
+Typography.kbd = memo((props) => _jsx(Typography, { ...props, component: "kbd" }));
+Typography.a = memo((props) => _jsx(Typography, { ...props, component: "a" }));
+Typography.i = memo((props) => _jsx(Typography, { ...props, component: "i" }));
+Typography.b = memo((props) => _jsx(Typography, { ...props, component: "b" }));
+Typography.u = memo((props) => _jsx(Typography, { ...props, component: "u" }));
+Typography.del = memo((props) => _jsx(Typography, { ...props, component: "del" }));

package/dist/esm/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/esm/components/typography/typography.style.js

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

package/dist/esm/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/esm/components/upload/dropArea.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { classes, style } from './dropArea.style';
 import { classnames } from '../../utils';
 import { InboxOutlined } from '@ant-design/icons';
-export const DropArea = memo(forwardRef(({ description = '将文件拖拽到这里', onDrop, ...props }, ref) => {
+export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);
     useEffect(() => {
         const fn = (e) => e.preventDefault();
@@ -23,11 +23,11 @@ export const DropArea = memo(forwardRef(({ description = '将文件拖拽到这
         files.length && onDrop?.(files);
         setDraggingOver(false);
     };
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
             props.onDragEnter?.(e);
             setDraggingOver(true);
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
         }, onDrop: dropHandler, children: [_jsx(InboxOutlined, { className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
-}));
+});

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

@@ -25,7 +25,7 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
     }
 
     &[data-over=true] {
-        border-color: ${colors.primary};
-        color: ${colors.primary};
+        border-color: ${colors.primary.main};
+        color: ${colors.primary.main};
     }
 `);

package/dist/esm/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/esm/components/upload/fileItem.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes } from './upload.style';
 import { CheckCircleFilled, CloseCircleFilled, CloseOutlined, PaperClipOutlined } from '@ant-design/icons';
 import { LoadingIndicator } from '../loadingIndicator';
 import { Button } from '../button';
 import { Progress } from '../progress';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { useItemStatus } from './itemStatus';
-export const FileItem = memo(forwardRef((props, ref) => {
-    const { status, progress } = useItemStatus(props, ref);
+export const FileItem = memo((props) => {
+    const { status, progress } = useItemStatus(props);
     const { colors } = useTheme();
     const statusToIcon = {
         'default': _jsx(PaperClipOutlined, {}),
         uploading: _jsx(LoadingIndicator, {}),
-        success: _jsx(CheckCircleFilled, { style: { color: colors.success } }),
-        error: _jsx(CloseCircleFilled, { style: { color: colors.error } })
+        success: _jsx(CheckCircleFilled, { style: { color: colors.success.main } }),
+        error: _jsx(CloseCircleFilled, { style: { color: colors.error.main } })
     };
     return (_jsxs("div", { className: classes.file, "data-status": status, children: [_jsx("div", { className: classes.icon, children: statusToIcon[status] }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.name, children: props.file.name }), status !== 'default' &&
                         _jsx(Progress, { className: classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), _jsx("div", { className: classes.control, children: _jsx(Button, { variant: "plain", color: "error", onClick: props.onRemove, children: _jsx(CloseOutlined, {}) }) })] }));
-}));
+});

package/dist/esm/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/esm/components/upload/imageItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useItemStatus } from './itemStatus';
 import { classes } from './upload.style';
 import { Image } from '../image';
@@ -7,9 +7,9 @@ import { Button } from '../button';
 import { DeleteOutlined, EyeOutlined } from '@ant-design/icons';
 import { Progress } from '../progress';
 import { classnames } from '../../utils';
-export const ImageItem = memo(forwardRef((props, ref) => {
+export const ImageItem = memo((props) => {
     const [previewOpen, setPreviewOpen] = useState(false);
-    const { status, progress } = useItemStatus(props, ref);
+    const { status, progress } = useItemStatus(props);
     return (_jsx("div", { className: classes.imageWrap, children: _jsx(Image, { className: classes.image, src: props.file.url, previewProps: {
                 open: previewOpen,
                 onOpenChange: setPreviewOpen
@@ -18,4 +18,4 @@ export const ImageItem = memo(forwardRef((props, ref) => {
                 _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: _jsx(DeleteOutlined, {}) }, "delete")
             ], children: status !== 'default' &&
                 _jsx("div", { className: classnames(classes.progress), children: _jsx(Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
-}));
+});

package/dist/esm/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/esm/components/upload/itemStatus.js

@@ -1,5 +1,5 @@
 import { useImperativeHandle, useState } from 'react';
-export function useItemStatus(props, ref) {
+export function useItemStatus(props) {
     if (props.type === 'image') {
         props.file.url ||= URL.createObjectURL(props.file);
     }
@@ -21,6 +21,6 @@ export function useItemStatus(props, ref) {
     props.file.status = status;
     const [progress, setProgress] = useState(0);
     props.file.progress = progress;
-    useImperativeHandle(ref, () => ({ upload, setStatus, setProgress }));
+    useImperativeHandle(props.ref, () => ({ upload, setStatus, setProgress }));
     return { status, progress };
 }

package/dist/esm/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/esm/components/upload/upload.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { memo, useImperativeHandle, useRef } from 'react';
 import { classes, style } from './upload.style';
 import { classnames, cloneRef, getShortID, onDndDragEnd, useControlled, useDndSensors } from '../../utils';
 import { Button } from '../button';
@@ -19,10 +19,10 @@ const markFileId = (files) => {
         }
     }
 };
-export const Upload = memo(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) => {
+export const Upload = 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 = useRef(null);
     const itemRefs = useRef(new Map());
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(props.ref, () => {
         wrapperRef.current.upload = async (...args) => {
             for (const [, itemRef] of itemRefs.current) {
                 itemRef?.setStatus('uploading');
@@ -92,7 +92,17 @@ export const Upload = memo(forwardRef(({ inputProps, inputRef, type = 'file', ac
     };
     return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputRef), className: classnames(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? _jsxs(_Fragment, { children: [showButton &&
-                                    _jsx(Button, { variant: "outlined", prefix: _jsx(UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => itemRefs.current.set(file.id, r), file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
-                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(PlusOutlined, {}) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(ImageItem, { ref: r => itemRefs.current.set(file.id, r), type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
-}));
+                                    _jsx(Button, { variant: "outlined", prefix: _jsx(UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(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)) })] })
+                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(PlusOutlined, {}) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(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))] }) }) })] }));
+});
 Upload.DropArea = DropArea;

package/dist/esm/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/esm/components/upload/upload.style.js

@@ -16,7 +16,7 @@ export const classes = defineClasses('upload', [
     'sortable'
 ]);
 export const style = defineCss(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
-    const maskBg = Color(background.card).alpha(.9).string();
+    const maskBg = Color(background.content).alpha(.9).string();
     return css `
         position: relative;
 
@@ -78,7 +78,7 @@ export const style = defineCss(({ spacing, mode, text, gray, borderRadius, color
 
                     &[data-status=error] {
                         .${classes.name} {
-                            color: ${colors.error};
+                            color: ${colors.error.main};
                         }
 
                         .${classes.control} {
@@ -107,8 +107,8 @@ export const style = defineCss(({ spacing, mode, text, gray, borderRadius, color
                     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/esm/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/esm/components/waterfall/waterfall.js

@@ -1,36 +1,42 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, forwardRef, isValidElement, useEffect, useRef } from 'react';
+import { Children, isValidElement, useLayoutEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style';
-import { classnames, cloneRef, responsiveValue, useResponsiveValue } from '../../utils';
+import { classnames, cloneRef, toResponsiveValue, useResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
-    columnCount = responsiveValue(columnCount);
-    gap = responsiveValue(gap);
-    columnGap = responsiveValue(columnGap) ?? gap;
-    rowGap = responsiveValue(rowGap) ?? gap;
+export function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+    columnCount = toResponsiveValue(columnCount);
+    gap = toResponsiveValue(gap);
+    columnGap = toResponsiveValue(columnGap) ?? gap;
+    rowGap = toResponsiveValue(rowGap) ?? gap;
     const columnCountNum = useResponsiveValue(columnCount);
     const container = useRef(null);
-    const items = useRef([]);
-    items.current = [];
-    useEffect(() => {
-        const elements = items.current;
+    const items = useRef(new Map());
+    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 (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
-});
+    return (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), children: Children.map(props.children, (child, i) => {
+            const key = isValidElement(child) ? child.key ?? i : i;
+            return (_jsx("div", { ref: r => {
+                    items.current.set(key, r);
+                    return () => {
+                        items.current.delete(key);
+                    };
+                }, className: classes.item, children: child }, key));
+        }) }));
+}

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

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables } from '../../utils';
+import { defineClasses, responsiveVariables, useCss } from '../../utils';
 export const classes = defineClasses('waterfall', [
     'item'
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {
-    return css `
-        ${responsiveVariables(k => `
+    return useCss(theme => css `
+        ${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` : ''};
@@ -27,5 +27,5 @@ export function useStyle({ columnCount, columnGap, rowGap }) {
                 display: flex;
             }
         }
-    `;
+    `);
 }

package/dist/esm/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;