@evoke-platform/ui-components 1.5.1-dev.0 → 1.5.1-dev.2

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

@@ -11,6 +11,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
     isAddressLine1?: boolean;
     initialValue?: string;
     displayOption?: 'radioButton' | 'dropdown';
+    strictlyTrue?: boolean;
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;
@@ -27,7 +28,7 @@ export declare class FormFieldComponent extends ReactComponent {
     constructor(component: FormFieldComponentProps, options: any, data: any);
     init(): void;
     clearErrors(): void;
-    handleValidation(value: string): void;
+    handleValidation(value: any): void;
     hasErrors(): boolean;
     errorMessages(): string;
     /**

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

@@ -136,13 +136,18 @@ export class FormFieldComponent extends ReactComponent {
                 }
             }
         };
-        if (component.type === 'Boolean' && typeof component.initialValue === 'boolean') {
-            // For Boolean components, FormIO treats false values as null/undefined
-            // We need to explicitly set the default value to ensure the correct Boolean state is preserved
-            const defaultValue = component.defaultValue === null || component.defaultValue === undefined
-                ? component.initialValue
-                : component.defaultValue;
-            this.setValue(defaultValue);
+        if (component.type === 'Boolean') {
+            if (typeof component.initialValue === 'boolean') {
+                // For Boolean components, FormIO treats false values as null/undefined
+                // We need to explicitly set the default value to ensure the correct Boolean state is preserved
+                const defaultValue = component.defaultValue === null || component.defaultValue === undefined
+                    ? component.initialValue
+                    : component.defaultValue;
+                this.setValue(defaultValue);
+            }
+            else if (!component.initialValue) {
+                this.setValue(component.defaultValue || false);
+            }
         }
         this.errorDetails = {};
         this.handleChange = this.handleChange.bind(this);
@@ -255,7 +260,9 @@ export class FormFieldComponent extends ReactComponent {
                     if (groups?.relatedObjectProperty && groups?.nestedProperty) {
                         this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
                             if (value) {
-                                const newValue = value[groups.nestedProperty];
+                                const newValue = this.component.type === 'Boolean'
+                                    ? value[groups.nestedProperty] || false
+                                    : value[groups.nestedProperty];
                                 this.setValue(newValue);
                                 this.updateValue(newValue, { modified: true });
                                 this.attach(this.element);
@@ -293,6 +300,14 @@ export class FormFieldComponent extends ReactComponent {
             delete this.errorDetails['rootError'];
             return;
         }
+        if (this.component.type === 'Boolean') {
+            if (this.component.strictlyTrue && !value) {
+                this.errorDetails[`${this.component.key}-required`] = this.component.label + ' is required';
+            }
+            else {
+                delete this.errorDetails[`${this.component.key}-required`];
+            }
+        }
         if (this.component.type == 'Date' && value && typeof value === 'object' && value['invalid']) {
             this.errorDetails['invalidDate'] = 'Invalid Date';
         }
@@ -470,6 +485,6 @@ export class FormFieldComponent extends ReactComponent {
                             falsePositiveMaskError &&
                             isEmpty(this.errorDetails) &&
                             this.emit('changed-' + this.component.key, e.target.value);
-                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.validate?.required : undefined }))), root);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined }))), root);
     }
 }

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

@@ -199,7 +199,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 showCharCount: displayOptions?.charCount,
                 objectId: object.id,
                 validate: {
-                    required: displayOptions?.required,
+                    required: displayOptions?.required || parameter.required,
                     criteria: ['collection', 'object'].includes(parameter.type ?? '')
                         ? parameter.validation?.criteria
                         : undefined,
@@ -246,6 +246,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     : undefined,
                 conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
+                strictlyTrue: parameter.type === 'boolean' && parameter.strictlyTrue,
             };
         }
     })

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

@@ -1,6 +1,7 @@
 import parse from 'html-react-parser';
 import React, { useEffect, useState } from 'react';
-import { Help } from '../../../../icons';
+import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Help, ToggleOff, ToggleOn } from '../../../../icons';
+import { defaultTheme } from '../../../../theme/defaultTheme';
 import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, Switch, TextField, Tooltip, Typography, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const descriptionStyles = {
@@ -10,7 +11,7 @@ const descriptionStyles = {
     marginX: 0,
 };
 const BooleanSelect = (props) => {
-    const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, required, tooltip, description, placeholder, onBlur, additionalProps, } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, strictlyTrue, tooltip, description, placeholder, onBlur, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         setValue(defaultValue);
@@ -29,14 +30,39 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return displayOption === 'dropdown' ? (readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE" }))) : (React.createElement(FormControl, { error: error, fullWidth: true },
-        React.createElement(FormControlLabel, { labelPlacement: "end", label: React.createElement(Typography, { variant: "body2", sx: { wordWrap: 'break-word', fontFamily: 'Public Sans' } },
-                label,
-                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
-                    React.createElement(IconButton, null,
-                        React.createElement(Help, { sx: { fontSize: '14px' } })))),
-                required && (React.createElement(Typography, { variant: "body2", component: "span", color: "error", sx: { marginLeft: '4px', fontSize: '18px' } }, "*"))), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": required, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), disabled: readOnly, sx: { alignSelf: 'start' } })) : (React.createElement(Checkbox, { id: id, "aria-required": required, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), disabled: readOnly, sx: { alignSelf: 'start', padding: '4px 9px 9px 9px' } })) }),
-        error && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
-        description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description)))));
+    const descriptionComponent = () => {
+        return (description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description))));
+    };
+    const labelComponent = () => {
+        return (React.createElement(Typography, { component: "span", variant: "body2", sx: { wordWrap: 'break-word', ...defaultTheme.typography.body2 } },
+            label,
+            strictlyTrue && (React.createElement(Typography, { component: "span", sx: { color: 'red', fontSize: '12px', marginLeft: '4px' } }, "*")),
+            tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                React.createElement(IconButton, null,
+                    React.createElement(Help, { sx: { fontSize: '14px' } }))))));
+    };
+    const readOnlyComponent = () => {
+        if (displayOption === 'dropdown') {
+            return React.createElement(InputFieldComponent, { ...props });
+        }
+        else {
+            const iconColor = 'rgb(160, 160, 160)';
+            return (React.createElement(FormControl, { disabled: true, required: strictlyTrue, fullWidth: true },
+                React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { gap: 1, marginLeft: 0 }, control: value ? (displayOption === 'checkbox' ? (React.createElement(CheckBoxIcon, { fontSize: size ?? 'medium', "aria-label": "Checked", htmlColor: iconColor })) : (React.createElement(ToggleOn, { fontSize: size ?? 'medium', "aria-label": "Checked", htmlColor: iconColor }))) : displayOption === 'checkbox' ? (React.createElement(CheckBoxOutlineBlank, { fontSize: size ?? 'medium', "aria-label": "Unchecked", htmlColor: iconColor })) : (React.createElement(ToggleOff, { fontSize: size ?? 'medium', "aria-label": "Unchecked", htmlColor: iconColor })) }),
+                descriptionComponent()));
+        }
+    };
+    if (readOnly) {
+        return readOnlyComponent();
+    }
+    return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
+        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
+                    alignSelf: 'start',
+                } })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                    alignSelf: 'start',
+                    padding: '4px 9px 9px 9px',
+                } })) }),
+        error && errorMessage?.length && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
+        descriptionComponent()));
 };
 export default BooleanSelect;

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

@@ -12,6 +12,7 @@ export type FormFieldProps = {
     error?: boolean;
     errorMessage?: string;
     required?: boolean;
+    strictlyTrue?: boolean;
     readOnly?: boolean;
     min?: number;
     max?: number;

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, displayOption, sortBy, label, description, tooltip, } = props;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -20,7 +20,8 @@ const FormField = (props) => {
         readOnly,
         defaultValue,
         selectOptions,
-        required: required,
+        required,
+        strictlyTrue,
         size,
         placeholder,
         min,

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

@@ -133,7 +133,8 @@ BooleanField.args = {
     readOnly: false,
     size: 'small',
     displayOption: 'checkbox',
-    label: "<a href='#'>Label</a>",
+    label: 'Label',
+    description: "Description <a href='#'>link</a>",
 };
 export const FileUploadField = FormFieldTemplate.bind({});
 FileUploadField.args = {

package/dist/published/stories/Table.stories.js

@@ -23,7 +23,6 @@ const rows = [
 const TableTemplate = (args) => {
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(5);
-    console.log('🚀 ~ file: Table.stories.tsx ~ line 40 ~ rowsPerPage', rowsPerPage);
     const handleChangePage = (event, newPage) => {
         setPage(newPage);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.1-dev.0",
+    "version": "1.5.1-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -86,7 +86,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.2.0-0",
+        "@evoke-platform/context": "^1.3.0-0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },