@dxc-technology/halstack-react 0.0.0-e201636 → 0.0.0-e2a3793

package/progress-bar/ProgressBar.test.js

@@ -9,57 +9,102 @@ var _react2 = require("@testing-library/react");
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
 describe("ProgressBar component tests", function () {
-  test("ProgressBar renders with label", function () {
+  test("ProgressBar renders with label and helperText", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      label: "test-label"
+      label: "test-label",
+      helperText: "helper-text"
     })),
         getByText = _render.getByText;
 
     expect(getByText("test-label")).toBeTruthy();
+    expect(getByText("helper-text")).toBeTruthy();
   });
-  test("Overlay progressBar renders with label", function () {
+  test("ProgressBar renders with default value", function () {
+    var value = 0;
+
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      label: "test-label",
-      overlay: true
+      showValue: true
     })),
-        getByText = _render2.getByText;
+        getByText = _render2.getByText,
+        getByRole = _render2.getByRole;
 
-    expect(getByText("test-label")).toBeTruthy();
+    var progressBar = getByRole("progressbar");
+    expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("ProgressBar renders with default value", function () {
+  test("ProgressBar renders with value", function () {
+    var value = 25;
+
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      showValue: true
+      showValue: true,
+      value: value
     })),
-        getByText = _render3.getByText;
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
 
-    expect(getByText("0 %")).toBeTruthy();
+    var progressBar = getByRole("progressbar");
+    expect(getByText("25 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("Overlay progressBar renders with default value", function () {
+  test("ProgressBar renders with negative value", function () {
+    var value = 0;
+
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
       showValue: true,
-      overlay: true
+      value: -20
     })),
-        getByText = _render4.getByText;
+        getByText = _render4.getByText,
+        getByRole = _render4.getByRole;
 
+    var progressBar = getByRole("progressbar");
     expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("ProgressBar renders with value", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+  test("ProgressBar renders as indeterminate", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], null)),
+        getByRole = _render5.getByRole;
+
+    var progressBar = getByRole("progressbar");
+    expect(progressBar.getAttribute("aria-valuenow")).toBe(null);
+  });
+  test("Overlay progressBar renders with label and helperText", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      label: "test-label",
+      helperText: "helper-text",
+      overlay: true
+    })),
+        getByText = _render6.getByText;
+
+    expect(getByText("test-label")).toBeTruthy();
+    expect(getByText("helper-text")).toBeTruthy();
+  });
+  test("Overlay progressBar renders with default value", function () {
+    var value = 0;
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
       showValue: true,
-      value: 25
+      overlay: true
     })),
-        getByText = _render5.getByText;
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
 
-    expect(getByText("25 %")).toBeTruthy();
+    var progressBar = getByRole("progressbar");
+    expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
   test("Overlay progressBar renders with value", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+    var value = 25;
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
       showValue: true,
-      value: 25,
+      value: value,
       overlay: true
     })),
-        getByText = _render6.getByText;
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
 
+    var progressBar = getByRole("progressbar");
     expect(getByText("25 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
 });

package/progress-bar/types.d.ts

@@ -1,11 +1,11 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Size = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Size = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+export declare type Props = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -34,4 +34,3 @@ declare type Props = {
      */
     margin?: Space | Size;
 };
-export default Props;

package/quick-nav/QuickNav.js

@@ -21,11 +21,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Heading = _interopRequireDefault(require("../heading/Heading"));
 
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 
 var _Inset = _interopRequireDefault(require("../inset/Inset"));
 
-var _Text = _interopRequireDefault(require("../text/Text"));
+var _Typography = _interopRequireDefault(require("../typography/Typography"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
@@ -42,26 +42,32 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
   var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.quickNav
-  }, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+  }, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    direction: "column",
+    gap: "0.5rem"
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
     text: title || translatedLabels.quickNav.contentTitle
