@oneblink/apps-react 4.4.0 → 4.5.0-beta.1

package/dist/form-elements/FormElementRepeatableSet.js

@@ -15,41 +15,86 @@ export function useRepeatableSetIndexText(text) {
 function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, isDirty, setIsDirty, }) {
     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;
+        onChange(element, {
+            value: (existingEntries) => {
+                const newEntries = [...(existingEntries || [])];
+                const entry = generateDefaultData(element.elements, {});
+                newEntries.push(entry);
+                return newEntries;
+            },
+            executedLookups: (existingExecutedLookups) => {
+                var _a;
+                if (existingExecutedLookups !== undefined &&
+                    !Array.isArray(existingExecutedLookups)) {
+                    return [];
+                }
+                const newExistingExecutedLookups = [
+                    ...((_a = existingExecutedLookups) !== null && _a !== void 0 ? _a : Array.from(Array(entries.length))),
+                ];
+                newExistingExecutedLookups.push({});
+                return newExistingExecutedLookups;
+            },
         });
         setIsDirty();
-    }, [element, onChange, setIsDirty]);
+    }, [element, onChange, setIsDirty, entries]);
     const handleRemoveEntry = React.useCallback((index) => {
-        onChange(element, (existingEntries) => {
-            const newEntries = [...(existingEntries || [])];
-            newEntries.splice(index, 1);
-            return newEntries;
+        onChange(element, {
+            value: (existingEntries) => {
+                const newEntries = [...(existingEntries || [])];
+                newEntries.splice(index, 1);
+                return newEntries;
+            },
+            executedLookups: (existingExecutedLookups) => {
+                if (!Array.isArray(existingExecutedLookups)) {
+                    return [];
+                }
+                const newExistingExecutedLookups = [...existingExecutedLookups];
+                newExistingExecutedLookups.splice(index, 1);
+                return newExistingExecutedLookups;
+            },
         });
         setIsDirty();
     }, [element, onChange, setIsDirty]);
-    const handleNestedChange = React.useCallback((index, nestedElement, value) => {
+    const handleNestedChange = React.useCallback((index, nestedElement, { value, executedLookups, }) => {
         if (!('name' in nestedElement)) {
             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;
+        onChange(element, {
+            value: (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;
+            },
+            executedLookups: (existingExecutedLookups) => {
+                const elementExecutedLookups = existingExecutedLookups !== null && existingExecutedLookups !== void 0 ? existingExecutedLookups : [];
+                if (!Array.isArray(elementExecutedLookups)) {
+                    return elementExecutedLookups;
                 }
-            });
-            return newEntries;
+                const newExecutedLookups = elementExecutedLookups.map((executedLookup, i) => {
+                    if (i === index) {
+                        const updatedExecutedLookups = typeof executedLookups === 'function'
+                            ? executedLookups(executedLookup === null || executedLookup === void 0 ? void 0 : executedLookup[nestedElement.name])
+                            : executedLookups;
+                        return {
+                            ...executedLookup,
+                            [nestedElement.name]: updatedExecutedLookups,
+                        };
+                    }
+                    return executedLookup;
+                });
+                return newExecutedLookups;
+            },
         });
     }, [element, onChange]);
     const { minSetEntries, maxSetEntries } = useFormElementRepeatableSetEntries(element);
@@ -86,22 +131,31 @@ function FormElementRepeatableSet({ formId, element, value, formElementValidatio
 export default React.memo(FormElementRepeatableSet);
 const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id, index, isEven, entry, element, formElementsConditionallyShown, displayValidationMessages, formElementsValidation, onChange, onLookup, onRemove, onUpdateFormElements, }) {
     const [isConfirmingRemove, confirmRemove, cancelRemove] = useBooleanState(false);
-    const handleChange = React.useCallback((element, value) => {
-        onChange(index, element, value);
+    const handleChange = React.useCallback((nestedElement, { value, executedLookups }) => {
+        onChange(index, nestedElement, {
+            value,
+            executedLookups,
+        });
     }, [index, onChange]);
     const handleLookup = React.useCallback((mergeLookupResults) => {
         onLookup((currentFormSubmission) => {
+            var _a, _b;
             let newEntry = {};
             const entries = currentFormSubmission.submission[element.name];
+            const repeatableSetExecutedLookups = (_b = (_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name]) !== null && _b !== void 0 ? _b : [];
+            let newExecutedLookups = {};
             const elements = currentFormSubmission.elements.map((formElement) => {
+                var _a;
                 if (formElement.type === 'repeatableSet' &&
                     formElement.name === element.name) {
-                    const { elements, submission } = mergeLookupResults({
+                    const { elements, submission, executedLookups } = mergeLookupResults({
                         elements: formElement.elements,
                         submission: entries[index],
                         lastElementUpdated: currentFormSubmission.lastElementUpdated,
+                        executedLookups: (_a = repeatableSetExecutedLookups[index]) !== null && _a !== void 0 ? _a : {},
                     });
                     newEntry = submission;
+                    newExecutedLookups = executedLookups;
                     return {
                         ...formElement,
                         elements,
@@ -118,9 +172,22 @@ const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id,
                     return entry;
                 }),
             };
+            let updatedExecutedLookups = currentFormSubmission.executedLookups;
+            if (Array.isArray(repeatableSetExecutedLookups)) {
+                updatedExecutedLookups = {
+                    ...currentFormSubmission.executedLookups,
+                    [element.name]: repeatableSetExecutedLookups.map((entry, i) => {
+                        if (i == index) {
+                            return newExecutedLookups;
+                        }
+                        return entry;
+                    }),
+                };
+            }
             return {
                 elements,
                 submission,
+                executedLookups: updatedExecutedLookups,
             };
         });
     }, [element.name, index, onLookup]);

package/dist/form-elements/FormElementRepeatableSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  FormElementValidation,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n  formId: number\n  id: string\n  isEven: boolean\n  element: FormTypes.RepeatableSetElement\n  value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined\n  onChange: FormElementValueChangeHandler<\n    SubmissionTypes.S3SubmissionData['submission'][]\n  >\n  onLookup: FormElementLookupHandler\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessage: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n  const index = React.useContext(RepeatableSetIndexContext)\n  return React.useMemo(\n    () => text.replace('{INDEX}', (index + 1).toString()),\n    [index, text],\n  )\n}\n\nfunction FormElementRepeatableSet({\n  formId,\n  element,\n  value,\n  formElementValidation,\n  id,\n  isEven,\n  displayValidationMessage,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const entries = React.useMemo(\n    () => (Array.isArray(value) ? value : []),\n    [value],\n  )\n\n  const handleAddEntry = React.useCallback(() => {\n    onChange(element, (existingEntries) => {\n      const newEntries = [...(existingEntries || [])]\n      const entry = generateDefaultData(element.elements, {})\n      newEntries.push(entry)\n      return newEntries\n    })\n    setIsDirty()\n  }, [element, onChange, setIsDirty])\n\n  const handleRemoveEntry = React.useCallback(\n    (index: number) => {\n      onChange(element, (existingEntries) => {\n        const newEntries = [...(existingEntries || [])]\n        newEntries.splice(index, 1)\n        return newEntries\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const handleNestedChange = React.useCallback(\n    (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n      if (!('name' in nestedElement)) {\n        return\n      }\n      onChange(element, (existingEntries) => {\n        const newEntries = (existingEntries || []).map((entry, i) => {\n          if (i === index) {\n            return {\n              ...entry,\n              [nestedElement.name]:\n                typeof value === 'function'\n                  ? value(entry[nestedElement.name])\n                  : value,\n            }\n          } else {\n            return entry\n          }\n        })\n        return newEntries\n      })\n    },\n    [element, onChange],\n  )\n\n  const { minSetEntries, maxSetEntries } =\n    useFormElementRepeatableSetEntries(element)\n\n  const repeatableSetValidation = React.useMemo(\n    () =>\n      !formElementValidation ||\n      typeof formElementValidation === 'string' ||\n      formElementValidation.type !== 'repeatableSet'\n        ? undefined\n        : formElementValidation,\n    [formElementValidation],\n  )\n\n  const repeatableSetEntriesConditionallyShown =\n    formElementConditionallyShown &&\n    formElementConditionallyShown.type === 'repeatableSet'\n      ? formElementConditionallyShown.entries\n      : {}\n\n  const { validationClassName } = useValidationClass({\n    formElementsValid: !repeatableSetValidation,\n    displayInvalidClassName: isDirty || displayValidationMessage,\n    validClassName: 'ob-repeatable-set-element__valid',\n    invalidClassName: 'ob-repeatable-set-element__invalid',\n  })\n\n  return (\n    <div\n      className={clsx('cypress-repeatable-set-element', validationClassName)}\n    >\n      <FormElementLabelContainer\n        className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n        element={element}\n        id={id}\n        required={!!minSetEntries && minSetEntries > 0}\n      >\n        {entries.map((entry, index) => {\n          return (\n            <RepeatableSetEntry\n              key={index}\n              formId={formId}\n              index={index}\n              id={id}\n              isEven={isEven}\n              entry={entry}\n              element={element}\n              onChange={handleNestedChange}\n              onLookup={onLookup}\n              onRemove={handleRemoveEntry}\n              formElementsConditionallyShown={\n                repeatableSetEntriesConditionallyShown[index.toString()]\n              }\n              formElementsValidation={\n                repeatableSetValidation &&\n                repeatableSetValidation.entries[index.toString()]\n              }\n              displayValidationMessages={displayValidationMessage}\n              onUpdateFormElements={onUpdateFormElements}\n            />\n          )\n        })}\n        {(!maxSetEntries || entries.length < maxSetEntries) && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n            onClick={handleAddEntry}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">add</i>\n            </span>\n            {!!element.addSetEntryLabel && (\n              <span>{element.addSetEntryLabel}</span>\n            )}\n          </button>\n        )}\n        {(isDirty || displayValidationMessage) &&\n          !!repeatableSetValidation &&\n          !!repeatableSetValidation.set && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {repeatableSetValidation.set}\n              </div>\n            </div>\n          )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n  formId: number\n  id: string\n  index: number\n  isEven: boolean\n  entry: SubmissionTypes.S3SubmissionData['submission']\n  element: FormTypes.RepeatableSetElement\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  displayValidationMessages: boolean\n  onChange: (\n    index: number,\n    formElement: FormTypes.FormElement,\n    value: unknown,\n  ) => unknown\n  onLookup: FormElementLookupHandler\n  onRemove: (index: number) => unknown\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n  function RepeatableSetEntry({\n    formId,\n    id,\n    index,\n    isEven,\n    entry,\n    element,\n    formElementsConditionallyShown,\n    displayValidationMessages,\n    formElementsValidation,\n    onChange,\n    onLookup,\n    onRemove,\n    onUpdateFormElements,\n  }: RepeatableSetEntryProps) {\n    const [isConfirmingRemove, confirmRemove, cancelRemove] =\n      useBooleanState(false)\n\n    const handleChange = React.useCallback(\n      (element: FormTypes.FormElement, value: unknown) => {\n        onChange(index, element, value)\n      },\n      [index, onChange],\n    )\n\n    const handleLookup = React.useCallback<FormElementLookupHandler>(\n      (mergeLookupResults) => {\n        onLookup((currentFormSubmission) => {\n          let newEntry = {}\n          const entries = currentFormSubmission.submission[\n            element.name\n          ] as Array<SubmissionTypes.S3SubmissionData['submission']>\n          const elements = currentFormSubmission.elements.map((formElement) => {\n            if (\n              formElement.type === 'repeatableSet' &&\n              formElement.name === element.name\n            ) {\n              const { elements, submission } = mergeLookupResults({\n                elements: formElement.elements,\n                submission: entries[index],\n                lastElementUpdated: currentFormSubmission.lastElementUpdated,\n              })\n              newEntry = submission\n              return {\n                ...formElement,\n                elements,\n              }\n            }\n            return formElement\n          })\n\n          const submission = {\n            ...currentFormSubmission.submission,\n            [element.name]: entries.map((entry, i) => {\n              if (i === index) {\n                return newEntry\n              }\n              return entry\n            }),\n          }\n\n          return {\n            elements,\n            submission,\n          }\n        })\n      },\n      [element.name, index, onLookup],\n    )\n\n    const { validationClassName } = useValidationClass({\n      formElementsValid: !formElementsValidation,\n      displayInvalidClassName: displayValidationMessages,\n      validClassName: 'ob-repeatable-set__valid',\n      invalidClassName: 'ob-repeatable-set__invalid',\n    })\n\n    const handleUpdateNestedFormElements =\n      React.useCallback<UpdateFormElementsHandler>(\n        (setter) => {\n          onUpdateFormElements((formElements) => {\n            return formElements.map((formElement) => {\n              if (\n                formElement.id === element.id &&\n                formElement.type === 'repeatableSet'\n              ) {\n                return {\n                  ...formElement,\n                  elements: setter(formElement.elements),\n                }\n              }\n              return formElement\n            })\n          })\n        },\n        [element.id, onUpdateFormElements],\n      )\n\n    return (\n      <RepeatableSetIndexContext.Provider value={index}>\n        <Modal\n          isOpen={isConfirmingRemove}\n          className=\"cypress-repeatable-set-prompt\"\n          titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n          title={element.removeSetEntryLabel || 'Remove Entry'}\n          actions={\n            <>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n                onClick={cancelRemove}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n                onClick={() => {\n                  cancelRemove()\n                  onRemove(index)\n                }}\n              >\n                Yes\n              </button>\n            </>\n          }\n        >\n          Are you sure you want to remove this entry?\n        </Modal>\n\n        <div\n          key={index}\n          className={clsx(\n            'ob-repeatable-set__container cypress-repeatable-set-container',\n            validationClassName,\n          )}\n        >\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n            onClick={confirmRemove}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">delete_outline</i>\n            </span>\n            {!!element.removeSetEntryLabel && (\n              <span>{element.removeSetEntryLabel}</span>\n            )}\n          </button>\n\n          <OneBlinkFormElements\n            formId={formId}\n            idPrefix={`${id}_entry-${index}_`}\n            isEven={isEven}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={element.elements}\n            onChange={handleChange}\n            onLookup={handleLookup}\n            model={entry}\n            parentElement={element}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n            onUpdateFormElements={handleUpdateNestedFormElements}\n          />\n        </div>\n      </RepeatableSetIndexContext.Provider>\n    )\n  },\n)\n"]}
+{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n  ExecutedLookups,\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  FormElementValidation,\n  NestedFormElementValueChangeHandler,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n  formId: number\n  id: string\n  isEven: boolean\n  element: FormTypes.RepeatableSetElement\n  value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined\n  onChange: NestedFormElementValueChangeHandler<\n    SubmissionTypes.S3SubmissionData['submission'][]\n  >\n  onLookup: FormElementLookupHandler\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessage: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n  const index = React.useContext(RepeatableSetIndexContext)\n  return React.useMemo(\n    () => text.replace('{INDEX}', (index + 1).toString()),\n    [index, text],\n  )\n}\n\nfunction FormElementRepeatableSet({\n  formId,\n  element,\n  value,\n  formElementValidation,\n  id,\n  isEven,\n  displayValidationMessage,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const entries = React.useMemo(\n    () => (Array.isArray(value) ? value : []),\n    [value],\n  )\n\n  const handleAddEntry = React.useCallback(() => {\n    onChange(element, {\n      value: (existingEntries) => {\n        const newEntries = [...(existingEntries || [])]\n        const entry = generateDefaultData(element.elements, {})\n        newEntries.push(entry)\n        return newEntries\n      },\n      executedLookups: (existingExecutedLookups) => {\n        if (\n          existingExecutedLookups !== undefined &&\n          !Array.isArray(existingExecutedLookups)\n        ) {\n          return []\n        }\n\n        const newExistingExecutedLookups = [\n          ...((existingExecutedLookups as ExecutedLookups[]) ??\n            Array.from(Array(entries.length))),\n        ]\n        newExistingExecutedLookups.push({})\n        return newExistingExecutedLookups\n      },\n    })\n    setIsDirty()\n  }, [element, onChange, setIsDirty, entries])\n\n  const handleRemoveEntry = React.useCallback(\n    (index: number) => {\n      onChange(element, {\n        value: (existingEntries) => {\n          const newEntries = [...(existingEntries || [])]\n          newEntries.splice(index, 1)\n          return newEntries\n        },\n        executedLookups: (existingExecutedLookups) => {\n          if (!Array.isArray(existingExecutedLookups)) {\n            return []\n          }\n          const newExistingExecutedLookups = [...existingExecutedLookups]\n\n          newExistingExecutedLookups.splice(index, 1)\n          return newExistingExecutedLookups\n        },\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const handleNestedChange = React.useCallback(\n    (\n      index: number,\n      nestedElement: FormTypes.FormElement,\n      {\n        value,\n        executedLookups,\n      }: Parameters<NestedFormElementValueChangeHandler>[1],\n    ) => {\n      if (!('name' in nestedElement)) {\n        return\n      }\n      onChange(element, {\n        value: (existingEntries) => {\n          const newEntries = (existingEntries || []).map((entry, i) => {\n            if (i === index) {\n              return {\n                ...entry,\n                [nestedElement.name]:\n                  typeof value === 'function'\n                    ? value(entry[nestedElement.name])\n                    : value,\n              }\n            } else {\n              return entry\n            }\n          })\n          return newEntries\n        },\n        executedLookups: (existingExecutedLookups) => {\n          const elementExecutedLookups = existingExecutedLookups ?? []\n          if (!Array.isArray(elementExecutedLookups)) {\n            return elementExecutedLookups\n          }\n          const newExecutedLookups = elementExecutedLookups.map(\n            (executedLookup, i) => {\n              if (i === index) {\n                const updatedExecutedLookups =\n                  typeof executedLookups === 'function'\n                    ? executedLookups(executedLookup?.[nestedElement.name])\n                    : executedLookups\n                return {\n                  ...executedLookup,\n                  [nestedElement.name]: updatedExecutedLookups,\n                }\n              }\n              return executedLookup\n            },\n          )\n          return newExecutedLookups\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const { minSetEntries, maxSetEntries } =\n    useFormElementRepeatableSetEntries(element)\n\n  const repeatableSetValidation = React.useMemo(\n    () =>\n      !formElementValidation ||\n      typeof formElementValidation === 'string' ||\n      formElementValidation.type !== 'repeatableSet'\n        ? undefined\n        : formElementValidation,\n    [formElementValidation],\n  )\n\n  const repeatableSetEntriesConditionallyShown =\n    formElementConditionallyShown &&\n    formElementConditionallyShown.type === 'repeatableSet'\n      ? formElementConditionallyShown.entries\n      : {}\n\n  const { validationClassName } = useValidationClass({\n    formElementsValid: !repeatableSetValidation,\n    displayInvalidClassName: isDirty || displayValidationMessage,\n    validClassName: 'ob-repeatable-set-element__valid',\n    invalidClassName: 'ob-repeatable-set-element__invalid',\n  })\n\n  return (\n    <div\n      className={clsx('cypress-repeatable-set-element', validationClassName)}\n    >\n      <FormElementLabelContainer\n        className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n        element={element}\n        id={id}\n        required={!!minSetEntries && minSetEntries > 0}\n      >\n        {entries.map((entry, index) => {\n          return (\n            <RepeatableSetEntry\n              key={index}\n              formId={formId}\n              index={index}\n              id={id}\n              isEven={isEven}\n              entry={entry}\n              element={element}\n              onChange={handleNestedChange}\n              onLookup={onLookup}\n              onRemove={handleRemoveEntry}\n              formElementsConditionallyShown={\n                repeatableSetEntriesConditionallyShown[index.toString()]\n              }\n              formElementsValidation={\n                repeatableSetValidation &&\n                repeatableSetValidation.entries[index.toString()]\n              }\n              displayValidationMessages={displayValidationMessage}\n              onUpdateFormElements={onUpdateFormElements}\n            />\n          )\n        })}\n        {(!maxSetEntries || entries.length < maxSetEntries) && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n            onClick={handleAddEntry}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">add</i>\n            </span>\n            {!!element.addSetEntryLabel && (\n              <span>{element.addSetEntryLabel}</span>\n            )}\n          </button>\n        )}\n        {(isDirty || displayValidationMessage) &&\n          !!repeatableSetValidation &&\n          !!repeatableSetValidation.set && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {repeatableSetValidation.set}\n              </div>\n            </div>\n          )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n  formId: number\n  id: string\n  index: number\n  isEven: boolean\n  entry: SubmissionTypes.S3SubmissionData['submission']\n  element: FormTypes.RepeatableSetElement\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  displayValidationMessages: boolean\n  onChange: (\n    index: number,\n    formElement: FormTypes.FormElement,\n    {\n      value,\n      executedLookups,\n    }: Parameters<NestedFormElementValueChangeHandler>[1],\n  ) => void\n  onLookup: FormElementLookupHandler\n  onRemove: (index: number) => unknown\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n  function RepeatableSetEntry({\n    formId,\n    id,\n    index,\n    isEven,\n    entry,\n    element,\n    formElementsConditionallyShown,\n    displayValidationMessages,\n    formElementsValidation,\n    onChange,\n    onLookup,\n    onRemove,\n    onUpdateFormElements,\n  }: RepeatableSetEntryProps) {\n    const [isConfirmingRemove, confirmRemove, cancelRemove] =\n      useBooleanState(false)\n\n    const handleChange: NestedFormElementValueChangeHandler = React.useCallback(\n      (nestedElement, { value, executedLookups }) => {\n        onChange(index, nestedElement, {\n          value,\n          executedLookups,\n        })\n      },\n      [index, onChange],\n    )\n\n    const handleLookup = React.useCallback<FormElementLookupHandler>(\n      (mergeLookupResults) => {\n        onLookup((currentFormSubmission) => {\n          let newEntry = {}\n          const entries = currentFormSubmission.submission[\n            element.name\n          ] as Array<SubmissionTypes.S3SubmissionData['submission']>\n          const repeatableSetExecutedLookups =\n            (currentFormSubmission.executedLookups?.[\n              element.name\n            ] as ExecutedLookups[]) ?? []\n          let newExecutedLookups: ExecutedLookups = {}\n          const elements = currentFormSubmission.elements.map((formElement) => {\n            if (\n              formElement.type === 'repeatableSet' &&\n              formElement.name === element.name\n            ) {\n              const { elements, submission, executedLookups } =\n                mergeLookupResults({\n                  elements: formElement.elements,\n                  submission: entries[index],\n                  lastElementUpdated: currentFormSubmission.lastElementUpdated,\n                  executedLookups: repeatableSetExecutedLookups[index] ?? {},\n                })\n              newEntry = submission\n              newExecutedLookups = executedLookups as ExecutedLookups\n              return {\n                ...formElement,\n                elements,\n              }\n            }\n            return formElement\n          })\n\n          const submission = {\n            ...currentFormSubmission.submission,\n            [element.name]: entries.map((entry, i) => {\n              if (i === index) {\n                return newEntry\n              }\n              return entry\n            }),\n          }\n\n          let updatedExecutedLookups = currentFormSubmission.executedLookups\n          if (Array.isArray(repeatableSetExecutedLookups)) {\n            updatedExecutedLookups = {\n              ...currentFormSubmission.executedLookups,\n              [element.name]: repeatableSetExecutedLookups.map((entry, i) => {\n                if (i == index) {\n                  return newExecutedLookups\n                }\n                return entry\n              }),\n            }\n          }\n\n          return {\n            elements,\n            submission,\n            executedLookups: updatedExecutedLookups,\n          }\n        })\n      },\n      [element.name, index, onLookup],\n    )\n\n    const { validationClassName } = useValidationClass({\n      formElementsValid: !formElementsValidation,\n      displayInvalidClassName: displayValidationMessages,\n      validClassName: 'ob-repeatable-set__valid',\n      invalidClassName: 'ob-repeatable-set__invalid',\n    })\n\n    const handleUpdateNestedFormElements =\n      React.useCallback<UpdateFormElementsHandler>(\n        (setter) => {\n          onUpdateFormElements((formElements) => {\n            return formElements.map((formElement) => {\n              if (\n                formElement.id === element.id &&\n                formElement.type === 'repeatableSet'\n              ) {\n                return {\n                  ...formElement,\n                  elements: setter(formElement.elements),\n                }\n              }\n              return formElement\n            })\n          })\n        },\n        [element.id, onUpdateFormElements],\n      )\n\n    return (\n      <RepeatableSetIndexContext.Provider value={index}>\n        <Modal\n          isOpen={isConfirmingRemove}\n          className=\"cypress-repeatable-set-prompt\"\n          titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n          title={element.removeSetEntryLabel || 'Remove Entry'}\n          actions={\n            <>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n                onClick={cancelRemove}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n                onClick={() => {\n                  cancelRemove()\n                  onRemove(index)\n                }}\n              >\n                Yes\n              </button>\n            </>\n          }\n        >\n          Are you sure you want to remove this entry?\n        </Modal>\n\n        <div\n          key={index}\n          className={clsx(\n            'ob-repeatable-set__container cypress-repeatable-set-container',\n            validationClassName,\n          )}\n        >\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n            onClick={confirmRemove}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">delete_outline</i>\n            </span>\n            {!!element.removeSetEntryLabel && (\n              <span>{element.removeSetEntryLabel}</span>\n            )}\n          </button>\n\n          <OneBlinkFormElements\n            formId={formId}\n            idPrefix={`${id}_entry-${index}_`}\n            isEven={isEven}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={element.elements}\n            onChange={handleChange}\n            onLookup={handleLookup}\n            model={entry}\n            parentElement={element}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n            onUpdateFormElements={handleUpdateNestedFormElements}\n          />\n        </div>\n      </RepeatableSetIndexContext.Provider>\n    )\n  },\n)\n"]}

package/dist/form-elements/FormElementSection.js

@@ -25,14 +25,17 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
     const handleLookup = React.useCallback((mergeLookupResults) => {
         onLookup((currentFormSubmission) => {
             let model = currentFormSubmission.submission;
+            let newExecutedLookups = {};
             const elements = currentFormSubmission.elements.map((formElement) => {
                 if (formElement.type === 'section' && formElement.id === element.id) {
-                    const { elements, submission } = mergeLookupResults({
+                    const { elements, submission, executedLookups } = mergeLookupResults({
                         elements: formElement.elements,
                         submission: currentFormSubmission.submission,
                         lastElementUpdated: currentFormSubmission.lastElementUpdated,
+                        executedLookups: currentFormSubmission.executedLookups,
                     });
                     model = submission;
+                    newExecutedLookups = executedLookups;
                     return {
                         ...formElement,
                         elements,
@@ -44,6 +47,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
                 elements,
                 submission: model,
                 lastElementUpdated: currentFormSubmission.lastElementUpdated,
+                executedLookups: newExecutedLookups,
             };
         });
     }, [element.id, onLookup]);

package/dist/form-elements/FormElementSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,oBAEN,MAAM,6CAA6C,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAKlE,OAAO,EACL,cAAc,EACd,WAAW,GACZ,MAAM,kDAAkD,CAAA;AACzD,OAAO,kBAAkB,MAAM,6BAA6B,CAAA;AAE5D,SAAS,kBAAkB,CAA6C,EACtE,OAAO,EACP,QAAQ,EACR,yBAAyB,EACzB,oBAAoB,EACpB,GAAG,KAAK,EAGT;IACC,MAAM,CAAC,WAAW,EAAE,AAAD,EAAG,AAAD,EAAG,MAAM,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,IAAI,CAAC,iBAAiB,EAAE;YACrC,oBAAoB,CAAC,IAAI,CAAC,CAAA;SAC3B;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpC,MAAM,wBAAwB,GAC5B,yBAAyB,IAAI,iBAAiB,CAAA;IAEhD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,EAClE,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,CACxC,CAAA;IAED,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC;QACxD,iBAAiB,EAAE,OAAO;QAC1B,uBAAuB,EAAE,wBAAwB;QACjD,cAAc,EAAE,mBAAmB;QACnC,gBAAgB,EAAE,qBAAqB;KACxC,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,QAAQ,CAAC,CAAC,qBAAqB,EAAE,EAAE;YACjC,IAAI,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAAA;YAC5C,MAAM,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBAClE,IAAI,WAAW,CAAC,IAAI,KAAK,SAAS,IAAI,WAAW,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAE;oBACnE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC;wBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,qBAAqB,CAAC,UAAU;wBAC5C,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;qBAC7D,CAAC,CAAA;oBACF,KAAK,GAAG,UAAU,CAAA;oBAClB,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,OAAO;gBACL,QAAQ;gBACR,UAAU,EAAE,KAAK;gBACjB,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;aAC7D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,CAAC,CACvB,CAAA;IAED,MAAM,8BAA8B,GAClC,KAAK,CAAC,WAAW,CACf,CAAC,MAAM,EAAE,EAAE;QACT,oBAAoB,CAAC,CAAC,YAAY,EAAE,EAAE;YACpC,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBACtC,IACE,WAAW,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE;oBAC7B,WAAW,CAAC,IAAI,KAAK,SAAS,EAC9B;oBACA,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC;qBACvC,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,EAAE,EAAE,oBAAoB,CAAC,CACnC,CAAA;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC;QACrD,6BACE,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,MAAM;YAEf,4BAAI,SAAS,EAAC,oCAAoC;gBAC/C,OAAO,CAAC,KAAK;gBACb,OAAO,CAAC,IAAI;oBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACpC,CACA;YACL,6BAAK,SAAS,EAAC,mCAAmC;gBAC/C,CAAC,KAAK,IAAI,wBAAwB,IAAI,CACrC,oBAAC,OAAO,IAAC,KAAK,EAAC,oBAAoB;oBACjC,2BAAG,SAAS,EAAC,0FAA0F,cAEnG,CACI,CACX;gBACD,2BACE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;wBACxD,YAAY,EAAE,CAAC,WAAW;qBAC3B,CAAC,kBAGA,CACA;YACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CAClC,CACP,CACG;QACN,4BAAI,SAAS,EAAC,qBAAqB,GAAG;QACtC,oBAAC,QAAQ,IACP,EAAE,EAAE,CAAC,WAAW,EAChB,OAAO,EAAE;gBACP,IAAI,EAAE,qBAAqB;gBAC3B,OAAO,EAAE,sBAAsB;gBAC/B,MAAM,EAAE,uBAAuB;aAChC;YAED,oBAAC,oBAAoB,OACf,KAAK,EACT,yBAAyB,EAAE,wBAAwB,EACnD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,oBAAoB,EAAE,8BAA8B,GACpD,CACO,CACP,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse, Tooltip } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n  Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport {\n  FormElementLookupHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport {\n  HintBelowLabel,\n  HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  onUpdateFormElements,\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n}) {\n  const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n\n  React.useEffect(() => {\n    if (isCollapsed && !isDisplayingError) {\n      setIsDisplayingError(true)\n    }\n  }, [isCollapsed, isDisplayingError])\n\n  const displayValidationMessage =\n    displayValidationMessages || isDisplayingError\n\n  const isValid = React.useMemo(\n    () => !checkSectionValidity(element, props.formElementsValidation),\n    [element, props.formElementsValidation],\n  )\n\n  const { validationClassName, valid } = useValidationClass({\n    formElementsValid: isValid,\n    displayInvalidClassName: displayValidationMessage,\n    validClassName: 'ob-section__valid',\n    invalidClassName: 'ob-section__invalid',\n  })\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (formElement.type === 'section' && formElement.id === element.id) {\n            const { elements, submission } = mergeLookupResults({\n              elements: formElement.elements,\n              submission: currentFormSubmission.submission,\n              lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            })\n            model = submission\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        return {\n          elements,\n          submission: model,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n        }\n      })\n    },\n    [element.id, onLookup],\n  )\n\n  const handleUpdateNestedFormElements =\n    React.useCallback<UpdateFormElementsHandler>(\n      (setter) => {\n        onUpdateFormElements((formElements) => {\n          return formElements.map((formElement) => {\n            if (\n              formElement.id === element.id &&\n              formElement.type === 'section'\n            ) {\n              return {\n                ...formElement,\n                elements: setter(formElement.elements),\n              }\n            }\n            return formElement\n          })\n        })\n      },\n      [element.id, onUpdateFormElements],\n    )\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className=\"ob-section__header cypress-section-header\"\n        onClick={toggle}\n      >\n        <h3 className=\"ob-section__header-text title is-3\">\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <i className=\"material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </i>\n            </Tooltip>\n          )}\n          <i\n            className={clsx('ob-section__header-icon material-icons', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </i>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} />\n          </div>\n        )}\n      </div>\n      <hr className=\"ob-section__divider\" />\n      <Collapse\n        in={!isCollapsed}\n        classes={{\n          root: 'ob-section__content',\n          entered: 'ob-section__expanded',\n          hidden: 'ob-section__collapsed',\n        }}\n      >\n        <OneBlinkFormElements\n          {...props}\n          displayValidationMessages={displayValidationMessage}\n          onLookup={handleLookup}\n          elements={element.elements}\n          onUpdateFormElements={handleUpdateNestedFormElements}\n        />\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n"]}
+{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse, Tooltip } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n  Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport {\n  FormElementLookupHandler,\n  UpdateFormElementsHandler,\n  ExecutedLookups,\n} from '../types/form'\nimport {\n  HintBelowLabel,\n  HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  onUpdateFormElements,\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n}) {\n  const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n\n  React.useEffect(() => {\n    if (isCollapsed && !isDisplayingError) {\n      setIsDisplayingError(true)\n    }\n  }, [isCollapsed, isDisplayingError])\n\n  const displayValidationMessage =\n    displayValidationMessages || isDisplayingError\n\n  const isValid = React.useMemo(\n    () => !checkSectionValidity(element, props.formElementsValidation),\n    [element, props.formElementsValidation],\n  )\n\n  const { validationClassName, valid } = useValidationClass({\n    formElementsValid: isValid,\n    displayInvalidClassName: displayValidationMessage,\n    validClassName: 'ob-section__valid',\n    invalidClassName: 'ob-section__invalid',\n  })\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission\n        let newExecutedLookups: ExecutedLookups = {}\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (formElement.type === 'section' && formElement.id === element.id) {\n            const { elements, submission, executedLookups } =\n              mergeLookupResults({\n                elements: formElement.elements,\n                submission: currentFormSubmission.submission,\n                lastElementUpdated: currentFormSubmission.lastElementUpdated,\n                executedLookups: currentFormSubmission.executedLookups,\n              })\n            model = submission\n            newExecutedLookups = executedLookups\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        return {\n          elements,\n          submission: model,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n          executedLookups: newExecutedLookups,\n        }\n      })\n    },\n    [element.id, onLookup],\n  )\n\n  const handleUpdateNestedFormElements =\n    React.useCallback<UpdateFormElementsHandler>(\n      (setter) => {\n        onUpdateFormElements((formElements) => {\n          return formElements.map((formElement) => {\n            if (\n              formElement.id === element.id &&\n              formElement.type === 'section'\n            ) {\n              return {\n                ...formElement,\n                elements: setter(formElement.elements),\n              }\n            }\n            return formElement\n          })\n        })\n      },\n      [element.id, onUpdateFormElements],\n    )\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className=\"ob-section__header cypress-section-header\"\n        onClick={toggle}\n      >\n        <h3 className=\"ob-section__header-text title is-3\">\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <i className=\"material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </i>\n            </Tooltip>\n          )}\n          <i\n            className={clsx('ob-section__header-icon material-icons', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </i>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} />\n          </div>\n        )}\n      </div>\n      <hr className=\"ob-section__divider\" />\n      <Collapse\n        in={!isCollapsed}\n        classes={{\n          root: 'ob-section__content',\n          entered: 'ob-section__expanded',\n          hidden: 'ob-section__collapsed',\n        }}\n      >\n        <OneBlinkFormElements\n          {...props}\n          displayValidationMessages={displayValidationMessage}\n          onLookup={handleLookup}\n          elements={element.elements}\n          onUpdateFormElements={handleUpdateNestedFormElements}\n        />\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n"]}

package/dist/form-elements/FormElementSelect.js

@@ -26,7 +26,9 @@ function FormElementSelect({ id, element, value, onChange, validationMessage, di
                 !element.multi ? (React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded" },
                         React.createElement("div", { className: "select is-fullwidth" },
-                            React.createElement("select", { id: id, name: element.name, className: "cypress-select-single-control ob-input ob-select__single", value: typeof value === 'string' ? value : '', onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty },
+                            React.createElement("select", { id: id, name: element.name, className: "cypress-select-single-control ob-input ob-select__single", value: typeof value === 'string' ? value : '', onChange: (e) => onChange(element, {
+                                    value: e.target.value || undefined,
+                                }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty },
                                 React.createElement("option", { value: "" }, "Please choose"),
                                 filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))))))) : (React.createElement("div", { className: "select is-multiple control" },
                     React.createElement("select", { multiple: true, id: id, name: element.name, className: "cypress-select-multiple-control ob-input ob-select__multi", value: Array.isArray(value) ? value : [], onChange: (e) => {
@@ -34,7 +36,9 @@ function FormElementSelect({ id, element, value, onChange, validationMessage, di
                             for (let i = 0; i < e.target.selectedOptions.length; i++) {
                                 vals.push(e.target.selectedOptions[i].value);
                             }
-                            onChange(element, vals.length ? vals : undefined);
+                            onChange(element, {
+                                value: vals.length ? vals : undefined,
+                            });
                         }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }, filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))),
                     React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton }))),
                 (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },

package/dist/form-elements/FormElementSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, e.target.value || undefined)\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, vals.length ? vals : undefined)\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}
+{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,kBAAkB,MAAM,2CAA2C,CAAA;AAC1E,OAAO,qBAAqB,MAAM,gCAAgC,CAAA;AAClE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,iBAAiB,MAAM,0CAA0C,CAAA;AAqBxE,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,gCAAgC,EAChC,oBAAoB,EACpB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,OAAO;QACP,KAAK;QACL,QAAQ;QACR,gCAAgC;QAChC,oBAAoB;KACrB,CAAC,CAAA;IAEF,MAAM,qBAAqB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAA;QACtC,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QAC7C,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,gCAAgC,EAAE,gCAAgC;gBAEjE,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,YAAY,IAAI,CACxC,oBAAC,iBAAiB,IAChB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAmD,GAC7D,CACH;gBACA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAChB,6BAAK,SAAS,EAAC,kBAAkB;oBAC/B,6BAAK,SAAS,EAAC,qBAAqB;wBAClC,6BAAK,SAAS,EAAC,qBAAqB;4BAClC,gCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0DAA0D,EACpE,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;oCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;iCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU;gCAElB,gCAAQ,KAAK,EAAC,EAAE,oBAAuB;gCACtC,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACzC,gCAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAC7B,KAAK,CACC,CACV,CAAC,CACK,CACL,CACF,CACF,CACP,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,gCACE,QAAQ,QACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,2DAA2D,EACrE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACxC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,MAAM,IAAI,GAAG,EAAE,CAAA;4BACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gCACxD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;6BAC7C;4BACD,QAAQ,CAAC,OAAO,EAAE;gCAChB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;6BACtC,CAAC,CAAA;wBACJ,CAAC,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,IAEjB,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACzC,gCAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAC7B,KAAK,CACC,CACV,CAAC,CACK;oBAET,oBAAC,YAAY,IACX,YAAY,QACZ,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE,CACP;gBAEA,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;oBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACkB,CACK,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, {\n                        value: e.target.value || undefined,\n                      })\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, {\n                    value: vals.length ? vals : undefined,\n                  })\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}

package/dist/form-elements/FormElementSignature.js

@@ -40,7 +40,9 @@ const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChang
         const trimmedCanvas = canvasRef.current.getTrimmedCanvas();
         // Convert base64 data uri to blob and send it on its way
         const blob = await canvasToBlob(trimmedCanvas);
-        onChange(element, prepareNewAttachment(blob, 'signature.png', element));
+        onChange(element, {
+            value: prepareNewAttachment(blob, 'signature.png', element),
+        });
     }, [element, onChange]);
     // HANDLING CANVAS CHANGE
     const handleEndDraw = React.useCallback(() => {
@@ -98,7 +100,9 @@ const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChang
 });
 const SignatureDisplay = React.memo(function SignatureDisplay({ element, value, onChange, }) {
     const result = useAttachment(value, element, React.useCallback((id, attachment) => {
-        onChange(element, attachment);
+        onChange(element, {
+            value: attachment,
+        });
     }, [element, onChange]));
     const handleRetry = React.useMemo(() => {
         if (!value || typeof value !== 'object')
@@ -106,11 +110,13 @@ const SignatureDisplay = React.memo(function SignatureDisplay({ element, value,
         if (value.type === 'ERROR' && value.data) {
             return () => {
                 onChange(element, {
-                    type: 'NEW',
-                    _id: value._id,
-                    data: value.data,
-                    fileName: value.fileName,
-                    isPrivate: value.isPrivate,
+                    value: {
+                        type: 'NEW',
+                        _id: value._id,
+                        data: value.data,
+                        fileName: value.fileName,
+                        isPrivate: value.isPrivate,
+                    },
                 });
             };
         }
@@ -121,7 +127,9 @@ const SignatureDisplay = React.memo(function SignatureDisplay({ element, value,
                 React.createElement(DisplayImage, { ...result }))),
         React.createElement("div", { className: "buttons ob-buttons" },
             result.uploadErrorMessage && handleRetry && (React.createElement("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry }, "Retry")),
-            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, undefined), disabled: element.readOnly }, "Clear"))));
+            React.createElement("button", { type: "button", className: "button ob-button is-light ob-button__clear cypress-clear-signature", onClick: () => onChange(element, {
+                    value: undefined,
+                }), disabled: element.readOnly }, "Clear"))));
 });
 const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, progress, }) {
     if (uploadErrorMessage) {

package/dist/form-elements/FormElementSignature.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DrawElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  setIsDirty,\n  isDirty,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n\n  const handleChange = React.useCallback<\n    FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  >(\n    (formElement, newValue) => {\n      setIsDirty()\n      onChange(formElement, newValue)\n    },\n    [onChange, setIsDirty],\n  )\n\n  return (\n    <div className=\"cypress-signature-element\">\n      <FormElementLabelContainer\n        className=\"ob-signature\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {value ? (\n            <SignatureDisplay\n              element={element}\n              value={value}\n              onChange={handleChange}\n            />\n          ) : isPageVisible ? (\n            <SignatureDrawing element={element} onChange={handleChange} />\n          ) : null}\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n  element,\n  onChange,\n}: {\n  element: Props['element']\n  onChange: Props['onChange']\n}) {\n  const canvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isEmpty, setIsEmpty] = React.useState(true)\n  const [canvasDimensions, setCanvasDimensions] = React.useState({})\n\n  const handleClear = React.useCallback(() => {\n    if (canvasRef.current) {\n      console.log('Clearing signature...')\n      canvasRef.current.clear()\n    }\n    setIsEmpty(true)\n  }, [])\n\n  const handleDone = React.useCallback(async () => {\n    if (!canvasRef.current) return\n    const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n    // Convert base64 data uri to blob and send it on its way\n    const blob = await canvasToBlob(trimmedCanvas)\n    onChange(element, prepareNewAttachment(blob, 'signature.png', element))\n  }, [element, onChange])\n\n  // HANDLING CANVAS CHANGE\n  const handleEndDraw = React.useCallback(() => {\n    if (window.cordova) {\n      scrollingService.enableScrolling()\n    }\n    if (isEmpty) {\n      setIsEmpty(false)\n    }\n  }, [isEmpty])\n\n  // HANDLE RESIZE\n  React.useEffect(() => {\n    const signatureCanvas = canvasRef.current\n    if (!signatureCanvas) return\n    const resize = () => {\n      const parentDiv = signatureCanvas.getCanvas().parentNode\n      if (parentDiv) {\n        setCanvasDimensions({\n          // @ts-expect-error ???\n          width: parentDiv.clientWidth,\n          // @ts-expect-error ???\n          height: parentDiv.clientHeight,\n        })\n      }\n    }\n    window.addEventListener('resize', resize)\n    resize()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n    }\n  }, [canvasRef])\n\n  // REACTIVE DISABLING OF CANVAS\n  React.useEffect(() => {\n    if (!canvasRef.current) return\n    if (element.readOnly) {\n      canvasRef.current.off()\n    } else {\n      canvasRef.current.on()\n    }\n  }, [canvasRef, element.readOnly])\n\n  return (\n    <>\n      <div>\n        <SignatureCanvas\n          ref={canvasRef}\n          canvasProps={{\n            ...canvasDimensions,\n            className:\n              'input ob-signature__control cypress-signature-control signature-pad',\n            // @ts-expect-error ???\n            disabled: element.readOnly,\n          }}\n          onEnd={handleEndDraw}\n          onBegin={\n            window.cordova ? scrollingService.disableScrolling : undefined\n          }\n        />\n      </div>\n\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={handleClear}\n          disabled={element.readOnly || isEmpty}\n        >\n          Clear\n        </button>\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n          onClick={handleDone}\n          disabled={element.readOnly || isEmpty}\n        >\n          Save Signature\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n  element,\n  value,\n  onChange,\n}: {\n  element: Props['element']\n  value: Props['value']\n  onChange: Props['onChange']\n}) {\n  const result = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, attachment)\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          type: 'NEW',\n          _id: value._id,\n          data: value.data,\n          fileName: value.fileName,\n          isPrivate: value.isPrivate,\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  return (\n    <>\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <DisplayImage {...result} />\n        </div>\n      </figure>\n\n      <div className=\"buttons ob-buttons\">\n        {result.uploadErrorMessage && handleRetry && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n            onClick={handleRetry}\n          >\n            Retry\n          </button>\n        )}\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={() => onChange(element, undefined)}\n          disabled={element.readOnly}\n        >\n          Clear\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  progress,\n}: ReturnType<typeof useAttachment>) {\n  if (uploadErrorMessage) {\n    return (\n      <>\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your signature failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </>\n    )\n  }\n\n  if (loadImageUrlError) {\n    return (\n      <>\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </>\n    )\n  }\n\n  if (isLoadingImageUrl) {\n    return <OnLoading small className=\"cypress-signature-loading-image\" />\n  }\n\n  if (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-signature-image ob-signature__img\"\n        />\n        <ProgressBar progress={progress} isShowing={isUploading} />\n      </>\n    )\n  }\n\n  return <ImagePreviewUnavailable />\n})\n"]}
+{"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DrawElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  setIsDirty,\n  isDirty,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n\n  const handleChange = React.useCallback<\n    FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  >(\n    (formElement, newValue) => {\n      setIsDirty()\n      onChange(formElement, newValue)\n    },\n    [onChange, setIsDirty],\n  )\n\n  return (\n    <div className=\"cypress-signature-element\">\n      <FormElementLabelContainer\n        className=\"ob-signature\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {value ? (\n            <SignatureDisplay\n              element={element}\n              value={value}\n              onChange={handleChange}\n            />\n          ) : isPageVisible ? (\n            <SignatureDrawing element={element} onChange={handleChange} />\n          ) : null}\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n  element,\n  onChange,\n}: {\n  element: Props['element']\n  onChange: Props['onChange']\n}) {\n  const canvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isEmpty, setIsEmpty] = React.useState(true)\n  const [canvasDimensions, setCanvasDimensions] = React.useState({})\n\n  const handleClear = React.useCallback(() => {\n    if (canvasRef.current) {\n      console.log('Clearing signature...')\n      canvasRef.current.clear()\n    }\n    setIsEmpty(true)\n  }, [])\n\n  const handleDone = React.useCallback(async () => {\n    if (!canvasRef.current) return\n    const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n    // Convert base64 data uri to blob and send it on its way\n    const blob = await canvasToBlob(trimmedCanvas)\n    onChange(element, {\n      value: prepareNewAttachment(blob, 'signature.png', element),\n    })\n  }, [element, onChange])\n\n  // HANDLING CANVAS CHANGE\n  const handleEndDraw = React.useCallback(() => {\n    if (window.cordova) {\n      scrollingService.enableScrolling()\n    }\n    if (isEmpty) {\n      setIsEmpty(false)\n    }\n  }, [isEmpty])\n\n  // HANDLE RESIZE\n  React.useEffect(() => {\n    const signatureCanvas = canvasRef.current\n    if (!signatureCanvas) return\n    const resize = () => {\n      const parentDiv = signatureCanvas.getCanvas().parentNode\n      if (parentDiv) {\n        setCanvasDimensions({\n          // @ts-expect-error ???\n          width: parentDiv.clientWidth,\n          // @ts-expect-error ???\n          height: parentDiv.clientHeight,\n        })\n      }\n    }\n    window.addEventListener('resize', resize)\n    resize()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n    }\n  }, [canvasRef])\n\n  // REACTIVE DISABLING OF CANVAS\n  React.useEffect(() => {\n    if (!canvasRef.current) return\n    if (element.readOnly) {\n      canvasRef.current.off()\n    } else {\n      canvasRef.current.on()\n    }\n  }, [canvasRef, element.readOnly])\n\n  return (\n    <>\n      <div>\n        <SignatureCanvas\n          ref={canvasRef}\n          canvasProps={{\n            ...canvasDimensions,\n            className:\n              'input ob-signature__control cypress-signature-control signature-pad',\n            // @ts-expect-error ???\n            disabled: element.readOnly,\n          }}\n          onEnd={handleEndDraw}\n          onBegin={\n            window.cordova ? scrollingService.disableScrolling : undefined\n          }\n        />\n      </div>\n\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={handleClear}\n          disabled={element.readOnly || isEmpty}\n        >\n          Clear\n        </button>\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n          onClick={handleDone}\n          disabled={element.readOnly || isEmpty}\n        >\n          Save Signature\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n  element,\n  value,\n  onChange,\n}: {\n  element: Props['element']\n  value: Props['value']\n  onChange: Props['onChange']\n}) {\n  const result = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  return (\n    <>\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <DisplayImage {...result} />\n        </div>\n      </figure>\n\n      <div className=\"buttons ob-buttons\">\n        {result.uploadErrorMessage && handleRetry && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n            onClick={handleRetry}\n          >\n            Retry\n          </button>\n        )}\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={() =>\n            onChange(element, {\n              value: undefined,\n            })\n          }\n          disabled={element.readOnly}\n        >\n          Clear\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  progress,\n}: ReturnType<typeof useAttachment>) {\n  if (uploadErrorMessage) {\n    return (\n      <>\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your signature failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </>\n    )\n  }\n\n  if (loadImageUrlError) {\n    return (\n      <>\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </>\n    )\n  }\n\n  if (isLoadingImageUrl) {\n    return <OnLoading small className=\"cypress-signature-loading-image\" />\n  }\n\n  if (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-signature-image ob-signature__img\"\n        />\n        <ProgressBar progress={progress} isShowing={isUploading} />\n      </>\n    )\n  }\n\n  return <ImagePreviewUnavailable />\n})\n"]}

package/dist/form-elements/FormElementSummary.js

@@ -136,10 +136,14 @@ function FormElementSummary({ element, onChange, value }) {
             return;
         }
         if (summary.length) {
-            onChange(element, summary);
+            onChange(element, {
+                value: summary,
+            });
         }
         else {
-            onChange(element, undefined);
+            onChange(element, {
+                value: undefined,
+            });
         }
     }, [
         element,