@canlooks/can-ui 0.0.67 → 0.0.69

package/dist/cjs/utils/hooks.d.ts

@@ -1,4 +1,5 @@
 import { RefObject, Dispatch, SetStateAction } from 'react';
+import { DefineElement } from '../types';
 /**
  * 获取渲染前的值
  * @param value
@@ -48,3 +49,10 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
     (...args: A) => Promise<R>,
     Dispatch<SetStateAction<boolean>>
 ];
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;

package/dist/cjs/utils/hooks.js

@@ -8,6 +8,7 @@ exports.useDerivedState = useDerivedState;
 exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
 exports.useLoading = useLoading;
+exports.useContainer = useContainer;
 const react_1 = require("react");
 const utils_1 = require("./utils");
 /**
@@ -123,3 +124,24 @@ function useLoading(fn, referredLoading = false) {
         setLoading
     ];
 }
+/**
+ * 获取容器元素，通常用于`container`或`effectContainer`属性
+ * @param container
+ * @param effectContainer
+ * @param defaultContainer 默认为`document.body`
+ */
+function useContainer(container, effectContainer, defaultContainer = document.body) {
+    const [containerEl, setContainerEl] = useDerivedState(prev => {
+        if (container) {
+            return typeof container === 'function' ? container() : container;
+        }
+        return prev || defaultContainer;
+    }, [container, defaultContainer]);
+    (0, react_1.useEffect)(() => {
+        if (effectContainer) {
+            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+            setContainerEl(el);
+        }
+    }, []);
+    return containerEl;
+}

package/dist/esm/components/accordion/accordion.js

