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

package/dist/components/renderer/AnnotationModal.js

@@ -1,102 +1,102 @@
-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, 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);
+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, 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/renderer/AutocompleteDropdown.d.ts

@@ -1,26 +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;
+/// <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/renderer/AutocompleteDropdown.js

@@ -1,176 +1,176 @@
-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.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi, (char) => `\\${char}`) +
-            ')', 'gi'), '<b>$1</b>');
-    }
-    return text;
-}
+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.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi, (char) => `\\${char}`) +
+            ')', 'gi'), '<b>$1</b>');
+    }
+    return text;
+}
 //# sourceMappingURL=AutocompleteDropdown.js.map

package/dist/components/renderer/CopyToClipboardButton.d.ts

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