@dxc-technology/halstack-react 0.0.0-5bbb9f7 → 0.0.0-5beed19

package/layout/Icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const facebookLogo: JSX.Element;
+export declare const twitterLogo: JSX.Element;
+export declare const linkedinLogo: JSX.Element;
+export declare const hamburgerIcon: JSX.Element;

package/layout/Icons.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.twitterLogo = exports.linkedinLogo = exports.facebookLogo = void 0;
+exports.twitterLogo = exports.linkedinLogo = exports.hamburgerIcon = exports.facebookLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -52,4 +52,15 @@ var linkedinLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
 })));
 
-exports.linkedinLogo = linkedinLogo;
+exports.linkedinLogo = linkedinLogo;
+
+var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  width: "24",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
+}));
+
+exports.hamburgerIcon = hamburgerIcon;

package/layout/SidenavContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare type SidenavContextType = (isSidenavVisible: boolean) => void;
+export declare const SidenavContextProvider: import("react").Provider<SidenavContextType>;
+export declare const useResponsiveSidenavVisibility: () => SidenavContextType;
+export {};

package/layout/SidenavContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveSidenavVisibility = exports.SidenavContextProvider = void 0;
+
+var _react = require("react");
+
+var SidenavContext = /*#__PURE__*/(0, _react.createContext)(null);
+var SidenavContextProvider = SidenavContext.Provider;
+exports.SidenavContextProvider = SidenavContextProvider;
+
+var useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
+  var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
+  return changeResponsiveSidenavVisibility;
+};
+
+exports.useResponsiveSidenavVisibility = useResponsiveSidenavVisibility;

package/layout/types.d.ts

@@ -37,18 +37,13 @@ export declare type AppLayoutSidenavPropsType = {
      * The area inside the sidenav. This area can be used to render custom content.
      */
     children: React.ReactNode;
-    /**
-     * If false, the arrow button is hidden.
-     * In lower resolutions the arrow will be always displayed.
-     */
-    displayArrow?: boolean;
-    /**
-     * Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
-     * In lower resolutions the mode will always be overlay.
-     */
-    mode: "push" | "overlay";
 };
 declare type AppLayoutPropsType = {
+    /**
+     * Text to be placed next to the hamburger button that toggles the
+     * visibility of the sidenav.
+     */
+    visibilityToggleLabel?: string;
     /**
      * The area inside the sidenav. This area can be used to render custom content.
      */

package/link/Link.js

@@ -13,6 +13,10 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -21,7 +25,9 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
 
 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); }
 
@@ -31,7 +37,7 @@ var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var iconPosition = _ref.iconPosition,
       icon = _ref.icon,
       children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(LinkText, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
     iconPosition: iconPosition
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
     src: icon
@@ -54,11 +60,12 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       margin = _ref2.margin,
       _ref2$tabIndex = _ref2.tabIndex,
       tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
-      children = _ref2.children;
+      children = _ref2.children,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.link
-  }, /*#__PURE__*/_react["default"].createElement(StyledLink, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledLink, (0, _extends2["default"])({
     as: href ? "a" : "button",
     tabIndex: tabIndex,
     onClick: !disabled && onClick,
@@ -68,14 +75,14 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     inheritColor: inheritColor,
     margin: margin,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(LinkContent, {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement(LinkContent, {
     iconPosition: iconPosition,
     icon: icon,
     children: children
   })));
 });
 
-var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n  width: fit-content;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -115,11 +122,9 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
   return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
 });
 
-var LinkText = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: baseline;\n  max-width: 100%;\n"])));
-
-var LinkIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var LinkIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  align-self: center;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  align-self: center;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;

package/list/List.js

