@etsoo/materialui 1.3.72 → 1.3.74

package/lib/CountdownButton.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from '@mui/material';
-import React from 'react';
+import { ButtonProps } from "@mui/material";
+import React from "react";
 /**
  * Countdown button action
  */
@@ -9,7 +9,11 @@ export interface CountdownButtonAction {
 /**
  * Countdown button props
  */
-export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
+export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
+    /**
+     * Initial state, default 0
+     */
+    initState?: number;
     /**
      * Action, required
      */

package/lib/CountdownButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, CircularProgress } from '@mui/material';
-import React from 'react';
+import { Button, CircularProgress } from "@mui/material";
+import React from "react";
 /**
  * Countdown button
  * @param props Props
@@ -8,12 +8,12 @@ import React from 'react';
  */
 export const CountdownButton = React.forwardRef((props, ref) => {
     // Destructure
-    const { onAction, onClick, ...rest } = props;
+    const { initState = 0, onAction, onClick, ...rest } = props;
     // State
     // 0 - normal
     // 1 - loading
-    // 2 - countdown
-    const [state, updateState] = React.useState(0);
+    // >= 2 - countdown seconds
+    const [state, updateState] = React.useState(initState);
     // Ignore seconds
     const seconds = 2;
     // Countdown length
@@ -30,8 +30,8 @@ export const CountdownButton = React.forwardRef((props, ref) => {
     else {
         const countdown = (state - seconds)
             .toString()
-            .padStart(shared.maxLength, '0');
-        endIcon = _jsx("span", { style: { fontSize: 'smaller' }, children: countdown });
+            .padStart(shared.maxLength, "0");
+        endIcon = _jsx("span", { style: { fontSize: "smaller" }, children: countdown });
     }
     // Disabled?
     const disabled = state > 0;

package/lib/InputField.d.ts

@@ -26,39 +26,39 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * Change delay handler, without it onChange will be applied
      */
-    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
 }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * Change delay handler, without it onChange will be applied
      */
-    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
 }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * Change delay handler, without it onChange will be applied
      */
-    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/lib/MUGlobal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemButtonProps, Theme } from '@mui/material';
 /**
  * Mouse event handler with data

package/lib/NotifierPromptProps.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Notifier prompt props
  */

package/lib/SelectEx.js

@@ -32,11 +32,14 @@ export function SelectEx(props) {
         }
         onItemChange(option, userAction);
     };
-    const setOptionsAdd = (options) => {
+    // Local value
+    const v = defaultValue ?? value;
+    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ""), [multiple, v]);
+    const setOptionsAdd = React.useCallback((options) => {
         setOptions(options);
         if (valueSource != null)
             doItemChange(options, valueSource, false);
-    };
+    }, [valueSource]);
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
@@ -44,10 +47,7 @@ export function SelectEx(props) {
         if (options == null || !propertyWay)
             return;
         setOptionsAdd(options);
-    }, [options, propertyWay]);
-    // Local value
-    const v = defaultValue ?? value;
-    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ""), [multiple, v]);
+    }, [options, propertyWay, setOptionsAdd]);
     // Value state
     const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();

package/lib/TextFieldEx.d.ts

@@ -45,81 +45,81 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * On enter click
      */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
      * On visibility
      * @param input HTML input
      * @returns Result
      */
-    onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
+    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Show clear button
      */
-    showClear?: boolean | undefined;
+    showClear?: boolean;
     /**
      * Show password button
      */
-    showPassword?: boolean | undefined;
+    showPassword?: boolean;
 }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * On enter click
      */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
      * On visibility
      * @param input HTML input
      * @returns Result
      */
-    onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
+    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Show clear button
      */
-    showClear?: boolean | undefined;
+    showClear?: boolean;
     /**
      * Show password button
      */
-    showPassword?: boolean | undefined;
+    showPassword?: boolean;
 }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
-    changeDelay?: number | undefined;
+    changeDelay?: number;
     /**
      * On enter click
      */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
      * On visibility
      * @param input HTML input
      * @returns Result
      */
