@canlooks/can-ui 0.0.41 → 0.0.43

package/dist/esm/components/clickAway/clickAway.js

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement, useCallback, useEffect, useRef } from 'react';
+import { cloneElement, isValidElement, useEffect, useRef } from 'react';
 import { cloneRef, isChildOf, toArray, useSync } from '../../utils';
 export function ClickAway({ ref, container = self, eventType = 'click', onClickAway, disabled, children, targets, ...props }) {
     const syncOnClickAway = useSync(onClickAway);
@@ -26,11 +26,10 @@ export function ClickAway({ ref, container = self, eventType = 'click', onClickA
             containerEl.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
-    const clonedRef = useCallback(cloneRef(children?.props.ref, ref, childRef), [children?.props.ref, ref]);
     return !disabled && isValidElement(children)
         ? cloneElement(children, {
             ...props,
-            ref: clonedRef
+            ref: cloneRef(children.props.ref, ref, childRef)
         })
         : children;
 }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { ThCell } from '../table';
 import { createContext, useContext, useRef } from 'react';
 import { classes } from './dataGrid.style';
-import { useDraggableHandle } from '../../utils';
+import { useDraggable } from '../../utils';
 const ColumnResizeContextProvider = createContext({
     columnResizable: false,
     columnRefs: { current: [] },
@@ -34,7 +34,7 @@ function ResizableColumn(props) {
         }
         return next;
     };
-    const draggableHandle = useDraggableHandle({
+    const draggableHandles = useDraggable({
         onDragStart(e) {
             const next = findNext();
             return {
@@ -43,11 +43,11 @@ function ResizableColumn(props) {
                 nextStartWidth: next?.offsetWidth
             };
         },
-        onDrag({ deltaX, startData }) {
+        onDrag({ diff: [dx, dy], data: { selfStartWidth, nextStartWidth } }) {
             const next = findNext();
-            cellRef.current.style.width = startData.selfStartWidth + deltaX + 'px';
+            cellRef.current.style.width = selfStartWidth + dx + 'px';
             if (next) {
-                next.style.width = startData.nextStartWidth - deltaX + 'px';
+                next.style.width = nextStartWidth - dy + 'px';
             }
             else {
                 scrollToEnd();
@@ -62,5 +62,5 @@ function ResizableColumn(props) {
                 columnRefs.current.push(r);
                 cellRef.current = r;
             }
-        }, children: [props.children, _jsx("div", { className: classes.resizeHandle, ...draggableHandle })] }));
+        }, children: [props.children, _jsx("div", { className: classes.resizeHandle, ...draggableHandles })] }));
 }

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

@@ -13,7 +13,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 = false, 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 }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行

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

@@ -43,7 +43,9 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
                         expandableIndex = j;
                     }
                     const Component = multiple ? Checkbox : Radio;
-                    return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey, row), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                    return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
+                                toggleSelected(trKey, row);
+                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
                 }
                 const { 
                 // 排除无需加入dom节点的属性

package/dist/esm/components/descriptions/descriptionItem.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, ElementType, ReactElement } from 'react';
+import { ReactNode, ElementType } from 'react';
 import { DescriptionsSharedProps } from './descriptions';
 import { GridItemProps } from '../grid';
-import { MergeProps, ResponsiveProp } from '../../types';
+import { MergeProps, OverridableComponent, ResponsiveProp } from '../../types';
 export interface DescriptionGridItemOwnProps extends DescriptionsSharedProps {
     label?: ReactNode;
     /** @alias {@link children} */
@@ -13,4 +13,4 @@ export interface DescriptionTableItemProps extends DescriptionGridItemOwnProps {
     children?: ReactNode;
 }
 export type DescriptionItemProps<C extends ElementType = 'div'> = MergeProps<DescriptionGridItemOwnProps, GridItemProps<C>> | DescriptionTableItemProps;
-export declare const DescriptionItem: <C extends ElementType = "div">(props: DescriptionItemProps<C>) => ReactElement;
+export declare const DescriptionItem: OverridableComponent<DescriptionItemProps>;

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

@@ -1,14 +1,14 @@
-import { ReactElement } from 'react';
-import { DraggableOptions, HandleProps } from '../../utils';
+import { ReactElement, ReactNode } from 'react';
+import { DraggableGestureOptions, HandleProps } from '../../utils';
 import { DefineElement } from '../../types';
 export type DraggableTargetProps = {
     style: {
         translate: string;
     };
 };
-export interface DraggableProps<H extends Element = Element> extends DraggableOptions<H> {
-    translateLimit?(translate: [number, number]): [number, number];
+export interface DraggableProps extends DraggableGestureOptions {
+    translateLimit?(targetTranslate: [number, number]): [number, number];
     container?: DefineElement;
-    children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps<H>) => ReactElement);
+    children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps) => ReactNode);
 }
