@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Selection, Key } from "@react-types/shared"
 import {
   FilterMultiSelect,
@@ -43,9 +43,16 @@ export const FilterBarMultiSelect = ({
   onSelectionChange,
   ...props
 }: FilterBarMultiSelectProps): JSX.Element | null => {
-  const { getFilterState, setFilterOpenState, updateValue, hideFilter } =
-    useFilterBarContext<ConsumableSelection>()
+  const {
+    getFilterState,
+    setFilterOpenState,
+    updateValue,
+    hideFilter,
+    focusId,
+    setFocus,
+  } = useFilterBarContext<ConsumableSelection>()
   const [items, setItems] = useState<ItemType[]>(propsItems)
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect")
 
@@ -70,6 +77,13 @@ export const FilterBarMultiSelect = ({
     }
   }, [items])
 
+  useEffect(() => {
+    if (focusId === id) {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <FilterMultiSelect
       label={filterState.name}
@@ -103,6 +117,7 @@ export const FilterBarMultiSelect = ({
           <FilterMultiSelect.TriggerButton {...triggerProps} />
         )
       }}
+      triggerRef={buttonRef}
       {...props}
     >
       {children}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.scss

@@ -10,7 +10,7 @@
 }
 
 .hasSelectedValues {
-  font-weight: $typography-button-primary-font-weight;
+  font-weight: bold;
 }
 
 .labelSeparator {

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { FilterTriggerRef } from "../../Filter/types"
 import {
@@ -45,11 +45,10 @@ export const FilterButton = forwardRef<FilterTriggerRef, FilterButtonProps>(
             label
           )}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" />
-        ) : (
-          <ChevronDownIcon role="presentation" />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+        />
       </FilterButtonBase>
     )
   }

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { DataAttributes } from "~components/types/DataAttributes"
 import { isRefObject } from "~components/utils/isRefObject"
@@ -50,7 +50,7 @@ export const FilterButtonRemovable = forwardRef<
       <FilterButton ref={ref} {...triggerButtonProps} />
       <Tooltip text={removeButtonLabel} display="inline-block" position="below">
         <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
-          <ClearIcon role="img" aria-label={removeButtonLabel} />
+          <Icon name="cancel" alt={removeButtonLabel} isFilled />
         </FilterButtonBase>
       </Tooltip>
     </ButtonGroup>

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx

@@ -115,7 +115,6 @@ describe("<FilterDateRangePicker />", () => {
 
       await waitFor(() => {
         expect(inputEndDate).not.toHaveFocus()
-        expect(filterButton.textContent).toEqual("Dates")
       })
     }, 10000)
   })

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx

