@kaizen/components 1.37.1 → 1.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.37.1",
+  "version": "1.38.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -69,7 +69,7 @@
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
-    "prosemirror-inputrules": "^1.2.1",
+    "prosemirror-inputrules": "^1.3.0",
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-model": "^1.19.3",
     "prosemirror-schema-basic": "^1.2.2",
@@ -77,18 +77,18 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.3",
+    "prosemirror-view": "^1.32.4",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "8.4.1",
     "react-focus-lock": "^2.9.6",
     "react-focus-on": "^3.9.1",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.7.7",
+    "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.6.2",
-    "use-debounce": "^9.0.4",
+    "use-debounce": "^10.0.0",
     "uuid": "^9.0.1"
   },
   "dependenciesComments": {
@@ -96,11 +96,11 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^8.2.0",
-    "@cultureamp/i18n-react-intl": "^2.1.1",
+    "@cultureamp/frontend-apis": "^9.0.2",
+    "@cultureamp/i18n-react-intl": "^2.1.3",
     "@kaizen/design-tokens": "^10.3.16",
     "@kaizen/tailwind": "^1.2.0",
-    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
@@ -108,7 +108,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@types/react-textfit": "^1.1.3",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
@@ -116,22 +116,22 @@
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
     "query-string": "^8.1.0",
-    "react-intl": "^6.5.4",
-    "rollup": "^4.3.1",
+    "react-intl": "^6.5.5",
+    "rollup": "^4.6.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.69.5",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.0.3",
+    "svgo": "^3.0.4",
     "ts-jest": "^29.1.1",
-    "ttypescript": "^1.5.15",
+    "ts-patch": "^3.0.2",
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.1",
+    "@cultureamp/i18n-react-intl": "^2.1.3",
     "react": "^18.2.0",
-    "react-intl": "^6.5.4"
+    "react-intl": "^6.5.5"
   }
 }

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

@@ -6,6 +6,7 @@ import {
   QueryClient,
   useInfiniteQuery,
   useQueryClient,
+  keepPreviousData,
 } from "@tanstack/react-query"
 import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
