@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,26 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTreeSelect = useTreeSelect;
-const react_1 = require("react");
+exports.useSelection = useSelection;
+exports.useShallowSelection = useShallowSelection;
 const utils_1 = require("../../utils");
+const react_1 = require("react");
 const selectionContext_1 = require("./selectionContext");
-function useTreeSelect({ ...props }) {
+function useSelection(props) {
     props.primaryKey ??= 'id';
     props.childrenKey ??= 'children';
     props.relation ??= 'dependent';
     props.integration ??= 'shallowest';
-    const { options, primaryKey, childrenKey, relation, multiple, defaultValue, value, onChange, } = props;
+    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);
     /**
      * ----------------------------------------------------------------
-     * 若嵌套在另个一SelectionContext内，取外层数据
+     * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = (0, selectionContext_1.useSelectionContext)();
     if (context.inSelection) {
-        innerValue = context.innerValue;
-        setInnerValue = context.setInnerValue;
-        innerOptions = context.innerOptions;
+        innerValue.current = context.value;
+        setInnerValue = context.setValue;
+        innerOptions.current = context.options;
     }
     const optionsMap = (0, react_1.useMemo)(() => {
         if (context.inSelection) {
@@ -39,6 +40,7 @@ function useTreeSelect({ ...props }) {
         fn(innerOptions.current);
         return map;
     }, [innerOptions.current, primaryKey, 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))) => {
         const { multiple, relation, primaryKey, childrenKey } = syncProps.current;
@@ -79,7 +81,7 @@ function useTreeSelect({ ...props }) {
         }
         return map;
     };
-    const preCalSelectionStatus = (0, react_1.useRef)();
+    const preCalSelectionStatus = (0, react_1.useRef)(void 0);
     const selectionStatus = (0, react_1.useMemo)(() => {
         if (context.inSelection) {
             return context.selectionStatus;
@@ -90,9 +92,9 @@ function useTreeSelect({ ...props }) {
         return ret;
     }, [innerValue.current, optionsMap, multiple, relation, context.selectionStatus]);
     const syncSelectionStatus = (0, utils_1.useSync)(selectionStatus);
-    const toggleSelected = (0, react_1.useCallback)((value, option) => {
+    const toggleSelected = (0, react_1.useCallback)((value) => {
         if (context.inSelection) {
-            context.toggleSelected(value, option);
+            context.toggleSelected(value);
             return;
         }
         const { disabled, onToggle, multiple, relation, integration, primaryKey, childrenKey, clearable } = syncProps.current;
@@ -101,7 +103,7 @@ function useTreeSelect({ ...props }) {
         }
         const selectionStatus = syncSelectionStatus.current;
         const currentSelected = selectionStatus.get(value) === 2;
-        onToggle?.(!currentSelected, value, option);
+        onToggle?.(!currentSelected, value, syncOptionsMap.current.get(value));
         if (!multiple) {
             if (!currentSelected) {
                 setInnerValue(value);
@@ -123,27 +125,10 @@ function useTreeSelect({ ...props }) {
             return;
         }
         // relation === 'dependent'
-        /**
-         * 通用的递归方法
-         * @param callback
-         * @param arr
-         * @param payload
-         */
-        const loopOptions = (callback, arr = innerOptions.current, payload) => {
-            arr?.forEach(item => {
-                const id = item[primaryKey];
-                if ((0, utils_1.isUnset)(id)) {
-                    return;
-                }
-                let children = item[childrenKey];
-                children = Array.isArray(children) && children.length ? children : null;
-                const ret = callback(id, children, payload);
-                children && loopOptions(callback, children, ret);
-            });
-        };
+        // 按照deepest方式计算出已选项
         const deepestSelectedSet = new Set((0, utils_1.toArray)(innerValue.current));
         loopOptions((id, children, parentModifiedTo) => {
-            // 父节点已修改，子节点同步修改；
+            // 父节点已修改，子节点同步修改
             const modifyTo = typeof parentModifiedTo === 'boolean' ? parentModifiedTo
                 // 当前为目标节点，直接修改
                 : id === value ? !currentSelected
@@ -162,6 +147,7 @@ function useTreeSelect({ ...props }) {
             }
             return modifyTo;
         });
+        // 根据integration模式拆分得到最终值
         if (integration !== 'deepest') {
             const newStatus = preCalSelectionStatus.current = calSelectionStatus(deepestSelectedSet);
             if (integration === 'shallowest') {
@@ -184,10 +170,67 @@ function useTreeSelect({ ...props }) {
             }
         }
         setInnerValue([...deepestSelectedSet]);
+        /**
+         * 通用的递归方法
+         * @param callback
+         * @param arr
+         * @param payload
+         */
+        function loopOptions(callback, arr = innerOptions.current, payload) {
+            arr?.forEach(item => {
+                const id = item[primaryKey];
+                if ((0, utils_1.isUnset)(id)) {
+                    return;
+                }
+                let children = item[childrenKey];
+                children = Array.isArray(children) && children.length ? children : null;
+                const ret = callback(id, children, payload);
+                children && loopOptions(callback, children, ret);
+            });
+        }
     }, [context.inSelection]);
     return {
-        innerValue, setInnerValue,
-        innerOptions, setInnerOptions,
-        optionsMap, selectionStatus, toggleSelected
+        inSelection: true,
+        disabled: props.disabled,
+        value: innerValue.current,
+        setValue: setInnerValue,
+        options: innerOptions.current,
+        setOptions: setInnerOptions,
+        optionsMap,
+        selectionStatus,
+        toggleSelected,
+        onToggle: props.onToggle
     };
 }
