@etsoo/materialui 1.5.80 → 1.5.81

package/.github/workflows/main.yml

@@ -23,13 +23,13 @@ jobs:
     steps:
       # https://github.com/actions/checkout, This action checks-out your repository under $GITHUB_WORKSPACE
       # so your workflow can access it.
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       # Set up your GitHub Actions workflow with a specific version of node.js
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: "20.x"
+          node-version: "24.11"
           registry-url: "https://registry.npmjs.org"
 
       # Named after Continuous Integration, installs dependencies directly from package-lock.json

package/__tests__/ResponsivePage.tsx

@@ -8,12 +8,6 @@ import {
 import React from "react";
 import { GridMethodRef } from "@etsoo/react";
 
-globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn()
-}));
-
 type Data = {
   id: number;
   name: string;

package/lib/cjs/EmailInput.js

@@ -12,7 +12,10 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function EmailInput(props) {
     // Destruct
-    const { slotProps, ...rest } = props;
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, name = "email", ...rest } = props;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", fullWidth: true, slotProps: { htmlInput: { maxLength: 128 }, ...slotProps }, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "email", maxLength: 128 },
+            ...slotProps
+        }, ...rest }));
 }

package/lib/cjs/MobileInput.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * Mobile input props
+ */
+export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+/**
+ * Mobile input
+ * @param props Props
+ */
+export declare function MobileInput(props: MobileInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/MobileInput.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileInput = MobileInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+/**
+ * Mobile input
+ * @param props Props
+ */
+function MobileInput(props) {
+    // Destruct
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, name = "mobile", ...rest } = props;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "tel", maxLength: 18 },
+            ...slotProps
+        }, ...rest }));
+}

package/lib/cjs/PhoneInput.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * Phone input props
+ */
+export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+/**
+ * Phone input
+ * @param props Props
+ */
+export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/PhoneInput.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoInput = PhoInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+/**
+ * Phone input
+ * @param props Props
+ */
+function PhoInput(props) {
+    // Destruct
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, name = "phone", ...rest } = props;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "tel", maxLength: 18 },
+            ...slotProps
+        }, ...rest }));
+}

package/lib/cjs/ShowDataComparison.js

@@ -60,7 +60,7 @@ const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
         newValue: data.newData[field]
     }));
     if (equalCheck)
-        rows = rows.filter((item) => !shared_1.Utils.equals(item.oldValue, item.newValue));
+        rows = rows.filter((item) => !shared_1.DataTypes.isDeepEqual(item.oldValue, item.newValue));
     const inputs = ((0, jsx_runtime_1.jsxs)(Table_1.default, { children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, { children: (0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "18%", children: field }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: oldValue }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: newValue })] }) }), (0, jsx_runtime_1.jsx)(TableBody_1.default, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { children: getLabel(row.field) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.oldValue, app) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
     app.notifier.alert([undefined, modelTitle], undefined, notificationbase_1.NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
 };

package/lib/cjs/index.d.ts

@@ -81,6 +81,7 @@ export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";
+export * from "./MobileInput";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
 export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
+export * from "./PhoneInput";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/cjs/index.js

@@ -97,6 +97,7 @@ __exportStar(require("./ListMultipler"), exports);
 __exportStar(require("./LoadingButton"), exports);
 __exportStar(require("./MaskInput"), exports);
 __exportStar(require("./MenuButton"), exports);
+__exportStar(require("./MobileInput"), exports);
 __exportStar(require("./MobileListItemRenderer"), exports);
 __exportStar(require("./MoneyInputField"), exports);
 __exportStar(require("./MoreFab"), exports);
@@ -110,6 +111,7 @@ __exportStar(require("./OptionGroup"), exports);
 __exportStar(require("./OptionGroupFlag"), exports);
 __exportStar(require("./PercentCircularProgress"), exports);
 __exportStar(require("./PercentLinearProgress"), exports);
+__exportStar(require("./PhoneInput"), exports);
 __exportStar(require("./PList"), exports);
 __exportStar(require("./ProgressCount"), exports);
 __exportStar(require("./PullToRefreshUI"), exports);

package/lib/mjs/EmailInput.js

@@ -6,7 +6,10 @@ import TextField from "@mui/material/TextField";
  */
 export function EmailInput(props) {
     // Destruct
-    const { slotProps, ...rest } = props;
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, name = "email", ...rest } = props;
     // Layout
-    return (_jsx(TextField, { type: "email", fullWidth: true, slotProps: { htmlInput: { maxLength: 128 }, ...slotProps }, ...rest }));
+    return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "email", maxLength: 128 },
+            ...slotProps
+        }, ...rest }));
 }

