@kaizen/components 1.68.3 → 1.68.4

package/dist/cjs/Filter/FilterBar/context/FilterBarContext.cjs

@@ -35,6 +35,18 @@ var FilterBarProvider = function (_a) {
   var _b = React.useReducer(filterBarStateReducer.filterBarStateReducer, setupFilterBarState.setupFilterBarState(filters, values)),
     state = _b[0],
     dispatch = _b[1];
+  var activeFilters = Array.from(state.activeFilterIds, function (id) {
+    return 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)
+  var isDraftDateRange = function (v) {
+    return v && v.from !== undefined && v.to === undefined;
+  };
+  var hasDraftDateRangeOnly = Object.values(values).every(isDraftDateRange);
+  var isClearable = Object.keys(values).length > 0 && !hasDraftDateRangeOnly || state.hasRemovableFilter && activeFilters.some(function (f) {
+    return f.isRemovable;
+  });
   var value = {
     getFilterState: function (id) {
       return tslib.__assign(tslib.__assign({}, state.filters[id]), {
@@ -42,6 +54,7 @@ var FilterBarProvider = function (_a) {
         value: values[id]
       });
     },
+    isClearable: isClearable,
     getActiveFilterValues: function () {
       return values;
     },
@@ -147,9 +160,6 @@ var FilterBarProvider = function (_a) {
       });
     }
   }, [filters]);
