@laser-ui/components 1.6.1 → 2.0.0

package/image/ImagePreview.d.ts

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

package/image/ImagePreview.js

@@ -15,10 +15,10 @@ import { Button } from '../button';
 import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
 import { Icon } from '../icon';
 import { Input } from '../input';
-import { Mask } from '../internal/mask';
 import { Portal } from '../internal/portal';
-import { Transition } from '../internal/transition';
+import { Mask } from '../mask';
 import { ROOT_DATA } from '../root/vars';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function ImagePreview(props) {
@@ -166,122 +166,107 @@ export function ImagePreview(props) {
                 document.body.appendChild(el);
             }
             return el;
-        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, destroyWhenLeaved: true, afterEnter: () => {
+        }, children: _jsx(Transition, { enter: visible, name: `${namespace}-popup`, duration: TTANSITION_DURING_BASE, onAfterEnter: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
                 dataRef.current.prevActiveEl = document.activeElement;
                 if (previewRef.current) {
                     previewRef.current.focus({ preventScroll: true });
                 }
-            }, afterLeave: () => {
+            }, onAfterLeave: () => {
                 afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
                 if (dataRef.current.prevActiveEl) {
                     dataRef.current.prevActiveEl.focus({ preventScroll: true });
                 }
-            }, children: (state) => {
-                let transitionStyle = {};
-                switch (state) {
-                    case 'enter':
-                        transitionStyle = { transform: 'scale(0.3)', opacity: 0 };
-                        break;
-                    case 'entering':
-                        transitionStyle = {
-                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                        };
-                        break;
-                    case 'leaving':
-                        transitionStyle = {
-                            transform: 'scale(0.3)',
-                            opacity: 0,
-                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                        };
-                        break;
-                    default:
-                        break;
-                }
-                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image-preview'), {
-                    className: restProps.className,
-                    style: Object.assign(Object.assign(Object.assign({}, restProps.style), transitionStyle), { display: state === 'leaved' ? 'none' : undefined, zIndex }),
-                }), { ref: previewRef, tabIndex: -1, onKeyDown: (e) => {
-                        var _a;
-                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
-                        if (visible && escClosable && e.code === 'Escape') {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                        }
-                    }, children: [_jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--prev'), { onClick: () => {
-                                changeActive((prevActive) => {
-                                    return prevActive === 0 ? list.length - 1 : prevActive - 1;
-                                });
-                            }, children: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--next'), { onClick: () => {
-                                changeActive((prevActive) => {
-                                    return prevActive === list.length - 1 ? 0 : prevActive + 1;
-                                });
-                            }, children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) })), _jsxs("ul", Object.assign({}, styled('image-preview__toolbar'), { children: [_jsxs("li", Object.assign({}, styled('image-preview__toolbar-page'), { children: [_jsx(Input.Number, Object.assign({}, styled('image-preview__toolbar-page-input'), { model: active + 1, min: 1, max: list.length, integer: true, onModelChange: (val) => {
-                                                if (!isNull(val)) {
-                                                    changeActive(val - 1);
-                                                }
-                                            } })), _jsx("span", { children: "/" }), _jsx("span", { children: list.length })] })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-rotate'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(Rotate90DegreesCwOutlined, {}) }), onClick: () => {
-                                            setTransform((transform) => {
-                                                transform.rotate = transform.rotate + 90;
-                                            });
-                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-out'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomOutOutlined, {}) }), onClick: () => {
-                                            setTransform((transform) => {
-                                                transform.scale = Math.max(transform.scale / 1.3, 1);
-                                            }, true);
-                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-in'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomInOutlined, {}) }), onClick: () => {
-                                            setTransform((transform) => {
-                                                transform.scale = transform.scale * 1.3;
-                                            }, true);
-                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-close'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }), onClick: () => {
-                                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                                        } }) }))] })), list.map((img, index) => (_jsx("div", Object.assign({}, mergeCS(styled('image-preview__img-wrapper'), {
-                            style: {
-                                display: index === active ? undefined : 'none',
-                            },
-                        }), { children: _jsx("img", Object.assign({}, img, styled('image-preview__img'), { tabIndex: -1, "data-index": index, onMouseDown: (e) => {
-                                    if (e.button === 0) {
-                                        e.preventDefault();
-                                        e.currentTarget.focus({ preventScroll: true });
-                                        dataRef.current.eventData = {};
-                                        setIsDragging(true);
-                                    }
-                                }, onMouseUp: (e) => {
-                                    if (e.button === 0) {
-                                        e.preventDefault();
-                                    }
-                                }, onTouchStart: (e) => {
-                                    var _a, _b;
+            }, children: (transitionRef, leaved) => leaved ? null : (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image-preview'), {
+                className: restProps.className,
+                style: Object.assign(Object.assign(Object.assign({}, restProps.style), { '--popup-scale': 0.3, '--popup-duration': TTANSITION_DURING_BASE + 'ms' }), { zIndex }),
+            }), { ref: (instance) => {
+                    previewRef.current = instance;
+                    transitionRef(instance);
+                    return () => {
+                        previewRef.current = null;
+                        transitionRef(null);
+                    };
+                }, tabIndex: -1, onKeyDown: (e) => {
+                    var _a;
+                    (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    if (visible && escClosable && e.code === 'Escape') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                    }
+                }, children: [_jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--prev'), { onClick: () => {
+                            changeActive((prevActive) => {
+                                return prevActive === 0 ? list.length - 1 : prevActive - 1;
+                            });
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--next'), { onClick: () => {
+                            changeActive((prevActive) => {
+                                return prevActive === list.length - 1 ? 0 : prevActive + 1;
+                            });
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) })), _jsxs("ul", Object.assign({}, styled('image-preview__toolbar'), { children: [_jsxs("li", Object.assign({}, styled('image-preview__toolbar-page'), { children: [_jsx(Input.Number, Object.assign({}, styled('image-preview__toolbar-page-input'), { model: active + 1, min: 1, max: list.length, integer: true, onModelChange: (val) => {
+                                            if (!isNull(val)) {
+                                                changeActive(val - 1);
+                                            }
+                                        } })), _jsx("span", { children: "/" }), _jsx("span", { children: list.length })] })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-rotate'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(Rotate90DegreesCwOutlined, {}) }), onClick: () => {
+                                        setTransform((transform) => {
+                                            transform.rotate = transform.rotate + 90;
+                                        });
+                                    } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-out'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomOutOutlined, {}) }), onClick: () => {
+                                        setTransform((transform) => {
+                                            transform.scale = Math.max(transform.scale / 1.3, 1);
+                                        }, true);
+                                    } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-in'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomInOutlined, {}) }), onClick: () => {
+                                        setTransform((transform) => {
+                                            transform.scale = transform.scale * 1.3;
+                                        }, true);
+                                    } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-close'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }), onClick: () => {
+                                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                                    } }) }))] })), list.map((img, index) => (_jsx("div", Object.assign({}, mergeCS(styled('image-preview__img-wrapper'), {
+                        style: {
+                            display: index === active ? undefined : 'none',
+                        },
+                    }), { children: _jsx("img", Object.assign({}, img, styled('image-preview__img'), { tabIndex: -1, "data-index": index, onMouseDown: (e) => {
+                                if (e.button === 0) {
+                                    e.preventDefault();
                                     e.currentTarget.focus({ preventScroll: true });
                                     dataRef.current.eventData = {};
-                                    if (e.touches.length === 1) {
-                                        setIsDragging(true);
-                                    }
-                                    else if (e.touches.length === 2) {
-                                        dataRef.current.initialScale = (_b = (_a = dataRef.current.transform.get(active)) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1;
-                                        dataRef.current.mouse = {
-                                            x: Math.min(e.touches[0].clientX, e.touches[1].clientX) + Math.abs(e.touches[0].clientX - e.touches[1].clientX),
-                                            y: Math.min(e.touches[0].clientY, e.touches[1].clientY) + Math.abs(e.touches[0].clientY - e.touches[1].clientY),
-                                        };
-                                    }
-                                }, onTouchEnd: (e) => {
-                                    if (e.touches.length === 1) {
-                                        dataRef.current.eventData.initialTouches = dataRef.current.eventData.currentTouches = undefined;
-                                    }
-                                    else {
-                                        setIsDragging(false);
-                                    }
-                                }, onWheel: (e) => {
-                                    setTransform((transform) => {
-                                        transform.scale =
-                                            e.deltaY < 0 ? transform.scale + transform.scale * 0.1 : Math.max(transform.scale - transform.scale * 0.1, 1);
-                                    });
-                                } })) }), index))), _jsx("ul", Object.assign({}, styled('image-preview__thumbnail-list'), { children: list.map((imgProps, index) => index >= startIndex &&
-                                index <= endIndex && (_createElement("li", Object.assign({}, styled('image-preview__thumbnail', {
-                                'image-preview__thumbnail.is-active': active === index,
-                            }), { key: index, onClick: () => {
-                                    changeActive(index);
-                                } }),
-                                _jsx("img", Object.assign({}, imgProps, styled('image-preview__thumbnail-img')))))) })), _jsx(Mask, { visible: true })] })));
-            } }) }));
+                                    setIsDragging(true);
+                                }
+                            }, onMouseUp: (e) => {
+                                if (e.button === 0) {
+                                    e.preventDefault();
+                                }
+                            }, onTouchStart: (e) => {
+                                var _a, _b;
+                                e.currentTarget.focus({ preventScroll: true });
+                                dataRef.current.eventData = {};
+                                if (e.touches.length === 1) {
+                                    setIsDragging(true);
+                                }
+                                else if (e.touches.length === 2) {
+                                    dataRef.current.initialScale = (_b = (_a = dataRef.current.transform.get(active)) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1;
+                                    dataRef.current.mouse = {
+                                        x: Math.min(e.touches[0].clientX, e.touches[1].clientX) + Math.abs(e.touches[0].clientX - e.touches[1].clientX),
+                                        y: Math.min(e.touches[0].clientY, e.touches[1].clientY) + Math.abs(e.touches[0].clientY - e.touches[1].clientY),
+                                    };
+                                }
+                            }, onTouchEnd: (e) => {
+                                if (e.touches.length === 1) {
+                                    dataRef.current.eventData.initialTouches = dataRef.current.eventData.currentTouches = undefined;
+                                }
+                                else {
+                                    setIsDragging(false);
+                                }
+                            }, onWheel: (e) => {
+                                setTransform((transform) => {
+                                    transform.scale =
+                                        e.deltaY < 0 ? transform.scale + transform.scale * 0.1 : Math.max(transform.scale - transform.scale * 0.1, 1);
+                                });
+                            } })) }), index))), _jsx("ul", Object.assign({}, styled('image-preview__thumbnail-list'), { children: list.map((imgProps, index) => index >= startIndex &&
+                            index <= endIndex && (_createElement("li", Object.assign({}, styled('image-preview__thumbnail', {
+                            'image-preview__thumbnail.is-active': active === index,
+                        }), { key: index, onClick: () => {
+                                changeActive(index);
+                            } }),
+                            _jsx("img", Object.assign({}, imgProps, styled('image-preview__thumbnail-img')))))) })), _jsx(Mask, { visible: true })] }))) }) }));
 }

