@kaizen/components 1.68.3 → 1.68.5

package/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts

@@ -38,6 +38,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = updateDependentFilters<Values>(state)
@@ -53,6 +54,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = updateDependentFilters<Values>(state)
@@ -77,6 +79,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     updateDependentFilters<Values>(state)
@@ -98,6 +101,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -117,6 +121,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -139,6 +144,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine", sugarLevel: 50 },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -161,6 +167,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -176,6 +183,7 @@ describe("updateDependentFilters()", () => {
         values: { sugarLevel: 50 },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)

package/src/Filter/FilterBar/context/utils/updateDependentFilters.ts

@@ -22,7 +22,7 @@ export const updateDependentFilters = <ValuesMap extends FiltersValues>(
 
     if (!isUsable) {
       state.activeFilterIds.delete(id)
-      state.values[id] = undefined
+      delete state.values[id]
       state.hasUpdatedValues = true
       return
     }

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss

@@ -1,3 +1,7 @@
 .clearAllButton {
   white-space: nowrap;
 }
+
+.hidden {
+  visibility: hidden;
+}

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import classnames from "classnames"
 import { Button } from "~components/__actions__/v2"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import styles from "./ClearAllButton.module.scss"
@@ -19,13 +20,15 @@ export const ClearAllButton = (): JSX.Element => {
     description: "Button aria-label to clear all values within the filter bar",
   })
 
-  const { clearAllFilters } = useFilterBarContext()
+  const { clearAllFilters, isClearable } = useFilterBarContext()
 
   return (
     <Button
       label={clearButtonLabel}
       aria-label={clearButtonAriaLabel}
-      classNameOverride={styles.clearAllButton}
+      classNameOverride={classnames(styles.clearAllButton, {
+        [styles.hidden]: !isClearable,
+      })}
       secondary
       onClick={clearAllFilters}
     />

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -259,6 +259,10 @@ export const FilterDateRangePickerField = ({
       return
     }
 
+    if (state.inputStartValue === "" && state.inputEndValue === "") {
+      return
+    }
+
     const newStartDate = validateStartDate(
       selectedRange?.from,
       state.inputStartValue

package/src/Tile/TileGrid/_docs/TileGrid.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, waitFor, within } from "@storybook/test"
 import { InformationTile } from "~components/Tile"
 import { TileGrid } from "../index"
 
@@ -10,21 +11,21 @@ const meta = {
     children: (
       <>
         <InformationTile
-          title="Title"
+          title="Title A"
           metadata="Side A"
-          information="Side B"
+          information="Side A - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title B"
+          metadata="Side B"
+          information="Side B - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title C"
+          metadata="Side C"
+          information="Side C - Back"
           footer={<>Footer</>}
         />
       </>
@@ -45,3 +46,35 @@ export const Playground: Story = {
     },
   },
 }
+
+// Test for multiple tiles, flipping one doesn't flip others
+export const FlipOneNotOthers: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title A",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title A",
+        })
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    await step("Check other tiles", async () => {
+      await waitFor(() => {
+        expect(canvas.getByText("Side A - Back")).toBeInTheDocument()
+        expect(canvas.getByText("Title B")).toBeInTheDocument()
+        expect(canvas.getByText("Title C")).toBeInTheDocument()
+      })
+    })
+  },
+}

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -87,3 +87,61 @@ export const InfoButtonLabel: Story = {
     })
   },
 }
+
+export const DoesNotStealFocusOnInitialRender: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+        expect(buttonWithInfoLabel).not.toHaveFocus()
+      })
+    })
+  },
+}
+
+export const FocusOnFlip: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+    const buttonWithInfoLabel = await canvas.findByRole("button", {
+      name: "View more information: Title",
+    })
+
+    await step("initial render complete", async () => {
+      expect(buttonWithInfoLabel).toBeInTheDocument()
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    const returnButton = canvas.getByRole("button", {
+      name: "Hide information: Title",
+    })
+
+    await step("Can click on info button again", async () => {
+      await waitFor(() => {
+        returnButton.click()
+      })
+    })
+
+    await step("Info button has focus again", async () => {
+      await waitFor(() => {
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
+    })
+  },
+}

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from "react"
+import React, { HTMLAttributes, useState, useRef, useEffect } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
@@ -57,7 +57,28 @@ export const GenericTile = ({
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean>(false)
+  const [isDocumentReady, setIsDocumentReady] = useState<boolean>(false)
+
   const { formatMessage } = useIntl()
+  const infoButtonRef = useRef<HTMLButtonElement>(null)
+  const infoButtonReturnRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    setIsDocumentReady(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true)
+      return
+    }
+
+    if (isFlipped) {
+      infoButtonReturnRef.current!.focus()
+    } else {
+      infoButtonRef.current!.focus()
+    }
+  }, [isFlipped])
 
   const translatedInfoLabel = formatMessage({
     id: "kzGenericTile.infoButtonLabel",
@@ -97,6 +118,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
+            ref={infoButtonRef}
           />
         </div>
       )}
@@ -162,6 +184,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}
+            ref={infoButtonReturnRef}
           />
         </div>
         <div className={styles.information}>