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

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -4,18 +4,17 @@
 @import "../../../styles/utils/form-variables";
 
 $checkbox-size: 24px;
-$icon-size: 24px;
 $focus-ring-offset: 2px;
 
 $dt-color-checkbox-background-color-checked: $color-gray-500;
 
 // override bootstrap styles
 .checkbox.checkbox {
-  @include form-input-visually-hidden;
-
   width: $checkbox-size;
   height: $checkbox-size;
   margin: 0;
+
+  @include form-input-visually-hidden;
 }
 
 .checkbox:disabled {
@@ -23,14 +22,7 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
   color: $color-white;
 }
 

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -22,13 +22,11 @@ const renderCheckOrMixedIcon = (
   if (status === "off") return
 
   return (
-    <span className={classnames(styles.icon, reversed && styles.reversed)}>
-      {status === "on" ? (
-        <CheckIcon role="presentation" inheritSize />
-      ) : (
-        <MinusIcon role="presentation" inheritSize />
-      )}
-    </span>
+    <Icon
+      name={status === "on" ? "check" : "remove"}
+      isPresentational
+      className={classnames(styles.icon, reversed && styles.reversed)}
+    />
   )
 }
 

package/src/ClearButton/ClearButton.tsx

@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ClearButton.module.scss"
 
@@ -23,7 +23,7 @@ export const ClearButton = ({
     )}
     {...restProps}
   >
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </button>
 )
 

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useId, useState } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
 import { Heading } from "~components/Heading"
