@laser-ui/components 1.6.0 → 2.0.0

package/skeleton/Skeleton.d.ts

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

package/slider/Slider.d.ts

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

package/slider/Slider.js

@@ -1,15 +1,15 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useEvent, useRefExtra } from '@laser-ui/hooks';
+import { useEvent, useIsomorphicLayoutEffect, useRefExtra } from '@laser-ui/hooks';
 import { isArray, isNull, isNumber, toNumber } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
 import { Tooltip } from '../tooltip';
 import { mergeCS } from '../utils';
 export function Slider(props) {
-    const _a = useComponentProps('Slider', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max = 100, min = 0, step = 1, range = false, rangeMinDistance, rangeThumbDraggable = false, tooltip, customTooltip, marks, vertical = false, reverse = false, disabled: disabledProp = false, inputRef, inputRender, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "range", "rangeMinDistance", "rangeThumbDraggable", "tooltip", "customTooltip", "marks", "vertical", "reverse", "disabled", "inputRef", "inputRender", "onModelChange"]);
+    const _a = useComponentProps('Slider', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max = 100, min = 0, step = 1, range = false, rangeMinDistance, rangeThumbDraggable = false, tooltip, customTooltip, marks, vertical = false, reverse = false, disabled: disabledProp = false, inputProps, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "range", "rangeMinDistance", "rangeThumbDraggable", "tooltip", "customTooltip", "marks", "vertical", "reverse", "disabled", "inputProps", "onModelChange"]);
     const styled = useStyled(CLASSES, { slider: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.slider }, styleOverrides);
     const sliderRef = useRef(null);
     const dotLeftRef = useRef(null);
