@oneblink/apps-react 8.5.1-beta.2 → 8.6.0-beta.10

package/dist/form-elements/FormElementSection.js

@@ -8,8 +8,26 @@ import { checkSectionValidity } from '../services/form-validation/validators';
 import { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElementLabelContainer';
 import useValidationClass from '../hooks/useValidationClass';
 import MaterialIcon from '../components/MaterialIcon';
-function FormElementSection({ element, onLookup, displayValidationMessages, onUpdateFormElements, sectionHeaderId, ...props }) {
-    const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
+function sectionStateToBoolean(state) {
+    if (state === 'COLLAPSED') {
+        return true;
+    }
+    return false;
+}
+function FormElementSection({ element, onLookup, displayValidationMessages, onUpdateFormElements, sectionHeaderId, sectionState = [], ...props }) {
+    const sectionStateEntry = sectionState.find((section) => section.id === `${props['idPrefix']}${element.id}`);
+    const isCollapsedFromState = (sectionStateEntry === null || sectionStateEntry === void 0 ? void 0 : sectionStateEntry.state)
+        ? sectionStateToBoolean(sectionStateEntry.state)
+        : element.isCollapsed;
+    const [isCollapsed, , , toggle] = useBooleanState(isCollapsedFromState);
+    const handleToggle = React.useCallback(() => {
+        // trigger onChange to update the sectionState
+        props.onChange(element, {
+            executedLookups: undefined,
+            sectionState,
+        }, props['idPrefix']);
+        toggle();
+    }, [element, props, sectionState, toggle]);
     const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
     const headerRef = React.useRef(null);
     const id = `${props['idPrefix']}${element.id}`;
@@ -37,6 +55,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
                         submission: currentFormSubmission.submission,
                         lastElementUpdated: currentFormSubmission.lastElementUpdated,
                         executedLookups: currentFormSubmission.executedLookups,
+                        sectionState: currentFormSubmission.sectionState,
                     });
                     model = submission;
                     newExecutedLookups = executedLookups;
@@ -52,6 +71,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
                 submission: model,
                 lastElementUpdated: currentFormSubmission.lastElementUpdated,
                 executedLookups: newExecutedLookups,
+                sectionState: currentFormSubmission.sectionState,
             };
         });
     }, [element.id, onLookup]);
@@ -71,19 +91,19 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
     }, [element.id, onUpdateFormElements]);
     const handleClickBottomCollapseButton = React.useCallback(() => {
         var _a;
-        toggle();
+        handleToggle();
         (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
             behavior: 'smooth',
             block: 'center',
             inline: 'nearest',
         });
-    }, [toggle]);
+    }, [handleToggle]);
     return (React.createElement("div", { className: clsx('ob-section', validationClassName) },
         React.createElement("div", { className: clsx('ob-section__header cypress-section-header', {
                 'ob-section__header-filled': element.canCollapseFromBottom,
-            }), onClick: toggle, tabIndex: 0, onKeyDown: (e) => {
+            }), onClick: handleToggle, tabIndex: 0, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
-                    toggle();
+                    handleToggle();
                 }
             }, ref: headerRef },
             React.createElement("h3", { className: "ob-section__header-text title is-3", id: sectionHeaderId },
@@ -105,7 +125,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, onUp
                 hidden: 'ob-section__collapsed',
             } },
             React.createElement(SectionElementsWrapper, { element: element, onCollapse: handleClickBottomCollapseButton },
-                React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements, onUpdateFormElements: handleUpdateNestedFormElements })))));
+                React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState })))));
 }
 export default React.memo(FormElementSection);
 const SectionElementsWrapper = ({ children, element, onCollapse, }) => {

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,MAAM,eAAe,CAAA;AACxC,OAAO,OAAO,MAAM,gCAAgC,CAAA;AAEpD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,oBAEN,MAAM,6CAA6C,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAA;AAM7E,OAAO,EACL,cAAc,EACd,WAAW,GACZ,MAAM,kDAAkD,CAAA;AACzD,OAAO,kBAAkB,MAAM,6BAA6B,CAAA;AAC5D,OAAO,YAAY,MAAM,4BAA4B,CAAA;AAErD,SAAS,kBAAkB,CAA6C,EACtE,OAAO,EACP,QAAQ,EACR,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EAIT;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;IAC7E,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IACpD,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,CAAA;IAE9C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACtC,oBAAoB,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;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,IAAI,kBAAkB,GAAoB,EAAE,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,CAAC;oBACpE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,GAC7C,kBAAkB,CAAC;wBACjB,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,qBAAqB,CAAC,UAAU;wBAC5C,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;wBAC5D,eAAe,EAAE,qBAAqB,CAAC,eAAe;qBACvD,CAAC,CAAA;oBACJ,KAAK,GAAG,UAAU,CAAA;oBAClB,kBAAkB,GAAG,eAAe,CAAA;oBACpC,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;gBACH,CAAC;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,OAAO;gBACL,QAAQ;gBACR,UAAU,EAAE,KAAK;gBACjB,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;gBAC5D,eAAe,EAAE,kBAAkB;aACpC,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,CAAC;oBACD,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC;qBACvC,CAAA;gBACH,CAAC;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,MAAM,+BAA+B,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;;QAC7D,MAAM,EAAE,CAAA;QACR,MAAA,SAAS,CAAC,OAAO,0CAAE,cAAc,CAAC;YAChC,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,SAAS;SAClB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC;QACrD,6BACE,SAAS,EAAE,IAAI,CAAC,2CAA2C,EAAE;gBAC3D,2BAA2B,EAAE,OAAO,CAAC,qBAAqB;aAC3D,CAAC,EACF,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,MAAM,EAAE,CAAA;gBACV,CAAC;YACH,CAAC,EACD,GAAG,EAAE,SAAS;YAEd,4BAAI,SAAS,EAAC,oCAAoC,EAAC,EAAE,EAAE,eAAe;gBACnE,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,EAAE,OAAO,EAAE,EAAE,GAAI,CACjD,CACA;YACL,6BAAK,SAAS,EAAC,mCAAmC;gBAC/C,CAAC,KAAK,IAAI,wBAAwB,IAAI,CACrC,oBAAC,OAAO,IAAC,KAAK,EAAC,oBAAoB;oBACjC,oBAAC,YAAY,IAAC,SAAS,EAAC,2EAA2E,cAEpF,CACP,CACX;gBACD,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE;wBACzC,YAAY,EAAE,CAAC,WAAW;qBAC3B,CAAC,kBAGW,CACX;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,EAAE,OAAO,EAAE,EAAE,GAAI,CAC/C,CACP,CACG;QACL,CAAC,OAAO,CAAC,qBAAqB,IAAI,4BAAI,SAAS,EAAC,qBAAqB,GAAG;QACzE,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,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,+BAA+B;gBAE3C,oBAAC,oBAAoB,OACf,KAAK,EACT,yBAAyB,EAAE,wBAAwB,EACnD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,oBAAoB,EAAE,8BAA8B,GACpD,CACqB,CAChB,CACP,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;AAE7C,MAAM,sBAAsB,GAAG,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,UAAU,GAKX,EAAE,EAAE;IACH,OAAO,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CACrC,6BAAK,SAAS,EAAC,2CAA2C;QACvD,QAAQ;QAET,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,+DAA+D,EACzE,OAAO,EAAE,UAAU;YAEnB,8BAAM,SAAS,EAAC,MAAM;gBACpB,oBAAC,YAAY,sBAA2B,CACnC;YACP,6CAAqB,CACd,CACL,CACP,CAAC,CAAC,CAAC,CACF,0CAAG,QAAQ,CAAI,CAChB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\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/validators'\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'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  onUpdateFormElements,\n  sectionHeaderId,\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n  sectionHeaderId: string\n}) {\n  const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n  const headerRef = React.useRef<HTMLDivElement>(null)\n  const id = `${props['idPrefix']}${element.id}`\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  const handleClickBottomCollapseButton = React.useCallback(() => {\n    toggle()\n    headerRef.current?.scrollIntoView({\n      behavior: 'smooth',\n      block: 'center',\n      inline: 'nearest',\n    })\n  }, [toggle])\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className={clsx('ob-section__header cypress-section-header', {\n          'ob-section__header-filled': element.canCollapseFromBottom,\n        })}\n        onClick={toggle}\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            toggle()\n          }\n        }}\n        ref={headerRef}\n      >\n        <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} inputId={id} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </MaterialIcon>\n            </Tooltip>\n          )}\n          <MaterialIcon\n            className={clsx('ob-section__header-icon', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </MaterialIcon>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} inputId={id} />\n          </div>\n        )}\n      </div>\n      {!element.canCollapseFromBottom && <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        <SectionElementsWrapper\n          element={element}\n          onCollapse={handleClickBottomCollapseButton}\n        >\n          <OneBlinkFormElements\n            {...props}\n            displayValidationMessages={displayValidationMessage}\n            onLookup={handleLookup}\n            elements={element.elements}\n            onUpdateFormElements={handleUpdateNestedFormElements}\n          />\n        </SectionElementsWrapper>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n  children,\n  element,\n  onCollapse,\n}: {\n  children: React.ReactNode\n  element: FormTypes.SectionElement\n  onCollapse: () => void\n}) => {\n  return element.canCollapseFromBottom ? (\n    <div className=\"ob-section__collapsible-content-container\">\n      {children}\n\n      <button\n        type=\"button\"\n        className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n        onClick={onCollapse}\n      >\n        <span className=\"icon\">\n          <MaterialIcon>expand_less</MaterialIcon>\n        </span>\n        <span>Collapse</span>\n      </button>\n    </div>\n  ) : (\n    <>{children}</>\n  )\n}\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 } from '@mui/material'\nimport Tooltip from '../components/renderer/Tooltip'\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/validators'\nimport {\n  FormElementLookupHandler,\n  UpdateFormElementsHandler,\n  ExecutedLookups,\n  SectionState,\n} from '../types/form'\nimport {\n  HintBelowLabel,\n  HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport MaterialIcon from '../components/MaterialIcon'\n\nfunction sectionStateToBoolean(state: 'COLLAPSED' | 'EXPANDED') {\n  if (state === 'COLLAPSED') {\n    return true\n  }\n  return false\n}\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  onUpdateFormElements,\n  sectionHeaderId,\n  sectionState = [],\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n  sectionHeaderId: string\n  sectionState?: SectionState\n}) {\n  const sectionStateEntry = sectionState.find(\n    (section) => section.id === `${props['idPrefix']}${element.id}`,\n  )\n  const isCollapsedFromState = sectionStateEntry?.state\n    ? sectionStateToBoolean(sectionStateEntry.state)\n    : element.isCollapsed\n\n  const [isCollapsed, , , toggle] = useBooleanState(isCollapsedFromState)\n\n  const handleToggle = React.useCallback(() => {\n    // trigger onChange to update the sectionState\n    props.onChange(\n      element,\n      {\n        executedLookups: undefined,\n        sectionState,\n      },\n      props['idPrefix'],\n    )\n    toggle()\n  }, [element, props, sectionState, toggle])\n\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n  const headerRef = React.useRef<HTMLDivElement>(null)\n  const id = `${props['idPrefix']}${element.id}`\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                sectionState: currentFormSubmission.sectionState,\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          sectionState: currentFormSubmission.sectionState,\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  const handleClickBottomCollapseButton = React.useCallback(() => {\n    handleToggle()\n    headerRef.current?.scrollIntoView({\n      behavior: 'smooth',\n      block: 'center',\n      inline: 'nearest',\n    })\n  }, [handleToggle])\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className={clsx('ob-section__header cypress-section-header', {\n          'ob-section__header-filled': element.canCollapseFromBottom,\n        })}\n        onClick={handleToggle}\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleToggle()\n          }\n        }}\n        ref={headerRef}\n      >\n        <h3 className=\"ob-section__header-text title is-3\" id={sectionHeaderId}>\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} inputId={id} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <MaterialIcon className=\"has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </MaterialIcon>\n            </Tooltip>\n          )}\n          <MaterialIcon\n            className={clsx('ob-section__header-icon', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </MaterialIcon>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} inputId={id} />\n          </div>\n        )}\n      </div>\n      {!element.canCollapseFromBottom && <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        <SectionElementsWrapper\n          element={element}\n          onCollapse={handleClickBottomCollapseButton}\n        >\n          <OneBlinkFormElements\n            {...props}\n            displayValidationMessages={displayValidationMessage}\n            onLookup={handleLookup}\n            elements={element.elements}\n            onUpdateFormElements={handleUpdateNestedFormElements}\n            sectionState={sectionState}\n          />\n        </SectionElementsWrapper>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n\nconst SectionElementsWrapper = ({\n  children,\n  element,\n  onCollapse,\n}: {\n  children: React.ReactNode\n  element: FormTypes.SectionElement\n  onCollapse: () => void\n}) => {\n  return element.canCollapseFromBottom ? (\n    <div className=\"ob-section__collapsible-content-container\">\n      {children}\n\n      <button\n        type=\"button\"\n        className=\"button is-rounded is-light ob-section__bottom-collapse-button\"\n        onClick={onCollapse}\n      >\n        <span className=\"icon\">\n          <MaterialIcon>expand_less</MaterialIcon>\n        </span>\n        <span>Collapse</span>\n      </button>\n    </div>\n  ) : (\n    <>{children}</>\n  )\n}\n"]}