package/image/types.d.ts

@@ -6,14 +6,18 @@ export interface ImageProps extends BaseProps<'image', typeof CLASSES>, Omit<Rea
     imgProps: React.ImgHTMLAttributes<HTMLImageElement>;
     loading?: React.ReactNode;
     error?: React.ReactNode;
-    actions?: React.ReactElement[];
+    actions?: (React.ReactNode | {
+        id: React.Key;
+        action: React.ReactNode;
+    })[];
 }
 export interface ImageLoaderProps<K extends keyof HTMLImageElement = 'naturalWidth' | 'naturalHeight'> {
     src: string;
     keys?: K[];
-    children: (img: Pick<HTMLImageElement, K>) => JSX.Element | null;
+    children: (img: Pick<HTMLImageElement, K>) => React.ReactElement | null;
 }
 export interface ImageActionProps extends BaseProps<'image', typeof CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
 }
 export interface ImagePreviewProps extends BaseProps<'image-preview', typeof PREVIEW_CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     list: React.ImgHTMLAttributes<HTMLImageElement>[];

package/input/Input.d.ts

@@ -2,6 +2,6 @@
 import type { InputProps } from './types';
 import { InputNumber } from './InputNumber';
 export declare const Input: {
-    (props: InputProps): JSX.Element | null;
+    (props: InputProps): React.ReactElement | null;
     Number: typeof InputNumber;
 };

