@oneblink/apps-react 2.3.0-beta.2 → 2.3.0-beta.4

package/dist/form-elements/FormElementPointAddress.js

@@ -1,70 +1,70 @@
-import * as React from 'react';
-import { formService } from '@oneblink/apps';
-import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import useIsMounted from '../hooks/useIsMounted';
-function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
-    const isMounted = useIsMounted();
-    const [label, setLabel] = React.useState('');
-    const [error, setError] = React.useState();
-    const [isLoadingAddressDetails, setIsLoadingAddressDetails] = React.useState(false);
-    const handleSearch = React.useCallback(async (address, abortSignal) => {
-        setError(undefined);
-        const params = {
-            address,
-            maxNumberOfResults: 10,
-        };
-        if (element.stateTerritoryFilter) {
-            params.stateTerritory = element.stateTerritoryFilter.join(',');
-        }
-        if (element.addressTypeFilter) {
-            let addressType = 'all';
-            if (element.addressTypeFilter.length === 1) {
-                addressType = element.addressTypeFilter[0];
-            }
-            params.addressType = addressType;
-        }
-        const result = await formService.searchPointAddresses(formId, params, abortSignal);
-        return result.map((suggestion, index) => ({
-            value: suggestion.id || index.toString(),
-            label: suggestion.address || index.toString(),
-        }));
-    }, [element.addressTypeFilter, element.stateTerritoryFilter, formId]);
-    const handleChange = React.useCallback(async (addressId) => {
-        if (!addressId) {
-            onChange(element, undefined);
-            return;
-        }
-        setIsLoadingAddressDetails(true);
-        try {
-            const result = await formService.getPointAddress(formId, addressId);
-            onChange(element, result);
-        }
-        catch (newError) {
-            if (isMounted.current) {
-                setError(newError);
-            }
-        }
-        if (isMounted.current) {
-            setIsLoadingAddressDetails(false);
-        }
-    }, [isMounted, onChange, element, formId]);
-    // Ensure the label is set if the value is set outside of this component
-    React.useEffect(() => {
-        var _a;
-        if (value) {
-            const newLabel = ((_a = value.addressDetails) === null || _a === void 0 ? void 0 : _a.formattedAddress) || value.addressId;
-            if (label !== newLabel) {
-                setLabel(newLabel || '');
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-point-address-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-point-address ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch })),
-        error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-            React.createElement("div", { className: "has-text-danger ob-error__text cypress-point-address-details-error-message" }, error.toString())))));
-}
-export default React.memo(FormElementPointAddress);
+import * as React from 'react';
+import { formService } from '@oneblink/apps';
+import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import useIsMounted from '../hooks/useIsMounted';
+function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
+    const isMounted = useIsMounted();
+    const [label, setLabel] = React.useState('');
+    const [error, setError] = React.useState();
+    const [isLoadingAddressDetails, setIsLoadingAddressDetails] = React.useState(false);
+    const handleSearch = React.useCallback(async (address, abortSignal) => {
+        setError(undefined);
+        const params = {
+            address,
+            maxNumberOfResults: 10,
+        };
+        if (element.stateTerritoryFilter) {
+            params.stateTerritory = element.stateTerritoryFilter.join(',');
+        }
+        if (element.addressTypeFilter) {
+            let addressType = 'all';
+            if (element.addressTypeFilter.length === 1) {
+                addressType = element.addressTypeFilter[0];
+            }
+            params.addressType = addressType;
+        }
+        const result = await formService.searchPointAddresses(formId, params, abortSignal);
+        return result.map((suggestion, index) => ({
+            value: suggestion.id || index.toString(),
+            label: suggestion.address || index.toString(),
+        }));
+    }, [element.addressTypeFilter, element.stateTerritoryFilter, formId]);
+    const handleChange = React.useCallback(async (addressId) => {
+        if (!addressId) {
+            onChange(element, undefined);
+            return;
+        }
+        setIsLoadingAddressDetails(true);
+        try {
+            const result = await formService.getPointAddress(formId, addressId);
+            onChange(element, result);
+        }
+        catch (newError) {
+            if (isMounted.current) {
+                setError(newError);
+            }
+        }
+        if (isMounted.current) {
+            setIsLoadingAddressDetails(false);
+        }
+    }, [isMounted, onChange, element, formId]);
+    // Ensure the label is set if the value is set outside of this component
+    React.useEffect(() => {
+        var _a;
+        if (value) {
+            const newLabel = ((_a = value.addressDetails) === null || _a === void 0 ? void 0 : _a.formattedAddress) || value.addressId;
+            if (label !== newLabel) {
+                setLabel(newLabel || '');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-point-address-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-point-address ob-autocomplete", element: element, id: id, required: element.required },
+            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch })),
+        error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+            React.createElement("div", { className: "has-text-danger ob-error__text cypress-point-address-details-error-message" }, error.toString())))));
+}
+export default React.memo(FormElementPointAddress);
 //# sourceMappingURL=FormElementPointAddress.js.map