package/dist/hooks/useFormSubmissionAutoSaveState.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { submissionService } from '@oneblink/apps';
 import { FormTypes, SubmissionTypes } from '@oneblink/types';
+import { SectionState } from '../types/form';
 /**
  * Use this if you want to implement a controlled auto saving form. See
  * {@link OneBlinkFormControlled} for a full example. If you do not need to
@@ -11,7 +12,7 @@ import { FormTypes, SubmissionTypes } from '@oneblink/types';
  * @returns
  * @group Hooks
  */
-export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, }: {
+export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, }: {
     form: FormTypes.Form;
     removeAutoSaveDataBeforeSubmit?: boolean;
     removeAutoSaveDataBeforeSaveDraft?: boolean;
@@ -22,13 +23,18 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
     initialSubmission?: SubmissionTypes.S3SubmissionData['submission'];
     resumeAtElement?: FormTypes.FormElement;
     onSaveDraft?: (newDraftSubmission: submissionService.NewDraftSubmission) => unknown;
+    resumeSectionState?: SectionState;
 }): {
     definition: FormTypes.Form;
     submission: {
         [name: string]: unknown;
     };
     lastElementUpdated: FormTypes.FormElement | undefined;
-    executedLookups: import("..").ExecutedLookups;
+    executedLookups: import("../types/form").ExecutedLookups;
+    sectionState: {
+        id: string;
+        state: "COLLAPSED" | "EXPANDED";
+    }[] | undefined;
     isLoadingAutoSaveSubmission: boolean;
     isAutoSaveSubmissionAvailable: boolean;
     startNewSubmission: () => void;
@@ -41,6 +47,7 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
         definition: FormTypes.Form;
         submission: SubmissionTypes.S3SubmissionData["submission"];
         lastElementUpdated: FormTypes.FormElement | undefined;
-        executedLookups: import("..").ExecutedLookups;
+        executedLookups: import("../types/form").ExecutedLookups;
+        sectionState: SectionState | undefined;
     }>>;
 };

package/dist/hooks/useFormSubmissionAutoSaveState.js

@@ -12,15 +12,16 @@ import useFormSubmissionState from './useFormSubmissionState';
  * @returns
  * @group Hooks
  */
-export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, }) {
-    const [{ definition, submission, lastElementUpdated, executedLookups }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement);
-    const [{ isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement }, setAutoSaveState,] = React.useState({
+export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, formIsDisabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, }) {
+    const [{ definition, submission, lastElementUpdated, executedLookups, sectionState, }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement, resumeSectionState);
+    const [{ isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement, autoSaveSectionState, }, setAutoSaveState,] = React.useState({
         isLoadingAutoSaveSubmission: true,
         autoSaveSubmission: null,
         autoSaveElement: null,
+        autoSaveSectionState: null,
     });
     const throttledAutoSave = React.useMemo(() => {
-        return _throttle((model, lastElementUpdated) => {
+        return _throttle((model, lastElementUpdated, sectionState) => {
             if (!formIsDisabled) {
                 switch (lastElementUpdated === null || lastElementUpdated === void 0 ? void 0 : lastElementUpdated.type) {
                     case 'summary':
@@ -36,6 +37,13 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
                     if (lastElementUpdated) {
                         return autoSaveService.upsertAutoSaveData(definition.id, `LAST_ELEMENT_UPDATED_${autoSaveKey}`, lastElementUpdated);
                     }
+                })
+                    .then(() => {
+                    if (sectionState) {
+                        return autoSaveService.upsertAutoSaveData(definition.id, `SECTION_STATE_${autoSaveKey}`, {
+                            sectionState,
+                        });
+                    }
                 })
                     .catch((error) => {
                     console.warn('Error while auto saving', error);
@@ -103,11 +111,13 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
             try {
                 const autoSaveSubmission = await autoSaveService.getAutoSaveData(definition.id, autoSaveKey);
                 const autoSaveElement = await autoSaveService.getAutoSaveData(definition.id, `LAST_ELEMENT_UPDATED_${autoSaveKey}`);
+                const autoSaveSectionStateData = await autoSaveService.getAutoSaveData(definition.id, `SECTION_STATE_${autoSaveKey}`);
                 if (!ignore) {
                     setAutoSaveState({
                         isLoadingAutoSaveSubmission: false,
                         autoSaveSubmission,
                         autoSaveElement,
+                        autoSaveSectionState: (autoSaveSectionStateData === null || autoSaveSectionStateData === void 0 ? void 0 : autoSaveSectionStateData.sectionState) || null,
                     });
                 }
             }
@@ -119,6 +129,7 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
                         isLoadingAutoSaveSubmission: false,
                         autoSaveSubmission: null,
                         autoSaveElement: null,
+                        autoSaveSectionState: null,
                     });
                 }
             }
@@ -139,7 +150,7 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
             const newFormSubmission = typeof formSubmission === 'function'
                 ? formSubmission(currentFormSubmission)
                 : formSubmission;
-            throttledAutoSave(newFormSubmission.submission, newFormSubmission.lastElementUpdated);
+            throttledAutoSave(newFormSubmission.submission, newFormSubmission.lastElementUpdated, newFormSubmission.sectionState);
             return newFormSubmission;
         });
     }, [setFormSubmission, throttledAutoSave]);
@@ -149,6 +160,7 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
             isLoadingAutoSaveSubmission: false,
             autoSaveSubmission: null,
             autoSaveElement: null,
+            autoSaveSectionState: null,
         });
     }, [deleteAutoSaveSubmission]);
     const continueAutoSaveSubmission = React.useCallback(() => {
@@ -157,14 +169,21 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
                 ...currentFormSubmission,
                 submission: autoSaveSubmission,
                 lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,
+                sectionState: autoSaveSectionState || [],
             }));
         }
         setAutoSaveState({
             isLoadingAutoSaveSubmission: false,
             autoSaveSubmission: null,
             autoSaveElement: null,
+            autoSaveSectionState: null,
         });
