@canlooks/can-ui 0.0.67 → 0.0.69

package/dist/esm/components/popper/popper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted } from '../../utils';
+import { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer } from '../../utils';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './popper.style';
 import { PopperContext, usePopperContext } from './popperContext';
@@ -19,7 +19,7 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
-export 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 }) {
+export 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 } = useTheme();
     offset ??= spacing[2];
     useImperativeHandle(popperRef, () => {
@@ -101,14 +101,14 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const getAnchorElement = () => {
         return anchorRef.current || (typeof syncAnchorElement.current === 'function' ? syncAnchorElement.current() : syncAnchorElement.current);
     };
-    const containerRef = useSync((typeof container === 'function' ? container() : container) || document.body);
+    const containerEl = useContainer(container, effectContainer);
     const innerPopperRef = useRef(null);
     const [popperBounding, setPopperBounding] = useState();
     const [openNextFrame, setOpenNextFrame] = useDerivedState(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = useRef(void 0);
     const placeB = 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;
@@ -184,7 +184,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
+                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -255,7 +255,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerRef.current === document.body ? void 0 : containerRef.current);
+                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -499,5 +499,5 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                             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: _jsx(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: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
 }

package/dist/esm/components/progress/progress.js

@@ -4,10 +4,12 @@ import { classes, useStyle } from './progress.style';
 import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 import { css, keyframes } from '@emotion/react';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
-export const Progress = 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 }) => {
+export const Progress = 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 } } = useTheme();
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
@@ -52,7 +54,7 @@ export const Progress = memo(({ showInfo = true, renderInfo, color = 'primary',
         }
         return;
     }, [indeterminate, variant, strokeLinecap, size, barWidth]);
