@oneblink/apps-react 13.0.0-beta.1 → 13.0.0-beta.11

package/dist/components/renderer/PageFormElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageFormElements.js","sourceRoot":"","sources":["../../../src/components/renderer/PageFormElements.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport OneBlinkFormElements from './OneBlinkFormElements'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport {\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  NestedFormElementValueChangeHandler,\n  SetFormSubmission,\n  UpdateFormElementsHandler,\n  SectionState,\n} from '../../types/form'\nimport { IsPageVisibleProvider } from '../../hooks/useIsPageVisible'\n\nexport type Props = {\n  formId: number\n  isActive: boolean\n  pageElement: FormTypes.PageElement\n  displayValidationMessages: boolean\n  model: SubmissionTypes.S3SubmissionData['submission']\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  sectionState?: SectionState\n  onChange: NestedFormElementValueChangeHandler\n  setFormSubmission: SetFormSubmission\n}\n\nfunction PageFormElements({\n  formId,\n  isActive,\n  pageElement,\n  model,\n  displayValidationMessages,\n  formElementsConditionallyShown,\n  formElementsValidation,\n  sectionState,\n  onChange,\n  setFormSubmission,\n}: Props) {\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      setFormSubmission((currentFormSubmission) => {\n        if (pageElement.id === formId.toString()) {\n          const { submission, elements, executedLookups } = mergeLookupResults({\n            elements: currentFormSubmission.definition.elements,\n            submission: currentFormSubmission.submission,\n            lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            executedLookups: currentFormSubmission.executedLookups,\n            sectionState: currentFormSubmission.sectionState,\n          })\n\n          return {\n            submission,\n            definition: {\n              ...currentFormSubmission.definition,\n              elements: elements,\n            },\n            lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            executedLookups,\n            sectionState: currentFormSubmission.sectionState,\n          }\n        }\n\n        return currentFormSubmission.definition.elements.reduce<\n          typeof currentFormSubmission\n        >(\n          (memo: typeof currentFormSubmission, formElement) => {\n            if (\n              formElement.id === pageElement.id &&\n              formElement.type === 'page'\n            ) {\n              const { submission, executedLookups, elements } =\n                mergeLookupResults({\n                  elements: formElement.elements,\n                  submission: currentFormSubmission.submission,\n                  lastElementUpdated: currentFormSubmission.lastElementUpdated,\n                  executedLookups: currentFormSubmission.executedLookups,\n                  sectionState: currentFormSubmission.sectionState,\n                })\n              memo.submission = submission\n              memo.executedLookups = executedLookups\n              memo.definition.elements.push({\n                ...formElement,\n                elements,\n              })\n            } else {\n              memo.definition.elements.push(formElement)\n            }\n\n            return memo\n          },\n          {\n            ...currentFormSubmission,\n            definition: {\n              ...currentFormSubmission.definition,\n              elements: [],\n            },\n          },\n        )\n      })\n    },\n    [formId, pageElement.id, setFormSubmission],\n  )\n\n  const form = useFormDefinition()\n\n  const handleUpdateFormElements = React.useCallback<UpdateFormElementsHandler>(\n    (updateFormElements) => {\n      setFormSubmission((currentFormSubmission) => {\n        const definition = {\n          ...currentFormSubmission.definition,\n        }\n\n        if (pageElement.id === formId.toString()) {\n          definition.elements = updateFormElements(\n            currentFormSubmission.definition.elements,\n          )\n        } else {\n          definition.elements = currentFormSubmission.definition.elements.map(\n            (formElement) => {\n              if (\n                formElement.id === pageElement.id &&\n                formElement.type === 'page'\n              ) {\n                return {\n                  ...formElement,\n                  elements: updateFormElements(formElement.elements),\n                }\n              } else {\n                return formElement\n              }\n            },\n          )\n        }\n\n        return {\n          ...currentFormSubmission,\n          definition,\n        }\n      })\n    },\n    [formId, pageElement.id, setFormSubmission],\n  )\n\n  return (\n    <IsPageVisibleProvider isPageVisible={isActive}>\n      <div>\n        <div\n          id={pageElement.id}\n          key={pageElement.id}\n          className={clsx('ob-page step-content is-active cypress-page', {\n            'is-invisible': !isActive,\n          })}\n          aria-label={pageElement.label}\n          role=\"region\"\n          tabIndex={-1}\n        >\n          <OneBlinkFormElements\n            formId={formId}\n            model={model}\n            parentElement={form}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={pageElement.elements}\n            onChange={onChange}\n            onLookup={handleLookup}\n            onUpdateFormElements={handleUpdateFormElements}\n            idPrefix=\"\"\n            sectionState={sectionState}\n          />\n        </div>\n      </div>\n    </IsPageVisibleProvider>\n  )\n}\n\nexport default React.memo(PageFormElements)\n"]}
+{"version":3,"file":"PageFormElements.js","sourceRoot":"","sources":["../../../src/components/renderer/PageFormElements.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport OneBlinkFormElements from './OneBlinkFormElements'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport {\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  NestedFormElementValueChangeHandler,\n  SetFormSubmission,\n  UpdateFormElementsHandler,\n  SectionState,\n} from '../../types/form'\nimport { IsPageVisibleProvider } from '../../hooks/useIsPageVisible'\nimport { useMarkFormDirty } from '../../hooks/useFormIsDirty'\n\nexport type Props = {\n  formId: number\n  isActive: boolean\n  pageElement: FormTypes.PageElement\n  displayValidationMessages: boolean\n  model: SubmissionTypes.S3SubmissionData['submission']\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  sectionState?: SectionState\n  onChange: NestedFormElementValueChangeHandler\n  setFormSubmission: SetFormSubmission\n}\n\nfunction PageFormElements({\n  formId,\n  isActive,\n  pageElement,\n  model,\n  displayValidationMessages,\n  formElementsConditionallyShown,\n  formElementsValidation,\n  sectionState,\n  onChange,\n  setFormSubmission,\n}: Props) {\n  const markFormDirty = useMarkFormDirty()\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults, options) => {\n      if (!options?.isDerivedChange) {\n        markFormDirty()\n      }\n      setFormSubmission((currentFormSubmission) => {\n        if (pageElement.id === formId.toString()) {\n          const { submission, elements, executedLookups } = mergeLookupResults({\n            elements: currentFormSubmission.definition.elements,\n            submission: currentFormSubmission.submission,\n            lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            executedLookups: currentFormSubmission.executedLookups,\n            sectionState: currentFormSubmission.sectionState,\n          })\n\n          return {\n            submission,\n            definition: {\n              ...currentFormSubmission.definition,\n              elements: elements,\n            },\n            lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            executedLookups,\n            sectionState: currentFormSubmission.sectionState,\n          }\n        }\n\n        return currentFormSubmission.definition.elements.reduce<\n          typeof currentFormSubmission\n        >(\n          (memo: typeof currentFormSubmission, formElement) => {\n            if (\n              formElement.id === pageElement.id &&\n              formElement.type === 'page'\n            ) {\n              const { submission, executedLookups, elements } =\n                mergeLookupResults({\n                  elements: formElement.elements,\n                  submission: currentFormSubmission.submission,\n                  lastElementUpdated: currentFormSubmission.lastElementUpdated,\n                  executedLookups: currentFormSubmission.executedLookups,\n                  sectionState: currentFormSubmission.sectionState,\n                })\n              memo.submission = submission\n              memo.executedLookups = executedLookups\n              memo.definition.elements.push({\n                ...formElement,\n                elements,\n              })\n            } else {\n              memo.definition.elements.push(formElement)\n            }\n\n            return memo\n          },\n          {\n            ...currentFormSubmission,\n            definition: {\n              ...currentFormSubmission.definition,\n              elements: [],\n            },\n          },\n        )\n      }, options)\n    },\n    [formId, markFormDirty, pageElement.id, setFormSubmission],\n  )\n\n  const form = useFormDefinition()\n\n  const handleUpdateFormElements = React.useCallback<UpdateFormElementsHandler>(\n    (updateFormElements) => {\n      setFormSubmission((currentFormSubmission) => {\n        const definition = {\n          ...currentFormSubmission.definition,\n        }\n\n        if (pageElement.id === formId.toString()) {\n          definition.elements = updateFormElements(\n            currentFormSubmission.definition.elements,\n          )\n        } else {\n          definition.elements = currentFormSubmission.definition.elements.map(\n            (formElement) => {\n              if (\n                formElement.id === pageElement.id &&\n                formElement.type === 'page'\n              ) {\n                return {\n                  ...formElement,\n                  elements: updateFormElements(formElement.elements),\n                }\n              } else {\n                return formElement\n              }\n            },\n          )\n        }\n\n        return {\n          ...currentFormSubmission,\n          definition,\n        }\n      })\n    },\n    [formId, pageElement.id, setFormSubmission],\n  )\n\n  return (\n    <IsPageVisibleProvider isPageVisible={isActive}>\n      <div>\n        <div\n          id={pageElement.id}\n          key={pageElement.id}\n          className={clsx('ob-page step-content is-active cypress-page', {\n            'is-invisible': !isActive,\n          })}\n          aria-label={pageElement.label}\n          role=\"region\"\n          tabIndex={-1}\n        >\n          <OneBlinkFormElements\n            formId={formId}\n            model={model}\n            parentElement={form}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={pageElement.elements}\n            onChange={onChange}\n            onLookup={handleLookup}\n            onUpdateFormElements={handleUpdateFormElements}\n            idPrefix=\"\"\n            sectionState={sectionState}\n          />\n        </div>\n      </div>\n    </IsPageVisibleProvider>\n  )\n}\n\nexport default React.memo(PageFormElements)\n"]}