@@ -67,7 +67,8 @@ describe("<DateRangeInputField />", () => {
     const inputStart = screen.getByRole("textbox", { name: "Date from" })
     await waitFor(() => {
       expect(inputStart).toHaveAccessibleDescription(
-        "Date Start has an error Input format : dd/mm/yyyy"
+        // React Testing Library bug: Icon should be showing aria-label "error message" instead
+        "error Date Start has an error Input format : dd/mm/yyyy"
       )
       expect(screen.getByText("Date Start has an error")).toBeVisible()
     })

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -41,6 +41,7 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
+  triggerRef?: React.RefObject<HTMLButtonElement>
 } & Omit<MenuPopupProps, "children"> &
   Omit<MenuTriggerProviderProps, "children"> &
   SelectionProps
@@ -60,8 +61,9 @@ export const FilterMultiSelect = ({
   onSelectionChange,
   selectionMode = "multiple",
   onSearchInputChange,
+  triggerRef,
 }: FilterMultiSelectProps): JSX.Element => {
-  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange }
+  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
   const menuPopupProps = { isLoading, loadingSkeleton }
   const disabledKeys: Selection = new Set(
     items

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

@@ -14,6 +14,7 @@ export type MenuTriggerProviderProps = {
   defaultOpen?: boolean
   onOpenChange?: (isOpen: boolean) => void
   children: React.ReactNode
+  triggerRef?: React.RefObject<HTMLButtonElement>
 }
 
 export type MenuTriggerProviderContextType = {
@@ -32,12 +33,14 @@ export function MenuTriggerProvider({
   defaultOpen,
   onOpenChange,
   children,
+  triggerRef,
 }: MenuTriggerProviderProps): JSX.Element {
   // Create state based on the incoming props to manage the open/close
   const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange })
 
   // Get A11y attributes and events for the menu trigger and menu elements
-  const ref = useRef<HTMLButtonElement>(null)
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = triggerRef || fallbackRef
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>(
     {},
     state,

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

@@ -4,8 +4,8 @@ import { useOption } from "@react-aria/listbox"
 import { mergeProps } from "@react-aria/utils"
 import classnames from "classnames"
 import { Badge } from "~components/Badge"
-import { CheckIcon } from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import { useSelectionContext } from "../../context"
 import { MultiSelectItem } from "../../types"
 import styles from "./MultiSelectOption.module.scss"
@@ -50,7 +50,7 @@ export const MultiSelectOption = ({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
       {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}
       {item.rendered}

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

@@ -11,17 +11,20 @@ $focus-ring-offset: 1px;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
   position: relative;
-  color: $color-blue-500;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
   border: $border-solid-border-width $border-solid-border-style;
   border-color: $border-borderless-border-color;
   border-radius: $border-solid-border-radius;
   padding: $spacing-4 $spacing-8;
+  font-weight: $typography-button-secondary-font-weight;
+  font-family: $typography-button-secondary-font-family;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
 
   &:focus {
     outline: none;
@@ -48,10 +51,6 @@ $focus-ring-offset: 1px;
     inset: calc(-1 * #{$focus-ring-offset});
   }
 
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
   // TODO: copied from Calendar button since the design is not settled
   &.isDisabled {
     pointer-events: none;
@@ -64,7 +63,6 @@ $focus-ring-offset: 1px;
     }
 
     &:focus-visible::after {
-      border-style: $border-dashed-border-style;
       border-color: $color-gray-400;
     }
   }

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

@@ -103,19 +103,6 @@ describe("<FilterSelect>", () => {
         })
       })
 
-      it("opens the menu when user hits enter key", async () => {
-        render(<FilterSelectWrapper />)
-        const trigger = screen.getByRole("button", { name: "Coffee" })
-        await user.tab()
-        await waitFor(() => {
-          expect(trigger).toHaveFocus()
-        })
-        await user.keyboard("{Enter}")
-        await waitFor(() => {
-          expect(screen.queryByRole("listbox")).toBeVisible()
-        })
-      })
-
       it("moves the focus to the first focusable element inside the menu initially", async () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
@@ -124,7 +111,7 @@ describe("<FilterSelect>", () => {
         })
       })
 
-      it("focuses to the first item on arrow down when no key is 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" })
         await user.tab()
@@ -134,10 +121,10 @@ describe("<FilterSelect>", () => {
         await user.keyboard("{ArrowDown}")
 
         await waitFor(() => {
-          expect(screen.getByRole("option", { name: "Regular" })).toHaveFocus()
+          expect(screen.getAllByRole("option")[0]).toHaveFocus()
         })
       })
-      it("focuses to the last item on arrow up when no key is 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" })
         await user.tab()
@@ -146,11 +133,56 @@ describe("<FilterSelect>", () => {
         })
         await user.keyboard("{ArrowUp}")
 
+        await waitFor(() => {
+          const options = screen.getAllByRole("option")
+          expect(options[options.length - 1]).toHaveFocus()
+        })
+      })
+      it("moves focus to the current selected item on Enter", async () => {
+        render(<FilterSelectWrapper selectedKey="hazelnut" />)
+        const trigger = screen.getByRole("button", {
+          name: "Coffee : Hazelnut",
+        })
+        await user.tab()
+        await waitFor(() => {
+          expect(trigger).toHaveFocus()
+        })
+        await user.keyboard("{Enter}")
+
+        await waitFor(() => {
+          expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
+        })
+      })
+      it("moves focus to the current selected item on ArrowUp", async () => {
+        render(<FilterSelectWrapper selectedKey="hazelnut" />)
+        const trigger = screen.getByRole("button", {
+          name: "Coffee : Hazelnut",
+        })
+        await user.tab()
+        await waitFor(() => {
+          expect(trigger).toHaveFocus()
+        })
+        await user.keyboard("{ArrowUp}")
+
         await waitFor(() => {
           expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
         })
       })
