@etsoo/materialui 1.4.60 → 1.4.62

package/lib/ButtonPopover.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * Button popover props
+ */
+export type ButtonPopoverProps<T> = {
+    /**
+     * Button component
+     * @param callback Button click callback
+     * @returns Layout
+     */
+    button: (callback: (handler: HTMLElement | null) => void) => React.ReactNode;
+    /**
+     * Children component
+     * @param data Data
+     * @returns Layout
+     */
+    children: (data: T | null) => React.ReactNode;
+    /**
+     * Load data
+     * @returns Data promise
+     */
+    loadData?: () => Promise<T | undefined>;
+};
+/**
+ * Button popover component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ButtonPopover<T>(props: ButtonPopoverProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/ButtonPopover.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "@mui/material";
+import React from "react";
+/**
+ * Button popover component
+ * @param props Props
+ * @returns Component
+ */
+export function ButtonPopover(props) {
+    // Destruct
+    const { button, children, loadData } = props;
+    // States
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [data, setData] = React.useState(null);
+    const isLoadded = React.useRef(false);
+    const open = Boolean(anchorEl);
+    // Load data
+    React.useEffect(() => {
+        if (loadData && (!isLoadded.current || open)) {
+            // First time or when open
+            loadData().then((d) => {
+                if (d == null)
+                    return;
+                setData(d);
+                isLoadded.current = true;
+            });
+        }
+    }, [loadData, open]);
+    // Children
+    const currentChildren = React.useMemo(() => children(data), [children, data]);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    // Layout
+    return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
+                    paper: {
+                        elevation: 0,
+                        sx: {
+                            overflow: "visible",
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                            mt: 1,
+                            "&::before": {
+                                content: '""',
+                                display: "block",
+                                position: "absolute",
+                                top: 0,
+                                right: 14,
+                                width: 10,
+                                height: 10,
+                                bgcolor: "background.paper",
+                                transform: "translateY(-50%) rotate(45deg)",
+                                zIndex: 0
+                            }
+                        }
+                    }
+                }, children: currentChildren })] }));
+}

package/lib/NotifierMU.js

@@ -63,7 +63,7 @@ export class NotificationMU extends NotificationReact {
             await this.returnValue(undefined);
             return true;
         };
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: "dialog-title", children: [icon, _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons
                         ? buttons(this, callback)
                         : primaryButton && (_jsx(LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButtonProps, children: okLabel })) })] }, this.id));
     }
