@laser-ui/components 2.4.0 → 2.6.0

package/dropdown/Dropdown.js

@@ -27,11 +27,7 @@ export function Dropdown(props) {
     const updateSubPosition = useRef(new Map());
     const [focusVisible, focusVisibleProps] = useFocusVisible((code) => code.startsWith('Arrow') || ['Home', 'End', 'Enter', 'Space'].includes(code));
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
-    const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
-    if (!visible) {
-        popupIdsRef.current = [];
-    }
-    const popupIds = popupIdsRef.current;
+    const { popupIds, setPopupIds, addPopupId, removePopupId } = useNestedPopup(visible);
     const [focusIds, setFocusIds] = useState([]);
     const focusId = (() => {
         var _a;

package/hooks/useNestedPopup.d.ts

@@ -1,11 +1,10 @@
-import type { DraftFunction } from '@laser-ui/hooks/useImmer';
 interface PopupId<ID> {
     id: ID;
     visible: boolean;
 }
-export declare function useNestedPopup<ID>(): {
-    popupIdsRef: import("react").RefObject<PopupId<ID>[]>;
-    setPopupIds: (value: PopupId<ID>[] | DraftFunction<PopupId<ID>[]>) => void;
+export declare function useNestedPopup<ID>(visible?: boolean): {
+    popupIds: PopupId<ID>[];
+    setPopupIds: import("@laser-ui/hooks/useImmer").Updater<PopupId<ID>[]>;
     addPopupId: (id: ID) => void;
     removePopupId: (id: ID) => void;
 };

package/hooks/useNestedPopup.js

@@ -1,16 +1,11 @@
-import { useForceUpdate } from '@laser-ui/hooks';
-import { freeze, produce } from 'immer';
-import { isFunction } from 'lodash';
-import { useRef } from 'react';
-export function useNestedPopup() {
-    const forceUpdate = useForceUpdate();
-    const popupIdsRef = useRef([]);
-    const setPopupIds = (value) => {
-        popupIdsRef.current = isFunction(value) ? produce(popupIdsRef.current, value) : freeze(value);
-        forceUpdate();
-    };
+import { useImmer } from '@laser-ui/hooks';
+export function useNestedPopup(visible = true) {
+    const [popupIds, setPopupIds] = useImmer([]);
+    if (!visible && popupIds.length > 0) {
+        setPopupIds([]);
+    }
     return {
-        popupIdsRef,
+        popupIds,
         setPopupIds,
         addPopupId: (id) => {
             setPopupIds((draft) => {

package/image/Image.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useForceUpdate } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { has } from 'lodash';
-import { Fragment, useRef } from 'react';
+import { Fragment, useState } from 'react';
 import { ImageAction } from './ImageAction';
 import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
@@ -13,42 +12,37 @@ import { mergeCS } from '../utils';
 export const Image = (props) => {
     const _a = useComponentProps('Image', props), { styleOverrides, styleProvider, loading, error, actions, imgProps } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "loading", "error", "actions", "imgProps"]);
     const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
-    const forceUpdate = useForceUpdate();
-    const dataRef = useRef({
-        isLoading: true,
-        isError: false,
-    });
-    if (imgProps.src !== dataRef.current.prevSrc) {
-        dataRef.current.prevSrc = imgProps.src;
-        dataRef.current.isLoading = true;
-        dataRef.current.isError = false;
+    const [previousSrc, setPreviousSrc] = useState(imgProps.src);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isError, setIsError] = useState(false);
+    if (imgProps.src !== previousSrc) {
+        setPreviousSrc(imgProps.src);
+        setIsLoading(true);
+        setIsError(false);
     }
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [dataRef.current.isLoading && checkNodeExist(loading) && loading, dataRef.current.isError && checkNodeExist(error) && error, actions && (_jsx("div", Object.assign({}, styled('image__actions'), { children: actions.map((node, index) => {
+    }), { children: [isLoading && checkNodeExist(loading) && loading, isError && checkNodeExist(error) && error, actions && (_jsx("div", Object.assign({}, styled('image__actions'), { children: actions.map((node, index) => {
                     const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
                     return _jsx(Fragment, { children: action }, id);
                 }) }))), _jsx("img", Object.assign({}, imgProps, mergeCS(styled('image__img'), {
                 className: imgProps === null || imgProps === void 0 ? void 0 : imgProps.className,
-                style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (dataRef.current.isLoading && loading) || (dataRef.current.isError && error) ? 'none' : undefined }),
+                style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (isLoading && loading) || (isError && error) ? 'none' : undefined }),
             }), { onLoadStart: (e) => {
                     var _a;
                     // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoadStart) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = true;
-                    forceUpdate();
+                    setIsLoading(true);
                 }, onLoad: (e) => {
                     var _a;
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = false;
-                    forceUpdate();
+                    setIsLoading(false);
                 }, onError: (e) => {
                     var _a;
                     (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-                    dataRef.current.isLoading = false;
-                    dataRef.current.isError = true;
-                    forceUpdate();
+                    setIsLoading(false);
+                    setIsError(true);
                 } }))] })));
 };
 Image.Loader = ImageLoader;

package/input/InputNumber.js

@@ -1,46 +1,52 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useEvent, useForceUpdate, useRefExtra } from '@laser-ui/hooks';
+import { useAsync, useEvent, 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';
 import { isNull, isUndefined } from 'lodash';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { BaseInput } from '../base-input';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
+function syncValueToPlaceholder(value, placeholder) {
+    if (isNull(value)) {
+        if (placeholder) {
+            return '';
+        }
+    }
+    else {
+        if (value !== Number(placeholder)) {
+            return value.toString();
+        }
+    }
+}
 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, 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();
-    const forceUpdate = useForceUpdate();
-    const dataRef = useRef({
-        inputFocused: false,
-    });
+    const dataRef = useRef({});
     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
-        : isNull(value)
-            ? ''
-            : value.toString();
+    const [placeholderValue, setPlaceholderValue] = useState(() => (isNull(value) ? '' : value.toString()));
+    const newPlaceholderValue = syncValueToPlaceholder(value, placeholderValue);
+    if (!isUndefined(newPlaceholderValue)) {
+        setPlaceholderValue(newPlaceholderValue);
+    }
     const changeValue = (val) => {
-        if ((isNull(val) ? '' : val.toString()) !== inputValue) {
-            forceUpdate();
-        }
-        dataRef.current.inputValue = undefined;
         _changeValue(val);
+        setPlaceholderValue(isNull(val) ? '' : val.toString());
     };
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const getValue = (val) => { var _a, _b; return Number(Math.max(min !== null && min !== void 0 ? min : -Infinity, Math.min(max !== null && max !== void 0 ? max : Infinity, val)).toFixed((_b = (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); };
     const handleNumberButtonMouseDown = (increase = true) => {
-        changeValue(getValue((() => {
-            let val = inputValue.length > 0 ? Number(inputValue) : null;
+        const val = getValue((() => {
+            let val = placeholderValue.length > 0 ? Number(placeholderValue) : null;
             if (isNull(val)) {
                 return 0;
             }
@@ -48,13 +54,14 @@ export function InputNumber(props) {
                 val = Math.round(val);
             }
             return increase ? val + step : val - step;
-        })()));
+        })());
+        changeValue(val);
         const loop = (prev) => {
             const val = getValue(increase ? prev + step : prev - step);
             changeValue(val);
             dataRef.current.clearLoop = async.setTimeout(() => loop(val), 50);
         };
-        dataRef.current.clearTid = async.setTimeout(() => loop(Number(inputValue)), 400);
+        dataRef.current.clearTid = async.setTimeout(() => loop(Number(placeholderValue)), 400);
     };
     const handleNumberButtonMouseUp = () => {
         var _a, _b, _c, _d;
@@ -95,32 +102,26 @@ export function InputNumber(props) {
                         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;
+                }, value: placeholderValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
+                    setPlaceholderValue(val);
                     if (val.length === 0) {
-                        changeValue(null);
+                        _changeValue(null);
                     }
                     else {
                         const num = Number(val);
                         if ((isUndefined(max) || num <= max) && (isUndefined(min) || num >= min) && (!integer || Number.isInteger(num))) {
-                            changeValue(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);
+                    let val = value;
+                    if (placeholderValue.length === 0) {
+                        val = null;
                     }
                     else {
-                        let num = Number(inputValue);
+                        let num = Number(placeholderValue);
                         if (!isUndefined(max) && num > max) {
                             num = max;
                         }
@@ -130,9 +131,12 @@ export function InputNumber(props) {
                         if (integer && !Number.isInteger(num)) {
                             num = Math.round(num);
                         }
-                        changeValue(num);
+                        val = num;
+                    }
+                    if (val !== value) {
+                        changeValue(val);
                     }
-                } })), clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: inputValue.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
+                } })), clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: placeholderValue.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/menu/Menu.js

@@ -73,8 +73,7 @@ export function Menu(props) {
             onExpandsChange(ids, items);
         }
     });
-    const { popupIdsRef, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
-    const popupIds = popupIdsRef.current;
+    const { popupIds, setPopupIds, addPopupId, removePopupId } = useNestedPopup();
     const [focusIds, setFocusIds] = useState([]);
     const focusId = (() => {
         var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "6aa6cb81ee51849b66dddeab0de811cadcb65c60"
+  "gitHead": "10832372dcf8eb1ce1a71903333f7abb61325613"
 }

package/spinner/Spinner.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAsync, useForceUpdate } from '@laser-ui/hooks';
+import { useAsync } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { isNumber, isUndefined } from 'lodash';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CLASSES } from './vars';
 import { CircularProgress } from '../circular-progress';
 import { useComponentProps, useNamespace, useStyled } from '../hooks';
@@ -16,24 +16,22 @@ export function Spinner(props) {
     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 delayVisible = useRef(false);
-    if (visibleProp === false) {
-        delayVisible.current = false;
+    const [delayTimeout, setDelayTimeout] = useState(false);
+    if (!visibleProp && delayTimeout) {
+        setDelayTimeout(false);
     }
-    const visible = isUndefined(delay) ? visibleProp : delayVisible.current;
+    const visible = isUndefined(delay) ? visibleProp : delayTimeout;
     useEffect(() => {
         if (isNumber(delay) && visibleProp) {
             const clearTid = async.setTimeout(() => {
-                delayVisible.current = true;
-                forceUpdate();
+                setDelayTimeout(true);
             }, delay);
             return () => {
                 clearTid();
             };
         }
-    }, [async, delay, forceUpdate, visibleProp]);
+    }, [async, delay, visibleProp]);
     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`);