@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/pickerDialog/pickerDialog.js

@@ -31,7 +31,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         !multiple && confirmHandler(value);
     };
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
-    const onCloseHandler = (reason) => {
+    const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
@@ -49,8 +49,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         resolvers.current?.resolve(value);
         setInnerOpen(false);
     };
-    const exitedHandler = () => {
-        props.modalProps?.onExited?.();
+    const onExited = () => {
         _setInnerValue(null);
     };
     const renderChildren = () => {
@@ -65,10 +64,24 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = (0, utils_1.toArray)(innerValue)?.length || 0;
-    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: pickerDialog_style_1.style, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHandler,
-                ...props.modalProps
-            }, ...showSelectedList && {
+    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options,
+        primaryKey,
+        childrenKey,
+        relation,
+        integration,
+        disabled,
+        clearable,
+        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...(0, utils_1.mergeComponentProps)({
+                width: multiple ? '90%' : 1080,
+                footer: null,
+                maskClosable: false
+            }, props, {
+                ref: dialogRef,
+                css: pickerDialog_style_1.style,
+                className: pickerDialog_style_1.classes.root,
+                open: innerOpen.current,
+                modalProps: (0, utils_1.mergeComponentProps)(props.modalProps, { onExited })
+            }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: ((0, jsx_runtime_1.jsxs)("div", { className: pickerDialog_style_1.classes.selectedArea, children: [(0, jsx_runtime_1.jsxs)(divider_1.Divider, { className: pickerDialog_style_1.classes.count, textAlign: "start", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\u5DF2\u9009\u62E9", (0, jsx_runtime_1.jsx)("b", { children: selectedCount }), "\u9879"] }), clearable &&
                                     (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));

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

@@ -1,9 +1,9 @@
 export declare const classes: {
     content: string;
+    confirm: string;
     list: string;
     selectedArea: string;
     count: string;
-    confirm: string;
 } & {
     root: string;
 };

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

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode, Ref } from 'react';
 import { DivProps, DefineElement, Placement } from '../../types';
 export type Trigger = 'click' | 'hover' | 'focus' | 'enter' | 'contextMenu';
 export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
+    /** 默认的ref会传递至`children` */
     popperRef?: Ref<PopperRef | null>;
     /** 若不指定anchorElement，默认使用{@link children}作为目标锚点元素 */
     anchorElement?: DefineElement<HTMLElement>;
@@ -15,6 +16,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     offset?: number;
     /** 自动打开弹框的触发方法，默认为`hover` */
     trigger?: Trigger | Trigger[] | false;
+    /** 点击元素时关闭，主要用于某元素同时存在tooltip与其他popper的情况，点击时打开popper同时关闭tooltip */
+    clickToClose?: boolean;
     placement?: Placement;
     variant?: 'zoom' | 'collapse';
     /**
@@ -23,7 +26,7 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
      * @enum {@link variant}为`collapse`时，默认为`true`
      */
     sizeAdaptable?: boolean;
-    /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`100(ms)` */
+    /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`150(ms)` */
     mouseEnterDelay?: number;
     /**默认为`150(ms)` */
     mouseLeaveDelay?: number;
@@ -48,4 +51,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/popper/popper.js

@@ -22,7 +22,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -40,11 +40,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hold = (open) => {
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
-                : openHolding.current;
+                : 0;
     };
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
-    const setInnerOpen = (open, force) => {
+    const setInnerOpen = (open) => {
         if (disabled || unmounted.current) {
             return;
         }
@@ -53,15 +52,15 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             return;
         }
         // 打开时无需判断，关闭时需要判断openHolding.current是否归0
-        if (newOpen || force || !openHolding.current) {
+        if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
     };
     const { onChildrenOpenChange: tellParentOpenChange } = (0, popperContext_1.usePopperContext)();
-    const isInitial = (0, react_1.useRef)(true);
+    const initialized = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        if (isInitial.current) {
-            isInitial.current = false;
+        if (!initialized.current) {
+            initialized.current = true;
             return;
         }
         tellParentOpenChange(innerOpen.current);
@@ -70,7 +69,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         hold(open) === 0 && setInnerOpen(false);
     };
     const setOpenForce = (open) => {
-        setInnerOpen(open, true);
+        if (!open) {
+            openHolding.current = 0;
+        }
+        setInnerOpen(open);
     };
     const openAndHold = (open) => {
         hold(open);
@@ -107,6 +109,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     const innerPopperRef = (0, react_1.useRef)(null);
     const [popperBounding, setPopperBounding] = (0, react_1.useState)();
+    const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
     const [openNextFrame, setOpenNextFrame] = (0, utils_1.useDerivedState)(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = (0, react_1.useRef)(void 0);
     const placeB = (0, react_1.useRef)(void 0);
@@ -364,7 +367,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         }
         isEntered.current = true;
         hold(true);
-        clearTimeout(enterTimeout.current);
+        clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
@@ -372,7 +375,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const pointerLeave = () => {
         isEntered.current = false;
         hold(false);
-        clearTimeout(leaveTimeout.current);
+        clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
@@ -444,7 +447,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         if (!clickable) {
             return;
         }
-        const click = () => openAndHold(true);
+        const click = () => {
+            openAndHold(true);
+        };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -454,6 +459,20 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const onClickAway = () => {
         innerOpen.current && openAndHold(false);
     };
+    /**
+     * clickToClose
+     */
+    (0, react_1.useEffect)(() => {
+        if (clickToClose) {
+            const click = () => {
+                setOpenForce(false);
+            };
+            anchorRef.current.addEventListener('click', click);
+            return () => {
+                anchorRef.current.removeEventListener('click', click);
+            };
+        }
+    }, [clickToClose]);
     /**
      * contextmenu相关
      */

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

@@ -9,11 +9,10 @@ exports.classes = (0, utils_1.defineInnerClasses)('popper', [
     'popper',
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
-    const { easing, fontSize } = theme;
+    const { easing } = theme;
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            font-size: ${fontSize}px;
             position: absolute;
             top: 0;
             left: 0;

package/dist/cjs/components/progress/progress.js

@@ -56,7 +56,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, stat
             return (0, react_2.css)({ animation: `${anim} 1.4s linear infinite` });
         }
         return;
-    }, [indeterminate, variant, strokeLinecap, size, barWidth]);
+    }, [indeterminate, variant, commonCircleProps.r]);
     return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, progress_style_1.useStyle)({ color: color || 'primary', variant }), className: (0, utils_1.clsx)(progress_style_1.classes.root, props.className), "data-variant": variant, "data-indeterminate": indeterminate, "data-processing": value < 100 && status === 'processing', "data-success": isColorSpecified ? void 0 : isSucceed, "data-error": isColorSpecified ? void 0 : status === 'error', children: variant === 'linear'
             ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.track, style: {
                             height: barWidth,

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

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
-    container: string;
     corner: string;
     edge: string;
+    container: string;
 } & {
     root: string;
 };

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

@@ -2,8 +2,8 @@ import { ColorPropsValue } from '../../types';
 export declare const classes: {
     label: string;
     option: string;
-    indicator: string;
     prefix: string;
+    indicator: string;
     suffix: string;
 } & {
     root: string;

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, Ref, JSX } from 'react';
+import { ReactElement, ReactNode, Ref, ComponentProps } from 'react';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -7,7 +7,7 @@ import { InputProps } from '../input';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSharedProps<O>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** <select />内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     defaultOpen?: boolean;

package/dist/cjs/components/select/select.js

@@ -12,11 +12,11 @@ const tag_1 = require("../tag");
 const optionsBase_1 = require("../optionsBase");
 const input_1 = require("../input");
 const loadingIndicator_1 = require("../loadingIndicator");
-const popper_style_1 = require("../popper/popper.style");
 const selectionContext_1 = require("../selectionContext");
 const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
+const popper_style_1 = require("../popper/popper.style");
 exports.Select = (0, react_1.memo)(({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
 // 从OptionsBaseSharedProps继承的属性
 showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'value', searchTokenKey = 'searchToken', filterPredicate, ...props }) => {
@@ -29,28 +29,26 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
         }
     };
     const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
         setInnerOpen(open);
     };
     const openChangeEnd = (open) => {
-        popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
         !open && setInnerSearchValue('');
     };
     const searchInputRef = (0, react_1.useRef)(null);
-    const blurHandler = () => {
+    const onBlur = () => {
         setTimeout(() => {
             // 失去焦点后，如果不是聚焦在搜索框，则需要关闭弹框
             searchInputRef.current !== document.activeElement && setInnerOpen(false);
         });
     };
-    const [innerValue, _toggleSelected, setInnerValue] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
-    const toggleSelected = (0, react_1.useCallback)((value) => {
+    const [innerValue, _toggleSelected, setInnerValue] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
+    const onToggleSelected = (0, react_1.useCallback)((value) => {
         _toggleSelected(value);
         // 单选模式下，选中一次就自动关闭弹框
         !multiple && setInnerOpen(false);
     }, [multiple]);
-    const clearHandler = () => {
+    const onClear = () => {
         props.onClear?.();
         setInnerValue(multiple ? [] : void 0);
     };
@@ -77,23 +75,49 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
             return renderBackfill(innerValue);
         }
         if (multiple) {
-            return innerValue?.map((v) => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
+            return innerValue?.map((v) => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => onToggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
         }
         return ((0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
     };
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, onOpenChangeEnd: openChangeEnd, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable &&
-                    (0, jsx_runtime_1.jsx)(input_1.Input, { inputProps: { ref: searchInputRef }, prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue?.(e.target.value);
-                        }, onBlur: e => {
-                            searchInputProps?.onBlur?.(e);
-                            blurHandler();
-                        } }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { selectedValue: innerValue, onToggleSelected: toggleSelected, showCheckbox: showCheckbox, loading: loading, options: options, labelKey: labelKey, primaryKey: primaryKey, searchTokenKey: searchTokenKey, searchValue: deferredSearchValue, filterPredicate: filterPredicate, children: children })] }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
-            popperProps?.onPointerDown?.(e);
-            e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!multiple, ...props, css: select_style_1.style, className: (0, utils_1.clsx)(select_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: innerValue, onClear: clearHandler, onBlur: blurHandler, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            css: popper_style_1.popperStyle,
+            open: innerOpen.current,
+            placement: 'bottom',
+            variant: 'collapse',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled || props.readOnly,
+            sizeAdaptable: sizeAdaptable,
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable &&
+                        (0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, utils_1.mergeComponentProps)({
+                                inputProps: (0, utils_1.mergeComponentProps)(searchInputProps?.inputProps, { ref: searchInputRef }),
+                                prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }),
+                                placeholder: '搜索',
+                                value: innerSearchValue.current
+                            }, searchInputProps, {
+                                onChange: e => setInnerSearchValue?.(e.target.value),
+                                onBlur
+                            }) }), (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { selectedValue: innerValue, searchValue: deferredSearchValue, onToggleSelected,
+                        showCheckbox,
+                        loading,
+                        options,
+                        labelKey,
+                        primaryKey,
+                        searchTokenKey,
+                        filterPredicate, children: children })] }))
+        }, popperProps, {
+            popperRef,
+            onOpenChange: openChangeHandler,
+            onOpenChangeEnd: openChangeEnd,
+            onPointerDown: e => e.preventDefault()
+        }), children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!multiple, ...(0, utils_1.mergeComponentProps)(props, {
+                css: select_style_1.style,
+                className: select_style_1.classes.root,
+                value: innerValue,
+                onClear,
+                onBlur
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
-                        : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...inputBaseProps, ...inputProps, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
+                        : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });

