@canlooks/can-ui 0.0.96 → 0.0.98

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

@@ -14,114 +14,127 @@ const icon_1 = require("../icon");
 const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const treeDnd_1 = require("./treeDnd");
-exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
+const treeDnd_style_1 = require("./treeDnd.style");
+exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet, toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
     disabled ??= context.disabled;
-    const { selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
-    const currentExpanded = expandedSet.has(value);
-    const status = selectionStatus.get(value);
+    const { optionsMap: nodesMap, selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
+    const currentExpanded = expandedSet.has(id);
+    const status = selectionStatus.get(id);
     const clickHandler = () => {
-        !readOnly && !disabled && toggleSelected(value);
-        clickLabelToExpand && toggleExpanded(value);
+        !readOnly && !disabled && toggleSelected(id);
+        clickLabelToExpand && toggleExpanded(id);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
     /**
      * ---------------------------------------------------------------------
      * 拖拽部分
      */
-    const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = (0, treeDnd_1.useTreeDndContext)();
-    const onClick = (e) => {
-        props.onClick?.(e);
-        !showCheckbox && clickHandler();
-    };
+    const { sortable, showDragHandle, onSort, dragging: [dragging, setDragging], overing, placement } = (0, treeDnd_1.useTreeDndContext)();
+    const isDraggingNode = dragging === id;
+    const nodeRef = (0, react_1.useRef)(null);
     const dragHandleProps = (0, utils_1.useDraggable)({
         disabled: !sortable,
-        onDragStart(e) {
-            setDragging(value);
-            setOvering(void 0);
-            currentExpanded && toggleExpanded(value);
-        },
-        onDrag({ diff: [diffX] }) {
-            setIsOffsetSatisfied(diffX > indent * 2);
+        onDragStart() {
+            overing.current = void 0;
+            setDragging(id);
+            currentExpanded && toggleExpanded(id);
         },
         onDragEnd() {
-            inactiveParentBlock();
-            leaveMask();
+            overing.current && placement.current && onSort?.({
+                source: dragging,
+                destination: overing.current,
+                placement: placement.current
+            });
             setDragging(void 0);
-            if (typeof overing !== 'undefined' && placement.current) {
-                onSort?.({
-                    source: dragging,
-                    destination: overing,
-                    placement: isOffsetSatisfied ? 'child' : placement.current
-                });
-            }
-        },
-        onClick
+            inactiveBlock();
+        }
     });
-    const nodeRef = (0, react_1.useRef)(null);
-    const activeParentBlock = (target) => {
-        return (0, utils_1.findPredecessor)(target, parent => {
-            const ret = parent.classList.contains(tree_style_1.classes.levelBlock);
-            if (ret) {
+    const pointerEnterMaskArea = (e, _placement) => {
+        if (!isDraggingNode) {
+            activeBlock(e.currentTarget, _placement);
+        }
+    };
+    const pointerLeaveMaskArea = (e) => {
+        !isDraggingNode && inactiveBlock(e.currentTarget);
+    };
+    const pointerEnterPredecessor = (e, upLevel) => {
+        activeBlock(e.currentTarget, 'parent', upLevel);
+    };
+    const pointerLeavePredecessor = (e) => {
+        inactiveBlock(e.currentTarget);
+    };
+    const activeBlock = (el, _placement, upLevel = 0) => {
+        if (_placement === 'parent') {
+            let i = upLevel;
+            let parentId = id;
+            do {
+                const currentNode = nodesMap.get(parentId);
+                if (!currentNode._isLast) {
+                    return;
+                }
+                parentId = currentNode._parentId;
+            } while (--i && parentId);
+            overing.current = parentId;
+            placement.current = 'after';
+        }
+        else {
+            overing.current = id;
+            placement.current = _placement;
+        }
+        el.dataset.active = 'true';
+        _placement !== 'child' && (0, utils_1.findPredecessor)(el, parent => {
+            if (parent.classList.contains(treeDnd_style_1.treeDndClasses.levelBlock) && !upLevel--) {
                 parent.dataset.active = 'true';
+                const parentNode = parent.previousElementSibling;
+                if (parentNode && parentNode.classList.contains(tree_style_1.classes.node)) {
+                    parentNode.dataset.active = 'true';
+                }
                 return true;
             }
         });
     };
-    const inactiveParentBlock = () => {
-        const fn = (el) => {
+    const inactiveBlock = (el) => {
+        if (el) {
             el.dataset.active = 'false';
-        };
-        fn(containerRef.current);
-        containerRef.current.querySelectorAll('.' + tree_style_1.classes.levelBlock).forEach(fn);
-    };
-    const overingMask = (e) => {
-        if (hasChildren && !expandedSet.has(value)) {
-            overingTimer.current ||= setTimeout(() => {
-                toggleExpanded(value);
-                placement.current === 'after' && inactiveParentBlock();
-            }, 800);
         }
-    };
-    const leaveMask = () => {
-        clearTimeout(overingTimer.current);
-        overingTimer.current = void 0;
-    };
-    const onPointerEnter = (e, placement) => {
-        setOvering(value);
-        setPlacement(placement);
-        activeParentBlock(e.currentTarget);
-    };
-    const onPointerLeave = () => {
-        setOvering(void 0);
-        inactiveParentBlock();
+        document.querySelectorAll('.' + treeDnd_style_1.treeDndClasses.levelBlock).forEach(el => {
+            el.dataset.active = 'false';
+        });
+        document.querySelectorAll('.' + tree_style_1.classes.node).forEach(el => {
+            el.dataset.active = 'false';
+        });
+        overing.current = void 0;
     };
     /**
      * ---------------------------------------------------------------------
      * 渲染部分
      */
     const renderedIndents = (0, react_1.useMemo)(() => {
-        return Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i));
-    }, [_level, indent]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, onClick: showDragHandle ? onClick : props.onClick, children: [renderedIndents, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+        return Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent }, i));
+    }, [_level]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": isDraggingNode, onClick: clickHandler, ...!showDragHandle && dragHandleProps, children: [renderedIndents, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
-                            toggleExpanded(value);
+                            toggleExpanded(id);
                         }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon
-                            ? renderExpandIcon(value, currentExpanded, [...expandedSet])
+                            ? renderExpandIcon(id, currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight, className: tree_style_1.classes.icon, style: {
                                         rotate: currentExpanded ? '90deg' : '0deg'
                                     } }) }), (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.contentWrap, children: [sortable && showDragHandle &&
-                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faGripVertical }) }), showCheckbox &&
+                                (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faGripVertical }) }), showCheckbox &&
                                 (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
                                         e.stopPropagation();
                                         clickHandler();
                                     } }), !!prefix &&
                                 (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
-                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix }), typeof dragging !== 'undefined' && dragging !== value &&
-                                (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.dragMask, onPointerOver: overingMask, onPointerLeave: leaveMask, children: [(0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskPrev, "data-overing": overing === value && placement.current === 'before', onPointerEnter: e => onPointerEnter(e, 'before'), onPointerLeave: onPointerLeave }), (!hasChildren || !expandedSet.has(value)) &&
-                                            (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskNext, "data-offset": !hasChildren && isOffsetSatisfied, "data-overing": overing === value && placement.current === 'after', onPointerEnter: e => onPointerEnter(e, 'after'), onPointerLeave: onPointerLeave })] })] })] }), hasChildren &&
-                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: tree_style_1.classes.levelBlock, in: currentExpanded, children: react_1.Children.map(props.children, child => {
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix })] }), typeof dragging !== 'undefined' &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: treeDnd_style_1.treeDndClasses.mask, children: [Array(_level + 1).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.predecessor, ...i && {
+                                        onPointerEnter: e => pointerEnterPredecessor(e, _level + 1 - i),
+                                        onPointerLeave: pointerLeavePredecessor
+                                    } }, i)), (0, jsx_runtime_1.jsxs)("div", { className: treeDnd_style_1.treeDndClasses.sibling, children: [(0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.siblingPrev, onPointerEnter: e => pointerEnterMaskArea(e, 'before'), onPointerLeave: pointerLeaveMaskArea }), (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.siblingNext, onPointerEnter: e => pointerEnterMaskArea(e, 'after'), onPointerLeave: pointerLeaveMaskArea }), !hasChildren &&
+                                            (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.child, onPointerEnter: e => pointerEnterMaskArea(e, 'child'), onPointerLeave: pointerLeaveMaskArea })] })] })] }), hasChildren &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: treeDnd_style_1.treeDndClasses.levelBlock, in: currentExpanded, children: react_1.Children.map(props.children, child => {
                         return (0, react_1.isValidElement)(child)
                             ? (0, react_1.cloneElement)(child, { _level: _level + 1 })
                             : child;

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

@@ -8,8 +8,8 @@ export declare const classes: {
     file: string;
     files: string;
     images: string;
-    control: string;
     sortable: string;
+    control: string;
     imageWrap: string;
 } & {
     root: string;

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

@@ -1,13 +1,21 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { Obj } from '../types';
+import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
 export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
 /**
  * <DndContext>组件通用的onDragEnd方法
- * @param e
+ * @param e 事件
  * @param prevState 传入需要排序的数组
- * @param primaryKey 索引用的主键
+ * @param primaryKey 索引用的主键，默认为`id`
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
+/**
+ * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
+ * @param info 信息
+ * @param treeNodes 树节点
+ * @param primaryKey 索引用的主键，默认为`id`
+ */
+export declare function onTreeNodeSort<N extends NodeType<V>, V extends Id = Id>(info: SortInfo<V>, treeNodes: N[], primaryKey?: string): N[];

package/dist/cjs/utils/dnd.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDndSensors = useDndSensors;
 exports.onDndDragEnd = onDndDragEnd;
+exports.onTreeNodeSort = onTreeNodeSort;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 /**
@@ -16,9 +17,9 @@ function useDndSensors() {
 }
 /**
  * <DndContext>组件通用的onDragEnd方法
- * @param e
+ * @param e 事件
  * @param prevState 传入需要排序的数组
- * @param primaryKey 索引用的主键
+ * @param primaryKey 索引用的主键，默认为`id`
  */
 function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const { active, over } = e;
@@ -30,3 +31,45 @@ function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
     return (0, sortable_1.arrayMove)(prevState, oldIndex, newIndex);
 }
+/**
+ * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
+ * @param info 信息
+ * @param treeNodes 树节点
+ * @param primaryKey 索引用的主键，默认为`id`
+ */
+function onTreeNodeSort(info, treeNodes, primaryKey = 'id') {
+    const find = (arr, id) => {
+        let target = null;
+        let targetIndex = -1;
+        let siblings = null;
+        const recurse = (arr) => {
+            return !!arr?.some((v, i, _siblings) => {
+                if (v[primaryKey] === id) {
+                    target = v;
+                    targetIndex = i;
+                    siblings = _siblings;
+                    return true;
+                }
+                return v.children?.length && recurse(v.children);
+            });
+        };
+        recurse(arr);
+        return target ? { target, targetIndex, siblings: siblings } : null;
+    };
+    const source = find(treeNodes, info.source);
+    source.siblings.splice(source.targetIndex, 1);
+    const destination = find(treeNodes, info.destination);
+    switch (info.placement) {
+        case 'before':
+            destination.siblings.splice(destination.targetIndex, 0, source.target);
+            break;
+        case 'after':
+            destination.siblings.splice(destination.targetIndex + 1, 0, source.target);
+            break;
+        default:
+            // children
+            destination.target.children ||= [];
+            destination.target.children.push(source.target);
+    }
+    return treeNodes;
+}

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

@@ -145,5 +145,5 @@ export declare function filterProperties<T extends Record<string, any>>(obj: T,
  * 合并属性
  */
 type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
-export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | null | false | undefined)[]): ExtendableProps<T>;
 export {};

package/dist/esm/components/accordion/accordion.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     title: string;
-    content: string;
     prefix: string;
+    content: string;
     suffix: string;
     expandIcon: string;
     titleRow: string;

package/dist/esm/components/alert/alert.style.d.ts

@@ -1,11 +1,11 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
-    content: string;
-    close: string;
     prefix: string;
-    icon: string;
+    content: string;
     suffix: string;
+    icon: string;
+    close: string;
     description: string;
 } & {
     root: string;

package/dist/esm/components/button/button.style.d.ts

@@ -1,7 +1,7 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
-    content: string;
     prefix: string;
+    content: string;
     suffix: string;
 } & {
     root: string;

package/dist/esm/components/checkboxBase/checkboxBase.style.d.ts

@@ -2,9 +2,9 @@ import { CheckboxBaseProps } from './checkboxBase';
 export declare const classes: {
     input: string;
     label: string;
-    icon: string;
-    radio: string;
     checkbox: string;
+    radio: string;
+    icon: string;
     radioChecked: string;
     indeterminate: string;
 } & {

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
+    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "true" | "false";
-    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
+    draggable: boolean | "false" | "true";
+    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "true" | "false";
+    spellCheck: boolean | "false" | "true";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "no" | "yes";
+    translate: "yes" | "no";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
+    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;
@@ -61,7 +61,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     security: string;
     unselectable: "off" | "on";
     popover: "" | "auto" | "manual";
-    popoverTargetAction: "toggle" | "hide" | "show";
+    popoverTargetAction: "hide" | "show" | "toggle";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "true" | "false";
-    "aria-autocomplete": "none" | "list" | "both" | "inline";
+    "aria-atomic": boolean | "false" | "true";
+    "aria-autocomplete": "both" | "none" | "inline" | "list";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "true" | "false";
-    "aria-checked": boolean | "true" | "mixed" | "false";
+    "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" | "true" | "location" | "page" | "false" | "step" | "date";
+    "aria-current": boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "true" | "false";
-    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "false" | "true";
+    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "true" | "false";
+    "aria-expanded": boolean | "false" | "true";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "true" | "false";
-    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
-    "aria-hidden": boolean | "true" | "false";
-    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
+    "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 | "true" | "false";
-    "aria-multiline": boolean | "true" | "false";
-    "aria-multiselectable": boolean | "true" | "false";
+    "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 | "true" | "mixed" | "false";
-    "aria-readonly": boolean | "true" | "false";
+    "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 | "true" | "false";
+    "aria-required": boolean | "false" | "true";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "true" | "false";
+    "aria-selected": boolean | "false" | "true";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

package/dist/esm/components/dataGrid/dataGrid.style.d.ts

@@ -3,11 +3,11 @@ export declare const classes: {
     title: string;
     children: string;
     container: string;
+    expandable: string;
     filterForm: string;
     functionalCell: string;
     sortIcon: string;
     filterButton: string;
-    expandable: string;
     expandableWrap: string;
     selectable: string;
     subTd: string;

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

@@ -2,8 +2,8 @@ export declare const classes: {
     col: string;
     label: string;
     content: string;
-    colon: string;
     vertical: string;
+    colon: string;
     item: string;
     labelCol: string;
     contentCol: string;

package/dist/esm/components/dialog/dialog.style.d.ts

@@ -2,12 +2,12 @@ export declare const classes: {
     body: string;
     footer: string;
     title: string;
-    content: string;
-    close: string;
     prefix: string;
+    content: string;
+    suffix: string;
     icon: string;
     container: string;
-    suffix: string;
+    close: string;
     card: string;
     titleRow: string;
     bodyWrap: string;

package/dist/esm/components/inputBase/inputBase.style.d.ts

@@ -1,9 +1,9 @@
 import { InputBaseProps } from './inputBase';
 export declare const classes: {
-    content: string;
     prefix: string;
-    clear: string;
+    content: string;
     suffix: string;
+    clear: string;
 } & {
     root: string;
 };

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

@@ -21,6 +21,10 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     /** 当label不为string时，该字段会取代label用来搜索 */
     searchToken?: string;
+    /**
+     * 若指定为`true`，则弹框打开时会自动滚动到该选项，默认为`false`
+     */
+    scrollHere?: boolean;
     /** @private 内部使用，缩进的层级 */
     _level?: number;
     indent?: number;
@@ -29,4 +33,4 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/menuItem/menuItem.js

@@ -8,7 +8,7 @@ import { useMenuContext } from '../menu';
 import { Collapse } from '../transitionBase';
 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 }) => {
+export const MenuItem = memo(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = useMenuContext();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;

package/dist/esm/components/menuItem/menuItem.style.d.ts

@@ -1,10 +1,10 @@
 import { MenuItemProps } from './menuItem';
 export declare const classes: {
     children: string;
-    content: string;
     prefix: string;
-    checkbox: string;
+    content: string;
     suffix: string;
+    checkbox: string;
     arrow: string;
     childrenWrap: string;
 } & {

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

@@ -2,9 +2,9 @@ export declare const classes: {
     input: string;
     main: string;
     mask: string;
-    sliders: string;
     hue: string;
     alpha: string;
+    sliders: string;
     handle: string;
     slidersRow: string;
     alphaMask: string;

package/dist/esm/components/pickerDialog/pickerDialog.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     content: string;
-    confirm: string;
     list: string;
+    confirm: string;
     selectedArea: string;
     count: string;
 } & {