@canlooks/can-ui 0.0.70 → 0.0.72

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, 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 && !!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};

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

package/dist/esm/components/pickerDialog/pickerDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
-import { clsx, toArray, useControlled } from '../../utils';
+import { clsx, mergeComponentProps, toArray, useControlled } from '../../utils';
 import { classes, style } from './pickerDialog.style';
 import { SelectionContext } from '../selectionContext';
 import { Divider } from '../divider';
@@ -28,7 +28,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         !multiple && confirmHandler(value);
     };
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
-    const onCloseHandler = (reason) => {
+    const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
@@ -46,8 +46,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         resolvers.current?.resolve(value);
         setInnerOpen(false);
     };
-    const exitedHandler = () => {
-        props.modalProps?.onExited?.();
+    const onExited = () => {
         _setInnerValue(null);
     };
     const renderChildren = () => {
@@ -62,10 +61,24 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = toArray(innerValue)?.length || 0;
-    return (_jsx(SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHandler,
-                ...props.modalProps
-            }, ...showSelectedList && {
+    return (_jsx(SelectionContext, { options,
+        primaryKey,
+        childrenKey,
+        relation,
+        integration,
+        disabled,
+        clearable,
+        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: _jsx(Dialog, { ...mergeComponentProps({
+                width: multiple ? '90%' : 1080,
+                footer: null,
+                maskClosable: false
+            }, props, {
+                ref: dialogRef,
+                css: style,
+                className: classes.root,
+                open: innerOpen.current,
+                modalProps: mergeComponentProps(props.modalProps, { onExited })
+            }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
                                     _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));

package/dist/esm/components/pickerDialog/pickerDialog.style.d.ts

@@ -1,9 +1,9 @@
 export declare const classes: {
     content: string;
+    confirm: string;
     list: string;
     selectedArea: string;
     count: string;
-    confirm: string;
 } & {
     root: string;
 };

package/dist/esm/components/popper/popper.d.ts

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode, Ref } from 'react';
 import { DivProps, DefineElement, Placement } from '../../types';
 export type Trigger = 'click' | 'hover' | 'focus' | 'enter' | 'contextMenu';
 export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
+    /** 默认的ref会传递至`children` */
     popperRef?: Ref<PopperRef | null>;
     /** 若不指定anchorElement，默认使用{@link children}作为目标锚点元素 */
     anchorElement?: DefineElement<HTMLElement>;
@@ -15,6 +16,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     offset?: number;
     /** 自动打开弹框的触发方法，默认为`hover` */
     trigger?: Trigger | Trigger[] | false;
+    /** 点击元素时关闭，主要用于某元素同时存在tooltip与其他popper的情况，点击时打开popper同时关闭tooltip */
+    clickToClose?: boolean;
     placement?: Placement;
     variant?: 'zoom' | 'collapse';
     /**
@@ -23,7 +26,7 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
      * @enum {@link variant}为`collapse`时，默认为`true`
      */
     sizeAdaptable?: boolean;
-    /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`100(ms)` */
+    /** trigger{@link trigger}包含"hover"时，鼠标移入移的延迟时间，默认为`150(ms)` */
     mouseEnterDelay?: number;
     /**默认为`150(ms)` */
     mouseLeaveDelay?: number;
@@ -48,4 +51,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger, clickToClose, placement, variant, sizeAdaptable, mouseEnterDelay, mouseLeaveDelay, defaultOpen, open, onOpenChange, onOpenChangeEnd, disabled, autoClose, forceRender, children, ...props }: PopperProps): import("@emotion/react/jsx-runtime").JSX.Element;