@kaizen/components 0.0.0-canary-test-select-aria-props-update-20250616233358 → 0.0.0-canary-test-fms-popover-api-update-20250624021814

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

@@ -41,7 +41,8 @@ var FilterMultiSelect = function (_a) {
     selectionMode = _b === void 0 ? 'multiple' : _b,
     onSearchInputChange = _a.onSearchInputChange,
     triggerRef = _a.triggerRef,
-    className = _a.className;
+    className = _a.className,
+    floatingOptions = _a.floatingOptions;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
@@ -50,7 +51,8 @@ var FilterMultiSelect = function (_a) {
   };
   var menuPopupProps = {
     isLoading: isLoading,
-    loadingSkeleton: loadingSkeleton
+    loadingSkeleton: loadingSkeleton,
+    floatingOptions: floatingOptions
   };
   var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
     return item.isDisabled === true;
@@ -69,7 +71,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(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)))));
 };
 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.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

@@ -2,55 +2,74 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var focus = require('@react-aria/focus');
-var overlays = require('@react-aria/overlays');
+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.scss.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);
 var MenuPopup = function (_a) {
-  var isLoading = _a.isLoading,
+  var children = _a.children,
+    floatingOptions = _a.floatingOptions,
+    classNameOverride = _a.classNameOverride,
+    isLoading = _a.isLoading,
     loadingSkeleton = _a.loadingSkeleton,
-    children = _a.children;
-  var menuTriggerState = MenuTriggerProvider.useMenuTriggerContext().menuTriggerState;
-  var onClose = function () {
-    return menuTriggerState.close();
+    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();
+    });
   };
-  // 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);
+  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);
 };
 MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
 exports.MenuPopup = MenuPopup;

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/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -36,7 +36,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = React.useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -83,11 +84,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return React__default.default.createElement("div", {
     className: classnames__default.default(LikertScaleLegacy_module.container, isRated && LikertScaleLegacy_module.rated, reversed && [LikertScaleLegacy_module.reversed], hoveredItem !== null && LikertScaleLegacy_module.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, React__default.default.createElement("div", {
     className: LikertScaleLegacy_module.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

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

@@ -34,7 +34,8 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       selectionMode = _b === void 0 ? 'multiple' : _b,
       onSearchInputChange = _a.onSearchInputChange,
       triggerRef = _a.triggerRef,
-      className = _a.className;
+      className = _a.className,
+      floatingOptions = _a.floatingOptions;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
@@ -43,7 +44,8 @@ const FilterMultiSelect = /*#__PURE__*/function () {
     };
     var menuPopupProps = {
       isLoading: isLoading,
-      loadingSkeleton: loadingSkeleton
+      loadingSkeleton: loadingSkeleton,
+      floatingOptions: floatingOptions
     };
     var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function (item) {
       return item.isDisabled === true;
@@ -62,7 +64,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(MenuPopup, __assign({
+      "aria-label": label
+    }, 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.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

@@ -1,50 +1,67 @@
-import { __assign } from 'tslib';
-import React from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { useOverlay, DismissButton } from '@react-aria/overlays';
+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 { 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,
+    var children = _a.children,
+      floatingOptions = _a.floatingOptions,
+      classNameOverride = _a.classNameOverride,
+      isLoading = _a.isLoading,
       loadingSkeleton = _a.loadingSkeleton,
-      children = _a.children;
-    var menuTriggerState = useMenuTriggerContext().menuTriggerState;
-    var onClose = function () {
-      return menuTriggerState.close();
+      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();
+      });
     };
-    // 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));
+    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));
   };
   MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
   return MenuPopup;

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/LikertScaleLegacy/LikertScaleLegacy.mjs

@@ -27,7 +27,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -74,11 +75,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, isRated && styles.rated, reversed && [styles.reversed], hoveredItem !== null && styles.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

package/dist/styles.css

@@ -3743,26 +3743,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 **/
@@ -3807,25 +3810,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-6) 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

@@ -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, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, floatingOptions, }: 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,3 +8,4 @@ export declare const locationDemographicValues: {
     demographicValueId: string;
     label: string;
 }[];
+export declare const mockManyItems: ItemType[];

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

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

package/dist/types/LikertScaleLegacy/LikertScaleLegacy.d.ts

@@ -12,10 +12,14 @@ export type LikertScaleProps = {
     'colorSchema'?: ColorSchema | 'classical';
     'validationMessage'?: string;
     'status'?: 'default' | 'error';
+    /**
+     * Sets aria-required value on radiogroup for assistive technologies. Validation must still be handled.
+     */
+    'isRequired'?: boolean;
     'onSelect': (value: ScaleItem | null) => void;
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */
-export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, colorSchema, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, }: LikertScaleProps) => JSX.Element;
+export declare const LikertScaleLegacy: ({ scale, selectedItem, reversed, colorSchema, "data-testid": dataTestId, onSelect, validationMessage, status, labelId, isRequired, }: LikertScaleProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-test-select-aria-props-update-20250616233358",
+  "version": "0.0.0-canary-test-fms-popover-api-update-20250624021814",
   "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

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

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

@@ -30,6 +30,14 @@ 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,11 +1,12 @@
 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 } from './MockData'
+import { mockItems, mockManyItems } from './MockData'
 
 const IS_CHROMATIC = isChromatic()
 
@@ -308,3 +309,90 @@ 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,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/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-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;
+  }
+}

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