-export declare function Draggable<H extends Element = Element>({ translateLimit, container, children, ...draggableOptions }: DraggableProps<H>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Draggable({ translateLimit, container, children, ...draggableOptions }: DraggableProps): ReactNode;

package/dist/esm/components/draggable/draggable.js

@@ -1,37 +1,32 @@
 import { cloneElement, isValidElement, useMemo, useState } from 'react';
-import { range, useDraggableHandle, useSync } from '../../utils';
+import { range, useDraggable } from '../../utils';
 export function Draggable({ translateLimit, container, children, ...draggableOptions }) {
-    const syncOptions = useSync(draggableOptions);
-    const syncTranslateLimit = useSync(translateLimit);
-    const syncContainer = useSync(container);
     const [translate, setTranslate] = useState([0, 0]);
     const props = children.props;
-    const draggableHandle = useDraggableHandle({
+    const draggableHandles = useDraggable({
         ...draggableOptions,
         onDragStart(e) {
-            syncOptions.current.onDragStart?.(e);
+            draggableOptions.onDragStart?.(e);
             return [...translate];
         },
         onDrag(info, e) {
-            syncOptions.current.onDrag?.(info, e);
-            const { deltaX, deltaY, startData: [startX, startY] } = info;
-            let newX = startX + deltaX;
-            let newY = startY + deltaY;
-            if (syncTranslateLimit.current) {
-                [newX, newY] = syncTranslateLimit.current([newX, newY]);
+            draggableOptions.onDrag?.(info, e);
+            const { diff: [dx, dy], data: [startX, startY] } = info;
+            let newX = startX + dx;
+            let newY = startY + dy;
+            if (translateLimit) {
+                [newX, newY] = translateLimit([newX, newY]);
             }
             else {
-                const containerEl = typeof syncContainer.current === 'function' ? syncContainer.current() : syncContainer.current;
+                const containerEl = typeof container === 'function' ? container() : container;
                 if (containerEl) {
                     const { clientWidth, clientHeight } = containerEl;
-                    newX = range(startX + deltaX, -clientWidth / 2, clientWidth / 2);
-                    newY = range(startY + deltaY, -clientHeight / 2, clientHeight / 2);
+                    newX = range(startX + dx, -clientWidth / 2, clientWidth / 2);
+                    newY = range(startY + dy, -clientHeight / 2, clientHeight / 2);
                 }
             }
             setTranslate([newX, newY]);
         },
-        onPointerDown: props?.onPointerDown,
-        onTouchStart: props?.onTouchStart,
         onClick: props?.onClick
     });
     const style = useMemo(() => ({
@@ -41,11 +36,11 @@ export function Draggable({ translateLimit, container, children, ...draggableOpt
     if (isValidElement(children)) {
         return cloneElement(children, {
             style,
-            ...draggableHandle
+            ...draggableHandles
         });
     }
     if (typeof children === 'function') {
-        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandle);
+        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandles);
     }
     return children;
 }

package/dist/esm/components/{image/imagePreview.d.ts → gallery/gallery.d.ts}

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { ModalProps } from '../modal';
-import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 export interface ImagePreviewProps extends ModalProps {
     src?: string | string[];
     defaultIndex?: number;
@@ -16,6 +15,11 @@ export interface ImagePreviewProps extends ModalProps {
     showClose?: boolean;
     /** 自定义渲染控制按钮 */
     renderControl?: ReactNode;
-    transformWrapperProps?: ReactZoomPanPinchProps;
+    /** 元素弹性移动距离，默认为24 */
+    bounceElementTranslate?: number;
+    /** 手指弹性拖拽距离，默认为240 */
+    bounceDragDistance?: number;
+    /** 滑动生效的速度，默认为450 (px/s) */
+    effectiveSpeed?: number;
 }
-export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, transformWrapperProps, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Gallery: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, bounceElementTranslate, bounceDragDistance, effectiveSpeed, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useRef } from 'react';
+import { Modal } from '../modal';
+import { clsx, cubicBezier, range, toArray, useControlled, useDraggable, useSync } from '../../utils';
+import { classes, style } from './gallery.style';
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../..';
+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';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+import { faArrowRotateLeft } from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft';
+import { faArrowRotateRight } from '@fortawesome/free-solid-svg-icons/faArrowRotateRight';
+import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
+import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
+import { ImageItem } from './imageItem';
+const commonControlProps = {
+    className: classes.button,
+    shape: 'circular',
+    size: 'large',
+    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));
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const close = () => {
+        setInnerOpen(false);
+    };
+    const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
+    const wrapperRef = useRef(null);
+    const imageItemRefs = useRef([]);
+    imageItemRefs.current = [];
+    /**
+     * --------------------------------------------------------------
+     * 左右滚动翻页
+     */
+    const draggableHandles = useDraggable({
+        onDragStart() {
+            wrapperRef.current.dataset.transition = 'drag';
+            return {
+                isFit: imageItemRefs.current[innerIndex.current].isFit(),
+                startLeft: -innerIndex.current * wrapperRef.current.offsetWidth
+            };
+        },
+        onDrag({ diff: [dx], data: { isFit: { left, right }, startLeft } }) {
+            if ((!left && dx > 0) || (!right && dx < 0)) {
+                return;
+            }
+            const min = -wrapperRef.current.offsetWidth * (srcArr.current.length - 1);
+            const max = 0;
+            let newLeft = range(startLeft + dx, min - bounceDragDistance, max + bounceDragDistance);
+            if (newLeft < min) {
+                newLeft = min - bounceBezier(-(newLeft - min) / bounceDragDistance) * bounceElementTranslate;
+            }
+            else if (newLeft > max) {
+                newLeft = max + bounceBezier((newLeft - max) / bounceDragDistance) * bounceElementTranslate;
+            }
+            wrapperRef.current.style.left = newLeft + 'px';
+        },
+        onDragEnd({ diff: [dx], speed: [speedX], data: { isFit: { left, right } } }) {
+            wrapperRef.current.dataset.transition = '';
+            if (!dx) {
+                return;
+            }
+            if ((!left && dx > 0) || (!right && dx < 0)) {
+                return;
+            }
+            alowSlideTransition();
+            const reset = () => {
+                wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
+            };
+            const goPrev = () => {
+                innerIndex.current === 0
+                    ? reset()
+                    : goPrevLoop();
+            };
+            const goNext = () => {
+                innerIndex.current === srcArr.current.length - 1
+                    ? reset()
+                    : goNextLoop();
+            };
+            if (effectiveSpeed && speedX * 1000 >= effectiveSpeed) {
+                dx > 0 ? goPrev() : goNext();
+                return;
+            }
+            const halfWidth = wrapperRef.current.offsetWidth / 2;
+            if (dx > halfWidth) {
+                goPrev();
+            }
+            else if (dx < -halfWidth) {
+                goNext();
+            }
+            else {
+                reset();
+            }
+        },
+        onClick: () => {
+            doubleClicked.current = false;
+            setTimeout(() => {
+                !doubleClicked.current && close();
+            }, 250);
+        }
+    });
+    const doubleClicked = useRef(false);
+    const doubleClickHandler = () => {
+        doubleClicked.current = true;
+    };
+    const alowSlideTransition = () => {
+        wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
+    };
+    const goPrevLoop = () => {
+        alowSlideTransition();
+        setInnerIndex(o => {
+            imageItemRefs.current[o].reset();
+            return (o + srcArr.current.length - 1) % srcArr.current.length;
+        });
+    };
+    const goNextLoop = () => {
+        alowSlideTransition();
+        setInnerIndex(o => {
+            imageItemRefs.current[o].reset();
+            return (o + 1) % srcArr.current.length;
+        });
+    };
+    /**
+     * -----------------------------------------------------------------------------
+     * 放大缩小与旋转
+     */
+    const rotateLeft = () => {
+        imageItemRefs.current[innerIndex.current].rotateLeft();
+    };
+    const rotateRight = () => {
+        imageItemRefs.current[innerIndex.current].rotateRight();
+    };
+    const zoomIn = () => {
+        imageItemRefs.current[innerIndex.current].zoomIn();
+    };
+    const zoomOut = () => {
+        imageItemRefs.current[innerIndex.current].zoomOut();
+    };
+    const reset = () => {
+        imageItemRefs.current[innerIndex.current].reset();
+    };
+    const resetAll = () => {
+        imageItemRefs.current.forEach(item => {
+            item.reset(false);
+        });
+    };
+    return (_jsx(Modal, { ...props, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onClosed: resetAll, maskProps: {
+            ...props.maskProps,
+            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotation &&
+                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: rotateLeft, children: _jsx(Icon, { icon: faArrowRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: rotateRight, children: _jsx(Icon, { icon: faArrowRotateRight }) }) })] }), showZoom &&
+                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: zoomOut, children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: zoomIn, children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: reset, children: _jsx(Icon, { icon: faExpand }) }) })] }), showClose &&
+                                _jsx(Button, { ...commonControlProps, onClick: close, children: _jsx(Icon, { icon: faXmark }) })] }), srcArr.current.length > 1 &&
+                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: goPrevLoop, children: _jsx(Icon, { icon: faAngleLeft }) }), _jsx(Button, { ...commonControlProps, onClick: goNextLoop, children: _jsx(Icon, { icon: faAngleRight }) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
+        }, children: srcArr.current.length > 0 &&
+            _jsx("div", { className: classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: _jsx("div", { ref: wrapperRef, className: classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: e => e.currentTarget.dataset.transition = '', children: srcArr.current.map((src, i) => _jsx(ImageItem, { ref: r => {
+                            r && imageItemRefs.current.push(r);
+                        }, style: { left: i * 100 + '%' }, src: src }, i)) }) }) }));
+});