package/input/Input.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useForkRef } from '@laser-ui/hooks';
-import { checkNodeExist } from '@laser-ui/utils';
+import { checkNodeExist, setRef } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import VisibilityOutlined from '@material-design-icons/svg/outlined/visibility.svg?react';
 import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibility_off.svg?react';
@@ -13,11 +12,10 @@ import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled,
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 export const Input = (props) => {
-    const _a = useComponentProps('Input', props), { styleOverrides, styleProvider, formControl, model, defaultModel, type, prefix, suffix, password: passwordProp, defaultPassword, clearable, placeholder, size: sizeProp, disabled: disabledProp = false, inputRef: inputRefProp, inputRender, onModelChange, onClear, onPasswordChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "type", "prefix", "suffix", "password", "defaultPassword", "clearable", "placeholder", "size", "disabled", "inputRef", "inputRender", "onModelChange", "onClear", "onPasswordChange"]);
+    const _a = useComponentProps('Input', props), { styleOverrides, styleProvider, formControl, model, defaultModel, type, prefix, suffix, password: passwordProp, defaultPassword, clearable, placeholder, size: sizeProp, disabled: disabledProp = false, inputProps, onModelChange, onClear, onPasswordChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "type", "prefix", "suffix", "password", "defaultPassword", "clearable", "placeholder", "size", "disabled", "inputProps", "onModelChange", "onClear", "onPasswordChange"]);
     const styled = useStyled(CLASSES, { input: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.input }, styleOverrides);
     const { t } = useTranslation();
     const inputRef = useRef(null);
