@etsoo/materialui 1.5.53 → 1.5.54

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -3,7 +3,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
 type DnDItemType = {
     id: IdType;
 };
-export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick"> & {
+export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick" | "value"> & {
     /**
      * Add items splitter
      */
@@ -40,7 +40,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Load data
      */
-    loadData: (ids?: D["id"][]) => Promise<D[]>;
+    loadData: () => Promise<D[]>;
     /**
      * On add handler
      * @param ids Ids
@@ -64,9 +64,9 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      */
     required?: boolean;
     /**
-     * Ids
+     * Value
      */
-    ids?: D["id"][];
+    value?: D["id"][];
 };
 export declare function ButtonPopupCheckbox<D extends DnDItemType>(props: ButtonPopupCheckboxProps<D>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/cjs/ButtonPopupCheckbox.js

@@ -23,7 +23,7 @@ const ReactApp_1 = require("./app/ReactApp");
 const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = react_1.default.createRef();
     // Ref
@@ -32,10 +32,10 @@ function ButtonPopupList(props) {
     const [selectedIds, setSelectedIds] = react_1.default.useState([]);
     react_1.default.useEffect(() => {
         // Sort items by ids for first load
-        items.sortByProperty("id", ids);
+        items.sortByProperty("id", value);
         // Set selected ids
-        setSelectedIds([...ids]);
-    }, [ids]);
+        setSelectedIds([...value]);
+    }, [value]);
     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: 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, checked: selectedIds.includes(item.id), onChange: (e) => {
                                             const checked = e.target.checked;
                                             const newIds = [
@@ -73,7 +73,7 @@ function ButtonPopupCheckbox(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -99,8 +99,8 @@ function ButtonPopupCheckbox(props) {
     }, []);
     react_1.default.useEffect(() => {
         // Set selected ids
-        setSelectedIds(ids);
-    }, [ids]);
+        setSelectedIds(value);
+    }, [value]);
     // Selected ids
     const tempSelectedIds = react_1.default.useRef();
     // Click handler
@@ -115,7 +115,7 @@ function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 onValueChange?.(ids);
             },
-            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, ids: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown
@@ -125,6 +125,8 @@ function ButtonPopupCheckbox(props) {
                         const item = items.find((item) => item.id === id);
                         if (item == null)
                             return null;
-                        return (0, jsx_runtime_1.jsx)(Chip_1.default, { size: "small", label: labelFormatter(item) }, id);
+                        return ((0, jsx_runtime_1.jsx)(Chip_1.default, { sx: {
+                                pointerEvents: "none"
+                            }, size: "small", label: labelFormatter(item) }, id));
                     }), labelEnd && (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", children: labelEnd })] })] }));
 }

package/lib/cjs/ButtonPopupRadio.d.ts