@@ -163,7 +163,7 @@ export function Slider(props) {
             handle(true);
         }
     };
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         if (thumbDraggingPoint) {
             (_a = tooltipLeftRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
@@ -238,41 +238,56 @@ export function Slider(props) {
         return nodes;
     })();
     const getDotNode = (isLeft) => {
+        const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
-        const render = (inputRender !== null && inputRender !== void 0 ? inputRender : [])[isLeft ? 0 : 1];
-        const inputNode = (_jsx("input", Object.assign({}, styled('slider__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? inputRef === null || inputRef === void 0 ? void 0 : inputRef[0] : inputRef === null || inputRef === void 0 ? void 0 : inputRef[1], type: "range", value: value, max: max, min: min, step: step !== null && step !== void 0 ? step : undefined, disabled: disabled, "aria-orientation": vertical ? 'vertical' : 'horizontal', onChange: (e) => {
-                const val = toNumber(e.currentTarget.value);
-                if (range) {
-                    const index = isLeft ? 0 : 1;
-                    changeValue((draft) => {
-                        const offset = val - draft[index];
-                        const isAdd = offset > 0;
-                        draft[index] = val;
-                        if (isNumber(rangeMinDistance) && draft[1] - draft[0] < rangeMinDistance) {
-                            const _index = isLeft ? 1 : 0;
-                            draft[_index] = getValue(draft[_index] + offset, isAdd ? 'ceil' : 'floor');
-                            if (draft[1] - draft[0] < rangeMinDistance) {
-                                draft[index] = getValue(draft[_index] + (isAdd ? -rangeMinDistance : rangeMinDistance), isAdd ? 'floor' : 'ceil');
-                            }
-                        }
-                    });
-                }
-                else {
-                    changeValue(val);
-                }
-            }, onFocus: () => {
-                setDotFocused(isLeft ? 'left' : 'right');
-            }, onBlur: () => {
-                setDotFocused(null);
-            } })));
-        return (_jsx(Tooltip, { ref: isLeft ? tooltipLeftRef : tooltipRightRef, visible: isLeft ? visibleLeft : visibleRight, title: customTooltip ? customTooltip(value) : value, placement: vertical ? 'right' : 'top', onVisibleChange: (visible) => {
+        return (_jsx(Tooltip, { ref: (instance) => {
+                const tooltipRef = isLeft ? tooltipLeftRef : tooltipRightRef;
+                tooltipRef.current = instance;
+                return () => {
+                    tooltipRef.current = null;
+                };
+            }, visible: isLeft ? visibleLeft : visibleRight, title: customTooltip ? customTooltip(value) : value, placement: vertical ? 'right' : 'top', onVisibleChange: (visible) => {
                 setDotVisible(visible ? (isLeft ? 'left' : 'right') : null);
-            }, children: _jsx("div", Object.assign({}, mergeCS(styled('slider__input-wrapper'), {
+            }, children: (tooltipProps) => (_jsx("div", Object.assign({}, mergeCS(styled('slider__input-wrapper'), {
                 style: {
                     left: vertical ? undefined : `calc(${value} / ${max - min} * 100% - 7px)`,
                     bottom: vertical ? `calc(${value} / ${max - min} * 100% - 7px)` : undefined,
                 },
-            }), { ref: isLeft ? dotLeftRef : dotRightRef, children: render ? render(inputNode) : inputNode })) }));
+            }), { ref: (instance) => {
+                    const dotRef = isLeft ? dotLeftRef : dotRightRef;
+                    dotRef.current = instance;
+                    return () => {
+                        dotRef.current = null;
+                    };
+                } }, tooltipProps, { children: _jsx("input", Object.assign({}, inputProps === null || inputProps === void 0 ? void 0 : inputProps[index], styled('slider__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { type: "range", value: value, max: max, min: min, step: step !== null && step !== void 0 ? step : undefined, disabled: disabled, "aria-orientation": vertical ? 'vertical' : 'horizontal', onChange: (e) => {
+                        const val = toNumber(e.currentTarget.value);
+                        if (range) {
+                            const index = isLeft ? 0 : 1;
+                            changeValue((draft) => {
+                                const offset = val - draft[index];
+                                const isAdd = offset > 0;
+                                draft[index] = val;
+                                if (isNumber(rangeMinDistance) && draft[1] - draft[0] < rangeMinDistance) {
+                                    const _index = isLeft ? 1 : 0;
+                                    draft[_index] = getValue(draft[_index] + offset, isAdd ? 'ceil' : 'floor');
+                                    if (draft[1] - draft[0] < rangeMinDistance) {
+                                        draft[index] = getValue(draft[_index] + (isAdd ? -rangeMinDistance : rangeMinDistance), isAdd ? 'floor' : 'ceil');
+                                    }
+                                }
+                            });
+                        }
+                        else {
+                            changeValue(val);
+                        }
+                    }, onFocus: (e) => {
+                        var _a, _b;
+                        (_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);
+                        setDotFocused(isLeft ? 'left' : 'right');
+                    }, 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);
+                        setDotFocused(null);
+                    } })) }))) }));
     };
     const preventBlur = (e) => {
         if (e.button === 0) {
@@ -285,7 +300,12 @@ export function Slider(props) {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), designProps, { ref: sliderRef, onMouseDown: (e) => {
+    }), designProps, { ref: (instance) => {
+            sliderRef.current = instance;
+            return () => {
+                sliderRef.current = null;
+            };
+        }, onMouseDown: (e) => {
             var _a;
             (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             preventBlur(e);

package/slider/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 SliderProps extends BaseProps<'slider', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     formControl?: FormControlProvider;
@@ -22,7 +22,6 @@ export interface SliderProps extends BaseProps<'slider', typeof CLASSES>, Omit<R
     vertical?: boolean;
     reverse?: boolean;
     disabled?: boolean;
-    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
-    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    inputProps?: [React.ComponentPropsWithRef<'input'>?, React.ComponentPropsWithRef<'input'>?];
     onModelChange?: (value: any) => void;
 }

package/slides/Slides.d.ts

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

package/slides/Slides.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
+import { useAsync, useEvent, useIsomorphicLayoutEffect, useRefExtra } from '@laser-ui/hooks';
 import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
@@ -151,7 +151,7 @@ export function Slides(props) {
         setDragDistance(0);
         setDragOpacity(undefined);
     };
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (slidesRef.current) {
             let size = 0;
             const slideEls = slidesRef.current.querySelectorAll(`.${namespace}-slides__slide`);
@@ -212,7 +212,12 @@ export function Slides(props) {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: slidesRef, onMouseEnter: (e) => {
+    }), { ref: (instance) => {
+            slidesRef.current = instance;
+            return () => {
+                slidesRef.current = null;
+            };
+        }, onMouseEnter: (e) => {
             var _a;
             (_a = restProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             setMouseEnter(true);

package/spinner/Spinner.d.ts

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

package/spinner/Spinner.js

@@ -5,30 +5,28 @@ import { checkNodeExist } from '@laser-ui/utils';
 import { isNumber, isUndefined } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { CLASSES } from './vars';
-import { useComponentProps, useStyled } from '../hooks';
+import { CircularProgress } from '../circular-progress';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
-import { Transition } from '../internal/transition';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function Spinner(props) {
     const _a = useComponentProps('Spinner', props), { children, styleOverrides, styleProvider, visible: visibleProp, text, size = 28, delay, alone = false, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "visible", "text", "size", "delay", "alone", "afterVisibleChange"]);
+    const namespace = useNamespace();
     const styled = useStyled(CLASSES, { spinner: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.spinner }, styleOverrides);
     const async = useAsync();
     const forceUpdate = useForceUpdate();
     const spinnerRef = useRef(null);
-    const containerRef = useRef(null);
-    const dataRef = useRef({
-        delayVisible: false,
-    });
+    const delayVisible = useRef(false);
     if (visibleProp === false) {
-        dataRef.current.delayVisible = false;
+        delayVisible.current = false;
     }
-    const visible = isUndefined(delay) ? visibleProp : dataRef.current.delayVisible;
+    const visible = isUndefined(delay) ? visibleProp : delayVisible.current;
     useEffect(() => {
         if (isNumber(delay) && visibleProp) {
             const clearTid = async.setTimeout(() => {
-                dataRef.current.delayVisible = true;
+                delayVisible.current = true;
                 forceUpdate();
             }, delay);
             return () => {
@@ -36,31 +34,31 @@ export function Spinner(props) {
             };
         }
     }, [async, delay, forceUpdate, visibleProp]);
-    const transitionStyles = {
-        enter: { opacity: 0 },
-        entering: {
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
-        },
-        leaving: {
-            opacity: 0,
-            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
-        },
-        leaved: { display: 'none' },
-    };
-    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, afterRender: () => {
-            if (!alone && spinnerRef.current && containerRef.current) {
-                containerRef.current.style.height = `${spinnerRef.current.offsetHeight}px`;
+    return (_jsx(Transition, { enter: visible, name: `${namespace}-fade`, duration: TTANSITION_DURING_BASE, onSkipEnter: () => {
+            if (spinnerRef.current) {
+                spinnerRef.current.style.setProperty('--spinner-container-height', `${spinnerRef.current.offsetHeight}px`);
             }
-        }, destroyWhenLeaved: true, afterEnter: () => {
+        }, onBeforeEnter: () => {
+            if (spinnerRef.current) {
+                spinnerRef.current.style.setProperty('--spinner-container-height', `${spinnerRef.current.offsetHeight}px`);
+            }
+        }, onAfterEnter: () => {
             afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
-        }, afterLeave: () => {
+        }, onAfterLeave: () => {
             afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
-        }, children: (state) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('spinner', {
+        }, children: (transitionRef, leaved) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('spinner', {
             'spinner--alone': alone,
         }), {
             className: restProps.className,
-            style: Object.assign(Object.assign({}, restProps.style), transitionStyles[state]),
-        }), { ref: spinnerRef, children: _jsxs("div", Object.assign({}, styled('spinner__container'), { ref: containerRef, children: [children !== false && (_jsx("div", Object.assign({}, mergeCS(styled('spinner__icon'), {
+            style: Object.assign(Object.assign({}, restProps.style), (leaved ? { display: 'none' } : undefined)),
+        }), { ref: (instance) => {
+                spinnerRef.current = instance;
+                transitionRef(instance);
+                return () => {
+                    spinnerRef.current = null;
+                    transitionRef(null);
+                };
+            }, children: _jsxs("div", Object.assign({}, styled('spinner__container'), { children: [children !== false && (_jsx("div", Object.assign({}, mergeCS(styled('spinner__icon'), {
                         style: { fontSize: size },
                     }), { children: checkNodeExist(children) ? (children) : (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) }))), checkNodeExist(text) && _jsx("div", Object.assign({}, styled('spinner__text'), { children: text }))] })) }))) }));
 }

package/stepper/Stepper.d.ts

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

package/stepper/Stepper.js

@@ -8,8 +8,8 @@ import { isNumber, isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CollapseTransition } from '../internal/transition';
 import { Progress } from '../progress';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function Stepper(props) {
@@ -68,20 +68,13 @@ export function Stepper(props) {
                         }), { style: { width: dotSize, height: dotSize } }), { children: [itemDot === false ? null : checkNodeExist(itemDot) ? (itemDot) : itemState === 'error' ? (_jsx(Icon, { children: _jsx(CloseOutlined, {}) })) : isCompleted ? (_jsx(Icon, { children: _jsx(CheckOutlined, {}) })) : (itemStep), isProgress && (_jsx("div", Object.assign({}, styled('stepper__step-progress'), { children: _jsx(Progress, { percent: percent, pattern: "circle", state: "process", label: false, size: dotSize + 8, lineWidth: 4 }) })))] })), !labelBottom && titleNode, !vertical && separatoreNode] })),
                 labelBottom && titleNode,
                 vertical && separatoreNode,
-                checkNodeExist(itemDescription) && (_jsx(CollapseTransition, { originalSize: {
-                        height: 'auto',
-                    }, collapsedSize: {
-                        height: 0,
-                    }, enter: !vertical || isActive, during: TTANSITION_DURING_BASE, styles: {
-                        entering: {
-                            transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                        },
-                        leaving: {
-                            transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                        },
-                        leaved: { display: 'none' },
-                    }, children: (descriptionRef, collapseStyle) => (_jsx("div", Object.assign({}, mergeCS(styled('stepper__step-description'), {
-                        style: Object.assign({ marginLeft: labelBottom ? undefined : `calc(${dotSize}px + 8px)` }, collapseStyle),
-                    }), { ref: descriptionRef, children: itemDescription }))) }))));
+                checkNodeExist(itemDescription) && (_jsx(CollapseTransition, { height: 0, enter: !vertical || isActive, duration: TTANSITION_DURING_BASE, children: (transitionRef, leaved) => (_jsx("div", { ref: (instance) => {
+                            transitionRef(instance);
+                            return () => {
+                                transitionRef(null);
+                            };
+                        }, style: { display: leaved ? 'none' : undefined }, children: _jsx("div", Object.assign({}, mergeCS(styled('stepper__step-description'), {
+                            style: { marginLeft: labelBottom ? undefined : `calc(${dotSize}px + 8px)` },
+                        }), { children: itemDescription })) })) }))));
         }) })));
 }

