@canlooks/can-ui 0.0.204 → 0.0.206

package/dist/esm/components/autocomplete/autocomplete.js

@@ -45,7 +45,12 @@ export const Autocomplete = memo(({ children, loading, options, loadOptions, pri
         actualOptions?.forEach(opt => {
             if (opt && typeof opt === 'object') {
                 const key = opt[primaryKey];
-                !isUnset(key) && map.set(key, opt);
+                if (!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/esm/components/curd/curd.js

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

package/dist/esm/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/esm/components/curd/curd.style.js

@@ -17,6 +17,7 @@ export const classes = defineInnerClasses('curd', [
     'toolbarRight',
     'divider',
     'card',
+    'controlColumn',
     'control',
     'dialogTitle',
     'copyButton'
@@ -29,7 +30,7 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
         min-height: 0;
         display: flex;
         flex-direction: column;
-        
+
         .${classes.filterForm} {
             min-height: 0;
             display: flex;

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

@@ -10,6 +10,7 @@ import { defaultSensors, isUnset, onDndDragEnd } from '../../utils/index.js';
 import { Icon } from '../icon/index.js';
 import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
 import { DragDropProvider, useDragDropMonitor } from '@dnd-kit/react';
+import { Tooltip } from '../tooltip/index.js';
 export const CurdColumnConfig = memo((props) => {
     const dragEndHandler = e => {
         const newColumns = onDndDragEnd(e, props.columns || [], '_key');
@@ -38,12 +39,12 @@ const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible,
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { placement: "bottomRight", trigger: ['hover', 'click'], ...columnConfigBubbleProps, css: style, open: open, onOpenChange: openChangeHandler, content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+    return (_jsx(Bubble, { placement: "bottomRight", trigger: "click", ...columnConfigBubbleProps, css: style, open: open, onOpenChange: openChangeHandler, content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
                     const id = col._key;
                     const checked = !isUnset(id) && (!visibleSet || visibleSet.has(id));
                     return (_jsx(SortableItem, { id: id ?? i, index: i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: 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: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
+                })] }), autoClose: false, children: _jsx(Tooltip, { title: "\u5217\u8BBE\u7F6E", clickToClose: true, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }) }));
 });

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

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

package/dist/esm/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.js';
 import { SelectionContextProps } from '../selectionContext/index.js';
 import { PaginationProps } from '../pagination/index.js';
@@ -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/esm/components/dataGrid/dataGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { classes, style } from './dataGrid.style.js';
 import { SelectionContext, useSelectionContext } from '../selectionContext/index.js';
 import { Pagination } from '../pagination/index.js';
@@ -126,13 +126,18 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
+    /**
+     * ---------------------------------------------------------------
+     * 渲染
+     */
+    const theadRef = useRef(null);
     const { container: Container = TableContainer } = slots || {};
     const { container: containerProps } = slotProps || {};
     const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(Container, { ...mergeComponentProps(containerProps, {
                 ref: scrollerRef,
                 className: classes.container
-            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(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 }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
-                                        slots, slotProps,
+            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(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: [_jsx(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 }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                                        slots, slotProps, theadRef,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded
                                     }), [

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

@@ -89,25 +89,36 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
                     }
                 }
             }
+            
+            tr {
+                position: relative;
+                z-index: 2;
+                
+                &[data-expanded=true] {
+                    position: sticky;
+                    z-index: 1;
+                }
+                
+                &.${classes.sub} {
+                    z-index: 0;
+                    background-color: ${gray(mode === 'light' ? .02 : .22)};
 
-            tr.${classes.sub} {
-                background-color: ${gray(mode === 'light' ? .02 : .22)};
-
-                td.${classes.subTd} {
-                    padding: 0;
-                    border: none;
+                    td.${classes.subTd} {
+                        padding: 0;
+                        border: none;
 
-                    .${classes.children} {
-                        padding: ${spacing[4]}px ${spacing[5]}px;
-                        border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
+                        .${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;
+                                }
                             }
                         }
                     }
@@ -154,7 +165,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
                 position: absolute;
                 top: 0;
                 right: -4px;
-                z-index: 1;
+                z-index: 3;
             }
 
             th:last-of-type {

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

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { ReactElement, RefObject } from 'react';
 import { ColumnType, DataGridProps, RowType } from './dataGrid.js';
 import { Id } from '../../types.js';
 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/esm/components/dataGrid/dataGridHead.js

@@ -15,7 +15,7 @@ import { Bubble } from '../bubble/index.js';
 import { FilterBubbleContent } from './filterBubbleContent.js';
 import { useFormValueContext } from '../form/index.js';
 import { isUnset, mergeComponentProps } from '../../utils/index.js';
-export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
+export const DataGridHead = memo(({ ref, allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, filterBubbleProps, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
         if (multiple && allowSelectAll) {
@@ -113,5 +113,5 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                 ];
             }) }, i));
     });
-    return _jsx("thead", { children: renderedHead });
+    return _jsx("thead", { ref: ref, children: renderedHead });
 });

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

@@ -13,10 +13,11 @@ import { Icon } from '../icon/index.js';
 import { faMinusSquare } from '@fortawesome/free-regular-svg-icons/faMinusSquare';
 import { faPlusSquare } from '@fortawesome/free-regular-svg-icons/faPlusSquare';
 import { classes } from './dataGrid.style.js';
+import { StickyRow } from './stickyRow.js';
 export const DataGridRows = memo(({ rows, _level = 0 }) => {
     const { multiple, toggleSelected, selectionStatus } = useSelectionContext();
     const { slots, slotProps, rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = useDataGridContext();
-    const { tr: Tr = 'tr' } = slots || {};
+    const { tr: Tr = StickyRow } = slots || {};
     const { tr: TrProps } = slotProps || {};
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
@@ -34,8 +35,9 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
                     className: clsx(_rowProps, _level > 0 && 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.EXPAND_COLUMN) {
                         expandableIndex = j;

package/dist/esm/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/esm/components/dataGrid/stickyRow.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useDataGridContext } from './dataGrid.js';
+import { mergeComponentProps } from '../../utils/index.js';
+export function StickyRow({ sticky, ...props }) {
+    const [offset, setOffset] = useState(0);
+    const { theadRef } = useDataGridContext();
+    useEffect(() => {
+        if (!sticky || !theadRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            setOffset(theadRef.current.offsetHeight);
+        });
+        resizeObserver.observe(theadRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [sticky]);
+    return (_jsx("tr", { ...mergeComponentProps(props, {
+            ...sticky && {
+                style: { top: offset }
+            }
+        }) }));
+}

package/dist/esm/components/popper/popper.js

@@ -6,18 +6,56 @@ import { ClickAway } from '../clickAway/index.js';
 import { classes, style } from './popper.style.js';
 import { PopperContext, usePopperContext } from './popperContext.js';
 import { useTheme } from '../theme/index.js';
-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'],
@@ -138,33 +176,6 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             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;
@@ -174,37 +185,32 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                         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';
@@ -308,13 +314,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         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/esm/components/select/select.js

@@ -4,6 +4,7 @@ import { SelectBase } from '../selectBase/index.js';
 import { OptionsBase } from '../optionsBase/index.js';
 import { MenuItem } from '../menuItem/index.js';
 import { useFlatSelection } from '../selectionContext/index.js';
+import { isUnset } from '../../utils/index.js';
 export const Select = memo(({ children, 
 // 从SelectableProps继承
 multiple = false, // 同时转发至<SelectBase/>
@@ -16,7 +17,15 @@ showCheckbox = multiple, loading = false, options, labelKey = 'label', primaryKe
     const optionsMap = 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 (!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/esm/components/selectedList/selectedItem.js

@@ -4,6 +4,7 @@ import { clsx, useLoading, useSyncState } from '../../utils/index.js';
 import { useMemo } from 'react';
 import { Collapse } from '../transitionBase/index.js';
 import { classes } from './selectedList.style.js';
+import { SortableItem } from '../sortableItem/index.js';
 export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = useSyncState();
     const [loading, requestFn] = useLoading(async () => {
@@ -14,5 +15,5 @@ export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(SortableItem, { component: Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

package/dist/esm/components/selectedList/selectedList.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { clsx, toArray } from '../../utils/index.js';
+import { clsx, defaultSensors, onDndDragEnd, toArray } from '../../utils/index.js';
 import { classes, style } from './selectedList.style.js';
 import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext/index.js';
 import { SelectedItem } from './selectedItem.js';
+import { DragDropProvider } from '@dnd-kit/react';
 export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = useSelectionContext();
     const arr = toArray(value || innerValue);
@@ -12,5 +13,9 @@ export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return (_jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    const dragEndHandler = e => {
+        const newValue = onDndDragEnd(e, arr);
+        newValue && setInnerValue(newValue);
+    };
+    return (_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }) }));
 });

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

@@ -28,7 +28,12 @@ export function useSelection({ ...props }) {
                 item._parentId = parentId;
                 item._isLast = i === arr.length - 1;
                 const id = item[props.primaryKey];
-                !isUnset(id) && map.set(id, item);
+                if (!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/esm/components/table/table.style.js

@@ -16,7 +16,7 @@ export const style = defineCss(({ mode, spacing, gray, divider, background, easi
 
             thead, tfoot {
                 position: sticky;
-                z-index: 5;
+                z-index: 7;
 
                 th, td {
                     background-color: ${headerBg};

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

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

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

@@ -8,7 +8,7 @@ export const style = defineCss(({ easing }) => css `
             &[data-sticky=left], &[data-sticky=right] {
                 overflow: visible;
                 position: sticky;
-                z-index: 4;
+                z-index: 6;
 
                 &::after {
                     content: '';

package/dist/esm/utils/dataGrid.js

@@ -20,7 +20,12 @@ export function useColumnMap(columns) {
         columns?.forEach((col, i) => {
             if (typeof col !== 'symbol') {
                 const _key = setDefaultColumnKey(col, i);
-                !isUnset(_key) && map.set(_key, col);
+                if (!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/esm/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/esm/utils/dnd.js

@@ -13,20 +13,23 @@ export const defaultSensors = defaults => [
         ]
     })
 ];
-/**
- * <DragDropProvider>组件通用的onDragEnd方法
- * @param e 事件
- * @param items 传入需要排序的数组
- * @param primaryKey 索引用的主键，默认为`id`
- * @return 返回新的数组，但如果顺序未改变，会得到null
- */
 export 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;