@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/esm/extensions/curd/curd.d.ts

@@ -2,7 +2,7 @@ import { ComponentClass, ReactNode } from 'react';
 import { CurdBaseProps, CurdColumn } from '../../components/curd';
 import { DataGridProps, RowType } from '../../components/dataGrid';
 import { FormValue } from '../../components/form';
-import { Id } from '../../../types';
+import { Id } from '../../types';
 /**
  * -------------------------------------------------------------------
  * 类修饰器

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

@@ -5,7 +5,7 @@ export type DocumentViewerBaseProps = {
     src?: string;
     filename?: string;
     onError?(e: any): void;
-    /** 是否将文件名设置成页面的标题，@default true */
+    /** 是否将文件名设置成页面的标题，默认为true */
     setDocumentTitle?: boolean;
 };
 export interface DocumentViewerProps extends DocumentViewerBaseProps {
@@ -24,7 +24,6 @@ export declare const DocumentViewer: {
 export declare function useDocumentTitle({ filename, setDocumentTitle }: Pick<DocumentViewerBaseProps, 'filename' | 'setDocumentTitle'>): void;
 /**
  * 获取文件内容
- * @param param0
  */
 export declare function useBlob({ src, onError }: DocumentViewerBaseProps): {
     blob: Blob | undefined;

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

@@ -1,5 +1,5 @@
-import { DIVProps } from '../../../types';
+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/types.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentType } from 'react';
+export type Id = string | number;
+export type Obj<T = any> = {
+    [p: Id]: T;
+};
+export type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing';
+export type Status = 'success' | 'error' | 'warning' | 'info';
+export type ColorPresets = 'primary' | 'secondary' | Status;
+export type TextColorPresets = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'inverse';
+export type ColorPropsValue = ColorPresets | 'text' | 'text.primary' | 'text.secondary' | 'text.disabled' | 'text.placeholder' | 'text.inverse' | string;
+export type Size = 'small' | 'medium' | 'large';
+export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export type BlockPlacement = CornerPlacement | 'top' | 'bottom';
+export type Placement = BlockPlacement | 'left' | 'right';
+export type DefineElement<T = Element | null | undefined> = T | (() => T);
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+export type ResponsiveValue<T = number> = {
+    [P in Breakpoints]: T;
+};
+export type ResponsiveProp<T = number> = T | ResponsiveValue<T>;
+export type DIVProps = React.JSX.IntrinsicElements['div'];
+export type OverridableProps<T> = {
+    component?: T;
+} & (T extends ComponentType<infer P> ? P : T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : {});
+export type SelectableSingleProps<T> = {
+    multiple?: false;
+    defaultValue?: T;
+    value?: T;
+    onChange?(value: T): void;
+};
+export type SelectableMultipleProps<T> = {
+    multiple: true;
+    defaultValue?: T[];
+    value?: T[];
+    onChange?(value: T[]): void;
+};
+export type SelectableProps<T> = SelectableSingleProps<T> | SelectableMultipleProps<T>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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 { 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/dataGrid.d.ts

@@ -1,4 +1,4 @@
-import { Id, Obj } from '../../types';
+import { Id, Obj } from '../types';
 import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
 /**
  * 为列添加key

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

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
-import { Obj } from '../../types';
+import { Obj } from '../types';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -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/form.d.ts

@@ -1,4 +1,4 @@
-import { Id } from '../../types';
+import { Id } from '../types';
 /**
  * 从onChange回调中获取表单字段的值
  * @param e

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 { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../../types';
-import { StatusType } from '../components/status/status';
+import { Theme } from '../components/theme';
+import { Breakpoints, ColorPropsValue, ResponsiveProp, ResponsiveValue } from '../types';
+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>;