@canlooks/can-ui 0.0.68 → 0.0.69

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,7 +9,7 @@ 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({});

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,7 +9,7 @@ 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, }) => {
     columns ||= [];

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/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';

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/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/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/progress/progress.js

@@ -4,7 +4,7 @@ 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, status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {

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.js

@@ -8,7 +8,7 @@ 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(_) {

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/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({});

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) => {

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>;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { memo, useMemo, useRef, useState } from 'react';
 import { classes, svgStyle } from './documentViewer.style';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { clsx } from '../../utils';
 import { Button } from '../../components/button';
 import { Tooltip } from '../../components/tooltip';
@@ -10,7 +9,7 @@ import { Switch } from '../../components/switch';
 import { ThemeProvider, useTheme } from '../../components/theme';
 import { Loading } from '../../components/loading';
 import { useBlob, useDocumentTitle } from './documentViewer';
-import { Icon } from '../..';
+import { Icon } from '../../components/icon';
 import { faDiagramProject } from '@fortawesome/free-solid-svg-icons/faDiagramProject';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
@@ -20,6 +19,7 @@ import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
 import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
+import { Pinchable } from '../../components/pinchable';
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
@@ -27,7 +27,7 @@ const commonButtonProps = {
 export const SvgViewer = memo((props) => {
     return (_jsx(ThemeProvider, { children: _jsx(SvgViewerContent, { ...props }) }));
 });
-function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, transformWrapperProps, 
+function SvgViewerContent({ showDownload = true, themeSwitchable = true, onThemeChange, pinchableProps, 
 // 从DocumentViewerBaseProps继承来的属性
 src, filename, onError, setDocumentTitle, ...props }) {
     /**
@@ -57,13 +57,17 @@ src, filename, onError, setDocumentTitle, ...props }) {
             return URL.createObjectURL(file);
         }
         return;
-    }, [blob]);
+    }, [blob, filename]);
     /**
      * ---------------------------------------------------------------
      * 工具栏
      */
-    const transformWrapperRef = useRef(null);
+    const pinchableRef = useRef(null);
     const [rotate, setRotate] = useState(0);
+    const resetHandler = () => {
+        pinchableRef.current.reset();
+        setRotate(0);
+    };
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');
@@ -73,9 +77,9 @@ src, filename, onError, setDocumentTitle, ...props }) {
         }
     };
     const objectOnLoad = () => {
-        transformWrapperRef.current.centerView();
+        // transformWrapperRef.current!.centerView()
     };
-    return (_jsxs(Loading, { ...props, css: svgStyle, className: clsx(classes.svgViewer, props.className), open: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(Icon, { icon: faDiagramProject, className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faRotateRight }) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(Icon, { icon: faExpand }) }) }), themeSwitchable &&
+    return (_jsxs(Loading, { ...props, css: svgStyle, className: clsx(classes.svgViewer, props.className), open: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(Icon, { icon: faDiagramProject, className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faRotateRight }) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => pinchableRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => pinchableRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: resetHandler, children: _jsx(Icon, { icon: faExpand }) }) }), themeSwitchable &&
                                 _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Switch, { checkedLabel: _jsx(Icon, { icon: faSun }), unCheckedLabel: _jsx(Icon, { icon: faMoon }), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
-                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: _jsx(TransformComponent, { wrapperClass: classes.svgContainer, contentClass: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
+                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(Pinchable, { ...pinchableProps, ref: pinchableRef, className: clsx(classes.svgContainer, pinchableProps?.className), children: _jsx("div", { className: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
 }