@dxc-technology/halstack-react 7.0.0 → 9.0.0

package/resultsetTable/ResultsetTable.stories.tsx

@@ -4,6 +4,7 @@ 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";
 
 export default {
   title: "Resultset Table",
@@ -48,6 +49,24 @@ const columnsSortable = [
   { displayValue: "City", isSortable: false },
 ];
 
+const longValues = [
+  [
+    { displayValue: "000000000000000001", sortValue: "000000000000000001" },
+    { displayValue: "Peter Larsson González", sortValue: "Peter" },
+    { displayValue: "Miami: The city that never sleeps", sortValue: "Miami" },
+  ],
+  [
+    { displayValue: "002", sortValue: "002" },
+    { displayValue: "Louis", sortValue: "Louis" },
+    { displayValue: "London", sortValue: "London" },
+  ],
+  [
+    { displayValue: "003", sortValue: "003" },
+    { displayValue: "Aida", sortValue: "Aida" },
+    { displayValue: "Wroclaw", sortValue: "Wroclaw" },
+  ],
+];
+
 const rowsSortable = [
   [
     { displayValue: "001", sortValue: "001" },
@@ -167,89 +186,95 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Sortable table" theme="light" level={4} />
-      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With action" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rowsIcon}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rowsIcon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With items per page option" theme="light" level={4} />
-      <DxcResultsetTable
-        columns={columns}
-        rows={rows}
-        itemsPerPage={2}
-        itemsPerPageOptions={[2, 3]}
-      ></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Scroll resultset table" theme="light" level={4} />
-      <DxcResultsetTable columns={longColumns} rows={longRows}></DxcResultsetTable>
+      <DxcResultsetTable columns={longColumns} rows={longRows} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <SmallContainer>
+        <Title title="Small container and text overflow" theme="light" level={4} />
+        <DxcResultsetTable columns={columnsSortable} rows={longValues} />
+      </SmallContainer>
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"small"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"small"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"medium"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"medium"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"large"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"large"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"} />
     </ExampleContainer>
-    <ExampleContainer>
+    <ExampleContainer expanded>
       <Title title="Xxlarge" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"}></DxcResultsetTable>
-      <hr />
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"} />
     </ExampleContainer>
   </>
 );
 
+const SmallContainer = styled.div`
+  width: 500px;
+`;
+
 const ResultsetTableAsc = () => (
   <ExampleContainer>
     <Title title="Ascendant sorting" theme="light" level={4} />
-    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
   </ExampleContainer>
 );
 
 export const AscendentSorting = ResultsetTableAsc.bind({});
 AscendentSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.queryByText("Name"));
+  const idHeader = canvas.getAllByRole("button")[0];
+  await userEvent.click(idHeader);
 };
 
 const ResultsetTableDesc = () => (
   <ExampleContainer>
     <Title title="Descendant sorting" theme="light" level={4} />
-    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
   </ExampleContainer>
 );
 
 export const DescendantSorting = ResultsetTableDesc.bind({});
 DescendantSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.queryByText("Name"));
-  await userEvent.click(canvas.queryByText("Name"));
+  const nameHeader = canvas.getAllByRole("button")[1];
+  await userEvent.click(nameHeader);
+  await userEvent.click(nameHeader);
 };
 
 const ResultsetTableMiddle = () => (
   <ExampleContainer>
     <Title title="Middle page" theme="light" level={4} />
-    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
+    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
   </ExampleContainer>
 );
 
@@ -263,7 +288,7 @@ MiddlePage.play = async ({ canvasElement }) => {
 const ResultsetTableLast = () => (
   <ExampleContainer>
     <Title title="Last page" theme="light" level={4} />
-    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
+    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
   </ExampleContainer>
 );
 

package/resultsetTable/ResultsetTable.test.js

@@ -16,42 +16,37 @@ var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 
 global.ResizeObserver = /*#__PURE__*/function () {
-  function ResizeObserver(cb) {
+  function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
-    this.cb = cb;
   }
 
   (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
-    value: function observe() {
-      this.cb([{
-        borderBoxSize: {
-          inlineSize: 0,
-          blockSize: 0
-        }
-      }]);
-    }
+    value: function observe() {}
   }, {
     key: "unobserve",
     value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
   }]);
   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