package/switch/Switch.js

@@ -2,34 +2,18 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
+import { CircularProgress } from '../circular-progress';
+import { useComponentProps, useControlled, useDesign, useNamespace, useScopedProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
-import { Transition } from '../internal/transition';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 export function Switch(props) {
-    const _a = useComponentProps('Switch', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, stateContent, labelPlacement = 'right', size: sizeProp, loading = false, disabled: disabledProp = false, inputRef, inputRender, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "stateContent", "labelPlacement", "size", "loading", "disabled", "inputRef", "inputRender", "onModelChange"]);
+    const _a = useComponentProps('Switch', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, stateContent, labelPlacement = 'right', size: sizeProp, loading = false, disabled: disabledProp = false, inputProps, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "stateContent", "labelPlacement", "size", "loading", "disabled", "inputProps", "onModelChange"]);
+    const namespace = useNamespace();
     const styled = useStyled(CLASSES, { switch: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.switch }, 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 { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const designProps = useDesign({ compose: { active: checked, disabled } });
-    const transitionStyles = {
-        enter: { left: 2 },
-        entering: {
-            left: 'calc(100% - 20px)',
-            transition: ['width', 'padding', 'margin', 'left'].map((attr) => `${attr} ${TTANSITION_DURING}ms linear`).join(', '),
-        },
-        entered: { right: 2 },
-        leave: { right: 2 },
-        leaving: {
-            right: 'calc(100% - 20px)',
-            transition: ['width', 'padding', 'margin', 'right'].map((attr) => `${attr} ${TTANSITION_DURING}ms linear`).join(', '),
-        },
-        leaved: { left: 2 },
-    };
-    const inputNode = (_jsx("input", Object.assign({}, styled('switch__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: inputRef, type: "checkbox", disabled: disabled, role: "switch", "aria-checked": checked, onChange: () => {
-            changeChecked((draft) => !draft);
-        } })));
     return (_jsxs("label", Object.assign({}, restProps, mergeCS(styled('switch', `switch--${size}`, {
         'switch--label-left': labelPlacement === 'left',
         'switch.is-checked': checked,
@@ -42,7 +26,32 @@ export function Switch(props) {
                                 style: { opacity: checked ? 1 : 0 },
                             }), { children: stateContent[0] }))), checkNodeExist(stateContent[1]) && (_jsx("div", Object.assign({}, mergeCS(styled('switch__state-content'), {
                                 style: { opacity: checked ? 0 : 1 },
-                            }), { children: stateContent[1] })))] })), inputRender ? inputRender(inputNode) : inputNode, _jsx(Transition, { enter: checked, during: TTANSITION_DURING, children: (state) => (_jsx("div", Object.assign({}, mergeCS(styled('switch__state-dot'), {
-                            style: transitionStyles[state],
-                        }), { children: loading && (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) }))) })] })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('switch__label'), { children: children }))] })));
+                            }), { children: stateContent[1] })))] })), _jsx("input", Object.assign({}, inputProps, styled('switch__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { type: "checkbox", disabled: disabled, role: "switch", "aria-checked": checked, onChange: () => {
+                            changeChecked((draft) => !draft);
+                        } })), _jsx(Transition, { enter: checked, name: `${namespace}-switch`, duration: TTANSITION_DURING, onSkipEnter: (el) => {
+                            if (el) {
+                                el.style.left = '';
+                                el.style.right = '2px';
+                            }
+                        }, onAfterEnter: (el) => {
+                            if (el) {
+                                el.style.left = '';
+                                el.style.right = '2px';
+                            }
+                        }, onSkipLeave: (el) => {
+                            if (el) {
+                                el.style.left = '2px';
+                                el.style.right = '';
+                            }
+                        }, onAfterLeave: (el) => {
+                            if (el) {
+                                el.style.left = '2px';
+                                el.style.right = '';
+                            }
+                        }, children: (transitionRef) => (_jsx("div", Object.assign({}, styled('switch__state-dot'), { ref: (instance) => {
+                                transitionRef(instance);
+                                return () => {
+                                    transitionRef(null);
+                                };
+                            }, children: loading && (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) }))) })] })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('switch__label'), { children: children }))] })));
 }

