@evoke-platform/ui-components 1.1.0-testing.6 → 1.1.0-testing.7

package/dist/published/components/custom/Form/Common/FormComponentWrapper.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ObjectProperty } from '../../../../types';
 type FormComponentWrapperProps = {
     inputId: string;
     label: string;
@@ -17,6 +18,10 @@ type FormComponentWrapperProps = {
     viewOnly: boolean;
     children: React.ReactNode;
     key: string;
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox';
+    onChange?: (key: string, value: unknown) => void;
+    property?: ObjectProperty;
+    readOnly?: boolean;
 };
 /**
  * A component that wraps a FormField and adds a label,

package/dist/published/components/custom/Form/Common/FormComponentWrapper.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { ErrorRounded, Help } from '../../../../icons';
+import { ErrorRounded, Help, HighlightOffOutlined } from '../../../../icons';
 import { IconButton, Tooltip, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const underFieldStyles = {
@@ -13,6 +13,11 @@ const descriptionStyles = {
     whiteSpace: 'normal',
     paddingBottom: '4px',
 };
+const clearBtnStyles = {
+    color: '#637381',
+    fontSize: '1.2rem',
+    marginBottom: '2px',
+};
 const PrefixSuffix = (props) => {
     const { prefix, suffix, height } = props;
     const text = prefix || suffix;
@@ -46,7 +51,7 @@ const PrefixSuffix = (props) => {
  * description, tooltip, prefix, suffix and word/char counts
  */
 export const FormComponentWrapper = (props) => {
-    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, } = props;
+    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, onChange, property, readOnly, } = props;
     const [fieldHeight, setFieldHeight] = useState(40);
     const { maxLength } = validate;
     const fieldRef = useRef(null);
@@ -62,7 +67,7 @@ export const FormComponentWrapper = (props) => {
         charCount = maxLength - charCount;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId },
+            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
                 label,
                 validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
                     ` *`,
@@ -70,7 +75,13 @@ export const FormComponentWrapper = (props) => {
                 tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
                     React.createElement(IconButton, null,
                         React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-            React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description),
+            displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
+                            property && onChange(property.id, '');
+                        } },
+                        React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
+            React.createElement(Typography, { variant: "caption", sx: { ...descriptionStyles, ...(displayOption === 'radioButton' && { display: 'flex' }) } }, description),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
                 React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
                 React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -10,6 +10,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
     addressPropertyId?: string;
     isAddressLine1?: boolean;
     initialValue?: string;