-    onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
+    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
     /**
      * Is the field read only?
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Show clear button
      */
-    showClear?: boolean | undefined;
+    showClear?: boolean;
     /**
      * Show password button
      */
-    showPassword?: boolean | undefined;
+    showPassword?: boolean;
 }, "ref">) & React.RefAttributes<TextFieldExMethods>>;

package/lib/app/ReactApp.d.ts

@@ -22,7 +22,7 @@ export declare let globalApp: ReactAppType | null;
  * @returns Component
  */
 export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }>;
 /**
  * React implemented base

package/lib/pages/DrawerHeader.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Common drawer header
  */

package/lib/pages/SearchPageProps.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { GridJsonData, GridLoader } from "@etsoo/react";
 import type { DataTypes } from "@etsoo/shared";
 import type { CommonPageProps } from "./CommonPage";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.72",
+  "version": "1.3.74",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,16 +47,16 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/css": "^11.13.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@etsoo/appscript": "^1.4.99",
-    "@etsoo/notificationbase": "^1.1.43",
+    "@etsoo/notificationbase": "^1.1.44",
     "@etsoo/react": "^1.7.57",
-    "@etsoo/shared": "^1.2.42",
-    "@mui/icons-material": "^5.15.19",
-    "@mui/material": "^5.15.19",
-    "@mui/x-data-grid": "^7.6.2",
+    "@etsoo/shared": "^1.2.43",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/material": "^5.16.5",
+    "@mui/x-data-grid": "^7.11.1",
     "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
@@ -70,14 +70,14 @@
     "react-imask": "7.6.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.24.9",
     "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.25.0",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@babel/runtime-corejs3": "^7.24.7",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@babel/runtime-corejs3": "^7.25.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/pica": "^9.0.4",
@@ -87,10 +87,10 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   }
 }

package/src/CountdownButton.tsx

@@ -1,21 +1,26 @@
-import { Button, ButtonProps, CircularProgress } from '@mui/material';
-import React from 'react';
+import { Button, ButtonProps, CircularProgress } from "@mui/material";
+import React from "react";
 
 /**
  * Countdown button action
  */
 export interface CountdownButtonAction {
-    (): Promise<number>;
+  (): Promise<number>;
 }
 
 /**
  * Countdown button props
  */
-export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
-    /**
-     * Action, required
-     */
-    onAction: CountdownButtonAction;
+export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
+  /**
+   * Initial state, default 0
+   */
+  initState?: number;
+
+  /**
+   * Action, required
+   */
+  onAction: CountdownButtonAction;
 };
 
 /**
@@ -24,96 +29,96 @@ export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
  * @returns Button
  */
 export const CountdownButton = React.forwardRef<
