@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -8,14 +8,16 @@ const utils_1 = require("../../utils");
 const select_style_1 = require("./select.style");
 const popper_1 = require("../popper");
 const menuItem_1 = require("../menuItem");
-const icons_1 = require("@ant-design/icons");
 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");
-exports.Select = (0, react_1.memo)(({ inputProps, inputRef, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
+const __1 = require("../..");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
+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 }) => {
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
@@ -72,27 +74,27 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
     }, [optionsArr, primaryKey]);
     const renderBackfillFn = () => {
         if (renderBackfill) {
-            return renderBackfill(innerValue.current);
+            return renderBackfill(innerValue);
         }
         if (multiple) {
-            return innerValue.current?.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: () => toggleSelected(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.current)?.[labelKey] ?? innerValue.current }));
+        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, { inputRef: searchInputRef, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                    (0, jsx_runtime_1.jsx)(input_1.Input, { inputProps: { ref: searchInputRef }, prefix: (0, jsx_runtime_1.jsx)(__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.current, 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 => {
+                        } }), (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.classnames)(select_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: innerValue.current, onClear: clearHandler, onBlur: blurHandler, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: select_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue.current)?.length
+        }, 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
                         ? (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, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "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, ...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)(icons_1.CaretDownOutlined, {}) })] }) }) }));
+                            : (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });
 exports.Option = exports.Select.Option = menuItem_1.MenuItem;

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

@@ -31,7 +31,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
 
     .${exports.classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

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

@@ -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.classnames)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    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 }) }));
 }

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

@@ -15,5 +15,5 @@ exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.classnames)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
 });

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