-import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"
@@ -117,11 +117,10 @@ export const Collapsible = ({
           <IconButton
             label={title}
             icon={
-              isOpen ? (
-                <ChevronUpIcon role="presentation" />
-              ) : (
-                <ChevronDownIcon role="presentation" />
-              )
+              <Icon
+                name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                isPresentational
+              />
             }
             type="button"
             aria-expanded={isOpen}

package/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
-import { AddIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { Collapsible } from "../index"
 
 const meta = {
@@ -76,7 +76,7 @@ export const CustomHeader: Story = {
       renderHeader={title => (
         <Heading variant="heading-4" tag="span">
           <span className="flex gap-8 items-center">
-            <AddIcon role="presentation" /> {title}
+            <Icon name="potted_plant" isPresentational /> {title}
           </span>
         </Heading>
       )}

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -9,8 +9,8 @@ $input-disabled-opacity: 0.3;
 .iconButton {
   @include button-reset;
 
-  display: inherit;
-  padding: 0.25rem $spacing-xs;
+  display: flex;
+  padding: var(--spacing-6);
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius;
   position: relative;
@@ -35,11 +35,6 @@ $input-disabled-opacity: 0.3;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  svg {
-    position: relative;
-    top: 2px;
-  }
 }
 
 .calendarActive {

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { DateStartIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { DateInput, DateInputProps } from "../DateInput"
 import styles from "./DateInputWithIconButton.module.scss"
@@ -39,7 +39,7 @@ export const DateInputWithIconButton = React.forwardRef<
         disabled && styles.disabled
       )}
     >
-      <DateStartIcon role="presentation" />
+      <Icon name="today" isPresentational isFilled />
     </button>
   )
 

package/src/DateRangePicker/DateRangePicker.tsx

@@ -13,9 +13,9 @@ import {
   LegacyCalendarRange,
   LegacyCalendarRangeProps,
 } from "~components/Calendar/LegacyCalendarRange"
-import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -168,7 +168,7 @@ export const DateRangePicker = ({
           {...inputProps}
         >
           <div className={styles.startIconAdornment}>
-            <DateStartIcon role="presentation" />
+            <Icon name="today" isPresentational isFilled />
           </div>
           <span className={styles.value}>
             {selectedDateRange?.from ? value : undefined}

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import isChromatic from "chromatic"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -85,7 +85,13 @@ const StickerSheetTemplate: StickerSheetStory = {
                 >
                   <Button
                     label="Label"
-                    icon={<ChevronRightIcon role="presentation" />}
+                    icon={
+                      <Icon
+                        name="chevron_right"
+                        isPresentational
+                        shouldMirrorInRTL
+                      />
+                    }
                     iconPosition="end"
                   />
                 </EmptyStateWrapper>

package/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { EmptyState } from "../index"
 
 const meta = {
@@ -17,7 +17,9 @@ const meta = {
         "Button (chevron right)": (
           <Button
             label="Label"
-            icon={<ChevronRightIcon role="presentation" />}
+            icon={
+              <Icon name="chevron_right" isPresentational shouldMirrorInRTL />
+            }
             iconPosition="end"
           />
         ),

package/src/ErrorPage/ErrorPage.tsx

@@ -2,9 +2,9 @@ import React, { HTMLAttributes } from "react"
 import { FormattedMessage, useIntl } from "@cultureamp/i18n-react-intl"
 import classNames from "classnames"
 import { BrandMoment } from "~components/BrandMoment"
-import { ArrowRightIcon, EmailIcon } from "~components/Icon"
 import { BrandMomentError } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ErrorStatuses, useErrorMessages } from "./hooks"
 import styles from "./ErrorPage.module.scss"
@@ -67,7 +67,9 @@ export const ErrorPage = ({
         variant="warning"
         primaryAction={{
           ...actions.primary,
-          icon: <ArrowRightIcon role="presentation" />,
+          icon: (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
           iconPosition: "end",
           label: formatMessage({
             id: "kzErrorPage.goToHome",
@@ -77,7 +79,7 @@ export const ErrorPage = ({
         }}
         secondaryAction={{
           ...actions.secondary,
-          icon: <EmailIcon role="presentation" />,
+          icon: <Icon name="mail" isPresentational isFilled />,
           label: formatMessage({
             id: "kzErrorPage",
             defaultMessage: "Contact support",

package/src/FieldMessage/FieldMessage.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldMessage.module.scss"
 
@@ -45,19 +45,11 @@ export const FieldMessage = ({
     >
       {(status === "error" || status === "caution") && (
         <span className={styles.warningIcon}>
-          {status === "error" ? (
-            <ExclamationWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          ) : (
-            <CautionWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          )}
+          <Icon
+            name={status === "error" ? "error" : "warning"}
+            isFilled
+            alt={`${status} message`}
+          />
         </span>
       )}
       <div className={styles.message}>

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

@@ -65,6 +65,7 @@ const simpleFilters = [
 type ValuesRemovable = {
   flavour: string
   topping: string
+  others: string
 }
 
 const filtersRemovable = [
@@ -86,6 +87,37 @@ const filtersRemovable = [
     ),
     isRemovable: true,
   },
+  {
+    id: "others",
+    name: "Others",
+    Component: (
+      <FilterBar.MultiSelect
+        items={[
+          { value: "gluten-free", label: "Gluten Free" },
+          { value: "no-sugar", label: "No Sugar" },
+          { value: "dairy-free", label: "Dairy Free" },
+        ]}
+      >
+        {(): JSX.Element => (
+          <>
+            <FilterMultiSelect.SearchInput />
+            <FilterMultiSelect.ListBox>
+              {({ allItems }): JSX.Element | JSX.Element[] =>
+                allItems.map(item => (
+                  <FilterMultiSelect.Option key={item.key} item={item} />
+                ))
+              }
+            </FilterMultiSelect.ListBox>
+            <FilterMultiSelect.MenuFooter>
+              <FilterMultiSelect.SelectAllButton />
+              <FilterMultiSelect.ClearButton />
+            </FilterMultiSelect.MenuFooter>
+          </>
+        )}
+      </FilterBar.MultiSelect>
+    ),
+    isRemovable: true,
+  },
 ] satisfies Filters<ValuesRemovable>
 
 type ValuesDependent = {
@@ -288,6 +320,61 @@ describe("<FilterBar />", () => {
       expect(filters[1]).toHaveTextContent("Flavour")
       expect(filters[2]).toHaveTextContent("Sugar Level")
     })
+
+    it("moves focus to recently added filter button", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesSimple>
+          filters={simpleFilters.map(filter => ({
+            ...filter,
+            isRemovable: true,
+          }))}
+        />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      await user.click(menuOptionIceLevel)
+
+      expect(getByRole("button", { name: "Ice Level" })).toHaveFocus()
+    })
+
+    it("moves focus to recently added filter button in the FilterMultiSelect case", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionOthers = getByRole("button", { name: "Others" })
+      await user.click(menuOptionOthers)
+
+      expect(getByRole("button", { name: "Others" })).toHaveFocus()
+    })
+
+    it("restores focus to the add filter button after remove", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable>
+          filters={filtersRemovable}
+          defaultValues={{ topping: "pearls" }}
+        />
+      )
+      await waitForI18nContent()
+
+      const filterButton = getByRole("button", { name: "Topping : Pearls" })
+      expect(filterButton).toBeVisible()
+
+      await user.click(getByRole("button", { name: "Remove filter - Topping" }))
+      await waitFor(() => {
+        expect(filterButton).not.toBeInTheDocument()
+      })
+
+      expect(getByRole("button", { name: "Add Filters" })).toHaveFocus()
+    })
   })
 
   describe("Dependent filters", () => {
@@ -313,7 +400,7 @@ describe("<FilterBar />", () => {
           />
         )
         await waitForI18nContent()
-        expect(getByTestId("testid__values").textContent).toEqual(
+        expect(getByTestId("testid__values").textContent).toBe(
           JSON.stringify({})
         )
       })
@@ -580,7 +667,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Long Black" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Long Black")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Long Black")
         })
         const iceButton = getByRole("button", { name: "Ice" })
         expect(iceButton).toBeVisible()
@@ -590,7 +677,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Latte" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Latte")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Latte")
         })
         const milkButton = getByRole("button", { name: "Milk" })
         expect(milkButton).toBeVisible()
@@ -600,7 +687,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Oat" }))
 
         await waitFor(() => {
-          expect(milkButton.textContent).toBe("Milk:Oat")
+          expect(milkButton).toHaveAccessibleName("Milk : Oat")
         })
         expect(addFiltersButton).not.toBeDisabled()
 
@@ -657,16 +744,16 @@ describe("<FilterBar />", () => {
       })
       const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" })
 
-      expect(flavourButton.textContent).toBe("Flavour:Jasmine Milk Tea")
-      expect(sugarLevelButton.textContent).toBe("Sugar Level:50%")
-      expect(iceLevelButton.textContent).toBe("Ice Level:100%")
+      expect(flavourButton).toHaveAccessibleName("Flavour : Jasmine Milk Tea")
+      expect(sugarLevelButton).toHaveAccessibleName("Sugar Level : 50%")
+      expect(iceLevelButton).toHaveAccessibleName("Ice Level : 100%")
 
       await user.click(getByRole("button", { name: "Clear all filters" }))
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toBe("Flavour")
-        expect(sugarLevelButton.textContent).toBe("Sugar Level")
-        expect(iceLevelButton.textContent).toBe("Ice Level")
+        expect(flavourButton).toHaveAccessibleName("Flavour")
+        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
+        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
       })
     })
 
@@ -744,14 +831,14 @@ describe("<FilterBar />", () => {
       await waitForI18nContent()
 
       const flavourButton = getByRole("button", { name: "Flavour" })
-      expect(flavourButton.textContent).toEqual("Flavour")
+      expect(flavourButton).toHaveAccessibleName("Flavour")
 
       await user.click(
         getByRole("button", { name: "Update Flavour to honey-milk-tea" })
       )
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toEqual("Flavour:Honey Milk Tea")
+        expect(flavourButton).toHaveAccessibleName("Flavour : Honey Milk Tea")
       })
     })
 

package/src/Filter/FilterBar/context/FilterBarContext.tsx

@@ -43,6 +43,8 @@ export type FilterBarContextValue<
   hideFilter: <Id extends keyof ValuesMap>(id: Id) => void
   getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>
   clearAllFilters: () => void
+  setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void
+  focusId?: keyof ValuesMap
 }
 
 const FilterBarContext = React.createContext<FilterBarContextValue<any> | null>(
@@ -119,10 +121,13 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
         values: { ...values, [id]: getValidValue(newValue) },
       })
     },
-    showFilter: <Id extends keyof ValuesMap>(id: Id): void =>
-      dispatch({ type: "activate_filter", id }),
+    showFilter: <Id extends keyof ValuesMap>(id: Id): void => {
+      dispatch({ type: "activate_filter", id })
+      dispatch({ type: "set_focus", id })
+    },
     hideFilter: <Id extends keyof ValuesMap>(id: Id): void => {
       dispatch({ type: "deactivate_filter", id })
+      dispatch({ type: "set_focus", id: "add_filter" })
     },
     getInactiveFilters: () => getInactiveFilters<ValuesMap>(state),
     clearAllFilters: () => {
@@ -132,6 +137,10 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
       })
       dispatch({ type: "update_values", values: {} })
     },
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => {
+      dispatch({ type: "set_focus", id })
+    },
+    focusId: state.focusId,
   } satisfies FilterBarContextValue<any, ValuesMap>
 
   useEffect(() => {

package/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts

@@ -15,12 +15,19 @@ type Actions<ValuesMap extends FiltersValues> =
   | { type: "activate_filter"; id: keyof ValuesMap }
   | { type: "deactivate_filter"; id: keyof ValuesMap }
   | { type: "update_filter_labels"; data: Filters<ValuesMap> }
+  | { type: "set_focus"; id: keyof ValuesMap | undefined }
 
 export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
   state: FilterBarState<ValuesMap>,
   action: Actions<ValuesMap>
 ): FilterBarState<ValuesMap> => {
   switch (action.type) {
+    case "set_focus":
+      return {
+        ...state,
+        focusId: action.id,
+      }
+
     case "update_values":
       return { ...updateValues(state, action.values) }
 

package/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts

@@ -35,6 +35,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      focusId: undefined,
     } as FilterBarState<ValuesMap>
   )
 

package/src/Filter/FilterBar/context/types.ts

@@ -32,6 +32,7 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>
   dependentFilterIds: Set<keyof ValuesMap>
+  focusId?: keyof ValuesMap
 }
 
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<

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

