@kaizen/components 0.0.0-canary-test-fms-popover-api-update-20250624021814 → 0.0.0-canary-test-cherry-picked-updates-20250702235156

package/dist/cjs/src/Filter/FilterMultiSelect/FilterMultiSelect.cjs

@@ -41,8 +41,7 @@ var FilterMultiSelect = function (_a) {
     selectionMode = _b === void 0 ? 'multiple' : _b,
     onSearchInputChange = _a.onSearchInputChange,
     triggerRef = _a.triggerRef,
-    className = _a.className,
-    floatingOptions = _a.floatingOptions;
+    className = _a.className;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
@@ -51,8 +50,7 @@ var FilterMultiSelect = function (_a) {
   };
   var menuPopupProps = {
     isLoading: isLoading,
-    loadingSkeleton: loadingSkeleton,
-    floatingOptions: floatingOptions
+    loadingSkeleton: loadingSkeleton
   };
   var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
     return item.isDisabled === true;
@@ -71,9 +69,7 @@ var FilterMultiSelect = function (_a) {
   };
   return React__default.default.createElement(MenuTriggerProvider.MenuTriggerProvider, tslib.__assign({}, menuTriggerProps), React__default.default.createElement("div", {
     className: className
-  }, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuPopup.MenuPopup, tslib.__assign({
-    "aria-label": label
-  }, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
+  }, React__default.default.createElement(MenuTriggerProvider.MenuTriggerConsumer, null, trigger), React__default.default.createElement(MenuPopup.MenuPopup, tslib.__assign({}, menuPopupProps), React__default.default.createElement(SelectionProvider.SelectionProvider, tslib.__assign({}, selectionProps), React__default.default.createElement(SelectionProvider.SelectionConsumer, null, children)))));
 };
 FilterMultiSelect.displayName = 'FilterMultiSelect';
 FilterMultiSelect.TriggerButton = FilterTriggerButton.FilterTriggerButton;

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var SelectionProvider = require('../../context/SelectionProvider/SelectionProvider.cjs');
-var ListBox_module = require('./ListBox.module.css.cjs');
+var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "listBox": "ListBox-module_listBox__q95MO",
+  "overflown": "ListBox-module_overflown__wChQA",
+  "hidden": "ListBox-module_hidden__eYdXv",
+  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
+};
+module.exports = styles;

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.cjs

@@ -2,74 +2,55 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var reactDom = require('@floating-ui/react-dom');
-var classnames = require('classnames');
-var reactFocusOn = require('react-focus-on');
+var focus = require('@react-aria/focus');
+var overlays = require('@react-aria/overlays');
 var MenuTriggerProvider = require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 require('../../context/SelectionProvider/SelectionProvider.cjs');