-    HTMLButtonElement,
-    CountdownButtonProps
+  HTMLButtonElement,
+  CountdownButtonProps
 >((props, ref) => {
-    // Destructure
-    const { onAction, onClick, ...rest } = props;
-
-    // State
-    // 0 - normal
-    // 1 - loading
-    // 2 - countdown
-    const [state, updateState] = React.useState(0);
-
-    // Ignore seconds
-    const seconds = 2;
-
-    // Countdown length
-    const [shared] = React.useState({ maxLength: 0 });
-
-    const isMounted = React.useRef(true);
-
-    // endIcon
-    let endIcon: React.ReactNode;
-    if (state === 0) {
-        endIcon = undefined;
-    } else if (state === 1) {
-        endIcon = <CircularProgress size={12} />;
+  // Destructure
+  const { initState = 0, onAction, onClick, ...rest } = props;
+
+  // State
+  // 0 - normal
+  // 1 - loading
+  // >= 2 - countdown seconds
+  const [state, updateState] = React.useState(initState);
+
+  // Ignore seconds
+  const seconds = 2;
+
+  // Countdown length
+  const [shared] = React.useState({ maxLength: 0 });
+
+  const isMounted = React.useRef(true);
+
+  // endIcon
+  let endIcon: React.ReactNode;
+  if (state === 0) {
+    endIcon = undefined;
+  } else if (state === 1) {
+    endIcon = <CircularProgress size={12} />;
+  } else {
+    const countdown = (state - seconds)
+      .toString()
+      .padStart(shared.maxLength, "0");
+    endIcon = <span style={{ fontSize: "smaller" }}>{countdown}</span>;
+  }
+
+  // Disabled?
+  const disabled = state > 0;
+
+  // Action
+  const doAction = (result: number) => {
+    // Seconds to wait, 120
+    if (result > seconds) {
+      // Here 122
+      result += seconds;
+      updateState(result);
+
+      // Update max length
+      shared.maxLength = result.toString().length;
+
+      const seed = setInterval(() => {
+        // Mounted?
+        if (!isMounted.current) return;
+
+        // Last 1 second and then complete
+        if (result > seconds + 1) {
+          result--;
+          updateState(result);
+        } else {
+          clearInterval(seed);
+          updateState(0);
+        }
+      }, 1000);
     } else {
-        const countdown = (state - seconds)
-            .toString()
-            .padStart(shared.maxLength, '0');
-        endIcon = <span style={{ fontSize: 'smaller' }}>{countdown}</span>;
+      updateState(0);
     }
+  };
 
-    // Disabled?
-    const disabled = state > 0;
-
-    // Action
-    const doAction = (result: number) => {
-        // Seconds to wait, 120
-        if (result > seconds) {
-            // Here 122
-            result += seconds;
-            updateState(result);
-
-            // Update max length
-            shared.maxLength = result.toString().length;
-
-            const seed = setInterval(() => {
-                // Mounted?
-                if (!isMounted.current) return;
-
-                // Last 1 second and then complete
-                if (result > seconds + 1) {
-                    result--;
-                    updateState(result);
-                } else {
-                    clearInterval(seed);
-                    updateState(0);
-                }
-            }, 1000);
-        } else {
-            updateState(0);
-        }
-    };
+  // Local click
+  const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    // Show loading
+    updateState(1);
 
-    // Local click
-    const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        // Show loading
-        updateState(1);
+    // Callback
+    if (onClick != null) onClick(event);
 
-        // Callback
-        if (onClick != null) onClick(event);
+    // Return any countdown
+    onAction().then(doAction);
+  };
 
-        // Return any countdown
-        onAction().then(doAction);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
     };
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    return (
-        <Button
-            disabled={disabled}
-            endIcon={endIcon}
-            onClick={localClick}
-            ref={ref}
-            {...rest}
-        />
-    );
+  }, []);
+
+  return (
+    <Button
+      disabled={disabled}
+      endIcon={endIcon}
+      onClick={localClick}
+      ref={ref}
+      {...rest}
+    />
+  );
 });

package/src/SelectEx.tsx

@@ -171,10 +171,20 @@ export function SelectEx<
     onItemChange(option, userAction);
   };
 
-  const setOptionsAdd = (options: readonly T[]) => {
-    setOptions(options);
-    if (valueSource != null) doItemChange(options, valueSource, false);
-  };
+  // Local value
+  const v = defaultValue ?? value;
+  const valueSource = React.useMemo(
+    () => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ""),
+    [multiple, v]
+  );
+
+  const setOptionsAdd = React.useCallback(
+    (options: readonly T[]) => {
+      setOptions(options);
+      if (valueSource != null) doItemChange(options, valueSource, false);
+    },
+    [valueSource]
+  );
 
   // When options change
   // [options] will cause infinite loop
@@ -182,14 +192,7 @@ export function SelectEx<
   React.useEffect(() => {
     if (options == null || !propertyWay) return;
     setOptionsAdd(options);
-  }, [options, propertyWay]);
-
-  // Local value
-  const v = defaultValue ?? value;
-  const valueSource = React.useMemo(
-    () => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ""),
-    [multiple, v]
-  );
+  }, [options, propertyWay, setOptionsAdd]);
 
   // Value state
   const [valueState, setValueStateBase] = React.useState<unknown>(valueSource);