@canlooks/can-ui 0.0.164 → 0.0.165

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

@@ -10,4 +10,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles[];
+export declare const style: () => import("@emotion/utils").SerializedStyles[];

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

@@ -1,10 +1,11 @@
 import { ElementType } from 'react';
-import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
 import { Id, OverridableComponent, OverridableProps } from '../../types';
+import { UseSortableInput } from '@dnd-kit/react/sortable';
 export type SortableItemOwnProps = {
     id: Id;
+    index: number;
     disabled?: boolean;
-    sortableArguments?: Arguments;
+    sortableArguments?: UseSortableInput;
     noStyle?: boolean;
 };
 export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -2,39 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableItem = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const sortable_1 = require("@dnd-kit/sortable");
-const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
-const react_2 = require("@emotion/react");
 const sortableItem_style_1 = require("./sortableItem.style");
-exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, noStyle, ...props }) => {
-    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
+const sortable_1 = require("@dnd-kit/react/sortable");
+exports.SortableItem = (({ component: Component = 'div', id, index, disabled, sortableArguments, noStyle, ...props }) => {
+    const { ref } = (0, sortable_1.useSortable)({
         ...sortableArguments,
-        disabled,
-        id
+        id,
+        index,
+        disabled
     });
-    const preventDefaultCallback = (0, react_1.useRef)(void 0);
-    const removeListener = () => {
-        if (preventDefaultCallback.current) {
-            removeEventListener('touchmove', preventDefaultCallback.current);
-            preventDefaultCallback.current = void 0;
-        }
-        removeEventListener('pointerup', onPointerUp);
-    };
-    const onPointerUp = (0, react_1.useCallback)(removeListener, []);
-    const syncOnTouchStart = (0, utils_1.useSync)(props.onTouchStart);
-    const onTouchStart = (0, react_1.useCallback)((e) => {
-        syncOnTouchStart.current?.(e);
-        addEventListener('touchmove', preventDefaultCallback.current = e => {
-            e.cancelable && e.preventDefault();
-        }, { passive: false });
-        addEventListener('pointerup', onPointerUp);
-    }, []);
-    (0, react_1.useEffect)(() => removeListener, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), css: sortableItem_style_1.style, className: (0, utils_1.clsx)(sortableItem_style_1.classes.root, props.className), style: {
-                    transform: utilities_1.CSS.Transform.toString(transform),
-                    transition,
-                    ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-no-style": noStyle, "data-dragging": isDragging, "data-draggable": !disabled }), !noStyle && isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: (0, utils_1.cloneRef)(ref, props.ref), className: (0, utils_1.clsx)(sortableItem_style_1.classes.root, props.className), "data-no-style": noStyle, "data-draggable": !disabled }));
 });

package/dist/cjs/components/sortableItem/sortableItem.style.d.ts

@@ -1,5 +1,3 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;
-export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/sortableItem/sortableItem.style.js

@@ -1,24 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalGrabbingStyle = exports.style = exports.classes = void 0;
-const react_1 = require("@emotion/react");
+exports.classes = void 0;
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
-exports.style = (0, react_1.css) `
-    @layer reset {
-        &:not([data-no-style=true]) {
-            &[data-draggable=true] {
-                cursor: grab;
-
-                &:active {
-                    cursor: grabbing;
-                }
-            }
-        }
-    }
-`;
-exports.globalGrabbingStyle = (0, react_1.css) `
-    * {
-        cursor: grabbing;
-    }
-`;

package/dist/cjs/components/status/status.style.d.ts

@@ -5,4 +5,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/stepper/step.style.d.ts

@@ -9,4 +9,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color, gap }: Required<Pick<StepProps, 'color' | 'gap'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color, gap }: Required<Pick<StepProps, 'color' | 'gap'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/stepper/stepper.style.d.ts

@@ -1,4 +1,4 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/switch/switch.style.d.ts

@@ -11,4 +11,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/table/table.style.d.ts

@@ -4,4 +4,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/table/tableSticky.style.d.ts

@@ -1 +1 @@
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/tabs/tab.d.ts

