@etsoo/materialui 1.5.34 → 1.5.36

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -0,0 +1,72 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DataTypes, IdType } from "@etsoo/shared";
+type DnDItemType = {
+    id: IdType;
+};
+export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick"> & {
+    /**
+     * Add items splitter
+     */
+    addSplitter?: RegExp;
+    /**
+     * Input field name
+     */
+    inputName?: string;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Label in the end
+     */
+    labelEnd?: string;
+    /**
+     * Label field in items
+     */
+    labelField: DataTypes.Keys<D>;
+    /**
+     * Label formatter
+     * @param item Item to be formatted
+     */
+    labelFormatter?: (item: D) => string;
+    /**
+     * Labels
+     */
+    labels?: {
+        dragIndicator?: string;
+        add?: string;
+        more?: string;
+    };
+    /**
+     * Load data
+     */
+    loadData: (ids?: D["id"][]) => Promise<D[]>;
+    /**
+     * On add handler
+     * @param ids Ids
+     */
+    onAdd?: (ids: string[]) => Promise<false | D[]>;
+    /**
+     * On change handler
+     * @param ids Ids
+     */
+    onChange?: (ids: D["id"][]) => void;
+    /**
+     * Popup title
+     */
+    popupTitle?: string;
+    /**
+     * Popup message
+     */
+    popupMessage?: string;
+    /**
+     * The field is required or not
+     */
+    required?: boolean;
+    /**
+     * Ids
+     */
+    ids?: D["id"][];
+};
+export declare function ButtonPopupCheckbox<D extends DnDItemType>(props: ButtonPopupCheckboxProps<D>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/ButtonPopupCheckbox.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPopupCheckbox = ButtonPopupCheckbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Chip_1 = __importDefault(require("@mui/material/Chip"));
+const react_1 = __importDefault(require("react"));
+const shared_1 = require("@etsoo/shared");
+const FormGroup_1 = __importDefault(require("@mui/material/FormGroup"));
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const DnDList_1 = require("./DnDList");
+const FlexBox_1 = require("./FlexBox");
+const ReactApp_1 = require("./app/ReactApp");
+function ButtonPopupList(props) {
+    // Destruct
+    const { addSplitter = /\s*[,;]\s*/, ids, labelField, labelFormatter = (data) => {
+        console.log("data", data);
+        if (labelField in data) {
+            return data[labelField];
+        }
+        return data.id.toString();
+    }, labels, loadData, onAdd } = props;
+    // Methods
+    const dndRef = react_1.default.createRef();
+    // Ref
+    const inputRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        loadData(ids).then((data) => {
+            if (data == null || dndRef.current == null)
+                return;
+            dndRef.current.addItems(data);
+        });
+    }, [ids]);
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(FormGroup_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: [], labelField: labelField, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, defaultChecked: ids?.includes(item.id) }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }) }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
+                            if (inputRef.current == null)
+                                return;
+                            const input = inputRef.current.value.trim();
+                            if (input === "") {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            const items = dndRef.current?.getItems() ?? [];
+                            const inputIds = input
+                                .split(addSplitter)
+                                .filter((id) => !items.some((item) => item.id == id));
+                            if (inputIds.length === 0) {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            const result = await onAdd(inputIds);
+                            if (result === false) {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            dndRef.current?.addItems(result);
+                            inputRef.current.value = "";
+                            inputRef.current.focus();
+                        }, children: labels?.add })] }))] }));
+}
+function ButtonPopupCheckbox(props) {
+    // App
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Destruct
+    const { addSplitter, ids, inputName, label, labelEnd, labelFormatter, labelField, labels = {}, loadData, onAdd, onChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
+    // Default labels
+    if (!labels.add)
+        labels.add = app.get("add");
+    if (!labels.dragIndicator)
+        labels.dragIndicator = app.get("dragIndicator");
+    if (!labels.more)
+        labels.more = app.get("more");
+    // State
+    const [values, setValues] = react_1.default.useState([]);
+    react_1.default.useEffect(() => {
+        if (ids == null)
+            return;
+        setValues(ids);
+    }, [ids]);
+    // Click handler
+    const clickHandler = () => {
+        app.showInputDialog({
+            title: popupTitle,
+            message: popupMessage,
+            callback: (form) => {
+                if (form == null)
+                    return;
+                // Form data
+                const { item = [] } = shared_1.DomUtils.dataAs(new FormData(form), {
+                    item: "string[]"
+                });
+                if (required && item.length === 0) {
+                    shared_1.DomUtils.setFocus("item", form);
+                    return false;
+                }
+                setValues(item);
+                onChange?.(item);
+            },
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, ids: values, labelFormatter: labelFormatter, labelField: labelField, labels: labels, loadData: loadData, onAdd: onAdd })),
+            fullScreen: app.smDown
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: values.join(",") }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, children: [label && (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "body2", children: [label, ":"] }), values.map((id) => ((0, jsx_runtime_1.jsx)(Chip_1.default, { size: "small", label: id }, id))), labelEnd && (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", children: labelEnd })] })] }));
+}

package/lib/cjs/DnDList.d.ts

@@ -48,7 +48,9 @@ export interface DnDListRef<D extends object> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+export interface DnDListPros<D extends {
+    id: UniqueIdentifier;
+}> {
     /**
      * Get list item style callback
      */
@@ -65,14 +67,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
      * List items
      */
     items: D[];
-    /**
-     * Unique key field
-     */
-    keyField: K;
     /**
      * Label field
      */
-    labelField: K;
+    labelField: DataTypes.Keys<D>;
     /**
      * Methods ref
      */
@@ -101,4 +99,4 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;
+}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DnDList.js

@@ -54,7 +54,7 @@ exports.DnDItemStyle = DnDItemStyle;
  */
 function DnDList(props) {
     // Destruct
-    const { keyField, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
     // Theme
     const theme = (0, styles_1.useTheme)();
     // States
@@ -210,7 +210,7 @@ function DnDList(props) {
             .forEach((input) => input.addEventListener("change", () => doFormChange()));
     };
     const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
-                const id = item[keyField];
+                const id = item.id;
                 return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
             }) }) }));
     if (onFormChange) {

package/lib/cjs/app/ReactApp.d.ts

@@ -183,6 +183,11 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser> extends C
      * @param dispatch User state dispatch
      */
     userLogin(user: D, refreshToken: string, dispatch?: boolean): void;
+    /**
+     * User login dispatch
+     * @param user New user
+     */
+    protected doLoginDispatch(user: D): void;
     /**
      * User logout
      * @param clearToken Clear refresh token or not

package/lib/cjs/app/ReactApp.js

@@ -311,7 +311,16 @@ class ReactApp extends appscript_1.CoreApp {
         // Super call, set token
         super.userLogin(user, refreshToken);
         // Dispatch action
-        if (this.userStateDispatch != null && dispatch !== false)
+        if (dispatch !== false) {
+            this.doLoginDispatch(user);
+        }
+    }
+    /**
+     * User login dispatch
+     * @param user New user
+     */
+    doLoginDispatch(user) {
+        if (this.userStateDispatch != null)
             this.userStateDispatch({
                 type: react_2.UserActionType.Login,
                 user

package/lib/cjs/app/ServiceApp.d.ts

@@ -70,6 +70,11 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * @param data Data
      */
     protected saveCoreToken(data: ApiRefreshTokenDto): void;
+    /**
+     * On switch organization handler
+     * This method is called when the organization is switched successfully
+     */
+    protected onSwitchOrg(): Promise<void> | void;
     /**
      * Switch organization
      * @param organizationId Organization ID

package/lib/cjs/app/ServiceApp.js

@@ -157,6 +157,11 @@ class ServiceApp extends ReactApp_1.ReactApp {
         // Exchange tokens
         this.exchangeTokenAll(data);
     }
+    /**
+     * On switch organization handler
+     * This method is called when the organization is switched successfully
+     */
+    onSwitchOrg() { }
     /**
      * Switch organization
      * @param organizationId Organization ID
@@ -183,8 +188,12 @@ class ServiceApp extends ReactApp_1.ReactApp {
         }
         // Override the user data's refresh token
         const user = refreshToken ? { ...result.data, refreshToken } : result.data;
-        // User login
-        this.userLoginEx(user, core, true);
+        // User login without dispatch
+        this.userLoginEx(user, core, false);
+        // Handle the switch organization
+        await this.onSwitchOrg();
+        // Trigger the dispatch at last
+        this.doLoginDispatch(user);
         return result;
     }
     async refreshTokenSucceed(user, token, callback) {

package/lib/cjs/index.d.ts

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

package/lib/cjs/index.js

@@ -55,6 +55,7 @@ __exportStar(require("./BackButton"), exports);
 __exportStar(require("./BridgeCloseButton"), exports);
 __exportStar(require("./ButtonLink"), exports);
 __exportStar(require("./ButtonPopover"), exports);
+__exportStar(require("./ButtonPopupCheckbox"), exports);
 __exportStar(require("./ComboBox"), exports);
 __exportStar(require("./ComboBoxMultiple"), exports);
 __exportStar(require("./ComboBoxPro"), exports);

package/lib/mjs/ButtonPopupCheckbox.d.ts

@@ -0,0 +1,72 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DataTypes, IdType } from "@etsoo/shared";
+type DnDItemType = {
+    id: IdType;
+};
+export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick"> & {
+    /**
+     * Add items splitter
+     */
+    addSplitter?: RegExp;
+    /**
+     * Input field name
+     */
+    inputName?: string;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Label in the end
+     */
+    labelEnd?: string;
+    /**
+     * Label field in items
+     */
+    labelField: DataTypes.Keys<D>;
+    /**
+     * Label formatter
+     * @param item Item to be formatted
+     */
+    labelFormatter?: (item: D) => string;
+    /**
+     * Labels
+     */
+    labels?: {
+        dragIndicator?: string;
+        add?: string;
+        more?: string;
+    };
+    /**
+     * Load data
+     */
+    loadData: (ids?: D["id"][]) => Promise<D[]>;
+    /**
+     * On add handler
+     * @param ids Ids
+     */
+    onAdd?: (ids: string[]) => Promise<false | D[]>;
+    /**
+     * On change handler
+     * @param ids Ids
+     */
+    onChange?: (ids: D["id"][]) => void;
+    /**
+     * Popup title
+     */
+    popupTitle?: string;
+    /**
+     * Popup message
+     */
+    popupMessage?: string;
+    /**
+     * The field is required or not
+     */
+    required?: boolean;
+    /**
+     * Ids
+     */
+    ids?: D["id"][];
+};
+export declare function ButtonPopupCheckbox<D extends DnDItemType>(props: ButtonPopupCheckboxProps<D>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/ButtonPopupCheckbox.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import React from "react";
+import { DomUtils } from "@etsoo/shared";
+import FormGroup from "@mui/material/FormGroup";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import AddIcon from "@mui/icons-material/Add";
+import IconButton from "@mui/material/IconButton";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import { DnDList } from "./DnDList";
+import { HBox, VBox } from "./FlexBox";
+import { useRequiredAppContext } from "./app/ReactApp";
+function ButtonPopupList(props) {
+    // Destruct
+    const { addSplitter = /\s*[,;]\s*/, ids, labelField, labelFormatter = (data) => {
+        console.log("data", data);
+        if (labelField in data) {
+            return data[labelField];
+        }
+        return data.id.toString();
+    }, labels, loadData, onAdd } = props;
+    // Methods
+    const dndRef = React.createRef();
+    // Ref
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        loadData(ids).then((data) => {
+            if (data == null || dndRef.current == null)
+                return;
+            dndRef.current.addItems(data);
+        });
+    }, [ids]);
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(FormGroup, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: [], labelField: labelField, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, defaultChecked: ids?.includes(item.id) }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }) }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
+                            if (inputRef.current == null)
+                                return;
+                            const input = inputRef.current.value.trim();
+                            if (input === "") {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            const items = dndRef.current?.getItems() ?? [];
+                            const inputIds = input
+                                .split(addSplitter)
+                                .filter((id) => !items.some((item) => item.id == id));
+                            if (inputIds.length === 0) {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            const result = await onAdd(inputIds);
+                            if (result === false) {
+                                inputRef.current.focus();
+                                return;
+                            }
+                            dndRef.current?.addItems(result);
+                            inputRef.current.value = "";
+                            inputRef.current.focus();
+                        }, children: labels?.add })] }))] }));
+}
+export function ButtonPopupCheckbox(props) {
+    // App
+    const app = useRequiredAppContext();
+    // Destruct
+    const { addSplitter, ids, inputName, label, labelEnd, labelFormatter, labelField, labels = {}, loadData, onAdd, onChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
+    // Default labels
+    if (!labels.add)
+        labels.add = app.get("add");
+    if (!labels.dragIndicator)
+        labels.dragIndicator = app.get("dragIndicator");
+    if (!labels.more)
+        labels.more = app.get("more");
+    // State
+    const [values, setValues] = React.useState([]);
+    React.useEffect(() => {
+        if (ids == null)
+            return;
+        setValues(ids);
+    }, [ids]);
+    // Click handler
+    const clickHandler = () => {
+        app.showInputDialog({
+            title: popupTitle,
+            message: popupMessage,
+            callback: (form) => {
+                if (form == null)
+                    return;
+                // Form data
+                const { item = [] } = DomUtils.dataAs(new FormData(form), {
+                    item: "string[]"
+                });
+                if (required && item.length === 0) {
+                    DomUtils.setFocus("item", form);
+                    return false;
+                }
+                setValues(item);
+                onChange?.(item);
+            },
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, ids: values, labelFormatter: labelFormatter, labelField: labelField, labels: labels, loadData: loadData, onAdd: onAdd })),
+            fullScreen: app.smDown
+        });
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: values.join(",") }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, children: [label && _jsxs(Typography, { variant: "body2", children: [label, ":"] }), values.map((id) => (_jsx(Chip, { size: "small", label: id }, id))), labelEnd && _jsx(Typography, { variant: "caption", children: labelEnd })] })] }));
+}

