@dxc-technology/halstack-react 0.0.0-ebf4fe2 → 0.0.0-ec06b53

package/tabs/Tabs.test.js

@@ -25,6 +25,23 @@ var sampleTabsWithBadge = [{
   label: "Tab-3",
   notificationNumber: "101"
 }];
+var sampleTabsMiddleDisabled = [{
+  label: "Tab-1"
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
+var sampleTabsLastTabNonDisabled = [{
+  label: "Tab-1",
+  isDisabled: true
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
@@ -103,18 +120,26 @@ describe("Tabs component tests", function () {
       tabs: sampleTabs,
       onTabClick: onTabClick
     })),
-        getByText = _render6.getByText;
+        getByText = _render6.getByText,
+        getAllByRole = _render6.getAllByRole;
 
+    var tabs = getAllByRole("tab");
     var tab1 = getByText("Tab-1");
     var tab2 = getByText("Tab-2");
 
     _react2.fireEvent.click(tab2);
 
     expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
 
     _react2.fireEvent.click(tab1);
 
     expect(onTabClick).toHaveBeenCalledWith(0);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
   });
   test("Controlled tabs", function () {
     var onTabClick = jest.fn();
@@ -124,17 +149,203 @@ describe("Tabs component tests", function () {
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render7.getByText;
+        getByText = _render7.getByText,
+        getAllByRole = _render7.getAllByRole;
 
-    var tab2 = getByText("Tab-2");
-    var tab3 = getByText("Tab-3");
+    var tabs = getAllByRole("tab");
 
-    _react2.fireEvent.click(tab2);
+    _react2.fireEvent.click(tabs[1]);
+
+    expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+  });
+  test("Uncontrolled tabs should have focus in the first non-disabled tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick
+    })),
+        getAllByRole = _render8.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Controlled tabs with active index in disabled tab should not change focus to the first available tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick,
+      activeTabIndex: 0
+    })),
+        getAllByRole = _render9.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+  });
+  test("Select tabs with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabs,
+      onTabClick: onTabClick
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole,
+        getAllByRole = _render10.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
     expect(onTabClick).toHaveBeenCalledWith(1);
 
-    _react2.fireEvent.click(tab3);
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(1);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+  });
+  test("Skip disabled tab with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsMiddleDisabled,
+      onTabClick: onTabClick
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole,
+        getAllByRole = _render11.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: " "
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
     expect(onTabClick).toHaveBeenCalledWith(2);
   });
 });

