@canlooks/can-ui 0.0.75 → 0.0.77

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

@@ -10,5 +10,5 @@ const button_1 = require("../button");
 const icon_1 = require("../icon");
 const faArrowsUpDown_1 = require("@fortawesome/free-solid-svg-icons/faArrowsUpDown");
 exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize }) => {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), 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: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", clickToClose: true, children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", trigger: "click", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), 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: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
 });

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

@@ -121,7 +121,7 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
     const renderPaginationFn = () => {
         return renderPagination
             ? renderPagination(_paginationProps)
-            : (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps });
+            : paginatable && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ..._paginationProps });
     };
     const paginatedRows = (0, react_1.useMemo)(() => {
         if (!paginatable) {

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

@@ -1,7 +1,7 @@
-import React, { ComponentProps } from 'react';
-import { PopperProps } from '../popper';
-import { InputBaseProps } from '../inputBase';
+import { ComponentProps } from 'react';
 import { Dayjs } from 'dayjs';
+import { InputBaseProps } from '../inputBase';
+import { PopperProps } from '../popper';
 export type DatePickerSharedProps = {
     min?: Dayjs;
     max?: Dayjs;
@@ -23,4 +23,4 @@ export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBa
     disabledDates?: (date: Dayjs) => any;
 }
 export declare function useDateTimePickerContext(): DatePickerSharedProps;
-export declare const DateTimePicker: React.MemoExoticComponent<({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format, defaultValue, value, onChange, defaultOpen, open, onOpenChange, autoClose, ...props }: DateTimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const DateTimePicker: import("react").MemoExoticComponent<({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format, defaultValue, value, onChange, defaultOpen, open, onOpenChange, autoClose, ...props }: DateTimePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/dateTimePicker.js

@@ -5,206 +5,32 @@ exports.useDateTimePickerContext = useDateTimePickerContext;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const popper_1 = require("../popper");
-const inputBase_1 = require("../inputBase");
-const utils_1 = require("../../utils");
 const dateTimePicker_style_1 = require("./dateTimePicker.style");
 const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
-const customParseFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/customParseFormat"));
+const inputBase_1 = require("../inputBase");
+const utils_1 = require("../../utils");
+const popper_1 = require("../popper");
 const calendar_1 = require("../calendar");
-const timer_1 = require("./timer");
 const icon_1 = require("../icon");
 const faCalendar_1 = require("@fortawesome/free-regular-svg-icons/faCalendar");
 const faClock_1 = require("@fortawesome/free-regular-svg-icons/faClock");
-dayjs_1.default.extend(customParseFormat_1.default);
-const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
+const timer_1 = require("./timer");
 const DateTimePickerContext = (0, react_1.createContext)({});
 function useDateTimePickerContext() {
     return (0, react_1.useContext)(DateTimePickerContext);
 }
 exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }) => {
-    const innerInputRef = (0, react_1.useRef)(null);
     const focused = (0, react_1.useRef)(false);
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
         // 如果仍聚焦在输入框，则不用关闭弹框
         (open || !focused.current) && _setInnerOpen(open);
     };
-    (0, react_1.useEffect)(() => {
-        if (!innerOpen.current && !dateValue.current) {
-            // 弹框关闭时没有选中日期，清空输入框
-            innerInputRef.current.value = format;
-        }
-    }, [innerOpen.current]);
     const [dateValue, _setDateValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setDateValue = (date) => {
         _setDateValue(date);
         autoClose && _setInnerOpen(false);
     };
-    (0, react_1.useEffect)(() => {
-        innerInputRef.current.value = dateValue.current?.format(format) ?? format;
-    }, [dateValue.current]);
-    const clearHandler = () => {
-        setDateValue(null);
-        selectFn();
-    };
-    const ranges = (0, react_1.useMemo)(() => {
-        const range = [];
-        format.length && availableFormatTokens.forEach(token => {
-            const matched = format.match(new RegExp(`${token}+`));
-            if (matched && typeof matched.index === 'number') {
-                range.push({
-                    token,
-                    start: matched.index,
-                    end: matched.index + matched[0].length
-                });
-            }
-        });
-        return range;
-    }, [format]);
-    const currentRange = (0, react_1.useRef)(null);
-    const selectFn = () => {
-        const input = innerInputRef.current;
-        const { selectionStart } = input;
-        const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
-        if (range) {
-            currentRange.current = range;
-            input.value ||= format;
-            input.setSelectionRange(range.start, range.end);
-        }
-    };
-    const selectHandler = (e) => {
-        if (e.nativeEvent.type === 'selectionchange' || !ranges.length) {
-            // setSelectionRange()方法也会触发该回调，通过nativeEvent.type排除
-            return;
-        }
-        selectFn();
-    };
-    const focusHandler = () => {
-        focused.current = true;
-        selectFn();
-    };
-    const blurHandler = () => {
-        resetContinue();
-        focused.current = false;
-        _setInnerOpen(false);
-    };
-    const valueContinueHelper = (0, react_1.useRef)({ token: '', value: '' });
-    const resetContinue = () => {
-        valueContinueHelper.current = { token: '', value: '' };
-    };
-    const keydownHandler = (e) => {
-        if (!currentRange.current) {
-            return;
-        }
-        const { key } = e;
-        const input = e.target;
-        const { token, start, end } = currentRange.current;
-        if (/^\d$/.test(e.key)) {
-            // 数字键
-            e.preventDefault();
-            let continuedValue;
-            if (valueContinueHelper.current.token === token) {
-                continuedValue = valueContinueHelper.current.value += key;
-            }
-            else {
-                valueContinueHelper.current = { token, value: key };
-                continuedValue = key;
-            }
-            input.value = `${input.value.slice(0, start)}${continuedValue.padStart(end - start, '0')}${input.value.slice(end)}`;
-            input.setSelectionRange(start, end);
-            const d = (0, dayjs_1.default)(input.value, format);
-            d.isValid() && _setDateValue(d);
-            // 当长度达到，或者数值超过，将会跳转下一个range
-            if (token === 'Y') {
-                if (continuedValue.length === 4) {
-                    return selectNext(input);
-                }
-            }
-            else if (continuedValue.length === 2) {
-                return selectNext(input);
-            }
-            switch (token) {
-                case 'M':
-                    if (+key > 1) {
-                        return selectNext(input);
-                    }
-                    break;
-                case 'D':
-                    if (+key > 3) {
-                        return selectNext(input);
-                    }
-                    break;
-                default:
-                    // 'H' | 'm' | 's'
-                    if (+key > 5) {
-                        return selectNext(input);
-                    }
-            }
-        }
-        switch (key) {
-            case 'Backspace':
-            case 'Delete':
-            case 'ArrowLeft':
-            case 'ArrowRight':
-            case 'ArrowUp':
-            case 'ArrowDown':
-            case 'Escape':
-                e.preventDefault();
-                resetContinue();
-        }
-        switch (key) {
-            case 'Backspace':
-            case 'Delete':
-                input.value = `${input.value.slice(0, start)}${format.slice(start, end)}${input.value.slice(end)}`;
-                input.setSelectionRange(start, end);
-                _setDateValue(null);
-                break;
-            case 'ArrowLeft':
-                const prevRange = ranges[ranges.indexOf(currentRange.current) - 1] || ranges[0];
-                currentRange.current = prevRange;
-                input.setSelectionRange(prevRange.start, prevRange.end);
-                break;
-            case 'ArrowRight':
-                selectNext(input);
-                break;
-            case 'ArrowUp':
-            case 'ArrowDown':
-                let valueFragment = +input.value.slice(start, end);
-                if (isNaN(valueFragment)) {
-                    valueFragment = 0;
-                }
-                key === 'ArrowUp' ? valueFragment++ : valueFragment--;
-                switch (token) {
-                    case 'Y':
-                        break;
-                    case 'M':
-                        valueFragment >= 13 ? valueFragment = 1
-                            : valueFragment <= 0 && (valueFragment = 12);
-                        break;
-                    case 'D':
-                        valueFragment >= 32 ? valueFragment = 1
-                            : valueFragment <= 0 && (valueFragment = 31);
-                        break;
-                    default:
-                        valueFragment >= 60 ? valueFragment = 1
-                            : valueFragment <= 0 && (valueFragment = 59);
-                }
-                input.value = `${input.value.slice(0, start)}${valueFragment.toString().padStart(end - start, '0')}${input.value.slice(end)}`;
-                input.setSelectionRange(start, end);
-                const d = (0, dayjs_1.default)(input.value, format);
-                d.isValid() && _setDateValue(d);
-                break;
-            case 'Escape':
-                _setInnerOpen(false);
-        }
-    };
-    const selectNext = (input) => {
-        resetContinue();
-        const nextRange = ranges[ranges.indexOf(currentRange.current) + 1] || ranges[ranges.length - 1];
-        currentRange.current = nextRange;
-        input.setSelectionRange(nextRange.start, nextRange.end);
-    };
     const contextValue = (0, react_1.useMemo)(() => ({
         min, max, disabledHours, disabledMinutes, disabledSeconds
     }), [
@@ -212,7 +38,8 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
     ]);
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
-    const _dateVal = dateValue.current || (0, dayjs_1.default)();
+    // 若外部没有值，内部需要“现在”作为默认值
+    const innerValue = dateValue.current || (0, dayjs_1.default)();
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
             css: dateTimePicker_style_1.datePickerPopperStyle,
             open: innerOpen.current,
@@ -222,8 +49,8 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
             content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
                         (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { viewLevel: format.includes('D') ? 'date'
                                 : format.includes('M') ? 'month'
-                                    : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
-                        (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] })),
+                                    : 'year', _defaultNull: !dateValue.current, value: innerValue, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                        (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: innerValue, onChange: setDateValue }) })] }))
         }, popperProps, {
             onOpenChange: setInnerOpen,
             onPointerDown: e => e.preventDefault()
@@ -231,15 +58,12 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
                 css: dateTimePicker_style_1.style,
                 className: dateTimePicker_style_1.classes.root,
                 value: dateValue.current,
-                onClear: clearHandler,
-                onSelect: selectHandler,
-                onFocus: focusHandler,
-                onBlur: blurHandler,
-                onKeyDown: keydownHandler
-            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps, {
-                            ref: innerInputRef,
-                            className: dateTimePicker_style_1.classes.input
-                        }) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
+                onClear() {
+                    setDateValue(null);
+                }
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [!dateValue.current
+                        ? (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.placeholder, children: props.placeholder ?? '请选择' })
+                        : (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.backfill, children: dateValue.current.format(format) }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faClock_1.faClock })
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCalendar_1.faCalendar }) })] }) }) }));
 });

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

