@canlooks/can-ui 0.0.203 → 0.0.205

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/selectedList.style.js

@@ -9,7 +9,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('selected-list', [
     'optionWrap'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    @layer reset {
+    @layer override {
         .${exports.classes.optionWrap} {
             margin-bottom: ${spacing[3]}px;
         }

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/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/selectedList.style.js

@@ -6,7 +6,7 @@ export const classes = defineInnerClasses('selected-list', [
     'optionWrap'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    @layer reset {
+    @layer override {
         .${classes.optionWrap} {
             margin-bottom: ${spacing[3]}px;
         }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",