package/dist/cjs/components/selectedList/selectedItem.d.ts

@@ -7,5 +7,5 @@ interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedLi
     itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: Id, index: number): void;
 }
-export declare function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectedItem({ value, index, itemProps, onClose, ...props }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/selectedList/selectedItem.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 const react_1 = require("react");
 const transitionBase_1 = require("../transitionBase");
 const selectedList_style_1 = require("./selectedList.style");
-function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
+function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
     const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
@@ -17,5 +17,5 @@ function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...collapseProps, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

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

@@ -7,7 +7,6 @@ export interface OptionType<V extends Id = Id> extends Obj {
 }
 export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
     options?: O[];
-    /** 默认为`id` */
     primaryKey?: keyof O;
     /** 默认为`children` */
     childrenKey?: keyof O;

package/dist/cjs/components/selectionContext/selectionHook.d.ts

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { ISelectionContext, OptionType, SelectionContextProps } from './selectionContext';
 import { Id } from '../../types';
 export declare function useSelection<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): ISelectionContext<O, V>;
-export declare function useShallowSelection<V extends Id | Id[]>(params: {
+export declare function useFlatSelection<V extends Id | Id[]>(params: {
     disabled?: boolean;
     multiple?: boolean;
     clearable?: boolean;

package/dist/cjs/components/selectionContext/selectionHook.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelection = useSelection;
-exports.useShallowSelection = useShallowSelection;
+exports.useFlatSelection = useFlatSelection;
 const utils_1 = require("../../utils");
 const react_1 = require("react");
 const selectionContext_1 = require("./selectionContext");
@@ -206,7 +206,7 @@ function useSelection(props) {
         onToggle: props.onToggle
     };
 }
-function useShallowSelection(params) {
+function useFlatSelection(params) {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(params.defaultValue, params.value, params.onChange);
     const sync = (0, utils_1.useSync)(params);
     return [

package/dist/cjs/components/serialInput/index.d.ts

@@ -0,0 +1 @@
+export * from './serialInput';

package/dist/cjs/components/serialInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./serialInput"), exports);

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { FlexProps } from '../flex';
+import { InputProps } from '../input';
+export interface SerialInputProps<V = string> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    separator?: ReactNode | ((index: number) => ReactNode);
+    count?: number;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?: (value: V[]) => void;
+    onItemChange?: (value: V, index: number, values: V[]) => void;
+    inputProps?: InputProps;
+    renderInputs?(inputProps: InputProps, index: number): ReactNode;
+    /**
+     * 当前输入框的值长度达到jumpLength时，自动将焦点跳转到下一个输入框，
+     * `0`表示不自动跳转，默认为`1`
+     */
+    jumpLength?: number;
+    /** 所有输入框完成输入后触发，{@link SerialInputProps.jumpLength}不为`0`时有效 */
+    onFinish?(value: V[]): void;
+}
+export declare const SerialInput: import("react").MemoExoticComponent<({ separator, count, defaultValue, value, onChange, onItemChange, inputProps, renderInputs, jumpLength, onFinish, ...props }: SerialInputProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/serialInput/serialInput.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SerialInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const flex_1 = require("../flex");
+const serialInput_style_1 = require("./serialInput.style");
+const input_1 = require("../input");
+const utils_1 = require("../../utils");
+exports.SerialInput = (0, react_2.memo)(({ separator, count = 1, defaultValue, value, onChange, onItemChange, inputProps, renderInputs, jumpLength = 1, onFinish, ...props }) => {
+    const inputRefs = (0, react_2.useRef)([]);
+    inputRefs.current = [];
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue || Array(count).fill(''), value, onChange);
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { alignItems: "center", ...props, css: serialInput_style_1.style, className: (0, utils_1.clsx)(serialInput_style_1.classes.root, props.className), children: Array(count * 2 - 1).fill(void 0).map((_, i) => {
+            if (i % 2 === 0) {
+                const index = i / 2;
+                const _inputProps = (0, utils_1.mergeComponentProps)(inputProps, {
+                    ref: r => {
+                        r && inputRefs.current.push(r);
+                    },
+                    className: serialInput_style_1.classes.inputItem,
+                    clearable: false,
+                    value: innerValue.current[index],
+                    onChange: ({ target: { value } }) => {
+                        const prevLength = innerValue.current[index].length || 0;
+                        const newValue = [...innerValue.current];
+                        const curr = newValue[index] = value;
+                        setInnerValue(newValue);
+                        if (jumpLength > 0 && prevLength === jumpLength - 1 && curr.length === jumpLength) {
+                            if (index < count - 1) {
+                                // 聚焦后一个输入框
+                                inputRefs.current[index + 1].focus();
+                            }
+                            else if (index === count - 1) {
+                                onFinish?.(newValue);
+                            }
+                        }
+                        else if (0 < index && prevLength === 1 && curr.length === 0) {
+                            // 聚焦前一个输入框
+                            inputRefs.current[index - 1].focus();
+                        }
+                    },
+                    onKeyDown: ({ key }) => {
+                        if (key === 'Backspace' && innerValue.current[index].length === 0 && 0 < index) {
+                            inputRefs.current[index - 1].focus();
+                        }
+                    }
+                });
+                return renderInputs
+                    ? renderInputs(_inputProps, index)
+                    : (0, react_1.createElement)(input_1.Input, { ..._inputProps, key: i });
+            }
+            return separator
+                ? (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: typeof separator === 'function' ? separator(i / 2 - 1) : separator }, i)
+                : null;
+        }) }));
+});

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

@@ -0,0 +1,6 @@
+export declare const classes: {
+    inputItem: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+exports.classes = (0, utils_1.defineInnerClasses)('serial-input', [
+    'inputItem'
+]);
+exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
+    .${exports.classes.inputItem} input {
+        text-align: center;
+    }
+`);

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

@@ -1,4 +1,4 @@
-import { ReactElement, JSX } from 'react';
+import { ReactElement, ComponentProps } from 'react';
 import { DivProps } from '../../types';
 type SkeletonSharedProps = {
     /** 默认为`rounded` */
@@ -24,7 +24,7 @@ export interface SkeletonCardProps extends SkeletonSharedProps, DivProps {
     rows?: number;
 }
 export declare const SkeletonCard: import("react").MemoExoticComponent<({ showAvatar, showTitle, rows, variant, animation, ...props }: SkeletonCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export interface SkeletonTableProps extends SkeletonSharedProps, Partial<JSX.IntrinsicElements['table']> {
+export interface SkeletonTableProps extends SkeletonSharedProps, Partial<ComponentProps<'table'>> {
     columns?: number;
     rows?: number;
 }

package/dist/cjs/components/slidableActions/slidableActionsAction.js

@@ -32,12 +32,21 @@ exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, i
             ? '#aaaaaa'
             : (0, utils_1.colorTransfer)(color, theme);
     }, [color, theme]);
-    const clickHandler = (e) => {
-        props.onClick?.(e);
+    const onClick = (e) => {
         autoReturn && resetTranslate();
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: slidableActions_style_1.classes.actionItem, style: {
-            translate: `${currentTranslate}px 0`,
-            backgroundColor
-        }, onClick: clickHandler, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps, ref: (0, utils_1.cloneRef)(buttonProps?.ref, innerButtonRef), className: (0, utils_1.clsx)(slidableActions_style_1.classes.actionItemButton, buttonProps?.className), prefix: icon, color: color, variant: "flatted", children: label }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...(0, utils_1.mergeComponentProps)(props, {
+            className: slidableActions_style_1.classes.actionItem,
+            style: {
+                translate: `${currentTranslate}px 0`,
+                backgroundColor
+            },
+            onClick
+        }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, utils_1.mergeComponentProps)(buttonProps, {
+                ref: innerButtonRef,
+                className: slidableActions_style_1.classes.actionItemButton,
+                prefix: icon,
+                color,
+                variant: 'flatted'
+            }), children: label }) }));
 });

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, JSX } from 'react';
+import { HTMLAttributes, ReactNode, ComponentProps } from 'react';
 import { GestureOptions } from '../../utils';
 import { ColorPropsValue, DivProps } from '../../types';
 import { TooltipProps } from '../tooltip';
@@ -26,7 +26,7 @@ interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | '
     renderRail?(value: [number, number], railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
     /** 滑块 */
     handleSize?: number;
-    handleProps?: JSX.IntrinsicElements['button'];
+    handleProps?: ComponentProps<'button'>;
     /** 禁用默认的滑块外边框 */
     disableHandleOutline?: boolean;
     /** 渲染滑块，range模式时，改方法会触发两次 */