@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/cjs/extensions/documentViewer/svgViewer.d.ts

@@ -1,13 +1,13 @@
 import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
-import { Theme } from '../../components/app';
+import { Theme } from '../../components/theme';
 import { LoadingProps } from '../../components/loading';
 import { DocumentViewerBaseProps } from './documentViewer';
 export interface SvgViewerProps extends DocumentViewerBaseProps, Omit<LoadingProps, 'onError'> {
-    /** 是否显示下载按钮，@default true */
+    /** 是否显示下载按钮，默认为true */
     showDownload?: boolean;
-    /** 是否可切换主题，@default true */
+    /** 是否可切换主题，默认为true */
     themeSwitchable?: boolean;
     onThemeChange?(mode: Theme['mode']): void;
     transformWrapperProps?: ReactZoomPanPinchProps;
 }
-export declare const SvgViewer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SvgViewerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const SvgViewer: import("react").MemoExoticComponent<(props: SvgViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/extensions/documentViewer/svgViewer.js

@@ -11,24 +11,24 @@ const button_1 = require("../../components/button");
 const tooltip_1 = require("../../components/tooltip");
 const divider_1 = require("../../components/divider");
 const switch_1 = require("../../components/switch");
-const app_1 = require("../../components/app");
+const theme_1 = require("../../components/theme");
 const loading_1 = require("../../components/loading");
 const documentViewer_1 = require("./documentViewer");
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
 };
-exports.SvgViewer = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(app_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(SvgViewerContent, { ...props, ref: ref }) }));
-}));
-const SvgViewerContent = (0, react_1.forwardRef)(({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
+exports.SvgViewer = (0, react_1.memo)((props) => {
+    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(SvgViewerContent, { ...props }) }));
+});
+function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
 // 从DocumentViewerBaseProps继承来的属性
-src, filename, onError, setDocumentTitle, ...props }, ref) => {
+src, filename, onError, setDocumentTitle, ...props }) {
     /**
      * ---------------------------------------------------------------
      * 切换主题
      */
-    const { mode, update } = (0, app_1.useTheme)();
+    const { mode, update } = (0, theme_1.useTheme)();
     const themeChangeHandler = (checked) => {
         const mode = checked ? 'light' : 'dark';
         update({ mode });
@@ -69,7 +69,7 @@ src, filename, onError, setDocumentTitle, ...props }, ref) => {
     const objectOnLoad = () => {
         transformWrapperRef.current.centerView();
     };
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, ref: ref, css: documentViewer_style_1.svgStyle, className: (0, utils_1.classnames)(documentViewer_style_1.classes.svgViewer, props.className), loading: loading, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgTitle, children: [(0, jsx_runtime_1.jsx)(icons_1.BranchesOutlined, { className: documentViewer_style_1.classes.svgIcon }), (0, jsx_runtime_1.jsx)("div", { children: filename })] }), (0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbarRight, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) }), themeSwitchable &&
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: documentViewer_style_1.svgStyle, className: (0, utils_1.classnames)(documentViewer_style_1.classes.svgViewer, props.className), loading: loading, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgTitle, children: [(0, jsx_runtime_1.jsx)(icons_1.BranchesOutlined, { className: documentViewer_style_1.classes.svgIcon }), (0, jsx_runtime_1.jsx)("div", { children: filename })] }), (0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbarRight, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) }), themeSwitchable &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checkedLabel: (0, jsx_runtime_1.jsx)(icons_1.SunFilled, {}), unCheckedLabel: (0, jsx_runtime_1.jsx)(icons_1.MoonFilled, {}), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: documentViewer_style_1.classes.svgContainer, contentClass: documentViewer_style_1.classes.svgContent, children: (0, jsx_runtime_1.jsx)("object", { className: documentViewer_style_1.classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
-});
+}

package/dist/cjs/extensions/documentViewer/textViewer.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const documentViewer_1 = require("./documentViewer");
 const skeleton_1 = require("../../components/skeleton");
 const utils_1 = require("../../utils");
