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

package/dist/form-elements/FormElementSummary.js

@@ -1,160 +1,160 @@
-import * as React from 'react';
-import { localisationService } from '@oneblink/apps';
-import { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext';
-import useFlattenElements from '../hooks/useFlattenElementsContext';
-import { generateDate } from '../services/generate-default-data';
-const arraysAreEqual = (a, b) => {
-    if (!Array.isArray(a) || !Array.isArray(b)) {
-        if (a !== b)
-            return false;
-        return true;
-    }
-    if (a.length !== b.length)
-        return false;
-    for (let i = 0; i < a.length; i++) {
-        if (Array.isArray(a[i]) && Array.isArray(b[i])) {
-            const areEqual = arraysAreEqual(a[i], b[i]);
-            if (!areEqual)
-                return false;
-            continue;
-        }
-        if (a[i] !== b[i])
-            return false;
-    }
-    return true;
-};
-function FormElementSummary({ element, onChange, value }) {
-    const { formSubmissionModel } = useFormSubmissionModelParent();
-    const flattenedElements = useFlattenElements();
-    const reducer = React.useCallback((partialSummary, formElement, submission) => {
-        if (formElement.type === 'page')
-            return partialSummary;
-        if (formElement.type !== 'repeatableSet' &&
-            formElement.type !== 'form' &&
-            !element.elementIds.some((elementId) => elementId === formElement.id)) {
-            return partialSummary;
-        }
-        const formElementValue = submission[formElement.name];
-        if (!formElementValue && formElementValue !== 0) {
-            return partialSummary;
-        }
-        switch (formElement.type) {
-            case 'repeatableSet': {
-                if (!Array.isArray(formElementValue))
-                    return partialSummary;
-                // If we found a repeatable set, look through child elements
-                // to find the summary elements. Need to start a new array for
-                // this structure and look at each entry in the repeatable set
-                for (const entry of formElementValue) {
-                    const repeatableSetSummaryValues = formElement.elements.reduce((partialSummary, formElement) => reducer(partialSummary, formElement, 
-                    // Pleasing TypeScript
-                    entry instanceof Object ? entry : {}), []);
-                    if (repeatableSetSummaryValues.length) {
-                        partialSummary.push(repeatableSetSummaryValues);
-                    }
-                }
-                break;
-            }
-            case 'form': {
-                const formSummaryValues = (formElement.elements || []).reduce((partialSummary, formElement) => reducer(partialSummary, formElement, 
-                // Pleasing TypeScript
-                formElementValue instanceof Object ? formElementValue : {}), []);
-                if (formSummaryValues.length) {
-                    partialSummary.push(formSummaryValues);
-                }
-                break;
-            }
-            case 'select':
-            case 'autocomplete':
-            case 'radio':
-            case 'checkboxes': {
-                const optionValues = [];
-                if (Array.isArray(formElementValue)) {
-                    optionValues.push(...formElementValue);
-                }
-                else {
-                    optionValues.push(formElementValue);
-                }
-                if (Array.isArray(formElement.options)) {
-                    partialSummary.push(...optionValues.reduce((optionLabels, optionValue) => {
-                        const option = formElement.options.find(({ value }) => optionValue === value);
-                        if (option) {
-                            optionLabels.push(option.label);
-                        }
-                        return optionLabels;
-                    }, []));
-                }
-                break;
-            }
-            case 'date': {
-                const date = generateDate({
-                    daysOffset: undefined,
-                    value: formElementValue,
-                    dateOnly: true,
-                });
-                if (date) {
-                    partialSummary.push(localisationService.formatDate(date));
-                }
-                break;
-            }
-            case 'datetime': {
-                if (typeof formElementValue !== 'string')
-                    return partialSummary;
-                partialSummary.push(localisationService.formatDatetime(new Date(formElementValue)));
-                break;
-            }
-            case 'time': {
-                if (typeof formElementValue !== 'string')
-                    return partialSummary;
-                partialSummary.push(localisationService.formatTime(new Date(formElementValue)));
-                break;
-            }
-            default: {
-                // Pleasing TypeScript WHILE COVERING ALL BASES
-                if (typeof formElementValue !== 'string' &&
-                    typeof formElementValue !== 'object' &&
-                    typeof formElementValue !== 'number' &&
-                    typeof formElementValue !== 'function' &&
-                    typeof formElementValue !== 'boolean') {
-                    return partialSummary;
-                }
-                partialSummary.push(formElementValue.toString());
-            }
-        }
-        return partialSummary;
-    }, [element.elementIds]);
-    // MODEL LISTENER
-    React.useEffect(() => {
-        const summary = flattenedElements.reduce((partialSummary, formElement) => {
-            return reducer(partialSummary, formElement, formSubmissionModel);
-        }, []);
-        if (value === undefined) {
-            if (!summary.length)
-                return;
-        }
-        if (arraysAreEqual(value, summary)) {
-            return;
-        }
-        if (summary.length) {
-            onChange(element, summary);
-        }
-        else {
-            onChange(element, undefined);
-        }
-    }, [
-        element,
-        flattenedElements,
-        formSubmissionModel,
-        onChange,
-        reducer,
-        value,
-    ]);
-    return (React.createElement("div", { className: "ob-form__element ob-summary cypress-summary-result " }, !!value && Array.isArray(value) && (React.createElement(SummaryResult, { results: value }))));
-}
-const SummaryResult = React.memo(function SummaryResult({ results }) {
-    return (React.createElement(React.Fragment, null, results.map((result, i) => {
-        return (React.createElement("div", { key: `${result.toString()}-${i}`, className: "ob-summary__result-container" }, typeof result === 'string' ? (React.createElement("p", { className: "ob-summary__result has-line-breaks cypress-summary-result-text" }, result)) : (React.createElement(SummaryResult, { results: result }))));
-    })));
-});
-export default React.memo(FormElementSummary);
+import * as React from 'react';
+import { localisationService } from '@oneblink/apps';
+import { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext';
+import useFlattenElements from '../hooks/useFlattenElementsContext';
+import { generateDate } from '../services/generate-default-data';
+const arraysAreEqual = (a, b) => {
+    if (!Array.isArray(a) || !Array.isArray(b)) {
+        if (a !== b)
+            return false;
+        return true;
+    }
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (Array.isArray(a[i]) && Array.isArray(b[i])) {
+            const areEqual = arraysAreEqual(a[i], b[i]);
+            if (!areEqual)
+                return false;
+            continue;
+        }
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};
+function FormElementSummary({ element, onChange, value }) {
+    const { formSubmissionModel } = useFormSubmissionModelParent();
+    const flattenedElements = useFlattenElements();
+    const reducer = React.useCallback((partialSummary, formElement, submission) => {
+        if (formElement.type === 'page')
+            return partialSummary;
+        if (formElement.type !== 'repeatableSet' &&
+            formElement.type !== 'form' &&
+            !element.elementIds.some((elementId) => elementId === formElement.id)) {
+            return partialSummary;
+        }
+        const formElementValue = submission[formElement.name];
+        if (!formElementValue && formElementValue !== 0) {
+            return partialSummary;
+        }
+        switch (formElement.type) {
+            case 'repeatableSet': {
+                if (!Array.isArray(formElementValue))
+                    return partialSummary;
+                // If we found a repeatable set, look through child elements
+                // to find the summary elements. Need to start a new array for
+                // this structure and look at each entry in the repeatable set
+                for (const entry of formElementValue) {
+                    const repeatableSetSummaryValues = formElement.elements.reduce((partialSummary, formElement) => reducer(partialSummary, formElement, 
+                    // Pleasing TypeScript
+                    entry instanceof Object ? entry : {}), []);
+                    if (repeatableSetSummaryValues.length) {
+                        partialSummary.push(repeatableSetSummaryValues);
+                    }
+                }
+                break;
+            }
+            case 'form': {
+                const formSummaryValues = (formElement.elements || []).reduce((partialSummary, formElement) => reducer(partialSummary, formElement, 
+                // Pleasing TypeScript
+                formElementValue instanceof Object ? formElementValue : {}), []);
+                if (formSummaryValues.length) {
+                    partialSummary.push(formSummaryValues);
+                }
+                break;
+            }
+            case 'select':
+            case 'autocomplete':
+            case 'radio':
+            case 'checkboxes': {
+                const optionValues = [];
+                if (Array.isArray(formElementValue)) {
+                    optionValues.push(...formElementValue);
+                }
+                else {
+                    optionValues.push(formElementValue);
+                }
+                if (Array.isArray(formElement.options)) {
+                    partialSummary.push(...optionValues.reduce((optionLabels, optionValue) => {
+                        const option = formElement.options.find(({ value }) => optionValue === value);
+                        if (option) {
+                            optionLabels.push(option.label);
+                        }
+                        return optionLabels;
+                    }, []));
+                }
+                break;
+            }
+            case 'date': {
+                const date = generateDate({
+                    daysOffset: undefined,
+                    value: formElementValue,
+                    dateOnly: true,
+                });
+                if (date) {
+                    partialSummary.push(localisationService.formatDate(date));
+                }
+                break;
+            }
+            case 'datetime': {
+                if (typeof formElementValue !== 'string')
+                    return partialSummary;
+                partialSummary.push(localisationService.formatDatetime(new Date(formElementValue)));
+                break;
+            }
+            case 'time': {
+                if (typeof formElementValue !== 'string')
+                    return partialSummary;
+                partialSummary.push(localisationService.formatTime(new Date(formElementValue)));
+                break;
+            }
+            default: {
+                // Pleasing TypeScript WHILE COVERING ALL BASES
+                if (typeof formElementValue !== 'string' &&
+                    typeof formElementValue !== 'object' &&
+                    typeof formElementValue !== 'number' &&
+                    typeof formElementValue !== 'function' &&
+                    typeof formElementValue !== 'boolean') {
+                    return partialSummary;
+                }
+                partialSummary.push(formElementValue.toString());
+            }
+        }
+        return partialSummary;
+    }, [element.elementIds]);
+    // MODEL LISTENER
+    React.useEffect(() => {
+        const summary = flattenedElements.reduce((partialSummary, formElement) => {
+            return reducer(partialSummary, formElement, formSubmissionModel);
+        }, []);
+        if (value === undefined) {
+            if (!summary.length)
+                return;
+        }
+        if (arraysAreEqual(value, summary)) {
+            return;
+        }
+        if (summary.length) {
+            onChange(element, summary);
+        }
+        else {
+            onChange(element, undefined);
+        }
+    }, [
+        element,
+        flattenedElements,
+        formSubmissionModel,
+        onChange,
+        reducer,
+        value,
+    ]);
+    return (React.createElement("div", { className: "ob-form__element ob-summary cypress-summary-result " }, !!value && Array.isArray(value) && (React.createElement(SummaryResult, { results: value }))));
+}
+const SummaryResult = React.memo(function SummaryResult({ results }) {
+    return (React.createElement(React.Fragment, null, results.map((result, i) => {
+        return (React.createElement("div", { key: `${result.toString()}-${i}`, className: "ob-summary__result-container" }, typeof result === 'string' ? (React.createElement("p", { className: "ob-summary__result has-line-breaks cypress-summary-result-text" }, result)) : (React.createElement(SummaryResult, { results: result }))));
+    })));
+});
+export default React.memo(FormElementSummary);
 //# sourceMappingURL=FormElementSummary.js.map

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.TelephoneElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementTelephone>;
-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.TelephoneElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementTelephone>;
+export default _default;

package/dist/form-elements/FormElementTelephone.js

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const text = typeof value === 'string' ? value : '';
-    return (React.createElement("div", { className: "cypress-telephone-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-telephone", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { type: "tel", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-telephone-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement("i", { className: "material-icons is-size-5" }, "phone"))),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
-            (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(FormElementTelephone);
+import * as React from 'react';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const text = typeof value === 'string' ? value : '';
+    return (React.createElement("div", { className: "cypress-telephone-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-telephone", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "field has-addons" },
+                React.createElement("div", { className: "control is-expanded has-icons-right" },
+                    React.createElement("input", { type: "tel", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-telephone-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty }),
+                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
+                        React.createElement("i", { className: "material-icons is-size-5" }, "phone"))),
+                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
+            (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(FormElementTelephone);
 //# sourceMappingURL=FormElementTelephone.js.map

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.TextElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementText>;
-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.TextElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementText>;
+export default _default;

package/dist/form-elements/FormElementText.js

@@ -1,30 +1,30 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const text = typeof value === 'string' ? value : '';
-    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
-    return (React.createElement("div", { className: "cypress-text-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-text", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: "control is-expanded" },
-                    React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
-            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
-                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
-                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
-                            'has-text-danger': text.length > element.maxLength,
-                        }) },
-                        text.length,
-                        " / ",
-                        element.maxLength))))))));
-}
-export default React.memo(FormElementText);
+import * as React from 'react';
+import clsx from 'clsx';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const text = typeof value === 'string' ? value : '';
+    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
+    return (React.createElement("div", { className: "cypress-text-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-text", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "field has-addons" },
+                React.createElement("div", { className: "control is-expanded" },
+                    React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
+                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
+            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
+                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
+                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                            'has-text-danger': text.length > element.maxLength,
+                        }) },
+                        text.length,
+                        " / ",
+                        element.maxLength))))))));
+}
+export default React.memo(FormElementText);
 //# sourceMappingURL=FormElementText.js.map

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.TextareaElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementTextarea>;
-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.TextareaElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementTextarea>;
+export default _default;