@@ -1,18 +1,8 @@
 export declare const classes: {
-    input: string;
-    calendar: string;
+    placeholder: string;
     container: string;
-    dateItem: string;
-    inputGroup: string;
-    inputUnit: string;
+    backfill: string;
     dateTimeIcon: string;
-    calendarHead: string;
-    calendarHeadSide: string;
-    calendarHeadControl: string;
-    calendarHeadCenter: string;
-    calendarHeadButton: string;
-    calendarBody: string;
-    calendarDays: string;
 } & {
     root: string;
 };

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

@@ -3,35 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerPopperStyle = exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const input_style_1 = require("../input/input.style");
 const calendar_style_1 = require("../calendar/calendar.style");
 const timer_style_1 = require("./timer.style");
 const popper_style_1 = require("../popper/popper.style");
 exports.classes = (0, utils_1.defineInnerClasses)('date-time-picker', [
-    'input',
     'container',
-    'inputGroup',
-    'inputUnit',
     'dateTimeIcon',
-    'calendar',
-    'calendarHead',
-    'calendarHeadSide',
-    'calendarHeadControl',
-    'calendarHeadCenter',
-    'calendarHeadButton',
-    'calendarBody',
-    'calendarDays',
-    'dateItem'
+    'placeholder',
+    'backfill'
 ]);
