@etsoo/materialui 1.3.43 → 1.3.45

package/__tests__/NotifierMUTests.tsx

@@ -1,11 +1,11 @@
 import {
-    INotification,
-    NotificationMessageType
-} from '@etsoo/notificationbase';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { NotifierMU } from '../src';
+  INotification,
+  NotificationMessageType
+} from "@etsoo/notificationbase";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { NotifierMU } from "../src";
 
 // Without it will popup error:
 // The current testing environment is not configured to support act
@@ -13,7 +13,7 @@ import { NotifierMU } from '../src';
 
 // Root
 const root = document.body;
-const container: HTMLElement = document.createElement('div');
+const container: HTMLElement = document.createElement("div");
 root.append(container);
 
 // The state provider
@@ -21,8 +21,8 @@ const Provider = NotifierMU.setup();
 const reactRoot = createRoot(container);
 
 act(() => {
-    // Concorrent renderer needs act block
-    reactRoot.render(<Provider />);
+  // Concorrent renderer needs act block
+  reactRoot.render(<Provider />);
 });
 
 // Notifier
@@ -32,186 +32,186 @@ const notifier = NotifierMU.instance;
 // https://jestjs.io/docs/en/timer-mocks
 jest.useFakeTimers();
 
-test('Alert tests', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Alert tests", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.alert('Alert message', handleClick);
-    });
+  act(() => {
+    // Add the notification
+    notifier.alert("Alert message", handleClick);
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
+  expect(button.length).toBe(1);
+  expect(button[0].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Confirm tests', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Confirm tests", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick);
-    });
+  act(() => {
+    // Add the notification
+    notifier.confirm("Confirm message", undefined, handleClick);
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(2);
-    expect(button[0].innerHTML).toContain('Cancel');
+  expect(button.length).toBe(2);
+  expect(button[0].innerHTML).toContain("Cancel");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Confirm tests without cancel button', async () => {
-    // Click
-    const handleClick = jest.fn();
+test("Confirm tests without cancel button", async () => {
+  // Click
+  const handleClick = jest.fn();
 
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick, {
-            cancelButton: false
-        });
+  act(() => {
+    // Add the notification
+    notifier.confirm("Confirm message", undefined, handleClick, {
+      cancelButton: false
     });
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
+  expect(button.length).toBe(1);
+  expect(button[0].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[0].click();
-    });
+  await act(async () => {
+    button[0].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    // Fast forward
-    jest.runOnlyPendingTimers();
+  // Fast forward
+  jest.runOnlyPendingTimers();
 });
 
-test('Prompt tests', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
+test("Prompt tests", async () => {
+  // Click
+  const handleClick = jest.fn((result: boolean) => {
+    expect(result).toBeTruthy();
+  });
 
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            inputProps: { required: false }
-        });
+  act(() => {
+    // Add the notification
+    notifier.prompt<boolean>("Prompt message", handleClick, undefined, {
+      type: "switch",
+      inputProps: { required: false }
     });
+  });
 
-    // Button
-    const button = root.getElementsByTagName('button');
+  // Button
+  const button = root.getElementsByTagName("button");
 
-    expect(button.length).toBe(2); // Switch will generate a button
-    expect(button[1].innerHTML).toContain('OK');
+  expect(button.length).toBe(2); // Switch will generate a button
+  expect(button[1].innerHTML).toContain("OK");
 
-    await act(async () => {
-        button[1].click();
-    });
+  await act(async () => {
+    button[1].click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    jest.runOnlyPendingTimers();
+  jest.runOnlyPendingTimers();
 });
 
-test('Prompt tests with form submit', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
+test("Prompt tests with form submit", async () => {
+  // Click
+  const handleClick = jest.fn((result: boolean) => {
+    expect(result).toBeTruthy();
+  });
 
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            inputProps: { required: false }
-        });
+  act(() => {
+    // Add the notification
+    notifier.prompt<boolean>("Prompt message", handleClick, undefined, {
+      type: "switch",
+      inputProps: { required: false }
     });
+  });
 
-    await act(async () => {
-        (
-            root
-                .getElementsByTagName('form')[0]
-                .elements.namedItem('okButton') as HTMLButtonElement
-        )?.click();
-    });
+  await act(async () => {
+    (
+      root
+        .getElementsByTagName("form")[0]
+        .elements.namedItem("okButton") as HTMLButtonElement
+    )?.click();
+  });
 
-    expect(handleClick).toBeCalled();
+  expect(handleClick).toHaveBeenCalled();
 
-    jest.runOnlyPendingTimers();
+  jest.runOnlyPendingTimers();
 });
 
-test('Message tests', (done) => {
-    // Callback
-    const callback = jest.fn(() => done());
-
-    let n: INotification<React.ReactNode, any> | undefined;
-    act(() => {
-        // Add the notification
-        n = notifier.message(
-            NotificationMessageType.Danger,
-            'Error Message',
-            undefined,
-            {
-                callback
-            }
-        );
-    });
+test("Message tests", (done) => {
+  // Callback
+  const callback = jest.fn(() => done());
 
-    expect(n?.timespan).toBe(5);
+  let n: INotification<React.ReactNode, any> | undefined;
+  act(() => {
+    // Add the notification
+    n = notifier.message(
+      NotificationMessageType.Danger,
+      "Error Message",
+      undefined,
+      {
+        callback
+      }
+    );
+  });
 
-    expect(root.innerHTML).toContain('Error Message');
+  expect(n?.timespan).toBe(5);
 
-    act(() => {
-        // Here is the bug need further study...
-        n?.dismiss();
+  expect(root.innerHTML).toContain("Error Message");
 
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
+  act(() => {
+    // Here is the bug need further study...
+    n?.dismiss();
 
-    expect(root.innerHTML).not.toContain('Error Message');
-    expect(callback).toBeCalled();
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(root.innerHTML).not.toContain("Error Message");
+  expect(callback).toHaveBeenCalled();
 });
 
-test('Loading tests', () => {
-    act(() => {
-        // Add the notification
-        notifier.showLoading('Loading');
-    });
+test("Loading tests", () => {
+  act(() => {
+    // Add the notification
+    notifier.showLoading("Loading");
+  });
 
-    expect(root.innerHTML).toContain('Loading');
+  expect(root.innerHTML).toContain("Loading");
 
-    act(() => {
-        notifier.hideLoading();
+  act(() => {
+    notifier.hideLoading();
 
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
 
-    expect(root.innerHTML).not.toContain('Loading');
+  expect(root.innerHTML).not.toContain("Loading");
 });

package/__tests__/ResponsePage.tsx

@@ -0,0 +1,48 @@
+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()
+}));
+
+type Data = { id: number; name: string };
+
+// Timer mock
+// https://jestjs.io/docs/en/timer-mocks
+jest.useFakeTimers();
+
+it("Render ResponsePage", async () => {
+  // Act
+  render(
+    <ResponsivePage<Data>
+      fields={[]}
+      columns={[
+        { field: "id", header: "ID" },
+        { field: "name", header: "Name" }
+      ]}
+      itemSize={[118, MUGlobal.pagePaddings]}
+      loadData={(_data) =>
+        Promise.resolve([
+          { id: 1, name: "Name 1" },
+          { id: 2, name: "Name 2" }
+        ])
+      }
+      innerItemRenderer={(props) =>
+        MobileListItemRenderer(props, (data) => {
+          return [data.name, undefined, [], <React.Fragment></React.Fragment>];
+        })
+      }
+    />
+  );
+
+  act(() => {
+    // Fast forward
+    jest.runOnlyPendingTimers();
+  });
+
+  // Assert
+  expect(document.getElementById("page-container")).not.toBeNull();
+});

package/__tests__/SelectEx.tsx

@@ -31,7 +31,7 @@ it("Render SelectEx", async () => {
     />
   );
 
-  expect(itemChangeCallback).toBeCalled();
+  expect(itemChangeCallback).toHaveBeenCalled();
 
   // Act, click to show the list
   const button = screen.getByRole("combobox");
@@ -110,5 +110,5 @@ it("Render multiple SelectEx", async () => {
 
   expect(checkbox3?.checked).toBeTruthy();
 
-  expect(itemChangeCallback).toBeCalledTimes(2);
+  expect(itemChangeCallback).toHaveBeenCalledTimes(2);
 });

package/__tests__/SwitchAnt.tsx

@@ -1,23 +1,23 @@
-import { getByText, render } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { SwitchAnt } from '../src/SwitchAnt';
+import { getByText, render } from "@testing-library/react";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { SwitchAnt } from "../src/SwitchAnt";
 
-it('SwitchAnt Tests', () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
-        expect(event.target.checked).toBeTruthy()
-    );
+it("SwitchAnt Tests", () => {
+  const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
+    expect(event.target.checked).toBeTruthy()
+  );
 
-    // Render component
-    const { baseElement } = render(
-        <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
-    );
+  // Render component
+  const { baseElement } = render(
+    <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
+  );
 
-    const yes = getByText(baseElement, 'Yes');
+  const yes = getByText(baseElement, "Yes");
 
-    act(() => {
-        yes.click();
-    });
+  act(() => {
+    yes.click();
+  });
 
-    expect(onChange).toBeCalled();
+  expect(onChange).toHaveBeenCalled();
 });

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.43",
+  "version": "1.3.45",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
-  "type": "module",
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "tsc",
@@ -51,10 +50,10 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.79",
-    "@etsoo/notificationbase": "^1.1.40",
-    "@etsoo/react": "^1.7.31",
-    "@etsoo/shared": "^1.2.31",
+    "@etsoo/appscript": "^1.4.80",
+    "@etsoo/notificationbase": "^1.1.41",
+    "@etsoo/react": "^1.7.32",
+    "@etsoo/shared": "^1.2.33",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
     "@mui/x-data-grid": "^6.19.6",
@@ -83,13 +82,13 @@
     "@types/jest": "^29.5.12",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.2.61",
+    "@types/react": "^18.2.62",
     "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "^18.2.19",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.3.3"

package/src/pages/ResponsivePageProps.ts

@@ -1,5 +1,5 @@
 import { GridMethodRef } from "@etsoo/react";
-import { DataTypes, IdDefaultType } from "@etsoo/shared";
+import { DataTypes } from "@etsoo/shared";
 import { ListChildComponentProps } from "react-window";
 import {
   ScrollerListExInnerItemRendererProps,