@laser-ui/components 1.6.0 → 2.0.0

package/table/internal/TableCell.d.ts

@@ -15,5 +15,5 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     } | undefined;
     ellipsis: boolean;
 }
-export declare function TableCell(props: TableCellProps): JSX.Element | null;
+export declare function TableCell(props: TableCellProps): React.ReactElement | null;
 export {};

package/table/internal/TableCell.js

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
 import { isNumber, isUndefined } from 'lodash';
-import { createElement, useContext, useEffect, useRef } from 'react';
+import { use, useRef } from 'react';
 import { mergeCS } from '../../utils';
 import { TableContext } from '../vars';
 const ZINDEX_CONFIG = {
@@ -12,7 +13,7 @@ const ZINDEX_CONFIG = {
 };
 export function TableCell(props) {
     const { children, namespace, styled, tag, width, align, fixed, ellipsis: ellipsisProp } = props, restProps = __rest(props, ["children", "namespace", "styled", "tag", "width", "align", "fixed", "ellipsis"]);
-    const tableContext = useContext(TableContext);
+    const tableContext = use(TableContext);
     const cellRef = useRef(null);
     const ellipsis = ellipsisProp || tableContext.ellipsis;
     let fixedLeft = false;
@@ -28,7 +29,7 @@ export function TableCell(props) {
             fixedRight = true;
         }
     }
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (cellRef.current && cellRef.current.parentElement) {
             let showShadow = false;
             if (fixedLeft && tableContext.fixed.includes('left')) {
@@ -46,16 +47,23 @@ export function TableCell(props) {
             cellRef.current.classList.toggle(`${namespace}-table__cell--fixed-shadow`, showShadow);
         }
     });
-    return createElement(tag, Object.assign(Object.assign(Object.assign({}, restProps), mergeCS(styled('table__cell', `table__cell--${align}`, {
+    const nodeProps = Object.assign(Object.assign(Object.assign({}, restProps), mergeCS(styled('table__cell', `table__cell--${align}`, {
         'table__cell--fixed-left': fixedLeft,
         'table__cell--fixed-right': fixedRight,
         'table__cell--ellipsis': ellipsis,
     }), {
         className: restProps.className,
         style: Object.assign(Object.assign(Object.assign({}, restProps.style), fixedStyle), { width: isUndefined(width) ? undefined : width }),
-    })), { ref: cellRef }), _jsx("div", Object.assign({}, mergeCS(styled('table__cell-content'), {
+    })), { ref: (instance) => {
+            cellRef.current = instance;
+            return () => {
+                cellRef.current = null;
+            };
+        } });
+    const child = (_jsx("div", Object.assign({}, mergeCS(styled('table__cell-content'), {
         style: {
             width: isUndefined(width) ? undefined : `calc(${width}${isNumber(width) ? 'px' : ''} - var(--padding-size) * 2)`,
         },
     }), { children: children })));
+    return tag === 'th' ? _jsx("th", Object.assign({}, nodeProps, { children: child })) : _jsx("td", Object.assign({}, nodeProps, { children: child }));
 }

package/table/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { CLASSES } from './vars';
-import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
+import type { BaseProps, PopupPlacement } from '../types';
 export {};
 export interface TableContextData {
     fixed: ('left' | 'right')[];
@@ -40,7 +40,13 @@ export interface TableTdProps extends BaseProps<'table', typeof CLASSES>, React.
     ellipsis?: boolean;
 }
 export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
-    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    children: (props: {
+        id: string;
+        onClick: React.MouseEventHandler<HTMLElement>;
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode;
     content?: React.ReactNode;
     footer?: React.ReactElement | false;
     visible?: boolean;
@@ -60,6 +66,7 @@ export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Om
     afterVisibleChange?: (visible: boolean) => void;
 }
 export interface TableThActionProps extends BaseProps<'table', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
     active?: boolean;
     disabled?: boolean;
 }

package/tabs/Tabs.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import type { TabsItem, TabsProps, TabsRef } from './types';
-declare function TabsFC<ID extends React.Key, T extends TabsItem<ID>>(props: TabsProps<ID, T>, ref: React.ForwardedRef<TabsRef>): JSX.Element | null;
-export declare const Tabs: <ID extends React.Key, T extends TabsItem<ID>>(props: TabsProps<ID, T> & React.RefAttributes<TabsRef>) => ReturnType<typeof TabsFC>;
-export {};
+import type { TabsItem, TabsProps } from './types';
+export declare function Tabs<ID extends React.Key, T extends TabsItem<ID>>(props: TabsProps<ID, T>): React.ReactElement | null;

package/tabs/Tabs.js

@@ -6,15 +6,16 @@ import { checkScrollEnd, findNested } from '@laser-ui/utils';
 import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
-import { isNull, isUndefined, nth } from 'lodash';
-import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { isUndefined, nth } from 'lodash';
+import { useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
+import { LazyLoading } from '../internal/lazy-loading';
 import { mergeCS } from '../utils';
-function TabsFC(props, ref) {
-    const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive: _defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, lazyLoading = true, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "lazyLoading", "onActiveChange", "onAddClick", "onClose"]);
+export function Tabs(props) {
+    const _a = useComponentProps('Tabs', props), { ref, styleOverrides, styleProvider, list, active: activeProp, defaultActive: _defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, lazyLoading = true, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "lazyLoading", "onActiveChange", "onAddClick", "onClose"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tabs: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tabs }, styleOverrides);
     const { t } = useTranslation();
@@ -43,23 +44,10 @@ function TabsFC(props, ref) {
         return null;
     }, []);
     const [active, changeActive] = useControlled(defaultActive, activeProp, (id) => {
-        panelLoaded.current.add(id);
         if (onActiveChange) {
             onActiveChange(id, findNested(list, (item) => item.id === id));
         }
     });
-    const panelLoaded = useRef(new Set(isNull(defaultActive) ? [] : [defaultActive]));
-    const newPanelLoaded = new Set();
-    const panels = list.map((item) => {
-        const { id: itemId, panel: itemPanel } = item;
-        const hidden = itemId !== active;
-        const loaded = panelLoaded.current.has(itemId);
-        if (loaded) {
-            newPanelLoaded.add(itemId);
-        }
-        return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: hidden, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), lazyLoading && hidden && !loaded ? null : itemPanel));
-    });
-    panelLoaded.current = newPanelLoaded;
     const refreshTabs = () => {
         const tablistWrapperEl = tablistWrapperRef.current;
         if (tablistWrapperEl) {
@@ -96,7 +84,6 @@ function TabsFC(props, ref) {
     };
     useIsomorphicLayoutEffect(() => {
         refreshTabs();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useResize(tablistWrapperRef, refreshTabs);
     useResize(tablistRef, refreshTabs);
@@ -131,9 +118,24 @@ function TabsFC(props, ref) {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: tabsRef, children: [_jsx("div", Object.assign({}, styled('tabs__tablist-wrapper'), { ref: tablistWrapperRef, onScroll: () => {
+    }), { ref: (instance) => {
+            tabsRef.current = instance;
+            return () => {
+                tabsRef.current = null;
+            };
+        }, children: [_jsx("div", Object.assign({}, styled('tabs__tablist-wrapper'), { ref: (instance) => {
+                    tablistWrapperRef.current = instance;
+                    return () => {
+                        tablistWrapperRef.current = null;
+                    };
+                }, onScroll: () => {
                     refreshTabs();
-                }, children: _jsxs("div", Object.assign({}, styled('tabs__tablist'), { ref: tablistRef, role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical', children: [list.map((item, index) => {
+                }, children: _jsxs("div", Object.assign({}, styled('tabs__tablist'), { ref: (instance) => {
+                        tablistRef.current = instance;
+                        return () => {
+                            tablistRef.current = null;
+                        };
+                    }, role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical', children: [list.map((item, index) => {
                             const { id: itemId, title: itemTitle, disabled: itemDisabled, closable: itemClosable } = item;
                             const isActive = itemId === active;
                             const getTab = (next, _index = index) => {
@@ -242,7 +244,12 @@ function TabsFC(props, ref) {
                                         e.stopPropagation();
                                         closeTab();
                                     }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))));
-                        }), (listOverflow || addible) && (_jsxs("div", Object.assign({}, styled('tabs__button-container'), { ref: buttonContainerRef, children: [listOverflow && (_jsx(Dropdown, { list: dropdownList.map((tab) => {
+                        }), (listOverflow || addible) && (_jsxs("div", Object.assign({}, styled('tabs__button-container'), { ref: (instance) => {
+                                buttonContainerRef.current = instance;
+                                return () => {
+                                    buttonContainerRef.current = null;
+                                };
+                            }, children: [listOverflow && (_jsx(Dropdown, { list: dropdownList.map((tab) => {
                                         const { id: itemId, title: itemTitle, dropdownRender: itemDropdownRender, disabled: itemDisabled } = tab;
                                         return {
                                             id: itemId,
@@ -253,10 +260,19 @@ function TabsFC(props, ref) {
                                         };
                                     }), placement: placement === 'left' ? 'bottom-left' : 'bottom-right', onClick: (id) => {
                                         changeActive(id);
-                                    }, children: _jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--more', {
+                                    }, children: (dropdownProps) => (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--more', {
                                         'tabs__button.is-end': scrollEnd,
-                                    }), { "aria-label": t('More'), children: _jsx(Icon, { size: iconSize, children: _jsx(MoreHorizOutlined, {}) }) })) })), addible && (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--add'), { role: "button", "aria-label": t('Add'), onClick: () => {
+                                    }), dropdownProps, { "aria-label": t('More'), children: _jsx(Icon, { size: iconSize, children: _jsx(MoreHorizOutlined, {}) }) }))) })), addible && (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--add'), { role: "button", "aria-label": t('Add'), onClick: () => {
                                         onAddClick === null || onAddClick === void 0 ? void 0 : onAddClick();
-                                    }, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })), panels] })));
+                                    }, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: (instance) => {
+                                indicatorRef.current = instance;
+                                return () => {
+                                    indicatorRef.current = null;
+                                };
+                            } }))] })) })), list.map((item) => {
+                const { id: itemId, panel: itemPanel } = item;
+                const hidden = itemId !== active;
+                return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: hidden, role: "tabpanel", "aria-labelledby": getTabId(itemId) }),
+                    _jsx(LazyLoading, { hidden: hidden, disabled: !lazyLoading, children: itemPanel })));
+            })] })));
 }
