@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useEffect, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { SvgViewer } from './svgViewer';
 import mime from 'mime';
 import { Placeholder } from '../../components/placeholder';
@@ -8,8 +8,8 @@ import { DownloadOutlined } from '@ant-design/icons';
 import { iframeStyle } from './documentViewer.style';
 import { useDerivedState, useLoading } from '../../utils';
 import { PdfViewer } from './pdfViewer';
-import { ImagePreview } from '../../components/image/imagePreview';
-export const DocumentViewer = memo(forwardRef(({ src, filename, onError, type, extension, setDocumentTitle = true }, ref) => {
+import { ImagePreview } from '../../components/image';
+export const DocumentViewer = memo(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = useMemo(() => {
         if (!src) {
             return null;
@@ -21,7 +21,7 @@ export const DocumentViewer = memo(forwardRef(({ src, filename, onError, type, e
             return mime.getType(extension);
         }
         if (filename) {
-            const [ext] = filename.match(/\.([^\\/\.])+$/) || [null];
+            const [ext] = filename.match(/\.([^\\/.])+$/) || [null];
             return ext && mime.getType(ext);
         }
         return null;
@@ -61,7 +61,7 @@ export const DocumentViewer = memo(forwardRef(({ src, filename, onError, type, e
         return _jsx(ImagePreview, { src: src, open: true, showClose: false });
     }
     return empty;
-}));
+});
 DocumentViewer.Svg = SvgViewer;
 DocumentViewer.Pdf = PdfViewer;
 /**
@@ -76,7 +76,6 @@ export function useDocumentTitle({ filename, setDocumentTitle }) {
 }
 /**
  * 获取文件内容
- * @param param0
  */
 export function useBlob({ src, onError }) {
     // src改变会清空data

package/dist/esm/extensions/documentViewer/documentViewer.style.js

@@ -28,7 +28,7 @@ export const svgStyle = defineCss(({ spacing, background, divider, text, colors,
 
     .${classes.svgToolbar} {
         padding: ${spacing[3]}px ${spacing[8]}px;
-        background: ${background.card};
+        background: ${background.content};
         border-bottom: 1px solid ${divider};
         display: flex;
         align-items: center;
@@ -41,7 +41,7 @@ export const svgStyle = defineCss(({ spacing, background, divider, text, colors,
             color: ${text.primary};
 
             .${classes.svgIcon} {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
         }
 

package/dist/esm/extensions/documentViewer/pdfViewer.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { DocumentViewerBaseProps } from './documentViewer';
-export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<JSX.IntrinsicElements['iframe'], 'onError'> {
+export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<React.JSX.IntrinsicElements['iframe'], 'onError'> {
 }
-export declare const PdfViewer: import("react").MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const PdfViewer: React.MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/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/esm/extensions/documentViewer/svgViewer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useMemo, useRef, useState } from 'react';
+import { memo, useMemo, useRef, useState } from 'react';
 import { classes, svgStyle } from './documentViewer.style';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { classnames } from '../../utils';
@@ -8,19 +8,19 @@ import { Button } from '../../components/button';
 import { Tooltip } from '../../components/tooltip';
 import { Divider } from '../../components/divider';
 import { Switch } from '../../components/switch';
-import { ThemeProvider, useTheme } from '../../components/app';
+import { ThemeProvider, useTheme } from '../../components/theme';
 import { Loading } from '../../components/loading';
 import { useBlob, useDocumentTitle } from './documentViewer';
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
 };
-export const SvgViewer = memo(forwardRef((props, ref) => {
-    return (_jsx(ThemeProvider, { children: _jsx(SvgViewerContent, { ...props, ref: ref }) }));
-}));
-const SvgViewerContent = forwardRef(({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
+export const SvgViewer = memo((props) => {
+    return (_jsx(ThemeProvider, { children: _jsx(SvgViewerContent, { ...props }) }));
+});
+function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
 // 从DocumentViewerBaseProps继承来的属性
-src, filename, onError, setDocumentTitle, ...props }, ref) => {
+src, filename, onError, setDocumentTitle, ...props }) {
     /**
      * ---------------------------------------------------------------
      * 切换主题
@@ -66,7 +66,7 @@ src, filename, onError, setDocumentTitle, ...props }, ref) => {
     const objectOnLoad = () => {
         transformWrapperRef.current.centerView();
     };
-    return (_jsxs(Loading, { ...props, ref: ref, css: svgStyle, className: classnames(classes.svgViewer, props.className), loading: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(BranchesOutlined, { className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) }), themeSwitchable &&
+    return (_jsxs(Loading, { ...props, css: svgStyle, className: classnames(classes.svgViewer, props.className), loading: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(BranchesOutlined, { className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) }), themeSwitchable &&
                                 _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Switch, { checkedLabel: _jsx(SunFilled, {}), unCheckedLabel: _jsx(MoonFilled, {}), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
                                 _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: _jsx(TransformComponent, { wrapperClass: classes.svgContainer, contentClass: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
-});
+}

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

@@ -3,7 +3,7 @@ import { memo, useEffect } from 'react';
 import { useDocumentTitle } from './documentViewer';
 import { SkeletonCard } from '../../components/skeleton';
 import { useDerivedState, useLoading } from '../../utils';
-import { TextFormatter } from '../textFormatter/textFormatter';
+import { TextFormatter } from '../textFormatter';
 export const TextViewer = memo(({ src, filename, onError, setDocumentTitle, ...props }) => {
     useDocumentTitle({ filename, setDocumentTitle });
     const [text, setText] = useDerivedState(void 0, [src]);

package/dist/esm/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/esm/extensions/textFormatter/textFormatter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './textFormatter.style';
 import { classnames } from '../../utils';
 import MarkdownIt from 'markdown-it';
@@ -28,6 +28,6 @@ const md = new MarkdownIt({
 });
 md.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
 md.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
-export const TextFormatter = memo(forwardRef(({ text, ...props }, ref) => {
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
-}));
+export const TextFormatter = memo(({ text, ...props }) => {
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
+});

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

@@ -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/esm/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/esm/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/esm/utils/dnd.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { useSync } from './hooks';
 import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
-import { useAppContext } from '../components/app';
+import { useTheme } from '../components/theme';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -17,6 +17,7 @@ export function useDndSensors() {
  * <DndContext>组件通用的onDragEnd方法
  * @param e
  * @param prevState 传入需要排序的数组
+ * @param primaryKey 索引用的主键
  */
 export function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const { active, over } = e;
@@ -29,10 +30,10 @@ export function onDndDragEnd(e, prevState, primaryKey = 'id') {
     return arrayMove(prevState, oldIndex, newIndex);
 }
 export function useDraggableHandle(options = {}) {
-    const { zoom } = useAppContext();
+    const { zoom } = useTheme();
     options.zoom ||= zoom;
     const syncOptions = useSync(options);
-    const preventDefaultCallback = useRef();
+    const preventDefaultCallback = useRef(void 0);
     const onTouchStart = useCallback(() => {
         if (syncOptions.current.disabled || !syncOptions.current.disableNativeTouchMove) {
             return;
@@ -43,7 +44,7 @@ export function useDraggableHandle(options = {}) {
     }, []);
     const startTime = useRef(0);
     const startPosition = useRef([0, 0]);
-    const delay = useRef();
+    const delay = useRef(void 0);
     const onPointerDown = useCallback((e) => {
         if (syncOptions.current.disabled) {
             return;
@@ -69,8 +70,8 @@ export 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/esm/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/esm/utils/hooks.js

@@ -1,11 +1,11 @@
 import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { isSelected, toArray, isPromise, getPromiseState } from './utils';
+import { isPromise, getPromiseState } from './utils';
 /**
  * 获取渲染前的值
  * @param value
  */
 export function usePrev(value) {
-    const v = useRef();
+    const v = useRef(null);
     useEffect(() => {
         v.current = value;
     });
@@ -41,7 +41,7 @@ export function useForceUpdate() {
     }, []);
 }
 export function useDerivedState(referredState, deps) {
-    const derivedState = useRef();
+    const derivedState = useRef(void 0);
     const updateState = (state) => {
         const newState = typeof state === 'function' ? state(derivedState.current) : state;
         if (derivedState.current !== newState) {
@@ -88,42 +88,6 @@ export function useControlled(defaultValue, value, onChange) {
         }, [])
     ];
 }
-/**
- * 控制选中状态的通用方法
- * @param param0
- */
-export function useControlledSelect(params) {
-    const [innerValue, setInnerValue] = useControlled(params.defaultValue, params.value, params.onChange);
-    const sync = useSync(params);
-    return [
-        innerValue,
-        useCallback(value => {
-            if (sync.current.disabled) {
-                return;
-            }
-            const currentSelected = isSelected(value, innerValue.current);
-            if (sync.current.multiple) {
-                setInnerValue((o) => {
-                    o = 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/esm/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/esm/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/esm/utils/style.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { breakpoints, useTheme } from '../components/app';
+import { useTheme } from '../components/theme';
 import { humpToSegmented, isUnset } from './utils';
 import Color from 'color';
 /**
@@ -47,16 +47,20 @@ export function useCss(callback, deps) {
  * @param theme
  */
 export 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()方法结合封装
@@ -73,7 +77,9 @@ export function useColor(colorPropsValue) {
  */
 export function useTouchRipple(colorPropsValue) {
     const theme = useTheme();
-    const outlineColor = Color(useColor(colorPropsValue)).alpha(.6).string();
+    const outlineColor = useMemo(() => {
+        return Color(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
+    }, [colorPropsValue, theme]);
     return (element) => {
         typeof element.animate === 'function' && element.animate([
             {
@@ -82,7 +88,7 @@ export function useTouchRipple(colorPropsValue) {
                 outlineColor
             },
             {
-                outlineWidth: theme.spacing[2] + 'px',
+                outlineWidth: '6px',
                 outlineStyle: 'solid',
                 outlineColor: 'transparent'
             },
@@ -94,32 +100,40 @@ export function useTouchRipple(colorPropsValue) {
 }
 /**
  * 生成响应式样式
+ * @param theme
  * @param callback
  */
-export function responsiveVariables(callback) {
+export function responsiveVariables(theme, callback) {
+    const { breakpoints } = theme;
     let ret = '';
     for (const k in breakpoints) {
-        const v = breakpoints[k];
-        ret += `
-            ${v ? `@media (min-width: ${v}px) {` : ''}
-                ${callback(k) || ''}
-            ${v ? '}' : ''}
-        `;
+        const px = breakpoints[k];
+        if (px) {
+            ret += `
+                @media (min-width: ${px}px) {
+                    ${callback(k, px) || ''}
+                }                
+            `;
+        }
+        else {
+            ret += callback(k, px) || '';
+        }
     }
     return ret;
 }
-export function responsiveValue(prop) {
+export function toResponsiveValue(prop) {
     if (isUnset(prop)) {
         return;
     }
     return typeof prop === 'object' ? prop : { xs: prop };
 }
 /**
- * 使用hooks监听响应式值的变化
+ * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
  */
 export function useResponsiveValue(prop) {
-    const responsiveObj = responsiveValue(prop);
+    const responsiveObj = toResponsiveValue(prop);
+    const { breakpoints } = useTheme();
     const fn = () => {
         let maxBreakpoint = 'xs';
         for (const k in breakpoints) {
@@ -150,8 +164,11 @@ export function useResponsiveValue(prop) {
  */
 export function useStatusColor(status = 'unknown') {
     const { colors, text } = useTheme();
-    return status === 'unknown' ? text.disabled
-        : colors[status === 'info' ? 'primary'
-            : status === 'confirm' ? 'warning'
-                : status];
+    if (status === 'unknown') {
+        return text.disabled;
+    }
+    if (status === 'confirm') {
+        status = 'warning';
+    }
+    return colors[status].main;
 }

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