@dxc-technology/halstack-react 0.0.0-f9a5f2c → 0.0.0-f9b872d

package/quick-nav/QuickNav.js

@@ -25,7 +25,7 @@ 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"));
 
@@ -58,21 +58,21 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
       key: link.label
     }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
       space: "0.25rem"
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+    }, /*#__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), /*#__PURE__*/_react["default"].createElement(ListColumn, null, (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
+    }, 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, {
         key: sublink.label
       }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
         horizontal: "0.5rem"
-      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+      }, /*#__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))));
-    })))));
+    }))));
   }))))));
 };
 

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";
 
@@ -69,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
@@ -86,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
@@ -119,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
@@ -159,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
@@ -181,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
@@ -217,18 +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" }} />
-              <DxcText>
+              <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.
-              </DxcText>
+              </DxcParagraph>
             </Content>
           </Content>
         </ContentContainer>

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element>;
+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,6 +11,8 @@ 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 = _interopRequireWildcard(require("styled-components"));
@@ -48,10 +50,16 @@ var Listbox = function Listbox(_ref) {
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
       handleOptionOnClick = _ref.handleOptionOnClick,
-      styles = _ref.styles;
+      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) {
@@ -114,6 +122,22 @@ var Listbox = function Listbox(_ref) {
       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, {

package/select/Select.js

@@ -197,11 +197,6 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       isOpen = _useState10[0],
       changeIsOpen = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      listboxStyles = _useState12[0],
-      setListboxStyles = _useState12[1];
-
   var selectRef = (0, _react.useRef)(null);
   var selectSearchInputRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
@@ -281,9 +276,9 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   };
 
   var handleSelectOnKeyDown = function handleSelectOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 40:
-        // Arrow Down
+    switch (event.key) {
+      case "Down":
+      case "ArrowDown":
         event.preventDefault();
         singleSelectionIndex !== undefined && (!isOpen || visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex(function (visualFocusIndex) {
           if (visualFocusIndex < lastOptionIndex) return visualFocusIndex + 1;else if (visualFocusIndex === lastOptionIndex) return 0;
@@ -291,8 +286,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         openOptions();
         break;
 
-      case 38:
-        // Arrow Up
+      case "Up":
+      case "ArrowUp":
         event.preventDefault();
         singleSelectionIndex !== undefined && (!isOpen || visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex(function (visualFocusIndex) {
           return visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1;
@@ -300,15 +295,14 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         openOptions();
         break;
 
-      case 27:
-        // Esc
+      case "Esc":
+      case "Escape":
         event.preventDefault();
         closeOptions();
         setSearchValue("");
         break;
 
-      case 13:
-        // Enter
+      case "Enter":
         if (isOpen && visualFocusIndex >= 0) {
           var accLength = optional && !multiple ? 1 : 0;
 
@@ -365,23 +359,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     !multiple && closeOptions();
     setSearchValue("");
   }, [handleSelectChangeValue, closeOptions, multiple]);
-
-  var handleListboxResize = function handleListboxResize() {
+  var getSelectWidth = (0, _react.useCallback)(function () {
     var _selectRef$current;
 
     var rect = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect();
-    setListboxStyles({
-      width: rect === null || rect === void 0 ? void 0 : rect.width
-    });
-  };
-
-  (0, _react.useEffect)(function () {
-    handleListboxResize();
-    window.addEventListener("resize", handleListboxResize);
-    return function () {
-      window.removeEventListener("resize", handleListboxResize);
-    };
-  }, [setListboxStyles]);
+    return rect === null || rect === void 0 ? void 0 : rect.width;
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(SelectContainer, {
@@ -410,7 +393,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onFocus: handleSelectOnFocus,
     onKeyDown: handleSelectOnKeyDown,
     ref: selectRef,
-    tabIndex: tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     role: "combobox",
     "aria-controls": optionsListId,
     "aria-disabled": disabled,
@@ -418,7 +401,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     "aria-haspopup": "listbox",
     "aria-labelledby": label ? selectLabelId : undefined,
     "aria-activedescendant": visualFocusIndex >= 0 ? "option-".concat(visualFocusIndex) : undefined,
-    "aria-invalid": error ? "true" : "false",
+    "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": !disabled && !optional
   }, multiple && selectedOption.length > 0 && /*#__PURE__*/_react["default"].createElement(SelectionIndicator, null, /*#__PURE__*/_react["default"].createElement(SelectionNumber, {
@@ -486,7 +469,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     optionalItem: optionalItem,
     searchable: searchable,
     handleOptionOnClick: handleOptionOnClick,
-    styles: listboxStyles
+    getSelectWidth: getSelectWidth
   }))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     "aria-live": error ? "assertive" : "off"

