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

package/dist/components/renderer/attachments/UploadingAttachment.js

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { Tooltip } from '@mui/material';
-import useIsOffline from '../../../hooks/useIsOffline';
-import OnLoading from '../OnLoading';
-function UploadingAttachment() {
-    const isOffline = useIsOffline();
-    return (React.createElement(Tooltip, { title: isOffline
-            ? 'Upload will start when you connect to the internet'
-            : 'Uploading' },
-        React.createElement("div", { className: "cypress-attachment-uploading" }, isOffline ? (React.createElement("i", { className: "material-icons has-text-warning" }, "wifi_off")) : (React.createElement(OnLoading, { tiny: true })))));
-}
-export default React.memo(UploadingAttachment);
+import * as React from 'react';
+import { Tooltip } from '@mui/material';
+import useIsOffline from '../../../hooks/useIsOffline';
+import OnLoading from '../OnLoading';
+function UploadingAttachment() {
+    const isOffline = useIsOffline();
+    return (React.createElement(Tooltip, { title: isOffline
+            ? 'Upload will start when you connect to the internet'
+            : 'Uploading' },
+        React.createElement("div", { className: "cypress-attachment-uploading" }, isOffline ? (React.createElement("i", { className: "material-icons has-text-warning" }, "wifi_off")) : (React.createElement(OnLoading, { tiny: true })))));
+}
+export default React.memo(UploadingAttachment);
 //# sourceMappingURL=UploadingAttachment.js.map