-    }, [autoSaveSubmission, setFormSubmission, autoSaveElement]);
+    }, [
+        autoSaveSubmission,
+        setFormSubmission,
+        autoSaveElement,
+        autoSaveSectionState,
+    ]);
     React.useEffect(() => {
         if (form.continueWithAutosave) {
             continueAutoSaveSubmission();
@@ -175,6 +194,7 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
         submission,
         lastElementUpdated,
         executedLookups,
+        sectionState,
         isLoadingAutoSaveSubmission,
         isAutoSaveSubmissionAvailable: autoSaveSubmission !== null && !form.continueWithAutosave,
         startNewSubmission,

package/dist/hooks/useFormSubmissionAutoSaveState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormElement } from '@oneblink/types/typescript/forms'\n\n/**\n * Use this if you want to implement a controlled auto saving form. See\n * {@link OneBlinkFormControlled} for a full example. If you do not need to\n * control the `submission` or `definition` properties, you can use the\n * {@link OneBlinkAutoSaveForm} component.\n *\n * @param options\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionAutoSaveState({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  autoSaveKey,\n  formIsDisabled,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n}: {\n  form: FormTypes.Form\n  removeAutoSaveDataBeforeSubmit?: boolean\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n  autoSaveKey: string\n  formIsDisabled?: boolean\n  onCancel: () => unknown\n  onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission']\n  resumeAtElement?: FormTypes.FormElement\n  onSaveDraft?: (\n    newDraftSubmission: submissionService.NewDraftSubmission,\n  ) => unknown\n}) {\n  const [\n    { definition, submission, lastElementUpdated, executedLookups },\n    setFormSubmission,\n  ] = useFormSubmissionState(form, initialSubmission, resumeAtElement)\n\n  const [\n    { isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement },\n    setAutoSaveState,\n  ] = React.useState<{\n    isLoadingAutoSaveSubmission: boolean\n    autoSaveSubmission: SubmissionTypes.S3SubmissionData['submission'] | null\n    autoSaveElement: FormElement | null\n  }>({\n    isLoadingAutoSaveSubmission: true,\n    autoSaveSubmission: null,\n    autoSaveElement: null,\n  })\n\n  const throttledAutoSave = React.useMemo(() => {\n    return _throttle(\n      (\n        model: SubmissionTypes.S3SubmissionData['submission'],\n        lastElementUpdated?: FormElement,\n      ) => {\n        if (!formIsDisabled) {\n          switch (lastElementUpdated?.type) {\n            case 'summary':\n            case 'calculation':\n            case 'captcha': {\n              return\n            }\n          }\n          console.log('Auto saving...')\n          autoSaveService\n            .upsertAutoSaveData(definition.id, autoSaveKey, model)\n            .then(() => {\n              if (lastElementUpdated) {\n                return autoSaveService.upsertAutoSaveData<FormElement>(\n                  definition.id,\n                  `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n                  lastElementUpdated,\n                )\n              }\n            })\n            .catch((error) => {\n              console.warn('Error while auto saving', error)\n              Sentry.captureException(error)\n            })\n        }\n      },\n      9580, // https://en.wikipedia.org/wiki/100_metres\n      { trailing: true, leading: false },\n    )\n  }, [autoSaveKey, definition.id, formIsDisabled])\n\n  const cancelAutoSave = React.useCallback(() => {\n    if (throttledAutoSave) {\n      throttledAutoSave.cancel()\n    }\n  }, [throttledAutoSave])\n\n  const deleteAutoSaveSubmission = React.useCallback(() => {\n    return autoSaveService\n      .deleteAutoSaveData(definition.id, autoSaveKey)\n      .catch((error) => {\n        console.warn('Error removing auto save data: ', error)\n        Sentry.captureException(error)\n      })\n  }, [autoSaveKey, definition.id])\n\n  const handleSubmit = React.useCallback(\n    (submissionResult: submissionService.NewFormSubmission) => {\n      cancelAutoSave()\n      if (removeAutoSaveDataBeforeSubmit !== false) {\n        deleteAutoSaveSubmission()\n      }\n      onSubmit(submissionResult)\n    },\n    [\n      cancelAutoSave,\n      deleteAutoSaveSubmission,\n      onSubmit,\n      removeAutoSaveDataBeforeSubmit,\n    ],\n  )\n\n  const handleSaveDraft = React.useMemo(() => {\n    if (onSaveDraft) {\n      return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n        cancelAutoSave()\n        if (removeAutoSaveDataBeforeSaveDraft !== false) {\n          deleteAutoSaveSubmission()\n        }\n        if (onSaveDraft) {\n          onSaveDraft(newDraftSubmission)\n        }\n      }\n    }\n  }, [\n    cancelAutoSave,\n    deleteAutoSaveSubmission,\n    onSaveDraft,\n    removeAutoSaveDataBeforeSaveDraft,\n  ])\n\n  const handleNavigateAway = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n  }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n  const handleCancel = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n    onCancel()\n  }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n  React.useEffect(() => {\n    let ignore = false\n    const loadAutoSaveData = async () => {\n      try {\n        const autoSaveSubmission = await autoSaveService.getAutoSaveData<\n          SubmissionTypes.S3SubmissionData['submission']\n        >(definition.id, autoSaveKey)\n        const autoSaveElement =\n          await autoSaveService.getAutoSaveData<FormElement>(\n            definition.id,\n            `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n          )\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission,\n            autoSaveElement,\n          })\n        }\n      } catch (error) {\n        console.warn('Error loading auto save data', error)\n        Sentry.captureException(error)\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission: null,\n            autoSaveElement: null,\n          })\n        }\n      }\n    }\n    loadAutoSaveData()\n    return () => {\n      ignore = true\n    }\n  }, [autoSaveKey, definition.id])\n\n  // Clean up throttle function on unmount\n  React.useEffect(() => {\n    return () => {\n      cancelAutoSave()\n    }\n  }, [cancelAutoSave])\n\n  const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n    (formSubmission) => {\n      setFormSubmission((currentFormSubmission) => {\n        const newFormSubmission =\n          typeof formSubmission === 'function'\n            ? formSubmission(currentFormSubmission)\n            : formSubmission\n\n        throttledAutoSave(\n          newFormSubmission.submission,\n          newFormSubmission.lastElementUpdated,\n        )\n\n        return newFormSubmission\n      })\n    },\n    [setFormSubmission, throttledAutoSave],\n  )\n\n  const startNewSubmission = React.useCallback(() => {\n    deleteAutoSaveSubmission()\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [deleteAutoSaveSubmission])\n\n  const continueAutoSaveSubmission = React.useCallback(() => {\n    if (autoSaveSubmission) {\n      setFormSubmission((currentFormSubmission) => ({\n        ...currentFormSubmission,\n        submission: autoSaveSubmission,\n        lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n      }))\n    }\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [autoSaveSubmission, setFormSubmission, autoSaveElement])\n\n  React.useEffect(() => {\n    if (form.continueWithAutosave) {\n      continueAutoSaveSubmission()\n    }\n  }, [continueAutoSaveSubmission, form.continueWithAutosave])\n\n  return {\n    definition,\n    submission,\n    lastElementUpdated,\n    executedLookups,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable:\n      autoSaveSubmission !== null && !form.continueWithAutosave,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    handleNavigateAway,\n    setFormSubmission: setFormSubmissionAutoSave,\n  }\n}\n"]}
+{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormElement } from '@oneblink/types/typescript/forms'\nimport { SectionState } from '../types/form'\n\n/**\n * Use this if you want to implement a controlled auto saving form. See\n * {@link OneBlinkFormControlled} for a full example. If you do not need to\n * control the `submission` or `definition` properties, you can use the\n * {@link OneBlinkAutoSaveForm} component.\n *\n * @param options\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionAutoSaveState({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  autoSaveKey,\n  formIsDisabled,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  resumeSectionState,\n}: {\n  form: FormTypes.Form\n  removeAutoSaveDataBeforeSubmit?: boolean\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n  autoSaveKey: string\n  formIsDisabled?: boolean\n  onCancel: () => unknown\n  onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission']\n  resumeAtElement?: FormTypes.FormElement\n  onSaveDraft?: (\n    newDraftSubmission: submissionService.NewDraftSubmission,\n  ) => unknown\n  resumeSectionState?: SectionState\n}) {\n  const [\n    {\n      definition,\n      submission,\n      lastElementUpdated,\n      executedLookups,\n      sectionState,\n    },\n    setFormSubmission,\n  ] = useFormSubmissionState(\n    form,\n    initialSubmission,\n    resumeAtElement,\n    resumeSectionState,\n  )\n\n  const [\n    {\n      isLoadingAutoSaveSubmission,\n      autoSaveSubmission,\n      autoSaveElement,\n      autoSaveSectionState,\n    },\n    setAutoSaveState,\n  ] = React.useState<{\n    isLoadingAutoSaveSubmission: boolean\n    autoSaveSubmission: SubmissionTypes.S3SubmissionData['submission'] | null\n    autoSaveElement: FormElement | null\n    autoSaveSectionState: SectionState | null\n  }>({\n    isLoadingAutoSaveSubmission: true,\n    autoSaveSubmission: null,\n    autoSaveElement: null,\n    autoSaveSectionState: null,\n  })\n\n  const throttledAutoSave = React.useMemo(() => {\n    return _throttle(\n      (\n        model: SubmissionTypes.S3SubmissionData['submission'],\n        lastElementUpdated?: FormElement,\n        sectionState?: SectionState,\n      ) => {\n        if (!formIsDisabled) {\n          switch (lastElementUpdated?.type) {\n            case 'summary':\n            case 'calculation':\n            case 'captcha': {\n              return\n            }\n          }\n          console.log('Auto saving...')\n          autoSaveService\n            .upsertAutoSaveData(definition.id, autoSaveKey, model)\n            .then(() => {\n              if (lastElementUpdated) {\n                return autoSaveService.upsertAutoSaveData<FormElement>(\n                  definition.id,\n                  `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n                  lastElementUpdated,\n                )\n              }\n            })\n            .then(() => {\n              if (sectionState) {\n                return autoSaveService.upsertAutoSaveData<{\n                  sectionState: SectionState\n                }>(definition.id, `SECTION_STATE_${autoSaveKey}`, {\n                  sectionState,\n                })\n              }\n            })\n            .catch((error) => {\n              console.warn('Error while auto saving', error)\n              Sentry.captureException(error)\n            })\n        }\n      },\n      9580, // https://en.wikipedia.org/wiki/100_metres\n      { trailing: true, leading: false },\n    )\n  }, [autoSaveKey, definition.id, formIsDisabled])\n\n  const cancelAutoSave = React.useCallback(() => {\n    if (throttledAutoSave) {\n      throttledAutoSave.cancel()\n    }\n  }, [throttledAutoSave])\n\n  const deleteAutoSaveSubmission = React.useCallback(() => {\n    return autoSaveService\n      .deleteAutoSaveData(definition.id, autoSaveKey)\n      .catch((error) => {\n        console.warn('Error removing auto save data: ', error)\n        Sentry.captureException(error)\n      })\n  }, [autoSaveKey, definition.id])\n\n  const handleSubmit = React.useCallback(\n    (submissionResult: submissionService.NewFormSubmission) => {\n      cancelAutoSave()\n      if (removeAutoSaveDataBeforeSubmit !== false) {\n        deleteAutoSaveSubmission()\n      }\n      onSubmit(submissionResult)\n    },\n    [\n      cancelAutoSave,\n      deleteAutoSaveSubmission,\n      onSubmit,\n      removeAutoSaveDataBeforeSubmit,\n    ],\n  )\n\n  const handleSaveDraft = React.useMemo(() => {\n    if (onSaveDraft) {\n      return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n        cancelAutoSave()\n        if (removeAutoSaveDataBeforeSaveDraft !== false) {\n          deleteAutoSaveSubmission()\n        }\n        if (onSaveDraft) {\n          onSaveDraft(newDraftSubmission)\n        }\n      }\n    }\n  }, [\n    cancelAutoSave,\n    deleteAutoSaveSubmission,\n    onSaveDraft,\n    removeAutoSaveDataBeforeSaveDraft,\n  ])\n\n  const handleNavigateAway = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n  }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n  const handleCancel = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n    onCancel()\n  }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n  React.useEffect(() => {\n    let ignore = false\n    const loadAutoSaveData = async () => {\n      try {\n        const autoSaveSubmission = await autoSaveService.getAutoSaveData<\n          SubmissionTypes.S3SubmissionData['submission']\n        >(definition.id, autoSaveKey)\n        const autoSaveElement =\n          await autoSaveService.getAutoSaveData<FormElement>(\n            definition.id,\n            `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n          )\n        const autoSaveSectionStateData = await autoSaveService.getAutoSaveData<{\n          sectionState: SectionState\n        }>(definition.id, `SECTION_STATE_${autoSaveKey}`)\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission,\n            autoSaveElement,\n            autoSaveSectionState:\n              autoSaveSectionStateData?.sectionState || null,\n          })\n        }\n      } catch (error) {\n        console.warn('Error loading auto save data', error)\n        Sentry.captureException(error)\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission: null,\n            autoSaveElement: null,\n            autoSaveSectionState: null,\n          })\n        }\n      }\n    }\n    loadAutoSaveData()\n    return () => {\n      ignore = true\n    }\n  }, [autoSaveKey, definition.id])\n\n  // Clean up throttle function on unmount\n  React.useEffect(() => {\n    return () => {\n      cancelAutoSave()\n    }\n  }, [cancelAutoSave])\n\n  const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n    (formSubmission) => {\n      setFormSubmission((currentFormSubmission) => {\n        const newFormSubmission =\n          typeof formSubmission === 'function'\n            ? formSubmission(currentFormSubmission)\n            : formSubmission\n\n        throttledAutoSave(\n          newFormSubmission.submission,\n          newFormSubmission.lastElementUpdated,\n          newFormSubmission.sectionState,\n        )\n\n        return newFormSubmission\n      })\n    },\n    [setFormSubmission, throttledAutoSave],\n  )\n\n  const startNewSubmission = React.useCallback(() => {\n    deleteAutoSaveSubmission()\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n      autoSaveSectionState: null,\n    })\n  }, [deleteAutoSaveSubmission])\n\n  const continueAutoSaveSubmission = React.useCallback(() => {\n    if (autoSaveSubmission) {\n      setFormSubmission((currentFormSubmission) => ({\n        ...currentFormSubmission,\n        submission: autoSaveSubmission,\n        lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n        sectionState: autoSaveSectionState || [],\n      }))\n    }\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n      autoSaveSectionState: null,\n    })\n  }, [\n    autoSaveSubmission,\n    setFormSubmission,\n    autoSaveElement,\n    autoSaveSectionState,\n  ])\n\n  React.useEffect(() => {\n    if (form.continueWithAutosave) {\n      continueAutoSaveSubmission()\n    }\n  }, [continueAutoSaveSubmission, form.continueWithAutosave])\n\n  return {\n    definition,\n    submission,\n    lastElementUpdated,\n    executedLookups,\n    sectionState,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable:\n      autoSaveSubmission !== null && !form.continueWithAutosave,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    handleNavigateAway,\n    setFormSubmission: setFormSubmissionAutoSave,\n  }\n}\n"]}

package/dist/hooks/useFormSubmissionState.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes, SubmissionTypes } from '@oneblink/types';
-import { ExecutedLookups } from '../types/form';
+import { ExecutedLookups, SectionState } from '../types/form';
 /**
  * This function is a simple wrapper around the react hook `useState()`. The
  * results can be passed to the [`<OneBlinkForm
@@ -38,14 +38,16 @@ import { ExecutedLookups } from '../types/form';
  * @returns
  * @group Hooks
  */
-export default function useFormSubmissionState(form: FormTypes.Form, initialSubmission?: SubmissionTypes.S3SubmissionData['submission'], lastElementUpdated?: FormTypes.FormElement): [{
+export default function useFormSubmissionState(form: FormTypes.Form, initialSubmission?: SubmissionTypes.S3SubmissionData['submission'], lastElementUpdated?: FormTypes.FormElement, sectionState?: SectionState): [{
     definition: FormTypes.Form;
     submission: SubmissionTypes.S3SubmissionData["submission"];
     lastElementUpdated: FormTypes.FormElement | undefined;
     executedLookups: ExecutedLookups;
+    sectionState: SectionState | undefined;
 }, React.Dispatch<React.SetStateAction<{
     definition: FormTypes.Form;
     submission: SubmissionTypes.S3SubmissionData["submission"];
     lastElementUpdated: FormTypes.FormElement | undefined;
     executedLookups: ExecutedLookups;
+    sectionState: SectionState | undefined;
 }>>];

package/dist/hooks/useFormSubmissionState.js

@@ -38,7 +38,7 @@ import generateDefaultData from '../services/generate-default-data';
  * @returns
  * @group Hooks
  */
-export default function useFormSubmissionState(form, initialSubmission, lastElementUpdated) {
+export default function useFormSubmissionState(form, initialSubmission, lastElementUpdated, sectionState) {
     return React.useState(() => {
         const definition = _cloneDeep(form);
         const defaultData = generateDefaultData(definition.elements, initialSubmission || {});
@@ -47,6 +47,7 @@ export default function useFormSubmissionState(form, initialSubmission, lastElem
             submission: defaultData,
             lastElementUpdated,
             executedLookups: {},
+            sectionState,
         };
     });
 }

package/dist/hooks/useFormSubmissionState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormSubmissionState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,IAAoB,EACpB,iBAAkE,EAClE,kBAA0C;IAE1C,OAAO,KAAK,CAAC,QAAQ,CAKlB,GAAG,EAAE;QACN,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QACnC,MAAM,WAAW,GAAG,mBAAmB,CACrC,UAAU,CAAC,QAAQ,EACnB,iBAAiB,IAAI,EAAE,CACxB,CAAA;QACD,OAAO;YACL,UAAU;YACV,UAAU,EAAE,WAAW;YACvB,kBAAkB;YAClB,eAAe,EAAE,EAAE;SACpB,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import * as React from 'react'\nimport _cloneDeep from 'lodash.clonedeep'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport generateDefaultData from '../services/generate-default-data'\nimport { ExecutedLookups } from '../types/form'\n/**\n * This function is a simple wrapper around the react hook `useState()`. The\n * results can be passed to the [`<OneBlinkForm\n * />`](https://oneblink.github.io/apps-react/somewhere) //TODO: Fix link\n * component.\n *\n * ## Example\n *\n * ```js\n * import {\n *   useFormSubmissionState,\n *   OneBlinkFormControlled,\n * } from '@oneblink/apps-react'\n *\n * function Uncontrolled({ form, initialSubmission, ...props }) {\n *   const [{ definition, submission }, setFormSubmission] =\n *     useFormSubmissionState(form, initialSubmission)\n *\n *   return (\n *     <OneBlinkFormControlled\n *       {...props}\n *       definition={definition}\n *       submission={submission}\n *       setFormSubmission={setFormSubmission}\n *       lastElementUpdated={lastElementUpdated}\n *     />\n *   )\n * }\n * ```\n *\n * @param form The OneBlink Form to render\n * @param initialSubmission The initial submission data to populate the form\n *   with\n * @param lastElementUpdated\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionState(\n  form: FormTypes.Form,\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission'],\n  lastElementUpdated?: FormTypes.FormElement,\n) {\n  return React.useState<{\n    definition: FormTypes.Form\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n  }>(() => {\n    const definition = _cloneDeep(form)\n    const defaultData = generateDefaultData(\n      definition.elements,\n      initialSubmission || {},\n    )\n    return {\n      definition,\n      submission: defaultData,\n      lastElementUpdated,\n      executedLookups: {},\n    }\n  })\n}\n"]}
+{"version":3,"file":"useFormSubmissionState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,IAAoB,EACpB,iBAAkE,EAClE,kBAA0C,EAC1C,YAA2B;IAE3B,OAAO,KAAK,CAAC,QAAQ,CAMlB,GAAG,EAAE;QACN,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QACnC,MAAM,WAAW,GAAG,mBAAmB,CACrC,UAAU,CAAC,QAAQ,EACnB,iBAAiB,IAAI,EAAE,CACxB,CAAA;QACD,OAAO;YACL,UAAU;YACV,UAAU,EAAE,WAAW;YACvB,kBAAkB;YAClB,eAAe,EAAE,EAAE;YACnB,YAAY;SACb,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import * as React from 'react'\nimport _cloneDeep from 'lodash.clonedeep'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport generateDefaultData from '../services/generate-default-data'\nimport { ExecutedLookups, SectionState } from '../types/form'\n/**\n * This function is a simple wrapper around the react hook `useState()`. The\n * results can be passed to the [`<OneBlinkForm\n * />`](https://oneblink.github.io/apps-react/somewhere) //TODO: Fix link\n * component.\n *\n * ## Example\n *\n * ```js\n * import {\n *   useFormSubmissionState,\n *   OneBlinkFormControlled,\n * } from '@oneblink/apps-react'\n *\n * function Uncontrolled({ form, initialSubmission, ...props }) {\n *   const [{ definition, submission }, setFormSubmission] =\n *     useFormSubmissionState(form, initialSubmission)\n *\n *   return (\n *     <OneBlinkFormControlled\n *       {...props}\n *       definition={definition}\n *       submission={submission}\n *       setFormSubmission={setFormSubmission}\n *       lastElementUpdated={lastElementUpdated}\n *     />\n *   )\n * }\n * ```\n *\n * @param form The OneBlink Form to render\n * @param initialSubmission The initial submission data to populate the form\n *   with\n * @param lastElementUpdated\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionState(\n  form: FormTypes.Form,\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission'],\n  lastElementUpdated?: FormTypes.FormElement,\n  sectionState?: SectionState,\n) {\n  return React.useState<{\n    definition: FormTypes.Form\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n    sectionState: SectionState | undefined\n  }>(() => {\n    const definition = _cloneDeep(form)\n    const defaultData = generateDefaultData(\n      definition.elements,\n      initialSubmission || {},\n    )\n    return {\n      definition,\n      submission: defaultData,\n      lastElementUpdated,\n      executedLookups: {},\n      sectionState,\n    }\n  })\n}\n"]}

package/dist/hooks/useLookups.js

@@ -58,6 +58,7 @@ export default function useLookups(formId, setFormSubmission) {
                     ...currentFormSubmission.executedLookups,
                     [element.name]: true,
                 },
+                sectionState: currentFormSubmission.sectionState,
             };
         });
     }, [formId, setFormSubmission]);

package/dist/hooks/useLookups.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLookups.js","sourceRoot":"","sources":["../../src/hooks/useLookups.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\n\nimport generateDefaultData from '../services/generate-default-data'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { SetFormSubmission } from '../types/form'\n\nexport default function useLookups(\n  formId: number,\n  setFormSubmission: SetFormSubmission,\n) {\n  const handlePagesLookupResult = React.useCallback(\n    (\n      element: FormTypes.LookupFormElement,\n      elementLookupData: FormTypes.PageElement[],\n      dataLookupResult?: SubmissionTypes.S3SubmissionData['submission'],\n    ) => {\n      const newPageElements = elementLookupData.map((e) => ({\n        ...e,\n        injectedByElementId: element.id,\n      }))\n      setFormSubmission((currentFormSubmission) => {\n        const definition: FormTypes.Form = {\n          ...currentFormSubmission.definition,\n          isMultiPage: true,\n        }\n        if (!currentFormSubmission.definition.isMultiPage) {\n          definition.elements = [\n            {\n              id: formId.toString(),\n              type: 'page',\n              label: 'Page 1',\n              elements: currentFormSubmission.definition.elements,\n              conditionallyShow: false,\n              requiresAllConditionallyShowPredicates: false,\n            },\n            ...newPageElements,\n          ]\n        } else {\n          const indexOfPage =\n            currentFormSubmission.definition.elements.findIndex(\n              (pageElement: FormTypes.FormElement) => {\n                if (pageElement.type === 'page') {\n                  return formElementsService.findFormElement(\n                    pageElement.elements,\n                    (el) => el.id === element.id,\n                  )\n                }\n              },\n            )\n          if (indexOfPage === -1) {\n            return currentFormSubmission\n          }\n          definition.elements =\n            currentFormSubmission.definition.elements.reduce(\n              (\n                partialPageElements: FormTypes.FormElement[],\n                pageElement: FormTypes.FormElement,\n                index: number,\n              ) => {\n                // @ts-expect-error Sorry typescript, we need to add a property you don't approve of :(\n                if (pageElement.injectedByElementId !== element.id) {\n                  partialPageElements.push(pageElement)\n                }\n                if (index === indexOfPage) {\n                  partialPageElements.push(...newPageElements)\n                }\n                return partialPageElements\n              },\n              [],\n            )\n        }\n\n        const submission = generateDefaultData(definition.elements, {\n          ...currentFormSubmission.submission,\n          ...dataLookupResult,\n        })\n        return {\n          submission,\n          definition,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n          executedLookups: {\n            ...currentFormSubmission.executedLookups,\n            [element.name]: true,\n          },\n        }\n      })\n    },\n    [formId, setFormSubmission],\n  )\n\n  return {\n    handlePagesLookupResult,\n  }\n}\n"]}
+{"version":3,"file":"useLookups.js","sourceRoot":"","sources":["../../src/hooks/useLookups.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\n\nimport generateDefaultData from '../services/generate-default-data'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { SetFormSubmission } from '../types/form'\n\nexport default function useLookups(\n  formId: number,\n  setFormSubmission: SetFormSubmission,\n) {\n  const handlePagesLookupResult = React.useCallback(\n    (\n      element: FormTypes.LookupFormElement,\n      elementLookupData: FormTypes.PageElement[],\n      dataLookupResult?: SubmissionTypes.S3SubmissionData['submission'],\n    ) => {\n      const newPageElements = elementLookupData.map((e) => ({\n        ...e,\n        injectedByElementId: element.id,\n      }))\n      setFormSubmission((currentFormSubmission) => {\n        const definition: FormTypes.Form = {\n          ...currentFormSubmission.definition,\n          isMultiPage: true,\n        }\n        if (!currentFormSubmission.definition.isMultiPage) {\n          definition.elements = [\n            {\n              id: formId.toString(),\n              type: 'page',\n              label: 'Page 1',\n              elements: currentFormSubmission.definition.elements,\n              conditionallyShow: false,\n              requiresAllConditionallyShowPredicates: false,\n            },\n            ...newPageElements,\n          ]\n        } else {\n          const indexOfPage =\n            currentFormSubmission.definition.elements.findIndex(\n              (pageElement: FormTypes.FormElement) => {\n                if (pageElement.type === 'page') {\n                  return formElementsService.findFormElement(\n                    pageElement.elements,\n                    (el) => el.id === element.id,\n                  )\n                }\n              },\n            )\n          if (indexOfPage === -1) {\n            return currentFormSubmission\n          }\n          definition.elements =\n            currentFormSubmission.definition.elements.reduce(\n              (\n                partialPageElements: FormTypes.FormElement[],\n                pageElement: FormTypes.FormElement,\n                index: number,\n              ) => {\n                // @ts-expect-error Sorry typescript, we need to add a property you don't approve of :(\n                if (pageElement.injectedByElementId !== element.id) {\n                  partialPageElements.push(pageElement)\n                }\n                if (index === indexOfPage) {\n                  partialPageElements.push(...newPageElements)\n                }\n                return partialPageElements\n              },\n              [],\n            )\n        }\n\n        const submission = generateDefaultData(definition.elements, {\n          ...currentFormSubmission.submission,\n          ...dataLookupResult,\n        })\n        return {\n          submission,\n          definition,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n          executedLookups: {\n            ...currentFormSubmission.executedLookups,\n            [element.name]: true,\n          },\n          sectionState: currentFormSubmission.sectionState,\n        }\n      })\n    },\n    [formId, setFormSubmission],\n  )\n\n  return {\n    handlePagesLookupResult,\n  }\n}\n"]}

package/dist/services/form-validation/extensions.js

@@ -57,16 +57,11 @@ const validationExtensions = {
     },
     nestedElements(value, { formElement, formElements, formElementsConditionallyShown, executedLookups, captchaType, isOffline, }) {
         if (formElements) {
-            const executedLookupsValue = executedLookups !== undefined &&
+            const nestedExecutedLookupsValue = executedLookups !== undefined &&
                 typeof executedLookups !== 'boolean' &&
                 !Array.isArray(executedLookups)
                 ? executedLookups[formElement.name]
                 : {};
-            const nestedExecutedLookups = executedLookupsValue !== undefined &&
-                typeof executedLookupsValue !== 'boolean' &&
-                !Array.isArray(executedLookupsValue)
-                ? executedLookupsValue[formElement.name]
-                : {};
             const formElementConditionallyShown = formElementsConditionallyShown === null || formElementsConditionallyShown === void 0 ? void 0 : formElementsConditionallyShown[formElement.name];
             const errors = validateSubmission({
                 elements: formElements,
@@ -74,9 +69,9 @@ const validationExtensions = {
                 formElementsConditionallyShown: (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElements'
                     ? formElementConditionallyShown.formElements
                     : undefined,
-                executedLookups: typeof nestedExecutedLookups !== 'boolean' &&
-                    !Array.isArray(nestedExecutedLookups)
-                    ? nestedExecutedLookups
+                executedLookups: typeof nestedExecutedLookupsValue !== 'boolean' &&
+                    !Array.isArray(nestedExecutedLookupsValue)
+                    ? nestedExecutedLookupsValue
                     : {},
                 captchaType,
                 isOffline,

package/dist/services/form-validation/extensions.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.js","sourceRoot":"","sources":["../../../src/services/form-validation/extensions.ts"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,EACL,+BAA+B,EAC/B,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAG9C,MAAM,oBAAoB,GAAG;IAC3B,OAAO,CAAC,EACN,eAAe,EACf,WAAW,GAIZ;QACC,IAAI,CAAC,WAAW,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;YAC9D,OAAO,EAAE,CAAA;QACX,CAAC;QAED,0DAA0D;QAC1D,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;YACzC,OAAO,EAAE,CAAA;QACX,CAAC;QAED,MAAM,sBAAsB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,WAAW,CAAC,IAAI,CAAC,CAAA;QAClE,IAAI,sBAAsB,KAAK,IAAI,EAAE,CAAC;YACpC,OAAO,EAAE,CAAA;QACX,CAAC;QAED,OAAO,CAAC,+BAA+B,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,QAAQ,CACN,KAAc,EACd,EAAE,QAAQ,EAAE,eAAe,EAAiC,EAC5D,OAAe;QAEf,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,OAAO,EAAE,eAAe,IAAI,OAAO;aACpC,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,KAAK,CACH,KAAc,EACd,WAAyD;QAEzD,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;YAC7B,OAAO,UAAU,CAAC,eAAe,CAAC,KAAK,EAAE;gBACvC,OAAO,EAAE,WAAW,CAAC,YAAY;gBACjC,KAAK,EAAE,WAAW,CAAC,UAAU;gBAC7B,OAAO,EAAE,WAAW,CAAC,YAAY;aAClC,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,UAAU,CAAC,KAAc;QACvB,MAAM,eAAe,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACnD,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;QACvC,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,WAAW,CACT,KAGa;QAEb,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;QACD,OAAO,mBAAmB,CACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAoD,CAC5D,CAAA;IACH,CAAC;IAED,WAAW,CAAC,KAAc,EAAE,WAAoC;QAC9D,IACE,WAAW,CAAC,YAAY;YACxB,OAAO,KAAK,KAAK,QAAQ;YACzB,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EACpB,CAAC;YACD,OAAO,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,CAAA;QAClE,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,cAAc,CACZ,KAAc,EACd,EACE,WAAW,EACX,YAAY,EACZ,8BAA8B,EAC9B,eAAe,EACf,WAAW,EACX,SAAS,GAQV;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,oBAAoB,GACxB,eAAe,KAAK,SAAS;gBAC7B,OAAO,eAAe,KAAK,SAAS;gBACpC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;gBAC7B,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAA;YACR,MAAM,qBAAqB,GACzB,oBAAoB,KAAK,SAAS;gBAClC,OAAO,oBAAoB,KAAK,SAAS;gBACzC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC;gBAClC,CAAC,CAAC,oBAAoB,CAAC,WAAW,CAAC,IAAI,CAAC;gBACxC,CAAC,CAAC,EAAE,CAAA;YACR,MAAM,6BAA6B,GACjC,8BAA8B,aAA9B,8BAA8B,uBAA9B,8BAA8B,CAAG,WAAW,CAAC,IAAI,CAAC,CAAA;YACpD,MAAM,MAAM,GAAG,kBAAkB,CAAC;gBAChC,QAAQ,EAAE,YAA+C;gBACzD,UAAU,EAAE,KAAuD;gBACnE,8BAA8B,EAC5B,CAAA,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,IAAI,MAAK,cAAc;oBACpD,CAAC,CAAC,6BAA6B,CAAC,YAAY;oBAC5C,CAAC,CAAC,SAAS;gBACf,eAAe,EACb,OAAO,qBAAqB,KAAK,SAAS;oBAC1C,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC;oBACnC,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,EAAE;gBACR,WAAW;gBACX,SAAS;aACV,CAAC,CAAA;YACF,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO;oBACL,IAAI,EAAE,cAAuB;oBAC7B,YAAY,EAAE,MAAM;iBACrB,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,CAAC,SAAkB,EAAE,OAAe;QACzC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnC,CAAC;CACF,CAAA;AAED,eAAe,oBAAoB,CAAA","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementBinaryStorageValue } from '../../types/attachments'\nimport {\n  CaptchaType,\n  ExecutedLookups,\n  FormElementsConditionallyShown,\n} from '../../types/form'\nimport validateSubmission from './validateSubmission'\nimport {\n  generateLookupValidationMessage,\n  getInvalidAttachment,\n  validateAttachments,\n} from './validators'\nimport { validators } from './validate-dot-js'\nimport { Value as FormElementComplianceValue } from '../../form-elements/FormElementCompliance'\n\nconst validationExtensions = {\n  lookups({\n    executedLookups,\n    formElement,\n  }: {\n    formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired\n    executedLookups: ExecutedLookups\n  }): string[] {\n    if (!formElement.isDataLookup && !formElement.isElementLookup) {\n      return []\n    }\n\n    // Lookups must only be executed on required form elements\n    if (formElement && !formElement.required) {\n      return []\n    }\n\n    const elementExecutedLookups = executedLookups?.[formElement.name]\n    if (elementExecutedLookups === true) {\n      return []\n    }\n\n    return [generateLookupValidationMessage(formElement.lookupButton)]\n  },\n\n  presence(\n    value: unknown,\n    { required, requiredMessage }: FormTypes.FormElementRequired,\n    message: string,\n  ) {\n    if (required) {\n      return validators.presence(value, {\n        message: requiredMessage || message,\n      })\n    }\n    return []\n  },\n\n  regex<DefaultValue>(\n    value: unknown,\n    formElement: FormTypes.FormElementWithInput<DefaultValue>,\n  ) {\n    if (formElement.regexPattern) {\n      return validators.regexValidation(value, {\n        pattern: formElement.regexPattern,\n        flags: formElement.regexFlags,\n        message: formElement.regexMessage,\n      })\n    }\n    return []\n  },\n\n  attachment(value: unknown): string[] {\n    const attachmentError = getInvalidAttachment(value)\n    if (attachmentError) {\n      return [attachmentError.errorMessage]\n    }\n    return []\n  },\n\n  attachments(\n    value:\n      | FormElementBinaryStorageValue[]\n      | FormElementComplianceValue\n      | undefined,\n  ) {\n    if (Array.isArray(value)) {\n      return validateAttachments(value)\n    }\n    return validateAttachments(\n      value?.files as FormElementBinaryStorageValue[] | undefined,\n    )\n  },\n\n  numberRegex(value: unknown, formElement: FormTypes.NumberElement) {\n    if (\n      formElement.regexPattern &&\n      typeof value === 'number' &&\n      !Number.isNaN(value)\n    ) {\n      return validationExtensions.regex(value.toString(), formElement)\n    }\n    return []\n  },\n\n  nestedElements(\n    value: unknown,\n    {\n      formElement,\n      formElements,\n      formElementsConditionallyShown,\n      executedLookups,\n      captchaType,\n      isOffline,\n    }: {\n      formElement: FormTypes.FormElementWithName\n      formElements: FormTypes.FormElementWithName[] | undefined\n      formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n      executedLookups: ExecutedLookups\n      captchaType: CaptchaType\n      isOffline: boolean\n    },\n  ) {\n    if (formElements) {\n      const executedLookupsValue =\n        executedLookups !== undefined &&\n        typeof executedLookups !== 'boolean' &&\n        !Array.isArray(executedLookups)\n          ? executedLookups[formElement.name]\n          : {}\n      const nestedExecutedLookups =\n        executedLookupsValue !== undefined &&\n        typeof executedLookupsValue !== 'boolean' &&\n        !Array.isArray(executedLookupsValue)\n          ? executedLookupsValue[formElement.name]\n          : {}\n      const formElementConditionallyShown =\n        formElementsConditionallyShown?.[formElement.name]\n      const errors = validateSubmission({\n        elements: formElements as FormTypes.FormElementWithName[],\n        submission: value as SubmissionTypes.S3SubmissionData['submission'],\n        formElementsConditionallyShown:\n          formElementConditionallyShown?.type === 'formElements'\n            ? formElementConditionallyShown.formElements\n            : undefined,\n        executedLookups:\n          typeof nestedExecutedLookups !== 'boolean' &&\n          !Array.isArray(nestedExecutedLookups)\n            ? nestedExecutedLookups\n            : {},\n        captchaType,\n        isOffline,\n      })\n      if (errors) {\n        return {\n          type: 'formElements' as const,\n          formElements: errors,\n        }\n      }\n    }\n  },\n\n  offline(isOffline: boolean, message: string) {\n    return isOffline ? [message] : []\n  },\n}\n\nexport default validationExtensions\n"]}
+{"version":3,"file":"extensions.js","sourceRoot":"","sources":["../../../src/services/form-validation/extensions.ts"],"names":[],"mappings":"AAOA,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,EACL,+BAA+B,EAC/B,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAG9C,MAAM,oBAAoB,GAAG;IAC3B,OAAO,CAAC,EACN,eAAe,EACf,WAAW,GAIZ;QACC,IAAI,CAAC,WAAW,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;YAC9D,OAAO,EAAE,CAAA;QACX,CAAC;QAED,0DAA0D;QAC1D,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;YACzC,OAAO,EAAE,CAAA;QACX,CAAC;QAED,MAAM,sBAAsB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,WAAW,CAAC,IAAI,CAAC,CAAA;QAClE,IAAI,sBAAsB,KAAK,IAAI,EAAE,CAAC;YACpC,OAAO,EAAE,CAAA;QACX,CAAC;QAED,OAAO,CAAC,+BAA+B,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,QAAQ,CACN,KAAc,EACd,EAAE,QAAQ,EAAE,eAAe,EAAiC,EAC5D,OAAe;QAEf,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAChC,OAAO,EAAE,eAAe,IAAI,OAAO;aACpC,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,KAAK,CACH,KAAc,EACd,WAAyD;QAEzD,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;YAC7B,OAAO,UAAU,CAAC,eAAe,CAAC,KAAK,EAAE;gBACvC,OAAO,EAAE,WAAW,CAAC,YAAY;gBACjC,KAAK,EAAE,WAAW,CAAC,UAAU;gBAC7B,OAAO,EAAE,WAAW,CAAC,YAAY;aAClC,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,UAAU,CAAC,KAAc;QACvB,MAAM,eAAe,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACnD,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;QACvC,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,WAAW,CACT,KAGa;QAEb,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;QACD,OAAO,mBAAmB,CACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAoD,CAC5D,CAAA;IACH,CAAC;IAED,WAAW,CAAC,KAAc,EAAE,WAAoC;QAC9D,IACE,WAAW,CAAC,YAAY;YACxB,OAAO,KAAK,KAAK,QAAQ;YACzB,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EACpB,CAAC;YACD,OAAO,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,CAAA;QAClE,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,cAAc,CACZ,KAAc,EACd,EACE,WAAW,EACX,YAAY,EACZ,8BAA8B,EAC9B,eAAe,EACf,WAAW,EACX,SAAS,GAQV;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,0BAA0B,GAC9B,eAAe,KAAK,SAAS;gBAC7B,OAAO,eAAe,KAAK,SAAS;gBACpC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;gBAC7B,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAA;YAER,MAAM,6BAA6B,GACjC,8BAA8B,aAA9B,8BAA8B,uBAA9B,8BAA8B,CAAG,WAAW,CAAC,IAAI,CAAC,CAAA;YACpD,MAAM,MAAM,GAAG,kBAAkB,CAAC;gBAChC,QAAQ,EAAE,YAA+C;gBACzD,UAAU,EAAE,KAAuD;gBACnE,8BAA8B,EAC5B,CAAA,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,IAAI,MAAK,cAAc;oBACpD,CAAC,CAAC,6BAA6B,CAAC,YAAY;oBAC5C,CAAC,CAAC,SAAS;gBACf,eAAe,EACb,OAAO,0BAA0B,KAAK,SAAS;oBAC/C,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B,CAAC;oBACxC,CAAC,CAAC,0BAA0B;oBAC5B,CAAC,CAAC,EAAE;gBACR,WAAW;gBACX,SAAS;aACV,CAAC,CAAA;YACF,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO;oBACL,IAAI,EAAE,cAAuB;oBAC7B,YAAY,EAAE,MAAM;iBACrB,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,CAAC,SAAkB,EAAE,OAAe;QACzC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnC,CAAC;CACF,CAAA;AAED,eAAe,oBAAoB,CAAA","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementBinaryStorageValue } from '../../types/attachments'\nimport {\n  CaptchaType,\n  ExecutedLookups,\n  FormElementsConditionallyShown,\n} from '../../types/form'\nimport validateSubmission from './validateSubmission'\nimport {\n  generateLookupValidationMessage,\n  getInvalidAttachment,\n  validateAttachments,\n} from './validators'\nimport { validators } from './validate-dot-js'\nimport { Value as FormElementComplianceValue } from '../../form-elements/FormElementCompliance'\n\nconst validationExtensions = {\n  lookups({\n    executedLookups,\n    formElement,\n  }: {\n    formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired\n    executedLookups: ExecutedLookups\n  }): string[] {\n    if (!formElement.isDataLookup && !formElement.isElementLookup) {\n      return []\n    }\n\n    // Lookups must only be executed on required form elements\n    if (formElement && !formElement.required) {\n      return []\n    }\n\n    const elementExecutedLookups = executedLookups?.[formElement.name]\n    if (elementExecutedLookups === true) {\n      return []\n    }\n\n    return [generateLookupValidationMessage(formElement.lookupButton)]\n  },\n\n  presence(\n    value: unknown,\n    { required, requiredMessage }: FormTypes.FormElementRequired,\n    message: string,\n  ) {\n    if (required) {\n      return validators.presence(value, {\n        message: requiredMessage || message,\n      })\n    }\n    return []\n  },\n\n  regex<DefaultValue>(\n    value: unknown,\n    formElement: FormTypes.FormElementWithInput<DefaultValue>,\n  ) {\n    if (formElement.regexPattern) {\n      return validators.regexValidation(value, {\n        pattern: formElement.regexPattern,\n        flags: formElement.regexFlags,\n        message: formElement.regexMessage,\n      })\n    }\n    return []\n  },\n\n  attachment(value: unknown): string[] {\n    const attachmentError = getInvalidAttachment(value)\n    if (attachmentError) {\n      return [attachmentError.errorMessage]\n    }\n    return []\n  },\n\n  attachments(\n    value:\n      | FormElementBinaryStorageValue[]\n      | FormElementComplianceValue\n      | undefined,\n  ) {\n    if (Array.isArray(value)) {\n      return validateAttachments(value)\n    }\n    return validateAttachments(\n      value?.files as FormElementBinaryStorageValue[] | undefined,\n    )\n  },\n\n  numberRegex(value: unknown, formElement: FormTypes.NumberElement) {\n    if (\n      formElement.regexPattern &&\n      typeof value === 'number' &&\n      !Number.isNaN(value)\n    ) {\n      return validationExtensions.regex(value.toString(), formElement)\n    }\n    return []\n  },\n\n  nestedElements(\n    value: unknown,\n    {\n      formElement,\n      formElements,\n      formElementsConditionallyShown,\n      executedLookups,\n      captchaType,\n      isOffline,\n    }: {\n      formElement: FormTypes.FormElementWithName\n      formElements: FormTypes.FormElementWithName[] | undefined\n      formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n      executedLookups: ExecutedLookups\n      captchaType: CaptchaType\n      isOffline: boolean\n    },\n  ) {\n    if (formElements) {\n      const nestedExecutedLookupsValue =\n        executedLookups !== undefined &&\n        typeof executedLookups !== 'boolean' &&\n        !Array.isArray(executedLookups)\n          ? executedLookups[formElement.name]\n          : {}\n\n      const formElementConditionallyShown =\n        formElementsConditionallyShown?.[formElement.name]\n      const errors = validateSubmission({\n        elements: formElements as FormTypes.FormElementWithName[],\n        submission: value as SubmissionTypes.S3SubmissionData['submission'],\n        formElementsConditionallyShown:\n          formElementConditionallyShown?.type === 'formElements'\n            ? formElementConditionallyShown.formElements\n            : undefined,\n        executedLookups:\n          typeof nestedExecutedLookupsValue !== 'boolean' &&\n          !Array.isArray(nestedExecutedLookupsValue)\n            ? nestedExecutedLookupsValue\n            : {},\n        captchaType,\n        isOffline,\n      })\n      if (errors) {\n        return {\n          type: 'formElements' as const,\n          formElements: errors,\n        }\n      }\n    }\n  },\n\n  offline(isOffline: boolean, message: string) {\n    return isOffline ? [message] : []\n  },\n}\n\nexport default validationExtensions\n"]}

package/dist/styles/modal.scss

@@ -17,7 +17,9 @@
 
 .modal-background-faded {
   @extend .modal-background;
-  opacity: 0.2;
+  opacity: 0.5;
+  // we want this to be black black not what bulma might consider to be black
+  background-color: #000000;
 }
 
 .modal-card {

package/dist/styles.css

@@ -7930,7 +7930,8 @@ button on-loading {
 }
 
 .modal-background-faded {
-  opacity: 0.2;
+  opacity: 0.5;
+  background-color: #000000;
 }
 
 .modal-card {

package/dist/types/form.d.ts

@@ -1,4 +1,5 @@
 import { FormTypes, SubmissionTypes, IntegrationTypes } from '@oneblink/types';
+import { NewS3SubmissionData } from '@oneblink/types/typescript/submissions';
 export { FormElementConditionallyShownElement, FormElementConditionallyShown, FormElementsConditionallyShown, } from '@oneblink/sdk-core/dist/conditionalLogicService';
 export type FormElementKey = string;
 export type RepeatableSetEntryIndex = string;
@@ -15,19 +16,23 @@ export type ExecutedLookups = {
     [elementName: string]: boolean | ExecutedLookups | ExecutedLookups[] | undefined;
 } | undefined;
 export type ExecutedLookupValue = NonNullable<ExecutedLookups>[string];
-type ValueChangeHandler<U extends Record<string, unknown>> = (element: FormTypes.FormElement, opts: U) => void;
+type ValueChangeHandler<U extends Record<string, unknown>> = (element: FormTypes.FormElement, opts: U, idPrefix?: string) => void;
 export type FormElementValueChangeHandler<T = unknown> = ValueChangeHandler<{
     value?: T | ((existingValue?: T) => T | undefined);
 }>;
+export type SectionState = NewS3SubmissionData['sectionState'];
 export type NestedFormElementValueChangeHandler<T = unknown> = ValueChangeHandler<{
     value?: T | ((existingValue?: T) => T | undefined);
     executedLookups: ExecutedLookupValue | ((currentExecutedLookups: ExecutedLookupValue) => ExecutedLookupValue);
+    deleteSection?: boolean;
+    sectionState: SectionState | ((currentSectionState: SectionState) => SectionState);
 }>;
 export type FormElementLookupHandler = (setter: (data: {
     submission: SubmissionTypes.S3SubmissionData['submission'];
     elements: FormTypes.FormElement[];
     lastElementUpdated: FormTypes.FormElement | undefined;
     executedLookups: ExecutedLookups;
+    sectionState: SectionState | undefined;
 }) => {
     submission: SubmissionTypes.S3SubmissionData['submission'];
     elements: FormTypes.FormElement[];
@@ -39,6 +44,7 @@ export type SetFormSubmission = React.Dispatch<React.SetStateAction<{
     submission: SubmissionTypes.S3SubmissionData['submission'];
     lastElementUpdated: FormTypes.FormElement | undefined;
     executedLookups: ExecutedLookups;
+    sectionState: SectionState | undefined;
 }>>;
 export type IsDirtyProps = {
     isDirty: boolean;

package/dist/types/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"","sourcesContent":["import { FormTypes, SubmissionTypes, IntegrationTypes } from '@oneblink/types'\n\nexport {\n  FormElementConditionallyShownElement,\n  FormElementConditionallyShown,\n  FormElementsConditionallyShown,\n} from '@oneblink/sdk-core/dist/conditionalLogicService'\n\nexport type FormElementKey = string\nexport type RepeatableSetEntryIndex = string\n\nexport type FormElementsValidation = Record<\n  FormElementKey,\n  FormElementValidation\n>\n\nexport type FormElementValidation =\n  | undefined\n  | string\n  | {\n      type: 'formElements'\n      formElements: FormElementsValidation | undefined\n    }\n  | {\n      type: 'repeatableSet'\n      set: string | undefined\n      entries: Record<\n        RepeatableSetEntryIndex,\n        FormElementsValidation | undefined\n      >\n    }\n\nexport type ExecutedLookups =\n  | {\n      [elementName: string]:\n        | boolean\n        | ExecutedLookups\n        | ExecutedLookups[]\n        | undefined\n    }\n  | undefined\n\nexport type ExecutedLookupValue = NonNullable<ExecutedLookups>[string]\n\ntype ValueChangeHandler<U extends Record<string, unknown>> = (\n  element: FormTypes.FormElement,\n  opts: U,\n) => void\n\nexport type FormElementValueChangeHandler<T = unknown> = ValueChangeHandler<{\n  value?: T | ((existingValue?: T) => T | undefined)\n}>\n\nexport type NestedFormElementValueChangeHandler<T = unknown> =\n  ValueChangeHandler<{\n    value?: T | ((existingValue?: T) => T | undefined)\n    executedLookups:\n      | ExecutedLookupValue\n      | ((currentExecutedLookups: ExecutedLookupValue) => ExecutedLookupValue)\n  }>\n\nexport type FormElementLookupHandler = (\n  setter: (data: {\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    elements: FormTypes.FormElement[]\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n  }) => {\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    elements: FormTypes.FormElement[]\n    executedLookups: ExecutedLookups\n  },\n) => void\nexport type UpdateFormElementsHandler = (\n  setter: (element: FormTypes.FormElement[]) => FormTypes.FormElement[],\n) => void\n\nexport type SetFormSubmission = React.Dispatch<\n  React.SetStateAction<{\n    definition: FormTypes.Form\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n  }>\n>\n\nexport type IsDirtyProps = {\n  isDirty: boolean\n  setIsDirty: () => void\n}\n\nexport type CaptchaType = NonNullable<\n  IntegrationTypes.IntegrationRecaptcha['configuration']['domains'][number]['type']\n>\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"","sourcesContent":["import { FormTypes, SubmissionTypes, IntegrationTypes } from '@oneblink/types'\nimport { NewS3SubmissionData } from '@oneblink/types/typescript/submissions'\n\nexport {\n  FormElementConditionallyShownElement,\n  FormElementConditionallyShown,\n  FormElementsConditionallyShown,\n} from '@oneblink/sdk-core/dist/conditionalLogicService'\n\nexport type FormElementKey = string\nexport type RepeatableSetEntryIndex = string\n\nexport type FormElementsValidation = Record<\n  FormElementKey,\n  FormElementValidation\n>\n\nexport type FormElementValidation =\n  | undefined\n  | string\n  | {\n      type: 'formElements'\n      formElements: FormElementsValidation | undefined\n    }\n  | {\n      type: 'repeatableSet'\n      set: string | undefined\n      entries: Record<\n        RepeatableSetEntryIndex,\n        FormElementsValidation | undefined\n      >\n    }\n\nexport type ExecutedLookups =\n  | {\n      [elementName: string]:\n        | boolean\n        | ExecutedLookups\n        | ExecutedLookups[]\n        | undefined\n    }\n  | undefined\n\nexport type ExecutedLookupValue = NonNullable<ExecutedLookups>[string]\n\ntype ValueChangeHandler<U extends Record<string, unknown>> = (\n  element: FormTypes.FormElement,\n  opts: U,\n  idPrefix?: string,\n) => void\n\nexport type FormElementValueChangeHandler<T = unknown> = ValueChangeHandler<{\n  value?: T | ((existingValue?: T) => T | undefined)\n}>\n\nexport type SectionState = NewS3SubmissionData['sectionState']\n\nexport type NestedFormElementValueChangeHandler<T = unknown> =\n  ValueChangeHandler<{\n    value?: T | ((existingValue?: T) => T | undefined)\n    executedLookups:\n      | ExecutedLookupValue\n      | ((currentExecutedLookups: ExecutedLookupValue) => ExecutedLookupValue)\n    deleteSection?: boolean\n    sectionState: SectionState | ((currentSectionState: SectionState) => SectionState)\n  }>\n\n\nexport type FormElementLookupHandler = (\n  setter: (data: {\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    elements: FormTypes.FormElement[]\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n    sectionState: SectionState | undefined\n  }) => {\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    elements: FormTypes.FormElement[]\n    executedLookups: ExecutedLookups\n  },\n) => void\n\nexport type UpdateFormElementsHandler = (\n  setter: (element: FormTypes.FormElement[]) => FormTypes.FormElement[],\n) => void\n\nexport type SetFormSubmission = React.Dispatch<\n  React.SetStateAction<{\n    definition: FormTypes.Form\n    submission: SubmissionTypes.S3SubmissionData['submission']\n    lastElementUpdated: FormTypes.FormElement | undefined\n    executedLookups: ExecutedLookups\n    sectionState: SectionState | undefined\n  }>\n>\n\nexport type IsDirtyProps = {\n  isDirty: boolean\n  setIsDirty: () => void\n}\n\nexport type CaptchaType = NonNullable<\n  IntegrationTypes.IntegrationRecaptcha['configuration']['domains'][number]['type']\n>\n"]}