package/lib/mjs/MobileInput.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * Mobile input props
+ */
+export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+/**
+ * Mobile input
+ * @param props Props
+ */
+export declare function MobileInput(props: MobileInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/MobileInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextField from "@mui/material/TextField";
+/**
+ * Mobile input
+ * @param props Props
+ */
+export function MobileInput(props) {
+    // Destruct
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, name = "mobile", ...rest } = props;
+    // Layout
+    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "tel", maxLength: 18 },
+            ...slotProps
+        }, ...rest }));
+}

package/lib/mjs/PhoneInput.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * Phone input props
+ */
+export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+/**
+ * Phone input
+ * @param props Props
+ */
+export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/PhoneInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextField from "@mui/material/TextField";
+/**
+ * Phone input
+ * @param props Props
+ */
+export function PhoInput(props) {
+    // Destruct
+    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, name = "phone", ...rest } = props;
+    // Layout
+    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, name: name, slotProps: {
+            htmlInput: { inputMode: "tel", maxLength: 18 },
+            ...slotProps
+        }, ...rest }));
+}

package/lib/mjs/ShowDataComparison.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NotificationMessageType } from "@etsoo/notificationbase";
-import { Utils } from "@etsoo/shared";
+import { DataTypes, Utils } from "@etsoo/shared";
 import { useRequiredAppContext } from "./app/ReactApp";
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
@@ -53,7 +53,7 @@ export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true
         newValue: data.newData[field]
     }));
     if (equalCheck)
-        rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
+        rows = rows.filter((item) => !DataTypes.isDeepEqual(item.oldValue, item.newValue));
     const inputs = (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { width: "18%", children: field }), _jsx(TableCell, { width: "41%", align: "right", children: oldValue }), _jsx(TableCell, { width: "41%", align: "right", children: newValue })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getLabel(row.field) }), _jsx(TableCell, { align: "right", children: formatValue(row.oldValue, app) }), _jsx(TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
     app.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
 };

package/lib/mjs/index.d.ts

@@ -81,6 +81,7 @@ export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";
+export * from "./MobileInput";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
 export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
+export * from "./PhoneInput";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/mjs/index.js

@@ -81,6 +81,7 @@ export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";
+export * from "./MobileInput";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
@@ -94,6 +95,7 @@ export * from "./OptionGroup";
 export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
+export * from "./PhoneInput";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.80",
+  "version": "1.5.81",
   "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.45",
-    "@etsoo/notificationbase": "^1.1.64",
-    "@etsoo/react": "^1.8.60",
-    "@etsoo/shared": "^1.2.76",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
-    "@mui/x-data-grid": "^8.14.1",
+    "@etsoo/appscript": "^1.6.47",
+    "@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.16.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.0",
@@ -55,7 +55,7 @@
     "pulltorefreshjs": "^0.1.22",
     "react": "^19.2.0",
     "react-avatar-editor": "^13.0.2",
-    "react-chartjs-2": "^5.3.0",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.0",
     "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
@@ -67,11 +67,11 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.4",
-    "@babel/plugin-transform-runtime": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime-corejs3": "^7.28.4",
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
@@ -80,9 +80,9 @@
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^19.2.2",
     "@types/react-input-mask": "^3.0.6",
-    "@vitejs/plugin-react": "^5.0.4",
-    "jsdom": "^27.0.1",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.1.0",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.7"
   }
 }

package/setupTests.ts