-  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    direction: "column",
+    gap: "0.5rem"
   }, links.map(function (link) {
     var _link$links;
 
-    return /*#__PURE__*/_react["default"].createElement(ListRow, null, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-      space: "xxsmall"
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+    return /*#__PURE__*/_react["default"].createElement(ListRow, {
+      key: link.label
+    }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+      space: "0.25rem"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
       href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
         lower: true
       }))
     }, link === null || link === void 0 ? void 0 : link.label), (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
-      return /*#__PURE__*/_react["default"].createElement(ListRow, null, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-        horizontal: "xsmall"
-      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+      return /*#__PURE__*/_react["default"].createElement(ListRow, {
+        key: sublink.label
+      }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+        horizontal: "0.5rem"
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
         href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true
         }))
@@ -82,11 +88,11 @@ var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_te
   return props.theme.dividerBorderColor;
 });
 
-var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n"])));
+var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n"])));
 
-var ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+var ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"])));
 
-var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-style: ", ";\n    outline-width: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
+var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  display: block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n\n  &:hover {\n    color: ", ";\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-style: ", ";\n    outline-width: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
   return props.theme.fontSize;
 }, function (props) {
   return props.theme.fontFamily;

package/quick-nav/QuickNav.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import DxcQuickNav from "./QuickNav";
 import DxcHeading from "../heading/Heading";
-import DxcText from "../text/Text";
+import DxcParagraph from "../paragraph/Paragraph";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
@@ -23,14 +23,24 @@ const links = [
     ],
   },
   {
-    label: "Principles",
+    label: "Principles very very very very very very very very long",
     id: "principles",
     links: [
-      { label: "Color", id: "color" },
-      { label: "Spacing", id: "spacing" },
+      { label: "Color very very very very very very very very long", id: "color" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
       { label: "Typography", id: "typography" },
     ],
   },
+  {
+    label: "Componentsveryveryveryveryveryveryveryverylong",
+    id: "components",
+    links: [
+      {
+        label: "Accordion",
+        id: "accordion",
+      },
+    ],
+  },
 ];
 
 export const Chromatic = () => (
@@ -47,13 +57,19 @@ export const Chromatic = () => (
         <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links}></DxcQuickNav>
+      </QuickNavContainer>
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="QuickNav with content" level={4} />
       <Container>
         <ContentContainer>
           <Content id="overview">
             <DxcHeading level={1} text="Overview" margin={{ bottom: "small" }} />
-            <DxcText>
+            <DxcParagraph>
               Halstack is the DXC Technology's open source design system for insurance products and digital experiences.
               Our system provides all the tools and resources needed to create superior, beautiful but above all,
               functional user experiences. Halstack is the DXC Technology's open source design system for insurance
@@ -70,10 +86,10 @@ export const Chromatic = () => (
               create superior, beautiful but above all, functional user experiences.Halstack is the DXC Technology's
               open source design system for insurance products and digital experiences. Our system provides all the
               tools and resources needed to create superior, beautiful but above all, functional user experiences.
-            </DxcText>
+            </DxcParagraph>
             <Content id="introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
                 provide guidance for development teams in order to deliver delightful and consistent user experiences to
                 our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
@@ -103,14 +119,14 @@ export const Chromatic = () => (
                 to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
                 design new features, or help us improve the project documentation. If you're interested, definitely
                 check out our contribution guidelines.
-              </DxcText>
+              </DxcParagraph>
             </Content>
           </Content>
           <Content id="principles">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
             <Content id="color">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
                 palette brings a unified consistency and helps in guiding the user's perception order. Our color palette
                 is based in the HSL model . All our color families are calculated using the lightness value of the
@@ -143,11 +159,11 @@ export const Chromatic = () => (
                 tokens to manage color. Appart from a multi-purpose greyscale family, purple and blue are the core color
                 families used in our set of components. Additional families as red, green and yellow help as feedback
                 role-based color palettes and must not be used outside this context.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="spacing">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
                 values of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent,
                 yet distinct enough, steps between them.In the search of consistent alignment between the elements we
@@ -165,11 +181,11 @@ export const Chromatic = () => (
                 consistent, yet distinct enough, steps between them.In the search of consistent alignment between the
                 elements we provide a spacing scale based on a root values of 8px and 4px. The numbers 4 and 8 are
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
                 has on the user interface content. It defines what is the first noticeable piece of information or data
                 based on the font shape, size, color, or type and it highlights some pieces of text over the rest. Some
@@ -201,7 +217,18 @@ export const Chromatic = () => (
                 Halstack Design System include headers, body, taglines, captions, and labels. Make sure you include all
                 the different typographic variants in order to enhance the application's content structure, including
                 the Heading component which defines different levels of page and section titles.
-              </DxcText>
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
             </Content>
           </Content>
         </ContentContainer>

package/radio-group/RadioGroup.js

@@ -149,27 +149,25 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   };
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 37: // arrow left
-
-      case 38:
-        // arrow up
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
+      case "Up":
+      case "ArrowUp":
         event.preventDefault();
         setPreviousRadioChecked();
         break;
 
-      case 39: // arrow right
-
-      case 40:
-        // arrow down
+      case "Right":
+      case "ArrowRight":
+      case "Down":
+      case "ArrowDown":
         event.preventDefault();
         setNextRadioChecked();
         break;
 
-      case 13: // enter
-
-      case 32:
-        // space
+      case "Enter":
+      case "Space":
         event.preventDefault();
         handleOnChange(innerOptions[currentFocusIndex].value);
         break;
@@ -216,7 +214,8 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled: option.disabled || disabled,
       focused: currentFocusIndex === index,
       readonly: readonly,
-      tabIndex: tabIndex
+      tabIndex: tabIndex,
+      key: "radio-".concat(index)
     });
   })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,

package/resultsetTable/ResultsetTable.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 var columns = [{
   displayValue: "Id",
   isSortable: false

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLUListElement>>>;
+declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, getSelectWidth, }: ListboxProps) => JSX.Element>;
 export default _default;

package/select/Listbox.js

@@ -11,7 +11,9 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -37,7 +39,7 @@ var groupsHaveOptions = function groupsHaveOptions(options) {
   }) : true;
 };
 
