@canlooks/can-ui 0.0.69 → 0.0.71

package/dist/esm/components/palette/palette.style.d.ts

@@ -2,9 +2,9 @@ export declare const classes: {
     input: string;
     main: string;
     mask: string;
+    sliders: string;
     hue: string;
     alpha: string;
-    sliders: string;
     handle: string;
     slidersRow: string;
     alphaMask: string;

package/dist/esm/components/pickerDialog/pickerDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
-import { clsx, toArray, useControlled } from '../../utils';
+import { clsx, mergeComponentProps, toArray, useControlled } from '../../utils';
 import { classes, style } from './pickerDialog.style';
 import { SelectionContext } from '../selectionContext';
 import { Divider } from '../divider';
@@ -28,7 +28,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         !multiple && confirmHandler(value);
     };
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
-    const onCloseHandler = (reason) => {
+    const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
@@ -46,8 +46,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 = () => {
@@ -62,10 +61,24 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = toArray(innerValue)?.length || 0;
-    return (_jsx(SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHandler,
-                ...props.modalProps
-            }, ...showSelectedList && {
+    return (_jsx(SelectionContext, { options,
+        primaryKey,
+        childrenKey,
+        relation,
+        integration,
+        disabled,
+        clearable,
+        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { ...mergeComponentProps({
+                width: multiple ? '90%' : 1080,
+                footer: null,
+                maskClosable: false
+            }, props, {
+                ref: dialogRef,
+                css: style,
+                className: classes.root,
+                open: innerOpen.current,
+                modalProps: mergeComponentProps(props.modalProps, { onExited })
+            }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
                                     _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));

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

@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-export 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 }) {
+export 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 } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -37,11 +37,10 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const hold = (open) => {
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
-                : openHolding.current;
+                : 0;
     };
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const [contextMenuEvent, setContextMenuEvent] = useSyncState();
-    const setInnerOpen = (open, force) => {
+    const setInnerOpen = (open) => {
         if (disabled || unmounted.current) {
             return;
         }
@@ -50,15 +49,15 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             return;
         }
         // 打开时无需判断，关闭时需要判断openHolding.current是否归0
-        if (newOpen || force || !openHolding.current) {
+        if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
     };
     const { onChildrenOpenChange: tellParentOpenChange } = usePopperContext();
-    const isInitial = useRef(true);
+    const initialized = useRef(false);
     useEffect(() => {
-        if (isInitial.current) {
-            isInitial.current = false;
+        if (!initialized.current) {
+            initialized.current = true;
             return;
         }
         tellParentOpenChange(innerOpen.current);
@@ -67,7 +66,10 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         hold(open) === 0 && setInnerOpen(false);
     };
     const setOpenForce = (open) => {
-        setInnerOpen(open, true);
+        if (!open) {
+            openHolding.current = 0;
+        }
+        setInnerOpen(open);
     };
     const openAndHold = (open) => {
         hold(open);
@@ -104,6 +106,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const containerEl = useContainer(container, effectContainer);
     const innerPopperRef = useRef(null);
     const [popperBounding, setPopperBounding] = useState();
+    const [contextMenuEvent, setContextMenuEvent] = useSyncState();
     const [openNextFrame, setOpenNextFrame] = useDerivedState(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = useRef(void 0);
     const placeB = useRef(void 0);
@@ -361,7 +364,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         }
         isEntered.current = true;
         hold(true);
-        clearTimeout(enterTimeout.current);
+        clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
@@ -369,7 +372,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const pointerLeave = () => {
         isEntered.current = false;
         hold(false);
-        clearTimeout(leaveTimeout.current);
+        clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
@@ -441,7 +444,9 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         if (!clickable) {
             return;
         }
-        const click = () => openAndHold(true);
+        const click = () => {
+            openAndHold(true);
+        };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -451,6 +456,20 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const onClickAway = () => {
         innerOpen.current && openAndHold(false);
     };
+    /**
+     * clickToClose
+     */
+    useEffect(() => {
+        if (clickToClose) {
+            const click = () => {
+                setOpenForce(false);
+            };
+            anchorRef.current.addEventListener('click', click);
+            return () => {
+                anchorRef.current.removeEventListener('click', click);
+            };
+        }
+    }, [clickToClose]);
     /**
      * contextmenu相关
      */

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

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

package/dist/esm/components/progress/progress.js

@@ -53,7 +53,7 @@ export const Progress = memo(({ showInfo = true, renderInfo, color, status = 'de
             return css({ animation: `${anim} 1.4s linear infinite` });
         }
         return;
-    }, [indeterminate, variant, strokeLinecap, size, barWidth]);
+    }, [indeterminate, variant, commonCircleProps.r]);
     return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(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'
             ? _jsxs(_Fragment, { children: [_jsx("div", { className: classes.track, style: {
                             height: barWidth,

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useCallback, useDeferredValue, useMemo, useRef } from 'react';
 import { InputBase } from '../inputBase';
-import { clsx, toArray, useControlled } from '../../utils';
+import { mergeComponentProps, toArray, useControlled } from '../../utils';
 import { classes, style } from './select.style';
 import { Popper } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -9,11 +9,11 @@ import { Tag } from '../tag';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { LoadingIndicator } from '../loadingIndicator';
-import { popperStyle } from '../popper/popper.style';
-import { useShallowSelection } from '../selectionContext';
+import { useFlatSelection } from '../selectionContext';
 import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
+import { popperStyle } from '../popper/popper.style';
 export const Select = 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 }) => {
@@ -26,28 +26,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 = useRef(null);
-    const blurHandler = () => {
+    const onBlur = () => {
         setTimeout(() => {
             // 失去焦点后，如果不是聚焦在搜索框，则需要关闭弹框
             searchInputRef.current !== document.activeElement && setInnerOpen(false);
         });
     };
-    const [innerValue, _toggleSelected, setInnerValue] = useShallowSelection({ multiple, defaultValue, value, onChange });
-    const toggleSelected = useCallback((value) => {
+    const [innerValue, _toggleSelected, setInnerValue] = useFlatSelection({ multiple, defaultValue, value, onChange });
+    const onToggleSelected = useCallback((value) => {
         _toggleSelected(value);
         // 单选模式下，选中一次就自动关闭弹框
         !multiple && setInnerOpen(false);
     }, [multiple]);
-    const clearHandler = () => {
+    const onClear = () => {
         props.onClear?.();
         setInnerValue(multiple ? [] : void 0);
     };
@@ -74,23 +72,49 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
             return renderBackfill(innerValue);
         }
         if (multiple) {
-            return innerValue?.map((v) => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
+            return innerValue?.map((v) => _jsx(Tag, { closable: true, onClose: () => onToggleSelected(v), children: optionsMap.get(v)?.[labelKey] ?? v }, v));
         }
         return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
     };
-    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, onOpenChangeEnd: openChangeEnd, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsxs(_Fragment, { children: [searchable &&
-                    _jsx(Input, { inputProps: { ref: searchInputRef }, prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue?.(e.target.value);
-                        }, onBlur: e => {
-                            searchInputProps?.onBlur?.(e);
-                            blurHandler();
-                        } }), _jsx(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: _jsx(InputBase, { clearable: !!multiple, ...props, css: style, className: clsx(classes.root, props.className), "data-focused": innerOpen.current, value: innerValue, onClear: clearHandler, onBlur: blurHandler, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+    return (_jsx(Popper, { ...mergeComponentProps({
+            css: popperStyle,
+            open: innerOpen.current,
+            placement: 'bottom',
+            variant: 'collapse',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled || props.readOnly,
+            sizeAdaptable: sizeAdaptable,
+            content: (_jsxs(_Fragment, { children: [searchable &&
+                        _jsx(Input, { ...mergeComponentProps({
+                                inputProps: mergeComponentProps(searchInputProps?.inputProps, { ref: searchInputRef }),
+                                prefix: _jsx(Icon, { icon: faMagnifyingGlass }),
+                                placeholder: '搜索',
+                                value: innerSearchValue.current
+                            }, searchInputProps, {
+                                onChange: e => setInnerSearchValue?.(e.target.value),
+                                onBlur
+                            }) }), _jsx(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: _jsx(InputBase, { clearable: !!multiple, ...mergeComponentProps(props, {
+                css: style,
+                className: classes.root,
+                value: innerValue,
+                onClear,
+                onBlur
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...inputBaseProps, ...inputProps, "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: loading
                             ? _jsx(LoadingIndicator, {})
                             : _jsx(Icon, { icon: faChevronDown }) })] }) }) }));
 });

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

@@ -4,7 +4,7 @@ import { clsx, useLoading, useSyncState } from '../../utils';
 import { useMemo } from 'react';
 import { Collapse } from '../transitionBase';
 import { classes } from './selectedList.style';
-export function SelectedItem({ value, index, itemProps, onClose, ...collapseProps }) {
+export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = useSyncState();
     const [loading, requestFn] = useLoading(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
@@ -14,5 +14,5 @@ export function SelectedItem({ value, index, itemProps, onClose, ...collapseProp
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...collapseProps, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

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

@@ -202,7 +202,7 @@ export function useSelection(props) {
         onToggle: props.onToggle
     };
 }
-export function useShallowSelection(params) {
+export function useFlatSelection(params) {
     const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
     const sync = useSync(params);
     return [

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

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

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

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

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { Fragment, memo, useRef } from 'react';
+import { Flex } from '../flex';
+import { classes, style } from './serialInput.style';
+import { Input } from '../input';
+import { clsx, mergeComponentProps, useControlled } from '../../utils';
+export const SerialInput = memo(({ separator, count = 1, defaultValue, value, onChange, onItemChange, inputProps, renderInputs, jumpLength = 1, onFinish, ...props }) => {
+    const inputRefs = useRef([]);
+    inputRefs.current = [];
+    const [innerValue, setInnerValue] = useControlled(defaultValue || Array(count).fill(''), value, onChange);
+    return (_jsx(Flex, { alignItems: "center", ...props, css: style, className: clsx(classes.root, props.className), children: Array(count * 2 - 1).fill(void 0).map((_, i) => {
+            if (i % 2 === 0) {
+                const index = i / 2;
+                const _inputProps = mergeComponentProps(inputProps, {
+                    ref: r => {
+                        r && inputRefs.current.push(r);
+                    },
+                    className: 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)
+                    : _createElement(Input, { ..._inputProps, key: i });
+            }
+            return separator
+                ? _jsx(Fragment, { children: typeof separator === 'function' ? separator(i / 2 - 1) : separator }, i)
+                : null;
+        }) }));
+});

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

@@ -0,0 +1,10 @@
+import { defineCss, defineInnerClasses } from '../../utils';
+import { css } from '@emotion/react';
+export const classes = defineInnerClasses('serial-input', [
+    'inputItem'
+]);
+export const style = defineCss(() => css `
+    .${classes.inputItem} input {
+        text-align: center;
+    }
+`);

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef } from 'react';
 import { Button } from '../button';
 import { classes } from './slidableActions.style';
-import { clsx, cloneRef, colorTransfer } from '../../utils';
+import { colorTransfer, mergeComponentProps } from '../../utils';
 import { useTheme } from '../theme';
 import { useSlidableActionsContext } from './slidableActions';
 export const SlidableActionsAction = memo(({ color = 'default', label, icon, buttonProps, _index, ...props }) => {
@@ -29,12 +29,21 @@ export const SlidableActionsAction = memo(({ color = 'default', label, icon, but
             ? '#aaaaaa'
             : colorTransfer(color, theme);
     }, [color, theme]);
-    const clickHandler = (e) => {
-        props.onClick?.(e);
+    const onClick = (e) => {
         autoReturn && resetTranslate();
     };
-    return (_jsx("div", { ...props, className: classes.actionItem, style: {
-            translate: `${currentTranslate}px 0`,
-            backgroundColor
-        }, onClick: clickHandler, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemButton, buttonProps?.className), prefix: icon, color: color, variant: "flatted", children: label }) }));
+    return (_jsx("div", { ...mergeComponentProps(props, {
+            className: classes.actionItem,
+            style: {
+                translate: `${currentTranslate}px 0`,
+                backgroundColor
+            },
+            onClick
+        }), children: _jsx(Button, { ...mergeComponentProps(buttonProps, {
+                ref: innerButtonRef,
+                className: classes.actionItemButton,
+                prefix: icon,
+                color,
+                variant: 'flatted'
+            }), children: label }) }));
 });

package/dist/esm/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模式时，改方法会触发两次 */