@etsoo/materialui 1.5.35 → 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/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/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.35",
+  "version": "1.5.36",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,7 +43,7 @@
     "@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.1.0",

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