@kaizen/components 0.0.0-canary-update-floating-fms-20250715035144 → 0.0.0-canary-handle-avatar-error-20250716233812

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

@@ -1,17 +1,10 @@
-import React, { type HTMLAttributes } from 'react';
-import { type UseFloatingOptions } from '@floating-ui/react-dom';
-import { type OverrideClassName } from "../../../../types/OverrideClassName";
-export type FloatingConfig = Pick<UseFloatingOptions, 'placement' | 'strategy' | 'whileElementsMounted'> & {
-    shouldResize?: boolean;
-    shouldFlip?: boolean;
-};
+import React from 'react';
 export type MenuPopupProps = {
-    children: React.ReactNode;
     isLoading?: boolean;
     loadingSkeleton?: React.ReactNode;
-    floatingConfig?: FloatingConfig;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+    children: React.ReactNode;
+};
 export declare const MenuPopup: {
-    ({ children, floatingConfig, classNameOverride, isLoading, loadingSkeleton, ...restProps }: MenuPopupProps): JSX.Element;
+    ({ isLoading, loadingSkeleton, children, }: MenuPopupProps): JSX.Element;
     displayName: string;
 };

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

@@ -19,6 +19,9 @@ export type LikertScaleProps = {
     'onSelect': (value: ScaleItem | null) => void;
 };
 /**
+ * @deprecated This component will be renamed to LikertScale in v2.
+ * Start importing as LikertScale instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */

package/dist/types/Skirt/Skirt.d.ts

@@ -6,6 +6,9 @@ export type SkirtProps = {
     variant?: Variant;
     titleBlockHasNavigation?: boolean;
 } & ContentProps;
