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

package/dist/OneBlinkFormStoreView.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+interface Props {
+    form: FormTypes.Form;
+}
+declare function FormStoreContainer({ form }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormStoreContainer>;
+export default _default;

package/dist/OneBlinkFormStoreView.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import LoadingWithMessage from './components/LoadingWithMessage';
+import ErrorMessage from './components/ErrorMessage';
+import FormStore from './components/formStore/FormStore';
+import { formStoreService } from '@oneblink/apps';
+import WarningIcon from '@mui/icons-material/Warning';
+import useLoadDataState from './hooks/useLoadDataState';
+import { Box, Button, Container, Grid, Typography } from '@mui/material';
+import LargeIconMessage from './components/messages/LargeIconMessage';
+import { ListItem, UnorderedList } from './components/Lists';
+import useLegacyFormElements from './hooks/useLegacyElements';
+function FormStoreContainer({ form }) {
+    const fetchFormStoreDefinition = React.useCallback((abortSignal) => {
+        return formStoreService.getFormStoreDefinition(form.id, abortSignal);
+    }, [form.id]);
+    const [formStoreDefinitionState, onTryAgain] = useLoadDataState(fetchFormStoreDefinition);
+    const { formElementsUsingLegacyStorage, formElementsUsingLegacyNames } = useLegacyFormElements((form === null || form === void 0 ? void 0 : form.elements) || []);
+    if (formStoreDefinitionState.status === 'LOADING') {
+        return React.createElement(LoadingWithMessage, null);
+    }
+    if (formStoreDefinitionState.status === 'ERROR') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ErrorMessage, { title: "Error Retrieving Form Definition", gutterTop: true }, formStoreDefinitionState.error.message),
+            React.createElement(Grid, { container: true, justifyContent: "center" },
+                React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))));
+    }
+    if (formElementsUsingLegacyStorage.length ||
+        formElementsUsingLegacyNames.length) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(LargeIconMessage, { IconComponent: WarningIcon, title: "Incompatible Form Elements", variant: "warning", gutterTop: true, gutterBottom: true }, "This Form has Element(s) that are incompatible with Data Manager. If you would like to be able to view submissions for this Form, please follow the instructions below to ensure your Form is compatible."),
+            React.createElement(Container, { maxWidth: "sm" },
+                !!formElementsUsingLegacyStorage.length && (React.createElement(React.Fragment, null,
+                    React.createElement(Typography, { variant: "body2" },
+                        "The following Element(s) are using the ",
+                        React.createElement("b", null, "Embedded"),
+                        " storage type. Please update them to use either the Private or Public storage type."),
+                    React.createElement(Box, { marginBottom: 1 },
+                        React.createElement(UnorderedList, null, formElementsUsingLegacyStorage.map(({ name, label }, index) => (React.createElement(ListItem, { key: index },
+                            React.createElement("b", null, label),
+                            ' ',
+                            React.createElement(Typography, { component: "span", variant: "body2", color: "textSecondary" }, name)))))))),
+                !!formElementsUsingLegacyNames.length && (React.createElement(React.Fragment, null,
+                    React.createElement(Typography, { variant: "body2" },
+                        "This following Element(s) have a ",
+                        React.createElement("b", null, "Name"),
+                        " property with unsupported characters. Please update them to have only letters, numbers, underscores and dashes."),
+                    React.createElement(UnorderedList, null, formElementsUsingLegacyNames.map(({ name, label }, index) => (React.createElement(ListItem, { key: index },
+                        React.createElement("b", null, label),
+                        ' ',
+                        React.createElement(Typography, { component: "span", variant: "body2", color: "textSecondary" }, name))))))))));
+    }
+    return (React.createElement(FormStore, { form: form, formElements: formStoreDefinitionState.result.formElements }));
+}
+export default React.memo(FormStoreContainer);
+//# sourceMappingURL=OneBlinkFormStoreView.js.map

