@etsoo/materialui 1.6.13 → 1.6.15

package/lib/cjs/ButtonPopupCheckbox.js

@@ -51,6 +51,7 @@ function ButtonPopupList(props) {
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
                                     setSelectedIdsHandler(newIds);
+                                    onValueChange(newIds);
                                 } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), 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;

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.js

@@ -45,6 +45,7 @@ function ButtonPopupList(props) {
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
                                     setSelectedIdsHandler(newIds);
+                                    onValueChange(newIds);
                                 } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), 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;

package/lib/mjs/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/mjs/JsonTextField.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCombinedRefs } from "@etsoo/react";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import EditIcon from "@mui/icons-material/Edit";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { useRequiredAppContext } from "./app/ReactApp";
+/**
+ * JSON text field component
+ * @param props Props
+ * @returns Component
+ */
+export 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.useRef(null);
+    // Global app
+    const app = useRequiredAppContext();
+    return (_jsx(TextField, { fullWidth: fullWidth, inputRef: 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 ? (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => onEdit?.(localRef.current), children: _jsx(EditIcon, {}) }) })) : undefined,
+                ...input
+            },
+            inputLabel: {
+                shrink: MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, ...rest }));
+}

package/lib/mjs/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/mjs/custom/CustomAttributeArea.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import AddIcon from "@mui/icons-material/Add";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import React from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Grid";
+import { CustomFieldSpaceValues } from "@etsoo/appscript";
+import Button from "@mui/material/Button";
+import { Typography } from "@mui/material";
+import { DataTypes, DomUtils } from "@etsoo/shared";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+import { ComboBox } from "../ComboBox";
+import { InputField } from "../InputField";
+import { JsonTextField } from "../JsonTextField";
+import { HBox } from "../FlexBox";
+import { DnDSortableList } from "../DnDSortableList";
+import { useRequiredAppContext } from "../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 = useRequiredAppContext();
+    // Labels
+    const labels = app.getLabels("gridItemProps", "helperText", "label", "mainSlotProps", "nameB", "options", "optionsFormat", "refs", "size", "type");
+    const types = Object.keys(CustomFieldUtils.customFieldCreators);
+    const nameRef = React.useRef(null);
+    const optionsRef = React.useRef(null);
+    return (_jsxs(Grid, { container: true, spacing: 2, marginTop: 1, children: [_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(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 }) }), _jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(ComboBox, { name: "space", label: labels.size, inputRequired: true, size: "small", loadData: () => Promise.resolve(CustomFieldSpaceValues.map((t) => ({ id: t, label: t }))), idValue: data?.space, fullWidth: true }) }), _jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(InputField, { fullWidth: true, required: true, name: "name", size: "small", inputRef: nameRef, slotProps: { htmlInput: { maxLength: 128, readOnly: !!data } }, label: labels.nameB, defaultValue: data?.name ?? "" }) }), _jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(InputField, { fullWidth: true, name: "label", size: "small", slotProps: { htmlInput: { maxLength: 128 } }, label: labels.label, defaultValue: data?.label ?? "" }) }), _jsx(Grid, { size: { xs: 12, sm: 12 }, children: _jsx(InputField, { fullWidth: true, name: "helperText", size: "small", label: labels.helperText, defaultValue: data?.helperText ?? "" }) }), _jsx(Grid, { size: { xs: 12, sm: 12 }, children: _jsx(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}=${DataTypes.getListItemLabel(o)}`)
+                            .join("\n")
+                        : "" }) }), _jsx(Grid, { size: { xs: 12, sm: 12 }, children: _jsx(JsonTextField, { isArray: true, name: "refs", size: "small", multiline: false, label: labels.refs + " (JSON)", defaultValue: data?.refs ? JSON.stringify(data.refs) : "" }) }), _jsx(Grid, { size: { xs: 12, sm: 12 }, children: _jsx(JsonTextField, { name: "gridItemProps", size: "small", multiline: false, label: labels.gridItemProps + " (JSON)", defaultValue: data?.gridItemProps ? JSON.stringify(data.gridItemProps) : "" }) }), _jsx(Grid, { size: { xs: 12, sm: 12 }, children: _jsx(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 = useRequiredAppContext();
+    // Labels
+    const labels = app.getLabels("add", "delete", "edit", "sortTip", "dragIndicator");
+    const [items, setItems] = React.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 } = 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)) {
+                    DomUtils.setFocus("name", form);
+                    return app.get("invalidNaming") + " (camelCase)";
+                }
+                if (type !== "divider" && !label) {
+                    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: _jsx(InputItemUIs, { data: item })
+        });
+    };
+    React.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 (_jsxs(React.Fragment, { children: [_jsxs(HBox, { marginBottom: 0.5, gap: 1, alignItems: "center", children: [_jsx(Typography, { children: labels.sortTip }), _jsx(Button, { size: "small", color: "primary", variant: "outlined", startIcon: _jsx(AddIcon, {}), onClick: () => editItem(), children: labels.add })] }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, gap: 1, children: [_jsx(Grid, { size: smallSize, children: _jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }) }), _jsxs(Grid, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), _jsxs(Grid, { size: size, children: [data.name, " - ", data.label] }), _jsxs(Grid, { size: smallSize, children: [_jsx(IconButton, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: _jsx(DeleteIcon, {}) }), _jsx(IconButton, { size: "small", title: labels.edit, onClick: () => editItem(data), children: _jsx(EditIcon, {}) })] })] })) }) }) }) })] }));
+}
+/**
+ * Custom attribute area
+ * @param props Properties
+ * @returns Component
+ */
+export function CustomAttributeArea(props) {
+    // Global app
+    const app = useRequiredAppContext();
+    // Destruct
+    const { label = app.get("attributeDefinition"), ...rest } = props;
+    const ref = React.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: (_jsx(InputUIs, { source: input.value, onChange: (items) => (ref.current = items) }))
+        });
+    };
+    // Layout
+    return _jsx(JsonTextField, { label: label, onEdit: showUI, isArray: true, ...rest });
+}

package/lib/mjs/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/mjs/index.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -39,9 +39,9 @@
     "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.53",
+    "@etsoo/appscript": "^1.6.56",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.74",
+    "@etsoo/react": "^1.8.76",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.3.8",

package/src/ButtonPopupCheckbox.tsx

@@ -215,6 +215,7 @@ function ButtonPopupList<D extends DnDItemType>(
                       ...selectedIds.toggleItem(item.id, checked)
                     ];
                     setSelectedIdsHandler(newIds);
+                    onValueChange(newIds);
                   }}
                 />
               }

package/src/JsonTextField.tsx

@@ -0,0 +1,104 @@
+import { useCombinedRefs } from "@etsoo/react";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import EditIcon from "@mui/icons-material/Edit";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { useRequiredAppContext } from "./app/ReactApp";
+
+/**
+ * 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 function JsonTextField(props: JsonTextFieldProps) {
+  // 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.useRef<HTMLInputElement>(null);
+
+  // Global app
+  const app = useRequiredAppContext();
+
+  return (
+    <TextField
+      fullWidth={fullWidth}
+      inputRef={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 ? (
+            <InputAdornment position="end">
+              <IconButton onClick={() => onEdit?.(localRef.current!)}>
+                <EditIcon />
+              </IconButton>
+            </InputAdornment>
+          ) : undefined,
+          ...input
+        },
+        inputLabel: {
+          shrink: MUGlobal.inputFieldShrink,
+          ...inputLabel
+        },
+        ...restSlotProps
+      }}
+      {...rest}
+    />
+  );
+}

package/src/custom/CustomAttributeArea.tsx

@@ -0,0 +1,454 @@
+import { TextFieldProps } from "@mui/material/TextField";
+import IconButton from "@mui/material/IconButton";
+import AddIcon from "@mui/icons-material/Add";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import React from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Grid";
+import { CustomFieldData, CustomFieldSpaceValues } from "@etsoo/appscript";
+import Button from "@mui/material/Button";
+import { Typography } from "@mui/material";
+import { DataTypes, DomUtils } from "@etsoo/shared";
+import { CustomFieldUtils } from "./CustomFieldUtils";
+import { ComboBox } from "../ComboBox";
+import { InputField } from "../InputField";
+import { JsonTextField } from "../JsonTextField";
+import { HBox } from "../FlexBox";
+import { DnDSortableList } from "../DnDSortableList";
+import { useRequiredAppContext } from "../app/ReactApp";
+
+const size = { xs: 6, sm: 4, lg: 3, xl: 2 };
+const smallSize = { xs: 3, sm: 2, xl: 1 };
+
+const random4Digit = (): number => {
+  return Math.floor(1000 + Math.random() * 9000);
+};
+
+const isCamelCase = (name: string): boolean => {
+  return /^[a-z][a-zA-Z0-9]*$/.test(name);
+};
+
+function InputItemUIs({ data }: { data?: CustomFieldData }) {
+  // Global app
+  const app = useRequiredAppContext();
+
+  // Labels
+  const labels = app.getLabels(
+    "gridItemProps",
+    "helperText",
+    "label",
+    "mainSlotProps",
+    "nameB",
+    "options",
+    "optionsFormat",
+    "refs",
+    "size",
+    "type"
+  );
+
+  const types = Object.keys(CustomFieldUtils.customFieldCreators);
+
+  const nameRef = React.useRef<HTMLInputElement>(null);
+  const optionsRef = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <Grid container spacing={2} marginTop={1}>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <ComboBox
+          name="type"
+          label={labels.type}
+          inputRequired
+          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
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <ComboBox
+          name="space"
+          label={labels.size}
+          inputRequired
+          size="small"
+          loadData={() =>
+            Promise.resolve(
+              CustomFieldSpaceValues.map((t) => ({ id: t, label: t }))
+            )
+          }
+          idValue={data?.space}
+          fullWidth
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <InputField
+          fullWidth
+          required
+          name="name"
+          size="small"
+          inputRef={nameRef}
+          slotProps={{ htmlInput: { maxLength: 128, readOnly: !!data } }}
+          label={labels.nameB}
+          defaultValue={data?.name ?? ""}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <InputField
+          fullWidth
+          name="label"
+          size="small"
+          slotProps={{ htmlInput: { maxLength: 128 } }}
+          label={labels.label}
+          defaultValue={data?.label ?? ""}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 12 }}>
+        <InputField
+          fullWidth
+          name="helperText"
+          size="small"
+          label={labels.helperText}
+          defaultValue={data?.helperText ?? ""}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 12 }}>
+        <InputField
+          fullWidth
+          name="options"
+          size="small"
+          multiline
+          rows={2}
+          label={labels.options}
+          inputRef={optionsRef}
+          helperText={labels.optionsFormat}
+          slotProps={{ htmlInput: { disabled: true } }}
+          defaultValue={
+            data?.options
+              ? data.options
+                  .map((o) => `${o.id}=${DataTypes.getListItemLabel(o)}`)
+                  .join("\n")
+              : ""
+          }
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 12 }}>
+        <JsonTextField
+          isArray
+          name="refs"
+          size="small"
+          multiline={false}
+          label={labels.refs + " (JSON)"}
+          defaultValue={data?.refs ? JSON.stringify(data.refs) : ""}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 12 }}>
+        <JsonTextField
+          name="gridItemProps"
+          size="small"
+          multiline={false}
+          label={labels.gridItemProps + " (JSON)"}
+          defaultValue={
+            data?.gridItemProps ? JSON.stringify(data.gridItemProps) : ""
+          }
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 12 }}>
+        <JsonTextField
+          name="mainSlotProps"
+          size="small"
+          multiline={false}
+          label={labels.mainSlotProps + " (JSON)"}
+          defaultValue={
+            data?.mainSlotProps ? JSON.stringify(data.mainSlotProps) : ""
+          }
+          helperText='{"required":true}'
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+function InputUIs({
+  source,
+  onChange
+}: {
+  source?: string;
+  onChange: (items: CustomFieldData[]) => void;
+}) {
+  // Global app
+  const app = useRequiredAppContext();
+
+  // Labels
+  const labels = app.getLabels(
+    "add",
+    "delete",
+    "edit",
+    "sortTip",
+    "dragIndicator"
+  );
+
+  const [items, setItems] = React.useState<CustomFieldData[]>([]);
+
+  const doChange = (items: CustomFieldData[]) => {
+    setItems(items);
+    onChange(items);
+  };
+
+  const editItem = (item?: CustomFieldData) => {
+    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
+        } = 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)) {
+          DomUtils.setFocus("name", form);
+          return app.get("invalidNaming") + " (camelCase)";
+        }
+
+        if (type !== "divider" && !label) {
+          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: CustomFieldData = {
+            type,
+            name,
+            space: space as CustomFieldData["space"],
+            label,
+            helperText,
+            options: optionsJson,
+            refs: refsJson,
+            gridItemProps: gridItemPropsJson,
+            mainSlotProps: mainSlotPropsJson
+          };
+
+          doChange([...items, newItem]);
+        } else {
+          item.type = type;
+          item.space = space as CustomFieldData["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: <InputItemUIs data={item} />
+    });
+  };
+
+  React.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 (
+    <React.Fragment>
+      <HBox marginBottom={0.5} gap={1} alignItems="center">
+        <Typography>{labels.sortTip}</Typography>
+        <Button
+          size="small"
+          color="primary"
+          variant="outlined"
+          startIcon={<AddIcon />}
+          onClick={() => editItem()}
+        >
+          {labels.add}
+        </Button>
+      </HBox>
+      <Card>
+        <CardContent>
+          <Grid container spacing={0}>
+            <DnDSortableList<CustomFieldData>
+              items={items}
+              idField={(item) => item.name!}
+              labelField={(item) => item.label || item.name!}
+              onChange={(items) => doChange(items)}
+              itemRenderer={(
+                data,
+                style,
+                { sortable: { index }, ref, handleRef }
+              ) => (
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 12 }}
+                  ref={ref}
+                  style={style}
+                  gap={1}
+                >
+                  <Grid size={smallSize}>
+                    <IconButton
+                      style={{ cursor: "move" }}
+                      size="small"
+                      title={labels.dragIndicator}
+                      ref={handleRef}
+                    >
+                      <DragIndicatorIcon />
+                    </IconButton>
+                  </Grid>
+                  <Grid size={size}>
+                    {index + 1} - {data.type} / {data.space}
+                  </Grid>
+                  <Grid size={size}>
+                    {data.name} - {data.label}
+                  </Grid>
+                  <Grid size={smallSize}>
+                    <IconButton
+                      size="small"
+                      title={labels.delete}
+                      onClick={() =>
+                        doChange(
+                          items.filter((item) => item.name !== data.name)
+                        )
+                      }
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      title={labels.edit}
+                      onClick={() => editItem(data)}
+                    >
+                      <EditIcon />
+                    </IconButton>
+                  </Grid>
+                </Grid>
+              )}
+            ></DnDSortableList>
+          </Grid>
+        </CardContent>
+      </Card>
+    </React.Fragment>
+  );
+}
+
+/**
+ * Custom attribute area properties
+ */
+export type CustomAttributeAreaProps = TextFieldProps & {};
+
+/**
+ * Custom attribute area
+ * @param props Properties
+ * @returns Component
+ */
+export function CustomAttributeArea(props: CustomAttributeAreaProps) {
+  // Global app
+  const app = useRequiredAppContext();
+
+  // Destruct
+  const { label = app.get("attributeDefinition"), ...rest } = props;
+
+  const ref = React.useRef<CustomFieldData[]>([]);
+
+  const showUI = (input: HTMLInputElement) => {
+    app.showInputDialog({
+      title: label,
+      message: "",
+      fullScreen: true,
+      callback: (form) => {
+        if (form == null) {
+          return;
+        }
+
+        input.value = ref.current.length > 0 ? JSON.stringify(ref.current) : "";
+      },
+      inputs: (
+        <InputUIs
+          source={input.value}
+          onChange={(items) => (ref.current = items)}
+        />
+      )
+    });
+  };
+
+  // Layout
+  return <JsonTextField label={label} onEdit={showUI} isArray {...rest} />;
+}

package/src/index.ts

@@ -7,6 +7,7 @@ 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";
@@ -79,6 +80,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";