@etsoo/materialui 1.6.12 → 1.6.14

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from "@mui/material/Button";
 import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
 import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -64,6 +66,10 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/cjs/ButtonPopupCheckbox.js

@@ -22,7 +22,7 @@ const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 const DnDSortableList_1 = require("./DnDSortableList");
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, itemSize = { xs: 12, md: 6, lx: 4 }, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = react_1.default.createRef();
     // Refs
@@ -45,7 +45,7 @@ function ButtonPopupList(props) {
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, 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) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, 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 = [
                                         ...selectedIds.toggleItem(item.id, checked)
@@ -81,7 +81,7 @@ function ButtonPopupCheckbox(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (typeof labelField === "function")
             return labelField(data);
         if (labelField in data) {
@@ -130,7 +130,7 @@ function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 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) => {
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: selectedIds, items: items, labelFormatter: labelFormatter, labelField: labelField, itemSize: itemSize, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown

package/lib/cjs/ButtonPopupRadio.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DataTypes, IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -63,6 +65,10 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/cjs/ButtonPopupRadio.js

@@ -21,7 +21,7 @@ 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;
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, itemSize = { xs: 12, md: 6, lx: 4 }, onAdd, onValueChange } = props;
     // Ref
     const inputRef = react_1.default.useRef(null);
     // State
@@ -38,7 +38,7 @@ function ButtonPopupList(props) {
                         : 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 () => {
+                }, 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: itemSize, 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();
@@ -66,7 +66,7 @@ function ButtonPopupRadio(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -115,7 +115,7 @@ function ButtonPopupRadio(props) {
                 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) => {
+            inputs: ((0, jsx_runtime_1.jsx)(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, itemSize: itemSize, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
                     tempSelectedId.current = id;
                 } })),
             fullScreen: app.smDown

package/lib/cjs/DnDSortableList.d.ts

@@ -91,7 +91,7 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
     /**
      * Drag end handler
      */

package/lib/cjs/DnDSortableList.js

@@ -123,7 +123,28 @@ function DnDSortableList(props) {
             }
         };
     }, [items, labelFn, changeItems]);
-    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { onDragStart: (source) => onDragStart?.(items, source), onDragEnd: (source, target) => onDragEnd?.(items, source, target), children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
+    function handleDragEnd(...args) {
+        // Event
+        const event = args[0];
+        // Cancelled
+        if (event.canceled)
+            return;
+        if ((0, sortable_1.isSortableOperation)(event.operation) && event.operation.source) {
+            const { initialIndex, index } = event.operation.source;
+            if (initialIndex === index)
+                return;
+            // Clone
+            const newItems = [...items];
+            // Removed item
+            const [removed] = newItems.splice(initialIndex, 1);
+            // Insert to the destination index
+            newItems.splice(index, 0, removed);
+            changeItems(newItems);
+            // Drag end handler
+            onDragEnd?.(newItems, ...args);
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { onDragStart: (event) => onDragStart?.(items, event), onDragEnd: (event, manager) => handleDragEnd(event, manager), children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, children: items.map((item, index) => {
                 const id = idFn(item);
                 return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, index: index, data: item, itemRenderer: itemRenderer, itemStyle: itemStyle }, id));
             }) }) }));

package/lib/cjs/JsonTextField.d.ts

@@ -0,0 +1,20 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * JSON text field props
+ */
+export type JsonTextFieldProps = TextFieldProps & {
+    /**
+     * Whether the value is an array
+     */
+    isArray?: boolean;
+    /**
+     * Edit button click handler
+     */
+    onEdit?: (input: HTMLInputElement) => void;
+};
+/**
+ * JSON text field component
+ * @param props Props
+ * @returns Component
+ */
+export declare function JsonTextField(props: JsonTextFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/JsonTextField.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonTextField = JsonTextField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("./MUGlobal");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * JSON text field component
+ * @param props Props
+ * @returns Component
+ */
+function JsonTextField(props) {
+    // Destruct
+    const { fullWidth = true, inputRef, isArray = false, multiline = true, onChange, onEdit, rows = 3, slotProps, ...rest } = props;
+    // Slot props
+    const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
+    const localRef = react_2.default.useRef(null);
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { fullWidth: fullWidth, inputRef: (0, react_1.useCombinedRefs)(inputRef, localRef), multiline: multiline, onChange: (event) => {
+            const value = event.target.value.trim();
+            let errorMessage = "";
+            if (value.length > 0) {
+                try {
+                    const parsed = JSON.parse(value);
+                    if (isArray && !Array.isArray(parsed)) {
+                        errorMessage =
+                            app.get("jsonDataArrayError") || "Value must be a JSON array";
+                    }
+                    if (typeof parsed !== "object") {
+                        throw new Error("Parsed value is not an object");
+                    }
+                }
+                catch (e) {
+                    errorMessage =
+                        (app.get("jsonDataError") || "Invalid JSON text") + " - " + e;
+                }
+            }
+            event.target.setCustomValidity(errorMessage);
+            event.target.reportValidity();
+            onChange?.(event);
+        }, rows: rows, slotProps: {
+            input: {
+                endAdornment: onEdit ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => onEdit?.(localRef.current), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) }) })) : undefined,
+                ...input
+            },
+            inputLabel: {
+                shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, ...rest }));
+}