+    displayOption?: 'radioButton' | 'dropdown';
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -448,7 +448,7 @@ export class FormFieldComponent extends ReactComponent {
          * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
          * Will need to be revisited later. Possibly look into using this.ref */
         return ReactDOM.render(React.createElement("div", null,
-            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue },
+            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue, onChange: this.handleChange },
                 React.createElement(FormField, { onChange: this.handleChange, onBlur: (e) => {
                         // no mask errors when field is empty and not required
                         const componentError = this.root.errors.find((error) => error.component.key === this.component.key);

package/dist/published/components/custom/Form/utils.js

@@ -195,7 +195,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     displayOptions?.defaultValue &&
                     typeof displayOptions.defaultValue !== 'string'
                     ? displayOptions.defaultValue?.sortBy
-                    : undefined,
+                    : displayOptions?.choicesDisplay?.sortBy,
                 orderBy: parameter.type === 'object' &&
                     displayOptions?.defaultValue &&
                     typeof displayOptions.defaultValue !== 'string'
@@ -205,7 +205,11 @@ export function convertFormToComponents(entries, parameters, object) {
                 inputMaskPlacholderChar: displayOptions?.placeholderChar,
                 placeholder: displayOptions?.placeholder,
                 tableView: false,
-                displayOption: parameter.type === 'object' ? displayOptions?.relatedObjectDisplay : undefined,
+                displayOption: parameter.type === 'object'
+                    ? displayOptions?.relatedObjectDisplay
+                    : parameter.type === 'string' && parameter.enum
+                        ? displayOptions?.choicesDisplay?.type
+                        : undefined,
                 labelPosition: 'top',
                 dataSrc: property.enum?.length ? 'values' : undefined,
                 showCharCount: displayOptions?.charCount,
@@ -367,7 +371,20 @@ export function convertComponentsToForm(components) {
                     ...(component.readOnly ? { readOnly: component.readOnly } : {}),
                     ...(component.mode ? { mode: component.mode } : {}),
                     ...(component.validate?.required ? { required: component.validate?.required } : {}),
-                    ...(component.displayOption ? { relatedObjectDisplay: component.displayOption } : {}),
+                    ...((component.displayOption || component.sortBy) &&
+                        component.property?.enum &&
+                        component.property?.type !== 'array' &&
+                        component.property?.type !== 'object'
+                        ? {
+                            choicesDisplay: {
+                                ...(component.displayOption ? { type: component.displayOption } : {}),
+                                ...(component.sortBy ? { sortBy: component.sortBy } : {}),
+                            },
+                        }
+                        : {}),
+                    ...(component.displayOption && component?.property?.type === 'object'
+                        ? { relatedObjectDisplay: component.displayOption }
+                        : {}),
                     ...(component.defaultToCurrentDate ||
                         component.defaultToCurrentTime ||
                         component.initialValue ||

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -28,6 +28,8 @@ export type FormFieldProps = {
     getOptionLabel?: (option: AutocompleteOption) => string;
     disableCloseOnSelect?: boolean;
     additionalProps?: Record<string, unknown>;
+    displayOption?: 'dropdown' | 'radioButton';
+    sortBy?: 'ASC' | 'DESC' | 'NONE';
 };
 declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

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

@@ -8,7 +8,7 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
-    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, } = props;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -30,6 +30,8 @@ const FormField = (props) => {
         getOptionLabel,
         disableCloseOnSelect,
         additionalProps,
+        displayOption,
+        sortBy,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, TextField } from '../../../core';
+import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const Select = (props) => {
-    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -28,10 +28,34 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], disableClearable: true, inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    const sortedOptions = (() => {
+        if (!selectOptions)
+            return [];
+        const options = [...selectOptions];
+        switch (sortBy) {
+            case 'NONE':
+                return options;
+            case 'DESC':
+                return options.sort((a, b) => typeof a === 'string' ? b.localeCompare(a) : b.label.localeCompare(a.label));
+            default:
+                return options.sort((a, b) => typeof a === 'string' ? a.localeCompare(b) : a.label.localeCompare(b.label));
+        }
+    })();
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(FormControl, { error: error, required: required },
+        React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: value, onChange: handleChange, sx: { paddingLeft: '12px' } }, sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
+                    ...(size === 'small' && { paddingTop: '2px', paddingBottom: '2px' }),
+                    ...(error && {
+                        color: '#FF4842',
+                        '&.Mui-checked': { color: '#FF4842' },
+                    }),
+                } }), label: typeof option === 'string' ? option : option.label })))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, disableCloseOnSelect: disableCloseOnSelect, ...(additionalProps ?? {}) }));
+            : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            '& button.MuiButtonBase-root': {
+                visibility: 'visible',
+            },
+        }, ...(additionalProps ?? {}) }));
 };
 export default Select;

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

@@ -32,6 +32,20 @@ describe('Single select', () => {
         await screen.findByRole('option', { name: 'option 2' });
         expect(screen.queryByRole('option', { name: 'something different' })).not.toBeInTheDocument();
     });
+    test.each([
+        { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
+        { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
+        { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
+    ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
+        const options = ['option 2', 'option 1', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: jest.fn() }));
+        const user = userEvent.setup();
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        const allOptions = screen.getAllByRole('option');
+        const optionLabels = allOptions.map((option) => option.textContent);
+        expect(optionLabels).toEqual(expectedValues);
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -57,3 +71,30 @@ describe('Multi select', () => {
         expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
     });
 });
+describe('Radio Single select', () => {
+    const choiceProperty = {
+        id: 'selectOptions',
+        name: 'Select Options',
+        type: 'choices',
+    };
+    test('returns selected radio option', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = jest.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock }));
+        const option2 = await screen.findByRole('radio', { name: 'option 2' });
+        await user.click(option2);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('option 2'), choiceProperty);
+    });
+    test.each([
+        { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
+        { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
+        { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
+    ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
+        const options = ['option 2', 'option 1', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: jest.fn() }));
+        const radioButtons = screen.getAllByRole('radio');
+        const radioValues = radioButtons.map((radioButton) => radioButton.value);
+        expect(radioValues).toEqual(expectedValues);
+    });
+});

package/dist/published/stories/FormField.stories.js

@@ -85,6 +85,8 @@ ChoicesSelectField.args = {
     locale: 'string',
     size: 'small',
     placeholder: 'string',
+    displayOption: 'dropdown',
+    sortBy: 'ASC',
 };
 export const DatePickerField = FormFieldTemplate.bind({});
 DatePickerField.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.6",
+    "version": "1.1.0-testing.7",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",