@etsoo/materialui 1.4.4 → 1.4.6

package/lib/pages/ViewPage.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ScrollRestoration } from "@etsoo/react";
 import { DateUtils, Utils } from "@etsoo/shared";
-import { Grid, LinearProgress, Stack, Typography } from "@mui/material";
+import { Grid2, LinearProgress, Stack, Typography } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
 import { globalApp } from "../app/ReactApp";
@@ -22,14 +22,14 @@ export function ViewPageGridItem(props) {
     const { data, label, singleRow, ...gridProps } = props;
     // Default options
     let options = {};
-    if (gridProps.xs == null && gridProps.md == null) {
+    if (gridProps.size == null) {
         options = getResp(singleRow ?? "small");
     }
     else if (singleRow != null) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return (_jsxs(Grid, { item: true, ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+    return (_jsxs(Grid2, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
 function formatItemData(fieldData) {
     if (fieldData == null)
@@ -43,7 +43,7 @@ function formatItemData(fieldData) {
     return `${fieldData}`;
 }
 function getResp(singleRow) {
-    return typeof singleRow === "object"
+    const size = typeof singleRow === "object"
         ? singleRow
         : singleRow === "medium"
             ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
@@ -56,6 +56,7 @@ function getResp(singleRow) {
                     lg: 3,
                     xl: 2
                 };
+    return { size };
 }
 function getItemField(field, data) {
     // Item data and label
@@ -129,7 +130,7 @@ export function ViewPage(props) {
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
+                        : operationMessageHandler })), _jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
                         ".MuiTypography-subtitle2": {
                             fontWeight: "bold"
                         }
@@ -144,7 +145,7 @@ export function ViewPage(props) {
                         if (itemData == null || itemData === "")
                             return undefined;
                         // Layout
-                        return (_createElement(ViewPageGridItem, { item: true, ...gridProps, key: index, data: itemData, label: itemLabel }));
+                        return (_createElement(ViewPageGridItem, { ...gridProps, key: index, data: itemData, label: itemLabel }));
                     }) }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,14 +50,14 @@
     "@emotion/css": "^11.13.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@etsoo/appscript": "^1.5.39",
+    "@etsoo/appscript": "^1.5.47",
     "@etsoo/notificationbase": "^1.1.49",
-    "@etsoo/react": "^1.7.75",
+    "@etsoo/react": "^1.7.80",
     "@etsoo/shared": "^1.2.48",
-    "@mui/icons-material": "^6.1.3",
-    "@mui/material": "^6.1.3",
+    "@mui/icons-material": "^6.1.4",
+    "@mui/material": "^6.1.4",
     "@mui/x-data-grid": "^7.20.0",
-    "chart.js": "^4.4.4",
+    "chart.js": "^4.4.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
@@ -87,8 +87,8 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.6.3"

package/src/AddresSelector.tsx

@@ -5,12 +5,12 @@ import {
   AddressRegionDb,
   AddressState
 } from "@etsoo/appscript";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Address field
@@ -48,7 +48,7 @@ export type AddressSelectorProps = {
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * City
@@ -287,17 +287,17 @@ export function AddressSelector(props: AddressSelectorProps) {
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       {!hideRegion && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<AddressRegionDb>
             label={regionLabel}
             name={AddressField.Region}
@@ -322,9 +322,9 @@ export function AddressSelector(props: AddressSelectorProps) {
               handleChange([AddressField.Region, value])
             }
           />
-        </Grid>
+        </Grid2>
       )}
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -339,8 +339,8 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.State, value])
           }
         />
-      </Grid>
-      <Grid item {...breakPoints}>
+      </Grid2>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -350,8 +350,8 @@ export function AddressSelector(props: AddressSelectorProps) {
           options={cities}
           onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
-      </Grid>
-      <Grid item {...breakPoints}>
+      </Grid2>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressDistrict>
           name={AddressField.District}
           label={districtLabel}
@@ -363,7 +363,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.District, value])
           }
         />
-      </Grid>
+      </Grid2>
     </React.Fragment>
   );
 }

package/src/HiSelector.tsx

@@ -1,8 +1,8 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { FormLabel, Grid, SelectChangeEvent } from "@mui/material";
+import { FormLabel, Grid2, GridSize, SelectChangeEvent } from "@mui/material";
 import React from "react";
 import { SelectEx } from "./SelectEx";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Hierarchy selector props
@@ -15,7 +15,7 @@ export type HiSelectorProps<
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * Id field
@@ -161,17 +161,17 @@ export function HiSelector<
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <SelectEx<T, D, L>
           idField={idField}
           label={labels[0]}
