@kaizen/components 1.78.1 → 1.78.3

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/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/cjs/src/Menu/subcomponents/StatelessMenu/StatelessMenu.cjs

@@ -40,7 +40,6 @@ var StatelessMenu = function (_a) {
     'onMouseDown': function (e) {
       return e.preventDefault();
     },
-    'aria-haspopup': true,
     'aria-expanded': isMenuVisible
   });
   React.useEffect(function () {

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

@@ -44,16 +44,19 @@ var Select = function (_a) {
     status = _a.status,
     validationMessage = _a.validationMessage,
     isReversed = _a.isReversed,
+    _c = _a.isRequired,
+    isRequired = _c === void 0 ? false : _c,
     isFullWidth = _a.isFullWidth,
     disabledValues = _a.disabledValues,
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    _c = _a.placeholder,
-    placeholder = _c === void 0 ? '' : _c,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+    onSelectionChange = _a.onSelectionChange,
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -70,16 +73,20 @@ var Select = function (_a) {
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
     placeholder: placeholder,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    onSelectionChange: onSelectionChange ? function (key) {
+      return onSelectionChange(key);
+    } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _d.labelProps,
-    reactAriaTriggerProps = _d.triggerProps,
-    valueProps = _d.valueProps,
-    menuProps = _d.menuProps,
-    errorMessageProps = _d.errorMessageProps,
-    descriptionProps = _d.descriptionProps;
+  var _e = select$1.useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _e.labelProps,
+    reactAriaTriggerProps = _e.triggerProps,
+    valueProps = _e.valueProps,
+    menuProps = _e.menuProps,
+    errorMessageProps = _e.errorMessageProps,
+    descriptionProps = _e.descriptionProps;
   // Hack incoming:
   // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
   // We use role=combobox, meaning screen readers will read the value.
@@ -101,11 +108,12 @@ var Select = function (_a) {
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
     'ref': refs.setReference,
-    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId)
+    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired
   });
-  var _e = React.useState(),
-    portalContainer = _e[0],
-    setPortalContainer = _e[1];
+  var _f = React.useState(),
+    portalContainer = _f[0],
+    setPortalContainer = _f[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);

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/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/esm/src/Menu/subcomponents/StatelessMenu/StatelessMenu.mjs

@@ -32,7 +32,6 @@ const StatelessMenu = /*#__PURE__*/function () {
       'onMouseDown': function (e) {
         return e.preventDefault();
       },
-      'aria-haspopup': true,
       'aria-expanded': isMenuVisible
     });
     useEffect(function () {

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

@@ -36,16 +36,19 @@ const Select = /*#__PURE__*/function () {
       status = _a.status,
       validationMessage = _a.validationMessage,
       isReversed = _a.isReversed,
+      _c = _a.isRequired,
+      isRequired = _c === void 0 ? false : _c,
       isFullWidth = _a.isFullWidth,
       disabledValues = _a.disabledValues,
       classNameOverride = _a.classNameOverride,
       selectedKey = _a.selectedKey,
       description = _a.description,
-      _c = _a.placeholder,
-      placeholder = _c === void 0 ? '' : _c,
+      _d = _a.placeholder,
+      placeholder = _d === void 0 ? '' : _d,
       isDisabled = _a.isDisabled,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+      onSelectionChange = _a.onSelectionChange,
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -62,16 +65,20 @@ const Select = /*#__PURE__*/function () {
       selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
       placeholder: placeholder,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      onSelectionChange: onSelectionChange ? function (key) {
+        return onSelectionChange(key);
+      } : undefined
     }, restProps);
     var state = useSelectState(ariaSelectProps);
-    var _d = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _d.labelProps,
-      reactAriaTriggerProps = _d.triggerProps,
-      valueProps = _d.valueProps,
-      menuProps = _d.menuProps,
-      errorMessageProps = _d.errorMessageProps,
-      descriptionProps = _d.descriptionProps;
+    var _e = useSelect(ariaSelectProps, state, triggerRef),
+      labelProps = _e.labelProps,
+      reactAriaTriggerProps = _e.triggerProps,
+      valueProps = _e.valueProps,
+      menuProps = _e.menuProps,
+      errorMessageProps = _e.errorMessageProps,
+      descriptionProps = _e.descriptionProps;
     // Hack incoming:
     // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
     // We use role=combobox, meaning screen readers will read the value.
@@ -93,11 +100,12 @@ const Select = /*#__PURE__*/function () {
       'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
       'ref': refs.setReference,
-      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId)
+      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+      'aria-required': isRequired
     });
-    var _e = useState(),
-      portalContainer = _e[0],
-      setPortalContainer = _e[1];
+    var _f = useState(),
+      portalContainer = _f[0],
+      setPortalContainer = _f[1];
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);