From 34717cdf50baa9486c4a1835055f8a59ea13d359 Mon Sep 17 00:00:00 2001
From: dylanBetty <78550663+dylanBetty@users.noreply.github.com>
Date: Mon, 8 Apr 2024 13:32:07 +0200
Subject: [PATCH] Revert "Revert "Release""

---
 CHANGELOG.md                             |  7 +++++
 package.json                             |  2 +-
 src/components/autocompleteInput.js      |  3 ++
 src/components/checkboxGroup.js          |  4 +++
 src/components/checkboxinput.js          |  8 ++++-
 src/components/dateTimePickerInput.js    |  4 ++-
 src/components/fileUploadInput.js        | 13 +++++++--
 src/components/multiAutoCompleteInput.js |  3 ++
 src/components/radioinput.js             | 37 +++++++++++++++++-------
 src/components/ratingInput.js            |  6 ++--
 src/components/richTextInput.js          | 17 +++++++----
 src/components/selectInput.js            | 12 +++++++-
 src/components/textinput.js              |  6 +++-
 13 files changed, 98 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c8775cd7..4974995ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [2.187.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.186.0...v2.187.0) (2024-04-03)
+
+
+### Features
+
+* add for and id attributes to textfield ([0ce2cc1](https://github.com/bettyblocks/material-ui-component-set/commit/0ce2cc1a35a5ecb265e9088dd3518915c53f2bb6))
+
 # [2.186.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.185.0...v2.186.0) (2024-03-19)
 
 
diff --git a/package.json b/package.json
index 7568cd369..fd8fe4ea3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "component-set",
-  "version": "2.186.0",
+  "version": "2.187.0",
   "main": "dist/templates.json",
   "license": "UNLICENSED",
   "private": false,
diff --git a/src/components/autocompleteInput.js b/src/components/autocompleteInput.js
index 6f3595985..e49ff0390 100644
--- a/src/components/autocompleteInput.js
+++ b/src/components/autocompleteInput.js
@@ -12,6 +12,7 @@
       InteractionScope,
       ModelProvider,
       env,
+      generateUUID,
       getIdProperty,
       getModel,
       getProperty,
@@ -95,6 +96,7 @@
     const [debouncedCurrentValue, setDebouncedCurrentValue] = useState();
     const [interactionFilter, setInteractionFilter] = useState({});
     const defaultValueEvaluatedRef = useRef(false);
+    const { current: labelControlRef } = useRef(generateUUID());
 
     const isNumberType = type === 'number';
 
@@ -733,6 +735,7 @@
         error={errorState}
       >
         <Autocomplete
+          id={labelControlRef}
           disableCloseOnSelect={!closeOnSelect}
           disabled={disabled}
           {...(!isListProperty && {
diff --git a/src/components/checkboxGroup.js b/src/components/checkboxGroup.js
index 54654b535..ead9f6a4f 100644
--- a/src/components/checkboxGroup.js
+++ b/src/components/checkboxGroup.js
@@ -31,6 +31,7 @@
 
     const {
       env,
+      generateUUID,
       getIdProperty,
       getModel,
       getProperty,
@@ -329,15 +330,18 @@
     const hasError = errorState || !isValid;
 
     const renderCheckbox = (checkboxLabel, checkboxValue) => {
+      const labelControlRef = generateUUID();
       return (
         <FormControlLabel
           control={
             <MUICheckbox
+              id={labelControlRef}
               required={required && !isValid}
               tabIndex={isDev ? -1 : undefined}
               size={size}
             />
           }
+          htmlFor={labelControlRef}
           label={checkboxLabel}
           labelPlacement={position}
           checked={values.includes(checkboxValue)}
diff --git a/src/components/checkboxinput.js b/src/components/checkboxinput.js
index a40bac337..583ea9443 100644
--- a/src/components/checkboxinput.js
+++ b/src/components/checkboxinput.js
@@ -17,19 +17,23 @@
       isSwitch,
       dataComponentAttribute = ['Checkbox'],
     } = options;
-    const { env, useText } = B;
+    const { env, generateUUID, useText } = B;
     const isDev = env === 'dev';
 
     function boolify(textValue) {
       if (typeof textValue === 'boolean') {
         return textValue;
       }
+      if (typeof textValue === 'undefined') {
+        return undefined;
+      }
       return ['on', 'true', 'yes'].includes(textValue.trim().toLowerCase());
     }
 
     const [errorState, setErrorState] = useState(false);
     const [helper, setHelper] = useState(useText(helperText));
     const mounted = useRef(false);
+    const { current: labelControlRef } = useRef(generateUUID());
     const parsedLabel = useText(label);
     const labelText = parsedLabel;
     const resolvedValue = useText(value);
@@ -105,6 +109,7 @@
     }, [isDev, helperTextResolved, resolvedValue]);
 
     const props = {
+      id: labelControlRef,
       checked,
       required,
       onInvalid: invalidHandler,
@@ -143,6 +148,7 @@
           classes={{ root: classes.formControl }}
         >
           <FormControlLabel
+            htmlFor={labelControlRef}
             control={isSwitch ? SwitchComponent : Checkbox}
             label={ControlLabel}
             labelPlacement={position}
diff --git a/src/components/dateTimePickerInput.js b/src/components/dateTimePickerInput.js
index 3f1d2b55a..ba5baa763 100644
--- a/src/components/dateTimePickerInput.js
+++ b/src/components/dateTimePickerInput.js
@@ -33,7 +33,7 @@
       dataComponentAttribute = ['DateTimePicker'],
       floatLabel,
     } = options;
-    const { env, useText, Icon } = B;
+    const { env, useText, Icon, generateUUID } = B;
     const {
       MuiPickersUtilsProvider,
       KeyboardTimePicker,
@@ -54,6 +54,7 @@
     const placeholderText = useText(placeholder);
     const dataComponentAttributeValue = useText(dataComponentAttribute);
     const clearable = true;
+    const { current: labelControlRef } = useRef(generateUUID());
 
     const localeMap = {
       nl: nlLocale,
@@ -218,6 +219,7 @@
 
     const DateTimeCmp = (
       <DateTimeComponent
+        id={labelControlRef}
         error={errorState}
         value={selectedDate}
         size={size}
diff --git a/src/components/fileUploadInput.js b/src/components/fileUploadInput.js
index 2cde7f91e..7cb9d38c0 100644
--- a/src/components/fileUploadInput.js
+++ b/src/components/fileUploadInput.js
@@ -4,7 +4,14 @@
   allowedTypes: ['CONTENT_COMPONENT'],
   orientation: 'HORIZONTAL',
   jsx: (() => {
-    const { env, useText, Icon, usePresignedUpload, useProperty } = B;
+    const {
+      Icon,
+      env,
+      generateUUID,
+      usePresignedUpload,
+      useProperty,
+      useText,
+    } = B;
     const { FormControl, FormHelperText, Typography, IconButton } =
       window.MaterialUI.Core;
     const {
@@ -34,6 +41,7 @@
     const acceptedValue = useText(accept) || 'image/*';
     const dataComponentAttributeValue = useText(dataComponentAttribute);
     const requiredText = required ? '*' : '';
+    const { current: labelControlRef } = useRef(generateUUID());
 
     const getPropertyId = (property) => {
       if (typeof property === 'string') {
@@ -179,6 +187,7 @@
         >
           {children}
           <input
+            id={labelControlRef}
             accept={acceptedValue}
             className={classes.input}
             type="file"
@@ -296,7 +305,7 @@
           margin={margin}
           className={includeStyling()}
         >
-          <Label className={classes.label}>
+          <Label htmlFor={labelControlRef} className={classes.label}>
             {hideLabel ? '' : `${labelText} ${requiredText}`}
             <UploadComponent />
           </Label>
diff --git a/src/components/multiAutoCompleteInput.js b/src/components/multiAutoCompleteInput.js
index 82c3b155c..994c3cf8a 100644
--- a/src/components/multiAutoCompleteInput.js
+++ b/src/components/multiAutoCompleteInput.js
@@ -18,6 +18,7 @@
       InteractionScope,
       ModelProvider,
       env,
+      generateUUID,
       getIdProperty,
       getModel,
       getProperty,
@@ -88,6 +89,7 @@
     const [helper, setHelper] = useState(useText(helperTextRaw));
     const [errorState, setErrorState] = useState(false);
     const changeContext = useRef(null);
+    const { current: labelControlRef } = useRef(generateUUID());
     const dataComponentAttribute =
       useText(dataComponentAttributeRaw) || 'AutoComplete';
 
@@ -763,6 +765,7 @@
         error={errorState}
       >
         <Autocomplete
+          id={labelControlRef}
           disableCloseOnSelect={!closeOnSelect}
           className={includeStyling()}
           disabled={disabled}
diff --git a/src/components/radioinput.js b/src/components/radioinput.js
index 2428ef14f..7af04aa47 100644
--- a/src/components/radioinput.js
+++ b/src/components/radioinput.js
@@ -26,7 +26,14 @@
       validationValueMissing = [''],
       value: prefabValue,
     } = options;
-    const { env, getProperty, useText, useAllQuery, useRelation } = B;
+    const {
+      env,
+      generateUUID,
+      getProperty,
+      useAllQuery,
+      useRelation,
+      useText,
+    } = B;
     const {
       FormControl: MUIFormControl,
       FormControlLabel: MUIFormControlLabel,
@@ -276,15 +283,25 @@
     }
 
     // renders the radio component
-    const renderRadio = (optionValue, optionLabel) => (
-      <MUIFormControlLabel
-        disabled={disabled}
-        value={optionValue}
-        control={<Radio tabIndex={isDev ? -1 : undefined} size={size} />}
-        label={optionLabel}
-        labelPlacement={labelPosition}
-      />
-    );
+    const renderRadio = (optionValue, optionLabel) => {
+      const labelControlRef = generateUUID();
+      return (
+        <MUIFormControlLabel
+          for={labelControlRef}
+          disabled={disabled}
+          value={optionValue}
+          control={
+            <Radio
+              id={labelControlRef}
+              tabIndex={isDev ? -1 : undefined}
+              size={size}
+            />
+          }
+          label={optionLabel}
+          labelPlacement={labelPosition}
+        />
+      );
+    };
 
     const renderRadios = () => {
       if (!valid) {
diff --git a/src/components/ratingInput.js b/src/components/ratingInput.js
index 306b491cf..2a85efbd9 100644
--- a/src/components/ratingInput.js
+++ b/src/components/ratingInput.js
@@ -7,7 +7,7 @@
     const { FormControl, FormHelperText, InputLabel, FormGroup } =
       window.MaterialUI.Core;
     const { Rating } = window.MaterialUI.Lab;
-    const { env, useText, Icon } = B;
+    const { env, generateUUID, useText, Icon } = B;
     const isDev = env === 'dev';
 
     const {
@@ -30,6 +30,7 @@
     } = options;
 
     const labelText = useText(label);
+    const { current: labelControlRef } = useRef(generateUUID());
 
     const [currentValue, setCurrentValue] = usePageState(
       useText(defaultValue, { rawValue: true }),
@@ -103,7 +104,7 @@
           error={errorState}
         >
           {labelText && !hideLabel && (
-            <InputLabel classes={{ root: classes.label }}>
+            <InputLabel for={labelControlRef} classes={{ root: classes.label }}>
               {labelText}
             </InputLabel>
           )}
@@ -127,6 +128,7 @@
             </FormHelperText>
           )}
           <input
+            id={labelControlRef}
             className={classes.validationInput}
             onInvalid={validationHandler}
             type="text"
diff --git a/src/components/richTextInput.js b/src/components/richTextInput.js
index 4df7cdc13..46cd8279f 100644
--- a/src/components/richTextInput.js
+++ b/src/components/richTextInput.js
@@ -87,8 +87,8 @@
       FirstPage,
     };
     const allIcons = { ...Icons, ...extraIcons };
-    const { FormHelperText, SvgIcon } = window.MaterialUI.Core;
-    const { useText, env } = B;
+    const { FormHelperText, InputLabel, SvgIcon } = window.MaterialUI.Core;
+    const { generateUUID, useText, env } = B;
     const {
       actionVariableId: name,
       value: valueProp,
@@ -122,6 +122,7 @@
     const [activeStyleName, setActiveStyleName] = useState('Body 1');
     const placeholderText = useText(placeholder);
     const helperTextResolved = useText(helperText);
+    const { current: labelControlRef } = useRef(generateUUID());
 
     useEffect(() => {
       setCurrentValue(optionValue);
@@ -924,11 +925,12 @@
         data-component={useText(dataComponentAttribute) || 'RichTextEditor'}
       >
         {labelText && !hideLabel && (
-          <FormHelperText
+          <InputLabel
+            htmlFor={labelControlRef}
             className={`${classes.label} ${floatLabel && classes.floatLabel}`}
           >
             {labelText}
-          </FormHelperText>
+          </InputLabel>
         )}
         <div className={classes.editorWrapper}>
           <Slate
@@ -1013,7 +1015,12 @@
               }}
             />
           </Slate>
-          <input type="hidden" name={name} value={currentValue} />
+          <input
+            id={labelControlRef}
+            type="hidden"
+            name={name}
+            value={currentValue}
+          />
         </div>
         {helperTextResolved && (
           <FormHelperText classes={{ root: classes.helper }}>
diff --git a/src/components/selectInput.js b/src/components/selectInput.js
index eee16f701..ed288dc03 100644
--- a/src/components/selectInput.js
+++ b/src/components/selectInput.js
@@ -29,7 +29,14 @@
       value: prefabValue,
       variant,
     } = options;
-    const { env, getProperty, useText, useAllQuery, useRelation } = B;
+    const {
+      env,
+      generateUUID,
+      getProperty,
+      useAllQuery,
+      useRelation,
+      useText,
+    } = B;
     const { TextField, MenuItem } = window.MaterialUI.Core;
     const isDev = env === 'dev';
     const [errorState, setErrorState] = useState(false);
@@ -38,6 +45,7 @@
     const [interactionFilter, setInteractionFilter] = useState({});
     const [disabled, setIsDisabled] = useState(initialIsDisabled);
     const mounted = useRef(false);
+    const { current: labelControlRef } = useRef(generateUUID());
     const modelProperty = getProperty(property || '') || {};
     const labelText = useText(label);
     const clearLabelText = useText(clearLabel);
@@ -332,6 +340,7 @@
       <>
         <TextField
           id={actionVariableId}
+          InputLabelProps={{ htmlFor: labelControlRef }}
           select={!disabled}
           defaultValue={isDev ? placeholderLabelText : currentValue}
           value={isDev ? placeholderLabelText : currentValue}
@@ -348,6 +357,7 @@
           onChange={handleChange}
           onBlur={validationHandler}
           inputProps={{
+            id: labelControlRef,
             tabIndex: isDev ? -1 : 0,
             'data-component': dataComponentAttributeValue,
           }}
diff --git a/src/components/textinput.js b/src/components/textinput.js
index 31d01c818..73cf20e0e 100644
--- a/src/components/textinput.js
+++ b/src/components/textinput.js
@@ -53,7 +53,7 @@
       IconButton,
     } = window.MaterialUI.Core;
 
-    const { env, useText, Icon } = B;
+    const { env, useText, Icon, generateUUID } = B;
     const isDev = env === 'dev';
     const isNumberType = type === 'number';
     const isPasswordType = type === 'password';
@@ -68,6 +68,8 @@
     const labelText = parsedLabel;
     const debouncedOnChangeRef = useRef(null);
 
+    const { current: labelControlRef } = useRef(generateUUID());
+
     const validPattern = pattern || null;
     const validMinlength = minLength || null;
     const validMaxlength = maxLength || null;
@@ -268,6 +270,7 @@
       >
         {labelText && !hideLabel && (
           <InputLabel
+            htmlFor={labelControlRef}
             classes={{
               root: `${classes.label} ${floatLabel && classes.floatLabel}`,
             }}
@@ -277,6 +280,7 @@
           </InputLabel>
         )}
         <InputCmp
+          id={labelControlRef}
           name={name}
           value={currentValue}
           type={showPassword ? 'text' : inputType}