@canlooks/can-ui 0.0.67 → 0.0.69

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 const gallery_style_1 = require("./gallery.style");
 const button_1 = require("../button");
 const tooltip_1 = require("../tooltip");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
 const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
@@ -25,8 +25,8 @@ const commonControlProps = {
     color: 'text'
 };
 const bounceBezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
-exports.Gallery = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
-    const srcArr = (0, utils_1.useSync)((0, utils_1.toArray)(src));
+exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
+    const srcArr = (0, utils_1.useSync)((0, utils_1.toArray)(src || []));
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);
@@ -154,10 +154,10 @@ exports.Gallery = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onInde
     return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: gallery_style_1.style, className: (0, utils_1.clsx)(gallery_style_1.classes.root, props.className), open: innerOpen.current, onClosed: resetAll, maskProps: {
             ...props.maskProps,
             children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.control, children: [renderControl, showRotation &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateLeft, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateRight, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: reset, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
-                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.current.length > 1 &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goPrevLoop, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goNextLoop, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateLeft, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateRight, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: reset, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
+                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.current.length > 1 &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goPrevLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goNextLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
         }, children: srcArr.current.length > 0 &&
             (0, jsx_runtime_1.jsx)("div", { className: gallery_style_1.classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: gallery_style_1.classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: e => e.currentTarget.dataset.transition = '', children: srcArr.current.map((src, i) => (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
                             r && imageItemRefs.current.push(r);

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

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
 import { DivProps } from '../../types';
-import { Gallery, ImagePreviewProps } from '../gallery/gallery';
+import { Gallery, ImagePreviewProps } from '../gallery';
 export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;

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

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const image_style_1 = require("./image.style");
 const utils_1 = require("../../utils");
-const gallery_1 = require("../gallery/gallery");
-const __1 = require("../..");
+const gallery_1 = require("../gallery");
+const icon_1 = require("../icon");
+const skeleton_1 = require("../skeleton");
 const faEye_1 = require("@fortawesome/free-regular-svg-icons/faEye");
 exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
     const imgRef = (0, react_1.useRef)(null);
@@ -35,7 +36,7 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
     };
     const renderedActions = (() => {
         if (typeof actions === 'undefined' && previewable) {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEye_1.faEye }), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faEye_1.faEye }), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
         }
         return actions;
     })();