-    return (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(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 (_jsx("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(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'
             ? _jsxs(_Fragment, { children: [_jsx("div", { className: classes.track, style: {
                             height: barWidth,
                             ...props.style

package/dist/esm/components/rating/rating.js

@@ -3,7 +3,7 @@ import { cloneElement, isValidElement, memo, useState } from 'react';
 import { clsx, useControlled } from '../../utils';
 import { classes, useStyle } from './rating.style';
 import { useTheme } from '../theme';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
 export const Rating = memo(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(Icon, { icon: faStar }), allowHalf, highlightSelectedOnly = false, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();

package/dist/esm/components/select/select.js

@@ -11,7 +11,7 @@ import { Input } from '../input';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
 import { useShallowSelection } from '../selectionContext';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
 export const Select = memo(({ inputProps, popperProps, popperRef, defaultOpen = false, open, onOpenChange, sizeAdaptable = true, children, multiple, defaultValue, value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, 

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useEffect, useRef, useState } from 'react';
 import { Collapse, Slide } from '../transitionBase';
-import { clsx, getEasyID, useColor } from '../../utils';
+import { clsx, getEasyID, useColor, useContainer } from '../../utils';
 import { classes, style } from './snackbarBase.style';
 import { TransitionGroup } from 'react-transition-group';
 import { StatusIcon, statusMapToIconDefinition } from '../status';
 import { Button } from '../button';
 import { createPortal } from 'react-dom';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 export class SnackbarBaseMethods {
     async info(_) {
@@ -33,7 +33,7 @@ const placementToIndex = {
     bottomRight: 5,
     rightBottom: 5
 };
-export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container }) => {
+export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = useState([]);
     const timers = useRef([]);
     useEffect(() => () => {
@@ -81,10 +81,10 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
     methods.warning = defineMethod('warning');
     methods.error = defineMethod('error');
     const css = style();
-    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    const containerEl = useContainer(container, effectContainer);
     return createPortal(stacks.flatMap((stack, i) => stack
         ? _jsx(TransitionGroup, { css: css, className: classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => _createElement(SnackbarBaseItem, { ...p, key: p.id })) }, i)
-        : []), containerEl);
+        : []), containerEl.current);
 });
 /**
  * ----------------------------------------------------------------------

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

@@ -4,7 +4,7 @@ import { clsx } from '../../utils';
 import { classes, useStyle } from './step.style';
 import { useStepperContext } from './stepper';
 import { useTheme } from '../theme';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';

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

@@ -4,7 +4,7 @@ import { classes } from './tabs.style';
 import { Popper } from '../popper';
 import { tabsEllipsisPopperStyle } from './tabsEllipsis.style';
 import { OptionsBase } from '../optionsBase';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons/faEllipsis';
 export const TabsEllipsis = memo(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
     const [open, setOpen] = useState(false);

package/dist/esm/components/tag/tag.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, useStyle } from './tag.style';
 import { clsx } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 export const Tag = memo(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {

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

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

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

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

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

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

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

@@ -1,16 +1,8 @@
-import { ReactElement } from 'react';
-import { ColorPropsValue, DivProps } from '../../types';
-export interface TouchRippleProps extends Omit<DivProps, 'children'> {
+import { ColorPropsValue, DefineElement, DivProps } from '../../types';
+export interface TouchRippleOverlayProps extends DivProps {
     color?: ColorPropsValue;
-    rippleProps?: DivProps;
-    children?: ReactElement;
+    /** 容器元素，默认为该组件元素的父元素 */
+    container?: DefineElement<HTMLElement>;
+    effectContainer?: DefineElement<HTMLElement>;
 }
-export declare const TouchRipple: {
-    (props: TouchRippleProps): ReactElement;
-    Ripple: typeof Ripple;
-};
-interface RippleProps extends DivProps {
-    color?: ColorPropsValue;
-}
-export declare const Ripple: import("react").MemoExoticComponent<({ ref, color, ...props }: RippleProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export {};
+export declare const TouchRipple: import("react").MemoExoticComponent<({ color, container, effectContainer, ...props }: TouchRippleOverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/touchRipple/touchRipple.js

@@ -1,54 +1,69 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { cloneElement, memo, useRef, useState, useLayoutEffect } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cloneRef, clsx, useContainer } from '../../utils';
 import { classes, useStyle } from './touchRipple.style';
-import { cloneRef, getEasyID } from '../../utils';
-export const TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
-    const renderedRipple = (_jsx(Ripple, { ...rippleProps, 
-        // 有children属性时，ref传递给children
-        ref: children ? ref : void 0 }));
-    return children
-        // 有children属性时，props传递给children，再追加Ripple组件
-        ? cloneElement(children, { ...props, ref }, children.props.children, renderedRipple)
-        : renderedRipple;
-});
-export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
-    const [ripples, setRipples] = useState([]);
-    const rippleRef = useRef(null);
-    useLayoutEffect(() => {
-        const wrapper = rippleRef.current?.parentElement;
-        if (wrapper) {
-            const pointerDown = (e) => {
-                setRipples(o => [
-                    ...o,
-                    {
-                        key: getEasyID('touch-ripple'),
-                        r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
-                        left: e.offsetX,
-                        top: e.offsetY,
+export const TouchRipple = memo(({ color = 'primary', container, effectContainer, ...props }) => {
+    const ref = useRef(null);
+    const [ripples, setRipples] = useState(new Map());
+    const incrementKey = useRef(0);
+    const containerEl = useContainer(container, effectContainer, null);
+    useEffect(() => {
+        const parentElement = containerEl.current ?? ref.current.parentElement;
+        if (parentElement) {
+            const pointerDown = ({ offsetX, offsetY }) => {
+                const maxWidth = Math.max(parentElement.clientWidth - offsetX, offsetX);
+                const maxHeight = Math.max(parentElement.clientHeight - offsetY, offsetY);
+                setRipples(o => {
+                    const r = new Map(o);
+                    const key = ++incrementKey.current;
+                    r.set(key, {
+                        key,
+                        diameter: Math.sqrt(maxWidth ** 2 + maxHeight ** 2) * 2,
+                        left: offsetX,
+                        top: offsetY,
                         leaving: false
-                    }
-                ]);
-                wrapper.addEventListener('pointerup', leave);
-                wrapper.addEventListener('pointerleave', leave);
+                    });
+                    return r;
+                });
+                parentElement.addEventListener('pointerup', leave);
+                parentElement.addEventListener('pointerleave', leave);
             };
             const leave = () => {
-                setRipples(o => o.map(v => ({ ...v, leaving: true })));
+                setRipples(o => {
+                    const r = new Map(o);
+                    r.forEach(v => v.leaving = true);
+                    return r;
+                });
                 removeLeaveListener();
             };
-            wrapper.addEventListener('pointerdown', pointerDown);
             const removeLeaveListener = () => {
-                wrapper.removeEventListener('pointerup', leave);
-                wrapper.removeEventListener('pointerleave', leave);
+                parentElement.removeEventListener('pointerup', leave);
+                parentElement.removeEventListener('pointerleave', leave);
             };
+            parentElement.addEventListener('pointerdown', pointerDown);
             return () => {
-                wrapper.removeEventListener('pointerdown', pointerDown);
+                parentElement.removeEventListener('pointerdown', pointerDown);
                 removeLeaveListener();
             };
         }
-        return;
-    }, []);
-    const onTransitionEnd = (key) => {
-        setRipples(o => o.filter(v => v.key !== key));
+    }, [containerEl.current]);
+    const leftHandler = (key) => {
+        setRipples(o => {
+            const r = new Map(o);
+            r.delete(key);
+            if (!r.size) {
+                incrementKey.current = 0;
+            }
+            return r;
+        });
     };
-    return (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color: color || 'primary' }), className: classes.root, children: ripples.map(({ key, r, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+    const children = (_jsx("div", { ...props, ref: cloneRef(ref, props.ref), css: useStyle({ color }), className: clsx(classes.root, props.className), children: ripples.values().toArray().map(({ key, diameter, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: {
+                width: diameter,
+                height: diameter,
+                left, top
+            }, "data-leaving": leaving, onTransitionEnd: () => leftHandler(key) }, key)) }));
+    return containerEl.current
+        ? createPortal(children, containerEl.current)
+        : children;
 });

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

@@ -1,42 +1,40 @@
-import { css, keyframes } from '@emotion/react';
 import { defineInnerClasses, useColor, useCss } from '../../utils';
+import { css, keyframes } from '@emotion/react';
+import { zIndex } from '../theme';
 import Color from 'color';
-export const classes = defineInnerClasses('touch-ripple', [
+export const classes = defineInnerClasses('touch-ripple-overlay', [
     'ripple'
 ]);
 export function useStyle({ color }) {
     const colorValue = useColor(color);
-    return useCss(({ easing }) => {
-        const bg = Color(colorValue).alpha(.1).string();
-        return css `
-            overflow: hidden;
-            pointer-events: none;
-            border-radius: inherit;
+    return useCss(({ easing }) => css `
+        position: absolute;
+        inset: 0;
+        z-index: ${zIndex.touchRipple};
+        overflow: hidden;
+        pointer-events: none;
+        
+        .${classes.ripple} {
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background-color: ${Color(colorValue).alpha(.1).string()};
             position: absolute;
-            inset: 0;
-            z-index: 0;
-
-            .${classes.ripple} {
-                aspect-ratio: 1;
-                border-radius: 50%;
-                position: absolute;
-                translate: -50% -50%;
-                background-color: ${bg};
-                animation: ${showRippleAnim} .4s ${easing.easeIn} forwards;
-                transition: opacity .4s ${easing.easeIn};
-
-                &[data-leaving=true] {
-                    opacity: 0;
-                }
+            scale: 0;
+            translate: -50% -50%;
+            animation: ${rippleAnim} .4s ${easing.easeOut} forwards;
+            transition: opacity .4s ${easing.easeIn};
+            
+            &[data-leaving=true] {
+                opacity: 0;
             }
-        `;
-    }, [colorValue]);
+        }
+    `, [colorValue]);
 }
-const showRippleAnim = keyframes `
+const rippleAnim = keyframes `
     0% {
         scale: 0;
     }
-
+    
     100% {
         scale: 1;
     }

package/dist/esm/components/transfer/transfer.js

@@ -4,7 +4,7 @@ import { classes, style } from './transfer.style';
 import { clsx, useControlled } from '../../utils';
 import { Button } from '../button';
 import { TransferPanel } from './transferPanel';
-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';
 const TransferContext = createContext({});
@@ -12,8 +12,8 @@ export function useTransferContext() {
     const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = useContext(TransferContext);
     return { options, primaryKey, value, allowSelectAll, showHeader };
 }
-export const Transfer = memo(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }) => {
-    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+export const Transfer = memo(({ options, primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue, value, onChange, ...props }) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue || [], value, onChange);
     const [leftSelected, setLeftSelected] = useState([]);
     const [rightSelected, setRightSelected] = useState([]);
     const toRight = () => {

package/dist/esm/components/transfer/transferPanel.js

@@ -4,7 +4,8 @@ import { classes } from './transfer.style';
 import { Checkbox } from '../checkbox';
 import { useTransferContext } from './transfer';
 import { OptionsBase } from '../optionsBase';
-export const TransferPanel = memo(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }) => {
+export const TransferPanel = memo(({ title, type = 'left', selectedValue, onChange, renderList, renderItem, ...props }) => {
+    selectedValue ||= [];
     const { options, primaryKey, value, allowSelectAll, showHeader } = useTransferContext();
     const selfOptions = useMemo(() => {
         const valueSet = new Set(value);

package/dist/esm/components/tree/tree.js

@@ -8,7 +8,7 @@ import { clsx, useTreeSearch } from '../../utils';
 import { Highlight } from '../highlight';
 import { Placeholder } from '../placeholder';
 import { TreeNode } from './treeNode';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
 const TreeContext = createContext({});
 export function useTreeContext() {

package/dist/esm/components/tree/treeNode.js

@@ -7,7 +7,7 @@ import { Button } from '../button';
 import { Checkbox } from '../checkbox';
 import { useTreeContext } from './tree';
 import { useSelectionContext } from '../selectionContext';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();

package/dist/esm/components/treeSelect/treeSelect.js

@@ -9,7 +9,7 @@ import { popperStyle } from '../popper/popper.style';
 import { Tag } from '../tag';
 import { classes, style } from './treeSelect.style';
 import { useSelection } from '../selectionContext';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 export const TreeSelect = memo(({ inputProps, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>

package/dist/esm/components/typography/typography.js

@@ -6,7 +6,7 @@ import { Button } from '../button';
 import { Tooltip } from '../tooltip';
 import { Input } from '../input';
 import { Textarea } from '../textarea';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faCopy } from '@fortawesome/free-regular-svg-icons/faCopy';
 import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare';

package/dist/esm/components/upload/dropArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
 import { classes, style } from './dropArea.style';
 import { clsx } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
 export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);

package/dist/esm/components/upload/fileItem.js

@@ -6,7 +6,7 @@ import { Button } from '../button';
 import { Progress } from '../progress';
 import { useTheme } from '../theme';
 import { useItemStatus } from './itemStatus';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';

package/dist/esm/components/upload/imageItem.js

@@ -6,7 +6,7 @@ import { Image } from '../image';
 import { Button } from '../button';
 import { Progress } from '../progress';
 import { clsx } from '../../utils';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
 import { faEye } from '@fortawesome/free-regular-svg-icons/faEye';
 export const ImageItem = memo((props) => {

package/dist/esm/components/upload/upload.js

@@ -11,7 +11,7 @@ import { DndContext } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import { SortableItem } from '../sortableItem';
 import { DropArea } from './dropArea';
-import { Icon } from '../..';
+import { Icon } from '../icon';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 const markFileId = (files) => {
@@ -21,7 +21,7 @@ const markFileId = (files) => {
         }
     }
 };
-export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
+export const Upload = memo(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue, value, onChange, onUpload, ...props }) => {
     const wrapperRef = useRef(null);
     const itemRefs = useRef(new Map());
     useImperativeHandle(props.ref, () => {
@@ -51,7 +51,7 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         };
         return wrapperRef.current;
     });
-    const [innerValue, setInnerValue] = useControlled(defaultValue, value, value => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue || [], value, value => {
         markFileId(value);
         onChange?.(value);
     });

package/dist/esm/components/waterfall/waterfallItem.js

@@ -1,9 +1,9 @@
-import { cloneElement, useCallback, useLayoutEffect, useRef } from 'react';
+import { cloneElement, useCallback, useEffect, useRef } from 'react';
 import { classes } from './waterfall.style';
 import { cloneRef, clsx } from '../../utils';
 export const WaterfallItem = ({ ref, onLoad, child }) => {
     const innerRef = useRef(null);
-    useLayoutEffect(() => {
+    useEffect(() => {
         const el = innerRef.current;
         if (!el) {
             throw Error(`Children of <Waterfall> must expose 'ref' prop`);

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -7,7 +7,8 @@ import { Button } from '../../components/button';
 import { iframeStyle } from './documentViewer.style';
 import { useDerivedState, useLoading } from '../../utils';
 import { PdfViewer } from './pdfViewer';
-import { Gallery, Icon } from '../..';
+import { Icon } from '../../components/icon';
+import { Gallery } from '../../components/gallery';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 export const DocumentViewer = memo(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = useMemo(() => {

package/dist/esm/extensions/documentViewer/documentViewer.style.js

@@ -61,7 +61,7 @@ export const svgStyle = defineCss(({ spacing, background, divider, text, colors,
         background-color: ${background.body};
         overflow: hidden;
     }
-
+    
     .${classes.svgContent}, .${classes.object} {
         width: 100%;
         height: 100%;
@@ -69,6 +69,7 @@ export const svgStyle = defineCss(({ spacing, background, divider, text, colors,
 
     .${classes.object} {
         pointer-events: none;
+        user-select: none;
         transition: rotate .4s ${easing.easeOut};
     }
 `);

package/dist/esm/extensions/documentViewer/svgViewer.d.ts

@@ -1,13 +1,13 @@
-import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { Theme } from '../../components/theme';
 import { LoadingProps } from '../../components/loading';
 import { DocumentViewerBaseProps } from './documentViewer';
+import { PinchableProps } from '../../components/pinchable';
 export interface SvgViewerProps extends DocumentViewerBaseProps, Omit<LoadingProps, 'onError'> {
     /** 是否显示下载按钮，默认为true */
     showDownload?: boolean;
     /** 是否可切换主题，默认为true */
     themeSwitchable?: boolean;
     onThemeChange?(mode: Theme['mode']): void;
-    transformWrapperProps?: ReactZoomPanPinchProps;
+    pinchableProps?: PinchableProps;
 }
 export declare const SvgViewer: import("react").MemoExoticComponent<(props: SvgViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;