+function useShallowSelection(params) {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(params.defaultValue, params.value, params.onChange);
+    const sync = (0, utils_1.useSync)(params);
+    return [
+        innerValue.current,
+        (0, react_1.useCallback)(value => {
+            if (sync.current.disabled) {
+                return;
+            }
+            const currentSelected = (0, utils_1.isSelected)(value, innerValue.current);
+            if (sync.current.multiple) {
+                setInnerValue((o) => {
+                    o = (0, utils_1.toArray)(o) || [];
+                    return currentSelected
+                        ? o.filter(v => v !== value)
+                        : [...o, value];
+                });
+            }
+            else {
+                // single
+                if (!currentSelected) {
+                    setInnerValue(value);
+                }
+                else if (sync.current.clearable) {
+                    // 单选模式必须指定clearable才能清空选择
+                    setInnerValue(void 0);
+                }
+            }
+        }, []),
+        setInnerValue
+    ];
+}

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

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

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

@@ -6,25 +6,25 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_2 = require("react");
 const utils_1 = require("../../utils");
 const skeleton_style_1 = require("./skeleton.style");
-exports.Skeleton = (0, react_2.memo)((0, react_2.forwardRef)(({ variant = 'rounded', animation = true, width, height, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: skeleton_style_1.style, className: (0, utils_1.classnames)(skeleton_style_1.classes.root, props.className), 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: {
             width,
             height,
             ...props.style
         }, "data-variant": variant, "data-animation": animation, children: !!props.children &&
             (0, jsx_runtime_1.jsx)("div", { className: skeleton_style_1.classes.children, children: props.children }) }));
-}));
-exports.SkeletonCard = (0, react_2.memo)((0, react_2.forwardRef)(({ showAvatar, showTitle = true, rows = 3, variant = 'rounded', animation = true, ...props }, ref) => {
+});
+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, ref: ref, 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.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 &&
                         (0, jsx_runtime_1.jsx)(exports.Skeleton, { ...commonProps, style: {
                                 width: '80%',
                                 height: 24,
                                 margin: '4px 0 2em'
                             } }), Array(rows).fill(void 0).map((_, i) => (0, react_1.createElement)(exports.Skeleton, { ...commonProps, key: i, style: i === rows - 1 ? { width: '60%' } : void 0 }))] })] }));
-}));
+});
 exports.Skeleton.Card = exports.SkeletonCard;
