@kaizen/components 1.68.3 → 1.68.5

package/locales/vi.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Vào Trang chủ"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Xem thêm thông tin:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ẩn thông tin:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Các hành động bổ sung"

package/locales/zh-TW.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "前往首頁"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "檢視更多資訊："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隱藏資訊："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "其他行動"

package/locales/zh.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "转到主页"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "查看更多信息："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隐藏信息："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "附加操作"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.3",
+  "version": "1.68.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -722,70 +722,6 @@ describe("<FilterBar />", () => {
     })
   })
 
-  describe("Clear all", () => {
-    it("clears all the values of all the filters", async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesSimple>
-          filters={simpleFilters}
-          defaultValues={{
-            flavour: "jasmine-milk-tea",
-            sugarLevel: 50,
-            iceLevel: 100,
-          }}
-        />
-      )
-      await waitForI18nContent()
-
-      const flavourButton = getByRole("button", {
-        name: "Flavour : Jasmine Milk Tea",
-      })
-      const sugarLevelButton = getByRole("button", {
-        name: "Sugar Level : 50%",
-      })
-      const iceLevelButton = getByRole("button", { name: "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).toHaveAccessibleName("Flavour")
-        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
-        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
-      })
-    })
-
-    it("removes all removable filters", async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesRemovable>
-          filters={filtersRemovable}
-          defaultValues={{
-            flavour: "jasmine-milk-tea",
-            topping: "pearls",
-          }}
-        />
-      )
-      await waitForI18nContent()
-
-      const flavourButton = getByRole("button", {
-        name: "Flavour : Jasmine Milk Tea",
-      })
-      const toppingButton = getByRole("button", { name: "Topping : Pearls" })
-
-      expect(flavourButton).toBeVisible()
-      expect(toppingButton).toBeVisible()
-
-      await user.click(getByRole("button", { name: "Clear all filters" }))
-
-      await waitFor(() => {
-        expect(flavourButton).not.toBeInTheDocument()
-        expect(toppingButton).not.toBeInTheDocument()
-      })
-    })
-  })
-
   describe("External events", () => {
     it("allows updating the values via an external event", async () => {
       const Wrapper = (): JSX.Element => {

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

@@ -0,0 +1,249 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor, within, fn } from "@storybook/test"
+import { FilterMultiSelect } from "~components/Filter/FilterMultiSelect"
+import { DateRange } from "~components/index"
+import { FilterBar, Filters } from "../index"
+
+const meta = {
+  title: "Components/FilterBar/FilterBar Tests",
+  component: FilterBar,
+  argTypes: {
+    filters: { control: false },
+    values: { control: false },
+    onValuesChange: { control: false },
+  },
+  args: {
+    filters: [], // Defined in stories
+    values: {}, // Defined in stories
+    onValuesChange: fn(),
+  },
+} satisfies Meta<typeof FilterBar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+type Values = {
+  flavour: string
+  deliveryDates: DateRange
+  toppings: string[]
+  drank: Date
+}
+
+const filters = [
+  {
+    id: "flavour",
+    name: "Flavour",
+    Component: (
+      <FilterBar.Select
+        items={[
+          { value: "jasmine-milk-tea", label: "Jasmine Milk Tea" },
+          { value: "honey-milk-tea", label: "Honey Milk Tea" },
+          { value: "lychee-green-tea", label: "Lychee Green Tea" },
+        ]}
+      />
+    ),
+  },
+  {
+    id: "deliveryDates",
+    name: "Delivery Dates",
+    Component: <FilterBar.DateRangePicker />,
+  },
+  {
+    id: "toppings",
+    name: "Toppings",
+    Component: (
+      <FilterBar.MultiSelect
+        items={[
+          { value: "none", label: "None" },
+          { value: "pearls", label: "Pearls" },
+          { value: "fruit-jelly", label: "Fruit Jelly" },
+          { value: "peanuts", label: "Peanuts" },
+          { value: "coconut", label: "Coconut" },
+          { value: "aloe", label: "Aloe Vera" },
+          { value: "mochi", label: "Mini Mochi" },
+          { value: "popping-pearls", label: "Popping Pearls" },
+        ]}
+      >
+        {(): 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,
+  },
+  {
+    id: "drank",
+    name: "Drank",
+    Component: <FilterBar.DatePicker />,
+    isRemovable: true,
+  },
+] satisfies Filters<Values>
+
+export const ClearAllFromValue: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step(
+      "Clear all button hidden by default given no values",
+      async () => {
+        expect(
+          canvas.queryByRole("button", {
+            name: "Clear all filters",
+          })
+        ).not.toBeInTheDocument()
+      }
+    )
+
+    await step("filter value is added", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Flavour" }))
+      await userEvent.click(
+        canvas.getByRole("option", { name: "Jasmine Milk Tea" })
+      )
+      expect(
+        canvas.getByRole("button", { name: "Flavour: Jasmine Milk Tea" })
+      ).toBeInTheDocument()
+    })
+
+    await step(
+      "'Clear all' press removes the value and hides itself",
+      async () => {
+        const clearAllButton = canvas.getByRole("button", {
+          name: "Clear all filters",
+        })
+        userEvent.click(clearAllButton)
+
+        waitFor(() =>
+          expect(
+            canvas.getByRole("button", { name: "Flavour" })
+          ).toBeInTheDocument()
+        )
+
+        waitFor(() =>
+          expect(
+            canvas.queryByRole("button", {
+              name: "Clear all filters",
+            })
+          ).not.toBeInTheDocument()
+        )
+      }
+    )
+  },
+}
+
+export const ClearAllFromRemovable: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step("removable filter is added with no value", async () => {
+      await waitFor(() => {
+        userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+      })
+
+      await waitFor(() => {
+        userEvent.click(canvas.getByRole("button", { name: "Toppings" }))
+      })
+    })
+
+    await step("'Clear all' press removes removable filter", async () => {
+      await waitFor(() => {
+        userEvent.click(
+          canvas.getByRole("button", {
+            name: "Clear all filters",
+          })
+        )
+      })
+
+      waitFor(() =>
+        expect(
+          canvas.queryByRole("button", { name: "Toppings" })
+        ).not.toBeInTheDocument()
+      )
+
+      waitFor(() =>
+        expect(
+          canvas.queryByRole("button", {
+            name: "Clear all filters",
+          })
+        ).not.toBeInTheDocument()
+      )
+    })
+  },
+}
+
+export const ClearAllRemovesItself: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step("removable filter is added with no value", async () => {
+      await waitFor(() =>
+        userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+      )
+      await userEvent.click(canvas.getByRole("button", { name: "Drank" }))
+    })
+
+    await step(
+      "Clear all button hides by itself after removing filter",
+      async () => {
+        await userEvent.click(
+          canvas.getByRole("button", { name: "Remove filter - Drank" })
+        )
+      }
+    )
+
+    waitFor(() =>
+      expect(
+        canvas.queryByRole("button", {
+          name: "Clear all filters",
+        })
+      ).not.toBeInTheDocument()
+    )
+  },
+}

