@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/cjs/components/image/imagePreview.js

@@ -10,7 +10,7 @@ const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 const tooltip_1 = require("../tooltip");
-exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
+exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }) => {
     const srcArr = (0, utils_1.toArray)(src);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
@@ -36,7 +36,7 @@ exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], de
         size: 'large',
         color: 'text'
     };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: ref, css: imagePreview_style_1.style, className: (0, utils_1.classnames)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: imagePreview_style_1.style, className: (0, utils_1.classnames)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
             ...props.maskProps,
             children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [renderControl, showRotate &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, 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, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) })] }), showZoom &&
@@ -52,4 +52,4 @@ exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], de
             }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: imagePreview_style_1.classes.imageWrapper, contentClass: imagePreview_style_1.classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
                 }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
-}));
+});

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

@@ -1,9 +1,9 @@
-import { Ref } from 'react';
+import React, { Ref } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface InputProps extends Omit<InputBaseProps<'input'>, 'children'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     /** 是否根据内容自动调整宽度 */
     widthAdaptable?: boolean;
 }
-export declare const Input: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Input: React.MemoExoticComponent<({ inputProps, inputRef, widthAdaptable, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/input/input.js

@@ -6,9 +6,9 @@ const utils_1 = require("../../utils");
 const input_style_1 = require("./input.style");
 const react_1 = require("react");
 const inputBase_1 = require("../inputBase");
-exports.Input = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, widthAdaptable, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: input_style_1.style, className: (0, utils_1.classnames)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
+exports.Input = (0, react_1.memo)(({ inputProps, inputRef, widthAdaptable, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: input_style_1.style, className: (0, utils_1.classnames)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), className: (0, utils_1.classnames)(input_style_1.classes.input, inputProps?.className) }), widthAdaptable &&
                         (0, jsx_runtime_1.jsx)("span", { className: input_style_1.classes.adaptable, children: rest.value })] }));
         } }));
-}));
+});

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { ColorPropsValue, DIVProps, Size } from '../../../types';
 export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIVProps, 'prefix' | 'onChange' | 'children'> {
     variant?: 'outlined' | 'underlined' | 'plain';
@@ -10,20 +10,18 @@ export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIV
     clearable?: boolean;
     onClear?(): void;
     loading?: boolean;
-    type?: T extends 'input' ? JSX.IntrinsicElements[T]['type'] : never;
-    min?: T extends 'input' ? JSX.IntrinsicElements[T]['min'] : never;
-    max?: T extends 'input' ? JSX.IntrinsicElements[T]['max'] : never;
-    step?: T extends 'input' ? JSX.IntrinsicElements[T]['step'] : never;
+    type?: T extends 'input' ? React.JSX.IntrinsicElements[T]['type'] : never;
+    min?: T extends 'input' ? React.JSX.IntrinsicElements[T]['min'] : never;
+    max?: T extends 'input' ? React.JSX.IntrinsicElements[T]['max'] : never;
+    step?: T extends 'input' ? React.JSX.IntrinsicElements[T]['step'] : never;
     precision?: T extends 'input' ? number : never;
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
-    autoFocus?: JSX.IntrinsicElements[T]['autoFocus'];
-    defaultValue?: JSX.IntrinsicElements[T]['defaultValue'];
-    value?: JSX.IntrinsicElements[T]['value'];
-    onChange?: JSX.IntrinsicElements[T]['onChange'];
-    children(childProps: Omit<JSX.IntrinsicElements[T], 'ref'> & {
-        ref?: Ref<T extends 'textarea' ? HTMLTextAreaElement : HTMLInputElement>;
-    }): ReactNode;
+    autoFocus?: React.JSX.IntrinsicElements[T]['autoFocus'];
+    defaultValue?: React.JSX.IntrinsicElements[T]['defaultValue'];
+    value?: React.JSX.IntrinsicElements[T]['value'];
+    onChange?: React.JSX.IntrinsicElements[T]['onChange'];
+    children(childProps: React.JSX.IntrinsicElements[T]): ReactNode;
 }
 export declare const InputBase: <T extends "input" | "textarea">(props: InputBaseProps<T>) => ReactElement;

package/dist/cjs/components/inputBase/inputBase.js