+/**
+ * @deprecated This component will be removed in v2. Please remove any usages.
+ */
 export declare const Skirt: {
     ({ children, variant, titleBlockHasNavigation, classNameOverride, ...restProps }: SkirtProps): JSX.Element;
     displayName: string;

package/dist/types/Skirt/subcomponents/SkirtCard/SkirtCard.d.ts

@@ -1,5 +1,8 @@
 import { type CardProps } from "../../../Card";
 export type SkirtCardProps = CardProps;
+/**
+ * @deprecated This component will be removed in v2. Use a regular Card component instead.
+ */
 export declare const SkirtCard: {
     (props: SkirtCardProps): JSX.Element;
     displayName: string;

package/dist/types/SplitButton/SplitButton.d.ts

@@ -36,6 +36,8 @@ export type SplitButtonProps = {
     dir?: 'ltr' | 'rtl';
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 /**
+ * @deprecated This component will be removed in v2. Use a Button and Menu component instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896196/Split+Button Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-splitbutton--docs Storybook}
  */

package/dist/types/TitleBlockZen/TitleBlockZen.d.ts

@@ -1,5 +1,8 @@
 import { type TitleBlockProps } from './types';
 /**
+ * @deprecated This component will be renamed to TitleBlock in v2.
+ * Start importing as TitleBlock instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-titleblock--docs Storybook}
  */

package/dist/types/__alpha__/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,23 @@
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type OverrideClassName } from "../../types/OverrideClassName";
+export type SingleSelectProps = {
+    children?: React.ReactNode;
+} & OverrideClassName<HTMLAttributes<Element>>;
+export declare const SingleSelect: {
+    ({ classNameOverride, children, ...restProps }: PropsWithChildren<SingleSelectProps>): JSX.Element;
+    displayName: string;
+    List: {
+        ({ children, className, ...props }: import("react-aria-components").ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+        displayName: string;
+    };
+    ListItem: {
+        ({ children, className, ...props }: import("react-aria-components").ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+        displayName: string;
+    };
+    ListSection: {
+        ({ name, className, children, ...props }: import("react-aria-components").ListBoxSectionProps<object> & PropsWithChildren & {
+            name: string;
+        }): React.ReactElement;
+        displayName: string;
+    };
+};

package/dist/types/__alpha__/SingleSelect/_docs/mockData.d.ts

@@ -0,0 +1,59 @@
+export declare const singleMockItems: {
+    label: string;
+    value: string;
+}[];
+export declare const groupedMockItems: {
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}[];
+export declare const mixedMockItemsDisabled: ({
+    label: string;
+    value: string;
+    disabled: boolean;
+    options?: undefined;
+} | {
+    label: string;
+    value: string;
+    disabled?: undefined;
+    options?: undefined;
+} | {
+    label: string;
+    options: ({
+        label: string;
+        value: string;
+        disabled?: undefined;
+    } | {
+        label: string;
+        value: string;
+        disabled: boolean;
+    })[];
+    value?: undefined;
+    disabled?: undefined;
+})[];
+export declare const mixedMockItemsUngroupedFirst: ({
+    label: string;
+    value: string;
+    options?: undefined;
+} | {
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: undefined;
+})[];
+export declare const mixedMockItemsUnordered: ({
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: undefined;
+} | {
+    label: string;
+    value: string;
+    options?: undefined;
+})[];

package/dist/types/__alpha__/SingleSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleSelect';

package/dist/types/__alpha__/SingleSelect/subcomponents/List/List.d.ts

@@ -0,0 +1,6 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxProps } from 'react-aria-components';
+export declare const List: {
+    ({ children, className, ...props }: ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/List/index.d.ts

@@ -0,0 +1 @@
+export * from './List';

package/dist/types/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.d.ts

@@ -0,0 +1,6 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxItemProps } from 'react-aria-components';
+export declare const ListItem: {
+    ({ children, className, ...props }: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/ListItem/index.d.ts

@@ -0,0 +1 @@
+export * from './ListItem';

package/dist/types/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxSectionProps } from 'react-aria-components';
+export declare const ListSection: {
+    ({ name, className, children, ...props }: ListBoxSectionProps<object> & PropsWithChildren & {
+        name: string;
+    }): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/ListSection/index.d.ts

@@ -0,0 +1 @@
+export * from './ListSection';

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.d.ts

@@ -0,0 +1 @@
+export declare const Trigger: () => JSX.Element;

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/index.d.ts

@@ -0,0 +1 @@
+export * from './Trigger';

package/dist/types/__alpha__/SingleSelect/subcomponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './List';
+export * from './ListSection';
+export * from './ListItem';
+export * from './Trigger';

package/dist/types/__alpha__/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleSelect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-update-floating-fms-20250715035144",
+  "version": "0.0.0-canary-handle-avatar-error-20250716233812",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, type HTMLAttributes } from 'react'
+import React, { useEffect, useRef, useState, type HTMLAttributes, type SyntheticEvent } from 'react'
 import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__next__/Icon'
@@ -132,7 +132,10 @@ export const Avatar = ({
     setAvatarState(avatarSrc ? 'loading' : 'none')
   }, [avatarSrc])
 
-  const onImageFailure = (): void => setAvatarState('error')
+  const onImageFailure = (event: SyntheticEvent<HTMLImageElement>): void => {
+    event.preventDefault()
+    setAvatarState('error')
+  }
   const onImageSuccess = (): void => setAvatarState('success')
 
   // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184

package/src/Avatar/_docs/Avatar.stickersheet.stories.tsx

@@ -22,7 +22,7 @@ const PROPS_PHOTO_PERSONAL: GenericAvatarProps = {
   disableInitials: false,
   isCurrentUser: true,
   avatarSrc:
-    'https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png',
+    'https://cultureamp.cultureamp.com/profile_images/12d1f70b-4e6d-8a65-784c-ea6768000001/31cb1c5d-ad7c-4e7c-8d05-6aa4bfa07afd/profile_image.jpg',
 }
 
 const PROPS_INITIALS_PERSONAL: GenericAvatarProps = {
@@ -51,7 +51,7 @@ const PROPS_INITIALS_LONG: GenericAvatarProps = {
 
 const PROPS_COMPANY: CompanyAvatarProps = {
   fullName: 'Hooli',
-  avatarSrc: 'https://d1e7r7b0lb8p4d.cloudfront.net/third-party-logos/hooli-logo.svg',
+  avatarSrc: 'https://d1e7r7b0lb8p4d.cloudfront.net/third-party-logos/hooli-logod.svg',
   isCompany: true,
 }
 

package/src/Button/Button/Button.tsx

@@ -5,6 +5,11 @@ import { GenericButton, type ButtonRef, type GenericButtonProps } from '../Gener
 export type ButtonProps = GenericButtonProps
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
  */

package/src/Button/IconButton/IconButton.tsx

@@ -9,6 +9,11 @@ import {
 export type IconButtonProps = Omit<BaseButtonProps, 'iconPosition'> & WorkingButtonProps
 
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
  */

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

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

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

@@ -30,16 +30,6 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 
 <Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
 
-### With floatingConfig
-
-You can also use the `floatingConfig` to leverage a subset of `Floating UI's` [configurable options](https://floating-ui.com/docs/usefloating). While in most cases the default behavior should satisfy most scenarios, this can be used when there is limited space available in the viewport and you cannot rely on the popup add height to the page.
-
-The `shouldFlip` property will enable the [autoPlacement](https://floating-ui.com/docs/autoPlacement) middleware and `shouldResize` will enable the [size](https://floating-ui.com/docs/size) middleware.
-
-The `shouldFlip` middleware will automatically flip the position of the menu when there is not enough space to display it in the intended direction, while the `shouldResize` middleware will resize the popover based on the window size availability
-
-<Canvas of={FilterMultiSelectStories.AboveIfAvailable} />
-
 ### 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

@@ -5,7 +5,7 @@ import isChromatic from 'chromatic'
 import { InlineNotification } from '~components/Notification'
 import { TextField } from '~components/TextField'
 import { FilterMultiSelect, getSelectedOptionLabels } from '..'
-import { mockItems, mockManyItems } from './MockData'
+import { mockItems } from './MockData'
 
 const IS_CHROMATIC = isChromatic()
 
@@ -308,180 +308,3 @@ export const WithSectionNotification: Story = {
     chromatic: { disable: false },
   },
 }
-
-export const WithManyOptions: Story = {
-  ...FilterMultiSelectTemplate,
-  name: 'With many options',
-  args: {
-    items: mockManyItems,
-    children: (): JSX.Element => (
-      <>
-        <FilterMultiSelect.SearchInput />
-        <FilterMultiSelect.ListBox>
-          {({ selectedItems, unselectedItems, hasNoItems }): JSX.Element => (
-            <>
-              {hasNoItems ? (
-                <FilterMultiSelect.NoResults>No results found.</FilterMultiSelect.NoResults>
-              ) : (
-                <>
-                  {selectedItems.length > 0 && (
-                    <FilterMultiSelect.ListBoxSection
-                      items={selectedItems}
-                      sectionHeader="Selected items"
-                    >
-                      {(item): JSX.Element => (
-                        <FilterMultiSelect.Option key={item.key} item={item} />
-                      )}
-                    </FilterMultiSelect.ListBoxSection>
-                  )}
-
-                  {unselectedItems.length > 0 && (
-                    <FilterMultiSelect.ListBoxSection
-                      items={unselectedItems}
-                      sectionHeader="Unselected items"
-                    >
-                      {(item): JSX.Element => (
-                        <FilterMultiSelect.Option key={item.key} item={item} />
-                      )}
-                    </FilterMultiSelect.ListBoxSection>
-                  )}
-
-                  {unselectedItems.length > 0 && (
-                    <FilterMultiSelect.ListBoxSection
-                      items={unselectedItems}
-                      sectionHeader="Unselected items 2"
-                    >
-                      {(item): JSX.Element => (
-                        <FilterMultiSelect.Option key={item.key} item={item} />
-                      )}
-                    </FilterMultiSelect.ListBoxSection>
-                  )}
-
-                  {unselectedItems.length > 0 && (
-                    <FilterMultiSelect.ListBoxSection
-                      items={unselectedItems}
-                      sectionHeader="Unselected items 3"
-                    >
-                      {(item): JSX.Element => (
-                        <FilterMultiSelect.Option key={item.key} item={item} />
-                      )}
-                    </FilterMultiSelect.ListBoxSection>
-                  )}
-                </>
-              )}
-            </>
-          )}
-        </FilterMultiSelect.ListBox>
-        <FilterMultiSelect.MenuFooter>
-          <FilterMultiSelect.SelectAllButton />
-          <FilterMultiSelect.ClearButton />
-        </FilterMultiSelect.MenuFooter>
-      </>
-    ),
-  },
-}
-
-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 ShouldFlip: Story = {
-  ...WithManyOptions,
-  name: 'With flipping Popup',
-  args: {
-    floatingConfig: {
-      shouldFlip: true,
-      shouldResize: false,
-    },
-  },
-  parameters: {
-    docs: { source: { code: floatingOptionsSourceCode } },
-  },
-  decorators: [
-    (Story) => (
-      <div>
-        <div style={{ height: '80vh', background: 'rebeccapurple' }}>content</div>
-        <Story />
-        <div style={{ height: '80vh', background: 'blue' }}>content 2</div>
-      </div>
-    ),
-  ],
-}
-
-export const ShouldFlipAndResize: Story = {
-  ...WithManyOptions,
-  name: 'With flipping and resizing Popup',
-  args: {
-    floatingConfig: {
-      shouldFlip: true,
-      shouldResize: true,
-    },
-  },
-  parameters: {
-    docs: { source: { code: floatingOptionsSourceCode } },
-  },
-  decorators: [
-    (Story) => (
-      <div>
-        <div style={{ height: '80vh', background: 'rebeccapurple' }}>content</div>
-        <Story />
-        <div style={{ height: '80vh', background: 'blue' }}>content 2</div>
-      </div>
-    ),
-  ],
-}
-
-export const AboveIfAvailable: Story = {
-  ...WithManyOptions,
-  name: 'With limited viewport and autoplacement above',
-  parameters: {
-    viewport: {
-      viewports: {
-        LimitedViewportAutoPlace: {
-          name: 'Limited vertical space',
-          styles: {
-            width: '1024px',
-            height: '500px',
-          },
-        },
-      },
-      defaultViewport: 'LimitedViewportAutoPlace',
-    },
-  },
-  args: {
-    floatingConfig: {
-      shouldFlip: true,
-      shouldResize: true,
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="mt-[350px]">
-        <Story />
-      </div>
-    ),
-  ],
-}

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

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

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

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

@@ -47,7 +47,7 @@ export const ListBoxSection = ({
       >
         {hasSectionHeader && (
           <li className={styles.listBoxSectionHeader} id={listSectionId} role="presentation">
-            {/* {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>} */}
+            {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>}
             {restProps.sectionHeader}
           </li>
         )}