@dxc-technology/halstack-react 5.0.0 → 6.0.0

package/progress-bar/ProgressBar.stories.jsx

@@ -12,40 +12,40 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Without labels" theme="light" level={4} />
-      <DxcProgressBar overlay={false} value={50} showValue />
+      <DxcProgressBar value={50} showValue />
       <Title title="With helperText" theme="light" level={4} />
-      <DxcProgressBar helperText="Helper text" value={50} overlay={false} showValue />
+      <DxcProgressBar helperText="Helper text" value={50} showValue />
       <Title title="Without default value" theme="light" level={4} />
-      <DxcProgressBar label="Loading..." overlay={false} showValue />
+      <DxcProgressBar label="Loading..." showValue />
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xxsmall" margin="xxsmall" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xxsmall" margin="xxsmall" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xsmall" margin="xsmall" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xsmall" margin="xsmall" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin small" margin="small" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin small" margin="small" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin medium" margin="medium" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin medium" margin="medium" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin large" margin="large" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin large" margin="large" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xlarge" margin="xlarge" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xlarge" margin="xlarge" value={50} showValue />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="XxLarge margin" theme="light" level={4} />
-      <DxcProgressBar label="Margin xxlarge" margin="xxlarge" overlay={false} value={50} showValue />
+      <DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue />
     </ExampleContainer>
   </>
 );
@@ -53,6 +53,6 @@ export const Chromatic = () => (
 export const ProgressBarOverlay = () => (
   <ExampleContainer>
     <Title title="Overlay" theme="dark" level={4} />
-    <DxcProgressBar label="Overlay" helperText="Helper text" showValue value={50} />
+    <DxcProgressBar label="Overlay" helperText="Helper text" overlay={true} showValue value={50} />
   </ExampleContainer>
 );

package/quick-nav/QuickNav.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,54 +13,106 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _slugify = _interopRequireDefault(require("slugify"));
 
+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 _List = _interopRequireDefault(require("../list/List"));
+var _Typography = _interopRequireDefault(require("../typography/Typography"));
+
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _Text = _interopRequireDefault(require("../text/Text"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _templateObject, _templateObject2;
+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 DxcQuickNav = function DxcQuickNav(_ref) {
   var title = _ref.title,
       links = _ref.links;
-  return /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "small"
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  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(_Flex["default"], {
+    direction: "column",
+    gap: "0.5rem"
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
-    text: title
-  }), /*#__PURE__*/_react["default"].createElement(_List["default"], null, links.map(function (link) {
+    text: title || translatedLabels.quickNav.contentTitle
+  }), /*#__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(_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(_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
         }))
-      }, sublink === null || sublink === void 0 ? void 0 : sublink.label)));
-    })));
-  }))));
+      }, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
+    }))));
+  }))))));
 };
 
-var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 5px 15px;\n  border-left: 2px solid #bfbfbf;\n  li {\n    div:first-child {\n      display: none;\n    }\n  }\n"])));
+var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  border-left: 2px solid ", ";\n"])), function (props) {
+  return props.theme.paddingTop;
+}, function (props) {
+  return props.theme.paddingBottom;
+}, function (props) {
+  return props.theme.paddingLeft;
+}, function (props) {
+  return props.theme.paddingRight;
+}, function (props) {
+  return props.theme.dividerBorderColor;
+});
 
-var Link = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: 14px;\n  color: #666666;\n  &:hover {\n    color: #ab63cf;\n  }\n  &:focus {\n    border-radius: 2px;\n    border-color: #0095ff;\n  }\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"])(["\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  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;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontColor;
+}, function (props) {
+  return props.theme.hoverFontColor;
+}, function (props) {
+  return props.theme.focusBorderColor;
+}, function (props) {
+  return props.theme.focusBorderStyle;
+}, function (props) {
+  return props.theme.focusBorderThickness;
+}, function (props) {
+  return props.theme.focusBorderRadius;
+});
 
 var _default = DxcQuickNav;
 exports["default"] = _default;

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 = () => (
@@ -38,13 +48,19 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links}></DxcQuickNav>
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -53,7 +69,7 @@ export const Chromatic = () => (
         <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/quick-nav/types.d.ts

@@ -2,13 +2,13 @@ declare type Props = {
     /**
      * Title of the quick nav component.
      */
-    title: string;
+    title?: string;
     /**
      * Links to be shown inside the quick nav component.
      */
-    links: Link[];
+    links: LinkType[];
 };
-declare type Link = {
+declare type LinkType = {
     /**
      * Label to be shown in the link.
      */
@@ -16,6 +16,6 @@ declare type Link = {
     /**
      * Sublinks of the link.
      */
-    links?: Link[];
+    links?: LinkType[];
 };
 export default Props;

package/radio-group/Radio.js

@@ -133,7 +133,7 @@ var Label = _styledComponents["default"].span(_templateObject6 || (_templateObje
 }, function (props) {
   return props.theme.radioInputLabelLineHeight;
 }, function (props) {
-  return props.disabled && "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;");
+  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;") : "color: ".concat(props.theme.radioInputLabelFontColor);
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);

package/radio-group/RadioGroup.js

@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Radio = _interopRequireDefault(require("./Radio"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -47,8 +49,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$optional = _ref.optional,
       optional = _ref$optional === void 0 ? false : _ref$optional,
-      _ref$optionalItemLabe = _ref.optionalItemLabel,
-      optionalItemLabel = _ref$optionalItemLabe === void 0 ? "N/A" : _ref$optionalItemLabe,
+      optionalItemLabel = _ref.optionalItemLabel,
       _ref$readonly = _ref.readonly,
       readonly = _ref$readonly === void 0 ? false : _ref$readonly,
       _ref$stacking = _ref.stacking,
@@ -78,8 +79,10 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       firstTimeFocus = _useState6[0],
       setFirstTimeFocus = _useState6[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
-    label: optionalItemLabel,
+    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
     value: "",
     disabled: disabled
   };
@@ -92,7 +95,6 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       currentFocusIndex = _useState8[0],
       setCurrentFocusIndex = _useState8[1];
 
-  var colorsTheme = (0, _useTheme["default"])();
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
 
@@ -109,7 +111,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       var currentValue = value !== null && value !== void 0 ? value : innerValue;
       !optional && !Boolean(currentValue) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue,
-        error: "This field is required. Please, choose an option."
+        error: translatedLabels.formFields.requiredSelectionErrorMessage
       }) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue
       });
@@ -182,7 +184,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     id: radioGroupLabelId,
     helperText: helperText,
     disabled: disabled
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
     onBlur: handleOnBlur,
@@ -214,7 +216,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, styles, }: ListboxProps) => JSX.Element>;
 export default _default;

package/select/Listbox.js

@@ -11,12 +11,14 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
@@ -35,7 +37,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,
@@ -45,8 +47,11 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       optional = _ref.optional,
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
-      handleOptionOnClick = _ref.handleOptionOnClick;
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      styles = _ref.styles;
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var listboxRef = (0, _react.useRef)(null);
   var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
@@ -89,6 +94,26 @@ 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]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
@@ -99,11 +124,13 @@ 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"
-  }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), "No matches found") : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
+    "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),
     option: optionalItem,
     onClick: handleOptionOnClick,
@@ -113,9 +140,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;