@@ -1,11 +1,12 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { AddIcon } from "~components/Icon"
 import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
   const { formatMessage } = useIntl()
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   const menuButtonLabel = formatMessage({
     id: "filterBar.addFiltersMenu.buttonLabel",
@@ -14,17 +15,26 @@ export const AddFiltersMenu = (): JSX.Element => {
       "Menu button label to show additional available filter options",
   })
 
-  const { getInactiveFilters, showFilter } = useFilterBarContext()
+  const { getInactiveFilters, showFilter, focusId, setFocus } =
+    useFilterBarContext()
   const inactiveFilters = getInactiveFilters()
 
+  useEffect(() => {
+    if (focusId === "add_filter") {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <Menu
       button={
         <Button
+          ref={buttonRef}
           label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
         />
       }
     >

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React, { forwardRef, useEffect } from "react"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -6,6 +6,7 @@ import {
   FilterButtonProps,
   FilterButtonRemovable,
 } from "~components/Filter/FilterButton"
+import { isRefObject } from "~components/utils/isRefObject"
 
 export type FilterBarButtonProps = FilterButtonProps & {
   filterId: string
@@ -16,7 +17,14 @@ export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
 >(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter } = useFilterBarContext()
+  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+
+  useEffect(() => {
+    if (focusId === filterId && isRefObject(ref)) {
+      ref?.current?.triggerRef?.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
 
   return isRemovable ? (
     <FilterButtonRemovable