@kaizen/components 1.68.2 → 1.68.4

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

@@ -35,23 +35,21 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <StickerSheet
-        heading="Filter"
+        title="Filter"
         style={{ paddingBottom: IS_CHROMATIC ? "6rem" : undefined }}
+        headers={["Open"]}
       >
-        <StickerSheet.Header headings={["Open"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Filter
-              isOpen={isOpen}
-              setIsOpen={setIsOpen}
-              renderTrigger={(triggerProps): JSX.Element => (
-                <FilterButton label="Label" {...triggerProps} />
-              )}
-            >
-              <FilterContents>Filter Contents</FilterContents>
-            </Filter>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row>
+          <Filter
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+            renderTrigger={(triggerProps): JSX.Element => (
+              <FilterButton label="Label" {...triggerProps} />
+            )}
+          >
+            <FilterContents>Filter Contents</FilterContents>
+          </Filter>
+        </StickerSheet.Row>
       </StickerSheet>
     )
   },

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 },
@@ -122,60 +122,46 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Filter Bar" style={{ width: "100%" }}>
-          <StickerSheet.Body>
-            <StickerSheet.Row>
+        <StickerSheet title="Filter Bar" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<Values>
+              filters={filters}
+              values={activeValues}
+              onValuesChange={setActiveValues}
+            />
+          </StickerSheet.Row>
+        </StickerSheet>
+
+        <StickerSheet title="Overflow (container 500px)" layout="stretch">
+          <StickerSheet.Row>
+            <div style={{ maxWidth: "500px" }}>
               <FilterBar<Values>
                 filters={filters}
-                values={activeValues}
-                onValuesChange={setActiveValues}
+                values={activeValuesOverflow}
+                onValuesChange={setActiveValuesOverflow}
               />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
-        </StickerSheet>
-
-        <StickerSheet
-          heading="Overflow (container 500px)"
-          style={{ width: "100%" }}
-        >
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <div style={{ maxWidth: "500px" }}>
-                <FilterBar<Values>
-                  filters={filters}
-                  values={activeValuesOverflow}
-                  onValuesChange={setActiveValuesOverflow}
-                />
-              </div>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+            </div>
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Removable; All active" style={{ width: "100%" }}>
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterBar<ValuesRemovable>
-                filters={removableFilters}
-                values={valuesRemovableAllActive}
-                onValuesChange={setValuesRemovableAllActive}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Removable; All active" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<ValuesRemovable>
+              filters={removableFilters}
+              values={valuesRemovableAllActive}
+              onValuesChange={setValuesRemovableAllActive}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet
-          heading="Removable; Partial active"
-          style={{ width: "100%" }}
-        >
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterBar<ValuesRemovable>
-                filters={removableFilters}
-                values={valuesRemovablePartialActive}
-                onValuesChange={setValuesRemovablePartialActive}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Removable; Partial active" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<ValuesRemovable>
+              filters={removableFilters}
+              values={valuesRemovablePartialActive}
+              onValuesChange={setValuesRemovablePartialActive}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )

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, {