@canlooks/can-ui 0.0.69 → 0.0.71

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

@@ -1,50 +1,58 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { useFormContext } from './form';
-import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID } from '../../utils';
+import { useFormContext, useFormStyleContext, useFormValueContext } from './form';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID, isUnset } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
-export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, ...props }) => {
-    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
+export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, _fieldValue, ...props }) => {
+    const context = useFormStyleContext();
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const { formValue, setFieldValue } = useFormValueContext();
+    const { itemsContainer, formRef } = useFormContext();
     const shouldValidate = useRef(false);
+    const isTouched = useRef(false);
     const [innerError, setInnerError] = useDerivedState(error);
+    const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
+    const stringField = !isUnset(field) ? stringifyField(field) : void 0;
     /**
      * --------------------------------------------------------------------
      * 重置与初始化
      */
-    const isTouched = 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') {
-            queryDeep(value, field, () => initialValue);
+        if (!isUnset(field) && currentFormValue) {
+            if (typeof initialValue !== 'undefined') {
+                queryDeep(currentFormValue, field, () => initialValue);
+            }
+            else if (typeof initialFormValue !== 'undefined') {
+                const initialFieldValue = queryDeep(initialFormValue, field);
+                queryDeep(currentFormValue, field, initialFieldValue);
+            }
         }
-        innerError.current && setInnerError(false);
+        setInnerError(false);
     };