@@ -44,7 +45,7 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
                     objectPosition,
                     ...imgProps?.style
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
-                (renderLoading ?? (0, jsx_runtime_1.jsx)(__1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
+                (renderLoading ?? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
                 (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
                 (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
 });

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const button_1 = require("../button");
 const loadingIndicator_1 = require("../loadingIndicator");
-const __1 = require("../..");
+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', 
 // 以下属性传递给<input/>
@@ -76,6 +76,6 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     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)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
+                (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/menu/menu.js

@@ -16,10 +16,10 @@ function useMenuContext() {
     const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_2.useContext)(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-exports.Menu = (0, react_2.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+exports.Menu = (0, react_2.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded, expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
 // 以下属性传递给<MenuItem/>
 size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
-    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded || [], expanded);
     const expandedSet = (0, react_2.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);

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

@@ -9,7 +9,7 @@ const checkbox_1 = require("../checkbox");
 const popper_1 = require("../popper");
 const menu_1 = require("../menu");
 const transitionBase_1 = require("../transitionBase");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = (0, menu_1.useMenuContext)();
@@ -43,7 +43,7 @@ exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasiz
             return;
         }
         if (!expandIcon) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) }));
         }
         if (typeof expandIcon === 'function') {
             return expandIcon(innerExpanded.current);

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

@@ -4,6 +4,8 @@ import { TransitionBaseProps } from '../transitionBase';
 export interface OverlayBaseProps extends DivProps {
     /** 模态的容器元素，默认为document.body */
     container?: DefineElement<HTMLElement>;
+    /** 同{@link container}，但会在useEffect后取值，且只会执行一次 */
+    effectContainer?: DefineElement<HTMLElement>;
     /**
      * @enum {true} 跟随父组件强制渲染
      * @enum {false} 打开时渲染，关闭后销毁
@@ -22,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;

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

@@ -9,22 +9,22 @@ const utils_1 = require("../../utils");
 const react_dom_1 = require("react-dom");
 const transitionBase_1 = require("../transitionBase");
 exports.overlayBaseTransitionDuration = 300;
-function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
+function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
     const [shouldRender, setShouldRender] = (0, utils_1.useDerivedState)((prev = false) => {
         if (open) {
             return true;
         }
         return forceRender === true || prev;
     }, [open, forceRender]);
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     (0, react_1.useEffect)(() => {
         if (!open) {
             return;
         }
         removeFocusOnOpen && document.activeElement?.blur?.();
-        containerEl.style.overflow = 'hidden';
+        containerEl.current.style.overflow = 'hidden';
         return () => {
-            containerEl.style.overflow = '';
+            containerEl.current.style.overflow = '';
         };
     }, [open]);
     const clickHandler = (e) => {
@@ -40,5 +40,5 @@ function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, o
         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 !== 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);
+    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);
 }

package/dist/cjs/components/pagination/pager.js

@@ -8,7 +8,7 @@ const pagination_style_1 = require("./pagination.style");
 const pagination_1 = require("./pagination");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faEllipsis_1 = require("@fortawesome/free-solid-svg-icons/faEllipsis");
 const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
 const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
@@ -18,7 +18,7 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
     const renderPageButton = (i, ellipsis) => {
         const btnPage = i + 1;
         const isActive = !ellipsis && btnPage === page;
-        return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEllipsis_1.faEllipsis }) : btnPage }, i));
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faEllipsis_1.faEllipsis }) : btnPage }, i));
     };
     const renderPageList = () => {
         if (pageCount <= 9) {
@@ -52,5 +52,5 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
                     : renderPageButton(page + i - 5, i === 1 || i === 7);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
 });

package/dist/cjs/components/palette/palette.js

@@ -11,7 +11,7 @@ const slider_1 = require("../slider");
 const color_1 = tslib_1.__importDefault(require("color"));
 const button_1 = require("../button");
 const colorValueInput_1 = require("./colorValueInput");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const sliderProps = {
     railSize: 9,
@@ -114,5 +114,5 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, gestureOpt
                         }, ...draggableHandles })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
-                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text.secondary", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text.secondary", suffix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
 });

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

@@ -10,7 +10,7 @@ const selectionContext_1 = require("../selectionContext");
 const divider_1 = require("../divider");
 const selectedList_1 = require("../selectedList");
 const button_1 = require("../button");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
 exports.PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
 // 以下属性从SelectionContextBaseProps继承
@@ -70,6 +70,6 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 ...props.modalProps
             }, ...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)(__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" })] }))
+                                    (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/pinchable/pinchable.js

@@ -143,6 +143,12 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
             resetZoom();
         }
     };
+    const wheelHandler = (e) => {
+        childrenProps.onMouseWheel?.(e);
+        e.deltaY > 0
+            ? zoomFn(innerScale.current * .8, e.clientX, e.clientY)
+            : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
+    };
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: pinchable_style_1.style, className: (0, utils_1.clsx)(pinchable_style_1.classes.root, props.className), ...pinchableHandles, children: (0, react_1.cloneElement)(children, {
             ref: (0, utils_1.cloneRef)(contentRef, childrenProps.ref),
             className: (0, utils_1.clsx)(pinchable_style_1.classes.content, childrenProps.className),
@@ -155,6 +161,7 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
             },
             ...draggableHandles,
             onDoubleClick: doubleClickHandler,
+            onWheel: wheelHandler,
             onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
         }) }));
 });

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

@@ -7,6 +7,8 @@ export interface PopperProps extends Omit<DivProps, 'content' | 'children'> {
     anchorElement?: DefineElement<HTMLElement>;
     /** 弹框渲染的容器元素，默认为{@link document.body} */
     container?: DefineElement<HTMLElement>;
+    /** 同{@link container}，但会在useEffect后取值，且只会执行一次 */
+    effectContainer?: DefineElement<HTMLElement>;
     /** 汽泡里的内容 */
     content?: ReactNode;
     /** 弹框偏离元素的距离 */
@@ -46,4 +48,4 @@ export interface PopperRef extends HTMLDivElement {
         openAnimation?: boolean;
     }, beforeOpen?: () => void): void;
 }
-export declare function Popper({ ref, popperRef, anchorElement, container, 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, 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, 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', placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 100, 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, () => {
@@ -104,14 +104,14 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const getAnchorElement = () => {
         return anchorRef.current || (typeof syncAnchorElement.current === 'function' ? syncAnchorElement.current() : syncAnchorElement.current);
     };
-    const containerRef = (0, utils_1.useSync)((typeof container === 'function' ? container() : container) || document.body);
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     const innerPopperRef = (0, react_1.useRef)(null);
     const [popperBounding, setPopperBounding] = (0, react_1.useState)();
     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);
     const fitPosition = (options, beforeOpen) => {
-        const containerRect = containerRef.current.getBoundingClientRect();
+        const containerRect = containerEl.current.getBoundingClientRect();
         const popperEl = innerPopperRef.current;
         let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
         let pA, pB;
@@ -187,7 +187,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -258,7 +258,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
+                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -502,5 +502,5 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
                             transform: 'scale(1)'
                         },
                         ...props.style
-                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerRef.current)] }));
+                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

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

