@etsoo/materialui 1.6.19 → 1.6.21

package/lib/cjs/ComboBoxMultiple.js

@@ -32,6 +32,7 @@ function ComboBoxMultiple(props) {
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...restProps, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
+    const localRef = react_1.default.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = react_1.default.useState(options ?? []);
     const isMounted = react_1.default.useRef(true);
@@ -44,6 +45,11 @@ function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = react_1.default.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    react_1.default.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     react_1.default.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -58,11 +64,6 @@ function ComboBoxMultiple(props) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
-        params.inputProps.onInvalid = (event) => {
-            if (inputRequired && stateValue != null && stateValue.length > 0) {
-                event.preventDefault();
-            }
-        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (shared_1.Keyboard.isTypingContent(event.key)) {
@@ -124,5 +125,5 @@ function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

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,6 +1,10 @@
 "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");
 /**
  * CustomFieldUI component
@@ -9,14 +13,28 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
  */
 function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // 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);
     });
 }

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/ComboBoxMultiple.js

@@ -26,6 +26,7 @@ export function ComboBoxMultiple(props) {
     const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = ({ key, ...restProps }, option, { selected }) => (_jsxs("li", { ...restProps, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] }, key)), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
+    const localRef = React.useRef(undefined);
     // Options state
     const [localOptions, setOptions] = React.useState(options ?? []);
     const isMounted = React.useRef(true);
@@ -38,6 +39,11 @@ export function ComboBoxMultiple(props) {
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
+    const selectedCount = stateValue?.length ?? 0;
+    React.useEffect(() => {
+        if (localRef.current && inputRequired)
+            localRef.current.required = selectedCount === 0;
+    }, [inputRequired, selectedCount]);
     React.useEffect(() => {
         const localValue = idValue != null
             ? localOptions.filter((o) => o[idField] === idValue)
@@ -52,11 +58,6 @@ export function ComboBoxMultiple(props) {
             Object.assign(params, { readOnly });
         }
         Object.assign(params.inputProps, { "data-reset": inputReset });
-        params.inputProps.onInvalid = (event) => {
-            if (inputRequired && stateValue != null && stateValue.length > 0) {
-                event.preventDefault();
-            }
-        };
         if (dataReadonly) {
             params.inputProps.onKeyDown = (event) => {
                 if (Keyboard.isTypingContent(event.key)) {
@@ -118,5 +119,5 @@ export function ComboBoxMultiple(props) {
                     // Custom
                     if (onChange != null)
                         onChange(event, value, reason, details);
-                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText, inputRef: localRef })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
 }

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,3 +1,4 @@
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 /**
  * CustomFieldUI component
@@ -6,14 +7,28 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
  */
 export function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value = {} } = props;
+    const { fields, initialValue, mref, onChange } = props;
+    // 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);
     });
 }

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.19",
+  "version": "1.6.21",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ComboBoxMultiple.tsx

@@ -132,6 +132,7 @@ export function ComboBoxMultiple<
 
   // Value input ref
   const inputRef = React.createRef<HTMLInputElement>();
+  const localRef = React.useRef<HTMLInputElement>(undefined);
 
   // Options state
   const [localOptions, setOptions] = React.useState(options ?? []);
@@ -148,6 +149,12 @@ export function ComboBoxMultiple<
   // null for controlled
   const [stateValue, setStateValue] = React.useState<T[] | null>(null);
 
+  const selectedCount = stateValue?.length ?? 0;
+  React.useEffect(() => {
+    if (localRef.current && inputRequired)
+      localRef.current.required = selectedCount === 0;
+  }, [inputRequired, selectedCount]);
+
   React.useEffect(() => {
     const localValue: T[] | null | undefined =
       idValue != null
@@ -167,12 +174,6 @@ export function ComboBoxMultiple<
 
     Object.assign(params.inputProps, { "data-reset": inputReset });
 
-    params.inputProps.onInvalid = (event) => {
-      if (inputRequired && stateValue != null && stateValue.length > 0) {
-        event.preventDefault();
-      }
-    };
-
     if (dataReadonly) {
       params.inputProps.onKeyDown = (event) => {
         if (Keyboard.isTypingContent(event.key)) {
@@ -279,6 +280,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           ) : (
             <InputField
@@ -290,6 +292,7 @@ export function ComboBoxMultiple<
               required={inputRequired}
               error={inputError}
               helperText={inputHelperText}
+              inputRef={localRef}
             />
           )
         }

package/src/custom/CustomFieldUI.tsx

@@ -1,4 +1,6 @@
-import { CustomFieldData } from "@etsoo/appscript";
+import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
+import { CustomFieldReactCollection } from "@etsoo/react";
+import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 
 /**
@@ -10,6 +12,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 +30,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 +44,40 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldUIProps<D>
 ) {
   // Destruct
-  const { fields, onChange, value = {} } = props;
+  const { fields, initialValue, mref, onChange } = props;
+
+  // 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);
     }
   );
 }

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