package/dist/form-elements/ComplianceButton.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-interface Props {
-    onClick: () => void;
-    icon: string;
-    children: React.ReactNode;
-    isActive: boolean;
-    disabled: boolean;
-}
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;
+import * as React from 'react';
+interface Props {
+    onClick: () => void;
+    icon: string;
+    children: React.ReactNode;
+    isActive: boolean;
+    disabled: boolean;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/form-elements/ComplianceButton.js

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import clsx from 'clsx';
-const ComplianceButton = ({ onClick, icon, children, isActive, disabled, }) => {
-    return (React.createElement("button", { disabled: disabled, type: "button", className: clsx('button ob-button__compliance', {
-            'is-primary': isActive,
-            'is-light': !isActive,
-        }), onClick: onClick },
-        React.createElement("i", { className: "material-icons is-size-5 ob-button__compliance-icon" }, icon),
-        children));
-};
-export default React.memo(ComplianceButton);
+import * as React from 'react';
+import clsx from 'clsx';
+const ComplianceButton = ({ onClick, icon, children, isActive, disabled, }) => {
+    return (React.createElement("button", { disabled: disabled, type: "button", className: clsx('button ob-button__compliance', {
+            'is-primary': isActive,
+            'is-light': !isActive,
+        }), onClick: onClick },
+        React.createElement("i", { className: "material-icons is-size-5 ob-button__compliance-icon" }, icon),
+        children));
+};
+export default React.memo(ComplianceButton);
 //# sourceMappingURL=ComplianceButton.js.map

package/dist/form-elements/FormElementABN.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { FormTypes, MiscTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.ABNElement;
-    value: MiscTypes.ABNRecord | undefined;
-    onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementABN({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementABN>;
-export default _default;
+import * as React from 'react';
+import { FormTypes, MiscTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.ABNElement;
+    value: MiscTypes.ABNRecord | undefined;
+    onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementABN({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementABN>;
+export default _default;

package/dist/form-elements/FormElementABN.js

@@ -1,156 +1,156 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import InputMask from 'react-input-mask';
-import { parseString } from 'xml2js';
-import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
-import LookupButton from '../components/renderer/LookupButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid';
-import { abnService } from '@oneblink/sdk-core';
-function FormElementABN({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid();
-    const [label, setLabel] = React.useState(value ? abnService.getABNNumberFromABNRecord(value) || '' : '');
-    const [isFocused, setIsFocused, removeFocus] = useBooleanState(false);
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const [{ isLoading, error }, setState] = React.useState({
-        isLoading: false,
-        error: null,
-    });
-    React.useEffect(() => {
-        const searchString = label.replace(/[^\d]/g, '');
-        const isSearchStringValid = searchString.length === 11 || (searchString.length === 9 && !isFocused);
-        const currentABNNumber = value
-            ? abnService.getABNNumberFromABNRecord(value)
-            : '';
-        if (!isSearchStringValid || currentABNNumber === searchString) {
-            return;
-        }
-        setState({
-            isLoading: true,
-            error: null,
-        });
-        const abortController = new AbortController();
-        const fetchRecord = async () => {
-            try {
-                const urlSearchParams = new URLSearchParams();
-                urlSearchParams.append('searchString', searchString);
-                urlSearchParams.append('includeHistoricalDetails', 'N');
-                if (abnLookupAuthenticationGuid) {
-                    urlSearchParams.append('authenticationGuid', abnLookupAuthenticationGuid);
-                }
-                const url = searchString.length === 11
-                    ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'
-                    : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408';
-                const response = await fetch(`${url}?${urlSearchParams.toString()}`, {
-                    mode: 'cors',
-                    signal: abortController.signal,
-                });
-                const text = await response.text();
-                if (!response.ok) {
-                    throw new Error(text);
-                }
-                const result = await new Promise((resolve, reject) => {
-                    parseString(text, {
-                        explicitArray: false,
-                    }, (err, result) => {
-                        if (err) {
-                            reject(err);
-                        }
-                        else {
-                            resolve(result);
-                        }
-                    });
-                });
-                if (result.ABRPayloadSearchResults.response.exception) {
-                    throw new Error(result.ABRPayloadSearchResults.response.exception.exceptionDescription);
-                }
-                if (result.ABRPayloadSearchResults.response.businessEntity201408) {
-                    result.ABRPayloadSearchResults.response.businessEntity202001 =
-                        result.ABRPayloadSearchResults.response.businessEntity201408;
-                }
-                if (!Array.isArray(result.ABRPayloadSearchResults.response.businessEntity202001
-                    .businessName)) {
-                    result.ABRPayloadSearchResults.response.businessEntity202001.businessName =
-                        [
-                            result.ABRPayloadSearchResults.response.businessEntity202001
-                                .businessName,
-                        ];
-                }
-                if (!abortController.signal.aborted) {
-                    onChange(element, result.ABRPayloadSearchResults.response.businessEntity202001);
-                    setState({
-                        isLoading: false,
-                        error: null,
-                    });
-                }
-            }
-            catch (err) {
-                if (!abortController.signal.aborted) {
-                    setState({
-                        isLoading: false,
-                        error: err,
-                    });
-                }
-            }
-        };
-        fetchRecord();
-        return () => {
-            abortController.abort();
-        };
-    }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value]);
-    // Ensure the label is set if the value is set outside of this component
-    React.useEffect(() => {
-        if (value) {
-            const newLabel = abnService.getABNNumberFromABNRecord(value);
-            if (!newLabel) {
-                // Record in value had no ABN Number. This should never happen
-                return;
-            }
-            if (label !== newLabel) {
-                setLabel(newLabel.split('').reduce((memo, character, index) => {
-                    switch (index) {
-                        case 2:
-                        case 5:
-                        case 8: {
-                            return `${memo} ${character}`;
-                        }
-                        default: {
-                            return `${memo}${character}`;
-                        }
-                    }
-                }, ''));
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-abn-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-abn", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: clsx('control is-expanded', {
-                        'is-loading': isLoading,
-                    }) },
-                    React.createElement(InputMask, { mask: isFocused || value ? '99 999 999 999' : '999 999 999', 
-                        // @ts-expect-error "react-input-mask" types do not match code
-                        maskChar: " ", type: "text", id: id, name: element.name, className: "input ob-input cypress-abn-control", placeholder: element.placeholderValue, value: label, onChange: (e) => {
-                            setLabel(e.target.value);
-                            if (value) {
-                                onChange(element, undefined);
-                            }
-                        }, required: element.required, disabled: element.readOnly, onBlur: () => {
-                            setIsDirty();
-                            removeFocus();
-                        }, onFocus: setIsFocused })),
-                value && (React.createElement("div", { className: "control ob-abn__record-control" },
-                    React.createElement("a", { className: "button is-static ob-abn__record-button" }, abnService.displayBusinessNameFromABNRecord(value)))),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
-            (((isDirty || displayValidationMessage) &&
-                !!validationMessage &&
-                !isLoading) ||
-                error) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, (error === null || error === void 0 ? void 0 : error.message) || validationMessage))))));
-}
-export default React.memo(FormElementABN);
+import * as React from 'react';
+import clsx from 'clsx';
+import InputMask from 'react-input-mask';
+import { parseString } from 'xml2js';
+import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
+import useBooleanState from '../hooks/useBooleanState';
+import LookupButton from '../components/renderer/LookupButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid';
+import { abnService } from '@oneblink/sdk-core';
+function FormElementABN({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid();
+    const [label, setLabel] = React.useState(value ? abnService.getABNNumberFromABNRecord(value) || '' : '');
+    const [isFocused, setIsFocused, removeFocus] = useBooleanState(false);
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const [{ isLoading, error }, setState] = React.useState({
+        isLoading: false,
+        error: null,
+    });
+    React.useEffect(() => {
+        const searchString = label.replace(/[^\d]/g, '');
+        const isSearchStringValid = searchString.length === 11 || (searchString.length === 9 && !isFocused);
+        const currentABNNumber = value
+            ? abnService.getABNNumberFromABNRecord(value)
+            : '';
+        if (!isSearchStringValid || currentABNNumber === searchString) {
+            return;
+        }
+        setState({
+            isLoading: true,
+            error: null,
+        });
+        const abortController = new AbortController();
+        const fetchRecord = async () => {
+            try {
+                const urlSearchParams = new URLSearchParams();
+                urlSearchParams.append('searchString', searchString);
+                urlSearchParams.append('includeHistoricalDetails', 'N');
+                if (abnLookupAuthenticationGuid) {
+                    urlSearchParams.append('authenticationGuid', abnLookupAuthenticationGuid);
+                }
+                const url = searchString.length === 11
+                    ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'
+                    : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408';
+                const response = await fetch(`${url}?${urlSearchParams.toString()}`, {
+                    mode: 'cors',
+                    signal: abortController.signal,
+                });
+                const text = await response.text();
+                if (!response.ok) {
+                    throw new Error(text);
+                }
+                const result = await new Promise((resolve, reject) => {
+                    parseString(text, {
+                        explicitArray: false,
+                    }, (err, result) => {
+                        if (err) {
+                            reject(err);
+                        }
+                        else {
+                            resolve(result);
+                        }
+                    });
+                });
+                if (result.ABRPayloadSearchResults.response.exception) {
+                    throw new Error(result.ABRPayloadSearchResults.response.exception.exceptionDescription);
+                }
+                if (result.ABRPayloadSearchResults.response.businessEntity201408) {
+                    result.ABRPayloadSearchResults.response.businessEntity202001 =
+                        result.ABRPayloadSearchResults.response.businessEntity201408;
+                }
+                if (!Array.isArray(result.ABRPayloadSearchResults.response.businessEntity202001
+                    .businessName)) {
+                    result.ABRPayloadSearchResults.response.businessEntity202001.businessName =
+                        [
+                            result.ABRPayloadSearchResults.response.businessEntity202001
+                                .businessName,
+                        ];
+                }
+                if (!abortController.signal.aborted) {
+                    onChange(element, result.ABRPayloadSearchResults.response.businessEntity202001);
+                    setState({
+                        isLoading: false,
+                        error: null,
+                    });
+                }
+            }
+            catch (err) {
+                if (!abortController.signal.aborted) {
+                    setState({
+                        isLoading: false,
+                        error: err,
+                    });
+                }
+            }
+        };
+        fetchRecord();
+        return () => {
+            abortController.abort();
+        };
+    }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value]);
+    // Ensure the label is set if the value is set outside of this component
+    React.useEffect(() => {
+        if (value) {
+            const newLabel = abnService.getABNNumberFromABNRecord(value);
+            if (!newLabel) {
+                // Record in value had no ABN Number. This should never happen
+                return;
+            }
+            if (label !== newLabel) {
+                setLabel(newLabel.split('').reduce((memo, character, index) => {
+                    switch (index) {
+                        case 2:
+                        case 5:
+                        case 8: {
+                            return `${memo} ${character}`;
+                        }
+                        default: {
+                            return `${memo}${character}`;
+                        }
+                    }
+                }, ''));
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-abn-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-abn", id: id, element: element, required: element.required },
+            React.createElement("div", { className: "field has-addons" },
+                React.createElement("div", { className: clsx('control is-expanded', {
+                        'is-loading': isLoading,
+                    }) },
+                    React.createElement(InputMask, { mask: isFocused || value ? '99 999 999 999' : '999 999 999', 
+                        // @ts-expect-error "react-input-mask" types do not match code
+                        maskChar: " ", type: "text", id: id, name: element.name, className: "input ob-input cypress-abn-control", placeholder: element.placeholderValue, value: label, onChange: (e) => {
+                            setLabel(e.target.value);
+                            if (value) {
+                                onChange(element, undefined);
+                            }
+                        }, required: element.required, disabled: element.readOnly, onBlur: () => {
+                            setIsDirty();
+                            removeFocus();
+                        }, onFocus: setIsFocused })),
+                value && (React.createElement("div", { className: "control ob-abn__record-control" },
+                    React.createElement("a", { className: "button is-static ob-abn__record-button" }, abnService.displayBusinessNameFromABNRecord(value)))),
+                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }))),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage })),
+            (((isDirty || displayValidationMessage) &&
+                !!validationMessage &&
+                !isLoading) ||
+                error) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, (error === null || error === void 0 ? void 0 : error.message) || validationMessage))))));
+}
+export default React.memo(FormElementABN);
 //# sourceMappingURL=FormElementABN.js.map