package/dist/OneBlinkFormStoreView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreView.js","sourceRoot":"","sources":["../src/OneBlinkFormStoreView.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport LoadingWithMessage from './components/LoadingWithMessage'\nimport ErrorMessage from './components/ErrorMessage'\nimport FormStore from './components/formStore/FormStore'\nimport { formStoreService } from '@oneblink/apps'\nimport WarningIcon from '@mui/icons-material/Warning'\nimport useLoadDataState from './hooks/useLoadDataState'\nimport { Box, Button, Container, Grid, Typography } from '@mui/material'\nimport LargeIconMessage from './components/messages/LargeIconMessage'\nimport { ListItem, UnorderedList } from './components/Lists'\nimport useLegacyFormElements from './hooks/useLegacyElements'\nimport { FormTypes } from '@oneblink/types'\n\ninterface Props {\n  form: FormTypes.Form\n}\nfunction FormStoreContainer({ form }: Props) {\n  const fetchFormStoreDefinition = React.useCallback(\n    (abortSignal?: AbortSignal) => {\n      return formStoreService.getFormStoreDefinition(form.id, abortSignal)\n    },\n    [form.id],\n  )\n  const [formStoreDefinitionState, onTryAgain] = useLoadDataState(\n    fetchFormStoreDefinition,\n  )\n\n  const { formElementsUsingLegacyStorage, formElementsUsingLegacyNames } =\n    useLegacyFormElements(form?.elements || [])\n\n  if (formStoreDefinitionState.status === 'LOADING') {\n    return <LoadingWithMessage />\n  }\n\n  if (formStoreDefinitionState.status === 'ERROR') {\n    return (\n      <>\n        <ErrorMessage title=\"Error Retrieving Form Definition\" gutterTop>\n          {formStoreDefinitionState.error.message}\n        </ErrorMessage>\n        <Grid container justifyContent=\"center\">\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => onTryAgain()}\n          >\n            Try Again\n          </Button>\n        </Grid>\n      </>\n    )\n  }\n\n  if (\n    formElementsUsingLegacyStorage.length ||\n    formElementsUsingLegacyNames.length\n  ) {\n    return (\n      <>\n        <LargeIconMessage\n          IconComponent={WarningIcon}\n          title=\"Incompatible Form Elements\"\n          variant=\"warning\"\n          gutterTop\n          gutterBottom\n        >\n          This Form has Element(s) that are incompatible with Data Manager. If\n          you would like to be able to view submissions for this Form, please\n          follow the instructions below to ensure your Form is compatible.\n        </LargeIconMessage>\n        <Container maxWidth=\"sm\">\n          {!!formElementsUsingLegacyStorage.length && (\n            <>\n              <Typography variant=\"body2\">\n                The following Element(s) are using the <b>Embedded</b> storage\n                type. Please update them to use either the Private or Public\n                storage type.\n              </Typography>\n              <Box marginBottom={1}>\n                <UnorderedList>\n                  {formElementsUsingLegacyStorage.map(\n                    ({ name, label }, index) => (\n                      <ListItem key={index}>\n                        <b>{label}</b>{' '}\n                        <Typography\n                          component=\"span\"\n                          variant=\"body2\"\n                          color=\"textSecondary\"\n                        >\n                          {name}\n                        </Typography>\n                      </ListItem>\n                    ),\n                  )}\n                </UnorderedList>\n              </Box>\n            </>\n          )}\n          {!!formElementsUsingLegacyNames.length && (\n            <>\n              <Typography variant=\"body2\">\n                This following Element(s) have a <b>Name</b> property with\n                unsupported characters. Please update them to have only letters,\n                numbers, underscores and dashes.\n              </Typography>\n              <UnorderedList>\n                {formElementsUsingLegacyNames.map(({ name, label }, index) => (\n                  <ListItem key={index}>\n                    <b>{label}</b>{' '}\n                    <Typography\n                      component=\"span\"\n                      variant=\"body2\"\n                      color=\"textSecondary\"\n                    >\n                      {name}\n                    </Typography>\n                  </ListItem>\n                ))}\n              </UnorderedList>\n            </>\n          )}\n        </Container>\n      </>\n    )\n  }\n\n  return (\n    <FormStore\n      form={form}\n      formElements={formStoreDefinitionState.result.formElements}\n    />\n  )\n}\n\nexport default React.memo(FormStoreContainer)\n"]}

package/dist/OneBlinkReadOnlyForm.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormSubmissionModel } from './types/form';
-declare type Props = {
-    form: FormTypes.Form;
-    initialSubmission?: FormSubmissionModel;
-    googleMapsApiKey?: string;
-};
-declare function OneBlinkReadOnlyForm({ form, initialSubmission, ...rest }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof OneBlinkReadOnlyForm>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormSubmissionModel } from './types/form';
+declare type Props = {
+    form: FormTypes.Form;
+    initialSubmission?: FormSubmissionModel;
+    googleMapsApiKey?: string;
+};
+declare function OneBlinkReadOnlyForm({ form, initialSubmission, ...rest }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkReadOnlyForm>;
+export default _default;

package/dist/OneBlinkReadOnlyForm.js

@@ -1,49 +1,49 @@
-import * as React from 'react';
-import OneBlinkFormBase from './OneBlinkFormBase';
-import useFormSubmissionState from './hooks/useFormSubmissionState';
-function recursivelySetReadOnly(elements) {
-    const newElements = elements
-        .filter((element) => element.type !== 'captcha')
-        .map((element) => {
-        if ((element.type === 'form' ||
-            element.type === 'section' ||
-            element.type === 'page' ||
-            element.type === 'repeatableSet') &&
-            Array.isArray(element.elements)) {
-            return {
-                ...element,
-                elements: recursivelySetReadOnly(element.elements) || [],
-            };
-        }
-        if (element.type !== 'section' &&
-            element.type !== 'heading' &&
-            element.type !== 'page' &&
-            element.type !== 'html' &&
-            element.type !== 'captcha' &&
-            element.type !== 'image' &&
-            element.type !== 'calculation' &&
-            element.type !== 'summary' &&
-            element.type !== 'form' &&
-            element.type !== 'infoPage') {
-            return {
-                ...element,
-                readOnly: true,
-            };
-        }
-        return element;
-    });
-    return newElements;
-}
-function OneBlinkReadOnlyForm({ form, initialSubmission, ...rest }) {
-    const [{ submission, definition }, setFormSubmission] = useFormSubmissionState(form, initialSubmission);
-    const readOnlyDefinition = React.useMemo(() => {
-        return {
-            ...definition,
-            elements: recursivelySetReadOnly(definition.elements || []),
-        };
-    }, [definition]);
-    const noop = React.useCallback(() => { }, []);
-    return (React.createElement(OneBlinkFormBase, { definition: readOnlyDefinition, submission: submission, disabled: true, isReadOnly: true, onCancel: noop, onSubmit: noop, setFormSubmission: setFormSubmission, ...rest }));
-}
-export default React.memo(OneBlinkReadOnlyForm);
+import * as React from 'react';
+import OneBlinkFormBase from './OneBlinkFormBase';
+import useFormSubmissionState from './hooks/useFormSubmissionState';
+function recursivelySetReadOnly(elements) {
+    const newElements = elements
+        .filter((element) => element.type !== 'captcha')
+        .map((element) => {
+        if ((element.type === 'form' ||
+            element.type === 'section' ||
+            element.type === 'page' ||
+            element.type === 'repeatableSet') &&
+            Array.isArray(element.elements)) {
+            return {
+                ...element,
+                elements: recursivelySetReadOnly(element.elements) || [],
+            };
+        }
+        if (element.type !== 'section' &&
+            element.type !== 'heading' &&
+            element.type !== 'page' &&
+            element.type !== 'html' &&
+            element.type !== 'captcha' &&
+            element.type !== 'image' &&
+            element.type !== 'calculation' &&
+            element.type !== 'summary' &&
+            element.type !== 'form' &&
+            element.type !== 'infoPage') {
+            return {
+                ...element,
+                readOnly: true,
+            };
+        }
+        return element;
+    });
+    return newElements;
+}
+function OneBlinkReadOnlyForm({ form, initialSubmission, ...rest }) {
+    const [{ submission, definition }, setFormSubmission] = useFormSubmissionState(form, initialSubmission);
+    const readOnlyDefinition = React.useMemo(() => {
+        return {
+            ...definition,
+            elements: recursivelySetReadOnly(definition.elements || []),
+        };
+    }, [definition]);
+    const noop = React.useCallback(() => { }, []);
+    return (React.createElement(OneBlinkFormBase, { definition: readOnlyDefinition, submission: submission, disabled: true, isReadOnly: true, onCancel: noop, onSubmit: noop, setFormSubmission: setFormSubmission, ...rest }));
+}
+export default React.memo(OneBlinkReadOnlyForm);
 //# sourceMappingURL=OneBlinkReadOnlyForm.js.map

package/dist/components/AnnotationModal.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare function AnnotationModal({ imageSrc, onClose, onSave, }: {
+    imageSrc: string;
+    onClose: () => void;
+    onSave: (newValue: string) => void;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AnnotationModal>;
+export default _default;

package/dist/components/AnnotationModal.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import SignatureCanvas from 'react-signature-canvas';
+import useBooleanState from '../hooks/useBooleanState';
+import scrollingService from '../services/scrolling-service';
+const annotationButtonColours = [
+    '#000000',
+    '#ffffff',
+    '#f44336',
+    '#e91e63',
+    '#9c27b0',
+    '#673ab7',
+    '#3f51b5',
+    '#2196f3',
+    '#03a9f4',
+    '#00bcd4',
+    '#009688',
+    '#4caf50',
+    '#8bc34a',
+    '#cddc39',
+    '#ffee58',
+    '#ffca28',
+    '#ffa726',
+    '#ff5722',
+];
+function AnnotationModal({ imageSrc, onClose, onSave, }) {
+    const annotationContentElementRef = React.useRef(null);
+    const bmSignaturePadRef = React.useRef(null);
+    const signatureCanvasRef = React.useRef(null);
+    const [isDirty, setDirty] = useBooleanState(false);
+    const [penColour, setPenColour] = React.useState(annotationButtonColours[0]);
+    const handleCancelAnnotation = React.useCallback(() => {
+        if (signatureCanvasRef.current) {
+            console.log('Clearing annotation...');
+            signatureCanvasRef.current.clear();
+        }
+        onClose();
+    }, [onClose]);
+    const handleSaveAnnotation = React.useCallback(() => {
+        if (signatureCanvasRef.current) {
+            onSave(signatureCanvasRef.current.toDataURL());
+        }
+    }, [onSave]);
+    // SETTING CANVAS FROM PASSED VALUE
+    React.useEffect(() => {
+        const annotationContentElement = annotationContentElementRef.current;
+        const bmSignaturePadElement = bmSignaturePadRef.current;
+        const signatureCanvas = signatureCanvasRef.current;
+        if (!annotationContentElement ||
+            !bmSignaturePadElement ||
+            !signatureCanvas ||
+            typeof imageSrc !== 'string') {
+            return;
+        }
+        const canvasElement = signatureCanvas.getCanvas();
+        // Disable scrolling to allow for smooth drawing
+        scrollingService.disableScrolling();
+        const maxWidth = annotationContentElement.clientWidth;
+        const maxHeight = annotationContentElement.clientHeight;
+        const i = new Image();
+        i.onload = function () {
+            const imageWidth = i.width;
+            const imageHeight = i.height;
+            let canvasWidth = imageWidth;
+            let canvasHeight = imageHeight;
+            if (imageWidth > maxWidth || imageHeight > maxHeight) {
+                const widthRatio = maxWidth / imageWidth;
+                const heightRatio = maxHeight / imageHeight;
+                const ratio = Math.min(widthRatio, heightRatio);
+                canvasWidth = ratio * imageWidth;
+                canvasHeight = ratio * imageHeight;
+            }
+            bmSignaturePadElement.style.width = `${canvasWidth}px`;
+            bmSignaturePadElement.style.height = `${canvasHeight}px`;
+            bmSignaturePadElement.style.backgroundSize = 'cover';
+            bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`;
+            canvasElement.width = canvasWidth;
+            canvasElement.height = canvasHeight;
+        };
+        console.log('imageSrc', imageSrc);
+        i.src = imageSrc;
+        return () => {
+            scrollingService.enableScrolling();
+        };
+    }, [imageSrc]);
+    return (React.createElement("div", { className: "modal is-active" },
+        React.createElement("div", { className: "modal-background-faded" }),
+        React.createElement("div", { className: "ob-annotation" },
+            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-colours" }, annotationButtonColours.map((colour, index) => {
+                return (React.createElement("button", { key: index, type: "button", className: clsx('button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button', {
+                        'is-selected': penColour === colour,
+                    }), onClick: () => setPenColour(colour), style: { backgroundColor: colour } }));
+            })),
+            React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
+                React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
+                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, 
+                        // @ts-expect-error ???
+                        onEnd: setDirty, penColor: penColour }))),
+            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
+                React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation }, "Cancel"),
+                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation }, "Save")))));
+}
+export default React.memo(AnnotationModal);
+//# sourceMappingURL=AnnotationModal.js.map

package/dist/components/AnnotationModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../src/components/AnnotationModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport scrollingService from '../services/scrolling-service'\n\nconst annotationButtonColours = [\n  '#000000',\n  '#ffffff',\n  '#f44336',\n  '#e91e63',\n  '#9c27b0',\n  '#673ab7',\n  '#3f51b5',\n  '#2196f3',\n  '#03a9f4',\n  '#00bcd4',\n  '#009688',\n  '#4caf50',\n  '#8bc34a',\n  '#cddc39',\n  '#ffee58',\n  '#ffca28',\n  '#ffa726',\n  '#ff5722',\n]\n\nfunction AnnotationModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (newValue: string) => void\n}) {\n  const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n  const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n  const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isDirty, setDirty] = useBooleanState(false)\n  const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n  const handleCancelAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      console.log('Clearing annotation...')\n      signatureCanvasRef.current.clear()\n    }\n    onClose()\n  }, [onClose])\n\n  const handleSaveAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      onSave(signatureCanvasRef.current.toDataURL())\n    }\n  }, [onSave])\n\n  // SETTING CANVAS FROM PASSED VALUE\n  React.useEffect(() => {\n    const annotationContentElement = annotationContentElementRef.current\n    const bmSignaturePadElement = bmSignaturePadRef.current\n    const signatureCanvas = signatureCanvasRef.current\n    if (\n      !annotationContentElement ||\n      !bmSignaturePadElement ||\n      !signatureCanvas ||\n      typeof imageSrc !== 'string'\n    ) {\n      return\n    }\n    const canvasElement = signatureCanvas.getCanvas()\n\n    // Disable scrolling to allow for smooth drawing\n    scrollingService.disableScrolling()\n\n    const maxWidth = annotationContentElement.clientWidth\n    const maxHeight = annotationContentElement.clientHeight\n\n    const i = new Image()\n    i.onload = function () {\n      const imageWidth = i.width\n      const imageHeight = i.height\n      let canvasWidth = imageWidth\n      let canvasHeight = imageHeight\n\n      if (imageWidth > maxWidth || imageHeight > maxHeight) {\n        const widthRatio = maxWidth / imageWidth\n        const heightRatio = maxHeight / imageHeight\n        const ratio = Math.min(widthRatio, heightRatio)\n\n        canvasWidth = ratio * imageWidth\n        canvasHeight = ratio * imageHeight\n      }\n\n      bmSignaturePadElement.style.width = `${canvasWidth}px`\n      bmSignaturePadElement.style.height = `${canvasHeight}px`\n      bmSignaturePadElement.style.backgroundSize = 'cover'\n      bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n      canvasElement.width = canvasWidth\n      canvasElement.height = canvasHeight\n    }\n    console.log('imageSrc', imageSrc)\n    i.src = imageSrc\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [imageSrc])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-annotation\">\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-colours\">\n          {annotationButtonColours.map((colour, index) => {\n            return (\n              <button\n                key={index}\n                type=\"button\"\n                className={clsx(\n                  'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n                  {\n                    'is-selected': penColour === colour,\n                  },\n                )}\n                onClick={() => setPenColour(colour)}\n                style={{ backgroundColor: colour }}\n              />\n            )\n          })}\n        </div>\n        <div\n          ref={annotationContentElementRef}\n          className=\"ob-annotation__content\"\n        >\n          <div\n            ref={bmSignaturePadRef}\n            className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n          >\n            <SignatureCanvas\n              ref={signatureCanvasRef}\n              clearOnResize={false}\n              // @ts-expect-error ???\n              onEnd={setDirty}\n              penColor={penColour}\n            />\n          </div>\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n            onClick={handleCancelAnnotation}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n            disabled={!isDirty}\n            onClick={handleSaveAnnotation}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(AnnotationModal)\n"]}

package/dist/components/AutocompleteDropdown.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+declare type AutocompleteOption<T> = {
+    label: string;
+    value: string;
+    data?: T;
+};
+declare type Props<T> = {
+    id: string;
+    label: string;
+    value: unknown | undefined;
+    placeholder: string | undefined;
+    required: boolean | undefined;
+    disabled: boolean | undefined;
+    isLoading?: boolean;
+    hasError?: boolean;
+    validationMessage: string | undefined;
+    displayValidationMessage: boolean;
+    searchDebounceMs: number;
+    searchMinCharacters: number;
+    onChangeValue: (newValue: string | undefined, data?: T) => Promise<void> | void;
+    onChangeLabel: (newLabel: string) => void;
+    onSearch: (label: string, abortSignal: AbortSignal) => Promise<AutocompleteOption<T>[]>;
+};
+declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, }: Props<T>): JSX.Element;
+declare const _default: typeof AutocompleteDropdown;
+export default _default;

package/dist/components/AutocompleteDropdown.js

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import useBooleanState from '../hooks/useBooleanState';
+import { Sentry } from '@oneblink/apps';
+function AutocompleteDropdown({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, }) {
+    const optionsContainerElement = React.useRef(null);
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] = React.useState(0);
+    const [options, setOptions] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
+    const [isOpen, onOpen, onClose] = useBooleanState(false);
+    const onSelectOption = React.useCallback((option) => {
+        onChangeLabel(option.label);
+        onChangeValue(option.value, option.data);
+        onClose();
+    }, [onChangeLabel, onChangeValue, onClose]);
+    const handleClickOption = React.useCallback((event, option) => {
+        console.log('Selected element option in autocomplete', option);
+        event.preventDefault();
+        event.stopPropagation();
+        onSelectOption(option);
+    }, [onSelectOption]);
+    const onFocus = React.useCallback(() => {
+        setCurrentFocusedOptionIndex(0);
+        onOpen();
+    }, [onOpen]);
+    // When moving away from the input, if this is no value remove
+    // the label to show the user they have not selected a value
+    const handleBlur = React.useCallback(() => {
+        setIsDirty(true);
+        setError(null);
+        onClose();
+        if (!value && Array.isArray(options)) {
+            // If there is no option currently selected but the typed in label
+            // matches an option's label, set that option as the value, otherwise remove label
+            if (label) {
+                const lowerCase = label.toLowerCase();
+                const option = options.find((option) => option.label.toLowerCase() === lowerCase);
+                if (option) {
+                    console.log('Setting value after blurring away from autocomplete');
+                    onSelectOption(option);
+                    return;
+                }
+            }
+            console.log('Removing label after blurring away from autocomplete');
+            onChangeLabel('');
+        }
+    }, [label, onChangeLabel, onClose, onSelectOption, options, value]);
+    const onKeyDown = React.useCallback((event) => {
+        if (!options) {
+            return;
+        }
+        const enterPressed = event.keyCode === 13;
+        const upArrowPressed = event.keyCode === 38;
+        const downArrowPressed = event.keyCode === 40;
+        if (!upArrowPressed && !downArrowPressed && !enterPressed) {
+            return;
+        }
+        event.preventDefault();
+        const previousFocusedOptionIndex = currentFocusedOptionIndex;
+        let nextFocusedOptionIndex = currentFocusedOptionIndex;
+        if (upArrowPressed) {
+            nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1);
+        }
+        else if (downArrowPressed) {
+            nextFocusedOptionIndex = Math.min(options.length - 1, currentFocusedOptionIndex + 1);
+        }
+        else if (enterPressed) {
+            const option = options[nextFocusedOptionIndex];
+            if (option) {
+                onSelectOption(option);
+            }
+        }
+        // If the index has changed, need to ensure the active option is visible
+        if (previousFocusedOptionIndex !== nextFocusedOptionIndex &&
+            optionsContainerElement.current) {
+            const activeStepElement = optionsContainerElement.current.querySelector(`.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`);
+            if (activeStepElement) {
+                activeStepElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'start',
+                });
+            }
+            setCurrentFocusedOptionIndex(nextFocusedOptionIndex);
+        }
+    }, [currentFocusedOptionIndex, options, onSelectOption]);
+    const handleChangeLabel = React.useCallback((e) => {
+        const newLabel = e.target.value;
+        onOpen();
+        setCurrentFocusedOptionIndex(0);
+        // Remove value when changing label
+        onChangeValue(undefined);
+        onChangeLabel(newLabel);
+    }, [onChangeLabel, onChangeValue, onOpen]);
+    React.useEffect(() => {
+        setError(null);
+        if (!isOpen || label.length < searchMinCharacters) {
+            setIsFetchingOptions(false);
+            return;
+        }
+        setIsFetchingOptions(true);
+        let ignore = false;
+        const abortController = new AbortController();
+        const timeoutId = setTimeout(async () => {
+            let newOptions = [];
+            let newError = null;
+            try {
+                newOptions = await onSearch(label, abortController.signal);
+            }
+            catch (error) {
+                // Cancelling will throw an error.
+                if (!abortController.signal.aborted) {
+                    console.warn('Error while fetching autocomplete options', error);
+                    Sentry.captureException(error);
+                    newError = error;
+                }
+            }
+            if (!ignore) {
+                setError(newError);
+                setOptions(newOptions);
+                setIsFetchingOptions(false);
+            }
+        }, searchDebounceMs);
+        return () => {
+            ignore = true;
+            clearTimeout(timeoutId);
+            abortController.abort();
+        };
+    }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters]);
+    const isShowingLoading = isFetchingOptions || !!isLoading;
+    const isShowingValid = !isShowingLoading && value !== undefined;
+    const isShowingError = !isShowingLoading && !!hasError;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: clsx('dropdown', {
+                'is-active': isOpen && Array.isArray(options),
+            }) },
+            React.createElement("div", { className: "field" },
+                React.createElement("div", { className: clsx('cypress-autocomplete-field-control control is-expanded', {
+                        'is-loading': isShowingLoading,
+                        'has-icons-right': isShowingValid || isShowingError,
+                    }) },
+                    React.createElement("input", { type: "text", placeholder: placeholder, id: id, autoComplete: "off", className: "cypress-autocomplete-control input ob-input", required: required, value: label, disabled: disabled, onFocus: onFocus, onBlur: handleBlur, onKeyDown: onKeyDown, onChange: handleChangeLabel }),
+                    isShowingValid && (React.createElement("span", { className: " ob-input-icon icon is-small is-right" },
+                        React.createElement("i", { className: "material-icons is-size-5 has-text-success" }, "check"))),
+                    isShowingError && (React.createElement("span", { className: " ob-input-icon icon is-small is-right" },
+                        React.createElement("i", { className: "material-icons is-size-5 has-text-danger" }, "error"))))),
+            React.createElement("div", { className: "dropdown-menu" },
+                React.createElement("div", { ref: optionsContainerElement, className: "ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content" }, error ? (React.createElement("a", { className: "dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error" },
+                    React.createElement("span", { className: "has-text-danger" }, error.message))) : label.length < searchMinCharacters ? (React.createElement("a", { className: "dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters" },
+                    React.createElement("i", null,
+                        "Enter at least ",
+                        searchMinCharacters,
+                        " character(s) to search"))) : isShowingLoading ? (React.createElement("a", { className: "dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching" },
+                    React.createElement("i", null, "Searching..."))) : options && options.length ? (options.map((option, index) => (React.createElement("a", { key: option.value, className: clsx(`dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`, {
+                        'is-active': currentFocusedOptionIndex === index,
+                    }), onMouseDown: (e) => handleClickOption(e, option), dangerouslySetInnerHTML: {
+                        __html: highlightLabel(option.label, label),
+                    } })))) : (React.createElement("a", { className: "dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches" },
+                    React.createElement("i", null, "No matches found")))))),
+        (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)))));
+}
+export default React.memo(AutocompleteDropdown);
+function highlightLabel(text, phrase) {
+    if (phrase) {
+        text = text.replace(new RegExp('(' + phrase + ')', 'gi'), '<b>$1</b>');
+    }
+    return text;
+}
+//# sourceMappingURL=AutocompleteDropdown.js.map

package/dist/components/AutocompleteDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../src/components/AutocompleteDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgCvC,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,GACC;IACT,MAAM,uBAAuB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,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,CAAC,KAAK,EAAE,MAA6B,EAAE,EAAE;QACvC,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,CAAC,GAAG,EAAE;QACxC,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,QAAQ,CAAC,IAAI,CAAC,CAAA;QACd,OAAO,EAAE,CAAA;QAET,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpC,kEAAkE;YAClE,kFAAkF;YAClF,IAAI,KAAK,EAAE;gBACT,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;gBACrC,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;oBACV,OAAO,CAAC,GAAG,CAAC,qDAAqD,CAAC,CAAA;oBAClE,cAAc,CAAC,MAAM,CAAC,CAAA;oBACtB,OAAM;iBACP;aACF;YACD,OAAO,CAAC,GAAG,CAAC,sDAAsD,CAAC,CAAA;YACnE,aAAa,CAAC,EAAE,CAAC,CAAA;SAClB;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnE,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;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;YACzD,OAAM;SACP;QAED,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,MAAM,0BAA0B,GAAG,yBAAyB,CAAA;QAC5D,IAAI,sBAAsB,GAAG,yBAAyB,CAAA;QACtD,IAAI,cAAc,EAAE;YAClB,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,yBAAyB,GAAG,CAAC,CAAC,CAAA;SACpE;aAAM,IAAI,gBAAgB,EAAE;YAC3B,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAC/B,OAAO,CAAC,MAAM,GAAG,CAAC,EAClB,yBAAyB,GAAG,CAAC,CAC9B,CAAA;SACF;aAAM,IAAI,YAAY,EAAE;YACvB,MAAM,MAAM,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAA;YAC9C,IAAI,MAAM,EAAE;gBACV,cAAc,CAAC,MAAM,CAAC,CAAA;aACvB;SACF;QAED,wEAAwE;QACxE,IACE,0BAA0B,KAAK,sBAAsB;YACrD,uBAAuB,CAAC,OAAO,EAC/B;YACA,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,CAAC,aAAa,CACrE,oCAAoC,sBAAsB,EAAE,CAC7D,CAAA;YACD,IAAI,iBAAiB,EAAE;gBACrB,iBAAiB,CAAC,cAAc,CAAC;oBAC/B,QAAQ,EAAE,QAAQ;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,OAAO;iBAChB,CAAC,CAAA;aACH;YACD,4BAA4B,CAAC,sBAAsB,CAAC,CAAA;SACrD;IACH,CAAC,EACD,CAAC,yBAAyB,EAAE,OAAO,EAAE,cAAc,CAAC,CACrD,CAAA;IAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,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,mCAAmC;QACnC,aAAa,CAAC,SAAS,CAAC,CAAA;QACxB,aAAa,CAAC,QAAQ,CAAC,CAAA;IACzB,CAAC,EACD,CAAC,aAAa,EAAE,aAAa,EAAE,MAAM,CAAC,CACvC,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;YACjD,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC3B,OAAM;SACP;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;gBACF,UAAU,GAAG,MAAM,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;aAC3D;YAAC,OAAO,KAAK,EAAE;gBACd,kCAAkC;gBAClC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE;oBACnC,OAAO,CAAC,IAAI,CAAC,2CAA2C,EAAE,KAAK,CAAC,CAAA;oBAChE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;oBAC9B,QAAQ,GAAG,KAAc,CAAA;iBAC1B;aACF;YACD,IAAI,CAAC,MAAM,EAAE;gBACX,QAAQ,CAAC,QAAQ,CAAC,CAAA;gBAClB,UAAU,CAAC,UAAU,CAAC,CAAA;gBACtB,oBAAoB,CAAC,KAAK,CAAC,CAAA;aAC5B;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,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,CAAC,QAAQ,CAAA;IAEtD,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,EAAC,KAAK,EAClB,SAAS,EAAC,6CAA6C,EACvD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,iBAAiB,GAC3B;oBACD,cAAc,IAAI,CACjB,8BAAM,SAAS,EAAC,uCAAuC;wBACrD,2BAAG,SAAS,EAAC,2CAA2C,YAEpD,CACC,CACR;oBACA,cAAc,IAAI,CACjB,8BAAM,SAAS,EAAC,uCAAuC;wBACrD,2BAAG,SAAS,EAAC,0CAA0C,YAEnD,CACC,CACR,CACG,CACF;YAEN,6BAAK,SAAS,EAAC,eAAe;gBAC5B,6BACE,GAAG,EAAE,uBAAuB,EAC5B,SAAS,EAAC,0FAA0F,IAEnG,KAAK,CAAC,CAAC,CAAC,CACP,2BAAG,SAAS,EAAC,gFAAgF;oBAC3F,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;oBAChG;;wBACkB,mBAAmB;kDACjC,CACF,CACL,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACrB,2BAAG,SAAS,EAAC,mFAAmF;oBAC9F,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;wBACE,WAAW,EAAE,yBAAyB,KAAK,KAAK;qBACjD,CACF,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC,EAChD,uBAAuB,EAAE;wBACvB,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;qBAC5C,GACD,CACH,CAAC,CACH,CAAC,CAAC,CAAC,CACF,2BAAG,SAAS,EAAC,mFAAmF;oBAC9F,kDAAuB,CACrB,CACL,CACG,CACF,CACF;QAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC;YACpC,CAAC,CAAC,iBAAiB;YACnB,CAAC,gBAAgB,IAAI,CACnB,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,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;QACV,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,GAAG,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,CAAA;KACvE;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { Sentry } from '@oneblink/apps'\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}\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}: Props<T>) {\n  const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n  const [isDirty, setIsDirty] = React.useState(false)\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    (event, option: AutocompleteOption<T>) => {\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    setIsDirty(true)\n    setError(null)\n    onClose()\n\n    if (!value && Array.isArray(options)) {\n      // If there is no option currently selected but the typed in label\n      // matches an option's label, set that option as the value, otherwise remove label\n      if (label) {\n        const lowerCase = label.toLowerCase()\n        const option = options.find(\n          (option) => option.label.toLowerCase() === lowerCase,\n        )\n        if (option) {\n          console.log('Setting value after blurring away from autocomplete')\n          onSelectOption(option)\n          return\n        }\n      }\n      console.log('Removing label after blurring away from autocomplete')\n      onChangeLabel('')\n    }\n  }, [label, onChangeLabel, onClose, onSelectOption, options, value])\n\n  const onKeyDown = React.useCallback(\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    (e) => {\n      const newLabel = e.target.value\n      onOpen()\n      setCurrentFocusedOptionIndex(0)\n\n      // Remove value when changing label\n      onChangeValue(undefined)\n      onChangeLabel(newLabel)\n    },\n    [onChangeLabel, onChangeValue, 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  const isShowingLoading = isFetchingOptions || !!isLoading\n  const isShowingValid = !isShowingLoading && value !== undefined\n  const isShowingError = !isShowingLoading && !!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=\"off\"\n              className=\"cypress-autocomplete-control input ob-input\"\n              required={required}\n              value={label}\n              disabled={disabled}\n              onFocus={onFocus}\n              onBlur={handleBlur}\n              onKeyDown={onKeyDown}\n              onChange={handleChangeLabel}\n            />\n            {isShowingValid && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <i className=\"material-icons is-size-5 has-text-success\">\n                  check\n                </i>\n              </span>\n            )}\n            {isShowingError && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <i className=\"material-icons is-size-5 has-text-danger\">\n                  error\n                </i>\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                  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          </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(new RegExp('(' + phrase + ')', 'gi'), '<b>$1</b>')\n  }\n\n  return text\n}\n"]}

package/dist/components/CopyToClipboardButton.d.ts

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

package/dist/components/CopyToClipboardButton.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import utilsService from '../services/utils-service';
+function CopyToClipboardButton({ className, text, isInputButton }) {
+    const copy = React.useCallback(() => {
+        utilsService.copyToClipboard(text);
+    }, [text]);
+    return (React.createElement("button", { onClick: copy, className: className, type: "button" },
+        React.createElement("span", null),
+        React.createElement("span", { className: "icon" },
+            React.createElement("i", { className: "material-icons" }, "file_copy")),
+        React.createElement("span", { className: isInputButton ? 'is-hidden-mobile' : undefined }, "\u00A0Copy")));
+}
+export default React.memo(CopyToClipboardButton);
+//# sourceMappingURL=CopyToClipboardButton.js.map

package/dist/components/CopyToClipboardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboardButton.js","sourceRoot":"","sources":["../../src/components/CopyToClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAQpD,SAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAS;IACtE,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,OAAO,CACL,gCAAQ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ;QACxD,iCAAa;QACb,8BAAM,SAAS,EAAC,MAAM;YACpB,2BAAG,SAAS,EAAC,gBAAgB,gBAAc,CACtC;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,iBAExD,CACA,CACV,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport utilsService from '../services/utils-service'\n\ntype Props = {\n  text: string\n  className?: string\n  isInputButton?: boolean\n}\n\nfunction CopyToClipboardButton({ className, text, isInputButton }: Props) {\n  const copy = React.useCallback(() => {\n    utilsService.copyToClipboard(text)\n  }, [text])\n  return (\n    <button onClick={copy} className={className} type=\"button\">\n      <span></span>\n      <span className=\"icon\">\n        <i className=\"material-icons\">file_copy</i>\n      </span>\n      <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n        &nbsp;Copy\n      </span>\n    </button>\n  )\n}\n\nexport default React.memo(CopyToClipboardButton)\n"]}