@@ -188,9 +188,9 @@ export function HiSelector<
           helperText={helperText}
           variant={variant}
         />
-      </Grid>
+      </Grid2>
       {localValues[0] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[0]}`}
             idField={idField}
@@ -205,10 +205,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[1] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[1]}`}
             idField={idField}
@@ -223,10 +223,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[2] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[2]}`}
             idField={idField}
@@ -241,7 +241,7 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
     </React.Fragment>
   );

package/src/HiSelectorTL.tsx

@@ -3,11 +3,12 @@ import {
   AutocompleteChangeReason,
   AutocompleteValue,
   FormLabel,
-  Grid
+  Grid2,
+  GridSize
 } from "@mui/material";
 import React from "react";
 import { Tiplist } from "./Tiplist";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Hierarchy tiplist selector props
@@ -19,7 +20,7 @@ export type HiSelectorTLProps<
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * Id field
@@ -154,17 +155,17 @@ export function HiSelectorTL<
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <Tiplist<T, D>
           idField={idField}
           label={labels[0]}
@@ -178,9 +179,9 @@ export function HiSelectorTL<
           inputHelperText={helperText}
           onChange={(event, value, reason) => doChange(0, event, value, reason)}
         />
-      </Grid>
+      </Grid2>
       {localValues[0] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[0]}`}
             label={labels[1]}
@@ -196,10 +197,10 @@ export function HiSelectorTL<
               doChange(1, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[1] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[1]}`}
             label={labels[2]}
@@ -215,10 +216,10 @@ export function HiSelectorTL<
               doChange(2, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[2] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[2]}`}
             label={labels[3]}
@@ -234,7 +235,7 @@ export function HiSelectorTL<
               doChange(3, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
     </React.Fragment>
   );

package/src/ResponsiveStyleValue.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from "@mui/material";
+
+/**
+ * Responsive style value
+ */
+export type ResponsiveStyleValue<T> =
+  | T
+  | Array<T | null>
+  | {
+      [key in Breakpoint]?: T | null;
+    };

package/src/app/CommonApp.ts

@@ -1,14 +1,6 @@
-import {
-  IApiPayload,
-  IAppSettings,
-  IUser,
-  RefreshTokenProps,
-  RefreshTokenResult,
-  RefreshTokenRQ
-} from "@etsoo/appscript";
+import { AppLoginParams, IAppSettings, IUser } from "@etsoo/appscript";
 import { CoreConstants, IPageData } from "@etsoo/react";
 import { ReactApp } from "./ReactApp";
-import { IActionResult } from "@etsoo/shared";
 
 /**
  * Common independent application
@@ -36,102 +28,27 @@ export abstract class CommonApp<
     return fields;
   }
 
-  /**
-   * Refresh token
-   * @param props Props
-   */
-  override async refreshToken(props?: RefreshTokenProps) {
-    // Destruct
-    const { callback, showLoading = false } = props ?? {};
-
-    // Token
-    const token = this.getCacheToken();
-    if (token == null || token === "") {
-      if (callback) callback(false);
-      return false;
-    }
-
-    // Reqest data
-    const rq: RefreshTokenRQ = {
-      deviceId: this.deviceId
-    };
-
-    // Login result type
-    type LoginResult = IActionResult<U>;
-
-    // Payload
-    const payload: IApiPayload<LoginResult, any> = {
-      // No loading bar needed to avoid screen flicks
-      showLoading,
-      config: { headers: { [CoreConstants.TokenHeaderRefresh]: token } },
-      onError: (error) => {
-        if (callback) callback(error);
-
-        // Prevent further processing
-        return false;
-      }
-    };
-
-    // Success callback
-    const success = (
-      result: LoginResult,
-      failCallback?: (result: RefreshTokenResult) => void
-    ) => {
-      // Token
-      const refreshToken = this.getResponseToken(payload.response);
-      if (refreshToken == null || result.data == null) {
-        if (failCallback) failCallback(this.get("noData")!);
-        return false;
-      }
-
-      // Keep
-      const keep = this.storage.getData(CoreConstants.FieldLoginKeep, false);
-
-      // User login
-      this.userLogin(result.data, refreshToken, keep);
-
-      // Callback
-      if (failCallback) failCallback(true);
-
-      return true;
-    };
-
-    // Call API
-    const result = await this.api.put<LoginResult>(
-      "Auth/RefreshToken",
-      rq,
-      payload
-    );
-
-    if (result == null) return false;
-
-    if (!result.ok) {
-      // Remove the wrong token
-      this.clearCacheToken();
-
-      // Callback
-      if (callback) callback(result);
-
-      return false;
-    }
-
-    return success(result, callback);
-  }
-
   /**
    * Try login
    * @param showLoading Show loading bar or not
    * @returns Result
    */
