@etsoo/materialui 1.5.84 → 1.5.86

package/lib/mjs/TextFieldEx.js

@@ -9,13 +9,15 @@ import { useAppContext } from "./app/ReactApp";
 import TextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
-export const TextFieldEx = React.forwardRef((props, ref) => {
+export function TextFieldEx(props) {
     // Global app
     const app = useAppContext();
     // Labels
     const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
     // Destructure
-    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, slotProps, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, mRef, ...rest } = props;
+    // Slot props
+    const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Shrink
     InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // State
@@ -32,18 +34,18 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         helperTextEx = errorText;
     }
     let typeEx = showPassword ? "password" : type;
-    let input;
+    let inputEle;
     const localRef = (ref) => {
-        input = ref;
-        if (input.value !== "") {
+        inputEle = ref;
+        if (inputEle.value !== "") {
             updateEmpty(false);
         }
     };
     const doClear = () => {
-        if (input == null)
+        if (inputEle == null)
             return;
-        ReactUtils.triggerChange(input, "", false);
-        input.focus();
+        ReactUtils.triggerChange(inputEle, "", false);
+        inputEle.focus();
     };
     const clearClick = () => {
         if (onClear) {
@@ -62,23 +64,23 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     };
     const touchStart = async (e) => {
         // Show the password
-        if (input) {
+        if (inputEle) {
             if (onVisibility) {
-                const result = await onVisibility(input);
+                const result = await onVisibility(inputEle);
                 if (result === false)
                     return;
             }
-            input.blur();
-            input.type = "text";
+            inputEle.blur();
+            inputEle.type = "text";
         }
         preventDefault(e);
     };
     const touchEnd = (e) => {
         // Show the password
-        if (input) {
+        if (inputEle) {
             if (onVisibility)
                 return;
-            input.type = "password";
+            inputEle.type = "password";
         }
         preventDefault(e);
     };
@@ -99,7 +101,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
                 onKeyDown(e);
             }
         };
-    React.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(mRef, () => ({
         /**
          * Set error
          * @param error Error
@@ -140,5 +142,12 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
-});
+    return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), onChange: onChangeEx, onKeyDown: onKeyPressEx, slotProps: {
+            input: { readOnly, ...input, ...InputProps },
+            inputLabel: {
+                shrink: MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, type: typeEx, variant: variant, ...rest }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.84",
+  "version": "1.5.86",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.47",
+    "@etsoo/appscript": "^1.6.48",
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.62",
     "@etsoo/shared": "^1.2.79",
     "@mui/icons-material": "^7.3.5",
     "@mui/material": "^7.3.5",
-    "@mui/x-data-grid": "^8.17.0",
+    "@mui/x-data-grid": "^8.18.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.0",
@@ -76,13 +76,13 @@
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.5",
     "@types/react-avatar-editor": "^13.0.4",
-    "@types/react-dom": "^19.2.2",
+    "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
-    "@vitejs/plugin-react": "^5.1.0",
-    "jsdom": "^27.1.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "jsdom": "^27.2.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.8"
+    "vitest": "^4.0.9"
   }
 }

package/src/CountdownButton.tsx

@@ -29,10 +29,7 @@ export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
  * @param props Props
  * @returns Button
  */
-export const CountdownButton = React.forwardRef<
-  HTMLButtonElement,
-  CountdownButtonProps
->((props, ref) => {
+export function CountdownButton(props: CountdownButtonProps) {
   // Destructure
   const { initState = 0, onAction, onClick, ...rest } = props;
 
@@ -121,8 +118,7 @@ export const CountdownButton = React.forwardRef<
       disabled={disabled}
       endIcon={endIcon}
       onClick={localClick}
-      ref={ref}
       {...rest}
     />
   );
-});
+}

package/src/EmailInput.tsx

@@ -1,11 +1,11 @@
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Email input props
  */
-export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
+export type EmailInputProps = Omit<InputFieldProps, "type"> & {};
 
 /**
  * Email input
@@ -32,7 +32,7 @@ export function EmailInput(props: EmailInputProps) {
 
   // Layout
   return (
-    <TextField
+    <InputField
       type="email"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}

package/src/InputField.tsx

@@ -35,83 +35,78 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
-  (props, ref) => {
-    // Destruct
-    const {
-      InputProps = {},
-      inputProps = {},
-      changeDelay,
-      slotProps,
-      onChange,
-      onChangeDelay,
-      readOnly,
-      size = MUGlobal.inputFieldSize,
-      variant = MUGlobal.inputFieldVariant,
-      minChars = 0,
-      ...rest
-    } = props;
+export function InputField(props: InputFieldProps) {
+  // Destruct
+  const {
+    InputProps = {},
+    inputProps = {},
+    slotProps,
+    changeDelay,
+    onChange,
+    onChangeDelay,
+    readOnly,
+    size = MUGlobal.inputFieldSize,
+    variant = MUGlobal.inputFieldVariant,
+    minChars = 0,
+    ...rest
+  } = props;
 
-    // Slot props
-    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
+  // Slot props
+  const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
 
-    const isMounted = React.useRef(true);
-    const createDelayed = () => {
-      if (changeDelay != null && changeDelay >= 1) {
-        const changeHandler = onChangeDelay ?? onChange;
-        if (changeHandler)
-          return useDelayedExecutor(changeHandler, changeDelay);
-      }
-      return undefined;
-    };
-    const delayed = createDelayed();
+  const isMounted = React.useRef(true);
+  const createDelayed = () => {
+    if (changeDelay != null && changeDelay >= 1) {
+      const changeHandler = onChangeDelay ?? onChange;
+      if (changeHandler) return useDelayedExecutor(changeHandler, changeDelay);
+    }
+    return undefined;
+  };
+  const delayed = createDelayed();
 
-    const onChangeEx = (
-      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-      // Min characters check
-      const len = event.target.value.length;
-      if (len > 0 && len < minChars) {
-        // Avoid to trigger the form change event
-        event.stopPropagation();
-        event.preventDefault();
-        return;
-      }
+  const onChangeEx = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    // Min characters check
+    const len = event.target.value.length;
+    if (len > 0 && len < minChars) {
+      // Avoid to trigger the form change event
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
 
-      if (onChange && (delayed == null || onChangeDelay != null))
-        onChange(event);
-      delayed?.call(undefined, event);
-    };
+    if (onChange && (delayed == null || onChangeDelay != null)) onChange(event);
+    delayed?.call(undefined, event);
+  };
 
-    React.useEffect(() => {
-      return () => {
-        isMounted.current = false;
-        delayed?.clear();
-      };
-    }, []);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+      delayed?.clear();
+    };
+  }, []);
 
-    // Layout
-    return (
-      <TextField
-        ref={ref}
-        slotProps={{
-          htmlInput: {
-            ["data-min-chars"]: minChars,
-            ...htmlInput,
-            ...inputProps
-          },
-          input: { readOnly, ...input, ...InputProps },
-          inputLabel: {
-            shrink: MUGlobal.inputFieldShrink,
-            ...inputLabel
-          },
-          ...restSlotProps
-        }}
-        onChange={onChangeEx}
-        size={size}
-        variant={variant}
-        {...rest}
-      />
-    );
-  }
-);
+  // Layout
+  return (
+    <TextField
+      slotProps={{
+        htmlInput: {
+          ["data-min-chars"]: minChars,
+          ...htmlInput,
+          ...inputProps
+        },
+        input: { readOnly, ...input, ...InputProps },
+        inputLabel: {
+          shrink: MUGlobal.inputFieldShrink,
+          ...inputLabel
+        },
+        ...restSlotProps
+      }}
+      onChange={onChangeEx}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  );
+}

package/src/InputTipField.tsx

@@ -1,20 +1,44 @@
 import { DataTypes } from "@etsoo/shared";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField, InputFieldProps } from "./InputField";
+import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
 import ListItem from "@mui/material/ListItem";
 import Popover from "@mui/material/Popover";
 import List from "@mui/material/List";
 import InputAdornment from "@mui/material/InputAdornment";
+import { EmailInput } from "./EmailInput";
+import { MobileInput } from "./MobileInput";
+import { PhoneInput } from "./PhoneInput";
 
 type ItemType = DataTypes.IdLabelItem<string | number>;
 
+const componentMap = {
+  input: InputField,
+  email: EmailInput,
+  phone: PhoneInput,
+  mobile: MobileInput
+};
+
+type ComponentMap = typeof componentMap;
+type ComponentKey = keyof ComponentMap;
+
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType> =
-  InputFieldProps & {
+export type InputTipFieldProps<
+  T extends ItemType = ItemType,
+  K extends ComponentKey = "input"
+> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+  /**
+   * Component key
+   */
+  component?: K;
+
+  /**
+   * Component properties
+   */
+  componentProps: {
     /**
      * Load data
      * @param value Duplicate test value
@@ -40,15 +64,17 @@ export type InputTipFieldProps<T extends ItemType = ItemType> =
      */
     renderItem?: (item: T) => React.ReactNode;
   };
+};
 
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export function InputTipField<T extends ItemType = ItemType>(
-  props: InputTipFieldProps<T>
-) {
+export function InputTipField<
+  T extends ItemType = ItemType,
+  K extends ComponentKey = "input"
+>(props: InputTipFieldProps<T, K>) {
   // Global app
   const app = useAppContext();
 
@@ -58,22 +84,30 @@ export function InputTipField<T extends ItemType = ItemType>(
   const [data, setData] = React.useState<T[]>();
 
   // Destruct
+  const {
+    component = "input",
+    componentProps,
+    changeDelay = 480,
+    onChangeDelay,
+    fullWidth = true,
+    slotProps = {},
+    ...rest
+  } = props;
+
   const {
     labelProps = {
       title: app?.get("clickForDetails"),
       sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     },
-    changeDelay = 480,
-    onChangeDelay,
     loadData,
     itemLabel = (item) => item.label,
-    renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
-    slotProps = {},
-    ...rest
-  } = props;
+    renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>
+  } = componentProps;
 
   const { input, ...slotRests } = slotProps;
 
+  const Component = componentMap[component];
+
   const load = (value: string) => {
     if (value.length < 2) {
       setTitle(undefined);
@@ -99,8 +133,9 @@ export function InputTipField<T extends ItemType = ItemType>(
       >
         {data && <List>{data.map((item) => renderItem(item))}</List>}
       </Popover>
-      <InputField
+      <Component
         changeDelay={changeDelay}
+        fullWidth={fullWidth}
         onChangeDelay={(event) => {
           load(event.target.value);
           if (onChangeDelay) onChangeDelay(event);
@@ -123,7 +158,7 @@ export function InputTipField<T extends ItemType = ItemType>(
           },
           ...slotRests
         }}
-        {...rest}
+        {...(rest as any)}
       />
     </React.Fragment>
   );

package/src/IntInputField.tsx

@@ -75,10 +75,7 @@ export type IntInputFieldProps = Omit<
 /**
  * Integer input field (controlled)
  */
-export const IntInputField = React.forwardRef<
-  HTMLDivElement,
-  IntInputFieldProps
->((props, ref) => {
+export function IntInputField(props: IntInputFieldProps) {
   // Destruct
   const {
     min = 0,
@@ -130,25 +127,20 @@ export const IntInputField = React.forwardRef<
   // Layout
   const layout = (
     <InputField
-      ref={ref}
       type="number"
       value={localValue == null ? (required ? min : "") : localValue}
-      inputProps={{
-        min,
-        step,
-        max,
-        style: inputStyle,
-        inputMode: "numeric"
-      }}
-      InputProps={{
-        startAdornment: symbol ? (
-          <React.Fragment>
-            <InputAdornment position="start">{symbol}</InputAdornment>
-          </React.Fragment>
-        ) : undefined,
-        endAdornment: endSymbol ? (
-          <InputAdornment position="end">{endSymbol}</InputAdornment>
-        ) : undefined
+      slotProps={{
+        input: {
+          startAdornment: symbol ? (
+            <React.Fragment>
+              <InputAdornment position="start">{symbol}</InputAdornment>
+            </React.Fragment>
+          ) : undefined,
+          endAdornment: endSymbol ? (
+            <InputAdornment position="end">{endSymbol}</InputAdornment>
+          ) : undefined
+        },
+        htmlInput: { min, step, max, style: inputStyle, inputMode: "numeric" }
       }}
       sx={
         buttons
@@ -234,4 +226,4 @@ export const IntInputField = React.forwardRef<
       </Box>
     );
   else return layout;
-});
+}

package/src/MobileInput.tsx

@@ -1,11 +1,11 @@
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Mobile input props
  */
-export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+export type MobileInputProps = Omit<InputFieldProps, "type"> & {};
 
 /**
  * Mobile input
@@ -32,7 +32,7 @@ export function MobileInput(props: MobileInputProps) {
 
   // Layout
   return (
-    <TextField
+    <InputField
       type="tel"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}

package/src/MoneyInputField.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IntInputField, IntInputFieldProps } from "./IntInputField";
 
 /**
@@ -9,13 +8,10 @@ export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
  * Money input field (controlled)
  */
-export const MoneyInputField = React.forwardRef<
-  HTMLDivElement,
-  MoneyInputFieldProps
->((props, ref) => {
+export function MoneyInputField(props: MoneyInputFieldProps) {
   // Destruct
   const { step = 0.01, ...rest } = props;
 
   // Layout
-  return <IntInputField ref={ref} step={step} {...rest} />;
-});
+  return <IntInputField step={step} {...rest} />;
+}

package/src/PhoneInput.tsx

@@ -1,11 +1,11 @@
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Phone input props
  */
-export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+export type PhoneInputProps = Omit<InputFieldProps, "type"> & {};
 
 /**
  * Phone input
@@ -32,7 +32,7 @@ export function PhoneInput(props: PhoneInputProps) {
 
   // Layout
   return (
-    <TextField
+    <InputField
       type="tel"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}