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

package/dist/form-elements/FormElementFiles.js

@@ -1,43 +1,43 @@
-import * as React from 'react';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import FormElementFile from './FormElementFile';
-import useAttachments from '../hooks/attachments/useAttachments';
-import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../services/form-validation';
-export function stringifyAttachments(value) {
-    if (value === null || value === void 0 ? void 0 : value.every((attachment) => !attachment.type)) {
-        return JSON.stringify(value);
-    }
-    return '';
-}
-function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const { isDirty, addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange);
-    const inputRef = React.useRef(null);
-    const handleAdd = React.useCallback(() => {
-        if (!inputRef.current)
-            return;
-        // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED
-        inputRef.current.value = '';
-        inputRef.current.click();
-    }, []);
-    const attachments = value || [];
-    return (React.createElement("div", { className: "cypress-files-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-files", element: element, id: id, required: !!element.minEntries },
-            React.createElement("input", { ref: inputRef, type: "file", name: element.name, id: id, className: "file-input ob-input", multiple: element.maxEntries !== 1, disabled: element.readOnly, onChange: (event) => addAttachments(event.target.files ? Array.from(event.target.files) : []) }),
-            React.createElement("div", { className: "control cypress-files-control" },
-                React.createElement("div", { className: "columns is-multiline" },
-                    attachments.map((attachment) => {
-                        return (React.createElement(FormElementFile, { key: attachment.type ? attachment._id : attachment.id, element: element, onRemove: removeAttachment, file: attachment, onChange: changeAttachment, disableUpload: (!!element.maxEntries &&
-                                attachments.length > element.maxEntries) ||
-                                !checkFileNameIsValid(element, attachment.fileName) ||
-                                !checkFileNameExtensionIsValid(element, attachment.fileName) }));
-                    }),
-                    !element.readOnly &&
-                        (!element.maxEntries ||
-                            attachments.length < element.maxEntries) && (React.createElement("div", { className: "column is-one-quarter" },
-                        React.createElement("button", { type: "button", className: "button ob-files__add-new-button", onClick: handleAdd },
-                            React.createElement("i", { className: "material-icons icon-x-large" }, "add")))))),
-            (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(FormElementFiles);
+import * as React from 'react';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import FormElementFile from './FormElementFile';
+import useAttachments from '../hooks/attachments/useAttachments';
+import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../services/form-validation';
+export function stringifyAttachments(value) {
+    if (value === null || value === void 0 ? void 0 : value.every((attachment) => !attachment.type)) {
+        return JSON.stringify(value);
+    }
+    return '';
+}
+function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const { isDirty, addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange);
+    const inputRef = React.useRef(null);
+    const handleAdd = React.useCallback(() => {
+        if (!inputRef.current)
+            return;
+        // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED
+        inputRef.current.value = '';
+        inputRef.current.click();
+    }, []);
+    const attachments = value || [];
+    return (React.createElement("div", { className: "cypress-files-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-files", element: element, id: id, required: !!element.minEntries },
+            React.createElement("input", { ref: inputRef, type: "file", name: element.name, id: id, className: "file-input ob-input", multiple: element.maxEntries !== 1, disabled: element.readOnly, onChange: (event) => addAttachments(event.target.files ? Array.from(event.target.files) : []) }),
+            React.createElement("div", { className: "control cypress-files-control" },
+                React.createElement("div", { className: "columns is-multiline" },
+                    attachments.map((attachment) => {
+                        return (React.createElement(FormElementFile, { key: attachment.type ? attachment._id : attachment.id, element: element, onRemove: removeAttachment, file: attachment, onChange: changeAttachment, disableUpload: (!!element.maxEntries &&
+                                attachments.length > element.maxEntries) ||
+                                !checkFileNameIsValid(element, attachment.fileName) ||
+                                !checkFileNameExtensionIsValid(element, attachment.fileName) }));
+                    }),
+                    !element.readOnly &&
+                        (!element.maxEntries ||
+                            attachments.length < element.maxEntries) && (React.createElement("div", { className: "column is-one-quarter" },
+                        React.createElement("button", { type: "button", className: "button ob-files__add-new-button", onClick: handleAdd },
+                            React.createElement("i", { className: "material-icons icon-x-large" }, "add")))))),
+            (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(FormElementFiles);
 //# sourceMappingURL=FormElementFiles.js.map

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

@@ -1,17 +1,17 @@
-import { FormTypes } from '@oneblink/types';
-import * as React from 'react';
-import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../types/form';
-export declare type Props = {
-    formId: number;
-    id: string;
-    element: FormTypes.FormFormElement | FormTypes.InfoPageElement;
-    value: FormSubmissionModel | undefined;
-    onChange: FormElementValueChangeHandler<FormSubmissionModel>;
-    onLookup: FormElementLookupHandler;
-    formElementValidation: FormElementValidation | undefined;
-    displayValidationMessages: boolean;
-    formElementConditionallyShown: FormElementConditionallyShown | undefined;
-};
-declare function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementForm>;
-export default _default;
+import { FormTypes } from '@oneblink/types';
+import * as React from 'react';
+import { FormElementConditionallyShown, FormElementLookupHandler, FormElementValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../types/form';
+export declare type Props = {
+    formId: number;
+    id: string;
+    element: FormTypes.FormFormElement | FormTypes.InfoPageElement;
+    value: FormSubmissionModel | undefined;
+    onChange: FormElementValueChangeHandler<FormSubmissionModel>;
+    onLookup: FormElementLookupHandler;
+    formElementValidation: FormElementValidation | undefined;
+    displayValidationMessages: boolean;
+    formElementConditionallyShown: FormElementConditionallyShown | undefined;
+};
+declare function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementForm>;
+export default _default;

package/dist/form-elements/FormElementForm.js

@@ -1,64 +1,64 @@
-import * as React from 'react';
-import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
-function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, }) {
-    const handleNestedChange = React.useCallback((nestedElement, nestedElementValue) => {
-        if (nestedElement.type === 'page')
-            return;
-        onChange(element, (existingValue) => ({
-            ...existingValue,
-            [nestedElement.name]: typeof nestedElementValue === 'function'
-                ? nestedElementValue(existingValue ? existingValue[nestedElement.name] : undefined)
-                : nestedElementValue,
-        }));
-    }, [element, onChange]);
-    const handleLookup = React.useCallback((mergeLookupResults) => {
-        onLookup((currentFormSubmission) => {
-            let model = currentFormSubmission.submission[element.name];
-            const elements = currentFormSubmission.elements.map((formElement) => {
-                if (formElement.type === 'form' &&
-                    formElement.name === element.name &&
-                    Array.isArray(formElement.elements)) {
-                    const { elements, submission } = mergeLookupResults({
-                        elements: formElement.elements,
-                        submission: model,
-                    });
-                    model = submission;
-                    return {
-                        ...formElement,
-                        elements,
-                    };
-                }
-                return formElement;
-            });
-            const submission = {
-                ...currentFormSubmission.submission,
-                [element.name]: model,
-            };
-            return {
-                elements,
-                submission,
-            };
-        });
-    }, [element.name, onLookup]);
-    const validation = React.useMemo(() => {
-        return !!formElementValidation &&
-            typeof formElementValidation !== 'string' &&
-            formElementValidation.type === 'formElements'
-            ? formElementValidation.formElements
-            : undefined;
-    }, [formElementValidation]);
-    const formElementsConditionallyShown = React.useMemo(() => {
-        return formElementConditionallyShown &&
-            formElementConditionallyShown.type === 'formElements'
-            ? formElementConditionallyShown.formElements
-            : undefined;
-    }, [formElementConditionallyShown]);
-    const parentElement = React.useMemo(() => {
-        return {
-            elements: Array.isArray(element.elements) ? element.elements : [],
-        };
-    }, [element.elements]);
-    return (React.createElement(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, idPrefix: `${id}_` }));
-}
-export default React.memo(FormElementForm);
+import * as React from 'react';
+import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
+function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, }) {
+    const handleNestedChange = React.useCallback((nestedElement, nestedElementValue) => {
+        if (nestedElement.type === 'page')
+            return;
+        onChange(element, (existingValue) => ({
+            ...existingValue,
+            [nestedElement.name]: typeof nestedElementValue === 'function'
+                ? nestedElementValue(existingValue ? existingValue[nestedElement.name] : undefined)
+                : nestedElementValue,
+        }));
+    }, [element, onChange]);
+    const handleLookup = React.useCallback((mergeLookupResults) => {
+        onLookup((currentFormSubmission) => {
+            let model = currentFormSubmission.submission[element.name];
+            const elements = currentFormSubmission.elements.map((formElement) => {
+                if (formElement.type === 'form' &&
+                    formElement.name === element.name &&
+                    Array.isArray(formElement.elements)) {
+                    const { elements, submission } = mergeLookupResults({
+                        elements: formElement.elements,
+                        submission: model,
+                    });
+                    model = submission;
+                    return {
+                        ...formElement,
+                        elements,
+                    };
+                }
+                return formElement;
+            });
+            const submission = {
+                ...currentFormSubmission.submission,
+                [element.name]: model,
+            };
+            return {
+                elements,
+                submission,
+            };
+        });
+    }, [element.name, onLookup]);
+    const validation = React.useMemo(() => {
+        return !!formElementValidation &&
+            typeof formElementValidation !== 'string' &&
+            formElementValidation.type === 'formElements'
+            ? formElementValidation.formElements
+            : undefined;
+    }, [formElementValidation]);
+    const formElementsConditionallyShown = React.useMemo(() => {
+        return formElementConditionallyShown &&
+            formElementConditionallyShown.type === 'formElements'
+            ? formElementConditionallyShown.formElements
+            : undefined;
+    }, [formElementConditionallyShown]);
+    const parentElement = React.useMemo(() => {
+        return {
+            elements: Array.isArray(element.elements) ? element.elements : [],
+        };
+    }, [element.elements]);
+    return (React.createElement(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, idPrefix: `${id}_` }));
+}
+export default React.memo(FormElementForm);
 //# sourceMappingURL=FormElementForm.js.map

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { Props } from './FormElementForm';
-declare function FormElementFreshdeskDependentField({ element, ...props }: Omit<Props, 'element'> & {
-    element: FormTypes.FreshdeskDependentFieldElement;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementFreshdeskDependentField>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { Props } from './FormElementForm';
+declare function FormElementFreshdeskDependentField({ element, ...props }: Omit<Props, 'element'> & {
+    element: FormTypes.FreshdeskDependentFieldElement;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementFreshdeskDependentField>;
+export default _default;

package/dist/form-elements/FormElementFreshdeskDependentField.js

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import FormElementForm from './FormElementForm';
-import generateFreshdeskDependentFieldElements from '../services/generateFreshdeskDependentFieldElements';
-function FormElementFreshdeskDependentField({ element, ...props }) {
-    const formElement = React.useMemo(() => {
-        return {
-            ...element,
-            type: 'form',
-            formId: NaN,
-            elements: generateFreshdeskDependentFieldElements(element, props.value),
-        };
-    }, [element, props.value]);
-    return React.createElement(FormElementForm, { element: formElement, ...props });
-}
-export default React.memo(FormElementFreshdeskDependentField);
+import * as React from 'react';
+import FormElementForm from './FormElementForm';
+import generateFreshdeskDependentFieldElements from '../services/generateFreshdeskDependentFieldElements';
+function FormElementFreshdeskDependentField({ element, ...props }) {
+    const formElement = React.useMemo(() => {
+        return {
+            ...element,
+            type: 'form',
+            formId: NaN,
+            elements: generateFreshdeskDependentFieldElements(element, props.value),
+        };
+    }, [element, props.value]);
+    return React.createElement(FormElementForm, { element: formElement, ...props });
+}
+export default React.memo(FormElementFreshdeskDependentField);
 //# sourceMappingURL=FormElementFreshdeskDependentField.js.map

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes, GeoscapeTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    formId: number;
-    id: string;
-    element: FormTypes.GeoscapeAddressElement;
-    value: GeoscapeTypes.GeoscapeAddress | undefined;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>;
-};
-declare function FormElementGeoscapeAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementGeoscapeAddress>;
-export default _default;
+import * as React from 'react';
+import { FormTypes, GeoscapeTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    formId: number;
+    id: string;
+    element: FormTypes.GeoscapeAddressElement;
+    value: GeoscapeTypes.GeoscapeAddress | undefined;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    onChange: FormElementValueChangeHandler<GeoscapeTypes.GeoscapeAddress>;
+};
+declare function FormElementGeoscapeAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementGeoscapeAddress>;
+export default _default;

package/dist/form-elements/FormElementGeoscapeAddress.js

@@ -1,63 +1,63 @@
-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 FormElementGeoscapeAddress({ 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 (query, abortSignal) => {
-        setError(undefined);
-        const params = {
-            query,
-            maxNumberOfResults: 10,
-        };
-        if (element.stateTerritoryFilter) {
-            params.stateTerritory = element.stateTerritoryFilter.join(',');
-        }
-        const result = await formService.searchGeoscapeAddresses(formId, params, abortSignal);
-        return result.suggest.map((suggestion, index) => ({
-            value: suggestion.id || index.toString(),
-            label: suggestion.address || index.toString(),
-        }));
-    }, [element.stateTerritoryFilter, formId]);
-    const handleChange = React.useCallback(async (addressId) => {
-        if (!addressId) {
-            onChange(element, undefined);
-            return;
-        }
-        setIsLoadingAddressDetails(true);
-        try {
-            const result = await formService.getGeoscapeAddress(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-geoscape-address-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-geoscape-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-geoscape-address-details-error-message" }, error.toString())))));
-}
-export default React.memo(FormElementGeoscapeAddress);
+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 FormElementGeoscapeAddress({ 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 (query, abortSignal) => {
+        setError(undefined);
+        const params = {
+            query,
+            maxNumberOfResults: 10,
+        };
+        if (element.stateTerritoryFilter) {
+            params.stateTerritory = element.stateTerritoryFilter.join(',');
+        }
+        const result = await formService.searchGeoscapeAddresses(formId, params, abortSignal);
+        return result.suggest.map((suggestion, index) => ({
+            value: suggestion.id || index.toString(),
+            label: suggestion.address || index.toString(),
+        }));
+    }, [element.stateTerritoryFilter, formId]);
+    const handleChange = React.useCallback(async (addressId) => {
+        if (!addressId) {
+            onChange(element, undefined);
+            return;
+        }
+        setIsLoadingAddressDetails(true);
+        try {
+            const result = await formService.getGeoscapeAddress(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-geoscape-address-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-geoscape-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-geoscape-address-details-error-message" }, error.toString())))));
+}
+export default React.memo(FormElementGeoscapeAddress);
 //# sourceMappingURL=FormElementGeoscapeAddress.js.map

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-declare type Props = {
-    element: FormTypes.HtmlElement;
-};
-declare function FormElementHTML({ element }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementHTML>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    element: FormTypes.HtmlElement;
+};
+declare function FormElementHTML({ element }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementHTML>;
+export default _default;

package/dist/form-elements/FormElementHTML.js

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import sanitizeHtml from '../services/sanitize-html';
-import { RepeatableSetIndexContext } from './FormElementRepeatableSet';
-function FormElementHTML({ element }) {
-    const index = React.useContext(RepeatableSetIndexContext);
-    const html = React.useMemo(() => {
-        return element.defaultValue.replace('{INDEX}', (index + 1).toString());
-    }, [element.defaultValue, index]);
-    return (React.createElement("div", { className: "cypress-html-element" },
-        React.createElement("div", { className: "ob-form__element ob-information cypress-html-element" },
-            React.createElement("div", { className: "cypress-html-element-content ob-information__content ql-editor", dangerouslySetInnerHTML: {
-                    __html: sanitizeHtml(html),
-                } }))));
-}
-export default React.memo(FormElementHTML);
+import * as React from 'react';
+import sanitizeHtml from '../services/sanitize-html';
+import { RepeatableSetIndexContext } from './FormElementRepeatableSet';
+function FormElementHTML({ element }) {
+    const index = React.useContext(RepeatableSetIndexContext);
+    const html = React.useMemo(() => {
+        return element.defaultValue.replace('{INDEX}', (index + 1).toString());
+    }, [element.defaultValue, index]);
+    return (React.createElement("div", { className: "cypress-html-element" },
+        React.createElement("div", { className: "ob-form__element ob-information cypress-html-element" },
+            React.createElement("div", { className: "cypress-html-element-content ob-information__content ql-editor", dangerouslySetInnerHTML: {
+                    __html: sanitizeHtml(html),
+                } }))));
+}
+export default React.memo(FormElementHTML);
 //# sourceMappingURL=FormElementHTML.js.map

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-declare type Props = {
-    element: FormTypes.HeadingElement;
-};
-declare function FormElementHeading({ element }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementHeading>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    element: FormTypes.HeadingElement;
+};
+declare function FormElementHeading({ element }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementHeading>;
+export default _default;

package/dist/form-elements/FormElementHeading.js

@@ -1,24 +1,24 @@
-import * as React from 'react';
-function FormElementHeading({ element }) {
-    return (React.createElement("div", { className: "cypress-heading-element" },
-        React.createElement("div", { className: "ob-form__element ob-heading" },
-            React.createElement(Heading, { headingType: element.headingType }, element.label))));
-}
-export default React.memo(FormElementHeading);
-const Heading = React.memo(function Heading({ headingType, children, }) {
-    const className = `ob-heading__text title is-${headingType}`;
-    switch (headingType) {
-        case 1:
-            return React.createElement("h1", { className: className }, children);
-        case 2:
-            return React.createElement("h2", { className: className }, children);
-        case 3:
-            return React.createElement("h3", { className: className }, children);
-        case 4:
-            return React.createElement("h4", { className: className }, children);
-        case 5:
-        default:
-            return React.createElement("h5", { className: className }, children);
-    }
-});
+import * as React from 'react';
+function FormElementHeading({ element }) {
+    return (React.createElement("div", { className: "cypress-heading-element" },
+        React.createElement("div", { className: "ob-form__element ob-heading" },
+            React.createElement(Heading, { headingType: element.headingType }, element.label))));
+}
+export default React.memo(FormElementHeading);
+const Heading = React.memo(function Heading({ headingType, children, }) {
+    const className = `ob-heading__text title is-${headingType}`;
+    switch (headingType) {
+        case 1:
+            return React.createElement("h1", { className: className }, children);
+        case 2:
+            return React.createElement("h2", { className: className }, children);
+        case 3:
+            return React.createElement("h3", { className: className }, children);
+        case 4:
+            return React.createElement("h4", { className: className }, children);
+        case 5:
+        default:
+            return React.createElement("h5", { className: className }, children);
+    }
+});
 //# sourceMappingURL=FormElementHeading.js.map

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-declare type Props = {
-    element: FormTypes.ImageElement;
-};
-declare function FormElementImage({ element }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementImage>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    element: FormTypes.ImageElement;
+};
+declare function FormElementImage({ element }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementImage>;
+export default _default;

package/dist/form-elements/FormElementImage.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-function FormElementImage({ element }) {
-    return (React.createElement("div", { className: "ob-form__element ob-image cypress-image-element" },
-        React.createElement("img", { className: "ob-image__content cypress-image-element-content", src: element.defaultValue, alt: element.label })));
-}
-export default React.memo(FormElementImage);
+import * as React from 'react';
+function FormElementImage({ element }) {
+    return (React.createElement("div", { className: "ob-form__element ob-image cypress-image-element" },
+        React.createElement("img", { className: "ob-image__content cypress-image-element-content", src: element.defaultValue, alt: element.label })));
+}
+export default React.memo(FormElementImage);
 //# sourceMappingURL=FormElementImage.js.map