@@ -24,7 +24,7 @@ function List(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "disc" : _ref$type,
       _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
+      gutter = _ref$gutter === void 0 ? "0.25rem" : _ref$gutter;
   return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
     as: type === "number" ? "ol" : "ul",
     gutter: gutter

package/list/List.stories.tsx

@@ -41,52 +41,46 @@ export const Chromatic = () => (
         <DxcText>Text 2.</DxcText>
       </DxcList>
     </Container>
-    <Title title="gutter = xxxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
+    <Title title="gutter = 0rem" theme="light" level={4} />
+    <DxcList gutter="0rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
+    <Title title="gutter = 0.125rem" theme="light" level={4} />
+    <DxcList gutter="0.125rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xsmall" theme="light" level={4} />
-    <DxcList gutter="xsmall">
+    <Title title="gutter = 0.25rem" theme="light" level={4} />
+    <DxcList gutter="0.25rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = small" theme="light" level={4} />
-    <DxcList gutter="small">
+    <Title title="gutter = 0.5rem" theme="light" level={4} />
+    <DxcList gutter="0.5rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = medium" theme="light" level={4} />
-    <DxcList gutter="medium">
+    <Title title="gutter = 0.75rem" theme="light" level={4} />
+    <DxcList gutter="0.75rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = large" theme="light" level={4} />
-    <DxcList gutter="large">
+    <Title title="gutter = 1rem" theme="light" level={4} />
+    <DxcList gutter="1rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xlarge" theme="light" level={4} />
-    <DxcList gutter="xlarge">
+    <Title title="gutter = 1.5rem" theme="light" level={4} />
+    <DxcList gutter="1.5rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxlarge" theme="light" level={4} />
-    <DxcList gutter="xxlarge">
+    <Title title="gutter = 2rem" theme="light" level={4} />
+    <DxcList gutter="2rem">
       <DxcText>Text 1.</DxcText>
       <DxcText>Text 2.</DxcText>
     </DxcList>
-    <Title title="gutter = xxxlarge" theme="light" level={4} />
-    <DxcList gutter="xxxlarge">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-
   </>
 );
 

package/list/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare type Props = {
     children: React.ReactNode;
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";
     type?: "disc" | "circle" | "square" | "number";
 };
 export default Props;

package/main.d.ts

@@ -7,7 +7,6 @@ import DxcDialog from "./dialog/Dialog";
 import DxcDropdown from "./dropdown/Dropdown";
 import DxcFooter from "./footer/Footer";
 import DxcHeader from "./header/Header";
-import DxcRadio from "./radio/Radio";
 import DxcSlider from "./slider/Slider";
 import DxcSwitch from "./switch/Switch";
 import DxcTabs from "./tabs/Tabs";
@@ -43,6 +42,7 @@ import DxcBleed from "./bleed/Bleed";
 import DxcInset from "./inset/Inset";
 import DxcQuickNav from "./quick-nav/QuickNav";
 import DxcNavTabs from "./tabs-nav/NavTabs";
+import DxcInline from "./inline/Inline";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, };
+export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcInline, };

package/main.js

@@ -121,6 +121,12 @@ Object.defineProperty(exports, "DxcHeading", {
     return _Heading["default"];
   }
 });
