@laser-ui/components 1.6.0 → 2.0.0

package/cascader/internal/CascaderSearchPanel.js

@@ -3,14 +3,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
 import { isNumber, isUndefined } from 'lodash';
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';
 import { Empty } from '../../empty';
 import { getTreeNodeLabel } from '../../tree/utils';
 import { TREE_NODE_KEY } from '../../tree/vars';
 import { VirtualScroll } from '../../virtual-scroll';
-function CascaderSearchPanelFC(props, ref) {
-    const { namespace, styled, id, list, customItem, itemId, itemFocused, multiple, onlyLeafSelectable, virtual, focusVisible, onClick } = props;
+export function CascaderSearchPanel(props) {
+    const { ref, namespace, styled, id, list, customItem, itemId, itemFocused, multiple, onlyLeafSelectable, virtual, focusVisible, onClick, } = props;
     const listRef = useRef(null);
     const vsRef = useRef(null);
     const handleKeyDown = useEventCallback((code) => {
@@ -46,7 +46,12 @@ function CascaderSearchPanelFC(props, ref) {
         itemSize: isNumber(virtual) ? virtual : 32,
         itemFocusable: (item) => item[TREE_NODE_KEY].enabled,
     }), [list, virtual]);
-    return (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: vsRef, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
+    return (_jsx(VirtualScroll, Object.assign({}, vsProps, { ref: (instance) => {
+            vsRef.current = instance;
+            return () => {
+                vsRef.current = null;
+            };
+        }, enable: virtual !== false, listSize: 264, listPadding: 4, itemRender: (item, index, props) => {
             const node = item[TREE_NODE_KEY];
             let inSelected = node.checked;
             if (!onlyLeafSelectable) {
@@ -68,6 +73,10 @@ function CascaderSearchPanelFC(props, ref) {
                 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: listRef, id: id, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : itemId(itemFocused.value), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })));
+        }, itemFocused: itemFocused === null || itemFocused === void 0 ? void 0 : itemFocused.value, placeholder: "li", children: (vsList, onScroll) => (_jsx("ul", Object.assign({}, styled('cascader__list'), { ref: (instance) => {
+                listRef.current = instance;
+                return () => {
+                    listRef.current = null;
+                };
+            }, id: id, tabIndex: -1, role: "listbox", "aria-multiselectable": multiple, "aria-activedescendant": isUndefined(itemFocused) ? undefined : itemId(itemFocused.value), onScroll: onScroll, children: list.length === 0 ? _jsx(Empty, { style: { padding: '12px 28px' }, image: Empty.SIMPLE_IMG }) : vsList }))) })));
 }
-export const CascaderSearchPanel = forwardRef(CascaderSearchPanelFC);

package/cascader/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
-import type { BaseProps, CloneHTMLElement, Size } from '../types';
+import type { BaseProps, Size } from '../types';
 export {};
 export interface CascaderRef {
     updatePosition: () => void;
@@ -14,6 +14,7 @@ export interface CascaderItem<V extends React.Key> {
     children?: CascaderItem<V>[];
 }
 export interface CascaderProps<V extends React.Key, T extends CascaderItem<V>> extends BaseProps<'cascader' | 'cascader-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: React.Ref<CascaderRef>;
     formControl?: FormControlProvider;
     list: T[];
     model?: V | null | V[];
@@ -38,8 +39,7 @@ export interface CascaderProps<V extends React.Key, T extends CascaderItem<V>> e
         filter?: (value: string, item: T) => boolean;
         sort?: (a: T, b: T) => number;
     };
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     popupRender?: (el: React.ReactElement) => React.ReactNode;
     onModelChange?: (value: any, origin: any) => void;
     onVisibleChange?: (visible: boolean) => void;

package/checkbox/Checkbox.d.ts