@@ -0,0 +1,72 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DataTypes, IdType } from "@etsoo/shared";
+type DnDItemType = {
+    id: IdType;
+};
+export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick" | "value"> & {
+    /**
+     * 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: () => Promise<D[]>;
+    /**
+     * On add handler
+     * @param ids Ids
+     */
+    onAdd?: (ids: string[]) => Promise<false | D[]>;
+    /**
+     * On value change handler
+     * @param id Id
+     */
+    onValueChange?: (id: D["id"]) => void;
+    /**
+     * Popup title
+     */
+    popupTitle?: string;
+    /**
+     * Popup message
+     */
+    popupMessage?: string;
+    /**
+     * The field is required or not
+     */
+    required?: boolean;
+    /**
+     * Value
+     */
+    value?: D["id"];
+};
+export declare function ButtonPopupRadio<D extends DnDItemType>(props: ButtonPopupRadioProps<D>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/ButtonPopupRadio.js

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPopupRadio = ButtonPopupRadio;
+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 Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const Radio_1 = __importDefault(require("@mui/material/Radio"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
+const RadioGroup_1 = __importDefault(require("@mui/material/RadioGroup"));
+const FlexBox_1 = require("./FlexBox");
+const ReactApp_1 = require("./app/ReactApp");
+function ButtonPopupList(props) {
+    // Destruct
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, onAdd, onValueChange } = props;
+    // Ref
+    const inputRef = react_1.default.useRef(null);
+    // State
+    const [currentValue, setCurrentValue] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.default, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
+                    const checked = e.target.checked;
+                    const value = checked
+                        ? typeof items[0].id === "number"
+                            ? shared_1.NumberUtils.parse(v)
+                            : v
+                        : undefined;
+                    setCurrentValue(value);
+                    onValueChange(value);
+                }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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 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;
+                            }
+                            inputRef.current.value = "";
+                            inputRef.current.focus();
+                        }, children: labels?.add })] }))] }));
+}
+function ButtonPopupRadio(props) {
+    // App
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Destruct
+    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+        if (labelField in data) {
+            return data[labelField];
+        }
+        return data.id.toString();
+    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, value, 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 [items, setItems] = react_1.default.useState([]);
+    const [currentValue, setCurrentValue] = react_1.default.useState();
+    const item = currentValue
+        ? items.find((item) => item.id === currentValue)
+        : undefined;
+    react_1.default.useEffect(() => {
+        // Load data
+        loadData().then((data) => {
+            if (data != null) {
+                setItems(data);
+            }
+        });
+    }, []);
+    react_1.default.useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    // Selected id
+    const tempSelectedId = react_1.default.useRef();
+    // Click handler
+    const clickHandler = () => {
+        app.showInputDialog({
+            title: popupTitle,
+            message: popupMessage,
+            callback: (form) => {
+                if (form == null || tempSelectedId.current == null)
+                    return;
+                const id = tempSelectedId.current;
+                setCurrentValue(id);
+                onValueChange?.(id);
+            },
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
+                    tempSelectedId.current = id;
+                } })),
+            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: currentValue }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), item ? ((0, jsx_runtime_1.jsx)(Chip_1.default, { sx: {
+                            height: "auto",
+                            pointerEvents: "none",
+                            "& .MuiChip-label": {
+                                display: "block",
+                                whiteSpace: "normal"
+                            }
+                        }, size: "small", label: labelFormatter(item) })) : undefined, labelEnd && (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", children: labelEnd })] })] }));
+}

package/lib/mjs/ButtonPopupCheckbox.d.ts

@@ -3,7 +3,7 @@ import { DataTypes, IdType } from "@etsoo/shared";
 type DnDItemType = {
     id: IdType;
 };
-export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick"> & {
+export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick" | "value"> & {
     /**
      * Add items splitter
      */
@@ -40,7 +40,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Load data
      */
-    loadData: (ids?: D["id"][]) => Promise<D[]>;
+    loadData: () => Promise<D[]>;
     /**
      * On add handler
      * @param ids Ids
@@ -64,9 +64,9 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      */
     required?: boolean;
     /**
-     * Ids
+     * Value
      */
-    ids?: D["id"][];
+    value?: D["id"][];
 };
 export declare function ButtonPopupCheckbox<D extends DnDItemType>(props: ButtonPopupCheckboxProps<D>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/mjs/ButtonPopupCheckbox.js

@@ -17,7 +17,7 @@ import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = React.createRef();
     // Ref
@@ -26,10 +26,10 @@ function ButtonPopupList(props) {
     const [selectedIds, setSelectedIds] = React.useState([]);
     React.useEffect(() => {
         // Sort items by ids for first load
-        items.sortByProperty("id", ids);
+        items.sortByProperty("id", value);
         // Set selected ids
-        setSelectedIds([...ids]);
-    }, [ids]);
+        setSelectedIds([...value]);
+    }, [value]);
     return (_jsxs(VBox, { gap: 2, children: [_jsx(FormGroup, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: 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, checked: selectedIds.includes(item.id), onChange: (e) => {
                                             const checked = e.target.checked;
                                             const newIds = [
@@ -67,7 +67,7 @@ export function ButtonPopupCheckbox(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -93,8 +93,8 @@ export function ButtonPopupCheckbox(props) {
     }, []);
     React.useEffect(() => {
         // Set selected ids
-        setSelectedIds(ids);
-    }, [ids]);
+        setSelectedIds(value);
+    }, [value]);
     // Selected ids
     const tempSelectedIds = React.useRef();
     // Click handler
@@ -109,7 +109,7 @@ export function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 onValueChange?.(ids);
             },
-            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, ids: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown
@@ -119,6 +119,8 @@ export function ButtonPopupCheckbox(props) {
                         const item = items.find((item) => item.id === id);
                         if (item == null)
                             return null;
-                        return _jsx(Chip, { size: "small", label: labelFormatter(item) }, id);
+                        return (_jsx(Chip, { sx: {
+                                pointerEvents: "none"
+                            }, size: "small", label: labelFormatter(item) }, id));
                     }), labelEnd && _jsx(Typography, { variant: "caption", children: labelEnd })] })] }));
 }

