@canlooks/can-ui 0.0.75 → 0.0.76

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

@@ -9,22 +9,29 @@ const utils_1 = require("../../utils");
 const table_style_1 = require("./table.style");
 const tableSticky_style_1 = require("./tableSticky.style");
 exports.TableContainer = (({ component: Component = 'div', ...props }) => {
-    const [scrolledLeft, setScrolledLeft] = (0, react_1.useState)(false);
-    const [scrolledRight, setScrolledRight] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const el = innerRef.current;
         const scroll = () => {
-            setScrolledLeft(!!el.scrollLeft);
-            setScrolledRight(!!(el.scrollWidth - el.clientWidth - el.scrollLeft));
+            el.dataset.scrolledLeft = (el.scrollLeft > 0).toString();
+            el.dataset.scrolledRight = (el.scrollWidth - el.clientWidth > el.scrollLeft).toString();
         };
         scroll();
         el.addEventListener('scroll', scroll);
+        const table = el.getElementsByTagName('table')[0];
+        const resizeObserver = new ResizeObserver(scroll);
+        resizeObserver.observe(el);
+        table && resizeObserver.observe(table);
         return () => {
             el.removeEventListener('scroll', scroll);
+            resizeObserver.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...(0, utils_1.mergeComponentProps)(props, {
+            ref: innerRef,
+            css: tableSticky_style_1.style,
+            className: table_style_1.classes.container
+        }) }));
 });
 function TdCell(props) {
     return (0, jsx_runtime_1.jsx)("td", { ...useStickyCellProps(props) });
@@ -32,7 +39,7 @@ function TdCell(props) {
 function ThCell(props) {
     return (0, jsx_runtime_1.jsx)("th", { ...useStickyCellProps(props) });
 }
-function useStickyCellProps({ ref, sticky, ...props }) {
+function useStickyCellProps({ sticky, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
     const [offset, setOffset] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
@@ -62,15 +69,11 @@ function useStickyCellProps({ ref, sticky, ...props }) {
             resizeObserver.disconnect();
         };
     });
-    return {
-        ...props,
-        ref: (0, utils_1.cloneRef)(ref, innerRef),
+    return (0, utils_1.mergeComponentProps)(props, {
+        ref: innerRef,
         css: tableSticky_style_1.style,
-        className: (0, utils_1.clsx)(table_style_1.classes.cell, props.className),
-        'data-sticky': sticky,
-        style: {
-            ...sticky && { [sticky]: offset },
-            ...props.style
-        }
-    };
+        className: table_style_1.classes.cell,
+        style: sticky && { [sticky]: offset },
+        'data-sticky': sticky
+    });
 }

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

@@ -6,14 +6,6 @@ const react_1 = require("@emotion/react");
 exports.style = (0, utils_1.defineCss)(({ background, easing }) => (0, react_1.css) `
     overflow: auto;
 
-    tbody tr {
-        &:not(:hover):not([data-selected=true]) {
-            th, td {
-                background-color: ${background.content};
-            }
-        }
-    }
-
     th, td {
         &[data-sticky=left], &[data-sticky=right] {
             overflow: visible;

package/dist/cjs/utils/utils.d.ts

@@ -47,12 +47,14 @@ export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U
 export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
 export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
 export declare function mergeDeep(target: object, ...sources: any[]): any;
+export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param target
- * @param container
+ * @param target 目标元素
+ * @param container 容器
+ * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
+export declare function isElementOverflowed(target: Element, container?: Element): OverflowEdge | false;
 /**
  * 下一个事件循环
  * @param callback

package/dist/cjs/utils/utils.js

@@ -8,7 +8,7 @@ exports.toArray = toArray;
 exports.isSelected = isSelected;
 exports.cloneDeep = cloneDeep;
 exports.mergeDeep = mergeDeep;
-exports.isElementVisibleCompletely = isElementVisibleCompletely;
+exports.isElementOverflowed = isElementOverflowed;
 exports.nextTick = nextTick;
 exports.cloneRef = cloneRef;
 exports.isUnset = isUnset;
@@ -138,18 +138,33 @@ function mergeDeep(target, ...sources) {
 }
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param target
- * @param container
+ * @param target 目标元素
+ * @param container 容器
+ * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-function isElementVisibleCompletely(target, container) {
+function isElementOverflowed(target, container) {
     const { left, top, right, bottom } = target.getBoundingClientRect();
+    const judge = (containerBounding) => {
+        if (left < containerBounding.left) {
+            return 'left';
+        }
+        if (top < containerBounding.top) {
+            return 'top';
+        }
+        if (right > containerBounding.right) {
+            return 'right';
+        }
+        if (bottom > containerBounding.bottom) {
+            return 'bottom';
+        }
+        return false;
+    };
     if (container) {
-        const { left: containerLeft, top: containerTop, right: containerRight, bottom: containerBottom } = container.getBoundingClientRect();
-        return left >= containerLeft && top >= containerTop && right <= containerRight && bottom <= containerBottom;
+        return judge(container.getBoundingClientRect());
     }
     const vWidth = window.innerWidth || document.documentElement.clientWidth;
     const vHeight = window.innerHeight || document.documentElement.clientHeight;
-    return left >= 0 && top >= 0 && right <= vWidth && bottom <= vHeight;
+    return judge({ left: 0, top: 0, right: vWidth, bottom: vHeight });
 }
 /**
  * 下一个事件循环

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/inputBase/inputBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useImperativeHandle, useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { fixInputNumber, mergeComponentProps, useControlled } from '../../utils';
+import { fixInputNumber, isUnset, mergeComponentProps, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -53,6 +53,15 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
+    const shouldRenderClearButton = () => {
+        if (!clearable || disabled || readOnly || isUnset(innerValue.current)) {
+            return false;
+        }
+        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
+            return !!innerValue.current.length;
+        }
+        return true;
+    };
     return (_jsxs("div", { ...mergeComponentProps(props, {
             ref: innerRef,
             className: classes.root,
@@ -83,7 +92,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && !!innerValue.current?.length &&
+                _jsx(LoadingIndicator, {}), shouldRenderClearButton() &&
                 _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 });