@kaizen/components 1.61.2 → 1.61.3

package/dist/cjs/__future__/Select/Select.cjs

@@ -121,12 +121,7 @@ var Select = function (_a) {
   }, trigger === undefined ? React__default.default.createElement(SelectToggle.SelectToggle, tslib.__assign({}, selectToggleProps)) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && React__default.default.createElement(Popover.Popover, {
     id: popoverId,
     portalContainer: portalContainer,
-    refs: refs,
-    focusOnProps: {
-      onEscapeKey: state.close,
-      onClickOutside: state.close,
-      noIsolation: true
-    }
+    refs: refs
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -21,8 +21,7 @@ var ListBox = function (_a) {
   var state = SelectContext.useSelectContext().state;
   var ref = React__default.default.useRef(null);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
-    disallowEmptySelection: true,
-    autoFocus: "first"
+    disallowEmptySelection: true
   }), state, ref).listBoxProps;
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.module.scss.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var styles = {
-  "listBox": "ListBox-module_listBox__Uf6Mc",
-  "focus": "ListBox-module_focus__yrwu3"
+  "listBox": "ListBox-module_listBox__Uf6Mc"
 };
 module.exports = styles;

package/dist/esm/__future__/Select/Select.mjs

@@ -113,12 +113,7 @@ const Select = /*#__PURE__*/function () {
     }, trigger === undefined ? ( /*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && ( /*#__PURE__*/React.createElement(Popover, {
       id: popoverId,
       portalContainer: portalContainer,
-      refs: refs,
-      focusOnProps: {
-        onEscapeKey: state.close,
-        onClickOutside: state.close,
-        noIsolation: true
-      }
+      refs: refs
     }, /*#__PURE__*/React.createElement(SelectProvider, {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -13,8 +13,7 @@ const ListBox = /*#__PURE__*/function () {
     var state = useSelectContext().state;
     var ref = React.useRef(null);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
-      disallowEmptySelection: true,
-      autoFocus: "first"
+      disallowEmptySelection: true
     }), state, ref).listBoxProps;
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -1,5 +1,4 @@
 var styles = {
-  "listBox": "ListBox-module_listBox__Uf6Mc",
-  "focus": "ListBox-module_focus__yrwu3"
+  "listBox": "ListBox-module_listBox__Uf6Mc"
 };
 export { styles as default };

package/dist/styles.css

@@ -123,59 +123,6 @@
   }
 }
 
-.FooterRoot-module_footerRoot__DUoiZ {
-  display: grid;
-  grid-template-areas: "prev stepper next";
-  grid-template-columns: 1fr 2fr 1fr;
-  flex-grow: 1;
-  justify-content: center;
-  align-items: center;
-  padding: var(--spacing-24) var(--spacing-12);
-  background: var(--color-white);
-  gap: var(--spacing-16);
-  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
-
-  @media (width >= 768px) {
-    grid-template-columns: 1fr 5fr 1fr;
-    padding: var(--spacing-24) var(--spacing-32);
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-  }
-}
-
-.FooterActions-module_footerAction__yu1mj {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: auto;
-}
-
-.FooterActions-module_footerActionPrevious__C-ejW {
-  grid-area: "prev";
-  justify-content: start;
-}
-
-.FooterActions-module_footerActionNext__yLUMV {
-  grid-area: "next";
-  justify-content: end;
-}
-
-.Branding-module_branding__bawwf {
-  justify-content: center;
-  grid-area: branding;
-  display: flex;
-  flex-grow: 1;
-  padding-top: var(--spacing-4);
-
-  @media (width >= 768px) {
-    justify-content: unset;
-  }
-}
-
-.Branding-module_logo__qhM6C {
-  flex-basis: 7.5rem;
-}
-
 .Titles-module_titles__gE8Zb {
   grid-area: titles;
   display: flex;
@@ -198,6 +145,27 @@
   margin-top: var(--spacing-8);
 }
 
+.FooterRoot-module_footerRoot__DUoiZ {
+  display: grid;
+  grid-template-areas: "prev stepper next";
+  grid-template-columns: 1fr 2fr 1fr;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-24) var(--spacing-12);
+  background: var(--color-white);
+  gap: var(--spacing-16);
+  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
+
+  @media (width >= 768px) {
+    grid-template-columns: 1fr 5fr 1fr;
+    padding: var(--spacing-24) var(--spacing-32);
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+}
+
 .Actions-module_actions__WJwtK {
   grid-area: actions;
   display: flex;
@@ -214,6 +182,22 @@
   }
 }
 
