@dxc-technology/halstack-react 0.0.0-7c194f8 → 0.0.0-7c2b794

package/number-input/NumberInputContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInputContext = void 0;
+var _react = require("react");
+var NumberInputContext = exports.NumberInputContext = /*#__PURE__*/(0, _react.createContext)(null);

package/number-input/types.d.ts

@@ -123,6 +123,12 @@ type Props = {
      */
     tabIndex?: number;
 };
+export type NumberInputContextProps = {
+    typeNumber?: string;
+    minNumber?: number;
+    maxNumber?: number;
+    stepNumber?: number;
+};
 /**
  * Reference to the component.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-7c194f8",
+  "version": "0.0.0-7c2b794",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.16.8",

package/radio-group/RadioGroup.js

@@ -158,7 +158,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": !disabled && !readOnly && !optional,
-    "aria-readOnly": readOnly,
+    "aria-readonly": readOnly,
     "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
   }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,

package/resultset-table/ResultsetTable.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 import ResultsetTablePropsType from "./types";
-declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
+declare const DxcResultsetTable: {
+    ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: ResultsetTablePropsType): JSX.Element;
+    ActionsCell: ({ actions }: import("../table/types").ActionCellsPropsType) => JSX.Element;
+};
 export default DxcResultsetTable;

package/resultset-table/ResultsetTable.js

@@ -12,11 +12,12 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
-var _Table = _interopRequireDefault(require("../table/Table"));
 var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
+var _Table = _interopRequireWildcard(require("../table/Table"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Icons = _interopRequireDefault(require("./Icons"));
 var _utils = require("../common/utils");
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
 var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -57,7 +58,9 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
     itemsPerPageFunction = _ref.itemsPerPageFunction,
     margin = _ref.margin,
     _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "default" : _ref$mode;
   var colorsTheme = (0, _useTheme["default"])();
   var _useState = (0, _react.useState)(1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -98,7 +101,9 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
     theme: colorsTheme.table
   }, /*#__PURE__*/_react["default"].createElement(DxcResultsetTableContainer, {
     margin: margin
-  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
     return /*#__PURE__*/_react["default"].createElement("th", {
       key: "tableHeader_".concat(index),
       "aria-sort": column.isSortable ? sortColumnIndex === index ? sortOrder : "none" : undefined
@@ -109,7 +114,8 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
         column.isSortable && changeSorting(index);
       },
       tabIndex: column.isSortable ? tabIndex : -1,
-      isSortable: column.isSortable
+      isSortable: column.isSortable,
+      mode: mode
     }, /*#__PURE__*/_react["default"].createElement("span", null, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, sortColumnIndex === index ? sortOrder === "ascending" ? _Icons["default"].arrowUp : _Icons["default"].arrowDown : _Icons["default"].bothArrows)));
   }))), /*#__PURE__*/_react["default"].createElement("tbody", null, filteredResultset.map(function (cells, index) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
@@ -146,9 +152,9 @@ var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObjec
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
-var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  gap: 8px;\n  width: fit-content;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {
+var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  gap: ", ";\n  width: fit-content;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
-}, function (props) {
+}, _coreTokens["default"].spacing_8, function (props) {
   return props.isSortable ? "pointer" : "default";
 }, function (props) {
   return props.isSortable && "&:focus {\n      outline: #0095ff solid 2px;\n    }";
@@ -156,4 +162,5 @@ var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_te
 var SortIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 14px;\n  width: 14px;\n  color: ", ";\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.sortIconColor;
 });
+DxcResultsetTable.ActionsCell = _Table.DxcActionsCell;
 var _default = exports["default"] = DxcResultsetTable;

package/resultset-table/ResultsetTable.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import DxcResultsetTable from "./ResultsetTable";
-import DxcButton from "../button/Button";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
 import styled from "styled-components";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Resultset Table",
@@ -13,7 +13,7 @@ export default {
 
 const deleteIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
     <path d="M0 0h24v24H0z" fill="none" />
   </svg>
 );
@@ -29,17 +29,77 @@ const rows = [
   [{ displayValue: "006" }, { displayValue: "Cris" }, { displayValue: "Paris" }],
 ];
 
+const advancedTheme = {
+  table: {
+    actionIconColor: "#1B75BB",
+    hoverActionIconColor: "#1B75BB",
+    activeActionIconColor: "#1B75BB",
+    focusActionIconColor: "#1B75BB",
+    disabledActionIconColor: "#666666",
+    hoverButtonBackgroundColor: "#cccccc",
+  },
+};
+
+const actions = [
+  {
+    title: "icon",
+    onClick: (value?) => {
+      console.log(value);
+    },
+    options: [
+      {
+        value: "1",
+        label: "Amazon with a very long text",
+      },
+      {
+        value: "2",
+        label: "Ebay",
+      },
+      {
+        value: "3",
+        label: "Apple",
+      },
+    ],
+  },
+  {
+    icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
+    title: "icon",
+    onClick: () => {},
+  },
+  {
+    icon: deleteIcon,
+    title: "icon",
+    onClick: () => {},
+    disabled: true,
+  },
+  {
+    icon: deleteIcon,
+    title: "icon",
+    onClick: () => {},
+  },
+];
+
 const rowsIcon = [
   [
     { displayValue: "001", sortValue: "001" },
     { displayValue: "Peter" },
-    { displayValue: <DxcButton icon={deleteIcon} /> },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
+  ],
+  [
+    { displayValue: "002", sortValue: "002" },
+    { displayValue: "Louis" },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
   ],
-  [{ displayValue: "002", sortValue: "002" }, { displayValue: "Louis" }, { displayValue: "" }],
   [
     { displayValue: "003", sortValue: "003" },
     { displayValue: "Mark" },
-    { displayValue: <DxcButton icon={deleteIcon} /> },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
   ],
 ];
 
@@ -206,6 +266,25 @@ export const Chromatic = () => (
         <DxcResultsetTable columns={columnsSortable} rows={longValues} />
       </SmallContainer>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced sortable table" theme="light" level={4} />
+      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} mode="reduced" />
+    </ExampleContainer>
+    {/* PENDING SMALL ICON VERSION */}
+    <ExampleContainer>
+      <Title title="Reduced with items per page option" theme="light" level={4} />
+      <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} mode="reduced" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced scroll resultset table" theme="light" level={4} />
+      <DxcResultsetTable columns={longColumns} rows={longRows} mode="reduced" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <SmallContainer>
+        <Title title="Reduced small container and text overflow" theme="light" level={4} />
+        <DxcResultsetTable columns={columnsSortable} rows={longValues} mode="reduced" />
+      </SmallContainer>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
@@ -298,3 +377,21 @@ LastPage.play = async ({ canvasElement }) => {
   const nextButton = canvas.getAllByRole("button")[3];
   await userEvent.click(nextButton);
 };