@@ -15,5 +15,7 @@ export interface TabProps extends Omit<DivProps, 'prefix'> {
     sortable?: boolean;
     /** @private 内部使用，用于表示改选项卡是否为激活状态 */
     _active?: boolean;
+    /** @private */
+    _index?: number;
 }
-export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -11,7 +11,7 @@ const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 const icon_1 = require("../icon");
 const sortableItem_1 = require("../sortableItem");
 const transitionBase_1 = require("../transitionBase");
-exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
+exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
     const context = (0, tabs_1.useTabsContext)();
     const colorValue = (0, utils_1.useColor)(color ?? context.color);
     const _closable = closable ?? context.closable;
@@ -20,7 +20,7 @@ exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, va
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tabWrapper, props.className), component: transitionBase_1.Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.tab, style: {
+    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tabWrapper, props.className), component: transitionBase_1.Collapse, orientation: "horizontal", id: value, index: _index, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.tab, style: {
                 borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
                 color: _active ? colorValue : void 0,
                 ...props.style

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactElement, ReactNode, SetStateAction, Dispatch } from 'react';
 import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { Tab, TabProps } from './tab';
-import { DragEndEvent } from '@dnd-kit/core';
+import { DragDropEvents } from '@dnd-kit/abstract';
 export type TabType = TabProps & Obj;
 type TabsSharedProps = {
     variant?: 'line' | 'card';
@@ -32,7 +32,7 @@ export interface TabsProps<T extends TabType = TabType> extends TabsSharedProps,
      * @param e
      * @param tabs 仅{@link tabs}模式支持，使用children时，该参数为`undefined`
      */
-    onSort?(e: DragEndEvent, tabs?: T[]): void;
+    onSort?(e: Parameters<DragDropEvents<any, any, any>['dragend']>[0], tabs?: T[]): void;
     /** 触发change事件的事件，默认为`click` */
     changeEvent?: 'click' | 'pointerDown';
 }

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

@@ -11,9 +11,8 @@ const theme_1 = require("../theme");
 const tab_1 = require("./tab");
 const tabsEllipsis_1 = require("./tabsEllipsis");
 const lineIndicator_1 = require("./lineIndicator");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
 const react_transition_group_1 = require("react-transition-group");
+const react_3 = require("@dnd-kit/react");
 const TabsContext = (0, react_2.createContext)({});
 function useTabsContext() {
     return (0, react_2.useContext)(TabsContext);
@@ -49,10 +48,10 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
                     }, value: value, label: p[labelKey], [eventName]: (e) => {
                         p[eventName]?.(e);
                         setInnerValue(value);
-                    }, _active: active }));
+                    }, _active: active, _index: i }));
             });
         }
-        return react_2.Children.map(props.children, c => {
+        return react_2.Children.map(props.children, (c, _index) => {
             if ((0, react_2.isValidElement)(c)) {
                 const { value } = c.props;
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
@@ -70,7 +69,8 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
                             !(0, utils_1.isUnset)(value) && setInnerValue(value);
                         }
                     },
-                    _active: active
+                    _active: active,
+                    _index
                 });
             }
             return c;
@@ -125,26 +125,23 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
      * ----------------------------------------------------------------
      * 拖拽
      */
-    const tabKeys = tabs
-        ? tabs.map(tab => tab[primaryKey])
-        : react_2.Children.map(props.children, c => (0, react_2.isValidElement)(c) ? c.props.value : c);
-    const dragEndHandler = (e) => {
+    const dragEndHandler = e => {
         if (props.onSort) {
             const newTabs = tabs
                 ? (0, utils_1.onDndDragEnd)(e, tabs, primaryKey)
                 : void 0;
-            props.onSort(e, newTabs);
+            newTabs && props.onSort(e, newTabs);
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating.current, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
-                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: tabKeys, disabled: !sortable, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
-                                    color, variant, closable, onClose, sortable,
-                                    animating: animating.current, setAnimating
-                                }), [
-                                    color, variant, closable, onClose, sortable,
-                                    animating.current
-                                ]), children: [(0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, children: renderTabs() }), variant === 'line' &&
-                                        (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
+                            color, variant, closable, onClose, sortable,
+                            animating: animating.current, setAnimating
+                        }), [
+                            color, variant, closable, onClose, sortable,
+                            animating.current
+                        ]), children: [(0, jsx_runtime_1.jsx)(react_3.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, children: renderTabs() }) }), variant === 'line' &&
+                                (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
 });

