@kaizen/components 1.68.2 → 1.68.4

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)

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/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx

@@ -19,61 +19,55 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet heading="Filter Button Base">
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Active", "Focus"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <FilterButtonBase>Label</FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="hover"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="active"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="focus"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Filter Button Base"
+        headers={["Default", "Hover", "Active", "Focus"]}
+      >
+        <StickerSheet.Row>
+          <FilterButtonBase>Label</FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="hover"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="active"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="focus"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Filter Button">
-        <StickerSheet.Header
-          headings={["Closed", "Open", "Has selected value"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <FilterButton label="Desserts" />
-            <FilterButton label="Desserts" isOpen />
-            <FilterButton label="Desserts" selectedValue="Cake" />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Filter Button"
+        headers={["Closed", "Open", "Has selected value"]}
+      >
+        <StickerSheet.Row>
+          <FilterButton label="Desserts" />
+          <FilterButton label="Desserts" isOpen />
+          <FilterButton label="Desserts" selectedValue="Cake" />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Filter Button Removable">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitleWidth={70}>
-            <FilterButtonRemovable
-              triggerButtonProps={{
-                label: "Desserts",
-              }}
-              removeButtonProps={{
-                onClick: () => undefined,
-              }}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet title="Filter Button Removable">
+        <StickerSheet.Row>
+          <FilterButtonRemovable
+            triggerButtonProps={{
+              label: "Desserts",
+            }}
+            removeButtonProps={{
+              onClick: () => undefined,
+            }}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

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

@@ -38,79 +38,73 @@ const StickerSheetTemplate: StickerSheetStory = {
     return (
       <StaticIntlProvider locale="en">
         <StickerSheet
-          heading="Filter Date Picker"
+          title="Filter Date Picker"
           style={{ paddingBottom: IS_CHROMATIC ? "33rem" : undefined }}
+          headers={["No value display", "Value display"]}
         >
-          <StickerSheet.Header
-            headings={["No value display", "Value display"]}
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterDatePicker
-                isOpen={isOpenNoValue}
-                setIsOpen={setIsOpenNoValue}
-                renderTrigger={(triggerButtonProps): JSX.Element => (
-                  <FilterButton {...triggerButtonProps} />
-                )}
-                label="Start day"
-                locale="en-AU"
-                defaultMonth={new Date("2022-05-01")}
-                selectedDate={noDateValue}
-                onDateChange={setNoDateValue}
-              />
-              <FilterDatePicker
-                isOpen={isOpenValue}
-                setIsOpen={setIsOpenValue}
-                renderTrigger={(triggerButtonProps): JSX.Element => (
-                  <FilterButton {...triggerButtonProps} />
-                )}
-                label="Start day"
-                locale="en-AU"
-                selectedDate={dateValue}
-                onDateChange={setDateValue}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <FilterDatePicker
+              isOpen={isOpenNoValue}
+              setIsOpen={setIsOpenNoValue}
+              renderTrigger={(triggerButtonProps): JSX.Element => (
+                <FilterButton {...triggerButtonProps} />
+              )}
+              label="Start day"
+              locale="en-AU"
+              defaultMonth={new Date("2022-05-01")}
+              selectedDate={noDateValue}
+              onDateChange={setNoDateValue}
+            />
+            <FilterDatePicker
+              isOpen={isOpenValue}
+              setIsOpen={setIsOpenValue}
+              renderTrigger={(triggerButtonProps): JSX.Element => (
+                <FilterButton {...triggerButtonProps} />
+              )}
+              label="Start day"
+              locale="en-AU"
+              selectedDate={dateValue}
+              onDateChange={setDateValue}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Filter Date Picker Field">
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Default">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--default"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                defaultMonth={new Date("2022-05-01")}
-                selectedDate={noDateValue}
-                onDateChange={setNoDateValue}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Existing value">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--existing"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                selectedDate={dateValue}
-                onDateChange={setDateValue}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Validation">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--validation"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                selectedDate={dateValueValidation}
-                defaultMonth={new Date("01-01-2022")}
-                onDateChange={setDateValueValidation}
-                onValidate={action("Validation story: date start onValidate")}
-                validationMessage={{
-                  status: "error",
-                  message:
-                    "(Date custom message) Jelly-filled doughnuts are my favourite!",
-                }}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Filter Date Picker Field">
+          <StickerSheet.Row header="Default">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--default"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              defaultMonth={new Date("2022-05-01")}
+              selectedDate={noDateValue}
+              onDateChange={setNoDateValue}
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Existing value">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--existing"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              selectedDate={dateValue}
+              onDateChange={setDateValue}
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Validation">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--validation"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              selectedDate={dateValueValidation}
+              defaultMonth={new Date("01-01-2022")}
+              onDateChange={setDateValueValidation}
+              onValidate={action("Validation story: date start onValidate")}
+              validationMessage={{
+                status: "error",
+                message:
+                  "(Date custom message) Jelly-filled doughnuts are my favourite!",
+              }}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </StaticIntlProvider>
     )
@@ -148,36 +142,23 @@ export const StickerSheetLocales: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Localisation">
-          <StickerSheet.Header headings={["en-AU", "en-US"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterDatePicker {...props} locale="en-AU" />
-              <FilterDatePicker {...props} locale="en-US" />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Localisation" headers={["en-AU", "en-US"]}>
+          <StickerSheet.Row>
+            <FilterDatePicker {...props} locale="en-AU" />
+            <FilterDatePicker {...props} locale="en-US" />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet>
-          <StickerSheet.Header headings={["fr-CA"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <StaticIntlProvider locale="fr-CA">
-                <FilterDatePicker {...props} locale="fr-CA" isOpen />
-              </StaticIntlProvider>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet headers={["fr-CA"]} className="mt-32 pb-[500px]">
+          <StickerSheet.Row>
+            <StaticIntlProvider locale="fr-CA">
+              <FilterDatePicker {...props} locale="fr-CA" isOpen />
+            </StaticIntlProvider>
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )
   },
-  decorators: [
-    Story => (
-      <div className="mb-[500px]">
-        <Story />
-      </div>
-    ),
-  ],
   parameters: {
     a11y: {
       // Wait for translations to load