@@ -7,10 +7,12 @@ const progress_style_1 = require("./progress.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const react_2 = require("@emotion/react");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
 const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
-exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
+    const isColorSpecified = !!color;
+    color ??= 'primary';
     const { colors: { success, error } } = (0, theme_1.useTheme)();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
@@ -18,10 +20,10 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'pr
             return renderInfo(value);
         }
         if (isSucceed) {
-            return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleCheck_1.faCircleCheck, className: progress_style_1.classes.icon, style: { color: success.main } });
+            return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleCheck_1.faCircleCheck, className: progress_style_1.classes.icon, style: { color: success.main } });
         }
         if (status === 'error') {
-            return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark, className: progress_style_1.classes.icon, style: { color: error.main } });
+            return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleXmark_1.faCircleXmark, className: progress_style_1.classes.icon, style: { color: error.main } });
         }
         return value + '%';
     };
@@ -55,7 +57,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'pr
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    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": isSucceed, "data-error": status === 'error', children: variant === 'linear'
+    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,
                             ...props.style

package/dist/cjs/components/rating/rating.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const rating_style_1 = require("./rating.style");
 const theme_1 = require("../theme");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faStar_1 = require("@fortawesome/free-solid-svg-icons/faStar");
-exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faStar_1.faStar }), allowHalf, highlightSelectedOnly = false, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
+exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faStar_1.faStar }), allowHalf, highlightSelectedOnly = false, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);

package/dist/cjs/components/select/select.js

