@kaizen/components 1.79.9 → 1.80.0

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/locales/de.json

@@ -23,7 +23,7 @@
   },
   "date.validation.unavailableDate" : {
     "description" : "Error message when the user tries to select a date that is unavailable",
-    "message" : "{inputValue} ist nicht verfügbar. Versuchen Sie es mit einem anderen Datum."
+    "message" : "{inputValue} ist nicht verfügbar. Versuche es mit einem anderen Datum."
   },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
@@ -31,7 +31,7 @@
   },
   "datePicker.calendarLabelDescription" : {
     "description" : "Label for the search input",
-    "message" : "Wählen Sie im Kalender ein Datum für:"
+    "message" : "Wähle im Kalender ein Datum für:"
   },
   "filterBar.addFiltersMenu.buttonLabel" : {
     "description" : "Menu button label to show additional available filter options",
@@ -87,7 +87,7 @@
   },
   "kzErrorPage" : {
     "description" : "Label for contact button",
-    "message" : "kontaktieren Sie den Support,"
+    "message" : "Support kontaktieren"
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
@@ -99,23 +99,23 @@
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider können wir nicht überprüfen, ob Sie diese Seite anzeigen können. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider können wir nicht überprüfen, ob du diese Seite anzeigen kannst. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.401.title" : {
     "description" : "Main title for page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.403.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Offenbar fehlt Ihnen leider die Berechtigung zum Anzeigen dieser Seite. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Offenbar fehlt dir leider die Berechtigung zum Anzeigen dieser Seite. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.403.title" : {
     "description" : "Main title for page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.404.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider können wir die von Ihnen gesuchte Seite nicht finden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider können wir die von dir gesuchte Seite nicht finden. Gehe zurück und versuche es erneut oder gehe zur Startseite"
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
@@ -123,7 +123,7 @@
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehe zurück und versuche es erneut oder gehe zur Startseite"
   },
   "kzErrorPage.413.title" : {
     "description" : "Main title of page",
@@ -131,7 +131,7 @@
   },
   "kzErrorPage.422.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Tut mir leid, aber Ihre Änderung konnte nicht vorgenommen werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Deine Änderung konnte leider nicht vorgenommen werden. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
@@ -139,7 +139,7 @@
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.500.title" : {
     "description" : "Main title of page",
@@ -147,27 +147,27 @@
   },
   "kzErrorPage.502.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.502.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.503.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.503.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.504.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.504.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.errorCode" : {
     "message" : "Fehlercode {code}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.9",
+  "version": "1.80.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.spec.tsx

@@ -14,6 +14,7 @@ describe('<Avatar />', () => {
     fireEvent.error(screen.getByRole('img'))
 
     expect(screen.getByText('JD')).toBeInTheDocument()
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   describe('full name provided contains more than two names', () => {

package/src/Avatar/Avatar.tsx

@@ -156,13 +156,13 @@ export const Avatar = ({
       )}
       {...restProps}
     >
-      {avatarState !== 'none' && (
+      {avatarState !== 'none' && avatarState !== 'error' && (
         <img
           ref={image}
           className={classnames(
             styles.avatarImage,
             isCompany && styles.companyAvatarImage,
-            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+            avatarState === 'loading' && styles.loading,
           )}
           src={avatarSrc}
           onError={onImageFailure}

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

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

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

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

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

@@ -1,4 +1,4 @@
-import { Controls, Meta, Canvas } from '@storybook/blocks'
+import { Controls, Meta, Canvas, DocsStory } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
 import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
@@ -30,6 +30,14 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 
 <Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
 
+### With customMenuPopup component
+
+You can replace the `MenuPopup` component within the FilterMultiSelect to allow flexibility in how the popup's placement is determined. While the default behavior should satisfy most scenarios, this can be used when there is limited vertical space available in the viewport.
+
+<Canvas of={FilterMultiSelectStories.AboveIfAvailable} />
+
+For convenience, a primitive called `ResponsiveMenuPopup` that can be accessed via dot notation that will automatically adjust the placement and size of the popup based on the available window height. This implementation uses `floating-ui` and the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) instead of `react-aria` hooks. It also locks scroll when the popup is active.
+
 ### Async
 
 The following is an example of how you may create an async FilterMultiSelect using `@tanstack/react-query`.

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

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
 import type { Selection } from '@react-types/shared'
 import type { Meta, StoryObj } from '@storybook/react'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
 import { InlineNotification } from '~components/Notification'
 import { TextField } from '~components/TextField'
 import { FilterMultiSelect, getSelectedOptionLabels } from '..'
-import { mockItems } from './MockData'
+import { mockItems, mockManyItems } from './MockData'
 
 const IS_CHROMATIC = isChromatic()
 
@@ -14,7 +15,7 @@ const meta = {
   component: FilterMultiSelect,
   parameters: {
     docs: {
-      source: { type: 'code' },
+      source: { type: 'auto' },
     },
   },
   args: {
@@ -178,6 +179,7 @@ export const WithSectionHeaders: Story = {
   ...FilterMultiSelectTemplate,
   args: {
     isOpen: IS_CHROMATIC || undefined,
+    items: mockManyItems,
     children: (): JSX.Element => (
       <>
         <FilterMultiSelect.SearchInput />
@@ -308,3 +310,78 @@ export const WithSectionNotification: Story = {
     chromatic: { disable: false },
   },
 }
+
+const sourceCode = `
+  <FilterMultiSelect
+    {...filterMultiSelectProps}
+    customMenuPopup={(props): JSX.Element => (
+      // This will replace the default MenuPopup with a custom one. The rest of the component should still be implemented as the FilterMultiSelect pattern.
+      <FilterMultiSelect.ResponsiveMenuPopup {...props} />
+    )}
+  >
+    {/* FilterMultiSelect children */}
+  </FilterMultiSelect>
+`
+
+export const AboveIfAvailable: Story = {
+  ...WithSectionNotification,
+  name: 'With customMenuPopup and vertical placement',
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '650px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+    docs: { source: { code: sourceCode } },
+  },
+  args: {
+    customMenuPopup: (props): JSX.Element => <FilterMultiSelect.ResponsiveMenuPopup {...props} />,
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div style={{ height: '80vh', maxHeight: '500px' }}>Content above</div>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const ShouldResize: Story = {
+  ...AboveIfAvailable,
+  name: 'With customMenuPopup, vertical placement and resized popup',
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: 'Limited vertical space',
+          styles: {
+            width: '1024px',
+            height: '450px',
+          },
+        },
+      },
+      defaultViewport: 'LimitedViewportAutoPlace',
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const triggerButton = await canvas.findByRole('button', {
+      name: /Engineer/i,
+    })
+    await step('Trigger opens the FilterMultiSelect dialog', async () => {
+      await userEvent.click(triggerButton)
+      await waitFor(() => expect(canvas.getByRole('dialog')).toBeVisible())
+    })
+  },
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { FocusScope } from '@react-aria/focus'
 import { DismissButton, useOverlay } from '@react-aria/overlays'
 import { useMenuTriggerContext } from '../../context'
-import styles from './MenuPopup.module.scss'
+import styles from './MenuPopup.module.css'
 
 export type MenuPopupProps = {
   isLoading?: boolean