package/lib/mjs/ButtonPopupRadio.d.ts

@@ -0,0 +1,72 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DataTypes, IdType } from "@etsoo/shared";
+type DnDItemType = {
+    id: IdType;
+};
+export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "chidren" | "onClick" | "value"> & {
+    /**
+     * 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: () => Promise<D[]>;
+    /**
+     * On add handler
+     * @param ids Ids
+     */
+    onAdd?: (ids: string[]) => Promise<false | D[]>;
+    /**
+     * On value change handler
+     * @param id Id
+     */
+    onValueChange?: (id: D["id"]) => void;
+    /**
+     * Popup title
+     */
+    popupTitle?: string;
+    /**
+     * Popup message
+     */
+    popupMessage?: string;
+    /**
+     * The field is required or not
+     */
+    required?: boolean;
+    /**
+     * Value
+     */
+    value?: D["id"];
+};
+export declare function ButtonPopupRadio<D extends DnDItemType>(props: ButtonPopupRadioProps<D>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/ButtonPopupRadio.js

@@ -0,0 +1,121 @@
+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 { NumberUtils } from "@etsoo/shared";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import AddIcon from "@mui/icons-material/Add";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import TextField from "@mui/material/TextField";
+import FormLabel from "@mui/material/FormLabel";
+import RadioGroup from "@mui/material/RadioGroup";
+import { HBox, VBox } from "./FlexBox";
+import { useRequiredAppContext } from "./app/ReactApp";
+function ButtonPopupList(props) {
+    // Destruct
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, onAdd, onValueChange } = props;
+    // Ref
+    const inputRef = React.useRef(null);
+    // State
+    const [currentValue, setCurrentValue] = React.useState();
+    React.useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(RadioGroup, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
+                    const checked = e.target.checked;
+                    const value = checked
+                        ? typeof items[0].id === "number"
+                            ? NumberUtils.parse(v)
+                            : v
+                        : undefined;
+                    setCurrentValue(value);
+                    onValueChange(value);
+                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: _jsx(FormControlLabel, { control: _jsx(Radio, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), 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 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;
+                            }
+                            inputRef.current.value = "";
+                            inputRef.current.focus();
+                        }, children: labels?.add })] }))] }));
+}
+export function ButtonPopupRadio(props) {
+    // App
+    const app = useRequiredAppContext();
+    // Destruct
+    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+        if (labelField in data) {
+            return data[labelField];
+        }
+        return data.id.toString();
+    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, value, 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 [items, setItems] = React.useState([]);
+    const [currentValue, setCurrentValue] = React.useState();
+    const item = currentValue
+        ? items.find((item) => item.id === currentValue)
+        : undefined;
+    React.useEffect(() => {
+        // Load data
+        loadData().then((data) => {
+            if (data != null) {
+                setItems(data);
+            }
+        });
+    }, []);
+    React.useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    // Selected id
+    const tempSelectedId = React.useRef();
+    // Click handler
+    const clickHandler = () => {
+        app.showInputDialog({
+            title: popupTitle,
+            message: popupMessage,
+            callback: (form) => {
+                if (form == null || tempSelectedId.current == null)
+                    return;
+                const id = tempSelectedId.current;
+                setCurrentValue(id);
+                onValueChange?.(id);
+            },
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
+                    tempSelectedId.current = id;
+                } })),
+            fullScreen: app.smDown
+        });
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: currentValue }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && (_jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), item ? (_jsx(Chip, { sx: {
+                            height: "auto",
+                            pointerEvents: "none",
+                            "& .MuiChip-label": {
+                                display: "block",
+                                whiteSpace: "normal"
+                            }
+                        }, size: "small", label: labelFormatter(item) })) : undefined, labelEnd && _jsx(Typography, { variant: "caption", children: labelEnd })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.53",
+  "version": "1.5.54",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ButtonPopupCheckbox.tsx