package/switch/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 SwitchProps extends BaseProps<'switch', typeof CLASSES>, React.LabelHTMLAttributes<HTMLLabelElement> {
     formControl?: FormControlProvider;
@@ -12,7 +12,6 @@ export interface SwitchProps extends BaseProps<'switch', typeof CLASSES>, React.
     size?: Size;
     loading?: boolean;
     disabled?: boolean;
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     onModelChange?: (checked: boolean) => void;
 }

package/table/Table.d.ts

@@ -7,7 +7,7 @@ import { TableTd } from './TableTd';
 import { TableTh } from './TableTh';
 import { TableThAction } from './TableThAction';
 export declare const Table: {
-    (props: TableProps): JSX.Element | null;
+    (props: TableProps): React.ReactElement | null;
     Th: typeof TableTh;
     ThAction: typeof TableThAction;
     Td: typeof TableTd;

package/table/Table.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAsync, useMount, useResize } from '@laser-ui/hooks';
+import { useAsync, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
 import { isSimpleArrayEqual } from '@laser-ui/utils';
 import { useMemo, useRef, useState } from 'react';
 import { TableEmpty } from './TableEmpty';
@@ -17,7 +17,8 @@ export const Table = (props) => {
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     const async = useAsync();
     const divRef = useRef(null);
-    const dataRef = useRef({});
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const clearTid = useRef(() => { });
     const [fixed, setFixed] = useState([]);
     const handleFixed = () => {
         if (divRef.current) {
@@ -41,14 +42,12 @@ export const Table = (props) => {
             }
         }
     };
-    useMount(() => {
+    useIsomorphicLayoutEffect(() => {
         handleFixed();
-    });
+    }, []);
     useResize(divRef, () => {
-        var _a, _b;
-        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
-        dataRef.current.clearTid = async.setTimeout(() => {
-            dataRef.current.clearTid = undefined;
+        clearTid.current();
+        clearTid.current = async.setTimeout(() => {
             handleFixed();
         }, 100);
     });
@@ -58,11 +57,16 @@ export const Table = (props) => {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: divRef, onScroll: (e) => {
+    }), { ref: (instance) => {
+            divRef.current = instance;
+            return () => {
+                divRef.current = null;
+            };
+        }, onScroll: (e) => {
             var _a;
             (_a = restProps.onScroll) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             handleFixed();
-        }, children: _jsx(TableContext.Provider, { value: context, children: children }) })));
+        }, children: _jsx(TableContext, { value: context, children: children }) })));
 };
 Table.Th = TableTh;
 Table.ThAction = TableThAction;

