@laser-ui/components 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0](https://github.com/laser-ui/laser-ui/compare/v2.5.0...v2.6.0) (2026-04-08)
+
+### Bug Fixes
+
+- **components:** fix number input cant enter `0.01` ([483f7f0](https://github.com/laser-ui/laser-ui/commit/483f7f099a25d68a89ba3899bc07fcd380513531))
+
 # [2.5.0](https://github.com/laser-ui/laser-ui/compare/v2.4.0...v2.5.0) (2026-04-03)
 
 ### Features

package/date-picker/DatePicker.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useEventCallback, useForceUpdate, useImmer, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
+import { useAsync, useEventCallback, useImmer, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
 import { setRef } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CalendarTodayOutlined from '@material-design-icons/svg/outlined/calendar_today.svg?react';
 import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
-import { useEffect, useImperativeHandle, useRef } from 'react';
+import { useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
@@ -23,8 +23,8 @@ import { Transition } from '../transition';
 import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 export function DatePicker(props) {
-    var _a, _b;
-    const _c = useComponentProps('DatePicker', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format: formatProp, order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, presetDate, config, showTime = false, escClosable = true, inputProps, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["ref", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "presetDate", "config", "showTime", "escClosable", "inputProps", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
+    var _a;
+    const _b = useComponentProps('DatePicker', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format: formatProp, order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, presetDate, config, showTime = false, escClosable = true, inputProps, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _b, restProps = __rest(_b, ["ref", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "presetDate", "config", "showTime", "escClosable", "inputProps", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, {
         'date-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker'],
@@ -32,87 +32,130 @@ export function DatePicker(props) {
         'date-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker-popup'],
     }, styleOverrides);
     const { t } = useTranslation();
-    const forceUpdate = useForceUpdate();
     const async = useAsync();
     const { contentResizeRef } = useLayout();
     const boxRef = useRef(null);
     const popupRef = useRef(null);
-    const inputLeftRef = useRef(null);
-    const inputRightRef = useRef(null);
+    const inputStartRef = useRef(null);
+    const inputEndRef = useRef(null);
     const indicatorRef = useRef(null);
     const panelRef = useRef(null);
     const timePickerPanelRef = useRef(null);
     const updatePanel = (date) => {
         var _a, _b;
-        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
-        (_b = timePickerPanelRef.current) === null || _b === void 0 ? void 0 : _b.call(timePickerPanelRef, date);
+        if (visible) {
+            (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
+            (_b = timePickerPanelRef.current) === null || _b === void 0 ? void 0 : _b.call(timePickerPanelRef, date);
+        }
     };
-    const dataRef = useRef({
-        latestFocused: 'start',
-        onceVisible: false,
-        focusAnother: false,
-        inputValue: [undefined, undefined],
-        rangeDate: [null, null],
-    });
+    const dataRef = useRef({ focusWithoutUser: false });
     const format = isUndefined(formatProp) ? (showTime ? 'YYYY-MM-DD HH:mm:ss' : `YYYY-MM-DD`) : formatProp;
-    const order = (date) => orderDate(date, orderProp, showTime ? undefined : 'date');
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const [focused, setFocused] = useImmer([false, false]);
-    if (focused[0]) {
-        dataRef.current.latestFocused = 'start';
-    }
-    if (focused[1]) {
-        dataRef.current.latestFocused = 'end';
-    }
-    const [_value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
-    let [valueLeft, valueRight = null] = range ? ((_a = _value) !== null && _a !== void 0 ? _a : [null, null]) : [_value, null];
-    if (range) {
-        if (isNull(_value)) {
-            [valueLeft, valueRight] = dataRef.current.rangeDate;
+    const [value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const [placeholderValues, setPlaceholderValues] = useImmer(() => {
+        let values = ['', ''];
+        if (value) {
+            if (range) {
+                values = value.map((v) => dayjs(v).format(format));
+            }
+            else {
+                values[0] = dayjs(value).format(format);
+            }
+        }
+        return values;
+    });
+    const newPlaceholderValues = (() => {
+        if (focused.some((f) => f)) {
+            return;
+        }
+        if (isNull(value)) {
+            if (placeholderValues.some((p) => p)) {
+                return ['', ''];
+            }
         }
         else {
-            dataRef.current.rangeDate = [null, null];
+            if (isArray(value)) {
+                const currentPlaceholder = value.map((v) => dayjs(v).format(format));
+                if (currentPlaceholder.some((p, i) => p !== placeholderValues[i])) {
+                    return currentPlaceholder;
+                }
+            }
+            else {
+                const currentPlaceholder = dayjs(value).format(format);
+                if (currentPlaceholder !== placeholderValues[0]) {
+                    return [currentPlaceholder, ''];
+                }
+            }
         }
+    })();
+    if (!isUndefined(newPlaceholderValues)) {
+        setPlaceholderValues(newPlaceholderValues);
     }
-    const inputValue = [0, 1].map((index) => focused[index] && !isUndefined(dataRef.current.inputValue[index])
-        ? dataRef.current.inputValue[index]
-        : (() => {
-            const value = index === 0 ? valueLeft : valueRight;
-            return isNull(value) ? '' : dayjs(value).format(format);
-        })());
+    const placeholderDates = placeholderValues.map((v) => (v && dayjs(v, format, true).isValid() ? dayjs(v, format).toDate() : null));
     const changeValue = (date) => {
-        const index = focused.findIndex((f) => f);
-        if (range) {
-            if (isNull(_value)) {
-                dataRef.current.rangeDate[index] = date;
-                if (dataRef.current.rangeDate.every((v) => !isNull(v))) {
-                    dataRef.current.focusAnother = order(dataRef.current.rangeDate);
-                    if (dataRef.current.focusAnother) {
-                        dataRef.current.rangeDate.reverse();
+        if (isNull(date)) {
+            _changeValue(null);
+            setPlaceholderValues(['', '']);
+        }
+        else {
+            if (range) {
+                let newValue = [...placeholderDates];
+                if (isArray(date)) {
+                    newValue = date;
+                }
+                else {
+                    newValue[focused[0] ? 0 : 1] = date;
+                }
+                if (newValue.every((v) => !isNull(v))) {
+                    const reverse = orderDate(newValue, orderProp, showTime ? undefined : 'date');
+                    if (reverse) {
+                        newValue.reverse();
+                        const inputEl = focused[0] ? inputEndRef.current : inputStartRef.current;
+                        if (inputEl) {
+                            dataRef.current.focusWithoutUser = true;
+                            inputEl.focus({ preventScroll: true });
+                        }
                     }
-                    dataRef.current.inputValue = [undefined, undefined];
-                    _changeValue(dataRef.current.rangeDate);
+                    _changeValue(newValue);
                 }
+                setPlaceholderValues(newValue.map((v) => (v ? dayjs(v).format(format) : '')));
             }
             else {
-                dataRef.current.inputValue = [undefined, undefined];
-                _changeValue((draft) => {
-                    draft[index] = date;
-                    dataRef.current.focusAnother = order(draft);
-                    if (dataRef.current.focusAnother) {
-                        draft.reverse();
-                    }
-                });
+                _changeValue(date);
+                setPlaceholderValues([dayjs(date).format(format), '']);
             }
         }
+    };
+    const handleEnter = (date) => {
+        if (isArray(date)) {
+            updatePanel(date[focused[0] ? 0 : 1]);
+            changeVisible(false);
+            dataRef.current.lastVisible = focused[0] ? 'start' : 'end';
+        }
         else {
-            dataRef.current.inputValue = [undefined, undefined];
-            _changeValue(date);
+            updatePanel(date);
+            if (range) {
+                if (placeholderDates[focused[0] ? 1 : 0]) {
+                    changeVisible(false);
+                    dataRef.current.lastVisible = focused[0] ? 'start' : 'end';
+                }
+                else {
+                    const inputEl = focused[0] ? inputEndRef.current : inputStartRef.current;
+                    if (inputEl) {
+                        dataRef.current.focusWithoutUser = true;
+                        inputEl.focus({ preventScroll: true });
+                    }
+                }
+            }
+            else {
+                changeVisible(false);
+                dataRef.current.lastVisible = 'start';
+            }
         }
-        forceUpdate();
     };
-    const [placeholderLeft = t('DatePicker', range ? 'Start date' : 'Select date'), placeholderRight = t('DatePicker', 'End date')] = range
-        ? ((_b = placeholder) !== null && _b !== void 0 ? _b : [])
+    const [placeholderStart = t('DatePicker', range ? 'Start date' : 'Select date'), placeholderEnd = t('DatePicker', 'End date')] = range
+        ? ((_a = placeholder) !== null && _a !== void 0 ? _a : [])
         : [placeholder];
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const zIndexValue = useZIndex(visible);
@@ -132,6 +175,24 @@ export function DatePicker(props) {
             popupRef.current.style.maxWidth = maxWidth + 'px';
         }
     });
+    const updatePanelWhenEnter = useEventCallback(() => {
+        const update = () => {
+            const date = placeholderDates[focused[0] ? 0 : 1];
+            if (date) {
+                updatePanel(date);
+            }
+        };
+        if (range) {
+            if ((focused[0] ? 'start' : 'end') !== dataRef.current.lastVisible) {
+                update();
+            }
+        }
+        else {
+            if (dataRef.current.lastVisible !== 'start') {
+                update();
+            }
+        }
+    });
     useContainerScrolling(boxRef, updatePosition, !visible);
     useResize(boxRef, updatePosition, undefined, !visible);
     useResize(popupRef, updatePosition, undefined, !visible);
@@ -143,13 +204,13 @@ export function DatePicker(props) {
         if (boxRef.current && indicatorRef.current) {
             let focus = false;
             const boxRect = boxRef.current.getBoundingClientRect();
-            if (inputLeftRef.current && document.activeElement === inputLeftRef.current) {
-                const rect = inputLeftRef.current.getBoundingClientRect();
+            if (inputStartRef.current && document.activeElement === inputStartRef.current) {
+                const rect = inputStartRef.current.getBoundingClientRect();
                 indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
                 focus = true;
             }
-            if (inputRightRef.current && document.activeElement === inputRightRef.current) {
-                const rect = inputRightRef.current.getBoundingClientRect();
+            if (inputEndRef.current && document.activeElement === inputEndRef.current) {
+                const rect = inputEndRef.current.getBoundingClientRect();
                 indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
                 focus = true;
             }
@@ -158,43 +219,11 @@ export function DatePicker(props) {
             }
         }
     });
-    useEffect(() => {
-        if (dataRef.current.focusAnother && document.activeElement) {
-            const el = document.activeElement.parentElement;
-            for (let index = 0; index < el.childElementCount; index++) {
-                const element = el.children.item(index);
-                if (element.tagName.toLowerCase() === 'input' && element !== document.activeElement) {
-                    element.focus({ preventScroll: true });
-                    break;
-                }
-            }
-        }
-        dataRef.current.focusAnother = false;
-    });
-    const handleEnter = (date) => {
-        if (range) {
-            const index = focused.findIndex((f) => f);
-            if (isNull(index === 0 ? valueRight : valueLeft)) {
-                dataRef.current.focusAnother = true;
-                forceUpdate();
-            }
-            else {
-                changeVisible(false);
-            }
-        }
-        else {
-            changeVisible(false);
-        }
-        if (!dataRef.current.focusAnother) {
-            updatePanel(date);
-        }
-    };
-    const clearable = clearableProp && !isNull(_value) && !visible && !disabled;
-    const inputNode = (isLeft) => {
+    const clearable = clearableProp && !disabled && !visible && placeholderValues.some((p) => p);
+    const inputNode = (isStart) => {
         var _a, _b;
-        const index = isLeft ? 0 : 1;
-        const value = isLeft ? valueLeft : valueRight;
-        const inputRef = isLeft ? inputLeftRef : inputRightRef;
+        const index = isStart ? 0 : 1;
+        const inputRef = isStart ? inputStartRef : inputEndRef;
         return (_jsx(BaseInput, Object.assign({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps[index], mergeCS(styled('date-picker__input'), {
             className: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.className,
             style: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _b === void 0 ? void 0 : _b.style,
@@ -206,13 +235,29 @@ export function DatePicker(props) {
                     inputRef.current = null;
                     ret();
                 };
-            }, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
-                forceUpdate();
-                dataRef.current.inputValue[index] = val;
-                if (dayjs(val, format, true).isValid()) {
-                    const date = dayjs(val, format).toDate();
-                    changeValue(date);
-                    updatePanel(date);
+            }, type: "text", autoComplete: "off", value: placeholderValues[index], size: 22, placeholder: isStart ? placeholderStart : placeholderEnd, disabled: disabled, onValueChange: (val) => {
+                const values = [...placeholderValues];
+                values[index] = val;
+                setPlaceholderValues(values);
+                if (range) {
+                    if (values.every((v) => !v)) {
+                        _changeValue(null);
+                    }
+                    else if (values.every((v) => v && dayjs(v, format, true).isValid())) {
+                        const dates = values.map((v) => dayjs(v, format).toDate());
+                        _changeValue(dates);
+                        updatePanel(dates[index]);
+                    }
+                }
+                else {
+                    if (!values[index]) {
+                        _changeValue(null);
+                    }
+                    else if (values[index] && dayjs(values[index], format, true).isValid()) {
+                        const date = dayjs(values[index], format).toDate();
+                        _changeValue(date);
+                        updatePanel(date);
+                    }
                 }
             }, onKeyDown: (e) => {
                 var _a, _b;
@@ -222,12 +267,14 @@ export function DatePicker(props) {
                         e.stopPropagation();
                         e.preventDefault();
                         changeVisible(false);
+                        dataRef.current.lastVisible = isStart ? 'start' : 'end';
                     }
                 }
-                else if (e.code === 'Enter' && inputValue[index] && dayjs(inputValue[index], format, true).isValid()) {
-                    e.preventDefault();
-                    const date = dayjs(inputValue[index], format).toDate();
-                    handleEnter(date);
+                else if (e.code === 'Enter') {
+                    if (placeholderDates[index]) {
+                        e.preventDefault();
+                        handleEnter(placeholderDates[index]);
+                    }
                 }
             }, onFocus: (e) => {
                 var _a, _b, _c, _d;
@@ -235,25 +282,26 @@ export function DatePicker(props) {
                 (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
                 setFocused((draft) => {
                     draft.fill(false);
-                    draft[isLeft ? 0 : 1] = true;
+                    draft[index] = true;
                 });
-                dataRef.current.inputValue = [undefined, undefined];
-                if (visible && range && value) {
-                    updatePanel(value);
+                if (range && !dataRef.current.focusWithoutUser && placeholderDates[index]) {
+                    updatePanel(placeholderDates[index]);
                 }
+                dataRef.current.focusWithoutUser = false;
             }, onBlur: (e) => {
                 var _a, _b;
                 (_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 dataRef.current.clearTid = async.setTimeout(() => {
                     setFocused([false, false]);
                     changeVisible(false);
+                    dataRef.current.lastVisible = isStart ? 'start' : 'end';
                 }, 20);
             } })));
     };
     const preventBlur = (e) => {
-        if ((document.activeElement === inputLeftRef.current || document.activeElement === inputRightRef.current) &&
-            e.target !== inputLeftRef.current &&
-            e.target !== inputRightRef.current &&
+        if ((document.activeElement === inputStartRef.current || document.activeElement === inputEndRef.current) &&
+            e.target !== inputStartRef.current &&
+            e.target !== inputEndRef.current &&
             e.button === 0) {
             e.preventDefault();
         }
@@ -281,7 +329,8 @@ export function DatePicker(props) {
                     var _a, _b;
                     (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     if (!focused.some((f) => f)) {
-                        (_b = inputLeftRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+                        dataRef.current.focusWithoutUser = true;
+                        (_b = inputStartRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
                     }
                     changeVisible(true);
                 }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('date-picker__indicator'), { ref: (instance) => {
@@ -291,8 +340,7 @@ export function DatePicker(props) {
                                     };
                                 } })), _jsx("div", Object.assign({}, styled('date-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('date-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
                             e.stopPropagation();
-                            dataRef.current.inputValue = [undefined, undefined];
-                            _changeValue(null);
+                            changeValue(null);
                             onClear === null || onClear === void 0 ? void 0 : onClear();
                         }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('date-picker__icon'), {
                         style: { visibility: clearable ? 'hidden' : undefined },
@@ -306,34 +354,10 @@ export function DatePicker(props) {
                     return el;
                 }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: () => {
                         updatePosition();
-                        const cb = () => {
-                            const value = focused[0] ? valueLeft : valueRight;
-                            if (value) {
-                                updatePanel(value);
-                            }
-                        };
-                        if (range) {
-                            cb();
-                        }
-                        else if (!dataRef.current.onceVisible) {
-                            dataRef.current.onceVisible = true;
-                            cb();
-                        }
+                        updatePanelWhenEnter();
                     }, onBeforeEnter: () => {
                         updatePosition();
-                        const cb = () => {
-                            const value = focused[0] ? valueLeft : valueRight;
-                            if (value) {
-                                updatePanel(value);
-                            }
-                        };
-                        if (range) {
-                            cb();
-                        }
-                        else if (!dataRef.current.onceVisible) {
-                            dataRef.current.onceVisible = true;
-                            cb();
-                        }
+                        updatePanelWhenEnter();
                     }, onAfterEnter: () => {
                         afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
                     }, onAfterLeave: () => {
@@ -351,32 +375,16 @@ export function DatePicker(props) {
                             preventBlur(e);
                         }, onMouseUp: (e) => {
                             preventBlur(e);
-                        }, children: [presetDate && (_jsx("ul", Object.assign({}, styled('date-picker__preset'), { children: Object.keys(presetDate).map((name) => {
-                                    const handleClick = () => {
+                        }, children: [presetDate && (_jsx("ul", Object.assign({}, styled('date-picker__preset'), { children: Object.keys(presetDate).map((name) => (_createElement("li", Object.assign({}, styled('date-picker__preset-option'), { key: name, role: "button", onClick: () => {
                                         const date = presetDate[name]();
-                                        dataRef.current.inputValue = [undefined, undefined];
-                                        if (range) {
-                                            if (isArray(date)) {
-                                                _changeValue(date);
-                                                changeVisible(false);
-                                            }
-                                            else {
-                                                changeValue(date);
-                                                handleEnter(date);
-                                            }
-                                        }
-                                        else {
-                                            _changeValue(date);
-                                            handleEnter(date);
-                                        }
-                                    };
-                                    return (_createElement("li", Object.assign({}, styled('date-picker__preset-option'), { key: name, role: "button", onClick: handleClick }), name));
-                                }) }))), _jsxs("div", Object.assign({}, styled('date-picker__panel-wrapper'), { children: [_jsx(DatePickerPanel, { ref: (instance) => {
+                                        changeValue(date);
+                                        handleEnter(date);
+                                    } }), name))) }))), _jsxs("div", Object.assign({}, styled('date-picker__panel-wrapper'), { children: [_jsx(DatePickerPanel, { ref: (instance) => {
                                             panelRef.current = instance;
                                             return () => {
                                                 panelRef.current = null;
                                             };
-                                        }, styled: styled, currentSelected: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, anotherSelected: dataRef.current.latestFocused === 'start' ? valueRight : valueLeft, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, range: range, onDateChange: (date) => {
+                                        }, styled: styled, currentSelected: placeholderDates[focused[0] ? 0 : 1], anotherSelected: placeholderDates[focused[0] ? 1 : 0], config: config ? (...args) => config(...args, focused[0] ? 'start' : 'end', placeholderDates) : undefined, range: range, onDateChange: (date) => {
                                             changeValue(date);
                                             if (!showTime) {
                                                 handleEnter(date);
@@ -386,11 +394,11 @@ export function DatePicker(props) {
                                             return () => {
                                                 timePickerPanelRef.current = null;
                                             };
-                                        }, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: (() => {
+                                        }, styled: styled, time: placeholderDates[focused[0] ? 0 : 1], format: format, config: (() => {
                                             if (showTime && !isBoolean(showTime)) {
                                                 const fn = showTime.config;
                                                 if (fn) {
-                                                    return (...args) => fn(...args, dataRef.current.latestFocused, [valueLeft, valueRight]);
+                                                    return (...args) => fn(...args, focused[0] ? 'start' : 'end', placeholderDates);
                                                 }
                                             }
                                         })(), inDatePicker: true, onTimeChange: (time) => {

package/dropdown/Dropdown.js

@@ -27,11 +27,7 @@ export function Dropdown(props) {
     const updateSubPosition = useRef(new Map());
     const [focusVisible, focusVisibleProps] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
-    const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
-    if (!visible) {
-        popupIdsRef.current = [];
-    }
-    const popupIds = popupIdsRef.current;
+    const { popupIds, setPopupIds, addPopupId, removePopupId } = useNestedPopup(visible);
     const [focusIds, setFocusIds] = useState([]);
     const focusId = (() => {
         var _a;

package/hooks/useNestedPopup.d.ts

@@ -1,11 +1,10 @@
-import type { DraftFunction } from '@laser-ui/hooks/useImmer';
 interface PopupId<ID> {
     id: ID;
     visible: boolean;
 }
-export declare function useNestedPopup<ID>(): {
-    popupIdsRef: import("react").RefObject<PopupId<ID>[]>;
-    setPopupIds: (value: PopupId<ID>[] | DraftFunction<PopupId<ID>[]>) => void;
+export declare function useNestedPopup<ID>(visible?: boolean): {
+    popupIds: PopupId<ID>[];
+    setPopupIds: import("@laser-ui/hooks/useImmer").Updater<PopupId<ID>[]>;
     addPopupId: (id: ID) => void;
     removePopupId: (id: ID) => void;
 };

package/hooks/useNestedPopup.js

@@ -1,16 +1,11 @@
-import { useForceUpdate } from '@laser-ui/hooks';
-import { freeze, produce } from 'immer';
-import { isFunction } from 'lodash';
-import { useRef } from 'react';
-export function useNestedPopup() {
-    const forceUpdate = useForceUpdate();
-    const popupIdsRef = useRef([]);
-    const setPopupIds = (value) => {
-        popupIdsRef.current = isFunction(value) ? produce(popupIdsRef.current, value) : freeze(value);
-        forceUpdate();
-    };
+import { useImmer } from '@laser-ui/hooks';
+export function useNestedPopup(visible = true) {
+    const [popupIds, setPopupIds] = useImmer([]);
+    if (!visible && popupIds.length > 0) {
+        setPopupIds([]);
+    }
     return {
-        popupIdsRef,
+        popupIds,
         setPopupIds,
         addPopupId: (id) => {
             setPopupIds((draft) => {

package/image/Image.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useForceUpdate } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { has } from 'lodash';
-import { Fragment, useRef } from 'react';
+import { Fragment, useState } from 'react';
 import { ImageAction } from './ImageAction';
 import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
@@ -13,42 +12,37 @@ import { mergeCS } from '../utils';
 export const Image = (props) => {
     const _a = useComponentProps('Image', props), { styleOverrides, styleProvider, loading, error, actions, imgProps } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "loading", "error", "actions", "imgProps"]);
     const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
-    const forceUpdate = useForceUpdate();
-    const dataRef = useRef({
-        isLoading: true,
-        isError: false,
-    });
-    if (imgProps.src !== dataRef.current.prevSrc) {
-        dataRef.current.prevSrc = imgProps.src;
-        dataRef.current.isLoading = true;
-        dataRef.current.isError = false;
+    const [previousSrc, setPreviousSrc] = useState(imgProps.src);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isError, setIsError] = useState(false);
+    if (imgProps.src !== previousSrc) {
+        setPreviousSrc(imgProps.src);
+        setIsLoading(true);
+        setIsError(false);
     }
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [dataRef.current.isLoading && checkNodeExist(loading) && loading, dataRef.current.isError && checkNodeExist(error) && error, actions && (_jsx("div", Object.assign({}, styled('image__actions'), { children: actions.map((node, index) => {
+    }), { children: [isLoading && checkNodeExist(loading) && loading, isError && checkNodeExist(error) && error, actions && (_jsx("div", Object.assign({}, styled('image__actions'), { children: actions.map((node, index) => {
                     const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
                     return _jsx(Fragment, { children: action }, id);
                 }) }))), _jsx("img", Object.assign({}, imgProps, mergeCS(styled('image__img'), {
                 className: imgProps === null || imgProps === void 0 ? void 0 : imgProps.className,
-                style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (dataRef.current.isLoading && loading) || (dataRef.current.isError && error) ? 'none' : undefined }),
+                style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (isLoading && loading) || (isError && error) ? 'none' : undefined }),
             }), { onLoadStart: (e) => {
                     var _a;
                     // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoadStart) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = true;
-                    forceUpdate();
+                    setIsLoading(true);
                 }, onLoad: (e) => {
                     var _a;
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = false;
-                    forceUpdate();
+                    setIsLoading(false);
                 }, onError: (e) => {
                     var _a;
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = false;
-                    dataRef.current.isError = true;
-                    forceUpdate();
+                    setIsLoading(false);
+                    setIsError(true);
                 } }))] })));
 };
 Image.Loader = ImageLoader;