@canlooks/can-ui 0.0.204 → 0.0.206

package/dist/cjs/components/autocomplete/autocomplete.js

@@ -48,7 +48,12 @@ exports.Autocomplete = (0, react_1.memo)(({ children, loading, options, loadOpti
         actualOptions?.forEach(opt => {
             if (opt && typeof opt === 'object') {
                 const key = opt[primaryKey];
-                !(0, utils_1.isUnset)(key) && map.set(key, opt);
+                if (!(0, utils_1.isUnset)(key)) {
+                    if (map.has(key)) {
+                        console.warn(`[@canlooks/can-ui/<Autocomple/>] option key "${key}" was duplicated`);
+                    }
+                    map.set(key, opt);
+                }
             }
         });
         return map;

package/dist/cjs/components/curd/curd.js

@@ -97,6 +97,7 @@ exports.Curd = (0, react_1.memo)((props) => {
         const controlColumn = {
             key: utils_1.CONTROL_COLUMN_KEY,
             title: controlColumnTitle,
+            className: curd_style_1.classes.controlColumn,
             render(row) {
                 const _updatable = typeof updatable === 'function' ? updatable(row) : updatable;
                 const _deletable = typeof deletable === 'function' ? deletable(row) : deletable;

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

@@ -14,6 +14,7 @@ export declare const classes: {
     toolbarLeft: string;
     toolbarRight: string;
     card: string;
+    controlColumn: string;
     dialogTitle: string;
     copyButton: string;
 } & {

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

@@ -20,6 +20,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('curd', [
     'toolbarRight',
     'divider',
     'card',
+    'controlColumn',
     'control',
     'dialogTitle',
     'copyButton'
@@ -32,7 +33,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadiu
         min-height: 0;
         display: flex;
         flex-direction: column;
-        
+
         .${exports.classes.filterForm} {
             min-height: 0;
             display: flex;

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -13,6 +13,7 @@ const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
 const react_2 = require("@dnd-kit/react");
+const tooltip_1 = require("../tooltip");
 exports.CurdColumnConfig = (0, react_1.memo)((props) => {
     const dragEndHandler = e => {
         const newColumns = (0, utils_1.onDndDragEnd)(e, props.columns || [], '_key');
@@ -41,12 +42,12 @@ const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setI
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", trigger: ['hover', 'click'], ...columnConfigBubbleProps, css: curdColumnConfig_style_1.style, open: open, onOpenChange: openChangeHandler, content: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", trigger: "click", ...columnConfigBubbleProps, css: curdColumnConfig_style_1.style, open: open, onOpenChange: openChangeHandler, content: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
                     const id = col._key;
                     const checked = !(0, utils_1.isUnset)(id) && (!visibleSet || visibleSet.has(id));
                     return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, index: i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: checked, onChange: e => {
                                 e.stopPropagation();
                                 toggleVisible(id, e.target.checked);
                             } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
-                })] }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
+                })] }), autoClose: false, children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5217\u8BBE\u7F6E", clickToClose: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }) }));
 });

package/dist/cjs/components/curd/curdColumnConfig.style.js

@@ -21,25 +21,16 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
                 align-items: center;
                 justify-content: space-between;
                 padding: ${spacing[3]}px;
-                
+
                 .${exports.classes.titleText} {
                     font-weight: bold;
                 }
-                
+
                 .${exports.classes.description} {
                     color: ${text.disabled};
                 }
             }
-
-            .${exports.classes.item} {
-                    cursor: pointer;
-                
-                &[data-dragging=true] {
-                    position: relative;
-                    z-index: 1;
-                }
-            }
-
+            
             .${exports.classes.checkbox} {
                 display: flex;
                 margin-right: ${spacing[1]}px;

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

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactElement, ReactNode } from 'react';
+import React, { ComponentProps, ReactElement, ReactNode, RefObject } from 'react';
 import { DivProps, Id, Obj, SlotsAndProps, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
 import { PaginationProps } from '../pagination';
@@ -136,6 +136,7 @@ interface IDataGridContext<R extends RowType = RowType> extends ToRequired<DataG
     expandedSet: Set<Id>;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;
     toggleExpanded(key: Id): void;
+    theadRef: RefObject<HTMLTableSectionElement | null>;
 }
 export declare function useDataGridContext<R extends RowType>(): IDataGridContext<R>;
 export declare const DataGrid: {

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

@@ -130,13 +130,18 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
+    /**
+     * ---------------------------------------------------------------
+     * 渲染
+     */
+    const theadRef = (0, react_1.useRef)(null);
     const { container: Container = table_1.TableContainer } = slots || {};
     const { container: containerProps } = slotProps || {};
     const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(Container, { ...(0, utils_1.mergeComponentProps)(containerProps, {
                 ref: scrollerRef,
                 className: dataGrid_style_1.classes.container
-            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, onToggle: onToggle, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
-                                        slots, slotProps,
+            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, onToggle: onToggle, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { ref: theadRef, rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+                                        slots, slotProps, theadRef,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded
                                     }), [

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

@@ -92,25 +92,36 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
                     }
                 }
             }
+            
+            tr {
+                position: relative;
+                z-index: 2;
+                
+                &[data-expanded=true] {
+                    position: sticky;
+                    z-index: 1;
+                }
+                
+                &.${exports.classes.sub} {
+                    z-index: 0;
+                    background-color: ${gray(mode === 'light' ? .02 : .22)};
 
-            tr.${exports.classes.sub} {
-                background-color: ${gray(mode === 'light' ? .02 : .22)};
-
-                td.${exports.classes.subTd} {
-                    padding: 0;
-                    border: none;
+                    td.${exports.classes.subTd} {
+                        padding: 0;
+                        border: none;
 
-                    .${exports.classes.children} {
-                        padding: ${spacing[4]}px ${spacing[5]}px;
-                        border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
+                        .${exports.classes.children} {
+                            padding: ${spacing[4]}px ${spacing[5]}px;
+                            border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
 
-                        thead, tfoot {
-                            z-index: 3;
-                        }
+                            thead, tfoot {
+                                z-index: 5;
+                            }
 
-                        th, td {
-                            &[data-sticky=left], &[data-sticky=right] {
-                                z-index: 2;
+                            th, td {
+                                &[data-sticky=left], &[data-sticky=right] {
+                                    z-index: 4;
+                                }
                             }
                         }
                     }
@@ -157,7 +168,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
                 position: absolute;
                 top: 0;
                 right: -4px;
-                z-index: 1;
+                z-index: 3;
             }
 
             th:last-of-type {

package/dist/cjs/components/dataGrid/dataGridHead.d.ts

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, RefObject } from 'react';
 import { ColumnType, DataGridProps, RowType } from './dataGrid';
 import { Id } from '../../types';
 interface DataGridHeadProps<R extends RowType, V extends Id = Id> extends Required<Pick<DataGridProps<R, V>, 'primaryKey' | 'orderType' | 'onOrderChange' | 'allowSelectAll' | 'columnResizable'>> {
+    ref: RefObject<HTMLTableSectionElement | null>;
     rows: R[] | undefined;
     orderColumn: Id | undefined;
     flattedColumns: (symbol | ColumnType<R>)[] | undefined;

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

@@ -18,7 +18,7 @@ const bubble_1 = require("../bubble");
 const filterBubbleContent_1 = require("./filterBubbleContent");
 const form_1 = require("../form");
 const utils_1 = require("../../utils");
-exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
+exports.DataGridHead = (0, react_2.memo)(({ ref, allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
         if (multiple && allowSelectAll) {
@@ -116,5 +116,5 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                 ];
             }) }, i));
     });
-    return (0, jsx_runtime_1.jsx)("thead", { children: renderedHead });
+    return (0, jsx_runtime_1.jsx)("thead", { ref: ref, children: renderedHead });
 });

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

@@ -16,10 +16,11 @@ const icon_1 = require("../icon");
 const faMinusSquare_1 = require("@fortawesome/free-regular-svg-icons/faMinusSquare");
 const faPlusSquare_1 = require("@fortawesome/free-regular-svg-icons/faPlusSquare");
 const dataGrid_style_1 = require("./dataGrid.style");
+const stickyRow_1 = require("./stickyRow");
 exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
     const { multiple, toggleSelected, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const { slots, slotProps, rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = (0, dataGrid_1.useDataGridContext)();
-    const { tr: Tr = 'tr' } = slots || {};
+    const { tr: Tr = stickyRow_1.StickyRow } = slots || {};
     const { tr: TrProps } = slotProps || {};
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
@@ -37,8 +38,9 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
                     className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub),
                     onClick() {
                         clickRowToSelect && toggleSelected(trKey);
-                    }
-                }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+                    },
+                    sticky: currentExpanded
+                }), key: trKey, "data-selected": status === 2, "data-expanded": currentExpanded }, flattedColumns?.flatMap((col, j) => {
                 if (typeof col === 'symbol') {
                     if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
                         expandableIndex = j;

package/dist/cjs/components/dataGrid/stickyRow.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+export interface StickyRowProps extends ComponentProps<'tr'> {
+    sticky?: boolean;
+}
+export declare function StickyRow({ sticky, ...props }: StickyRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyRow = StickyRow;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dataGrid_1 = require("./dataGrid");
+const utils_1 = require("../../utils");
+function StickyRow({ sticky, ...props }) {
+    const [offset, setOffset] = (0, react_1.useState)(0);
+    const { theadRef } = (0, dataGrid_1.useDataGridContext)();
+    (0, react_1.useEffect)(() => {
+        if (!sticky || !theadRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            setOffset(theadRef.current.offsetHeight);
+        });
+        resizeObserver.observe(theadRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [sticky]);
+    return ((0, jsx_runtime_1.jsx)("tr", { ...(0, utils_1.mergeComponentProps)(props, {
+            ...sticky && {
+                style: { top: offset }
+            }
+        }) }));
+}

package/dist/cjs/components/popper/popper.js

@@ -9,18 +9,56 @@ const clickAway_1 = require("../clickAway");
 const popper_style_1 = require("./popper.style");
 const popperContext_1 = require("./popperContext");
 const theme_1 = require("../theme");
-const getAttemptOrder = (placement) => {
-    const order = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'rightTop', 'rightBottom', 'bottomRight', 'bottomLeft', 'leftBottom', 'leftTop'];
-    const index = order.indexOf(placement);
-    if (index > -1) {
-        return [
-            placement,
-            ...order.slice(index + 1),
-            ...order.slice(0, index),
-            placement
-        ];
+const defaultAttemptOrder = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'rightTop', 'rightBottom', 'bottomRight', 'bottomLeft', 'leftBottom', 'leftTop'];
+const contextMenuOrder = [
+    'bottomRight',
+    'rightBottom',
+    'bottomLeft',
+    'leftBottom',
+    'topLeft',
+    'leftTop',
+    'topRight',
+    'rightTop'
+];
+const getAttemptOrder = (startPlacement, contextMenu, sizeAdaptable, callback) => {
+    if (contextMenu) {
+        const startIndex = Math.max(contextMenuOrder.indexOf(startPlacement), 0);
+        for (let i = 0; i <= contextMenuOrder.length + 1; i += 2) {
+            const index = (startIndex + i) % contextMenuOrder.length;
+            if (callback(contextMenuOrder[index]) === false) {
+                break;
+            }
+        }
+    }
+    else {
+        let order = defaultAttemptOrder;
+        let startIndex;
+        if (sizeAdaptable) {
+            switch (startPlacement) {
+                case 'top':
+                    order = [startPlacement, 'bottom', startPlacement];
+                    break;
+                case 'bottom':
+                    order = [startPlacement, 'top', startPlacement];
+                    break;
+                case 'left':
+                    order = [startPlacement, 'right', startPlacement];
+                    break;
+                case 'right':
+                    order = [startPlacement, 'left', startPlacement];
+            }
+            startIndex = 0;
+        }
+        else {
+            startIndex = Math.max(order.indexOf(startPlacement), 0);
+        }
+        for (let i = 0; i <= order.length; i++) {
+            const index = (startIndex + i) % order.length;
+            if (callback(order[index]) === false) {
+                break;
+            }
+        }
     }
-    return order;
 };
 const splitPlacement = {
     top: ['top'],
@@ -141,33 +179,6 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             const mouseY = contextMenuEvent.current.clientY - containerRect.top;
             attempt = placement => {
                 switch (placement) {
-                    case 'topLeft':
-                    case 'leftTop':
-                        top = void 0;
-                        bottom = -mouseY;
-                        left = void 0;
-                        right = containerRect.width - mouseX;
-                        originX = '100%';
-                        originY = '100%';
-                        break;
-                    case 'topRight':
-                    case 'rightTop':
-                        top = void 0;
-                        bottom = -mouseY;
-                        left = mouseX;
-                        right = void 0;
-                        originX = '0%';
-                        originY = '100%';
-                        break;
-                    case 'bottomLeft':
-                    case 'leftBottom':
-                        top = mouseY;
-                        bottom = void 0;
-                        left = void 0;
-                        right = containerRect.width - mouseX;
-                        originX = '100%';
-                        originY = '0%';
-                        break;
                     case 'bottomRight':
                     case 'rightBottom':
                         top = mouseY;
@@ -177,37 +188,32 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                         originX = '0%';
                         originY = '0%';
                         break;
-                    case 'top':
-                        top = mouseY - popperHeight;
-                        bottom = void 0;
-                        left = mouseX - popperWidth / 2;
-                        right = void 0;
-                        originX = '50%';
-                        originY = '100%';
-                        break;
-                    case 'bottom':
+                    case 'bottomLeft':
+                    case 'leftBottom':
                         top = mouseY;
                         bottom = void 0;
-                        left = mouseX - popperWidth / 2;
-                        right = void 0;
-                        originX = '50%';
+                        left = void 0;
+                        right = containerRect.width - mouseX;
+                        originX = '100%';
                         originY = '0%';
                         break;
-                    case 'left':
-                        top = mouseY - popperHeight / 2;
-                        bottom = void 0;
-                        left = mouseX - popperWidth;
-                        right = void 0;
+                    case 'topLeft':
+                    case 'leftTop':
+                        top = void 0;
+                        bottom = -mouseY;
+                        left = void 0;
+                        right = containerRect.width - mouseX;
                         originX = '100%';
-                        originY = '50%';
+                        originY = '100%';
                         break;
-                    case 'right':
-                        top = mouseY - popperHeight / 2;
-                        bottom = void 0;
+                    case 'topRight':
+                    case 'rightTop':
+                        top = void 0;
+                        bottom = -mouseY;
                         left = mouseX;
                         right = void 0;
                         originX = '0%';
-                        originY = '50%';
+                        originY = '100%';
                 }
                 popperEl.style.top = typeof top === 'undefined' ? '' : top + 'px';
                 popperEl.style.bottom = typeof bottom === 'undefined' ? '' : bottom + 'px';
@@ -311,13 +317,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         else {
             popperEl.style.transition = 'none';
             popperEl.style.transform = 'scale(1)';
-            const attemptOrder = getAttemptOrder(placement);
-            for (let i = 0; i < attemptOrder.length; i++) {
-                const t = attempt(attemptOrder[i]);
-                if (t === false) {
-                    break;
-                }
-            }
+            getAttemptOrder(placement, !!contextMenuEvent.current, sizeAdaptable, attempt);
         }
         beforeOpen?.();
         placeA.current = pA;

package/dist/cjs/components/select/select.js

@@ -7,6 +7,7 @@ const selectBase_1 = require("../selectBase");
 const optionsBase_1 = require("../optionsBase");
 const menuItem_1 = require("../menuItem");
 const selectionContext_1 = require("../selectionContext");
+const utils_1 = require("../../utils");
 exports.Select = (0, react_1.memo)(({ children, 
 // 从SelectableProps继承
 multiple = false, // 同时转发至<SelectBase/>
@@ -19,7 +20,15 @@ showCheckbox = multiple, loading = false, options, labelKey = 'label', primaryKe
     const optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         optionsArr?.forEach(opt => {
-            opt && typeof opt === 'object' && map.set(opt[primaryKey], opt);
+            if (opt && typeof opt === 'object') {
+                const key = opt[primaryKey];
+                if (!(0, utils_1.isUnset)(key)) {
+                    if (map.has(key)) {
+                        console.warn(`[@canlooks/can-ui/<Select/>] option key "${key}" was duplicated`);
+                    }
+                    map.set(opt[primaryKey], opt);
+                }
+            }
         });
         return map;
     }, [optionsArr, primaryKey]);

package/dist/cjs/components/selectedList/selectedItem.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 const react_1 = require("react");
 const transitionBase_1 = require("../transitionBase");
 const selectedList_style_1 = require("./selectedList.style");
+const sortableItem_1 = require("../sortableItem");
 function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
     const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
@@ -17,5 +18,5 @@ function SelectedItem({ value, index, itemProps, onClose, ...props }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: alert_1.Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

package/dist/cjs/components/selectedList/selectedList.js

@@ -8,6 +8,7 @@ const selectedList_style_1 = require("./selectedList.style");
 const react_transition_group_1 = require("react-transition-group");
 const selectionContext_1 = require("../selectionContext");
 const selectedItem_1 = require("./selectedItem");
+const react_2 = require("@dnd-kit/react");
 exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = (0, selectionContext_1.useSelectionContext)();
     const arr = (0, utils_1.toArray)(value || innerValue);
@@ -15,5 +16,9 @@ exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    const dragEndHandler = e => {
+        const newValue = (0, utils_1.onDndDragEnd)(e, arr);
+        newValue && setInnerValue(newValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }) }));
 });

package/dist/cjs/components/selectionContext/selectionHook.js

@@ -32,7 +32,12 @@ function useSelection({ ...props }) {
                 item._parentId = parentId;
                 item._isLast = i === arr.length - 1;
                 const id = item[props.primaryKey];
-                !(0, utils_1.isUnset)(id) && map.set(id, item);
+                if (!(0, utils_1.isUnset)(id)) {
+                    if (map.has(id)) {
+                        console.warn(`[@canlooks/can-ui/<SelectionContext/>] option key "${id}" was duplicated`);
+                    }
+                    map.set(id, item);
+                }
                 fn(item[props.childrenKey], id);
             });
         };

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

@@ -20,7 +20,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, backgrou
 
             thead, tfoot {
                 position: sticky;
-                z-index: 5;
+                z-index: 7;
 
                 th, td {
                     background-color: ${headerBg};

package/dist/cjs/components/table/tableSticky.js

@@ -73,7 +73,9 @@ function useStickyCellProps({ sticky, ...props }) {
         ref: innerRef,
         css: tableSticky_style_1.style,
         className: table_style_1.classes.cell,
-        style: sticky && { [sticky]: offset },
+        ...sticky && {
+            style: { [sticky]: offset }
+        },
         'data-sticky': sticky
     });
 }

package/dist/cjs/components/table/tableSticky.style.js

@@ -11,7 +11,7 @@ exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
             &[data-sticky=left], &[data-sticky=right] {
                 overflow: visible;
                 position: sticky;
-                z-index: 4;
+                z-index: 6;
 
                 &::after {
                     content: '';

package/dist/cjs/utils/dataGrid.js

@@ -26,7 +26,12 @@ function useColumnMap(columns) {
         columns?.forEach((col, i) => {
             if (typeof col !== 'symbol') {
                 const _key = setDefaultColumnKey(col, i);
-                !(0, utils_1.isUnset)(_key) && map.set(_key, col);
+                if (!(0, utils_1.isUnset)(_key)) {
+                    if (map.has(_key)) {
+                        console.warn(`[@canlooks/can-ui/<DataGrid/>] column key "${_key}" was duplicated`);
+                    }
+                    map.set(_key, col);
+                }
             }
         });
         return map;

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

@@ -13,6 +13,7 @@ export declare const defaultSensors: Customizable<Sensors>;
  * @param primaryKey 索引用的主键，默认为`id`
  * @return 返回新的数组，但如果顺序未改变，会得到null
  */
+export declare function onDndDragEnd<T>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[]): T[] | null;
 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[];
 /**

package/dist/cjs/utils/dnd.js

@@ -21,20 +21,23 @@ const defaultSensors = defaults => [
     })
 ];
 exports.defaultSensors = defaultSensors;
-/**
- * <DragDropProvider>组件通用的onDragEnd方法
- * @param e 事件
- * @param items 传入需要排序的数组
- * @param primaryKey 索引用的主键，默认为`id`
- * @return 返回新的数组，但如果顺序未改变，会得到null
- */
 function onDndDragEnd({ operation }, items, primaryKey = 'id') {
     const { source, target, canceled } = operation;
     if (!source || !target || canceled) {
         return null;
     }
-    const sourceIndex = items.findIndex(item => item[primaryKey] === source.id);
-    const targetIndex = items.findIndex(item => item[primaryKey] === target.id);
+    const sourceIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === source.id;
+        }
+        return item === source.id;
+    });
+    const targetIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === target.id;
+        }
+        return item === target.id;
+    });
     if (sourceIndex === -1 || targetIndex === -1) {
         if (typeof source.initialIndex === 'number' && typeof source.index === 'number') {
             const from = source.initialIndex;