@kaizen/components 0.0.0-canary-debug-kaizenprovider-20241223004555 → 0.0.0-canary-debug-kaizen-provider-take-2-20241223005900

package/src/Filter/FilterMultiSelect/context/SelectionProvider/SelectionProvider.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useContext, useState, type HTMLAttributes } from 'react'
-import { useListBox } from '@react-aria/listbox'
-import { Item } from '@react-stately/collections'
-import { useListState, type ListState } from '@react-stately/list'
-import { type Selection, type SelectionMode } from '@react-types/shared'
-import { VisuallyHidden } from '~components/VisuallyHidden'
-import { type ItemType, type MultiSelectItem } from '../../types'
-import { useMenuTriggerContext } from '../MenuTriggerProvider'
+import React, { HTMLAttributes, useCallback, useContext, useState } from "react"
+import { useListBox } from "@react-aria/listbox"
+import { Item } from "@react-stately/collections"
+import { ListState, useListState } from "@react-stately/list"
+import { SelectionMode, Selection } from "@react-types/shared"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { ItemType, MultiSelectItem } from "../../types"
+import { useMenuTriggerContext } from "../MenuTriggerProvider"
 
 export type SelectionProviderProps = {
   selectionMode: SelectionMode
@@ -31,12 +31,14 @@ export type SelectionProviderContextType = {
 }
 
 const SelectionContext = React.createContext<SelectionProviderContextType>(
-  {} as SelectionProviderContextType,
+  {} as SelectionProviderContextType
 )
 
-export const SelectionProvider = (props: SelectionProviderProps): JSX.Element => {
+export const SelectionProvider = (
+  props: SelectionProviderProps
+): JSX.Element => {
   const { onSearchInputChange, ...otherProps } = props
-  const [searchQuery, setSearchQuery] = useState<string>('')
+  const [searchQuery, setSearchQuery] = useState<string>("")
   const { menuProps } = useMenuTriggerContext()
   /**
    * While the onSearchInputChange  is a side-effect, this useEffect should be fine.
@@ -53,17 +55,17 @@ export const SelectionProvider = (props: SelectionProviderProps): JSX.Element =>
   const searchFilter = useCallback(
     (nodes: Iterable<MultiSelectItem>): Iterable<MultiSelectItem> =>
       searchQuery
-        ? Array.from(nodes).filter((f) =>
-            f.textValue.toLowerCase().includes(searchQuery.toLowerCase()),
+        ? Array.from(nodes).filter(f =>
+            f.textValue.toLowerCase().includes(searchQuery.toLowerCase())
           )
         : nodes,
-    [searchQuery],
+    [searchQuery]
   )
 
   // Create state based on the incoming props to manage the selection
   const state = useListState({
     ...otherProps,
-    children: (item) => <Item key={item.value}>{item.label}</Item>, // For initialising selection and determined item.renderer, can be only Item or Section
+    children: item => <Item key={item.value}>{item.label}</Item>, // For initialising selection and determined item.renderer, can be only Item or Section
     filter: onSearchInputChange ? undefined : searchFilter, // If the user has passed an `onSearchInputChange` we opt them out of the default filtering
   })
 
@@ -76,7 +78,7 @@ export const SelectionProvider = (props: SelectionProviderProps): JSX.Element =>
       disallowEmptySelection: true, // stop escape key from clearing selection
     },
     state,
-    ref,
+    ref
   )
 
   return (
@@ -96,7 +98,8 @@ export const SelectionProvider = (props: SelectionProviderProps): JSX.Element =>
   )
 }
 
-export const useSelectionContext = (): SelectionProviderContextType => useContext(SelectionContext)
+export const useSelectionContext = (): SelectionProviderContextType =>
+  useContext(SelectionContext)
 
 export const SelectionConsumer = ({
   children,

package/src/Filter/FilterMultiSelect/context/SelectionProvider/index.ts

@@ -1 +1 @@
-export * from './SelectionProvider'
+export * from "./SelectionProvider"

package/src/Filter/FilterMultiSelect/context/index.ts

@@ -1,2 +1,2 @@
-export * from './MenuTriggerProvider'
-export * from './SelectionProvider'
+export * from "./MenuTriggerProvider"
+export * from "./SelectionProvider"

package/src/Filter/FilterMultiSelect/index.ts

@@ -1,5 +1,5 @@
-export * from './FilterMultiSelect'
-export * from './subcomponents'
-export * from './context'
-export * from './types'
-export * from './utils'
+export * from "./FilterMultiSelect"
+export * from "./subcomponents"
+export * from "./context"
+export * from "./types"
+export * from "./utils"

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

@@ -1,4 +1,4 @@
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .listBox {
   list-style: none;

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

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react'
-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 React, { useState, useEffect } from "react"
+import { Collection, Key } from "@react-types/shared"
+import classnames from "classnames"
+import { useSelectionContext } from "../../context/SelectionProvider"
+import { MultiSelectItem } from "../../types"
+import styles from "./ListBox.module.scss"
 
 export type ListBoxItems = {
   selectedItems: MultiSelectItem[]
@@ -19,7 +19,7 @@ export type ListBoxProps = {
 
 const getItemsFromKeys = (
   items: Collection<MultiSelectItem>,
-  keys: Set<Key>,
+  keys: Set<Key>
 ): MultiSelectItem[] => {
   const itemKeys = Array.from(keys)
   return itemKeys.reduce<MultiSelectItem[]>((acc, itemKey) => {
@@ -48,7 +48,7 @@ export const ListBox = ({ children }: ListBoxProps): JSX.Element => {
   const selectedItems = getItemsFromKeys(items, selectedKeys)
 
   const unselectedItems = Array.from(items).filter(
-    (item) => !disabledKeys.has(item.key) && !selectedKeys.has(item.key),
+    item => !disabledKeys.has(item.key) && !selectedKeys.has(item.key)
   )
   const allItems = Array.from(items)
   const hasNoItems = allItems.length === 0
@@ -71,8 +71,6 @@ export const ListBox = ({ children }: ListBoxProps): JSX.Element => {
       allItems,
       hasNoItems,
     })
-    // @todo: Fix if possible - avoiding breaking in eslint upgrade
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectionState.collection.size])
 
   if (hasNoItems) {
@@ -96,4 +94,4 @@ export const ListBox = ({ children }: ListBoxProps): JSX.Element => {
   )
 }
 
-ListBox.displayName = 'FilterMultiSelect.ListBox'
+ListBox.displayName = "FilterMultiSelect.ListBox"

package/src/Filter/FilterMultiSelect/subcomponents/ListBox/index.ts

@@ -1 +1 @@
-export * from './ListBox'
+export * from "./ListBox"

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

@@ -1,6 +1,6 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .listBoxSection {
   display: grid;

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

@@ -1,36 +1,36 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { ListBoxSection } from './ListBoxSection'
+import React from "react"
+import { render } from "@testing-library/react"
+import { ListBoxSection } from "./ListBoxSection"
 
-describe('<ListBoxSection />', () => {
-  describe('sectionName only', () => {
-    it('will only have aria-label', () => {
+describe("<ListBoxSection />", () => {
+  describe("sectionName only", () => {
+    it("will only have aria-label", () => {
       const { getByRole } = render(
         <ListBoxSection sectionName="Test sectionName only" items={[]}>
           {() => undefined}
-        </ListBoxSection>,
+        </ListBoxSection>
       )
-      const group = getByRole('group')
-      expect(group).toHaveAttribute('aria-label', 'Test sectionName only')
-      expect(group).not.toHaveTextContent('Test sectionName only')
+      const group = getByRole("group")
+      expect(group).toHaveAttribute("aria-label", "Test sectionName only")
+      expect(group).not.toHaveTextContent("Test sectionName only")
     })
   })
 
-  describe('sectionHeader only', () => {
-    it('will have sectionHeader content', () => {
+  describe("sectionHeader only", () => {
+    it("will have sectionHeader content", () => {
       const { getByRole } = render(
         <ListBoxSection sectionHeader="Test sectionHeader only" items={[]}>
           {() => undefined}
-        </ListBoxSection>,
+        </ListBoxSection>
       )
-      const group = getByRole('group', { name: 'Test sectionHeader only' })
+      const group = getByRole("group", { name: "Test sectionHeader only" })
       expect(group).toBeInTheDocument()
-      expect(group).toHaveTextContent('Test sectionHeader only')
+      expect(group).toHaveTextContent("Test sectionHeader only")
     })
   })
 
-  describe('sectionHeader and sectionName', () => {
-    it('will have combined accessible name', () => {
+  describe("sectionHeader and sectionName", () => {
+    it("will have combined accessible name", () => {
       const { getByRole } = render(
         <ListBoxSection
           sectionName="Hidden group name"
@@ -38,13 +38,13 @@ describe('<ListBoxSection />', () => {
           items={[]}
         >
           {() => undefined}
-        </ListBoxSection>,
+        </ListBoxSection>
       )
-      const group = getByRole('group', {
-        name: 'Hidden group name. sectionHeader name',
+      const group = getByRole("group", {
+        name: "Hidden group name. sectionHeader name",
       })
       expect(group).toBeInTheDocument()
-      expect(group).toHaveTextContent('Hidden group name. sectionHeader name')
+      expect(group).toHaveTextContent("Hidden group name. sectionHeader name")
     })
   })
 })

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

@@ -1,7 +1,7 @@
-import React, { useId, type ReactNode } from 'react'
-import { VisuallyHidden } from '~components/VisuallyHidden'
-import { type MultiSelectItem } from '../../types'
-import styles from './ListBoxSection.module.scss'
+import React, { ReactNode, useId } from "react"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { MultiSelectItem } from "../../types"
+import styles from "./ListBoxSection.module.scss"
 
 type SectionNameProps = {
   /**
@@ -36,7 +36,7 @@ export const ListBoxSection = ({
   ...restProps
 }: ListBoxSectionProps): JSX.Element => {
   const listSectionId = useId()
-  const hasSectionHeader = 'sectionHeader' in restProps
+  const hasSectionHeader = "sectionHeader" in restProps
   return (
     <li role="presentation">
       <ul
@@ -46,7 +46,11 @@ export const ListBoxSection = ({
         role="group"
       >
         {hasSectionHeader && (
-          <li className={styles.listBoxSectionHeader} id={listSectionId} role="presentation">
+          <li
+            className={styles.listBoxSectionHeader}
+            id={listSectionId}
+            role="presentation"
+          >
             {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>}
             {restProps.sectionHeader}
           </li>
@@ -57,9 +61,9 @@ export const ListBoxSection = ({
          * the role="presentation" will throw an error a11y warning "Element has children which are not allowed".
          This is expected and is an accepted issue / potential limitation with axe
          */}
-        {Array.from(items).map((node) => node != undefined && children(node))}
+        {Array.from(items).map(node => node != undefined && children(node))}
       </ul>
     </li>
   )
 }