@@ -2,6 +2,6 @@
 import type { CheckboxProps } from './types';
 import { CheckboxGroup } from './CheckboxGroup';
 export declare const Checkbox: {
-    (props: CheckboxProps): JSX.Element | null;
+    (props: CheckboxProps): React.ReactElement | null;
     Group: typeof CheckboxGroup;
 };

package/checkbox/Checkbox.js

@@ -6,13 +6,10 @@ import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useScopedProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 export const Checkbox = (props) => {
-    const _a = useComponentProps('Checkbox', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, indeterminate = false, disabled: disabledProp = false, inputRef, inputRender, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "indeterminate", "disabled", "inputRef", "inputRender", "onModelChange"]);
+    const _a = useComponentProps('Checkbox', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, indeterminate = false, disabled: disabledProp = false, inputProps, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "indeterminate", "disabled", "inputProps", "onModelChange"]);
     const styled = useStyled(CLASSES, { checkbox: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.checkbox }, styleOverrides);
     const [checked, changeChecked] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : false, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const inputNode = (_jsx("input", Object.assign({}, styled('checkbox__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: inputRef, type: "checkbox", disabled: disabled, "aria-checked": indeterminate ? 'mixed' : checked, onChange: () => {
-            changeChecked((draft) => !draft);
-        } })));
     return (_jsxs("label", Object.assign({}, restProps, mergeCS(styled('checkbox', {
         'checkbox.is-checked': checked,
         'checkbox.is-indeterminate': indeterminate,
@@ -20,6 +17,8 @@ export const Checkbox = (props) => {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [_jsxs("div", Object.assign({}, styled('checkbox__state-container'), { children: [inputRender ? inputRender(inputNode) : inputNode, indeterminate ? _jsx("div", Object.assign({}, styled('checkbox__indeterminate'))) : checked && _jsx("div", Object.assign({}, styled('checkbox__tick')))] })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('checkbox__label'), { children: children }))] })));
+    }), { children: [_jsxs("div", Object.assign({}, styled('checkbox__state-container'), { children: [_jsx("input", Object.assign({}, inputProps, styled('checkbox__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { type: "checkbox", disabled: disabled, "aria-checked": indeterminate ? 'mixed' : checked, onChange: () => {
+                            changeChecked((draft) => !draft);
+                        } })), indeterminate ? _jsx("div", Object.assign({}, styled('checkbox__indeterminate'))) : checked && _jsx("div", Object.assign({}, styled('checkbox__tick')))] })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('checkbox__label'), { children: children }))] })));
 };
 Checkbox.Group = CheckboxGroup;

package/checkbox/CheckboxGroup.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { CheckboxGroupItem, CheckboxGroupProps } from './types';
-export declare function CheckboxGroup<V extends React.Key, T extends CheckboxGroupItem<V>>(props: CheckboxGroupProps<V, T>): JSX.Element | null;
+export declare function CheckboxGroup<V extends React.Key, T extends CheckboxGroupItem<V>>(props: CheckboxGroupProps<V, T>): React.ReactElement | null;

package/checkbox/CheckboxGroup.js

