@etsoo/materialui 1.5.62 → 1.5.64

package/lib/cjs/DataLoadField.d.ts

@@ -0,0 +1,17 @@
+import { InputFieldProps } from "./InputField";
+/**
+ * Data load field properties
+ */
+export type DataLoadFieldProps = InputFieldProps & {
+    /**
+     *
+     * Load data handler
+     */
+    loadData: () => Promise<string | undefined>;
+};
+/**
+ * Data load field component
+ * @param props Properties
+ * @returns Component
+ */
+export declare function DataLoadField(props: DataLoadFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DataLoadField.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataLoadField = DataLoadField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+/**
+ * Data load field component
+ * @param props Properties
+ * @returns Component
+ */
+function DataLoadField(props) {
+    // Destruct
+    const { disabled = true, fullWidth = true, loadData, ...rest } = props;
+    // Ref
+    const inputRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        loadData().then((data) => (inputRef.current.value = data ?? ""));
+    }, [loadData]);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { disabled: disabled, fullWidth: fullWidth, inputRef: inputRef, ...rest }));
+}

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

@@ -50,6 +50,7 @@ export * from "./CultureDataTable";
 export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
+export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
@@ -70,6 +71,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

@@ -66,6 +66,7 @@ __exportStar(require("./CultureDataTable"), exports);
 __exportStar(require("./CustomFabProps"), exports);
 __exportStar(require("./DataGridEx"), exports);
 __exportStar(require("./DataGridRenderers"), exports);
+__exportStar(require("./DataLoadField"), exports);
 __exportStar(require("./DataSteps"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DialogButton"), exports);
@@ -86,6 +87,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/DataLoadField.d.ts

@@ -0,0 +1,17 @@
+import { InputFieldProps } from "./InputField";
+/**
+ * Data load field properties
+ */
+export type DataLoadFieldProps = InputFieldProps & {
+    /**
+     *
+     * Load data handler
+     */
+    loadData: () => Promise<string | undefined>;
+};
+/**
+ * Data load field component
+ * @param props Properties
+ * @returns Component
+ */
+export declare function DataLoadField(props: DataLoadFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DataLoadField.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { InputField } from "./InputField";
+/**
+ * Data load field component
+ * @param props Properties
+ * @returns Component
+ */
+export function DataLoadField(props) {
+    // Destruct
+    const { disabled = true, fullWidth = true, loadData, ...rest } = props;
+    // Ref
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        loadData().then((data) => (inputRef.current.value = data ?? ""));
+    }, [loadData]);
+    // Layout
+    return (_jsx(InputField, { disabled: disabled, fullWidth: fullWidth, inputRef: inputRef, ...rest }));
+}

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

@@ -50,6 +50,7 @@ export * from "./CultureDataTable";
 export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
+export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
@@ -70,6 +71,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

@@ -50,6 +50,7 @@ export * from "./CultureDataTable";
 export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
+export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
@@ -70,6 +71,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.64",
   "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",
@@ -57,7 +57,7 @@
     "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
-    "react-draggable": "^4.4.6",
+    "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
   },
   "overrides": {
@@ -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.2",
+    "@vitejs/plugin-react": "^4.6.0",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   }
 }

package/src/DataLoadField.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+
+/**
+ * Data load field properties
+ */
+export type DataLoadFieldProps = InputFieldProps & {
+  /**
+   *
+   * Load data handler
+   */
+  loadData: () => Promise<string | undefined>;
+};
+
+/**
+ * Data load field component
+ * @param props Properties
+ * @returns Component
+ */
+export function DataLoadField(props: DataLoadFieldProps) {
+  // Destruct
+  const { disabled = true, fullWidth = true, loadData, ...rest } = props;
+
+  // Ref
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    loadData().then((data) => (inputRef.current!.value = data ?? ""));
+  }, [loadData]);
+
+  // Layout
+  return (
+    <InputField
+      disabled={disabled}
+      fullWidth={fullWidth}
+      inputRef={inputRef}
+      {...rest}
+    />
+  );
+}

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

@@ -56,6 +56,7 @@ export * from "./CultureDataTable";
 export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
+export * from "./DataLoadField";
 export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
@@ -76,6 +77,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";