package/select/Select.stories.tsx

@@ -379,7 +379,7 @@ const SelectListbox = () => (
         optionalItem={{ label: "Empty", value: "" }}
         searchable={false}
         handleOptionOnClick={() => {}}
-        styles={{ width: 360 }}
+        getSelectWidth={() => 360}
       />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
@@ -395,7 +395,8 @@ const SelectListbox = () => (
         optionalItem={{ label: "Empty", value: "" }}
         searchable={false}
         handleOptionOnClick={() => {}}
-        styles={{ width: 360 }}
+        getSelectWidth={() => 360}
+
       />
     </ExampleContainer>
     <ExampleContainer>
@@ -411,7 +412,7 @@ const SelectListbox = () => (
         optionalItem={{ label: "Empty", value: "" }}
         searchable={false}
         handleOptionOnClick={() => {}}
-        styles={{ width: 360 }}
+        getSelectWidth={() => 360}
       />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -427,7 +428,7 @@ const SelectListbox = () => (
         optionalItem={{ label: "Empty", value: "" }}
         searchable={false}
         handleOptionOnClick={() => {}}
-        styles={{ width: 360 }}
+        getSelectWidth={() => 360}
       />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
@@ -443,7 +444,7 @@ const SelectListbox = () => (
         optionalItem={{ label: "Empty", value: "" }}
         searchable={false}
         handleOptionOnClick={() => {}}
-        styles={{ width: 360 }}
+        getSelectWidth={() => 360}
       />
     </ExampleContainer>
   </>

package/select/Select.test.js

@@ -306,7 +306,7 @@ var grouped_icon_options = [{
   }]
 }];
 describe("Select component tests", function () {
-  test("Renders with correct label", function () {
+  test("When clicking the label, the focus goes to the select", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       helperText: "test-select-helper-text",
@@ -317,40 +317,18 @@ describe("Select component tests", function () {
 
     var select = getByRole("combobox");
     var label = getByText("test-select-label");
-    expect(label).toBeTruthy();
 
     _userEvent["default"].click(label);
 
     expect(document.activeElement).toEqual(select);
   });
-  test("Renders with correct helper text and placeholder", function () {
+  test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      helperText: "test-select-helper-text",
-      placeholder: "Example text"
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("test-select-helper-text")).toBeTruthy();
-    expect(getByText("Example text")).toBeTruthy();
-  });
-  test("Renders with correct optional label", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      optional: true
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText("test-select-label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-  });
-  test("Renders with error message and correct aria attributes", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "Error label",
       error: "Error message."
     })),
-        getByText = _render4.getByText,
-        getByRole = _render4.getByRole;
+        getByText = _render2.getByText,
+        getByRole = _render2.getByRole;
 
     var select = getByRole("combobox");
     var errorMessage = getByText("Error message.");
@@ -360,13 +338,13 @@ describe("Select component tests", function () {
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
   test("Renders with correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Example",
       options: single_options
     })),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
 
     var select = getByRole("combobox");
     var label = getByText("test-select-label");
@@ -385,17 +363,17 @@ describe("Select component tests", function () {
     expect(list.getAttribute("aria-multiselectable")).toBe("false");
   });
   test("Single selection: Renders with correct default value", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       name: "test",
       defaultValue: "4",
       options: single_options
     })),
-        getByText = _render6.getByText,
-        getByRole = _render6.getByRole,
-        getAllByRole = _render6.getAllByRole,
-        queryByRole = _render6.queryByRole,
-        container = _render6.container;
+        getByText = _render4.getByText,
+        getByRole = _render4.getByRole,
+        getAllByRole = _render4.getAllByRole,
+        queryByRole = _render4.queryByRole,
+        container = _render4.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -413,18 +391,18 @@ describe("Select component tests", function () {
     expect(submitInput.value).toBe("8");
   });
   test("Multiple selection: Renders with correct default value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       name: "test",
       defaultValue: ["4", "2", "6"],
       options: single_options,
       multiple: true
     })),
-        getByText = _render7.getByText,
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole,
-        queryByRole = _render7.queryByRole,
-        container = _render7.container;
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole,
+        getAllByRole = _render5.getAllByRole,
+        queryByRole = _render5.queryByRole,
+        container = _render5.container;
 
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -443,18 +421,15 @@ describe("Select component tests", function () {
     expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
     expect(submitInput.value).toBe("4,2,6,3");
   });
-  test("Disabled select - Clear all options action must be shown but not clickable", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+  test("Disabled select - Cannot gain focus or open the listbox via click", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
-      disabled: true,
-      searchable: true,
-      multiple: true
+      disabled: true
     })),
-        getByRole = _render8.getByRole,
-        getByText = _render8.getByText,
-        queryByRole = _render8.queryByRole;
+        getByRole = _render6.getByRole,
+        queryByRole = _render6.queryByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-disabled")).toBe("true");
@@ -462,12 +437,49 @@ describe("Select component tests", function () {
     _userEvent["default"].click(select);
 
     expect(queryByRole("listbox")).toBeFalsy();
+    expect(document.activeElement === select).toBeFalsy();
+  });
+  test("Disabled select - Clear all options action must be shown but not clickable", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: single_options,
+      disabled: true,
+      searchable: true,
+      multiple: true
+    })),
+        getByRole = _render7.getByRole,
+        getByText = _render7.getByText;
 
     _userEvent["default"].click(getByRole("button"));
 
     expect(getByText("Option 01, Option 02")).toBeTruthy();
   });
