@etsoo/materialui 1.6.62 → 1.6.64

package/lib/cjs/LinkEx.d.ts

@@ -3,7 +3,12 @@ import { Link as RouterLink } from "react-router";
 /**
  * Extended link component props
  */
-export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component">;
+export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component"> & {
+    /**
+     * Disabled or not
+     */
+    disabled?: boolean;
+};
 /**
  * Extended link component
  * @param props Props

package/lib/cjs/LinkEx.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkEx = LinkEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
 const react_router_1 = require("react-router");
 /**
  * Extended link component
@@ -10,6 +14,6 @@ const react_router_1 = require("react-router");
  * @returns Component
  */
 function LinkEx(props) {
-    const { underline = "hover", ...rest } = props;
-    return (0, jsx_runtime_1.jsx)(material_1.Link, { component: react_router_1.Link, underline: underline, ...rest });
+    const { children, disabled, underline = "hover", ...rest } = props;
+    return disabled ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: children })) : ((0, jsx_runtime_1.jsx)(material_1.Link, { component: react_router_1.Link, underline: underline, ...rest, children: children }));
 }

package/lib/cjs/NumberInputField.d.ts

@@ -33,6 +33,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Step value
      */
     step?: number;
+    /**
+     * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
+     */
+    numberChangeDelay?: number;
     /**
      * Number value change handler
      * @param value New value

package/lib/cjs/NumberInputField.js

@@ -17,18 +17,42 @@ const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment")
 function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
-        : undefined, endSymbol, max = 9999999, onChange, onNumberChange, slotProps = {}, ...rest } = props;
+        : undefined, endSymbol, max = 9999999, onChange, numberChangeDelay = 600, onNumberChange, slotProps = {}, ...rest } = props;
+    const timeoutRef = react_1.default.useRef(0);
+    function doNumberChange(value) {
+        if (numberChangeDelay <= 0) {
+            onNumberChange(value);
+        }
+        else {
+            if (timeoutRef.current == null)
+                return;
+            clearTimeout();
+            timeoutRef.current = globalThis.setTimeout(() => onNumberChange(value), numberChangeDelay);
+        }
+    }
+    function clearTimeout() {
+        const timeout = timeoutRef.current;
+        if (timeout == null)
+            return;
+        if (timeout > 0) {
+            globalThis.clearTimeout(timeout);
+        }
+        timeoutRef.current = undefined;
+    }
+    react_1.default.useEffect(() => {
+        return clearTimeout;
+    }, []);
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", onChange: (event) => {
             onChange?.(event);
             if (onNumberChange) {
                 const input = event.target;
                 if (input.checkValidity()) {
                     const qty = shared_1.NumberUtils.parse(input.value);
-                    onNumberChange(qty);
+                    doNumberChange(qty);
                 }
                 else {
                     input.reportValidity();
-                    onNumberChange(undefined);
+                    doNumberChange(undefined);
                 }
             }
         }, slotProps: Object.assign(slotProps, {

package/lib/mjs/LinkEx.d.ts

@@ -3,7 +3,12 @@ import { Link as RouterLink } from "react-router";
 /**
  * Extended link component props
  */
-export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component">;
+export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component"> & {
+    /**
+     * Disabled or not
+     */
+    disabled?: boolean;
+};
 /**
  * Extended link component
  * @param props Props

package/lib/mjs/LinkEx.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from "@mui/material";
+import React from "react";
 import { Link as RouterLink } from "react-router";
 /**
  * Extended link component
@@ -7,6 +8,6 @@ import { Link as RouterLink } from "react-router";
  * @returns Component
  */
 export function LinkEx(props) {
-    const { underline = "hover", ...rest } = props;
-    return _jsx(Link, { component: RouterLink, underline: underline, ...rest });
+    const { children, disabled, underline = "hover", ...rest } = props;
+    return disabled ? (_jsx(React.Fragment, { children: children })) : (_jsx(Link, { component: RouterLink, underline: underline, ...rest, children: children }));
 }

package/lib/mjs/NumberInputField.d.ts

@@ -33,6 +33,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
      * Step value
      */
     step?: number;
