@etsoo/materialui 1.6.18 → 1.6.19

package/lib/cjs/ComboBoxMultiple.js

@@ -58,6 +58,11 @@ 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)) {

package/lib/cjs/custom/CustomFieldUI.js

@@ -1,10 +1,6 @@
 "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
@@ -13,17 +9,14 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
  */
 function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value } = props;
-    const data = react_1.default.useRef({});
-    const getValue = react_1.default.useCallback((field) => {
+    const { fields, onChange, value = {} } = props;
+    // Layout
+    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, (field) => {
         if (!field.name)
             return undefined;
-        return value?.[field.name];
-    }, [value]);
-    const doChange = react_1.default.useCallback((name, value) => {
-        data.current[name] = value;
-        onChange?.(data.current, name, value);
-    }, []);
-    // Layout
-    return CustomFieldUtils_1.CustomFieldUtils.create(fields, {}, getValue, doChange);
+        return value[field.name];
+    }, (name, fieldValue) => {
+        value[name] = fieldValue;
+        onChange?.(value, name, fieldValue);
+    });
 }

package/lib/cjs/custom/FieldCombobox.js

@@ -39,7 +39,7 @@ const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
     const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
-    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
+    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, inputRequired: required || inputRequired, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);

package/lib/mjs/ComboBoxMultiple.js

@@ -52,6 +52,11 @@ 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)) {

package/lib/mjs/custom/CustomFieldUI.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 /**
  * CustomFieldUI component
@@ -7,17 +6,14 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
  */
 export function CustomFieldUI(props) {
     // Destruct
-    const { fields, onChange, value } = props;
-    const data = React.useRef({});
-    const getValue = React.useCallback((field) => {
+    const { fields, onChange, value = {} } = props;
+    // Layout
+    return CustomFieldUtils.create(fields, {}, (field) => {
         if (!field.name)
             return undefined;
-        return value?.[field.name];
-    }, [value]);
-    const doChange = React.useCallback((name, value) => {
-        data.current[name] = value;
-        onChange?.(data.current, name, value);
-    }, []);
-    // Layout
-    return CustomFieldUtils.create(fields, {}, getValue, doChange);
+        return value[field.name];
+    }, (name, fieldValue) => {
+        value[name] = fieldValue;
+        onChange?.(value, name, fieldValue);
+    });
 }

package/lib/mjs/custom/FieldCombobox.js

@@ -33,7 +33,7 @@ export const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
         return (_jsxs(Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
     const { required, inputRequired, ...mainRests } = field.mainSlotProps || {};
-    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, inputRequired: required || inputRequired, onChange: (_event, value) => {
+    return (_jsx(ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, inputRequired: required || inputRequired, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);
             setIds(ids);
             onChange(name, ids);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.18",
+  "version": "1.6.19",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ComboBoxMultiple.tsx

@@ -167,6 +167,12 @@ 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)) {

package/src/custom/CustomFieldUI.tsx

@@ -1,5 +1,4 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 
 /**
@@ -38,23 +37,19 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldUIProps<D>
 ) {
   // Destruct
-  const { fields, onChange, value } = props;
+  const { fields, onChange, value = {} } = props;
 
-  const data = React.useRef<Record<string, unknown>>({});
-
-  const getValue = React.useCallback(
-    (field: CustomFieldData) => {
+  // Layout
+  return CustomFieldUtils.create(
+    fields,
+    {},
+    (field) => {
       if (!field.name) return undefined;
-      return value?.[field.name];
+      return value[field.name];
     },
-    [value]
+    (name, fieldValue) => {
+      value[name] = fieldValue;
+      onChange?.(value, name, fieldValue);
+    }
   );
-
-  const doChange = React.useCallback((name: string, value: unknown) => {
-    data.current[name] = value;
-    onChange?.(data.current, name, value);
-  }, []);
-
-  // Layout
-  return CustomFieldUtils.create(fields, {}, getValue, doChange);
 }

package/src/custom/FieldCombobox.tsx

@@ -50,11 +50,11 @@ export const FieldCombobox: ICustomFieldReact<IdType[]> = ({
     <ComboBoxMultiple
       label={field.label ?? ""}
       inputHelperText={field.helperText}
+      inputRequired={required || inputRequired}
       name={name}
       options={field.options}
       fullWidth
       idValues={ids}
-      inputRequired={required || inputRequired}
       onChange={(_event, value) => {
         const ids = value.map((v) => v.id);
         setIds(ids);