@@ -1,9 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement } from 'react';
-import { Checkbox } from './Checkbox';
 import { useComponentProps, useControlled, useScopedProps } from '../hooks';
 export function CheckboxGroup(props) {
-    var _a;
     const { children, formControl, list, model, defaultModel, disabled: disabledProp = false, onModelChange, } = useComponentProps('CheckboxGroup', props);
     const [values, changeValues] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : [], model, (vals) => {
         if (onModelChange) {
@@ -11,7 +7,12 @@ export function CheckboxGroup(props) {
         }
     }, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const { disabled } = useScopedProps({ disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    const childrenNode = children(list.map((option) => (_jsx(Checkbox, { model: values.includes(option.value), disabled: option.disabled || disabled, inputRender: (el) => cloneElement(el, formControl === null || formControl === void 0 ? void 0 : formControl.inputAria), onModelChange: (checked) => {
+    return children({ role: 'group' }, (option) => ({
+        children: option.label,
+        model: values.includes(option.value),
+        disabled: option.disabled || disabled,
+        inputProps: formControl === null || formControl === void 0 ? void 0 : formControl.inputAria,
+        onModelChange: (checked) => {
             changeValues((draft) => {
                 if (checked) {
                     draft.push(option.value);
@@ -20,6 +21,6 @@ export function CheckboxGroup(props) {
                     draft.splice(draft.findIndex((v) => v === option.value), 1);
                 }
             });
-        }, children: option.label }, option.value))));
-    return cloneElement(childrenNode, { role: (_a = childrenNode.props.role) !== null && _a !== void 0 ? _a : 'group' });
+        },
+    }), list);
 }

package/checkbox/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
 import type { FormControlProvider } from '../form/types';
-import type { BaseProps, CloneHTMLElement } from '../types';
+import type { BaseProps } from '../types';
 export {};
 export interface CheckboxProps extends BaseProps<'checkbox', typeof CLASSES>, React.LabelHTMLAttributes<HTMLLabelElement> {
     formControl?: FormControlProvider;
@@ -9,8 +9,7 @@ export interface CheckboxProps extends BaseProps<'checkbox', typeof CLASSES>, Re
     defaultModel?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     onModelChange?: (checked: boolean) => void;
 }
 export interface CheckboxGroupItem<V extends React.Key> {
@@ -19,7 +18,18 @@ export interface CheckboxGroupItem<V extends React.Key> {
     disabled?: boolean;
 }
 export interface CheckboxGroupProps<V extends React.Key, T extends CheckboxGroupItem<V>> {
-    children: (nodes: React.ReactElement[]) => React.ReactElement;
+    children: (props: {
+        role: 'group';
+    }, optionProps: (option: T) => {
+        children: React.ReactNode;
+        model: boolean;
+        disabled: boolean;
+        inputProps?: {
+            'aria-invalid'?: boolean;
+            'aria-describedby'?: string;
+        };
+        onModelChange: (checked: boolean) => void;
+    }, options: T[]) => React.ReactElement | null;
     formControl?: FormControlProvider;
     list: T[];
     model?: V[];

package/{internal/circular-progress → circular-progress}/CircularProgress.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function CircularProgress(props: React.SVGProps<SVGSVGElement>): JSX.Element | null;
+export declare function CircularProgress(props: React.SVGProps<SVGSVGElement>): React.ReactElement | null;

package/{internal/circular-progress → circular-progress}/CircularProgress.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CLASSES } from './vars';
-import { useStyled } from '../../hooks';
-import { mergeCS } from '../../utils';
+import { useStyled } from '../hooks';
+import { mergeCS } from '../utils';
 export function CircularProgress(props) {
     const styled = useStyled(CLASSES, { 'circular-progress': undefined });
     return (_jsx("svg", Object.assign({}, props, mergeCS(styled('circular-progress'), {

package/compose/Compose.d.ts

@@ -2,6 +2,6 @@
 import type { ComposeProps } from './types';
 import { ComposeItem } from './ComposeItem';
 export declare const Compose: {
-    (props: ComposeProps): JSX.Element | null;
+    (props: ComposeProps): React.ReactElement | null;
     Item: typeof ComposeItem;
 };

package/compose/ComposeItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ComposeItemProps } from './types';
-export declare function ComposeItem(props: ComposeItemProps): JSX.Element | null;
+export declare function ComposeItem(props: ComposeItemProps): React.ReactElement | null;

package/config-provider/ConfigProvider.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ConfigProviderProps } from './types';
-export declare function ConfigProvider(props: ConfigProviderProps): JSX.Element | null;
+export declare function ConfigProvider(props: ConfigProviderProps): React.ReactElement | null;

package/config-provider/ConfigProvider.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
+import { use, useMemo } from 'react';
 import { LContextManager } from '../context';
 import { LContext } from '../context';
 export function ConfigProvider(props) {
     const { children, context: contextProp } = props;
-    const parent = useContext(LContext);
+    const parent = use(LContext);
     const context = useMemo(() => {
         const context = new LContextManager(parent.derive(contextProp !== null && contextProp !== void 0 ? contextProp : {}));
         context.setParent(parent);
         return context;
     }, [contextProp, parent]);
-    return _jsx(LContext.Provider, { value: context, children: children });
+    return _jsx(LContext, { value: context, children: children });
 }

package/date-picker/DatePicker.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { DatePickerProps, DatePickerRef } from './types';
-export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<DatePickerRef>>;
+import type { DatePickerProps } from './types';
+export declare function DatePicker(props: DatePickerProps): React.ReactElement | null;

package/date-picker/DatePicker.js

@@ -1,36 +1,36 @@
 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, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
+import { useAsync, useEventCallback, useForceUpdate, 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 { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useContainerScrolling, useControlled, useDesign, useJSS, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useDesign, useLayout, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
 import { ROOT_DATA } from '../root/vars';
 import { TimePickerPanel } from '../time-picker/internal/TimePickerPanel';
 import { deepCompareDate, orderDate } from '../time-picker/utils';
+import { Transition } from '../transition';
 import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
-export const DatePicker = forwardRef((props, ref) => {
+export function DatePicker(props) {
     var _a, _b;
-    const _c = useComponentProps('DatePicker', props), { 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, inputRef, inputRender, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "presetDate", "config", "showTime", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
+    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"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, {
         'date-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker'],
         'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'],
         'date-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['date-picker-popup'],
     }, styleOverrides);
-    const sheet = useJSS();
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
@@ -40,8 +40,6 @@ export const DatePicker = forwardRef((props, ref) => {
     const inputLeftRef = useRef(null);
     const inputRightRef = useRef(null);
     const indicatorRef = useRef(null);
-    const combineInputLeftRef = useForkRef(inputLeftRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]);
-    const combineInputRightRef = useForkRef(inputRightRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]);
     const panelRef = useRef(null);
     const timePickerPanelRef = useRef(null);
     const updatePanel = (date) => {
@@ -119,7 +117,6 @@ export const DatePicker = forwardRef((props, ref) => {
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -129,16 +126,10 @@ export const DatePicker = forwardRef((props, ref) => {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            transformOrigin.current = position.transformOrigin;
-            if (sheet.classes.position) {
-                popupRef.current.classList.toggle(sheet.classes.position, false);
-            }
-            sheet.replaceRule('position', {
-                top: position.top,
-                left: position.left,
-                maxWidth,
-            });
-            popupRef.current.classList.toggle(sheet.classes.position, true);
+            popupRef.current.style.setProperty(`--popup-down-transform-origin`, position.transformOrigin);
+            popupRef.current.style.top = position.top + 'px';
+            popupRef.current.style.left = position.left + 'px';
+            popupRef.current.style.maxWidth = maxWidth + 'px';
         }
     });
     useContainerScrolling(boxRef, updatePosition, !visible);
@@ -148,7 +139,7 @@ export const DatePicker = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({
         updatePosition,
     }), [updatePosition]);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (boxRef.current && indicatorRef.current) {
             let focus = false;
             const boxRect = boxRef.current.getBoundingClientRect();
@@ -202,8 +193,16 @@ export const DatePicker = forwardRef((props, ref) => {
     const inputNode = (isLeft) => {
         const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
-        const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
-        const node = (_jsx(BaseInput, Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
+        const inputRef = isLeft ? inputLeftRef : inputRightRef;
+        return (_jsx(BaseInput, Object.assign({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps[index], styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: (instance) => {
+                var _a;
+                inputRef.current = instance;
+                const ret = setRef((_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.ref, instance);
+                return () => {
+                    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()) {
@@ -212,6 +211,8 @@ export const DatePicker = forwardRef((props, ref) => {
                     updatePanel(date);
                 }
             }, onKeyDown: (e) => {
+                var _a, _b;
+                (_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 if (e.code === 'Escape') {
                     if (visible && escClosable) {
                         e.stopPropagation();
@@ -224,9 +225,10 @@ export const DatePicker = forwardRef((props, ref) => {
                     const date = dayjs(inputValue[index], format).toDate();
                     handleEnter(date);
                 }
-            }, onFocus: () => {
-                var _a, _b;
-                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }, onFocus: (e) => {
+                var _a, _b, _c, _d;
+                (_b = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps[index]) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
                 setFocused((draft) => {
                     draft.fill(false);
                     draft[isLeft ? 0 : 1] = true;
@@ -235,13 +237,14 @@ export const DatePicker = forwardRef((props, ref) => {
                 if (visible && range && value) {
                     updatePanel(value);
                 }
-            }, onBlur: () => {
+            }, 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);
                 }, 20);
             } })));
-        return render ? render(node) : node;
     };
     const preventBlur = (e) => {
         if ((document.activeElement === inputLeftRef.current || document.activeElement === inputRightRef.current) &&
@@ -257,7 +260,12 @@ export const DatePicker = forwardRef((props, ref) => {
             }), {
                 className: restProps.className,
                 style: restProps.style,
-            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+            }), designProps, { ref: (instance) => {
+                    boxRef.current = instance;
+                    return () => {
+                        boxRef.current = null;
+                    };
+                }, onMouseDown: (e) => {
                     var _a;
                     (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     preventBlur(e);
@@ -272,7 +280,12 @@ export const DatePicker = forwardRef((props, ref) => {
                         (_b = inputLeftRef.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: indicatorRef })), _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) => {
+                }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('date-picker__indicator'), { ref: (instance) => {
+                                    indicatorRef.current = instance;
+                                    return () => {
+                                        indicatorRef.current = null;
+                                    };
+                                } })), _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);
@@ -287,7 +300,7 @@ export const DatePicker = forwardRef((props, ref) => {
                         document.body.appendChild(el);
                     }
                     return el;
-                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
+                }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup-down`, duration: TTANSITION_DURING_POPUP, onSkipEnter: () => {
                         updatePosition();
                         const cb = () => {
                             const value = focused[0] ? valueLeft : valueRight;
@@ -302,76 +315,81 @@ export const DatePicker = forwardRef((props, ref) => {
                             dataRef.current.onceVisible = true;
                             cb();
                         }
-                    }, afterEnter: () => {
+                    }, 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();
+                        }
+                    }, onAfterEnter: () => {
                         afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-                    }, afterLeave: () => {
+                    }, onAfterLeave: () => {
                         afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-                    }, children: (state) => {
-                        let transitionStyle = {};
-                        switch (state) {
-                            case 'enter':
-                                transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
-                                break;
-                            case 'entering':
-                                transitionStyle = {
-                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin: transformOrigin.current,
-                                };
-                                break;
-                            case 'leaving':
-                                transitionStyle = {
-                                    transform: 'scaleY(0.7)',
-                                    opacity: 0,
-                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin: transformOrigin.current,
-                                };
-                                break;
-                            case 'leaved':
-                                transitionStyle = { display: 'none' };
-                                break;
-                            default:
-                                break;
-                        }
-                        return (_jsxs("div", Object.assign({}, mergeCS(styled('date-picker-popup'), {
-                            style: Object.assign({ zIndex }, transitionStyle),
-                        }), { ref: popupRef, onMouseDown: (e) => {
-                                preventBlur(e);
-                            }, onMouseUp: (e) => {
-                                preventBlur(e);
-                            }, children: [presetDate && (_jsx("ul", Object.assign({}, styled('date-picker__preset'), { children: Object.keys(presetDate).map((name) => {
-                                        const handleClick = () => {
-                                            const date = presetDate[name]();
-                                            dataRef.current.inputValue = [undefined, undefined];
-                                            if (range) {
-                                                if (isArray(date)) {
-                                                    _changeValue(date);
-                                                    changeVisible(false);
-                                                }
-                                                else {
-                                                    changeValue(date);
-                                                    handleEnter(date);
-                                                }
+                    }, children: (transitionRef, leaved) => (_jsxs("div", Object.assign({}, mergeCS(styled('date-picker-popup'), {
+                        style: Object.assign({ zIndex }, (leaved ? { display: 'none' } : undefined)),
+                    }), { ref: (instance) => {
+                            popupRef.current = instance;
+                            transitionRef(instance);
+                            return () => {
+                                popupRef.current = null;
+                                transitionRef(null);
+                            };
+                        }, onMouseDown: (e) => {
+                            preventBlur(e);
+                        }, onMouseUp: (e) => {
+                            preventBlur(e);
+                        }, children: [presetDate && (_jsx("ul", Object.assign({}, styled('date-picker__preset'), { children: Object.keys(presetDate).map((name) => {
+                                    const handleClick = () => {
+                                        const date = presetDate[name]();
+                                        dataRef.current.inputValue = [undefined, undefined];
+                                        if (range) {
+                                            if (isArray(date)) {
+                                                _changeValue(date);
+                                                changeVisible(false);
                                             }
                                             else {
-                                                _changeValue(date);
+                                                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: panelRef, 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) => {
-                                                changeValue(date);
-                                                if (!showTime) {
-                                                    handleEnter(date);
-                                                }
-                                            } }), showTime && (_jsx(TimePickerPanel, { ref: timePickerPanelRef, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: showTime && !isBoolean(showTime) && showTime.config
-                                                ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                                    (...args) => showTime.config(...args, dataRef.current.latestFocused, [valueLeft, valueRight])
-                                                : undefined, inDatePicker: true, onTimeChange: (time) => {
-                                                changeValue(time);
-                                            } })), _jsx("div", Object.assign({}, styled('date-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
-                                                    const now = new Date();
-                                                    changeValue(now);
-                                                    handleEnter(now);
-                                                }, children: t('DatePicker', showTime ? 'Now' : 'Today') }) }))] }))] })));
-                    } }) })] }));
-});
+                                        }
+                                        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) => {
+                                            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) => {
+                                            changeValue(date);
+                                            if (!showTime) {
+                                                handleEnter(date);
+                                            }
+                                        } }), showTime && (_jsx(TimePickerPanel, { ref: (instance) => {
+                                            timePickerPanelRef.current = instance;
+                                            return () => {
+                                                timePickerPanelRef.current = null;
+                                            };
+                                        }, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: showTime && !isBoolean(showTime) && showTime.config
+                                            ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                                (...args) => showTime.config(...args, dataRef.current.latestFocused, [valueLeft, valueRight])
+                                            : undefined, inDatePicker: true, onTimeChange: (time) => {
+                                            changeValue(time);
+                                        } })), _jsx("div", Object.assign({}, styled('date-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
+                                                const now = new Date();
+                                                changeValue(now);
+                                                handleEnter(now);
+                                            }, children: t('DatePicker', showTime ? 'Now' : 'Today') }) }))] }))] }))) }) })] }));
+}

package/date-picker/internal/DatePickerPanel.d.ts

@@ -2,6 +2,7 @@
 import type { Styled } from '../../hooks/useStyled';
 import type { CLASSES } from '../vars';
 interface DatePickerPanelProps {
+    ref?: React.Ref<(date: Date) => void>;
     styled: Styled<typeof CLASSES>;
     currentSelected: Date | null;
     anotherSelected: Date | null;
@@ -11,5 +12,5 @@ interface DatePickerPanelProps {
     range: boolean;
     onDateChange: (date: Date) => void;
 }
-export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps & import("react").RefAttributes<(date: Date) => void>>;
+export declare function DatePickerPanel(props: DatePickerPanelProps): React.ReactElement | null;
 export {};