package/dist/form-elements/FormElementAutocomplete.d.ts

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type _BaseProps = {
-    id: string;
-    element: FormTypes.AutoCompleteElement;
-    value: unknown | undefined;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare type _AutocompleteConditionallyShowOptionProps = {
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-};
-declare type Props = _BaseProps & _AutocompleteConditionallyShowOptionProps & {
-    onChange: FormElementValueChangeHandler<string>;
-};
-declare function FormElementAutocomplete({ conditionallyShownOptions, onChange, ...props }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementAutocomplete>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type _BaseProps = {
+    id: string;
+    element: FormTypes.AutoCompleteElement;
+    value: unknown | undefined;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare type _AutocompleteConditionallyShowOptionProps = {
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+};
+declare type Props = _BaseProps & _AutocompleteConditionallyShowOptionProps & {
+    onChange: FormElementValueChangeHandler<string>;
+};
+declare function FormElementAutocomplete({ conditionallyShownOptions, onChange, ...props }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementAutocomplete>;
+export default _default;

package/dist/form-elements/FormElementAutocomplete.js

@@ -1,82 +1,82 @@
-import * as React from 'react';
-import { formElementsService } from '@oneblink/sdk-core';
-import { generateHeaders } from '@oneblink/apps/dist/services/fetch';
-import FormElementOptions from '../components/renderer/FormElementOptions';
-import useFormElementOptions from '../hooks/useFormElementOptions';
-import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-const AutocompleteFilter = React.memo(function AutocompleteFilter({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }) {
-    const [label, setLabel] = React.useState('');
-    const onFilter = React.useCallback((option) => {
-        // If the user has typed nothing in, display all options
-        if (!label) {
-            return true;
-        }
-        const lowerCase = label.toLowerCase();
-        return option.label.toLowerCase().includes(lowerCase);
-    }, [label]);
-    const filteredOptions = useFormElementOptions({
-        element,
-        value,
-        onChange,
-        conditionallyShownOptions,
-        onFilter,
-    });
-    const handleSearch = React.useCallback(async () => {
-        return filteredOptions;
-    }, [filteredOptions]);
-    // Ensure the label matches the value selected
-    React.useEffect(() => {
-        if (!Array.isArray(element.options)) {
-            return;
-        }
-        const option = element.options.find((option) => option.value === value);
-        if (option && label !== option.label) {
-            setLabel(option.label);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [element.options, value]);
-    return (React.createElement("div", { className: "cypress-autocomplete-filter-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(FormElementOptions, { options: element.options },
-                React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, onSearch: handleSearch, searchDebounceMs: 0, searchMinCharacters: 0 })))));
-});
-const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, value, onChange, validationMessage, displayValidationMessage, searchUrl, }) {
-    const [label, setLabel] = React.useState('');
-    const handleSearch = React.useCallback(async (search, abortSignal) => {
-        const headers = await generateHeaders();
-        const url = new URL(searchUrl);
-        url.searchParams.append('value', search);
-        const response = await fetch(url.href, {
-            headers,
-            signal: abortSignal,
-        });
-        if (!response.ok) {
-            const text = await response.text();
-            throw new Error(text);
-        }
-        const data = await response.json();
-        return formElementsService.parseFormElementOptionsSet(data);
-    }, [searchUrl]);
-    // Ensure the label is set if the value is set outside of this component
-    React.useEffect(() => {
-        if (!label && typeof value === 'string') {
-            setLabel(value);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-autocomplete-search-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 1, onSearch: handleSearch }))));
-});
-function FormElementAutocomplete({ conditionallyShownOptions, onChange, ...props }) {
-    const handleChange = React.useCallback((newValue) => {
-        onChange(props.element, newValue);
-    }, [onChange, props.element]);
-    if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {
-        return (React.createElement(AutocompleteFetch, { ...props, onChange: handleChange, searchUrl: props.element.searchUrl }));
-    }
-    return (React.createElement(AutocompleteFilter, { ...props, onChange: handleChange, conditionallyShownOptions: conditionallyShownOptions }));
-}
-export default React.memo(FormElementAutocomplete);
+import * as React from 'react';
+import { formElementsService } from '@oneblink/sdk-core';
+import { generateHeaders } from '@oneblink/apps/dist/services/fetch';
+import FormElementOptions from '../components/renderer/FormElementOptions';
+import useFormElementOptions from '../hooks/useFormElementOptions';
+import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+const AutocompleteFilter = React.memo(function AutocompleteFilter({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, }) {
+    const [label, setLabel] = React.useState('');
+    const onFilter = React.useCallback((option) => {
+        // If the user has typed nothing in, display all options
+        if (!label) {
+            return true;
+        }
+        const lowerCase = label.toLowerCase();
+        return option.label.toLowerCase().includes(lowerCase);
+    }, [label]);
+    const filteredOptions = useFormElementOptions({
+        element,
+        value,
+        onChange,
+        conditionallyShownOptions,
+        onFilter,
+    });
+    const handleSearch = React.useCallback(async () => {
+        return filteredOptions;
+    }, [filteredOptions]);
+    // Ensure the label matches the value selected
+    React.useEffect(() => {
+        if (!Array.isArray(element.options)) {
+            return;
+        }
+        const option = element.options.find((option) => option.value === value);
+        if (option && label !== option.label) {
+            setLabel(option.label);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [element.options, value]);
+    return (React.createElement("div", { className: "cypress-autocomplete-filter-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required },
+            React.createElement(FormElementOptions, { options: element.options },
+                React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, onSearch: handleSearch, searchDebounceMs: 0, searchMinCharacters: 0 })))));
+});
+const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, value, onChange, validationMessage, displayValidationMessage, searchUrl, }) {
+    const [label, setLabel] = React.useState('');
+    const handleSearch = React.useCallback(async (search, abortSignal) => {
+        const headers = await generateHeaders();
+        const url = new URL(searchUrl);
+        url.searchParams.append('value', search);
+        const response = await fetch(url.href, {
+            headers,
+            signal: abortSignal,
+        });
+        if (!response.ok) {
+            const text = await response.text();
+            throw new Error(text);
+        }
+        const data = await response.json();
+        return formElementsService.parseFormElementOptionsSet(data);
+    }, [searchUrl]);
+    // Ensure the label is set if the value is set outside of this component
+    React.useEffect(() => {
+        if (!label && typeof value === 'string') {
+            setLabel(value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-autocomplete-search-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required },
+            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 1, onSearch: handleSearch }))));
+});
+function FormElementAutocomplete({ conditionallyShownOptions, onChange, ...props }) {
+    const handleChange = React.useCallback((newValue) => {
+        onChange(props.element, newValue);
+    }, [onChange, props.element]);
+    if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {
+        return (React.createElement(AutocompleteFetch, { ...props, onChange: handleChange, searchUrl: props.element.searchUrl }));
+    }
+    return (React.createElement(AutocompleteFilter, { ...props, onChange: handleChange, conditionallyShownOptions: conditionallyShownOptions }));
+}
+export default React.memo(FormElementAutocomplete);
 //# sourceMappingURL=FormElementAutocomplete.js.map