package/dist/form-elements/FormElementRadio.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.RadioButtonElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-};
-declare function FormElementRadio({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementRadio>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.RadioButtonElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+};
+declare function FormElementRadio({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementRadio>;
+export default _default;

package/dist/form-elements/FormElementRadio.js

@@ -1,42 +1,42 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { Radio } from '@mui/material';
-import FormElementOptions from '../components/renderer/FormElementOptions';
-import useFormElementOptions from '../hooks/useFormElementOptions';
-import useBooleanState from '../hooks/useBooleanState';
-import OptionButton from './OptionButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementRadio({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const filteredOptions = useFormElementOptions({
-        element,
-        value,
-        onChange,
-        conditionallyShownOptions,
-    });
-    return (React.createElement("div", { className: "cypress-radio-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-radio", id: id, element: element, required: element.required },
-            React.createElement(FormElementOptions, { options: element.options }, !element.buttons ? (React.createElement("div", null, filteredOptions.map((option) => (React.createElement("div", { className: "control", key: option.value },
-                React.createElement("label", { className: "radio ob-radio__input-label cypress-radio-label", htmlFor: `${id}_${option.value}` },
-                    React.createElement(Radio, { color: "primary", className: "ob-radio__input cypress-radio-control", classes: {
-                            checked: 'ob-radio__input-checked',
-                        }, disableRipple: true, value: option.value || '', id: `${id}_${option.value}`, disabled: element.readOnly, checked: value === option.value, onChange: (e) => {
-                            setIsDirty();
-                            onChange(element, e.target.value);
-                        } }),
-                    ` ${option.label}`)))))) : (React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group" }, filteredOptions.map((option) => {
-                const isSelected = value === option.value;
-                return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
-                    React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
-                            setIsDirty();
-                            onChange(element, option.value);
-                        }, className: clsx('button ob-button ob-button__input ob-radio__button cypress-radio-button-control', {
-                            'is-primary': isSelected,
-                            'is-light': !isSelected,
-                        }) })));
-            })))),
-            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
-}
-export default React.memo(FormElementRadio);
+import * as React from 'react';
+import clsx from 'clsx';
+import { Radio } from '@mui/material';
+import FormElementOptions from '../components/renderer/FormElementOptions';
+import useFormElementOptions from '../hooks/useFormElementOptions';
+import useBooleanState from '../hooks/useBooleanState';
+import OptionButton from './OptionButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementRadio({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const filteredOptions = useFormElementOptions({
+        element,
+        value,
+        onChange,
+        conditionallyShownOptions,
+    });
+    return (React.createElement("div", { className: "cypress-radio-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-radio", id: id, element: element, required: element.required },
+            React.createElement(FormElementOptions, { options: element.options }, !element.buttons ? (React.createElement("div", null, filteredOptions.map((option) => (React.createElement("div", { className: "control", key: option.value },
+                React.createElement("label", { className: "radio ob-radio__input-label cypress-radio-label", htmlFor: `${id}_${option.value}` },
+                    React.createElement(Radio, { color: "primary", className: "ob-radio__input cypress-radio-control", classes: {
+                            checked: 'ob-radio__input-checked',
+                        }, disableRipple: true, value: option.value || '', id: `${id}_${option.value}`, disabled: element.readOnly, checked: value === option.value, onChange: (e) => {
+                            setIsDirty();
+                            onChange(element, e.target.value);
+                        } }),
+                    ` ${option.label}`)))))) : (React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group" }, filteredOptions.map((option) => {
+                const isSelected = value === option.value;
+                return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
+                    React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
+                            setIsDirty();
+                            onChange(element, option.value);
+                        }, className: clsx('button ob-button ob-button__input ob-radio__button cypress-radio-button-control', {
+                            'is-primary': isSelected,
+                            'is-light': !isSelected,
+                        }) })));
+            })))),
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(FormElementRadio);
 //# sourceMappingURL=FormElementRadio.js.map

