@kaizen/components 1.79.10 → 1.80.1

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.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -102,26 +102,26 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "^2.2.4",
-    "@internationalized/date": "^3.8.1",
+    "@floating-ui/react-dom": "^2.1.4",
+    "@headlessui/react": "^2.2.6",
+    "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.13.1",
-    "@react-aria/datepicker": "^3.14.3",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/i18n": "^3.12.9",
-    "@react-aria/listbox": "^3.14.4",
-    "@react-aria/menu": "^3.18.3",
-    "@react-aria/overlays": "^3.27.1",
-    "@react-aria/select": "^3.15.5",
-    "@react-aria/utils": "^3.29.0",
-    "@react-stately/collections": "^3.12.4",
-    "@react-stately/datepicker": "^3.14.1",
-    "@react-stately/list": "^3.12.2",
-    "@react-stately/menu": "^3.9.4",
-    "@react-stately/select": "^3.6.13",
-    "@react-types/shared": "^3.29.1",
+    "@react-aria/button": "^3.13.3",
+    "@react-aria/datepicker": "^3.14.5",
+    "@react-aria/focus": "^3.20.5",
+    "@react-aria/i18n": "^3.12.10",
+    "@react-aria/listbox": "^3.14.6",
+    "@react-aria/menu": "^3.18.5",
+    "@react-aria/overlays": "^3.27.3",
+    "@react-aria/select": "^3.15.7",
+    "@react-aria/utils": "^3.29.1",
+    "@react-stately/collections": "^3.12.5",
+    "@react-stately/datepicker": "^3.14.2",
+    "@react-stately/list": "^3.12.3",
+    "@react-stately/menu": "^3.9.5",
+    "@react-stately/select": "^3.6.14",
+    "@react-types/shared": "^3.30.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
@@ -130,24 +130,24 @@
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.5.0",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.1",
+    "prosemirror-model": "^1.25.2",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.4",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.39.3",
+    "prosemirror-view": "^1.40.1",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.40.0",
-    "react-aria-components": "^1.9.0",
+    "react-aria": "^3.41.1",
+    "react-aria-components": "^1.10.1",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.6",
-    "react-focus-on": "^3.9.4",
+    "react-focus-on": "^3.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.10.1",
+    "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.4",
+    "use-debounce": "^10.0.5",
     "uuid": "^11.1.0"
   },
   "dependenciesComments": {
@@ -155,9 +155,9 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.9.1",
+    "@cultureamp/i18n-react-intl": "^2.12.2",
     "@cultureamp/package-bundler": "^2.3.2",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
@@ -169,23 +169,23 @@
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.6",
+    "postcss-import": "^16.1.1",
+    "postcss-preset-env": "^10.2.4",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "query-string": "^9.2.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.11",
-    "rollup": "^4.40.2",
+    "rollup": "^4.46.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
-    "tsx": "^4.19.4",
+    "tsx": "^4.20.3",
     "@kaizen/design-tokens": "10.10.0"
   },
   "devDependenciesComments": {

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,13 @@
 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 { Card } from '~components/Card'
 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 +16,7 @@ const meta = {
   component: FilterMultiSelect,
   parameters: {
     docs: {
-      source: { type: 'code' },
+      source: { type: 'auto' },
     },
   },
   args: {
@@ -178,6 +180,7 @@ export const WithSectionHeaders: Story = {
   ...FilterMultiSelectTemplate,
   args: {
     isOpen: IS_CHROMATIC || undefined,
+    items: mockManyItems,
     children: (): JSX.Element => (
       <>
         <FilterMultiSelect.SearchInput />
@@ -308,3 +311,111 @@ 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 WithContentBelow: Story = {
+  ...FilterMultiSelectTemplate,
+  decorators: [
+    (Story) => (
+      <div>
+        <Story />
+        <Card classNameOverride="mt-24 p-12" isElevated>
+          <p>
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis libero dolore
+            pariatur enim voluptates aperiam, delectus, harum cum earum quibusdam quos porro
+            explicabo quisquam sapiente cupiditate quae hic, minus nam.
+          </p>
+        </Card>
+      </div>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+  },
+  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('option', { name: /Front-End/i })).toBeVisible())
+    })
+  },
+}
+
+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,23 @@
+@layer kz-components {
+  .menuPopup {
+    /* from $ca-z-index-dropdown */
+    position: absolute;
+    z-index: 1000;
+    box-sizing: border-box;
+    background: var(--color-white);
+    color: var(--color-purple-800);
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-large-box-shadow);
+    padding: var(--spacing-12) 0;
+    margin-top: var(--spacing-6);
+    text-align: start;
+    width: var(--menu-container-width, 294px);
+  }
+
+  .menuPopup[popover]:popover-open {
+    max-height: var(--menu-container-height, 500px);
+    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