@etsoo/materialui 1.4.26 → 1.4.28

package/__tests__/ComboBox.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComboBox } from "../src";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 
 it("Render ComboBox", async () => {
   // Arrange
@@ -10,13 +10,22 @@ it("Render ComboBox", async () => {
     { id: 2, name: "Name 2" }
   ];
 
-  render(
-    <ComboBox<T> name="Test" options={options} labelField="name" label="Test" />
-  );
+  act(() => {
+    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(() => {
+    const clicked = fireEvent.click(screen.getByRole("button"));
+    expect(clicked).toBeTruthy();
+  });
 
   // Get list item
   const item = screen.getByText("Name 1");

package/__tests__/ResponsePage.tsx

@@ -21,33 +21,38 @@ const fieldTemplate = {
 } as const;
 
 it("Render ResponsePage", async () => {
-  // Act
-  render(
-    <ResponsivePage<Data, typeof fieldTemplate>
-      fields={[]}
-      columns={[
-        { field: "id", header: "ID" },
-        { field: "name", header: "Name" }
-      ]}
-      height={200}
-      itemSize={[118, MUGlobal.pagePaddings]}
-      fieldTemplate={fieldTemplate}
-      loadData={({ id }) =>
-        Promise.resolve([
-          { id: 1, name: "Name 1" },
-          { id: 2, name: "Name 2" },
-          { id: id ?? 0, name: "auto" }
-        ])
-      }
-      innerItemRenderer={(props) =>
-        MobileListItemRenderer(props, (data) => {
-          return [data.name, undefined, [], <React.Fragment></React.Fragment>];
-        })
-      }
-    />
-  );
-
   act(() => {
+    // Act
+    render(
+      <ResponsivePage<Data, typeof fieldTemplate>
+        fields={[]}
+        columns={[
+          { field: "id", header: "ID" },
+          { field: "name", header: "Name" }
+        ]}
+        height={200}
+        itemSize={[118, MUGlobal.pagePaddings]}
+        fieldTemplate={fieldTemplate}
+        loadData={({ id }) =>
+          Promise.resolve([
+            { id: 1, name: "Name 1" },
+            { id: 2, name: "Name 2" },
+            { id: id ?? 0, name: "auto" }
+          ])
+        }
+        innerItemRenderer={(props) =>
+          MobileListItemRenderer(props, (data) => {
+            return [
+              data.name,
+              undefined,
+              [],
+              <React.Fragment></React.Fragment>
+            ];
+          })
+        }
+      />
+    );
+
     // Fast forward
     vi.runOnlyPendingTimers();
   });

package/__tests__/SelectEx.tsx

@@ -1,6 +1,6 @@
 import React, { act } from "react";
 import { SelectEx } from "../src";
-import { findByText, fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { ListType1, Utils } from "@etsoo/shared";
 
 it("Render SelectEx", async () => {
@@ -19,16 +19,18 @@ it("Render SelectEx", async () => {
   });
 
   // Render component
-  const { findByText } = render(
-    <SelectEx<T>
-      options={options}
-      name="test"
-      onItemChange={itemChangeCallback}
-      value={1}
-      search
-      labelField="name"
-    />
-  );
+  act(() => {
+    render(
+      <SelectEx<T>
+        options={options}
+        name="test"
+        onItemChange={itemChangeCallback}
+        value={1}
+        search
+        labelField="name"
+      />
+    );
+  });
 
   expect(itemChangeCallback).toHaveBeenCalled();
 
@@ -45,10 +47,10 @@ it("Render SelectEx", async () => {
   });
 
   // Get list item
-  const itemName2 = await findByText("Name 2");
+  const itemName2 = await screen.findByText("Name 2");
   expect(itemName2.nodeName).toBe("SPAN");
 
-  const itemBlank = await findByText("---");
+  const itemBlank = await screen.findByText("---");
   expect(itemBlank.nodeName).toBe("SPAN");
 
   act(() => {
@@ -90,12 +92,12 @@ it("Render multiple SelectEx", async () => {
   fireEvent.mouseDown(button); // Not click
 
   // Get list item
-  const itemName1 = await findByText(baseElement, "Name 1");
+  const itemName1 = await screen.findByText("Name 1");
   const checkbox1 = itemName1.closest("li")?.querySelector("input");
 
   expect(checkbox1?.checked).toBeTruthy();
 
-  const itemName3 = await findByText(baseElement, "Name 3");
+  const itemName3 = await screen.findByText("Name 3");
   expect(itemName3.nodeName).toBe("SPAN");
 
   // Checkbox

package/__tests__/SwitchAnt.tsx

@@ -1,4 +1,4 @@
-import { getByText, render } from "@testing-library/react";
+import { screen, render } from "@testing-library/react";
 import React, { act } from "react";
 import { SwitchAnt } from "../src/SwitchAnt";
 
@@ -8,11 +8,11 @@ it("SwitchAnt Tests", () => {
   );
 
   // Render component
-  const { baseElement } = render(
-    <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
-  );
+  act(() => {
+    render(<SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />);
+  });
 
-  const yes = getByText(baseElement, "Yes");
+  const yes = screen.getByText("Yes");
 
   act(() => {
     yes.click();

package/lib/UserAvatarEditor.d.ts

@@ -30,6 +30,10 @@ export interface UserAvatarEditorProps {
      * On done handler
      */
     onDone: UserAvatarEditorOnDoneHandler;
+    /**
+     * Select file label
+     */
+    selectFileLabel?: string;
     /**
      * Return scaled result?
      */

package/lib/UserAvatarEditor.js

@@ -4,7 +4,7 @@ import React from "react";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
-import ComputerIcon from "@mui/icons-material/Computer";
+import ImageIcon from "@mui/icons-material/Image";
 import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
@@ -22,14 +22,14 @@ const defaultState = {
  * @returns Component
  */
 export function UserAvatarEditor(props) {
+    // Labels
+    const labels = Labels.UserAvatarEditor;
     // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1] } = props;
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = defaultSize, height = defaultSize, range = [0.1, 2, 0.1], selectFileLabel = labels.selectFile + "..." } = props;
     // Container width
     const containerWidth = width + 2 * border + 44 + 4;
     // Calculated max width
     const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
-    // Labels
-    const labels = Labels.UserAvatarEditor;
     // Ref
     const ref = React.createRef();
     // Image type
@@ -144,5 +144,5 @@ export function UserAvatarEditor(props) {
     };
     // Load the component
     const AE = React.lazy(() => import("react-avatar-editor"));
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/app/Labels.d.ts

@@ -45,7 +45,7 @@ export declare namespace Labels {
         reset: string;
         rotateLeft: string;
         rotateRight: string;
-        upload: string;
+        selectFile: string;
         zoom: string;
     };
     /**

package/lib/app/Labels.js

@@ -46,7 +46,7 @@ export var Labels;
         reset: "Reset",
         rotateLeft: "Rotate left 90°",
         rotateRight: "Rotate right 90°",
-        upload: "Upload",
+        selectFile: "Select file",
         zoom: "Zoom"
     };
     /**

package/lib/app/ServiceApp.d.ts

@@ -32,8 +32,9 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     constructor(settings: S, name: string, debug?: boolean);
     /**
      * Load core system UI
+     * @param tryLogin Try login or not
      */
-    loadCore(): void;
+    loadCore(tryLogin?: boolean): void;
     /**
      * Go to the login page
      * @param data Login parameters

package/lib/app/ServiceApp.js

@@ -2,6 +2,7 @@ import { AuthApi, BridgeUtils } from "@etsoo/appscript";
 import { ReactApp } from "./ReactApp";
 const coreName = "core";
 const coreTokenKey = "core-refresh-token";
+const tryLoginKey = "tryLogin";
 /**
  * Core Service App
  * Service login to core system, get the refesh token and access token
@@ -39,13 +40,20 @@ export class ServiceApp extends ReactApp {
     }
     /**
      * Load core system UI
+     * @param tryLogin Try login or not
      */
-    loadCore() {
+    loadCore(tryLogin = false) {
         if (BridgeUtils.host == null) {
-            globalThis.location.href = this.coreEndpoint.webUrl;
+            let url = this.coreEndpoint.webUrl;
+            if (!tryLogin)
+                url = url.addUrlParam(tryLoginKey, tryLogin);
+            globalThis.location.href = url;
         }
         else {
-            BridgeUtils.host.loadApp(coreName);
+            const startUrl = tryLogin
+                ? undefined
+                : "".addUrlParam(tryLoginKey, tryLogin);
+            BridgeUtils.host.loadApp(coreName, startUrl);
         }
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.26",
+  "version": "1.4.28",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,7 +35,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@etsoo/appscript": "^1.5.68",
+    "@etsoo/appscript": "^1.5.70",
     "@etsoo/notificationbase": "^1.1.54",
     "@etsoo/react": "^1.8.3",
     "@etsoo/shared": "^1.2.55",
@@ -70,9 +70,9 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.5"
+    "vitest": "^2.1.6"
   }
 }

package/src/UserAvatarEditor.tsx

@@ -11,7 +11,7 @@ import type AvatarEditor from "react-avatar-editor";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
-import ComputerIcon from "@mui/icons-material/Computer";
+import ImageIcon from "@mui/icons-material/Image";
 import DoneIcon from "@mui/icons-material/Done";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
@@ -67,6 +67,11 @@ export interface UserAvatarEditorProps {
    */
   onDone: UserAvatarEditorOnDoneHandler;
 
+  /**
+   * Select file label
+   */
+  selectFileLabel?: string;
+
   /**
    * Return scaled result?
    */
@@ -105,6 +110,9 @@ const defaultState: EditorState = {
  * @returns Component
  */
 export function UserAvatarEditor(props: UserAvatarEditorProps) {
+  // Labels
+  const labels = Labels.UserAvatarEditor;
+
   // Destruct
   const {
     border = 30,
@@ -114,7 +122,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     scaledResult = false,
     width = defaultSize,
     height = defaultSize,
-    range = [0.1, 2, 0.1]
+    range = [0.1, 2, 0.1],
+    selectFileLabel = labels.selectFile + "..."
   } = props;
 
   // Container width
@@ -124,9 +133,6 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   const maxWidthCalculated =
     maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
 
-  // Labels
-  const labels = Labels.UserAvatarEditor;
-
   // Ref
   const ref = React.createRef<AvatarEditor>();
 
@@ -280,12 +286,12 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
       <FileUploadButton
         variant="outlined"
         size="medium"
-        startIcon={<ComputerIcon />}
+        startIcon={<ImageIcon />}
         fullWidth
         onUploadFiles={handleFileUpload}
         inputProps={{ multiple: false, accept: "image/png, image/jpeg" }}
       >
-        {labels.upload}
+        {selectFileLabel}
       </FileUploadButton>
       <Stack direction="row" spacing={0.5}>
         <React.Suspense

package/src/app/Labels.ts

@@ -48,7 +48,7 @@ export namespace Labels {
     reset: "Reset",
     rotateLeft: "Rotate left 90°",
     rotateRight: "Rotate right 90°",
-    upload: "Upload",
+    selectFile: "Select file",
     zoom: "Zoom"
   };
 

package/src/app/ServiceApp.ts

@@ -15,6 +15,7 @@ import { ReactApp } from "./ReactApp";
 
 const coreName = "core";
 const coreTokenKey = "core-refresh-token";
+const tryLoginKey = "tryLogin";
 
 /**
  * Core Service App
@@ -65,12 +66,18 @@ export class ServiceApp<
 
   /**
    * Load core system UI
+   * @param tryLogin Try login or not
    */
-  loadCore() {
+  loadCore(tryLogin: boolean = false) {
     if (BridgeUtils.host == null) {
-      globalThis.location.href = this.coreEndpoint.webUrl;
+      let url = this.coreEndpoint.webUrl;
+      if (!tryLogin) url = url.addUrlParam(tryLoginKey, tryLogin);
+      globalThis.location.href = url;
     } else {
-      BridgeUtils.host.loadApp(coreName);
+      const startUrl = tryLogin
+        ? undefined
+        : "".addUrlParam(tryLoginKey, tryLogin);
+      BridgeUtils.host.loadApp(coreName, startUrl);
     }
   }