@etsoo/materialui 1.4.61 → 1.4.63

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/IServiceApp.d.ts

@@ -1,6 +1,7 @@
-import { ApiRefreshTokenDto, IApi } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
 import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
+import { IActionResult } from "@etsoo/shared";
 /**
  * Service application interface
  */
@@ -15,14 +16,21 @@ export interface IServiceApp extends ReactAppType {
     readonly coreOrigin: string;
     /**
      * Load core system UI
+     * @param tryLogin Try login or not
      */
-    loadCore(): void;
+    loadCore(tryLogin?: boolean): void;
+    /**
+     * Switch organization
+     * @param organizationId Organization ID
+     * @param fromOrganizationId From organization ID
+     * @param payload Payload
+     */
+    switchOrg(organizationId: number, fromOrganizationId?: number, payload?: IApiPayload<IActionResult<IServiceUser & ServiceUserToken>>): Promise<IActionResult<IServiceUser & ServiceUserToken> | undefined>;
     /**
      *
      * @param user Current user
      * @param core Core system API token data
-     * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLoginEx(user: IServiceUser & ServiceUserToken, core?: ApiRefreshTokenDto, keep?: boolean, dispatch?: boolean): void;
+    userLoginEx(user: IServiceUser & ServiceUserToken, core?: ApiRefreshTokenDto, dispatch?: boolean): void;
 }

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.61",
+  "version": "1.4.63",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",

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/IServiceApp.ts

@@ -1,6 +1,7 @@
-import { ApiRefreshTokenDto, IApi } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
 import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
+import { IActionResult } from "@etsoo/shared";
 
 /**
  * Service application interface
@@ -18,20 +19,31 @@ export interface IServiceApp extends ReactAppType {
 
   /**
    * Load core system UI
+   * @param tryLogin Try login or not
    */
-  loadCore(): void;
+  loadCore(tryLogin?: boolean): void;
+
+  /**
+   * Switch organization
+   * @param organizationId Organization ID
+   * @param fromOrganizationId From organization ID
+   * @param payload Payload
+   */
+  switchOrg(
+    organizationId: number,
+    fromOrganizationId?: number,
+    payload?: IApiPayload<IActionResult<IServiceUser & ServiceUserToken>>
+  ): Promise<IActionResult<IServiceUser & ServiceUserToken> | undefined>;
 
   /**
    *
    * @param user Current user
    * @param core Core system API token data
-   * @param keep Keep in local storage or not
    * @param dispatch User state dispatch
    */
   userLoginEx(
     user: IServiceUser & ServiceUserToken,
     core?: ApiRefreshTokenDto,
-    keep?: boolean,
     dispatch?: boolean
   ): void;
 }

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";