@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
 import { useSelection } from './selectionHook';
-const InnerSelectionContext = createContext({});
+const SelectionContextProvider = createContext({});
 export function useSelectionContext() {
-    return useContext(InnerSelectionContext);
+    return useContext(SelectionContextProvider);
 }
 export function SelectionContext(props) {
     const selection = useSelection(props);
-    return (_jsx(InnerSelectionContext, { value: useMemo(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
+    return (_jsx(SelectionContextProvider, { value: useMemo(() => selection, [props.disabled, selection.selectionStatus]), children: props.children }));
 }

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

@@ -2,13 +2,16 @@ import { isSelected, isUnset, toArray, useControlled, useDerivedState, useSync }
 import { useCallback, useMemo, useRef } from 'react';
 import { useSelectionContext } from './selectionContext';
 export 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] = useControlled(defaultValue, value, onChange);
-    let [innerOptions, setInnerOptions] = useDerivedState(options);
+    props = Object.assign({
+        primaryKey: 'id',
+        childrenKey: 'children',
+        relation: 'dependent',
+        integration: 'shallowest',
+        multiple: false,
+        disabled: false
+    }, props);
+    let [innerValue, setInnerValue] = useControlled(props.defaultValue, props.value, props.onChange);
+    let [innerOptions, setInnerOptions] = useDerivedState(props.options);
     /**
      * ----------------------------------------------------------------
      * 若嵌套在另个一SelectionContext内，取最外层数据
@@ -28,14 +31,14 @@ export 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];
                 !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 = useSync(optionsMap);
     const syncProps = useSync(props);
     const calSelectionStatus = (selectedSet = new Set(toArray(innerValue.current))) => {
@@ -86,17 +89,17 @@ export 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 = useSync(selectionStatus);
     const toggleSelected = 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));
@@ -187,6 +190,7 @@ export function useSelection(props) {
     }, [context.inSelection]);
     return {
         inSelection: true,
+        multiple: props.multiple,
         disabled: props.disabled,
         value: innerValue.current,
         setValue: setInnerValue,

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

@@ -1,10 +1,10 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { articalStyle, classes, style, tableStyle } from './skeleton.style';
 export const Skeleton = memo(({ variant = 'rounded', animation = true, width, height, ...props }) => {
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), style: {
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), style: {
             width,
             height,
             ...props.style
@@ -13,7 +13,8 @@ export const Skeleton = memo(({ variant = 'rounded', animation = true, width, he
 });
 export const SkeletonCard = memo(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }) => {
     const commonProps = { variant, animation };
-    return (_jsxs("div", { ...props, css: articalStyle, className: classnames(classes.artical, props.className), children: [_jsx("div", { className: classes.avatar, children: _jsx(Skeleton, { variant: "circular" }) }), _jsxs("div", { className: classes.text, children: [showTitle &&
+    return (_jsxs("div", { ...props, css: articalStyle, className: clsx(classes.artical, props.className), children: [showAvatar &&
+                _jsx("div", { className: classes.avatar, children: _jsx(Skeleton, { variant: "circular" }) }), _jsxs("div", { className: classes.text, children: [showTitle &&
                         _jsx(Skeleton, { ...commonProps, style: {
                                 width: '80%',
                                 height: 24,
@@ -29,6 +30,6 @@ export const SkeletonTable = memo(({ columns = 3, rows = 4, variant = 'rounded',
     const renderRows = () => {
         return Array(rows).fill(void 0).map((_, i) => _jsx("tr", { children: renderCols() }, i));
     };
-    return (_jsx("table", { ...props, css: tableStyle, className: classnames(classes.table, props.className), children: _jsx("tbody", { children: renderRows() }) }));
+    return (_jsx("table", { ...props, css: tableStyle, className: clsx(classes.table, props.className), children: _jsx("tbody", { children: renderRows() }) }));
 });
 Skeleton.Table = SkeletonTable;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, createContext, isValidElement, memo, useContext, useMemo, useRef, useState } from 'react';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './slidableActions.style';
-import { cubicBezier, classnames, useSyncState, range, useDraggableHandle, toArray } from '../../utils';
+import { cubicBezier, clsx, useSyncState, range, useDraggableHandle, toArray } from '../../utils';
 import { SlidableActionsAction } from './slidableActionsAction';
 const bezier = cubicBezier(0, 0, 0, 1);
 const SlidableActionsContext = createContext({
@@ -112,7 +112,7 @@ export const SlidableActions = memo(({ bounceElementTranslate = 24, bounceDragDi
                     : child;
         });
     };
-    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { css: style, className: classnames(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(SlidableActionsContext, { value: useMemo(() => ({
+    return (_jsx(ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: _jsxs("div", { css: style, className: clsx(classes.root, props.className), "data-dragging": dragging, children: [_jsx("div", { className: classes.content, ...draggableHandle, style: { translate: `${translate}px 0` }, children: props.children }), _jsxs("div", { className: classes.actions, children: [_jsx(SlidableActionsContext, { value: useMemo(() => ({
                                 actionsContainer: leftActionsContainer.current,
                                 translate,
                                 maxDistance: distanceRange.current[1]

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

@@ -2,10 +2,10 @@ 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 { classnames, cloneRef, colorTransfer } from '../../utils';
+import { clsx, cloneRef, colorTransfer } from '../../utils';
 import { useTheme } from '../theme';
 import { useSlidableActionsContext } from './slidableActions';
-export const SlidableActionsAction = memo(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }) => {
+export const SlidableActionsAction = memo(({ color = 'default', label, icon, buttonProps, _index, ...props }) => {
     const { actionsContainer, translate, maxDistance } = useSlidableActionsContext();
     const innerButtonRef = useRef(null);
     useEffect(() => {
@@ -32,5 +32,5 @@ export const SlidableActionsAction = memo(({ color = 'default', label, icon, but
     return (_jsx("div", { ...props, className: classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: _jsx(Button, { ref: cloneRef(buttonRef, innerButtonRef), ...buttonProps, className: classnames(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+        }, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
 });

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { memo, useEffect, useMemo, useRef } from 'react';
-import { classnames, cloneRef, isUnset, useControlled, useDraggableHandle } from '../../utils';
+import { clsx, cloneRef, isUnset, useControlled, useDraggableHandle } from '../../utils';
 import { classes, useStyle } from './slider.style';
 import { Tooltip } from '../tooltip';
 import { useTheme } from '../theme';
@@ -66,7 +66,9 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
      */
     const tooltipRefs = useRef([]);
     useEffect(() => {
-        tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+        setTimeout(() => {
+            tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+        });
     }, [innerValue.current]);
     /**
      * -----------------------------------------------------------------
@@ -164,7 +166,7 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
                 ref: cloneRef(r => {
                     handleRefs.current[index] = r;
                 }, handleProps?.ref),
-                className: classnames(classes.handle, handleProps?.className),
+                className: clsx(classes.handle, handleProps?.className),
                 style: {
                     width: handleSize,
                     height: handleSize,
@@ -188,10 +190,12 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
             return renderHandle
                 ? renderHandle(value, _handleProps)
                 : _jsx(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: _createElement("button", { ..._handleProps, key: index }) }, index);
         };
         return valueIsArray
@@ -206,7 +210,7 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
         const _railProps = {
             ...railProps,
             ref: railRef,
-            className: classnames(classes.rail, railProps?.className),
+            className: clsx(classes.rail, railProps?.className),
             style: {
                 ...orientation === 'horizontal'
                     ? {
@@ -286,7 +290,7 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
     const renderExtra = (prop) => {
         return typeof prop === 'function' ? prop(innerValue.current) : prop;
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: renderExtra(prefix) }), renderRailFn(), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: renderExtra(suffix) })] }));
 });

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

@@ -14,7 +14,7 @@ export const classes = defineClasses('slider', [
 ]);
 export function useStyle({ color }) {
     const colorValue = useColor(color);
-    return useCss(({ spacing, mode, gray, divider, background, easing }) => {
+    return useCss(({ spacing, mode, gray, divider, text, background, easing }) => {
         const c = Color(colorValue);
         const lighter = c.lighten(.1).hex();
         const darker = c.darken(.1).hex();
@@ -34,7 +34,7 @@ export 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 {
@@ -70,6 +70,7 @@ export function useStyle({ color }) {
                 position: absolute;
                 z-index: 1;
                 transform: translate(-50%, -50%);
+                -webkit-tap-highlight-color: transparent;
             }
     
             &:not([data-disable-outline=true]) {
@@ -80,7 +81,7 @@ export function useStyle({ color }) {
     
             &[data-variant=filled] {
                 .${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 {
@@ -89,13 +90,13 @@ export 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;
                     }
                 }
@@ -103,7 +104,7 @@ export function useStyle({ color }) {
     
             &[data-variant=outlined] {
                 .${classes.handle} {
-                    transition: outline-width .2s ${easing.easeOut};
+                    transition: outline-width .25s ${easing.easeOut};
                     background-color: ${background.content};
                     border-width: 2px;
     
@@ -113,7 +114,7 @@ export function useStyle({ color }) {
     
                     &:active,
                     &:focus {
-                        transition: outline-width .2s ${easing.swing};
+                        transition: outline-width .25s ${easing.swing};
                         outline-width: 9px;
                     }
                 }
@@ -133,7 +134,7 @@ export function useStyle({ color }) {
             }
 
             &[data-orientation=horizontal] {
-                \.${classes.track}:before {
+                .${classes.track}:before {
                     height: 100%;
                     top: 0;
                     left: 0;
@@ -142,7 +143,7 @@ export function useStyle({ color }) {
             }
 
             &[data-orientation=vertical] {
-                \.${classes.track}:before {
+                .${classes.track}:before {
                     width: 100%;
                     bottom: 0;
                     left: 0;
@@ -163,7 +164,9 @@ export function useStyle({ color }) {
                 }
 
                 .${classes.label} {
+                    color: ${text.secondary};
                     position: absolute;
+                    font-size: ${13 / 14}em;
                 }
             }
 

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

package/dist/esm/components/snackbarBase/snackbarBase.js

@@ -2,18 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useEffect, useRef, useState } from 'react';
 import { Collapse, Slide } from '../transitionBase';
-import { classnames, getEazyID, useColor } from '../../utils';
+import { clsx, getEasyID, useColor } from '../../utils';
 import { classes, style } from './snackbarBase.style';
 import { TransitionGroup } from 'react-transition-group';
-import { StatusIcon, statusMapToIcon } from '../status';
-import { CloseOutlined } from '@ant-design/icons';
+import { StatusIcon, statusMapToIconDefinition } from '../status';
 import { Button } from '../button';
 import { createPortal } from 'react-dom';
+import { Icon } from '../..';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 export class SnackbarBaseMethods {
-    async info(_) { }
-    async success(_) { }
-    async warning(_) { }
-    async error(_) { }
+    async info(_) {
+    }
+    async success(_) {
+    }
+    async warning(_) {
+    }
+    async error(_) {
+    }
 }
 // placement对应stacks的index
 const placementToIndex = {
@@ -40,7 +45,7 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
             : { content: props };
         const { placement = useTo === 'message' ? 'top' : 'topRight', duration = useTo === 'message' ? 3000 : 5000, ...restProps } = propsObject;
         const index = placementToIndex[placement];
-        let id = getEazyID('snackbar');
+        let id = getEasyID('snackbar');
         const onCloseButtonClick = () => {
             setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);
@@ -98,21 +103,20 @@ const placementToDirection = {
     bottomRight: 'left',
     rightBottom: 'left'
 };
-export const SnackbarBaseItem = memo(({ id, type, useTo, resolve, variant = 'plain', color = 'primary', icon, title, content, showClose = useTo === 'notification', placement, onCloseButtonClick, ...props }) => {
+export const SnackbarBaseItem = memo(({ id, type, useTo, resolve, variant = 'outlined', color = 'primary', icon, title, content, showClose = useTo === 'notification', placement, onCloseButtonClick, ...props }) => {
     const onExited = () => {
         props.onExited?.();
         resolve();
     };
     const colorValue = useColor(color);
-    const Icon = statusMapToIcon[type];
-    const renderedIcon = icon ?? (variant === 'plain'
+    const renderedIcon = icon ?? (variant === 'outlined'
         ? _jsx(StatusIcon, { status: type })
-        : _jsx(Icon, {}));
+        : _jsx(Icon, { icon: statusMapToIconDefinition[type] }));
     const closeHandler = (e) => {
         e.stopPropagation();
         onCloseButtonClick?.(e);
     };
-    return (_jsx(Collapse, { in: props.in, className: classes.itemWrap, onExited: onExited, children: _jsxs(Slide, { direction: placementToDirection[placement], ...props, className: classnames(classes.item, props.className), style: {
+    return (_jsx(Collapse, { in: props.in, className: classes.itemWrap, onExited: onExited, children: _jsxs(Slide, { direction: placementToDirection[placement], ...props, className: clsx(classes.item, props.className), style: {
                 backgroundColor: variant === 'filled' ? colorValue : void 0,
                 ...props.style
             }, "data-variant": variant, "data-use-to": useTo, children: [!!renderedIcon &&
@@ -120,5 +124,5 @@ export const SnackbarBaseItem = memo(({ id, type, useTo, resolve, variant = 'pla
                     _jsxs("div", { className: classes.text, children: [!!title &&
                                 _jsx("div", { className: classes.title, children: title }), !!content &&
                                 _jsx("div", { className: classes.content, children: content })] }), showClose &&
-                    _jsx(Button, { variant: "text", shape: "circular", color: "disabled", size: "small", className: classes.close, onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }) }));
+                    _jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", size: "small", className: classes.close, onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }) }));
 });

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

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

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

@@ -99,7 +99,7 @@ export const style = defineCss(theme => {
             }
 
             .${classes.item} {
-                pointer-events: all;
+                pointer-events: all !important;
                 max-width: 60%;
                 display: flex;
                 gap: ${spacing[4]}px;
@@ -114,7 +114,6 @@ export const style = defineCss(theme => {
                 }
 
                 .${classes.icon} {
-                    line-height: 20px;
                     font-size: ${17 / 14}em;
                 }
 

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

@@ -1,9 +1,10 @@
-import { ReactElement } from 'react';
+import { ElementType } from 'react';
 import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
-export type SortableItemProps<P> = Omit<P, 'component' | 'id' | 'disabled' | 'sortableArguments'> & {
-    component?: any;
+import { OverridableComponent, OverridableProps } from '../../types';
+export type SortableItemOwnProps = {
     id: string | number;
     disabled?: boolean;
     sortableArguments?: Arguments;
 };
-export declare const SortableItem: <P>(props: SortableItemProps<P>) => ReactElement;
+export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;
+export declare const SortableItem: OverridableComponent<SortableItemOwnProps>;