@@ -3,7 +3,7 @@ import { classes, style } from './accordion.style';
 import { clsx, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
 export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();

package/dist/esm/components/alert/alert.js

@@ -5,7 +5,8 @@ import { classes, useStyle } from './alert.style';
 import { Button } from '../button';
 import { Skeleton } from '../skeleton';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-import { Icon, statusMapToIconDefinition } from '../..';
+import { Icon } from '../icon';
+import { statusMapToIconDefinition } from '../status';
 export const Alert = memo(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
     return (_jsxs("div", { ...props, css: useStyle({ color: color || 'error' }), className: clsx(classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 _jsx("div", { className: classes.icon, children: loading

package/dist/esm/components/anchorList/anchorList.js

@@ -18,10 +18,11 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
     });
     const scrollToId = (id) => {
         const targetEl = document.getElementById(id);
-        if (!targetEl) {
+        const scrollerEl = getScroller();
+        if (!targetEl || !scrollerEl) {
             return false;
         }
-        getScroller().scrollTo({
+        scrollerEl.scrollTo({
             top: targetEl.offsetTop - offset,
             // 初始化之前无需平滑滚动
             behavior: initialized.current ? scrollBehavior : 'instant'
@@ -50,29 +51,34 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
      * 监听滚动设置高亮
      */
     const getScroller = () => {
-        return (typeof scroller === 'function' ? scroller() : scroller) || document.documentElement;
+        if (scroller) {
+            return typeof scroller === 'function' ? scroller() : scroller;
+        }
+        return document.documentElement;
     };
     const [activeId, setActiveId] = useSyncState();
     useEffect(() => {
         const scrollerEl = getScroller();
-        const scroll = () => {
-            let nearest;
-            let minDistance = Infinity;
-            const targets = anchors?.map(item => document.getElementById(item.id));
-            targets?.forEach(target => {
-                const top = target?.getBoundingClientRect().top;
-                if (typeof top === 'number') {
-                    const distance = Math.abs(top - offset);
-                    if (distance < minDistance) {
-                        minDistance = distance;
-                        nearest = target;
+        if (scrollerEl) {
+            const scroll = () => {
+                let nearest;
+                let minDistance = Infinity;
+                const targets = anchors?.map(item => document.getElementById(item.id));
+                targets?.forEach(target => {
+                    const top = target?.getBoundingClientRect().top;
+                    if (typeof top === 'number') {
+                        const distance = Math.abs(top - offset);
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            nearest = target;
+                        }
                     }
-                }
-            });
-            nearest && setActiveId(nearest.id);
-        };
-        !activeId.current && scroll();
-        return listenAllPredecessorsScroll(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+                });
+                nearest && setActiveId(nearest.id);
+            };
+            !activeId.current && scroll();
+            return listenAllPredecessorsScroll(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+        }
     }, [anchors, scroller, offset]);
     const [animating, setAnimating] = useDerivedState(prev => typeof prev !== 'undefined', [activeId.current]);
     return (_jsxs(Flex, { direction: "column", alignItems: "flex-start", ...props, css: style, className: clsx(classes.root, props.className), "data-animating": animating.current, children: [anchors?.map(item => {

package/dist/esm/components/boundary/errorBoundary.js

@@ -4,7 +4,7 @@ import { clsx } from '../../utils';
 import { classes, style } from './errorBoundary.style';
 import { Placeholder } from '../placeholder';
 import { Button } from '../button';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 const placeholderSlots = {
     description: 'pre'

package/dist/esm/components/bubbleConfirm/bubbleConfirm.js

@@ -4,7 +4,7 @@ import { classes, style } from './bubbleConfirm.style';
 import { clsx, useControlled, useLoading } from '../../utils';
 import { Button } from '../button';
 import { useTheme } from '../theme';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons/faCircleQuestion';
 export function BubbleConfirm({ icon = _jsx(Icon, { icon: faCircleQuestion }), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
     const { spacing } = useTheme();

package/dist/esm/components/calendar/panelYear.js

@@ -3,7 +3,7 @@ import { memo, useState } from 'react';
 import { classes } from './calendar.style';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 export const PanelYear = memo(({ innerD, setInnerD, onSelected, min, max }) => {

package/dist/esm/components/cascade/cascade.js

@@ -9,14 +9,14 @@ import { classes, cascadePopperStyle, style } from './cascade.style';
 import { CascadePanel } from './cascadePanel';
 import { SearchResult } from './searchResult';
 import { useSelection } from '../selectionContext';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 const CascadeContext = createContext({});
 export function useCascadeContext() {
     return useContext(CascadeContext);
 }
-export const Cascade = memo(({ inputProps, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
+export const Cascade = memo(({ inputProps, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
 // 共享属性，从OptionsBaseSharedProps继承
 loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }) => {
     /**
@@ -75,7 +75,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * --------------------------------------------------------------------
      * 控制选中状态
      */
-    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue, value, onChange);
+    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
     // 路径转单一键
     const toStandardValue = (path) => {
         if (!path) {

package/dist/esm/components/cascade/cascadePanel.js

@@ -7,7 +7,7 @@ import { classes } from './cascade.style';
 import { Collapse } from '../transitionBase';
 import { useCascadeContext } from './cascade';
 import { isUnset } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export function CascadePanel({ options, index = 0 }) {
     const { innerLoading, loadingOption, multiple, showCheckbox, primaryKey, labelKey, childrenKey, pathifiedValue, selectionStatus, optionsMap, openedPanels, onOptionClick, onCheckboxClick, verticalIndex, setVerticalIndex, horizontalIndex } = useCascadeContext();

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -3,7 +3,7 @@ import { memo, useRef } from 'react';
 import { clsx, cloneRef, useControlled, useTouchSpread } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
     const context = useCheckboxBaseGroupContext();

package/dist/esm/components/counter/counter.js

@@ -5,7 +5,7 @@ import { clsx, useControlled } from '../../utils';
 import { Button } from '../button';
 import { Input } from '../input';
 import { Flex } from '../flex';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {

package/dist/esm/components/curd/curd.js

@@ -14,7 +14,7 @@ import { CurdDialog } from './curdDialog';
 import { useAppContext } from '../app';
 import { BubbleConfirm } from '../bubbleConfirm';
 import { useSelectionContext } from '../selectionContext';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
 import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as buttonClasses } from '../button/button.style';
+import { classes as loadingClasses } from '../loading/loading.style';
 export const classes = defineInnerClasses('curd', [
     'filter',
     'filterGridContainer',
@@ -73,6 +74,10 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
     .${classes.card} {
         min-height: 0;
         border-radius: ${borderRadius}px;
+
+        .${loadingClasses.container} {
+            height: 100%;
+        }
     }
 
     &[data-variant=standard] {

package/dist/esm/components/curd/curdColumnConfig.js

@@ -9,9 +9,10 @@ import { SortableItem } from '../sortableItem';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import { isUnset, onDndDragEnd, useDndSensors } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
+export const CurdColumnConfig = memo(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+    columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = onDndDragEnd(e, columns, '_key');
         newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));

package/dist/esm/components/curd/curdDialog.js

@@ -9,7 +9,7 @@ import { Loading } from '../loading';
 import { Button } from '../button';
 import { classes, dialogStyle } from './curd.style';
 import { PickerDialog } from '../pickerDialog';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCopy } from '@fortawesome/free-regular-svg-icons/faCopy';
 export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
     const { columns, rowToForm, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;

package/dist/esm/components/curd/curdFilter.js

@@ -8,7 +8,7 @@ import { Grid } from '../grid';
 import { Button } from '../button';
 import { Collapse } from '../transitionBase';
 import { useTheme } from '../theme';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {

package/dist/esm/components/curd/curdResizable.js

@@ -4,7 +4,7 @@ import { Tooltip } from '../tooltip';
 import { Bubble } from '../bubble';
 import { MenuItem } from '../menuItem';
 import { Button } from '../button';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
 export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
     return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));

package/dist/esm/components/dataGrid/dataGrid.js

@@ -14,7 +14,7 @@ const DataGridContext = createContext({});
 export function useDataGridContext() {
     return useContext(DataGridContext);
 }
-export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded = [], expanded, onExpandedChange, paginatable = true, paginationProps = {}, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -61,7 +61,7 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
      * ---------------------------------------------------------------
      * 展开行
      */
-    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded || [], expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
@@ -79,6 +79,7 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
      * ---------------------------------------------------------------
      * 分页
      */
+    paginationProps ||= {};
     const [innerPage, setInnerPage] = useControlled(paginationProps.defaultPage ?? 1, paginationProps.page, paginationProps.onPageChange);
     const [innerPageSize, setInnerPageSize] = useControlled(paginationProps.defaultPageSize ?? 10, paginationProps.pageSize, paginationProps.onPageSizeChange);
     const pageChangeHandler = (page, pageSize) => {

package/dist/esm/components/dataGrid/dataGridHead.js

@@ -6,7 +6,7 @@ import { DataGrid } from './dataGrid';
 import { useRenderHead } from './columnResize';
 import { Checkbox } from '../checkbox';
 import { isUnset } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { useSelectionContext } from '../selectionContext';
 import { Tooltip } from '../tooltip';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';

package/dist/esm/components/dataGrid/dataGridRows.js

@@ -9,7 +9,7 @@ import { Radio } from '../radio';
 import { TdCell } from '../table';
 import { Button } from '../button';
 import { Collapse } from '../transitionBase';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faMinusSquare } from '@fortawesome/free-regular-svg-icons/faMinusSquare';
 import { faPlusSquare } from '@fortawesome/free-regular-svg-icons/faPlusSquare';
 import { classes } from './dataGrid.style';

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { Calendar } from '../calendar';
 import { Timer } from './timer';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
 import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
 dayjs.extend(customParseFormat);

package/dist/esm/components/dialog/dialog.js

@@ -5,7 +5,7 @@ import { classes, style } from './dialog.style';
 import { clsx, cloneRef, useControlled, useEscapeClosable, useLoading } from '../../utils';
 import { Button } from '../button';
 import { Draggable } from '../draggable';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);

package/dist/esm/components/drawer/drawer.js

@@ -5,7 +5,7 @@ import { clsx, useControlled } from '../../utils';
 import { OverlayBase } from '../overlayBase';
 import { Button } from '../button';
 import { Slide } from '../transitionBase';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faAnglesRight } from '@fortawesome/free-solid-svg-icons/faAnglesRight';
 const placementToDirection = {
     left: 'right',

package/dist/esm/components/gallery/gallery.js

@@ -5,7 +5,7 @@ import { clsx, cubicBezier, range, toArray, useControlled, useDraggable, useSync
 import { classes, style } from './gallery.style';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
@@ -22,8 +22,8 @@ const commonControlProps = {
     color: 'text'
 };
 const bounceBezier = cubicBezier(0, 0, 0, 1);
-export const Gallery = 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 = useSync(toArray(src));
+export const Gallery = 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 = useSync(toArray(src || []));
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);

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

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { classes, style } from './image.style';
 import { clsx, cloneRef, useControlled, useDerivedState } from '../../utils';
-import { Gallery } from '../gallery/gallery';
-import { Icon, Skeleton } from '../..';
+import { Gallery } from '../gallery';
+import { Icon } from '../icon';
+import { Skeleton } from '../skeleton';
 import { faEye } from '@fortawesome/free-regular-svg-icons/faEye';
 export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
     const imgRef = useRef(null);

package/dist/esm/components/inputBase/inputBase.js

@@ -5,7 +5,7 @@ import { clsx, fixInputNumber, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
-import { Icon } from '../..';
+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', 
 // 以下属性传递给<input/>

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

@@ -12,10 +12,10 @@ export function useMenuContext() {
     const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = useContext(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-export const Menu = memo(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+export const Menu = 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] = useControlled(defaultExpanded, expanded);
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded || [], expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);

package/dist/esm/components/menuItem/menuItem.js

@@ -6,7 +6,7 @@ import { Checkbox } from '../checkbox';
 import { usePopperContext } from '../popper';
 import { useMenuContext } from '../menu';
 import { Collapse } from '../transitionBase';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 export const MenuItem = 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 = useMenuContext();

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

@@ -1,26 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
-import { clsx, useDerivedState } from '../../utils';
+import { clsx, useContainer, useDerivedState } from '../../utils';
 import { createPortal } from 'react-dom';
 import { Fade } from '../transitionBase';
 export const overlayBaseTransitionDuration = 300;
-export function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
+export function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen = true, ...props }) {
     const [shouldRender, setShouldRender] = useDerivedState((prev = false) => {
         if (open) {
             return true;
         }
         return forceRender === true || prev;
     }, [open, forceRender]);
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = useContainer(container, effectContainer);
     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) => {
@@ -36,5 +36,5 @@ export function OverlayBase({ container, forceRender, open, onMaskClick, singleL
         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 !== 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);
+    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);
 }

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

@@ -5,7 +5,7 @@ import { classes } from './pagination.style';
 import { usePaginationContext } from './pagination';
 import { clsx } from '../../utils';
 import { useTheme } from '../theme';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons/faEllipsis';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';

package/dist/esm/components/palette/palette.js

@@ -7,7 +7,7 @@ import { Slider } from '../slider';
 import Color from 'color';
 import { Button } from '../button';
 import { ColorValueInput } from './colorValueInput';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 const sliderProps = {
     railSize: 9,

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

@@ -7,7 +7,7 @@ import { SelectionContext } from '../selectionContext';
 import { Divider } from '../divider';
 import { SelectedList } from '../selectedList';
 import { Button } from '../button';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
 export const PickerDialog = (({ ref, dialogRef, multiple, children, showSelectedList = !!multiple, selectedListPlacement = 'right', selectedListProps, selectedItemProps, onConfirm, rows, nodes, 
 // 以下属性从SelectionContextBaseProps继承

package/dist/esm/components/pinchable/pinchable.js

@@ -140,6 +140,12 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
             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 (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), ...pinchableHandles, children: cloneElement(children, {
             ref: cloneRef(contentRef, childrenProps.ref),
             className: clsx(classes.content, childrenProps.className),
@@ -152,6 +158,7 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
             },
             ...draggableHandles,
             onDoubleClick: doubleClickHandler,
+            onWheel: wheelHandler,
             onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
         }) }));
 });

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