@@ -22,7 +22,7 @@ type DnDItemType = {
 
 export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
   ButtonProps,
-  "chidren" | "onClick"
+  "chidren" | "onClick" | "value"
 > & {
   /**
    * Add items splitter
@@ -67,7 +67,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
   /**
    * Load data
    */
-  loadData: (ids?: D["id"][]) => Promise<D[]>;
+  loadData: () => Promise<D[]>;
 
   /**
    * On add handler
@@ -97,14 +97,14 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
   required?: boolean;
 
   /**
-   * Ids
+   * Value
    */
-  ids?: D["id"][];
+  value?: D["id"][];
 };
 
 type ButtonPopupListProps<D extends DnDItemType> = Pick<
   ButtonPopupCheckboxProps<D>,
-  "addSplitter" | "labelField" | "labels" | "onAdd" | "ids"
+  "addSplitter" | "labelField" | "labels" | "onAdd" | "value"
 > &
   Required<Pick<ButtonPopupCheckboxProps<D>, "labelFormatter">> & {
     /**
@@ -125,7 +125,7 @@ function ButtonPopupList<D extends DnDItemType>(
   // Destruct
   const {
     addSplitter = /\s*[,;]\s*/,
-    ids = [],
+    value = [],
     items,
     labelField,
     labelFormatter,
@@ -145,11 +145,11 @@ function ButtonPopupList<D extends DnDItemType>(
 
   React.useEffect(() => {
     // Sort items by ids for first load
-    items.sortByProperty("id", ids);
+    items.sortByProperty("id", value);
 
     // Set selected ids
-    setSelectedIds([...ids]);
-  }, [ids]);
+    setSelectedIds([...value]);
+  }, [value]);
 
   return (
     <VBox gap={2}>
@@ -262,7 +262,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
   // Destruct
   const {
     addSplitter,
-    ids = [],
+    value = [],
     inputName,
     label,
     labelEnd,
@@ -306,8 +306,8 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
 
   React.useEffect(() => {
     // Set selected ids
-    setSelectedIds(ids);
-  }, [ids]);
+    setSelectedIds(value);
+  }, [value]);
 
   // Selected ids
   const tempSelectedIds = React.useRef<D["id"][]>();
@@ -326,7 +326,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
       inputs: (
         <ButtonPopupList
           addSplitter={addSplitter}
-          ids={selectedIds}
+          value={selectedIds}
           items={items}
           labelFormatter={labelFormatter}
           labelField={labelField}
@@ -369,7 +369,16 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
           const item = items.find((item) => item.id === id);
           if (item == null) return null;
 
-          return <Chip key={id} size="small" label={labelFormatter(item)} />;
+          return (
+            <Chip
+              key={id}
+              sx={{
+                pointerEvents: "none"
+              }}
+              size="small"
+              label={labelFormatter(item)}
+            />
+          );
         })}
         {labelEnd && <Typography variant="caption">{labelEnd}</Typography>}
       </Button>

package/src/ButtonPopupRadio.tsx

