@etsoo/materialui 1.6.12 → 1.6.14

package/lib/mjs/DnDSortableList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { useTheme } from "@mui/material/styles";
-import { useSortable } from "@dnd-kit/react/sortable";
+import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
 import { DragDropProvider } from "@dnd-kit/react";
 /**
  * DnD sortable item default style
@@ -115,7 +115,28 @@ export function DnDSortableList(props) {
             }
         };
     }, [items, labelFn, changeItems]);
-    return (_jsx(DragDropProvider, { onDragStart: (source) => onDragStart?.(items, source), onDragEnd: (source, target) => onDragEnd?.(items, source, target), children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
+    function handleDragEnd(...args) {
+        // Event
+        const event = args[0];
+        // Cancelled
+        if (event.canceled)
+            return;
+        if (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 (_jsx(DragDropProvider, { onDragStart: (event) => onDragStart?.(items, event), onDragEnd: (event, manager) => handleDragEnd(event, manager), children: _jsx(Component, { ...componentProps, children: items.map((item, index) => {
                 const id = idFn(item);
                 return (_jsx(SortableItem, { id: id, index: index, data: item, itemRenderer: itemRenderer, itemStyle: itemStyle }, id));
             }) }) }));

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.12",
+  "version": "1.6.14",
   "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

@@ -2,7 +2,7 @@ import Button, { ButtonProps } from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import React from "react";
 import { DataTypes, IdType } from "@etsoo/shared";
-import Grid from "@mui/material/Grid";
+import Grid, { GridSize } from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import AddIcon from "@mui/icons-material/Add";
@@ -18,6 +18,7 @@ import {
   DnDSortableListProps,
   DnDSortableListRef
 } from "./DnDSortableList";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 type DnDItemType = {
   id: IdType;
@@ -99,6 +100,11 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
    */
   required?: boolean;
 
+  /**
+   * Item size
+   */
+  itemSize?: ResponsiveStyleValue<GridSize>;
+
   /**
    * Value
    */
@@ -107,7 +113,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
 
 type ButtonPopupListProps<D extends DnDItemType> = Pick<
   ButtonPopupCheckboxProps<D>,
-  "addSplitter" | "labelField" | "labels" | "onAdd" | "value"
+  "addSplitter" | "labelField" | "labels" | "onAdd" | "value" | "itemSize"
 > &
   Required<Pick<ButtonPopupCheckboxProps<D>, "labelFormatter">> & {
     /**
@@ -130,6 +136,7 @@ function ButtonPopupList<D extends DnDItemType>(
     addSplitter = /\s*[,;]\s*/,
     value = [],
     items,
+    itemSize = { xs: 12, md: 6, lx: 4 },
     labelField,
     labelFormatter,
     labels,
@@ -180,7 +187,7 @@ function ButtonPopupList<D extends DnDItemType>(
           { sortable: { index }, ref, handleRef }
         ) => (
           <Grid
-            size={{ xs: 12, md: 6, lg: 4 }}
+            size={itemSize}
             display="flex"
             justifyContent="flex-start"
             alignItems="center"
@@ -281,6 +288,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
     addSplitter,
     value = [],
     inputName,
+    itemSize,
     label,
     labelEnd,
     labelFormatter = (data) => {
@@ -353,6 +361,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
           items={items}
           labelFormatter={labelFormatter}
           labelField={labelField}
+          itemSize={itemSize}
           labels={labels}
           onAdd={onAdd}
           onValueChange={(ids) => {

package/src/ButtonPopupRadio.tsx

@@ -2,7 +2,7 @@ import Button, { ButtonProps } from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import React from "react";
 import { DataTypes, IdType, NumberUtils } from "@etsoo/shared";
-import Grid from "@mui/material/Grid";
+import Grid, { GridSize } from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import AddIcon from "@mui/icons-material/Add";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -12,6 +12,7 @@ import FormLabel from "@mui/material/FormLabel";
 import RadioGroup from "@mui/material/RadioGroup";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 type DnDItemType = {
   id: IdType;
@@ -93,6 +94,11 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
    */
   required?: boolean;
 
+  /**
+   * Item size
+   */
+  itemSize?: ResponsiveStyleValue<GridSize>;
+
   /**
    * Value
    */
@@ -101,7 +107,7 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
 
 type ButtonPopupListProps<D extends DnDItemType> = Pick<
   ButtonPopupRadioProps<D>,
-  "addSplitter" | "labels" | "onAdd" | "value"
+  "addSplitter" | "labels" | "onAdd" | "value" | "itemSize"
 > &
   Required<Pick<ButtonPopupRadioProps<D>, "labelFormatter">> & {
     /**
@@ -126,6 +132,7 @@ function ButtonPopupList<D extends DnDItemType>(
     items,
     labelFormatter,
     labels,
+    itemSize = { xs: 12, md: 6, lx: 4 },
     onAdd,
     onValueChange
   } = props;
@@ -159,7 +166,7 @@ function ButtonPopupList<D extends DnDItemType>(
         <Grid container spacing={0}>
           {items.map((item) => (
             <Grid
-              size={{ xs: 12, md: 6, lg: 4 }}
+              size={itemSize}
               display="flex"
               justifyContent="flex-start"
               alignItems="center"
@@ -233,6 +240,7 @@ export function ButtonPopupRadio<D extends DnDItemType>(
   const {
     addSplitter,
     inputName,
+    itemSize,
     label,
     labelEnd,
     labelFormatter = (data) => {
@@ -305,6 +313,7 @@ export function ButtonPopupRadio<D extends DnDItemType>(
           addSplitter={addSplitter}
           value={currentValue}
           items={items}
+          itemSize={itemSize}
           labelFormatter={labelFormatter}
           labels={labels}
           onAdd={onAdd}

package/src/DnDSortableList.tsx

@@ -1,7 +1,7 @@
 import { DataTypes, IdType } from "@etsoo/shared";
 import React from "react";
 import { CSSProperties, Theme, useTheme } from "@mui/material/styles";
-import { useSortable } from "@dnd-kit/react/sortable";
+import { isSortableOperation, useSortable } from "@dnd-kit/react/sortable";
 import { DragDropEvents, DragDropProvider } from "@dnd-kit/react";
 
 /**
@@ -126,7 +126,7 @@ export type DnDSortableListProps<
    */
   onDragStart?: (
     items: D[],
-    source: Parameters<DragDropEvents["dragstart"]>[0]
+    event: Parameters<DragDropEvents["dragstart"]>[0]
   ) => void;
 
   /**
@@ -293,10 +293,37 @@ export function DnDSortableList<
     };
   }, [items, labelFn, changeItems]);
 
+  function handleDragEnd(...args: Parameters<DragDropEvents["dragend"]>) {
+    // Event
+    const event = args[0];
+
+    // Cancelled
+    if (event.canceled) return;
+
+    if (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 (
     <DragDropProvider
-      onDragStart={(source) => onDragStart?.(items, source)}
-      onDragEnd={(source, target) => onDragEnd?.(items, source, target)}
+      onDragStart={(event) => onDragStart?.(items, event)}
+      onDragEnd={(event, manager) => handleDragEnd(event, manager)}
     >
       <Component {...componentProps}>
         {items.map((item, index) => {

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}
+    />
+  );
+}