@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/form/formItem.js

@@ -8,46 +8,54 @@ const utils_1 = require("../../utils");
 const descriptions_1 = require("../descriptions");
 const form_style_1 = require("./form.style");
 const transitionBase_1 = require("../transitionBase");
-const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, ...props }) => {
-    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
+const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, _fieldValue, ...props }) => {
+    const context = (0, form_1.useFormStyleContext)();
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const { formValue, setFieldValue } = (0, form_1.useFormValueContext)();
+    const { itemsContainer, formRef } = (0, form_1.useFormContext)();
     const shouldValidate = (0, react_1.useRef)(false);
+    const isTouched = (0, react_1.useRef)(false);
     const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
+    const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
+    const stringField = !(0, utils_1.isUnset)(field) ? (0, utils_1.stringifyField)(field) : void 0;
     /**
      * --------------------------------------------------------------------
      * 重置与初始化
      */
-    const isTouched = (0, react_1.useRef)(false);
-    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
-    const reset = (value = formValue) => {
+    const reset = (currentFormValue = formValue, initialFormValue) => {
+        // formRef的resetForm()方法会传入新的formValue，其他情况使用当前的formValue
         shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            (0, utils_1.queryDeep)(value, field, () => initialValue);
+        if (!(0, utils_1.isUnset)(field) && currentFormValue) {
+            if (typeof initialValue !== 'undefined') {
+                (0, utils_1.queryDeep)(currentFormValue, field, () => initialValue);
+            }
+            else if (typeof initialFormValue !== 'undefined') {
+                const initialFieldValue = (0, utils_1.queryDeep)(initialFormValue, field);
+                (0, utils_1.queryDeep)(currentFormValue, field, initialFieldValue);
+            }
         }
-        innerError.current && setInnerError(false);
+        setInnerError(false);
     };
-    (0, react_1.useMemo)(reset, []);
+    (0, react_1.useMemo)(reset, [stringField]);
     /**
      * --------------------------------------------------------------------
      * 字段值
      */
     const fieldValue = (0, react_1.useMemo)(() => {
-        if (typeof field !== 'undefined' && formValue) {
+        if (typeof _fieldValue !== 'undefined') {
+            return _fieldValue;
+        }
+        if (!(0, utils_1.isUnset)(field) && formValue) {
             return (0, utils_1.queryDeep)(formValue, field);
         }
-    }, [formValue, field]);
-    const [randomKey] = (0, utils_1.useDerivedState)(prev => {
-        // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
-    }, [fieldValue]);
+    }, [formValue, field, _fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
      */
     const rulesArr = (0, utils_1.toArray)(rules);
-    const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
     const validate = async () => {
         if (error) {
             return false;
@@ -56,7 +64,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
         const promises = [];
         let invalid = false;
         rulesArr?.some(r => {
-            if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
+            if ((r.required && ((0, utils_1.isUnset)(fieldValue) || fieldValue === '')) ||
                 (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
                 setInnerError(true);
                 setInnerHelperText(r.message || defaultMessage);
@@ -86,36 +94,38 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     };
     /**
      * --------------------------------------------------------------------
-     * 依赖更新自动校验
+     * 自动校验与依赖更新
      */
     const dependencyValues = (0, react_1.useMemo)(() => {
         return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
     }, [formValue, ...dependencies || []]);
     (0, react_1.useMemo)(() => {
-        // 跳过首次渲染
-        shouldValidate.current && validate().then();
-        shouldValidate.current = true;
+        if (!shouldValidate.current) {
+            // 跳过首次渲染
+            shouldValidate.current = true;
+            return;
+        }
+        validate().then();
     }, [fieldValue, ...dependencyValues || []]);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef
      */
-    const formItemRef = (0, react_1.useRef)(null);
+    const formItemRef = (0, react_1.useRef)(void 0);
     formItemRef.current = {
         validate,
         reset,
         error: innerError.current ? { message: innerHelperText.current } : null,
-        isTouched: isTouched.current
+        isTouched: () => isTouched.current
     };
     (0, react_1.useImperativeHandle)(ref, () => formItemRef.current);
     (0, react_1.useEffect)(() => {
-        if (typeof field === 'undefined' || !itemsContainer) {
+        if (typeof stringField === 'undefined' || !itemsContainer) {
             return;
         }
-        const fieldStr = (0, utils_1.stringifyField)(field);
-        itemsContainer.set(fieldStr, formItemRef.current);
+        itemsContainer.set(stringField, formItemRef.current);
         return () => {
-            itemsContainer.delete(fieldStr);
+            itemsContainer.delete(stringField);
         };
     });
     /**
@@ -125,9 +135,13 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     const isRequired = (0, react_1.useMemo)(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
+    const [randomKey] = (0, utils_1.useDerivedState)(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return !prev || typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
+    }, [fieldValue]);
     const renderedChildren = (0, react_1.useMemo)(() => {
         if (typeof children === 'function') {
-            return children(typeof field !== 'undefined'
+            return children(!(0, utils_1.isUnset)(field)
                 ? {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: fieldValue }
@@ -139,14 +153,14 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
                 }
                 : {}, {
                 ...size && { size },
-                ...innerError.current ? { color: 'error' } : {}
+                ...innerError.current && { color: 'error' }
             }, randomKey.current);
         }
         if ((0, react_1.isValidElement)(children)) {
             const { props: childProps } = children;
             return (0, react_1.cloneElement)(children, {
-                key: randomKey.current,
-                ...typeof field !== 'undefined' && {
+                key: children.key ?? randomKey.current,
+                ...!(0, utils_1.isUnset)(field) && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }
                         : { value: childProps.value ?? fieldValue },
@@ -161,11 +175,11 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
             });
         }
         return children;
-    }, [children, innerError.current, field, size, randomKey.current, fieldValue]);
+    }, [children, fieldValue, size, innerError.current, randomKey.current]);
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: !!label &&
+    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { ...props, ref: wrapperRef, className: (0, utils_1.clsx)(form_style_1.classes.item, props.className), label: !!label &&
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
                         (0, jsx_runtime_1.jsx)("span", { className: form_style_1.classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerError.current || !!helperText, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
 };

package/dist/cjs/components/form/formRelatable.js

@@ -5,7 +5,8 @@ const react_1 = require("react");
 const form_1 = require("./form");
 const utils_1 = require("../../utils");
 function FormRelatable(props) {
-    const { formValue, formRef } = (0, form_1.useFormContext)();
+    const { formRef } = (0, form_1.useFormContext)();
+    const { formValue } = (0, form_1.useFormValueContext)();
     const prevFormValue = (0, react_1.useRef)(void 0);
     (0, react_1.useEffect)(() => {
         prevFormValue.current = (0, utils_1.cloneDeep)(formValue);

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     button: string;
     image: string;
-    counter: string;
     swap: string;
+    counter: string;
     control: string;
     galleryContainer: string;
     galleryWrapper: string;

package/dist/cjs/components/gallery/imageItem.js

@@ -47,5 +47,5 @@ function ImageItem({ ref, src, ...props }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), ...props, children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
+    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ...props, ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
 }

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

@@ -1,16 +1,16 @@
 import { ElementType, ReactElement } from 'react';
-import { MergeProps, ResponsiveProp } from '../../types';
+import { OverridableProps, ResponsiveProp } from '../../types';
 import { GridItem } from './gridItem';
-import { TransportStyleProps } from '../transportStyle';
-export type GridOwnProps = {
+import { TransportStyleOwnProps } from '../transportStyle';
+export interface GridOwnProps extends TransportStyleOwnProps {
     inline?: boolean;
     /** 网格列数，默认为`{xs: 12}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
-};
-export type GridProps<C extends ElementType = 'div'> = MergeProps<GridOwnProps, TransportStyleProps<C>>;
+}
+export type GridProps<C extends ElementType = 'div'> = OverridableProps<GridOwnProps, C>;
 export declare const Grid: {
     <C extends ElementType = "div">(props: GridProps<C>): ReactElement;
     Item: typeof GridItem;

package/dist/cjs/components/grid/gridItem.d.ts

@@ -1,9 +1,10 @@
-import { MergeProps, ResponsiveProp } from '../../types';
-import { TransportStyleProps } from '../transportStyle';
-import { ElementType, ReactElement } from 'react';
-export type GridItemOwnProps = {
+import { OverridableComponent, OverridableProps, ResponsiveProp } from '../../types';
+import { TransportStyleOwnProps } from '../transportStyle';
+import { ElementType } from 'react';
+interface GridItemOwnProps extends TransportStyleOwnProps {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
-};
-export type GridItemProps<C extends ElementType = 'div'> = MergeProps<GridItemOwnProps, TransportStyleProps<C>>;
-export declare const GridItem: <C extends ElementType = 'div'>(props: GridItemProps<C>) => ReactElement;
+}
+export type GridItemProps<C extends ElementType = 'div'> = OverridableProps<GridItemOwnProps, C>;
+export declare const GridItem: OverridableComponent<GridItemOwnProps>;
+export {};

package/dist/cjs/components/grid/gridItem.js

@@ -5,9 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../../utils");
 const grid_style_1 = require("./grid.style");
 const transportStyle_1 = require("../transportStyle");
-const GridItem = ({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
+exports.GridItem = (({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
     span = (0, utils_1.toResponsiveValue)(span);
     offset = (0, utils_1.toResponsiveValue)(offset);
     return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useItemStyle)({ span, offset }), className: (0, utils_1.clsx)(grid_style_1.classes.item, props.className) }));
-};
-exports.GridItem = GridItem;
+});

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

@@ -1,18 +1,18 @@
-import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
+import React, { CSSProperties, ReactNode, ReactElement, ComponentProps } from 'react';
 import { DivProps } from '../../types';
 import { Gallery, ImagePreviewProps } from '../gallery';
 export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;
-    onLoad?: JSX.IntrinsicElements['img']['onLoad'];
-    onError?: JSX.IntrinsicElements['img']['onError'];
+    onLoad?: ComponentProps<'img'>['onLoad'];
+    onError?: ComponentProps<'img'>['onError'];
     renderLoading?: ReactNode;
     alt?: string;
     width?: string | number;
     height?: string | number;
     objectFit?: CSSProperties['objectFit'];
     objectPosition?: CSSProperties['objectPosition'];
-    imgProps?: JSX.IntrinsicElements['img'];
+    imgProps?: ComponentProps<'img'>;
     actions?: ReactNode;
     previewable?: boolean;
     previewProps?: ImagePreviewProps;

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

@@ -1,7 +1,7 @@
-import { JSX } from 'react';
+import { ComponentProps } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface InputProps extends Omit<InputBaseProps<'input'>, 'children'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     /** 是否根据内容自动调整宽度 */
     widthAdaptable?: boolean;
 }

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

@@ -7,8 +7,15 @@ const input_style_1 = require("./input.style");
 const react_1 = require("react");
 const inputBase_1 = require("../inputBase");
 exports.Input = (0, react_1.memo)(({ inputProps, widthAdaptable, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: input_style_1.style, className: (0, utils_1.clsx)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: inputBaseProps => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { size: 1, ...inputBaseProps, ...inputProps, className: (0, utils_1.clsx)(input_style_1.classes.input, inputProps?.className) }), widthAdaptable &&
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...(0, utils_1.mergeComponentProps)(props, {
+            css: input_style_1.style,
+            className: input_style_1.classes.root,
+            'data-adaptable': widthAdaptable
+        }), children: inputBaseProps => {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)({
+                            size: 1,
+                            className: input_style_1.classes.input
+                        }, inputBaseProps, inputProps) }), widthAdaptable &&
                         (0, jsx_runtime_1.jsx)("span", { className: input_style_1.classes.adaptable, children: inputBaseProps.value })] }));
         } }));
 });

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

