@etsoo/materialui 1.4.24 → 1.4.26

package/__tests__/ComboBox.tsx

@@ -1,30 +1,24 @@
-import React from 'react';
-import { ComboBox } from '../src';
-import { fireEvent, render, screen } from '@testing-library/react';
-//import '@testing-library/jest-dom/extend-expect';
+import React from "react";
+import { ComboBox } from "../src";
+import { fireEvent, render, screen } from "@testing-library/react";
 
-it('Render ComboBox', async () => {
-    // Arrange
-    type T = { id: number; name: string };
-    const options: T[] = [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' }
-    ];
+it("Render ComboBox", async () => {
+  // Arrange
+  type T = { id: number; name: string };
+  const options: T[] = [
+    { id: 1, name: "Name 1" },
+    { id: 2, name: "Name 2" }
+  ];
 
-    render(
-        <ComboBox<T>
-            name="Test"
-            options={options}
-            labelField="name"
-            label="Test"
-        />
-    );
+  render(
+    <ComboBox<T> name="Test" options={options} labelField="name" label="Test" />
+  );
 
-    // Act, click the list
-    const clicked = fireEvent.click(screen.getByRole('button'));
-    expect(clicked).toBeTruthy();
+  // Act, click the list
+  const clicked = fireEvent.click(screen.getByRole("button"));
+  expect(clicked).toBeTruthy();
 
-    // Get list item
-    const item = screen.getByText('Name 1');
-    expect(item.nodeName).toBe('LI');
+  // Get list item
+  const item = screen.getByText("Name 1");
+  expect(item.nodeName).toBe("LI");
 });

package/__tests__/CustomFields.tsx

@@ -141,9 +141,9 @@ it("Render FieldSelect", async () => {
 
   act(() => {
     // Act, click to open the dropdown list
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     fireEvent.mouseDown(button);
-    jest.advanceTimersByTime(100);
+    vi.advanceTimersByTime(100);
   });
 
   const input = document.querySelector<HTMLInputElement>("input");

package/__tests__/NotifierMUTests.tsx

@@ -29,11 +29,11 @@ const notifier = NotifierMU.instance;
 
 // Timer mock
 // https://jestjs.io/docs/en/timer-mocks
-jest.useFakeTimers();
+vi.useFakeTimers();
 
 test("Alert tests", async () => {
   // Click
-  const handleClick = jest.fn();
+  const handleClick = vi.fn();
 
   act(() => {
     // Add the notification
@@ -53,12 +53,12 @@ test("Alert tests", async () => {
   expect(handleClick).toHaveBeenCalled();
 
   // Fast forward
-  jest.runOnlyPendingTimers();
+  vi.runOnlyPendingTimers();
 });
 
 test("Confirm tests", async () => {
   // Click
-  const handleClick = jest.fn();
+  const handleClick = vi.fn();
 
   act(() => {
     // Add the notification
@@ -78,12 +78,12 @@ test("Confirm tests", async () => {
   expect(handleClick).toHaveBeenCalled();
 
   // Fast forward
-  jest.runOnlyPendingTimers();
+  vi.runOnlyPendingTimers();
 });
 
 test("Confirm tests without cancel button", async () => {
   // Click
-  const handleClick = jest.fn();
+  const handleClick = vi.fn();
 
   act(() => {
     // Add the notification
@@ -105,12 +105,12 @@ test("Confirm tests without cancel button", async () => {
   expect(handleClick).toHaveBeenCalled();
 
   // Fast forward
-  jest.runOnlyPendingTimers();
+  vi.runOnlyPendingTimers();
 });
 
 test("Prompt tests", async () => {
   // Click
-  const handleClick = jest.fn((result: boolean) => {
+  const handleClick = vi.fn((result: boolean) => {
     expect(result).toBeTruthy();
   });
 
@@ -134,12 +134,12 @@ test("Prompt tests", async () => {
 
   expect(handleClick).toHaveBeenCalled();
 
-  jest.runOnlyPendingTimers();
+  vi.runOnlyPendingTimers();
 });
 
 test("Prompt tests with form submit", async () => {
   // Click
-  const handleClick = jest.fn((result: boolean) => {
+  const handleClick = vi.fn((result: boolean) => {
     expect(result).toBeTruthy();
   });
 
@@ -161,12 +161,12 @@ test("Prompt tests with form submit", async () => {
 
   expect(handleClick).toHaveBeenCalled();
 
-  jest.runOnlyPendingTimers();
+  vi.runOnlyPendingTimers();
 });
 
-test("Message tests", (done) => {
+test("Message tests", () => {
   // Callback
-  const callback = jest.fn(() => done());
+  const callback = vi.fn();
 
   let n: INotification<React.ReactNode, any> | undefined;
   act(() => {
@@ -190,7 +190,7 @@ test("Message tests", (done) => {
     n?.dismiss();
 
     // Fast forward
-    jest.runOnlyPendingTimers();
+    vi.runOnlyPendingTimers();
   });
 
   expect(root.innerHTML).not.toContain("Error Message");
@@ -209,7 +209,7 @@ test("Loading tests", () => {
     notifier.hideLoading();
 
     // Fast forward
-    jest.runOnlyPendingTimers();
+    vi.runOnlyPendingTimers();
   });
 
   expect(root.innerHTML).not.toContain("Loading");

package/__tests__/ReactAppTests.tsx

@@ -107,3 +107,20 @@ test("Test for properties", () => {
 
   expect(root.innerHTML).toContain(result.title);
 });
+
+test("Test for alertResult", () => {
+  const result: IActionResult = {
+    ok: false,
+    type: "TokenExpired",
+    title: "您的令牌已过期",
+    data: {}
+  };
+
+  act(() => {
+    app.alertResult(result);
+  });
+
+  expect(root.innerHTML).toContain(
+    '<span style="font-size: 9px;">(TokenExpired)</span>'
+  );
+});

package/__tests__/ResponsePage.tsx

@@ -2,17 +2,17 @@ import { act, render } from "@testing-library/react";
 import { MUGlobal, MobileListItemRenderer, ResponsivePage } from "../src";
 import React from "react";
 
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn()
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn()
 }));
 
 type Data = { id: number; name: string };
 
 // Timer mock
 // https://jestjs.io/docs/en/timer-mocks
-jest.useFakeTimers();
+vi.useFakeTimers();
 
 // TypeScript const assertions
 const fieldTemplate = {
@@ -29,6 +29,7 @@ it("Render ResponsePage", async () => {
         { field: "id", header: "ID" },
         { field: "name", header: "Name" }
       ]}
+      height={200}
       itemSize={[118, MUGlobal.pagePaddings]}
       fieldTemplate={fieldTemplate}
       loadData={({ id }) =>
@@ -48,7 +49,7 @@ it("Render ResponsePage", async () => {
 
   act(() => {
     // Fast forward
-    jest.runOnlyPendingTimers();
+    vi.runOnlyPendingTimers();
   });
 
   // Assert

package/__tests__/SelectEx.tsx

@@ -13,7 +13,7 @@ it("Render SelectEx", async () => {
 
   Utils.addBlankItem(options, "id", "name");
 
-  const itemChangeCallback = jest.fn((option, userAction) => {
+  const itemChangeCallback = vi.fn((option, userAction) => {
     if (userAction) expect(option).toBeUndefined();
     else expect(option.id).toBe(1);
   });
@@ -37,11 +37,11 @@ it("Render SelectEx", async () => {
 
   // https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
   act(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
 
     fireEvent.mouseDown(button); // Not click
 
-    jest.advanceTimersByTime(100);
+    vi.advanceTimersByTime(100).useRealTimers();
   });
 
   // Get list item
@@ -67,7 +67,7 @@ it("Render multiple SelectEx", async () => {
     { id: "3", label: "Name 3" }
   ];
 
-  const itemChangeCallback = jest.fn((option, userAction) => {
+  const itemChangeCallback = vi.fn((option, userAction) => {
     if (userAction) expect(option.id).toBe("3");
     else expect(option.id).toBe("1");
   });

package/__tests__/SwitchAnt.tsx

@@ -3,7 +3,7 @@ import React, { act } from "react";
 import { SwitchAnt } from "../src/SwitchAnt";
 
 it("SwitchAnt Tests", () => {
-  const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
+  const onChange = vi.fn((event: React.ChangeEvent<HTMLInputElement>) =>
     expect(event.target.checked).toBeTruthy()
   );
 

package/__tests__/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
-    "moduleResolution": "Node10",
+    "moduleResolution": "bundler",
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,7 +13,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "declaration": true
+    "declaration": true,
+    "types": ["vitest/globals"]
   },
   "include": [".."]
 }

package/lib/BackButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconButton, useTheme } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 /**
  * BackButton
  * @param props Props

package/lib/ButtonLink.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 /**
  * ButtonLink
  * @param props Props

package/lib/ComboBoxMultiple.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Keyboard } from "@etsoo/shared";
 import { Autocomplete, Checkbox } from "@mui/material";
 import React from "react";
@@ -20,7 +20,7 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = globalApp?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option[labelField]] }) })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state

package/lib/DataSteps.js

@@ -25,7 +25,7 @@ export function DataSteps(props) {
     // Destruct
     const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", ...rest } = props;
     // Shrink
-    InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // Current index
     const indexRef = React.useRef(-1);
     // Current Json data

package/lib/EmailInput.js

@@ -8,7 +8,7 @@ export function EmailInput(props) {
     // Destruct
     const { inputProps = {}, ...rest } = props;
     // Default max length
-    inputProps.maxLength ?? (inputProps.maxLength = 128);
+    inputProps.maxLength ??= 128;
     // Layout
     return _jsx(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest });
 }

package/lib/GridUtils.js

@@ -79,7 +79,7 @@ export var GridUtils;
     function mergeSearchData(state, searchData) {
         if (searchData == null)
             return;
-        state.data ?? (state.data = {});
+        state.data ??= {};
         Object.assign(state.data, searchData);
     }
     GridUtils.mergeSearchData = mergeSearchData;

package/lib/IconButtonLink.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconButton } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 /**
  * IconButtonLink
  * @param props Props

package/lib/InputField.js

@@ -12,7 +12,7 @@ export const InputField = React.forwardRef((props, ref) => {
     // Destruct
     const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/ListChooser.js

@@ -41,7 +41,7 @@ export function ListChooser(props) {
         return (_jsx(ListItem, { disableGutters: true, secondaryAction: sp.selected ? _jsx(CheckBoxIcon, { fontSize: "small" }) : undefined, children: _jsx(ListItemButton, { ...sp, children: _jsx(ListItemText, { primary: label }) }) }, `${id}`));
     }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
     // Default minimum height
-    rest.sx ?? (rest.sx = { minHeight: "220px" });
+    rest.sx ??= { minHeight: "220px" };
     // State
     const [items, setItems] = React.useState([]);
     // Query request data

package/lib/LoadingButton.js

@@ -9,7 +9,7 @@ export function LoadingButton(props) {
     // Destruct
     const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
     // Default size
-    loadingIconProps.size ?? (loadingIconProps.size = 12);
+    loadingIconProps.size ??= 12;
     // State
     // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
     const [loading, setLoading] = React.useState(false);

package/lib/MUGlobal.js

@@ -1,9 +1,41 @@
 import { NumberUtils } from "@etsoo/shared";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 /**
  * MUGlobal for global configurations
  */
 export class MUGlobal {
+    /**
+     * Search field shrink
+     */
+    static searchFieldShrink = true;
+    /**
+     * Search field size
+     */
+    static searchFieldSize = "small";
+    /**
+     * Search field variant
+     */
+    static searchFieldVariant = "outlined";
+    /**
+     * Input field shrink
+     */
+    static inputFieldShrink = true;
+    /**
+     * Input field size
+     */
+    static inputFieldSize = "medium";
+    /**
+     * Input field variant
+     */
+    static inputFieldVariant = "outlined";
+    /**
+     * TextField variant
+     */
+    static textFieldVariant = "filled";
+    /**
+     * Page default paddings
+     */
+    static pagePaddings = { xs: 2, sm: 3 };
     /**
      * Get menu item props
      * @param path Current path
@@ -104,6 +136,10 @@ export class MUGlobal {
         });
         return newObj;
     }
+    /**
+     * Break points defined
+     */
+    static breakpoints = ["xs", "sm", "md", "lg", "xl"];
     /**
      * Get multple medias theme space
      * Responsive values and Breakpoints as an object
@@ -144,39 +180,3 @@ export class MUGlobal {
         return newObj;
     }
 }
-/**
- * Search field shrink
- */
-MUGlobal.searchFieldShrink = true;
-/**
- * Search field size
- */
-MUGlobal.searchFieldSize = "small";
-/**
- * Search field variant
- */
-MUGlobal.searchFieldVariant = "outlined";
-/**
- * Input field shrink
- */
-MUGlobal.inputFieldShrink = true;
-/**
- * Input field size
- */
-MUGlobal.inputFieldSize = "medium";
-/**
- * Input field variant
- */
-MUGlobal.inputFieldVariant = "outlined";
-/**
- * TextField variant
- */
-MUGlobal.textFieldVariant = "filled";
-/**
- * Page default paddings
- */
-MUGlobal.pagePaddings = { xs: 2, sm: 3 };
-/**
- * Break points defined
- */
-MUGlobal.breakpoints = ["xs", "sm", "md", "lg", "xl"];

package/lib/MaskInput.js

@@ -24,9 +24,9 @@ export function MaskInput(props) {
     });
     const localValue = defaultValue ?? value;
     // Shrink
-    InputLabelProps.shrink ?? (InputLabelProps.shrink = search
+    InputLabelProps.shrink ??= search
         ? MUGlobal.searchFieldShrink
-        : MUGlobal.inputFieldShrink);
+        : MUGlobal.inputFieldShrink;
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/MoreFab.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import React from "react";
 import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 function getActions(input) {
     // Actions
     const actions = [];

package/lib/NotifierMU.js

@@ -39,19 +39,19 @@ export class NotificationMU extends NotificationReact {
         let icon;
         if (this.type === NotificationMessageType.Success) {
             icon = _jsx(Done, { color: "primary" });
-            title ?? (title = labels.success);
+            title ??= labels.success;
         }
         else if (this.type === NotificationMessageType.Info) {
             icon = _jsx(Info, {});
-            title ?? (title = labels.info);
+            title ??= labels.info;
         }
         else if (this.type === NotificationMessageType.Warning) {
             icon = _jsx(Warning, { color: "secondary" });
-            title ?? (title = labels.warning);
+            title ??= labels.warning;
         }
         else {
             icon = _jsx(Error, { color: "error" });
-            title ?? (title = labels.alertTitle);
+            title ??= labels.alertTitle;
         }
         const setupProps = {
             color: "primary"
@@ -247,35 +247,6 @@ export class NotificationMU extends NotificationReact {
  * Antd notifier
  */
 export class NotifierMU extends NotifierReact {
-    constructor() {
-        super(...arguments);
-        /**
-         * Create align container
-         * @param align Align
-         * @param children Children
-         * @param options Other options
-         */
-        this.createContainer = (align, children) => {
-            // Each align group, class equal to something similar to 'align-topleft'
-            const alignText = NotificationAlign[align].toLowerCase();
-            let className = `align-${alignText}`;
-            if (children.length === 0) {
-                return _jsx("div", { className: className }, `empty-${alignText}`);
-            }
-            if (align === NotificationAlign.Unknown) {
-                // div container for style control
-                return (_jsx("div", { className: className, children: children }, `div-${alignText}`));
-            }
-            // Use SnackBar for layout
-            return (_jsx(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === NotificationAlign.Center
-                    ? { position: "fixed", top: "50%!important" }
-                    : undefined, open: true, children: _jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
-                        "& > :not(style) + :not(style)": {
-                            marginTop: (theme) => theme.spacing(1)
-                        }
-                    }, children: children }, `box-${alignText}`) }, `layout-${alignText}`));
-        };
-    }
     /**
      * Create state and return provider
      * @param className Style class name
@@ -283,7 +254,7 @@ export class NotifierMU extends NotifierReact {
      * @returns Provider
      */
     static setup(className, debug = false) {
-        className ?? (className = "notifier-mu");
+        className ??= "notifier-mu";
         // Create an instance
         const instance = new NotifierMU();
         instance.debug = debug;
@@ -334,6 +305,32 @@ export class NotifierMU extends NotifierReact {
             vertical: "top"
         };
     }
+    /**
+     * Create align container
+     * @param align Align
+     * @param children Children
+     * @param options Other options
+     */
+    createContainer = (align, children) => {
+        // Each align group, class equal to something similar to 'align-topleft'
+        const alignText = NotificationAlign[align].toLowerCase();
+        let className = `align-${alignText}`;
+        if (children.length === 0) {
+            return _jsx("div", { className: className }, `empty-${alignText}`);
+        }
+        if (align === NotificationAlign.Unknown) {
+            // div container for style control
+            return (_jsx("div", { className: className, children: children }, `div-${alignText}`));
+        }
+        // Use SnackBar for layout
+        return (_jsx(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === NotificationAlign.Center
+                ? { position: "fixed", top: "50%!important" }
+                : undefined, open: true, children: _jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
+                    "& > :not(style) + :not(style)": {
+                        marginTop: (theme) => theme.spacing(1)
+                    }
+                }, children: children }, `box-${alignText}`) }, `layout-${alignText}`));
+    };
     /**
      * Add raw definition
      * @param data Notification data definition

package/lib/SearchField.js

@@ -12,7 +12,7 @@ export function SearchField(props) {
     // Destruct
     const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/ShowDataComparison.js

@@ -38,10 +38,10 @@ export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true
     }
     // Labels
     const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
-    modelTitle ?? (modelTitle = dataComparison);
-    getLabel ?? (getLabel = (key) => {
+    modelTitle ??= dataComparison;
+    getLabel ??= (key) => {
         return app.get(Utils.formatInitial(key)) ?? key;
-    });
+    };
     const keys = new Set([
         ...Object.keys(data.oldData),
         ...Object.keys(data.newData)

package/lib/TabBox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
 import { Box, Tab, Tabs } from "@mui/material";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 /**
  * Tabs with box
  * @param props Props

package/lib/TextFieldEx.js

@@ -12,7 +12,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     // 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;
     // Shrink
-    InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // State
     const [errorText, updateErrorText] = React.useState();
     const [empty, updateEmpty] = React.useState(true);

package/lib/app/ReactApp.d.ts

@@ -3,7 +3,7 @@ import { INotifier, NotificationReturn } from "@etsoo/notificationbase";
 import { DataTypes, IActionResult } from "@etsoo/shared";
 import React from "react";
 import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from "@etsoo/react";
-import { NavigateFunction, NavigateOptions } from "react-router-dom";
+import { NavigateFunction, NavigateOptions } from "react-router";
 /**
  * React Application Type
  */

package/lib/app/ReactApp.js

@@ -51,6 +51,7 @@ export function ReactAppStateDetector(props) {
  * React application
  */
 export class ReactApp extends CoreApp {
+    static _notifierProvider;
     /**
      * Get notifier provider
      */
@@ -62,6 +63,38 @@ export class ReactApp extends CoreApp {
         ReactApp._notifierProvider = NotifierMU.setup(undefined, debug);
         return NotifierMU.instance;
     }
+    /**
+     * Culture state
+     */
+    cultureState;
+    /**
+     * Page state
+     */
+    pageState;
+    /**
+     * User state
+     */
+    userState = new UserState();
+    /**
+     * Is screen size down 'sm'
+     */
+    smDown;
+    /**
+     * Is screen size up 'md'
+     */
+    mdUp;
+    /**
+     * Navigate function
+     */
+    navigateFunction;
+    /**
+     * Page state dispatch
+     */
+    pageStateDispatch;
+    /**
+     * User state dispatch
+     */
+    userStateDispatch;
     /**
      * Constructor
      * @param settings Settings
@@ -70,10 +103,6 @@ export class ReactApp extends CoreApp {
      */
     constructor(settings, name, debug = false) {
         super(settings, null, ReactApp.createNotifier(debug), new WindowStorage(), name, debug);
-        /**
-         * User state
-         */
-        this.userState = new UserState();
         if (BridgeUtils.host) {
             BridgeUtils.host.onUpdate((app, version) => {
                 this.notifier.message(NotificationMessageType.Success, this.get("updateTip") + `(${[app, version].join(", ")})`, this.get("updateReady"));

package/lib/app/ServiceApp.js

@@ -9,6 +9,18 @@ const coreTokenKey = "core-refresh-token";
  * Use the new acess token and refresh token to login
  */
 export class ServiceApp extends ReactApp {
+    /**
+     * Core endpoint
+     */
+    coreEndpoint;
+    /**
+     * Core system API
+     */
+    coreApi;
+    /**
+     * Core system origin
+     */
+    coreOrigin;
     /**
      * Constructor
      * @param settings Settings
@@ -115,12 +127,12 @@ export class ServiceApp extends ReactApp {
         const { refreshToken } = user;
         this.userLogin(user, refreshToken, dispatch);
         // Core system login
-        core ?? (core = {
+        core ??= {
             refreshToken,
             accessToken: user.token,
             tokenType: user.tokenScheme ?? "Bearer",
             expiresIn: user.seconds
-        });
+        };
         // Cache the core system refresh token
         this.saveCoreToken(core.refreshToken);
         this.exchangeTokenAll(core, coreName);
@@ -138,7 +150,7 @@ export class ServiceApp extends ReactApp {
      */
     async tryLogin(params) {
         // Destruct
-        params ?? (params = {});
+        params ??= {};
         let { onFailure, onSuccess, ...rest } = params;
         if (onFailure == null) {
             onFailure = params.onFailure = () => {

package/lib/custom/CustomFieldWindow.js

@@ -53,7 +53,7 @@ export function CustomFieldWindow(props) {
     return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "hidden", name: inputName, ref: inputRef }), children((customFields, jsonData) => {
                 const collections = {};
                 let data = {};
-                jsonData ?? (jsonData = inputRef?.current?.value);
+                jsonData ??= inputRef?.current?.value;
                 if (jsonData) {
                     const [d, pc] = parseJsonData(jsonData);
                     data = d;

package/lib/pages/DataGridPage.js

@@ -15,7 +15,7 @@ import { GridUtils } from "../GridUtils";
 export function DataGridPage(props) {
     // Destruct
     const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
-    pageProps.paddings ?? (pageProps.paddings = MUGlobal.pagePaddings);
+    pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
         return { ...currentState, ...newState };

package/lib/pages/DataGridPageProps.d.ts

@@ -4,7 +4,7 @@ import type { SearchPageProps } from "./SearchPageProps";
 /**
  * DataGrid page props
  */
-export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & DataGridExProps<T> & {
+export type DataGridPageProps<T extends object, F extends DataTypes.BasicTemplate> = SearchPageProps<T, F> & Omit<DataGridExProps<T>, "loadData"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/lib/pages/FixedListPage.js

@@ -15,7 +15,7 @@ import { GridUtils } from "../GridUtils";
 export function FixedListPage(props) {
     // Destruct
     const { adjustHeight, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
-    pageProps.paddings ?? (pageProps.paddings = MUGlobal.pagePaddings);
+    pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
     const initLoadedRef = React.useRef();

package/lib/pages/ListPage.js

@@ -15,7 +15,7 @@ import { GridUtils } from "../GridUtils";
 export function ListPage(props) {
     // Destruct
     const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
-    pageProps.paddings ?? (pageProps.paddings = MUGlobal.pagePaddings);
+    pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
     const refs = useCombinedRefs(mRef, (ref) => {

package/lib/pages/ResponsivePage.js

@@ -12,7 +12,7 @@ import { OperationMessageContainer } from "../messages/OperationMessageContainer
 export function ResponsivePage(props) {
     // Destruct
     const { pageProps = {}, operationMessageHandler, ...rest } = props;
-    pageProps.paddings ?? (pageProps.paddings = MUGlobal.pagePaddings);
+    pageProps.paddings ??= MUGlobal.pagePaddings;
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
     // State
     const [scrollContainer, setScrollContainer] = React.useState();

package/lib/pages/TablePage.js

@@ -15,7 +15,7 @@ import { GridUtils } from "../GridUtils";
 export function TablePage(props) {
     // Destruct
     const { columns, fields, fieldTemplate, loadData, mRef, sizeReadyMiliseconds = 0, pageProps = {}, cacheKey, cacheMinutes = 15, ...rest } = props;
-    pageProps.paddings ?? (pageProps.paddings = MUGlobal.pagePaddings);
+    pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
     const refs = useCombinedRefs(mRef, (ref) => {

package/lib/pages/UserMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EventWatcher } from "@etsoo/react";
 import { IconButton, Menu } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { UserAvatar } from "../UserAvatar";
 /**
  * Event watcher

package/package.json

@@ -1,28 +1,13 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.24",
+  "version": "1.4.26",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
+  "type": "module",
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "format": "prettier --write src/**/*.{ts,tsx}",
-    "lint": "eslint --ext .ts,.tsx src/",
-    "test": "jest",
-    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
-  },
-  "jest": {
-    "automock": false,
-    "testMatch": [
-      "<rootDir>/__tests__/**/*.{ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.[t|j]sx?$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(@etsoo)/)"
-    ]
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -45,15 +30,15 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/sortable": "^9.0.0",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.66",
-    "@etsoo/notificationbase": "^1.1.53",
-    "@etsoo/react": "^1.7.97",
-    "@etsoo/shared": "^1.2.54",
+    "@etsoo/appscript": "^1.5.68",
+    "@etsoo/notificationbase": "^1.1.54",
+    "@etsoo/react": "^1.8.3",
+    "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.1.8",
     "@mui/material": "^6.1.8",
     "@mui/x-data-grid": "^7.22.3",
@@ -77,9 +62,7 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/runtime-corejs3": "^7.26.0",
-    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.14",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
     "@types/react": "^18.3.12",
@@ -87,10 +70,9 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "typescript": "^5.6.3"
+    "@vitejs/plugin-react": "^4.3.3",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.5"
   }
 }

package/src/BackButton.tsx

@@ -1,7 +1,7 @@
 import { IconButton, IconButtonProps, useTheme } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 /**
  * BackButton props

package/src/ButtonLink.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 /**
  * ButtonLink props
  */

package/src/ComboBoxMultiple.tsx

@@ -111,15 +111,13 @@ export function ComboBoxMultiple<
     disableCloseOnSelect = true,
     renderOption = (props, option, { selected }) => (
       <li {...props}>
-        <>
-          <Checkbox
-            icon={icon}
-            checkedIcon={checkedIcon}
-            style={{ marginRight: 8 }}
-            checked={selected}
-          />
-          {option[labelField]}
-        </>
+        <Checkbox
+          icon={icon}
+          checkedIcon={checkedIcon}
+          style={{ marginRight: 8 }}
+          checked={selected}
+        />
+        {`${option[labelField]}`}
       </li>
     ),
     getOptionLabel = (option: T) => `${option[labelField]}`,

package/src/IconButtonLink.tsx

@@ -1,6 +1,6 @@
 import { IconButton, IconButtonProps } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 /**
  * IconButtonLink props

package/src/MUGlobal.ts

@@ -1,6 +1,6 @@
 import { NumberUtils } from "@etsoo/shared";
 import { Breakpoint, ListItemButtonProps, Theme } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 /**
  * Mouse event handler with data

package/src/MoreFab.tsx

@@ -12,7 +12,7 @@ import {
   PaperProps,
   PopoverOrigin
 } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ListItemReact } from "@etsoo/react";
 
 /**

package/src/TabBox.tsx

@@ -1,7 +1,7 @@
 import { Utils } from "@etsoo/shared";
 import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 /**
  * Tab with box panel props

package/src/app/ReactApp.ts

@@ -35,7 +35,7 @@ import {
   UserCalls,
   UserState
 } from "@etsoo/react";
-import { NavigateFunction, NavigateOptions } from "react-router-dom";
+import { NavigateFunction, NavigateOptions } from "react-router";
 
 /**
  * React Application Type

package/src/pages/DataGridPageProps.ts

@@ -9,7 +9,7 @@ export type DataGridPageProps<
   T extends object,
   F extends DataTypes.BasicTemplate
 > = SearchPageProps<T, F> &
-  DataGridExProps<T> & {
+  Omit<DataGridExProps<T>, "loadData"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height

package/src/pages/UserMenu.tsx

@@ -1,7 +1,7 @@
 import { EventWatcher } from "@etsoo/react";
 import { IconButton, Menu } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { UserAvatar } from "../UserAvatar";
 
 /**

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
-    "target": "ES2020",
+    "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowJs": false,

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    include: ["__tests__/**/*.ts(x)?"]
+  }
+});