package/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import {
 import { FilterBar, Filters } from "../index"
 
 export default {
-  title: "Components/Filter Bar",
+  title: "Components/FilterBar",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -21,7 +21,7 @@ import { FilterBar, Filters, useFilterBarContext } from "../index"
 import { FilterBarMultiSelectProps } from "../subcomponents"
 
 const meta = {
-  title: "Components/Filter Bar",
+  title: "Components/FilterBar",
   component: FilterBar,
   argTypes: {
     filters: { control: false },

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

@@ -22,6 +22,7 @@ export type FilterBarContextValue<
   getFilterState: <Id extends keyof ValuesMap>(
     id: Id
   ) => FilterState<keyof ValuesMap, ValuesMap[Id]>
+  isClearable: boolean
   getActiveFilterValues: () => Partial<ValuesMap>
   /**
    * @deprecated Use `setFilterOpenState` instead.
@@ -90,12 +91,28 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
     setupFilterBarState<ValuesMap>(filters, values)
   )
 
+  const activeFilters = Array.from(
+    state.activeFilterIds,
+    id => mappedFilters[id]
+  )
+
+  // Workaround for DateRangePicker populating the values object before the value is valid
+  // (it purposefully persists a state with a 'from' date but no 'to' date, but hides it on the filter button)
+  const isDraftDateRange = (v: ValuesMap): boolean =>
+    v && v.from !== undefined && v.to === undefined
+  const hasDraftDateRangeOnly = Object.values(values).every(isDraftDateRange)
+
+  const isClearable =
+    (Object.keys(values).length > 0 && !hasDraftDateRangeOnly) ||
+    (state.hasRemovableFilter && activeFilters.some(f => f.isRemovable))
+
   const value = {
     getFilterState: <Id extends keyof ValuesMap>(id: Id) => ({
       ...state.filters[id],
       isActive: state.activeFilterIds.has(id),
       value: values[id],
     }),
+    isClearable,
     getActiveFilterValues: () => values,
     toggleOpenFilter: <Id extends keyof ValuesMap>(
       id: Id,
@@ -163,11 +180,6 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
     }
   }, [filters])
 
-  const activeFilters = Array.from(
-    state.activeFilterIds,
-    id => mappedFilters[id]
-  )
-
   return (
     <FilterBarContext.Provider
       // @note: Context object cannot be generic, thus the type-casting to a looser type

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

@@ -32,6 +32,7 @@ describe("filterBarStateReducer", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: true,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -50,6 +51,7 @@ describe("filterBarStateReducer", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -71,6 +73,7 @@ describe("filterBarStateReducer", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {

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

@@ -49,7 +49,7 @@ export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
 
     case "deactivate_filter":
       state.activeFilterIds.delete(action.id)
-      state.values[action.id] = undefined
+      delete state.values[action.id]
       return {
         ...updateDependentFilters(state),
         hasUpdatedValues: true,

package/src/Filter/FilterBar/context/reducer/setupFilterBarState.spec.tsx

@@ -17,6 +17,16 @@ const filters = [
   },
 ] satisfies Filters<Values>
 
+const filtersNoRemovable = [
+  { id: "flavour", name: "Flavour", Component: <div /> },
+  {
+    id: "sugarLevel",
+    name: "Sugar Level",
+    Component: <div />,
+    isRemovable: false,
+  },
+] satisfies Filters<Values>
+
 describe("setupFilterBarState()", () => {
   it("sets up the base state correctly", () => {
     const values = { flavour: "jasmine", sugarLevel: 50 }
@@ -41,6 +51,7 @@ describe("setupFilterBarState()", () => {
       values,
       dependentFilterIds: new Set<keyof Values>(),
       hasUpdatedValues: false,
+      hasRemovableFilter: true,
     })
   })
 
@@ -65,4 +76,33 @@ describe("setupFilterBarState()", () => {
       expect(state.hasUpdatedValues).toBe(true)
     })
   })
+
+  describe("Removable filters", () => {
+    it("hasRemovableFilter as false when there's no removable filters", () => {
+      const values = {}
+      expect(setupFilterBarState<Values>(filtersNoRemovable, values)).toEqual({
+        filters: {
+          flavour: {
+            id: "flavour",
+            name: "Flavour",
+            isRemovable: false,
+            isOpen: false,
+            isUsable: true,
+          },
+          sugarLevel: {
+            id: "sugarLevel",
+            name: "Sugar Level",
+            isRemovable: false,
+            isOpen: false,
+            isUsable: true,
+          },
+        },
+        activeFilterIds: new Set(["flavour", "sugarLevel"]),
+        values,
+        dependentFilterIds: new Set<keyof Values>(),
+        hasUpdatedValues: false,
+        hasRemovableFilter: false,
+      })
+    })
+  })
 })

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

@@ -27,6 +27,10 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
         baseState.activeFilterIds.add(id)
       }
 
+      if (isRemovable) {
+        baseState.hasRemovableFilter = true
+      }
+
       return baseState
     },
     {
@@ -35,6 +39,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
       focusId: undefined,
     } as FilterBarState<ValuesMap>
   )

package/src/Filter/FilterBar/context/reducer/updateSingleFilter.spec.ts

@@ -31,6 +31,7 @@ describe("filterBarStateReducer: update_single_filter", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = filterBarStateReducer<Values>(state, {
@@ -49,6 +50,7 @@ describe("filterBarStateReducer: update_single_filter", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(state.filters.flavour.isOpen).toBe(false)

package/src/Filter/FilterBar/context/reducer/updateValues.spec.ts

@@ -35,6 +35,7 @@ describe("filterBarStateReducer: update_values", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -65,6 +66,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: { sugarLevel: 50 },
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -93,6 +95,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -122,6 +125,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -149,6 +153,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {

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

@@ -28,6 +28,7 @@ export type FilterBarStateFilters<ValuesMap extends FiltersValues> = {
 
 export type FilterBarState<ValuesMap extends FiltersValues> = {
   hasUpdatedValues: boolean
+  hasRemovableFilter: boolean
   filters: FilterBarStateFilters<ValuesMap>
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>

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

@@ -27,6 +27,7 @@ const state = {
   values: {},
   dependentFilterIds: new Set(),
   hasUpdatedValues: false,
+  hasRemovableFilter: false,
 } satisfies FilterBarState<Values>
 
 describe("checkShouldUpdateValues()", () => {

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

@@ -31,6 +31,7 @@ describe("getInactiveFilters()", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(getInactiveFilters<Values>(state)).toEqual([
@@ -61,6 +62,7 @@ describe("getInactiveFilters()", () => {
       values: {},
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(getInactiveFilters<Values>(state)).toEqual([stateFilters.flavour])

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

@@ -31,6 +31,7 @@ describe("getIsUsableWhenArgs()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const usableArgs = getIsUsableWhenArgs<Values>(state)