@kaizen/components 1.68.5 → 1.68.7

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { FilterButton } from "~components/Filter/FilterButton"
-import { FilterSelect, FilterSelectProps } from "./FilterSelect"
-import { mixedMockItemsUnordered, singleMockItems } from "./_docs/mockData"
-import { SelectOption } from "./types"
+import React, { useState } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FilterButton } from '~components/Filter/FilterButton'
+import { FilterSelect, FilterSelectProps } from './FilterSelect'
+import { mixedMockItemsUnordered, singleMockItems } from './_docs/mockData'
+import { SelectOption } from './types'
 
 const user = userEvent.setup()
 
@@ -16,18 +16,16 @@ const FilterSelectWrapper = ({
   ...restProps
 }: Partial<FilterSelectProps>): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(propsIsOpen)
-  const [selected, setSelected] = React.useState<
-    FilterSelectProps["selectedKey"]
-  >(selectedKey ?? null)
+  const [selected, setSelected] = React.useState<FilterSelectProps['selectedKey']>(
+    selectedKey ?? null,
+  )
 
   return (
     <FilterSelect
       label="Coffee"
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      renderTrigger={(triggerButtonProps): JSX.Element => (
-        <FilterButton {...triggerButtonProps} />
-      )}
+      renderTrigger={(triggerButtonProps): JSX.Element => <FilterButton {...triggerButtonProps} />}
       items={items}
       selectedKey={selected}
       onSelectionChange={(key): void => {
@@ -39,266 +37,258 @@ const FilterSelectWrapper = ({
   )
 }
 
-describe("<FilterSelect>", () => {
-  it("does not show the options initially", () => {
+describe('<FilterSelect>', () => {
+  it('does not show the options initially', () => {
     render(<FilterSelectWrapper />)
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
   })
 
-  it("shows the options initially when isOpen is true", async () => {
+  it('shows the options initially when isOpen is true', async () => {
     render(<FilterSelectWrapper isOpen />)
     await waitFor(() => {
-      expect(screen.getByRole("listbox")).toBeVisible()
+      expect(screen.getByRole('listbox')).toBeVisible()
     })
   })
 
-  describe("Trigger", () => {
-    it("shows the selected option in the button", () => {
+  describe('Trigger', () => {
+    it('shows the selected option in the button', () => {
       render(<FilterSelectWrapper selectedKey="magic" />)
-      const trigger = screen.getByRole("button", {
-        name: "Coffee : Magic",
+      const trigger = screen.getByRole('button', {
+        name: 'Coffee : Magic',
       })
       expect(trigger).toBeVisible()
     })
 
-    describe("Trigger - Mouse interaction", () => {
-      it("shows the options when the filter button is clicked", async () => {
+    describe('Trigger - Mouse interaction', () => {
+      it('shows the options when the filter button is clicked', async () => {
         render(<FilterSelectWrapper />)
-        const trigger = screen.getByRole("button", { name: "Coffee" })
+        const trigger = screen.getByRole('button', { name: 'Coffee' })
         await user.click(trigger)
         await waitFor(() => {
-          expect(screen.queryByRole("listbox")).toBeVisible()
+          expect(screen.queryByRole('listbox')).toBeVisible()
         })
       })
 
-      it("closes when user clicks outside of the menu", async () => {
+      it('closes when user clicks outside of the menu', async () => {
         render(<FilterSelectWrapper isOpen />)
         await user.click(document.body)
         await waitFor(() => {
-          expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
         })
       })
 
-      it("closes when user clicks on an option", async () => {
+      it('closes when user clicks on an option', async () => {
         render(<FilterSelectWrapper isOpen />)
-        const option = screen.getByRole("option", { name: "Magic" })
+        const option = screen.getByRole('option', { name: 'Magic' })
         await user.click(option)
         await waitFor(() => {
-          expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
         })
       })
     })
 
-    describe("Trigger - Keyboard interaction", () => {
-      it("opens the menu when user hits enter key", async () => {
+    describe('Trigger - Keyboard interaction', () => {
+      it('opens the menu when user hits enter key', async () => {
         render(<FilterSelectWrapper />)
-        const trigger = screen.getByRole("button", { name: "Coffee" })
+        const trigger = screen.getByRole('button', { name: 'Coffee' })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{Enter}")
+        await user.keyboard('{Enter}')
         await waitFor(() => {
-          expect(screen.queryByRole("listbox")).toBeVisible()
+          expect(screen.queryByRole('listbox')).toBeVisible()
         })
       })
 
-      it("moves the focus to the first focusable element inside the menu initially", async () => {
+      it('moves the focus to the first focusable element inside the menu initially', async () => {
         render(<FilterSelectWrapper isOpen />)
-        expect(screen.queryByRole("listbox")).toBeVisible()
+        expect(screen.queryByRole('listbox')).toBeVisible()
         await waitFor(() => {
-          expect(screen.getAllByRole("option")[0]).toHaveFocus()
+          expect(screen.getAllByRole('option')[0]).toHaveFocus()
         })
       })
 
-      it("moves focus to the first item on ArrowDown if nothing has been selected", async () => {
+      it('moves focus to the first item on ArrowDown if nothing has been selected', async () => {
         render(<FilterSelectWrapper selectedKey={undefined} />)
-        const trigger = screen.getByRole("button", { name: "Coffee" })
+        const trigger = screen.getByRole('button', { name: 'Coffee' })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{ArrowDown}")
+        await user.keyboard('{ArrowDown}')
 
         await waitFor(() => {
-          expect(screen.getAllByRole("option")[0]).toHaveFocus()
+          expect(screen.getAllByRole('option')[0]).toHaveFocus()
         })
       })
-      it("moves focus to the last item on ArrowUp if nothing has been selected", async () => {
+      it('moves focus to the last item on ArrowUp if nothing has been selected', async () => {
         render(<FilterSelectWrapper selectedKey={undefined} />)
-        const trigger = screen.getByRole("button", { name: "Coffee" })
+        const trigger = screen.getByRole('button', { name: 'Coffee' })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{ArrowUp}")
+        await user.keyboard('{ArrowUp}')
 
         await waitFor(() => {
-          const options = screen.getAllByRole("option")
+          const options = screen.getAllByRole('option')
           expect(options[options.length - 1]).toHaveFocus()
         })
       })
-      it("moves focus to the current selected item on Enter", async () => {
+      it('moves focus to the current selected item on Enter', async () => {
         render(<FilterSelectWrapper selectedKey="hazelnut" />)
-        const trigger = screen.getByRole("button", {
-          name: "Coffee : Hazelnut",
+        const trigger = screen.getByRole('button', {
+          name: 'Coffee : Hazelnut',
         })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{Enter}")
+        await user.keyboard('{Enter}')
 
         await waitFor(() => {
-          expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
+          expect(screen.getByRole('option', { name: 'Hazelnut' })).toHaveFocus()
         })
       })
-      it("moves focus to the current selected item on ArrowUp", async () => {
+      it('moves focus to the current selected item on ArrowUp', async () => {
         render(<FilterSelectWrapper selectedKey="hazelnut" />)
-        const trigger = screen.getByRole("button", {
-          name: "Coffee : Hazelnut",
+        const trigger = screen.getByRole('button', {
+          name: 'Coffee : Hazelnut',
         })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{ArrowUp}")
+        await user.keyboard('{ArrowUp}')
 
         await waitFor(() => {
-          expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
+          expect(screen.getByRole('option', { name: 'Hazelnut' })).toHaveFocus()
         })
       })
-      it("moves focus to the current selected item on ArrowDown", async () => {
+      it('moves focus to the current selected item on ArrowDown', async () => {
         render(<FilterSelectWrapper selectedKey="hazelnut" />)
-        const trigger = screen.getByRole("button", {
-          name: "Coffee : Hazelnut",
+        const trigger = screen.getByRole('button', {
+          name: 'Coffee : Hazelnut',
         })
         await user.tab()
         await waitFor(() => {
           expect(trigger).toHaveFocus()
         })
-        await user.keyboard("{ArrowDown}")
+        await user.keyboard('{ArrowDown}')
 
         await waitFor(() => {
-          expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
+          expect(screen.getByRole('option', { name: 'Hazelnut' })).toHaveFocus()
         })
       })
-      it("closes when user hits the escape key", async () => {
+      it('closes when user hits the escape key', async () => {
         render(<FilterSelectWrapper isOpen />)
-        expect(screen.queryByRole("listbox")).toBeVisible()
-        await user.keyboard("{Escape}")
+        expect(screen.queryByRole('listbox')).toBeVisible()
+        await user.keyboard('{Escape}')
         await waitFor(() => {
-          expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
         })
       })
     })
   })
 
-  describe("Selection", () => {
-    it("changes the value within the button when an option is selected", async () => {
+  describe('Selection', () => {
+    it('changes the value within the button when an option is selected', async () => {
       render(
         <FilterSelectWrapper
           renderTrigger={(triggerButtonProps): JSX.Element => (
             <FilterButton {...triggerButtonProps} />
           )}
-        />
+        />,
       )
 
-      const button = screen.getByRole("button", { name: "Coffee" })
+      const button = screen.getByRole('button', { name: 'Coffee' })
 
       await user.click(button)
       await waitFor(() => {
-        expect(screen.queryByRole("listbox")).toBeVisible()
+        expect(screen.queryByRole('listbox')).toBeVisible()
       })
 
-      const option = screen.getByRole("option", { name: "Magic" })
+      const option = screen.getByRole('option', { name: 'Magic' })
       await user.click(option)
 
       await waitFor(() => {
-        expect(
-          screen.getByRole("button", { name: "Coffee : Magic" })
-        ).toBeVisible()
+        expect(screen.getByRole('button', { name: 'Coffee : Magic' })).toBeVisible()
       })
     })
   })
 
-  describe("Number values", () => {
-    it("finds selected option when value is a number", () => {
+  describe('Number values', () => {
+    it('finds selected option when value is a number', () => {
       const { getByRole } = render(
         <FilterSelectWrapper
           items={[
-            { value: 0, label: "Zero" },
-            { value: 50, label: "50" },
-            { value: 100, label: "100" },
+            { value: 0, label: 'Zero' },
+            { value: 50, label: '50' },
+            { value: 100, label: '100' },
           ]}
           selectedKey={50}
-        />
+        />,
       )
-      expect(getByRole("button", { name: "Coffee : 50" })).toBeInTheDocument()
+      expect(getByRole('button', { name: 'Coffee : 50' })).toBeInTheDocument()
     })
   })
 })
 
-describe("Stringified object values", () => {
-  it("finds selected option when value is a stringified object", () => {
+describe('Stringified object values', () => {
+  it('finds selected option when value is a stringified object', () => {
     const { getByRole } = render(
       <FilterSelectWrapper
         items={[
           {
             value: '{"sortBy":"creator_name","sortOrder":"asc"}',
-            label: "Created by A-Z",
+            label: 'Created by A-Z',
           },
           {
             value: '{"sortBy":"creator_name","sortOrder":"dsc"}',
-            label: "Created by Z-A",
+            label: 'Created by Z-A',
           },
         ]}
         selectedKey='{"sortBy":"creator_name","sortOrder":"asc"}'
-      />
+      />,
     )
-    expect(
-      getByRole("button", { name: "Coffee : Created by A-Z" })
-    ).toBeInTheDocument()
+    expect(getByRole('button', { name: 'Coffee : Created by A-Z' })).toBeInTheDocument()
   })
 })
 
 const defaultProps: FilterSelectProps = {
-  label: "Coffee",
+  label: 'Coffee',
   isOpen: false,
   setIsOpen: () => undefined,
-  renderTrigger: (triggerButtonProps): JSX.Element => (
-    <FilterButton {...triggerButtonProps} />
-  ),
+  renderTrigger: (triggerButtonProps): JSX.Element => <FilterButton {...triggerButtonProps} />,
   items: singleMockItems,
 }
 
 /* eslint-disable vitest/expect-expect */
-describe("FilterSelect generic", () => {
-  it("should prevent adding `options` attribute to option", () => {
-    /* @ts-expect-error */
+describe('FilterSelect generic', () => {
+  it('should prevent adding `options` attribute to option', () => {
+    /* @ts-expect-error Generic test */
     ;<FilterSelect<SelectOption & { options: string[] }> {...defaultProps} />
   })
 
-  describe("Extended option", () => {
-    it("should error when new required attribute is missing from items", () => {
-      /* @ts-expect-error */
-      ;<FilterSelect<SelectOption & { isRubberDuck: boolean }>
-        {...defaultProps}
-      />
+  describe('Extended option', () => {
+    it('should error when new required attribute is missing from items', () => {
+      /* @ts-expect-error Generic test */
+      ;<FilterSelect<SelectOption & { isRubberDuck: boolean }> {...defaultProps} />
     })
 
-    it("should allow consumer to access custom attributes in children", () => {
+    it('should allow consumer to access custom attributes in children', () => {
       ;<FilterSelect<SelectOption & { isRubberDuck: boolean }>
         {...defaultProps}
-        items={[{ label: "Bubblegum", value: "bubblegum", isRubberDuck: true }]}
+        items={[{ label: 'Bubblegum', value: 'bubblegum', isRubberDuck: true }]}
       >
         {({ items }): JSX.Element[] =>
-          items.map(item =>
-            item.type === "item" ? (
+          items.map((item) =>
+            item.type === 'item' ? (
               <li key={item.key}>{item.value?.isRubberDuck}</li>
             ) : (
               <li key={item.key}>Section</li>
-            )
+            ),
           )
         }
       </FilterSelect>

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -1,13 +1,10 @@
-import React, { useState } from "react"
-import { useButton } from "@react-aria/button"
-import { HiddenSelect, useSelect } from "@react-aria/select"
-import {
-  useSelectState,
-  SelectProps as AriaSelectProps,
-} from "@react-stately/select"
-import { Filter, FilterContents } from "~components/Filter/Filter"
-import { FilterButtonProps } from "~components/Filter/FilterButton"
-import { SelectProvider } from "~components/__future__/Select/context"
+import React, { useState } from 'react'
+import { useButton } from '@react-aria/button'
+import { HiddenSelect, useSelect } from '@react-aria/select'
+import { useSelectState, SelectProps as AriaSelectProps } from '@react-stately/select'
+import { Filter, FilterContents } from '~components/Filter/Filter'
+import { FilterButtonProps } from '~components/Filter/FilterButton'
+import { SelectProvider } from '~components/__future__/Select/context'
 import {
   ListBoxSection,
   ListItem,
@@ -15,28 +12,28 @@ import {
   SectionDivider,
   SelectPopoverContents,
   SelectPopoverContentsProps,
-} from "~components/__future__/Select/subcomponents"
-import { getDisabledKeysFromItems } from "~components/__future__/Select/utils/getDisabledKeysFromItems"
-import { transformSelectItemToCollectionElement } from "~components/__future__/Select/utils/transformSelectItemToCollectionElement"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import { SelectItem, SelectOption } from "./types"
-import styles from "./FilterSelect.module.scss"
+} from '~components/__future__/Select/subcomponents'
+import { getDisabledKeysFromItems } from '~components/__future__/Select/utils/getDisabledKeysFromItems'
+import { transformSelectItemToCollectionElement } from '~components/__future__/Select/utils/transformSelectItemToCollectionElement'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { SelectItem, SelectOption } from './types'
+import styles from './FilterSelect.module.scss'
 
 type OmittedAriaSelectProps =
-  | "label"
-  | "children"
-  | "isOpen"
-  | "onOpenChange"
-  | "defaultOpen"
-  | "items"
+  | 'label'
+  | 'children'
+  | 'isOpen'
+  | 'onOpenChange'
+  | 'defaultOpen'
+  | 'items'
 
 export type FilterSelectProps<Option extends SelectOption = SelectOption> = {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   renderTrigger: (triggerButtonProps: FilterButtonProps) => JSX.Element
   label: string
-  children?: SelectPopoverContentsProps<Option>["children"]
-  items: Array<SelectItem<Option>>
+  children?: SelectPopoverContentsProps<Option>['children']
+  items: SelectItem<Option>[]
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 export const FilterSelect = <Option extends SelectOption = SelectOption>({
@@ -51,9 +48,9 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
   ...restProps
 }: FilterSelectProps<Option>): JSX.Element => {
   // Ref will be populated by Filter
-  const [triggerRef, setTriggerRef] = useState<
-    React.RefObject<HTMLButtonElement>
-  >({ current: null })
+  const [triggerRef, setTriggerRef] = useState<React.RefObject<HTMLButtonElement>>({
+    current: null,
+  })
 
   const disabledKeys = getDisabledKeysFromItems(items)
 
@@ -64,18 +61,13 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
     isOpen,
     onOpenChange: setIsOpen,
     disabledKeys,
-    selectedKey:
-      typeof selectedKey === "number" ? selectedKey.toString() : selectedKey,
+    selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     ...restProps,
   }
 
   const state = useSelectState(ariaSelectProps)
 
-  const { triggerProps, menuProps } = useSelect(
-    ariaSelectProps,
-    state,
-    triggerRef
-  )
+  const { triggerProps, menuProps } = useSelect(ariaSelectProps, state, triggerRef)
 
   const { buttonProps } = useButton(triggerProps, triggerRef)
 
@@ -83,8 +75,8 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
   // This should ideally be refactored but for now the `aria-controls` is set to the Filter's Listbox (menuProps.id) and the `aria-labelledby` to undefined so the accessible name is derived from the buttons content.
   const renderTriggerButtonProps = {
     ...buttonProps,
-    "aria-labelledby": undefined,
-    "aria-controls": menuProps.id,
+    'aria-labelledby': undefined,
+    'aria-controls': menuProps.id,
   }
   return (
     <>
@@ -94,7 +86,7 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
         setIsOpen={setIsOpen}
         renderTrigger={(): JSX.Element =>
           renderTrigger({
-            selectedValue: state.selectedItem?.textValue || undefined,
+            selectedValue: state.selectedItem?.textValue,
             label,
             isOpen,
             ...renderTriggerButtonProps,
@@ -105,9 +97,7 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
       >
         <FilterContents classNameOverride={styles.filterContents}>
           <SelectProvider<Option> state={state}>
-            <SelectPopoverContents
-              menuProps={{ ...menuProps, "aria-labelledby": buttonProps.id }}
-            >
+            <SelectPopoverContents menuProps={{ ...menuProps, 'aria-labelledby': buttonProps.id }}>
               {children}
             </SelectPopoverContents>
           </SelectProvider>
@@ -117,7 +107,7 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
   )
 }
 
-FilterSelect.displayName = "FilterSelect"
+FilterSelect.displayName = 'FilterSelect'
 
 FilterSelect.Section = ListBoxSection
 FilterSelect.SectionDivider = SectionDivider