+Object.defineProperty(exports, "DxcInline", {
+  enumerable: true,
+  get: function get() {
+    return _Inline["default"];
+  }
+});
 Object.defineProperty(exports, "DxcInset", {
   enumerable: true,
   get: function get() {
@@ -175,12 +181,6 @@ Object.defineProperty(exports, "DxcQuickNav", {
     return _QuickNav["default"];
   }
 });
-Object.defineProperty(exports, "DxcRadio", {
-  enumerable: true,
-  get: function get() {
-    return _Radio["default"];
-  }
-});
 Object.defineProperty(exports, "DxcRadioGroup", {
   enumerable: true,
   get: function get() {
@@ -320,8 +320,6 @@ var _Footer = _interopRequireDefault(require("./footer/Footer"));
 
 var _Header = _interopRequireDefault(require("./header/Header"));
 
-var _Radio = _interopRequireDefault(require("./radio/Radio"));
-
 var _Slider = _interopRequireDefault(require("./slider/Slider"));
 
 var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -392,6 +390,8 @@ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
 
 var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
 
+var _Inline = _interopRequireDefault(require("./inline/Inline"));
+
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 
 var _BackgroundColorContext = require("./BackgroundColorContext");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-5bbb9f7",
+  "version": "0.0.0-5beed19",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -24,6 +24,7 @@
     "@material-ui/lab": "4.0.0-alpha.17",
     "@material-ui/pickers": "3.2.2",
     "@material-ui/styles": "4.0.2",
+    "@radix-ui/react-popover": "^0.1.6",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",

package/paginator/Paginator.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _Paginator = _interopRequireDefault(require("./Paginator"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 describe("Paginator component tests", function () {
   test("Paginator renders with default values", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], null)),

package/quick-nav/QuickNav.js

@@ -43,24 +43,24 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.quickNav
   }, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+    gutter: "0.5rem"
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
     text: title || translatedLabels.quickNav.contentTitle
   }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xsmall"
+    gutter: "0.5rem"
   }, links.map(function (link) {
     var _link$links;
 
     return /*#__PURE__*/_react["default"].createElement(ListRow, null, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-      space: "xxsmall"
+      space: "0.25rem"
     }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
       href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
         lower: true
       }))
     }, link === null || link === void 0 ? void 0 : link.label), (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
       return /*#__PURE__*/_react["default"].createElement(ListRow, null, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-        horizontal: "xsmall"
+        horizontal: "0.5rem"
       }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
         href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true

package/resultsetTable/ResultsetTable.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 var columns = [{
   displayValue: "Id",
   isSortable: false

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLUListElement>>>;
+declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element>;
 export default _default;

package/select/Listbox.js

@@ -11,7 +11,7 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -37,7 +37,7 @@ var groupsHaveOptions = function groupsHaveOptions(options) {
   }) : true;
 };
 
-var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var Listbox = function Listbox(_ref) {
   var id = _ref.id,
       currentValue = _ref.currentValue,
       options = _ref.options,
@@ -47,9 +47,11 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       optional = _ref.optional,
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
-      handleOptionOnClick = _ref.handleOptionOnClick;
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      styles = _ref.styles;
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var listboxRef = (0, _react.useRef)(null);
   var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
@@ -92,6 +94,26 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (currentValue && !multiple) {
+      var _listEl$scrollTo;
+
+      var listEl = listboxRef === null || listboxRef === void 0 ? void 0 : listboxRef.current;
+      var selectedListOptionEl = listEl === null || listEl === void 0 ? void 0 : listEl.querySelector("[aria-selected='true']");
+      listEl === null || listEl === void 0 ? void 0 : (_listEl$scrollTo = listEl.scrollTo) === null || _listEl$scrollTo === void 0 ? void 0 : _listEl$scrollTo.call(listEl, {
+        top: (selectedListOptionEl === null || selectedListOptionEl === void 0 ? void 0 : selectedListOptionEl.offsetTop) - (listEl === null || listEl === void 0 ? void 0 : listEl.clientHeight) / 2
+      });
+    }
+  }, [currentValue, multiple]);
+  (0, _react.useLayoutEffect)(function () {
+    var _listboxRef$current, _visualFocusedOptionE;
+
+    var visualFocusedOptionEl = listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.querySelectorAll("[role='option']")[visualFocusIndex];
+    visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
+      block: "nearest",
+      inline: "start"
+    });
+  }, [visualFocusIndex]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
@@ -102,10 +124,11 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
-    ref: ref,
+    ref: listboxRef,
     role: "listbox",
     "aria-multiselectable": multiple,
-    "aria-orientation": "vertical"
+    "aria-orientation": "vertical",
+    style: styles
   }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
     key: "option-".concat(optionalItem.value),
     id: "option-".concat(0),
@@ -117,9 +140,9 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLastOption: lastOptionIndex === 0,
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
   }), options.map(mapOptionFunc)));
-});
+};
 
-var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.listDialogBackgroundColor;
 }, function (props) {
   return props.theme.listDialogBorderColor;