@jobber/components 2.86.0 → 2.86.2

package/CHANGELOG.md

@@ -8,6 +8,22 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.86.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.86.1...@jobber/components@2.86.2) (2022-11-01)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [2.86.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.86.0...@jobber/components@2.86.1) (2022-10-17)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 # [2.86.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.85.8...@jobber/components@2.86.0) (2022-10-14)
 
 

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,47 +1,47 @@
-import { XOR } from "ts-xor";
-import { GroupOption, Option } from "./Option";
-import { FormFieldProps } from "../FormField";
-declare type OptionCollection = XOR<Option[], GroupOption[]>;
-interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid"> {
-    /**
-     * Initial options to show when user first focuses the Autocomplete
-     */
-    readonly initialOptions?: OptionCollection;
-    /**
-     * Set Autocomplete value.
-     */
-    readonly value: Option | undefined;
-    /**
-     * Allow the autocomplete to use values not from the drop down menu.
-     *
-     * @default true
-     */
-    readonly allowFreeForm?: boolean;
-    /**
-     * Debounce in milliseconds for getOptions
-     *
-     * @default 300
-     */
-    readonly debounce?: number;
-    /**
-     * Simplified onChange handler that only provides the new value.
-     * @param newValue
-     */
-    onChange(newValue?: Option): void;
-    /**
-     * Called as the user types in the input. The autocomplete will display what
-     * is returned from this method to the user as available options.
-     * @param newInputText
-     */
-    getOptions(newInputText: string): OptionCollection | Promise<OptionCollection>;
-    /**
-     * Hint text that goes above the value once the form is filled out.
-     */
-    readonly placeholder: string;
-}
-/**
- * Max statements disabled here to make room for the
- * debounce functions.
- */
-export declare function Autocomplete({ initialOptions, value, allowFreeForm, size, invalid, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, }: AutocompleteProps): JSX.Element;
-export {};
+import { XOR } from "ts-xor";
+import { GroupOption, Option } from "./Option";
+import { FormFieldProps } from "../FormField";
+declare type OptionCollection = XOR<Option[], GroupOption[]>;
+interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid"> {
+    /**
+     * Initial options to show when user first focuses the Autocomplete
+     */
+    readonly initialOptions?: OptionCollection;
+    /**
+     * Set Autocomplete value.
+     */
+    readonly value: Option | undefined;
+    /**
+     * Allow the autocomplete to use values not from the drop down menu.
+     *
+     * @default true
+     */
+    readonly allowFreeForm?: boolean;
+    /**
+     * Debounce in milliseconds for getOptions
+     *
+     * @default 300
+     */
+    readonly debounce?: number;
+    /**
+     * Simplified onChange handler that only provides the new value.
+     * @param newValue
+     */
+    onChange(newValue?: Option): void;
+    /**
+     * Called as the user types in the input. The autocomplete will display what
+     * is returned from this method to the user as available options.
+     * @param newInputText
+     */
+    getOptions(newInputText: string): OptionCollection | Promise<OptionCollection>;
+    /**
+     * Hint text that goes above the value once the form is filled out.
+     */
+    readonly placeholder: string;
+}
+/**
+ * Max statements disabled here to make room for the
+ * debounce functions.
+ */
+export declare function Autocomplete({ initialOptions, value, allowFreeForm, size, invalid, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, }: AutocompleteProps): JSX.Element;
+export {};

package/dist/Autocomplete/Menu.d.ts

@@ -1,9 +1,9 @@
-import { Option } from "./Option";
-interface MenuProps {
-    readonly visible: boolean;
-    readonly options: Option[];
-    readonly selectedOption?: Option;
-    onOptionSelect(chosenOption: Option): void;
-}
-export declare function Menu({ visible, options, selectedOption, onOptionSelect, }: MenuProps): JSX.Element;
-export {};
+import { Option } from "./Option";
+interface MenuProps {
+    readonly visible: boolean;
+    readonly options: Option[];
+    readonly selectedOption?: Option;
+    onOptionSelect(chosenOption: Option): void;
+}
+export declare function Menu({ visible, options, selectedOption, onOptionSelect, }: MenuProps): JSX.Element;
+export {};

package/dist/Autocomplete/Option.d.ts