-ListBoxSection.displayName = 'ListBoxSection'
+ListBoxSection.displayName = "ListBoxSection"

package/src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/index.ts

@@ -1 +1 @@
-export * from './ListBoxSection'
+export * from "./ListBoxSection"

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

@@ -1,4 +1,4 @@
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .container {
   padding: $spacing-sm $spacing-sm 0;

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

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Button, type ButtonProps } from '~components/Button'
-import styles from './LoadMoreButton.module.scss'
+import React from "react"
+import { Button, ButtonProps } from "~components/__actions__/v2"
+import styles from "./LoadMoreButton.module.scss"
 
 export type LoadMoreButtonProps = ButtonProps
 
@@ -10,4 +10,4 @@ export const LoadMoreButton = (props: LoadMoreButtonProps): JSX.Element => (
   </div>
 )
 
-LoadMoreButton.displayName = 'FilterMultiSelect.LoadMoreButton'
+LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton"

package/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/index.ts

@@ -1 +1 @@
-export * from './LoadMoreButton'
+export * from "./LoadMoreButton"

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss

@@ -1,5 +1,5 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .footer {
   border-top: 1px solid rgba($color-gray-600-rgb, 0.1);

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import styles from './MenuFooter.module.scss'
+import React from "react"
+import styles from "./MenuFooter.module.scss"
 
 export type MenuFooterProps = {
   children: React.ReactNode
@@ -9,4 +9,4 @@ export const MenuFooter = ({ children }: MenuFooterProps): JSX.Element => (
   <div className={styles.footer}>{children}</div>
 )
 
-MenuFooter.displayName = 'FilterMultiSelect.MenuFooter'
+MenuFooter.displayName = "FilterMultiSelect.MenuFooter"

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/index.ts

@@ -1 +1 @@
-export * from './MenuFooter'
+export * from "./MenuFooter"

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss

@@ -1,4 +1,4 @@
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .loadingInput {
   margin-bottom: $spacing-sm;

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { LoadingInput, LoadingParagraph } from '~components/Loading'
-import { MenuFooter } from '../MenuFooter'
-import styles from './MenuLoadingSkeleton.module.scss'
+import React from "react"
+import { LoadingInput, LoadingParagraph } from "~components/Loading"
+import { MenuFooter } from "../MenuFooter"
+import styles from "./MenuLoadingSkeleton.module.scss"
 
 export type MenuLoadingSkeletonProps = {
   isAnimated?: boolean
@@ -12,7 +12,10 @@ export const MenuLoadingSkeleton = ({
 }: MenuLoadingSkeletonProps): JSX.Element => (
   <>
     <div className={styles.loadingContainer}>
-      <LoadingInput classNameOverride={styles.loadingInput} isAnimated={isAnimated} />
+      <LoadingInput
+        classNameOverride={styles.loadingInput}
+        isAnimated={isAnimated}
+      />
       <LoadingParagraph isAnimated={isAnimated} />
       <LoadingParagraph isAnimated={isAnimated} />
       <LoadingParagraph isAnimated={isAnimated} />
@@ -26,4 +29,4 @@ export const MenuLoadingSkeleton = ({
   </>
 )
 
-MenuLoadingSkeleton.displayName = 'FilterMultiSelect.MenuLoadingSkeleton'
+MenuLoadingSkeleton.displayName = "FilterMultiSelect.MenuLoadingSkeleton"

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/index.ts

@@ -1 +1 @@
-export * from './MenuLoadingSkeleton'
+export * from "./MenuLoadingSkeleton"

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/index.ts

@@ -1,2 +1,2 @@
-export * from './MenuFooter'
-export * from './MenuLoadingSkeleton'
+export * from "./MenuFooter"
+export * from "./MenuLoadingSkeleton"

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

@@ -1,7 +1,7 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
 
 // figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
 $menu-container-width: 294px;
@@ -17,6 +17,10 @@ $menu-container-max-height: 312px;
   box-shadow: $shadow-large-box-shadow;
   padding: $spacing-sm 0;
   margin-top: $spacing-xs;
-  text-align: start;
+  text-align: left;
   width: $menu-container-width;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
 }

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

@@ -1,8 +1,8 @@
-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 React from "react"
+import { FocusScope } from "@react-aria/focus"
+import { useOverlay, DismissButton } from "@react-aria/overlays"
+import { useMenuTriggerContext } from "../../context"
+import styles from "./MenuPopup.module.scss"
 
 export type MenuPopupProps = {
   isLoading?: boolean
@@ -28,7 +28,7 @@ export const MenuPopup = ({
       isOpen: menuTriggerState.isOpen,
       isDismissable: true,
     },
-    overlayRef,
+    overlayRef
   )
 
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
@@ -58,4 +58,4 @@ export const MenuPopup = ({
   )
 }
 
-MenuPopup.displayName = 'FilterMultiSelect.MenuPopup'
+MenuPopup.displayName = "FilterMultiSelect.MenuPopup"

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/index.ts

@@ -1 +1 @@
-export * from './MenuPopup'
+export * from "./MenuPopup"

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

@@ -1,7 +1,7 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/spacing';
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
 
 $iconAndBadgeHeight: $spacing-md;
 
@@ -57,10 +57,11 @@ $iconAndBadgeHeight: $spacing-md;
     &::after {
       $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-      content: '';
+      content: "";
       position: absolute;
       background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
       border-radius: $border-focus-ring-border-radius;
       inset: calc(-1 * #{$focus-ring-offset});
       z-index: 1; // show border when sibling option is hovered

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -1,41 +1,42 @@
 // A11y and interaction are tested in SelectionProvider.spec, hence not covered here
 
-import React from 'react'
-import { useOption } from '@react-aria/listbox'
-import { render, screen } from '@testing-library/react'
-import { beforeEach, vi, type Mock } from 'vitest'
-import { type ItemType } from '../../types'
-import { MultiSelectOption, type MultiSelectOptionProps } from './MultiSelectOption'
-import styles from './MultiSelectOption.module.scss'
+import React from "react"
+import { useOption } from "@react-aria/listbox"
+import { render, screen } from "@testing-library/react"
+import { vi, beforeEach, Mock } from "vitest"
+import { ItemType } from "../../types"
+import { MultiSelectOption, MultiSelectOptionProps } from "./MultiSelectOption"
+import styles from "./MultiSelectOption.module.scss"
 
-vi.mock('@react-aria/listbox', () => ({
+vi.mock("@react-aria/listbox", () => ({
   useOption: vi.fn(),
 }))
 
-vi.mock('../../context', () => ({
+vi.mock("../../context", () => ({
   useSelectionContext: (): { selectionState: Record<string, unknown> } => ({
     selectionState: {},
   }),
 }))
 
-const itemMock: MultiSelectOptionProps['item'] & { value: ItemType } = {
-  index: 0,
-  type: 'type-mock',
-  key: 'key-mock',
-  value: { label: 'label-mock', value: 'value-mock' },
+const itemMock: MultiSelectOptionProps["item"] & { value: ItemType } = {
+  type: "type-mock",
+  key: "key-mock",
+  value: { label: "label-mock", value: "value-mock" },
   level: 0,
   hasChildNodes: false,
   childNodes: [],
   rendered: <>rendered-mock</>,
-  textValue: '',
+  textValue: "",
 }
 
 const MultiSelectOptionWrapper = ({
   item = itemMock,
-}: Partial<MultiSelectOptionProps>): JSX.Element => <MultiSelectOption item={item} />
+}: Partial<MultiSelectOptionProps>): JSX.Element => (
+  <MultiSelectOption item={item} />
+)
 
-describe('<MultiSelectOptionWrapper /> - Visual content', () => {
-  describe('Given item is unselected', () => {
+describe("<MultiSelectOptionWrapper /> - Visual content", () => {
+  describe("Given item is unselected", () => {
     beforeEach(() => {
       ;(useOption as Mock).mockReturnValue({
         optionProps: {},
@@ -44,18 +45,18 @@ describe('<MultiSelectOptionWrapper /> - Visual content', () => {
       })
       render(<MultiSelectOptionWrapper />)
     })
-    it('shows the provided rendered node', () => {
-      const option = screen.getByText('rendered-mock')
+    it("shows the provided rendered node", () => {
+      const option = screen.getByText("rendered-mock")
       expect(option).toBeVisible()
     })
 
-    it('has aria-label as the item.label', () => {
-      const option = screen.getByLabelText('label-mock')
+    it("has aria-label as the item.label", () => {
+      const option = screen.getByLabelText("label-mock")
       expect(option).toBeVisible()
     })
   })
 
-  describe('Given item is disabled', () => {
+  describe("Given item is disabled", () => {
     beforeEach(() => {
       ;(useOption as Mock).mockReturnValue({
         optionProps: {},
@@ -65,13 +66,13 @@ describe('<MultiSelectOptionWrapper /> - Visual content', () => {
       render(<MultiSelectOptionWrapper />)
     })
 
-    it('has a disabled class', () => {
-      const label = screen.getByLabelText('label-mock')
+    it("has a disabled class", () => {
+      const label = screen.getByLabelText("label-mock")
       expect(label).toHaveClass(styles.isDisabled)
     })
   })
 
-  describe('Given count is provided', () => {
+  describe("Given count is provided", () => {
     beforeEach(() => {
       ;(useOption as Mock).mockReturnValue({
         optionProps: {},
@@ -82,20 +83,20 @@ describe('<MultiSelectOptionWrapper /> - Visual content', () => {
         <MultiSelectOptionWrapper
           item={{
             ...itemMock,
-            value: { ...itemMock.value, count: 'count-mock' },
+            value: { ...itemMock.value, count: "count-mock" },
           }}
-        />,
+        />
       )
     })
 
-    it('shows the count in the badge', () => {
-      const badge = screen.getByText('count-mock')
+    it("shows the count in the badge", () => {
+      const badge = screen.getByText("count-mock")
       expect(badge).toBeInTheDocument()
     })
 
-    it('has aria-description to describe the count are available for this option', () => {
-      const option = screen.getByLabelText('label-mock')
-      expect(option).toHaveAccessibleDescription('count-mock available')
+    it("has aria-description to describe the count are available for this option", () => {
+      const option = screen.getByLabelText("label-mock")
+      expect(option).toHaveAccessibleDescription("count-mock available")
     })
   })
 })