@etsoo/materialui 1.5.62 → 1.5.63

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/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.62",
+  "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.39",
+    "@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.1",
-    "@mui/material": "^7.1.1",
-    "@mui/x-data-grid": "^8.5.1",
-    "chart.js": "^4.4.9",
+    "@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",
@@ -84,6 +84,6 @@
     "@vitejs/plugin-react": "^4.5.2",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   }
 }

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";