@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/radio-group/types.d.ts

@@ -1,4 +1,4 @@
-export type Option = {
+export declare type Option = {
     /**
      * Label of the option placed next to the radio input.
      */
@@ -14,7 +14,7 @@ export type Option = {
      */
     disabled?: boolean;
 };
-type RadioGroupProps = {
+declare type RadioGroupProps = {
     /**
      * Text to be placed above the radio group.
      */
@@ -97,11 +97,11 @@ type RadioGroupProps = {
 /**
  * Reference to the component.
  */
-export type RefType = HTMLDivElement;
+export declare type RefType = HTMLDivElement;
 /**
  * Single radio prop types.
  */
-export type RadioProps = {
+export declare type RadioProps = {
     label: string;
     checked: boolean;
     onClick: () => void;

package/resultsetTable/Icons.js

@@ -1,11 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var icons = {
   arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",

package/resultsetTable/ResultsetTable.js

@@ -1,33 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _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 _useTheme = _interopRequireDefault(require("../useTheme"));
+
 var _Icons = _interopRequireDefault(require("./Icons"));
-var _utils = require("../common/utils.js");
+
+var _utils = require("../common/utils");
+
 var _templateObject, _templateObject2, _templateObject3;
+
 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 || _typeof3(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 normalizeSortValue = function normalizeSortValue(sortValue) {
   return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
 };
+
 var sortArray = function sortArray(index, order, resultset) {
   return resultset.slice().sort(function (element1, element2) {
     var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
     var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
     var comparison = 0;
+
     if ((0, _typeof2["default"])(sortValueA) === "object") {
       comparison = -1;
     } else if ((0, _typeof2["default"])(sortValueB) === "object") {
@@ -37,40 +56,48 @@ var sortArray = function sortArray(index, order, resultset) {
     } else if (sortValueA < sortValueB) {
       comparison = -1;
     }
+
     return order === "descending" ? comparison * -1 : comparison;
   });
 };
+
 var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
   return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
 };
+
 var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
   return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
 };
+
 var DxcResultsetTable = function DxcResultsetTable(_ref) {
   var columns = _ref.columns,
-    rows = _ref.rows,
-    _ref$showGoToPage = _ref.showGoToPage,
-    showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
-    _ref$itemsPerPage = _ref.itemsPerPage,
-    itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
-    itemsPerPageOptions = _ref.itemsPerPageOptions,
-    itemsPerPageFunction = _ref.itemsPerPageFunction,
-    margin = _ref.margin,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      rows = _ref.rows,
+      _ref$showGoToPage = _ref.showGoToPage,
+      showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
+      _ref$itemsPerPage = _ref.itemsPerPage,
+      itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
+      itemsPerPageOptions = _ref.itemsPerPageOptions,
+      itemsPerPageFunction = _ref.itemsPerPageFunction,
+      margin = _ref.margin,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
+
   var _useState = (0, _react.useState)(1),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    page = _useState2[0],
-    changePage = _useState2[1];
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      page = _useState2[0],
+      changePage = _useState2[1];
+
   var _useState3 = (0, _react.useState)(-1),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    sortColumnIndex = _useState4[0],
-    changeSortColumnIndex = _useState4[1];
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      sortColumnIndex = _useState4[0],
+      changeSortColumnIndex = _useState4[1];
+
   var _useState5 = (0, _react.useState)("ascending"),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    sortOrder = _useState6[0],
-    changeSortOrder = _useState6[1];
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      sortOrder = _useState6[0],
+      changeSortOrder = _useState6[1];
+
   var minItemsPerPageIndex = (0, _react.useMemo)(function () {
     return getMinItemsPerPageIndex(page, itemsPerPage, page);
   }, [itemsPerPage, page]);
@@ -83,19 +110,22 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
   var filteredResultset = (0, _react.useMemo)(function () {
     return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
+
   var goToPage = function goToPage(newPage) {
     changePage(newPage);
   };
+
   var changeSorting = function changeSorting(columnIndex) {
     changePage(1);
     changeSortColumnIndex(columnIndex);
     changeSortOrder(sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending");
   };
+
   (0, _react.useEffect)(function () {
     rows.length > 0 ? changePage(1) : changePage(0);
   }, [rows]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme["table"]
+    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) {
@@ -130,9 +160,11 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
     tabIndex: tabIndex
   })));
 };
+
 var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
+
 var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin);
 }, function (props) {
@@ -146,6 +178,7 @@ 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) {
   return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
 }, function (props) {
@@ -153,8 +186,10 @@ var HeaderContainer = _styledComponents["default"].span(_templateObject2 || (_te
 }, function (props) {
   return props.isSortable && "&:focus {\n      outline: #0095ff solid 2px;\n    }";
 });
+
 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;
 });
+
 var _default = DxcResultsetTable;
 exports["default"] = _default;

package/resultsetTable/ResultsetTable.test.js

@@ -1,12 +1,19 @@
 "use strict";
 
 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");
+
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
+
+var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
+
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -21,10 +28,12 @@ global.DOMRect = {
     };
   }
 };
+
 global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
+
   (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
@@ -37,6 +46,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   }]);
   return ResizeObserver;
 }();