-    useMemo(reset, []);
+    useMemo(reset, [stringField]);
     /**
      * --------------------------------------------------------------------
      * 字段值
      */
     const fieldValue = useMemo(() => {
-        if (typeof field !== 'undefined' && formValue) {
+        if (typeof _fieldValue !== 'undefined') {
+            return _fieldValue;
+        }
+        if (!isUnset(field) && formValue) {
             return queryDeep(formValue, field);
         }
-    }, [formValue, field]);
-    const [randomKey] = useDerivedState(prev => {
-        // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return typeof fieldValue === 'undefined' ? getShortID() : prev;
-    }, [fieldValue]);
+    }, [formValue, field, _fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
      */
     const rulesArr = toArray(rules);
-    const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
     const validate = async () => {
         if (error) {
             return false;
@@ -53,7 +61,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
         const promises = [];
         let invalid = false;
         rulesArr?.some(r => {
-            if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
+            if ((r.required && (isUnset(fieldValue) || fieldValue === '')) ||
                 (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
                 setInnerError(true);
                 setInnerHelperText(r.message || defaultMessage);
@@ -83,36 +91,38 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     };
     /**
      * --------------------------------------------------------------------
-     * 依赖更新自动校验
+     * 自动校验与依赖更新
      */
     const dependencyValues = useMemo(() => {
         return formValue && dependencies?.map(d => queryDeep(formValue, d));
     }, [formValue, ...dependencies || []]);
     useMemo(() => {
-        // 跳过首次渲染
-        shouldValidate.current && validate().then();
-        shouldValidate.current = true;
+        if (!shouldValidate.current) {
+            // 跳过首次渲染
+            shouldValidate.current = true;
+            return;
+        }
+        validate().then();
     }, [fieldValue, ...dependencyValues || []]);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef
      */
-    const formItemRef = useRef(null);
+    const formItemRef = useRef(void 0);
     formItemRef.current = {
         validate,
         reset,
         error: innerError.current ? { message: innerHelperText.current } : null,
-        isTouched: isTouched.current
+        isTouched: () => isTouched.current
     };
     useImperativeHandle(ref, () => formItemRef.current);
     useEffect(() => {
-        if (typeof field === 'undefined' || !itemsContainer) {
+        if (typeof stringField === 'undefined' || !itemsContainer) {
             return;
         }
-        const fieldStr = stringifyField(field);
-        itemsContainer.set(fieldStr, formItemRef.current);
+        itemsContainer.set(stringField, formItemRef.current);
         return () => {
-            itemsContainer.delete(fieldStr);
+            itemsContainer.delete(stringField);
         };
     });
     /**
@@ -122,9 +132,13 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     const isRequired = useMemo(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
+    const [randomKey] = useDerivedState(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return !prev || typeof fieldValue === 'undefined' ? getShortID() : prev;
+    }, [fieldValue]);
     const renderedChildren = useMemo(() => {
         if (typeof children === 'function') {
-            return children(typeof field !== 'undefined'
+            return children(!isUnset(field)
                 ? {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: fieldValue }
@@ -136,14 +150,14 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
                 }
                 : {}, {
                 ...size && { size },
-                ...innerError.current ? { color: 'error' } : {}
+                ...innerError.current && { color: 'error' }
             }, randomKey.current);
         }
         if (isValidElement(children)) {
             const { props: childProps } = children;
             return cloneElement(children, {
-                key: randomKey.current,
-                ...typeof field !== 'undefined' && {
+                key: children.key ?? randomKey.current,
+                ...!isUnset(field) && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }
                         : { value: childProps.value ?? fieldValue },
@@ -158,11 +172,11 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
             });
         }
         return children;
-    }, [children, innerError.current, field, size, randomKey.current, fieldValue]);
+    }, [children, fieldValue, size, innerError.current, randomKey.current]);
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return (_jsxs(DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: !!label &&
+    return (_jsxs(DescriptionItem, { ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: !!label &&
             _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
                         _jsx("span", { className: classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, _jsx(Collapse, { in: innerError.current || !!helperText, children: _jsx("div", { className: classes.helperText, children: innerHelperText.current }) })] }));
 };

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

@@ -1,8 +1,9 @@
 import { useRef, useEffect } from 'react';
-import { useFormContext } from './form';
+import { useFormContext, useFormValueContext } from './form';
 import { cloneDeep } from '../../utils';
 export function FormRelatable(props) {
-    const { formValue, formRef } = useFormContext();
+    const { formRef } = useFormContext();
+    const { formValue } = useFormValueContext();
     const prevFormValue = useRef(void 0);
     useEffect(() => {
         prevFormValue.current = cloneDeep(formValue);

package/dist/esm/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/esm/components/gallery/imageItem.js

@@ -44,5 +44,5 @@ export function ImageItem({ ref, src, ...props }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return (_jsx(Pinchable, { ref: pinchableRef, className: clsx(classes.imageItem, props.className), ...props, children: _jsx("img", { ref: imgRef, className: classes.image, src: src, draggable: false, alt: "" }) }));
+    return (_jsx(Pinchable, { ...props, ref: pinchableRef, className: clsx(classes.imageItem, props.className), children: _jsx("img", { ref: imgRef, className: classes.image, src: src, draggable: false, alt: "" }) }));
 }

package/dist/esm/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/esm/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/esm/components/grid/gridItem.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { clsx, toResponsiveValue } from '../../utils';
 import { classes, useItemStyle } from './grid.style';
 import { TransportStyle } from '../transportStyle';
-export const GridItem = ({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
+export const GridItem = (({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) => {
     span = toResponsiveValue(span);
     offset = toResponsiveValue(offset);
     return (_jsx(TransportStyle, { ...props, css: useItemStyle({ span, offset }), className: clsx(classes.item, props.className) }));
-};
+});

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

@@ -1,11 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { clsx } from '../../utils';
+import { mergeComponentProps } from '../../utils';
 import { classes, style } from './input.style';
 import { memo } from 'react';
 import { InputBase } from '../inputBase';
 export const Input = memo(({ inputProps, widthAdaptable, ...props }) => {
-    return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-adaptable": widthAdaptable, children: inputBaseProps => {
-            return (_jsxs(_Fragment, { children: [_jsx("input", { size: 1, ...inputBaseProps, ...inputProps, className: clsx(classes.input, inputProps?.className) }), widthAdaptable &&
+    return (_jsx(InputBase, { ...mergeComponentProps(props, {
+            css: style,
+            className: classes.root,
+            'data-adaptable': widthAdaptable
+        }), children: inputBaseProps => {
+            return (_jsxs(_Fragment, { children: [_jsx("input", { ...mergeComponentProps({
+                            size: 1,
+                            className: classes.input
+                        }, inputBaseProps, inputProps) }), widthAdaptable &&
                         _jsx("span", { className: classes.adaptable, children: inputBaseProps.value })] }));
         } }));
 });

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

@@ -1,20 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useRef } from 'react';
+import { useImperativeHandle, useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { clsx, fixInputNumber, useControlled } from '../../utils';
+import { fixInputNumber, mergeComponentProps, toArray, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
 import { Icon } from '../icon';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
-export const InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+export const 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 = useRef(null);
+    const innerInputRef = useRef(null);
+    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 = useTheme();
     size ??= theme.size;
-    const innerInputRef = useRef(null);
     const wrapClickHandler = (e) => {
-        props.onClick?.(e);
         // 点击包裹元素时，聚焦到内部的input元素
         !disabled && innerInputRef.current && innerInputRef.current !== document.activeElement && innerInputRef.current.focus();
     };
@@ -44,15 +53,17 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(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 (_jsxs("div", { ...mergeComponentProps(props, {
+            ref: innerRef,
+            className: classes.root,
+            onClick: wrapClickHandler,
+            onPointerDown: e => {
+                const { target } = e;
+                if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
+                    e.preventDefault();
+                }
             }
-        }, children: [!!prefix &&
+        }), css: useStyle({ color: color || 'primary' }), "data-variant": variant, "data-size": size, "data-shape": shape, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: children({
                     ref: innerInputRef,
                     type,
@@ -72,7 +83,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
+                _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && toArray(innerValue.current)?.length &&
                 _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 });

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

@@ -3,6 +3,6 @@ import { memo } from 'react';
 import { clsx } from '../../utils';
 import { classes, style } from './loading.style';
 import { LoadingMask } from '../loadingMask';
-export const Loading = memo(({ containerProps, open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx("div", { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), _jsx(LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: classes.mask })] }));
+export const Loading = memo(({ containerProps, fill = true, open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-fill": fill, children: [_jsx("div", { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), _jsx(LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: classes.mask })] }));
 });

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

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

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

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { clsx } from '../../utils';
 import { classes, useStyle } from './loadingIndicator.style';
 import { memo } from 'react';
-export const LoadingIndicator = memo(({ size, width = 2, color = 'primary', ...props }) => {
-    return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', width }), className: clsx(classes.root, props.className), style: {
+export const LoadingIndicator = memo(({ size, borderWidth = 2, color = 'primary', ...props }) => {
+    return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', borderWidth }), className: clsx(classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style

package/dist/esm/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/esm/components/loadingIndicator/loadingIndicator.style.js

@@ -4,9 +4,8 @@ import Color from 'color';
 export const classes = defineInnerClasses('loading-indicator', [
     'indicator'
 ]);
-export function useStyle({ color, width }) {
+export function useStyle({ color, borderWidth }) {
     const colorValue = useColor(color);
-    const borderWidth = width;
     return useCss(({ mode }) => {
         const borderColor = mode === 'light' ? Color(colorValue).alpha(.6).string() : colorValue;
         return css `

package/dist/esm/components/loadingMask/loadingMask.js

@@ -16,7 +16,7 @@ export const LoadingMask = memo(({ open = false, text = '加载中...', progress
     };
     const showProgress = typeof progress === 'number';
     return open || visible.current
-        ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: clsx(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
+        ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: clsx(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, borderWidth: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
                     _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })
         : null;
 });

package/dist/esm/components/menu/menu.js

@@ -5,7 +5,7 @@ import { style } from './menu.style';
 import { MenuItem } from '../menuItem';
 import { useControlled } from '../../utils';
 import { useTheme } from '../theme';
-import { useShallowSelection } from '../selectionContext';
+import { useFlatSelection } from '../selectionContext';
 const MenuContext = createContext({});
 export function useMenuContext() {
     const theme = useTheme();
@@ -26,7 +26,7 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
             return newExpanded;
         });
     };
-    const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = useFlatSelection({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
         return items?.map((p, i) => _createElement(MenuItem, { ...p, key: p[primaryKey] ?? i, value: p[primaryKey], label: p[labelKey] }, renderItems(p[childrenKey])));
     };

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

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

package/dist/esm/components/overlayBase/overlayBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
-import { clsx, useContainer, useDerivedState } from '../../utils';
+import { clsx, mergeComponentProps, useContainer, useDerivedState } from '../../utils';
 import { createPortal } from 'react-dom';
 import { Fade } from '../transitionBase';
 export const overlayBaseTransitionDuration = 300;
@@ -23,18 +23,21 @@ export function OverlayBase({ container, effectContainer, forceRender, open, onM
             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 && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...maskProps, in: open, className: clsx(classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl.current);
+    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
+                    in: open,
+                    className: classes.mask,
+                    onClick,
+                    onEntered,
+                    onExited
+                }) }), props.children] }), containerEl.current);
 }

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

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