-var MenuPopup_module = require('./MenuPopup.module.css.cjs');
+var MenuPopup_module = require('./MenuPopup.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var MenuPopup = function (_a) {
-  var children = _a.children,
-    floatingOptions = _a.floatingOptions,
-    classNameOverride = _a.classNameOverride,
-    isLoading = _a.isLoading,
+  var isLoading = _a.isLoading,
     loadingSkeleton = _a.loadingSkeleton,
-    restProps = tslib.__rest(_a, ["children", "floatingOptions", "classNameOverride", "isLoading", "loadingSkeleton"]);
-  var _b = React.useState(null),
-    floatingElement = _b[0],
-    setFloatingElement = _b[1];
-  var _c = MenuTriggerProvider.useMenuTriggerContext(),
-    menuTriggerState = _c.menuTriggerState,
-    buttonRef = _c.buttonRef;
-  var referenceElement = buttonRef.current;
-  var _d = reactDom.useFloating(tslib.__assign({
-      placement: 'bottom-start',
-      elements: {
-        reference: referenceElement,
-        floating: floatingElement
-      },
-      strategy: 'absolute',
-      middleware: [reactDom.offset(6)],
-      whileElementsMounted: reactDom.autoUpdate
-    }, floatingOptions)),
-    floatingStyles = _d.floatingStyles,
-    update = _d.update;
-  var handleReturnFocus = function () {
-    requestAnimationFrame(function () {
-      var _a;
-      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    });
+    children = _a.children;
+  var menuTriggerState = MenuTriggerProvider.useMenuTriggerContext().menuTriggerState;
+  var onClose = function () {
+    return menuTriggerState.close();
   };
-  React.useEffect(function () {
-    var _a;
-    if (floatingElement && referenceElement) {
-      (_a = floatingElement.showPopover) === null || _a === void 0 ? void 0 : _a.call(floatingElement);
-      update();
-    }
-  }, [floatingElement, referenceElement, update]);
-  return menuTriggerState.isOpen ? React__default.default.createElement(reactFocusOn.FocusOn, {
-    enabled: menuTriggerState.isOpen,
-    scrollLock: false,
-    returnFocus: false,
-    onClickOutside: menuTriggerState.close,
-    onEscapeKey: menuTriggerState.close,
-    onDeactivation: handleReturnFocus
-  }, React__default.default.createElement("div", tslib.__assign({
-    ref: setFloatingElement,
-    style: floatingStyles,
-    className: classnames__default.default(MenuPopup_module.menuPopup, classNameOverride),
-    role: "dialog",
-    "aria-modal": "true",
-    // @ts-expect-error: popover is valid in supported browsers
-    popover: "manual"
-  }, restProps), isLoading && loadingSkeleton ? loadingSkeleton : children)) : React__default.default.createElement(React__default.default.Fragment, null);
+  // Handle events that should cause the menu to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  var overlayRef = React__default.default.createRef();
+  var overlayProps = overlays.useOverlay({
+    onClose: onClose,
+    isOpen: menuTriggerState.isOpen,
+    isDismissable: true
+  }, overlayRef).overlayProps;
+  // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
+  // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
+  // In addition, add hidden <DismissButton> components at the start and end of the list
+  // to allow screen reader users to dismiss the popup easily.
+  return menuTriggerState.isOpen ? React__default.default.createElement("div", tslib.__assign({}, overlayProps, {
+    ref: overlayRef,
+    className: MenuPopup_module.menuPopup
+  }), isLoading && loadingSkeleton ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(overlays.DismissButton, {
+    onDismiss: onClose
+  }), loadingSkeleton, React__default.default.createElement(overlays.DismissButton, {
+    onDismiss: onClose
+  })) :
+  // eslint-disable-next-line jsx-a11y/no-autofocus
+  React__default.default.createElement(focus.FocusScope, {
+    contain: true,
+    autoFocus: true,
+    restoreFocus: true
+  }, React__default.default.createElement(overlays.DismissButton, {
+    onDismiss: onClose
+  }), children, React__default.default.createElement(overlays.DismissButton, {
+    onDismiss: onClose
+  }))) : React__default.default.createElement(React__default.default.Fragment, null);
 };
 MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
 exports.MenuPopup = MenuPopup;

package/dist/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/{MenuPopup.module.css.cjs → MenuPopup.module.scss.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "menuPopup": "MenuPopup-module_menuPopup__QgGEa"
+  "menuPopup": "MenuPopup-module_menuPopup__UVgnP"
 };
 module.exports = styles;

package/dist/cjs/src/__next__/Select/Select.cjs

@@ -54,9 +54,9 @@ var Select = function (_a) {
     _d = _a.placeholder,
     placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
-    onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+    onSelectionChange = _a.onSelectionChange,
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -136,8 +136,7 @@ var Select = function (_a) {
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
-    menuProps: menuProps,
-    popoverRef: refs.floating
+    menuProps: menuProps
   }, children)))), validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, {
     id: validationId,
     message: validationMessage,

package/dist/cjs/src/__next__/Select/subcomponents/Overlay/Overlay.cjs

@@ -14,8 +14,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Overlay = function (_a) {
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
-    popoverRef = _a.popoverRef,
-    restProps = tslib.__rest(_a, ["children", "classNameOverride", "popoverRef"]);
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
   var state = SelectContext.useSelectContext().state;
   // Handle events that should cause the menu to close,
   // e.g. blur, clicking outside, or pressing the escape key.
@@ -24,12 +23,13 @@ var Overlay = function (_a) {
     isDismissable: true,
     isOpen: state.isOpen,
     onClose: state.close
-  }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
+  }, overlayRef).overlayProps;
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
   // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return React__default.default.createElement("div", tslib.__assign({
