@etsoo/materialui 1.6.20 → 1.6.22

package/lib/cjs/custom/CustomAttributeArea.js

@@ -44,7 +44,10 @@ function InputItemUIs({ data }) {
     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";
+                            type !== "combobox" &&
+                                type !== "select" &&
+                                type !== "checkbox" &&
+                                type !== "radio";
                         const nameInput = nameRef.current;
                         if (nameInput.value === "" &&
                             (type === "amountlabel" || type === "divider" || type === "label")) {

package/lib/cjs/custom/CustomFieldUI.d.ts

@@ -1,4 +1,5 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import React from "react";
 /**
  * CustomFieldUI component props
  */
@@ -7,6 +8,10 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      * Custom fields
      */
     fields: D[];
+    /**
+     * Initial value
+     */
+    initialValue?: Record<string, unknown>;
     /**
      * Change event
      * @param data Current data collection
@@ -15,9 +20,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      */
     onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
     /**
-     * Initial value
+     * Methods reference
      */
-    value?: Record<string, unknown>;
+    mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 /**
  * CustomFieldUI component

package/lib/cjs/custom/CustomFieldUI.js

@@ -1,7 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldUI = CustomFieldUI;
+const react_1 = __importDefault(require("react"));
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const ReactApp_1 = require("../app/ReactApp");
 /**
  * CustomFieldUI component
  * @param props Props
@@ -9,14 +14,30 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
  */
 function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // App
+    const app = (0, ReactApp_1.useAppContext)();
+    // Field component collections
+    const collections = {};
+    // Value reference
+    const valueRef = react_1.default.useRef({ ...initialValue });
+    // Methods
+    react_1.default.useImperativeHandle(mref, () => ({
+        getValue: () => valueRef.current,
+        setValue: (value) => {
+            if (!!value && typeof value === "object") {
+                valueRef.current = { ...value };
+                CustomFieldUtils_1.CustomFieldUtils.updateValues(collections, valueRef.current);
+            }
+        }
+    }), []);
     // Layout
-    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, (field) => {
+    return CustomFieldUtils_1.CustomFieldUtils.create(fields, collections, (field) => {
         if (!field.name)
             return undefined;
-        return value[field.name];
+        return valueRef.current[field.name];
     }, (name, fieldValue) => {
-        value[name] = fieldValue;
-        onChange?.(value, name, fieldValue);
-    });
+        valueRef.current[name] = fieldValue;
+        onChange?.(valueRef.current, name, fieldValue);
+    }, (input) => app?.get(input) ?? input);
 }

package/lib/cjs/custom/CustomFieldUtils.d.ts

@@ -53,4 +53,10 @@ export declare namespace CustomFieldUtils {
      * @param globalCallback Global callback
      */
     function updateProperties(input: object, globalCallback: (input: string) => string): void;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues<D extends CustomFieldData = CustomFieldData>(collections: CustomFieldReactCollection<D>, value: Record<string, unknown>): void;
 }

package/lib/cjs/custom/CustomFieldUtils.js

@@ -150,4 +150,21 @@ var CustomFieldUtils;
         }
     }
     CustomFieldUtils.updateProperties = updateProperties;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues(collections, value) {
+        for (const key in collections) {
+            const c = collections[key];
+            if (c == null)
+                continue;
+            const [ref, data] = c;
+            if (ref.current == null || !data.name)
+                continue;
+            ref.current.setValue(value[data.name]);
+        }
+    }
+    CustomFieldUtils.updateValues = updateValues;
 })(CustomFieldUtils || (exports.CustomFieldUtils = CustomFieldUtils = {}));

package/lib/mjs/custom/CustomAttributeArea.js

@@ -38,7 +38,10 @@ function InputItemUIs({ data }) {
     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";
+                            type !== "combobox" &&
+                                type !== "select" &&
+                                type !== "checkbox" &&
+                                type !== "radio";
                         const nameInput = nameRef.current;
                         if (nameInput.value === "" &&
                             (type === "amountlabel" || type === "divider" || type === "label")) {

package/lib/mjs/custom/CustomFieldUI.d.ts

@@ -1,4 +1,5 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import React from "react";
 /**
  * CustomFieldUI component props
  */
@@ -7,6 +8,10 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      * Custom fields
      */
     fields: D[];
+    /**
+     * Initial value
+     */
+    initialValue?: Record<string, unknown>;
     /**
      * Change event
      * @param data Current data collection
@@ -15,9 +20,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
      */
     onChange?: (data: Record<string, unknown>, name: string, value: unknown) => void;
     /**
-     * Initial value
+     * Methods reference
      */
-    value?: Record<string, unknown>;
+    mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 /**
  * CustomFieldUI component

package/lib/mjs/custom/CustomFieldUI.js

@@ -1,4 +1,6 @@
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useAppContext } from "../app/ReactApp";
 /**
  * CustomFieldUI component
  * @param props Props
@@ -6,14 +8,30 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
  */
 export function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // App
+    const app = useAppContext();
+    // Field component collections
+    const collections = {};
+    // Value reference
+    const valueRef = React.useRef({ ...initialValue });
+    // Methods
+    React.useImperativeHandle(mref, () => ({
+        getValue: () => valueRef.current,
+        setValue: (value) => {
+            if (!!value && typeof value === "object") {
+                valueRef.current = { ...value };
+                CustomFieldUtils.updateValues(collections, valueRef.current);
+            }
+        }
+    }), []);
     // Layout
-    return CustomFieldUtils.create(fields, {}, (field) => {
+    return CustomFieldUtils.create(fields, collections, (field) => {
         if (!field.name)
             return undefined;
-        return value[field.name];
+        return valueRef.current[field.name];
     }, (name, fieldValue) => {
-        value[name] = fieldValue;
-        onChange?.(value, name, fieldValue);
-    });
+        valueRef.current[name] = fieldValue;
+        onChange?.(valueRef.current, name, fieldValue);
+    }, (input) => app?.get(input) ?? input);
 }

package/lib/mjs/custom/CustomFieldUtils.d.ts

@@ -53,4 +53,10 @@ export declare namespace CustomFieldUtils {
      * @param globalCallback Global callback
      */
     function updateProperties(input: object, globalCallback: (input: string) => string): void;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues<D extends CustomFieldData = CustomFieldData>(collections: CustomFieldReactCollection<D>, value: Record<string, unknown>): void;
 }

package/lib/mjs/custom/CustomFieldUtils.js

@@ -144,4 +144,21 @@ export var CustomFieldUtils;
         }
     }
     CustomFieldUtils.updateProperties = updateProperties;