package/dist/{cjs/components/image/imagePreview.style.d.ts → esm/components/gallery/gallery.style.d.ts}

@@ -4,7 +4,9 @@ export declare const classes: {
     counter: string;
     swap: string;
     control: string;
-    imageWrapper: string;
+    galleryContainer: string;
+    galleryWrapper: string;
+    imageItem: string;
 } & {
     root: string;
 };

package/dist/esm/components/{image/imagePreview.style.js → gallery/gallery.style.js}

@@ -6,10 +6,12 @@ export const classes = defineInnerClasses('image-preview', [
     'control',
     'swap',
     'counter',
-    'imageWrapper',
+    'galleryContainer',
+    'galleryWrapper',
+    'imageItem',
     'image'
 ]);
-export const style = defineCss(({ spacing, easing }) => css `
+export const style = defineCss(({ spacing, easing, breakpoints }) => css `
     .${classes.control} {
         display: flex;
         gap: ${spacing[4]}px;
@@ -49,11 +51,11 @@ export const style = defineCss(({ spacing, easing }) => css `
         background-image: none !important;
         background-color: rgba(0, 0, 0, .4);
         transition: background-color .25s ${easing.easeOut};
-    
+
         &:hover {
             background-color: rgba(0, 0, 0, .3);
         }
-    
+
         &:active {
             transition: background-color 0s;
             background-color: rgba(0, 0, 0, .5);
@@ -68,17 +70,51 @@ export const style = defineCss(({ spacing, easing }) => css `
         padding: 0;
     }
 
-    .${classes.imageWrapper} {
-        width: 100%;
-        height: 100%;
+    .${classes.galleryContainer} {
+        &, .${classes.galleryWrapper}, .${classes.imageItem}, .${classes.image} {
+            width: 100%;
+            height: 100%;
+        }
+
+        overflow: hidden;
+        position: relative;
 
-        .${classes.image} {
-            padding: 40px;
+        .${classes.galleryWrapper} {
+            &, .${classes.imageItem} {
+                position: absolute;
+                top: 0;
+            }
+            
+            &[data-transition=set] {
+                transition: left .5s ${easing.bounce} 0s;
+            }
+
+            &[data-transition=drag] {
+                transition: left .1s linear;
+            }
+
+            .${classes.imageItem} {
+                padding: 90px;
+
+                .${classes.image} {
+                    object-fit: contain;
+                }
+            }
+        }
+    }
+
+    @media (max-width: ${breakpoints.sm}px) {
+        .${classes.control}, .${classes.swap}, .${classes.button} {
+            display: none;
+        }
+
+        .${classes.galleryContainer} .${classes.galleryWrapper} {
+            &[data-transition=true] {
+                transition: left .4s ${easing.ease};
+            }
             
-            img {
-                max-width: 100%;
-                max-height: 100%;
-                transition: rotate .4s ${easing.easeOut};
+            .${classes.imageItem} {
+                padding: 0;
             }
         }
     }

package/dist/esm/components/gallery/imageItem.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { PinchableProps, PinchableRef } from '../pinchable';
+export interface ImageItemRef extends PinchableRef {
+    isFit(): {
+        left: boolean;
+        right: boolean;
+    };
+}
+interface ImageItemProps extends PinchableProps {
+    ref?: Ref<ImageItemRef>;
+    src?: string;
+}
+export declare function ImageItem({ ref, src, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { classes } from './gallery.style';
+import { useEffect, useImperativeHandle, useRef } from 'react';
+import { clsx } from '../../utils';
+import { Pinchable } from '../pinchable';
+export function ImageItem({ ref, src, ...props }) {
+    useImperativeHandle(ref, () => {
+        if (pinchableRef.current) {
+            pinchableRef.current.isFit = () => {
+                const { x: pinchableX, width: pinchableWidth } = pinchableRef.current.getBoundingClientRect();
+                const { x: imgX, width: imgWidth } = imgRef.current.getBoundingClientRect();
+                return {
+                    left: imgX >= pinchableX,
+                    right: imgX + imgWidth <= pinchableX + pinchableWidth
+                };
+            };
+        }
+        return pinchableRef.current;
+    });
+    const pinchableRef = useRef(null);
+    const imgRef = useRef(null);
+    const fitSize = () => {
+        const img = imgRef.current;
+        const imgRatio = img.naturalWidth / img.naturalHeight;
+        const pinchableRatio = pinchableRef.current.clientWidth / pinchableRef.current.clientHeight;
+        if (imgRatio >= pinchableRatio) {
+            img.style.width = '100%';
+            img.style.height = 'auto';
+        }
+        else {
+            img.style.width = 'auto';
+            img.style.height = '100%';
+        }
+    };
+    useEffect(() => {
+        !imgRef.current.complete && imgRef.current.addEventListener('load', fitSize, { once: true });
+    }, []);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            imgRef.current.complete && fitSize();
+        });
+        resizeObserver.observe(pinchableRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (_jsx(Pinchable, { ref: pinchableRef, className: clsx(classes.imageItem, props.className), ...props, children: _jsx("img", { ref: imgRef, className: classes.image, src: src, draggable: false, alt: "" }) }));
+}

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

@@ -0,0 +1 @@
+export * from './gallery';

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

@@ -0,0 +1 @@
+export * from './gallery';

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 { ImagePreview, ImagePreviewProps } from './imagePreview';
+import { Gallery, ImagePreviewProps } from '../gallery/gallery';
 export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;
@@ -20,5 +20,5 @@ export interface ImageProps extends DivProps {
 }
 export declare const Image: {
     (props: ImageProps): ReactElement;
-    Preview: typeof ImagePreview;
+    Gallery: typeof Gallery;
 };

package/dist/esm/components/image/image.js

@@ -2,7 +2,7 @@ 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 { ImagePreview } from './imagePreview';
+import { Gallery } from '../gallery/gallery';
 import { Icon, Skeleton } from '../..';
 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 }) => {
@@ -43,6 +43,6 @@ export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? _jsx(Skeleton, { className: classes.skeleton })), !!renderedActions && !failed.current &&
                 _jsx("div", { className: classes.mask, children: renderedActions }), previewable && src &&
-                _jsx(ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                _jsx(Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
 });
-Image.Preview = ImagePreview;
+Image.Gallery = Gallery;

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

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

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

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

package/dist/esm/components/overlayBase/overlayBase.js

@@ -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": typeof container !== 'undefined', 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 !== 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);
 }

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

@@ -1,10 +1,10 @@
 import { DivProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { ColorInstance } from 'color';
 export interface PaletteProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     defaultValue?: ColorInstance;
     value?: ColorInstance;
     onChange?(value: ColorInstance): void;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
 }
-export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, draggableOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, gestureOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;