+    ref: overlayRef,
     className: classNameOverride
   }, overlayProps, restProps), React__default.default.createElement(focus.FocusScope, {
     autoFocus: false,

package/dist/cjs/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.cjs

@@ -14,8 +14,7 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var SelectPopoverContents = function (_a) {
   var children = _a.children,
-    menuProps = _a.menuProps,
-    popoverRef = _a.popoverRef;
+    menuProps = _a.menuProps;
   var state = SelectContext.useSelectContext().state;
   // The collection structure is set by useSelectState's `children`
   // which we have used a util to ensure the following structure
@@ -24,9 +23,7 @@ var SelectPopoverContents = function (_a) {
   var itemNodes = Array.from(state.collection);
   return React__default.default.createElement("div", {
     className: SelectPopoverContents_module.selectPopoverContents
-  }, React__default.default.createElement(Overlay.Overlay, {
-    popoverRef: popoverRef
-  }, React__default.default.createElement(ListBox.ListBox, {
+  }, React__default.default.createElement(Overlay.Overlay, null, React__default.default.createElement(ListBox.ListBox, {
     menuProps: menuProps
   }, children ? children({
     items: itemNodes

package/dist/cjs/src/__next__/Tabs/subcomponents/TabList/TabList.cjs

@@ -70,7 +70,7 @@ var TabList = function (props) {
       }
       setLeftArrowEnabled(false);
     }, {
-      threshold: 0.8,
+      threshold: 0.75,
       root: containerElement
     });
     firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
@@ -81,7 +81,7 @@ var TabList = function (props) {
       }
       setRightArrowEnabled(false);
     }, {
-      threshold: 0.8,
+      threshold: 0.75,
       root: containerElement
     });
     lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
@@ -89,7 +89,7 @@ var TabList = function (props) {
       firstTabObserver.disconnect();
       lastTabObserver.disconnect();
     };
-  }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
+  }, [isDocumentReady, containerElement, isRTL$1]);
   React.useEffect(function () {
     var _a;
     if (!isDocumentReady) {

package/dist/esm/src/Filter/FilterMultiSelect/FilterMultiSelect.mjs

@@ -34,8 +34,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       selectionMode = _b === void 0 ? 'multiple' : _b,
       onSearchInputChange = _a.onSearchInputChange,
       triggerRef = _a.triggerRef,
-      className = _a.className,
-      floatingOptions = _a.floatingOptions;
+      className = _a.className;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
@@ -44,8 +43,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
     };
     var menuPopupProps = {
       isLoading: isLoading,
-      loadingSkeleton: loadingSkeleton,
-      floatingOptions: floatingOptions
+      loadingSkeleton: loadingSkeleton
     };
     var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
       return item.isDisabled === true;
@@ -64,9 +62,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
     };
     return /*#__PURE__*/React.createElement(MenuTriggerProvider, __assign({}, menuTriggerProps), /*#__PURE__*/React.createElement("div", {
       className: className
-    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuPopup, __assign({
-      "aria-label": label
-    }, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
+    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuPopup, __assign({}, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
   };
   FilterMultiSelect.displayName = 'FilterMultiSelect';
   FilterMultiSelect.TriggerButton = FilterTriggerButton;

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.mjs

@@ -2,7 +2,7 @@ import { __assign, __spreadArray } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { useSelectionContext } from '../../context/SelectionProvider/SelectionProvider.mjs';
-import styles from './ListBox.module.css.mjs';
+import styles from './ListBox.module.scss.mjs';
 var getItemsFromKeys = function (items, keys) {
   var itemKeys = Array.from(keys);
   return itemKeys.reduce(function (acc, itemKey) {

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "listBox": "ListBox-module_listBox__q95MO",
+  "overflown": "ListBox-module_overflown__wChQA",
+  "hidden": "ListBox-module_hidden__eYdXv",
+  "noResultsWrapper": "ListBox-module_noResultsWrapper__WcLRm"
+};
+export { styles as default };

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs

@@ -1,67 +1,50 @@
-import { __rest, __assign } from 'tslib';
-import React, { useState, useEffect } from 'react';
-import { useFloating, autoUpdate, offset } from '@floating-ui/react-dom';
-import classnames from 'classnames';
-import { FocusOn } from 'react-focus-on';
+import { __assign } from 'tslib';
+import React from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { useOverlay, DismissButton } from '@react-aria/overlays';
 import { useMenuTriggerContext } from '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../context/SelectionProvider/SelectionProvider.mjs';
-import styles from './MenuPopup.module.css.mjs';
+import styles from './MenuPopup.module.scss.mjs';
 const MenuPopup = /*#__PURE__*/function () {
   const MenuPopup = function (_a) {
-    var children = _a.children,
-      floatingOptions = _a.floatingOptions,
-      classNameOverride = _a.classNameOverride,
-      isLoading = _a.isLoading,
+    var isLoading = _a.isLoading,
       loadingSkeleton = _a.loadingSkeleton,
-      restProps = __rest(_a, ["children", "floatingOptions", "classNameOverride", "isLoading", "loadingSkeleton"]);
-    var _b = useState(null),
-      floatingElement = _b[0],
-      setFloatingElement = _b[1];
-    var _c = useMenuTriggerContext(),
-      menuTriggerState = _c.menuTriggerState,
-      buttonRef = _c.buttonRef;
-    var referenceElement = buttonRef.current;
-    var _d = useFloating(__assign({
-        placement: 'bottom-start',
-        elements: {
-          reference: referenceElement,
-          floating: floatingElement
-        },
-        strategy: 'absolute',
-        middleware: [offset(6)],
-        whileElementsMounted: autoUpdate
-      }, floatingOptions)),
-      floatingStyles = _d.floatingStyles,
-      update = _d.update;
-    var handleReturnFocus = function () {
-      requestAnimationFrame(function () {
-        var _a;
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      });
+      children = _a.children;
+    var menuTriggerState = useMenuTriggerContext().menuTriggerState;
+    var onClose = function () {
+      return menuTriggerState.close();
     };
-    useEffect(function () {
-      var _a;
-      if (floatingElement && referenceElement) {
-        (_a = floatingElement.showPopover) === null || _a === void 0 ? void 0 : _a.call(floatingElement);
-        update();
-      }
-    }, [floatingElement, referenceElement, update]);
-    return menuTriggerState.isOpen ? (/*#__PURE__*/React.createElement(FocusOn, {
-      enabled: menuTriggerState.isOpen,
-      scrollLock: false,
-      returnFocus: false,
-      onClickOutside: menuTriggerState.close,
-      onEscapeKey: menuTriggerState.close,
-      onDeactivation: handleReturnFocus
-    }, /*#__PURE__*/React.createElement("div", __assign({
-      ref: setFloatingElement,
-      style: floatingStyles,
-      className: classnames(styles.menuPopup, classNameOverride),
-      role: "dialog",
-      "aria-modal": "true",
-      // @ts-expect-error: popover is valid in supported browsers
-      popover: "manual"
-    }, restProps), isLoading && loadingSkeleton ? loadingSkeleton : children))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
+    // Handle events that should cause the menu to close,
+    // e.g. blur, clicking outside, or pressing the escape key.
+    var overlayRef = /*#__PURE__*/React.createRef();
+    var overlayProps = useOverlay({
+      onClose: onClose,
+      isOpen: menuTriggerState.isOpen,
+      isDismissable: true
+    }, overlayRef).overlayProps;
+    // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
+    // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
+    // In addition, add hidden <DismissButton> components at the start and end of the list
+    // to allow screen reader users to dismiss the popup easily.
+    return menuTriggerState.isOpen ? (/*#__PURE__*/React.createElement("div", __assign({}, overlayProps, {
+      ref: overlayRef,
+      className: styles.menuPopup
+    }), isLoading && loadingSkeleton ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: onClose
+    }), loadingSkeleton, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: onClose
+    }))) : (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    React.createElement(FocusScope, {
+      contain: true,
+      autoFocus: true,
+      restoreFocus: true
+    }, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: onClose
+    }), children, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: onClose
+    }))))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
   };
   MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
   return MenuPopup;

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "menuPopup": "MenuPopup-module_menuPopup__UVgnP"
+};
+export { styles as default };

package/dist/esm/src/__next__/Select/Select.mjs

@@ -46,9 +46,9 @@ const Select = /*#__PURE__*/function () {
       _d = _a.placeholder,
       placeholder = _d === void 0 ? '' : _d,
       isDisabled = _a.isDisabled,
-      onSelectionChange = _a.onSelectionChange,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
+      onSelectionChange = _a.onSelectionChange,
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -128,8 +128,7 @@ const Select = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement(SelectProvider, {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
-      menuProps: menuProps,
-      popoverRef: refs.floating
+      menuProps: menuProps
     }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
       id: validationId,
       message: validationMessage,

package/dist/esm/src/__next__/Select/subcomponents/Overlay/Overlay.mjs

@@ -7,8 +7,7 @@ const Overlay = /*#__PURE__*/function () {
   const Overlay = function (_a) {
     var children = _a.children,
       classNameOverride = _a.classNameOverride,
-      popoverRef = _a.popoverRef,
-      restProps = __rest(_a, ["children", "classNameOverride", "popoverRef"]);
+      restProps = __rest(_a, ["children", "classNameOverride"]);
     var state = useSelectContext().state;
     // Handle events that should cause the menu to close,
     // e.g. blur, clicking outside, or pressing the escape key.
@@ -17,12 +16,13 @@ const Overlay = /*#__PURE__*/function () {
       isDismissable: true,
       isOpen: state.isOpen,
       onClose: state.close
-    }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
+    }, overlayRef).overlayProps;
     // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
     // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
     // In addition, add hidden <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
     return /*#__PURE__*/React.createElement("div", __assign({
+      ref: overlayRef,
       className: classNameOverride
     }, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
       autoFocus: false,

package/dist/esm/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs

@@ -7,8 +7,7 @@ import styles from './SelectPopoverContents.module.scss.mjs';
 const SelectPopoverContents = /*#__PURE__*/function () {
   const SelectPopoverContents = function (_a) {
     var children = _a.children,
-      menuProps = _a.menuProps,
-      popoverRef = _a.popoverRef;
+      menuProps = _a.menuProps;
     var state = useSelectContext().state;
     // The collection structure is set by useSelectState's `children`
     // which we have used a util to ensure the following structure
@@ -17,9 +16,7 @@ const SelectPopoverContents = /*#__PURE__*/function () {
     var itemNodes = Array.from(state.collection);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.selectPopoverContents
-    }, /*#__PURE__*/React.createElement(Overlay, {
-      popoverRef: popoverRef
-    }, /*#__PURE__*/React.createElement(ListBox, {
+    }, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ListBox, {
       menuProps: menuProps
     }, children ? children({
       items: itemNodes

package/dist/esm/src/__next__/Tabs/subcomponents/TabList/TabList.mjs

@@ -61,7 +61,7 @@ var TabList = function (props) {
       }
       setLeftArrowEnabled(false);
     }, {
-      threshold: 0.8,
+      threshold: 0.75,
       root: containerElement
     });
     firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
@@ -72,7 +72,7 @@ var TabList = function (props) {
       }
       setRightArrowEnabled(false);
     }, {
-      threshold: 0.8,
+      threshold: 0.75,
       root: containerElement
     });
     lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
@@ -80,7 +80,7 @@ var TabList = function (props) {
       firstTabObserver.disconnect();
       lastTabObserver.disconnect();
     };
-  }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
+  }, [isDocumentReady, containerElement, isRTL$1]);
   useEffect(function () {
     var _a;
     if (!isDocumentReady) {