+
 var columns = [{
   displayValue: "Id",
   isSortable: false
@@ -171,36 +181,41 @@ var rows2 = [[{
 describe("Resultset table component tests", function () {
   test("Resultset table rendered correctly", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      getByText = _render.getByText;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        getByText = _render.getByText;
+
     expect(getByText("Peter")).toBeTruthy();
   });
   test("Resultset table shows as many rows as itemsPerPage", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      getAllByRole = _render2.getAllByRole;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        getAllByRole = _render2.getAllByRole;
+
     expect(getAllByRole("row").length - 1).toEqual(3);
   });
   test("Resultset table shows rows on second page", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      getByText = _render3.getByText,
-      getAllByRole = _render3.getAllByRole;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        getByText = _render3.getByText,
+        getAllByRole = _render3.getAllByRole;
+
     expect(getByText("Peter")).toBeTruthy();
     expect(getByText("Louis")).toBeTruthy();
     expect(getByText("Lana")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
     var nextButton = getAllByRole("button")[3];
+
     _react2.fireEvent.click(nextButton);
+
     expect(getByText("4 to 6 of 10")).toBeTruthy();
     expect(getByText("Rick")).toBeTruthy();
     expect(getByText("Mark")).toBeTruthy();
@@ -209,23 +224,30 @@ describe("Resultset table component tests", function () {
   });
   test("Resultset table goToPage works as expected", function () {
     window.HTMLElement.prototype.scrollIntoView = function () {};
+
     window.HTMLElement.prototype.scrollTo = function () {};
+
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        showGoToPage: true,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      getByText = _render4.getByText,
-      getAllByRole = _render4.getAllByRole;
+      columns: columns,
+      showGoToPage: true,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        getByText = _render4.getByText,
+        getAllByRole = _render4.getAllByRole;
+
     expect(getByText("Peter")).toBeTruthy();
     expect(getByText("Louis")).toBeTruthy();
     expect(getByText("Lana")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
     var goToPageSelect = getAllByRole("button")[3];
+
     _userEvent["default"].click(goToPageSelect);
+
     var goToPageOption = getByText("2");
+
     _userEvent["default"].click(goToPageOption);
+
     expect(getByText("4 to 6 of 10")).toBeTruthy();
     expect(getByText("Rick")).toBeTruthy();
     expect(getByText("Mark")).toBeTruthy();
@@ -234,14 +256,17 @@ describe("Resultset table component tests", function () {
   });
   test("Resultset table going to the last page shows only one row", function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      getByText = _render5.getByText,
-      getAllByRole = _render5.getAllByRole;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        getByText = _render5.getByText,
+        getAllByRole = _render5.getAllByRole;
+
     var lastButton = getAllByRole("button")[4];
+
     _react2.fireEvent.click(lastButton);
+
     expect(getByText("10 to 10 of 10")).toBeTruthy();
     expect(getAllByRole("row")).toHaveLength(2);
     expect(getByText("Cosmin")).toBeTruthy();
@@ -253,21 +278,26 @@ describe("Resultset table component tests", function () {
       itemsPerPage: 3
     }));
     expect(component.queryByText("Peter")).toBeTruthy();
+
     _react2.fireEvent.click(component.queryByText("Name"));
+
     expect(component.queryByText("Tina")).not.toBeTruthy();
     expect(component.queryByText("Cosmin")).toBeTruthy();
+
     _react2.fireEvent.click(component.queryByText("Name"));
+
     expect(component.queryByText("Tina")).toBeTruthy();
     expect(component.queryByText("Cosmin")).not.toBeTruthy();
   });
   test("Resultset table change rows should go to first page", function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3
-      })),
-      queryByText = _render6.queryByText,
-      rerender = _render6.rerender;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3
+    })),
+        queryByText = _render6.queryByText,
+        rerender = _render6.rerender;
+
     expect(queryByText("Peter")).toBeTruthy();
     rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
       columns: columns,
@@ -278,15 +308,18 @@ describe("Resultset table component tests", function () {
   });
   test("Resultset table change itemsPerPage should go to first page", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-        columns: columns,
-        rows: rows,
-        itemsPerPage: 3,
-        itemsPerPageOptions: [2, 3]
-      })),
-      getAllByRole = _render7.getAllByRole;
+      columns: columns,
+      rows: rows,
+      itemsPerPage: 3,
+      itemsPerPageOptions: [2, 3]
+    })),
+        getAllByRole = _render7.getAllByRole;
+
     var lastButton = getAllByRole("button")[4];
     expect(getAllByRole("row").length - 1).toEqual(3);