+      it("moves focus to the current selected item on ArrowDown", async () => {
+        render(<FilterSelectWrapper selectedKey="hazelnut" />)
+        const trigger = screen.getByRole("button", {
+          name: "Coffee : Hazelnut",
+        })
+        await user.tab()
+        await waitFor(() => {
+          expect(trigger).toHaveFocus()
+        })
+        await user.keyboard("{ArrowDown}")
 
+        await waitFor(() => {
+          expect(screen.getByRole("option", { name: "Hazelnut" })).toHaveFocus()
+        })
+      })
       it("closes when user hits the escape key", async () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
@@ -166,16 +198,15 @@ describe("<FilterSelect>", () => {
     it("changes the value within the button when an option is selected", async () => {
       render(
         <FilterSelectWrapper
-          isOpen
           renderTrigger={(triggerButtonProps): JSX.Element => (
-            <FilterButton data-testid="test__trigger" {...triggerButtonProps} />
+            <FilterButton {...triggerButtonProps} />
           )}
         />
       )
-      // Use testid because when the filter is open, the button is inaccessible
-      expect(screen.getByTestId("test__trigger").textContent).toBe("Coffee")
 
-      await user.tab()
+      const button = screen.getByRole("button", { name: "Coffee" })
+
+      await user.click(button)
       await waitFor(() => {
         expect(screen.queryByRole("listbox")).toBeVisible()
       })

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -79,7 +79,8 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
 
   const { buttonProps } = useButton(triggerProps, triggerRef)
 
-  // The id is being remapped because the buttonProps id points to nowhere. This should ideally be refactored but will point the aria attributes tot he right components
+  // `aria-labelledby` and `aria-controls` are being remapped because the `buttonProps` ids generated by React Aria point to nothing.
+  // 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,

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

@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { Story } from "@storybook/blocks"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls"

package/src/GuidanceBlock/GuidanceBlock.module.scss

@@ -178,6 +178,10 @@ $scene-illustration-size: 300px;
   @include button-reset;
 
   cursor: pointer;
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -207,11 +211,6 @@ $scene-illustration-size: 300px;
       }
     }
   }
-
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
 }
 
 .default {

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import Media from "react-media"
 import { Heading, HeadingProps } from "~components/Heading"
-import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { Button, ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
@@ -223,7 +223,11 @@ export const GuidanceBlock = ({
                     <Button
                       icon={
                         withActionButtonArrow ? (
-                          <ArrowForwardIcon role="presentation" />
+                          <Icon
+                            name="arrow_forward"
+                            isPresentational
+                            shouldMirrorInRTL
+                          />
                         ) : undefined
                       }
                       iconPosition="end"

package/src/Icon/_docs/{Icon.stories.tsx → Icon.docs.stories.tsx}

@@ -7,7 +7,7 @@ import { AddIcon } from "../index"
 import styles from "./icon.module.scss"
 
 const meta = {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   component: AddIcon,
   args: {
     role: "presentation",

package/src/Icon/_docs/Icon.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
 import { ResourceLinks } from "~storybook/components"
-import * as IconStories from "./Icon.stories"
+import * as IconStories from "./Icon.docs.stories"
 
 <Meta of={IconStories} />
 
@@ -8,7 +8,6 @@ import * as IconStories from "./Icon.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-
 />
 
 ## Installation

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

@@ -7,7 +7,7 @@ import {
 } from "~storybook/components/StickerSheet"
 
 export default {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Icon/bin/update-icons.sh

@@ -2,6 +2,6 @@
 
 pnpm svgo -f ./assets/svgs/icons -o ./src/Icon/bin/built-svgs/
 
-npx tsx ./src/Icon/bin/wrapSVGs.ts --source-dir ./src/Icon/bin/built-svgs --output-dir ./src/Icon --delete-source-dir
+pnpm tsx ./src/Icon/bin/wrapSVGs.ts --source-dir ./src/Icon/bin/built-svgs --output-dir ./src/Icon --delete-source-dir
 
 pnpm prettier -w ./src/Icon

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, RefObject } from "react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 
 export type usePausePlayHook = {
   toggle: () => void
@@ -24,10 +24,12 @@ export const usePausePlay = (
         videoRef.current.pause()
       }
     },
-    icon: isPaused ? (
-      <LaunchIcon role="presentation" />
-    ) : (
-      <PauseIcon role="presentation" />
+    icon: (
+      <Icon
+        name={isPaused ? "play_circle" : "pause"}
+        isPresentational
+        isFilled
+      />
     ),
     label: isPaused ? "Play animation" : "Pause animation",
   }

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { MeatballsIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -35,16 +35,18 @@ const InputExampleGroup = (props: InputProps): JSX.Element => (
           value={type}
           type={type}
           startIconAdornment={
-            <WritingIcon
-              role="presentation"
+            <Icon
+              name="edit"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }
             />
           }
           endIconAdornment={
-            <MeatballsIcon
-              role="presentation"
+            <Icon
+              name="close"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }

package/src/Input/Input/_docs/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { UserAddIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Input } from "../index"
 
 const meta = {
@@ -87,14 +87,16 @@ export const Icons: Story = {
         <Input
           type="text"
           value="Start Icon"
-          startIconAdornment={<UserAddIcon role="presentation" />}
+          startIconAdornment={
+            <Icon name="person_add" isPresentational isFilled />
+          }
         />
       </li>
       <li>
         <Input
           type="text"
           value="End Icon"
-          endIconAdornment={<WritingIcon role="presentation" />}
+          endIconAdornment={<Icon name="edit" isPresentational isFilled />}
         />
       </li>
     </ul>

package/src/Input/InputRange/InputRange.module.scss

@@ -74,9 +74,9 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-runnable-track {
-    @include track;
-
     margin: $spacing-sm 0;
+
+    @include track;
   }
 
   &::-moz-range-track {
@@ -84,10 +84,10 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-thumb {
-    @include thumb;
-
     -webkit-appearance: none;
     margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+
+    @include thumb;
   }
 
   &::-moz-range-thumb {