@@ -171,6 +172,22 @@ export const Async: Story = {
     const [selectedPeople, setSelectedPeople] = useState<string[]>([])
     const [searchState, setSearchState] = useState("")
     const queryClient = useQueryClient()
+
+    const fetchSWAPI = async ({
+      pageParam,
+    }: {
+      pageParam: string
+    }): Promise<{
+      results: Array<{ name: string; url: string }>
+      next: string
+    }> => {
+      const res = await fetch(
+        `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
+      )
+
+      return res.json()
+    }
+
     const {
       data,
       isLoading,
@@ -178,26 +195,23 @@ export const Async: Story = {
       isFetchingNextPage,
       hasNextPage,
       isRefetching,
-    } = useInfiniteQuery(
-      ["startrek-sg1", searchState],
-      ({ pageParam = 1 }) =>
-        fetch(
-          `https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`
-        ).then(res => res.json()) as Promise<{
-          results: Array<{ name: string; url: string }>
-          next: string
-        }>,
-      {
-        enabled: open,
-        keepPreviousData: true,
-        getNextPageParam: lastPage => {
-          if (!lastPage.next) return undefined
-          const url = new URL(lastPage.next)
-          const params = new URLSearchParams(url.searchParams)
-          return params.get("page")
-        },
-      }
-    )
+    } = useInfiniteQuery({
+      enabled: true,
+      initialPageParam: "1",
+      queryKey: ["startrek-sg1", searchState],
+      queryFn: fetchSWAPI,
+      placeholderData: keepPreviousData,
+      getNextPageParam: lastPage => {
+        if (!lastPage.next) return undefined
+        const url = new URL(lastPage.next)
+        const params = new URLSearchParams(url.searchParams)
+        return params.get("page")
+      },
+    })
+
+    type QueriesData = {
+      pages: { results: Array<{ name: string; url: string }> }
+    }
 
     /**
      * We need access to the previously fetched people. If a user has selected a
@@ -205,9 +219,7 @@ export const Async: Story = {
      * only the selected keys to work with, no renderable values.
      */
     const cachedPeople = queryClient
-      .getQueriesData<{
-        pages: { results: Array<{ name: string; url: string }> }
-      }>(["startrek-sg1"])
+      .getQueriesData<QueriesData>({ queryKey: ["startrek-sg1"] })
       .flatMap(([, cachedData]) => cachedData?.pages ?? [])
       .flatMap(page => page.results)
       .map(item => ({ label: item.name, value: item.url }))

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -212,7 +212,9 @@ describe("<MultiSelect />", () => {
         expect(popover).toBeVisible()
       })
 
-      await user.click(getByRole("button", { name: "Clear all waffles" }))
+      await user.click(
+        getByRole("button", { name: "Remove all options from Jalapeno" })
+      )
 
       await waitFor(() => {
         expect(popover).toBeVisible()
@@ -230,7 +232,8 @@ describe("<MultiSelect />", () => {
           />
         )
         const toggleButton = getByRole("button", { name: "Jalapeno" })
-        expect(toggleButton).toHaveFocus()
+        const dialog = getByRole("dialog")
+        expect(dialog).toHaveFocus()
 
         await user.tab()
         await waitFor(() => {
@@ -263,7 +266,7 @@ describe("<MultiSelect />", () => {
           await user.tab()
           await waitFor(() => {
             expect(
-              getByRole("button", { name: "Clear all waffles" })
+              getByRole("button", { name: "Remove all options from Jalapeno" })
             ).toHaveFocus()
           })
         })
@@ -323,7 +326,9 @@ describe("Removing all options", () => {
     const pancakesOption = getByText("Pancakes")
     const waffleOption = getByText("Waffle")
 
-    const clearAllButton = getByRole("button", { name: "Clear all waffles" })
+    const clearAllButton = getByRole("button", {
+      name: "Remove all options from Jalapeno",
+    })
     await user.click(clearAllButton)
     await waitFor(() => {
       expect(pancakesOption).not.toBeInTheDocument()

package/src/MultiSelect/MultiSelect.tsx

@@ -115,10 +115,12 @@ export const MultiSelect = ({
           refs={refs}
           id={`${id}--popover`}
           focusOnProps={{
+            enabled: true,
             onClickOutside,
             onEscapeKey: handleClose,
             shards: [toggleButtonRef],
             noIsolation: true,
+            onActivation: (): void => refs.floating?.current?.focus(),
           }}
           classNameOverride={styles.popover}
         >

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

@@ -11,7 +11,7 @@ import { MultiSelect, MultiSelectProps } from "../index"
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: "Staging/Multi Select",
+  title: "Components/MultiSelect",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/_docs/MultiSelect.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { MultiSelect, MultiSelectProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select",
+  title: "Components/MultiSelect",
   component: MultiSelect,
   argTypes: {
     selectedValues: {

package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { Checkbox, CheckedStatus } from "../index"
 
 export default {
-  title: "Staging/Multi Select/Checkbox",
+  title: "Components/MultiSelect/Checkbox",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Checkbox, CheckedStatus } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/Checkbox",
+  title: "Components/MultiSelect/Checkbox",
   component: Checkbox,
   args: {
     checkedStatus: "unchecked",

package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet } from "~storybook/components/StickerSheet"
 import { MultiSelectOptionField, MultiSelectOptionFieldProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptionField",
+  title: "Components/MultiSelect/MultiSelectOptionField",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stories.tsx

@@ -5,7 +5,7 @@ import { CheckboxProps } from "../../Checkbox"
 import { MultiSelectOptionField } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptionField",
+  title: "Components/MultiSelect/MultiSelectOptionField",
   component: MultiSelectOptionField,
   args: {
     id: "id--multi-select-option-field",

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 export default {
-  title: "Staging/Multi Select/MultiSelectOptions",
+  title: "Components/MultiSelect/MultiSelectOptions",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { MultiSelectOptions, MultiSelectOptionsProps } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/MultiSelectOptions",
+  title: "Components/MultiSelect/MultiSelectOptions",
   component: MultiSelectOptions,
   args: {
     id: "id--multi-select-options",

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.spec.tsx

@@ -70,42 +70,39 @@ describe("<MultiSelectToggle />", () => {
   })
 
   describe("Has no selected options", () => {
-    // @todo: re-enable test when Clear All functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    //   it("does not show the clear all button", () => {
-    //     const { queryByRole } = render(<MultiSelectToggleWrapper />)
-    //     expect(
-    //       queryByRole("button", { name: "Clear all waffles" })
-    //     ).not.toBeInTheDocument()
-    //   })
+    it("does not show the clear all button", () => {
+      const { queryByRole } = render(<MultiSelectToggleWrapper />)
+      expect(
+        queryByRole("button", { name: "Remove all options from Waffle" })
+      ).not.toBeInTheDocument()
+    })
   })
 
   describe("Has selected options", () => {
-    // @todo: re-enable test when Clear option functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    // it("does not call onClick when clearing a single selected item", async () => {
-    //   const { getByRole } = render(
-    //     <MultiSelectToggleWrapper
-    //       selectedOptions={[{ value: "waffle", label: "Waffle" }]}
-    //     />
-    //   )
-    //   await user.click(getByRole("button", { name: "Clear waffle" }))
-    //   await waitFor(() => {
-    //     expect(onClick).not.toHaveBeenCalled()
-    //   })
-    // })
-    // @todo: re-enable test when Clear All functionality implemented
-    // eslint-disable-next-line jest/no-commented-out-tests
-    // it("does not call onClick when clearing all selected items", async () => {
-    //   const { getByRole } = render(
-    //     <MultiSelectToggleWrapper
-    //       selectedOptions={[{ value: "waffle", label: "Waffle" }]}
-    //     />
-    //   )
-    //   await user.click(getByRole("button", { name: "Clear all waffles" }))
-    //   await waitFor(() => {
-    //     expect(onClick).not.toHaveBeenCalled()
-    //   })
-    // })
+    it("does not call onClick when clearing a single selected item", async () => {
+      const { getByRole } = render(
+        <MultiSelectToggleWrapper
+          selectedOptions={[{ value: "waffle", label: "Waffle" }]}
+        />
+      )
+      await user.click(getByRole("button", { name: "Remove option: Waffle" }))
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled()
+      })
+    })
+
+    it("does not call onClick when clearing all selected items", async () => {
+      const { getByRole } = render(
+        <MultiSelectToggleWrapper
+          selectedOptions={[{ value: "waffle", label: "Waffle" }]}
+        />
+      )
+      await user.click(
+        getByRole("button", { name: "Remove all options from Waffle" })
+      )
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled()
+      })
+    })
   })
 })

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, forwardRef } from "react"
+import React, { HTMLAttributes, forwardRef, useId } from "react"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
@@ -38,84 +38,89 @@ export const MultiSelectToggle = forwardRef<
       ...restProps
     },
     ref
-  ): JSX.Element => (
-    <>
-      {/*
-       * The inner <button> is the actual semantic element, and the onClick here
-       * is just a quality-of-life implementation for mouse users.
-       */}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      <div
-        className={classnames(
-          styles.multiSelectToggle,
-          classNameOverride,
-          status && styles[status]
-        )}
-        onClick={onClick}
-        {...restProps}
-      >
-        <button
-          ref={ref}
-          className={styles.toggleButton}
-          aria-labelledby={ariaLabelledBy}
-          aria-describedby={ariaDescribedBy}
-          aria-controls={ariaControls}
-          aria-expanded={isOpen}
-          aria-haspopup="dialog"
-          type="button"
-          onClick={e => {
-            e.stopPropagation()
-            onClick(e)
-          }}
-        >
-          {isOpen ? (
-            <ChevronUpIcon role="presentation" />
-          ) : (
-            <ChevronDownIcon role="presentation" />
-          )}
-        </button>
-
+  ): JSX.Element => {
+    const clearAllId = useId()
+    return (
+      <>
+        {/*
+         * The inner <button> is the actual semantic element, and the onClick here
+         * is just a quality-of-life implementation for mouse users.
+         */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className={classnames(
-            styles.selectedItemsContainer,
-            selectedOptions.length && styles.hasSelectedItems
+            styles.multiSelectToggle,
+            classNameOverride,
+            status && styles[status]
           )}
+          onClick={onClick}
+          {...restProps}
         >
-          {selectedOptions.length > 0 && (
-            <>
-              {/* list-style: none removes role="list" in Safari */}
-              {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-              <ul role="list" className={styles.selectedItems}>
-                {selectedOptions.map(({ label, value }) => (
-                  // This stops the underlying toggle collapsing the popover when interactive with Tags
-                  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-                  <li key={value} onClick={e => e.stopPropagation()}>
-                    <RemovableTag
-                      removeButtonProps={{
-                        ariaLabel: `Remove option: ${label}`,
-                        onClick: () => onRemoveOption(value),
-                      }}
-                    >
-                      {label}
-                    </RemovableTag>
-                  </li>
-                ))}
-              </ul>
+          <button
+            ref={ref}
+            className={styles.toggleButton}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
+            aria-controls={ariaControls}
+            aria-expanded={isOpen}
+            aria-haspopup="dialog"
+            type="button"
+            onClick={e => {
+              e.stopPropagation()
+              onClick(e)
+            }}
+          >
+            {isOpen ? (
+              <ChevronUpIcon role="presentation" />
+            ) : (
+              <ChevronDownIcon role="presentation" />
+            )}
+          </button>
 
-              <ClearButton
-                aria-label="Clear all waffles"
-                classNameOverride={styles.clearAllButton}
-                onClick={e => {
-                  e.stopPropagation()
-                  onRemoveAllOptions()
-                }}
-              />
-            </>
-          )}
+          <div
+            className={classnames(
+              styles.selectedItemsContainer,
+              selectedOptions.length && styles.hasSelectedItems
+            )}
+          >
+            {selectedOptions.length > 0 && (
+              <>
+                {/* list-style: none removes role="list" in Safari */}
+                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+                <ul role="list" className={styles.selectedItems}>
+                  {selectedOptions.map(({ label, value }) => (
+                    // This stops the underlying toggle collapsing the popover when interactive with Tags
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+                    <li key={value} onClick={e => e.stopPropagation()}>
+                      <RemovableTag
+                        removeButtonProps={{
+                          ariaLabel: `Remove option: ${label}`,
+                          onClick: () => onRemoveOption(value),
+                        }}
+                      >
+                        {label}
+                      </RemovableTag>
+                    </li>
+                  ))}
+                </ul>
+
+                <ClearButton
+                  id={clearAllId}
+                  aria-label="Remove all options from "
+                  aria-labelledby={`${clearAllId} ${ariaLabelledBy}`}
+                  classNameOverride={styles.clearAllButton}
+                  onClick={e => {
+                    e.stopPropagation()
+                    onRemoveAllOptions()
+                  }}
+                />
+              </>
+            )}
+          </div>
         </div>
-      </div>
-    </>
-  )
+      </>
+    )
+  }
 )
 
 MultiSelectToggle.displayName = "MultiSelectToggle"

package/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { MultiSelectToggle, MultiSelectToggleProps } from "../index"
 
 export default {
-  title: "Staging/Multi Select/MultiSelectToggle",
+  title: "Components/MultiSelect/MultiSelectToggle",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/Popover/Popover.module.scss

@@ -5,7 +5,14 @@
 .popover {
   box-sizing: border-box;
   box-shadow: $shadow-large-box-shadow;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style
+    transparent;
   border-radius: $border-solid-border-radius;
   background: $color-white;
   overflow: auto;
+
+  &:focus {
+    outline: none;
+    border-color: $color-blue-500;
+  }
 }

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -60,13 +60,14 @@ export const Popover = <RT extends ReferenceType>({
   })
 
   return createPortal(
-    <FocusOn scrollLock={false} {...focusOnProps}>
+    <FocusOn enabled={false} scrollLock={false} {...focusOnProps}>
       <div
         ref={refs.setFloating}
         style={floatingStyles}
         className={classnames(styles.popover, classNameOverride)}
         role="dialog"
         aria-modal="true"
+        tabIndex={-1}
         {...restProps}
       >
         {children}

package/src/MultiSelect/subcomponents/Popover/_docs/Popover.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import { StickerSheetStory } from "~storybook/components/StickerSheet"
 import { Popover, PopoverProps, useFloating } from "../index"
 
 export default {
-  title: "Staging/Multi Select/Popover",
+  title: "Components/MultiSelect/Popover",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/MultiSelect/subcomponents/Popover/_docs/Popover.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import { Popover, useFloating } from "../index"
 
 const meta = {
-  title: "Staging/Multi Select/Popover",
+  title: "Components/MultiSelect/Popover",
   component: Popover,
   args: {
     refs: undefined,

package/src/Popover/Popover.tsx

@@ -144,6 +144,7 @@ export const Popover = ({
           </div>
         )}
         <Text
+          tag="div"
           variant="small"
           classNameOverride={classnames(
             styles.container,