@@ -1,26 +1,10 @@
+import { MockResizeObserver, NodeStorage } from "@etsoo/shared";
 import { vi } from "vitest";
 
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
-vi.mock("localStorage", () => {
-  let store = {} as Storage;
-  return {
-    default: {
-      getItem(key: string) {
-        return store[key];
-      },
+// Stub the global ResizeObserver
+vi.stubGlobal("ResizeObserver", MockResizeObserver);
 
-      setItem(key: string, value: string) {
-        store[key] = value;
-      },
-
-      removeItem(key: string) {
-        delete store[key];
-      },
-
-      clear() {
-        store = {} as Storage;
-      }
-    }
-  };
-});
+// Mock localStorage
+vi.mock("localStorage", () => new NodeStorage());

package/src/EmailInput.tsx

@@ -11,14 +11,29 @@ export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
  */
 export function EmailInput(props: EmailInputProps) {
   // Destruct
-  const { slotProps, ...rest } = props;
+  const {
+    slotProps,
+    autoCapitalize = "none",
+    autoCorrect = "off",
+    autoComplete = "email",
+    fullWidth = true,
+    name = "email",
+    ...rest
+  } = props;
 
   // Layout
   return (
     <TextField
       type="email"
-      fullWidth
-      slotProps={{ htmlInput: { maxLength: 128 }, ...slotProps }}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoComplete={autoComplete}
+      fullWidth={fullWidth}
+      name={name}
+      slotProps={{
+        htmlInput: { inputMode: "email", maxLength: 128 },
+        ...slotProps
+      }}
       {...rest}
     />
   );

package/src/MobileInput.tsx

@@ -0,0 +1,40 @@
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+
+/**
+ * Mobile input props
+ */
+export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+
+/**
+ * Mobile input
+ * @param props Props
+ */
+export function MobileInput(props: MobileInputProps) {
+  // Destruct
+  const {
+    slotProps,
+    autoCapitalize = "none",
+    autoCorrect = "off",
+    autoComplete = "mobile",
+    fullWidth = true,
+    name = "mobile",
+    ...rest
+  } = props;
+
+  // Layout
+  return (
+    <TextField
+      type="tel"
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoComplete={autoComplete}
+      fullWidth={fullWidth}
+      name={name}
+      slotProps={{
+        htmlInput: { inputMode: "tel", maxLength: 18 },
+        ...slotProps
+      }}
+      {...rest}
+    />
+  );
+}

package/src/PhoneInput.tsx

@@ -0,0 +1,40 @@
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+
+/**
+ * Phone input props
+ */
+export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+
+/**
+ * Phone input
+ * @param props Props
+ */
+export function PhoInput(props: PhoneInputProps) {
+  // Destruct
+  const {
+    slotProps,
+    autoCapitalize = "none",
+    autoCorrect = "off",
+    autoComplete = "phone",
+    fullWidth = true,
+    name = "phone",
+    ...rest
+  } = props;
+
+  // Layout
+  return (
+    <TextField
+      type="tel"
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoComplete={autoComplete}
+      fullWidth={fullWidth}
+      name={name}
+      slotProps={{
+        htmlInput: { inputMode: "tel", maxLength: 18 },
+        ...slotProps
+      }}
+      {...rest}
+    />
+  );
+}

package/src/ShowDataComparison.tsx

@@ -1,6 +1,6 @@
 import { AuditLineChangesDto, IApp } from "@etsoo/appscript";
 import { NotificationMessageType } from "@etsoo/notificationbase";
-import { Utils } from "@etsoo/shared";
+import { DataTypes, Utils } from "@etsoo/shared";
 import { useRequiredAppContext } from "./app/ReactApp";
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
@@ -71,7 +71,9 @@ export const ShowDataComparison = (
   }));
 
   if (equalCheck)
-    rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
+    rows = rows.filter(
+      (item) => !DataTypes.isDeepEqual(item.oldValue, item.newValue)
+    );
 
   const inputs = (
     <Table>

package/src/index.ts

@@ -87,6 +87,7 @@ export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";
+export * from "./MobileInput";
 export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
@@ -100,6 +101,7 @@ export * from "./OptionGroup";
 export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
+export * from "./PhoneInput";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";