@etsoo/materialui 1.5.61 → 1.5.63

package/lib/cjs/DnDList.js

@@ -65,8 +65,10 @@ function DnDList(props) {
         setItems(props.items);
     }, [props.items]);
     const doFormChange = react_1.default.useCallback((newItems) => {
-        if (onFormChange)
-            onFormChange(newItems ?? items);
+        if (onFormChange) {
+            const locals = Array.isArray(newItems) ? newItems : items;
+            onFormChange(locals);
+        }
     }, [items, onFormChange]);
     const changeItems = react_1.default.useCallback((newItems) => {
         // Possible to alter items with the handler
@@ -153,38 +155,27 @@ function DnDList(props) {
             ]);
         });
     }, []);
-    const doChange = react_1.default.useCallback(() => doFormChange(), []);
     const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Textareas
         div
             .querySelectorAll("textarea")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Select
         div
             .querySelectorAll("select")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
     };
-    const divRef = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
-        if (divRef.current) {
-            setupDiv(divRef.current);
-        }
-        return () => {
-            if (divRef.current) {
-                setupDiv(divRef.current, true);
-            }
-        };
-    }, []);
+    const divRef = react_1.default.useRef();
     if (dnd == null) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
     }
@@ -233,7 +224,15 @@ function DnDList(props) {
                     return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
                 }) }) }) }));
     if (onFormChange) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: divRef, children: children }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: (div) => {
+                if (div && divRef.current != div) {
+                    if (divRef.current) {
+                        setupDiv(divRef.current, true);
+                    }
+                    divRef.current = div;
+                    setupDiv(div);
+                }
+            }, children: children }));
     }
     return children;
 }

package/lib/cjs/JsonDataInput.d.ts

@@ -0,0 +1,11 @@
+import { InputFieldProps } from "./InputField";
+/**
+ * JSON data input component properties
+ */
+export type JsonDataInputProps = Omit<InputFieldProps, "multiple">;
+/**
+ * JSON data input component
+ * @param props - Component properties
+ * @returns JSX Element
+ */
+export declare function JsonDataInput(props: JsonDataInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/JsonDataInput.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonDataInput = JsonDataInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * JSON data input component
+ * @param props - Component properties
+ * @returns JSX Element
+ */
+function JsonDataInput(props) {
+    // Destruct
+    const { onChange, rows = 3, ...rest } = props;
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    const jsonError = app.get("jsonDataError") ?? "JSON format error";
+    // Error message
+    const [error, setError] = react_1.default.useState();
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { multiline: true, rows: rows, ...rest, error: !!error, helperText: error, onChange: (e) => {
+            if (onChange) {
+                onChange(e);
+                if (e.isDefaultPrevented())
+                    return;
+            }
+            const json = e.target.value;
+            if (json) {
+                try {
+                    JSON.parse(json);
+                }
+                catch (e) {
+                    setError(`${jsonError}: ${e instanceof Error ? e.message : String(e)}`);
+                    return;
+                }
+            }
+            setError(undefined);
+        } }));
+}

package/lib/cjs/index.d.ts

@@ -70,6 +70,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./JsonDataInput";
 export * from "./LineChart";
 export * from "./LinkEx";
 export * from "./ListChooser";

package/lib/cjs/index.js

@@ -86,6 +86,7 @@ __exportStar(require("./InputField"), exports);
 __exportStar(require("./InputTipField"), exports);
 __exportStar(require("./IntInputField"), exports);
 __exportStar(require("./ItemList"), exports);
+__exportStar(require("./JsonDataInput"), exports);
 __exportStar(require("./LineChart"), exports);
 __exportStar(require("./LinkEx"), exports);
 __exportStar(require("./ListChooser"), exports);

package/lib/mjs/DnDList.js

@@ -57,8 +57,10 @@ export function DnDList(props) {
         setItems(props.items);
     }, [props.items]);
     const doFormChange = React.useCallback((newItems) => {
-        if (onFormChange)
-            onFormChange(newItems ?? items);
+        if (onFormChange) {
+            const locals = Array.isArray(newItems) ? newItems : items;
+            onFormChange(locals);
+        }
     }, [items, onFormChange]);
     const changeItems = React.useCallback((newItems) => {
         // Possible to alter items with the handler
@@ -145,38 +147,27 @@ export function DnDList(props) {
             ]);
         });
     }, []);
-    const doChange = React.useCallback(() => doFormChange(), []);
     const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Textareas
         div
             .querySelectorAll("textarea")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Select
         div
             .querySelectorAll("select")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
     };
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
-        if (divRef.current) {
-            setupDiv(divRef.current);
-        }
-        return () => {
-            if (divRef.current) {
-                setupDiv(divRef.current, true);
-            }
-        };
-    }, []);
+    const divRef = React.useRef();
     if (dnd == null) {
         return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }
@@ -225,7 +216,15 @@ export function DnDList(props) {
                     return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
                 }) }) }) }));
     if (onFormChange) {
-        return (_jsx("div", { style: { width: "100%" }, ref: divRef, children: children }));
+        return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
+                if (div && divRef.current != div) {
+                    if (divRef.current) {
+                        setupDiv(divRef.current, true);
+                    }
+                    divRef.current = div;
+                    setupDiv(div);
+                }
+            }, children: children }));
     }
     return children;
 }

package/lib/mjs/JsonDataInput.d.ts