-const textFormatter_1 = require("../textFormatter/textFormatter");
+const textFormatter_1 = require("../textFormatter");
 exports.TextViewer = (0, react_1.memo)(({ src, filename, onError, setDocumentTitle, ...props }) => {
     (0, documentViewer_1.useDocumentTitle)({ filename, setDocumentTitle });
     const [text, setText] = (0, utils_1.useDerivedState)(void 0, [src]);

package/dist/cjs/extensions/textFormatter/textFormatter.d.ts

@@ -2,4 +2,4 @@ import { DIVProps } from '../../../types';
 export interface TextFormatterProps extends Omit<DIVProps, 'children'> {
     text?: string;
 }
-export declare const TextFormatter: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TextFormatterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const TextFormatter: import("react").MemoExoticComponent<({ text, ...props }: TextFormatterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/extensions/textFormatter/textFormatter.js

@@ -32,6 +32,6 @@ const md = new markdown_it_1.default({
 });
 md.use(markdown_it_katex_1.default, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
 md.use(markdown_it_link_attributes_1.default, { attrs: { target: '_blank', rel: 'noopener' } });
-exports.TextFormatter = (0, react_1.memo)((0, react_1.forwardRef)(({ text, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: textFormatter_style_1.style, className: (0, utils_1.classnames)(textFormatter_style_1.classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
-}));
+exports.TextFormatter = (0, react_1.memo)(({ text, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: textFormatter_style_1.style, className: (0, utils_1.classnames)(textFormatter_style_1.classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
+});

package/dist/cjs/index.d.ts

@@ -72,6 +72,7 @@ export * from './components/table';
 export * from './components/tabs';
 export * from './components/tag';
 export * from './components/textarea';
+export * from './components/theme';
 export * from './components/timeline';
 export * from './components/toggleButton';
 export * from './components/tooltip';

package/dist/cjs/index.js

@@ -75,6 +75,7 @@ tslib_1.__exportStar(require("./components/table"), exports);
 tslib_1.__exportStar(require("./components/tabs"), exports);
 tslib_1.__exportStar(require("./components/tag"), exports);
 tslib_1.__exportStar(require("./components/textarea"), exports);
+tslib_1.__exportStar(require("./components/theme"), exports);
 tslib_1.__exportStar(require("./components/timeline"), exports);
 tslib_1.__exportStar(require("./components/toggleButton"), exports);
 tslib_1.__exportStar(require("./components/tooltip"), exports);

package/dist/cjs/utils/curd.d.ts

@@ -1,6 +1,7 @@
 import { CurdColumn, CurdFormItemProps, CurdProps } from '../components/curd';
 import { ColumnType, RowType } from '../components/dataGrid';
 import { Id, Obj } from '../../types';
+import { FormValue } from '../components/form';
 /**
  * 将Curd的Columns转换为FilterItem
  * @param columns
@@ -14,10 +15,10 @@ export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[]
 /**
  * 统一处理Columns
  */
-export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, V>, 'columns' | 'columnConfigurable'>): {
+export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, FormValue, V>, 'columns' | 'columnConfigurable'>): {
     orderedColumns: any[];
     actualColumns: (symbol | ColumnType<R>)[];
-    innerVisible: import("react").MutableRefObject<Id[]>;
+    innerVisible: import("react").RefObject<Id[]>;
     setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
     setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
 };

package/dist/cjs/utils/dnd.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import { Obj } from '../../types';
 /**
@@ -9,6 +9,7 @@ export declare function useDndSensors(): import("@dnd-kit/core").SensorDescripto
  * <DndContext>组件通用的onDragEnd方法
  * @param e
  * @param prevState 传入需要排序的数组
+ * @param primaryKey 索引用的主键
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
 export type DraggableOptions<T extends Element = Element> = {
@@ -27,7 +28,7 @@ export type DraggableOptions<T extends Element = Element> = {
     onPointerDown?(e: React.PointerEvent<T>): void;
     onTouchStart?(e: React.TouchEvent<T>): void;
     onClick?(e: React.MouseEvent<T>): void;
-    /** 若拖拽节点受zoom样式的影响，需要传入zoom值 */
+    /** 若拖拽节点受zoom样式的影响，可传入zoom值修正 */
     zoom?: number;
 };
 export type DragInfo = {

package/dist/cjs/utils/dnd.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const hooks_1 = require("./hooks");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
-const app_1 = require("../components/app");
+const theme_1 = require("../components/theme");
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -22,6 +22,7 @@ function useDndSensors() {
  * <DndContext>组件通用的onDragEnd方法
  * @param e
  * @param prevState 传入需要排序的数组
+ * @param primaryKey 索引用的主键
  */
 function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const { active, over } = e;
@@ -34,10 +35,10 @@ function onDndDragEnd(e, prevState, primaryKey = 'id') {
     return (0, sortable_1.arrayMove)(prevState, oldIndex, newIndex);
 }
 function useDraggableHandle(options = {}) {
-    const { zoom } = (0, app_1.useAppContext)();
+    const { zoom } = (0, theme_1.useTheme)();
     options.zoom ||= zoom;
     const syncOptions = (0, hooks_1.useSync)(options);
-    const preventDefaultCallback = (0, react_1.useRef)();
+    const preventDefaultCallback = (0, react_1.useRef)(void 0);
     const onTouchStart = (0, react_1.useCallback)(() => {
         if (syncOptions.current.disabled || !syncOptions.current.disableNativeTouchMove) {
             return;
@@ -48,7 +49,7 @@ function useDraggableHandle(options = {}) {
     }, []);
     const startTime = (0, react_1.useRef)(0);
     const startPosition = (0, react_1.useRef)([0, 0]);
-    const delay = (0, react_1.useRef)();
+    const delay = (0, react_1.useRef)(void 0);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (syncOptions.current.disabled) {
             return;
@@ -74,8 +75,8 @@ function useDraggableHandle(options = {}) {
     }, []);
     const buildDragInfo = ({ clientX, clientY }) => {
         const [startX, startY] = startPosition.current;
-        const deltaX = (clientX - startX) / (syncOptions.current.zoom || 1);
-        const deltaY = (clientY - startY) / (syncOptions.current.zoom || 1);
+        const deltaX = (clientX - startX) / (syncOptions.current.zoom);
+        const deltaY = (clientY - startY) / (syncOptions.current.zoom);
         return {
             startX, startY,
             currentX: clientX, currentY: clientY,

package/dist/cjs/utils/hooks.d.ts

@@ -1,62 +1,49 @@
-import { MutableRefObject, Dispatch, SetStateAction } from 'react';
-import { Id } from '../../types';
+import { RefObject, Dispatch, SetStateAction } from 'react';
 /**
  * 获取渲染前的值
  * @param value
  */
-export declare function usePrev<T>(value: T): T | undefined;
+export declare function usePrev<T>(value: T): T | null;
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题
  * @param value
  */
-export declare function useSync<T>(value: T): MutableRefObject<T>;
+export declare function useSync<T>(value: T): RefObject<T>;
 /**
  * 同步的状态，state包裹在ref内，主要用于对付组件的闭包问题
  * @param initialState
  */
-export declare function useSyncState<T>(initialState: T | (() => T)): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
-export declare function useSyncState<T = undefined>(): [MutableRefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
+export declare function useSyncState<T>(initialState: T | (() => T)): [RefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useSyncState<T = undefined>(): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
 /**
  * 强制更新组件
  */
 export declare function useForceUpdate(): () => void;
 /**
  * 派生状态
- * @param state 原始状态
+ * @param referredState 原始状态
  * @param deps 依赖，类似useMemo的第二个参数，当依赖改变时会更新派生状态，若无该参数，则状态本身将会作为依赖
  */
-export declare function useDerivedState<T>(referredState: (prevState: T | undefined) => T, deps: any[]): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
-export declare function useDerivedState<T>(referredState: T, deps?: any[]): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useDerivedState<T>(referredState: (prevState: T | undefined) => T, deps: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useDerivedState<T>(referredState: T, deps?: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
 /**
  * 组件卸载后得到{current: true}
  * @returns
  */
-export declare function useUnmounted(): MutableRefObject<boolean>;
+export declare function useUnmounted(): RefObject<boolean>;
 /**
  * 处理受控组件的外部属性与内部属性
  * @param defaultValue
  * @param value
  * @param onChange
  */
-export declare function useControlled<T = any>(defaultValue: T, value?: T, onChange?: (value: T) => void): [MutableRefObject<T>, Dispatch<SetStateAction<T>>];
-export declare function useControlled<T = any>(defaultValue?: T, value?: T, onChange?: (value: T) => void): [MutableRefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
-/**
- * 控制选中状态的通用方法
- * @param param0
- */
-export declare function useControlledSelect<T extends Id | Id[]>(params: {
-    disabled?: boolean;
-    multiple?: boolean;
-    clearable?: boolean;
-    defaultValue?: T;
-    value?: T;
-    onChange?: (value: T) => void;
-}): [MutableRefObject<T>, (value: T) => void, Dispatch<SetStateAction<T>>];
+export declare function useControlled<T = any>(defaultValue: T, value?: T, onChange?: (value: T) => void): [RefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useControlled<T = any>(defaultValue?: T, value?: T, onChange?: (value: T) => void): [RefObject<T | undefined>, Dispatch<SetStateAction<T | undefined>>];
 /**
  * 将某个方法使用loading包裹
  */
 export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | Promise<R>, referredLoading?: boolean): [
-    MutableRefObject<boolean>,
+    RefObject<boolean>,
     (...args: A) => Promise<R>,
     Dispatch<SetStateAction<boolean>>
 ];

package/dist/cjs/utils/hooks.js

@@ -7,7 +7,6 @@ exports.useForceUpdate = useForceUpdate;
 exports.useDerivedState = useDerivedState;
 exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
-exports.useControlledSelect = useControlledSelect;
 exports.useLoading = useLoading;
 const react_1 = require("react");
 const utils_1 = require("./utils");
@@ -16,7 +15,7 @@ const utils_1 = require("./utils");
  * @param value
  */
 function usePrev(value) {
-    const v = (0, react_1.useRef)();
+    const v = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         v.current = value;
     });
@@ -52,7 +51,7 @@ function useForceUpdate() {
     }, []);
 }
 function useDerivedState(referredState, deps) {
-    const derivedState = (0, react_1.useRef)();
+    const derivedState = (0, react_1.useRef)(void 0);
     const updateState = (state) => {
         const newState = typeof state === 'function' ? state(derivedState.current) : state;
         if (derivedState.current !== newState) {
@@ -99,42 +98,6 @@ function useControlled(defaultValue, value, onChange) {
         }, [])
     ];
 }
-/**
- * 控制选中状态的通用方法
- * @param param0
- */
-function useControlledSelect(params) {
-    const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
-    const sync = useSync(params);
-    return [
-        innerValue,
-        (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
-    ];
-}
 /**
  * 将某个方法使用loading包裹
  */

package/dist/cjs/utils/keyboard.d.ts

@@ -1,8 +1,8 @@
-import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { Dispatch, RefObject, SetStateAction } from 'react';
 export type UseKeyboardReturn = {
-    verticalIndex: MutableRefObject<number>;
+    verticalIndex: RefObject<number>;
     setVerticalIndex: Dispatch<SetStateAction<number>>;
-    horizontalIndex: MutableRefObject<number>;
+    horizontalIndex: RefObject<number>;
     setHorizontalIndex: Dispatch<SetStateAction<number>>;
 };
 export type CallbackInfo = {
@@ -28,4 +28,4 @@ export declare function useKeyboard({ disabled, verticalCount, allowVertical, ho
 export declare function useEscapeClosable({ escapeClosable, close }: {
     escapeClosable?: boolean;
     close?(reason: 'escape'): void;
-}, onEscape?: (e: KeyboardEvent) => void): import("react").RefObject<HTMLDivElement>;
+}, onEscape?: (e: KeyboardEvent) => void): RefObject<HTMLDivElement | null>;

package/dist/cjs/utils/style.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from '../components/app';
+import { Theme } from '../components/theme';
 import { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../../types';
-import { StatusType } from '../components/status/status';
+import { StatusType } from '../components/status';
 /**
  * 为类名添加统一前缀，通常为内部使用
  * @param prefixName
@@ -9,7 +9,6 @@ export declare function definePrefix(prefixName: string): (...names: string[]) =
 /**
  * 统一管理类名
  * @param prefixName
- * @param names
  */
 export declare function defineClasses<T extends string>(prefixName: string): {
     root: string;
@@ -48,17 +47,17 @@ export declare function useColor(colorPropsValue: ColorPropsValue): string;
 export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
 /**
  * 生成响应式样式
+ * @param theme
  * @param callback
  */
-export declare function responsiveVariables(callback: (key: Breakpoints) => string): string;
+export declare function responsiveVariables(theme: Theme, callback: (key: Breakpoints, px: number) => string): string;
 /**
  * 将响应式的值统一转换为对象格式
- * @param value
  */
-export declare function responsiveValue(prop?: undefined): undefined;
-export declare function responsiveValue<T = number>(prop: ResponsiveProp<T>): ResponsiveValue<T>;
+export declare function toResponsiveValue(prop?: undefined): undefined;
+export declare function toResponsiveValue<T = number>(prop: ResponsiveProp<T>): ResponsiveValue<T>;
 /**
- * 使用hooks监听响应式值的变化
+ * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
  */
 export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>): NonNullable<T>;

package/dist/cjs/utils/style.js

@@ -8,12 +8,12 @@ exports.colorTransfer = colorTransfer;
 exports.useColor = useColor;
 exports.useTouchRipple = useTouchRipple;
 exports.responsiveVariables = responsiveVariables;
-exports.responsiveValue = responsiveValue;
+exports.toResponsiveValue = toResponsiveValue;
 exports.useResponsiveValue = useResponsiveValue;
 exports.useStatusColor = useStatusColor;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const app_1 = require("../components/app");
+const theme_1 = require("../components/theme");
 const utils_1 = require("./utils");
 const color_1 = tslib_1.__importDefault(require("color"));
 /**
@@ -42,7 +42,7 @@ function defineClasses(prefixName, names) {
  */
 function defineCss(callback) {
     return () => {
-        const theme = (0, app_1.useTheme)();
+        const theme = (0, theme_1.useTheme)();
         return (0, react_1.useMemo)(() => callback(theme), [theme]);
     };
 }
@@ -52,7 +52,7 @@ function defineCss(callback) {
  * @param deps
  */
 function useCss(callback, deps) {
-    const theme = (0, app_1.useTheme)();
+    const theme = (0, theme_1.useTheme)();
     return (0, react_1.useMemo)(() => callback(theme), [...deps || [], theme]);
 }
 /**
@@ -61,16 +61,20 @@ function useCss(callback, deps) {
  * @param theme
  */
 function colorTransfer(colorPropsValue, theme) {
-    const { colors, text, divider } = theme;
-    return colors[colorPropsValue]
-        || {
-            text: text.secondary,
-            disabled: text.disabled,
-            placeholder: text.placeholder,
-            inverse: text.inverse,
-            divider
-        }[colorPropsValue]
-        || colorPropsValue;
+    const { colors, text } = theme;
+    if (colorPropsValue in colors) {
+        return colors[colorPropsValue].main;
+    }
+    if (colorPropsValue.startsWith('text')) {
+        if (colorPropsValue === 'text') {
+            return text.primary;
+        }
+        const [, member] = colorPropsValue.split('.');
+        if (member in text) {
+            return text[member];
+        }
+    }
+    return colorPropsValue;
 }
 /**
  * 将useCss()与colorTransfer()方法结合封装
@@ -86,8 +90,10 @@ function useColor(colorPropsValue) {
  * @param colorPropsValue
  */
 function useTouchRipple(colorPropsValue) {
-    const theme = (0, app_1.useTheme)();
-    const outlineColor = (0, color_1.default)(useColor(colorPropsValue)).alpha(.6).string();
+    const theme = (0, theme_1.useTheme)();
+    const outlineColor = (0, react_1.useMemo)(() => {
+        return (0, color_1.default)(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
+    }, [colorPropsValue, theme]);
     return (element) => {
         typeof element.animate === 'function' && element.animate([
             {
@@ -96,7 +102,7 @@ function useTouchRipple(colorPropsValue) {
                 outlineColor
             },
             {
-                outlineWidth: theme.spacing[2] + 'px',
+                outlineWidth: '6px',
                 outlineStyle: 'solid',
                 outlineColor: 'transparent'
             },
@@ -108,36 +114,44 @@ function useTouchRipple(colorPropsValue) {
 }
 /**
  * 生成响应式样式
+ * @param theme
  * @param callback
  */
-function responsiveVariables(callback) {
+function responsiveVariables(theme, callback) {
+    const { breakpoints } = theme;
     let ret = '';
-    for (const k in app_1.breakpoints) {
-        const v = app_1.breakpoints[k];
-        ret += `
-            ${v ? `@media (min-width: ${v}px) {` : ''}
-                ${callback(k) || ''}
-            ${v ? '}' : ''}
-        `;
+    for (const k in breakpoints) {
+        const px = breakpoints[k];
+        if (px) {
+            ret += `
+                @media (min-width: ${px}px) {
+                    ${callback(k, px) || ''}
+                }                
+            `;
+        }
+        else {
+            ret += callback(k, px) || '';
+        }
     }
     return ret;
 }
-function responsiveValue(prop) {
+function toResponsiveValue(prop) {
     if ((0, utils_1.isUnset)(prop)) {
         return;
     }
     return typeof prop === 'object' ? prop : { xs: prop };
 }
 /**
- * 使用hooks监听响应式值的变化
+ * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
  */
 function useResponsiveValue(prop) {
-    const responsiveObj = responsiveValue(prop);
+    const responsiveObj = toResponsiveValue(prop);
+    const { breakpoints } = (0, theme_1.useTheme)();
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in app_1.breakpoints) {
-            if (window.innerWidth < app_1.breakpoints[k]) {
+        for (const k in breakpoints) {
+            if (window.innerWidth < breakpoints[k]) {
                 break;
             }
             if (k in responsiveObj) {
@@ -163,9 +177,12 @@ function useResponsiveValue(prop) {
  * @param status
  */
 function useStatusColor(status = 'unknown') {
-    const { colors, text } = (0, app_1.useTheme)();
-    return status === 'unknown' ? text.disabled
-        : colors[status === 'info' ? 'primary'
-            : status === 'confirm' ? 'warning'
-                : status];
+    const { colors, text } = (0, theme_1.useTheme)();
+    if (status === 'unknown') {
+        return text.disabled;
+    }
+    if (status === 'confirm') {
+        status = 'warning';
+    }
+    return colors[status].main;
 }

package/dist/cjs/utils/tree.d.ts

@@ -20,7 +20,7 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     expandedSet: Set<V>;
     setInnerExpanded: import("react").Dispatch<import("react").SetStateAction<V[]>>;
     toggleExpanded: (value: V) => void;
-    innerSearchValue: import("react").MutableRefObject<string>;
+    innerSearchValue: import("react").RefObject<string>;
     deferredSearchValue: string;
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;

package/dist/cjs/utils/utils.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, Ref, ReactNode } from 'react';
+import { RefObject, Ref, ReactNode } from 'react';
 import { Id } from '../../types';
 /**
  * 生成最简易的随机ID
@@ -61,7 +61,7 @@ export declare function nextTick(callback?: () => void): Promise<void>;
  * 克隆Ref
  * @param refs
  */
-export declare function cloneRef<T>(...refs: (Ref<T> | MutableRefObject<T | null> | undefined)[]): (r: T | null) => void;
+export declare function cloneRef<T>(...refs: (Ref<T> | RefObject<T | null> | undefined)[]): (r: T | null) => void;
 /**
  * 判断变量是否为undefined或null
  * @param it
@@ -83,7 +83,7 @@ export declare function getPromiseState(promise: Promise<any>): Promise<'pending
  * @param callback
  * @param seperator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/cjs/utils/utils.js

@@ -126,7 +126,7 @@ function mergeDeep(target, ...sources) {
         if (source && typeof source === 'object') {
             for (const k in source) {
                 const v = source[k];
-                if (v && typeof v === 'object') {
+                if (typeof v === 'object' && v) {
                     target[k] ||= Array.isArray(v) ? [] : {};
                     mergeDeep(target[k], v);
                 }

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

@@ -12,4 +12,4 @@ export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;