package/dist/cjs/components/tabs/tabs.style.d.ts

@@ -18,4 +18,4 @@ export declare const classes: {
     root: string;
 };
 export declare const indicatorWidth = 2;
-export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles[];
+export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/tabs/tabsEllipsis.style.d.ts

@@ -1 +1 @@
-export declare const tabsEllipsisPopperStyle: () => import("@emotion/react").SerializedStyles[];
+export declare const tabsEllipsisPopperStyle: () => import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/tag/tag.style.d.ts

@@ -7,4 +7,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color }: Required<Pick<TagProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: Required<Pick<TagProps, 'color'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/textarea/textarea.style.d.ts

@@ -3,4 +3,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/timeline/timeline.style.d.ts

@@ -8,7 +8,7 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;
 export declare function useTimelineItemStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/toggleButton/toggleButton.style.d.ts

@@ -1,4 +1,4 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/tooltip/tooltip.style.d.ts

@@ -6,4 +6,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

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

@@ -6,4 +6,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/transfer/transfer.style.d.ts

@@ -10,4 +10,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/transitionBase/transitionBase.style.d.ts

@@ -2,8 +2,8 @@ import { TransitionBaseProps } from './transitionBase';
 export declare const classes: {
     root: string;
 };
-export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/react").SerializedStyles;
-export declare const fadeStyle: () => import("@emotion/react").SerializedStyles;
-export declare const sweepingStyle: () => import("@emotion/react").SerializedStyles;
-export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/react").SerializedStyles;
-export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/react").SerializedStyles;
+export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/utils").SerializedStyles;
+export declare const fadeStyle: () => import("@emotion/utils").SerializedStyles;
+export declare const sweepingStyle: () => import("@emotion/utils").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/tree/tree.style.d.ts

@@ -14,4 +14,4 @@ export declare const classes: {
 };
 export declare function useStyle({ indent }: {
     indent: number;
-}): import("@emotion/react").SerializedStyles[];
+}): import("@emotion/utils").SerializedStyles[];

package/dist/cjs/components/tree/treeDnd.style.d.ts

@@ -12,5 +12,5 @@ export declare const treeDndClasses: {
 };
 export declare function useStyle({ indent }: {
     indent: number;
-}): import("@emotion/react").SerializedStyles;
-export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/typography/typography.style.d.ts

@@ -10,5 +10,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function useStyle({ color }: Required<Pick<TypographyProps, 'color'>>): import("@emotion/react").SerializedStyles;
-export declare const editStyle: import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: Required<Pick<TypographyProps, 'color'>>): import("@emotion/utils").SerializedStyles;
+export declare const editStyle: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/upload/dropArea.style.d.ts

@@ -4,4 +4,4 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/upload/upload.js

@@ -10,13 +10,12 @@ const fileItem_1 = require("./fileItem");
 const react_transition_group_1 = require("react-transition-group");
 const transitionBase_1 = require("../transitionBase");
 const imageItem_1 = require("./imageItem");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
 const sortableItem_1 = require("../sortableItem");
 const dropArea_1 = require("./dropArea");
 const icon_1 = require("../icon");
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faUpload_1 = require("@fortawesome/free-solid-svg-icons/faUpload");
+const react_2 = require("@dnd-kit/react");
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
@@ -90,7 +89,7 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
     const removeHandler = (id) => {
         setInnerValue(o => o.filter(f => f.id !== id));
     };