@@ -5,14 +5,14 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const inputBase_style_1 = require("./inputBase.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const loadingIndicator_1 = require("../loadingIndicator");
-exports.InputBase = (0, react_1.forwardRef)(({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+exports.InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
 // 以下属性传递给<input />
-min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const innerInputRef = (0, react_1.useRef)(null);
     const wrapClickHandler = (e) => {
@@ -46,7 +46,7 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
             changeHandler(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, inputBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(inputBase_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, inputBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(inputBase_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
         // 防止点击wrap时，输入框失去焦点
         onPointerDown: e => {
             props.onPointerDown?.(e);

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

@@ -21,7 +21,7 @@ function useStyle({ color }) {
         position: relative;
 
         &[data-variant=outlined] {
-            background-color: ${background.card};
+            background-color: ${background.content};
         }
 
         &[data-size=medium] {

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

@@ -1,14 +1,5 @@
-import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps } from '../../../types';
-import { LoadingIndicatorProps } from '../loadingIndicator';
-import { ProgressProps } from '../progress';
-export interface LoadingProps extends DIVProps {
-    loading?: boolean;
-    text?: ReactNode;
-    /** 传入progress字段会显示进度条 */
-    progress?: number;
-    color?: ColorPropsValue;
-    indicatorProps?: LoadingIndicatorProps;
-    progressProps?: ProgressProps;
+import { DIVProps } from '../../../types';
+import { LoadingMaskProps } from '../loadingMask';
+export interface LoadingProps extends Omit<LoadingMaskProps, 'children'>, DIVProps {
 }
-export declare const Loading: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Loading: import("react").MemoExoticComponent<({ open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/loading/loading.js

@@ -5,20 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const loading_style_1 = require("./loading.style");
-const loadingIndicator_1 = require("../loadingIndicator");
-const transitionBase_1 = require("../transitionBase");
-const progress_1 = require("../progress");
-exports.Loading = (0, react_1.memo)((0, react_1.forwardRef)(({ loading = false, text = '加载中...', progress, indicatorProps, progressProps, color, ...props }, ref) => {
-    const [showMask, setShowMask] = (0, utils_1.useDerivedState)((prevLoading) => {
-        // 只有第一次需要原样返回loading，之后showMask不会立即变为false，交由onTransitionEnd()处理
-        return typeof prevLoading === 'undefined' ? loading : true;
-    }, [loading]);
-    const onExited = () => {
-        // 动画结束后，loading为false才需要改变showMask
-        setShowMask(false);
-    };
-    const showProgress = typeof progress === 'number';
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: loading_style_1.style, className: (0, utils_1.classnames)(loading_style_1.classes.root, props.className), "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.container, children: props.children }), (loading || showMask.current) &&
-                (0, jsx_runtime_1.jsxs)(transitionBase_1.Fade, { in: loading, className: loading_style_1.classes.mask, onExited: onExited, children: [(0, jsx_runtime_1.jsxs)("div", { className: loading_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.text, children: text })] }), showProgress &&
-                            (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: loading_style_1.classes.progress, value: progress, ...progressProps })] })] }));
-}));
+const loadingMask_1 = require("../loadingMask");
+exports.Loading = (0, react_1.memo)(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: loading_style_1.style, className: (0, utils_1.classnames)(loading_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.container, children: props.children }), (0, jsx_runtime_1.jsx)(loadingMask_1.LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: loading_style_1.classes.mask })] }));
+});

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