@@ -14,7 +14,7 @@ const input_1 = require("../input");
 const loadingIndicator_1 = require("../loadingIndicator");
 const popper_style_1 = require("../popper/popper.style");
 const selectionContext_1 = require("../selectionContext");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
 exports.Select = (0, react_1.memo)(({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 
@@ -82,7 +82,7 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
         return ((0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[labelKey] ?? innerValue }));
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, onOpenChangeEnd: openChangeEnd, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable &&
-                    (0, jsx_runtime_1.jsx)(input_1.Input, { inputProps: { ref: searchInputRef }, prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
+                    (0, jsx_runtime_1.jsx)(input_1.Input, { inputProps: { ref: searchInputRef }, prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                             searchInputProps?.onChange?.(e);
                             setInnerSearchValue?.(e.target.value);
                         }, onBlur: e => {
@@ -95,6 +95,6 @@ showCheckbox = !!multiple, loading, options, labelKey = 'label', primaryKey = 'v
                         ? (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
                         : (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...inputBaseProps, ...inputProps, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: select_style_1.classes.arrow, "data-open": innerOpen.current, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                            : (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
+                            : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });
 exports.Option = exports.Select.Option = menuItem_1.MenuItem;

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

@@ -24,11 +24,12 @@ export declare class SnackbarBaseMethods<P extends SnackbarBaseProps = SnackbarB
     error(content: ReactNode): Promise<void>;
     error(props: P): Promise<void>;
 }
-export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo, max, container }: {
+export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo, max, container, effectContainer }: {
     methods: SnackbarBaseMethods;
     useTo: "message" | "notification";
     max?: number;
-    container?: DefineElement;
+    container?: DefineElement<HTMLElement>;
+    effectContainer?: DefineElement<HTMLElement>;
 }) => React.ReactPortal>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;

package/dist/cjs/components/snackbarBase/snackbarBase.js

@@ -11,7 +11,7 @@ const react_transition_group_1 = require("react-transition-group");
 const status_1 = require("../status");
 const button_1 = require("../button");
 const react_dom_1 = require("react-dom");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 class SnackbarBaseMethods {
     async info(_) {
@@ -37,7 +37,7 @@ const placementToIndex = {
     bottomRight: 5,
     rightBottom: 5
 };
-exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container }) => {
+exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = (0, react_2.useState)([]);
     const timers = (0, react_2.useRef)([]);
     (0, react_2.useEffect)(() => () => {
@@ -85,10 +85,10 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     const css = (0, snackbarBase_style_1.style)();
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     return (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
         ? (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { css: css, className: snackbarBase_style_1.classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => (0, react_1.createElement)(exports.SnackbarBaseItem, { ...p, key: p.id })) }, i)
-        : []), containerEl);
+        : []), containerEl.current);
 });
 /**
  * ----------------------------------------------------------------------
@@ -115,7 +115,7 @@ exports.SnackbarBaseItem = (0, react_2.memo)(({ id, type, useTo, resolve, varian
     const colorValue = (0, utils_1.useColor)(color);
     const renderedIcon = icon ?? (variant === 'outlined'
         ? (0, jsx_runtime_1.jsx)(status_1.StatusIcon, { status: type })
-        : (0, jsx_runtime_1.jsx)(__1.Icon, { icon: status_1.statusMapToIconDefinition[type] }));
+        : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: status_1.statusMapToIconDefinition[type] }));
     const closeHandler = (e) => {
         e.stopPropagation();
         onCloseButtonClick?.(e);
@@ -128,5 +128,5 @@ exports.SnackbarBaseItem = (0, react_2.memo)(({ id, type, useTo, resolve, varian
                     (0, jsx_runtime_1.jsxs)("div", { className: snackbarBase_style_1.classes.text, children: [!!title &&
                                 (0, jsx_runtime_1.jsx)("div", { className: snackbarBase_style_1.classes.title, children: title }), !!content &&
                                 (0, jsx_runtime_1.jsx)("div", { className: snackbarBase_style_1.classes.content, children: content })] }), showClose &&
-                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", size: "small", className: snackbarBase_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }) }));
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", size: "small", className: snackbarBase_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }) }));
 });

package/dist/cjs/components/stepper/step.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 const step_style_1 = require("./step.style");
 const stepper_1 = require("./stepper");
 const theme_1 = require("../theme");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
 const faCircleInfo_1 = require("@fortawesome/free-solid-svg-icons/faCircleInfo");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
@@ -37,13 +37,13 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
                                 case 'processing':
                                     return step + 1;
                                 case 'finished':
-                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCheck_1.faCheck });
+                                    return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCheck_1.faCheck });
                                 case 'warning':
-                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleInfo_1.faCircleInfo });
+                                    return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleInfo_1.faCircleInfo });
                                 case 'error':
-                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark });
+                                    return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark });
                                 case 'skipped':
-                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMinus_1.faMinus });
+                                    return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus });
                             }
                         })() }) }), (0, jsx_runtime_1.jsxs)("div", { className: step_style_1.classes.label, children: [(0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.title, children: (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.titleText, children: renderInner(title) }) }), (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.description, children: renderInner(description) })] })] }));
 });

package/dist/cjs/components/tabs/tabsEllipsis.js

@@ -7,7 +7,7 @@ const tabs_style_1 = require("./tabs.style");
 const popper_1 = require("../popper");
 const tabsEllipsis_style_1 = require("./tabsEllipsis.style");
 const optionsBase_1 = require("../optionsBase");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faEllipsis_1 = require("@fortawesome/free-solid-svg-icons/faEllipsis");
 exports.TabsEllipsis = (0, react_1.memo)(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -26,5 +26,5 @@ exports.TabsEllipsis = (0, react_1.memo)(({ tabs, children, labelKey = 'label',
         onToggleSelected(value);
         setOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: tabsEllipsis_style_1.tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.ellipsis, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEllipsis_1.faEllipsis }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: tabsEllipsis_style_1.tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.ellipsis, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faEllipsis_1.faEllipsis }) }) }) }));
 });

package/dist/cjs/components/tag/tag.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const tag_style_1 = require("./tag.style");
 const utils_1 = require("../../utils");
-const __1 = require("../..");
+const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 exports.Tag = (0, react_1.memo)(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {
@@ -16,5 +16,5 @@ exports.Tag = (0, react_1.memo)(({ variant = 'outlined', color = 'text.secondary
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color: color || 'text.secondary' }), className: (0, utils_1.clsx)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
-                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

package/dist/cjs/components/theme/themeVariables.d.ts

@@ -15,6 +15,7 @@ export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefini
  * 统一全局zIndex
  */
 export declare const zIndex: {
+    touchRipple: number;
     overlay: number;
     popper: number;
     dropdown: number;

package/dist/cjs/components/theme/themeVariables.js

@@ -97,6 +97,7 @@ function restoreThemeDefinition(theme) {
  * 统一全局zIndex
  */
 exports.zIndex = {
+    touchRipple: 900,
     overlay: 1000,
     popper: 1100,
     dropdown: 1200,

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

@@ -1 +1,2 @@
 export * from './touchRipple';
+export * from './touchRipple';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./touchRipple"), exports);
+tslib_1.__exportStar(require("./touchRipple"), exports);