-exports.style = (0, utils_1.defineCss)(({ text }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ text, spacing }) => (0, react_1.css) `
+    cursor: pointer;
+    
     .${exports.classes.container} {
         display: flex;
         align-items: center;
 
-        .${exports.classes.input} {
-            ${input_style_1.commonNativeInputStyle}
+        .${exports.classes.placeholder} {
+            flex: 1;
+            color: ${text.placeholder};
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
-    
+
+        .${exports.classes.backfill} {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[1]}px;
+        }
+        
         .${exports.classes.dateTimeIcon} {
             color: ${text.secondary};
         }

package/dist/cjs/components/descriptions/descriptions.js

@@ -23,11 +23,7 @@ exports.Descriptions = (0, react_2.memo)(({ size, labelWidth, colon = ':', label
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     ]);
     const renderGridItems = () => {
-        return items?.map((itemProps, i) => (0, react_1.createElement)(ItemComponent
-        // 最后一项沾满剩余行空间
-        , { 
-            // 最后一项沾满剩余行空间
-            flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
+        return items?.map((itemProps, i) => (0, react_1.createElement)(ItemComponent, { ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
     const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount, variant === 'grid');
     const renderTableItems = () => {

package/dist/cjs/components/dialog/dialog.js

@@ -62,12 +62,12 @@ function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, ma
     (0, react_1.useEffect)(() => {
         if (innerOpen.current) {
             const resizeObserver = new ResizeObserver(onScroll);
+            resizeObserver.observe(bodyRef.current);
             resizeObserver.observe(bodyWrapRef.current);
             return () => {
                 resizeObserver.disconnect();
             };
         }
-        return;
     }, [innerOpen.current]);
     /**
      * ---------------------------------------------------------------------

package/dist/cjs/components/inputBase/inputBase.js

@@ -56,6 +56,15 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
+    const shouldRenderClearButton = () => {
+        if (!clearable || disabled || readOnly || (0, utils_1.isUnset)(innerValue.current)) {
+            return false;
+        }
+        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
+            return !!innerValue.current.length;
+        }
+        return true;
+    };
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.mergeComponentProps)(props, {
             ref: innerRef,
             className: inputBase_style_1.classes.root,
@@ -86,7 +95,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && !!innerValue.current?.length &&
+                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), shouldRenderClearButton() &&
                 (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
 });

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

@@ -15,8 +15,8 @@ const getAttemptOrder = (placement) => {
     if (index > -1) {
         return [
             placement,
-            ...order.slice(0, index),
             ...order.slice(index + 1),
+            ...order.slice(0, index),
             placement
         ];
     }
@@ -65,8 +65,8 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         }
         tellParentOpenChange(innerOpen.current);
     }, [innerOpen.current]);
-    const onChildrenOpenChange = (open) => {
-        hold(open) === 0 && setInnerOpen(false);
+    const onChildrenOpenChange = (childrenOpen) => {
+        hold(childrenOpen) === 0 && setInnerOpen(false);
     };
     const setOpenForce = (open) => {
         if (!open) {
@@ -126,7 +126,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             // 右键菜单
             const mouseX = contextMenuEvent.current.clientX - containerRect.left;
             const mouseY = contextMenuEvent.current.clientY - containerRect.top;
-            attempt = (placement) => {
+            attempt = placement => {
                 [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
                 if (pB) {
                     switch (placement) {
@@ -190,7 +190,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -198,7 +198,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             const anchorRect = getAnchorElement().getBoundingClientRect();
             const topEdge = anchorRect.top - containerRect.top;
             const leftEdge = anchorRect.left - containerRect.left;
-            attempt = (placement) => {
+            attempt = placement => {
                 [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
                 if (sizeAdaptable) {
                     if (pA === 'top' || pA === 'bottom') {
@@ -261,7 +261,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -270,7 +270,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         else {
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
-                if (attempt(attemptOrder[i])) {
+                if (attempt(attemptOrder[i]) === false) {
                     break;
                 }
             }
@@ -295,8 +295,8 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             popperEl.style.transform = variant === 'collapse'
                 ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
                 : 'scale(0)';
+            animating.current = true;
             requestAnimationFrame(() => {
-                animating.current = true;
                 settle();
                 setOpenNextFrame(true);
             });
@@ -360,26 +360,26 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const isEntered = (0, react_1.useRef)(false);
+    const hoverStack = (0, react_1.useRef)(0);
     const pointerEnter = () => {
-        if (isEntered.current) {
+        if (hoverStack.current++) {
             return;
         }
-        isEntered.current = true;
-        hold(true);
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
     };
     const pointerLeave = () => {
-        isEntered.current = false;
-        hold(false);
+        if (--hoverStack.current) {
+            return;
+        }
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
     };
+    // 绑定锚点元素
     (0, react_1.useEffect)(() => {
         if (!hoverable) {
             return;
@@ -392,6 +392,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
     }, [hoverable]);
+    // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     (0, react_1.useEffect)(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
@@ -431,7 +432,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             return;
         }
         const keyDown = (e) => {
-            e.key === 'Enter' && openAndHold(true);
+            if (e.key === 'Enter') {
+                openAndHold(true);
+            }
         };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('keydown', keyDown);
@@ -447,9 +450,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         if (!clickable) {
             return;
         }
-        const click = () => {
-            openAndHold(true);
-        };
+        const click = () => openAndHold(true);
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -457,7 +458,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         };
     }, []);
     const onClickAway = () => {
-        innerOpen.current && openAndHold(false);
+        innerOpen.current && setOpenForce(false);
     };
     /**
      * clickToClose

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

@@ -6,7 +6,7 @@ export interface TableProps extends Partial<ComponentProps<'table'>> {
     /**
      * 是否渲染边框，默认为`none`
      * @enum 'all' 所有单元格都渲染边框
-     * @enum true 所有单元格都渲染边框
+     * @enum true 同'all', 所有单元格都渲染边框
      * @enum 'out' 仅table外边缘渲染边框
      * @enum 'none' 不渲染边框
      */

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = Table;
 exports.TableRow = TableRow;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
 const table_style_1 = require("./table.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
@@ -10,7 +11,8 @@ const tableSticky_1 = require("./tableSticky");
 function Table({ size, bordered = 'none', striped = false, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+    const tableRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, ref: (0, utils_1.cloneRef)(props.ref, tableRef), className: (0, utils_1.clsx)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
 }
 function TableRow({ selected, ...props }) {
     return (0, jsx_runtime_1.jsx)("tr", { ...props, "data-selected": selected });

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

@@ -9,9 +9,9 @@ exports.classes = (0, utils_1.defineInnerClasses)('table', [
     'container',
     'cell'
 ]);
-exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing, colors }) => {
-    const headerBg = gray(mode === 'light' ? .02 : .22);
-    const stripedBg = gray(mode === 'light' ? .01 : .21);
+exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, background, easing, colors }) => {
+    const headerBg = gray(mode === 'light' ? .03 : .22);
+    const stripedBg = gray(mode === 'light' ? .02 : .21);
     const selectedBg = (0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return (0, react_1.css) `
         width: 100%;
@@ -38,6 +38,14 @@ exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing,
             }
         }
 
+        tbody tr {
+            &:not(:hover):not([data-selected=true]) {
+                th, td {
+                    background-color: ${background.content};
+                }
+            }
+        }
+
         th, td {
             position: relative;
             text-align: left;
@@ -59,11 +67,18 @@ exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing,
         }
 
         &[data-bordered=all], &[data-bordered=true] {
-            border-top: 1px solid ${divider};
-            border-left: 1px solid ${divider};
-
             th, td {
                 border-right: 1px solid ${divider};
+                
+                &:first-of-type {
+                    border-left: 1px solid ${divider};
+                }
+            }
+            
+            thead tr:first-of-type {
+                th, td {
+                    border-top: 1px solid ${divider};
+                }
             }
         }