@@ -1,10 +1,7 @@
 export declare const classes: {
-    text: string;
     mask: string;
     container: string;
-    progress: string;
-    indicator: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -1,71 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
-const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const color_1 = tslib_1.__importDefault(require("color"));
-const progress_style_1 = require("../progress/progress.style");
 exports.classes = (0, utils_1.defineClasses)('loading', [
     'container',
-    'mask',
-    'indicator',
-    'text',
-    'progress'
+    'mask'
 ]);
-exports.style = (0, utils_1.defineCss)(({ background, spacing, text }) => {
-    const maskColor = (0, color_1.default)(background.card).alpha(.8).string();
-    return (0, react_1.css) `
-        & {
-            width: 100%;
-            height: 100%;
-            flex: 1;
-            position: relative;
-            z-index: 0;
-        }
+exports.style = (0, react_1.css) `
+    & {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        position: relative;
+        z-index: 0;
+    }
 
-        .${exports.classes.container} {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            z-index: 0;
-        }
+    .${exports.classes.container} {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        z-index: 0;
+    }
 
-        .${exports.classes.mask} {
-            position: absolute;
-            inset: 0;
-            z-index: 1;
-            background-color: ${maskColor};
-            display: flex;
-            flex-direction: column;
-            gap: ${spacing[3]}px;
-            align-items: center;
-            justify-content: center;
 
-            .${exports.classes.indicator} {
-                display: flex;
-                gap: ${spacing[2]}px;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-
-                .${exports.classes.text} {
-                    color: ${text.secondary};
-                }
-            }
-
-            .${exports.classes.progress} {
-                width: calc(100% - 24px);
-                max-width: 300px;
-
-                .${progress_style_1.classes.track} {
-                    height: 4px;
-                }
-            }
-        }
-
-        &[data-show-progress=true] .${exports.classes.indicator} {
-            flex-direction: row;
-        }
-    `;
-});
+    .${exports.classes.mask} {
+        z-index: 1;
+    }
+`;

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

@@ -4,4 +4,4 @@ export interface LoadingIndicatorProps extends DIVProps {
     width?: number;
     color?: ColorPropsValue;
 }
-export declare const LoadingIndicator: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const LoadingIndicator: import("react").MemoExoticComponent<({ size, width, color, ...props }: LoadingIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/loadingIndicator/loadingIndicator.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../../utils");
 const loadingIndicator_style_1 = require("./loadingIndicator.style");
 const react_1 = require("react");
-exports.LoadingIndicator = (0, react_1.memo)((0, react_1.forwardRef)(({ size, width = 2, color = 'primary', ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, loadingIndicator_style_1.useStyle)({ color, width }), className: (0, utils_1.classnames)(loadingIndicator_style_1.classes.root, props.className), style: {
+exports.LoadingIndicator = (0, react_1.memo)(({ size, width = 2, color = 'primary', ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, loadingIndicator_style_1.useStyle)({ color, width }), className: (0, utils_1.classnames)(loadingIndicator_style_1.classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style
         }, children: (0, jsx_runtime_1.jsx)("div", { className: loadingIndicator_style_1.classes.indicator }) }));
-}));
+});

package/dist/cjs/components/loadingMask/index.d.ts

@@ -0,0 +1 @@
+export * from './loadingMask';

package/dist/cjs/components/loadingMask/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./loadingMask"), exports);

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

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+import { LoadingIndicatorProps } from '../loadingIndicator';
+import { ProgressProps } from '../progress';
+import { ColorPropsValue } from '../../../types';
+import { BackdropProps } from '../backdrop';
+export interface LoadingMaskProps<T extends HTMLElement = HTMLElement> extends BackdropProps<T> {
+    text?: ReactNode;
+    /** 传入progress字段会显示进度条 */
+    progress?: number;
+    color?: ColorPropsValue;
+    indicatorProps?: LoadingIndicatorProps;
+    progressProps?: ProgressProps;
+}
+export declare const LoadingMask: <T extends HTMLElement = HTMLElement>(props: LoadingMaskProps<T>) => ReactElement;

package/dist/cjs/components/loadingMask/loadingMask.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingMask = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const loadingMask_style_1 = require("./loadingMask.style");
+const loadingIndicator_1 = require("../loadingIndicator");
+const progress_1 = require("../progress");
+const utils_1 = require("../../utils");
+const backdrop_1 = require("../backdrop");
+exports.LoadingMask = (0, react_1.memo)(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    const [visible, setVisible] = (0, utils_1.useDerivedState)((prevLoading) => {
+        // 只有第一次需要原样返回loading，之后visible不会立即变为false，交由onTransitionEnd()处理
+        return typeof prevLoading === 'undefined' ? open : true;
+    }, [open]);
+    const onExited = () => {
+        // 动画结束后，loading为false才需要改变visible
+        setVisible(false);
+    };
+    const showProgress = typeof progress === 'number';
+    return open || visible.current
+        ? (0, jsx_runtime_1.jsxs)(backdrop_1.Backdrop, { variant: "light", ...props, css: loadingMask_style_1.style, open: open, className: (0, utils_1.classnames)(loadingMask_style_1.classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsxs)("div", { className: loadingMask_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loadingMask_style_1.classes.text, children: text })] }), showProgress &&
+                    (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: loadingMask_style_1.classes.progress, value: progress, ...progressProps })] })
+        : null;
+});

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

