@canlooks/can-ui 0.0.70 → 0.0.71

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

package/dist/cjs/components/slider/slider.js

@@ -163,13 +163,12 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
     const valueIsArray = Array.isArray(innerValue.current);
     const renderHandleFn = () => {
         const fn = (value, index = 0) => {
-            const _handleProps = {
+            const _handleProps = (0, utils_1.mergeComponentProps)(handleProps, {
                 key: index,
-                ...handleProps,
-                ref: (0, utils_1.cloneRef)(r => {
+                ref: r => {
                     handleRefs.current[index] = r;
-                }, handleProps?.ref),
-                className: (0, utils_1.clsx)(slider_style_1.classes.handle, handleProps?.className),
+                },
+                className: slider_style_1.classes.handle,
                 style: {
                     width: handleSize,
                     height: handleSize,
@@ -181,25 +180,23 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                         : {
                             bottom: valueToPercent(value) + '%',
                             left: '50%'
-                        },
-                    ...handleProps?.style
+                        }
                 },
                 onPointerDown(e) {
                     e.stopPropagation();
-                    handleProps?.onPointerDown?.(e);
                     draggableHandles.onPointerDown(e);
                 }
-            };
+            });
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : (0, react_1.createElement)(tooltip_1.Tooltip, { popperRef: r => {
+                : (0, react_1.createElement)(tooltip_1.Tooltip, { title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index, popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    } },
                     (0, react_1.createElement)("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
@@ -211,10 +208,9 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
      * 渲染轨道
      */
     const renderRailFn = () => {
-        const _railProps = {
-            ...railProps,
+        const _railProps = (0, utils_1.mergeComponentProps)(railProps, {
             ref: railRef,
-            className: (0, utils_1.clsx)(slider_style_1.classes.rail, railProps?.className),
+            className: slider_style_1.classes.rail,
             style: {
                 ...orientation === 'horizontal'
                     ? {
@@ -225,12 +221,8 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                         width: railSize,
                         [inset ? 'padding' : 'margin']: `${handleSize / 2}px 0`
                     },
-                ...railProps?.style
-            },
-            onPointerDown: e => {
-                railProps?.onPointerDown?.(e);
-                draggableHandles.onPointerDown(e);
             },
+            onPointerDown: draggableHandles.onPointerDown,
             children: ((0, jsx_runtime_1.jsxs)("div", { className: slider_style_1.classes.railWrap, children: [!disableTrack &&
                         (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.track, style: valueIsArray
                                 ? (orientation === 'horizontal'
@@ -284,8 +276,10 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                                         transform: 'translateY(-50%)'
                                     }
                             }, children: label }))), renderHandleFn()] }))
-        };
-        return renderRail ? renderRail(innerValue.current, _railProps) : (0, jsx_runtime_1.jsx)("div", { ..._railProps });
+        });
+        return renderRail
+            ? renderRail(innerValue.current, _railProps)
+            : (0, jsx_runtime_1.jsx)("div", { ..._railProps });
     };
     /**
      * -----------------------------------------------------------------

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

@@ -1,9 +1,9 @@
 export declare const classes: {
     text: string;
     title: string;
-    icon: string;
     content: string;
     close: string;
+    icon: string;
     item: string;
     titleRow: string;
     itemWrap: string;

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

@@ -16,12 +16,10 @@ exports.classes = (0, utils_1.defineInnerClasses)('snackbar-base', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
-    const { text, fontSize, spacing, background, borderRadius } = theme;
+    const { spacing, background, borderRadius } = theme;
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            color: ${text.primary};
-            font-size: ${fontSize}px;
             width: 100%;
             height: auto;
             display: flex;

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -13,16 +13,6 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         id
     });
     const preventDefaultCallback = (0, react_1.useRef)(void 0);
-    const onPointerUp = (0, react_1.useCallback)(() => {
-        removeListener();
-    }, []);
-    const onTouchStart = (0, react_1.useCallback)((e) => {
-        props.onTouchStart?.(e);
-        addEventListener('touchmove', preventDefaultCallback.current = e => {
-            e.cancelable && e.preventDefault();
-        }, { passive: false });
-        addEventListener('pointerup', onPointerUp);
-    }, []);
     const removeListener = () => {
         if (preventDefaultCallback.current) {
             removeEventListener('touchmove', preventDefaultCallback.current);
@@ -30,6 +20,15 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         }
         removeEventListener('pointerup', onPointerUp);
     };
+    const onPointerUp = (0, react_1.useCallback)(removeListener, []);
+    const syncOnTouchStart = (0, utils_1.useSync)(props.onTouchStart);
+    const onTouchStart = (0, react_1.useCallback)((e) => {
+        syncOnTouchStart.current?.(e);
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+        addEventListener('pointerup', onPointerUp);
+    }, []);
     (0, react_1.useEffect)(() => removeListener, []);
     return ((0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), style: {
             transform: utilities_1.CSS.Transform.toString(transform),

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

@@ -1,8 +1,8 @@
-import React, { ReactNode, JSX } from 'react';
+import React, { ReactNode, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export interface SwitchProps extends Omit<DivProps, 'onChange'> {
     /** <Switch />内部使用<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     color?: ColorPropsValue;
     size?: Size;
     /** 滑块 */

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

@@ -1,7 +1,7 @@
-import { JSX } from 'react';
+import { ComponentProps } from 'react';
 import { Size } from '../../types';
 import { TdCell, ThCell } from './tableSticky';
-export interface TableProps extends Partial<JSX.IntrinsicElements['table']> {
+export interface TableProps extends Partial<ComponentProps<'table'>> {
     size?: Size;
     /**
      * 是否渲染边框，默认为`none`
@@ -20,7 +20,7 @@ export declare namespace Table {
     var th: typeof ThCell;
     var td: typeof TdCell;
 }
-export interface TableRowProps extends Partial<JSX.IntrinsicElements['tr']> {
+export interface TableRowProps extends Partial<ComponentProps<'tr'>> {
     selected?: boolean;
 }
 export declare function TableRow({ selected, ...props }: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 export declare const classes: {
-    container: string;
     cell: string;
+    container: string;
 } & {
     root: string;
 };

package/dist/cjs/components/table/tableSticky.d.ts

@@ -1,12 +1,12 @@
-import { JSX } from 'react';
-import { DivProps } from '../../types';
-export declare function TableContainer(props: DivProps): import("@emotion/react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import { OverridableComponent } from '../../types';
+export declare const TableContainer: OverridableComponent<{}>;
 type CellProps = {
     sticky?: 'left' | 'right';
 };
-export interface TdCellProps extends Partial<JSX.IntrinsicElements['td']>, CellProps {
+export interface TdCellProps extends Partial<ComponentProps<'td'>>, CellProps {
 }
-export interface ThCellProps extends Partial<JSX.IntrinsicElements['th']>, CellProps {
+export interface ThCellProps extends Partial<ComponentProps<'th'>>, CellProps {
 }
 export declare function TdCell(props: TdCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function ThCell(props: ThCellProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/table/tableSticky.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableContainer = TableContainer;
+exports.TableContainer = void 0;
 exports.TdCell = TdCell;
 exports.ThCell = ThCell;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -8,7 +8,7 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const table_style_1 = require("./table.style");
 const tableSticky_style_1 = require("./tableSticky.style");
-function TableContainer(props) {
+exports.TableContainer = (({ component: Component = 'div', ...props }) => {
     const [scrolledLeft, setScrolledLeft] = (0, react_1.useState)(false);
     const [scrolledRight, setScrolledRight] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
@@ -24,8 +24,8 @@ function TableContainer(props) {
             el.removeEventListener('scroll', scroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
-}
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+});
 function TdCell(props) {
     return (0, jsx_runtime_1.jsx)("td", { ...useStickyCellProps(props) });
 }

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

@@ -1,13 +1,13 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
     label: string;
-    indicator: string;
+    scroll: string;
     prefix: string;
     end: string;
-    start: string;
-    scroll: string;
     ellipsis: string;
+    start: string;
     tab: string;
+    indicator: string;
     suffix: string;
     scrollWrap: string;
     tabPrefix: string;

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

@@ -9,6 +9,6 @@ export interface TagProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     clickable?: boolean;
     closable?: boolean;
-    onClose?: React.MouseEventHandler<HTMLDivElement>;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export declare const Tag: React.MemoExoticComponent<({ variant, color, shape, size, prefix, suffix, clickable, closable, onClose, ...props }: TagProps) => import("@emotion/react/jsx-runtime").JSX.Element>;