@@ -80,8 +75,6 @@ var rows = [[{
 }, {
   displayValue: "Oviedo",
   sortValue: "Oviedo"
-}, {
-  displayValue: ""
 }], [{
   displayValue: "003",
   sortValue: "003"
@@ -118,8 +111,6 @@ var rows = [[{
 }, {
   displayValue: "Barcelona",
   sortValue: "Barcelona"
-}, {
-  displayValue: ""
 }], [{
   displayValue: "007",
   sortValue: "007"
@@ -147,8 +138,6 @@ var rows = [[{
 }, {
   displayValue: "Oviedo",
   sortValue: "Oviedo"
-}, {
-  displayValue: ""
 }], [{
   displayValue: "010",
   sortValue: "010"
@@ -158,8 +147,6 @@ var rows = [[{
 }, {
   displayValue: "Barcelona",
   sortValue: "Barcelona"
-}, {
-  displayValue: ""
 }]];
 var rows2 = [[{
   displayValue: "546",
@@ -191,8 +178,8 @@ var rows2 = [[{
   displayValue: "OtherValue",
   sortValue: "OtherValue"
 }]];
-describe("ResultsetTable component tests", function () {
-  test("ResultsetTable rendered correctly", function () {
+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,
@@ -202,7 +189,7 @@ describe("ResultsetTable component tests", function () {
 
     expect(getByText("Peter")).toBeTruthy();
   });
-  test("Resultsettable shows as many rows as itemsPerPage", function () {
+  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,
@@ -212,7 +199,7 @@ describe("ResultsetTable component tests", function () {
 
     expect(getAllByRole("row").length - 1).toEqual(3);
   });
-  test("Resultsettable shows rows on second page", function () {
+  test("Resultset table shows rows on second page", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
       columns: columns,
       rows: rows,
@@ -225,18 +212,17 @@ describe("ResultsetTable component tests", function () {
     expect(getByText("Louis")).toBeTruthy();
     expect(getByText("Lana")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
-    var nextButton = getAllByRole("button")[2];
+    var nextButton = getAllByRole("button")[3];
 
     _react2.fireEvent.click(nextButton);
 
-    expect(getByText("4 to 6 of 10")).toBeTruthy(); // expect(getByText("Page: 2 of 4")).toBeTruthy();
-
+    expect(getByText("4 to 6 of 10")).toBeTruthy();
     expect(getByText("Rick")).toBeTruthy();
     expect(getByText("Mark")).toBeTruthy();
     expect(getByText("Cris")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
   });
-  test("Resultsettable goToPage works as expected", function () {
+  test("Resultset table goToPage works as expected", function () {
     window.HTMLElement.prototype.scrollIntoView = function () {};
 
     window.HTMLElement.prototype.scrollTo = function () {};
@@ -248,28 +234,27 @@ describe("ResultsetTable component tests", function () {
       itemsPerPage: 3
     })),
         getByText = _render4.getByText,
-        getAllByRole = _render4.getAllByRole,
-        getByRole = _render4.getByRole;
+        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")[2];
-    (0, _react2.act)(function () {
-      _userEvent["default"].click(goToPageSelect);
-    });
+    var goToPageSelect = getAllByRole("button")[3];
+
+    _userEvent["default"].click(goToPageSelect);
+
     var goToPageOption = getByText("2");
-    (0, _react2.act)(function () {
-      _userEvent["default"].click(goToPageOption);
-    });
+
+    _userEvent["default"].click(goToPageOption);
+
     expect(getByText("4 to 6 of 10")).toBeTruthy();
     expect(getByText("Rick")).toBeTruthy();
     expect(getByText("Mark")).toBeTruthy();
     expect(getByText("Cris")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
   });
-  test("Resultsettable going to the last page shows only one row", 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,
@@ -278,7 +263,7 @@ describe("ResultsetTable component tests", function () {
         getByText = _render5.getByText,
         getAllByRole = _render5.getAllByRole;
 
-    var lastButton = getAllByRole("button")[3];
+    var lastButton = getAllByRole("button")[4];
 
     _react2.fireEvent.click(lastButton);
 
@@ -286,7 +271,7 @@ describe("ResultsetTable component tests", function () {
     expect(getAllByRole("row")).toHaveLength(2);
     expect(getByText("Cosmin")).toBeTruthy();
   });
-  test("Resultsettable sort rows by column", function () {
+  test("Resultset table sort rows by column", function () {
     var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
       columns: columns,
       rows: rows,
@@ -304,7 +289,7 @@ describe("ResultsetTable component tests", function () {
     expect(component.queryByText("Tina")).toBeTruthy();
     expect(component.queryByText("Cosmin")).not.toBeTruthy();
   });
-  test("Resultsettable change rows should go to first page", function () {
+  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,
@@ -321,28 +306,20 @@ describe("ResultsetTable component tests", function () {
     }));
     expect(queryByText("1 to 3 of 3")).toBeTruthy();
   });
-  test("Resultsettable change itemsPerPage should go to first page", 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,
-        queryByText = _render7.queryByText,
-        rerender = _render7.rerender;
+        getAllByRole = _render7.getAllByRole;
 
-    var lastButton = getAllByRole("button")[3];
+    var lastButton = getAllByRole("button")[4];
+    expect(getAllByRole("row").length - 1).toEqual(3);
 
     _react2.fireEvent.click(lastButton);
 
     expect(getAllByRole("row").length - 1).toEqual(1);
-    rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 6
-    }));
-    expect(getAllByRole("row").length - 1).toEqual(6);
-    expect(queryByText("Peter")).toBeTruthy();
   });
 });

package/resultsetTable/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

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, getSelectWidth, }: ListboxProps) => JSX.Element>;
+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,13 +11,9 @@ 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"));
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
@@ -50,17 +46,10 @@ var Listbox = function Listbox(_ref) {
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
       handleOptionOnClick = _ref.handleOptionOnClick,
-      getSelectWidth = _ref.getSelectWidth;
-  var colorsTheme = (0, _useTheme["default"])();
+      styles = _ref.styles;
   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 globalIndex = optional && !multiple ? 0 : -1;
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
     if (option.options) {
@@ -122,25 +111,7 @@ 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, {
+  return /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
     id: id,
     onClick: function onClick(event) {
       event.stopPropagation();
@@ -162,7 +133,7 @@ var Listbox = function Listbox(_ref) {
     isGroupedOption: false,
     isLastOption: lastOptionIndex === 0,
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
-  }), options.map(mapOptionFunc)));
+  }), 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) {

package/select/Option.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,19 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var Option = function Option(_ref) {
   var id = _ref.id,
@@ -37,10 +29,7 @@ var Option = function Option(_ref) {
       isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
       isLastOption = _ref.isLastOption,
       isSelected = _ref.isSelected;
-  var colorsTheme = (0, _useTheme["default"])();
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.select
-  }, /*#__PURE__*/_react["default"].createElement(OptionItem, {
+  return /*#__PURE__*/_react["default"].createElement(OptionItem, {
     id: id,
     onClick: function onClick() {
       _onClick(option);
@@ -62,13 +51,13 @@ var Option = function Option(_ref) {
     grouped: isGroupedOption,
     multiple: multiple,
     role: !(typeof option.icon === "string") ? "img" : undefined
-  }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(OptionIconImg, {
+  }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: option.icon
   }) : option.icon), /*#__PURE__*/_react["default"].createElement(OptionContent, {
     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, null, 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) {
@@ -87,21 +76,19 @@ var StyledOption = _styledComponents["default"].span(_templateObject2 || (_templ
   return props.last || props.visualFocused || props.selected ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
 });
 
-var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  ", "\n  color: ", ";\n"])), function (props) {
-  return props.grouped && !props.multiple ? "padding-left: 16px;" : "padding-left: 8px;";
+var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.125rem;\n  margin-left: ", ";\n  color: ", ";\n\n  svg,\n  img {\n    height: 20px;\n    width: 20px;\n  }\n"])), function (props) {
+  return props.grouped && !props.multiple ? "16px" : "8px";
 }, function (props) {
   return props.theme.listOptionIconColor;
 });
 
-var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  overflow: hidden;\n  ", "\n"])), function (props) {
-  return props.grouped && !props.multiple && !props.hasIcon ? "padding-left: 16px;" : "padding-left: 8px;";
+var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  gap: 0.25rem;\n  width: 100%;\n  overflow: hidden;\n  margin-left: ", ";\n"])), function (props) {
+  return props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px";
 });
 
-var OptionIconImg = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 16px;\n  height: 16px;\n"])));
-
-var OptionLabel = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var OptionLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 
-var OptionSelectedIndicator = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 16px;\n  width: 16px;\n  margin-left: 4px;\n  color: ", ";\n"])), function (props) {
+var OptionSelectedIndicator = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.theme.selectedListOptionIconColor;
 });