@@ -1,58 +1,78 @@
-import React from 'react'
-import { FocusScope } from '@react-aria/focus'
-import { DismissButton, useOverlay } from '@react-aria/overlays'
+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 { useMenuTriggerContext } from '../../context'
-import styles from './MenuPopup.module.scss'
+import styles from './MenuPopup.module.css'
 
 export type MenuPopupProps = {
+  children: React.ReactNode
+  floatingOptions?: Partial<UseFloatingOptions>
   isLoading?: boolean
   loadingSkeleton?: React.ReactNode
-  children: React.ReactNode
-}
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const MenuPopup = ({
+  children,
+  floatingOptions,
+  classNameOverride,
   isLoading,
   loadingSkeleton,
-  children,
+  ...restProps
 }: MenuPopupProps): JSX.Element => {
-  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,
+  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,
     },
-    overlayRef,
-  )
+    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])
 
-  // 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 ? (
-    <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>
+    <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>
   ) : (
     <></>
   )

package/src/LikertScaleLegacy/LikertScaleLegacy.spec.tsx

@@ -36,6 +36,7 @@ const LikertScaleLegacyWrapper = (props: Partial<LikertScaleProps>): JSX.Element
     labelId="test__likert-scale"
     selectedItem={null}
     onSelect={(): void => undefined}
+    isRequired
     {...props}
   />
 )

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -25,6 +25,10 @@ export type LikertScaleProps = {
   'colorSchema'?: ColorSchema | 'classical'
   'validationMessage'?: string
   'status'?: 'default' | 'error'
+  /**
+   * Sets aria-required value on radiogroup for assistive technologies. Validation must still be handled.
+   */
+  'isRequired'?: boolean
   'onSelect': (value: ScaleItem | null) => void
 }
 