@@ -9,7 +9,7 @@ exports.classes = (0, utils_1.defineClasses)('selected-list', [
     'optionWrap'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    \.${exports.classes.option}:not(:last-of-type) .${exports.classes.optionWrap} {
+    .${exports.classes.option}:not(:last-of-type) .${exports.classes.optionWrap} {
         margin-bottom: ${spacing[3]}px;
     }
 

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

@@ -31,27 +31,20 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
-    /**
-     * 是否使用浅层选择模式，默认为`false`，即使用树形选择。
-     * 开启后{@link childrenKey}, {@link relation}, {@link integration}都将无效
-     */
-    shallow?: boolean;
 };
-export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextBaseProps<O, V> & SelectableProps<V>;
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
-    inSelection?: true;
-    disabled?: boolean;
+    inSelection: true;
+    multiple: boolean;
+    disabled: boolean;
     value?: V | V[];
-    setValue?: Dispatch<SetStateAction<undefined | V | V[]>>;
+    setValue: Dispatch<SetStateAction<undefined | V | V[]>>;
     options?: O[];
-    setOptions?: Dispatch<SetStateAction<undefined | O[]>>;
-    optionsMap?: Map<V, O>;
-    selectionStatus?: Map<V, 1 | 2>;
-    toggleSelected?(value: V, option?: O): void;
+    setOptions: Dispatch<SetStateAction<undefined | O[]>>;
+    optionsMap: Map<V, O>;
+    selectionStatus: Map<V, 1 | 2>;
+    toggleSelected(value: V, option?: O): void;
     onToggle?(checked: boolean, value: V, option?: O): void;
 };
-type ToRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-export type OSelectionContext<O extends OptionType<V>, V extends Id = Id> = ToRequired<ISelectionContext<O, V>, 'inSelection' | 'setValue' | 'setOptions' | 'optionsMap' | 'selectionStatus' | 'toggleSelected'>;
 export declare function useSelectionContext<O extends OptionType<V>, V extends Id = Id>(): ISelectionContext<O, V>;
+export type SelectionContextProps<O extends OptionType<V>, V extends Id = Id> = SelectionContextBaseProps<O, V> & SelectableProps<V>;
 export declare function SelectionContext<O extends OptionType<V>, V extends Id = Id>(props: SelectionContextProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

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

@@ -5,11 +5,11 @@ exports.SelectionContext = SelectionContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const selectionHook_1 = require("./selectionHook");
-const InnerSelectionContext = (0, react_1.createContext)({});
+const SelectionContextProvider = (0, react_1.createContext)({});
 function useSelectionContext() {
-    return (0, react_1.useContext)(InnerSelectionContext);
+    return (0, react_1.useContext)(SelectionContextProvider);
 }
 function SelectionContext(props) {
     const selection = (0, selectionHook_1.useSelection)(props);
-    return ((0, jsx_runtime_1.jsx)(InnerSelectionContext, { value: (0, react_1.useMemo)(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(SelectionContextProvider, { value: (0, react_1.useMemo)(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
 }

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

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { OptionType, OSelectionContext, SelectionContextProps } from './selectionContext';
+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>): OSelectionContext<O, V>;
+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: {
     disabled?: boolean;
     multiple?: boolean;

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

@@ -6,13 +6,16 @@ const utils_1 = require("../../utils");
 const react_1 = require("react");
 const selectionContext_1 = require("./selectionContext");
 function useSelection(props) {
-    props.primaryKey ??= 'id';
-    props.childrenKey ??= 'children';
-    props.relation ??= 'dependent';
-    props.integration ??= 'shallowest';
-    const { defaultValue, value, onChange, options, primaryKey, childrenKey, relation, multiple } = props;
-    let [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
-    let [innerOptions, setInnerOptions] = (0, utils_1.useDerivedState)(options);
+    props = Object.assign({
+        primaryKey: 'id',
+        childrenKey: 'children',
+        relation: 'dependent',
+        integration: 'shallowest',
+        multiple: false,
+        disabled: false
+    }, props);
+    let [innerValue, setInnerValue] = (0, utils_1.useControlled)(props.defaultValue, props.value, props.onChange);
+    let [innerOptions, setInnerOptions] = (0, utils_1.useDerivedState)(props.options);
     /**
      * ----------------------------------------------------------------
      * 若嵌套在另个一SelectionContext内，取最外层数据
@@ -32,14 +35,14 @@ function useSelection(props) {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
             Array.isArray(arr) && arr.forEach(item => {
                 item._parentId = parentId;
-                const id = item[primaryKey];
+                const id = item[props.primaryKey];
                 !(0, utils_1.isUnset)(id) && map.set(id, item);
-                fn(item[childrenKey], id);
+                fn(item[props.childrenKey], id);
             });
         };
         fn(innerOptions.current);
         return map;
-    }, [innerOptions.current, primaryKey, childrenKey, context.optionsMap]);
+    }, [innerOptions.current, props.primaryKey, props.childrenKey, context.optionsMap]);
     const syncOptionsMap = (0, utils_1.useSync)(optionsMap);
     const syncProps = (0, utils_1.useSync)(props);
     const calSelectionStatus = (selectedSet = new Set((0, utils_1.toArray)(innerValue.current))) => {
@@ -90,17 +93,17 @@ function useSelection(props) {
         const ret = preCalSelectionStatus.current || calSelectionStatus();
         preCalSelectionStatus.current = void 0;
         return ret;
-    }, [innerValue.current, optionsMap, multiple, relation, context.selectionStatus]);
+    }, [innerValue.current, optionsMap, props.multiple, props.relation, context.selectionStatus]);
     const syncSelectionStatus = (0, utils_1.useSync)(selectionStatus);
     const toggleSelected = (0, react_1.useCallback)((value) => {
         if (context.inSelection) {
             context.toggleSelected(value);
             return;
         }
-        const { disabled, onToggle, multiple, relation, integration, primaryKey, childrenKey, clearable } = syncProps.current;
-        if (disabled) {
+        if (syncProps.current.disabled) {
             return;
         }
+        const { onToggle, multiple, relation, integration, primaryKey, childrenKey, clearable } = syncProps.current;
         const selectionStatus = syncSelectionStatus.current;
         const currentSelected = selectionStatus.get(value) === 2;
         onToggle?.(!currentSelected, value, syncOptionsMap.current.get(value));
@@ -191,6 +194,7 @@ function useSelection(props) {
     }, [context.inSelection]);
     return {
         inSelection: true,
+        multiple: props.multiple,
         disabled: props.disabled,
         value: innerValue.current,
         setValue: setInnerValue,

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

@@ -1,12 +1,12 @@
-import React, { ReactElement } from 'react';
-import { DIVProps } from '../../types';
+import { ReactElement, JSX } from 'react';
+import { DivProps } from '../../types';
 type SkeletonSharedProps = {
     /** 默认为`rounded` */
     variant?: 'circular' | 'rectangular' | 'rounded';
     /** 是否播放动画，默认为`false` */
     animation?: boolean;
 };
-export interface SkeletonProps extends SkeletonSharedProps, DIVProps {
+export interface SkeletonProps extends SkeletonSharedProps, DivProps {
     width?: string | number;
     height?: string | number;
 }
@@ -15,7 +15,7 @@ export declare const Skeleton: {
     Card: typeof SkeletonCard;
     Table: typeof SkeletonTable;
 };
-export interface SkeletonCardProps extends SkeletonSharedProps, DIVProps {
+export interface SkeletonCardProps extends SkeletonSharedProps, DivProps {
     /** 默认为false */
     showAvatar?: boolean;
     /** 默认为true */
@@ -23,10 +23,10 @@ export interface SkeletonCardProps extends SkeletonSharedProps, DIVProps {
     /** 默认为3 */
     rows?: number;
 }
-export declare const SkeletonCard: React.MemoExoticComponent<({ showAvatar, showTitle, rows, variant, animation, ...props }: SkeletonCardProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export interface SkeletonTableProps extends SkeletonSharedProps, Partial<React.JSX.IntrinsicElements['table']> {
+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']> {
     columns?: number;
     rows?: number;
 }
-export declare const SkeletonTable: React.MemoExoticComponent<({ columns, rows, variant, animation, ...props }: SkeletonTableProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const SkeletonTable: import("react").MemoExoticComponent<({ columns, rows, variant, animation, ...props }: SkeletonTableProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/cjs/components/skeleton/skeleton.js

@@ -7,7 +7,7 @@ const react_2 = require("react");
 const utils_1 = require("../../utils");
 const skeleton_style_1 = require("./skeleton.style");
 exports.Skeleton = (0, react_2.memo)(({ variant = 'rounded', animation = true, width, height, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: skeleton_style_1.style, className: (0, utils_1.classnames)(skeleton_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: skeleton_style_1.style, className: (0, utils_1.clsx)(skeleton_style_1.classes.root, props.className), style: {
             width,
             height,
             ...props.style
@@ -16,7 +16,8 @@ exports.Skeleton = (0, react_2.memo)(({ variant = 'rounded', animation = true, w
 });
 exports.SkeletonCard = (0, react_2.memo)(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }) => {
     const commonProps = { variant, animation };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: skeleton_style_1.articalStyle, className: (0, utils_1.classnames)(skeleton_style_1.classes.artical, props.className), children: [(0, jsx_runtime_1.jsx)("div", { className: skeleton_style_1.classes.avatar, children: (0, jsx_runtime_1.jsx)(exports.Skeleton, { variant: "circular" }) }), (0, jsx_runtime_1.jsxs)("div", { className: skeleton_style_1.classes.text, children: [showTitle &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: skeleton_style_1.articalStyle, className: (0, utils_1.clsx)(skeleton_style_1.classes.artical, props.className), children: [showAvatar &&
+                (0, jsx_runtime_1.jsx)("div", { className: skeleton_style_1.classes.avatar, children: (0, jsx_runtime_1.jsx)(exports.Skeleton, { variant: "circular" }) }), (0, jsx_runtime_1.jsxs)("div", { className: skeleton_style_1.classes.text, children: [showTitle &&
                         (0, jsx_runtime_1.jsx)(exports.Skeleton, { ...commonProps, style: {
                                 width: '80%',
                                 height: 24,
@@ -32,6 +33,6 @@ exports.SkeletonTable = (0, react_2.memo)(({ columns = 3, rows = 4, variant = 'r
     const renderRows = () => {
         return Array(rows).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("tr", { children: renderCols() }, i));
     };
-    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: skeleton_style_1.tableStyle, className: (0, utils_1.classnames)(skeleton_style_1.classes.table, props.className), children: (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }) }));
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: skeleton_style_1.tableStyle, className: (0, utils_1.clsx)(skeleton_style_1.classes.table, props.className), children: (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }) }));
 });
 exports.Skeleton.Table = exports.SkeletonTable;

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DIVProps } from '../../types';
+import { DivProps } from '../../types';
 import { DraggableOptions } from '../../utils';
 import { SlidableActionsAction, SlidableActionsActionProps } from './slidableActionsAction';
 export declare function useSlidableActionsContext(): {
@@ -8,7 +8,7 @@ export declare function useSlidableActionsContext(): {
     maxDistance: number;
 };
 type ActionType = SlidableActionsActionProps | ReactElement;
-export interface SlidableActionsProps extends DIVProps {
+export interface SlidableActionsProps extends DivProps {
     /** 元素弹性移动距离，默认为24 */
     bounceElementTranslate?: number;
     /** 手指弹性拖拽距离，默认为240 */

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

@@ -116,7 +116,7 @@ exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, boun
                     : child;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: (0, jsx_runtime_1.jsxs)("div", { css: slidableActions_style_1.style, className: (0, utils_1.classnames)(slidableActions_style_1.classes.root, props.className), "data-dragging": dragging, children: [(0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), (0, jsx_runtime_1.jsxs)("div", { className: slidableActions_style_1.classes.actions, children: [(0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: (0, jsx_runtime_1.jsxs)("div", { css: slidableActions_style_1.style, className: (0, utils_1.clsx)(slidableActions_style_1.classes.root, props.className), "data-dragging": dragging, children: [(0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), (0, jsx_runtime_1.jsxs)("div", { className: slidableActions_style_1.classes.actions, children: [(0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
                                 actionsContainer: leftActionsContainer.current,
                                 translate,
                                 maxDistance: distanceRange.current[1]

package/dist/cjs/components/slidableActions/slidableActionsAction.d.ts

@@ -1,13 +1,12 @@
-import { ReactNode, Ref } from 'react';
-import { ColorPropsValue, DIVProps } from '../../types';
+import { ReactNode } from 'react';
+import { ColorPropsValue, DivProps } from '../../types';
 import { ButtonProps } from '../button';
-export interface SlidableActionsActionProps extends DIVProps {
+export interface SlidableActionsActionProps extends DivProps {
     color?: ColorPropsValue;
     label?: ReactNode;
     icon?: ReactNode;
     buttonProps?: Omit<ButtonProps, 'onClick'>;
-    buttonRef?: Ref<HTMLButtonElement>;
     /** @private */
     _index?: number;
 }
-export declare const SlidableActionsAction: import("react").MemoExoticComponent<({ color, label, icon, buttonProps, buttonRef, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const SlidableActionsAction: import("react").MemoExoticComponent<({ color, label, icon, buttonProps, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -8,7 +8,7 @@ const slidableActions_style_1 = require("./slidableActions.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const slidableActions_1 = require("./slidableActions");
-exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }) => {
+exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, icon, buttonProps, _index, ...props }) => {
     const { actionsContainer, translate, maxDistance } = (0, slidableActions_1.useSlidableActionsContext)();
     const innerButtonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -35,5 +35,5 @@ exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, i
     return ((0, jsx_runtime_1.jsx)("div", { ...props, className: slidableActions_style_1.classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ref: (0, utils_1.cloneRef)(buttonRef, innerButtonRef), ...buttonProps, className: (0, utils_1.classnames)(slidableActions_style_1.classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+        }, 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.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
 });

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

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, JSX } from 'react';
 import { DraggableOptions } from '../../utils';
-import { ColorPropsValue, DIVProps } from '../../types';
+import { ColorPropsValue, DivProps } from '../../types';
 import { TooltipProps } from '../tooltip';
-export interface MarkItem extends DIVProps {
+export interface MarkItem extends DivProps {
     label?: ReactNode;
     /**
      * label的位置
@@ -12,7 +12,7 @@ export interface MarkItem extends DIVProps {
     labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
     value: number;
 }
-interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | 'prefix'> {
+interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | 'prefix'> {
     color?: ColorPropsValue;
     orientation?: 'horizontal' | 'vertical';
     /** variant只改变滑块的样式 */
@@ -21,12 +21,12 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     inset?: boolean;
     /** 轨道 */
     railSize?: number;
-    railProps?: DIVProps;
+    railProps?: DivProps;
     renderRail?(value: number, railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
     renderRail?(value: [number, number], railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
     /** 滑块 */
     handleSize?: number;
-    handleProps?: React.JSX.IntrinsicElements['button'];
+    handleProps?: JSX.IntrinsicElements['button'];
     /** 禁用默认的滑块外边框 */
     disableHandleOutline?: boolean;
     /** 渲染滑块，range模式时，改方法会触发两次 */
@@ -58,5 +58,5 @@ export interface SliderRangeProps extends SliderBaseProps {
     suffix?: ReactNode | ((value: [number, number]) => ReactNode);
 }
 export type SliderProps = SliderSingleProps | SliderRangeProps;
-export declare const Slider: React.MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue, value, onChange, ...props }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Slider: import("react").MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue, value, onChange, ...props }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -69,7 +69,9 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
      */
     const tooltipRefs = (0, react_2.useRef)([]);
     (0, react_2.useEffect)(() => {
-        tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+        setTimeout(() => {
+            tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+        });
     }, [innerValue.current]);
     /**
      * -----------------------------------------------------------------
@@ -167,7 +169,7 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                 ref: (0, utils_1.cloneRef)(r => {
                     handleRefs.current[index] = r;
                 }, handleProps?.ref),
-                className: (0, utils_1.classnames)(slider_style_1.classes.handle, handleProps?.className),
+                className: (0, utils_1.clsx)(slider_style_1.classes.handle, handleProps?.className),
                 style: {
                     width: handleSize,
                     height: handleSize,
@@ -191,10 +193,12 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
             return renderHandle
                 ? renderHandle(value, _handleProps)
                 : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => {
-                        tooltipRefs.current[index] = r;
-                        return () => {
+                        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, children: (0, react_1.createElement)("button", { ..._handleProps, key: index }) }, index);
         };
         return valueIsArray
@@ -209,7 +213,7 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
         const _railProps = {
             ...railProps,
             ref: railRef,
-            className: (0, utils_1.classnames)(slider_style_1.classes.rail, railProps?.className),
+            className: (0, utils_1.clsx)(slider_style_1.classes.rail, railProps?.className),
             style: {
                 ...orientation === 'horizontal'
                     ? {
@@ -289,7 +293,7 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
     const renderExtra = (prop) => {
         return typeof prop === 'function' ? prop(innerValue.current) : prop;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, slider_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(slider_style_1.classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, slider_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_1.clsx)(slider_style_1.classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.prefix, children: renderExtra(prefix) }), renderRailFn(), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.suffix, children: renderExtra(suffix) })] }));
 });

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

@@ -19,7 +19,7 @@ exports.classes = (0, utils_1.defineClasses)('slider', [
 ]);
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
-    return (0, utils_1.useCss)(({ spacing, mode, gray, divider, background, easing }) => {
+    return (0, utils_1.useCss)(({ spacing, mode, gray, divider, text, background, easing }) => {
         const c = (0, color_1.default)(colorValue);
         const lighter = c.lighten(.1).hex();
         const darker = c.darken(.1).hex();
@@ -39,7 +39,7 @@ function useStyle({ color }) {
                 border-radius: 1000em;
                 cursor: pointer;
                 background-color: ${gray(.1)};
-                transition: background-color .2s ${easing.easeOut};
+                transition: background-color .25s ${easing.easeOut};
                 touch-action: none;
 
                 &:hover {
@@ -75,6 +75,7 @@ function useStyle({ color }) {
                 position: absolute;
                 z-index: 1;
                 transform: translate(-50%, -50%);
+                -webkit-tap-highlight-color: transparent;
             }
     
             &:not([data-disable-outline=true]) {
@@ -85,7 +86,7 @@ function useStyle({ color }) {
     
             &[data-variant=filled] {
                 .${exports.classes.handle} {
-                    transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.easeOut};
+                    transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.easeOut};
                     background-color: ${colorValue};
                     
                     &:hover {
@@ -94,13 +95,13 @@ function useStyle({ color }) {
                     }
     
                     &:active {
-                        transition: background-color 0s, outline-width .2s ${easing.swing};
+                        transition: background-color 0s, outline-width .25s ${easing.swing};
                         background-color: ${darker};
                         outline-width: 9px;
                     }
     
                     &:focus {
-                        transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.swing};
+                        transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
                         outline-width: 9px;
                     }
                 }
@@ -108,7 +109,7 @@ function useStyle({ color }) {
     
             &[data-variant=outlined] {
                 .${exports.classes.handle} {
-                    transition: outline-width .2s ${easing.easeOut};
+                    transition: outline-width .25s ${easing.easeOut};
                     background-color: ${background.content};
                     border-width: 2px;
     
@@ -118,7 +119,7 @@ function useStyle({ color }) {
     
                     &:active,
                     &:focus {
-                        transition: outline-width .2s ${easing.swing};
+                        transition: outline-width .25s ${easing.swing};
                         outline-width: 9px;
                     }
                 }
@@ -138,7 +139,7 @@ function useStyle({ color }) {
             }
 
             &[data-orientation=horizontal] {
-                \.${exports.classes.track}:before {
+                .${exports.classes.track}:before {
                     height: 100%;
                     top: 0;
                     left: 0;
@@ -147,7 +148,7 @@ function useStyle({ color }) {
             }
 
             &[data-orientation=vertical] {
-                \.${exports.classes.track}:before {
+                .${exports.classes.track}:before {
                     width: 100%;
                     bottom: 0;
                     left: 0;
@@ -168,7 +169,9 @@ function useStyle({ color }) {
                 }
 
                 .${exports.classes.label} {
+                    color: ${text.secondary};
                     position: absolute;
+                    font-size: ${13 / 14}em;
                 }
             }
 

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { TransitionBaseProps } from '../transitionBase';
 import { BlockPlacement, ColorPropsValue, DefineElement } from '../../types';
 export interface SnackbarBaseProps extends TransitionBaseProps<HTMLDivElement> {
-    variant?: 'filled' | 'plain';
+    variant?: 'filled' | 'outlined';
     color?: ColorPropsValue;
     icon?: ReactNode;
     title?: ReactNode;