@workday/canvas-kit-labs-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/search-form/lib/SearchForm.js

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -42,32 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchForm = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var form_field_1 = require("@workday/canvas-kit-react/form-field");
-var combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
-var text_input_1 = require("@workday/canvas-kit-react/text-input");
-var themes_1 = require("./themes");
-var chroma_js_1 = __importDefault(require("chroma-js"));
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const form_field_1 = require("@workday/canvas-kit-react/form-field");
+const combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
+const themes_1 = require("./themes");
+const chroma_js_1 = __importDefault(require("chroma-js"));
 function getInputColors(theme, isFocused) {
     return {
         background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
@@ -79,19 +44,18 @@ function getInputColors(theme, isFocused) {
         boxShadow: isFocused && theme.boxShadowFocus ? theme.boxShadowFocus : theme.boxShadow,
     };
 }
-var formCollapsedBackground = tokens_1.colors.frenchVanilla100;
-var maxWidth = 480;
-var minWidth = 120;
-var StyledSearchForm = common_1.styled('form')({
+const formCollapsedBackground = tokens_1.colors.frenchVanilla100;
+const maxWidth = 480;
+const minWidth = 120;
+const StyledSearchForm = common_1.styled('form')({
     position: 'relative',
     flexGrow: 1,
     display: 'flex',
     alignItems: 'center',
     marginLeft: tokens_1.space.m,
     minWidth: minWidth,
-}, function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm, rightAlign = _a.rightAlign, grow = _a.grow;
-    var collapseStyles = isCollapsed
+}, ({ isCollapsed, showForm, rightAlign, grow }) => {
+    const collapseStyles = isCollapsed
         ? {
             top: 0,
             right: 0,
@@ -107,34 +71,30 @@ var StyledSearchForm = common_1.styled('form')({
             zIndex: 1,
         }
         : {};
-    var rightAlignStyles = rightAlign
+    const rightAlignStyles = rightAlign
         ? {
             textAlign: 'right',
             maxWidth: grow ? '100%' : maxWidth,
         }
         : {};
-    return __assign(__assign({}, rightAlignStyles), collapseStyles);
+    return { ...rightAlignStyles, ...collapseStyles };
 });
-var SearchContainer = common_1.styled('div')({
-    position: "relative",
+const SearchContainer = common_1.styled('div')({
+    position: `relative`,
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: `100%`,
     textAlign: 'left',
-}, function (_a) {
-    var height = _a.height;
-    return ({
-        minHeight: height,
-    });
-});
-var SearchCombobox = common_1.styled(combobox_1.Combobox)({
-    width: "100%",
+}, ({ height }) => ({
+    minHeight: height,
+}));
+const SearchCombobox = common_1.styled(combobox_1.Combobox)({
+    width: `100%`,
 });
-var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
+const SearchIcon = common_1.styled(button_1.TertiaryButton)(({ isCollapsed, isHidden }) => {
     return {
-        position: "absolute",
-        margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs,
+        position: `absolute`,
+        margin: isCollapsed ? `auto ${tokens_1.space.xxs}` : `auto ${tokens_1.space.xxxs}`,
         top: 0,
         bottom: 0,
         left: 0,
@@ -143,19 +103,25 @@ var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
         display: isHidden ? 'none' : 'flex',
     };
 });
-var CloseButton = common_1.styled(button_1.TertiaryButton)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
-    var collapseStyles = isCollapsed && showForm
+const CloseButton = common_1.styled(button_1.TertiaryButton)(({ isCollapsed, showForm }) => {
+    const collapseStyles = isCollapsed && showForm
         ? {
             display: 'inline-block',
         }
         : {
             display: 'none',
         };
-    return __assign({ position: "absolute", top: 0, bottom: 0, right: 0, margin: "auto " + tokens_1.space.xxs, zIndex: 3 }, collapseStyles);
+    return {
+        position: `absolute`,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        margin: `auto ${tokens_1.space.xxs}`,
+        zIndex: 3,
+        ...collapseStyles,
+    };
 });
-var SearchField = common_1.styled(form_field_1.FormField)(function (_a) {
-    var isCollapsed = _a.isCollapsed, showForm = _a.showForm, grow = _a.grow, height = _a.height;
+const SearchField = common_1.styled(form_field_1.FormField)(({ isCollapsed, showForm, grow, height }) => {
     return {
         display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
         width: '100%',
@@ -167,16 +133,15 @@ var SearchField = common_1.styled(form_field_1.FormField)(function (_a) {
         },
     };
 });
-var SearchInput = common_1.styled(text_input_1.TextInput)(function (_a) {
-    var isCollapsed = _a.isCollapsed, inputColors = _a.inputColors, grow = _a.grow, height = _a.height;
-    var collapseStyles = isCollapsed
+const SearchInput = common_1.styled(text_input_1.TextInput)(({ isCollapsed, inputColors, grow, height }) => {
+    const collapseStyles = isCollapsed
         ? {
             fontSize: '20px',
             paddingLeft: tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.s,
             paddingRight: tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.s,
             maxWidth: 'none',
             minWidth: 0,
-            backgroundColor: "rgba(0, 0, 0, 0)",
+            backgroundColor: `rgba(0, 0, 0, 0)`,
             height: height,
         }
         : {
@@ -187,11 +152,22 @@ var SearchInput = common_1.styled(text_input_1.TextInput)(function (_a) {
             backgroundColor: inputColors.background,
             height: height,
         };
-    return __assign({ fontSize: '14px', boxShadow: inputColors.boxShadow, color: inputColors.color, border: 'none', WebkitAppearance: 'none', transition: 'background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms', zIndex: 2, width: '100%', '&::-webkit-search-cancel-button': {
+    return {
+        fontSize: '14px',
+        boxShadow: inputColors.boxShadow,
+        color: inputColors.color,
+        border: 'none',
+        WebkitAppearance: 'none',
+        transition: 'background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms',
+        zIndex: 2,
+        width: '100%',
+        '&::-webkit-search-cancel-button': {
             display: 'none',
-        }, '&::placeholder': {
+        },
+        '&::placeholder': {
             color: inputColors.placeholderColor,
-        }, '&:not([disabled])': {
+        },
+        '&:not([disabled])': {
             '&:focus, &:active': {
                 outline: 'none',
                 boxShadow: inputColors.boxShadow,
@@ -199,93 +175,93 @@ var SearchInput = common_1.styled(text_input_1.TextInput)(function (_a) {
             '&:hover': {
                 backgroundColor: inputColors.backgroundHover,
             },
-        } }, collapseStyles);
+        },
+        ...collapseStyles,
+    };
 });
-var SearchForm = /** @class */ (function (_super) {
-    __extends(SearchForm, _super);
-    function SearchForm() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.inputRef = React.createRef();
-        _this.openRef = React.createRef();
-        _this.labelId = common_1.generateUniqueId();
-        _this.state = {
+class SearchForm extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.inputRef = React.createRef();
+        this.openRef = React.createRef();
+        this.defaultLabelId = common_1.generateUniqueId();
+        this.state = {
             showForm: false,
             searchQuery: '',
             isFocused: false,
         };
-        _this.getTheme = function () {
-            var theme;
-            if (typeof _this.props.searchTheme === 'number') {
-                theme = themes_1.searchThemes[_this.props.searchTheme];
+        this.getTheme = () => {
+            let theme;
+            if (typeof this.props.searchTheme === 'number') {
+                theme = themes_1.searchThemes[this.props.searchTheme];
             }
-            else if (_this.props.searchTheme) {
-                theme = _this.props.searchTheme;
+            else if (this.props.searchTheme) {
+                theme = this.props.searchTheme;
             }
             else {
                 theme = themes_1.searchThemes[themes_1.SearchTheme.Light];
             }
             return theme;
         };
-        _this.getThemeColors = function () {
-            var theme = _this.props.isCollapsed && _this.state.showForm
+        this.getThemeColors = () => {
+            const theme = this.props.isCollapsed && this.state.showForm
                 ? themes_1.searchThemes[themes_1.SearchTheme.Transparent]
-                : _this.getTheme();
-            return getInputColors(theme, _this.state.isFocused);
+                : this.getTheme();
+            return getInputColors(theme, this.state.isFocused);
         };
-        _this.getIconButtonType = function () {
-            var background = _this.getThemeColors().background || "#fff";
-            if (_this.props.isCollapsed && _this.state.showForm) {
+        this.getIconButtonType = () => {
+            let background = this.getThemeColors().background || `#fff`;
+            if (this.props.isCollapsed && this.state.showForm) {
                 background = formCollapsedBackground;
             }
-            var isDarkBackground = chroma_js_1.default(background).get('lab.l') < 70;
+            const isDarkBackground = chroma_js_1.default(background).get('lab.l') < 70;
             return isDarkBackground ? 'inverse' : undefined;
         };
-        _this.handleSubmit = function (event) {
+        this.handleSubmit = (event) => {
             event.preventDefault();
-            if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
-                _this.props.onSubmit(event);
+            if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
+                this.props.onSubmit(event);
             }
             else {
-                _this.focusInput();
+                this.focusInput();
             }
         };
-        _this.openCollapsedSearch = function () {
-            if (_this.props.isCollapsed && !_this.state.showForm) {
-                _this.setState({ showForm: true });
+        this.openCollapsedSearch = () => {
+            if (this.props.isCollapsed && !this.state.showForm) {
+                this.setState({ showForm: true });
             }
         };
-        _this.closeCollapsedSearch = function () {
-            if (_this.props.isCollapsed && _this.state.showForm) {
-                _this.setState({ showForm: false });
+        this.closeCollapsedSearch = () => {
+            if (this.props.isCollapsed && this.state.showForm) {
+                this.setState({ showForm: false });
             }
         };
-        _this.focusInput = function () {
-            if (_this.inputRef.current) {
-                _this.inputRef.current.focus();
+        this.focusInput = () => {
+            if (this.inputRef.current) {
+                this.inputRef.current.focus();
             }
         };
-        _this.focusOpen = function () {
-            if (_this.openRef.current) {
-                _this.openRef.current.focus();
+        this.focusOpen = () => {
+            if (this.openRef.current) {
+                this.openRef.current.focus();
             }
         };
-        _this.handleFocus = function () {
-            _this.setState({ isFocused: true });
+        this.handleFocus = () => {
+            this.setState({ isFocused: true });
         };
-        _this.handleBlur = function () {
-            _this.setState({ isFocused: false });
+        this.handleBlur = () => {
+            this.setState({ isFocused: false });
         };
-        _this.handleSearchInputChange = function (event) {
+        this.handleSearchInputChange = (event) => {
             event.preventDefault();
-            _this.setState({ searchQuery: event.target.value });
-            if (_this.props.onInputChange) {
-                _this.props.onInputChange(event);
+            this.setState({ searchQuery: event.target.value });
+            if (this.props.onInputChange) {
+                this.props.onInputChange(event);
             }
         };
-        return _this;
     }
-    SearchForm.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var showFormToggled = this.state.showForm !== prevState.showForm;
+    componentDidUpdate(prevProps, prevState) {
+        const showFormToggled = this.state.showForm !== prevState.showForm;
         if (showFormToggled) {
             if (this.state.showForm) {
                 this.focusInput();
@@ -294,19 +270,18 @@ var SearchForm = /** @class */ (function (_super) {
                 this.focusOpen();
             }
         }
-    };
-    SearchForm.prototype.render = function () {
-        var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
-        return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
+    }
+    render() {
+        const { clearButtonAriaLabel = 'Reset Search Form', placeholder = 'Search', inputLabel = 'Search', submitAriaLabel = 'Search', openButtonAriaLabel = 'Open Search', closeButtonAriaLabel = 'Cancel', labelId = this.defaultLabelId, showClearButton = true, height = 40, grow, onSubmit, isCollapsed, onInputChange, autocompleteItems, initialValue, searchTheme, rightAlign, allowEmptyStringSearch = false, ...elemProps } = this.props;
+        return (React.createElement(StyledSearchForm, Object.assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
             React.createElement(SearchContainer, { height: height },
                 React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
                 React.createElement(SearchIcon, { "aria-label": openButtonAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", isHidden: !isCollapsed || (!!isCollapsed && this.state.showForm) }),
-                React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: form_field_1.FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
-                    React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
+                React.createElement(SearchField, { grow: grow, id: labelId, inputId: `input-${labelId}`, label: inputLabel, labelPosition: form_field_1.FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
+                    React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: labelId },
                         React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
                 React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
-    };
-    SearchForm.Theme = themes_1.SearchTheme;
-    return SearchForm;
-}(React.Component));
+    }
+}
 exports.SearchForm = SearchForm;
+SearchForm.Theme = themes_1.SearchTheme;

package/dist/commonjs/search-form/lib/themes.js

@@ -1,17 +1,16 @@
 "use strict";
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchThemes = exports.SearchTheme = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 var SearchTheme;
 (function (SearchTheme) {
     SearchTheme[SearchTheme["Light"] = 0] = "Light";
     SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
     SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
 })(SearchTheme = exports.SearchTheme || (exports.SearchTheme = {}));
-exports.searchThemes = (_a = {},
-    _a[SearchTheme.Transparent] = {
+exports.searchThemes = {
+    [SearchTheme.Transparent]: {
         background: 'rgba(0, 0, 0, 0)',
         backgroundFocus: 'rgba(0, 0, 0, 0)',
         color: tokens_1.colors.blackPepper300,
@@ -21,7 +20,7 @@ exports.searchThemes = (_a = {},
         boxShadow: 'none',
         boxShadowFocus: 'none',
     },
-    _a[SearchTheme.Light] = {
+    [SearchTheme.Light]: {
         background: tokens_1.colors.soap200,
         backgroundFocus: tokens_1.colors.soap200,
         backgroundHover: tokens_1.colors.soap300,
@@ -30,7 +29,7 @@ exports.searchThemes = (_a = {},
         boxShadow: 'none',
         boxShadowFocus: common_1.focusRing().boxShadow,
     },
-    _a[SearchTheme.Dark] = {
+    [SearchTheme.Dark]: {
         background: 'rgba(0, 0, 0, 0.2)',
         backgroundFocus: tokens_1.colors.frenchVanilla100,
         color: tokens_1.colors.frenchVanilla100,
@@ -39,4 +38,4 @@ exports.searchThemes = (_a = {},
         placeholderColorFocus: tokens_1.colors.licorice300,
         boxShadow: 'none',
     },
-    _a);
+};

package/dist/es6/combobox/lib/AutocompleteList.js

@@ -1,58 +1,40 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import React, { Fragment, useState } from 'react';
 import styled from '@emotion/styled';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { accessibleHide, generateUniqueId } from '@workday/canvas-kit-react/common';
 import { getOptionId, listBoxIdPart, getTextFromElement } from './Combobox';
-var Autocomplete = styled('ul')({
+const Autocomplete = styled('ul')({
     margin: 0,
     maxHeight: 200,
     boxSizing: 'border-box',
     overflowY: 'auto',
-    padding: space.xxs + " 0",
+    padding: `${space.xxs} 0`,
 });
-var AccessibleHide = styled('span')(accessibleHide);
-export var AutocompleteList = function (_a) {
-    var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
-    var randomComponentId = useState(generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
-    var componentId = comboboxId || randomComponentId;
-    var listBoxProps = {
+const AccessibleHide = styled('span')(accessibleHide);
+export const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
+    const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
+    const componentId = comboboxId || randomComponentId;
+    const listBoxProps = {
         role: 'listbox',
-        id: componentId + "-" + listBoxIdPart,
+        id: `${componentId}-${listBoxIdPart}`,
         'aria-labelledby': labelId,
     };
-    var createListItem = function (listboxItem, itemIndex, groupMessage) {
-        var children = __spreadArrays([
-            React.createElement(AccessibleHide, { key: "group-message-" + itemIndex }, groupMessage)
-        ], React.Children.toArray(listboxItem.props.children));
+    const createListItem = (listboxItem, itemIndex, groupMessage) => {
+        const children = [
+            React.createElement(AccessibleHide, { key: `group-message-${itemIndex}` }, groupMessage),
+            ...React.Children.toArray(listboxItem.props.children),
+        ];
         return (React.createElement(Fragment, { key: itemIndex }, React.cloneElement(listboxItem, {
             children: children,
             id: getOptionId(componentId, itemIndex),
             role: 'option',
             isFocused: selectedIndex === itemIndex,
             'aria-selected': selectedIndex === itemIndex ? true : undefined,
-            onMouseDown: function (event) {
+            onMouseDown: (event) => {
                 // prevent focus from shifting away from the the combobox
                 event.preventDefault();
             },
-            onClick: function (event) {
+            onClick: (event) => {
                 event.preventDefault();
                 handleAutocompleteClick(event, listboxItem.props);
             },
@@ -62,29 +44,26 @@ export var AutocompleteList = function (_a) {
         return null;
     }
     else if (autocompleteItems[0].hasOwnProperty('header')) {
-        var itemIndex_1 = 0;
-        return (React.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (_a, groupIndex) {
-            var header = _a.header, items = _a.items;
-            var groupLabel = "itemGroup-" + componentId + "-" + groupIndex;
+        let itemIndex = 0;
+        return (React.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map(({ header, items }, groupIndex) => {
+            const groupLabel = `itemGroup-${componentId}-${groupIndex}`;
             return (React.createElement(Fragment, { key: groupLabel },
                 React.cloneElement(header, {
                     role: 'presentation',
-                    style: { pointerEvents: "none" },
+                    style: { pointerEvents: `none` },
                 }),
-                items.map(function (listboxItem) {
-                    var headerName = getTextFromElement(header);
-                    var groupMessage = showGroupText
-                        ? "Entering group " + headerName + ", with " + items.length + " options."
+                items.map((listboxItem) => {
+                    const headerName = getTextFromElement(header);
+                    const groupMessage = showGroupText
+                        ? `Entering group ${headerName}, with ${items.length} options.`
                         : undefined;
-                    var item = createListItem(listboxItem, itemIndex_1, groupMessage);
-                    itemIndex_1++;
+                    const item = createListItem(listboxItem, itemIndex, groupMessage);
+                    itemIndex++;
                     return item;
                 })));
         })));
     }
     else {
-        return (React.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (listboxItem, index) {
-            return createListItem(listboxItem, index);
-        })));
+        return (React.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map((listboxItem, index) => createListItem(listboxItem, index))));
     }
 };