@@ -78,7 +78,7 @@ export class NotificationMU extends NotificationReact {
             await this.returnValue(value);
             return true;
         };
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: "dialog-title", children: [_jsx(Help, { color: "action" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? (buttons(this, callback)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && (_jsx(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(Help, { color: "action" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? (buttons(this, callback)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && (_jsx(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
     }
     createMessageColor() {
         if (this.type === NotificationMessageType.Danger)
@@ -177,7 +177,7 @@ export class NotificationMU extends NotificationReact {
                     event.preventDefault();
                     event.currentTarget.elements.namedItem("okButton")?.click();
                     return false;
-                }, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: "dialog-title", children: [_jsx(Info, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+                }, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(Info, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
                                         if (this.onReturn)
                                             this.onReturn(undefined);
                                         this.dismiss();

package/lib/app/ReactApp.js

@@ -233,7 +233,8 @@ export class ReactApp extends CoreApp {
      */
     async tryLogin(data) {
         // Destruct
-        const { onFailure = () => {
+        const { onFailure = (type) => {
+            console.log(`Try login failed: ${type}.`);
             this.toLoginPage(rest);
         }, onSuccess, ...rest } = data ?? {};
         // Check status

package/lib/app/ServiceApp.d.ts

@@ -67,6 +67,7 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      * @param payload Payload
      */
     switchOrg(organizationId: number, fromOrganizationId?: number, payload?: IApiPayload<IActionResult<U & ServiceUserToken>>): Promise<IActionResult<U & ServiceUserToken> | undefined>;
+    protected refreshTokenSucceed(user: U, token: string, callback?: (result?: boolean | IActionResult) => boolean | void): Promise<void>;
     /**
      * Try login
      * @param params Login parameters

package/lib/app/ServiceApp.js

@@ -180,6 +180,35 @@ export class ServiceApp extends ReactApp {
         this.userLoginEx(user, core, true);
         return result;
     }
+    async refreshTokenSucceed(user, token, callback) {
+        // Check core system token
+        const coreToken = this.storage.getData(coreTokenKey);
+        if (!coreToken) {
+            callback?.({ ok: false, type: "noData", title: "Core token is blank" });
+            return;
+        }
+        const coreTokenDecrypted = this.decrypt(coreToken);
+        if (!coreTokenDecrypted) {
+            callback?.({
+                ok: false,
+                type: "noData",
+                title: "Core token decrypted is blank"
+            });
+            return;
+        }
+        // Call the core system API refresh token
+        const data = await this.apiRefreshTokenData(this.coreApi, {
+            token: coreTokenDecrypted,
+            appId: this.settings.appId
+        });
+        if (data == null)
+            return;
+        // Cache the core system refresh token
+        // Follow similar logic in userLoginEx
+        this.saveCoreToken(data);
+        // Call the super
+        await super.refreshTokenSucceed(user, token, callback);
+    }
     /**
      * Try login
      * @param params Login parameters
@@ -187,37 +216,13 @@ export class ServiceApp extends ReactApp {
     async tryLogin(params) {
         // Destruct
         params ??= {};
-        let { onFailure, onSuccess, ...rest } = params;
+        let { onFailure, ...rest } = params;
         if (onFailure == null) {
             onFailure = params.onFailure = (type) => {
                 console.log(`Try login failed: ${type}.`);
                 this.toLoginPage(rest);
             };
         }
-        // Check core system token
-        const coreToken = this.storage.getData(coreTokenKey);
-        if (!coreToken) {
-            onFailure("ServiceAppCoreTokenNoData");
-            return false;
-        }
-        const coreTokenDecrypted = this.decrypt(coreToken);
-        if (!coreTokenDecrypted) {
-            onFailure("ServiceAppCoreTokenNoDecryptedData");
-            return false;
-        }
-        params.onSuccess = () => {
-            // Call the core system API refresh token
-            this.apiRefreshTokenData(this.coreApi, {
-                token: coreTokenDecrypted,
-                appId: this.settings.appId
-            }).then((data) => {
-                if (data == null)
-                    return;
-                // Cache the core system refresh token
-                this.saveCoreToken(data);
-                onSuccess?.();
-            });
-        };
         return await super.tryLogin(params);
     }
 }

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonPopover";
 export * from "./ComboBox";
 export * from "./ComboBoxMultiple";
 export * from "./ComboBoxPro";

package/lib/index.js

@@ -38,6 +38,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonPopover";
 export * from "./ComboBox";
 export * from "./ComboBoxMultiple";
 export * from "./ComboBoxPro";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.60",
+  "version": "1.4.62",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",
@@ -35,9 +35,9 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.5.84",
+    "@etsoo/appscript": "^1.5.87",
     "@etsoo/notificationbase": "^1.1.54",
-    "@etsoo/react": "^1.8.17",
+    "@etsoo/react": "^1.8.20",
     "@etsoo/shared": "^1.2.55",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
@@ -72,7 +72,7 @@
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^25.0.1",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "vitest": "^2.1.8"
   }
 }

package/src/ButtonPopover.tsx

@@ -0,0 +1,102 @@
+import { Popover } from "@mui/material";
+import React from "react";
+
+/**
+ * Button popover props
+ */
+export type ButtonPopoverProps<T> = {
+  /**
+   * Button component
+   * @param callback Button click callback
+   * @returns Layout
+   */
+  button: (callback: (handler: HTMLElement | null) => void) => React.ReactNode;
+
+  /**
+   * Children component
+   * @param data Data
+   * @returns Layout
+   */
+  children: (data: T | null) => React.ReactNode;
+
+  /**
+   * Load data
+   * @returns Data promise
+   */
+  loadData?: () => Promise<T | undefined>;
+};
+
+/**
+ * Button popover component
+ * @param props Props
+ * @returns Component
+ */
+export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
+  // Destruct
+  const { button, children, loadData } = props;
+
+  // States
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+  const [data, setData] = React.useState<T | null>(null);
+  const isLoadded = React.useRef(false);
+
+  const open = Boolean(anchorEl);
+
+  // Load data
+  React.useEffect(() => {
+    if (loadData && (!isLoadded.current || open)) {
+      // First time or when open
+      loadData().then((d) => {
+        if (d == null) return;
+        setData(d);
+        isLoadded.current = true;
+      });
+    }
+  }, [loadData, open]);
+
+  // Children
+  const currentChildren = React.useMemo(() => children(data), [children, data]);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  // Layout
+  return (
+    <React.Fragment>
+      {button((handler) => setAnchorEl(handler))}
+      <Popover
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              overflow: "visible",
+              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              mt: 1,
+              "&::before": {
+                content: '""',
+                display: "block",
+                position: "absolute",
+                top: 0,
+                right: 14,
+                width: 10,
+                height: 10,
+                bgcolor: "background.paper",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 0
+              }
+            }
+          }
+        }}
+      >
+        {currentChildren}
+      </Popover>
+    </React.Fragment>
+  );
+}

package/src/NotifierMU.tsx

@@ -123,7 +123,12 @@ export class NotificationMU extends NotificationReact {
         fullScreen={fullScreen}
         {...options}
       >
-        <IconDialogTitle draggable={draggable} className="dialog-title">
+        <IconDialogTitle
+          draggable={draggable}
+          className={
+            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
+          }
+        >
           {icon}
           <span className="dialogTitle">{title}</span>
           {closable && (
@@ -204,7 +209,12 @@ export class NotificationMU extends NotificationReact {
         fullScreen={fullScreen}
         {...options}
       >
-        <IconDialogTitle draggable={draggable} className="dialog-title">
+        <IconDialogTitle
+          draggable={draggable}
+          className={
+            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
+          }
+        >
           <Help color="action" />
           <span className="dialogTitle">{title}</span>
           {closable && (
@@ -438,7 +448,12 @@ export class NotificationMU extends NotificationReact {
             return false;
           }}
         >
-          <IconDialogTitle draggable={draggable} className="dialog-title">
+          <IconDialogTitle
+            draggable={draggable}
+            className={
+              draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
+            }
+          >
             <Info color="primary" />
             <span className="dialogTitle">{title}</span>
             {closable && (

package/src/app/ReactApp.ts

@@ -427,7 +427,8 @@ export class ReactApp<
   override async tryLogin(data?: AppTryLoginParams) {
     // Destruct
     const {
-      onFailure = () => {
+      onFailure = (type: string) => {
+        console.log(`Try login failed: ${type}.`);
         this.toLoginPage(rest);
       },
       onSuccess,

package/src/app/ServiceApp.ts

@@ -244,6 +244,44 @@ export class ServiceApp<
     return result;
   }
 
+  protected override async refreshTokenSucceed(
+    user: U,
+    token: string,
+    callback?: (result?: boolean | IActionResult) => boolean | void
+  ): Promise<void> {
+    // Check core system token
+    const coreToken = this.storage.getData<string>(coreTokenKey);
+    if (!coreToken) {
+      callback?.({ ok: false, type: "noData", title: "Core token is blank" });
+      return;
+    }
+
+    const coreTokenDecrypted = this.decrypt(coreToken);
+    if (!coreTokenDecrypted) {
+      callback?.({
+        ok: false,
+        type: "noData",
+        title: "Core token decrypted is blank"
+      });
+      return;
+    }
+
+    // Call the core system API refresh token
+    const data = await this.apiRefreshTokenData(this.coreApi, {
+      token: coreTokenDecrypted,
+      appId: this.settings.appId
+    });
+
+    if (data == null) return;
+
+    // Cache the core system refresh token
+    // Follow similar logic in userLoginEx
+    this.saveCoreToken(data);
+
+    // Call the super
+    await super.refreshTokenSucceed(user, token, callback);
+  }
+
   /**
    * Try login
    * @param params Login parameters
@@ -251,7 +289,7 @@ export class ServiceApp<
   override async tryLogin(params?: AppTryLoginParams) {
     // Destruct
     params ??= {};
-    let { onFailure, onSuccess, ...rest } = params;
+    let { onFailure, ...rest } = params;
 
     if (onFailure == null) {
       onFailure = params.onFailure = (type) => {
@@ -260,34 +298,6 @@ export class ServiceApp<
       };
     }
 
-    // Check core system token
-    const coreToken = this.storage.getData<string>(coreTokenKey);
-    if (!coreToken) {
-      onFailure("ServiceAppCoreTokenNoData");
-      return false;
-    }
-
-    const coreTokenDecrypted = this.decrypt(coreToken);
-    if (!coreTokenDecrypted) {
-      onFailure("ServiceAppCoreTokenNoDecryptedData");
-      return false;
-    }
-
-    params.onSuccess = () => {
-      // Call the core system API refresh token
-      this.apiRefreshTokenData(this.coreApi, {
-        token: coreTokenDecrypted,
-        appId: this.settings.appId
-      }).then((data) => {
-        if (data == null) return;
-
-        // Cache the core system refresh token
-        this.saveCoreToken(data);
-
-        onSuccess?.();
-      });
-    };
-
     return await super.tryLogin(params);
   }
 }

package/src/index.ts

@@ -43,6 +43,7 @@ export * from "./AutocompleteExtendedProps";
 export * from "./BackButton";
 export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
+export * from "./ButtonPopover";
 export * from "./ComboBox";
 export * from "./ComboBoxMultiple";
 export * from "./ComboBoxPro";