@@ -1,6 +1,11 @@
-import { JSX, ReactElement, ReactNode } from 'react';
+import { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
-export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DivProps, 'prefix' | 'onChange' | 'children'> {
+export interface InputBaseRef extends HTMLDivElement {
+    select?: HTMLInputElement['select'];
+    setSelectionRange?: HTMLInputElement['setSelectionRange'];
+}
+export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DivProps, 'ref' | 'prefix' | 'onChange' | 'children'> {
+    ref?: Ref<InputBaseRef>;
     variant?: 'outlined' | 'underlined' | 'plain';
     size?: Size;
     shape?: 'square' | 'rounded';
@@ -10,18 +15,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' ? ComponentProps<T>['type'] : never;
+    min?: T extends 'input' ? ComponentProps<T>['min'] : never;
+    max?: T extends 'input' ? ComponentProps<T>['max'] : never;
+    step?: T extends 'input' ? ComponentProps<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: JSX.IntrinsicElements[T]): ReactNode;
+    autoFocus?: ComponentProps<T>['autoFocus'];
+    defaultValue?: ComponentProps<T>['defaultValue'];
+    value?: ComponentProps<T>['value'];
+    onChange?: ComponentProps<T>['onChange'];
+    children(childProps: ComponentProps<T>): ReactNode;
 }
 export declare const InputBase: <T extends "input" | "textarea">(props: InputBaseProps<T>) => ReactElement;

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

@@ -10,14 +10,23 @@ const button_1 = require("../button");
 const loadingIndicator_1 = require("../loadingIndicator");
 const icon_1 = require("../icon");
 const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
-exports.InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+exports.InputBase = (({ ref, variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
 // 以下属性传递给<input/>
 min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
+    const innerRef = (0, react_1.useRef)(null);
+    const innerInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        if (innerRef.current) {
+            innerRef.current.focus = () => innerInputRef.current?.focus();
+            innerRef.current.blur = () => innerInputRef.current?.blur();
+            innerRef.current.select = () => innerInputRef.current?.select();
+            innerRef.current.setSelectionRange = (...args) => innerInputRef.current?.setSelectionRange(...args);
+        }
+        return innerRef.current;
+    });
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const innerInputRef = (0, react_1.useRef)(null);
     const wrapClickHandler = (e) => {
-        props.onClick?.(e);
         // 点击包裹元素时，聚焦到内部的input元素
         !disabled && innerInputRef.current && innerInputRef.current !== document.activeElement && innerInputRef.current.focus();
     };
@@ -47,15 +56,17 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, inputBase_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_1.clsx)(inputBase_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
-        // 防止点击wrap时，输入框失去焦点
-        onPointerDown: e => {
-            props.onPointerDown?.(e);
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
-                e.preventDefault();
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.mergeComponentProps)(props, {
+            ref: innerRef,
+            className: inputBase_style_1.classes.root,
+            onClick: wrapClickHandler,
+            onPointerDown: e => {
+                const { target } = e;
+                if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
+                    e.preventDefault();
+                }
             }
-        }, children: [!!prefix &&
+        }), css: (0, inputBase_style_1.useStyle)({ color: color || 'primary' }), "data-variant": variant, "data-size": size, "data-shape": shape, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.content, children: children({
                     ref: innerInputRef,
                     type,
@@ -75,7 +86,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
+                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && !!innerValue.current?.length &&
                 (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
 });

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

@@ -2,5 +2,7 @@ import { DivProps } from '../../types';
 import { LoadingMaskProps } from '../loadingMask';
 export interface LoadingProps extends Omit<LoadingMaskProps, 'children'>, DivProps {
     containerProps?: DivProps;
+    /** 是否占满父元素，默认为`true` */
+    fill?: boolean;
 }
-export declare const Loading: import("react").MemoExoticComponent<({ containerProps, open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Loading: import("react").MemoExoticComponent<({ containerProps, fill, open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -6,6 +6,6 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const loading_style_1 = require("./loading.style");
 const loadingMask_1 = require("../loadingMask");
-exports.Loading = (0, react_1.memo)(({ containerProps, 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.clsx)(loading_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)("div", { ...containerProps, className: (0, utils_1.clsx)(loading_style_1.classes.container, containerProps?.className), children: props.children }), (0, jsx_runtime_1.jsx)(loadingMask_1.LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: loading_style_1.classes.mask })] }));
+exports.Loading = (0, react_1.memo)(({ containerProps, fill = true, 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.clsx)(loading_style_1.classes.root, props.className), "data-fill": fill, children: [(0, jsx_runtime_1.jsx)("div", { ...containerProps, className: (0, utils_1.clsx)(loading_style_1.classes.container, containerProps?.className), 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.js

@@ -8,12 +8,13 @@ exports.classes = (0, utils_1.defineInnerClasses)('loading', [
     'mask'
 ]);
 exports.style = (0, react_1.css) `
-    & {
+    position: relative;
+    z-index: 0;
+    
+    &[data-fill=true] {
         width: 100%;
         height: 100%;
         flex: 1;
-        position: relative;
-        z-index: 0;
     }
 
     .${exports.classes.container} {

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

@@ -1,7 +1,9 @@
 import { ColorPropsValue, DivProps } from '../../types';
 export interface LoadingIndicatorProps extends DivProps {
+    /** 默认为`1rem` */
     size?: number;
-    width?: number;
+    /** 圆环的粗细，默认为`2px` */
+    borderWidth?: number;
     color?: ColorPropsValue;
 }
-export declare const LoadingIndicator: import("react").MemoExoticComponent<({ size, width, color, ...props }: LoadingIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const LoadingIndicator: import("react").MemoExoticComponent<({ size, borderWidth, color, ...props }: LoadingIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -5,8 +5,8 @@ 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)(({ size, width = 2, color = 'primary', ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, loadingIndicator_style_1.useStyle)({ color: color || 'primary', width }), className: (0, utils_1.clsx)(loadingIndicator_style_1.classes.root, props.className), style: {
+exports.LoadingIndicator = (0, react_1.memo)(({ size, borderWidth = 2, color = 'primary', ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, loadingIndicator_style_1.useStyle)({ color: color || 'primary', borderWidth }), className: (0, utils_1.clsx)(loadingIndicator_style_1.classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style

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

@@ -4,4 +4,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color, width }: Required<Pick<LoadingIndicatorProps, 'color' | 'width'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color, borderWidth }: Required<Pick<LoadingIndicatorProps, 'color' | 'borderWidth'>>): import("@emotion/react").SerializedStyles;

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

@@ -9,9 +9,8 @@ const color_1 = tslib_1.__importDefault(require("color"));
 exports.classes = (0, utils_1.defineInnerClasses)('loading-indicator', [
     'indicator'
 ]);
-function useStyle({ color, width }) {
+function useStyle({ color, borderWidth }) {
     const colorValue = (0, utils_1.useColor)(color);
-    const borderWidth = width;
     return (0, utils_1.useCss)(({ mode }) => {
         const borderColor = mode === 'light' ? (0, color_1.default)(colorValue).alpha(.6).string() : colorValue;
         return (0, react_1.css) `

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

@@ -19,7 +19,7 @@ exports.LoadingMask = (0, react_1.memo)(({ open = false, text = '加载中...',
     };
     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.clsx)(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.jsxs)(backdrop_1.Backdrop, { variant: "light", ...props, css: loadingMask_style_1.style, open: open, className: (0, utils_1.clsx)(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, borderWidth: 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/menu/menu.js

@@ -30,7 +30,7 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
             return newExpanded;
         });
     };
-    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useFlatSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
         return items?.map((p, i) => (0, react_1.createElement)(menuItem_1.MenuItem, { ...p, key: p[primaryKey] ?? i, value: p[primaryKey], label: p[labelKey] }, renderItems(p[childrenKey])));
     };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { CheckboxProps } from '../checkbox';
 export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
@@ -29,4 +29,4 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-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>;
+export declare const MenuItem: 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/optionsBase/optionsBase.js

@@ -83,6 +83,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: searchValue?.split(' '), children: params.label })
                 : params.label,
             onClick: e => {
+                e.stopPropagation();
                 params.opt.onClick?.(e);
                 syncOnToggleSelected.current?.(params.value, e);
             },

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -27,18 +27,21 @@ function OverlayBase({ container, effectContainer, forceRender, open, onMaskClic
             containerEl.current.style.overflow = '';
         };
     }, [open]);
-    const clickHandler = (e) => {
-        maskProps?.onClick?.(e);
+    const onClick = (e) => {
         onMaskClick?.(e);
     };
-    const onEntered = (node) => {
-        maskProps?.onEntered?.(node);
+    const onEntered = () => {
         onOpened?.();
     };
     const onExited = () => {
-        maskProps?.onExited?.();
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl.current);
+    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
+                    in: open,
+                    className: overlayBase_style_1.classes.mask,
+                    onClick,
+                    onEntered,
+                    onExited
+                }) }), props.children] }), containerEl.current);
 }

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

@@ -9,12 +9,9 @@ exports.classes = (0, utils_1.defineInnerClasses)('overlay-base', [
     'mask'
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
-    const { text, fontSize } = theme;
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-        color: ${text.primary};
-        font-size: ${fontSize}px;
         position: fixed;
         inset: 0;
         z-index: ${theme_1.zIndex.overlay};

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

@@ -2,9 +2,9 @@ export declare const classes: {
     input: string;
     main: string;
     mask: string;
+    sliders: string;
     hue: string;
     alpha: string;
-    sliders: string;
     handle: string;
     slidersRow: string;
     alphaMask: string;