@jobber/components 3.5.10 → 4.0.1-pre.4

package/dist/Chips/index.js

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var jobberHooks = require('@jobber/hooks');
-var Icon = require('../Icon-d5ad1a6d.js');
-var Avatar = require('../Avatar-cfd04e86.js');
-var Typography = require('../Typography-fbe0ed6e.js');
-var Tooltip = require('../Tooltip-041feb00.js');
+var Icon = require('../Icon-405a216c.js');
+var Avatar = require('../Avatar-89cfd0a6.js');
+var Typography = require('../Typography-9262511f.js');
+var Tooltip = require('../Tooltip-1090a43d.js');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var reactPopper = require('react-popper');
-var Text = require('../Text-e012fb46.js');
-var Button = require('../Button-cd30df0f.js');
-var Spinner = require('../Spinner-e4e9c8eb.js');
+var Text = require('../Text-7ce00adb.js');
+var Button = require('../Button-16e043ec.js');
+var Spinner = require('../Spinner-ae4c8a85.js');
 require('@jobber/design');
 require('color');
 require('react-dom');
@@ -32,10 +31,9 @@ var css$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSin
 var styles$1 = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
 styleInject_es.styleInject(css$1);
 
-function InternalChipButton(_a) {
-    var icon = _a.icon, invalid = _a.invalid, disabled = _a.disabled, label = _a.label, onClick = _a.onClick;
-    var buttonRef = React.useRef();
-    return (React__default["default"].createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": "Remove " + label, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
+    const buttonRef = React.useRef();
+    return (React__default["default"].createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default["default"].createElement(Icon.Icon, { name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&
@@ -63,22 +61,21 @@ function InternalChipButton(_a) {
     }
 }
 
-function InternalChipAffix(_a) {
-    var affix = _a.affix, active = _a.active, invalid = _a.invalid, disabled = _a.disabled;
+function InternalChipAffix({ affix, active, invalid, disabled, }) {
     assertProps();
     if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar) {
-        return React__default["default"].createElement(Avatar.Avatar, tslib_es6.__assign({}, affix.props, { size: "small" }));
+        return React__default["default"].createElement(Avatar.Avatar, Object.assign({}, affix.props, { size: "small" }));
     }
     if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon) {
         return renderChipIcon(affix);
     }
     if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
-        return React__default["default"].createElement(InternalChipButton, tslib_es6.__assign({}, affix.props));
+        return React__default["default"].createElement(InternalChipButton, Object.assign({}, affix.props));
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null);
     function renderChipIcon(icon) {
-        var color = getIconColor();
-        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, tslib_es6.__assign({ size: "base" }, (color && { color: color })))));
+        const color = getIconColor();
+        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
     }
     function getIconColor() {
         if (disabled && !active)
@@ -90,95 +87,90 @@ function InternalChipAffix(_a) {
         return;
     }
     function assertProps() {
-        var isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
-        var isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
-        var isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        jobberHooks.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), "Prefix prop only accepts \"<Avatar />\" or \"<Icon />\" component. You have \"" + (affix === null || affix === void 0 ? void 0 : affix.type) + "\".");
+        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
+        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
+        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
+        jobberHooks.useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
     }
 }
 