-export const Tabs = forwardRef(TabsFC);

package/tabs/types.d.ts

@@ -14,6 +14,7 @@ export interface TabsItem<ID extends React.Key> {
     disabled?: boolean;
 }
 export interface TabsProps<ID extends React.Key, T extends TabsItem<ID>> extends BaseProps<'tabs', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: React.Ref<TabsRef>;
     list: T[];
     active?: ID;
     defaultActive?: ID;

package/tag/Tag.d.ts

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

package/textarea/Textarea.d.ts

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

package/textarea/Textarea.js

@@ -1,19 +1,19 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useForkRef } from '@laser-ui/hooks';
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { setRef } from '@laser-ui/utils';
 import { isFunction, isNumber, isUndefined } from 'lodash';
-import { forwardRef, useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
-export const Textarea = forwardRef((props, ref) => {
-    const _a = useComponentProps('Textarea', props), { styleOverrides, styleProvider, formControl, model, defaultModel, autoRows = false, resizable = true, showCount = false, size: sizeProp, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "autoRows", "resizable", "showCount", "size", "onModelChange"]);
+export function Textarea(props) {
+    const _a = useComponentProps('Textarea', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, autoRows = false, resizable = true, showCount = false, size: sizeProp, onModelChange } = _a, restProps = __rest(_a, ["ref", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "autoRows", "resizable", "showCount", "size", "onModelChange"]);
     const styled = useStyled(CLASSES, { textarea: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.textarea }, styleOverrides);
     const textareaRef = useRef(null);
-    const combineTextareaRef = useForkRef(textareaRef, ref);
     const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : '', model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: restProps.disabled || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const textareaEl = textareaRef.current;
         if (textareaEl && autoRows !== false) {
             const cssText = textareaEl.style.cssText;
@@ -50,7 +50,14 @@ export const Textarea = forwardRef((props, ref) => {
     return (_jsxs(_Fragment, { children: [_jsx("textarea", Object.assign({}, restProps, mergeCS(styled('textarea', `textarea--${size}`), {
                 className: restProps.className,
                 style: Object.assign(Object.assign({}, restProps.style), { resize: resizable && autoRows === false ? undefined : 'none' }),
-            }), designProps, { ref: combineTextareaRef, value: value, disabled: disabled, onChange: (e) => {
+            }), designProps, { ref: (instance) => {
+                    const ret = setRef(ref, instance);
+                    textareaRef.current = instance;
+                    return () => {
+                        ret();
+                        textareaRef.current = null;
+                    };
+                }, value: value, disabled: disabled, onChange: (e) => {
                     var _a;
                     (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     changeValue(e.currentTarget.value);
@@ -59,4 +66,4 @@ export const Textarea = forwardRef((props, ref) => {
                     : isUndefined(restProps.maxLength)
                         ? value.length
                         : `${value.length} / ${restProps.maxLength}` })))] }));
-});
+}

package/textarea/types.d.ts

@@ -4,6 +4,7 @@ import type { FormControlProvider } from '../form/types';
 import type { BaseProps, Size } from '../types';
 export {};
 export interface TextareaProps extends BaseProps<'textarea', typeof CLASSES>, React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    ref?: React.Ref<HTMLTextAreaElement>;
     formControl?: FormControlProvider;
     model?: string;
     defaultModel?: string;

package/time-picker/TimePicker.d.ts

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

package/time-picker/TimePicker.js

@@ -1,30 +1,30 @@
 import { __rest } from "tslib";
 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 AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
 import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isNull, isUndefined } from 'lodash';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';
 import { deepCompareDate, orderTime } from './utils';
 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 { Transition } from '../transition';
 import { getVerticalSidePosition, mergeCS } from '../utils';
 import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
-export const TimePicker = forwardRef((props, ref) => {
+export function TimePicker(props) {
     var _a, _b;
-    const _c = useComponentProps('TimePicker', props), { styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, 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", "config", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
+    const _c = useComponentProps('TimePicker', props), { ref, styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, 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", "config", "escClosable", "inputProps", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { 'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'], 'time-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker-popup'] }, styleOverrides);
-    const sheet = useJSS();
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
@@ -34,8 +34,6 @@ export const TimePicker = 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 dataRef = useRef({
         latestFocused: 'start',
@@ -106,7 +104,6 @@ export const TimePicker = 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;
@@ -116,16 +113,10 @@ export const TimePicker = 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);
@@ -135,7 +126,7 @@ export const TimePicker = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({
         updatePosition,
     }), [updatePosition]);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (boxRef.current && indicatorRef.current) {
             let focus = false;
             const boxRect = boxRef.current.getBoundingClientRect();
@@ -190,8 +181,16 @@ export const TimePicker = 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('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, 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('time-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: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
                 var _a;
                 forceUpdate();
                 dataRef.current.inputValue[index] = val;
@@ -201,6 +200,8 @@ export const TimePicker = forwardRef((props, ref) => {
                     (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, 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();
@@ -213,24 +214,26 @@ export const TimePicker = forwardRef((props, ref) => {
                     const time = dayjs(inputValue[index], format).toDate();
                     handleEnter(time);
                 }
-            }, onFocus: () => {
-                var _a, _b, _c;
-                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }, onFocus: (e) => {
+                var _a, _b, _c, _d, _e;
+                (_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;
                 });
                 dataRef.current.inputValue = [undefined, undefined];
                 if (visible && range && value) {
-                    (_c = panelRef.current) === null || _c === void 0 ? void 0 : _c.call(panelRef, value);
+                    (_e = panelRef.current) === null || _e === void 0 ? void 0 : _e.call(panelRef, 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) &&
@@ -246,7 +249,12 @@ export const TimePicker = 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);
@@ -261,7 +269,12 @@ export const TimePicker = 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('time-picker__indicator'), { ref: indicatorRef })), _jsx("div", Object.assign({}, styled('time-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('time-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
+                }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('time-picker__indicator'), { ref: (instance) => {
+                                    indicatorRef.current = instance;
+                                    return () => {
+                                        indicatorRef.current = null;
+                                    };
+                                } })), _jsx("div", Object.assign({}, styled('time-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('time-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
                             e.stopPropagation();
                             dataRef.current.inputValue = [undefined, undefined];
                             _changeValue(null);
@@ -276,7 +289,23 @@ export const TimePicker = 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 = () => {
+                            var _a;
+                            const value = focused[0] ? valueLeft : valueRight;
+                            if (value) {
+                                (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, value);
+                            }
+                        };
+                        if (range) {
+                            cb();
+                        }
+                        else if (!dataRef.current.onceVisible) {
+                            dataRef.current.onceVisible = true;
+                            cb();
+                        }
+                    }, onBeforeEnter: () => {
                         updatePosition();
                         const cb = () => {
                             var _a;
@@ -292,48 +321,33 @@ export const TimePicker = forwardRef((props, ref) => {
                             dataRef.current.onceVisible = true;
                             cb();
                         }
-                    }, afterEnter: () => {
+                    }, 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('time-picker-popup'), {
-                            style: Object.assign({ zIndex }, transitionStyle),
-                        }), { ref: popupRef, onMouseDown: (e) => {
-                                preventBlur(e);
-                            }, onMouseUp: (e) => {
-                                preventBlur(e);
-                            }, children: [_jsx(TimePickerPanel, { ref: panelRef, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, onTimeChange: (time) => {
-                                        changeValue(time);
-                                    } }), _jsx("div", Object.assign({}, styled('time-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
-                                            const now = new Date();
-                                            changeValue(now);
-                                            handleEnter(now);
-                                        }, children: t('TimePicker', 'Now') }) }))] })));
-                    } }) })] }));
-});
+                    }, children: (transitionRef, leaved) => (_jsxs("div", Object.assign({}, mergeCS(styled('time-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: [_jsx(TimePickerPanel, { ref: (instance) => {
+                                    panelRef.current = instance;
+                                    return () => {
+                                        panelRef.current = null;
+                                    };
+                                }, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, onTimeChange: (time) => {
+                                    changeValue(time);
+                                } }), _jsx("div", Object.assign({}, styled('time-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
+                                        const now = new Date();
+                                        changeValue(now);
+                                        handleEnter(now);
+                                    }, children: t('TimePicker', 'Now') }) }))] }))) }) })] }));
+}

package/time-picker/internal/TimePickerPanel.d.ts

@@ -2,6 +2,7 @@
 import type { Styled } from '../../hooks/useStyled';
 import type { CLASSES } from '../vars';
 interface TimePickerPanelProps {
+    ref?: React.Ref<(date: Date) => void>;
     styled: Styled<typeof CLASSES>;
     time: Date | null;
     format: string;
@@ -12,5 +13,5 @@ interface TimePickerPanelProps {
     inDatePicker?: boolean;
     onTimeChange: (time: Date) => void;
 }
-export declare const TimePickerPanel: import("react").ForwardRefExoticComponent<TimePickerPanelProps & import("react").RefAttributes<(date: Date) => void>>;
+export declare function TimePickerPanel(props: TimePickerPanelProps): React.ReactElement | null;
 export {};