-  test("Focused select does not open the listbox", function () {
+  test("Disabled select - Does not call onBlur event", function () {
+    var onBlur = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      disabled: true,
+      onBlur: onBlur
+    })),
+        getByRole = _render8.getByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _react2.fireEvent.keyDown(getByRole("combobox"), {
+      key: "Tab",
+      code: "Tab",
+      keyCode: 9,
+      charCode: 9
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+  test("Disabled select - When the component gains the focus, the listbox does not open", function () {
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
@@ -484,6 +496,7 @@ describe("Select component tests", function () {
     _react2.fireEvent.focus(select);
 
     expect(queryByRole("listbox")).toBeFalsy();
+    expect(document.activeElement === select).toBeFalsy();
   });
   test("Controlled - Single selection - Not optional constraint", function () {
     var onChange = jest.fn();

package/select/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 OptionGroup = {
     /**
      * Label of the group to be shown in the select's listbox.
@@ -201,9 +201,7 @@ export declare type ListboxProps = {
     optionalItem: Option;
     searchable: boolean;
     handleOptionOnClick: (option: Option) => void;
-    styles: {
-        width: number;
-    };
+    getSelectWidth: () => number;
 };
 /**
  * Reference to the select component.

package/sidenav/Sidenav.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
-import SidenavPropsType, { SidenavTitlePropsType, SidenavSubtitlePropsType, SidenavLinkPropsType } from "./types";
+import React from "react";
+import SidenavPropsType, { SidenavGroupPropsType, SidenavLinkPropsType, SidenavSectionPropsType, SidenavTitlePropsType } from "./types.js";
 declare const DxcSidenav: {
-    ({ padding, children }: SidenavPropsType): JSX.Element;
+    ({ children, title }: SidenavPropsType): JSX.Element;
+    Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
+    Group: ({ children, title, collapsable, icon }: SidenavGroupPropsType) => JSX.Element;
+    Link: React.ForwardRefExoticComponent<SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
     Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
-    Subtitle: ({ children }: SidenavSubtitlePropsType) => JSX.Element;
-    Link: ({ tabIndex, href, onClick, children }: SidenavLinkPropsType) => JSX.Element;
 };
 export default DxcSidenav;