+
+const ResultsetActionsCellDropdown = () => (
+  <ExampleContainer>
+    <Title title="Dropdown Action" theme="light" level={4} />
+    <DxcResultsetTable columns={columns} rows={rowsIcon} itemsPerPage={2} />
+    <Title title="Custom theme actions cell" theme="light" level={4} />
+    <HalstackProvider advancedTheme={advancedTheme}>
+      <DxcResultsetTable columns={columns} rows={rowsIcon} itemsPerPage={2} />
+    </HalstackProvider>
+  </ExampleContainer>
+);
+
+export const DropdownAction = ResultsetActionsCellDropdown.bind({});
+DropdownAction.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const dropdown = canvas.getAllByRole("button")[5];
+  await userEvent.click(dropdown);
+};

package/resultset-table/ResultsetTable.test.js

@@ -39,6 +39,18 @@ global.ResizeObserver = /*#__PURE__*/function () {
   }]);
   return ResizeObserver;
 }();
+var icon = /*#__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 0h24v24H0V0zm0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
+}));
 var columns = [{
   displayValue: "Id",
   isSortable: false
@@ -302,4 +314,58 @@ describe("Resultset table component tests", function () {
     _react2.fireEvent.click(lastButton);
     expect(getAllByRole("row").length - 1).toEqual(1);
   });
+  test("Resultset table with ActionsCell", function () {
+    var onSelectOption = jest.fn();
+    var onClick = jest.fn();
+    var actions = [{
+      icon: icon,
+      title: "icon1",
+      onClick: onSelectOption,
+      options: [{
+        value: "1",
+        label: "Amazon"
+      }, {
+        value: "2",
+        label: "Ebay"
+      }, {
+        value: "3",
+        label: "Aliexpress"
+      }]
+    }, {
+      icon: icon,
+      title: "icon2",
+      onClick: onClick
+    }];
+    var actionRows = [[{
+      displayValue: "001",
+      sortValue: "001"
+    }, {
+      displayValue: "Peter",
+      sortValue: "Peter"
+    }, {
+      displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+        actions: actions
+      }),
+      sortValue: "Actions"
+    }]];
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+        columns: columns,
+        rows: actionRows,
+        itemsPerPage: 3
+      })),
+      getAllByRole = _render8.getAllByRole,
+      getByRole = _render8.getByRole,
+      getByText = _render8.getByText;
+    var dropdown = getAllByRole("button")[2];
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(dropdown);
+    });
+    expect(getByRole("menu")).toBeTruthy();
+    var option = getByText("Aliexpress");
+    _userEvent["default"].click(option);
+    expect(onSelectOption).toHaveBeenCalledWith("3");
+    var action = getAllByRole("button")[1];
+    _userEvent["default"].click(action);
+    expect(onClick).toHaveBeenCalled();
+  });
 });

package/resultset-table/types.d.ts

@@ -63,5 +63,11 @@ type Props = {
      * Value of the tabindex attribute applied to the sortable icon.
      */
     tabIndex?: number;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with big spacing
