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

package/dist/components/LookupButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type Props = {
+    value: unknown | undefined;
+    validationMessage: string | undefined;
+    hasMarginTop?: boolean;
+    isInputButton?: boolean;
+};
+declare function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof LookupButton>;
+export default _default;

package/dist/components/LookupButton.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import useLookupNotification from '../hooks/useLookupNotification';
+import { lookupValidationMessage } from '../services/form-validation';
+import useFormIsReadOnly from '../hooks/useFormIsReadOnly';
+function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, }) {
+    const { isLookup, onLookup, isDisabled } = useLookupNotification();
+    const formIsReadOnly = useFormIsReadOnly();
+    if (!isLookup) {
+        return null;
+    }
+    const button = (React.createElement("button", { type: "button", className: clsx('button is-primary ob-lookup__button cypress-lookup-button', {
+            'is-input-addon': isInputButton,
+            'ob-button': !isInputButton,
+            'has-margin-top-8': hasMarginTop,
+        }), onClick: () => onLookup(value), disabled: formIsReadOnly ||
+            isDisabled ||
+            value === undefined ||
+            (!!validationMessage && validationMessage !== lookupValidationMessage) },
+        isInputButton && React.createElement("span", null),
+        React.createElement("span", { className: "icon" },
+            React.createElement("i", { className: "material-icons" }, "search")),
+        React.createElement("span", { className: isInputButton ? 'is-hidden-mobile' : undefined }, "\u00A0Lookup")));
+    if (isInputButton) {
+        return React.createElement("div", { className: "control" }, button);
+    }
+    return button;
+}
+export default React.memo(LookupButton);
+//# sourceMappingURL=LookupButton.js.map

package/dist/components/LookupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookupButton.js","sourceRoot":"","sources":["../../src/components/LookupButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAQ1D,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,GACP;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAA;IAClE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,MAAM,GAAG,CACb,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EACN,cAAc;YACd,UAAU;YACV,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,CAAC,iBAAiB,IAAI,iBAAiB,KAAK,uBAAuB,CAAC;QAGvE,aAAa,IAAI,iCAAa;QAC/B,8BAAM,SAAS,EAAC,MAAM;YACpB,2BAAG,SAAS,EAAC,gBAAgB,aAAW,CACnC;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,mBAExD,CACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE;QACjB,OAAO,6BAAK,SAAS,EAAC,SAAS,IAAE,MAAM,CAAO,CAAA;KAC/C;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useLookupNotification from '../hooks/useLookupNotification'\nimport { lookupValidationMessage } from '../services/form-validation'\nimport useFormIsReadOnly from '../hooks/useFormIsReadOnly'\ntype Props = {\n  value: unknown | undefined\n  validationMessage: string | undefined\n  hasMarginTop?: boolean\n  isInputButton?: boolean\n}\n\nfunction LookupButton({\n  value,\n  validationMessage,\n  hasMarginTop,\n  isInputButton,\n}: Props) {\n  const { isLookup, onLookup, isDisabled } = useLookupNotification()\n  const formIsReadOnly = useFormIsReadOnly()\n  if (!isLookup) {\n    return null\n  }\n\n  const button = (\n    <button\n      type=\"button\"\n      className={clsx(\n        'button is-primary ob-lookup__button cypress-lookup-button',\n        {\n          'is-input-addon': isInputButton,\n          'ob-button': !isInputButton,\n          'has-margin-top-8': hasMarginTop,\n        },\n      )}\n      onClick={() => onLookup(value)}\n      disabled={\n        formIsReadOnly ||\n        isDisabled ||\n        value === undefined ||\n        (!!validationMessage && validationMessage !== lookupValidationMessage)\n      }\n    >\n      {isInputButton && <span></span>}\n      <span className=\"icon\">\n        <i className=\"material-icons\">search</i>\n      </span>\n      <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n        &nbsp;Lookup\n      </span>\n    </button>\n  )\n\n  if (isInputButton) {\n    return <div className=\"control\">{button}</div>\n  }\n\n  return button\n}\n\nexport default React.memo(LookupButton)\n"]}