-    const dragEndHandler = (e) => {
+    const dragEndHandler = e => {
         const newValue = (0, utils_1.onDndDragEnd)(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
@@ -98,19 +97,19 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
                     ref: innerInputRef,
                     className: upload_style_1.classes.input,
                     onChange: inputChangeHandler
-                }), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
-                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
-                                    ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
-                                    : showButton &&
-                                        (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
-                                                r
-                                                    ? itemRefs.current.set(file.id, r)
-                                                    : itemRefs.current.delete(file.id);
-                                            }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
-                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
+                }), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: type === 'file'
+                    ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
+                                ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                : showButton &&
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map((file, index) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortableItem, id: file.id, index: index, disabled: !sortable, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
                                             r
                                                 ? itemRefs.current.set(file.id, r)
                                                 : itemRefs.current.delete(file.id);
-                                        }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
+                                        }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
+                    : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) }) }) }), innerValue.current.map((file, index) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortableItem, id: file.id, index: index, disabled: !sortable, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
+                                        r
+                                            ? itemRefs.current.set(file.id, r)
+                                            : itemRefs.current.delete(file.id);
+                                    }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) })] }));
 });
 exports.Upload.DropArea = dropArea_1.DropArea;

package/dist/cjs/components/upload/upload.style.d.ts

@@ -8,10 +8,10 @@ export declare const classes: {
     file: string;
     files: string;
     images: string;
-    sortable: string;
     control: string;
     imageWrap: string;
+    sortableItem: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/upload/upload.style.js

@@ -17,7 +17,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload', [
     'images',
     'imageWrap',
     'image',
-    'sortable'
+    'sortableItem'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
     const maskBg = (0, color_1.default)(background.content).alpha(.9).string();
@@ -150,18 +150,12 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadiu
                 }
             }
 
-            .${exports.classes.sortable}[data-dragging=true] {
-                position: relative;
-                z-index: 1;
-            }
-
             &[data-sortable=true] {
-                .${exports.classes.file}, .${exports.classes.imageWrap} {
-                    cursor: grab;
+                .${exports.classes.sortableItem}[data-dragging=true] {
+                    position: relative;
+                    z-index: 1;
                 }
-            }
 
-            &:not([data-sortable=true]) {
                 .${exports.classes.file}, .${exports.classes.imageWrap} {
                     cursor: default;
                 }

package/dist/cjs/components/waterfall/waterfall.style.d.ts

@@ -8,4 +8,4 @@ export declare function useStyle({ columnCount, columnGap, rowGap }: {
     columnCount: ResponsiveValue;
     columnGap: ResponsiveValue;
     rowGap: ResponsiveValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/utils").SerializedStyles;

package/dist/cjs/extensions/documentViewer/documentViewer.style.d.ts

@@ -11,5 +11,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const iframeStyle: import("@emotion/react").SerializedStyles;
-export declare const svgStyle: () => import("@emotion/react").SerializedStyles;
+export declare const iframeStyle: import("@emotion/utils").SerializedStyles;
+export declare const svgStyle: () => import("@emotion/utils").SerializedStyles;

package/dist/cjs/extensions/textFormatter/textFormatter.style.d.ts

@@ -1,4 +1,4 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/utils").SerializedStyles;

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

@@ -1,18 +1,20 @@
-import { DragEndEvent } from '@dnd-kit/core';
 import { Id, Obj } from '../types';
 import { NodeType, SortInfo } from '../components/tree';
 import { BezierFunc } from './bezier';
+import { Customizable, DragDropEvents, Sensors } from '@dnd-kit/abstract';
 /**
- * 默认提供给@dnd-kit的sensors属性
+ * 默认提供给@dnd-kit<DragDropProvider/>的sensors属性
  */
-export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+export declare const defaultSensors: Customizable<Sensors>;
 /**
- * <DndContext>组件通用的onDragEnd方法
+ * <DragDropProvider>组件通用的onDragEnd方法
  * @param e 事件
- * @param prevState 传入需要排序的数组
+ * @param items 传入需要排序的数组
  * @param primaryKey 索引用的主键，默认为`id`
+ * @return 返回新的数组，但如果顺序未改变，会得到null
  */
-export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: keyof S): S[] | undefined;
+export declare function onDndDragEnd<T extends Obj>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[], primaryKey?: keyof T): T[] | null;
+export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
 /**
  * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
  * @param info 信息