package/dist/form-elements/FormElementRepeatableSet.d.ts

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../types/form';
-declare type Props = {
-    formId: number;
-    id: string;
-    isEven: boolean;
-    element: FormTypes.RepeatableSetElement;
-    value: Array<FormSubmissionModel> | undefined;
-    onChange: FormElementValueChangeHandler<FormSubmissionModel[]>;
-    onLookup: FormElementLookupHandler;
-    formElementConditionallyShown: FormElementConditionallyShown | undefined;
-    formElementValidation: FormElementValidation | undefined;
-    displayValidationMessage: boolean;
-};
-export declare const RepeatableSetIndexContext: React.Context<number>;
-declare function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementRepeatableSet>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../types/form';
+declare type Props = {
+    formId: number;
+    id: string;
+    isEven: boolean;
+    element: FormTypes.RepeatableSetElement;
+    value: Array<FormSubmissionModel> | undefined;
+    onChange: FormElementValueChangeHandler<FormSubmissionModel[]>;
+    onLookup: FormElementLookupHandler;
+    formElementConditionallyShown: FormElementConditionallyShown | undefined;
+    formElementValidation: FormElementValidation | undefined;
+    displayValidationMessage: boolean;
+};
+export declare const RepeatableSetIndexContext: React.Context<number>;
+declare function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementRepeatableSet>;
+export default _default;

package/dist/form-elements/FormElementRepeatableSet.js

