@canlooks/can-ui 0.0.70 → 0.0.71

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 && (0, utils_1.toArray)(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;

package/dist/cjs/components/pickerDialog/pickerDialog.js

@@ -31,7 +31,7 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
         !multiple && confirmHandler(value);
     };
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
-    const onCloseHandler = (reason) => {
+    const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
@@ -49,8 +49,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 = () => {
@@ -65,10 +64,24 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 : children;
     };
     const selectedCount = (0, utils_1.toArray)(innerValue)?.length || 0;
-    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options: options, primaryKey: primaryKey, childrenKey: childrenKey, relation: relation, integration: integration, disabled: disabled, clearable: clearable, multiple: multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: multiple ? '90%' : 1080, footer: null, maskClosable: false, ...props, ref: dialogRef, css: pickerDialog_style_1.style, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.root, props.className), open: innerOpen.current, onClose: onCloseHandler, modalProps: {
-                onExited: exitedHandler,
-                ...props.modalProps
-            }, ...showSelectedList && {
+    return ((0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { options,
+        primaryKey,
+        childrenKey,
+        relation,
+        integration,
+        disabled,
+        clearable,
+        multiple, value: innerValue, onChange: setInnerValue, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...(0, utils_1.mergeComponentProps)({
+                width: multiple ? '90%' : 1080,
+                footer: null,
+                maskClosable: false
+            }, props, {
+                ref: dialogRef,
+                css: pickerDialog_style_1.style,
+                className: pickerDialog_style_1.classes.root,
+                open: innerOpen.current,
+                modalProps: (0, utils_1.mergeComponentProps)(props.modalProps, { onExited })
+            }), onClose: closeHandler, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: ((0, jsx_runtime_1.jsxs)("div", { className: pickerDialog_style_1.classes.selectedArea, children: [(0, jsx_runtime_1.jsxs)(divider_1.Divider, { className: pickerDialog_style_1.classes.count, textAlign: "start", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["\u5DF2\u9009\u62E9", (0, jsx_runtime_1.jsx)("b", { children: selectedCount }), "\u9879"] }), clearable &&
                                     (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), (0, jsx_runtime_1.jsx)(selectedList_1.SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: (0, utils_1.clsx)(pickerDialog_style_1.classes.list, selectedListProps?.className) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pickerDialog_style_1.classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));

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

package/dist/cjs/components/popper/popper.js

@@ -22,7 +22,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
+function Popper({ ref, popperRef, anchorElement, container = document.body, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, children, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
     (0, react_1.useImperativeHandle)(popperRef, () => {
@@ -40,11 +40,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hold = (open) => {
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
-                : openHolding.current;
+                : 0;
     };
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
-    const setInnerOpen = (open, force) => {
+    const setInnerOpen = (open) => {
         if (disabled || unmounted.current) {
             return;
         }
@@ -53,15 +52,15 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             return;
         }
         // 打开时无需判断，关闭时需要判断openHolding.current是否归0
-        if (newOpen || force || !openHolding.current) {
+        if (newOpen || openHolding.current === 0) {
             _setInnerOpen(newOpen);
         }
     };
     const { onChildrenOpenChange: tellParentOpenChange } = (0, popperContext_1.usePopperContext)();
-    const isInitial = (0, react_1.useRef)(true);
+    const initialized = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        if (isInitial.current) {
-            isInitial.current = false;
+        if (!initialized.current) {
+            initialized.current = true;
             return;
         }
         tellParentOpenChange(innerOpen.current);
@@ -70,7 +69,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         hold(open) === 0 && setInnerOpen(false);
     };
     const setOpenForce = (open) => {
-        setInnerOpen(open, true);
+        if (!open) {
+            openHolding.current = 0;
+        }
+        setInnerOpen(open);
     };
     const openAndHold = (open) => {
         hold(open);
@@ -107,6 +109,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     const innerPopperRef = (0, react_1.useRef)(null);
     const [popperBounding, setPopperBounding] = (0, react_1.useState)();
+    const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
     const [openNextFrame, setOpenNextFrame] = (0, utils_1.useDerivedState)(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = (0, react_1.useRef)(void 0);
     const placeB = (0, react_1.useRef)(void 0);
@@ -364,7 +367,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         }
         isEntered.current = true;
         hold(true);
-        clearTimeout(enterTimeout.current);
+        clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
@@ -372,7 +375,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const pointerLeave = () => {
         isEntered.current = false;
         hold(false);
-        clearTimeout(leaveTimeout.current);
+        clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
@@ -444,7 +447,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         if (!clickable) {
             return;
         }
-        const click = () => openAndHold(true);
+        const click = () => {
+            openAndHold(true);
+        };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -454,6 +459,20 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const onClickAway = () => {
         innerOpen.current && openAndHold(false);
     };
+    /**
+     * clickToClose
+     */
+    (0, react_1.useEffect)(() => {
+        if (clickToClose) {
+            const click = () => {
+                setOpenForce(false);
+            };
+            anchorRef.current.addEventListener('click', click);
+            return () => {
+                anchorRef.current.removeEventListener('click', click);
+            };
+        }
+    }, [clickToClose]);
     /**
      * contextmenu相关
      */

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

@@ -9,11 +9,10 @@ exports.classes = (0, utils_1.defineInnerClasses)('popper', [
     'popper',
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
-    const { easing, fontSize } = theme;
+    const { easing } = theme;
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            font-size: ${fontSize}px;
             position: absolute;
             top: 0;
             left: 0;

package/dist/cjs/components/progress/progress.js

@@ -56,7 +56,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, stat
             return (0, react_2.css)({ animation: `${anim} 1.4s linear infinite` });
         }
         return;
-    }, [indeterminate, variant, strokeLinecap, size, barWidth]);
+    }, [indeterminate, variant, commonCircleProps.r]);
     return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, progress_style_1.useStyle)({ color: color || 'primary', variant }), className: (0, utils_1.clsx)(progress_style_1.classes.root, props.className), "data-variant": variant, "data-indeterminate": indeterminate, "data-processing": value < 100 && status === 'processing', "data-success": isColorSpecified ? void 0 : isSucceed, "data-error": isColorSpecified ? void 0 : status === 'error', children: variant === 'linear'
             ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.track, style: {
                             height: barWidth,

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

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
-    container: string;
     corner: string;
     edge: string;
+    container: string;
 } & {
     root: string;
 };

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

@@ -2,8 +2,8 @@ import { ColorPropsValue } from '../../types';
 export declare const classes: {
     label: string;
     option: string;
-    indicator: string;
     prefix: string;
+    indicator: string;
     suffix: string;
 } & {
     root: string;