-var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var Listbox = function Listbox(_ref) {
   var id = _ref.id,
       currentValue = _ref.currentValue,
       options = _ref.options,
@@ -47,9 +49,17 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       optional = _ref.optional,
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
-      handleOptionOnClick = _ref.handleOptionOnClick;
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      getSelectWidth = _ref.getSelectWidth;
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["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];
+
   var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
@@ -92,6 +102,42 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (currentValue && !multiple) {
+      var _listEl$scrollTo;
+
+      var listEl = listboxRef === null || listboxRef === void 0 ? void 0 : listboxRef.current;
+      var selectedListOptionEl = listEl === null || listEl === void 0 ? void 0 : listEl.querySelector("[aria-selected='true']");
+      listEl === null || listEl === void 0 ? void 0 : (_listEl$scrollTo = listEl.scrollTo) === null || _listEl$scrollTo === void 0 ? void 0 : _listEl$scrollTo.call(listEl, {
+        top: (selectedListOptionEl === null || selectedListOptionEl === void 0 ? void 0 : selectedListOptionEl.offsetTop) - (listEl === null || listEl === void 0 ? void 0 : listEl.clientHeight) / 2
+      });
+    }
+  }, [currentValue, multiple]);
+  (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: getSelectWidth()
+    });
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    handleResize();
+  }, [getSelectWidth]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getSelectWidth]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
@@ -102,10 +148,11 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
-    ref: ref,
+    ref: listboxRef,
     role: "listbox",
     "aria-multiselectable": multiple,
-    "aria-orientation": "vertical"
+    "aria-orientation": "vertical",
+    style: styles
   }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
     key: "option-".concat(optionalItem.value),
     id: "option-".concat(0),
@@ -117,9 +164,9 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLastOption: lastOptionIndex === 0,
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
   }), options.map(mapOptionFunc)));
-});
+};
 
-var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var ListboxContainer = _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  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.listDialogBackgroundColor;
 }, function (props) {
   return props.theme.listDialogBorderColor;