package/lib/cjs/custom/CustomAttributeArea.d.ts

@@ -0,0 +1,11 @@
+import { TextFieldProps } from "@mui/material/TextField";
+/**
+ * Custom attribute area properties
+ */
+export type CustomAttributeAreaProps = TextFieldProps & {};
+/**
+ * Custom attribute area
+ * @param props Properties
+ * @returns Component
+ */
+export declare function CustomAttributeArea(props: CustomAttributeAreaProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/custom/CustomAttributeArea.js

@@ -0,0 +1,194 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomAttributeArea = CustomAttributeArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+const react_1 = __importDefault(require("react"));
+const Card_1 = __importDefault(require("@mui/material/Card"));
+const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const appscript_1 = require("@etsoo/appscript");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const material_1 = require("@mui/material");
+const shared_1 = require("@etsoo/shared");
+const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const ComboBox_1 = require("../ComboBox");
+const InputField_1 = require("../InputField");
+const JsonTextField_1 = require("../JsonTextField");
+const FlexBox_1 = require("../FlexBox");
+const DnDSortableList_1 = require("../DnDSortableList");
+const ReactApp_1 = require("../app/ReactApp");
+const size = { xs: 6, sm: 4, lg: 3, xl: 2 };
+const smallSize = { xs: 3, sm: 2, xl: 1 };
+const random4Digit = () => {
+    return Math.floor(1000 + Math.random() * 9000);
+};
+const isCamelCase = (name) => {
+    return /^[a-z][a-zA-Z0-9]*$/.test(name);
+};
+function InputItemUIs({ data }) {
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Labels
+    const labels = app.getLabels("gridItemProps", "helperText", "label", "mainSlotProps", "nameB", "options", "optionsFormat", "refs", "size", "type");
+    const types = Object.keys(CustomFieldUtils_1.CustomFieldUtils.customFieldCreators);
+    const nameRef = react_1.default.useRef(null);
+    const optionsRef = react_1.default.useRef(null);
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, marginTop: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
+                        const type = item?.id;
+                        optionsRef.current.disabled =
+                            type !== "combobox" && type !== "select";
+                        const nameInput = nameRef.current;
+                        if (nameInput.value === "" &&
+                            (type === "amountlabel" || type === "divider" || type === "label")) {
+                            nameInput.value = type + random4Digit();
+                        }
+                    }, idValue: data?.type, fullWidth: true }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: "space", label: labels.size, inputRequired: true, size: "small", loadData: () => Promise.resolve(appscript_1.CustomFieldSpaceValues.map((t) => ({ id: t, label: t }))), idValue: data?.space, fullWidth: true }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { fullWidth: true, required: true, name: "name", size: "small", inputRef: nameRef, slotProps: { htmlInput: { maxLength: 128, readOnly: !!data } }, label: labels.nameB, defaultValue: data?.name ?? "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { fullWidth: true, name: "label", size: "small", slotProps: { htmlInput: { maxLength: 128 } }, label: labels.label, defaultValue: data?.label ?? "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 12 }, children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { fullWidth: true, name: "helperText", size: "small", label: labels.helperText, defaultValue: data?.helperText ?? "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 12 }, children: (0, jsx_runtime_1.jsx)(InputField_1.InputField, { fullWidth: true, name: "options", size: "small", multiline: true, rows: 2, label: labels.options, inputRef: optionsRef, helperText: labels.optionsFormat, slotProps: { htmlInput: { disabled: true } }, defaultValue: data?.options
+                        ? data.options
+                            .map((o) => `${o.id}=${shared_1.DataTypes.getListItemLabel(o)}`)
+                            .join("\n")
+                        : "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 12 }, children: (0, jsx_runtime_1.jsx)(JsonTextField_1.JsonTextField, { isArray: true, name: "refs", size: "small", multiline: false, label: labels.refs + " (JSON)", defaultValue: data?.refs ? JSON.stringify(data.refs) : "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 12 }, children: (0, jsx_runtime_1.jsx)(JsonTextField_1.JsonTextField, { name: "gridItemProps", size: "small", multiline: false, label: labels.gridItemProps + " (JSON)", defaultValue: data?.gridItemProps ? JSON.stringify(data.gridItemProps) : "" }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 12 }, children: (0, jsx_runtime_1.jsx)(JsonTextField_1.JsonTextField, { name: "mainSlotProps", size: "small", multiline: false, label: labels.mainSlotProps + " (JSON)", defaultValue: data?.mainSlotProps ? JSON.stringify(data.mainSlotProps) : "", helperText: '{"required":true}' }) })] }));
+}
+function InputUIs({ source, onChange }) {
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Labels
+    const labels = app.getLabels("add", "delete", "edit", "sortTip", "dragIndicator");
+    const [items, setItems] = react_1.default.useState([]);
+    const doChange = (items) => {
+        setItems(items);
+        onChange(items);
+    };
+    const editItem = (item) => {
+        app.showInputDialog({
+            title: item ? labels.edit : labels.add,
+            message: "",
+            callback: async (form) => {
+                // Cancelled
+                if (form == null) {
+                    return;
+                }
+                // Validate form
+                if (!form.reportValidity()) {
+                    return false;
+                }
+                // Form data
+                const { typeInput: type, spaceInput: space, name, label, helperText, options, refs, gridItemProps, mainSlotProps } = shared_1.DomUtils.dataAs(new FormData(form), {
+                    typeInput: "string",
+                    spaceInput: "string",
+                    name: "string",
+                    label: "string",
+                    helperText: "string",
+                    options: "string",
+                    refs: "string",
+                    gridItemProps: "string",
+                    mainSlotProps: "string"
+                });
+                if (!type || !space || !name) {
+                    return app.get("noData");
+                }
+                if (!isCamelCase(name)) {
+                    shared_1.DomUtils.setFocus("name", form);
+                    return app.get("invalidNaming") + " (camelCase)";
+                }
+                if (type !== "divider" && !label) {
+                    shared_1.DomUtils.setFocus("label", form);
+                    return false;
+                }
+                if (item == null && items.some((item) => item.name === name)) {
+                    return app.get("itemExists")?.format(name);
+                }
+                const optionsJson = options
+                    ? options.split("\n").map((line) => {
+                        const [id, ...labelParts] = line.split("=");
+                        return { id, label: labelParts.join("=") };
+                    })
+                    : undefined;
+                const refsJson = refs ? JSON.parse(refs) : undefined;
+                const gridItemPropsJson = gridItemProps
+                    ? JSON.parse(gridItemProps)
+                    : undefined;
+                const mainSlotPropsJson = mainSlotProps
+                    ? JSON.parse(mainSlotProps)
+                    : undefined;
+                if (item == null) {
+                    const newItem = {
+                        type,
+                        name,
+                        space: space,
+                        label,
+                        helperText,
+                        options: optionsJson,
+                        refs: refsJson,
+                        gridItemProps: gridItemPropsJson,
+                        mainSlotProps: mainSlotPropsJson
+                    };
+                    doChange([...items, newItem]);
+                }
+                else {
+                    item.type = type;
+                    item.space = space;
+                    item.name = name;
+                    item.label = label;
+                    item.helperText = helperText;
+                    item.options = optionsJson;
+                    item.refs = refsJson;
+                    item.gridItemProps = gridItemPropsJson;
+                    item.mainSlotProps = mainSlotPropsJson;
+                    doChange([...items]);
+                }
+                return;
+            },
+            inputs: (0, jsx_runtime_1.jsx)(InputItemUIs, { data: item })
+        });
+    };
+    react_1.default.useEffect(() => {
+        try {
+            if (source) {
+                const parsed = JSON.parse(source);
+                if (Array.isArray(parsed)) {
+                    setItems(parsed);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Failed to parse source:", error);
+        }
+    }, [source]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { marginBottom: 0.5, gap: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: labels.sortTip }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", color: "primary", variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => editItem(), children: labels.add })] }), (0, jsx_runtime_1.jsx)(Card_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, gap: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: smallSize, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [data.name, " - ", data.label] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: smallSize, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.edit, onClick: () => editItem(data), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) })] })] })) }) }) }) })] }));
+}
+/**
+ * Custom attribute area
+ * @param props Properties
+ * @returns Component
+ */
+function CustomAttributeArea(props) {
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Destruct
+    const { label = app.get("attributeDefinition"), ...rest } = props;
+    const ref = react_1.default.useRef([]);
+    const showUI = (input) => {
+        app.showInputDialog({
+            title: label,
+            message: "",
+            fullScreen: true,
+            callback: (form) => {
+                if (form == null) {
+                    return;
+                }
+                input.value = ref.current.length > 0 ? JSON.stringify(ref.current) : "";
+            },
+            inputs: ((0, jsx_runtime_1.jsx)(InputUIs, { source: input.value, onChange: (items) => (ref.current = items) }))
+        });
+    };
+    // Layout
+    return (0, jsx_runtime_1.jsx)(JsonTextField_1.JsonTextField, { label: label, onEdit: showUI, isArray: true, ...rest });
+}

package/lib/cjs/index.d.ts

@@ -6,6 +6,7 @@ export * from "./app/ISmartERPUser";
 export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
+export * from "./custom/CustomAttributeArea";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
@@ -73,6 +74,7 @@ export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
 export * from "./JsonDataInput";
+export * from "./JsonTextField";
 export * from "./LineChart";
 export * from "./LinkEx";
 export * from "./ListChooser";

package/lib/cjs/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./app/ISmartERPUser"), exports);
 __exportStar(require("./app/Labels"), exports);
 __exportStar(require("./app/ReactApp"), exports);
 __exportStar(require("./app/ServiceApp"), exports);
+__exportStar(require("./custom/CustomAttributeArea"), exports);
 __exportStar(require("./custom/CustomFieldUtils"), exports);
 __exportStar(require("./custom/CustomFieldViewer"), exports);
 __exportStar(require("./custom/CustomFieldWindow"), exports);
@@ -89,6 +90,7 @@ __exportStar(require("./InputTipField"), exports);
 __exportStar(require("./IntInputField"), exports);
 __exportStar(require("./ItemList"), exports);
 __exportStar(require("./JsonDataInput"), exports);
+__exportStar(require("./JsonTextField"), exports);
 __exportStar(require("./LineChart"), exports);
 __exportStar(require("./LinkEx"), exports);
 __exportStar(require("./ListChooser"), exports);

package/lib/mjs/ButtonPopupCheckbox.d.ts

@@ -1,6 +1,8 @@
 import { ButtonProps } from "@mui/material/Button";
 import { IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
 import { DnDSortableListProps } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -64,6 +66,10 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/mjs/ButtonPopupCheckbox.js

@@ -16,7 +16,7 @@ import FormLabel from "@mui/material/FormLabel";
 import { DnDSortableList } from "./DnDSortableList";
 function ButtonPopupList(props) {
     // Destruct
-    const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
+    const { addSplitter = /\s*[,;]\s*/, value = [], items, itemSize = { xs: 12, md: 6, lx: 4 }, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
     // Methods
     const dndRef = React.createRef();
     // Refs
@@ -39,7 +39,7 @@ function ButtonPopupList(props) {
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, 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 = [
                                         ...selectedIds.toggleItem(item.id, checked)
@@ -75,7 +75,7 @@ export function ButtonPopupCheckbox(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, value = [], inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, value = [], inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (typeof labelField === "function")
             return labelField(data);
         if (labelField in data) {
@@ -124,7 +124,7 @@ export function ButtonPopupCheckbox(props) {
                 setSelectedIds(ids);
                 onValueChange?.(ids);
             },
-            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: 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, itemSize: itemSize, labels: labels, onAdd: onAdd, onValueChange: (ids) => {
                     tempSelectedIds.current = ids;
                 } })),
             fullScreen: app.smDown

package/lib/mjs/ButtonPopupRadio.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@mui/material/Button";
 import { DataTypes, IdType } from "@etsoo/shared";
+import { GridSize } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 type DnDItemType = {
     id: IdType;
 };
@@ -63,6 +65,10 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
      * The field is required or not
      */
     required?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: ResponsiveStyleValue<GridSize>;
     /**
      * Value
      */

package/lib/mjs/ButtonPopupRadio.js

@@ -15,7 +15,7 @@ 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;
+    const { addSplitter = /\s*[,;]\s*/, value, items, labelFormatter, labels, itemSize = { xs: 12, md: 6, lx: 4 }, onAdd, onValueChange } = props;
     // Ref
     const inputRef = React.useRef(null);
     // State
@@ -32,7 +32,7 @@ function ButtonPopupList(props) {
                         : 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 () => {
+                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: itemSize, 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();
@@ -60,7 +60,7 @@ export function ButtonPopupRadio(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, inputName, itemSize, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
@@ -109,7 +109,7 @@ export function ButtonPopupRadio(props) {
                 setCurrentValue(id);
                 onValueChange?.(id);
             },
-            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
+            inputs: (_jsx(ButtonPopupList, { addSplitter: addSplitter, value: currentValue, items: items, itemSize: itemSize, labelFormatter: labelFormatter, labels: labels, onAdd: onAdd, onValueChange: (id) => {
                     tempSelectedId.current = id;
                 } })),
             fullScreen: app.smDown

package/lib/mjs/DnDSortableList.d.ts

@@ -91,7 +91,7 @@ export type DnDSortableListProps<D extends object, E extends React.ElementType =
     /**
      * Drag start handler
      */
-    onDragStart?: (items: D[], source: Parameters<DragDropEvents["dragstart"]>[0]) => void;
+    onDragStart?: (items: D[], event: Parameters<DragDropEvents["dragstart"]>[0]) => void;
     /**
      * Drag end handler
      */