@evoke-platform/ui-components 1.0.0-dev.228 → 1.0.0-dev.229

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -8,8 +8,8 @@ const BooleanSelect = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     const handleChange = (event, selected) => {
-        setValue(selected.label);
-        props.onChange(property.id, selected.label, property);
+        setValue(selected.value);
+        props.onChange(property.id, selected.value, property);
     };
     const booleanOptions = [
         {
@@ -21,6 +21,19 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, isOptionEqualToValue: (option, val) => {
+            if (typeof val === 'boolean') {
+                return option.value === val;
+            }
+            return option.value === val?.value;
+        }, getOptionLabel: (option) => {
+            if (typeof option === 'boolean') {
+                const opt = booleanOptions.find((o) => o.value === option);
+                return opt ? opt.label : option;
+            }
+            if (typeof option === 'string')
+                return option;
+            return option.label;
+        }, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
 };
 export default BooleanSelect;

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.js

@@ -18,6 +18,5 @@ test('returns selected option', async () => {
     await user.click(inputField);
     const yesOption = await screen.findByRole('option', { name: 'Yes' });
     await user.click(yesOption);
-    expect(onChangeMock).toBeCalledWith('theQuestion', 'Yes', // ?? why not true/false?
-    booleanProperty);
+    expect(onChangeMock).toBeCalledWith('theQuestion', true, booleanProperty);
 });

package/dist/published/components/custom/FormField/FormField.js

@@ -37,7 +37,7 @@ const FormField = (props) => {
     }
     switch (property.type) {
         case 'boolean':
-            control = (React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' }));
+            control = React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue });
             break;
         case 'date':
             control = React.createElement(DatePickerSelect, { ...commonProps });

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
 import NumberFormat from 'react-number-format';
@@ -39,14 +40,15 @@ const InputFieldComponent = (props) => {
         : property.type === 'integer'
             ? { inputProps: { min, max } }
             : null;
-    const selectOptions = property.enum ?? [];
-    if (property.enum && !property.enum.includes(value)) {
-        //note: this is different between widgets and builder
-        //builder had select options being {label, value}
-        //widgets had it like this, as strings w/isOptionEqualToValue
-        selectOptions.push(value);
-    }
-    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
+    return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
+        // note: this is different between widgets and builder
+        // builder had select options being {label, value}
+        // widgets had it like this, as strings w/isOptionEqualToValue
+        options: typeof defaultValue === 'string' &&
+            !isEmpty(defaultValue) &&
+            !property.enum.find((val) => val === defaultValue)
+            ? [...property.enum, defaultValue]
+            : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask ? (React.createElement(TextField, { id: id, sx: {
             background: 'white',

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js

@@ -40,4 +40,21 @@ describe('Autocomplete', () => {
         await user.click(option2);
         expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
     });
+    test('does not include blank default value in options', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: null }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        const blankOption = screen.queryByRole('option', { name: '' });
+        expect(blankOption).not.toBeInTheDocument();
+    });
+    test('includes default value in options', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: 'Default' }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await screen.findByRole('option', { name: 'Default' });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.228",
+    "version": "1.0.0-dev.229",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",