-  override async tryLogin(showLoading?: boolean) {
-    // Reset user state
-    const result = await super.tryLogin(showLoading);
-    if (!result) return false;
+  override async tryLogin(params?: AppLoginParams) {
+    // Check status
+    if (this.isTryingLogin) return;
+    this.isTryingLogin = true;
 
     // Refresh token
-    return await this.refreshToken({
-      callback: (result) => this.doRefreshTokenResult(result),
-      showLoading
-    });
+    await this.refreshToken(
+      {
+        showLoading: params?.showLoading
+      },
+      (result) => {
+        if (result) {
+        } else {
+          this.toLoginPage(params);
+        }
+      }
+    );
   }
 }

package/src/app/ReactApp.ts

@@ -494,17 +494,11 @@ export class ReactApp<
    * User login extended
    * @param user New user
    * @param refreshToken Refresh token
-   * @param keep Keep in local storage or not
    * @param dispatch User state dispatch
    */
-  override userLogin(
-    user: D,
-    refreshToken: string,
-    keep?: boolean,
-    dispatch?: boolean
-  ): void {
+  override userLogin(user: D, refreshToken: string, dispatch?: boolean): void {
     // Super call, set token
-    super.userLogin(user, refreshToken, keep);
+    super.userLogin(user, refreshToken);
 
     // Dispatch action
     if (this.userStateDispatch != null && dispatch !== false)

package/src/app/ServiceApp.ts

@@ -1,5 +1,6 @@
 import {
   ApiRefreshTokenDto,
+  AppLoginParams,
   AuthApi,
   BridgeUtils,
   ExternalEndpoint,
@@ -12,6 +13,7 @@ import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { ReactApp } from "./ReactApp";
 
 const coreName = "core";
+const coreTokenKey = "core-refresh-token";
 
 /**
  * Core Service App
@@ -73,10 +75,12 @@ export class ServiceApp<
 
   /**
    * Go to the login page
-   * @param tryLogin Try to login again
-   * @param removeUrl Remove current URL for reuse
+   * @params Login parameters
    */
-  override toLoginPage(tryLogin?: boolean, removeUrl?: boolean) {
+  override toLoginPage(params?: AppLoginParams) {
+    // Destruct
+    const { removeUrl, showLoading, ...rest } = params ?? {};
+
     // Cache current URL
     this.cachedUrl = removeUrl ? undefined : globalThis.location.href;
 
@@ -90,7 +94,7 @@ export class ServiceApp<
         if (!url) return;
 
         // Add try login flag
-        url = url.addUrlParam("tryLogin", tryLogin ?? false);
+        url = url.addUrlParams(rest);
 
         // Is it embeded?
         if (this.embedded) {
@@ -112,15 +116,9 @@ export class ServiceApp<
    * User login extended
    * @param user New user
    * @param refreshToken Refresh token
-   * @param keep Keep in local storage or not
    * @param dispatch User state dispatch
    */
-  override userLogin(
-    user: U,
-    refreshToken: string,
-    keep?: boolean,
-    dispatch?: boolean
-  ): void {
+  override userLogin(user: U, refreshToken: string, dispatch?: boolean): void {
     if (user.clientDeviceId && user.passphrase) {
       // Save the passphrase
       // Interpolated string expressions are different between TypeScript and C# for the null value
@@ -135,7 +133,7 @@ export class ServiceApp<
     }
 
     // Super call, set token
-    super.userLogin(user, refreshToken, keep, dispatch);
+    super.userLogin(user, refreshToken, dispatch);
   }
 
   /**
@@ -148,12 +146,11 @@ export class ServiceApp<
   userLoginEx(
     user: U & ServiceUserToken,
     core?: ApiRefreshTokenDto,
-    keep?: boolean,
     dispatch?: boolean
   ) {
     // User login
     const { refreshToken } = user;
-    this.userLogin(user, refreshToken, keep, dispatch);
+    this.userLogin(user, refreshToken, dispatch);
 
     // Core system login
     core ??= {
@@ -163,6 +160,9 @@ export class ServiceApp<
       expiresIn: user.seconds
     };
 
+    // Cache the core system refresh token
+    this.storage.setData(coreTokenKey, core.refreshToken);
+
     this.exchangeTokenAll(core, coreName);
   }
 }