package/lib/mjs/DnDList.d.ts

@@ -48,7 +48,9 @@ export interface DnDListRef<D extends object> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+export interface DnDListPros<D extends {
+    id: UniqueIdentifier;
+}> {
     /**
      * Get list item style callback
      */
@@ -65,14 +67,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
      * List items
      */
     items: D[];
-    /**
-     * Unique key field
-     */
-    keyField: K;
     /**
      * Label field
      */
-    labelField: K;
+    labelField: DataTypes.Keys<D>;
     /**
      * Methods ref
      */
@@ -101,4 +99,4 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;
+}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DnDList.js

@@ -46,7 +46,7 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { keyField, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
     // Theme
     const theme = useTheme();
     // States
@@ -202,7 +202,7 @@ export function DnDList(props) {
             .forEach((input) => input.addEventListener("change", () => doFormChange()));
     };
     const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
-                const id = item[keyField];
+                const id = item.id;
                 return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
             }) }) }));
     if (onFormChange) {

package/lib/mjs/app/ReactApp.d.ts

@@ -183,6 +183,11 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser> extends C
      * @param dispatch User state dispatch
      */
     userLogin(user: D, refreshToken: string, dispatch?: boolean): void;
+    /**
+     * User login dispatch
+     * @param user New user
+     */
+    protected doLoginDispatch(user: D): void;
     /**
      * User logout
      * @param clearToken Clear refresh token or not

package/lib/mjs/app/ReactApp.js

@@ -303,7 +303,16 @@ export class ReactApp extends CoreApp {
         // Super call, set token
         super.userLogin(user, refreshToken);
         // Dispatch action
-        if (this.userStateDispatch != null && dispatch !== false)
+        if (dispatch !== false) {
+            this.doLoginDispatch(user);
+        }
+    }
+    /**
+     * User login dispatch
+     * @param user New user
+     */
+    doLoginDispatch(user) {
+        if (this.userStateDispatch != null)
             this.userStateDispatch({
                 type: UserActionType.Login,
                 user

package/lib/mjs/app/ServiceApp.d.ts

@@ -70,6 +70,11 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * @param data Data
      */
     protected saveCoreToken(data: ApiRefreshTokenDto): void;
+    /**
+     * On switch organization handler
+     * This method is called when the organization is switched successfully
+     */
+    protected onSwitchOrg(): Promise<void> | void;
     /**
      * Switch organization
      * @param organizationId Organization ID

package/lib/mjs/app/ServiceApp.js

@@ -154,6 +154,11 @@ export class ServiceApp extends ReactApp {
         // Exchange tokens
         this.exchangeTokenAll(data);
     }
+    /**
+     * On switch organization handler
+     * This method is called when the organization is switched successfully
+     */
+    onSwitchOrg() { }
     /**
      * Switch organization
      * @param organizationId Organization ID
@@ -180,8 +185,12 @@ export class ServiceApp extends ReactApp {
         }
         // Override the user data's refresh token
         const user = refreshToken ? { ...result.data, refreshToken } : result.data;
-        // User login
-        this.userLoginEx(user, core, true);
+        // User login without dispatch
+        this.userLoginEx(user, core, false);
+        // Handle the switch organization
+        await this.onSwitchOrg();
+        // Trigger the dispatch at last
+        this.doLoginDispatch(user);
         return result;
     }
     async refreshTokenSucceed(user, token, callback) {

package/lib/mjs/index.d.ts

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

package/lib/mjs/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.34",
+  "version": "1.5.36",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.26",
+    "@etsoo/appscript": "^1.6.29",
     "@etsoo/notificationbase": "^1.1.60",
     "@etsoo/react": "^1.8.40",
-    "@etsoo/shared": "^1.2.69",
+    "@etsoo/shared": "^1.2.70",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^8.0.0",
+    "@mui/x-data-grid": "^8.1.0",
     "chart.js": "^4.4.9",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.5",

package/src/ButtonPopupCheckbox.tsx

@@ -0,0 +1,342 @@
+import Button, { ButtonProps } from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import React from "react";
+import { DataTypes, DomUtils, IdType } from "@etsoo/shared";
+import FormGroup from "@mui/material/FormGroup";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import AddIcon from "@mui/icons-material/Add";
+import IconButton from "@mui/material/IconButton";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import { DnDList, DnDListRef } from "./DnDList";
+import { HBox, VBox } from "./FlexBox";
+import { useRequiredAppContext } from "./app/ReactApp";
+
+type DnDItemType = {
+  id: IdType;
+};
+
+export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
+  ButtonProps,
+  "chidren" | "onClick"
+> & {
+  /**
+   * Add items splitter
+   */
+  addSplitter?: RegExp;
+
+  /**
+   * Input field name
+   */
+  inputName?: string;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Label in the end
+   */
+  labelEnd?: string;
+
+  /**
+   * Label field in items
+   */
+  labelField: DataTypes.Keys<D>;
+
+  /**
+   * Label formatter
+   * @param item Item to be formatted
+   */
+  labelFormatter?: (item: D) => string;
+
+  /**
+   * Labels
+   */
+  labels?: {
+    dragIndicator?: string;
+    add?: string;
+    more?: string;
+  };
+
+  /**
+   * Load data
+   */
+  loadData: (ids?: D["id"][]) => Promise<D[]>;
+
+  /**
+   * On add handler
+   * @param ids Ids
+   */
+  onAdd?: (ids: string[]) => Promise<false | D[]>;
+
+  /**
+   * On change handler
+   * @param ids Ids
+   */
+  onChange?: (ids: D["id"][]) => void;
+
+  /**
+   * Popup title
+   */
+  popupTitle?: string;
+
+  /**
+   * Popup message
+   */
+  popupMessage?: string;
+
+  /**
+   * The field is required or not
+   */
+  required?: boolean;
+
+  /**
+   * Ids
+   */
+  ids?: D["id"][];
+};
+
+type ButtonPopupListProps<D extends DnDItemType> = Pick<
+  ButtonPopupCheckboxProps<D>,
+  | "addSplitter"
+  | "labelField"
+  | "labelFormatter"
+  | "labels"
+  | "loadData"
+  | "onAdd"
+  | "ids"
+>;
+
+function ButtonPopupList<D extends DnDItemType>(
+  props: ButtonPopupListProps<D>
+) {
+  // Destruct
+  const {
+    addSplitter = /\s*[,;]\s*/,
+    ids,
+    labelField,
+    labelFormatter = (data) => {
+      console.log("data", data);
+      if (labelField in data) {
+        return data[labelField] as string;
+      }
+
+      return data.id.toString();
+    },
+    labels,
+    loadData,
+    onAdd
+  } = props;
+
+  // Methods
+  const dndRef = React.createRef<DnDListRef<D>>();
+
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    loadData(ids).then((data) => {
+      if (data == null || dndRef.current == null) return;
+      dndRef.current.addItems(data);
+    });
+  }, [ids]);
+
+  return (
+    <VBox gap={2}>
+      <FormGroup>
+        <Grid container spacing={0}>
+          <DnDList<D>
+            items={[]}
+            labelField={labelField}
+            itemRenderer={(item, index, nodeRef, actionNodeRef) => (
+              <Grid
+                size={{ xs: 12, md: 6, lg: 4 }}
+                display="flex"
+                justifyContent="flex-start"
+                alignItems="center"
+                gap={1}
+                {...nodeRef}
+              >
+                <IconButton
+                  style={{ cursor: "move" }}
+                  size="small"
+                  title={labels?.dragIndicator}
+                  {...actionNodeRef}
+                >
+                  <DragIndicatorIcon />
+                </IconButton>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      name="item"
+                      value={item.id}
+                      defaultChecked={ids?.includes(item.id)}
+                    />
+                  }
+                  label={`${index + 1}. ${labelFormatter(item)}`}
+                />
+              </Grid>
+            )}
+            height={200}
+            mRef={dndRef}
+          ></DnDList>
+        </Grid>
+      </FormGroup>
+      {onAdd && (
+        <HBox gap={1}>
+          <TextField
+            variant="outlined"
+            label={labels?.more}
+            fullWidth
+            inputRef={inputRef}
+          />
+          <Button
+            sx={{ width: "120px" }}
+            variant="contained"
+            startIcon={<AddIcon />}
+            size="small"
+            onClick={async () => {
+              if (inputRef.current == null) return;
+
+              const input = inputRef.current.value.trim();
+              if (input === "") {
+                inputRef.current.focus();
+                return;
+              }
+
+              const items = dndRef.current?.getItems() ?? [];
+
+              const inputIds = input
+                .split(addSplitter)
+                .filter((id) => !items.some((item) => item.id == id));
+
+              if (inputIds.length === 0) {
+                inputRef.current.focus();
+                return;
+              }
+
+              const result = await onAdd(inputIds);
+              if (result === false) {
+                inputRef.current.focus();
+                return;
+              }
+
+              dndRef.current?.addItems(result);
+
+              inputRef.current.value = "";
+              inputRef.current.focus();
+            }}
+          >
+            {labels?.add}
+          </Button>
+        </HBox>
+      )}
+    </VBox>
+  );
+}
+
+export function ButtonPopupCheckbox<D extends DnDItemType>(
+  props: ButtonPopupCheckboxProps<D>
+) {
+  // App
+  const app = useRequiredAppContext();
+
+  // Destruct
+  const {
+    addSplitter,
+    ids,
+    inputName,
+    label,
+    labelEnd,
+    labelFormatter,
+    labelField,
+    labels = {},
+    loadData,
+    onAdd,
+    onChange,
+    popupTitle = label,
+    popupMessage,
+    required = false,
+    sx = { gap: 1, justifyContent: "flex-start" },
+    variant = "outlined",
+    ...rest
+  } = props;
+
+  // Default labels
+  if (!labels.add) labels.add = app.get("add");
+  if (!labels.dragIndicator) labels.dragIndicator = app.get("dragIndicator");
+  if (!labels.more) labels.more = app.get("more");
+
+  // State
+  const [values, setValues] = React.useState<D["id"][]>([]);
+  React.useEffect(() => {
+    if (ids == null) return;
+    setValues(ids);
+  }, [ids]);
+
+  // Click handler
+  const clickHandler = () => {
+    app.showInputDialog({
+      title: popupTitle,
+      message: popupMessage,
+      callback: (form) => {
+        if (form == null) return;
+
+        // Form data
+        const { item = [] } = DomUtils.dataAs(new FormData(form), {
+          item: "string[]"
+        });
+
+        if (required && item.length === 0) {
+          DomUtils.setFocus("item", form);
+          return false;
+        }
+
+        setValues(item);
+
+        onChange?.(item);
+      },
+      inputs: (
+        <ButtonPopupList
+          addSplitter={addSplitter}
+          ids={values}
+          labelFormatter={labelFormatter}
+          labelField={labelField}
+          labels={labels}
+          loadData={loadData}
+          onAdd={onAdd}
+        />
+      ),
+      fullScreen: app.smDown
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <input
+        type="text"
+        style={{ position: "absolute", opacity: 0, width: 0 }}
+        name={inputName}
+        required={required}
+        defaultValue={values.join(",")}
+      />
+      <Button
+        variant={variant}
+        sx={sx}
+        onClick={() => clickHandler()}
+        {...rest}
+      >
+        {label && <Typography variant="body2">{label}:</Typography>}
+        {values.map((id) => (
+          <Chip key={id} size="small" label={id} />
+        ))}
+        {labelEnd && <Typography variant="caption">{labelEnd}</Typography>}
+      </Button>
+    </React.Fragment>
+  );
+}

package/src/DnDList.tsx

@@ -119,7 +119,7 @@ export interface DnDListRef<D extends object> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+export interface DnDListPros<D extends { id: UniqueIdentifier }> {
   /**
    * Get list item style callback
    */
@@ -145,15 +145,10 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
    */
   items: D[];
 
-  /**
-   * Unique key field
-   */
-  keyField: K;
-
   /**
    * Label field
    */
-  labelField: K;
+  labelField: DataTypes.Keys<D>;
 
   /**
    * Methods ref
@@ -191,16 +186,11 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
  * @param props Props
  * @returns Component
  */
-export function DnDList<
-  D extends { id: UniqueIdentifier },
-  K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<
-    D,
-    UniqueIdentifier
-  >
->(props: DnDListPros<D, K>) {
+export function DnDList<D extends { id: UniqueIdentifier }>(
+  props: DnDListPros<D>
+) {
   // Destruct
   const {
-    keyField,
     height = 360,
     itemRenderer,
     labelField,
@@ -465,7 +455,7 @@ export function DnDList<
     <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <SortableContextType items={items} strategy={strategy}>
         {items.map((item, index) => {
-          const id = item[keyField] as unknown as UniqueIdentifier;
+          const id = item.id;
           return (
             <SortableItem
               id={id}

package/src/app/ReactApp.ts

@@ -483,7 +483,17 @@ export class ReactApp<S extends IAppSettings, D extends IUser>
     super.userLogin(user, refreshToken);
 
     // Dispatch action
-    if (this.userStateDispatch != null && dispatch !== false)
+    if (dispatch !== false) {
+      this.doLoginDispatch(user);
+    }
+  }
+
+  /**
+   * User login dispatch
+   * @param user New user
+   */
+  protected doLoginDispatch(user: D) {
+    if (this.userStateDispatch != null)
       this.userStateDispatch({
         type: UserActionType.Login,
         user

package/src/app/ServiceApp.ts

@@ -209,6 +209,12 @@ export class ServiceApp<
     this.exchangeTokenAll(data);
   }
 
+  /**
+   * On switch organization handler
+   * This method is called when the organization is switched successfully
+   */
+  protected onSwitchOrg(): Promise<void> | void {}
+
   /**
    * Switch organization
    * @param organizationId Organization ID
@@ -248,8 +254,14 @@ export class ServiceApp<
     // Override the user data's refresh token
     const user = refreshToken ? { ...result.data, refreshToken } : result.data;
 
-    // User login
-    this.userLoginEx(user, core, true);
+    // User login without dispatch
+    this.userLoginEx(user, core, false);
+
+    // Handle the switch organization
+    await this.onSwitchOrg();
+
+    // Trigger the dispatch at last
+    this.doLoginDispatch(user);
 
     return result;
   }

package/src/index.ts

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