package/dist/components/renderer/ReverseGeocode.js

@@ -5,9 +5,7 @@ import { formElementsService } from '@oneblink/sdk-core';
 import { parseLocationValue } from '../../form-elements/FormElementLocation';
 import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext';
 import useFormDefinition from '../../hooks/useFormDefinition';
-import useFormIsReadOnly from '../../hooks/useFormIsReadOnly';
-import useFormAudience from '../../hooks/useFormAudience';
-import isElementReadOnlyForAudience from '../../services/isElementReadOnlyForAudience';
+import useAreLookupsDisallowed from '../../hooks/useAreLookupsDisallowed';
 const ReverseGeocodeContext = React.createContext({
     isReverseGeocoding: false,
 });
@@ -19,8 +17,7 @@ export default function ReverseGeocode({ value, element, onChange, children, })
     });
     const formDefinition = useFormDefinition();
     const formSubmissionModel = useFormSubmissionModel();
-    const formIsReadOnly = useFormIsReadOnly();
-    const audience = useFormAudience();
+    const areLookupsDisallowed = useAreLookupsDisallowed(element);
     const formattedAddressElement = React.useMemo(() => {
         var _a;
         if ((_a = element.reverseGeocoding) === null || _a === void 0 ? void 0 : _a.formattedAddressElementId) {
@@ -37,10 +34,7 @@ export default function ReverseGeocode({ value, element, onChange, children, })
         // default location to populate its formatted-address field. An
         // approver-locked location must not do so: opening a review should never
         // replace the address saved with the original submission.
-        if (formIsReadOnly ||
-            isElementReadOnlyForAudience(element, audience) ||
-            !coords ||
-            !formattedAddressElement) {
+        if (areLookupsDisallowed || !coords || !formattedAddressElement) {
             return;
         }
         const abortController = new AbortController();
@@ -59,6 +53,7 @@ export default function ReverseGeocode({ value, element, onChange, children, })
                         if ((_a = reverseGeocodeResult.addressDetails) === null || _a === void 0 ? void 0 : _a.formattedAddress) {
                             onChange(formattedAddressElement, {
                                 value: (_b = reverseGeocodeResult.addressDetails) === null || _b === void 0 ? void 0 : _b.formattedAddress,
+                                isDerivedChange: true,
                             });
                         }
                         break;
@@ -66,6 +61,7 @@ export default function ReverseGeocode({ value, element, onChange, children, })
                     case 'geoscapeAddress': {
                         onChange(formattedAddressElement, {
                             value: reverseGeocodeResult,
+                            isDerivedChange: true,
                         });
                         break;
                     }
@@ -98,12 +94,11 @@ export default function ReverseGeocode({ value, element, onChange, children, })
         effect();
         return () => abortController.abort();
     }, [
-        audience,
         coords,
         element,
         formDefinition.id,
-        formIsReadOnly,
         formattedAddressElement,
+        areLookupsDisallowed,
         onChange,
     ]);
     return (_jsx(ReverseGeocodeContext.Provider, { value: reverseGeocodingState, children: children }));

package/dist/components/renderer/ReverseGeocode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReverseGeocode.js","sourceRoot":"","sources":["../../../src/components/renderer/ReverseGeocode.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport { FormTypes, GeoscapeTypes } from '@oneblink/types'\nimport { formService, OneBlinkAppsError } from '../../apps'\nimport { formElementsService } from '@oneblink/sdk-core'\n\nimport { parseLocationValue } from '../../form-elements/FormElementLocation'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { FormElementValueChangeHandler } from '../../types/form'\nimport useFormAudience from '../../hooks/useFormAudience'\nimport isElementReadOnlyForAudience from '../../services/isElementReadOnlyForAudience'\n\ntype ReverseGeocodeContextValue = {\n  isReverseGeocoding: boolean\n  reverseGeocodingErrorMsg?: string\n}\n\nconst ReverseGeocodeContext = React.createContext<ReverseGeocodeContextValue>({\n  isReverseGeocoding: false,\n})\n\nexport default function ReverseGeocode({\n  value,\n  element,\n  onChange,\n  children,\n}: React.PropsWithChildren<{\n  value: unknown\n  element: FormTypes.LocationElement\n  onChange: FormElementValueChangeHandler<\n    GeoscapeTypes.GeoscapeAddress | string\n  >\n}>) {\n  const coords = React.useMemo(() => parseLocationValue(value), [value])\n  const [reverseGeocodingState, setReverseGeocodingState] =\n    React.useState<ReverseGeocodeContextValue>({\n      isReverseGeocoding: false,\n    })\n\n  const formDefinition = useFormDefinition()\n  const formSubmissionModel = useFormSubmissionModel()\n  const formIsReadOnly = useFormIsReadOnly()\n  const audience = useFormAudience()\n\n  const formattedAddressElement = React.useMemo(() => {\n    if (element.reverseGeocoding?.formattedAddressElementId) {\n      return formElementsService\n        .flattenFormElements(formSubmissionModel.elements)\n        .find(\n          (el) => el.id === element.reverseGeocoding?.formattedAddressElementId,\n        )\n    }\n  }, [\n    element.reverseGeocoding?.formattedAddressElementId,\n    formSubmissionModel.elements,\n  ])\n\n  React.useEffect(() => {\n    // Definition-level `readOnly` still allows a submitter's prefill or\n    // default location to populate its formatted-address field. An\n    // approver-locked location must not do so: opening a review should never\n    // replace the address saved with the original submission.\n    if (\n      formIsReadOnly ||\n      isElementReadOnlyForAudience(element, audience) ||\n      !coords ||\n      !formattedAddressElement\n    ) {\n      return\n    }\n\n    const abortController = new AbortController()\n    const effect = async () => {\n      try {\n        setReverseGeocodingState({ isReverseGeocoding: true })\n        const { reverseGeocodeResult } =\n          await formService.getGeoscapeReverseGeocoding({\n            lat: coords.latitude,\n            lng: coords.longitude,\n            formId: formDefinition.id,\n            abortSignal: abortController.signal,\n          })\n        switch (formattedAddressElement.type) {\n          case 'text': {\n            if (reverseGeocodeResult.addressDetails?.formattedAddress) {\n              onChange(formattedAddressElement, {\n                value: reverseGeocodeResult.addressDetails?.formattedAddress,\n              })\n            }\n            break\n          }\n          case 'geoscapeAddress': {\n            onChange(formattedAddressElement, {\n              value: reverseGeocodeResult,\n            })\n            break\n          }\n        }\n        setReverseGeocodingState({\n          isReverseGeocoding: false,\n        })\n      } catch (e) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Error attempting to reverse geocode location', e)\n        let errorMsg = 'Could not find your address.'\n        if (e instanceof OneBlinkAppsError) {\n          if (e.httpStatusCode !== 404) {\n            errorMsg = e.message\n          } else if (e.isOffline) {\n            errorMsg =\n              'It looks like you&apos;re offline. Please try again when connectivity is restored.'\n          }\n        }\n\n        setReverseGeocodingState({\n          isReverseGeocoding: false,\n          reverseGeocodingErrorMsg: errorMsg,\n        })\n      }\n    }\n\n    effect()\n\n    return () => abortController.abort()\n  }, [\n    audience,\n    coords,\n    element,\n    formDefinition.id,\n    formIsReadOnly,\n    formattedAddressElement,\n    onChange,\n  ])\n\n  return (\n    <ReverseGeocodeContext.Provider value={reverseGeocodingState}>\n      {children}\n    </ReverseGeocodeContext.Provider>\n  )\n}\n\nexport function useReverseGeocodeContext() {\n  const reverseGeocodeContext = React.useContext(ReverseGeocodeContext)\n  if (!reverseGeocodeContext) {\n    throw new TypeError(\n      'You have attempted to run the hook \"useReverseGeocodeContext()\" outside of the \"ReverseGeocodeContext\" context.',\n    )\n  }\n  return reverseGeocodeContext\n}\n"]}
+{"version":3,"file":"ReverseGeocode.js","sourceRoot":"","sources":["../../../src/components/renderer/ReverseGeocode.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport { FormTypes, GeoscapeTypes } from '@oneblink/types'\nimport { formService, OneBlinkAppsError } from '../../apps'\nimport { formElementsService } from '@oneblink/sdk-core'\n\nimport { parseLocationValue } from '../../form-elements/FormElementLocation'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport { FormElementValueChangeHandler } from '../../types/form'\nimport useAreLookupsDisallowed from '../../hooks/useAreLookupsDisallowed'\n\ntype ReverseGeocodeContextValue = {\n  isReverseGeocoding: boolean\n  reverseGeocodingErrorMsg?: string\n}\n\nconst ReverseGeocodeContext = React.createContext<ReverseGeocodeContextValue>({\n  isReverseGeocoding: false,\n})\n\nexport default function ReverseGeocode({\n  value,\n  element,\n  onChange,\n  children,\n}: React.PropsWithChildren<{\n  value: unknown\n  element: FormTypes.LocationElement\n  onChange: FormElementValueChangeHandler<\n    GeoscapeTypes.GeoscapeAddress | string\n  >\n}>) {\n  const coords = React.useMemo(() => parseLocationValue(value), [value])\n  const [reverseGeocodingState, setReverseGeocodingState] =\n    React.useState<ReverseGeocodeContextValue>({\n      isReverseGeocoding: false,\n    })\n\n  const formDefinition = useFormDefinition()\n  const formSubmissionModel = useFormSubmissionModel()\n  const areLookupsDisallowed = useAreLookupsDisallowed(element)\n\n  const formattedAddressElement = React.useMemo(() => {\n    if (element.reverseGeocoding?.formattedAddressElementId) {\n      return formElementsService\n        .flattenFormElements(formSubmissionModel.elements)\n        .find(\n          (el) => el.id === element.reverseGeocoding?.formattedAddressElementId,\n        )\n    }\n  }, [\n    element.reverseGeocoding?.formattedAddressElementId,\n    formSubmissionModel.elements,\n  ])\n\n  React.useEffect(() => {\n    // Definition-level `readOnly` still allows a submitter's prefill or\n    // default location to populate its formatted-address field. An\n    // approver-locked location must not do so: opening a review should never\n    // replace the address saved with the original submission.\n    if (areLookupsDisallowed || !coords || !formattedAddressElement) {\n      return\n    }\n\n    const abortController = new AbortController()\n    const effect = async () => {\n      try {\n        setReverseGeocodingState({ isReverseGeocoding: true })\n        const { reverseGeocodeResult } =\n          await formService.getGeoscapeReverseGeocoding({\n            lat: coords.latitude,\n            lng: coords.longitude,\n            formId: formDefinition.id,\n            abortSignal: abortController.signal,\n          })\n        switch (formattedAddressElement.type) {\n          case 'text': {\n            if (reverseGeocodeResult.addressDetails?.formattedAddress) {\n              onChange(formattedAddressElement, {\n                value: reverseGeocodeResult.addressDetails?.formattedAddress,\n                isDerivedChange: true,\n              })\n            }\n            break\n          }\n          case 'geoscapeAddress': {\n            onChange(formattedAddressElement, {\n              value: reverseGeocodeResult,\n              isDerivedChange: true,\n            })\n            break\n          }\n        }\n        setReverseGeocodingState({\n          isReverseGeocoding: false,\n        })\n      } catch (e) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Error attempting to reverse geocode location', e)\n        let errorMsg = 'Could not find your address.'\n        if (e instanceof OneBlinkAppsError) {\n          if (e.httpStatusCode !== 404) {\n            errorMsg = e.message\n          } else if (e.isOffline) {\n            errorMsg =\n              'It looks like you&apos;re offline. Please try again when connectivity is restored.'\n          }\n        }\n\n        setReverseGeocodingState({\n          isReverseGeocoding: false,\n          reverseGeocodingErrorMsg: errorMsg,\n        })\n      }\n    }\n\n    effect()\n\n    return () => abortController.abort()\n  }, [\n    coords,\n    element,\n    formDefinition.id,\n    formattedAddressElement,\n    areLookupsDisallowed,\n    onChange,\n  ])\n\n  return (\n    <ReverseGeocodeContext.Provider value={reverseGeocodingState}>\n      {children}\n    </ReverseGeocodeContext.Provider>\n  )\n}\n\nexport function useReverseGeocodeContext() {\n  const reverseGeocodeContext = React.useContext(ReverseGeocodeContext)\n  if (!reverseGeocodeContext) {\n    throw new TypeError(\n      'You have attempted to run the hook \"useReverseGeocodeContext()\" outside of the \"ReverseGeocodeContext\" context.',\n    )\n  }\n  return reverseGeocodeContext\n}\n"]}

package/dist/form-elements/FormElementABN.js

@@ -153,7 +153,7 @@ function FormElementABN({ id, element, readOnly, value, onChange, validationMess
                                 }, required: element.required, disabled: readOnly, onBlur: () => {
                                     setIsDirty();
                                     removeFocus();
-                                }, onFocus: setIsFocused, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) })), _jsx(LookupButton, { readOnly: readOnly, isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }) }));
+                                }, onFocus: setIsFocused, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }) }));
 }
 export default React.memo(FormElementABN);
 const ABNDisplay = ({ abnRecord, className, }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { InputMask } from '@react-input/mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.ABNElement\n  readOnly: boolean\n  value: MiscTypes.ABNRecord | undefined\n  onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementABN({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n  const [label, setLabel] = React.useState(\n    value ? abnService.getABNNumberFromABNRecord(value) || '' : '',\n  )\n  const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  React.useEffect(() => {\n    const searchString = label.replace(/[^\\d]/g, '')\n    const isSearchStringValid =\n      searchString.length === 11 || (searchString.length === 9 && !isFocused)\n\n    const currentABNNumber = value\n      ? abnService.getABNNumberFromABNRecord(value)\n      : ''\n    if (!isSearchStringValid || currentABNNumber === searchString) {\n      return\n    }\n\n    setState({\n      isLoading: true,\n      error: null,\n    })\n\n    const abortController = new AbortController()\n    const fetchRecord = async () => {\n      try {\n        const urlSearchParams = new URLSearchParams()\n        urlSearchParams.append('searchString', searchString)\n        urlSearchParams.append('includeHistoricalDetails', 'N')\n        if (abnLookupAuthenticationGuid) {\n          urlSearchParams.append(\n            'authenticationGuid',\n            abnLookupAuthenticationGuid,\n          )\n        }\n\n        const url =\n          searchString.length === 11\n            ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n            : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n        const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n          mode: 'cors',\n          signal: abortController.signal,\n        })\n        const text = await response.text()\n        if (!response.ok) {\n          throw new Error(text)\n        }\n\n        const result = await new Promise<{\n          ABRPayloadSearchResults: {\n            response: {\n              businessEntity201408?: MiscTypes.ABNRecord\n              businessEntity202001: MiscTypes.ABNRecord\n              exception?: {\n                exceptionDescription: string\n                exceptionCode: string\n              }\n            }\n          }\n        }>((resolve, reject) => {\n          parseString(\n            text,\n            {\n              explicitArray: false,\n            },\n            (err, result) => {\n              if (err) {\n                reject(err)\n              } else {\n                resolve(result)\n              }\n            },\n          )\n        })\n        if (result.ABRPayloadSearchResults.response.exception) {\n          throw new Error(\n            result.ABRPayloadSearchResults.response.exception\n              .exceptionDescription,\n          )\n        }\n\n        if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n          result.ABRPayloadSearchResults.response.businessEntity202001 =\n            result.ABRPayloadSearchResults.response.businessEntity201408\n        }\n\n        if (\n          !Array.isArray(\n            result.ABRPayloadSearchResults.response.businessEntity202001\n              .businessName,\n          )\n        ) {\n          result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n            [\n              result.ABRPayloadSearchResults.response.businessEntity202001\n                .businessName,\n            ]\n        }\n\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: result.ABRPayloadSearchResults.response.businessEntity202001,\n          })\n          setState({\n            isLoading: false,\n            error: null,\n          })\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    }\n\n    fetchRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = abnService.getABNNumberFromABNRecord(value)\n      if (!newLabel) {\n        // Record in value had no ABN Number. This should never happen\n        return\n      }\n      if (label !== newLabel) {\n        setLabel(\n          newLabel.split('').reduce((memo, character, index) => {\n            switch (index) {\n              case 2:\n              case 5:\n              case 8: {\n                return `${memo} ${character}`\n              }\n              default: {\n                return `${memo}${character}`\n              }\n            }\n          }, ''),\n        )\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-abn-element\">\n      <FormElementLabelContainer\n        className=\"ob-abn\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask={isFocused || value ? 'dd ddd ddd ddd' : 'ddd ddd ddd'}\n              replacement={{ d: /\\d/ }}\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-abn-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onBlur={() => {\n                setIsDirty()\n                removeFocus()\n              }}\n              onFocus={setIsFocused}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {value && (\n            <ABNDisplay abnRecord={value} className=\"ob-abn__display-desktop\" />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n          <LookupButton\n            readOnly={readOnly}\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </div>\n        {value && (\n          <ABNDisplay abnRecord={value} className=\"ob-abn__display-mobile\" />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={error?.message || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementABN)\n\nconst ABNDisplay = ({\n  abnRecord,\n  className,\n}: {\n  abnRecord: MiscTypes.ABNRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-abn__record-control ${className}`}>\n      <a className=\"button is-static ob-abn__record-button\">\n        {abnService.displayBusinessNameFromABNRecord(abnRecord)}\n      </a>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { InputMask } from '@react-input/mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.ABNElement\n  readOnly: boolean\n  value: MiscTypes.ABNRecord | undefined\n  onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementABN({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n  const [label, setLabel] = React.useState(\n    value ? abnService.getABNNumberFromABNRecord(value) || '' : '',\n  )\n  const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  React.useEffect(() => {\n    const searchString = label.replace(/[^\\d]/g, '')\n    const isSearchStringValid =\n      searchString.length === 11 || (searchString.length === 9 && !isFocused)\n\n    const currentABNNumber = value\n      ? abnService.getABNNumberFromABNRecord(value)\n      : ''\n    if (!isSearchStringValid || currentABNNumber === searchString) {\n      return\n    }\n\n    setState({\n      isLoading: true,\n      error: null,\n    })\n\n    const abortController = new AbortController()\n    const fetchRecord = async () => {\n      try {\n        const urlSearchParams = new URLSearchParams()\n        urlSearchParams.append('searchString', searchString)\n        urlSearchParams.append('includeHistoricalDetails', 'N')\n        if (abnLookupAuthenticationGuid) {\n          urlSearchParams.append(\n            'authenticationGuid',\n            abnLookupAuthenticationGuid,\n          )\n        }\n\n        const url =\n          searchString.length === 11\n            ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n            : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n        const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n          mode: 'cors',\n          signal: abortController.signal,\n        })\n        const text = await response.text()\n        if (!response.ok) {\n          throw new Error(text)\n        }\n\n        const result = await new Promise<{\n          ABRPayloadSearchResults: {\n            response: {\n              businessEntity201408?: MiscTypes.ABNRecord\n              businessEntity202001: MiscTypes.ABNRecord\n              exception?: {\n                exceptionDescription: string\n                exceptionCode: string\n              }\n            }\n          }\n        }>((resolve, reject) => {\n          parseString(\n            text,\n            {\n              explicitArray: false,\n            },\n            (err, result) => {\n              if (err) {\n                reject(err)\n              } else {\n                resolve(result)\n              }\n            },\n          )\n        })\n        if (result.ABRPayloadSearchResults.response.exception) {\n          throw new Error(\n            result.ABRPayloadSearchResults.response.exception\n              .exceptionDescription,\n          )\n        }\n\n        if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n          result.ABRPayloadSearchResults.response.businessEntity202001 =\n            result.ABRPayloadSearchResults.response.businessEntity201408\n        }\n\n        if (\n          !Array.isArray(\n            result.ABRPayloadSearchResults.response.businessEntity202001\n              .businessName,\n          )\n        ) {\n          result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n            [\n              result.ABRPayloadSearchResults.response.businessEntity202001\n                .businessName,\n            ]\n        }\n\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: result.ABRPayloadSearchResults.response.businessEntity202001,\n          })\n          setState({\n            isLoading: false,\n            error: null,\n          })\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    }\n\n    fetchRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = abnService.getABNNumberFromABNRecord(value)\n      if (!newLabel) {\n        // Record in value had no ABN Number. This should never happen\n        return\n      }\n      if (label !== newLabel) {\n        setLabel(\n          newLabel.split('').reduce((memo, character, index) => {\n            switch (index) {\n              case 2:\n              case 5:\n              case 8: {\n                return `${memo} ${character}`\n              }\n              default: {\n                return `${memo}${character}`\n              }\n            }\n          }, ''),\n        )\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-abn-element\">\n      <FormElementLabelContainer\n        className=\"ob-abn\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask={isFocused || value ? 'dd ddd ddd ddd' : 'ddd ddd ddd'}\n              replacement={{ d: /\\d/ }}\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-abn-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onBlur={() => {\n                setIsDirty()\n                removeFocus()\n              }}\n              onFocus={setIsFocused}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {value && (\n            <ABNDisplay abnRecord={value} className=\"ob-abn__display-desktop\" />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </div>\n        {value && (\n          <ABNDisplay abnRecord={value} className=\"ob-abn__display-mobile\" />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={error?.message || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementABN)\n\nconst ABNDisplay = ({\n  abnRecord,\n  className,\n}: {\n  abnRecord: MiscTypes.ABNRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-abn__record-control ${className}`}>\n      <a className=\"button is-static ob-abn__record-button\">\n        {abnService.displayBusinessNameFromABNRecord(abnRecord)}\n      </a>\n    </div>\n  )\n}\n"]}

package/dist/form-elements/FormElementBSB.js

@@ -101,7 +101,7 @@ function FormElementBSB({ id, formId, element, readOnly, value, onChange, valida
                                         setText('');
                                     }
                                     setIsDirty();
-                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { readOnly: readOnly, isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
+                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
 }
 const BSBDisplay = ({ bsbRecord, className, }) => {
     return (_jsx("div", { className: `control ob-bsb__record-control ${className}`, children: _jsxs("a", { className: "button is-static ob-bsb__record-button", children: [bsbRecord.financialInstitutionMnemonic, " - ", bsbRecord.name] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"xxx-xxx\"\n              replacement={{ x: /\\d/ }}\n              showMask={hasFocus}\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onFocus={setHasFocus}\n              onBlur={() => {\n                removeFocus()\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                  setText('')\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {bsbRecord && (\n            <BSBDisplay\n              bsbRecord={bsbRecord}\n              className=\"ob-bsb__display-desktop\"\n            />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            readOnly={readOnly}\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </div>\n        {bsbRecord && (\n          <BSBDisplay\n            bsbRecord={bsbRecord}\n            className=\"ob-bsb__display-mobile\"\n          />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={errorMessage || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst BSBDisplay = ({\n  bsbRecord,\n  className,\n}: {\n  bsbRecord: MiscTypes.BSBRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-bsb__record-control ${className}`}>\n      <a className=\"button is-static ob-bsb__record-button\">\n        {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n      </a>\n    </div>\n  )\n}\nexport default React.memo(FormElementBSB)\n"]}
+{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"xxx-xxx\"\n              replacement={{ x: /\\d/ }}\n              showMask={hasFocus}\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onFocus={setHasFocus}\n              onBlur={() => {\n                removeFocus()\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                  setText('')\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {bsbRecord && (\n            <BSBDisplay\n              bsbRecord={bsbRecord}\n              className=\"ob-bsb__display-desktop\"\n            />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </div>\n        {bsbRecord && (\n          <BSBDisplay\n            bsbRecord={bsbRecord}\n            className=\"ob-bsb__display-mobile\"\n          />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={errorMessage || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst BSBDisplay = ({\n  bsbRecord,\n  className,\n}: {\n  bsbRecord: MiscTypes.BSBRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-bsb__record-control ${className}`}>\n      <a className=\"button is-static ob-bsb__record-button\">\n        {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n      </a>\n    </div>\n  )\n}\nexport default React.memo(FormElementBSB)\n"]}

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -54,7 +54,7 @@ function FormElementBarcodeScanner({ id, element, readOnly, value, onChange, val
                         ? element.restrictedBarcodeTypes
                         : undefined, onScan: handleScan, onClose: stopBarcodeScanner, "aria-describedby": ariaDescribedby })) : (_jsxs("div", { children: [_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", value: text, onChange: (e) => onChange(element, {
                                                 value: e.target.value || undefined,
-                                            }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "document_scanner" }) })] }), !!readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { readOnly: readOnly, isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                                            }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "document_scanner" }) })] }), !!readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementBarcodeScanner);
 function BarcodeScannerSupported(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Html5Qrcode,\n  CameraDevice,\n  Html5QrcodeSupportedFormats,\n  Html5QrcodeCameraScanConfig,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  readOnly: boolean\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScannerSupported\n            id={`${id}==BARCODE_SCANNER`}\n            restrictedBarcodeTypes={\n              element.restrictBarcodeTypes\n                ? element.restrictedBarcodeTypes\n                : undefined\n            }\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n            aria-describedby={ariaDescribedby}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={readOnly}\n                  onBlur={setIsDirty}\n                  aria-describedby={ariaDescribedby}\n                  autoComplete={autocompleteAttributes}\n                  aria-required={element.required}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <MaterialIcon className=\"is-size-5\">\n                    document_scanner\n                  </MaterialIcon>\n                </span>\n              </div>\n              {!!readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                readOnly={readOnly}\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n                overrideRequiredMessage={undefined}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n  'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n  const { onClose } = props\n  if (!navigator.mediaDevices?.getUserMedia) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"Unsupported Device\"\n          message=\"Your device does not support accessing your camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n  const { onClose } = props\n  const [state] = useLoadDataState(Html5Qrcode.getCameras)\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <div className=\"figure-content has-text-centered\">\n            <OnLoading small />\n          </div>\n        </BarcodeScannerFigure>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <BarcodeScannerError\n            title=\"Whoops...\"\n            message={\n              state.error.name === 'NotAllowedError'\n                ? 'Cannot scan for barcodes without granting the application access to the camera.'\n                : state.error.message\n            }\n          />\n        </BarcodeScannerFigure>\n      )\n    }\n  }\n\n  if (!state.result.length) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"No Cameras Available\"\n          message=\"Your device does not have an accessible camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n  id,\n  restrictedBarcodeTypes,\n  onScan,\n  onClose,\n  cameraDevices,\n  ...props\n}: BarcodeScannerProps & {\n  cameraDevices: CameraDevice[]\n}) {\n  const formatsToSupport = React.useMemo(() => {\n    return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n      (memo, barcodeType) => {\n        const format =\n          Html5QrcodeSupportedFormats[\n            barcodeType as keyof typeof Html5QrcodeSupportedFormats\n          ]\n        if (format !== undefined) {\n          memo.push(format)\n        }\n        return memo\n      },\n      [],\n    )\n  }, [restrictedBarcodeTypes])\n\n  const [scannerState, setScannerState] = React.useState<\n    { state: 'loading' } | { state: 'ready' } | { state: 'error'; error: Error }\n  >({ state: 'loading' })\n\n  React.useEffect(() => {\n    setScannerState({ state: 'loading' })\n\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    const backFacingCamera = cameraDevices.find((device) =>\n      /back|rear|environment/i.test(device.label),\n    )\n    const preferredCamera = backFacingCamera ?? cameraDevices[0]\n    const scanConfig: Html5QrcodeCameraScanConfig = {\n      fps: 20,\n      aspectRatio: 1,\n      qrbox: (viewfinderWidth, viewfinderHeight) => {\n        const size = Math.min(\n          250,\n          Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.75),\n        )\n        return { width: size, height: size }\n      },\n    }\n\n    const onScanSuccess = (decodedText: string, decodedResult: unknown) => {\n      console.log('Barcode scanner decoded result:', decodedResult)\n      onScan(decodedText)\n    }\n    const onScanFailure = () => {\n      // do nothing and keep scanning\n    }\n\n    const abortController = new AbortController()\n\n    const begin = async () => {\n      try {\n        // Attempt to start with the back facing camera\n        await html5Qrcode.start(\n          { deviceId: preferredCamera.id },\n          scanConfig,\n          onScanSuccess,\n          onScanFailure,\n        )\n        if (abortController.signal.aborted) {\n          return\n        }\n        setScannerState({ state: 'ready' })\n      } catch (deviceIdError) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Failed to start scanning with deviceId', deviceIdError)\n        try {\n          // If the back facing camera is not available, try to start in environment mode\n          await html5Qrcode.start(\n            { facingMode: 'environment' },\n            scanConfig,\n            onScanSuccess,\n            onScanFailure,\n          )\n          if (abortController.signal.aborted) {\n            return\n          }\n          setScannerState({ state: 'ready' })\n        } catch (facingModeError) {\n          if (abortController.signal.aborted) {\n            return\n          }\n          console.warn('Failed to start scanning', facingModeError)\n          setScannerState({\n            state: 'error',\n            error:\n              facingModeError instanceof Error\n                ? facingModeError\n                : new Error(String(facingModeError)),\n          })\n        }\n      }\n    }\n\n    begin()\n\n    return () => {\n      abortController.abort()\n      if (!html5Qrcode.isScanning) {\n        return\n      }\n      try {\n        html5Qrcode.stop().catch((error) => {\n          console.warn('Failed to stop barcode scanner', error)\n        })\n      } catch (error) {\n        console.warn('Failed to stop barcode scanner', error)\n      }\n    }\n  }, [cameraDevices, formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      {scannerState.state === 'loading' && (\n        <div className=\"figure-content-absolute-center\">\n          <OnLoading small />\n        </div>\n      )}\n      {scannerState.state === 'error' && (\n        <BarcodeScannerError\n          title=\"Whoops...\"\n          message={scannerState.error.message}\n        />\n      )}\n      <div\n        id={id}\n        className=\"ob-figure__barcode-scanner\"\n        aria-describedby={props['aria-describedby']}\n      />\n    </BarcodeScannerFigure>\n  )\n}\n\nfunction BarcodeScannerFigure({\n  onClose,\n  children,\n}: {\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <figure className=\"ob-figure\">{children}</figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n\nfunction BarcodeScannerError({\n  title,\n  message,\n}: {\n  title: string\n  message: string\n}) {\n  return (\n    <div className=\"figure-content has-text-centered\" role=\"alert\">\n      <div>\n        <h4 className=\"title is-4\">{title}</h4>\n        <p className=\"has-margin-bottom-6\">{message}</p>\n        <p>\n          Please click <b>Cancel</b> below and type in the barcode value\n          manually.\n        </p>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Html5Qrcode,\n  CameraDevice,\n  Html5QrcodeSupportedFormats,\n  Html5QrcodeCameraScanConfig,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  readOnly: boolean\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScannerSupported\n            id={`${id}==BARCODE_SCANNER`}\n            restrictedBarcodeTypes={\n              element.restrictBarcodeTypes\n                ? element.restrictedBarcodeTypes\n                : undefined\n            }\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n            aria-describedby={ariaDescribedby}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={readOnly}\n                  onBlur={setIsDirty}\n                  aria-describedby={ariaDescribedby}\n                  autoComplete={autocompleteAttributes}\n                  aria-required={element.required}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <MaterialIcon className=\"is-size-5\">\n                    document_scanner\n                  </MaterialIcon>\n                </span>\n              </div>\n              {!!readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n                overrideRequiredMessage={undefined}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n  'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n  const { onClose } = props\n  if (!navigator.mediaDevices?.getUserMedia) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"Unsupported Device\"\n          message=\"Your device does not support accessing your camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n  const { onClose } = props\n  const [state] = useLoadDataState(Html5Qrcode.getCameras)\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <div className=\"figure-content has-text-centered\">\n            <OnLoading small />\n          </div>\n        </BarcodeScannerFigure>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <BarcodeScannerError\n            title=\"Whoops...\"\n            message={\n              state.error.name === 'NotAllowedError'\n                ? 'Cannot scan for barcodes without granting the application access to the camera.'\n                : state.error.message\n            }\n          />\n        </BarcodeScannerFigure>\n      )\n    }\n  }\n\n  if (!state.result.length) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"No Cameras Available\"\n          message=\"Your device does not have an accessible camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n  id,\n  restrictedBarcodeTypes,\n  onScan,\n  onClose,\n  cameraDevices,\n  ...props\n}: BarcodeScannerProps & {\n  cameraDevices: CameraDevice[]\n}) {\n  const formatsToSupport = React.useMemo(() => {\n    return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n      (memo, barcodeType) => {\n        const format =\n          Html5QrcodeSupportedFormats[\n            barcodeType as keyof typeof Html5QrcodeSupportedFormats\n          ]\n        if (format !== undefined) {\n          memo.push(format)\n        }\n        return memo\n      },\n      [],\n    )\n  }, [restrictedBarcodeTypes])\n\n  const [scannerState, setScannerState] = React.useState<\n    { state: 'loading' } | { state: 'ready' } | { state: 'error'; error: Error }\n  >({ state: 'loading' })\n\n  React.useEffect(() => {\n    setScannerState({ state: 'loading' })\n\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    const backFacingCamera = cameraDevices.find((device) =>\n      /back|rear|environment/i.test(device.label),\n    )\n    const preferredCamera = backFacingCamera ?? cameraDevices[0]\n    const scanConfig: Html5QrcodeCameraScanConfig = {\n      fps: 20,\n      aspectRatio: 1,\n      qrbox: (viewfinderWidth, viewfinderHeight) => {\n        const size = Math.min(\n          250,\n          Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.75),\n        )\n        return { width: size, height: size }\n      },\n    }\n\n    const onScanSuccess = (decodedText: string, decodedResult: unknown) => {\n      console.log('Barcode scanner decoded result:', decodedResult)\n      onScan(decodedText)\n    }\n    const onScanFailure = () => {\n      // do nothing and keep scanning\n    }\n\n    const abortController = new AbortController()\n\n    const begin = async () => {\n      try {\n        // Attempt to start with the back facing camera\n        await html5Qrcode.start(\n          { deviceId: preferredCamera.id },\n          scanConfig,\n          onScanSuccess,\n          onScanFailure,\n        )\n        if (abortController.signal.aborted) {\n          return\n        }\n        setScannerState({ state: 'ready' })\n      } catch (deviceIdError) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Failed to start scanning with deviceId', deviceIdError)\n        try {\n          // If the back facing camera is not available, try to start in environment mode\n          await html5Qrcode.start(\n            { facingMode: 'environment' },\n            scanConfig,\n            onScanSuccess,\n            onScanFailure,\n          )\n          if (abortController.signal.aborted) {\n            return\n          }\n          setScannerState({ state: 'ready' })\n        } catch (facingModeError) {\n          if (abortController.signal.aborted) {\n            return\n          }\n          console.warn('Failed to start scanning', facingModeError)\n          setScannerState({\n            state: 'error',\n            error:\n              facingModeError instanceof Error\n                ? facingModeError\n                : new Error(String(facingModeError)),\n          })\n        }\n      }\n    }\n\n    begin()\n\n    return () => {\n      abortController.abort()\n      if (!html5Qrcode.isScanning) {\n        return\n      }\n      try {\n        html5Qrcode.stop().catch((error) => {\n          console.warn('Failed to stop barcode scanner', error)\n        })\n      } catch (error) {\n        console.warn('Failed to stop barcode scanner', error)\n      }\n    }\n  }, [cameraDevices, formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      {scannerState.state === 'loading' && (\n        <div className=\"figure-content-absolute-center\">\n          <OnLoading small />\n        </div>\n      )}\n      {scannerState.state === 'error' && (\n        <BarcodeScannerError\n          title=\"Whoops...\"\n          message={scannerState.error.message}\n        />\n      )}\n      <div\n        id={id}\n        className=\"ob-figure__barcode-scanner\"\n        aria-describedby={props['aria-describedby']}\n      />\n    </BarcodeScannerFigure>\n  )\n}\n\nfunction BarcodeScannerFigure({\n  onClose,\n  children,\n}: {\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <figure className=\"ob-figure\">{children}</figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n\nfunction BarcodeScannerError({\n  title,\n  message,\n}: {\n  title: string\n  message: string\n}) {\n  return (\n    <div className=\"figure-content has-text-centered\" role=\"alert\">\n      <div>\n        <h4 className=\"title is-4\">{title}</h4>\n        <p className=\"has-margin-bottom-6\">{message}</p>\n        <p>\n          Please click <b>Cancel</b> below and type in the barcode value\n          manually.\n        </p>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/form-elements/FormElementCalculation.js

@@ -71,6 +71,7 @@ function FormElementCalculation({ element, onChange, value }) {
     React.useEffect(() => {
         onChange(element, {
             value: calculatedValue,
+            isDerivedChange: true,
         });
     }, [element, onChange, calculatedValue]);
     return (_jsx("div", { className: "cypress-calculation-element", children: _jsxs("div", { className: "ob-form__element ob-calculation", children: [_jsx(QuillHTML, { html: htmlValue, className: "cypress-calculation-result ob-calculation__content" }), hasError && (_jsx("div", { className: "notification cypress-calculation-is-invalid", role: "alert", children: _jsxs("div", { className: "columns is-vcentered", children: [_jsx("div", { className: "column is-narrow", children: _jsx(MaterialIcon, { className: "has-text-warning", children: "error" }) }), _jsx("div", { className: "column", children: _jsx("p", { children: "There is an error in the calculation for this element." }) })] }) }))] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCalculation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCalculation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '../apps'\nimport { localisationService } from '../apps'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport { calculationService } from '@oneblink/sdk-core'\nimport QuillHTML from '../components/QuillHTML'\nimport MaterialIcon from '../components/MaterialIcon'\nimport useFormDefinition from '../hooks/useFormDefinition'\n\ntype Props = {\n  element: FormTypes.CalculationElement\n  onChange: FormElementValueChangeHandler<number>\n  value: unknown | undefined\n}\n\nfunction FormElementCalculation({ element, onChange, value }: Props) {\n  const { formSubmissionModel } = useFormSubmissionModel()\n  const form = useFormDefinition()\n\n  const htmlValue = React.useMemo(() => {\n    let htmlTemplate\n\n    if (!isNaN(value as number)) {\n      htmlTemplate = element.defaultValue\n    } else {\n      htmlTemplate = element.preCalculationDisplay\n    }\n\n    const numberValue = typeof value === 'number' ? value : 0\n    return (htmlTemplate || '').replace(\n      /{result}/gi,\n      element.displayAsCurrency\n        ? localisationService.formatCurrency(numberValue)\n        : localisationService.formatNumber(numberValue),\n    )\n  }, [\n    element.defaultValue,\n    element.displayAsCurrency,\n    element.preCalculationDisplay,\n    value,\n  ])\n\n  const { calculatedValue, hasError } = React.useMemo(() => {\n    try {\n      const expressionResult = calculationService.evaluateExpression({\n        expression: element.calculation,\n        submission: formSubmissionModel,\n        formElements: form.elements,\n        parseDayOnlyDate: localisationService.parseDayOnlyDate,\n      })\n\n      switch (expressionResult.type) {\n        case 'RESULT': {\n          return {\n            calculatedValue: expressionResult.value,\n            hasError: false,\n          }\n        }\n        case 'MISSING_VALUES': {\n          // Show pre-calculation display and do not surface an error.\n          return {\n            calculatedValue: undefined,\n            hasError: false,\n          }\n        }\n        case 'INVALID_EXPRESSION': {\n          return {\n            calculatedValue: undefined,\n            hasError: true,\n          }\n        }\n      }\n    } catch (e) {\n      console.warn(\n        'Error while setting up parsing for calculation element',\n        element,\n        e,\n      )\n      Sentry.captureException(e)\n      return {\n        calculatedValue: undefined,\n        hasError: true,\n      }\n    }\n  }, [element, form.elements, formSubmissionModel])\n\n  // MODEL LISTENER\n  React.useEffect(() => {\n    onChange(element, {\n      value: calculatedValue,\n    })\n  }, [element, onChange, calculatedValue])\n\n  return (\n    <div className=\"cypress-calculation-element\">\n      <div className=\"ob-form__element ob-calculation\">\n        <QuillHTML\n          html={htmlValue}\n          className=\"cypress-calculation-result ob-calculation__content\"\n        />\n        {hasError && (\n          <div\n            className=\"notification cypress-calculation-is-invalid\"\n            role=\"alert\"\n          >\n            <div className=\"columns is-vcentered\">\n              <div className=\"column is-narrow\">\n                <MaterialIcon className=\"has-text-warning\">error</MaterialIcon>\n              </div>\n              <div className=\"column\">\n                <p>There is an error in the calculation for this element.</p>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCalculation)\n"]}
+{"version":3,"file":"FormElementCalculation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCalculation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\nimport { Sentry } from '../apps'\nimport { localisationService } from '../apps'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport { calculationService } from '@oneblink/sdk-core'\nimport QuillHTML from '../components/QuillHTML'\nimport MaterialIcon from '../components/MaterialIcon'\nimport useFormDefinition from '../hooks/useFormDefinition'\n\ntype Props = {\n  element: FormTypes.CalculationElement\n  onChange: FormElementValueChangeHandler<number>\n  value: unknown | undefined\n}\n\nfunction FormElementCalculation({ element, onChange, value }: Props) {\n  const { formSubmissionModel } = useFormSubmissionModel()\n  const form = useFormDefinition()\n\n  const htmlValue = React.useMemo(() => {\n    let htmlTemplate\n\n    if (!isNaN(value as number)) {\n      htmlTemplate = element.defaultValue\n    } else {\n      htmlTemplate = element.preCalculationDisplay\n    }\n\n    const numberValue = typeof value === 'number' ? value : 0\n    return (htmlTemplate || '').replace(\n      /{result}/gi,\n      element.displayAsCurrency\n        ? localisationService.formatCurrency(numberValue)\n        : localisationService.formatNumber(numberValue),\n    )\n  }, [\n    element.defaultValue,\n    element.displayAsCurrency,\n    element.preCalculationDisplay,\n    value,\n  ])\n\n  const { calculatedValue, hasError } = React.useMemo(() => {\n    try {\n      const expressionResult = calculationService.evaluateExpression({\n        expression: element.calculation,\n        submission: formSubmissionModel,\n        formElements: form.elements,\n        parseDayOnlyDate: localisationService.parseDayOnlyDate,\n      })\n\n      switch (expressionResult.type) {\n        case 'RESULT': {\n          return {\n            calculatedValue: expressionResult.value,\n            hasError: false,\n          }\n        }\n        case 'MISSING_VALUES': {\n          // Show pre-calculation display and do not surface an error.\n          return {\n            calculatedValue: undefined,\n            hasError: false,\n          }\n        }\n        case 'INVALID_EXPRESSION': {\n          return {\n            calculatedValue: undefined,\n            hasError: true,\n          }\n        }\n      }\n    } catch (e) {\n      console.warn(\n        'Error while setting up parsing for calculation element',\n        element,\n        e,\n      )\n      Sentry.captureException(e)\n      return {\n        calculatedValue: undefined,\n        hasError: true,\n      }\n    }\n  }, [element, form.elements, formSubmissionModel])\n\n  // MODEL LISTENER\n  React.useEffect(() => {\n    onChange(element, {\n      value: calculatedValue,\n      isDerivedChange: true,\n    })\n  }, [element, onChange, calculatedValue])\n\n  return (\n    <div className=\"cypress-calculation-element\">\n      <div className=\"ob-form__element ob-calculation\">\n        <QuillHTML\n          html={htmlValue}\n          className=\"cypress-calculation-result ob-calculation__content\"\n        />\n        {hasError && (\n          <div\n            className=\"notification cypress-calculation-is-invalid\"\n            role=\"alert\"\n          >\n            <div className=\"columns is-vcentered\">\n              <div className=\"column is-narrow\">\n                <MaterialIcon className=\"has-text-warning\">error</MaterialIcon>\n              </div>\n              <div className=\"column\">\n                <p>There is an error in the calculation for this element.</p>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCalculation)\n"]}

package/dist/form-elements/FormElementCheckBoxes.js

@@ -89,7 +89,7 @@ function FormElementCheckboxes({ id, element, readOnly, value, onChange, validat
                                                         setIsDirty();
                                                     }
                                                 } }), ' ', option.label] }) }, index));
-                            }) })), _jsx(LookupButton, { readOnly: readOnly, hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                            }) })), _jsx(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementCheckboxes);
 //# sourceMappingURL=FormElementCheckBoxes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          ) : (\n            <div\n              role=\"group\"\n              className=\"ob-checkbox-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={readOnly}\n                        edge=\"start\"\n                        inputProps={{\n                          'aria-describedby': ariaDescribedby,\n                        }}\n                        onBlur={() => {\n                          if (index === filteredOptions.length - 1) {\n                            setIsDirty()\n                          }\n                        }}\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            readOnly={readOnly}\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
+{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          ) : (\n            <div\n              role=\"group\"\n              className=\"ob-checkbox-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={readOnly}\n                        edge=\"start\"\n                        inputProps={{\n                          'aria-describedby': ariaDescribedby,\n                        }}\n                        onBlur={() => {\n                          if (index === filteredOptions.length - 1) {\n                            setIsDirty()\n                          }\n                        }}\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}