@@ -46,6 +50,7 @@ export const LikertScaleLegacy = ({
   validationMessage,
   status,
   labelId,
+  isRequired,
 }: LikertScaleProps): JSX.Element => {
   const [hoveredItem, setHoveredItem] = useState<ScaleItem | null>(null)
   const itemRefs: ItemRefs = scale.map((s) => ({
@@ -104,11 +109,12 @@ export const LikertScaleLegacy = ({
         reversed && [styles.reversed],
         hoveredItem !== null && styles.hovered,
       )}
-      aria-labelledby={labelId}
+      aria-labelledby={isRequired ? `${labelId}` : labelId}
       role="radiogroup"
       tabIndex={-1}
       aria-describedby={validationMessageId}
       data-testid={dataTestId}
+      aria-required={isRequired}
     >
       <div className={styles.legend} data-testid={dataTestId && `${dataTestId}-legend`}>
         <Text variant="small" color={reversed ? 'white' : 'dark'}>

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx

@@ -21,3 +21,11 @@ Likert scale radio buttons let people select one option in a Likert scale rangin
 
 <Canvas of={LikertScaleLegacyStories.Playground} />
 <Controls of={LikertScaleLegacyStories.Playground} />
+
+## API
+
+### isRequired
+
+Sets aria-required value on radiogroup for assistive technologies. An accessible label must be provided and validation must still be handled within implementations.
+
+<Canvas of={LikertScaleLegacyStories.IsRequired} />

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stories.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, within } from '@storybook/test'
+import { VisuallyHidden } from '~components/VisuallyHidden'
 import { LikertScaleLegacy } from '../index'
 import { type Scale, type ScaleItem } from '../types'
 
@@ -57,7 +59,7 @@ export const Playground: Story = {
         code: `
   const SatisfactionExample = () => {
     const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
-  
+
     return (
       <LikertScaleLegacy
         scale={[
@@ -82,3 +84,30 @@ export const Playground: Story = {
     },
   },
 }
+
+export const IsRequired: Story = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState<ScaleItem | null>(null)
+    const labelId = React.useId()
+    return (
+      <div>
+        <VisuallyHidden id={labelId}>Likert scale label</VisuallyHidden>
+        <LikertScaleLegacy
+          {...args}
+          labelId={labelId}
+          selectedItem={selectedItem}
+          onSelect={setSelectedItem}
+        />
+      </div>
+    )
+  },
+  args: {
+    isRequired: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const likertScale = canvas.getByRole('radiogroup', { name: 'Likert scale label' })
+
+    expect(likertScale).toHaveAttribute('aria-required', 'true')
+  },
+}

package/src/__next__/Menu/_docs/Menu--migration-guide.mdx

@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Components/Menu/Migration guide" />
+
+# Menu migration guide
+
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating menu usage from the `deprecated` (`@kaizen/components`) `Menu` component to the `next` (`@kaizen/components/next`) `Menu` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
+
+## Key API changes
+
+`next/Menu` separates its functionality into the following components:
+
+- `MenuTrigger` wraps the `MenuPopover` component and its trigger element.
+- `MenuPopover` contains a `Menu` component, and controls the popover placement and open and close interactions.
+- `Menu` contains one or more `MenuItem` and `MenuSection` components.
+- `MenuSection` enables menu items to be grouped into sections.
+- `MenuHeader` provides a section's header content.
+- `MenuItem` provides a menu item's content, and handles item selection.
+
+Other notable changes:
+
+- `Menu.align` prop becomes MenuPopover.placement, and values are mapped as follows:
+  - `left` becomes `start`
+  - `right` becomes `end`
+- `Menu.autoHide` prop is retired
+- `Menu.button` prop becomes `MenuTrigger.children`
+  - The trigger element must be a `next/Button`
+- `Menu.dropdownWidth` prop is retired
+- `Menu.portalSelector` prop is retired
+  - Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
+- `MenuItem.destructive` prop is retired
+  - This change aligns with a broader move towards more judicious use of colour
+- `MenuItem.disabled` prop becomes `MenuItem.isDisabled`
+- `MenuItem.label` prop becomes `MenuItem.children`
+- `MenuItem.onClick` prop becomes `MenuItem.onAction`
+  - React Aria's `Menu` does not expose native click events, e.g. `MenuItem.onAction` cannot call `e.preventDefault()`
+  - See React Aria [Menu documentation](https://react-spectrum.adobe.com/react-aria/Menu.html) for more details on working with `Menu` and `MenuItem` events
+- `MenuList.heading` prop becomes `MenuHeader` in a `MenuSection`
+
+## Migration example
+
+### Before
+
+```tsx
+<Menu button={<Button>Trigger</Button>}>
+  <MenuList>
+    <MenuList heading={<MenuHeading>Section One</MenuHeading>}>
+      <MenuItem onClick={() => alert('1')} label="Item 1" />
+      <MenuItem onClick={() => alert('2')} label="Item 2" />
+    </MenuList>
+    <MenuList heading={<MenuHeading>Section Two</MenuHeading>}>
+      <MenuItem onClick={() => alert('3')} label="Item 3" />
+      <MenuItem onClick={() => alert('4')} label="Item 4" />
+    </MenuList>
+  </MenuList>
+</Menu>
+```
+
+### After
+
+```tsx
+<MenuTrigger>
+  <Button>Trigger</Button>
+  <MenuPopover>
+    <Menu>
+      <MenuSection>
+        <MenuHeader>Section One</MenuHeader>
+        <MenuItem onAction={() => alert('1')}>Item 1</MenuItem>
+        <MenuItem onAction={() => alert('2')}>Item 2</MenuItem>
+      </MenuSection>
+      <MenuSection>
+        <MenuHeader>Section Two</MenuHeader>
+        <MenuItem onAction={() => alert('3')}>Item 3</MenuItem>
+        <MenuItem onAction={() => alert('4')}>Item 4</MenuItem>
+      </MenuSection>
+    </Menu>
+  </MenuPopover>
+</MenuTrigger>
+```
+
+## More information
+
+More information about `next/Menu` can be found at [API Specification](/docs/components-menu-menu-next-api-specification--docs) and [Usage Guidelines](/docs/components-menu-menu-next-usage-guidelines--docs).

package/src/__next__/Select/_docs/Select.mdx

@@ -98,7 +98,7 @@ When using the `isRequired` property you can also specify the `validationBehavio
 
 <Canvas of={SelectStories.SelectNativeValidationBehavior} />
 
-While both use `aria-required` to announce whether the field has to have value to assistive technologies, the `native` will option will prevent form submissions if the `selectedKey` is `undefined`.
+While both use `aria-required` to announce whether the field has to have a value to assistive technologies, the `native` will option will prevent form submissions if the `selectedKey` is `undefined`.
 
 ### Full width
 

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;
-  }
-}