+.FooterActions-module_footerAction__yu1mj {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: auto;
+}
+
+.FooterActions-module_footerActionPrevious__C-ejW {
+  grid-area: "prev";
+  justify-content: start;
+}
+
+.FooterActions-module_footerActionNext__yLUMV {
+  grid-area: "next";
+  justify-content: end;
+}
+
 .Root-module_root__FYpNx {
   display: grid;
   background-color: var(--color-white);
@@ -235,189 +219,22 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.OverlayArrow-module_overlayArrow__hoDyK {
-  display: flex;
-  padding: 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
-  padding: 0 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
-  padding: 8px 0;
-}
-.OverlayArrow-module_overlayArrow__hoDyK path {
-  fill: var(--color-purple-800, #2f2438);
-  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
-  transform: rotate(90deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
-  transform: rotate(180deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
-  transform: rotate(270deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
-  fill: var(--color-white, #ffffff);
-}
-.MenuItem-module_item__DPerF {
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_iconWrapper__bRdQN {
-  flex-shrink: 0;
+.Branding-module_branding__bawwf {
+  justify-content: center;
+  grid-area: branding;
   display: flex;
-  align-items: center;
-}
-
-.MenuItem-module_item__DPerF[data-focused] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__DPerF[data-disabled] {
-  opacity: 0.3;
-}
-.Menu-module_menu__iHYqh {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
-}
-
-.Menu-module_menu__iHYqh .react-aria-Header {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
-}
+  flex-grow: 1;
+  padding-top: var(--spacing-4);
 
-.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
-  width: 100%;
-  height: 1px;
-  background-color: var(--border-solid-border-color);
-  content: "";
-  display: block;
-  margin-block: var(--spacing-6);
-}
-.Button-module_button__QOSYH {
-  --button-min-height-width: var(--spacing-48);
-  --button-padding-x: calc(
-    var(--spacing-12) - var(--border-solid-border-width)
-  );
-  --button-padding-y: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-icon-size: var(--spacing-24);
-  appearance: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  border: none;
-  border: var(--border-solid-border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius);
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: left;
-  gap: var(--spacing-8);
-  font-family: var(--typography-button-primary-font-family);
-  font-weight: var(--typography-button-primary-font-weight);
-  font-size: var(--typography-button-primary-font-size);
-  line-height: var(--typography-button-primary-line-height);
-  min-height: var(--button-min-height-width);
-  min-width: var(--button-min-height-width);
-  outline: none;
-  position: relative;
-  padding: var(--button-padding-y) var(--button-padding-x);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.Button-module_button__QOSYH[data-focus-visible]::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-color: var(--color-blue-500);
-  border-radius: var(--border-focus-ring-border-radius);
-  border-width: var(--border-focus-ring-border-width);
-  border-style: var(--border-focus-ring-border-style);
-  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2 + 1px));
-}
-.Button-module_button__QOSYH svg {
-  height: var(--button-icon-size);
-  width: var(--button-icon-size);
+  @media (width >= 768px) {
+    justify-content: unset;
+  }
 }
 
-.Button-module_default__gSx3e {
-  border-color: var(--color-gray-500);
-  color: var(--color-purple-800);
-}
-.Button-module_default__gSx3e[data-hovered], .Button-module_default__gSx3e[data-focus-visible], .Button-module_default__gSx3e[data-pressed] {
-  background-color: var(--color-gray-200);
-  border-color: var(--color-purple-800);
-}
-.Button-module_default__gSx3e[data-disabled] {
-  opacity: 0.3;
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id {
-  background-color: transparent;
-  border-color: rgba(var(--color-white-rgb), 0.65);
-  color: var(--color-white);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-hovered], .Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible] {
-  background-color: rgba(var(--color-white-rgb), 0.1);
-  border-color: var(--color-white);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-disabled]::after {
-  border-color: var(--color-gray-400);
+.Branding-module_logo__qhM6C {
+  flex-basis: 7.5rem;
 }
 
-.Button-module_small__S-t5B {
-  --button-min-height-width: 2.5rem;
-  --button-padding-x: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-padding-y: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-icon-size: var(--spacing-16);
-  gap: var(--spacing-8);
-}
-.Focusable-module_focusableWrapper__NfuIi {
-  display: inline-flex;
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -761,6 +578,189 @@
 /* stylelint-enable no-descending-specificity */
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
+.OverlayArrow-module_overlayArrow__hoDyK {
+  display: flex;
+  padding: 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
+  padding: 0 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
+  padding: 8px 0;
+}
+.OverlayArrow-module_overlayArrow__hoDyK path {
+  fill: var(--color-purple-800, #2f2438);
+  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
+  transform: rotate(90deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
+  transform: rotate(180deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
+  transform: rotate(270deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
+  fill: var(--color-white, #ffffff);
+}
+.Menu-module_menu__iHYqh {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.Menu-module_menu__iHYqh .react-aria-Header {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border-solid-border-color);
+  content: "";
+  display: block;
+  margin-block: var(--spacing-6);
+}
+.MenuItem-module_item__DPerF {
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_iconWrapper__bRdQN {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__DPerF[data-focused] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+  outline: none;
+  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__DPerF[data-disabled] {
+  opacity: 0.3;
+}
+.Button-module_button__QOSYH {
+  --button-min-height-width: var(--spacing-48);
+  --button-padding-x: calc(
+    var(--spacing-12) - var(--border-solid-border-width)
+  );
+  --button-padding-y: calc(
+    var(--spacing-8) - var(--border-solid-border-width)
+  );
+  --button-icon-size: var(--spacing-24);
+  appearance: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  border: none;
+  border: var(--border-solid-border-width) var(--border-solid-border-style);
+  border-radius: var(--border-solid-border-radius);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: left;
+  gap: var(--spacing-8);
+  font-family: var(--typography-button-primary-font-family);
+  font-weight: var(--typography-button-primary-font-weight);
+  font-size: var(--typography-button-primary-font-size);
+  line-height: var(--typography-button-primary-line-height);
+  min-height: var(--button-min-height-width);
+  min-width: var(--button-min-height-width);
+  outline: none;
+  position: relative;
+  padding: var(--button-padding-y) var(--button-padding-x);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.Button-module_button__QOSYH[data-focus-visible]::after {
+  content: "";
+  position: absolute;
+  background: transparent;
+  border-color: var(--color-blue-500);
+  border-radius: var(--border-focus-ring-border-radius);
+  border-width: var(--border-focus-ring-border-width);
+  border-style: var(--border-focus-ring-border-style);
+  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2 + 1px));
+}
+.Button-module_button__QOSYH svg {
+  height: var(--button-icon-size);
+  width: var(--button-icon-size);
+}
+
+.Button-module_default__gSx3e {
+  border-color: var(--color-gray-500);
+  color: var(--color-purple-800);
+}
+.Button-module_default__gSx3e[data-hovered], .Button-module_default__gSx3e[data-focus-visible], .Button-module_default__gSx3e[data-pressed] {
+  background-color: var(--color-gray-200);
+  border-color: var(--color-purple-800);
+}
+.Button-module_default__gSx3e[data-disabled] {
+  opacity: 0.3;
+}
+.Button-module_default__gSx3e.Button-module_reversed__DT-Id {
+  background-color: transparent;
+  border-color: rgba(var(--color-white-rgb), 0.65);
+  color: var(--color-white);
+}
+.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-hovered], .Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible] {
+  background-color: rgba(var(--color-white-rgb), 0.1);
+  border-color: var(--color-white);
+}
+.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible]::after {
+  border-color: var(--color-blue-300);
+}
+.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-disabled]::after {
+  border-color: var(--color-gray-400);
+}
+
+.Button-module_small__S-t5B {
+  --button-min-height-width: 2.5rem;
+  --button-padding-x: calc(
+    var(--spacing-8) - var(--border-solid-border-width)
+  );
+  --button-padding-y: calc(
+    var(--spacing-8) - var(--border-solid-border-width)
+  );
+  --button-icon-size: var(--spacing-16);
+  gap: var(--spacing-8);
+}
+.Focusable-module_focusableWrapper__NfuIi {
+  display: inline-flex;
+}
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -5349,7 +5349,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: grid;
   max-height: 22rem;
 }
-.ListBox-module_listBox__Uf6Mc.ListBox-module_focus__yrwu3 {
+
+.ListBox-module_listBox__Uf6Mc:focus-visible {
   outline: none;
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -7777,6 +7778,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   border-radius: var(--border-solid-border-radius, 7px);
   background: var(--color-white, #ffffff);
   overflow: auto;
+  z-index: 100000;
 }
 .Popover-module_popover__B7k5I:focus {
   outline: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.61.2",
+  "version": "1.61.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -120,7 +120,7 @@
     "svgo": "^3.3.2",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
-    "@kaizen/design-tokens": "10.6.0",
+    "@kaizen/design-tokens": "10.6.1",
     "@kaizen/package-bundler": "1.1.4"
   },
   "peerDependencies": {

package/src/Collapsible/Collapsible/_docs/Collapsible.mdx

@@ -30,8 +30,6 @@ Collapsibles are used to collapse and expand content inline on a page. This lets
 
 <DocsStory of={CollapsibleStories.CustomHeader} />
 
-<DocsStory of={CollapsibleStories.Sticky} sourceState="shown" />
-
 ### Controlled
 
 Control the open state using a `useState` (or similar) by setting the `controlled` prop to `true`

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -107,9 +107,7 @@ describe("<FilterSelect>", () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
         await waitFor(() => {
-          expect(
-            screen.queryByRole("option", { name: "Regular" })
-          ).toHaveFocus()
+          expect(screen.queryByRole("listbox")).toHaveFocus()
         })
       })
 

package/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -10,6 +10,7 @@
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+  z-index: 100000;
 
   &:focus {
     outline: none;

package/src/__future__/Select/Select.spec.tsx

@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 

package/src/__future__/Select/Select.tsx

@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

package/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

package/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )