@laser-ui/components 2.4.0 → 2.6.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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
+
+- **components:** cascader support `onScrollBottom` event ([19508bb](https://github.com/laser-ui/laser-ui/commit/19508bbd77fabdd3b884b40e77005d8f596985ac))
+
 # [2.4.0](https://github.com/laser-ui/laser-ui/compare/v2.3.5...v2.4.0) (2026-03-27)
 
 ### Bug Fixes

package/cascader/Cascader.js

@@ -27,7 +27,7 @@ import { TREE_NODE_KEY } from '../tree/vars';
 import { getVerticalSidePosition, isPrintableCharacter, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
 export function Cascader(props) {
-    const _a = useComponentProps('Cascader', props), { ref, styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputProps, popupRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputProps", "popupRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange"]);
+    const _a = useComponentProps('Cascader', props), { ref, styleOverrides, styleProvider, formControl, list, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, multiple = false, searchable = false, searchValue: searchValueProp, defaultSearchValue, onlyLeafSelectable = true, clearable: clearableProp = false, loading = false, size: sizeProp, disabled: disabledProp = false, virtual = false, escClosable = true, customItem, customSelected, customSearch, inputProps, popupRender, onModelChange, onVisibleChange, onSearch, onClear, onFirstFocus, afterVisibleChange, onScrollBottom } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "formControl", "list", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "multiple", "searchable", "searchValue", "defaultSearchValue", "onlyLeafSelectable", "clearable", "loading", "size", "disabled", "virtual", "escClosable", "customItem", "customSelected", "customSearch", "inputProps", "popupRender", "onModelChange", "onVisibleChange", "onSearch", "onClear", "onFirstFocus", "afterVisibleChange", "onScrollBottom"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { cascader: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.cascader, 'cascader-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['cascader-popup'] }, styleOverrides);
     const { t } = useTranslation();
@@ -482,12 +482,16 @@ export function Cascader(props) {
                                         }, namespace: namespace, styled: styled, id: listId, list: searchList, customItem: customItem, itemId: getItemId, itemFocused: itemFocusedWithSearch, multiple: multiple, onlyLeafSelectable: onlyLeafSelectable, virtual: virtual, focusVisible: focusVisible, onClick: (item) => {
                                             changeItemFocusedWithSearch(item);
                                             changeSelectedByClickWithSearch(item);
+                                        }, onScrollBottom: () => {
+                                            onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom([]);
                                         } })) : (_jsx(CascaderPanel, { ref: (instance) => {
                                             focusRef.current = instance;
                                             return () => {
                                                 focusRef.current = null;
                                             };
-                                        }, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch }))] })));
+                                        }, namespace: namespace, styled: styled, id: listId, list: nodes, customItem: customItem, itemId: getItemId, itemSelected: !multiple && hasSelected ? nodesMap.get(selected) : undefined, itemFocused: itemFocusedWithoutSearch, multiple: multiple, virtual: virtual, focusVisible: focusVisible, onFocus: changeItemFocusedWithoutSearch, onClick: changeSelectedByClickWithoutSearch, onScrollBottom: (ancestors) => {
+                                            onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(ancestors);
+                                        } }))] })));
                             return popupRender ? popupRender(el) : el;
                         })() }))) }) })] }));
 }

package/cascader/internal/CascaderPanel.d.ts

@@ -17,6 +17,7 @@ interface CascaderPanelProps<V extends React.Key, T extends CascaderItem<V>> {
     focusVisible: boolean;
     onFocus: (item: AbstractTreeNode<V, T>) => void;
     onClick: (item: AbstractTreeNode<V, T>) => void;
+    onScrollBottom: (ancestors: V[]) => void;
 }
 export declare function CascaderPanel<V extends React.Key, T extends CascaderItem<V>>(props: CascaderPanelProps<V, T>): React.ReactElement | null;
 export {};

package/cascader/internal/CascaderPanel.js

@@ -11,7 +11,7 @@ import { Empty } from '../../empty';
 import { Icon } from '../../icon';
 import { VirtualScroll } from '../../virtual-scroll';
 export function CascaderPanel(props) {
-    const { ref, namespace, styled, id, list, customItem, itemId, itemSelected, itemFocused, multiple, virtual, focusVisible, onFocus, onClick, _root = true, } = props;
+    const { ref, namespace, styled, id, list, customItem, itemId, itemSelected, itemFocused, multiple, virtual, focusVisible, onFocus, onClick, onScrollBottom, _root = true, } = props;
     const listRef = useRef(null);
     const vsRef = useRef(null);
     const focusRef = useRef(null);
@@ -135,7 +135,9 @@ export function CascaderPanel(props) {
                                 } }) }))),
                         _jsx("div", Object.assign({}, styled('cascader__option-content'), { children: customItem ? customItem(item.origin) : item.origin.label })),
                         !item.isLeaf && (_jsx("div", Object.assign({}, styled('cascader__option-icon'), { children: _jsx(Icon, { children: item.origin.loading ? _jsx(CircularProgress, {}) : _jsx(KeyboardArrowRightOutlined, {}) }) })))));
-                }, itemFocused: nodeFocused === null || nodeFocused === void 0 ? void 0 : nodeFocused.id, placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list', 'cascader__list--inline'), { ref: (instance) => {
+                }, itemFocused: nodeFocused === null || nodeFocused === void 0 ? void 0 : nodeFocused.id, placeholder: "li", onScrollEnd: () => {
+                    onScrollBottom([]);
+                }, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list', 'cascader__list--inline'), { ref: (instance) => {
                         listRef.current = instance;
                         return () => {
                             listRef.current = null;
@@ -145,5 +147,7 @@ export function CascaderPanel(props) {
                     return () => {
                         focusRef.current = null;
                     };
-                }, id: undefined, list: nodeFocused.children })))] }));
+                }, id: undefined, list: nodeFocused.children, onScrollBottom: (ancestors) => {
+                    onScrollBottom([nodeFocused.id].concat(ancestors));
+                } })))] }));
 }

package/cascader/internal/CascaderSearchPanel.d.ts

@@ -16,6 +16,7 @@ interface CascaderSearchPanelProps<V extends React.Key, T extends CascaderItem<V
     virtual: boolean | number;
     focusVisible: boolean;
     onClick: (item: CascaderSearchPanelItem<V, T>) => void;
+    onScrollBottom: () => void;
 }
 export declare function CascaderSearchPanel<V extends React.Key, T extends CascaderItem<V>>(props: CascaderSearchPanelProps<V, T>): React.ReactElement | null;
 export {};

package/cascader/internal/CascaderSearchPanel.js

@@ -10,7 +10,7 @@ import { getTreeNodeLabel } from '../../tree/utils';
 import { TREE_NODE_KEY } from '../../tree/vars';
 import { VirtualScroll } from '../../virtual-scroll';
 export function CascaderSearchPanel(props) {
-    const { ref, namespace, styled, id, list, customItem, itemId, itemFocused, multiple, onlyLeafSelectable, virtual, focusVisible, onClick, } = props;
+    const { ref, namespace, styled, id, list, customItem, itemId, itemFocused, multiple, onlyLeafSelectable, virtual, focusVisible, onClick, onScrollBottom, } = props;
     const listRef = useRef(null);
     const vsRef = useRef(null);
     const handleKeyDown = useEventCallback((code) => {
@@ -73,7 +73,7 @@ export function CascaderSearchPanel(props) {
                 focusVisible && (itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value) === item.value && _jsx("div", { className: `${namespace}-focus-outline` }),
                 multiple && (_jsx("div", Object.assign({}, styled('cascader__option-prefix'), { children: _jsx(Checkbox, { model: node.checked, disabled: node.disabled }) }))),
                 _jsx("div", Object.assign({}, styled('cascader__option-content'), { children: customItem ? customItem(node.origin) : getTreeNodeLabel(node) }))));
-        }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list'), { ref: (instance) => {
+        }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, placeholder: "li", onScrollEnd: onScrollBottom, children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list'), { ref: (instance) => {
                 listRef.current = instance;
                 return () => {
                     listRef.current = null;

package/cascader/types.d.ts

@@ -45,5 +45,6 @@ export interface CascaderProps<V extends React.Key, T extends CascaderItem<V>> e
     onSearch?: (value: string) => void;
     onClear?: () => void;
     onFirstFocus?: (value: V, origin: T) => void;
+    onScrollBottom?: (ancestors: V[]) => void;
     afterVisibleChange?: (visible: boolean) => void;
 }

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) => {