+    /**
+     * Update values for all fields
+     * @param collections Field component collections
+     * @param value New value
+     */
+    function updateValues(collections, value) {
+        for (const key in collections) {
+            const c = collections[key];
+            if (c == null)
+                continue;
+            const [ref, data] = c;
+            if (ref.current == null || !data.name)
+                continue;
+            ref.current.setValue(value[data.name]);
+        }
+    }
+    CustomFieldUtils.updateValues = updateValues;
 })(CustomFieldUtils || (CustomFieldUtils = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.20",
+  "version": "1.6.22",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,12 +43,12 @@
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.78",
     "@etsoo/shared": "^1.2.80",
-    "@mui/icons-material": "^7.3.8",
-    "@mui/material": "^7.3.8",
-    "@mui/x-data-grid": "^8.27.3",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mui/x-data-grid": "^8.27.4",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.3.2",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",

package/src/custom/CustomAttributeArea.tsx

@@ -68,7 +68,10 @@ function InputItemUIs({ data }: { data?: CustomFieldData }) {
           onValueChange={(item) => {
             const type = item?.id;
             optionsRef.current!.disabled =
-              type !== "combobox" && type !== "select";
+              type !== "combobox" &&
+              type !== "select" &&
+              type !== "checkbox" &&
+              type !== "radio";
 
             const nameInput = nameRef.current!;
             if (

package/src/custom/CustomFieldUI.tsx

@@ -1,5 +1,8 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import { CustomFieldReactCollection } from "@etsoo/react";
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useAppContext } from "../app/ReactApp";
 
 /**
  * CustomFieldUI component props
@@ -10,6 +13,11 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
    */
   fields: D[];
 
+  /**
+   * Initial value
+   */
+  initialValue?: Record<string, unknown>;
+
   /**
    * Change event
    * @param data Current data collection
@@ -23,9 +31,9 @@ export type CustomFieldUIProps<D extends CustomFieldData = CustomFieldData> = {
   ) => void;
 
   /**
-   * Initial value
+   * Methods reference
    */
-  value?: Record<string, unknown>;
+  mref: React.Ref<CustomFieldRef<Record<string, unknown>>>;
 };
 
 /**
@@ -37,19 +45,44 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldUIProps<D>
 ) {
   // Destruct
-  const { fields, onChange, value = {} } = props;
+  const { fields, initialValue, mref, onChange } = props;
+
+  // App
+  const app = useAppContext();
+
+  // Field component collections
+  const collections: CustomFieldReactCollection<D> = {};
+
+  // Value reference
+  const valueRef = React.useRef<Record<string, unknown>>({ ...initialValue });
+
+  // Methods
+  React.useImperativeHandle(
+    mref,
+    () => ({
+      getValue: () => valueRef.current,
+      setValue: (value) => {
+        if (!!value && typeof value === "object") {
+          valueRef.current = { ...value };
+          CustomFieldUtils.updateValues(collections, valueRef.current);
+        }
+      }
+    }),
+    []
+  );
 
   // Layout
   return CustomFieldUtils.create(
     fields,
-    {},
+    collections,
     (field) => {
       if (!field.name) return undefined;
-      return value[field.name];
+      return valueRef.current[field.name];
     },
     (name, fieldValue) => {
-      value[name] = fieldValue;
-      onChange?.(value, name, fieldValue);
-    }
+      valueRef.current[name] = fieldValue;
+      onChange?.(valueRef.current, name, fieldValue);
+    },
+    (input) => app?.get(input) ?? input
   );
 }

package/src/custom/CustomFieldUtils.tsx

@@ -199,4 +199,24 @@ export namespace CustomFieldUtils {
       }
     }
   }
+
+  /**
+   * Update values for all fields
+   * @param collections Field component collections
+   * @param value New value
+   */
+  export function updateValues<D extends CustomFieldData = CustomFieldData>(
+    collections: CustomFieldReactCollection<D>,
+    value: Record<string, unknown>
+  ) {
+    for (const key in collections) {
+      const c = collections[key];
+      if (c == null) continue;
+
+      const [ref, data] = c;
+      if (ref.current == null || !data.name) continue;
+
+      ref.current.setValue(value[data.name]);
+    }
+  }
 }