@@ -1,127 +1,127 @@
-import * as React from 'react';
-import useBooleanState from '../hooks/useBooleanState';
-import generateDefaultData from '../services/generate-default-data';
-import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
-import Modal from '../components/renderer/Modal';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-export const RepeatableSetIndexContext = React.createContext(0);
-function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const entries = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
-    const handleAddEntry = React.useCallback(() => {
-        onChange(element, (existingEntries) => {
-            const newEntries = [...(existingEntries || [])];
-            const entry = generateDefaultData(element.elements, {});
-            newEntries.push(entry);
-            return newEntries;
-        });
-        setIsDirty();
-    }, [element, onChange, setIsDirty]);
-    const handleRemoveEntry = React.useCallback((index) => {
-        onChange(element, (existingEntries) => {
-            const newEntries = [...(existingEntries || [])];
-            newEntries.splice(index, 1);
-            return newEntries;
-        });
-        setIsDirty();
-    }, [element, onChange, setIsDirty]);
-    const handleNestedChange = React.useCallback((index, nestedElement, value) => {
-        if (nestedElement.type === 'page') {
-            return;
-        }
-        onChange(element, (existingEntries) => {
-            const newEntries = (existingEntries || []).map((entry, i) => {
-                if (i === index) {
-                    return {
-                        ...entry,
-                        [nestedElement.name]: typeof value === 'function'
-                            ? value(entry[nestedElement.name])
-                            : value,
-                    };
-                }
-                else {
-                    return entry;
-                }
-            });
-            return newEntries;
-        });
-    }, [element, onChange]);
-    const repeatableSetValidation = !formElementValidation ||
-        typeof formElementValidation === 'string' ||
-        formElementValidation.type !== 'repeatableSet'
-        ? undefined
-        : formElementValidation;
-    const repeatableSetEntriesConditionallyShown = formElementConditionallyShown &&
-        formElementConditionallyShown.type === 'repeatableSet'
-        ? formElementConditionallyShown.entries
-        : {};
-    return (React.createElement("div", { className: "cypress-repeatable-set-element" },
-        React.createElement(FormElementLabelContainer, { className: `ob-repeatable-set ${isEven ? 'even' : 'odd'}`, element: element, id: id, required: !!element.minSetEntries },
-            entries.map((entry, index) => {
-                return (React.createElement(RepeatableSetEntry, { key: index, formId: formId, index: index, id: id, isEven: isEven, entry: entry, element: element, onChange: handleNestedChange, onLookup: onLookup, onRemove: handleRemoveEntry, formElementsConditionallyShown: repeatableSetEntriesConditionallyShown[index.toString()], formElementsValidation: repeatableSetValidation &&
-                        repeatableSetValidation.entries[index.toString()], displayValidationMessages: displayValidationMessage }));
-            }),
-            (!element.maxSetEntries || entries.length < element.maxSetEntries) && (React.createElement("button", { type: "button", className: "button ob-button ob-button__add is-primary cypress-add-repeatable-set", onClick: handleAddEntry, disabled: element.readOnly },
-                React.createElement("span", { className: "icon" },
-                    React.createElement("i", { className: "material-icons" }, "add")),
-                !!element.addSetEntryLabel && (React.createElement("span", null, element.addSetEntryLabel)))),
-            (isDirty || displayValidationMessage) &&
-                !!repeatableSetValidation &&
-                !!repeatableSetValidation.set && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, repeatableSetValidation.set))))));
-}
-export default React.memo(FormElementRepeatableSet);
-const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id, index, isEven, entry, element, formElementsConditionallyShown, displayValidationMessages, formElementsValidation, onChange, onLookup, onRemove, }) {
-    const [isConfirmingRemove, confirmRemove, cancelRemove] = useBooleanState(false);
-    const handleChange = React.useCallback((element, value) => {
-        onChange(index, element, value);
-    }, [index, onChange]);
-    const handleLookup = React.useCallback((mergeLookupResults) => {
-        onLookup((currentFormSubmission) => {
-            let newEntry = {};
-            const entries = currentFormSubmission.submission[element.name];
-            const elements = currentFormSubmission.elements.map((formElement) => {
-                if (formElement.type === 'repeatableSet' &&
-                    formElement.name === element.name) {
-                    const { elements, submission } = mergeLookupResults({
-                        elements: formElement.elements,
-                        submission: entries[index],
-                    });
-                    newEntry = submission;
-                    return {
-                        ...formElement,
-                        elements,
-                    };
-                }
-                return formElement;
-            });
-            const submission = {
-                ...currentFormSubmission.submission,
-                [element.name]: entries.map((entry, i) => {
-                    if (i === index) {
-                        return newEntry;
-                    }
-                    return entry;
-                }),
-            };
-            return {
-                elements,
-                submission,
-            };
-        });
-    }, [element.name, index, onLookup]);
-    return (React.createElement(RepeatableSetIndexContext.Provider, { value: index },
-        React.createElement(Modal, { isOpen: isConfirmingRemove, className: "cypress-repeatable-set-prompt", titleClassName: "cypress-repeatable-set-remove-entry-header", title: element.removeSetEntryLabel || 'Remove Entry', actions: React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-repeatable-set", onClick: cancelRemove }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-confirm-repeatable-set", onClick: () => {
-                        cancelRemove();
-                        onRemove(index);
-                    } }, "Yes")) }, "Are you sure you want to remove this entry?"),
-        React.createElement("div", { key: index, className: "ob-repeatable-set__container cypress-repeatable-set-container" },
-            React.createElement("button", { type: "button", className: "button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry", onClick: confirmRemove, disabled: element.readOnly },
-                React.createElement("span", { className: "icon" },
-                    React.createElement("i", { className: "material-icons" }, "delete_outline")),
-                !!element.removeSetEntryLabel && (React.createElement("span", null, element.removeSetEntryLabel))),
-            React.createElement(OneBlinkFormElements, { formId: formId, idPrefix: `${id}_entry-${index}_`, isEven: isEven, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: element.elements, onChange: handleChange, onLookup: handleLookup, model: entry, parentElement: element, formElementsConditionallyShown: formElementsConditionallyShown }))));
-});
+import * as React from 'react';
+import useBooleanState from '../hooks/useBooleanState';
+import generateDefaultData from '../services/generate-default-data';
+import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
+import Modal from '../components/renderer/Modal';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+export const RepeatableSetIndexContext = React.createContext(0);
+function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const entries = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
+    const handleAddEntry = React.useCallback(() => {
+        onChange(element, (existingEntries) => {
+            const newEntries = [...(existingEntries || [])];
+            const entry = generateDefaultData(element.elements, {});
+            newEntries.push(entry);
+            return newEntries;
+        });
+        setIsDirty();
+    }, [element, onChange, setIsDirty]);
+    const handleRemoveEntry = React.useCallback((index) => {
+        onChange(element, (existingEntries) => {
+            const newEntries = [...(existingEntries || [])];
+            newEntries.splice(index, 1);
+            return newEntries;
+        });
+        setIsDirty();
+    }, [element, onChange, setIsDirty]);
+    const handleNestedChange = React.useCallback((index, nestedElement, value) => {
+        if (nestedElement.type === 'page') {
+            return;
+        }
+        onChange(element, (existingEntries) => {
+            const newEntries = (existingEntries || []).map((entry, i) => {
+                if (i === index) {
+                    return {
+                        ...entry,
+                        [nestedElement.name]: typeof value === 'function'
+                            ? value(entry[nestedElement.name])
+                            : value,
+                    };
+                }
+                else {
+                    return entry;
+                }
+            });
+            return newEntries;
+        });
+    }, [element, onChange]);
+    const repeatableSetValidation = !formElementValidation ||
+        typeof formElementValidation === 'string' ||
+        formElementValidation.type !== 'repeatableSet'
+        ? undefined
+        : formElementValidation;
+    const repeatableSetEntriesConditionallyShown = formElementConditionallyShown &&
+        formElementConditionallyShown.type === 'repeatableSet'
+        ? formElementConditionallyShown.entries
+        : {};
+    return (React.createElement("div", { className: "cypress-repeatable-set-element" },
+        React.createElement(FormElementLabelContainer, { className: `ob-repeatable-set ${isEven ? 'even' : 'odd'}`, element: element, id: id, required: !!element.minSetEntries },
+            entries.map((entry, index) => {
+                return (React.createElement(RepeatableSetEntry, { key: index, formId: formId, index: index, id: id, isEven: isEven, entry: entry, element: element, onChange: handleNestedChange, onLookup: onLookup, onRemove: handleRemoveEntry, formElementsConditionallyShown: repeatableSetEntriesConditionallyShown[index.toString()], formElementsValidation: repeatableSetValidation &&
+                        repeatableSetValidation.entries[index.toString()], displayValidationMessages: displayValidationMessage }));
+            }),
+            (!element.maxSetEntries || entries.length < element.maxSetEntries) && (React.createElement("button", { type: "button", className: "button ob-button ob-button__add is-primary cypress-add-repeatable-set", onClick: handleAddEntry, disabled: element.readOnly },
+                React.createElement("span", { className: "icon" },
+                    React.createElement("i", { className: "material-icons" }, "add")),
+                !!element.addSetEntryLabel && (React.createElement("span", null, element.addSetEntryLabel)))),
+            (isDirty || displayValidationMessage) &&
+                !!repeatableSetValidation &&
+                !!repeatableSetValidation.set && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, repeatableSetValidation.set))))));
+}
+export default React.memo(FormElementRepeatableSet);
+const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id, index, isEven, entry, element, formElementsConditionallyShown, displayValidationMessages, formElementsValidation, onChange, onLookup, onRemove, }) {
+    const [isConfirmingRemove, confirmRemove, cancelRemove] = useBooleanState(false);
+    const handleChange = React.useCallback((element, value) => {
+        onChange(index, element, value);
+    }, [index, onChange]);
+    const handleLookup = React.useCallback((mergeLookupResults) => {
+        onLookup((currentFormSubmission) => {
+            let newEntry = {};
+            const entries = currentFormSubmission.submission[element.name];
+            const elements = currentFormSubmission.elements.map((formElement) => {
+                if (formElement.type === 'repeatableSet' &&
+                    formElement.name === element.name) {
+                    const { elements, submission } = mergeLookupResults({
+                        elements: formElement.elements,
+                        submission: entries[index],
+                    });
+                    newEntry = submission;
+                    return {
+                        ...formElement,
+                        elements,
+                    };
+                }
+                return formElement;
+            });
+            const submission = {
+                ...currentFormSubmission.submission,
+                [element.name]: entries.map((entry, i) => {
+                    if (i === index) {
+                        return newEntry;
+                    }
+                    return entry;
+                }),
+            };
+            return {
+                elements,
+                submission,
+            };
+        });
+    }, [element.name, index, onLookup]);
+    return (React.createElement(RepeatableSetIndexContext.Provider, { value: index },
+        React.createElement(Modal, { isOpen: isConfirmingRemove, className: "cypress-repeatable-set-prompt", titleClassName: "cypress-repeatable-set-remove-entry-header", title: element.removeSetEntryLabel || 'Remove Entry', actions: React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", className: "button ob-button is-light cypress-cancel-repeatable-set", onClick: cancelRemove }, "Cancel"),
+                React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-confirm-repeatable-set", onClick: () => {
+                        cancelRemove();
+                        onRemove(index);
+                    } }, "Yes")) }, "Are you sure you want to remove this entry?"),
+        React.createElement("div", { key: index, className: "ob-repeatable-set__container cypress-repeatable-set-container" },
+            React.createElement("button", { type: "button", className: "button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry", onClick: confirmRemove, disabled: element.readOnly },
+                React.createElement("span", { className: "icon" },
+                    React.createElement("i", { className: "material-icons" }, "delete_outline")),
+                !!element.removeSetEntryLabel && (React.createElement("span", null, element.removeSetEntryLabel))),
+            React.createElement(OneBlinkFormElements, { formId: formId, idPrefix: `${id}_entry-${index}_`, isEven: isEven, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: element.elements, onChange: handleChange, onLookup: handleLookup, model: entry, parentElement: element, formElementsConditionallyShown: formElementsConditionallyShown }))));
+});
 //# sourceMappingURL=FormElementRepeatableSet.js.map

package/dist/form-elements/FormElementSection.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { Props } from '../components/renderer/OneBlinkFormElements';
-declare function FormElementSection<T extends FormTypes._NestedElementsElement>({ element, onLookup, displayValidationMessages, ...props }: Omit<Props<T>, 'elements'> & {
-    element: FormTypes.SectionElement;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementSection>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { Props } from '../components/renderer/OneBlinkFormElements';
+declare function FormElementSection<T extends FormTypes._NestedElementsElement>({ element, onLookup, displayValidationMessages, ...props }: Omit<Props<T>, 'elements'> & {
+    element: FormTypes.SectionElement;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementSection>;
+export default _default;