@canlooks/can-ui 0.0.74 → 0.0.76

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

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${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);
-
-            .${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);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${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);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${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);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${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);
+
+            .${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);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${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);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${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);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

@@ -7,5 +7,5 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
 export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
-    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
+    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", clickToClose: true, children: _jsx(Bubble, { placement: "bottom", trigger: "click", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
 });

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

@@ -1,205 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useMemo, useRef } from 'react';
-import { Popper } from '../popper';
-import { InputBase } from '../inputBase';
-import { useControlled, mergeComponentProps } from '../../utils';
+import { createContext, memo, useContext, useMemo, useRef } from 'react';
 import { classes, datePickerPopperStyle, style } from './dateTimePicker.style';
 import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { InputBase } from '../inputBase';
+import { mergeComponentProps, useControlled } from '../../utils';
+import { Popper } from '../popper';
 import { Calendar } from '../calendar';
-import { Timer } from './timer';
 import { Icon } from '../icon';
 import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
 import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
-dayjs.extend(customParseFormat);
-const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
+import { Timer } from './timer';
 const DateTimePickerContext = createContext({});
 export function useDateTimePickerContext() {
     return useContext(DateTimePickerContext);
 }
 export const DateTimePicker = 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 = useRef(null);
     const focused = useRef(false);
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
         // 如果仍聚焦在输入框，则不用关闭弹框
         (open || !focused.current) && _setInnerOpen(open);
     };
-    useEffect(() => {
-        if (!innerOpen.current && !dateValue.current) {
-            // 弹框关闭时没有选中日期，清空输入框
-            innerInputRef.current.value = format;
-        }
-    }, [innerOpen.current]);
     const [dateValue, _setDateValue] = useControlled(defaultValue, value, onChange);
     const setDateValue = (date) => {
         _setDateValue(date);
         autoClose && _setInnerOpen(false);
     };
-    useEffect(() => {
-        innerInputRef.current.value = dateValue.current?.format(format) ?? format;
-    }, [dateValue.current]);
-    const clearHandler = () => {
-        setDateValue(null);
-        selectFn();
-    };
-    const ranges = 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 = 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 = 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 = dayjs(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 = dayjs(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 = useMemo(() => ({
         min, max, disabledHours, disabledMinutes, disabledSeconds
     }), [
@@ -207,7 +33,8 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
     ]);
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
-    const _dateVal = dateValue.current || dayjs();
+    // 若外部没有值，内部需要“现在”作为默认值
+    const innerValue = dateValue.current || dayjs();
     return (_jsx(Popper, { ...mergeComponentProps({
             css: datePickerPopperStyle,
             open: innerOpen.current,
@@ -217,8 +44,8 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
             content: (_jsxs(_Fragment, { children: [showCalendar &&
                         _jsx(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 &&
-                        _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(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 &&
+                        _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: innerValue, onChange: setDateValue }) })] }))
         }, popperProps, {
             onOpenChange: setInnerOpen,
             onPointerDown: e => e.preventDefault()
@@ -226,15 +53,12 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
                 css: style,
                 className: classes.root,
                 value: dateValue.current,
-                onClear: clearHandler,
-                onSelect: selectHandler,
-                onFocus: focusHandler,
-                onBlur: blurHandler,
-                onKeyDown: keydownHandler
-            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.container, children: [_jsx("input", { ...mergeComponentProps(inputBaseProps, inputProps, {
-                            ref: innerInputRef,
-                            className: classes.input
-                        }) }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
+                onClear() {
+                    setDateValue(null);
+                }
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.container, children: [!dateValue.current
+                        ? _jsx("div", { className: classes.placeholder, children: props.placeholder ?? '请选择' })
+                        : _jsx("div", { className: classes.backfill, children: dateValue.current.format(format) }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? _jsx(Icon, { icon: faClock })
                             : _jsx(Icon, { icon: faCalendar }) })] }) }) }));
 });

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

@@ -1,34 +1,37 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
-import { commonNativeInputStyle } from '../input/input.style';
 import { classes as calendarClasses } from '../calendar/calendar.style';
 import { classes as timerClasses } from './timer.style';
 import { popperStyleCallback } from '../popper/popper.style';
 export const classes = defineInnerClasses('date-time-picker', [
-    'input',
     'container',
-    'inputGroup',
-    'inputUnit',
     'dateTimeIcon',
-    'calendar',
-    'calendarHead',
-    'calendarHeadSide',
-    'calendarHeadControl',
-    'calendarHeadCenter',
-    'calendarHeadButton',
-    'calendarBody',
-    'calendarDays',
-    'dateItem'
+    'placeholder',
+    'backfill'
 ]);
-export const style = defineCss(({ text }) => css `
+export const style = defineCss(({ text, spacing }) => css `
+    cursor: pointer;
+    
     .${classes.container} {
         display: flex;
         align-items: center;
 
-        .${classes.input} {
-            ${commonNativeInputStyle}
+        .${classes.placeholder} {
+            flex: 1;
+            color: ${text.placeholder};
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
-    
+
+        .${classes.backfill} {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[1]}px;
+        }
+        
         .${classes.dateTimeIcon} {
             color: ${text.secondary};
         }

package/dist/esm/components/descriptions/descriptions.js

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

package/dist/esm/components/dialog/dialog.js

@@ -59,12 +59,12 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
     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/esm/components/dialog/dialog.style.js

@@ -35,6 +35,7 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
     }
 
     .${classes.content} {
+        min-width: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -90,6 +91,7 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
         }
 
         .${classes.bodyWrap} {
+            min-width: 0;
             flex: 1;
         }