-exports.SkeletonTable = (0, react_2.memo)((0, react_2.forwardRef)(({ columns = 3, rows = 4, variant = 'rounded', animation = true, ...props }, ref) => {
+exports.SkeletonTable = (0, react_2.memo)(({ columns = 3, rows = 4, variant = 'rounded', animation = true, ...props }) => {
     const commonProps = { variant, animation };
     const renderCols = () => {
         return Array(columns).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(exports.Skeleton, { ...commonProps }) }, i));
@@ -32,6 +32,6 @@ exports.SkeletonTable = (0, react_2.memo)((0, react_2.forwardRef)(({ columns = 3
     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, ref: ref, 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.classnames)(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/skeleton/skeleton.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     text: string;
-    children: string;
     table: string;
+    children: string;
     artical: string;
     avatar: string;
 } & {

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(): {
@@ -9,11 +9,11 @@ export declare function useSlidableActionsContext(): {
 };
 type ActionType = SlidableActionsActionProps | ReactElement;
 export interface SlidableActionsProps extends DIVProps {
-    /** 元素弹性移动距离，@default 24 */
+    /** 元素弹性移动距离，默认为24 */
     bounceElementTranslate?: number;
-    /** 手指弹性拖拽距离，@default 240 */
+    /** 手指弹性拖拽距离，默认为240 */
     bounceDragDistance?: number;
-    /** 滑动生效的速度，@default 450 (px/s) */
+    /** 滑动生效的速度，默认为450 (px/s) */
     effectiveSpeed?: number;
     leftActions?: ActionType | ActionType[];
     rightActions?: ActionType | ActionType[];

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

@@ -9,15 +9,15 @@ const slidableActions_style_1 = require("./slidableActions.style");
 const utils_1 = require("../../utils");
 const slidableActionsAction_1 = require("./slidableActionsAction");
 const bezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
-const slidableActionsContext = (0, react_1.createContext)({
+const SlidableActionsContext = (0, react_1.createContext)({
     actionsContainer: [],
     translate: 0,
     maxDistance: 0
 });
 function useSlidableActionsContext() {
-    return (0, react_1.useContext)(slidableActionsContext);
+    return (0, react_1.useContext)(SlidableActionsContext);
 }
-exports.SlidableActions = (0, react_1.memo)((0, react_1.forwardRef)(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }, ref) => {
+exports.SlidableActions = (0, react_1.memo)(({ bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, leftActions, rightActions, disabled, draggableOptions, ...props }) => {
     const leftActionsContainer = (0, react_1.useRef)([]);
     const rightActionsContainer = (0, react_1.useRef)([]);
     const [distanceRange, setDistanceRange] = (0, utils_1.useSyncState)([0, 0]);
@@ -116,16 +116,16 @@ exports.SlidableActions = (0, react_1.memo)((0, react_1.forwardRef)(({ bounceEle
                     : child;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { eventType: "pointerdown", onClickAway: onClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, 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.Provider, { 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.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)(() => ({
                                 actionsContainer: leftActionsContainer.current,
                                 translate,
                                 maxDistance: distanceRange.current[1]
                             }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsLeft, children: !!leftActions &&
-                                    renderActions(leftActions) }) }), (0, jsx_runtime_1.jsx)(slidableActionsContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                                    renderActions(leftActions) }) }), (0, jsx_runtime_1.jsx)(SlidableActionsContext, { value: (0, react_1.useMemo)(() => ({
                                 actionsContainer: rightActionsContainer.current,
                                 translate,
                                 maxDistance: -distanceRange.current[0]
                             }), [translate, distanceRange.current]), children: (0, jsx_runtime_1.jsx)("div", { className: slidableActions_style_1.classes.actionsRight, children: !!rightActions &&
                                     renderActions(rightActions) }) })] })] }) }));
-}));
+});
 exports.SlidableActions.Action = slidableActionsAction_1.SlidableActionsAction;

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