-    const combineInputRef = useForkRef(inputRef, inputRefProp);
     const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : '', model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const [password, changePassword] = useControlled(defaultPassword !== null && defaultPassword !== void 0 ? defaultPassword : true, passwordProp, onPasswordChange);
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
@@ -27,9 +25,6 @@ export const Input = (props) => {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
-            changeValue(val);
-        } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
         'input.is-disabled': disabled,
     }), {
@@ -47,7 +42,16 @@ export const Input = (props) => {
             var _a, _b;
             (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
-        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), inputRender ? inputRender(inputNode) : inputNode, clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: value.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
+        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), _jsx(BaseInput, Object.assign({}, inputProps, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: (instance) => {
+                    inputRef.current = instance;
+                    const ret = setRef(inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, instance);
+                    return () => {
+                        inputRef.current = null;
+                        ret();
+                    };
+                }, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
+                    changeValue(val);
+                } })), clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: value.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
                     changeValue('');
                     onClear === null || onClear === void 0 ? void 0 : onClear();
                 }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), type === 'password' && !disabled && (_jsx("div", Object.assign({}, styled('input__password'), { role: "button", "aria-label": t('Input', password ? 'Password is not visible' : 'Password is visible'), onClick: () => {

package/input/InputNumber.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useEvent, useForceUpdate, useForkRef, useRefExtra } from '@laser-ui/hooks';
-import { checkNodeExist } from '@laser-ui/utils';
+import { useAsync, useEvent, useForceUpdate, useRefExtra } from '@laser-ui/hooks';
+import { checkNodeExist, setRef } from '@laser-ui/utils';
 import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
 import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg?react';
@@ -13,7 +13,7 @@ import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled,
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
 export function InputNumber(props) {
-    const _a = useComponentProps('InputNumber', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max, min, step = 1, integer = false, prefix, suffix, clearable, placeholder, size: sizeProp, numberButton = true, disabled: disabledProp = false, inputRef: inputRefProp, inputRender, onModelChange, onClear } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "integer", "prefix", "suffix", "clearable", "placeholder", "size", "numberButton", "disabled", "inputRef", "inputRender", "onModelChange", "onClear"]);
+    const _a = useComponentProps('InputNumber', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max, min, step = 1, integer = false, prefix, suffix, clearable, placeholder, size: sizeProp, numberButton = true, disabled: disabledProp = false, inputProps, onModelChange, onClear } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "integer", "prefix", "suffix", "clearable", "placeholder", "size", "numberButton", "disabled", "inputProps", "onModelChange", "onClear"]);
     const styled = useStyled(CLASSES, { input: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.input }, styleOverrides);
     const async = useAsync();
     const { t } = useTranslation();
@@ -21,9 +21,8 @@ export function InputNumber(props) {
     const dataRef = useRef({
         inputFocused: false,
     });
-    const inputRef = useRef(null);
-    const combineInputRef = useForkRef(inputRef, inputRefProp);
     const windowRef = useRefExtra(() => window);
+    const inputRef = useRef(null);
     const [value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     const inputValue = dataRef.current.inputFocused && !isUndefined(dataRef.current.inputValue)
         ? dataRef.current.inputValue
@@ -69,40 +68,6 @@ export function InputNumber(props) {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
-            forceUpdate();
-            dataRef.current.inputValue = val;
-            if (val.length === 0) {
-                changeValue(null);
-            }
-            else {
-                const num = Number(val);
-                if ((isUndefined(max) || num <= max) && (isUndefined(min) || num >= min) && (!integer || Number.isInteger(num))) {
-                    changeValue(num);
-                }
-            }
-        }, onFocus: () => {
-            dataRef.current.inputFocused = true;
-            dataRef.current.inputValue = undefined;
-        }, onBlur: () => {
-            dataRef.current.inputFocused = false;
-            if (inputValue.length === 0) {
-                changeValue(null);
-            }
-            else {
-                let num = Number(inputValue);
-                if (!isUndefined(max) && num > max) {
-                    num = max;
-                }
-                if (!isUndefined(min) && num < min) {
-                    num = min;
-                }
-                if (integer && !Number.isInteger(num)) {
-                    num = Math.round(num);
-                }
-                changeValue(num);
-            }
-        } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
         'input.is-disabled': disabled,
     }), {
@@ -120,7 +85,51 @@ export function InputNumber(props) {
             var _a, _b;
             (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
-        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), inputRender ? inputRender(inputNode) : inputNode, clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: inputValue.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
+        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), _jsx(BaseInput, Object.assign({}, inputProps, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: (instance) => {
+                    inputRef.current = instance;
+                    const ret = setRef(inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, instance);
+                    return () => {
+                        inputRef.current = null;
+                        ret();
+                    };
+                }, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
+                    forceUpdate();
+                    dataRef.current.inputValue = val;
+                    if (val.length === 0) {
+                        changeValue(null);
+                    }
+                    else {
+                        const num = Number(val);
+                        if ((isUndefined(max) || num <= max) && (isUndefined(min) || num >= min) && (!integer || Number.isInteger(num))) {
+                            changeValue(num);
+                        }
+                    }
+                }, onFocus: (e) => {
+                    var _a;
+                    (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                    dataRef.current.inputFocused = true;
+                    dataRef.current.inputValue = undefined;
+                }, onBlur: (e) => {
+                    var _a;
+                    (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                    dataRef.current.inputFocused = false;
+                    if (inputValue.length === 0) {
+                        changeValue(null);
+                    }
+                    else {
+                        let num = Number(inputValue);
+                        if (!isUndefined(max) && num > max) {
+                            num = max;
+                        }
+                        if (!isUndefined(min) && num < min) {
+                            num = min;
+                        }
+                        if (integer && !Number.isInteger(num)) {
+                            num = Math.round(num);
+                        }
+                        changeValue(num);
+                    }
+                } })), clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: inputValue.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
                     changeValue(null);
                     onClear === null || onClear === void 0 ? void 0 : onClear();
                 }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), numberButton && !disabled && (_jsxs("div", Object.assign({}, styled('input__number-container'), { children: [_jsx("div", Object.assign({}, styled('input__number'), { role: "button", "aria-label": t('Input', 'Increase number'), onMouseDown: (e) => {

package/input/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 InputProps extends BaseProps<'input', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'prefix'> {
     formControl?: FormControlProvider;
@@ -16,8 +16,7 @@ export interface InputProps extends BaseProps<'input', typeof CLASSES>, Omit<Rea
     placeholder?: string;
     size?: Size;
     disabled?: boolean;
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     onModelChange?: (value: string) => void;
     onClear?: () => void;
     onPasswordChange?: (value: boolean) => void;
@@ -37,8 +36,7 @@ export interface InputNumberProps extends BaseProps<'input', typeof CLASSES>, Om
     size?: Size;
     numberButton?: boolean;
     disabled?: boolean;
-    inputRef?: React.ForwardedRef<HTMLInputElement>;
-    inputRender?: CloneHTMLElement;
+    inputProps?: React.ComponentPropsWithRef<'input'>;
     onModelChange?: (value: number | null) => void;
     onClear?: () => void;
 }

package/internal/lazy-loading/LazyLoading.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { LazyLoadingProps } from './types';
+export declare function LazyLoading(props: LazyLoadingProps): React.ReactNode;

package/internal/lazy-loading/LazyLoading.js

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+export function LazyLoading(props) {
+    const { children, hidden, disabled = false } = props;
+    const loaded = useRef(disabled ? true : !hidden);
+    if (!hidden) {
+        loaded.current = true;
+    }
+    return loaded.current ? children : null;
+}

package/internal/lazy-loading/index.d.ts

@@ -0,0 +1,2 @@
+export type { LazyLoadingProps } from './types';
+export { LazyLoading } from './LazyLoading';

package/internal/lazy-loading/index.js

@@ -0,0 +1 @@
+export { LazyLoading } from './LazyLoading';

package/internal/lazy-loading/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export {};
+export interface LazyLoadingProps {
+    children?: React.ReactNode;
+    hidden: boolean;
+    disabled?: boolean;
+}

package/internal/popup/Popup.d.ts

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