@canlooks/can-ui 0.0.41 → 0.0.43

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

@@ -24,6 +24,7 @@ function useStyle({ color }) {
         const filledBg = mode === 'light' ? colorValue : c.alpha(.8).string();
         return (0, react_1.css) `
             display: flex;
+            align-items: center;
             gap: ${spacing[3]}px;
             padding: ${spacing[4]}px ${spacing[5]}px;
             border-radius: ${borderRadius}px;

package/dist/cjs/components/checkboxBase/checkboxBase.js

@@ -18,7 +18,7 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
     }
     const checkboxRef = (0, react_1.useRef)(null);
     const innerInputRef = (0, react_1.useRef)(null);
-    const [innerChecked, setInnerChecked] = (0, utils_1.useControlled)(defaultChecked, context.checked ?? checked);
+    const [innerChecked, setInnerChecked] = (0, utils_1.useControlled)(defaultChecked, checked);
     const showRipple = (0, utils_1.useTouchRipple)(color);
     const clickHandler = (e) => {
         if (disabled || readOnly) {
@@ -29,7 +29,6 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
         e.target = e.currentTarget = innerInputRef.current;
         props.onClick?.(e);
         onChange?.(e);
-        context.setChecked?.(newChecked);
         setInnerChecked(newChecked);
     };
     const inputKeydown = (e) => {

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

@@ -14,7 +14,5 @@ export type CheckboxBaseGroupProps<I extends ItemType, V extends Id = Id> = Chec
 export declare function useCheckboxBaseGroupContext(): {
     size?: Size;
     color?: ColorPropsValue;
-    checked?: boolean;
-    setChecked?(checked: boolean): void;
 };
 export declare const CheckboxBaseGroup: <I extends ItemType, V extends Id = Id>(props: CheckboxBaseGroupProps<I, V>) => ReactElement;

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -11,9 +11,9 @@ const checkbox_1 = require("../checkbox");
 const radio_1 = require("../radio");
 const theme_1 = require("../theme");
 const selectionContext_1 = require("../selectionContext");
-const checkboxBaseGroupContext = (0, react_1.createContext)({});
+const CheckboxBaseGroupContext = (0, react_1.createContext)({});
 function useCheckboxBaseGroupContext() {
-    return (0, react_1.useContext)(checkboxBaseGroupContext);
+    return (0, react_1.useContext)(CheckboxBaseGroupContext);
 }
 exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
@@ -46,5 +46,5 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.clsx)(checkboxBaseGroup_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.clsx)(checkboxBaseGroup_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(CheckboxBaseGroupContext, { value: (0, react_1.useMemo)(() => ({ size, color }), [size, color]), children: renderItems() }) }));
 });

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

@@ -10,4 +10,288 @@ export interface ClickAwayProps extends DivProps {
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
     targets?: () => Element | null | (Element | null)[];
 }
-export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
+    ref: (ref: Element | null) => void;
+    key: string | number | bigint | null;
+    defaultChecked: boolean;
+    defaultValue: string | number | readonly string[];
+    suppressContentEditableWarning: boolean;
+    suppressHydrationWarning: boolean;
+    accessKey: string;
+    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoFocus: boolean;
+    className: string;
+    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contextMenu: string;
+    dir: string;
+    draggable: boolean | "false" | "true";
+    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    hidden: boolean;
+    id: string;
+    lang: string;
+    nonce: string;
+    slot: string;
+    spellCheck: boolean | "false" | "true";
+    style: import("react").CSSProperties;
+    tabIndex: number;
+    title: string;
+    translate: "yes" | "no";
+    radioGroup: string;
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    about: string;
+    content: string;
+    datatype: string;
+    inlist: any;
+    prefix: string;
+    property: string;
+    rel: string;
+    resource: string;
+    rev: string;
+    typeof: string;
+    vocab: string;
+    autoCorrect: string;
+    autoSave: string;
+    color: string;
+    itemProp: string;
+    itemScope: boolean;
+    itemType: string;
+    itemID: string;
+    itemRef: string;
+    results: number;
+    security: string;
+    unselectable: "off" | "on";
+    popover: "" | "auto" | "manual";
+    popoverTargetAction: "hide" | "show" | "toggle";
+    popoverTarget: string;
+    inert: boolean;
+    inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is: string;
+    exportparts: string;
+    part: string;
+    "aria-activedescendant": string;
+    "aria-atomic": boolean | "false" | "true";
+    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-braillelabel": string;
+    "aria-brailleroledescription": string;
+    "aria-busy": boolean | "false" | "true";
+    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-colcount": number;
+    "aria-colindex": number;
+    "aria-colindextext": string;
+    "aria-colspan": number;
+    "aria-controls": string;
+    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-describedby": string;
+    "aria-description": string;
+    "aria-details": string;
+    "aria-disabled": boolean | "false" | "true";
+    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-errormessage": string;
+    "aria-expanded": boolean | "false" | "true";
+    "aria-flowto": string;
+    "aria-grabbed": boolean | "false" | "true";
+    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+    "aria-hidden": boolean | "false" | "true";
+    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-keyshortcuts": string;
+    "aria-label": string;
+    "aria-labelledby": string;
+    "aria-level": number;
+    "aria-live": "off" | "assertive" | "polite";
+    "aria-modal": boolean | "false" | "true";
+    "aria-multiline": boolean | "false" | "true";
+    "aria-multiselectable": boolean | "false" | "true";
+    "aria-orientation": "horizontal" | "vertical";
+    "aria-owns": string;
+    "aria-placeholder": string;
+    "aria-posinset": number;
+    "aria-pressed": boolean | "mixed" | "false" | "true";
+    "aria-readonly": boolean | "false" | "true";
+    "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-required": boolean | "false" | "true";
+    "aria-roledescription": string;
+    "aria-rowcount": number;
+    "aria-rowindex": number;
+    "aria-rowindextext": string;
+    "aria-rowspan": number;
+    "aria-selected": boolean | "false" | "true";
+    "aria-setsize": number;
+    "aria-sort": "none" | "ascending" | "descending" | "other";
+    "aria-valuemax": number;
+    "aria-valuemin": number;
+    "aria-valuenow": number;
+    "aria-valuetext": string;
+    dangerouslySetInnerHTML: {
+        __html: string | TrustedHTML;
+    };
+    onCopy: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCopyCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCut: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCutCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPaste: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onPasteCapture: import("react").ClipboardEventHandler<HTMLDivElement>;
+    onCompositionEnd: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionEndCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionStartCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdate: import("react").CompositionEventHandler<HTMLDivElement>;
+    onCompositionUpdateCapture: import("react").CompositionEventHandler<HTMLDivElement>;
+    onFocus: import("react").FocusEventHandler<HTMLDivElement>;
+    onFocusCapture: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlur: import("react").FocusEventHandler<HTMLDivElement>;
+    onBlurCapture: import("react").FocusEventHandler<HTMLDivElement>;
+    onChange: import("react").FormEventHandler<HTMLDivElement>;
+    onChangeCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInput: import("react").FormEventHandler<HTMLDivElement>;
+    onBeforeInputCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onInput: import("react").FormEventHandler<HTMLDivElement>;
+    onInputCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onReset: import("react").FormEventHandler<HTMLDivElement>;
+    onResetCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmit: import("react").FormEventHandler<HTMLDivElement>;
+    onSubmitCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalid: import("react").FormEventHandler<HTMLDivElement>;
+    onInvalidCapture: import("react").FormEventHandler<HTMLDivElement>;
+    onLoad: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onError: import("react").ReactEventHandler<HTMLDivElement>;
+    onErrorCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onKeyDown: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyDownCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPress: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyPressCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onKeyUpCapture: import("react").KeyboardEventHandler<HTMLDivElement>;
+    onAbort: import("react").ReactEventHandler<HTMLDivElement>;
+    onAbortCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlay: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThrough: import("react").ReactEventHandler<HTMLDivElement>;
+    onCanPlayThroughCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onDurationChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptied: import("react").ReactEventHandler<HTMLDivElement>;
+    onEmptiedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncrypted: import("react").ReactEventHandler<HTMLDivElement>;
+    onEncryptedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onEnded: import("react").ReactEventHandler<HTMLDivElement>;
+    onEndedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedData: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedDataCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadata: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadedMetadataCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStart: import("react").ReactEventHandler<HTMLDivElement>;
+    onLoadStartCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPause: import("react").ReactEventHandler<HTMLDivElement>;
+    onPauseCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlay: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlaying: import("react").ReactEventHandler<HTMLDivElement>;
+    onPlayingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgress: import("react").ReactEventHandler<HTMLDivElement>;
+    onProgressCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onRateChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onResize: import("react").ReactEventHandler<HTMLDivElement>;
+    onResizeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeked: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekedCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeeking: import("react").ReactEventHandler<HTMLDivElement>;
+    onSeekingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalled: import("react").ReactEventHandler<HTMLDivElement>;
+    onStalledCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspend: import("react").ReactEventHandler<HTMLDivElement>;
+    onSuspendCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdate: import("react").ReactEventHandler<HTMLDivElement>;
+    onTimeUpdateCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChange: import("react").ReactEventHandler<HTMLDivElement>;
+    onVolumeChangeCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaiting: import("react").ReactEventHandler<HTMLDivElement>;
+    onWaitingCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onAuxClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onAuxClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenu: import("react").MouseEventHandler<HTMLDivElement>;
+    onContextMenuCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClick: import("react").MouseEventHandler<HTMLDivElement>;
+    onDoubleClickCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onDrag: import("react").DragEventHandler<HTMLDivElement>;
+    onDragCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnd: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEndCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnter: import("react").DragEventHandler<HTMLDivElement>;
+    onDragEnterCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExit: import("react").DragEventHandler<HTMLDivElement>;
+    onDragExitCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeave: import("react").DragEventHandler<HTMLDivElement>;
+    onDragLeaveCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOver: import("react").DragEventHandler<HTMLDivElement>;
+    onDragOverCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDragStart: import("react").DragEventHandler<HTMLDivElement>;
+    onDragStartCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onDrop: import("react").DragEventHandler<HTMLDivElement>;
+    onDropCapture: import("react").DragEventHandler<HTMLDivElement>;
+    onMouseDown: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseDownCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseEnter: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseLeave: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMove: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseMoveCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOut: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOutCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOver: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseOverCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUp: import("react").MouseEventHandler<HTMLDivElement>;
+    onMouseUpCapture: import("react").MouseEventHandler<HTMLDivElement>;
+    onSelect: import("react").ReactEventHandler<HTMLDivElement>;
+    onSelectCapture: import("react").ReactEventHandler<HTMLDivElement>;
+    onTouchCancel: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchCancelCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEnd: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchEndCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMove: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchMoveCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStart: import("react").TouchEventHandler<HTMLDivElement>;
+    onTouchStartCapture: import("react").TouchEventHandler<HTMLDivElement>;
+    onPointerDown: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerDownCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMove: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerMoveCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUp: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerUpCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancel: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerCancelCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerEnter: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerLeave: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOver: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOverCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOut: import("react").PointerEventHandler<HTMLDivElement>;
+    onPointerOutCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onGotPointerCaptureCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onLostPointerCaptureCapture: import("react").PointerEventHandler<HTMLDivElement>;
+    onScroll: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollCapture: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollEnd: import("react").UIEventHandler<HTMLDivElement>;
+    onScrollEndCapture: import("react").UIEventHandler<HTMLDivElement>;
+    onWheel: import("react").WheelEventHandler<HTMLDivElement>;
+    onWheelCapture: import("react").WheelEventHandler<HTMLDivElement>;
+    onAnimationStart: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationStartCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEnd: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationEndCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIteration: import("react").AnimationEventHandler<HTMLDivElement>;
+    onAnimationIterationCapture: import("react").AnimationEventHandler<HTMLDivElement>;
+    onToggle: import("react").ToggleEventHandler<HTMLDivElement>;
+    onBeforeToggle: import("react").ToggleEventHandler<HTMLDivElement>;
+    onTransitionCancel: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionCancelCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionEnd: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionEndCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionRun: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionRunCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionStart: import("react").TransitionEventHandler<HTMLDivElement>;
+    onTransitionStartCapture: import("react").TransitionEventHandler<HTMLDivElement>;
+}> | undefined;

package/dist/cjs/components/clickAway/clickAway.js

@@ -29,11 +29,10 @@ function ClickAway({ ref, container = self, eventType = 'click', onClickAway, di
             containerEl.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
-    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, ref, childRef), [children?.props.ref, ref]);
     return !disabled && (0, react_1.isValidElement)(children)
         ? (0, react_1.cloneElement)(children, {
             ...props,
-            ref: clonedRef
+            ref: (0, utils_1.cloneRef)(children.props.ref, ref, childRef)
         })
         : children;
 }

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

@@ -38,7 +38,7 @@ function ResizableColumn(props) {
         }
         return next;
     };
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
+    const draggableHandles = (0, utils_1.useDraggable)({
         onDragStart(e) {
             const next = findNext();
             return {
@@ -47,11 +47,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();
@@ -66,5 +66,5 @@ function ResizableColumn(props) {
                 columnRefs.current.push(r);
                 cellRef.current = r;
             }
-        }, children: [props.children, (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.resizeHandle, ...draggableHandle })] }));
+        }, children: [props.children, (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.resizeHandle, ...draggableHandles })] }));
 }

package/dist/cjs/components/dataGrid/dataGrid.js

@@ -17,7 +17,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.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 }) => {
+exports.DataGrid = (0, react_1.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/cjs/components/dataGrid/dataGridRows.js

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

package/dist/cjs/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/cjs/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/cjs/components/draggable/draggable.js

@@ -4,37 +4,32 @@ exports.Draggable = Draggable;
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 function Draggable({ translateLimit, container, children, ...draggableOptions }) {
-    const syncOptions = (0, utils_1.useSync)(draggableOptions);
-    const syncTranslateLimit = (0, utils_1.useSync)(translateLimit);
-    const syncContainer = (0, utils_1.useSync)(container);
     const [translate, setTranslate] = (0, react_1.useState)([0, 0]);
     const props = children.props;
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
+    const draggableHandles = (0, utils_1.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 = (0, utils_1.range)(startX + deltaX, -clientWidth / 2, clientWidth / 2);
-                    newY = (0, utils_1.range)(startY + deltaY, -clientHeight / 2, clientHeight / 2);
+                    newX = (0, utils_1.range)(startX + dx, -clientWidth / 2, clientWidth / 2);
+                    newY = (0, utils_1.range)(startY + dy, -clientHeight / 2, clientHeight / 2);
                 }
             }
             setTranslate([newX, newY]);
         },
-        onPointerDown: props?.onPointerDown,
-        onTouchStart: props?.onTouchStart,
         onClick: props?.onClick
     });
     const style = (0, react_1.useMemo)(() => ({
@@ -44,11 +39,11 @@ function Draggable({ translateLimit, container, children, ...draggableOptions })
     if ((0, react_1.isValidElement)(children)) {
         return (0, react_1.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/cjs/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>;