@kaizen/components 0.0.0-canary-test-fms-popover-api-update-20250624021814 → 0.0.0-canary-fix-tab-20250626012516

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/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/styles.css

@@ -3743,29 +3743,26 @@
   }
 }
 
+/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ListBox-module_listBox__HBScm {
+  .ListBox-module_listBox__q95MO {
     list-style: none;
-    padding: var(--spacing-12);
-    margin: 0 var(--spacing-12) 0 0;
+    padding: var(--spacing-sm, 0.75rem);
+    margin: 0 var(--spacing-sm, 0.75rem) 0 0;
     display: grid;
     max-height: 22rem;
     overflow-y: auto;
   }
-
-  .ListBox-module_overflown__PdKED {
-    padding-right: var(--spacing-12);
+  .ListBox-module_overflown__wChQA {
+    padding-right: var(--spacing-sm, 0.75rem);
   }
-
-  .ListBox-module_hidden__mO-oL {
+  .ListBox-module_hidden__eYdXv {
     display: none;
   }
-
-  .ListBox-module_noResultsWrapper__RnMj0 {
+  .ListBox-module_noResultsWrapper__WcLRm {
     list-style: none;
   }
 }
-
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3810,29 +3807,25 @@
     margin-right: var(--spacing-sm, 0.75rem);
   }
 }
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .MenuPopup-module_menuPopup__QgGEa {
-    /* from $ca-z-index-dropdown */
+  .MenuPopup-module_menuPopup__UVgnP {
+    position: absolute;
     z-index: 1000;
     box-sizing: border-box;
-    background: var(--color-white);
-    color: var(--color-purple-800);
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--shadow-large-box-shadow);
-    padding: var(--spacing-6) 0;
-    margin-top: var(--spacing-6);
+    background: var(--color-white, #ffffff);
+    color: var(--color-purple-800, #2f2438);
+    border-radius: var(--border-solid-border-radius, 7px);
+    box-shadow: var(--shadow-large-box-shadow, 0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 8px 40px 0 rgba(0, 0, 0, 0.08));
+    padding: var(--spacing-sm, 0.75rem) 0;
+    margin-top: var(--spacing-xs, 0.375rem);
     text-align: start;
-    width: var(--menu-container-width, 294px);
-    max-height: var(--menu-container-height, 500px);
-  }
-
-  .MenuPopup-module_menuPopup__QgGEa[popover]:popover-open {
-    z-index: unset;
-    margin: 0;
-    inset: unset;
+    width: 294px;
   }
 }
-
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -5069,7 +5062,7 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -19,7 +19,7 @@ export type FilterMultiSelectProps = {
     className?: string;
 } & Omit<MenuPopupProps, 'children'> & Omit<MenuTriggerProviderProps, 'children'> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, floatingOptions, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/dist/types/Filter/FilterMultiSelect/_docs/MockData.d.ts

@@ -8,4 +8,3 @@ export declare const locationDemographicValues: {
     demographicValueId: string;
     label: string;
 }[];
-export declare const mockManyItems: ItemType[];

package/dist/types/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.d.ts

@@ -1,13 +1,10 @@
-import React, { type HTMLAttributes } from 'react';
-import { type UseFloatingOptions } from '@floating-ui/react-dom';
-import { type OverrideClassName } from "../../../../types/OverrideClassName";
+import React from 'react';
 export type MenuPopupProps = {
-    children: React.ReactNode;
-    floatingOptions?: Partial<UseFloatingOptions>;
     isLoading?: boolean;
     loadingSkeleton?: React.ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+    children: React.ReactNode;
+};
 export declare const MenuPopup: {
-    ({ children, floatingOptions, classNameOverride, isLoading, loadingSkeleton, ...restProps }: MenuPopupProps): JSX.Element;
+    ({ isLoading, loadingSkeleton, children, }: MenuPopupProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-test-fms-popover-api-update-20250624021814",
+  "version": "0.0.0-canary-fix-tab-20250626012516",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.spec.tsx

@@ -180,7 +180,6 @@ describe('<FilterBarMultiSelect />', () => {
     })
 
     await user.click(getByRole('option', { name: 'Fruit Jelly' }))
-    await user.keyboard('{Escape}')
     await waitFor(() => {
       expect(getByRole('button', { name: 'Toppings : Pearls, Fruit Jelly' })).toBeInTheDocument()
     })

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -58,10 +58,9 @@ export const FilterMultiSelect = ({
   onSearchInputChange,
   triggerRef,
   className,
-  floatingOptions,
 }: FilterMultiSelectProps): JSX.Element => {
   const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
-  const menuPopupProps = { isLoading, loadingSkeleton, floatingOptions }
+  const menuPopupProps = { isLoading, loadingSkeleton }
   const disabledKeys: Selection = new Set(
     items?.filter((item) => item.isDisabled === true).map((disabledItem) => disabledItem.value),
   )
@@ -80,7 +79,7 @@ export const FilterMultiSelect = ({
     <MenuTriggerProvider {...menuTriggerProps}>
       <div className={className}>
         <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
-        <MenuPopup aria-label={label} {...menuPopupProps}>
+        <MenuPopup {...menuPopupProps}>
           <SelectionProvider {...selectionProps}>
             <SelectionConsumer>{children}</SelectionConsumer>
           </SelectionProvider>

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -30,14 +30,6 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 
 <Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
 
-### With floatingOptions
-
-You can also use the `floatingOptions` to leverage any of `Floating UI's` [configurable options](https://floating-ui.com/docs/usefloating). While in most cases the default behavior should satisfy most scenarios, the `middleware` for `autoplace` and `size` can be useful when there is limited screen space available.
-
-The following example showcases how to use the [autoPlacement](https://floating-ui.com/docs/autoPlacement) and [size](https://floating-ui.com/docs/size) and spread the options in with the default values.
-
-<Canvas of={FilterMultiSelectStories.WithFloatingOptions} />
-
 ### Async
 
 The following is an example of how you may create an async FilterMultiSelect using `@tanstack/react-query`.

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
-import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import type { Selection } from '@react-types/shared'
 import type { Meta, StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { InlineNotification } from '~components/Notification'
 import { TextField } from '~components/TextField'
 import { FilterMultiSelect, getSelectedOptionLabels } from '..'
-import { mockItems, mockManyItems } from './MockData'
+import { mockItems } from './MockData'
 
 const IS_CHROMATIC = isChromatic()
 
@@ -309,90 +308,3 @@ export const WithSectionNotification: Story = {
     chromatic: { disable: false },
   },
 }
-
-export const WithManyOptions: Story = {
-  ...FilterMultiSelectTemplate,
-  name: 'With many options',
-  args: {
-    items: mockManyItems,
-  },
-}
-
-const floatingOptionsSourceCode = `
-import { autoPlacement, size, offset } from '@floating-ui/react-dom'
-
-// ...source code
-
-<FilterMultiSelect
-  {...args}
-  floatingOptions={{
-    ...{
-      middleware: [
-        size({
-          apply({ availableHeight, elements }) {
-            Object.assign(elements.floating.style, {
-              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + "px",
-            })
-          },
-        }),
-        autoPlacement({
-          allowedPlacements: ['bottom-start', 'top-start'],
-        }),
-        offset(6),
-      ],
-    },
-  }}
-/>
-`
-
-export const WithFloatingOptions: Story = {
-  ...FilterMultiSelectTemplate,
-  name: 'With floatingOptions',
-  args: {
-    floatingOptions: {
-      middleware: [
-        size({
-          apply({ availableHeight, elements }) {
-            Object.assign(elements.floating.style, {
-              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px',
-            })
-          },
-        }),
-        autoPlacement({
-          allowedPlacements: ['bottom-start', 'top-start'],
-        }),
-        offset(6),
-      ],
-    },
-  },
-  parameters: {
-    docs: { source: { code: floatingOptionsSourceCode } },
-  },
-}
-
-export const AboveIfAvailable: Story = {
-  ...FilterMultiSelectTemplate,
-  ...WithFloatingOptions,
-  name: 'With limited viewport and autoplacement above',
-  parameters: {
-    viewport: {
-      viewports: {
-        LimitedViewportAutoPlace: {
-          name: 'Limited vertical space',
-          styles: {
-            width: '1024px',
-            height: '500px',
-          },
-        },
-      },
-      defaultViewport: 'LimitedViewportAutoPlace',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="mt-[350px]">
-        <Story />
-      </div>
-    ),
-  ],
-}

package/src/Filter/FilterMultiSelect/_docs/MockData.ts

@@ -58,42 +58,3 @@ export const locationDemographicValues = [
     label: 'London',
   },
 ]
-
-export const mockManyItems: ItemType[] = [
-  { label: 'Front-End', value: 'id-fe', count: '1245' },
-  { label: 'Back-End', value: 'id-be', count: '4', isDisabled: true },
-  { label: 'SRE', value: 'id-sre', count: '4', isDisabled: true },
-  { label: 'Dev-ops', value: 'id-devops' },
-  { label: 'Others', value: 'id-others' },
-  {
-    label: 'Engineer-type-1 has a really really long label',
-    value: 'id-type-1',
-  },
-  {
-    label: 'Engineer-type-2 also has a really really long label',
-    value: 'id-type-2',
-    count: '156',
-  },
-  { label: 'Engineer-type-3', value: 'id-type-3' },
-  {
-    label: 'Engineer-type-4',
-    value: 'id-type-4',
-    count: '4',
-    isDisabled: true,
-  },
-  { label: 'Engineer-type-5', value: 'id-type-5' },
-  { label: 'UI Designer', value: 'id-ui', count: '42' },
-  { label: 'UX Researcher', value: 'id-ux', count: '15' },
-  { label: 'Product Manager', value: 'id-pm', count: '28' },
-  { label: 'Project Manager', value: 'id-project', count: '19', isDisabled: true },
-  { label: 'Data Scientist', value: 'id-ds', count: '11' },
-  { label: 'Machine Learning Engineer', value: 'id-ml', count: '7' },
-  { label: 'QA Tester', value: 'id-qa', count: '22' },
-  {
-    label: 'Technical Writer with documentation expertise',
-    value: 'id-tech-writer',
-    count: '5',
-  },
-  { label: 'DevSecOps Engineer', value: 'id-devsecops', count: '3', isDisabled: true },
-  { label: 'Cloud Architect', value: 'id-cloud', count: '8' },
-]

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
 import { FilterTriggerButton } from '~components/Filter/FilterMultiSelect/subcomponents/Trigger'
 import { MenuPopup } from '../../subcomponents/MenuPopup'
 import { MenuTriggerProvider, type MenuTriggerProviderProps } from './MenuTriggerProvider'
@@ -52,11 +53,15 @@ describe('<MenuTriggerProvider /> - Visual content', () => {
       rerender(<MenuTriggerProviderWrapper isOpen={false} />)
       expect(screen.queryByText('menu-content-mock')).not.toBeInTheDocument()
     })
-    it('fires the onOpenChange callback on user interaction to close the menu', async () => {
+
+    it('fires the onOpenChange callback when the trigger is interacted', async () => {
       const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
-      await user.keyboard('{Escape}')
+      const trigger = screen.getByRole('button', {
+        name: 'trigger-display-label-mock',
+      })
+      await user.click(trigger)
 
       await waitFor(() => {
         expect(onOpenChange).toBeCalledTimes(1)
@@ -81,6 +86,17 @@ describe('<MenuTriggerProvider /> - Mouse interaction', () => {
   })
 
   describe('Given the menu is opened', () => {
+    it('is closed when user clicks on the trigger', async () => {
+      render(<MenuTriggerProviderWrapper defaultOpen />)
+      const trigger = screen.getByRole('button', {
+        name: 'trigger-display-label-mock',
+      })
+      await user.click(trigger)
+      await waitFor(() => {
+        expect(screen.queryByText('menu-content-mock')).not.toBeInTheDocument()
+      })
+    })
+
     it('is closed when user clicks outside of the menu', async () => {
       render(<MenuTriggerProviderWrapper defaultOpen />)
       await user.click(document.body)

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

@@ -0,0 +1,25 @@
+@import '~@kaizen/design-tokens/sass/spacing';
+
+@layer kz-components {
+  .listBox {
+    list-style: none;
+    padding: $spacing-sm;
+    margin: 0 $spacing-sm 0 0;
+    display: grid;
+    max-height: 22rem;
+    overflow-y: auto;
+  }
+
+  .overflown {
+    padding-right: $spacing-sm;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  // this is a div but remove styles briefly flickering to a bullet list as the sections are removed
+  .noResultsWrapper {
+    list-style: none;
+  }
+}

package/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.tsx

@@ -3,7 +3,7 @@ import { type Collection, type Key } from '@react-types/shared'
 import classnames from 'classnames'
 import { useSelectionContext } from '../../context/SelectionProvider'
 import { type MultiSelectItem } from '../../types'
-import styles from './ListBox.module.css'
+import styles from './ListBox.module.scss'
 
 export type ListBoxItems = {
   selectedItems: MultiSelectItem[]

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss

@@ -0,0 +1,24 @@
+@import '~@kaizen/design-tokens/sass/spacing';
+@import '~@kaizen/design-tokens/sass/shadow';
+@import '~@kaizen/design-tokens/sass/border';
+@import '~@kaizen/design-tokens/sass/color';
+
+@layer kz-components {
+  // figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
+  $menu-container-width: 294px;
+  $menu-container-max-height: 312px;
+
+  .menuPopup {
+    position: absolute;
+    z-index: 1000; // from $ca-z-index-dropdown
+    box-sizing: border-box;
+    background: $color-white;
+    color: $color-purple-800;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    padding: $spacing-sm 0;
+    margin-top: $spacing-xs;
+    text-align: start;
+    width: $menu-container-width;
+  }
+}

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx

@@ -1,78 +1,58 @@
-import React, { useEffect, useState, type HTMLAttributes } from 'react'
-import { autoUpdate, offset, useFloating, type UseFloatingOptions } from '@floating-ui/react-dom'
-import classnames from 'classnames'
-import { FocusOn } from 'react-focus-on'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
+import React from 'react'
+import { FocusScope } from '@react-aria/focus'
+import { DismissButton, useOverlay } from '@react-aria/overlays'
 import { useMenuTriggerContext } from '../../context'
-import styles from './MenuPopup.module.css'
+import styles from './MenuPopup.module.scss'
 
 export type MenuPopupProps = {
-  children: React.ReactNode
-  floatingOptions?: Partial<UseFloatingOptions>
   isLoading?: boolean
   loadingSkeleton?: React.ReactNode
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+  children: React.ReactNode
+}
 
 export const MenuPopup = ({
-  children,
-  floatingOptions,
-  classNameOverride,
   isLoading,
   loadingSkeleton,
-  ...restProps
+  children,
 }: MenuPopupProps): JSX.Element => {
-  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
-  const { menuTriggerState, buttonRef } = useMenuTriggerContext()
-
-  const referenceElement = buttonRef.current
-
-  const { floatingStyles, update } = useFloating({
-    placement: 'bottom-start',
-    elements: {
-      reference: referenceElement,
-      floating: floatingElement,
+  const { menuTriggerState } = useMenuTriggerContext()
+
+  const onClose = (): void => menuTriggerState.close()
+
+  // Handle events that should cause the menu to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  const overlayRef = React.createRef<HTMLDivElement>()
+  const { overlayProps } = useOverlay(
+    {
+      onClose,
+      isOpen: menuTriggerState.isOpen,
+      isDismissable: true,
     },
-    strategy: 'absolute',
-    middleware: [offset(6)],
-    whileElementsMounted: autoUpdate,
-    ...floatingOptions,
-  })
-
-  const handleReturnFocus = (): void => {
-    requestAnimationFrame(() => {
-      buttonRef.current?.focus()
-    })
-  }
-
-  useEffect(() => {
-    if (floatingElement && referenceElement) {
-      floatingElement.showPopover?.()
-      update()
-    }
-  }, [floatingElement, referenceElement, update])
+    overlayRef,
+  )
 
+  // 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 ? (
-    <FocusOn
-      enabled={menuTriggerState.isOpen}
-      scrollLock={false}
-      returnFocus={false}
-      onClickOutside={menuTriggerState.close}
-      onEscapeKey={menuTriggerState.close}
-      onDeactivation={handleReturnFocus}
-    >
-      <div
-        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}
-      </div>
-    </FocusOn>
+    <div {...overlayProps} ref={overlayRef} className={styles.menuPopup}>
+      {isLoading && loadingSkeleton ? (
+        <>
+          <DismissButton onDismiss={onClose} />
+          {loadingSkeleton}
+          <DismissButton onDismiss={onClose} />
+        </>
+      ) : (
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        <FocusScope contain autoFocus restoreFocus>
+          <DismissButton onDismiss={onClose} />
+
+          {children}
+          <DismissButton onDismiss={onClose} />
+        </FocusScope>
+      )}
+    </div>
   ) : (
     <></>
   )

package/src/__next__/Tabs/subcomponents/TabList/TabList.module.css

@@ -26,7 +26,7 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;

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

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "listBox": "ListBox-module_listBox__HBScm",
-  "overflown": "ListBox-module_overflown__PdKED",
-  "hidden": "ListBox-module_hidden__mO-oL",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
-};
-module.exports = styles;

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

@@ -1,7 +0,0 @@
-var styles = {
-  "listBox": "ListBox-module_listBox__HBScm",
-  "overflown": "ListBox-module_overflown__PdKED",
-  "hidden": "ListBox-module_hidden__mO-oL",
-  "noResultsWrapper": "ListBox-module_noResultsWrapper__RnMj0"
-};
-export { styles as default };

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

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

package/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.css

@@ -1,22 +0,0 @@
-@layer kz-components {
-  .listBox {
-    list-style: none;
-    padding: var(--spacing-12);
-    margin: 0 var(--spacing-12) 0 0;
-    display: grid;
-    max-height: 22rem;
-    overflow-y: auto;
-  }
-
-  .overflown {
-    padding-right: var(--spacing-12);
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .noResultsWrapper {
-    list-style: none;
-  }
-}

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.css

@@ -1,22 +0,0 @@
-@layer kz-components {
-  .menuPopup {
-    /* from $ca-z-index-dropdown */
-    z-index: 1000;
-    box-sizing: border-box;
-    background: var(--color-white);
-    color: var(--color-purple-800);
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--shadow-large-box-shadow);
-    padding: var(--spacing-6) 0;
-    margin-top: var(--spacing-6);
-    text-align: start;
-    width: var(--menu-container-width, 294px);
-    max-height: var(--menu-container-height, 500px);
-  }
-
-  .menuPopup[popover]:popover-open {
-    z-index: unset;
-    margin: 0;
-    inset: unset;
-  }
-}