@oneblink/apps-react 8.7.0-beta.4 → 8.7.0-beta.5

package/dist/components/QuillHTML.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import sanitizeHtml from '../services/sanitize-html';
 export default function QuillHTML({ html, ...props }) {
     const __html = React.useMemo(() => sanitizeHtml(html), [html]);
-    return (React.createElement("div", { ...props, className: clsx(props.className, 'ql-editor'), 
+    return (React.createElement("div", { ...props, className: clsx(props.className, 'ob-quill-content'), 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
             __html,

package/dist/components/QuillHTML.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuillHTML.js","sourceRoot":"","sources":["../../src/components/QuillHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAEpD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,GAAG,KAAK,EAGT;IACC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9D,OAAO,CACL,gCACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC;QAC7C,2CAA2C;QAC3C,uBAAuB,EAAE;YACvB,MAAM;SACP,GACD,CACH,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport sanitizeHtml from '../services/sanitize-html'\n\nexport default function QuillHTML({\n  html,\n  ...props\n}: React.ComponentProps<'div'> & {\n  html: string\n}) {\n  const __html = React.useMemo(() => sanitizeHtml(html), [html])\n  return (\n    <div\n      {...props}\n      className={clsx(props.className, 'ql-editor')}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{\n        __html,\n      }}\n    />\n  )\n}\n"]}
+{"version":3,"file":"QuillHTML.js","sourceRoot":"","sources":["../../src/components/QuillHTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAEpD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,GAAG,KAAK,EAGT;IACC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAC9D,OAAO,CACL,gCACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,kBAAkB,CAAC;QACpD,2CAA2C;QAC3C,uBAAuB,EAAE;YACvB,MAAM;SACP,GACD,CACH,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport sanitizeHtml from '../services/sanitize-html'\n\nexport default function QuillHTML({\n  html,\n  ...props\n}: React.ComponentProps<'div'> & {\n  html: string\n}) {\n  const __html = React.useMemo(() => sanitizeHtml(html), [html])\n  return (\n    <div\n      {...props}\n      className={clsx(props.className, 'ob-quill-content')}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{\n        __html,\n      }}\n    />\n  )\n}\n"]}

package/dist/components/payments/WestpacQuickStreamPaymentForm.js

@@ -8,6 +8,7 @@ import OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOrigi
 import Modal from '../renderer/Modal';
 import MaterialIcon from '../MaterialIcon';
 import useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps';
+import FormElementValidationMessage from '../renderer/FormElementValidationMessage';
 function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, captchaType, onCompleted, onCancelled, appImageUrl, title, }) {
     var _a, _b;
     const [{ isCompletingTransaction, completeTransactionError, captchaToken, displayCaptchaRequired, }, setCompleteTransactionState,] = React.useState({
@@ -256,8 +257,7 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
                     React.createElement("div", { "data-quickstream-api": "creditCardContainer", className: "quickstream-credit-card-container" }),
                     !isLoading && !loadError && (React.createElement(React.Fragment, null,
                         React.createElement(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha" }),
-                        displayCaptchaRequired && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                            React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, "Please complete the CAPTCHA successfully")))))),
+                        displayCaptchaRequired && (React.createElement(FormElementValidationMessage, { message: "Please complete the CAPTCHA successfully", className: "cypress-required" }))))),
                 !isLoading && !loadError && (React.createElement("div", { className: "ob-payment-form__westpac-quickstream-form-actions" },
                     React.createElement("button", { type: "button", disabled: isCompletingTransaction || isCancellingTransaction, onClick: handleCancel, className: clsx('button ob-button is-outlined', {
                             'is-loading': isCancellingTransaction,

package/dist/components/payments/WestpacQuickStreamPaymentForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WestpacQuickStreamPaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/WestpacQuickStreamPaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  OneBlinkAppsError,\n  paymentService,\n  submissionService,\n  localisationService,\n} from '@oneblink/apps'\nimport { SubmissionTypes, SubmissionEventTypes } from '@oneblink/types'\nimport clsx from 'clsx'\nimport React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport * as bulmaToast from 'bulma-toast'\nimport OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\nimport useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps'\nimport { CaptchaType } from '../../typedoc'\n\ninterface TrustedFrame {\n  submitForm(\n    callback: (\n      errors:\n        | Array<{\n            fieldName: string\n            messages: string[]\n          }>\n        | undefined,\n      data: {\n        singleUseToken: {\n          singleUseTokenId: string\n        }\n      },\n    ) => void,\n  ): void\n}\n\ndeclare global {\n  interface Window {\n    QuickstreamAPI: {\n      init(options: { publishableApiKey: string }): void\n      creditCards: {\n        createTrustedFrame(\n          options: unknown,\n          callback: (\n            errors:\n              | Array<{\n                  fieldName: string\n                  messages: string[]\n                }>\n              | undefined,\n            data: {\n              trustedFrame: TrustedFrame\n            },\n          ) => void,\n        ): void\n      }\n    }\n  }\n}\nfunction WestpacQuickStreamPaymentForm({\n  formSubmissionResult,\n  paymentSubmissionEvent,\n  formSubmissionPaymentId,\n  supplierBusinessCode,\n  publishableApiKey,\n  isTestMode,\n  captchaSiteKey,\n  captchaType,\n  onCompleted,\n  onCancelled,\n  appImageUrl,\n  title,\n}: {\n  formSubmissionResult: submissionService.FormSubmissionResult\n  paymentSubmissionEvent: SubmissionEventTypes.WestpacQuickStreamSubmissionEvent\n  formSubmissionPaymentId: string\n  supplierBusinessCode: string\n  publishableApiKey: string\n  isTestMode: boolean\n  captchaSiteKey: string\n  captchaType?: CaptchaType\n  onCompleted: (result: {\n    formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n    paymentReceiptUrl: string\n  }) => void\n  onCancelled: (result: { paymentReceiptUrl: string }) => void\n  appImageUrl?: string\n  title?: string\n}) {\n  const [\n    {\n      isCompletingTransaction,\n      completeTransactionError,\n      captchaToken,\n      displayCaptchaRequired,\n    },\n    setCompleteTransactionState,\n  ] = React.useState<{\n    captchaToken: string | null\n    displayCaptchaRequired: boolean\n    isCompletingTransaction: boolean\n    completeTransactionError: Error | null\n  }>({\n    isCompletingTransaction: false,\n    completeTransactionError: null,\n    captchaToken: null,\n    displayCaptchaRequired: false,\n  })\n\n  const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n  const clearCompleteTransactionError = React.useCallback(() => {\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      isCompletingTransaction: false,\n      completeTransactionError: null,\n    }))\n  }, [])\n\n  const [{ trustedFrame, isLoading, loadError }, setLoadState] =\n    React.useState<{\n      trustedFrame: TrustedFrame | null\n      isLoading: boolean\n      loadError: Error | null\n    }>({\n      trustedFrame: null,\n      isLoading: true,\n      loadError: null,\n    })\n\n  React.useEffect(() => {\n    const abortController = new AbortController()\n    const scriptEle = document.createElement('script')\n    scriptEle.type = 'text/javascript'\n    scriptEle.async = true\n\n    const run = async () => {\n      try {\n        scriptEle.src = isTestMode\n          ? 'https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js'\n          : 'https://api.quickstream.westpac.com.au/rest/v1/quickstream-api-1.0.min.js'\n\n        await new Promise((resolve, reject) => {\n          try {\n            scriptEle.addEventListener(\n              'load',\n              () => {\n                resolve(undefined)\n              },\n              {\n                signal: abortController.signal,\n              },\n            )\n\n            scriptEle.addEventListener(\n              'error',\n              () => {\n                reject(new Error(`Failed to load the script ${scriptEle.src}`))\n              },\n              {\n                signal: abortController.signal,\n              },\n            )\n\n            document.body.appendChild(scriptEle)\n          } catch (error) {\n            console.warn('Failed to load script', error)\n            reject(error)\n          }\n        })\n\n        window.QuickstreamAPI.init({\n          publishableApiKey,\n        })\n        const newTrustedFrame = await new Promise<TrustedFrame>(\n          (resolve, reject) => {\n            window.QuickstreamAPI.creditCards.createTrustedFrame(\n              {\n                config: {\n                  supplierBusinessCode,\n                },\n                iframe: {\n                  style: {\n                    width: '100%',\n                  },\n                },\n                showAcceptedCards: true,\n                showRequiredIndicators: true,\n              },\n              (errors, data) => {\n                if (errors) {\n                  reject(errors)\n                  return\n                }\n                resolve(data.trustedFrame)\n              },\n            )\n          },\n        )\n\n        if (!abortController.signal.aborted) {\n          setLoadState({\n            trustedFrame: newTrustedFrame,\n            isLoading: false,\n            loadError: null,\n          })\n        }\n      } catch (error) {\n        if (!abortController.signal.aborted) {\n          setLoadState({\n            trustedFrame: null,\n            isLoading: false,\n            loadError: error as Error,\n          })\n        }\n      }\n    }\n\n    run()\n\n    return () => {\n      abortController.abort()\n      document.body.removeChild(scriptEle)\n    }\n  }, [isTestMode, publishableApiKey, supplierBusinessCode])\n\n  const recaptchaType = React.useMemo(\n    () => captchaType ?? 'CHECKBOX',\n    [captchaType],\n  )\n\n  const hanedleCaptchaChange = React.useCallback((newValue: string | null) => {\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      captchaToken: newValue,\n      displayCaptchaRequired: newValue === null,\n    }))\n  }, [])\n\n  const recaptchaProps = useReCAPTCHAProps({\n    captchaSiteKey,\n    captchaRef,\n    onCaptchaChange: hanedleCaptchaChange,\n    captchaType: recaptchaType,\n  })\n\n  const getRecaptchaToken = React.useCallback(async () => {\n    switch (captchaType) {\n      case 'INVISIBLE': {\n        const token = await captchaRef.current?.executeAsync()\n        if (!token) {\n          console.log('Captcha token failure')\n          bulmaToast.toast({\n            message: 'Failed to get a captcha token',\n            type: 'is-danger',\n            extraClasses: 'ob-toast cypress-failed-captcha-token-creation',\n            duration: 4000,\n            pauseOnHover: true,\n            closeOnClick: true,\n          })\n        }\n        return {\n          recaptchaToken: token ?? null,\n          displayCaptchaRequired: false,\n        }\n      }\n      case 'CHECKBOX':\n      default:\n        return { recaptchaToken: captchaToken, displayCaptchaRequired: true }\n    }\n  }, [captchaToken, captchaType])\n\n  const handleSubmit = React.useCallback(async () => {\n    if (!trustedFrame) {\n      return\n    }\n\n    const { recaptchaToken, displayCaptchaRequired } = await getRecaptchaToken()\n\n    if (!recaptchaToken) {\n      setCompleteTransactionState({\n        captchaToken: null,\n        displayCaptchaRequired,\n        isCompletingTransaction: false,\n        completeTransactionError: null,\n      })\n      return\n    }\n\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      isCompletingTransaction: true,\n      completeTransactionError: null,\n    }))\n\n    trustedFrame.submitForm((errors, data) => {\n      if (errors) {\n        console.log('Invalid payment form submission', errors)\n        setCompleteTransactionState((currentState) => ({\n          ...currentState,\n          isCompletingTransaction: false,\n          completeTransactionError: null,\n        }))\n        return\n      }\n\n      paymentService.westpacQuickStream\n        .completeTransaction({\n          singleUseTokenId: data.singleUseToken.singleUseTokenId,\n          formSubmissionResult,\n          formSubmissionPaymentId,\n          paymentSubmissionEvent,\n          captchaSiteKey,\n          captchaToken: recaptchaToken,\n        })\n        .then(onCompleted)\n        .catch((error) => {\n          setCompleteTransactionState((currentState) => ({\n            ...currentState,\n            isCompletingTransaction: false,\n            completeTransactionError: error,\n          }))\n        })\n    })\n  }, [\n    trustedFrame,\n    getRecaptchaToken,\n    formSubmissionResult,\n    formSubmissionPaymentId,\n    paymentSubmissionEvent,\n    captchaSiteKey,\n    onCompleted,\n  ])\n\n  const [{ isCancellingTransaction, cancelError }, setCancelState] =\n    React.useState<{\n      isCancellingTransaction: boolean\n      cancelError: Error | null\n    }>({\n      isCancellingTransaction: false,\n      cancelError: null,\n    })\n\n  const clearCancelError = React.useCallback(() => {\n    setCancelState({\n      isCancellingTransaction: false,\n      cancelError: null,\n    })\n  }, [])\n\n  const handleCancel = React.useCallback(async () => {\n    setCancelState({\n      isCancellingTransaction: true,\n      cancelError: null,\n    })\n    try {\n      const result = await paymentService.westpacQuickStream.cancelPayment({\n        formSubmissionPaymentId,\n        formSubmissionResult,\n      })\n      onCancelled(result)\n    } catch (error) {\n      console.warn('Failed to cancel payment', error)\n      setCancelState({\n        isCancellingTransaction: false,\n        cancelError: error as Error,\n      })\n    }\n  }, [formSubmissionPaymentId, formSubmissionResult, onCancelled])\n\n  return (\n    <>\n      {isLoading && (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Building payment form...</span>\n          </div>\n        </section>\n      )}\n\n      {loadError && (\n        <section className=\"cypress-payment-form-loading-error-message\">\n          <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\n          </div>\n          <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n            {loadError.message}\n          </p>\n        </section>\n      )}\n\n      <section>\n        <form\n          onSubmit={(event) => {\n            event.preventDefault()\n            handleSubmit()\n          }}\n        >\n          <div className=\"ob-payment-form__westpac-quickstream-container\">\n            {!!appImageUrl && (\n              <figure className=\"image is-128x128 has-margin-bottom-6 ml-auto mr-auto\">\n                <img\n                  alt=\"Application Icon\"\n                  className=\"is-rounded\"\n                  src={appImageUrl}\n                />\n              </figure>\n            )}\n            {!!title && (\n              <h3 className=\"title is-3 is-size-3-mobile ob-header__heading has-text-centered\">\n                {title}\n              </h3>\n            )}\n            <label className=\"label ob-label has-text-centered\">\n              Fill out the form below to complete your secure payment.\n            </label>\n\n            <div className=\"ob-payment-form__westpac-quickstream-amount\">\n              <div>Amount</div>\n              <div className=\"ob-payment-form__westpac-quickstream-amount-value\">\n                {localisationService.formatCurrency(\n                  formSubmissionResult.payment?.amount ?? 0,\n                )}\n              </div>\n            </div>\n            <div\n              data-quickstream-api=\"creditCardContainer\"\n              className=\"quickstream-credit-card-container\"\n            ></div>\n            {!isLoading && !loadError && (\n              <>\n                <ReCAPTCHA\n                  {...recaptchaProps}\n                  className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n                />\n                {displayCaptchaRequired && (\n                  <div role=\"alert\" className=\"has-margin-top-8\">\n                    <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n                      Please complete the CAPTCHA successfully\n                    </div>\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n          {!isLoading && !loadError && (\n            <div className=\"ob-payment-form__westpac-quickstream-form-actions\">\n              <button\n                type=\"button\"\n                disabled={isCompletingTransaction || isCancellingTransaction}\n                onClick={handleCancel}\n                className={clsx('button ob-button is-outlined', {\n                  'is-loading': isCancellingTransaction,\n                })}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"submit\"\n                disabled={isCompletingTransaction || isCancellingTransaction}\n                className={clsx('button ob-button is-success', {\n                  'is-loading': isCompletingTransaction,\n                })}\n              >\n                Make Payment\n              </button>\n            </div>\n          )}\n        </form>\n      </section>\n\n      <Modal\n        isOpen={!!completeTransactionError}\n        title=\"Payment Issue\"\n        className=\"cypress-payment-error-close-button\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button cypress-payment-error-close-button is-primary\"\n              onClick={clearCompleteTransactionError}\n              autoFocus\n            >\n              Okay\n            </button>\n          </>\n        }\n      >\n        <>\n          <div>\n            {completeTransactionError instanceof Error\n              ? completeTransactionError.message\n              : completeTransactionError}\n          </div>\n          {completeTransactionError instanceof OneBlinkAppsError && (\n            <OneBlinkAppsErrorOriginalMessage\n              error={completeTransactionError.originalError}\n            />\n          )}\n        </>\n      </Modal>\n\n      <Modal\n        isOpen={!!cancelError}\n        title=\"Cancel Issue\"\n        className=\"cypress-cancel-error-close-button\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button cypress-cancel-error-close-button is-primary\"\n              onClick={clearCancelError}\n              autoFocus\n            >\n              Okay\n            </button>\n          </>\n        }\n      >\n        <>\n          <div>\n            {cancelError instanceof Error ? cancelError.message : cancelError}\n          </div>\n          {cancelError instanceof OneBlinkAppsError && (\n            <OneBlinkAppsErrorOriginalMessage\n              error={cancelError.originalError}\n            />\n          )}\n        </>\n      </Modal>\n    </>\n  )\n}\n\nexport default React.memo(WestpacQuickStreamPaymentForm)\n"]}
+{"version":3,"file":"WestpacQuickStreamPaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/WestpacQuickStreamPaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  OneBlinkAppsError,\n  paymentService,\n  submissionService,\n  localisationService,\n} from '@oneblink/apps'\nimport { SubmissionTypes, SubmissionEventTypes } from '@oneblink/types'\nimport clsx from 'clsx'\nimport React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport * as bulmaToast from 'bulma-toast'\nimport OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\nimport useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps'\nimport { CaptchaType } from '../../typedoc'\nimport FormElementValidationMessage from '../renderer/FormElementValidationMessage'\n\ninterface TrustedFrame {\n  submitForm(\n    callback: (\n      errors:\n        | Array<{\n            fieldName: string\n            messages: string[]\n          }>\n        | undefined,\n      data: {\n        singleUseToken: {\n          singleUseTokenId: string\n        }\n      },\n    ) => void,\n  ): void\n}\n\ndeclare global {\n  interface Window {\n    QuickstreamAPI: {\n      init(options: { publishableApiKey: string }): void\n      creditCards: {\n        createTrustedFrame(\n          options: unknown,\n          callback: (\n            errors:\n              | Array<{\n                  fieldName: string\n                  messages: string[]\n                }>\n              | undefined,\n            data: {\n              trustedFrame: TrustedFrame\n            },\n          ) => void,\n        ): void\n      }\n    }\n  }\n}\nfunction WestpacQuickStreamPaymentForm({\n  formSubmissionResult,\n  paymentSubmissionEvent,\n  formSubmissionPaymentId,\n  supplierBusinessCode,\n  publishableApiKey,\n  isTestMode,\n  captchaSiteKey,\n  captchaType,\n  onCompleted,\n  onCancelled,\n  appImageUrl,\n  title,\n}: {\n  formSubmissionResult: submissionService.FormSubmissionResult\n  paymentSubmissionEvent: SubmissionEventTypes.WestpacQuickStreamSubmissionEvent\n  formSubmissionPaymentId: string\n  supplierBusinessCode: string\n  publishableApiKey: string\n  isTestMode: boolean\n  captchaSiteKey: string\n  captchaType?: CaptchaType\n  onCompleted: (result: {\n    formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n    paymentReceiptUrl: string\n  }) => void\n  onCancelled: (result: { paymentReceiptUrl: string }) => void\n  appImageUrl?: string\n  title?: string\n}) {\n  const [\n    {\n      isCompletingTransaction,\n      completeTransactionError,\n      captchaToken,\n      displayCaptchaRequired,\n    },\n    setCompleteTransactionState,\n  ] = React.useState<{\n    captchaToken: string | null\n    displayCaptchaRequired: boolean\n    isCompletingTransaction: boolean\n    completeTransactionError: Error | null\n  }>({\n    isCompletingTransaction: false,\n    completeTransactionError: null,\n    captchaToken: null,\n    displayCaptchaRequired: false,\n  })\n\n  const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n  const clearCompleteTransactionError = React.useCallback(() => {\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      isCompletingTransaction: false,\n      completeTransactionError: null,\n    }))\n  }, [])\n\n  const [{ trustedFrame, isLoading, loadError }, setLoadState] =\n    React.useState<{\n      trustedFrame: TrustedFrame | null\n      isLoading: boolean\n      loadError: Error | null\n    }>({\n      trustedFrame: null,\n      isLoading: true,\n      loadError: null,\n    })\n\n  React.useEffect(() => {\n    const abortController = new AbortController()\n    const scriptEle = document.createElement('script')\n    scriptEle.type = 'text/javascript'\n    scriptEle.async = true\n\n    const run = async () => {\n      try {\n        scriptEle.src = isTestMode\n          ? 'https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js'\n          : 'https://api.quickstream.westpac.com.au/rest/v1/quickstream-api-1.0.min.js'\n\n        await new Promise((resolve, reject) => {\n          try {\n            scriptEle.addEventListener(\n              'load',\n              () => {\n                resolve(undefined)\n              },\n              {\n                signal: abortController.signal,\n              },\n            )\n\n            scriptEle.addEventListener(\n              'error',\n              () => {\n                reject(new Error(`Failed to load the script ${scriptEle.src}`))\n              },\n              {\n                signal: abortController.signal,\n              },\n            )\n\n            document.body.appendChild(scriptEle)\n          } catch (error) {\n            console.warn('Failed to load script', error)\n            reject(error)\n          }\n        })\n\n        window.QuickstreamAPI.init({\n          publishableApiKey,\n        })\n        const newTrustedFrame = await new Promise<TrustedFrame>(\n          (resolve, reject) => {\n            window.QuickstreamAPI.creditCards.createTrustedFrame(\n              {\n                config: {\n                  supplierBusinessCode,\n                },\n                iframe: {\n                  style: {\n                    width: '100%',\n                  },\n                },\n                showAcceptedCards: true,\n                showRequiredIndicators: true,\n              },\n              (errors, data) => {\n                if (errors) {\n                  reject(errors)\n                  return\n                }\n                resolve(data.trustedFrame)\n              },\n            )\n          },\n        )\n\n        if (!abortController.signal.aborted) {\n          setLoadState({\n            trustedFrame: newTrustedFrame,\n            isLoading: false,\n            loadError: null,\n          })\n        }\n      } catch (error) {\n        if (!abortController.signal.aborted) {\n          setLoadState({\n            trustedFrame: null,\n            isLoading: false,\n            loadError: error as Error,\n          })\n        }\n      }\n    }\n\n    run()\n\n    return () => {\n      abortController.abort()\n      document.body.removeChild(scriptEle)\n    }\n  }, [isTestMode, publishableApiKey, supplierBusinessCode])\n\n  const recaptchaType = React.useMemo(\n    () => captchaType ?? 'CHECKBOX',\n    [captchaType],\n  )\n\n  const hanedleCaptchaChange = React.useCallback((newValue: string | null) => {\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      captchaToken: newValue,\n      displayCaptchaRequired: newValue === null,\n    }))\n  }, [])\n\n  const recaptchaProps = useReCAPTCHAProps({\n    captchaSiteKey,\n    captchaRef,\n    onCaptchaChange: hanedleCaptchaChange,\n    captchaType: recaptchaType,\n  })\n\n  const getRecaptchaToken = React.useCallback(async () => {\n    switch (captchaType) {\n      case 'INVISIBLE': {\n        const token = await captchaRef.current?.executeAsync()\n        if (!token) {\n          console.log('Captcha token failure')\n          bulmaToast.toast({\n            message: 'Failed to get a captcha token',\n            type: 'is-danger',\n            extraClasses: 'ob-toast cypress-failed-captcha-token-creation',\n            duration: 4000,\n            pauseOnHover: true,\n            closeOnClick: true,\n          })\n        }\n        return {\n          recaptchaToken: token ?? null,\n          displayCaptchaRequired: false,\n        }\n      }\n      case 'CHECKBOX':\n      default:\n        return { recaptchaToken: captchaToken, displayCaptchaRequired: true }\n    }\n  }, [captchaToken, captchaType])\n\n  const handleSubmit = React.useCallback(async () => {\n    if (!trustedFrame) {\n      return\n    }\n\n    const { recaptchaToken, displayCaptchaRequired } = await getRecaptchaToken()\n\n    if (!recaptchaToken) {\n      setCompleteTransactionState({\n        captchaToken: null,\n        displayCaptchaRequired,\n        isCompletingTransaction: false,\n        completeTransactionError: null,\n      })\n      return\n    }\n\n    setCompleteTransactionState((currentState) => ({\n      ...currentState,\n      isCompletingTransaction: true,\n      completeTransactionError: null,\n    }))\n\n    trustedFrame.submitForm((errors, data) => {\n      if (errors) {\n        console.log('Invalid payment form submission', errors)\n        setCompleteTransactionState((currentState) => ({\n          ...currentState,\n          isCompletingTransaction: false,\n          completeTransactionError: null,\n        }))\n        return\n      }\n\n      paymentService.westpacQuickStream\n        .completeTransaction({\n          singleUseTokenId: data.singleUseToken.singleUseTokenId,\n          formSubmissionResult,\n          formSubmissionPaymentId,\n          paymentSubmissionEvent,\n          captchaSiteKey,\n          captchaToken: recaptchaToken,\n        })\n        .then(onCompleted)\n        .catch((error) => {\n          setCompleteTransactionState((currentState) => ({\n            ...currentState,\n            isCompletingTransaction: false,\n            completeTransactionError: error,\n          }))\n        })\n    })\n  }, [\n    trustedFrame,\n    getRecaptchaToken,\n    formSubmissionResult,\n    formSubmissionPaymentId,\n    paymentSubmissionEvent,\n    captchaSiteKey,\n    onCompleted,\n  ])\n\n  const [{ isCancellingTransaction, cancelError }, setCancelState] =\n    React.useState<{\n      isCancellingTransaction: boolean\n      cancelError: Error | null\n    }>({\n      isCancellingTransaction: false,\n      cancelError: null,\n    })\n\n  const clearCancelError = React.useCallback(() => {\n    setCancelState({\n      isCancellingTransaction: false,\n      cancelError: null,\n    })\n  }, [])\n\n  const handleCancel = React.useCallback(async () => {\n    setCancelState({\n      isCancellingTransaction: true,\n      cancelError: null,\n    })\n    try {\n      const result = await paymentService.westpacQuickStream.cancelPayment({\n        formSubmissionPaymentId,\n        formSubmissionResult,\n      })\n      onCancelled(result)\n    } catch (error) {\n      console.warn('Failed to cancel payment', error)\n      setCancelState({\n        isCancellingTransaction: false,\n        cancelError: error as Error,\n      })\n    }\n  }, [formSubmissionPaymentId, formSubmissionResult, onCancelled])\n\n  return (\n    <>\n      {isLoading && (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Building payment form...</span>\n          </div>\n        </section>\n      )}\n\n      {loadError && (\n        <section className=\"cypress-payment-form-loading-error-message\">\n          <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\n          </div>\n          <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n            {loadError.message}\n          </p>\n        </section>\n      )}\n\n      <section>\n        <form\n          onSubmit={(event) => {\n            event.preventDefault()\n            handleSubmit()\n          }}\n        >\n          <div className=\"ob-payment-form__westpac-quickstream-container\">\n            {!!appImageUrl && (\n              <figure className=\"image is-128x128 has-margin-bottom-6 ml-auto mr-auto\">\n                <img\n                  alt=\"Application Icon\"\n                  className=\"is-rounded\"\n                  src={appImageUrl}\n                />\n              </figure>\n            )}\n            {!!title && (\n              <h3 className=\"title is-3 is-size-3-mobile ob-header__heading has-text-centered\">\n                {title}\n              </h3>\n            )}\n            <label className=\"label ob-label has-text-centered\">\n              Fill out the form below to complete your secure payment.\n            </label>\n\n            <div className=\"ob-payment-form__westpac-quickstream-amount\">\n              <div>Amount</div>\n              <div className=\"ob-payment-form__westpac-quickstream-amount-value\">\n                {localisationService.formatCurrency(\n                  formSubmissionResult.payment?.amount ?? 0,\n                )}\n              </div>\n            </div>\n            <div\n              data-quickstream-api=\"creditCardContainer\"\n              className=\"quickstream-credit-card-container\"\n            ></div>\n            {!isLoading && !loadError && (\n              <>\n                <ReCAPTCHA\n                  {...recaptchaProps}\n                  className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n                />\n                {displayCaptchaRequired && (\n                  <FormElementValidationMessage\n                    message=\"Please complete the CAPTCHA successfully\"\n                    className=\"cypress-required\"\n                  />\n                )}\n              </>\n            )}\n          </div>\n          {!isLoading && !loadError && (\n            <div className=\"ob-payment-form__westpac-quickstream-form-actions\">\n              <button\n                type=\"button\"\n                disabled={isCompletingTransaction || isCancellingTransaction}\n                onClick={handleCancel}\n                className={clsx('button ob-button is-outlined', {\n                  'is-loading': isCancellingTransaction,\n                })}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"submit\"\n                disabled={isCompletingTransaction || isCancellingTransaction}\n                className={clsx('button ob-button is-success', {\n                  'is-loading': isCompletingTransaction,\n                })}\n              >\n                Make Payment\n              </button>\n            </div>\n          )}\n        </form>\n      </section>\n\n      <Modal\n        isOpen={!!completeTransactionError}\n        title=\"Payment Issue\"\n        className=\"cypress-payment-error-close-button\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button cypress-payment-error-close-button is-primary\"\n              onClick={clearCompleteTransactionError}\n              autoFocus\n            >\n              Okay\n            </button>\n          </>\n        }\n      >\n        <>\n          <div>\n            {completeTransactionError instanceof Error\n              ? completeTransactionError.message\n              : completeTransactionError}\n          </div>\n          {completeTransactionError instanceof OneBlinkAppsError && (\n            <OneBlinkAppsErrorOriginalMessage\n              error={completeTransactionError.originalError}\n            />\n          )}\n        </>\n      </Modal>\n\n      <Modal\n        isOpen={!!cancelError}\n        title=\"Cancel Issue\"\n        className=\"cypress-cancel-error-close-button\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button cypress-cancel-error-close-button is-primary\"\n              onClick={clearCancelError}\n              autoFocus\n            >\n              Okay\n            </button>\n          </>\n        }\n      >\n        <>\n          <div>\n            {cancelError instanceof Error ? cancelError.message : cancelError}\n          </div>\n          {cancelError instanceof OneBlinkAppsError && (\n            <OneBlinkAppsErrorOriginalMessage\n              error={cancelError.originalError}\n            />\n          )}\n        </>\n      </Modal>\n    </>\n  )\n}\n\nexport default React.memo(WestpacQuickStreamPaymentForm)\n"]}

package/dist/components/renderer/AutocompleteDropdown.js

@@ -4,6 +4,7 @@ import { Sentry } from '@oneblink/apps';
 import useBooleanState from '../../hooks/useBooleanState';
 import { LookupNotificationContext } from '../../hooks/useLookupNotification';
 import MaterialIcon from '../MaterialIcon';
+import FormElementValidationMessage from './FormElementValidationMessage';
 function AutocompleteDropdown({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, ...props }) {
     const optionsContainerElement = React.useRef(null);
     const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] = React.useState(0);
@@ -184,8 +185,7 @@ function AutocompleteDropdown({ id, label, value, placeholder, required, disable
                     branding))),
         (isDirty || displayValidationMessage) &&
             !!validationMessage &&
-            !isShowingLoading && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-            React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)))));
+            !isShowingLoading && (React.createElement(FormElementValidationMessage, { message: validationMessage }))));
 }
 export default React.memo(AutocompleteDropdown);
 function highlightLabel(text, phrase) {

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '@oneblink/apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\n\ntype AutocompleteOption<T> = {\n  label: string\n  value: string\n  data?: T\n}\n\ntype Props<T> = {\n  id: string\n  label: string\n  value: unknown | undefined\n  placeholder: string | undefined\n  required: boolean | undefined\n  disabled: boolean | undefined\n  isLoading?: boolean\n  hasError?: boolean\n  validationMessage: string | undefined\n  displayValidationMessage: boolean\n  searchDebounceMs: number\n  searchMinCharacters: number\n  onChangeValue: (\n    newValue: string | undefined,\n    data?: T,\n  ) => Promise<void> | void\n  onChangeLabel: (newLabel: string) => void\n  onSearch: (\n    label: string,\n    abortSignal: AbortSignal,\n  ) => Promise<AutocompleteOption<T>[]>\n  'aria-describedby'?: string\n  branding?: React.ReactNode\n  autoComplete?: string\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n  id,\n  label,\n  value,\n  placeholder,\n  required,\n  disabled,\n  validationMessage,\n  displayValidationMessage,\n  searchDebounceMs,\n  searchMinCharacters,\n  isLoading,\n  hasError,\n  onChangeValue,\n  onChangeLabel,\n  onSearch,\n  isDirty,\n  setIsDirty,\n  branding,\n  autoComplete,\n  ...props\n}: Props<T>) {\n  const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n  const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n    React.useState(0)\n  const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n  const [error, setError] = React.useState<Error | null>(null)\n  const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n  const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n  const onSelectOption = React.useCallback(\n    (option: AutocompleteOption<T>) => {\n      onChangeLabel(option.label)\n      onChangeValue(option.value, option.data)\n      onClose()\n    },\n    [onChangeLabel, onChangeValue, onClose],\n  )\n\n  const handleClickOption = React.useCallback(\n    (\n      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n      option: AutocompleteOption<T>,\n    ) => {\n      console.log('Selected element option in autocomplete', option)\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelectOption(option)\n    },\n    [onSelectOption],\n  )\n\n  const onFocus = React.useCallback(() => {\n    setCurrentFocusedOptionIndex(0)\n    onOpen()\n  }, [onOpen])\n\n  // When moving away from the input, if this is no value remove\n  // the label to show the user they have not selected a value\n  const handleBlur = React.useCallback(\n    (inputOption: { label: string; value: unknown | undefined }) => {\n      setIsDirty()\n      setError(null)\n      onClose()\n\n      if (Array.isArray(options)) {\n        // If there is a label that resembles an option, set that option to be the new value.\n        // UNLESS it was the previously selected label. Else, clear the label and the value.\n        if (inputOption.label) {\n          const lowerCase = inputOption.label.toLowerCase()\n          const option = options.find(\n            (option) => option.label.toLowerCase() === lowerCase,\n          )\n          if (option) {\n            // If the new option is not equal to the option that is currently selected,\n            // we want to update to the new option to ensure that it gets changed.\n            if (inputOption.value !== option.value) {\n              console.log('Setting value after blurring away from autocomplete')\n              onSelectOption(option)\n            }\n            return\n          }\n        }\n\n        console.log('Removing label after blurring away from autocomplete')\n        onChangeValue(undefined)\n        onChangeLabel('')\n      }\n    },\n    [\n      onChangeLabel,\n      onChangeValue,\n      onClose,\n      onSelectOption,\n      options,\n      setIsDirty,\n    ],\n  )\n\n  const onKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (!options) {\n        return\n      }\n      const enterPressed = event.keyCode === 13\n      const upArrowPressed = event.keyCode === 38\n      const downArrowPressed = event.keyCode === 40\n      if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n        return\n      }\n\n      event.preventDefault()\n\n      const previousFocusedOptionIndex = currentFocusedOptionIndex\n      let nextFocusedOptionIndex = currentFocusedOptionIndex\n      if (upArrowPressed) {\n        nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n      } else if (downArrowPressed) {\n        nextFocusedOptionIndex = Math.min(\n          options.length - 1,\n          currentFocusedOptionIndex + 1,\n        )\n      } else if (enterPressed) {\n        const option = options[nextFocusedOptionIndex]\n        if (option) {\n          onSelectOption(option)\n        }\n      }\n\n      // If the index has changed, need to ensure the active option is visible\n      if (\n        previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n        optionsContainerElement.current\n      ) {\n        const activeStepElement = optionsContainerElement.current.querySelector(\n          `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n        )\n        if (activeStepElement) {\n          activeStepElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'start',\n          })\n        }\n        setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n      }\n    },\n    [currentFocusedOptionIndex, options, onSelectOption],\n  )\n\n  const handleChangeLabel = React.useCallback<\n    React.ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      const newLabel = e.target.value\n      onOpen()\n      setCurrentFocusedOptionIndex(0)\n\n      onChangeLabel(newLabel)\n    },\n    [onChangeLabel, onOpen],\n  )\n\n  React.useEffect(() => {\n    setError(null)\n\n    if (!isOpen || label.length < searchMinCharacters) {\n      setIsFetchingOptions(false)\n      return\n    }\n\n    setIsFetchingOptions(true)\n\n    let ignore = false\n    const abortController = new AbortController()\n\n    const timeoutId = setTimeout(async () => {\n      let newOptions: AutocompleteOption<T>[] = []\n      let newError = null\n\n      try {\n        newOptions = await onSearch(label, abortController.signal)\n      } catch (error) {\n        // Cancelling will throw an error.\n        if (!abortController.signal.aborted) {\n          console.warn('Error while fetching autocomplete options', error)\n          Sentry.captureException(error)\n          newError = error as Error\n        }\n      }\n      if (!ignore) {\n        setError(newError)\n        setOptions(newOptions)\n        setIsFetchingOptions(false)\n      }\n    }, searchDebounceMs)\n\n    return () => {\n      ignore = true\n      clearTimeout(timeoutId)\n      abortController.abort()\n    }\n  }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n  React.useEffect(() => {\n    //If there is no value set, we want to clear the label\n    //This is to satisfy lookups that return undefined.\n    if (!value) {\n      onChangeLabel('')\n    }\n  }, [onChangeLabel, value])\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n  const isShowingLoading = isFetchingOptions || !!isLoading\n  const isShowingValid = !isShowingLoading && value !== undefined\n  const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n  return (\n    <>\n      <div\n        className={clsx('dropdown', {\n          'is-active': isOpen && Array.isArray(options),\n        })}\n      >\n        <div className=\"field\">\n          <div\n            className={clsx(\n              'cypress-autocomplete-field-control control is-expanded',\n              {\n                'is-loading': isShowingLoading,\n                'has-icons-right': isShowingValid || isShowingError,\n              },\n            )}\n          >\n            <input\n              type=\"text\"\n              placeholder={placeholder}\n              id={id}\n              autoComplete={autoComplete ?? 'off'}\n              className=\"cypress-autocomplete-control input ob-input\"\n              required={required}\n              value={label}\n              disabled={disabled}\n              onFocus={onFocus}\n              onBlur={() => handleBlur({ label, value })}\n              onKeyDown={onKeyDown}\n              onChange={handleChangeLabel}\n              aria-describedby={props['aria-describedby']}\n              aria-required={required}\n            />\n            {isShowingValid && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-success\">\n                  check\n                </MaterialIcon>\n              </span>\n            )}\n            {isShowingError && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-danger\">\n                  error\n                </MaterialIcon>\n              </span>\n            )}\n          </div>\n        </div>\n\n        <div className=\"dropdown-menu\">\n          <div\n            ref={optionsContainerElement}\n            className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n          >\n            {error ? (\n              <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n                <span className=\"has-text-danger\">{error.message}</span>\n              </a>\n            ) : label.length < searchMinCharacters ? (\n              <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n                <i>\n                  Enter at least {searchMinCharacters} character(s) to search\n                </i>\n              </a>\n            ) : isShowingLoading ? (\n              <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n                <i>Searching...</i>\n              </a>\n            ) : options && options.length ? (\n              options.map((option, index) => (\n                <a\n                  key={option.value}\n                  className={clsx(\n                    `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n                    {\n                      'is-active': currentFocusedOptionIndex === index,\n                    },\n                  )}\n                  onMouseDown={(e) => handleClickOption(e, option)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: highlightLabel(option.label, label),\n                  }}\n                />\n              ))\n            ) : (\n              <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n                <i>No matches found</i>\n              </a>\n            )}\n            {branding}\n          </div>\n        </div>\n      </div>\n\n      {(isDirty || displayValidationMessage) &&\n        !!validationMessage &&\n        !isShowingLoading && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n    </>\n  )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n  if (phrase) {\n    text = text.replace(\n      new RegExp(\n        '(' +\n          phrase.replace(\n            /[`~!@#$%^&*()_|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n            (char: string) => `\\\\${char}`,\n          ) +\n          ')',\n        'gi',\n      ),\n      '<b>$1</b>',\n    )\n  }\n\n  return text\n}\n"]}
+{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAEzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAC7E,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,4BAA4B,MAAM,gCAAgC,CAAA;AAmCzE,SAAS,oBAAoB,CAAI,EAC/B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACC;IACT,MAAM,uBAAuB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAClE,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAC7D,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,CAAA;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAe,IAAI,CAAC,CAAA;IAC5D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAExD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,MAA6B,EAAE,EAAE;QAChC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC3B,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;QACxC,OAAO,EAAE,CAAA;IACX,CAAC,EACD,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,CAAC,CACxC,CAAA;IAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CACE,KAAsD,EACtD,MAA6B,EAC7B,EAAE;QACF,OAAO,CAAC,GAAG,CAAC,yCAAyC,EAAE,MAAM,CAAC,CAAA;QAE9D,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,cAAc,CAAC,MAAM,CAAC,CAAA;IACxB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAA;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,4BAA4B,CAAC,CAAC,CAAC,CAAA;QAC/B,MAAM,EAAE,CAAA;IACV,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,8DAA8D;IAC9D,4DAA4D;IAC5D,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,WAA0D,EAAE,EAAE;QAC7D,UAAU,EAAE,CAAA;QACZ,QAAQ,CAAC,IAAI,CAAC,CAAA;QACd,OAAO,EAAE,CAAA;QAET,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YAC3B,qFAAqF;YACrF,oFAAoF;YACpF,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;gBACtB,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;gBACjD,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CACzB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,SAAS,CACrD,CAAA;gBACD,IAAI,MAAM,EAAE,CAAC;oBACX,2EAA2E;oBAC3E,sEAAsE;oBACtE,IAAI,WAAW,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,EAAE,CAAC;wBACvC,OAAO,CAAC,GAAG,CAAC,qDAAqD,CAAC,CAAA;wBAClE,cAAc,CAAC,MAAM,CAAC,CAAA;oBACxB,CAAC;oBACD,OAAM;gBACR,CAAC;YACH,CAAC;YAED,OAAO,CAAC,GAAG,CAAC,sDAAsD,CAAC,CAAA;YACnE,aAAa,CAAC,SAAS,CAAC,CAAA;YACxB,aAAa,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC;IACH,CAAC,EACD;QACE,aAAa;QACb,aAAa;QACb,OAAO;QACP,cAAc;QACd,OAAO;QACP,UAAU;KACX,CACF,CAAA;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAGjC,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QACD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,KAAK,EAAE,CAAA;QACzC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,KAAK,EAAE,CAAA;QAC3C,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,KAAK,EAAE,CAAA;QAC7C,IAAI,CAAC,cAAc,IAAI,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1D,OAAM;QACR,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,MAAM,0BAA0B,GAAG,yBAAyB,CAAA;QAC5D,IAAI,sBAAsB,GAAG,yBAAyB,CAAA;QACtD,IAAI,cAAc,EAAE,CAAC;YACnB,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,yBAAyB,GAAG,CAAC,CAAC,CAAA;QACrE,CAAC;aAAM,IAAI,gBAAgB,EAAE,CAAC;YAC5B,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAC/B,OAAO,CAAC,MAAM,GAAG,CAAC,EAClB,yBAAyB,GAAG,CAAC,CAC9B,CAAA;QACH,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,MAAM,MAAM,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAA;YAC9C,IAAI,MAAM,EAAE,CAAC;gBACX,cAAc,CAAC,MAAM,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;QAED,wEAAwE;QACxE,IACE,0BAA0B,KAAK,sBAAsB;YACrD,uBAAuB,CAAC,OAAO,EAC/B,CAAC;YACD,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,CAAC,aAAa,CACrE,oCAAoC,sBAAsB,EAAE,CAC7D,CAAA;YACD,IAAI,iBAAiB,EAAE,CAAC;gBACtB,iBAAiB,CAAC,cAAc,CAAC;oBAC/B,QAAQ,EAAE,QAAQ;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,OAAO;iBAChB,CAAC,CAAA;YACJ,CAAC;YACD,4BAA4B,CAAC,sBAAsB,CAAC,CAAA;QACtD,CAAC;IACH,CAAC,EACD,CAAC,yBAAyB,EAAE,OAAO,EAAE,cAAc,CAAC,CACrD,CAAA;IAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAGzC,CAAC,CAAC,EAAE,EAAE;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC/B,MAAM,EAAE,CAAA;QACR,4BAA4B,CAAC,CAAC,CAAC,CAAA;QAE/B,aAAa,CAAC,QAAQ,CAAC,CAAA;IACzB,CAAC,EACD,CAAC,aAAa,EAAE,MAAM,CAAC,CACxB,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEd,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,mBAAmB,EAAE,CAAC;YAClD,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC3B,OAAM;QACR,CAAC;QAED,oBAAoB,CAAC,IAAI,CAAC,CAAA;QAE1B,IAAI,MAAM,GAAG,KAAK,CAAA;QAClB,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAE7C,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,IAAI,EAAE;YACtC,IAAI,UAAU,GAA4B,EAAE,CAAA;YAC5C,IAAI,QAAQ,GAAG,IAAI,CAAA;YAEnB,IAAI,CAAC;gBACH,UAAU,GAAG,MAAM,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;YAC5D,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,kCAAkC;gBAClC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACpC,OAAO,CAAC,IAAI,CAAC,2CAA2C,EAAE,KAAK,CAAC,CAAA;oBAChE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;oBAC9B,QAAQ,GAAG,KAAc,CAAA;gBAC3B,CAAC;YACH,CAAC;YACD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,QAAQ,CAAC,QAAQ,CAAC,CAAA;gBAClB,UAAU,CAAC,UAAU,CAAC,CAAA;gBACtB,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC,EAAE,gBAAgB,CAAC,CAAA;QAEpB,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,IAAI,CAAA;YACb,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,sDAAsD;QACtD,mDAAmD;QACnD,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,aAAa,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAC1B,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IAEnE,MAAM,gBAAgB,GAAG,iBAAiB,IAAI,CAAC,CAAC,SAAS,CAAA;IACzD,MAAM,cAAc,GAAG,CAAC,gBAAgB,IAAI,KAAK,KAAK,SAAS,CAAA;IAC/D,MAAM,cAAc,GAAG,CAAC,gBAAgB,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,QAAQ,CAAA;IAEtE,OAAO,CACL;QACE,6BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC1B,WAAW,EAAE,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;aAC9C,CAAC;YAEF,6BAAK,SAAS,EAAC,OAAO;gBACpB,6BACE,SAAS,EAAE,IAAI,CACb,wDAAwD,EACxD;wBACE,YAAY,EAAE,gBAAgB;wBAC9B,iBAAiB,EAAE,cAAc,IAAI,cAAc;qBACpD,CACF;oBAED,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,EACnC,SAAS,EAAC,6CAA6C,EACvD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAC1C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,iBAAiB,sBACT,KAAK,CAAC,kBAAkB,CAAC,mBAC5B,QAAQ,GACvB;oBACD,cAAc,IAAI,CACjB,8BAAM,SAAS,EAAC,uCAAuC;wBACrD,oBAAC,YAAY,IAAC,SAAS,EAAC,4BAA4B,YAErC,CACV,CACR;oBACA,cAAc,IAAI,CACjB,8BAAM,SAAS,EAAC,uCAAuC;wBACrD,oBAAC,YAAY,IAAC,SAAS,EAAC,2BAA2B,YAEpC,CACV,CACR,CACG,CACF;YAEN,6BAAK,SAAS,EAAC,eAAe;gBAC5B,6BACE,GAAG,EAAE,uBAAuB,EAC5B,SAAS,EAAC,0FAA0F;oBAEnG,KAAK,CAAC,CAAC,CAAC,CACP,2BAAG,SAAS,EAAC,gFAAgF;wBAC3F,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,OAAO,CAAQ,CACtD,CACL,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC,CAAC,CAAC,CACvC,2BAAG,SAAS,EAAC,qFAAqF;wBAChG;;4BACkB,mBAAmB;sDACjC,CACF,CACL,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACrB,2BAAG,SAAS,EAAC,mFAAmF;wBAC9F,8CAAmB,CACjB,CACL,CAAC,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,2BACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CACb,oFAAoF,KAAK,EAAE,EAC3F;4BACE,WAAW,EAAE,yBAAyB,KAAK,KAAK;yBACjD,CACF,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC;wBAChD,2CAA2C;wBAC3C,uBAAuB,EAAE;4BACvB,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;yBAC5C,GACD,CACH,CAAC,CACH,CAAC,CAAC,CAAC,CACF,2BAAG,SAAS,EAAC,mFAAmF;wBAC9F,kDAAuB,CACrB,CACL;oBACA,QAAQ,CACL,CACF,CACF;QAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC;YACpC,CAAC,CAAC,iBAAiB;YACnB,CAAC,gBAAgB,IAAI,CACnB,oBAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,CACF,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAgC,CAAA;AAE9E,SAAS,cAAc,CAAC,IAAY,EAAE,MAAc;IAClD,IAAI,MAAM,EAAE,CAAC;QACX,IAAI,GAAG,IAAI,CAAC,OAAO,CACjB,IAAI,MAAM,CACR,GAAG;YACD,MAAM,CAAC,OAAO,CACZ,yCAAyC,EACzC,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE,CAC9B;YACD,GAAG,EACL,IAAI,CACL,EACD,WAAW,CACZ,CAAA;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '@oneblink/apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\nimport FormElementValidationMessage from './FormElementValidationMessage'\n\ntype AutocompleteOption<T> = {\n  label: string\n  value: string\n  data?: T\n}\n\ntype Props<T> = {\n  id: string\n  label: string\n  value: unknown | undefined\n  placeholder: string | undefined\n  required: boolean | undefined\n  disabled: boolean | undefined\n  isLoading?: boolean\n  hasError?: boolean\n  validationMessage: string | undefined\n  displayValidationMessage: boolean\n  searchDebounceMs: number\n  searchMinCharacters: number\n  onChangeValue: (\n    newValue: string | undefined,\n    data?: T,\n  ) => Promise<void> | void\n  onChangeLabel: (newLabel: string) => void\n  onSearch: (\n    label: string,\n    abortSignal: AbortSignal,\n  ) => Promise<AutocompleteOption<T>[]>\n  'aria-describedby'?: string\n  branding?: React.ReactNode\n  autoComplete?: string\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n  id,\n  label,\n  value,\n  placeholder,\n  required,\n  disabled,\n  validationMessage,\n  displayValidationMessage,\n  searchDebounceMs,\n  searchMinCharacters,\n  isLoading,\n  hasError,\n  onChangeValue,\n  onChangeLabel,\n  onSearch,\n  isDirty,\n  setIsDirty,\n  branding,\n  autoComplete,\n  ...props\n}: Props<T>) {\n  const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n  const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n    React.useState(0)\n  const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n  const [error, setError] = React.useState<Error | null>(null)\n  const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n  const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n  const onSelectOption = React.useCallback(\n    (option: AutocompleteOption<T>) => {\n      onChangeLabel(option.label)\n      onChangeValue(option.value, option.data)\n      onClose()\n    },\n    [onChangeLabel, onChangeValue, onClose],\n  )\n\n  const handleClickOption = React.useCallback(\n    (\n      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n      option: AutocompleteOption<T>,\n    ) => {\n      console.log('Selected element option in autocomplete', option)\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelectOption(option)\n    },\n    [onSelectOption],\n  )\n\n  const onFocus = React.useCallback(() => {\n    setCurrentFocusedOptionIndex(0)\n    onOpen()\n  }, [onOpen])\n\n  // When moving away from the input, if this is no value remove\n  // the label to show the user they have not selected a value\n  const handleBlur = React.useCallback(\n    (inputOption: { label: string; value: unknown | undefined }) => {\n      setIsDirty()\n      setError(null)\n      onClose()\n\n      if (Array.isArray(options)) {\n        // If there is a label that resembles an option, set that option to be the new value.\n        // UNLESS it was the previously selected label. Else, clear the label and the value.\n        if (inputOption.label) {\n          const lowerCase = inputOption.label.toLowerCase()\n          const option = options.find(\n            (option) => option.label.toLowerCase() === lowerCase,\n          )\n          if (option) {\n            // If the new option is not equal to the option that is currently selected,\n            // we want to update to the new option to ensure that it gets changed.\n            if (inputOption.value !== option.value) {\n              console.log('Setting value after blurring away from autocomplete')\n              onSelectOption(option)\n            }\n            return\n          }\n        }\n\n        console.log('Removing label after blurring away from autocomplete')\n        onChangeValue(undefined)\n        onChangeLabel('')\n      }\n    },\n    [\n      onChangeLabel,\n      onChangeValue,\n      onClose,\n      onSelectOption,\n      options,\n      setIsDirty,\n    ],\n  )\n\n  const onKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (!options) {\n        return\n      }\n      const enterPressed = event.keyCode === 13\n      const upArrowPressed = event.keyCode === 38\n      const downArrowPressed = event.keyCode === 40\n      if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n        return\n      }\n\n      event.preventDefault()\n\n      const previousFocusedOptionIndex = currentFocusedOptionIndex\n      let nextFocusedOptionIndex = currentFocusedOptionIndex\n      if (upArrowPressed) {\n        nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n      } else if (downArrowPressed) {\n        nextFocusedOptionIndex = Math.min(\n          options.length - 1,\n          currentFocusedOptionIndex + 1,\n        )\n      } else if (enterPressed) {\n        const option = options[nextFocusedOptionIndex]\n        if (option) {\n          onSelectOption(option)\n        }\n      }\n\n      // If the index has changed, need to ensure the active option is visible\n      if (\n        previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n        optionsContainerElement.current\n      ) {\n        const activeStepElement = optionsContainerElement.current.querySelector(\n          `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n        )\n        if (activeStepElement) {\n          activeStepElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'start',\n          })\n        }\n        setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n      }\n    },\n    [currentFocusedOptionIndex, options, onSelectOption],\n  )\n\n  const handleChangeLabel = React.useCallback<\n    React.ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      const newLabel = e.target.value\n      onOpen()\n      setCurrentFocusedOptionIndex(0)\n\n      onChangeLabel(newLabel)\n    },\n    [onChangeLabel, onOpen],\n  )\n\n  React.useEffect(() => {\n    setError(null)\n\n    if (!isOpen || label.length < searchMinCharacters) {\n      setIsFetchingOptions(false)\n      return\n    }\n\n    setIsFetchingOptions(true)\n\n    let ignore = false\n    const abortController = new AbortController()\n\n    const timeoutId = setTimeout(async () => {\n      let newOptions: AutocompleteOption<T>[] = []\n      let newError = null\n\n      try {\n        newOptions = await onSearch(label, abortController.signal)\n      } catch (error) {\n        // Cancelling will throw an error.\n        if (!abortController.signal.aborted) {\n          console.warn('Error while fetching autocomplete options', error)\n          Sentry.captureException(error)\n          newError = error as Error\n        }\n      }\n      if (!ignore) {\n        setError(newError)\n        setOptions(newOptions)\n        setIsFetchingOptions(false)\n      }\n    }, searchDebounceMs)\n\n    return () => {\n      ignore = true\n      clearTimeout(timeoutId)\n      abortController.abort()\n    }\n  }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n  React.useEffect(() => {\n    //If there is no value set, we want to clear the label\n    //This is to satisfy lookups that return undefined.\n    if (!value) {\n      onChangeLabel('')\n    }\n  }, [onChangeLabel, value])\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n  const isShowingLoading = isFetchingOptions || !!isLoading\n  const isShowingValid = !isShowingLoading && value !== undefined\n  const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n  return (\n    <>\n      <div\n        className={clsx('dropdown', {\n          'is-active': isOpen && Array.isArray(options),\n        })}\n      >\n        <div className=\"field\">\n          <div\n            className={clsx(\n              'cypress-autocomplete-field-control control is-expanded',\n              {\n                'is-loading': isShowingLoading,\n                'has-icons-right': isShowingValid || isShowingError,\n              },\n            )}\n          >\n            <input\n              type=\"text\"\n              placeholder={placeholder}\n              id={id}\n              autoComplete={autoComplete ?? 'off'}\n              className=\"cypress-autocomplete-control input ob-input\"\n              required={required}\n              value={label}\n              disabled={disabled}\n              onFocus={onFocus}\n              onBlur={() => handleBlur({ label, value })}\n              onKeyDown={onKeyDown}\n              onChange={handleChangeLabel}\n              aria-describedby={props['aria-describedby']}\n              aria-required={required}\n            />\n            {isShowingValid && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-success\">\n                  check\n                </MaterialIcon>\n              </span>\n            )}\n            {isShowingError && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-danger\">\n                  error\n                </MaterialIcon>\n              </span>\n            )}\n          </div>\n        </div>\n\n        <div className=\"dropdown-menu\">\n          <div\n            ref={optionsContainerElement}\n            className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n          >\n            {error ? (\n              <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n                <span className=\"has-text-danger\">{error.message}</span>\n              </a>\n            ) : label.length < searchMinCharacters ? (\n              <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n                <i>\n                  Enter at least {searchMinCharacters} character(s) to search\n                </i>\n              </a>\n            ) : isShowingLoading ? (\n              <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n                <i>Searching...</i>\n              </a>\n            ) : options && options.length ? (\n              options.map((option, index) => (\n                <a\n                  key={option.value}\n                  className={clsx(\n                    `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n                    {\n                      'is-active': currentFocusedOptionIndex === index,\n                    },\n                  )}\n                  onMouseDown={(e) => handleClickOption(e, option)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: highlightLabel(option.label, label),\n                  }}\n                />\n              ))\n            ) : (\n              <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n                <i>No matches found</i>\n              </a>\n            )}\n            {branding}\n          </div>\n        </div>\n      </div>\n\n      {(isDirty || displayValidationMessage) &&\n        !!validationMessage &&\n        !isShowingLoading && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n    </>\n  )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n  if (phrase) {\n    text = text.replace(\n      new RegExp(\n        '(' +\n          phrase.replace(\n            /[`~!@#$%^&*()_|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n            (char: string) => `\\\\${char}`,\n          ) +\n          ')',\n        'gi',\n      ),\n      '<b>$1</b>',\n    )\n  }\n\n  return text\n}\n"]}

package/dist/form-elements/FormElementFiles.js

@@ -15,7 +15,7 @@ export function stringifyAttachments(value) {
 }
 function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
-    const { addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange, setIsDirty, element.maxFileSize);
+    const { addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange, setIsDirty);
     const inputRef = React.useRef(null);
     const handleAdd = React.useCallback(() => {
         if (!inputRef.current)

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n  value: attachmentsService.Attachment[] | undefined,\n): string {\n  if (value?.every((attachment) => !attachment.type)) {\n    return JSON.stringify(value)\n  }\n  return ''\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: {\n  id: string\n  element: FormTypes.FilesElement\n  value?: attachmentsService.Attachment[]\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n    element,\n    onChange,\n    setIsDirty,\n    element.maxFileSize,\n  )\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleAdd = React.useCallback(() => {\n    if (!inputRef.current) return\n    // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n    inputRef.current.value = ''\n    inputRef.current.click()\n  }, [])\n\n  const attachments = value || []\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-files-element\">\n      <FormElementLabelContainer\n        className=\"ob-files\"\n        element={element}\n        id={id}\n        required={!!element.minEntries}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          name={element.name}\n          id={id}\n          className=\"file-input ob-input\"\n          multiple={element.maxEntries !== 1}\n          disabled={element.readOnly}\n          onChange={(event) =>\n            addAttachments(\n              event.target.files ? Array.from(event.target.files) : [],\n            )\n          }\n        />\n        <div className=\"control cypress-files-control\">\n          <div className=\"columns is-multiline ob-columns-container\">\n            {attachments.map((attachment, index) => {\n              return (\n                <FormElementFile\n                  key={attachment.type ? attachment._id : attachment.id}\n                  element={element}\n                  onRemove={removeAttachment}\n                  file={attachment}\n                  onChange={changeAttachment}\n                  disableUpload={\n                    (!!element.maxEntries &&\n                      attachments.length > element.maxEntries) ||\n                    !checkFileNameIsValid(element, attachment.fileName) ||\n                    !checkFileNameExtensionIsValid(element, attachment.fileName)\n                  }\n                  index={index}\n                />\n              )\n            })}\n            {!element.readOnly &&\n              (!element.maxEntries ||\n                attachments.length < element.maxEntries) && (\n                <div className=\"column is-one-quarter-ob\">\n                  <button\n                    type=\"button\"\n                    className=\"button ob-files__add-new-button\"\n                    onClick={handleAdd}\n                    aria-describedby={ariaDescribedby}\n                    onBlur={setIsDirty}\n                  >\n                    <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n                  </button>\n                </div>\n              )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
+{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n  value: attachmentsService.Attachment[] | undefined,\n): string {\n  if (value?.every((attachment) => !attachment.type)) {\n    return JSON.stringify(value)\n  }\n  return ''\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: {\n  id: string\n  element: FormTypes.FilesElement\n  value?: attachmentsService.Attachment[]\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n    element,\n    onChange,\n    setIsDirty,\n  )\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleAdd = React.useCallback(() => {\n    if (!inputRef.current) return\n    // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n    inputRef.current.value = ''\n    inputRef.current.click()\n  }, [])\n\n  const attachments = value || []\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-files-element\">\n      <FormElementLabelContainer\n        className=\"ob-files\"\n        element={element}\n        id={id}\n        required={!!element.minEntries}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          name={element.name}\n          id={id}\n          className=\"file-input ob-input\"\n          multiple={element.maxEntries !== 1}\n          disabled={element.readOnly}\n          onChange={(event) =>\n            addAttachments(\n              event.target.files ? Array.from(event.target.files) : [],\n            )\n          }\n        />\n        <div className=\"control cypress-files-control\">\n          <div className=\"columns is-multiline ob-columns-container\">\n            {attachments.map((attachment, index) => {\n              return (\n                <FormElementFile\n                  key={attachment.type ? attachment._id : attachment.id}\n                  element={element}\n                  onRemove={removeAttachment}\n                  file={attachment}\n                  onChange={changeAttachment}\n                  disableUpload={\n                    (!!element.maxEntries &&\n                      attachments.length > element.maxEntries) ||\n                    !checkFileNameIsValid(element, attachment.fileName) ||\n                    !checkFileNameExtensionIsValid(element, attachment.fileName)\n                  }\n                  index={index}\n                />\n              )\n            })}\n            {!element.readOnly &&\n              (!element.maxEntries ||\n                attachments.length < element.maxEntries) && (\n                <div className=\"column is-one-quarter-ob\">\n                  <button\n                    type=\"button\"\n                    className=\"button ob-files__add-new-button\"\n                    onClick={handleAdd}\n                    aria-describedby={ariaDescribedby}\n                    onBlur={setIsDirty}\n                  >\n                    <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n                  </button>\n                </div>\n              )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

package/dist/hooks/attachments/useAttachments.d.ts

@@ -1,7 +1,7 @@
 import { FormTypes } from '@oneblink/types';
 import { attachmentsService } from '@oneblink/apps';
 import { FormElementValueChangeHandler, IsDirtyProps } from '../../types/form';
-declare const useAttachments: (element: FormTypes.FilesElement, onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>, setIsDirty: IsDirtyProps["setIsDirty"], maxFileSize: number | undefined) => {
+declare const useAttachments: (element: FormTypes.FilesElement, onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>, setIsDirty: IsDirtyProps["setIsDirty"]) => {
     addAttachments: (files: File[]) => Promise<void>;
     removeAttachment: (id: string) => void;
     changeAttachment: (id: string, attachment: attachmentsService.Attachment) => void;

package/dist/hooks/attachments/useAttachments.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { prepareNewAttachment, generateErrorAttachment, correctFileOrientation, } from '../../services/attachments';
 import { canvasToBlob } from '../../services/blob-utils';
 import useIsMounted from '../useIsMounted';
-const useAttachments = (element, onChange, setIsDirty, maxFileSize) => {
+const useAttachments = (element, onChange, setIsDirty) => {
     const isMounted = useIsMounted();
     const addAttachments = React.useCallback(async (files) => {
         if (!files.length)
@@ -12,8 +12,8 @@ const useAttachments = (element, onChange, setIsDirty, maxFileSize) => {
                 return generateErrorAttachment(file, file.name, element, 'You cannot upload an empty file.');
             }
             const fileSizeInMB = file.size / 1024 / 1024;
-            if (maxFileSize && fileSizeInMB > maxFileSize) {
-                return generateErrorAttachment(file, file.name, element, `File size ${fileSizeInMB.toFixed(2)}MB exceeds the allowed maximum of ${maxFileSize}MB.`);
+            if (element.maxFileSize && fileSizeInMB > element.maxFileSize) {
+                return generateErrorAttachment(file, file.name, element, `File size ${fileSizeInMB.toFixed(2)}MB exceeds the allowed maximum of ${element.maxFileSize}MB.`);
             }
             const result = await correctFileOrientation(file);
             if (result instanceof Blob) {
@@ -32,7 +32,7 @@ const useAttachments = (element, onChange, setIsDirty, maxFileSize) => {
         if (isMounted.current) {
             setIsDirty();
         }
-    }, [element, isMounted, maxFileSize, onChange, setIsDirty]);
+    }, [element, isMounted, onChange, setIsDirty]);
     const removeAttachment = React.useCallback((id) => {
         onChange(element, {
             value: (currentAttachments) => {

package/dist/hooks/attachments/useAttachments.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAttachments.js","sourceRoot":"","sources":["../../../src/hooks/attachments/useAttachments.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport {\n  prepareNewAttachment,\n  generateErrorAttachment,\n  correctFileOrientation,\n} from '../../services/attachments'\nimport { attachmentsService } from '@oneblink/apps'\nimport { canvasToBlob } from '../../services/blob-utils'\nimport useIsMounted from '../useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../../types/form'\n\nconst useAttachments = (\n  element: FormTypes.FilesElement,\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>,\n  setIsDirty: IsDirtyProps['setIsDirty'],\n  maxFileSize: number | undefined,\n) => {\n  const isMounted = useIsMounted()\n\n  const addAttachments = React.useCallback(\n    async (files: File[]): Promise<void> => {\n      if (!files.length) return\n      const newAttachments: Array<\n        attachmentsService.AttachmentNew | attachmentsService.AttachmentError\n      > = await Promise.all(\n        files.map(async (file) => {\n          if (!file.size) {\n            return generateErrorAttachment(\n              file,\n              file.name,\n              element,\n              'You cannot upload an empty file.',\n            )\n          }\n          const fileSizeInMB = file.size / 1024 / 1024\n          if (maxFileSize && fileSizeInMB > maxFileSize) {\n            return generateErrorAttachment(\n              file,\n              file.name,\n              element,\n              `File size ${fileSizeInMB.toFixed(2)}MB exceeds the allowed maximum of ${maxFileSize}MB.`,\n            )\n          }\n          const result = await correctFileOrientation(file)\n          if (result instanceof Blob) {\n            return prepareNewAttachment(result, file.name, element)\n          }\n\n          const blob = await canvasToBlob(result)\n          return prepareNewAttachment(blob, file.name, element)\n        }),\n      )\n\n      onChange(element, {\n        value: (currentAttachments) => {\n          if (!currentAttachments) return newAttachments\n          return [...currentAttachments, ...newAttachments]\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, maxFileSize, onChange, setIsDirty],\n  )\n\n  const removeAttachment = React.useCallback(\n    (id: string) => {\n      onChange(element, {\n        value: (currentAttachments) => {\n          const newAttachments = currentAttachments?.filter((att) => {\n            // Return items that are not the removed id\n            if (!att.type) {\n              return att.id !== id\n            }\n            return att._id !== id\n          })\n          if (newAttachments?.length) {\n            return newAttachments\n          }\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const changeAttachment = React.useCallback(\n    (id: string, attachment: attachmentsService.Attachment) => {\n      onChange(element, {\n        value: (currentAttachments) => {\n          if (!currentAttachments) return\n          return currentAttachments.map((att) => {\n            // Can only change attachments that are not uploaded (have a type)\n            if (att.type && att._id === id) {\n              return attachment\n            }\n            return att\n          })\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  return {\n    addAttachments,\n    removeAttachment,\n    changeAttachment,\n  }\n}\n\nexport default useAttachments\n"]}
+{"version":3,"file":"useAttachments.js","sourceRoot":"","sources":["../../../src/hooks/attachments/useAttachments.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport {\n  prepareNewAttachment,\n  generateErrorAttachment,\n  correctFileOrientation,\n} from '../../services/attachments'\nimport { attachmentsService } from '@oneblink/apps'\nimport { canvasToBlob } from '../../services/blob-utils'\nimport useIsMounted from '../useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../../types/form'\n\nconst useAttachments = (\n  element: FormTypes.FilesElement,\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>,\n  setIsDirty: IsDirtyProps['setIsDirty'],\n) => {\n  const isMounted = useIsMounted()\n\n  const addAttachments = React.useCallback(\n    async (files: File[]): Promise<void> => {\n      if (!files.length) return\n      const newAttachments: Array<\n        attachmentsService.AttachmentNew | attachmentsService.AttachmentError\n      > = await Promise.all(\n        files.map(async (file) => {\n          if (!file.size) {\n            return generateErrorAttachment(\n              file,\n              file.name,\n              element,\n              'You cannot upload an empty file.',\n            )\n          }\n          const fileSizeInMB = file.size / 1024 / 1024\n          if (element.maxFileSize && fileSizeInMB > element.maxFileSize) {\n            return generateErrorAttachment(\n              file,\n              file.name,\n              element,\n              `File size ${fileSizeInMB.toFixed(2)}MB exceeds the allowed maximum of ${element.maxFileSize}MB.`,\n            )\n          }\n          const result = await correctFileOrientation(file)\n          if (result instanceof Blob) {\n            return prepareNewAttachment(result, file.name, element)\n          }\n\n          const blob = await canvasToBlob(result)\n          return prepareNewAttachment(blob, file.name, element)\n        }),\n      )\n\n      onChange(element, {\n        value: (currentAttachments) => {\n          if (!currentAttachments) return newAttachments\n          return [...currentAttachments, ...newAttachments]\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const removeAttachment = React.useCallback(\n    (id: string) => {\n      onChange(element, {\n        value: (currentAttachments) => {\n          const newAttachments = currentAttachments?.filter((att) => {\n            // Return items that are not the removed id\n            if (!att.type) {\n              return att.id !== id\n            }\n            return att._id !== id\n          })\n          if (newAttachments?.length) {\n            return newAttachments\n          }\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  const changeAttachment = React.useCallback(\n    (id: string, attachment: attachmentsService.Attachment) => {\n      onChange(element, {\n        value: (currentAttachments) => {\n          if (!currentAttachments) return\n          return currentAttachments.map((att) => {\n            // Can only change attachments that are not uploaded (have a type)\n            if (att.type && att._id === id) {\n              return attachment\n            }\n            return att\n          })\n        },\n      })\n      if (isMounted.current) {\n        setIsDirty()\n      }\n    },\n    [element, isMounted, onChange, setIsDirty],\n  )\n\n  return {\n    addAttachments,\n    removeAttachment,\n    changeAttachment,\n  }\n}\n\nexport default useAttachments\n"]}