-  var activeFilters = Array.from(state.activeFilterIds, function (id) {
-    return mappedFilters[id];
-  });
   return React__default.default.createElement(FilterBarContext.Provider
   // @note: Context object cannot be generic, thus the type-casting to a looser type
   , {

package/dist/cjs/Filter/FilterBar/context/reducer/filterBarStateReducer.cjs

@@ -25,7 +25,7 @@ var filterBarStateReducer = function (state, action) {
       return tslib.__assign({}, updateDependentFilters.updateDependentFilters(state));
     case "deactivate_filter":
       state.activeFilterIds.delete(action.id);
-      state.values[action.id] = undefined;
+      delete state.values[action.id];
       return tslib.__assign(tslib.__assign({}, updateDependentFilters.updateDependentFilters(state)), {
         hasUpdatedValues: true
       });

package/dist/cjs/Filter/FilterBar/context/reducer/setupFilterBarState.cjs

@@ -22,6 +22,9 @@ var setupFilterBarState = function (filters, values) {
     if (!isRemovable || values[id] !== undefined) {
       baseState.activeFilterIds.add(id);
     }
+    if (isRemovable) {
+      baseState.hasRemovableFilter = true;
+    }
     return baseState;
   }, {
     filters: {},
@@ -29,6 +32,7 @@ var setupFilterBarState = function (filters, values) {
     values: values,
     dependentFilterIds: new Set(),
     hasUpdatedValues: false,
+    hasRemovableFilter: false,
     focusId: undefined
   });
   return updateDependentFilters.updateDependentFilters(state);

package/dist/cjs/Filter/FilterBar/context/utils/updateDependentFilters.cjs

@@ -13,7 +13,7 @@ var updateDependentFilters = function (state) {
     state.filters[id].isUsable = isUsable;
     if (!isUsable) {
       state.activeFilterIds.delete(id);
-      state.values[id] = undefined;
+      delete state.values[id];
       state.hasUpdatedValues = true;
       return;
     }

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.cjs

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var classnames = require('classnames');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var ClearAllButton_module = require('./ClearAllButton.module.scss.cjs');
 var Button = require('../../../../__actions__/Button/v1/Button/Button.cjs');
@@ -11,7 +12,9 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ClearAllButton = function () {
+  var _a;
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
   var clearButtonLabel = formatMessage({
     id: "filterBar.clearAllButton.label",
@@ -23,11 +26,13 @@ var ClearAllButton = function () {
     defaultMessage: "Clear all filters",
     description: "Button aria-label to clear all values within the filter bar"
   });
-  var clearAllFilters = FilterBarContext.useFilterBarContext().clearAllFilters;
+  var _b = FilterBarContext.useFilterBarContext(),
+    clearAllFilters = _b.clearAllFilters,
+    isClearable = _b.isClearable;
   return React__default.default.createElement(Button.Button, {
     label: clearButtonLabel,
     "aria-label": clearButtonAriaLabel,
-    classNameOverride: ClearAllButton_module.clearAllButton,
+    classNameOverride: classnames__default.default(ClearAllButton_module.clearAllButton, (_a = {}, _a[ClearAllButton_module.hidden] = !isClearable, _a)),
     secondary: true,
     onClick: clearAllFilters
   });

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2"
+  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
+  "hidden": "ClearAllButton-module_hidden__-L2eA"
 };
 module.exports = styles;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs

@@ -184,6 +184,9 @@ var FilterDateRangePickerField = function (_a) {
       // Translations are loading
       return;
     }
+    if (state.inputStartValue === "" && state.inputEndValue === "") {
+      return;
+    }
     var newStartDate = validateStartDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, state.inputStartValue);
     var newEndDate = validateEndDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, state.inputEndValue);
     if (newStartDate && !isValidRange.isValidRange(newStartDate, newEndDate)) {

package/dist/esm/Filter/FilterBar/context/FilterBarContext.mjs

@@ -27,6 +27,18 @@ var FilterBarProvider = function (_a) {
   var _b = useReducer(filterBarStateReducer, setupFilterBarState(filters, values)),
     state = _b[0],
     dispatch = _b[1];
+  var activeFilters = Array.from(state.activeFilterIds, function (id) {
+    return 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)
+  var isDraftDateRange = function (v) {
+    return v && v.from !== undefined && v.to === undefined;
+  };
+  var hasDraftDateRangeOnly = Object.values(values).every(isDraftDateRange);
+  var isClearable = Object.keys(values).length > 0 && !hasDraftDateRangeOnly || state.hasRemovableFilter && activeFilters.some(function (f) {
+    return f.isRemovable;
+  });
   var value = {
     getFilterState: function (id) {
       return __assign(__assign({}, state.filters[id]), {
@@ -34,6 +46,7 @@ var FilterBarProvider = function (_a) {
         value: values[id]
       });
     },
+    isClearable: isClearable,
     getActiveFilterValues: function () {
       return values;
     },
@@ -139,9 +152,6 @@ var FilterBarProvider = function (_a) {
       });
     }
   }, [filters]);
-  var activeFilters = Array.from(state.activeFilterIds, function (id) {
-    return mappedFilters[id];
-  });
   return /*#__PURE__*/React.createElement(FilterBarContext.Provider
   // @note: Context object cannot be generic, thus the type-casting to a looser type
   , {

package/dist/esm/Filter/FilterBar/context/reducer/filterBarStateReducer.mjs

@@ -23,7 +23,7 @@ var filterBarStateReducer = function (state, action) {
       return __assign({}, updateDependentFilters(state));
     case "deactivate_filter":
       state.activeFilterIds.delete(action.id);
-      state.values[action.id] = undefined;
+      delete state.values[action.id];
       return __assign(__assign({}, updateDependentFilters(state)), {
         hasUpdatedValues: true
       });

package/dist/esm/Filter/FilterBar/context/reducer/setupFilterBarState.mjs

@@ -20,6 +20,9 @@ var setupFilterBarState = function (filters, values) {
     if (!isRemovable || values[id] !== undefined) {
       baseState.activeFilterIds.add(id);
     }
+    if (isRemovable) {
+      baseState.hasRemovableFilter = true;
+    }
     return baseState;
   }, {
     filters: {},
@@ -27,6 +30,7 @@ var setupFilterBarState = function (filters, values) {
     values: values,
     dependentFilterIds: new Set(),
     hasUpdatedValues: false,
+    hasRemovableFilter: false,
     focusId: undefined
   });
   return updateDependentFilters(state);

package/dist/esm/Filter/FilterBar/context/utils/updateDependentFilters.mjs

@@ -11,7 +11,7 @@ var updateDependentFilters = function (state) {
     state.filters[id].isUsable = isUsable;
     if (!isUsable) {
       state.activeFilterIds.delete(id);
-      state.values[id] = undefined;
+      delete state.values[id];
       state.hasUpdatedValues = true;
       return;
     }

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.mjs

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import styles from './ClearAllButton.module.scss.mjs';
 import { Button } from '../../../../__actions__/Button/v1/Button/Button.mjs';
 const ClearAllButton = /*#__PURE__*/function () {
   const ClearAllButton = function () {
+    var _a;
     var formatMessage = useIntl().formatMessage;
     var clearButtonLabel = formatMessage({
       id: "filterBar.clearAllButton.label",
@@ -16,11 +18,13 @@ const ClearAllButton = /*#__PURE__*/function () {
       defaultMessage: "Clear all filters",
       description: "Button aria-label to clear all values within the filter bar"
     });
-    var clearAllFilters = useFilterBarContext().clearAllFilters;
+    var _b = useFilterBarContext(),
+      clearAllFilters = _b.clearAllFilters,
+      isClearable = _b.isClearable;
     return /*#__PURE__*/React.createElement(Button, {
       label: clearButtonLabel,
       "aria-label": clearButtonAriaLabel,
-      classNameOverride: styles.clearAllButton,
+      classNameOverride: classnames(styles.clearAllButton, (_a = {}, _a[styles.hidden] = !isClearable, _a)),
       secondary: true,
       onClick: clearAllFilters
     });

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss.mjs

@@ -1,4 +1,5 @@
 var styles = {
-  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2"
+  "clearAllButton": "ClearAllButton-module_clearAllButton__XNkm2",
+  "hidden": "ClearAllButton-module_hidden__-L2eA"
 };
 export { styles as default };

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs

@@ -176,6 +176,9 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
         // Translations are loading
         return;
       }
+      if (state.inputStartValue === "" && state.inputEndValue === "") {
+        return;
+      }
       var newStartDate = validateStartDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, state.inputStartValue);
       var newEndDate = validateEndDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, state.inputEndValue);
       if (newStartDate && !isValidRange(newStartDate, newEndDate)) {

package/dist/styles.css

@@ -1,4 +1,85 @@
 @layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:500;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:600;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:600;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:600;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:500;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
+.MenuItem-module_item__uImZI {
+  display: block;
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_flexWrapper__hiXro {
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+}
+
+.MenuItem-module_iconWrapper__QoZgd {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__uImZI:focus {
+  outline: none;
+}
+
+.MenuItem-module_item__uImZI[data-hovered],
+.MenuItem-module_item__uImZI[data-focus-visible] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__uImZI[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) var(--color-blue-500);
+}
+
+.MenuItem-module_item__uImZI[data-disabled] {
+  opacity: 0.3;
+}
+
+.Menu-module_menu__AowD8 {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.Menu-module_menu__AowD8 .react-aria-Header {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.Menu-module_menu__AowD8 section:not(:last-of-type) {
+  &::after {
+    width: 100%;
+    height: 1px;
+    background-color: var(--border-solid-border-color);
+    content: "";
+    display: block;
+    margin-block: var(--spacing-6);
+  }
+}
+
 .Button-module_button__vlUCI {
   /* RESET */
   appearance: none;
@@ -235,85 +316,24 @@
   visibility: hidden;
 }
 
-.MenuItem-module_item__uImZI {
-  display: block;
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width)
-    var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_flexWrapper__hiXro {
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-}
-
-.MenuItem-module_iconWrapper__QoZgd {
-  flex-shrink: 0;
-  display: flex;
+.ButtonContent-module_buttonContent__v5mHZ {
+  display: inline-flex;
   align-items: center;
+  gap: var(--button-icon-gap, var(--spacing-6));
 }
 
-.MenuItem-module_item__uImZI:focus {
-  outline: none;
-}
-
-.MenuItem-module_item__uImZI[data-hovered],
-.MenuItem-module_item__uImZI[data-focus-visible] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__uImZI[data-focus-visible] {
-  outline: var(--border-focus-ring-border-width)
-    var(--border-focus-ring-border-style) var(--color-blue-500);
-}
-
-.MenuItem-module_item__uImZI[data-disabled] {
-  opacity: 0.3;
-}
-
-.Menu-module_menu__AowD8 {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
+.ButtonContent-module_large__mLOdb {
+  --button-icon-gap: var(--spacing-8);
 }
 
-.Menu-module_menu__AowD8 .react-aria-Header {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
+.ButtonContent-module_buttonLabel__T5XAq {
+  display: inline-flex;
+  align-items: center;
 }
 
-.Menu-module_menu__AowD8 section:not(:last-of-type) {
-  &::after {
-    width: 100%;
-    height: 1px;
-    background-color: var(--border-solid-border-color);
-    content: "";
-    display: block;
-    margin-block: var(--spacing-6);
-  }
+.ButtonContent-module_buttonIcon__qkAX- {
+  display: inline-flex;
+  align-items: center;
 }
 
 .PendingContent-module_pendingContent__c4IFS {
@@ -333,26 +353,6 @@
   transform: translate(-50%, -50%);
 }
 
-.ButtonContent-module_buttonContent__v5mHZ {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--button-icon-gap, var(--spacing-6));
-}
-
-.ButtonContent-module_large__mLOdb {
-  --button-icon-gap: var(--spacing-8);
-}
-
-.ButtonContent-module_buttonLabel__T5XAq {
-  display: inline-flex;
-  align-items: center;
-}
-
-.ButtonContent-module_buttonIcon__qkAX- {
-  display: inline-flex;
-  align-items: center;
-}
-
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -4809,6 +4809,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .ClearAllButton-module_clearAllButton__XNkm2 {
   white-space: nowrap;
 }
+
+.ClearAllButton-module_hidden__-L2eA {
+  visibility: hidden;
+}
 .FilterBar-module_filterBar__JEVKL {
   display: flex;
   padding: var(--spacing-8);

package/dist/types/Filter/FilterBar/context/FilterBarContext.d.ts

@@ -2,6 +2,7 @@ import { FilterAttributes, FilterState, Filters, FiltersValues } from "../types"
 import { ActiveFiltersArray } from "./types";
 export type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Record<string, Value>> = {
     getFilterState: <Id extends keyof ValuesMap>(id: Id) => FilterState<keyof ValuesMap, ValuesMap[Id]>;
+    isClearable: boolean;
     getActiveFilterValues: () => Partial<ValuesMap>;
     /**
      * @deprecated Use `setFilterOpenState` instead.

package/dist/types/Filter/FilterBar/context/types.d.ts

@@ -20,6 +20,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.3",
+  "version": "1.68.4",
   "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)

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