@@ -0,0 +1,11 @@
+import { InputFieldProps } from "./InputField";
+/**
+ * JSON data input component properties
+ */
+export type JsonDataInputProps = Omit<InputFieldProps, "multiple">;
+/**
+ * JSON data input component
+ * @param props - Component properties
+ * @returns JSX Element
+ */
+export declare function JsonDataInput(props: JsonDataInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/JsonDataInput.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { InputField } from "./InputField";
+import { useRequiredAppContext } from "./app/ReactApp";
+/**
+ * JSON data input component
+ * @param props - Component properties
+ * @returns JSX Element
+ */
+export function JsonDataInput(props) {
+    // Destruct
+    const { onChange, rows = 3, ...rest } = props;
+    // Global app
+    const app = useRequiredAppContext();
+    const jsonError = app.get("jsonDataError") ?? "JSON format error";
+    // Error message
+    const [error, setError] = React.useState();
+    // Layout
+    return (_jsx(InputField, { multiline: true, rows: rows, ...rest, error: !!error, helperText: error, onChange: (e) => {
+            if (onChange) {
+                onChange(e);
+                if (e.isDefaultPrevented())
+                    return;
+            }
+            const json = e.target.value;
+            if (json) {
+                try {
+                    JSON.parse(json);
+                }
+                catch (e) {
+                    setError(`${jsonError}: ${e instanceof Error ? e.message : String(e)}`);
+                    return;
+                }
+            }
+            setError(undefined);
+        } }));
+}

package/lib/mjs/index.d.ts

@@ -70,6 +70,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./JsonDataInput";
 export * from "./LineChart";
 export * from "./LinkEx";
 export * from "./ListChooser";

package/lib/mjs/index.js

@@ -70,6 +70,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./JsonDataInput";
 export * from "./LineChart";
 export * from "./LinkEx";
 export * from "./ListChooser";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.61",
+  "version": "1.5.63",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,14 +40,14 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.38",
-    "@etsoo/notificationbase": "^1.1.62",
-    "@etsoo/react": "^1.8.48",
-    "@etsoo/shared": "^1.2.74",
-    "@mui/icons-material": "^7.1.1",
-    "@mui/material": "^7.1.1",
-    "@mui/x-data-grid": "^8.5.1",
-    "chart.js": "^4.4.9",
+    "@etsoo/appscript": "^1.6.41",
+    "@etsoo/notificationbase": "^1.1.63",
+    "@etsoo/react": "^1.8.49",
+    "@etsoo/shared": "^1.2.75",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "@mui/x-data-grid": "^8.5.3",
+    "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.6",
     "eventemitter3": "^5.0.1",
@@ -81,9 +81,9 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.2"
+    "vitest": "^3.2.4"
   }
 }

package/src/DnDList.tsx

@@ -231,8 +231,11 @@ export function DnDList<
   }, [props.items]);
 
   const doFormChange = React.useCallback(
-    (newItems?: D[]) => {
-      if (onFormChange) onFormChange(newItems ?? items);
+    (newItems?: D[] | Event) => {
+      if (onFormChange) {
+        const locals = Array.isArray(newItems) ? newItems : items;
+        onFormChange(locals);
+      }
     },
     [items, onFormChange]
   );
@@ -380,16 +383,14 @@ export function DnDList<
     );
   }, []);
 
-  const doChange = React.useCallback(() => doFormChange(), []);
-
   const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
     // Inputs
     div
       .querySelectorAll("input")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
 
     // Textareas
@@ -397,8 +398,8 @@ export function DnDList<
       .querySelectorAll("textarea")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
 
     // Select
@@ -406,24 +407,12 @@ export function DnDList<
       .querySelectorAll("select")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
   };
 
-  const divRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (divRef.current) {
-      setupDiv(divRef.current);
-    }
-
-    return () => {
-      if (divRef.current) {
-        setupDiv(divRef.current, true);
-      }
-    };
-  }, []);
+  const divRef = React.useRef<HTMLDivElement>();
 
   if (dnd == null) {
     return <Skeleton variant="rectangular" width="100%" height={height} />;
@@ -517,7 +506,19 @@ export function DnDList<
 
   if (onFormChange) {
     return (
-      <div style={{ width: "100%" }} ref={divRef}>
+      <div
+        style={{ width: "100%" }}
+        ref={(div) => {
+          if (div && divRef.current != div) {
+            if (divRef.current) {
+              setupDiv(divRef.current, true);
+            }
+
+            divRef.current = div;
+            setupDiv(div);
+          }
+        }}
+      >
         {children}
       </div>
     );

package/src/JsonDataInput.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+import { useRequiredAppContext } from "./app/ReactApp";
+
+/**
+ * JSON data input component properties
+ */
+export type JsonDataInputProps = Omit<InputFieldProps, "multiple">;
+
+/**
+ * JSON data input component
+ * @param props - Component properties
+ * @returns JSX Element
+ */
+export function JsonDataInput(props: JsonDataInputProps) {
+  // Destruct
+  const { onChange, rows = 3, ...rest } = props;
+
+  // Global app
+  const app = useRequiredAppContext();
+  const jsonError = app.get("jsonDataError") ?? "JSON format error";
+
+  // Error message
+  const [error, setError] = React.useState<string>();
+
+  // Layout
+  return (
+    <InputField
+      multiline
+      rows={rows}
+      {...rest}
+      error={!!error}
+      helperText={error}
+      onChange={(e) => {
+        if (onChange) {
+          onChange(e);
+          if (e.isDefaultPrevented()) return;
+        }
+
+        const json = e.target.value;
+        if (json) {
+          try {
+            JSON.parse(json);
+          } catch (e) {
+            setError(
+              `${jsonError}: ${e instanceof Error ? e.message : String(e)}`
+            );
+            return;
+          }
+        }
+
+        setError(undefined);
+      }}
+    />
+  );
+}

package/src/index.ts

@@ -76,6 +76,7 @@ export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
+export * from "./JsonDataInput";
 export * from "./LineChart";
 export * from "./LinkEx";
 export * from "./ListChooser";