@@ -38,7 +38,7 @@ exports.style = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                color: ${background.card};
+                color: ${background.content};
                 position: absolute;
                 top: 0;
     

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

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

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

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const button_1 = require("../button");
 const slidableActions_style_1 = require("./slidableActions.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const slidableActions_1 = require("./slidableActions");
-exports.SlidableActionsAction = (0, react_1.memo)((0, react_1.forwardRef)(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }, ref) => {
+exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }) => {
     const { actionsContainer, translate, maxDistance } = (0, slidableActions_1.useSlidableActionsContext)();
     const innerButtonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -26,14 +26,14 @@ exports.SlidableActionsAction = (0, react_1.memo)((0, react_1.forwardRef)(({ col
         }, 0);
         return (1 - prevWidth / maxDistance) * translate;
     }, [translate, maxDistance, _index]);
-    const theme = (0, app_1.useTheme)();
+    const theme = (0, theme_1.useTheme)();
     const backgroundColor = (0, react_1.useMemo)(() => {
         return color === 'default'
             ? '#aaaaaa'
             : (0, utils_1.colorTransfer)(color, theme);
     }, [color, theme]);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: slidableActions_style_1.classes.actionItem, style: {
+    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 }) }));
-}));
+});

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

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } 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 {
     label?: ReactNode;
     /**
      * label的位置
-     * {@link SliderBaseProps.orientation}为"horizontal"时，@default "bottom"
-     * {@link SliderBaseProps.orientation}为"vertical"时，@default "right"
+     * {@link SliderBaseProps.orientation}为`horizontal`时，默认为`bottom`
+     * {@link SliderBaseProps.orientation}为`vertical`时，默认为`right`
      */
     labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
     value: number;
@@ -17,7 +17,7 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     orientation?: 'horizontal' | 'vertical';
     /** variant只改变滑块的样式 */
     variant?: 'filled' | 'outlined';
-    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。@default false */
+    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。默认为`false` */
     inset?: boolean;
     /** 轨道 */
     railSize?: number;
@@ -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?: React.JSX.IntrinsicElements['button'];
     /** 禁用默认的滑块外边框 */
     disableHandleOutline?: boolean;
     /** 渲染滑块，range模式时，改方法会触发两次 */
@@ -37,7 +37,7 @@ interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | '
     /** 滑块拖动每格的值，为null时必须配合marks使用，滑块只能在marks上 */
     step?: number | null;
     marks?: MarkItem[];
-    /** mark中的标签与滑动轨道的距离，@default 6 */
+    /** mark中的标签与滑动轨道的距离，默认为`6` */
     markLabelOffset?: number;
     markSize?: number;
     disableTrack?: boolean;
@@ -58,5 +58,5 @@ export interface SliderRangeProps extends SliderBaseProps {
     suffix?: ReactNode | ((value: [number, number]) => ReactNode);
 }
 export type SliderProps = SliderSingleProps | SliderRangeProps;
-export declare const Slider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(Omit<SliderSingleProps, "ref"> | Omit<SliderRangeProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+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 {};

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

@@ -7,9 +7,9 @@ const react_2 = require("react");
 const utils_1 = require("../../utils");
 const slider_style_1 = require("./slider.style");
 const tooltip_1 = require("../tooltip");
-const app_1 = require("../app");
-exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }) => {
+    const { spacing } = (0, theme_1.useTheme)();
     markLabelOffset ??= inset ? spacing[1] : spacing[2];
     const orderedMarks = (0, react_2.useMemo)(() => {
         return marks ? [...marks].sort((a, b) => a.value - b.value) : void 0;
@@ -87,7 +87,7 @@ exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary',
      */
     const railRef = (0, react_2.useRef)(null);
     const handleRefs = (0, react_2.useRef)([]);
-    const dragStartData = (0, react_2.useRef)();
+    const dragStartData = (0, react_2.useRef)(void 0);
     const draggableHandle = (0, utils_1.useDraggableHandle)({
         ...draggableOptions,
         onDragStart(e) {
@@ -164,7 +164,9 @@ exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary',
             const _handleProps = {
                 key: index,
                 ...handleProps,
-                ref: (0, utils_1.cloneRef)(r => handleRefs.current[index] = r, handleProps?.ref),
+                ref: (0, utils_1.cloneRef)(r => {
+                    handleRefs.current[index] = r;
+                }, handleProps?.ref),
                 className: (0, utils_1.classnames)(slider_style_1.classes.handle, handleProps?.className),
                 style: {
                     width: handleSize,
@@ -188,7 +190,12 @@ exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary',
             };
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => tooltipRefs.current[index] = r, 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);
+                : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => {
+                        tooltipRefs.current[index] = r;
+                        return () => {
+                            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
             ? innerValue.current.map(fn)
@@ -282,7 +289,7 @@ exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary',
     const renderExtra = (prop) => {
         return typeof prop === 'function' ? prop(innerValue.current) : prop;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, 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 }), 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 &&
                 (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.d.ts

@@ -1,9 +1,9 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
-    prefix: string;
     label: string;
     mark: string;
     track: string;
+    prefix: string;
     suffix: string;
     rail: string;
     railWrap: string;

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

@@ -109,7 +109,7 @@ function useStyle({ color }) {
             &[data-variant=outlined] {
                 .${exports.classes.handle} {
                     transition: outline-width .2s ${easing.easeOut};
-                    background-color: ${background.card};
+                    background-color: ${background.content};
                     border-width: 2px;
     
                     &:hover {
@@ -159,7 +159,7 @@ function useStyle({ color }) {
                 aspect-ratio: 1;
                 border: 2px solid ${gray(mode === 'light' ? .2 : .1)};
                 border-radius: 50%;
-                background-color: ${background.card};
+                background-color: ${background.content};
                 position: absolute;
                 transform: translate(-50%, -50%);
 

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TransitionBaseProps } from '../transitionBase';
-import { BlockPlacement, ColorPropsValue, DefineElement } from '../../../types';
+import { BlockPlacement, ColorPropsValue, DefineElement } from '../../types';
 export interface SnackbarBaseProps extends TransitionBaseProps<HTMLDivElement> {
     variant?: 'filled' | 'plain';
     color?: ColorPropsValue;
@@ -9,7 +9,7 @@ export interface SnackbarBaseProps extends TransitionBaseProps<HTMLDivElement> {
     content?: ReactNode;
     showClose?: ReactNode;
     placement?: BlockPlacement;
-    /** 自动关闭的延迟，为0表示不自动关闭，@default 3000 (ms) */
+    /** 自动关闭的延迟，为0表示不自动关闭，默认为`3000(ms)` */
     duration?: number;
     onAutoClose?(): void;
     onCloseButtonClick?(e: React.MouseEvent<HTMLButtonElement>): void;
@@ -24,17 +24,17 @@ export declare class SnackbarBaseMethods<P extends SnackbarBaseProps = SnackbarB
     error(content: ReactNode): Promise<void>;
     error(props: P): Promise<void>;
 }
-export declare const SnackbarBase: import("react").MemoExoticComponent<({ methods, useTo, max, container }: {
+export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo, max, container }: {
     methods: SnackbarBaseMethods;
     useTo: "message" | "notification";
     max?: number;
     container?: DefineElement;
-}) => import("react").ReactPortal>;
+}) => React.ReactPortal>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;
     useTo: 'message' | 'notification';
     resolve(): void;
 }
-export declare const SnackbarBaseItem: import("react").MemoExoticComponent<({ id, type, useTo, resolve, variant, color, icon, title, content, showClose, placement, onCloseButtonClick, ...props }: SnackbarBaseItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const SnackbarBaseItem: React.MemoExoticComponent<({ id, type, useTo, resolve, variant, color, icon, title, content, showClose, placement, onCloseButtonClick, ...props }: SnackbarBaseItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -3,10 +3,10 @@ export declare const classes: {
     title: string;
     content: string;
     icon: string;
-    titleRow: string;
     close: string;
-    itemWrap: string;
     item: string;
+    titleRow: string;
+    itemWrap: string;
 } & {
     root: string;
 };