+     * - "reduced": A reduced mode with minimal spacing for dense tables
+     */
+    mode?: "default" | "reduced";
 };
 export default Props;

package/select/Option.js

@@ -21,6 +21,11 @@ var Option = function Option(_ref) {
     isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
     isLastOption = _ref.isLastOption,
     isSelected = _ref.isSelected;
+  var handleOnMouseEnter = function handleOnMouseEnter(event) {
+    var label = event.currentTarget;
+    var optionElement = document.getElementById(id);
+    if (optionElement.title === "" && label.scrollWidth > label.clientWidth) optionElement.title = option.label;
+  };
   return /*#__PURE__*/_react["default"].createElement(OptionItem, {
     id: id,
     onClick: function onClick() {
@@ -49,7 +54,9 @@ var Option = function Option(_ref) {
     grouped: isGroupedOption,
     hasIcon: option.icon ? true : false,
     multiple: multiple
-  }, /*#__PURE__*/_react["default"].createElement(OptionLabel, null, option.label), !multiple && isSelected && /*#__PURE__*/_react["default"].createElement(OptionSelectedIndicator, null, _Icons["default"].selected))));
+  }, /*#__PURE__*/_react["default"].createElement(OptionLabel, {
+    onMouseEnter: handleOnMouseEnter
+  }, option.label), !multiple && isSelected && /*#__PURE__*/_react["default"].createElement(OptionSelectedIndicator, null, _Icons["default"].selected))));
 };
 var OptionItem = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0 0.5rem;\n  box-shadow: inset 0 0 0 2px transparent;\n  ", "\n  ", ";\n  line-height: 1.715em;\n  cursor: pointer;\n\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) {
   return props.visualFocused && "box-shadow: inset 0 0 0 2px ".concat(props.theme.focusListOptionBorderColor, ";");

package/select/Select.js

@@ -20,16 +20,17 @@ var _utils = require("../common/utils");
 var _Icons = _interopRequireDefault(require("./Icons"));
 var _Listbox = _interopRequireDefault(require("./Listbox"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17; // @ts-nocheck
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var groupsHaveOptions = function groupsHaveOptions(innerOptions) {
-  return innerOptions[0].hasOwnProperty("options") ? innerOptions[0].options ? innerOptions.some(function (groupOption) {
-    return groupOption.options.length > 0;
-  }) : false : true;
+var isOptionGroup = function isOptionGroup(option) {
+  return "options" in option && option.options != null;
 };
-var filteredGroupsHaveOptions = function filteredGroupsHaveOptions(filteredOptions) {
-  return filteredOptions !== null && filteredOptions !== void 0 && filteredOptions[0].options ? filteredOptions.some(function (groupOption) {
+var isArrayOfOptionGroups = function isArrayOfOptionGroups(options) {
+  return isOptionGroup(options[0]);
+};
+var groupsHaveOptions = function groupsHaveOptions(filteredOptions) {
+  return isArrayOfOptionGroups(filteredOptions) ? filteredOptions.some(function (groupOption) {
     var _groupOption$options;
     return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
   }) : true;
@@ -39,7 +40,7 @@ var canOpenOptions = function canOpenOptions(options, disabled) {
 };
 var filterOptionsBySearchValue = function filterOptionsBySearchValue(options, searchValue) {
   if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
-    if (options[0].options) return options.map(function (optionGroup) {
+    if (isArrayOfOptionGroups(options)) return options.map(function (optionGroup) {
       var group = {
         label: optionGroup.label,
         options: optionGroup.options.filter(function (option) {
@@ -58,7 +59,7 @@ var getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, s
     var _current$options;
     return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
   };
-  if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) filteredOptions[0].options ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) options[0].options ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
+  if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) isArrayOfOptionGroups(filteredOptions) ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) isArrayOfOptionGroups(options) ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
   return optional && !multiple ? last + 1 : last;
 };
 var getSelectedOption = function getSelectedOption(value, options, multiple, optional, optionalItem) {
@@ -67,7 +68,7 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
   if (multiple) {
     if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
       options.forEach(function (option) {
-        if (option.options) option.options.forEach(function (singleOption) {
+        if (isOptionGroup(option)) option.options.forEach(function (singleOption) {
           if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
         });else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
       });
@@ -79,7 +80,7 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
     } else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
       var group_index = 0;
       options.some(function (option, index) {
-        if (option.options) {
+        if (isOptionGroup(option)) {
           option.options.some(function (singleOption) {
             if (singleOption.value === value) {
               selectedOption = singleOption;
@@ -101,6 +102,12 @@ var getSelectedOption = function getSelectedOption(value, options, multiple, opt
     singleSelectionIndex: singleSelectionIndex
   };
 };
+var getSelectedOptionLabel = function getSelectedOptionLabel(placeholder, selectedOption) {
+  var _selectedOption$label;
+  if (Array.isArray(selectedOption)) return selectedOption.length === 0 ? placeholder : selectedOption.map(function (option) {
+    return option.label;
+  }).join(", ");else return (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder;
+};
 var notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
   return !optional && (multiple ? value.length === 0 : value === "");
 };
@@ -125,7 +132,7 @@ var useWidth = function useWidth(target) {
   return width;
 };
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref4, _selectedOption$label;
+  var _ref4;
   var label = _ref.label,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? "" : _ref$name,
@@ -175,6 +182,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     changeIsOpen = _useState12[1];
   var selectRef = (0, _react.useRef)(null);
   var selectSearchInputRef = (0, _react.useRef)(null);
+  var selectedOptionLabelRef = (0, _react.useRef)(null);
   var width = useWidth(selectRef.current);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
@@ -229,7 +237,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     if (!event.currentTarget.contains(event.relatedTarget)) searchable && selectSearchInputRef.current.focus();
   };
   var handleSelectOnBlur = function handleSelectOnBlur(event) {
-    // focus leaves container (outside, not to child)
+    // focus leaves container (outside, not to a child)
     if (!event.currentTarget.contains(event.relatedTarget)) {
       closeOptions();
       setSearchValue("");
@@ -271,7 +279,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
           var accLength = optional && !multiple ? 1 : 0;
           if (searchable) {
             if (filteredOptions.length > 0) {
-              if (optional && !multiple && visualFocusIndex === 0 && filteredGroupsHaveOptions(filteredOptions)) handleSelectChangeValue(optionalItem);else filteredOptions[0].options ? filteredGroupsHaveOptions(filteredOptions) && filteredOptions.some(function (groupOption) {
+              if (optional && !multiple && visualFocusIndex === 0 && groupsHaveOptions(filteredOptions)) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(filteredOptions) ? groupsHaveOptions(filteredOptions) && filteredOptions.some(function (groupOption) {
                 var groupLength = accLength + groupOption.options.length;
                 groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
                 accLength = groupLength;
@@ -279,7 +287,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
               }) : handleSelectChangeValue(filteredOptions[visualFocusIndex - accLength]);
             }
           } else {
-            if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else options[0].options ? options.some(function (groupOption) {
+            if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(options) ? options.some(function (groupOption) {
               var groupLength = accLength + groupOption.options.length;
               groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
               accLength = groupLength;
@@ -316,6 +324,11 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     !multiple && closeOptions();
     setSearchValue("");
   }, [handleSelectChangeValue, closeOptions, multiple]);
+  (0, _react.useEffect)(function () {
+    if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current) != null) {
+      if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.scrollWidth) > (selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.clientWidth)) selectedOptionLabelRef.current.title = getSelectedOptionLabel(placeholder, selectedOption);else selectedOptionLabelRef.current.title = "";
+    }
+  }, [placeholder, selectedOption]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(SelectContainer, {
@@ -382,15 +395,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     autoComplete: "nope",
     autoCorrect: "nope",
     size: 1
-  }), (!searchable || searchValue === "") && (multiple ? /*#__PURE__*/_react["default"].createElement(SelectedOption, {
-    disabled: disabled,
-    atBackground: (value !== null && value !== void 0 ? value : innerValue).length === 0 || searchable && isOpen
-  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, null, Array.isArray(selectedOption) && selectedOption.map(function (option) {
-    return option.label;
-  }).join(", ")), Array.isArray(selectedOption) && selectedOption.length === 0 && placeholder) : /*#__PURE__*/_react["default"].createElement(SelectedOption, {
+  }), (!searchable || searchValue === "") && /*#__PURE__*/_react["default"].createElement(SelectedOption, {
     disabled: disabled,
-    atBackground: !(value !== null && value !== void 0 ? value : innerValue) || searchable && isOpen
-  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, null, (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, _Icons["default"].error), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
+    atBackground: (multiple ? (value !== null && value !== void 0 ? value : innerValue).length === 0 : !(value !== null && value !== void 0 ? value : innerValue)) || searchable && isOpen
+  }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, {
+    ref: selectedOptionLabelRef
+  }, getSelectedOptionLabel(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, _Icons["default"].error), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
     onMouseDown: function onMouseDown(event) {
       // Avoid input to lose focus
       event.preventDefault();

package/select/types.d.ts

@@ -7,7 +7,7 @@ type Margin = {
     right?: Space;
 };
 type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type OptionGroup = {
+export type OptionGroup = {
     /**
      * Label of the group to be shown in the select's listbox.
      */
@@ -17,7 +17,7 @@ type OptionGroup = {
      */
     options: Option[];
 };
-type Option = {
+export type Option = {
     /**
      * Element used as the icon that will be placed before the option label.
      * It can be a url of an image or an inline SVG. If the url option

package/sidenav/Sidenav.js

@@ -13,11 +13,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
-var _SidenavContext = require("../layout/SidenavContext");
+var _SidenavContext = require("./SidenavContext");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _Bleed = _interopRequireDefault(require("../bleed/Bleed"));
 var _Icons = _interopRequireDefault(require("./Icons"));
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var _excluded = ["href", "newWindow", "selected", "icon", "onClick", "tabIndex", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -138,7 +139,7 @@ var SidenavTitle = _styledComponents["default"].div(_templateObject2 || (_templa
 }, function (props) {
   return props.theme.titleFontTextTransform;
 });
-var Divider = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 1px;\n  background-color: #999999;\n\n  &:last-child {\n    display: none;\n  }\n"])));
+var Divider = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n\n  &:last-child {\n    display: none;\n  }\n"])), _coreTokens["default"].color_grey_400);
 var SidenavGroup = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  a {\n    padding: 0.5rem 1.2rem 0.5rem 2.25rem;\n  }\n"])));
 var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1.2rem;\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n\n  img,\n  svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.theme.groupTitleFontFamily;

package/slider/Slider.js

@@ -19,8 +19,8 @@ var _uuid = require("uuid");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
 var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _navigator;
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
     _ref$name = _ref.name,
@@ -61,6 +61,7 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     dragging = _useState6[0],
     setDragging = _useState6[1];
   var colorsTheme = (0, _useTheme["default"])();
+  var isFirefox = ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.userAgent.indexOf("Firefox")) !== -1;
   var minLabel = (0, _react.useMemo)(function () {
     return labelFormatCallback ? labelFormatCallback(minValue) : minValue;
   }, [labelFormatCallback, minValue]);
@@ -68,10 +69,10 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     return labelFormatCallback ? labelFormatCallback(maxValue) : maxValue;
   }, [labelFormatCallback, maxValue]);
   var tickMarks = (0, _react.useMemo)(function () {
-    var ticks = [];
     var numberOfMarks = Math.floor(maxValue / step - minValue / step);
-    var index = 0;
     var range = maxValue - minValue;
+    var ticks = [];
+    var index = 0;
     if (marks) {
       while (index <= numberOfMarks) {
         ticks.push( /*#__PURE__*/_react["default"].createElement(TickMark, {
@@ -82,9 +83,7 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         index++;
       }
       return ticks;
-    } else {
-      return null;
-    }
+    } else return null;
   }, [minValue, maxValue, step, value, innerValue]);
   var handleSliderChange = function handleSliderChange(event) {
     var valueToCheck = event.target.value;

package/status-light/StatusLight.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import StatusLightPropsType from "./types";
+declare const DxcStatusLight: ({ mode, label, size }: StatusLightPropsType) => JSX.Element;
+export default DxcStatusLight;