package/table/TableEmpty.d.ts

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

package/table/TableEmpty.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { isUndefined } from 'lodash';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { CLASSES } from './vars';
 import { Empty } from '../empty';
 import { useComponentProps, useStyled } from '../hooks';
@@ -11,7 +12,7 @@ export function TableEmpty(props) {
     const _a = useComponentProps('TableEmpty', props), { children, styleOverrides, styleProvider, colSpan } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "colSpan"]);
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     const tdRef = useRef(null);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a, _b;
         if (isUndefined(colSpan) && tdRef.current) {
             let tableEl = tdRef.current.parentElement;
@@ -33,5 +34,10 @@ export function TableEmpty(props) {
     return (_jsx("tr", Object.assign({}, restProps, mergeCS(styled('table__empty'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: _jsx("td", { ref: tdRef, colSpan: colSpan, children: _jsx("div", Object.assign({}, styled('table__empty-content'), { children: checkNodeExist(children) ? children : _jsx(Empty, { image: Empty.SIMPLE_IMG }) })) }) })));
+    }), { children: _jsx("td", { ref: (instance) => {
+                tdRef.current = instance;
+                return () => {
+                    tdRef.current = null;
+                };
+            }, colSpan: colSpan, children: _jsx("div", Object.assign({}, styled('table__empty-content'), { children: checkNodeExist(children) ? children : _jsx(Empty, { image: Empty.SIMPLE_IMG }) })) }) })));
 }