package/dist/form-elements/FormElementTextarea.js

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const text = typeof value === 'string' ? value : '';
-    const isDisplayingCopyButton = !!element.readOnly && !!value;
-    const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
-    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
-    return (React.createElement("div", { className: "cypress-textarea-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "control" },
-                React.createElement("textarea", { placeholder: element.placeholderValue, id: id, name: element.name, className: "textarea input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
-            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
-                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
-                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
-                            'has-text-danger': text.length > element.maxLength,
-                        }) },
-                        text.length,
-                        " / ",
-                        element.maxLength))))),
-            (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
-                isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
-                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage })))))));
-}
-export default React.memo(FormElementTextarea);
+import * as React from 'react';
+import clsx from 'clsx';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const text = typeof value === 'string' ? value : '';
+    const isDisplayingCopyButton = !!element.readOnly && !!value;
+    const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
+    const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage;
+    return (React.createElement("div", { className: "cypress-textarea-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "control" },
+                React.createElement("textarea", { placeholder: element.placeholderValue, id: id, name: element.name, className: "textarea input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
+            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
+                    isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),
+                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                            'has-text-danger': text.length > element.maxLength,
+                        }) },
+                        text.length,
+                        " / ",
+                        element.maxLength))))),
+            (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
+                isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
+                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage })))))));
+}
+export default React.memo(FormElementTextarea);
 //# sourceMappingURL=FormElementTextarea.js.map

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.TimeElement;
-    value: unknown | undefined;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
-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.TimeElement;
+    value: unknown | undefined;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
+export default _default;