@@ -0,0 +1,358 @@
+import Button, { ButtonProps } from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import React from "react";
+import { DataTypes, IdType, NumberUtils } from "@etsoo/shared";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import AddIcon from "@mui/icons-material/Add";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import TextField from "@mui/material/TextField";
+import FormLabel from "@mui/material/FormLabel";
+import RadioGroup from "@mui/material/RadioGroup";
+import { HBox, VBox } from "./FlexBox";
+import { useRequiredAppContext } from "./app/ReactApp";
+
+type DnDItemType = {
+  id: IdType;
+};
+
+export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
+  ButtonProps,
+  "chidren" | "onClick" | "value"
+> & {
+  /**
+   * 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: () => Promise<D[]>;
+
+  /**
+   * On add handler
+   * @param ids Ids
+   */
+  onAdd?: (ids: string[]) => Promise<false | D[]>;
+
+  /**
+   * On value change handler
+   * @param id Id
+   */
+  onValueChange?: (id: D["id"]) => void;
+
+  /**
+   * Popup title
+   */
+  popupTitle?: string;
+
+  /**
+   * Popup message
+   */
+  popupMessage?: string;
+
+  /**
+   * The field is required or not
+   */
+  required?: boolean;
+
+  /**
+   * Value
+   */
+  value?: D["id"];
+};
+
+type ButtonPopupListProps<D extends DnDItemType> = Pick<
+  ButtonPopupRadioProps<D>,
+  "addSplitter" | "labels" | "onAdd" | "value"
+> &
+  Required<Pick<ButtonPopupRadioProps<D>, "labelFormatter">> & {
+    /**
+     * Items to be displayed
+     */
+    items: D[];
+
+    /**
+     * On value change handler
+     * @param id Id
+     */
+    onValueChange: (id: D["id"]) => void;
+  };
+
+function ButtonPopupList<D extends DnDItemType>(
+  props: ButtonPopupListProps<D>
+) {
+  // Destruct
+  const {
+    addSplitter = /\s*[,;]\s*/,
+    value,
+    items,
+    labelFormatter,
+    labels,
+    onAdd,
+    onValueChange
+  } = props;
+
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // State
+  const [currentValue, setCurrentValue] = React.useState<D["id"]>();
+
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  return (
+    <VBox gap={2}>
+      <RadioGroup
+        value={currentValue ?? ""}
+        name="radio-buttons-group"
+        onChange={(e, v) => {
+          const checked = e.target.checked;
+          const value = checked
+            ? typeof items[0].id === "number"
+              ? NumberUtils.parse(v)
+              : v
+            : undefined;
+          setCurrentValue(value);
+          onValueChange(value as D["id"]);
+        }}
+      >
+        <Grid container spacing={0}>
+          {items.map((item) => (
+            <Grid
+              size={{ xs: 12, md: 6, lg: 4 }}
+              display="flex"
+              justifyContent="flex-start"
+              alignItems="center"
+              gap={1}
+              key={item.id}
+            >
+              <FormControlLabel
+                control={<Radio value={item.id} />}
+                label={`${labelFormatter(item)}`}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </RadioGroup>
+      {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 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;
+              }
+
+              inputRef.current.value = "";
+              inputRef.current.focus();
+            }}
+          >
+            {labels?.add}
+          </Button>
+        </HBox>
+      )}
+    </VBox>
+  );
+}
+
+export function ButtonPopupRadio<D extends DnDItemType>(
+  props: ButtonPopupRadioProps<D>
+) {
+  // App
+  const app = useRequiredAppContext();
+
+  // Destruct
+  const {
+    addSplitter,
+    inputName,
+    label,
+    labelEnd,
+    labelFormatter = (data) => {
+      if (labelField in data) {
+        return data[labelField] as string;
+      }
+
+      return data.id.toString();
+    },
+    labelField,
+    labels = {},
+    loadData,
+    onAdd,
+    onValueChange,
+    popupTitle = label,
+    popupMessage,
+    required = false,
+    sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" },
+    value,
+    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 [items, setItems] = React.useState<D[]>([]);
+  const [currentValue, setCurrentValue] = React.useState<D["id"]>();
+
+  const item = currentValue
+    ? items.find((item) => item.id === currentValue)
+    : undefined;
+
+  React.useEffect(() => {
+    // Load data
+    loadData().then((data) => {
+      if (data != null) {
+        setItems(data);
+      }
+    });
+  }, []);
+
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  // Selected id
+  const tempSelectedId = React.useRef<D["id"]>();
+
+  // Click handler
+  const clickHandler = () => {
+    app.showInputDialog({
+      title: popupTitle,
+      message: popupMessage,
+      callback: (form) => {
+        if (form == null || tempSelectedId.current == null) return;
+        const id = tempSelectedId.current;
+        setCurrentValue(id);
+        onValueChange?.(id);
+      },
+      inputs: (
+        <ButtonPopupList
+          addSplitter={addSplitter}
+          value={currentValue}
+          items={items}
+          labelFormatter={labelFormatter}
+          labels={labels}
+          onAdd={onAdd}
+          onValueChange={(id) => {
+            tempSelectedId.current = id;
+          }}
+        />
+      ),
+      fullScreen: app.smDown
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <input
+        type="text"
+        style={{ position: "absolute", opacity: 0, width: 0 }}
+        name={inputName}
+        required={required}
+        defaultValue={currentValue}
+      />
+      <Button
+        variant={variant}
+        sx={sx}
+        onClick={() => clickHandler()}
+        {...rest}
+        disabled={!items || items.length === 0}
+      >
+        {label && (
+          <FormLabel
+            required={required}
+            sx={{ fontSize: (theme) => theme.typography.body2.fontSize }}
+          >
+            {label}
+          </FormLabel>
+        )}
+        {item ? (
+          <Chip
+            sx={{
+              height: "auto",
+              pointerEvents: "none",
+              "& .MuiChip-label": {
+                display: "block",
+                whiteSpace: "normal"
+              }
+            }}
+            size="small"
+            label={labelFormatter(item)}
+          />
+        ) : undefined}
+        {labelEnd && <Typography variant="caption">{labelEnd}</Typography>}
+      </Button>
+    </React.Fragment>
+  );
+}