+    /**
+     * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
+     */
+    numberChangeDelay?: number;
     /**
      * Number value change handler
      * @param value New value

package/lib/mjs/NumberInputField.js

@@ -11,18 +11,42 @@ import InputAdornment from "@mui/material/InputAdornment";
 export function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
-        : undefined, endSymbol, max = 9999999, onChange, onNumberChange, slotProps = {}, ...rest } = props;
+        : undefined, endSymbol, max = 9999999, onChange, numberChangeDelay = 600, onNumberChange, slotProps = {}, ...rest } = props;
+    const timeoutRef = React.useRef(0);
+    function doNumberChange(value) {
+        if (numberChangeDelay <= 0) {
+            onNumberChange(value);
+        }
+        else {
+            if (timeoutRef.current == null)
+                return;
+            clearTimeout();
+            timeoutRef.current = globalThis.setTimeout(() => onNumberChange(value), numberChangeDelay);
+        }
+    }
+    function clearTimeout() {
+        const timeout = timeoutRef.current;
+        if (timeout == null)
+            return;
+        if (timeout > 0) {
+            globalThis.clearTimeout(timeout);
+        }
+        timeoutRef.current = undefined;
+    }
+    React.useEffect(() => {
+        return clearTimeout;
+    }, []);
     return (_jsx(InputField, { type: "number", onChange: (event) => {
             onChange?.(event);
             if (onNumberChange) {
                 const input = event.target;
                 if (input.checkValidity()) {
                     const qty = NumberUtils.parse(input.value);
-                    onNumberChange(qty);
+                    doNumberChange(qty);
                 }
                 else {
                     input.reportValidity();
-                    onNumberChange(undefined);
+                    doNumberChange(undefined);
                 }
             }
         }, slotProps: Object.assign(slotProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.62",
+  "version": "1.6.64",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@base-ui/react": "^1.4.1",
+    "@base-ui/react": "^1.5.0",
     "@dnd-kit/react": "^0.4.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -46,7 +46,7 @@
     "@etsoo/shared": "^1.2.84",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
-    "@mui/x-data-grid": "^9.1.0",
+    "@mui/x-data-grid": "^9.3.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.4.5",
@@ -75,13 +75,13 @@
     "@testing-library/react": "^16.3.2",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react": "^6.0.2",
     "jsdom": "^29.1.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.7"
   }
 }

package/src/LinkEx.tsx

@@ -1,10 +1,16 @@
 import { Link, LinkProps } from "@mui/material";
+import React from "react";
 import { Link as RouterLink } from "react-router";
 
 /**
  * Extended link component props
  */
-export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component">;
+export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component"> & {
+  /**
+   * Disabled or not
+   */
+  disabled?: boolean;
+};
 
 /**
  * Extended link component
@@ -12,6 +18,12 @@ export type LinkExProps = Omit<LinkProps<typeof RouterLink>, "component">;
  * @returns Component
  */
 export function LinkEx(props: LinkExProps) {
-  const { underline = "hover", ...rest } = props;
-  return <Link component={RouterLink} underline={underline} {...rest} />;
+  const { children, disabled, underline = "hover", ...rest } = props;
+  return disabled ? (
+    <React.Fragment>{children}</React.Fragment>
+  ) : (
+    <Link component={RouterLink} underline={underline} {...rest}>
+      {children}
+    </Link>
+  );
 }

package/src/NumberInputField.tsx

@@ -3,7 +3,6 @@ import { InputField, InputFieldProps } from "./InputField";
 import { Currency } from "@etsoo/appscript";
 import { NumberUtils } from "@etsoo/shared";
 import InputAdornment from "@mui/material/InputAdornment";
-import { MUGlobal } from "./MUGlobal";
 
 /**
  * Number input field properties
@@ -47,6 +46,11 @@ export type NumberInputFieldProps = Omit<
    */
   step?: number;
 
+  /**
+   * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
+   */
+  numberChangeDelay?: number;
+
   /**
    * Number value change handler
    * @param value New value
@@ -71,11 +75,42 @@ export function NumberInputField(props: NumberInputFieldProps) {
     endSymbol,
     max = 9999999,
     onChange,
+    numberChangeDelay = 600,
     onNumberChange,
     slotProps = {},
     ...rest
   } = props;
 
+  const timeoutRef = React.useRef<number | undefined>(0);
+
+  function doNumberChange(value: number | undefined) {
+    if (numberChangeDelay <= 0) {
+      onNumberChange!(value);
+    } else {
+      if (timeoutRef.current == null) return;
+
+      clearTimeout();
+
+      timeoutRef.current = globalThis.setTimeout(
+        () => onNumberChange!(value),
+        numberChangeDelay
+      );
+    }
+  }
+
+  function clearTimeout() {
+    const timeout = timeoutRef.current;
+    if (timeout == null) return;
+    if (timeout > 0) {
+      globalThis.clearTimeout(timeout);
+    }
+    timeoutRef.current = undefined;
+  }
+
+  React.useEffect(() => {
+    return clearTimeout;
+  }, []);
+
   return (
     <InputField
       type="number"
@@ -86,10 +121,10 @@ export function NumberInputField(props: NumberInputFieldProps) {
           const input = event.target;
           if (input.checkValidity()) {
             const qty = NumberUtils.parse(input.value);
-            onNumberChange(qty);
+            doNumberChange(qty);
           } else {
             input.reportValidity();
-            onNumberChange(undefined);
+            doNumberChange(undefined);
           }
         }
       }}