@laser-ui/components 2.5.0 → 2.6.0

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.5.0",
+  "version": "2.6.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -37,5 +37,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "27f4c8861d51f0fbc8e83ef36df60fdac59afeb3"
+  "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`);