@@ -1,15 +1,15 @@
-import { XOR } from "ts-xor";
-declare type OptionValue = string | number;
-interface BaseOption {
-    label: string;
-}
-export interface Option extends BaseOption {
-    value?: OptionValue;
-    description?: string;
-    details?: string;
-}
-export interface GroupOption extends BaseOption {
-    options: Option[];
-}
-export declare type AnyOption = XOR<Option, GroupOption>;
-export {};
+import { XOR } from "ts-xor";
+declare type OptionValue = string | number;
+interface BaseOption {
+    label: string;
+}
+export interface Option extends BaseOption {
+    value?: OptionValue;
+    description?: string;
+    details?: string;
+}
+export interface GroupOption extends BaseOption {
+    options: Option[];
+}
+export declare type AnyOption = XOR<Option, GroupOption>;
+export {};

package/dist/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
-export { Autocomplete } from "./Autocomplete";
-export * from "./Option";
+export { Autocomplete } from "./Autocomplete";
+export * from "./Option";

package/dist/Autocomplete/index.js

@@ -2,229 +2,233 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var debounce = _interopDefault(require('lodash/debounce'));
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var useEventListener = _interopDefault(require('@use-it/event-listener'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
+var debounce = require('lodash/debounce');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var classnames = require('classnames');
+var useEventListener = require('@use-it/event-listener');
+var Text = require('../Text-9bc093e9.js');
+var Icon = require('../Icon-d5ad1a6d.js');
+var Heading = require('../Heading-56750113.js');
+var InputText = require('../InputText-cb3be15c.js');
+require('../Typography-7e542a72.js');
 require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var index$3 = require('../Heading/index.js');
+require('../FormField-a92c7bac.js');
 require('uuid');
 require('react-hook-form');
-require('../FormField/index.js');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-require('../Button/index.js');
+require('../InputValidation-24d3621a.js');
 require('framer-motion');
-require('../InputValidation/index.js');
-require('../Spinner/index.js');
-var index$8 = require('../InputText/index.js');
+require('../Spinner-18d3dee6.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var useEventListener__default = /*#__PURE__*/_interopDefaultLegacy(useEventListener);
 
 var css = "._3iJawkVmPDeT-G85L3PrR4 {\n  position: relative;\n  width: 100%;\n}\n\n.Af1qI_fw1xXvkJ0bbFJBR {\n  display: none;\n  position: absolute;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: var(--color-surface);\n}\n\n.Af1qI_fw1xXvkJ0bbFJBR h5 {\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.Af1qI_fw1xXvkJ0bbFJBR.WzLfyEQ4ab8OziNjJry2V {\n  display: block;\n}\n\n.Af1qI_fw1xXvkJ0bbFJBR.WzLfyEQ4ab8OziNjJry2V:empty {\n  display: none;\n}\n\n._1jtF2MKszvsdtf5A_eH2RW {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  border: none;\n  border-radius: var(--radius-base);\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n._1jtF2MKszvsdtf5A_eH2RW:hover,\n._1jtF2MKszvsdtf5A_eH2RW:focus,\n._1jtF2MKszvsdtf5A_eH2RW._251uShpt-dRyALyCV91boK {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n._1jtF2MKszvsdtf5A_eH2RW._1gB8TepBLyFBEQfRE7HKyI:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.Af1qI_fw1xXvkJ0bbFJBR:hover ._1jtF2MKszvsdtf5A_eH2RW._251uShpt-dRyALyCV91boK:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n._3iJawkVmPDeT-G85L3PrR4 ._1Izjm9c_0ZyI0B_UGAIJ_x:not(:first-child) {\n  padding-top: var(--space-small);\n}\n\n._1jtF2MKszvsdtf5A_eH2RW ._2jEQ11E1vWaAghL4b35e4N {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: var(--space-large);\n}\n\n._1jtF2MKszvsdtf5A_eH2RW ._9VoF70mJOE0wCLhUlEcxz {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n._1jtF2MKszvsdtf5A_eH2RW ._2WHXg3Ns3j9p_cD0cOKSXe {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n._1jtF2MKszvsdtf5A_eH2RW ._3RIm_h-piEE21P80O7ejtV {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
 var styles = {"autocomplete":"_3iJawkVmPDeT-G85L3PrR4","options":"Af1qI_fw1xXvkJ0bbFJBR","visible":"WzLfyEQ4ab8OziNjJry2V","option":"_1jtF2MKszvsdtf5A_eH2RW","active":"_251uShpt-dRyALyCV91boK","separator":"_1gB8TepBLyFBEQfRE7HKyI","heading":"_1Izjm9c_0ZyI0B_UGAIJ_x","icon":"_2jEQ11E1vWaAghL4b35e4N","text":"_9VoF70mJOE0wCLhUlEcxz","label":"_2WHXg3Ns3j9p_cD0cOKSXe","details":"_3RIm_h-piEE21P80O7ejtV"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-var IndexChange;
-(function (IndexChange) {
-    IndexChange[IndexChange["Previous"] = -1] = "Previous";
-    IndexChange[IndexChange["Next"] = 1] = "Next";
-})(IndexChange || (IndexChange = {}));
-function Menu(_a) {
-    var _b;
-    var visible = _a.visible, options = _a.options, selectedOption = _a.selectedOption, onOptionSelect = _a.onOptionSelect;
-    var _c = __chunk_1.__read(React.useState(0), 2), highlightedIndex = _c[0], setHighlightedIndex = _c[1];
-    var optionMenuClass = classnames(styles.options, (_b = {},
-        _b[styles.visible] = visible,
-        _b));
-    var menuDiv = React.useRef();
-    var detectSeparatorCondition = function (option) {
-        return option.description || option.details;
-    };
-    var detectGroups = function (option) { return option.options; };
-    var addSeparators = options.some(detectSeparatorCondition);
-    var initialHighlight = options.some(detectGroups) ? 1 : 0;
-    setupKeyListeners();
-    React.useEffect(function () { return setHighlightedIndex(initialHighlight); }, [options]);
-    return (React__default.createElement("div", { className: optionMenuClass, ref: menuDiv }, options.map(function (option, index) {
-        var _a;
-        var optionClass = classnames(styles.option, (_a = {},
-            _a[styles.active] = index === highlightedIndex,
-            _a[styles.separator] = addSeparators,
-            _a));
-        if (isGroup(option)) {
-            return (React__default.createElement("div", { key: option.label, className: styles.heading },
-                React__default.createElement(index$3.Heading, { level: 5 }, option.label)));
-        }
-        return (React__default.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
-            React__default.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React__default.createElement(index$2.Icon, { name: "checkmark", size: "small" }))),
-            React__default.createElement("div", { className: styles.text },
-                React__default.createElement("div", { className: styles.label },
-                    React__default.createElement(index$1.Text, null, option.label),
-                    option.description !== undefined && (React__default.createElement(index$1.Text, { variation: "subdued" }, option.description))),
-                option.details !== undefined && (React__default.createElement("div", { className: styles.details },
-                    React__default.createElement(index$1.Text, null, option.details))))));
-    })));
-    function setupKeyListeners() {
-        useOnKeyDown("ArrowDown", function (event) {
-            var indexChange = arrowKeyPress(event, IndexChange.Next);
-            if (indexChange) {
-                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
-            }
-            if (menuDiv.current) {
-                scrollMenuIfItemNotInView(menuDiv.current, "down");
-            }
-        });
-        useOnKeyDown("ArrowUp", function (event) {
-            var indexChange = arrowKeyPress(event, IndexChange.Previous);
-            if (indexChange) {
-                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
-            }
-            if (menuDiv.current) {
-                scrollMenuIfItemNotInView(menuDiv.current, "up");
-            }
-        });
-        function scrollMenuIfItemNotInView(menuDivElement, direction) {
-            var itemDiv = menuDivElement.querySelector("button." + styles.option + ":nth-child(" + (highlightedIndex + 1) + ")");
-            if (!itemDiv)
-                return;
-            var menuTop = menuDivElement.getBoundingClientRect().top;
-            var _a = itemDiv.getBoundingClientRect(), itemTop = _a.top, itemHeight = _a.height, itemBottom = _a.bottom;
-            var itemTrueBottom = itemBottom + itemHeight;
-            var menuBottom = menuDivElement.getBoundingClientRect().bottom;
-            if (direction == "up" && itemTop - itemHeight < menuTop) {
-                menuDivElement.scrollTop -= itemHeight;
-            }
-            else if (direction == "down" && itemTrueBottom > menuBottom) {
-                menuDivElement.scrollTop += itemHeight;
-            }
-        }
-        useOnKeyDown("Enter", function (event) {
-            if (!visible)
-                return;
-            if (isGroup(options[highlightedIndex]))
-                return;
-            event.preventDefault();
-            onOptionSelect(options[highlightedIndex]);
-        });
-    }
-    function arrowKeyPress(event, direction) {
-        if (!visible)
-            return;
-        event.preventDefault();
-        var requestedIndex = options[highlightedIndex + direction];
-        return requestedIndex && isGroup(requestedIndex)
-            ? direction + direction
-            : direction;
-    }
-}
-function isOptionSelected(selectedOption, option) {
-    return selectedOption && selectedOption.value === option.value;
-}
-// Split this out into a hooks package.
-function useOnKeyDown(keyName, handler) {
-    // Pending: https://github.com/donavon/use-event-listener/pull/12
-    // The types in useEventListener mistakenly require a SyntheticEvent for the passed generic.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    //@ts-ignore
-    useEventListener("keydown", function (event) {
-        if (event.key === keyName) {
-            handler(event);
-        }
-    });
-}
-function isGroup(option) {
-    if (option.options)
-        return true;
-    return false;
+var IndexChange;
+(function (IndexChange) {
+    IndexChange[IndexChange["Previous"] = -1] = "Previous";
+    IndexChange[IndexChange["Next"] = 1] = "Next";
+})(IndexChange || (IndexChange = {}));
+function Menu(_a) {
+    var _b;
+    var visible = _a.visible, options = _a.options, selectedOption = _a.selectedOption, onOptionSelect = _a.onOptionSelect;
+    var _c = tslib_es6.__read(React.useState(0), 2), highlightedIndex = _c[0], setHighlightedIndex = _c[1];
+    var optionMenuClass = classnames__default["default"](styles.options, (_b = {},
+        _b[styles.visible] = visible,
+        _b));
+    var menuDiv = React.useRef();
+    var detectSeparatorCondition = function (option) {
+        return option.description || option.details;
+    };
+    var detectGroups = function (option) { return option.options; };
+    var addSeparators = options.some(detectSeparatorCondition);
+    var initialHighlight = options.some(detectGroups) ? 1 : 0;
+    setupKeyListeners();
+    React.useEffect(function () { return setHighlightedIndex(initialHighlight); }, [options]);
+    return (React__default["default"].createElement("div", { className: optionMenuClass, ref: menuDiv }, options.map(function (option, index) {
+        var _a;
+        var optionClass = classnames__default["default"](styles.option, (_a = {},
+            _a[styles.active] = index === highlightedIndex,
+            _a[styles.separator] = addSeparators,
+            _a));
+        if (isGroup(option)) {
+            return (React__default["default"].createElement("div", { key: option.label, className: styles.heading },
+                React__default["default"].createElement(Heading.Heading, { level: 5 }, option.label)));
+        }
+        return (React__default["default"].createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
+            React__default["default"].createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
+            React__default["default"].createElement("div", { className: styles.text },
+                React__default["default"].createElement("div", { className: styles.label },
+                    React__default["default"].createElement(Text.Text, null, option.label),
+                    option.description !== undefined && (React__default["default"].createElement(Text.Text, { variation: "subdued" }, option.description))),
+                option.details !== undefined && (React__default["default"].createElement("div", { className: styles.details },
+                    React__default["default"].createElement(Text.Text, null, option.details))))));
+    })));
+    function setupKeyListeners() {
+        useOnKeyDown("ArrowDown", function (event) {
+            var indexChange = arrowKeyPress(event, IndexChange.Next);
+            if (indexChange) {
+                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
+            }
+            if (menuDiv.current) {
+                scrollMenuIfItemNotInView(menuDiv.current, "down");
+            }
+        });
+        useOnKeyDown("ArrowUp", function (event) {
+            var indexChange = arrowKeyPress(event, IndexChange.Previous);
+            if (indexChange) {
+                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
+            }
+            if (menuDiv.current) {
+                scrollMenuIfItemNotInView(menuDiv.current, "up");
+            }
+        });
+        function scrollMenuIfItemNotInView(menuDivElement, direction) {
+            var itemDiv = menuDivElement.querySelector("button." + styles.option + ":nth-child(" + (highlightedIndex + 1) + ")");
+            if (!itemDiv)
+                return;
+            var menuTop = menuDivElement.getBoundingClientRect().top;
+            var _a = itemDiv.getBoundingClientRect(), itemTop = _a.top, itemHeight = _a.height, itemBottom = _a.bottom;
+            var itemTrueBottom = itemBottom + itemHeight;
+            var menuBottom = menuDivElement.getBoundingClientRect().bottom;
+            if (direction == "up" && itemTop - itemHeight < menuTop) {
+                menuDivElement.scrollTop -= itemHeight;
+            }
+            else if (direction == "down" && itemTrueBottom > menuBottom) {
+                menuDivElement.scrollTop += itemHeight;
+            }
+        }
+        useOnKeyDown("Enter", function (event) {
+            if (!visible)
+                return;
+            if (isGroup(options[highlightedIndex]))
+                return;
+            event.preventDefault();
+            onOptionSelect(options[highlightedIndex]);
+        });
+    }
+    function arrowKeyPress(event, direction) {
+        if (!visible)
+            return;
+        event.preventDefault();
+        var requestedIndex = options[highlightedIndex + direction];
+        return requestedIndex && isGroup(requestedIndex)
+            ? direction + direction
+            : direction;
+    }
+}
+function isOptionSelected(selectedOption, option) {
+    return selectedOption && selectedOption.value === option.value;
+}
+// Split this out into a hooks package.
+function useOnKeyDown(keyName, handler) {
+    // Pending: https://github.com/donavon/use-event-listener/pull/12
+    // The types in useEventListener mistakenly require a SyntheticEvent for the passed generic.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    //@ts-ignore
+    useEventListener__default["default"]("keydown", function (event) {
+        if (event.key === keyName) {
+            handler(event);
+        }
+    });
+}
+function isGroup(option) {
+    if (option.options)
+        return true;
+    return false;
 }
 
-/**
- * Max statements disabled here to make room for the
- * debounce functions.
- */
-// eslint-disable-next-line max-statements
-function Autocomplete(_a) {
-    var _b = _a.initialOptions, initialOptions = _b === void 0 ? [] : _b, value = _a.value, _c = _a.allowFreeForm, allowFreeForm = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? undefined : _d, invalid = _a.invalid, _e = _a.debounce, debounceRate = _e === void 0 ? 300 : _e, onChange = _a.onChange, getOptions = _a.getOptions, placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus;
-    var _f;
-    var _g = __chunk_1.__read(React.useState(initialOptions), 2), options = _g[0], setOptions = _g[1];
-    var _h = __chunk_1.__read(React.useState(false), 2), menuVisible = _h[0], setMenuVisible = _h[1];
-    var _j = __chunk_1.__read(React.useState((_f = value === null || value === void 0 ? void 0 : value.label) !== null && _f !== void 0 ? _f : ""), 2), inputText = _j[0], setInputText = _j[1];
-    var delayedSearch = debounce(updateSearch, debounceRate);
-    React.useEffect(function () {
-        delayedSearch();
-        return delayedSearch.cancel;
-    }, [inputText]);
-    React.useEffect(function () {
-        var _a;
-        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
-    }, [value]);
-    return (React__default.createElement("div", { className: styles.autocomplete },
-        React__default.createElement(index$8.InputText, { autocomplete: false, size: size, invalid: invalid, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }),
-        menuVisible && (React__default.createElement(Menu, { visible: true, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
-    function updateInput(newText) {
-        setInputText(newText);
-        if (newText === "") {
-            setOptions(mapToOptions(initialOptions));
-        }
-    }
-    function updateSearch() {
-        return __chunk_1.__awaiter(this, void 0, void 0, function () {
-            var updatedOptions, filteredOptions;
-            return __chunk_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getOptions(inputText)];
-                    case 1:
-                        updatedOptions = _a.sent();
-                        filteredOptions = updatedOptions.filter(function (option) {
-                            return "options" in option && option.options ? option.options.length > 0 : true;
-                        });
-                        setOptions(mapToOptions(filteredOptions));
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-    function handleMenuChange(chosenOption) {
-        onChange(chosenOption);
-        updateInput(chosenOption.label);
-        setMenuVisible(false);
-    }
-    function handleInputChange(newText) {
-        updateInput(newText);
-        if (allowFreeForm) {
-            onChange({ label: newText });
-        }
-        setMenuVisible(true);
-    }
-    function handleInputBlur() {
-        setMenuVisible(false);
-        if (value == undefined || value.label !== inputText) {
-            setInputText("");
-            onChange(undefined);
-        }
-        onBlur && onBlur();
-    }
-    function handleInputFocus() {
-        setMenuVisible(true);
-        if (onFocus) {
-            onFocus();
-        }
-    }
-}
-function mapToOptions(items) {
-    return items.reduce(function (result, item) {
-        result = result.concat([item]);
-        if (item.options) {
-            result = result.concat(item.options);
-        }
-        return result;
-    }, []);
+/**
+ * Max statements disabled here to make room for the
+ * debounce functions.
+ */
+// eslint-disable-next-line max-statements
+function Autocomplete(_a) {
+    var _b = _a.initialOptions, initialOptions = _b === void 0 ? [] : _b, value = _a.value, _c = _a.allowFreeForm, allowFreeForm = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? undefined : _d, invalid = _a.invalid, _e = _a.debounce, debounceRate = _e === void 0 ? 300 : _e, onChange = _a.onChange, getOptions = _a.getOptions, placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus;
+    var _f;
+    var _g = tslib_es6.__read(React.useState(initialOptions), 2), options = _g[0], setOptions = _g[1];
+    var _h = tslib_es6.__read(React.useState(false), 2), menuVisible = _h[0], setMenuVisible = _h[1];
+    var _j = tslib_es6.__read(React.useState((_f = value === null || value === void 0 ? void 0 : value.label) !== null && _f !== void 0 ? _f : ""), 2), inputText = _j[0], setInputText = _j[1];
+    var delayedSearch = debounce__default["default"](updateSearch, debounceRate);
+    React.useEffect(function () {
+        delayedSearch();
+        return delayedSearch.cancel;
+    }, [inputText]);
+    React.useEffect(function () {
+        var _a;
+        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
+    return (React__default["default"].createElement("div", { className: styles.autocomplete },
+        React__default["default"].createElement(InputText.InputText, { autocomplete: false, size: size, invalid: invalid, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }),
+        menuVisible && (React__default["default"].createElement(Menu, { visible: true, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    function updateInput(newText) {
+        setInputText(newText);
+        if (newText === "") {
+            setOptions(mapToOptions(initialOptions));
+        }
+    }
+    function updateSearch() {
+        return tslib_es6.__awaiter(this, void 0, void 0, function () {
+            var updatedOptions, filteredOptions;
+            return tslib_es6.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getOptions(inputText)];
+                    case 1:
+                        updatedOptions = _a.sent();
+                        filteredOptions = updatedOptions.filter(function (option) {
+                            return "options" in option && option.options ? option.options.length > 0 : true;
+                        });
+                        setOptions(mapToOptions(filteredOptions));
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function handleMenuChange(chosenOption) {
+        onChange(chosenOption);
+        updateInput(chosenOption.label);
+        setMenuVisible(false);
+    }
+    function handleInputChange(newText) {
+        updateInput(newText);
+        if (allowFreeForm) {
+            onChange({ label: newText });
+        }
+        setMenuVisible(true);
+    }
+    function handleInputBlur() {
+        setMenuVisible(false);
+        if (value == undefined || value.label !== inputText) {
+            setInputText("");
+            onChange(undefined);
+        }
+        onBlur && onBlur();
+    }
+    function handleInputFocus() {
+        setMenuVisible(true);
+        if (onFocus) {
+            onFocus();
+        }
+    }
+}
+function mapToOptions(items) {
+    return items.reduce(function (result, item) {
+        result = result.concat([item]);
+        if (item.options) {
+            result = result.concat(item.options);
+        }
+        return result;
+    }, []);
 }
 
 exports.Autocomplete = Autocomplete;