@@ -0,0 +1,8 @@
+export declare const classes: {
+    text: string;
+    progress: string;
+    indicator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+const progress_style_1 = require("../progress/progress.style");
+exports.classes = (0, utils_1.defineClasses)('loading-mask', [
+    'indicator',
+    'text',
+    'progress'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
+    .${exports.classes.indicator} {
+        display: flex;
+        gap: ${spacing[2]}px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .${exports.classes.text} {
+            color: ${text.secondary};
+        }
+    }
+
+    .${exports.classes.progress} {
+        width: calc(100% - 24px);
+        max-width: 300px;
+
+        .${progress_style_1.classes.track} {
+            height: 4px;
+        }
+    }
+
+    &[data-show-progress=true] .${exports.classes.indicator} {
+        flex-direction: row;
+    }
+`);

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj, Size } from '../../../types';
+import { DIVProps, Id, Obj, SelectableProps, Size } from '../../../types';
 import { MenuItemProps } from '../menuItem';
 export type ForwardProps = {
     size?: Size;
@@ -19,19 +19,7 @@ interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends Forwa
     expanded?: V[];
     onExpandedChange?(expanded: V[], itemValue: V, isExpand: boolean): void;
 }
-interface MenuSingleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-interface MenuMultipleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuSingleProps<I, V> | MenuMultipleProps<I, V>;
+export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuBaseProps<I, V> & SelectableProps<V>;
 interface MenuContext<V extends Id = Id> extends ForwardProps {
     inMenu?: boolean;
     expandedSet?: Set<V>;
@@ -40,6 +28,7 @@ interface MenuContext<V extends Id = Id> extends ForwardProps {
     selected?: V | V[];
     toggleSelected?(key: V): void;
 }
+declare const MenuContext: import("react").Context<MenuContext<any>>;
 export declare function useMenuContext<V extends Id = Id>(): MenuContext<V>;
 export declare const Menu: <I extends ItemPropType, V extends Id = Id>(props: MenuProps<I, V>) => ReactElement;
 export {};

package/dist/cjs/components/menu/menu.js

@@ -7,16 +7,17 @@ const react_1 = require("react");
 const menu_style_1 = require("./menu.style");
 const menuItem_1 = require("../menuItem");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
-const menuContext = (0, react_1.createContext)({});
+const theme_1 = require("../theme");
+const selectionContext_1 = require("../selectionContext");
+const MenuContext = (0, react_1.createContext)({});
 function useMenuContext() {
-    const theme = (0, app_1.useTheme)();
-    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_1.useContext)(menuContext);
+    const theme = (0, theme_1.useTheme)();
+    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_1.useContext)(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-exports.Menu = (0, react_1.memo)((0, react_1.forwardRef)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+exports.Menu = (0, react_1.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
 // 以下属性传递给<MenuItem />
-size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
+size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
     const expandedSet = (0, react_1.useMemo)(() => {
         return new Set(innerExpanded.current);
@@ -28,11 +29,11 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
             return newExpanded;
         });
     };
-    const [innerValue, toggleSelected] = (0, utils_1.useControlledSelect)({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
         return items?.map((p, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(menuContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(MenuContext, { value: (0, react_1.useMemo)(() => ({
                 inMenu: true,
                 expandedSet, setExpanded, multiple, selected: innerValue.current, toggleSelected,
                 size, showCheckbox, ellipsis, indent
@@ -40,4 +41,4 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
                 expandedSet, multiple, innerValue.current,
                 size, showCheckbox, ellipsis, indent
             ]), children: props.children ?? renderItems(items) }) }));
-}));
+});

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

@@ -6,7 +6,7 @@ export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
     size?: Size;
     color?: ColorPropsValue;
     /**
-     * 是否强调颜色，@default false
+     * 是否强调颜色，默认为`false`
      * 如果设置有{@link color}，建议同时设置emphasized为true
      */
     emphasized?: boolean;
@@ -29,4 +29,4 @@ export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const MenuItem: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/menuItem/menuItem.js

@@ -10,7 +10,7 @@ const popper_1 = require("../popper");
 const icons_1 = require("@ant-design/icons");
 const menu_1 = require("../menu");
 const transitionBase_1 = require("../transitionBase");
-exports.MenuItem = (0, react_1.memo)((0, react_1.forwardRef)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }, ref) => {
+exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = (0, menu_1.useMenuContext)();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;
@@ -49,7 +49,7 @@ exports.MenuItem = (0, react_1.memo)((0, react_1.forwardRef)(({ value, size, col
         }
         return expandIcon;
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, menuItem_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(menuItem_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, menuItem_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(menuItem_style_1.classes.root, props.className), style: {
                     paddingLeft: _level > 0
                         ? _level * indent + menuItem_style_1.paddingHorizontal[size] - menuItem_style_1.menuListPadding
                         : void 0,
@@ -63,4 +63,4 @@ exports.MenuItem = (0, react_1.memo)((0, react_1.forwardRef)(({ value, size, col
                                 _level: _level + 1
                             })
                             : child) }) })] }));
-}));
+});

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

@@ -1,12 +1,12 @@
 import { MenuItemProps } from './menuItem';
 export declare const classes: {
-    children: string;
     content: string;
+    children: string;
     prefix: string;
     checkbox: string;
     suffix: string;
-    childrenWrap: string;
     arrow: string;
+    childrenWrap: string;
 } & {
     root: string;
 };

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

@@ -3,4 +3,4 @@ import { TransitionBaseProps } from '../transitionBase';
 export interface ModalProps extends OverlayBaseProps {
     modalProps?: TransitionBaseProps<HTMLDivElement>;
 }
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Modal({ modalProps, ...props }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/modal/modal.js

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
+exports.Modal = Modal;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const overlayBase_1 = require("../overlayBase");
 const modal_style_1 = require("./modal.style");
 const utils_1 = require("../../utils");
 const transitionBase_1 = require("../transitionBase");
-const app_1 = require("../app");
-exports.Modal = (0, react_1.forwardRef)(({ modalProps, ...props }, ref) => {
-    const { zoom } = (0, app_1.useAppContext)();
-    const transformOrigin = (0, react_1.useRef)();
-    (0, react_1.useMemo)(() => {
+const theme_1 = require("../theme");
+function Modal({ modalProps, ...props }) {
+    const { zoom } = (0, theme_1.useTheme)();
+    const transformOrigin = (0, react_1.useMemo)(() => {
         if (props.open && typeof event === 'object' && 'clientX' in event && 'clientY' in event) {
-            transformOrigin.current = `${event.clientX / zoom}px ${event.clientY / zoom}px`;
+            return `${event.clientX / zoom}px ${event.clientY / zoom}px`;
         }
+        return;
     }, [props.open, zoom]);
-    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: ref, css: modal_style_1.style, className: (0, utils_1.classnames)(modal_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { timeout: overlayBase_1.overlayBaseTransitionDuration, ...modalProps, in: props.open, className: (0, utils_1.classnames)(modal_style_1.classes.modal, modalProps?.className), style: {
-                transformOrigin: transformOrigin.current,
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: modal_style_1.style, className: (0, utils_1.classnames)(modal_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { timeout: overlayBase_1.overlayBaseTransitionDuration, ...modalProps, in: props.open, className: (0, utils_1.classnames)(modal_style_1.classes.modal, modalProps?.className), style: {
+                transformOrigin,
                 ...modalProps?.style
             }, children: props.children }) }));
-});
+}

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { MenuItemProps } from '../menuItem';
 import { LoadingProps } from '../loading';
 import { OptionType } from '../selectionContext';
@@ -10,11 +10,11 @@ export type OptionsBaseSharedProps<O extends MenuOptionType<V>, V extends Id = I
     loading?: boolean;
     options?: O[];
     children?: ReactNode;
-    /** 指定options中用于当作label的键, @default "label" */
+    /** 指定options中用于当作label的键, 默认为`"label"` */
     labelKey?: keyof O;
-    /** 指定options中的主键名, @default "value" */
+    /** 指定options中的主键名, 默认为`"value"` */
     primaryKey?: keyof O;
-    /** 指定options中用于当作searchToken的键, @default "searchToken" */
+    /** 指定options中用于当作searchToken的键, 默认为`"searchToken"` */
     searchTokenKey?: keyof O;
     /** 遍历选项时会触发该方法，若返回true，表示该选项满足筛选条件，反之会将该选项排除 */
     filterPredicate?(searchValue: string, option: O, index: number): any;

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -55,7 +55,8 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
         onEnter({ verticalIndex }, e) {
             const opt = filteredOptions[verticalIndex];
             if ((0, react_1.isValidElement)(opt)) {
-                onToggleSelected?.(opt.props.value, e);
+                const { props } = opt;
+                onToggleSelected?.(props.value, e);
             }
             else if (typeof opt === 'object' && opt) {
                 onToggleSelected?.(opt[primaryKey], e);