-function InternalChip(_a) {
-    var _b;
-    var label = _a.label, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.invalid, invalid = _e === void 0 ? false : _e, prefix = _a.prefix, suffix = _a.suffix, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
-    var _f = tslib_es6.__read(React.useState(), 2), truncateRef = _f[0], setTruncateRef = _f[1];
-    var isClickable = onClick && !disabled;
-    var classNames = classnames__default["default"](styles$1.chip, (_b = {},
-        _b[styles$1.clickable] = isClickable,
-        _b[styles$1.active] = active,
-        _b[styles$1.disabled] = disabled,
-        _b[styles$1.invalid] = invalid,
-        _b[styles$1.hasPrefix] = prefix,
-        _b[styles$1.hasSuffix] = suffix,
-        _b));
-    var affixProps = { active: active, invalid: invalid, disabled: disabled };
-    var Tag = onClick ? "button" : "div";
-    var chip = (React__default["default"].createElement(Tag, tslib_es6.__assign({ className: classNames }, (isClickable && { onClick: onClick, disabled: disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
-        React__default["default"].createElement(InternalChipAffix, tslib_es6.__assign({ affix: prefix }, affixProps)),
+function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
+    const [truncateRef, setTruncateRef] = React.useState();
+    const isClickable = onClick && !disabled;
+    const classNames = classnames__default["default"](styles$1.chip, {
+        [styles$1.clickable]: isClickable,
+        [styles$1.active]: active,
+        [styles$1.disabled]: disabled,
+        [styles$1.invalid]: invalid,
+        [styles$1.hasPrefix]: prefix,
+        [styles$1.hasSuffix]: suffix,
+    });
+    const affixProps = { active, invalid, disabled };
+    const Tag = onClick ? "button" : "div";
+    const chip = (React__default["default"].createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
+        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
         React__default["default"].createElement(Typography.Typography, { element: "span", numberOfLines: 1, size: "base" },
             React__default["default"].createElement("span", { ref: setTruncateRef }, label)),
-        React__default["default"].createElement(InternalChipAffix, tslib_es6.__assign({ affix: suffix }, affixProps))));
+        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
     return isTruncated() ? React__default["default"].createElement(Tooltip.Tooltip, { message: label }, chip) : chip;
     function isTruncated() {
         var _a;
-        var truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-        var truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
+        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
         return truncateChildHeight >= truncateParentHeight * 2;
     }
 }
 
-function ChipDismissible(_a) {
-    var label = _a.label, disabled = _a.disabled, invalid = _a.invalid, prefix = _a.prefix, onClick = _a.onClick, onRequestRemove = _a.onRequestRemove;
+function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
     return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-function InternalChipSingleSelect(_a) {
-    var children = _a.children, selected = _a.selected, _b = _a.name, name = _b === void 0 ? uuid.v1() : _b, onChange = _a.onChange, onClick = _a.onClick;
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, function (child) {
-        var isSelected = child.props.value === selected;
+function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
+    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
+        const isSelected = child.props.value === selected;
         return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: function () {
+            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
                     /* No op. onClick handles the change to allow deselecting. */
                 }, disabled: child.props.disabled }),
-            React__default["default"].createElement(InternalChip, tslib_es6.__assign({}, child.props, { active: isSelected }))));
+            React__default["default"].createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
     })));
     function handleKeyUp(active, value) {
         if (!active)
             return;
-        return function (event) {
+        return (event) => {
             if (event.key === " ") {
                 // Wait for DOM changes before applying the new change.
-                setTimeout(function () { return handleChange(value); }, 0);
+                setTimeout(() => handleChange(value), 0);
             }
         };
     }
     function handleClick(value) {
-        return function (event) {
+        return (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
             handleChange(value);
         };
     }
     function handleChange(value) {
-        var newValue = value !== selected ? value : undefined;
+        const newValue = value !== selected ? value : undefined;
         onChange(newValue);
     }
 }
 
-function InternalChipMultiSelect(_a) {
-    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick;
-    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, function (chip) {
-        var isChipActive = isChipSelected(chip.props.value);
+function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
+    return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
+        const isChipActive = isChipSelected(chip.props.value);
         return (React__default["default"].createElement("label", null,
             React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React__default["default"].createElement(InternalChip, tslib_es6.__assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
+            React__default["default"].createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
     })));
     function isChipSelected(value) {
         return selected.includes(value);
     }
     function handleClick(value) {
-        return function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick(event, value); };
+        return (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
     }
     function handleChange(value) {
-        return function () {
+        return () => {
             if (isChipSelected(value)) {
                 handleDeselect(value);
             }
@@ -188,12 +180,12 @@ function InternalChipMultiSelect(_a) {
         };
     }
     function handleSelect(value) {
-        var newVal = tslib_es6.__spread(selected, [value]);
+        const newVal = [...selected, value];
         onChange(newVal);
     }
     function handleDeselect(value) {
-        var values = selected;
-        var newVal = values.filter(function (val) { return val !== value; });
+        const values = selected;
+        const newVal = values.filter(val => val !== value);
         onChange(newVal);
     }
     function checkmarkIcon(show) {
@@ -212,39 +204,34 @@ var css = ".UICoKaZcJNyJZu_jLSFe0 {\n  display: -ms-flexbox;\n  display: flex;\n
 var styles = {"wrapper":"UICoKaZcJNyJZu_jLSFe0","input":"iYpu9Vckapbgfo7nKby6-","menu":"_3Y-bhobfNvAAUslopzbOoq","menuList":"_3pV83Z-mpuL-nlud9deXib","menuListOption":"yZlvrckyLt2bbuJSDc3s_","loadingIndicator":"_1JS35aIdiRtVwq3RLMJLlj","activeOption":"_1P6NA2S4eCq-AiLRgspXJX"};
 styleInject_es.styleInject(css);
 
-function useInternalChipDismissible(_a) {
-    var children = _a.children, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, onCustomAdd = _a.onCustomAdd;
-    var ref = React.useRef(null);
-    var chipOptions = children.map(function (chip) { return chip.props; });
-    var visibleChipOptions = chipOptions.filter(function (chip) {
-        return selected.includes(chip.value);
-    });
-    var sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, function (chip) {
-        return selected.indexOf(chip.value);
-    });
-    var availableChipOptions = chipOptions.filter(function (chip) { return !selected.includes(chip.value); });
-    var liveAnnounce = jobberHooks.useLiveAnnounce().liveAnnounce;
-    var actions = {
-        handleChipRemove: function (value) {
-            return function () {
-                liveAnnounce(value + " Removed");
-                onChange(selected.filter(function (val) { return val !== value; }));
+function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
+    const ref = React.useRef(null);
+    const chipOptions = children.map(chip => chip.props);
+    const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
+    const sortedVisibleChipOptions = lodash.sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
+    const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
+    const { liveAnnounce } = jobberHooks.useLiveAnnounce();
+    const actions = {
+        handleChipRemove: (value) => {
+            return () => {
+                liveAnnounce(`${value} Removed`);
+                onChange(selected.filter(val => val !== value));
             };
         },
-        handleChipAdd: function (value) { return onChange(tslib_es6.__spread(selected, [value])); },
+        handleChipAdd: (value) => onChange([...selected, value]),
         handleCustomAdd: onCustomAdd,
-        handleChipClick: function (value) {
+        handleChipClick: (value) => {
             if (onClick === undefined)
                 return;
-            return function (event) { return onClick(event, value); };
+            return (event) => onClick(event, value);
         },
-        handleWrapperKeyDown: function (event) {
-            var target = event.target;
-            var isInputAndHasValue = target instanceof HTMLInputElement && target.value;
+        handleWrapperKeyDown: (event) => {
+            const target = event.target;
+            const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
             if (isInputAndHasValue)
                 return;
-            var nextElementToFocus = target.nextElementSibling;
-            var prevElementToFocus = target.previousElementSibling;
+            const nextElementToFocus = target.nextElementSibling;
+            const prevElementToFocus = target.previousElementSibling;
             if (event.key === "ArrowLeft" &&
                 prevElementToFocus instanceof HTMLElement) {
                 prevElementToFocus.focus();
@@ -254,13 +241,13 @@ function useInternalChipDismissible(_a) {
                 nextElementToFocus.focus();
             }
         },
-        handleChipKeyDown: function (value) {
-            return function (event) {
+        handleChipKeyDown: (value) => {
+            return (event) => {
                 if (event.key === "Backspace" || event.key === "Delete") {
-                    var target = event.target;
+                    const target = event.target;
                     if (target instanceof HTMLElement) {
-                        var prevElement = target.previousElementSibling;
-                        var nextElement = target.nextElementSibling;
+                        const prevElement = target.previousElementSibling;
+                        const nextElement = target.nextElementSibling;
                         if (prevElement instanceof HTMLElement) {
                             prevElement.focus();
                         }
@@ -273,100 +260,99 @@ function useInternalChipDismissible(_a) {
             };
         },
     };
-    return tslib_es6.__assign(tslib_es6.__assign({}, actions), { ref: ref,
-        sortedVisibleChipOptions: sortedVisibleChipOptions,
-        availableChipOptions: availableChipOptions });
+    return Object.assign(Object.assign({}, actions), { ref,
+        sortedVisibleChipOptions,
+        availableChipOptions });
 }
 
-var menuId = uuid.v1();
+const menuId = uuid.v1();
 // eslint-disable-next-line max-statements
-function useInternalChipDismissibleInput(_a) {
-    var options = _a.options, _b = _a.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onCustomOptionSelect = _a.onCustomOptionSelect, onOptionSelect = _a.onOptionSelect, onSearch = _a.onSearch;
-    var _c = tslib_es6.__read(React.useState([]), 2), allOptions = _c[0], setAllOptions = _c[1];
-    var _d = tslib_es6.__read(React.useState(""), 2), searchValue = _d[0], setSearchValue = _d[1];
-    var _e = tslib_es6.__read(React.useState(false), 2), menuOpen = _e[0], setMenuOpen = _e[1];
-    var _f = tslib_es6.__read(React.useState(0), 2), activeIndex = _f[0], setActiveIndex = _f[1];
-    var _g = tslib_es6.__read(React.useState(false), 2), shouldCancelBlur = _g[0], setShouldCancelBlur = _g[1];
-    var _h = tslib_es6.__read(React.useState(false), 2), shouldCancelEnter = _h[0], setShouldCancelEnter = _h[1];
-    var canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
-    var maxOptionIndex = allOptions.length - 1;
-    var liveAnnounce = jobberHooks.useLiveAnnounce().liveAnnounce;
-    React.useEffect(function () {
+function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
+    const [allOptions, setAllOptions] = React.useState([]);
+    const [searchValue, setSearchValue] = React.useState("");
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [shouldCancelBlur, setShouldCancelBlur] = React.useState(false);
+    const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
+    const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
+    const maxOptionIndex = allOptions.length - 1;
+    const { liveAnnounce } = jobberHooks.useLiveAnnounce();
+    React.useEffect(() => {
         setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
     }, [options]);
-    var computed = {
-        menuId: menuId,
+    const computed = {
+        menuId,
         inputRef: React.useRef(null),
         activeOption: allOptions[activeIndex],
         hasAvailableOptions: allOptions.length > 0,
         nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
         previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
     };
-    var actions = {
-        generateDescendantId: function (index) { return computed.menuId + "-" + index; },
-        handleReset: function () {
+    const actions = {
+        generateDescendantId: (index) => `${computed.menuId}-${index}`,
+        handleReset: () => {
             setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
             setSearchValue("");
         },
-        handleOpenMenu: function () { return setMenuOpen(true); },
-        handleCloseMenu: function () {
+        handleOpenMenu: () => setMenuOpen(true),
+        handleCloseMenu: () => {
             setMenuOpen(false);
             setActiveIndex(0);
         },
-        handleCancelBlur: function () { return setShouldCancelBlur(true); },
-        handleEnableBlur: function () { return setShouldCancelBlur(false); },
-        handleBlur: function () {
+        handleCancelBlur: () => setShouldCancelBlur(true),
+        handleEnableBlur: () => setShouldCancelBlur(false),
+        handleBlur: () => {
             if (shouldCancelBlur)
                 return;
             actions.handleReset();
             actions.handleCloseMenu();
         },
-        handleSearchChange: function (event) {
+        handleSearchChange: (event) => {
             setActiveIndex(0);
             setSearchValue(event.currentTarget.value);
             setShouldCancelEnter(true);
         },
-        handleSetActiveOnMouseOver: function (index) {
-            return function () { return setActiveIndex(index); };
+        handleSetActiveOnMouseOver: (index) => {
+            return () => setActiveIndex(index);
         },
-        handleSelectOption: function (selected) {
+        handleSelectOption: (selected) => {
             var _a;
             if (allOptions.length === 0)
                 return;
-            var setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
+            const setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
             if (setValue) {
                 setValue(selected.value);
-                liveAnnounce(selected.label + " Added");
+                liveAnnounce(`${selected.label} Added`);
                 actions.handleReset();
                 (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
         },
-        handleKeyDown: function (event) {
-            var callbacks = {
-                Enter: function () {
+        handleKeyDown: (event) => {
+            const callbacks = {
+                Enter: () => {
                     if (shouldCancelEnter)
                         return;
                     actions.handleSelectOption(computed.activeOption);
                 },
-                Tab: function () { return actions.handleSelectOption(computed.activeOption); },
-                ",": function () {
+                Tab: () => actions.handleSelectOption(computed.activeOption),
+                ",": () => {
                     if (searchValue.length === 0)
                         return;
                     actions.handleSelectOption(generateCustomOptionObject(searchValue));
                 },
-                ArrowDown: function () {
+                ArrowDown: () => {
                     if (isLoadingMore && activeIndex === maxOptionIndex)
                         return;
                     setActiveIndex(computed.nextOptionIndex);
                 },
-                ArrowUp: function () { return setActiveIndex(computed.previousOptionIndex); },
+                ArrowUp: () => setActiveIndex(computed.previousOptionIndex),
             };
             if (searchValue.length === 0) {
-                callbacks.Backspace = function () {
+                callbacks.Backspace = () => {
                     var _a;
                     // If there's no text left to delete,
                     // and delete is pressed again, focus on a chip instead.
-                    var target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+                    const target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
                     if (target instanceof HTMLElement) {
                         target.focus();
                     }
@@ -374,30 +360,28 @@ function useInternalChipDismissibleInput(_a) {
             }
             handleKeydownEvents(callbacks, event);
         },
-        handleDebouncedSearch: lodash.debounce(function () {
+        handleDebouncedSearch: lodash.debounce(() => {
             onSearch && onSearch(searchValue);
             setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
             setShouldCancelEnter(false);
         }, 300),
     };
-    return tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, actions), { activeIndex: activeIndex,
-        allOptions: allOptions }), computed), { menuOpen: menuOpen,
-        searchValue: searchValue,
-        shouldCancelBlur: shouldCancelBlur });
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
+        allOptions }), computed), { menuOpen,
+        searchValue,
+        shouldCancelBlur });
 }
 function generateOptions(options, searchValue, canAddCustomOption) {
-    var allOptions = options
-        .filter(function (option) {
-        return option.label.toLowerCase().match(searchValue.trim().toLowerCase());
-    })
-        .map(function (opt) { return (tslib_es6.__assign(tslib_es6.__assign({}, opt), { custom: false })); });
-    var _a = generateCustomOption(allOptions, searchValue, canAddCustomOption), shouldAddCustomOption = _a.shouldAddCustomOption, customOption = _a.customOption;
+    const allOptions = options
+        .filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase()))
+        .map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
+    const { shouldAddCustomOption, customOption } = generateCustomOption(allOptions, searchValue, canAddCustomOption);
     shouldAddCustomOption && allOptions.push(customOption);
     return allOptions;
 }
 function generateCustomOption(options, searchValue, canAddCustomOption) {
     function shouldAddCustomOption() {
-        var isMatchingOption = options.some(function (option) { return option.label.toLowerCase() === searchValue.trim().toLowerCase(); });
+        const isMatchingOption = options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
         return !!searchValue && !isMatchingOption;
     }
     return {
@@ -416,8 +400,7 @@ function generateCustomOptionObject(searchValue) {
 function handleKeydownEvents(callbacks, event) {
     if (event.shiftKey)
         return;
-    Object.entries(callbacks).forEach(function (_a) {
-        var _b = tslib_es6.__read(_a, 2), key = _b[0], callback = _b[1];
+    Object.entries(callbacks).forEach(([key, callback]) => {
         if (event.key === key) {
             event.preventDefault();
             callback(event);
@@ -426,40 +409,40 @@ function handleKeydownEvents(callbacks, event) {
 }
 
 function useInView() {
-    var ref = React.useRef(null);
-    var _a = tslib_es6.__read(React.useState(false), 2), isInView = _a[0], setIsInView = _a[1];
+    const ref = React.useRef(null);
+    const [isInView, setIsInView] = React.useState(false);
     if (window.IntersectionObserver) {
-        var observer_1 = new IntersectionObserver(function (entries) {
+        const observer = new IntersectionObserver(entries => {
             setIsInView(entries[0].isIntersecting);
         });
-        React.useEffect(function () {
-            ref.current && observer_1.observe(ref.current);
-            return function () {
+        React.useEffect(() => {
+            ref.current && observer.observe(ref.current);
+            return () => {
                 if (!ref.current)
                     return;
-                observer_1.unobserve(ref.current);
+                observer.unobserve(ref.current);
             };
         });
     }
-    return { ref: ref, isInView: isInView };
+    return { ref, isInView };
 }
 
 function useRepositionMenu(attachTo) {
     var _a;
-    var _b = tslib_es6.__read(React.useState(), 2), positionElement = _b[0], setPositionedElementRef = _b[1];
-    var popper = reactPopper.usePopper(attachTo.current, positionElement, {
+    const [positionElement, setPositionedElementRef] = React.useState();
+    const popper = reactPopper.usePopper(attachTo.current, positionElement, {
         modifiers: [
             { name: "offset", options: { offset: [0, 8] } },
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    var targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return tslib_es6.__assign(tslib_es6.__assign({}, popper), { setPositionedElementRef: setPositionedElementRef, targetWidth: targetWidth });
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
 }
 
 function useScrollToActive(index) {
-    var ref = React.useRef(null);
-    React.useEffect(function () {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         var _a, _b;
         if (!window.HTMLElement.prototype.scrollIntoView)
             return;
@@ -473,20 +456,20 @@ function useScrollToActive(index) {
 }
 
 function InternalChipDismissibleInput(props) {
-    var _a = props.activator, activator = _a === void 0 ? React__default["default"].createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }) : _a, attachTo = props.attachTo, _b = props.isLoadingMore, isLoadingMore = _b === void 0 ? false : _b, onLoadMore = props.onLoadMore;
-    var _c = useInternalChipDismissibleInput(props), activeIndex = _c.activeIndex, allOptions = _c.allOptions, hasAvailableOptions = _c.hasAvailableOptions, inputRef = _c.inputRef, menuId = _c.menuId, menuOpen = _c.menuOpen, searchValue = _c.searchValue, generateDescendantId = _c.generateDescendantId, handleBlur = _c.handleBlur, handleOpenMenu = _c.handleOpenMenu, handleSearchChange = _c.handleSearchChange, handleCancelBlur = _c.handleCancelBlur, handleEnableBlur = _c.handleEnableBlur, handleSetActiveOnMouseOver = _c.handleSetActiveOnMouseOver, handleKeyDown = _c.handleKeyDown, handleSelectOption = _c.handleSelectOption, handleDebouncedSearch = _c.handleDebouncedSearch;
-    var menuRef = useScrollToActive(activeIndex);
-    var _d = useInView(), visibleChildRef = _d.ref, isInView = _d.isInView;
-    var _e = useRepositionMenu(attachTo), popperStyles = _e.styles, attributes = _e.attributes, update = _e.update, setPositionedElementRef = _e.setPositionedElementRef;
-    React.useEffect(function () {
+    const { activator = React__default["default"].createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
+    const menuRef = useScrollToActive(activeIndex);
+    const { ref: visibleChildRef, isInView } = useInView();
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
+    React.useEffect(() => {
         if (menuOpen && update)
             update();
     }, [allOptions]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         handleDebouncedSearch();
         return handleDebouncedSearch.cancel;
     }, [searchValue]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);
     if (!menuOpen) {
@@ -494,36 +477,33 @@ function InternalChipDismissibleInput(props) {
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: lodash.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", tslib_es6.__assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+        (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
             React__default["default"].createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map(function (option, i) {
-                    var _a;
-                    return (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, (_a = {},
-                            _a[styles.activeOption] = activeIndex === i,
-                            _a)), onClick: function () { return handleSelectOption(option); }, onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                        React__default["default"].createElement("span", { "aria-hidden": true }, option.prefix),
-                        React__default["default"].createElement(Text.Text, null, option.label)));
-                }),
+                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, {
+                        [styles.activeOption]: activeIndex === i,
+                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
+                    React__default["default"].createElement("span", { "aria-hidden": true }, option.prefix),
+                    React__default["default"].createElement(Text.Text, null, option.label)))),
                 React__default["default"].createElement("div", { ref: visibleChildRef }),
                 isLoadingMore && (React__default["default"].createElement("div", { className: styles.loadingIndicator },
                     React__default["default"].createElement(Spinner.Spinner, { size: "small", inline: true }))))))));
 }
 
 function InternalChipDismissible(props) {
-    var _a = useInternalChipDismissible(props), availableChipOptions = _a.availableChipOptions, wrapperRef = _a.ref, sortedVisibleChipOptions = _a.sortedVisibleChipOptions, handleChipAdd = _a.handleChipAdd, handleChipClick = _a.handleChipClick, handleChipKeyDown = _a.handleChipKeyDown, handleChipRemove = _a.handleChipRemove, handleCustomAdd = _a.handleCustomAdd, handleWrapperKeyDown = _a.handleWrapperKeyDown;
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
     return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(function (chip) { return (React__default["default"].createElement(InternalChip, tslib_es6.__assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: chip.value + ". Press delete or backspace to remove " + chip.value, tabIndex: 0, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) }))); }),
+        sortedVisibleChipOptions.map(chip => (React__default["default"].createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.value}. Press delete or backspace to remove ${chip.value}`, tabIndex: 0, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
         React__default["default"].createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }
 
 function Chips(props) {
     switch (props.type) {
         case "dismissible":
-            return React__default["default"].createElement(InternalChipDismissible, tslib_es6.__assign({}, props));
+            return React__default["default"].createElement(InternalChipDismissible, Object.assign({}, props));
         case "multiselect":
-            return React__default["default"].createElement(InternalChipMultiSelect, tslib_es6.__assign({}, props));
+            return React__default["default"].createElement(InternalChipMultiSelect, Object.assign({}, props));
         default:
-            return React__default["default"].createElement(InternalChipSingleSelect, tslib_es6.__assign({}, props));
+            return React__default["default"].createElement(InternalChipSingleSelect, Object.assign({}, props));
     }
 }