+
     _react2.fireEvent.click(lastButton);
+
     expect(getAllByRole("row").length - 1).toEqual(1);
   });
 });

package/resultsetTable/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-type Column = {
+export declare type Column = {
     /**
      * Column display value.
      */
@@ -16,7 +16,7 @@ type Column = {
      */
     isSortable?: boolean;
 };
-type Row = {
+declare type Row = {
     /**
      * Value to be displayed in the cell.
      */
@@ -27,7 +27,7 @@ type Row = {
      */
     sortValue?: string;
 };
-type Props = {
+declare type Props = {
     /**
      * An array of objects representing the columns of the table.
      */

package/select/Icons.js

@@ -1,11 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var selectIcons = {
   error: /*#__PURE__*/_react["default"].createElement("svg", {
     role: "img",

package/select/Listbox.js

@@ -1,41 +1,56 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Option = _interopRequireDefault(require("./Option"));
+
 var _Icons = _interopRequireDefault(require("./Icons"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 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 groupsHaveOptions = function groupsHaveOptions(options) {
   return options !== null && options !== void 0 && options[0].options ? options.some(function (groupOption) {
     var _groupOption$options;
+
     return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
   }) : true;
 };
+
 var Listbox = function Listbox(_ref) {
   var id = _ref.id,
-    currentValue = _ref.currentValue,
-    options = _ref.options,
-    visualFocusIndex = _ref.visualFocusIndex,
-    lastOptionIndex = _ref.lastOptionIndex,
-    multiple = _ref.multiple,
-    optional = _ref.optional,
-    optionalItem = _ref.optionalItem,
-    searchable = _ref.searchable,
-    handleOptionOnClick = _ref.handleOptionOnClick,
-    styles = _ref.styles;
+      currentValue = _ref.currentValue,
+      options = _ref.options,
+      visualFocusIndex = _ref.visualFocusIndex,
+      lastOptionIndex = _ref.lastOptionIndex,
+      multiple = _ref.multiple,
+      optional = _ref.optional,
+      optionalItem = _ref.optionalItem,
+      searchable = _ref.searchable,
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      styles = _ref.styles;
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var listboxRef = (0, _react.useRef)(null);
   var globalIndex = optional && !multiple ? 0 : -1;
+
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
     if (option.options) {
       var groupId = "group-".concat(mapIndex);
@@ -75,9 +90,11 @@ var Listbox = function Listbox(_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, {
@@ -87,6 +104,7 @@ var Listbox = function Listbox(_ref) {
   }, [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",
@@ -117,6 +135,7 @@ var Listbox = function Listbox(_ref) {
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
   }), options.map(mapOptionFunc));
 };
+
 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) {
@@ -132,13 +151,19 @@ var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_temp
 }, function (props) {
   return props.theme.listOptionFontWeight;
 });
+
 var OptionsSystemMessage = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 4px 16px;\n  color: ", ";\n  font-size: 0.875rem;\n  line-height: 1.715em;\n"])), function (props) {
   return props.theme.systemMessageFontColor;
 });
+
 var NoMatchesFoundIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 16px;\n  width: 16px;\n  padding: 4px;\n  margin-right: 0.25rem;\n"])));
+
 var GroupList = _styledComponents["default"].ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0;\n"])));
+
 var GroupLabel = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 4px 16px;\n  font-weight: ", ";\n  line-height: 1.715em;\n"])), function (props) {
   return props.theme.listGroupLabelFontWeight;
 });
+
 var _default = /*#__PURE__*/_react["default"].memo(Listbox);
+
 exports["default"] = _default;