package/dist/components/LookupNotification.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementLookupHandler } from '../types/form';
+declare type Props = {
+    autoLookupValue?: unknown;
+    stringifyAutoLookupValue?: (autoLookupValue: unknown) => string;
+    element: FormTypes.LookupFormElement;
+    onLookup: FormElementLookupHandler;
+    children: React.ReactNode;
+};
+export default function LookupNotification(props: Props): JSX.Element;
+export {};

package/dist/components/LookupNotification.js

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { formService } from '@oneblink/apps';
+import { generateHeaders } from '@oneblink/apps/dist/services/fetch';
+import useIsOffline from '../hooks/useIsOffline';
+import OnLoading from './OnLoading';
+import generateDefaultData from '../services/generate-default-data';
+import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useFormDefinition from '../hooks/useFormDefinition';
+import useInjectPages from '../hooks/useInjectPages';
+import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
+import useExecutedLookupCallback from '../hooks/useExecutedLookupCallback';
+import useFormIsReadOnly from '../hooks/useFormIsReadOnly';
+import { Sentry } from '@oneblink/apps';
+import useIsMounted from '../hooks/useIsMounted';
+function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue, element, onLookup, children, }) {
+    const isMounted = useIsMounted();
+    const isOffline = useIsOffline();
+    const definition = useFormDefinition();
+    const injectPagesAfter = useInjectPages();
+    const { executedLookup, executeLookupFailed } = useExecutedLookupCallback();
+    const [onCancelLookup, setOnCancelLookup] = React.useState(undefined);
+    const [isLookingUp, setIsLookingUp] = React.useState(false);
+    const [hasLookupFailed, setHasLookupFailed] = React.useState(false);
+    const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false);
+    const [isCancellable, setIsCancellable] = React.useState(false);
+    const [isDisabled, setIsDisabled] = React.useState(false);
+    const [lookupErrorHTML, setLookupErrorHTML] = React.useState(null);
+    const formIsReadOnly = useFormIsReadOnly();
+    const { formSubmissionModel: model } = useFormSubmissionModel();
+    const mergeLookupData = React.useCallback((newValue, dataLookupResult, elementLookupResult) => {
+        if (elementLookupResult) {
+            if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {
+                injectPagesAfter(element, elementLookupResult, dataLookupResult);
+                return;
+            }
+        }
+        onLookup(({ submission, elements }) => {
+            let allElements = elements;
+            if (Array.isArray(elementLookupResult)) {
+                const indexOfElement = elements.findIndex(({ id }) => id === element.id);
+                if (indexOfElement === -1) {
+                    console.log('Could not find element', element);
+                }
+                else {
+                    // Filter out already injected elements
+                    allElements = elements.filter(
+                    // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(
+                    (e) => e.injectedByElementId !== element.id);
+                    allElements.splice(indexOfElement + 1, 0, ...elementLookupResult.map((e) => {
+                        // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(
+                        e.injectedByElementId = element.id;
+                        return e;
+                    }));
+                }
+            }
+            return {
+                elements: allElements,
+                submission: generateDefaultData(allElements, {
+                    ...submission,
+                    [element.name]: newValue,
+                    ...dataLookupResult,
+                }),
+            };
+        });
+    }, [element, injectPagesAfter, onLookup]);
+    const triggerLookup = React.useCallback(async (newValue) => {
+        // No lookups for read only forms
+        if (formIsReadOnly)
+            return;
+        // if the element triggering the lookup has no value..
+        // ..return and do nothing
+        if (newValue === undefined || newValue === null)
+            return;
+        setIsLookingUp(true);
+        if (isOffline) {
+            setHasLookupFailed(true);
+            return;
+        }
+        executedLookup(element);
+        setIsDisabled(true);
+        setIsCancellable(false);
+        setHasLookupFailed(false);
+        setHasLookupSucceeded(false);
+        setLookupErrorHTML(null);
+        const abortController = new AbortController();
+        setOnCancelLookup(() => () => abortController.abort());
+        // After certain amount of time, show the cancel button
+        const isCancellableTimeout = setTimeout(() => {
+            setIsCancellable(!abortController.signal.aborted);
+        }, 5000);
+        const payload = {
+            definition,
+            submission: {
+                ...model,
+                [element.name]: newValue,
+            },
+        };
+        try {
+            const [dataLookupResult, elementLookupResult] = await Promise.all([
+                fetchLookup(element.dataLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
+                fetchLookup(element.elementLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
+            ]);
+            mergeLookupData(newValue, dataLookupResult, elementLookupResult);
+            if (isMounted.current) {
+                setHasLookupSucceeded(true);
+            }
+            // After certain amount of time, hide the lookup succeeded message
+            await new Promise((resolve) => setTimeout(() => resolve(false), 750));
+            if (isMounted.current) {
+                setIsLookingUp(false);
+            }
+        }
+        catch (error) {
+            executeLookupFailed(element);
+            if (!isMounted.current) {
+                return;
+            }
+            // Cancelling will throw an error.
+            if (abortController.signal.aborted) {
+                console.log('Fetch aborted');
+                setIsLookingUp(false);
+                return;
+            }
+            setHasLookupFailed(true);
+            setLookupErrorHTML(typeof error === 'string'
+                ? error
+                : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.');
+        }
+        finally {
+            clearTimeout(isCancellableTimeout);
+            if (isMounted.current) {
+                setIsDisabled(false);
+                setOnCancelLookup(undefined);
+            }
+        }
+    }, [
+        definition,
+        element,
+        executeLookupFailed,
+        executedLookup,
+        formIsReadOnly,
+        isMounted,
+        isOffline,
+        mergeLookupData,
+        model,
+    ]);
+    // For certain elements, do not add click event
+    // instead, watch model for changes and trigger lookup function.
+    // We add this stringify function here to allow the value to be
+    // an object which may have a reference change, but the values
+    // have not changed. e.g. the 'location' element's value
+    const autoLookupValueString = stringifyAutoLookupValue
+        ? stringifyAutoLookupValue(autoLookupValue)
+        : autoLookupValue;
+    React.useEffect(() => {
+        if (autoLookupValue !== undefined) {
+            triggerLookup(autoLookupValue);
+        }
+        // Wants to use "triggerLookup" as a dependency,
+        // however, this will change on any change made on any
+        // element. Checking if "value" has changed is enough
+        // to trigger a lookup when the correct dependencies change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoLookupValueString]);
+    const contextValue = React.useMemo(() => ({
+        isLookup: true,
+        isDisabled,
+        onLookup: triggerLookup,
+    }), [isDisabled, triggerLookup]);
+    return (React.createElement(LookupNotificationContext.Provider, { value: contextValue },
+        children,
+        React.createElement("div", { className: clsx('ob-lookup__notification', {
+                'is-looking-up': isLookingUp,
+                'is-extended': hasLookupFailed || (isCancellable && !hasLookupSucceeded),
+            }) },
+            React.createElement("div", { className: "notification has-margin-top-7 has-text-centered" },
+                hasLookupFailed && (React.createElement(React.Fragment, null,
+                    React.createElement("button", { type: "button", className: "delete fade-in", onClick: () => setIsLookingUp(false) }),
+                    React.createElement("div", null, isOffline ? (React.createElement("div", null,
+                        React.createElement("i", { className: "material-icons fade-in has-text-warning" }, "wifi_off"),
+                        React.createElement("p", { className: "fade-in" }, "It looks like you're offline. Please try again when connectivity is restored."))) : (React.createElement("div", null,
+                        React.createElement("i", { className: "material-icons fade-in has-text-danger" }, "error_outline"),
+                        React.createElement("p", { className: "fade-in", dangerouslySetInnerHTML: {
+                                __html: lookupErrorHTML || '',
+                            }, "ng-bind-html": "$ctrl.obLookupCtrl.lookupErrorMessage" })))))),
+                hasLookupSucceeded && (React.createElement("i", { className: "material-icons has-text-success fade-in" }, "check_circle_outline")),
+                !hasLookupSucceeded && !hasLookupFailed && React.createElement(OnLoading, { small: true }),
+                isCancellable && !hasLookupSucceeded && !hasLookupFailed && (React.createElement("div", { className: "has-margin-top-5 fade-in" },
+                    React.createElement("p", null, "Taking longer than expected?"),
+                    React.createElement("button", { type: "button", className: "button has-margin-top-8", onClick: onCancelLookup }, "Cancel")))))));
+}
+export default function LookupNotification(props) {
+    if (props.element.isDataLookup || props.element.isElementLookup) {
+        return React.createElement(LookupNotificationComponent, { ...props });
+    }
+    return React.createElement(React.Fragment, null, props.children);
+}
+async function fetchLookup(formElementLookupId, organisationId, formsAppEnvironmentId, payload, abortSignal) {
+    if (typeof formElementLookupId !== 'number' ||
+        !organisationId ||
+        typeof formsAppEnvironmentId !== 'number') {
+        return;
+    }
+    console.log('Attempting to retrieve form element lookup for id:', formElementLookupId);
+    const formElementLookup = await formService.getFormElementLookupById(organisationId, formsAppEnvironmentId, formElementLookupId);
+    if (!formElementLookup || !formElementLookup.url) {
+        console.log('Could not find URL for form element lookup for id:', formElementLookupId, formElementLookup);
+        throw new Error('Could not find element lookup configuration');
+    }
+    const headers = await generateHeaders();
+    console.log(`Attempting a ${formElementLookup.type} lookup request to:`, formElementLookup.url);
+    const response = await fetch(formElementLookup.url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload),
+        signal: abortSignal,
+    });
+    const data = await response.json();
+    console.log('Response from lookup to: POST', formElementLookup.url, response.status, data);
+    if (!response.ok) {
+        Sentry.captureException(new Error(`Received ${response.status} status code from lookup`));
+        if (response.status === 400 && data && data.message) {
+            throw data.message;
+        }
+        throw new Error('Invalid response from lookup');
+    }
+    return data;
+}
+// Validate that an element with a lookup has had the lookup button pressed if the element is required
+//# sourceMappingURL=LookupNotification.js.map

package/dist/components/LookupNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookupNotification.js","sourceRoot":"","sources":["../../src/components/LookupNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { formService } from '@oneblink/apps'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport useIsOffline from '../hooks/useIsOffline'\nimport OnLoading from './OnLoading'\nimport generateDefaultData from '../services/generate-default-data'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useFormDefinition from '../hooks/useFormDefinition'\nimport useInjectPages from '../hooks/useInjectPages'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport useExecutedLookupCallback from '../hooks/useExecutedLookupCallback'\nimport useFormIsReadOnly from '../hooks/useFormIsReadOnly'\nimport { Sentry } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementLookupHandler, FormSubmissionModel } from '../types/form'\n\ntype Props = {\n  autoLookupValue?: unknown\n  stringifyAutoLookupValue?: (autoLookupValue: unknown) => string\n  element: FormTypes.LookupFormElement\n  onLookup: FormElementLookupHandler\n  children: React.ReactNode\n}\n\nfunction LookupNotificationComponent({\n  autoLookupValue,\n  stringifyAutoLookupValue,\n  element,\n  onLookup,\n  children,\n}: Props) {\n  const isMounted = useIsMounted()\n  const isOffline = useIsOffline()\n  const definition = useFormDefinition()\n  const injectPagesAfter = useInjectPages()\n  const { executedLookup, executeLookupFailed } = useExecutedLookupCallback()\n\n  const [onCancelLookup, setOnCancelLookup] = React.useState<\n    (() => void) | undefined\n  >(undefined)\n  const [isLookingUp, setIsLookingUp] = React.useState(false)\n  const [hasLookupFailed, setHasLookupFailed] = React.useState(false)\n  const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false)\n  const [isCancellable, setIsCancellable] = React.useState(false)\n  const [isDisabled, setIsDisabled] = React.useState(false)\n  const [lookupErrorHTML, setLookupErrorHTML] = React.useState<string | null>(\n    null,\n  )\n  const formIsReadOnly = useFormIsReadOnly()\n  const { formSubmissionModel: model } = useFormSubmissionModel()\n\n  const mergeLookupData = React.useCallback(\n    (\n      newValue,\n      dataLookupResult,\n      elementLookupResult: FormTypes.FormElement[],\n    ) => {\n      if (elementLookupResult) {\n        if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {\n          injectPagesAfter(\n            element,\n            elementLookupResult as FormTypes.PageElement[],\n            dataLookupResult,\n          )\n          return\n        }\n      }\n\n      onLookup(({ submission, elements }) => {\n        let allElements = elements\n        if (Array.isArray(elementLookupResult)) {\n          const indexOfElement = elements.findIndex(\n            ({ id }) => id === element.id,\n          )\n          if (indexOfElement === -1) {\n            console.log('Could not find element', element)\n          } else {\n            // Filter out already injected elements\n            allElements = elements.filter(\n              // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n              (e) => e.injectedByElementId !== element.id,\n            )\n            allElements.splice(\n              indexOfElement + 1,\n              0,\n              ...elementLookupResult.map((e) => {\n                // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n                e.injectedByElementId = element.id\n                return e\n              }),\n            )\n          }\n        }\n\n        return {\n          elements: allElements,\n          submission: generateDefaultData(allElements, {\n            ...submission,\n            [element.name]: newValue,\n            ...dataLookupResult,\n          }),\n        }\n      })\n    },\n    [element, injectPagesAfter, onLookup],\n  )\n\n  const triggerLookup = React.useCallback(\n    async (newValue) => {\n      // No lookups for read only forms\n      if (formIsReadOnly) return\n      // if the element triggering the lookup has no value..\n      // ..return and do nothing\n      if (newValue === undefined || newValue === null) return\n\n      setIsLookingUp(true)\n\n      if (isOffline) {\n        setHasLookupFailed(true)\n        return\n      }\n\n      executedLookup(element)\n      setIsDisabled(true)\n      setIsCancellable(false)\n      setHasLookupFailed(false)\n      setHasLookupSucceeded(false)\n      setLookupErrorHTML(null)\n\n      const abortController = new AbortController()\n      setOnCancelLookup(() => () => abortController.abort())\n\n      // After certain amount of time, show the cancel button\n      const isCancellableTimeout = setTimeout(() => {\n        setIsCancellable(!abortController.signal.aborted)\n      }, 5000)\n\n      const payload = {\n        definition,\n        submission: {\n          ...model,\n          [element.name]: newValue,\n        },\n      }\n\n      try {\n        const [dataLookupResult, elementLookupResult] = await Promise.all([\n          fetchLookup(\n            element.dataLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortController.signal,\n          ),\n          fetchLookup(\n            element.elementLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortController.signal,\n          ),\n        ])\n\n        mergeLookupData(newValue, dataLookupResult, elementLookupResult)\n\n        if (isMounted.current) {\n          setHasLookupSucceeded(true)\n        }\n\n        // After certain amount of time, hide the lookup succeeded message\n        await new Promise((resolve) => setTimeout(() => resolve(false), 750))\n\n        if (isMounted.current) {\n          setIsLookingUp(false)\n        }\n      } catch (error) {\n        executeLookupFailed(element)\n\n        if (!isMounted.current) {\n          return\n        }\n\n        // Cancelling will throw an error.\n        if (abortController.signal.aborted) {\n          console.log('Fetch aborted')\n          setIsLookingUp(false)\n          return\n        }\n\n        setHasLookupFailed(true)\n        setLookupErrorHTML(\n          typeof error === 'string'\n            ? error\n            : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.',\n        )\n      } finally {\n        clearTimeout(isCancellableTimeout)\n        if (isMounted.current) {\n          setIsDisabled(false)\n          setOnCancelLookup(undefined)\n        }\n      }\n    },\n    [\n      definition,\n      element,\n      executeLookupFailed,\n      executedLookup,\n      formIsReadOnly,\n      isMounted,\n      isOffline,\n      mergeLookupData,\n      model,\n    ],\n  )\n\n  // For certain elements, do not add click event\n  // instead, watch model for changes and trigger lookup function.\n  // We add this stringify function here to allow the value to be\n  // an object which may have a reference change, but the values\n  // have not changed. e.g. the 'location' element's value\n  const autoLookupValueString = stringifyAutoLookupValue\n    ? stringifyAutoLookupValue(autoLookupValue)\n    : autoLookupValue\n  React.useEffect(() => {\n    if (autoLookupValue !== undefined) {\n      triggerLookup(autoLookupValue)\n    }\n    // Wants to use \"triggerLookup\" as a dependency,\n    // however, this will change on any change made on any\n    // element. Checking if \"value\" has changed is enough\n    // to trigger a lookup when the correct dependencies change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoLookupValueString])\n\n  const contextValue = React.useMemo(\n    () => ({\n      isLookup: true,\n      isDisabled,\n      onLookup: triggerLookup,\n    }),\n    [isDisabled, triggerLookup],\n  )\n\n  return (\n    <LookupNotificationContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={clsx('ob-lookup__notification', {\n          'is-looking-up': isLookingUp,\n          'is-extended':\n            hasLookupFailed || (isCancellable && !hasLookupSucceeded),\n        })}\n      >\n        <div className=\"notification has-margin-top-7 has-text-centered\">\n          {hasLookupFailed && (\n            <>\n              <button\n                type=\"button\"\n                className=\"delete fade-in\"\n                onClick={() => setIsLookingUp(false)}\n              />\n\n              <div>\n                {isOffline ? (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-warning\">\n                      wifi_off\n                    </i>\n                    <p className=\"fade-in\">\n                      It looks like you&apos;re offline. Please try again when\n                      connectivity is restored.\n                    </p>\n                  </div>\n                ) : (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-danger\">\n                      error_outline\n                    </i>\n                    <p\n                      className=\"fade-in\"\n                      dangerouslySetInnerHTML={{\n                        __html: lookupErrorHTML || '',\n                      }}\n                      ng-bind-html=\"$ctrl.obLookupCtrl.lookupErrorMessage\"\n                    />\n                  </div>\n                )}\n              </div>\n            </>\n          )}\n\n          {hasLookupSucceeded && (\n            <i className=\"material-icons has-text-success fade-in\">\n              check_circle_outline\n            </i>\n          )}\n\n          {!hasLookupSucceeded && !hasLookupFailed && <OnLoading small />}\n\n          {isCancellable && !hasLookupSucceeded && !hasLookupFailed && (\n            <div className=\"has-margin-top-5 fade-in\">\n              <p>Taking longer than expected?</p>\n              <button\n                type=\"button\"\n                className=\"button has-margin-top-8\"\n                onClick={onCancelLookup}\n              >\n                Cancel\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </LookupNotificationContext.Provider>\n  )\n}\n\nexport default function LookupNotification(props: Props) {\n  if (props.element.isDataLookup || props.element.isElementLookup) {\n    return <LookupNotificationComponent {...props} />\n  }\n\n  return <>{props.children}</>\n}\n\nasync function fetchLookup(\n  formElementLookupId: number | undefined,\n  organisationId: string | undefined,\n  formsAppEnvironmentId: number | undefined,\n  payload: FormSubmissionModel,\n  abortSignal: AbortSignal,\n) {\n  if (\n    typeof formElementLookupId !== 'number' ||\n    !organisationId ||\n    typeof formsAppEnvironmentId !== 'number'\n  ) {\n    return\n  }\n\n  console.log(\n    'Attempting to retrieve form element lookup for id:',\n    formElementLookupId,\n  )\n  const formElementLookup = await formService.getFormElementLookupById(\n    organisationId,\n    formsAppEnvironmentId,\n    formElementLookupId,\n  )\n\n  if (!formElementLookup || !formElementLookup.url) {\n    console.log(\n      'Could not find URL for form element lookup for id:',\n      formElementLookupId,\n      formElementLookup,\n    )\n    throw new Error('Could not find element lookup configuration')\n  }\n\n  const headers = await generateHeaders()\n  console.log(\n    `Attempting a ${formElementLookup.type} lookup request to:`,\n    formElementLookup.url,\n  )\n  const response = await fetch(formElementLookup.url, {\n    method: 'POST',\n    headers,\n    body: JSON.stringify(payload),\n    signal: abortSignal,\n  })\n\n  const data = await response.json()\n  console.log(\n    'Response from lookup to: POST',\n    formElementLookup.url,\n    response.status,\n    data,\n  )\n\n  if (!response.ok) {\n    Sentry.captureException(\n      new Error(`Received ${response.status} status code from lookup`),\n    )\n    if (response.status === 400 && data && data.message) {\n      throw data.message\n    }\n    throw new Error('Invalid response from lookup')\n  }\n\n  return data\n}\n\n// Validate that an element with a lookup has had the lookup button pressed if the element is required\n"]}

package/dist/components/Modal.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+declare type Props = {
+    isOpen: boolean;
+    title: string;
+    children: React.ReactNode;
+    actions: React.ReactNode | null;
+    className?: string;
+    cardClassName?: string;
+    titleClassName?: string;
+    bodyClassName?: string;
+};
+declare function Modal({ isOpen, title, children, className, cardClassName, titleClassName, bodyClassName, actions, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Modal>;
+export default _default;

package/dist/components/Modal.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import clsx from 'clsx';
+function Modal({ isOpen, title, children, className, cardClassName, titleClassName, bodyClassName, actions, }) {
+    return (React.createElement("div", { className: clsx('modal ob-modal', className, {
+            'is-active': isOpen,
+        }) },
+        React.createElement("div", { className: "modal-background-faded" }),
+        React.createElement("div", { className: clsx('modal-card', cardClassName) },
+            React.createElement("header", { className: "modal-card-head" },
+                React.createElement("p", { className: clsx('modal-card-title', titleClassName) }, title)),
+            React.createElement("section", { className: clsx('modal-card-body', bodyClassName) }, children),
+            actions && React.createElement("footer", { className: "modal-card-foot" }, actions))));
+}
+export default React.memo(Modal);
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAavB,SAAS,KAAK,CAAC,EACb,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,OAAO,GACD;IACN,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC3C,WAAW,EAAE,MAAM;SACpB,CAAC;QAEF,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;YAC/C,gCAAQ,SAAS,EAAC,iBAAiB;gBACjC,2BAAG,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAG,KAAK,CAAK,CAC5D;YACT,iCAAS,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,IACvD,QAAQ,CACD;YACT,OAAO,IAAI,gCAAQ,SAAS,EAAC,iBAAiB,IAAE,OAAO,CAAU,CAC9D,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  isOpen: boolean\n  title: string\n  children: React.ReactNode\n  actions: React.ReactNode | null\n  className?: string\n  cardClassName?: string\n  titleClassName?: string\n  bodyClassName?: string\n}\n\nfunction Modal({\n  isOpen,\n  title,\n  children,\n  className,\n  cardClassName,\n  titleClassName,\n  bodyClassName,\n  actions,\n}: Props) {\n  return (\n    <div\n      className={clsx('modal ob-modal', className, {\n        'is-active': isOpen,\n      })}\n    >\n      <div className=\"modal-background-faded\"></div>\n      <div className={clsx('modal-card', cardClassName)}>\n        <header className=\"modal-card-head\">\n          <p className={clsx('modal-card-title', titleClassName)}>{title}</p>\n        </header>\n        <section className={clsx('modal-card-body', bodyClassName)}>\n          {children}\n        </section>\n        {actions && <footer className=\"modal-card-foot\">{actions}</footer>}\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(Modal)\n"]}

package/dist/components/NoResourcesYet.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare type Props = {
+    IconComponent: React.ComponentType<{
+        className: string;
+    }>;
+    title: string;
+    gutterBottom?: boolean;
+    children?: React.ReactNode;
+};
+export declare function NoResourcesYet({ title, children, IconComponent, gutterBottom, }: Props): JSX.Element;
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/NoResourcesYet.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import LargeIconMessage from './messages/LargeIconMessage';
+export function NoResourcesYet({ title, children, IconComponent, gutterBottom, }) {
+    return (React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "primary", gutterBottom: gutterBottom, gutterTop: true }, children));
+}
+export default React.memo(NoResourcesYet);
+//# sourceMappingURL=NoResourcesYet.js.map

package/dist/components/NoResourcesYet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoResourcesYet.js","sourceRoot":"","sources":["../../src/components/NoResourcesYet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,6BAA6B,CAAA;AAS1D,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,YAAY,GACN;IACN,OAAO,CACL,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,EACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,UAER,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAQ,cAAc,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport LargeIconMessage from './messages/LargeIconMessage'\ntype Props = {\n  IconComponent: React.ComponentType<{\n    className: string\n  }>\n  title: string\n  gutterBottom?: boolean\n  children?: React.ReactNode\n}\nexport function NoResourcesYet({\n  title,\n  children,\n  IconComponent,\n  gutterBottom,\n}: Props) {\n  return (\n    <LargeIconMessage\n      IconComponent={IconComponent}\n      title={title}\n      variant=\"primary\"\n      gutterBottom={gutterBottom}\n      gutterTop\n    >\n      {children}\n    </LargeIconMessage>\n  )\n}\nexport default React.memo<Props>(NoResourcesYet)\n"]}

package/dist/components/OnLoading.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type Props = {
+    className?: string;
+    small?: boolean;
+    large?: boolean;
+    tiny?: boolean;
+};
+declare function OnLoading({ className, small, large, tiny }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OnLoading>;
+export default _default;

package/dist/components/OnLoading.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import clsx from 'clsx';
+function OnLoading({ className, small, large, tiny }) {
+    return (React.createElement("on-loading", { className: className },
+        React.createElement("div", { className: clsx('ob-loading on-loading', {
+                small: small,
+                large: large,
+                tiny: tiny,
+            }) })));
+}
+export default React.memo(OnLoading);
+//# sourceMappingURL=OnLoading.js.map

package/dist/components/OnLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnLoading.js","sourceRoot":"","sources":["../../src/components/OnLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AASvB,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAS;IACzD,OAAO,CACL,oCAAY,SAAS,EAAE,SAAS;QAC9B,6BACE,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE;gBACvC,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,IAAI;aACX,CAAC,GACF,CACS,CACd,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  className?: string\n  small?: boolean\n  large?: boolean\n  tiny?: boolean\n}\n\nfunction OnLoading({ className, small, large, tiny }: Props) {\n  return (\n    <on-loading className={className}>\n      <div\n        className={clsx('ob-loading on-loading', {\n          small: small,\n          large: large,\n          tiny: tiny,\n        })}\n      />\n    </on-loading>\n  )\n}\n\nexport default React.memo(OnLoading)\n"]}

package/dist/components/OneBlinkAppsErrorOriginalMessage.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type Props = {
+    error?: Error;
+};
+declare function OneBlinkAppsErrorOriginalMessage({ error }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkAppsErrorOriginalMessage>;
+export default _default;

package/dist/components/OneBlinkAppsErrorOriginalMessage.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { OneBlinkAppsError } from '@oneblink/apps';
+function OneBlinkAppsErrorOriginalMessage({ error }) {
+    if (!error) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "content has-margin-top-6" },
+            React.createElement("pre", null, error.message)),
+        error instanceof OneBlinkAppsError && (React.createElement(OneBlinkAppsErrorOriginalMessage, { error: error.originalError }))));
+}
+export default React.memo(OneBlinkAppsErrorOriginalMessage);
+//# sourceMappingURL=OneBlinkAppsErrorOriginalMessage.js.map

package/dist/components/OneBlinkAppsErrorOriginalMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkAppsErrorOriginalMessage.js","sourceRoot":"","sources":["../../src/components/OneBlinkAppsErrorOriginalMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAMlD,SAAS,gCAAgC,CAAC,EAAE,KAAK,EAAS;IACxD,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,0BAA0B;YACvC,iCAAM,KAAK,CAAC,OAAO,CAAO,CACtB;QACL,KAAK,YAAY,iBAAiB,IAAI,CACrC,oBAAC,gCAAgC,IAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAI,CACjE,CACA,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { OneBlinkAppsError } from '@oneblink/apps'\n\ntype Props = {\n  error?: Error\n}\n\nfunction OneBlinkAppsErrorOriginalMessage({ error }: Props) {\n  if (!error) {\n    return null\n  }\n\n  return (\n    <>\n      <div className=\"content has-margin-top-6\">\n        <pre>{error.message}</pre>\n      </div>\n      {error instanceof OneBlinkAppsError && (\n        <OneBlinkAppsErrorOriginalMessage error={error.originalError} />\n      )}\n    </>\n  )\n}\n\nexport default React.memo(OneBlinkAppsErrorOriginalMessage)\n"]}

package/dist/components/OneBlinkFormElements.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementLookupHandler, FormElementsConditionallyShown, FormElementsValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../types/form';
+export declare type Props<T extends FormTypes._NestedElementsElement> = {
+    formId: number;
+    elements: FormTypes.FormElement[];
+    formElementsConditionallyShown: FormElementsConditionallyShown | undefined;
+    formElementsValidation: FormElementsValidation | undefined;
+    displayValidationMessages: boolean;
+    onChange: FormElementValueChangeHandler;
+    onLookup: FormElementLookupHandler;
+    isEven?: boolean;
+    idPrefix: string;
+    model: FormSubmissionModel;
+    parentElement: T;
+};
+declare function OneBlinkFormElements<T extends FormTypes._NestedElementsElement>({ formId, elements, isEven, idPrefix, displayValidationMessages, formElementsValidation, formElementsConditionallyShown, onChange, onLookup, model, parentElement, }: Props<T>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormElements>;
+export default _default;