package/table/TableExpand.d.ts

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

package/table/TableFilter.d.ts

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

package/table/TableFilter.js

@@ -9,7 +9,7 @@ import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
 export function TableFilter(props) {
-    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "footer", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
+    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = false, zIndex, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "footer", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     const { t } = useTranslation();
     return (_jsx(Popover, Object.assign({}, restProps, { children: children, content: _jsxs("div", Object.assign({}, styled('table__filter'), { children: [searchable && (_jsx(Input, { style: { display: 'flex' }, model: searchValue, prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), placeholder: t('Search'), clearable: true, onModelChange: (value) => {

package/table/TableTd.d.ts

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

package/table/TableTh.d.ts

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

package/table/TableThAction.d.ts

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

package/table/TableThAction.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
-export const TableThAction = forwardRef((props, ref) => {
+export function TableThAction(props) {
     var _a, _b;
-    const _c = useComponentProps('TableThAction', props), { styleOverrides, styleProvider, children, active = false, disabled = false } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "children", "active", "disabled"]);
+    const _c = useComponentProps('TableThAction', props), { ref, styleOverrides, styleProvider, children, active = false, disabled = false } = _c, restProps = __rest(_c, ["ref", "styleOverrides", "styleProvider", "children", "active", "disabled"]);
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('table__th-action', {
         'table__th-action.is-active': active,
@@ -15,4 +14,4 @@ export const TableThAction = forwardRef((props, ref) => {
         className: restProps.className,
         style: restProps.style,
     }), { ref: ref, role: (_a = restProps['role']) !== null && _a !== void 0 ? _a : 'button', tabIndex: (_b = restProps['tabIndex']) !== null && _b !== void 0 ? _b : (disabled ? -1 : 0), children: children })));
-});
+}