@canlooks/can-ui 0.0.74 → 0.0.76

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

@@ -16,128 +16,128 @@ exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'yearItem',
     'foot'
 ]);
-exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.headSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${exports.classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${exports.classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${exports.classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${exports.classes.monthItem},
-                .${exports.classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${exports.classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${exports.classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.headSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${exports.classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${exports.classes.monthItem},
+                .${exports.classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${exports.classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${exports.classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual" | "hint";
+    popover: "" | "auto" | "manual";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

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

@@ -38,6 +38,7 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
     }
 
     .${exports.classes.content} {
+        min-width: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -93,6 +94,7 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
         }
 
         .${exports.classes.bodyWrap} {
+            min-width: 0;
             flex: 1;
         }