@kaizen/components 1.79.10 → 1.80.0

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

@@ -10,6 +10,7 @@ var LoadMoreButton = require('./subcomponents/LoadMoreButton/LoadMoreButton.cjs'
 var MenuFooter = require('./subcomponents/MenuLayout/MenuFooter/MenuFooter.cjs');
 var MenuLoadingSkeleton = require('./subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.cjs');
 var MenuPopup = require('./subcomponents/MenuPopup/MenuPopup.cjs');
+var ResponsiveMenuPopup = require('./subcomponents/MenuPopup/ResponsiveMenuPopup.cjs');
 var MultiSelectOption = require('./subcomponents/MultiSelectOption/MultiSelectOption.cjs');
 var NoResults = require('./subcomponents/NoResults/NoResults.cjs');
 var SearchInput = require('./subcomponents/SearchInput/SearchInput.cjs');
@@ -27,6 +28,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var FilterMultiSelect = function (_a) {
   var trigger = _a.trigger,
     children = _a.children,
+    customMenuPopup = _a.customMenuPopup,
     isOpen = _a.isOpen,
     defaultOpen = _a.defaultOpen,
     onOpenChange = _a.onOpenChange,
@@ -41,17 +43,19 @@ var FilterMultiSelect = function (_a) {
     selectionMode = _b === void 0 ? 'multiple' : _b,
     onSearchInputChange = _a.onSearchInputChange,
     triggerRef = _a.triggerRef,
-    className = _a.className;
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["trigger", "children", "customMenuPopup", "isOpen", "defaultOpen", "onOpenChange", "isLoading", "loadingSkeleton", "label", "items", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "selectionMode", "onSearchInputChange", "triggerRef", "className"]);
+  var MenuComponent = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : MenuPopup.MenuPopup;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
     onOpenChange: onOpenChange,
     triggerRef: triggerRef
   };
-  var menuPopupProps = {
+  var menuPopupProps = tslib.__assign({
     isLoading: isLoading,
     loadingSkeleton: loadingSkeleton
-  };
+  }, restProps);
   var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
     return item.isDisabled === true;
   }).map(function (disabledItem) {
@@ -69,7 +73,9 @@ 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({}, 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(MenuComponent, tslib.__assign({
+    "aria-label": label
+  }, 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;
@@ -85,4 +91,5 @@ FilterMultiSelect.MenuFooter = MenuFooter.MenuFooter; // For layout
 FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton.MenuLoadingSkeleton; // Menu Loading Skeleton example
 FilterMultiSelect.LoadMoreButton = LoadMoreButton.LoadMoreButton;
 FilterMultiSelect.NoResults = NoResults.NoResults;
+FilterMultiSelect.ResponsiveMenuPopup = ResponsiveMenuPopup.ResponsiveMenuPopup;
 exports.FilterMultiSelect = FilterMultiSelect;

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.scss.cjs');
+var ListBox_module = require('./ListBox.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,9 @@
+'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/cjs/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.cjs

@@ -6,7 +6,7 @@ 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.scss.cjs');
+var MenuPopup_module = require('./MenuPopup.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

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

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

@@ -0,0 +1,91 @@
+'use strict';
+
+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 MenuTriggerProvider = require('../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
+require('../../context/SelectionProvider/SelectionProvider.cjs');
+var MenuPopup_module = require('./MenuPopup.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** This is a popup primitive that can be used with the FilterMultiSelect when there are overflow issues with the original implementation. This uses the floating-ui */
+var ResponsiveMenuPopup = function (_a) {
+  var children = _a.children,
+    _b = _a.floatingConfig,
+    floatingConfig = _b === void 0 ? {
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      whileElementsMounted: reactDom.autoUpdate,
+      shouldFlip: true,
+      shouldResize: true
+    } : _b,
+    classNameOverride = _a.classNameOverride,
+    isLoading = _a.isLoading,
+    loadingSkeleton = _a.loadingSkeleton,
+    restProps = tslib.__rest(_a, ["children", "floatingConfig", "classNameOverride", "isLoading", "loadingSkeleton"]);
+  var _c = React.useState(null),
+    floatingElement = _c[0],
+    setFloatingElement = _c[1];
+  var _d = MenuTriggerProvider.useMenuTriggerContext(),
+    menuTriggerState = _d.menuTriggerState,
+    buttonRef = _d.buttonRef;
+  var referenceElement = buttonRef.current;
+  var _e = reactDom.useFloating(tslib.__assign({
+      elements: {
+        reference: referenceElement,
+        floating: floatingElement
+      },
+      middleware: [reactDom.offset(6), floatingConfig.shouldFlip && reactDom.autoPlacement({
+        allowedPlacements: ['bottom-start', 'top-start']
+      }), floatingConfig.shouldResize && reactDom.size({
+        apply: function (_a) {
+          var availableHeight = _a.availableHeight,
+            elements = _a.elements;
+          Object.assign(elements.floating.style, {
+            maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px'
+          });
+        }
+      })]
+    }, floatingConfig)),
+    floatingStyles = _e.floatingStyles,
+    update = _e.update;
+  var handleReturnFocus = function () {
+    requestAnimationFrame(function () {
+      var _a;
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  };
+  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: true,
+    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);
+};
+ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
+exports.ResponsiveMenuPopup = ResponsiveMenuPopup;

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

@@ -1,4 +1,4 @@
-import { __assign } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { MenuTriggerProvider, MenuTriggerConsumer } from './context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { SelectionProvider, SelectionConsumer } from './context/SelectionProvider/SelectionProvider.mjs';
@@ -8,6 +8,7 @@ import { LoadMoreButton } from './subcomponents/LoadMoreButton/LoadMoreButton.mj
 import { MenuFooter } from './subcomponents/MenuLayout/MenuFooter/MenuFooter.mjs';
 import { MenuLoadingSkeleton } from './subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.mjs';
 import { MenuPopup } from './subcomponents/MenuPopup/MenuPopup.mjs';
+import { ResponsiveMenuPopup } from './subcomponents/MenuPopup/ResponsiveMenuPopup.mjs';
 import { MultiSelectOption } from './subcomponents/MultiSelectOption/MultiSelectOption.mjs';
 import { NoResults } from './subcomponents/NoResults/NoResults.mjs';
 import { SearchInput } from './subcomponents/SearchInput/SearchInput.mjs';
@@ -20,6 +21,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
   const FilterMultiSelect = function (_a) {
     var trigger = _a.trigger,
       children = _a.children,
+      customMenuPopup = _a.customMenuPopup,
       isOpen = _a.isOpen,
       defaultOpen = _a.defaultOpen,
       onOpenChange = _a.onOpenChange,
@@ -34,17 +36,19 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       selectionMode = _b === void 0 ? 'multiple' : _b,
       onSearchInputChange = _a.onSearchInputChange,
       triggerRef = _a.triggerRef,
-      className = _a.className;
+      className = _a.className,
+      restProps = __rest(_a, ["trigger", "children", "customMenuPopup", "isOpen", "defaultOpen", "onOpenChange", "isLoading", "loadingSkeleton", "label", "items", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "selectionMode", "onSearchInputChange", "triggerRef", "className"]);
+    var MenuComponent = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : MenuPopup;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
       onOpenChange: onOpenChange,
       triggerRef: triggerRef
     };
-    var menuPopupProps = {
+    var menuPopupProps = __assign({
       isLoading: isLoading,
       loadingSkeleton: loadingSkeleton
-    };
+    }, restProps);
     var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
       return item.isDisabled === true;
     }).map(function (disabledItem) {
@@ -62,7 +66,9 @@ 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({}, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
+    }, /*#__PURE__*/React.createElement(MenuTriggerConsumer, null, trigger), /*#__PURE__*/React.createElement(MenuComponent, __assign({
+      "aria-label": label
+    }, menuPopupProps), /*#__PURE__*/React.createElement(SelectionProvider, __assign({}, selectionProps), /*#__PURE__*/React.createElement(SelectionConsumer, null, children)))));
   };
   FilterMultiSelect.displayName = 'FilterMultiSelect';
   FilterMultiSelect.TriggerButton = FilterTriggerButton;
@@ -79,6 +85,7 @@ const FilterMultiSelect = /*#__PURE__*/function () {
   FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton;
   FilterMultiSelect.LoadMoreButton = LoadMoreButton;
   FilterMultiSelect.NoResults = NoResults;
+  FilterMultiSelect.ResponsiveMenuPopup = ResponsiveMenuPopup;
   return FilterMultiSelect;
 }();
 export { FilterMultiSelect };

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.scss.mjs';
+import styles from './ListBox.module.css.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.css.mjs

@@ -0,0 +1,7 @@
+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.mjs

@@ -4,7 +4,7 @@ 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.scss.mjs';
+import styles from './MenuPopup.module.css.mjs';
 const MenuPopup = /*#__PURE__*/function () {
   const MenuPopup = function (_a) {
     var isLoading = _a.isLoading,

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

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

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

@@ -0,0 +1,85 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import { useFloating, offset, autoPlacement, size, autoUpdate } from '@floating-ui/react-dom';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
+import { useMenuTriggerContext } from '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
+import '../../context/SelectionProvider/SelectionProvider.mjs';
+import styles from './MenuPopup.module.css.mjs';
+
+/** This is a popup primitive that can be used with the FilterMultiSelect when there are overflow issues with the original implementation. This uses the floating-ui */
+const ResponsiveMenuPopup = /*#__PURE__*/function () {
+  const ResponsiveMenuPopup = function (_a) {
+    var children = _a.children,
+      _b = _a.floatingConfig,
+      floatingConfig = _b === void 0 ? {
+        placement: 'bottom-start',
+        strategy: 'absolute',
+        whileElementsMounted: autoUpdate,
+        shouldFlip: true,
+        shouldResize: true
+      } : _b,
+      classNameOverride = _a.classNameOverride,
+      isLoading = _a.isLoading,
+      loadingSkeleton = _a.loadingSkeleton,
+      restProps = __rest(_a, ["children", "floatingConfig", "classNameOverride", "isLoading", "loadingSkeleton"]);
+    var _c = useState(null),
+      floatingElement = _c[0],
+      setFloatingElement = _c[1];
+    var _d = useMenuTriggerContext(),
+      menuTriggerState = _d.menuTriggerState,
+      buttonRef = _d.buttonRef;
+    var referenceElement = buttonRef.current;
+    var _e = useFloating(__assign({
+        elements: {
+          reference: referenceElement,
+          floating: floatingElement
+        },
+        middleware: [offset(6), floatingConfig.shouldFlip && autoPlacement({
+          allowedPlacements: ['bottom-start', 'top-start']
+        }), floatingConfig.shouldResize && size({
+          apply: function (_a) {
+            var availableHeight = _a.availableHeight,
+              elements = _a.elements;
+            Object.assign(elements.floating.style, {
+              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px'
+            });
+          }
+        })]
+      }, floatingConfig)),
+      floatingStyles = _e.floatingStyles,
+      update = _e.update;
+    var handleReturnFocus = function () {
+      requestAnimationFrame(function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+    };
+    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: true,
+      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));
+  };
+  ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup';
+  return ResponsiveMenuPopup;
+}();
+export { ResponsiveMenuPopup };

package/dist/styles.css

@@ -9,6 +9,14 @@
   }
 }
 
+@layer kz-components {
+  .List-module_list__bbFPn {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+}
+
 @layer kz-components {
   .ListItem-module_listItem__xGr6A {
     font-family: var(--typography-paragraph-body-font-family);
@@ -19,24 +27,6 @@
   }
 }
 
-@layer kz-components {
-  .ListSection-module_listSectionHeader__bptHg {
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    font-size: var(--typography-heading-5-font-size);
-    line-height: var(--typography-heading-5-line-height);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
-}
-
-@layer kz-components {
-  .List-module_list__bbFPn {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-16);
-  }
-}
-
 @layer kz-components {
   .Trigger-module_button__giSqA {
     display: flex;
@@ -56,6 +46,16 @@
   }
 }
 
+@layer kz-components {
+  .ListSection-module_listSectionHeader__bptHg {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN
@@ -3800,26 +3800,29 @@
   }
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ListBox-module_listBox__q95MO {
+  .ListBox-module_listBox__HBScm {
     list-style: none;
-    padding: var(--spacing-sm, 0.75rem);
-    margin: 0 var(--spacing-sm, 0.75rem) 0 0;
+    padding: var(--spacing-12);
+    margin: 0 var(--spacing-12) 0 0;
     display: grid;
     max-height: 22rem;
     overflow-y: auto;
   }
-  .ListBox-module_overflown__wChQA {
-    padding-right: var(--spacing-sm, 0.75rem);
+
+  .ListBox-module_overflown__PdKED {
+    padding-right: var(--spacing-12);
   }
-  .ListBox-module_hidden__eYdXv {
+
+  .ListBox-module_hidden__mO-oL {
     display: none;
   }
-  .ListBox-module_noResultsWrapper__WcLRm {
+
+  .ListBox-module_noResultsWrapper__RnMj0 {
     list-style: none;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3830,6 +3833,7 @@
     padding: 0;
   }
   .ListBoxSection-module_listBoxSectionHeader__N-2Fi {
+    position: relative;
     font-family: var(--typography-heading-6-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
     font-size: var(--typography-heading-6-font-size, 0.875rem);
     font-weight: var(--typography-heading-6-font-weight, 600);
@@ -3864,25 +3868,29 @@
     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__UVgnP {
-    position: absolute;
+  .MenuPopup-module_menuPopup__QgGEa {
+    /* from $ca-z-index-dropdown */
     z-index: 1000;
     box-sizing: border-box;
-    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);
+    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-12) 0;
+    margin-top: var(--spacing-6);
     text-align: start;
-    width: 294px;
+    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;
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/

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

@@ -15,11 +15,13 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
     trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode;
     children: (value?: SelectionProviderContextType) => React.ReactNode;
+    /** Replaces the MenuPopup. Should only be used for changing how the floating element is positioned, ie: with the `<ResponsiveMenuPopup />` primitive. */
+    customMenuPopup?: React.ComponentType<MenuPopupProps>;
     triggerRef?: React.RefObject<HTMLButtonElement>;
     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, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, customMenuPopup, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, ...restProps }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;
@@ -70,5 +72,9 @@ export declare const FilterMultiSelect: {
         ({ children, ...restProps }: import("./subcomponents/NoResults").NoResultsProps): JSX.Element;
         displayName: string;
     };
+    ResponsiveMenuPopup: {
+        ({ children, floatingConfig, classNameOverride, isLoading, loadingSkeleton, ...restProps }: import("./subcomponents/MenuPopup").ResponsiveMenuPopupProps): JSX.Element;
+        displayName: string;
+    };
 };
 export {};

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

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

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

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
+import { type OverrideClassName } from "../../../../types/OverrideClassName";
+import { type MenuPopupProps } from './MenuPopup';
+export type FloatingConfig = Pick<UseFloatingOptions, 'placement' | 'strategy' | 'whileElementsMounted'> & {
+    /** Whether the component should automatically resize based on the available window height.
+     * @default true
+     */
+    shouldResize?: boolean;
+    /** Whether the component should automatically flip to the top of the input based on the available window height.
+     * @default true
+     */
+    shouldFlip?: boolean;
+};
+export type ResponsiveMenuPopupProps = MenuPopupProps & {
+    floatingConfig?: FloatingConfig;
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+/** This is a popup primitive that can be used with the FilterMultiSelect when there are overflow issues with the original implementation. This uses the floating-ui */
+export declare const ResponsiveMenuPopup: {
+    ({ children, floatingConfig, classNameOverride, isLoading, loadingSkeleton, ...restProps }: ResponsiveMenuPopupProps): JSX.Element;
+    displayName: string;
+};

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

@@ -1 +1,2 @@
 export * from './MenuPopup';
+export * from './ResponsiveMenuPopup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.10",
+  "version": "1.80.0",
   "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,6 +180,7 @@ 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

@@ -13,7 +13,7 @@ import { ListBox } from './subcomponents/ListBox'
 import { ListBoxSection } from './subcomponents/ListBoxSection'
 import { LoadMoreButton } from './subcomponents/LoadMoreButton'
 import { MenuFooter, MenuLoadingSkeleton } from './subcomponents/MenuLayout'
-import { MenuPopup, type MenuPopupProps } from './subcomponents/MenuPopup'
+import { MenuPopup, ResponsiveMenuPopup, type MenuPopupProps } from './subcomponents/MenuPopup'
 import { MultiSelectOption } from './subcomponents/MultiSelectOption'
 import { NoResults } from './subcomponents/NoResults'
 import { SearchInput } from './subcomponents/SearchInput'
@@ -35,6 +35,8 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
+  /** Replaces the MenuPopup. Should only be used for changing how the floating element is positioned, ie: with the `<ResponsiveMenuPopup />` primitive. */
+  customMenuPopup?: React.ComponentType<MenuPopupProps>
   triggerRef?: React.RefObject<HTMLButtonElement>
   className?: string
 } & Omit<MenuPopupProps, 'children'> &
@@ -44,6 +46,7 @@ export type FilterMultiSelectProps = {
 export const FilterMultiSelect = ({
   trigger,
   children,
+  customMenuPopup,
   isOpen,
   defaultOpen,
   onOpenChange,
@@ -58,9 +61,11 @@ export const FilterMultiSelect = ({
   onSearchInputChange,
   triggerRef,
   className,
+  ...restProps
 }: FilterMultiSelectProps): JSX.Element => {
+  const MenuComponent = customMenuPopup ?? MenuPopup
   const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
-  const menuPopupProps = { isLoading, loadingSkeleton }
+  const menuPopupProps = { isLoading, loadingSkeleton, ...restProps }
   const disabledKeys: Selection = new Set(
     items?.filter((item) => item.isDisabled === true).map((disabledItem) => disabledItem.value),
   )
@@ -79,11 +84,11 @@ export const FilterMultiSelect = ({
     <MenuTriggerProvider {...menuTriggerProps}>
       <div className={className}>
         <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
-        <MenuPopup {...menuPopupProps}>
+        <MenuComponent aria-label={label} {...menuPopupProps}>
           <SelectionProvider {...selectionProps}>
             <SelectionConsumer>{children}</SelectionConsumer>
           </SelectionProvider>
-        </MenuPopup>
+        </MenuComponent>
       </div>
     </MenuTriggerProvider>
   )
@@ -104,3 +109,4 @@ FilterMultiSelect.MenuFooter = MenuFooter // For layout
 FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton // Menu Loading Skeleton example
 FilterMultiSelect.LoadMoreButton = LoadMoreButton
 FilterMultiSelect.NoResults = NoResults
+FilterMultiSelect.ResponsiveMenuPopup = ResponsiveMenuPopup

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

@@ -1,4 +1,4 @@
-import { Controls, Meta, Canvas } from '@storybook/blocks'
+import { Controls, Meta, Canvas, DocsStory } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
 import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
@@ -30,6 +30,14 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 
 <Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
 
+### With customMenuPopup component
+
+You can replace the `MenuPopup` component within the FilterMultiSelect to allow flexibility in how the popup's placement is determined. While the default behavior should satisfy most scenarios, this can be used when there is limited vertical space available in the viewport.
+
+<Canvas of={FilterMultiSelectStories.AboveIfAvailable} />
+
+For convenience, a primitive called `ResponsiveMenuPopup` that can be accessed via dot notation that will automatically adjust the placement and size of the popup based on the available window height. This implementation uses `floating-ui` and the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) instead of `react-aria` hooks. It also locks scroll when the popup is active.
+
 ### 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,11 +1,12 @@
 import React, { useState } from 'react'
 import type { Selection } from '@react-types/shared'
 import type { Meta, StoryObj } from '@storybook/react'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
 import { InlineNotification } from '~components/Notification'
 import { TextField } from '~components/TextField'
 import { FilterMultiSelect, getSelectedOptionLabels } from '..'
-import { mockItems } from './MockData'
+import { mockItems, mockManyItems } from './MockData'
 
 const IS_CHROMATIC = isChromatic()
 
@@ -14,7 +15,7 @@ const meta = {
   component: FilterMultiSelect,
   parameters: {
     docs: {
-      source: { type: 'code' },
+      source: { type: 'auto' },
     },
   },
   args: {
@@ -178,6 +179,7 @@ export const WithSectionHeaders: Story = {
   ...FilterMultiSelectTemplate,
   args: {
     isOpen: IS_CHROMATIC || undefined,
+    items: mockManyItems,
     children: (): JSX.Element => (
       <>
         <FilterMultiSelect.SearchInput />
@@ -308,3 +310,78 @@ export const WithSectionNotification: Story = {
     chromatic: { disable: false },
   },
 }
+
+const sourceCode = `
+  <FilterMultiSelect
+    {...filterMultiSelectProps}
+    customMenuPopup={(props): JSX.Element => (
+      // This will replace the default MenuPopup with a custom one. The rest of the component should still be implemented as the FilterMultiSelect pattern.
+      <FilterMultiSelect.ResponsiveMenuPopup {...props} />
+    )}
+  >
+    {/* FilterMultiSelect children */}
+  </FilterMultiSelect>
+`
+
+export const AboveIfAvailable: Story = {
+  ...WithSectionNotification,
+  name: 'With customMenuPopup and vertical placement',
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '650px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+    docs: { source: { code: sourceCode } },
+  },
+  args: {
+    customMenuPopup: (props): JSX.Element => <FilterMultiSelect.ResponsiveMenuPopup {...props} />,
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div style={{ height: '80vh', maxHeight: '500px' }}>Content above</div>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const ShouldResize: Story = {
+  ...AboveIfAvailable,
+  name: 'With customMenuPopup, vertical placement and resized popup',
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '450px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const triggerButton = await canvas.findByRole('button', {
+      name: /Engineer/i,
+    })
+    await step('Trigger opens the FilterMultiSelect dialog', async () => {
+      await userEvent.click(triggerButton)
+      await waitFor(() => expect(canvas.getByRole('dialog')).toBeVisible())
+    })
+  },
+}

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

@@ -58,3 +58,42 @@ 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,7 +1,6 @@
 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'
@@ -53,15 +52,11 @@ describe('<MenuTriggerProvider /> - Visual content', () => {
       rerender(<MenuTriggerProviderWrapper isOpen={false} />)
       expect(screen.queryByText('menu-content-mock')).not.toBeInTheDocument()
     })
-
-    it('fires the onOpenChange callback when the trigger is interacted', async () => {
+    it('fires the onOpenChange callback on user interaction to close the menu', async () => {
       const onOpenChange = vi.fn()
       render(<MenuTriggerProviderWrapper isOpen onOpenChange={onOpenChange} />)
 
-      const trigger = screen.getByRole('button', {
-        name: 'trigger-display-label-mock',
-      })
-      await user.click(trigger)
+      await user.keyboard('{Escape}')
 
       await waitFor(() => {
         expect(onOpenChange).toBeCalledTimes(1)
@@ -86,17 +81,6 @@ 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.css

@@ -0,0 +1,22 @@
+@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/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.scss'
+import styles from './ListBox.module.css'
 
 export type ListBoxItems = {
   selectedItems: MultiSelectItem[]

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

@@ -10,6 +10,7 @@
   }
 
   .listBoxSectionHeader {
+    position: relative; // this is needed to ensure the VisuallyHidden element doesn't impact the scroll height of the list
     font-family: $typography-heading-6-font-family;
     font-size: $typography-heading-6-font-size;
     font-weight: $typography-heading-6-font-weight;

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

@@ -0,0 +1,22 @@
+@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-12) 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;
+  }
+}

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

@@ -2,7 +2,7 @@ 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.scss'
+import styles from './MenuPopup.module.css'
 
 export type MenuPopupProps = {
   isLoading?: boolean

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

@@ -0,0 +1,115 @@
+import React, { useEffect, useState, type HTMLAttributes } from 'react'
+import {
+  autoPlacement,
+  autoUpdate,
+  offset,
+  size,
+  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 { useMenuTriggerContext } from '../../context'
+import { type MenuPopupProps } from './MenuPopup'
+import styles from './MenuPopup.module.css'
+
+export type FloatingConfig = Pick<
+  UseFloatingOptions,
+  'placement' | 'strategy' | 'whileElementsMounted'
+> & {
+  /** Whether the component should automatically resize based on the available window height.
+   * @default true
+   */
+  shouldResize?: boolean
+  /** Whether the component should automatically flip to the top of the input based on the available window height.
+   * @default true
+   */
+  shouldFlip?: boolean
+}
+
+export type ResponsiveMenuPopupProps = MenuPopupProps & {
+  floatingConfig?: FloatingConfig
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+/** This is a popup primitive that can be used with the FilterMultiSelect when there are overflow issues with the original implementation. This uses the floating-ui */
+export const ResponsiveMenuPopup = ({
+  children,
+  floatingConfig = {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    whileElementsMounted: autoUpdate,
+    shouldFlip: true,
+    shouldResize: true,
+  },
+  classNameOverride,
+  isLoading,
+  loadingSkeleton,
+  ...restProps
+}: ResponsiveMenuPopupProps): JSX.Element => {
+  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
+  const { menuTriggerState, buttonRef } = useMenuTriggerContext()
+  const referenceElement = buttonRef.current
+
+  const { floatingStyles, update } = useFloating({
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement,
+    },
+    middleware: [
+      offset(6),
+      floatingConfig.shouldFlip &&
+        autoPlacement({ allowedPlacements: ['bottom-start', 'top-start'] }),
+      floatingConfig.shouldResize &&
+        size({
+          apply({ availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              maxHeight: Math.max(250, Math.min(availableHeight - 12, 500)) + 'px',
+            })
+          },
+        }),
+    ],
+    ...floatingConfig,
+  })
+
+  const handleReturnFocus = (): void => {
+    requestAnimationFrame(() => {
+      buttonRef.current?.focus()
+    })
+  }
+
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [floatingElement, referenceElement, update])
+
+  return menuTriggerState.isOpen ? (
+    <FocusOn
+      enabled={menuTriggerState.isOpen}
+      scrollLock={true}
+      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>
+  ) : (
+    <></>
+  )
+}
+
+ResponsiveMenuPopup.displayName = 'FilterMultiSelect.ResponsiveMenuPopup'

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/index.ts

@@ -1 +1,2 @@
 export * from './MenuPopup'
+export * from './ResponsiveMenuPopup'

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

@@ -1,9 +0,0 @@
-'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/esm/src/Filter/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -1,7 +0,0 @@
-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.module.scss.mjs

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

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

@@ -1,25 +0,0 @@
-@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/MenuPopup/MenuPopup.module.scss

@@ -1,24 +0,0 @@
-@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;
-  }
-}