package/tabs/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -21,7 +21,7 @@ declare type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-declare type TabLabelProps = TabCommonProps & {
+export declare type TabLabelProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -31,7 +31,7 @@ declare type TabLabelProps = TabCommonProps & {
      */
     icon?: string | SVG;
 };
-declare type TabIconProps = TabCommonProps & {
+export declare type TabIconProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -41,6 +41,16 @@ declare type TabIconProps = TabCommonProps & {
      */
     icon: string | SVG;
 };
+export declare type TabProps = {
+    tab: TabLabelProps | TabIconProps;
+    active: boolean;
+    tabIndex: number;
+    hasLabelAndIcon: boolean;
+    iconPosition: "top" | "left";
+    onClick: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};
 declare type Props = {
     /**
      * An array of objects representing the tabs.

package/tabs-nav/NavTabs.js

@@ -91,15 +91,15 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       return getPropInChild(child, "active");
     });
 
-    switch (event.keyCode) {
-      case 37:
-        // arrow left
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
         event.preventDefault();
         setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
 
-      case 39:
-        // arrow right
+      case "Right":
+      case "ArrowRight":
         event.preventDefault();
         setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;

package/tabs-nav/Tab.js

@@ -59,11 +59,9 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var _tabRef$current2;
 
-    switch (event.keyCode) {
-      case 13: // enter
-
-      case 32:
-        // space
+    switch (event.key) {
+      case " ":
+      case "Enter":
         tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
         event.preventDefault();
         break;

package/tabs-nav/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type TabProps = {
     /**
      * Whether the tab is active or not.

package/tag/Tag.js

@@ -99,7 +99,7 @@ var sizes = {
   medium: "240px",
   large: "480px",
   fillParent: "100%",
-  fitContent: "unset"
+  fitContent: "fit-content"
 };
 
 var calculateWidth = function calculateWidth(margin, size) {

package/tag/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".

package/text-input/Icons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const icons: {
+    error: JSX.Element;
+    clear: JSX.Element;
+    increment: JSX.Element;
+    decrement: JSX.Element;
+};
+export default icons;

package/text-input/Icons.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var icons = {
+  error: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  })),
+  clear: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+  })),
+  increment: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+  })),
+  decrement: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 13H5v-2h14v2z"
+  }))
+};
+var _default = icons;
+exports["default"] = _default;

package/text-input/Suggestion.js

@@ -18,7 +18,7 @@ var _templateObject, _templateObject2;
 var Suggestion = function Suggestion(_ref) {
   var id = _ref.id,
       value = _ref.value,
-      onClick = _ref.onClick,
+      _onClick = _ref.onClick,
       suggestion = _ref.suggestion,
       isLast = _ref.isLast,
       visuallyFocused = _ref.visuallyFocused,
@@ -28,17 +28,19 @@ var Suggestion = function Suggestion(_ref) {
   var noMatchedWords = suggestion.replace(regEx, "");
   return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
     id: id,
-    onClick: onClick,
+    onClick: function onClick() {
+      _onClick(suggestion);
+    },
     visuallyFocused: visuallyFocused,
     role: "option",
-    "aria-selected": visuallyFocused ? "true" : undefined
+    "aria-selected": visuallyFocused ? true : undefined
   }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
     last: isLast,
     visuallyFocused: visuallyFocused
-  }, highlighted ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
+  }, highlighted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords) : suggestion));
 };
 
-var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n  box-shadow: inset 0 0 0 2px\n    ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent";
 }, function (props) {
   return props.theme.hoverListOptionBackgroundColor;

package/text-input/Suggestions.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SuggestionsProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ id, value, suggestions, visualFocusIndex, highlightedSuggestions, searchHasErrors, isSearching, suggestionOnClick, getTextInputWidth, }: SuggestionsProps) => JSX.Element>;
+export default _default;

package/text-input/Suggestions.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+
+var _Icons = _interopRequireDefault(require("./Icons"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Suggestions = function Suggestions(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      suggestions = _ref.suggestions,
+      visualFocusIndex = _ref.visualFocusIndex,
+      highlightedSuggestions = _ref.highlightedSuggestions,
+      searchHasErrors = _ref.searchHasErrors,
+      isSearching = _ref.isSearching,
+      suggestionOnClick = _ref.suggestionOnClick,
+      getTextInputWidth = _ref.getTextInputWidth;
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  var listboxRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    var _listboxRef$current, _visualFocusedOptionE;
+
+    var visualFocusedOptionEl = listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.querySelectorAll("[role='option']")[visualFocusIndex];
+    visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
+      block: "nearest",
+      inline: "start"
+    });
+  }, [visualFocusIndex]);
+
+  var handleResize = function handleResize() {
+    setStyles({
+      width: getTextInputWidth()
+    });
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    handleResize();
+  }, [getTextInputWidth]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getTextInputWidth]);
+  return /*#__PURE__*/_react["default"].createElement(SuggestionsContainer, {
+    id: id,
+    error: searchHasErrors ? true : false,
+    onMouseDown: function onMouseDown(event) {
+      event.preventDefault();
+    },
+    ref: listboxRef,
+    role: "listbox",
+    backgroundType: backgroundType,
+    style: styles
+  }, !isSearching && !searchHasErrors && suggestions.length > 0 && suggestions.map(function (suggestion, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Suggestion["default"], {
+      key: "suggestion-".concat(index),
+      id: "suggestion-".concat(index),
+      value: value,
+      onClick: suggestionOnClick,
+      suggestion: suggestion,
+      isLast: index === suggestions.length - 1,
+      visuallyFocused: visualFocusIndex === index,
+      highlighted: highlightedSuggestions
+    });
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), searchHasErrors && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
+    backgroundType: backgroundType
+  }, _Icons["default"].error), translatedLabels.textInput.fetchingDataErrorMessage));
+};
+
+var SuggestionsContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+  return props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
+}, function (props) {
+  return props.error ? props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
+}, function (props) {
+  return props.theme.listOptionFontColor;
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.listOptionFontSize;
+}, function (props) {
+  return props.theme.listOptionFontStyle;
+}, function (props) {
+  return props.theme.listOptionFontWeight;
+});
+
+var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
+  return props.theme.systemMessageFontColor;
+});
+
+var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
+  return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
+});
+
+var SuggestionsError = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
+  return props.theme.errorListDialogFontColor;
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(Suggestions);
+
+exports["default"] = _default;