@kaizen/components 1.67.2 → 1.67.3

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

@@ -80,16 +80,24 @@ var FilterBarProvider = function (_a) {
       });
     },
     showFilter: function (id) {
-      return dispatch({
+      dispatch({
         type: "activate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
     },
     hideFilter: function (id) {
       dispatch({
         type: "deactivate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: "add_filter"
+      });
     },
     getInactiveFilters: function () {
       return getInactiveFilters.getInactiveFilters(state);
@@ -105,7 +113,14 @@ var FilterBarProvider = function (_a) {
         type: "update_values",
         values: {}
       });
-    }
+    },
+    setFocus: function (id) {
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
+    },
+    focusId: state.focusId
   };
   React.useEffect(function () {
     var shouldUpdate = checkShouldUpdateValues.checkShouldUpdateValues(state, values);

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

@@ -6,6 +6,10 @@ var updateSingleFilter = require('./updateSingleFilter.cjs');
 var updateValues = require('./updateValues.cjs');
 var filterBarStateReducer = function (state, action) {
   switch (action.type) {
+    case "set_focus":
+      return tslib.__assign(tslib.__assign({}, state), {
+        focusId: action.id
+      });
     case "update_values":
       return tslib.__assign({}, updateValues.updateValues(state, action.values));
     case "complete_update_values":

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

@@ -28,7 +28,8 @@ var setupFilterBarState = function (filters, values) {
     activeFilterIds: new Set(),
     values: values,
     dependentFilterIds: new Set(),
-    hasUpdatedValues: false
+    hasUpdatedValues: false,
+    focusId: undefined
   });
   return updateDependentFilters.updateDependentFilters(state);
 };

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

@@ -16,6 +16,7 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var AddFiltersMenu = function () {
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var buttonRef = React.useRef(null);
   var menuButtonLabel = formatMessage({
     id: "filterBar.addFiltersMenu.buttonLabel",
     defaultMessage: "Add Filters",
@@ -23,10 +24,20 @@ var AddFiltersMenu = function () {
   });
   var _a = FilterBarContext.useFilterBarContext(),
     getInactiveFilters = _a.getInactiveFilters,
-    showFilter = _a.showFilter;
+    showFilter = _a.showFilter,
+    focusId = _a.focusId,
+    setFocus = _a.setFocus;
   var inactiveFilters = getInactiveFilters();
+  React.useEffect(function () {
+    var _a;
+    if (focusId === "add_filter") {
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      setFocus(undefined);
+    }
+  }, [focusId]);
   return React__default.default.createElement(Menu.Menu, {
     button: React__default.default.createElement(Button.Button, {
+      ref: buttonRef,
       label: menuButtonLabel,
       secondary: true,
       disabled: inactiveFilters.length === 0,

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

@@ -5,6 +5,7 @@ var React = require('react');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var FilterButton = require('../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
+var isRefObject = require('../../../../utils/isRefObject.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -16,7 +17,17 @@ var FilterBarButton = React.forwardRef(function (_a, ref) {
     _b = _a.isRemovable,
     isRemovable = _b === void 0 ? false : _b,
     props = tslib.__rest(_a, ["filterId", "isRemovable"]);
-  var hideFilter = FilterBarContext.useFilterBarContext().hideFilter;
+  var _c = FilterBarContext.useFilterBarContext(),
+    hideFilter = _c.hideFilter,
+    focusId = _c.focusId,
+    setFocus = _c.setFocus;
+  React.useEffect(function () {
+    var _a, _b, _c;
+    if (focusId === filterId && isRefObject.isRefObject(ref)) {
+      (_c = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.triggerRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+      setFocus(undefined);
+    }
+  }, [focusId]);
   return isRemovable ? React__default.default.createElement(FilterButtonRemovable.FilterButtonRemovable, {
     ref: ref,
     triggerButtonProps: props,

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

@@ -32,10 +32,13 @@ var FilterBarMultiSelect = function (_a) {
     getFilterState = _b.getFilterState,
     setFilterOpenState = _b.setFilterOpenState,
     updateValue = _b.updateValue,
-    hideFilter = _b.hideFilter;
+    hideFilter = _b.hideFilter,
+    focusId = _b.focusId,
+    setFocus = _b.setFocus;
   var _c = React.useState(propsItems),
     items = _c[0],
     setItems = _c[1];
+  var buttonRef = React.useRef(null);
   if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect");
   var filterState = getFilterState(id);
   React.useEffect(function () {
@@ -57,6 +60,13 @@ var FilterBarMultiSelect = function (_a) {
       }
     }
   }, [items]);
+  React.useEffect(function () {
+    var _a;
+    if (focusId === id) {
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      setFocus(undefined);
+    }
+  }, [focusId]);
   return React__default.default.createElement(FilterMultiSelect.FilterMultiSelect, tslib.__assign({
     label: filterState.name,
     // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
@@ -81,7 +91,8 @@ var FilterBarMultiSelect = function (_a) {
           return hideFilter(id);
         }
       })) : React__default.default.createElement(FilterMultiSelect.FilterMultiSelect.TriggerButton, tslib.__assign({}, triggerProps));
-    }
+    },
+    triggerRef: buttonRef
   }, props), children);
 };
 FilterBarMultiSelect.displayName = "FilterBar.MultiSelect";

package/dist/cjs/Filter/FilterMultiSelect/FilterMultiSelect.cjs

@@ -39,11 +39,13 @@ var FilterMultiSelect = function (_a) {
     onSelectionChange = _a.onSelectionChange,
     _b = _a.selectionMode,
     selectionMode = _b === void 0 ? "multiple" : _b,
-    onSearchInputChange = _a.onSearchInputChange;
+    onSearchInputChange = _a.onSearchInputChange,
+    triggerRef = _a.triggerRef;
   var menuTriggerProps = {
     isOpen: isOpen,
     defaultOpen: defaultOpen,
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    triggerRef: triggerRef
   };
   var menuPopupProps = {
     isLoading: isLoading,

package/dist/cjs/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.cjs

@@ -15,7 +15,8 @@ function MenuTriggerProvider(_a) {
   var isOpen = _a.isOpen,
     defaultOpen = _a.defaultOpen,
     onOpenChange = _a.onOpenChange,
-    children = _a.children;
+    children = _a.children,
+    triggerRef = _a.triggerRef;
   // Create state based on the incoming props to manage the open/close
   var state = menu.useMenuTriggerState({
     isOpen: isOpen,
@@ -23,7 +24,8 @@ function MenuTriggerProvider(_a) {
     onOpenChange: onOpenChange
   });
   // Get A11y attributes and events for the menu trigger and menu elements
-  var ref = React.useRef(null);
+  var fallbackRef = React.useRef(null);
+  var ref = triggerRef || fallbackRef;
   var _b = menu$1.useMenuTrigger({}, state, ref),
     menuTriggerProps = _b.menuTriggerProps,
     menuProps = _b.menuProps;

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

@@ -72,16 +72,24 @@ var FilterBarProvider = function (_a) {
       });
     },
     showFilter: function (id) {
-      return dispatch({
+      dispatch({
         type: "activate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
     },
     hideFilter: function (id) {
       dispatch({
         type: "deactivate_filter",
         id: id
       });
+      dispatch({
+        type: "set_focus",
+        id: "add_filter"
+      });
     },
     getInactiveFilters: function () {
       return getInactiveFilters(state);
@@ -97,7 +105,14 @@ var FilterBarProvider = function (_a) {
         type: "update_values",
         values: {}
       });
-    }
+    },
+    setFocus: function (id) {
+      dispatch({
+        type: "set_focus",
+        id: id
+      });
+    },
+    focusId: state.focusId
   };
   useEffect(function () {
     var shouldUpdate = checkShouldUpdateValues(state, values);

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

@@ -4,6 +4,10 @@ import { updateSingleFilter } from './updateSingleFilter.mjs';
 import { updateValues } from './updateValues.mjs';
 var filterBarStateReducer = function (state, action) {
   switch (action.type) {
+    case "set_focus":
+      return __assign(__assign({}, state), {
+        focusId: action.id
+      });
     case "update_values":
       return __assign({}, updateValues(state, action.values));
     case "complete_update_values":

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

@@ -26,7 +26,8 @@ var setupFilterBarState = function (filters, values) {
     activeFilterIds: new Set(),
     values: values,
     dependentFilterIds: new Set(),
-    hasUpdatedValues: false
+    hasUpdatedValues: false,
+    focusId: undefined
   });
   return updateDependentFilters(state);
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Icon } from '../../../../__future__/Icon/Icon.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
@@ -9,6 +9,7 @@ import { Button } from '../../../../__actions__/Button/v1/Button/Button.mjs';
 const AddFiltersMenu = /*#__PURE__*/function () {
   const AddFiltersMenu = function () {
     var formatMessage = useIntl().formatMessage;
+    var buttonRef = useRef(null);
     var menuButtonLabel = formatMessage({
       id: "filterBar.addFiltersMenu.buttonLabel",
       defaultMessage: "Add Filters",
@@ -16,10 +17,20 @@ const AddFiltersMenu = /*#__PURE__*/function () {
     });
     var _a = useFilterBarContext(),
       getInactiveFilters = _a.getInactiveFilters,
-      showFilter = _a.showFilter;
+      showFilter = _a.showFilter,
+      focusId = _a.focusId,
+      setFocus = _a.setFocus;
     var inactiveFilters = getInactiveFilters();
+    useEffect(function () {
+      var _a;
+      if (focusId === "add_filter") {
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return /*#__PURE__*/React.createElement(Menu, {
       button: /*#__PURE__*/React.createElement(Button, {
+        ref: buttonRef,
         label: menuButtonLabel,
         secondary: true,
         disabled: inactiveFilters.length === 0,

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

@@ -1,15 +1,26 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { FilterButton } from '../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
+import { isRefObject } from '../../../../utils/isRefObject.mjs';
 const FilterBarButton = /*#__PURE__*/function () {
   const FilterBarButton = /*#__PURE__*/forwardRef(function (_a, ref) {
     var filterId = _a.filterId,
       _b = _a.isRemovable,
       isRemovable = _b === void 0 ? false : _b,
       props = __rest(_a, ["filterId", "isRemovable"]);
-    var hideFilter = useFilterBarContext().hideFilter;
+    var _c = useFilterBarContext(),
+      hideFilter = _c.hideFilter,
+      focusId = _c.focusId,
+      setFocus = _c.setFocus;
+    useEffect(function () {
+      var _a, _b, _c;
+      if (focusId === filterId && isRefObject(ref)) {
+        (_c = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.triggerRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return isRemovable ? ( /*#__PURE__*/React.createElement(FilterButtonRemovable, {
       ref: ref,
       triggerButtonProps: props,

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

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { FilterMultiSelect } from '../../../FilterMultiSelect/FilterMultiSelect.mjs';
 import '../../../FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../../FilterMultiSelect/context/SelectionProvider/SelectionProvider.mjs';
@@ -25,10 +25,13 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
       getFilterState = _b.getFilterState,
       setFilterOpenState = _b.setFilterOpenState,
       updateValue = _b.updateValue,
-      hideFilter = _b.hideFilter;
+      hideFilter = _b.hideFilter,
+      focusId = _b.focusId,
+      setFocus = _b.setFocus;
     var _c = useState(propsItems),
       items = _c[0],
       setItems = _c[1];
+    var buttonRef = useRef(null);
     if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect");
     var filterState = getFilterState(id);
     useEffect(function () {
@@ -50,6 +53,13 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
         }
       }
     }, [items]);
+    useEffect(function () {
+      var _a;
+      if (focusId === id) {
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus(undefined);
+      }
+    }, [focusId]);
     return /*#__PURE__*/React.createElement(FilterMultiSelect, __assign({
       label: filterState.name,
       // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
@@ -74,7 +84,8 @@ const FilterBarMultiSelect = /*#__PURE__*/function () {
             return hideFilter(id);
           }
         }))) : ( /*#__PURE__*/React.createElement(FilterMultiSelect.TriggerButton, __assign({}, triggerProps)));
-      }
+      },
+      triggerRef: buttonRef
     }, props), children);
   };
   FilterBarMultiSelect.displayName = "FilterBar.MultiSelect";

package/dist/esm/Filter/FilterMultiSelect/FilterMultiSelect.mjs

@@ -32,11 +32,13 @@ const FilterMultiSelect = /*#__PURE__*/function () {
       onSelectionChange = _a.onSelectionChange,
       _b = _a.selectionMode,
       selectionMode = _b === void 0 ? "multiple" : _b,
-      onSearchInputChange = _a.onSearchInputChange;
+      onSearchInputChange = _a.onSearchInputChange,
+      triggerRef = _a.triggerRef;
     var menuTriggerProps = {
       isOpen: isOpen,
       defaultOpen: defaultOpen,
-      onOpenChange: onOpenChange
+      onOpenChange: onOpenChange,
+      triggerRef: triggerRef
     };
     var menuPopupProps = {
       isLoading: isLoading,

package/dist/esm/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.mjs

@@ -7,7 +7,8 @@ function MenuTriggerProvider(_a) {
   var isOpen = _a.isOpen,
     defaultOpen = _a.defaultOpen,
     onOpenChange = _a.onOpenChange,
-    children = _a.children;
+    children = _a.children,
+    triggerRef = _a.triggerRef;
   // Create state based on the incoming props to manage the open/close
   var state = useMenuTriggerState({
     isOpen: isOpen,
@@ -15,7 +16,8 @@ function MenuTriggerProvider(_a) {
     onOpenChange: onOpenChange
   });
   // Get A11y attributes and events for the menu trigger and menu elements
-  var ref = useRef(null);
+  var fallbackRef = useRef(null);
+  var ref = triggerRef || fallbackRef;
   var _b = useMenuTrigger({}, state, ref),
     menuTriggerProps = _b.menuTriggerProps,
     menuProps = _b.menuProps;

package/dist/styles.css

@@ -1,38 +1,4 @@
 @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__DPerF {
-  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;
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_iconWrapper__bRdQN {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.MenuItem-module_item__DPerF[data-focused] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__DPerF[data-disabled] {
-  opacity: 0.3;
-}
 .Menu-module_menu__iHYqh {
   background-color: var(--color-white);
   color: var(--color-purple-800);
@@ -151,6 +117,40 @@
   --button-icon-size: var(--spacing-16);
   gap: var(--spacing-8);
 }
+.MenuItem-module_item__DPerF {
+  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;
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_iconWrapper__bRdQN {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__DPerF[data-focused] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+  outline: none;
+  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__DPerF[data-disabled] {
+  opacity: 0.3;
+}
 .Focusable-module_focusableWrapper__NfuIi {
   display: inline-flex;
 }

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

@@ -14,6 +14,8 @@ export type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Recor
     hideFilter: <Id extends keyof ValuesMap>(id: Id) => void;
     getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>;
     clearAllFilters: () => void;
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void;
+    focusId?: keyof ValuesMap;
 };
 export declare const useFilterBarContext: <Value, Values extends FiltersValues = Record<string, Value>>() => FilterBarContextValue<Value, Values>;
 export type FilterBarProviderProps<ValuesMap extends FiltersValues> = {

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

@@ -18,6 +18,9 @@ type Actions<ValuesMap extends FiltersValues> = {
 } | {
     type: "update_filter_labels";
     data: Filters<ValuesMap>;
+} | {
+    type: "set_focus";
+    id: keyof ValuesMap | undefined;
 };
 export declare const filterBarStateReducer: <ValuesMap extends FiltersValues>(state: FilterBarState<ValuesMap>, action: Actions<ValuesMap>) => FilterBarState<ValuesMap>;
 export {};

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

@@ -24,5 +24,6 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
     activeFilterIds: Set<keyof ValuesMap>;
     values: Partial<ValuesMap>;
     dependentFilterIds: Set<keyof ValuesMap>;
+    focusId?: keyof ValuesMap;
 };
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>;

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -15,9 +15,10 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
     trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode;
     children: (value?: SelectionProviderContextType) => React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 } & Omit<MenuPopupProps, "children"> & Omit<MenuTriggerProviderProps, "children"> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/dist/types/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.d.ts

@@ -7,6 +7,7 @@ export type MenuTriggerProviderProps = {
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     children: React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 };
 export type MenuTriggerProviderContextType = {
     menuTriggerProps: HTMLAttributes<HTMLElement>;
@@ -15,6 +16,6 @@ export type MenuTriggerProviderContextType = {
     menuTriggerState: MenuTriggerState;
     buttonRef: React.RefObject<HTMLButtonElement>;
 };
-export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, }: MenuTriggerProviderProps): JSX.Element;
+export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, triggerRef, }: MenuTriggerProviderProps): JSX.Element;
 export declare const useMenuTriggerContext: () => MenuTriggerProviderContextType;
 export declare const MenuTriggerConsumer: ({ children, }: React.ConsumerProps<MenuTriggerProviderContextType>) => JSX.Element;

package/package.json

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

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

@@ -65,6 +65,7 @@ const simpleFilters = [
 type ValuesRemovable = {
   flavour: string
   topping: string
+  others: string
 }
 
 const filtersRemovable = [
@@ -86,6 +87,37 @@ const filtersRemovable = [
     ),
     isRemovable: true,
   },
+  {
+    id: "others",
+    name: "Others",
+    Component: (
+      <FilterBar.MultiSelect
+        items={[
+          { value: "gluten-free", label: "Gluten Free" },
+          { value: "no-sugar", label: "No Sugar" },
+          { value: "dairy-free", label: "Dairy Free" },
+        ]}
+      >
+        {(): 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,
+  },
 ] satisfies Filters<ValuesRemovable>
 
 type ValuesDependent = {
@@ -288,6 +320,61 @@ describe("<FilterBar />", () => {
       expect(filters[1]).toHaveTextContent("Flavour")
       expect(filters[2]).toHaveTextContent("Sugar Level")
     })
+
+    it("moves focus to recently added filter button", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesSimple>
+          filters={simpleFilters.map(filter => ({
+            ...filter,
+            isRemovable: true,
+          }))}
+        />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      await user.click(menuOptionIceLevel)
+
+      expect(getByRole("button", { name: "Ice Level" })).toHaveFocus()
+    })
+
+    it("moves focus to recently added filter button in the FilterMultiSelect case", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionOthers = getByRole("button", { name: "Others" })
+      await user.click(menuOptionOthers)
+
+      expect(getByRole("button", { name: "Others" })).toHaveFocus()
+    })
+
+    it("restores focus to the add filter button after remove", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable>
+          filters={filtersRemovable}
+          defaultValues={{ topping: "pearls" }}
+        />
+      )
+      await waitForI18nContent()
+
+      const filterButton = getByRole("button", { name: "Topping : Pearls" })
+      expect(filterButton).toBeVisible()
+
+      await user.click(getByRole("button", { name: "Remove filter - Topping" }))
+      await waitFor(() => {
+        expect(filterButton).not.toBeInTheDocument()
+      })
+
+      expect(getByRole("button", { name: "Add Filters" })).toHaveFocus()
+    })
   })
 
   describe("Dependent filters", () => {

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

@@ -43,6 +43,8 @@ export type FilterBarContextValue<
   hideFilter: <Id extends keyof ValuesMap>(id: Id) => void
   getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>
   clearAllFilters: () => void
+  setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void
+  focusId?: keyof ValuesMap
 }
 
 const FilterBarContext = React.createContext<FilterBarContextValue<any> | null>(
@@ -119,10 +121,13 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
         values: { ...values, [id]: getValidValue(newValue) },
       })
     },
-    showFilter: <Id extends keyof ValuesMap>(id: Id): void =>
-      dispatch({ type: "activate_filter", id }),
+    showFilter: <Id extends keyof ValuesMap>(id: Id): void => {
+      dispatch({ type: "activate_filter", id })
+      dispatch({ type: "set_focus", id })
+    },
     hideFilter: <Id extends keyof ValuesMap>(id: Id): void => {
       dispatch({ type: "deactivate_filter", id })
+      dispatch({ type: "set_focus", id: "add_filter" })
     },
     getInactiveFilters: () => getInactiveFilters<ValuesMap>(state),
     clearAllFilters: () => {
@@ -132,6 +137,10 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
       })
       dispatch({ type: "update_values", values: {} })
     },
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => {
+      dispatch({ type: "set_focus", id })
+    },
+    focusId: state.focusId,
   } satisfies FilterBarContextValue<any, ValuesMap>
 
   useEffect(() => {

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

@@ -15,12 +15,19 @@ type Actions<ValuesMap extends FiltersValues> =
   | { type: "activate_filter"; id: keyof ValuesMap }
   | { type: "deactivate_filter"; id: keyof ValuesMap }
   | { type: "update_filter_labels"; data: Filters<ValuesMap> }
+  | { type: "set_focus"; id: keyof ValuesMap | undefined }
 
 export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
   state: FilterBarState<ValuesMap>,
   action: Actions<ValuesMap>
 ): FilterBarState<ValuesMap> => {
   switch (action.type) {
+    case "set_focus":
+      return {
+        ...state,
+        focusId: action.id,
+      }
+
     case "update_values":
       return { ...updateValues(state, action.values) }
 

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

@@ -35,6 +35,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      focusId: undefined,
     } as FilterBarState<ValuesMap>
   )
 

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

@@ -32,6 +32,7 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>
   dependentFilterIds: Set<keyof ValuesMap>
+  focusId?: keyof ValuesMap
 }
 
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
@@ -6,6 +6,7 @@ import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
   const { formatMessage } = useIntl()
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   const menuButtonLabel = formatMessage({
     id: "filterBar.addFiltersMenu.buttonLabel",
@@ -14,13 +15,22 @@ export const AddFiltersMenu = (): JSX.Element => {
       "Menu button label to show additional available filter options",
   })
 
-  const { getInactiveFilters, showFilter } = useFilterBarContext()
+  const { getInactiveFilters, showFilter, focusId, setFocus } =
+    useFilterBarContext()
   const inactiveFilters = getInactiveFilters()
 
+  useEffect(() => {
+    if (focusId === "add_filter") {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <Menu
       button={
         <Button
+          ref={buttonRef}
           label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React, { forwardRef, useEffect } from "react"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -6,6 +6,7 @@ import {
   FilterButtonProps,
   FilterButtonRemovable,
 } from "~components/Filter/FilterButton"
+import { isRefObject } from "~components/utils/isRefObject"
 
 export type FilterBarButtonProps = FilterButtonProps & {
   filterId: string
@@ -16,7 +17,14 @@ export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
 >(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter } = useFilterBarContext()
+  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+
+  useEffect(() => {
+    if (focusId === filterId && isRefObject(ref)) {
+      ref?.current?.triggerRef?.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
 
   return isRemovable ? (
     <FilterButtonRemovable

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Selection, Key } from "@react-types/shared"
 import {
   FilterMultiSelect,
@@ -43,9 +43,16 @@ export const FilterBarMultiSelect = ({
   onSelectionChange,
   ...props
 }: FilterBarMultiSelectProps): JSX.Element | null => {
-  const { getFilterState, setFilterOpenState, updateValue, hideFilter } =
-    useFilterBarContext<ConsumableSelection>()
+  const {
+    getFilterState,
+    setFilterOpenState,
+    updateValue,
+    hideFilter,
+    focusId,
+    setFocus,
+  } = useFilterBarContext<ConsumableSelection>()
   const [items, setItems] = useState<ItemType[]>(propsItems)
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect")
 
@@ -70,6 +77,13 @@ export const FilterBarMultiSelect = ({
     }
   }, [items])
 
+  useEffect(() => {
+    if (focusId === id) {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <FilterMultiSelect
       label={filterState.name}
@@ -103,6 +117,7 @@ export const FilterBarMultiSelect = ({
           <FilterMultiSelect.TriggerButton {...triggerProps} />
         )
       }}
+      triggerRef={buttonRef}
       {...props}
     >
       {children}

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -41,6 +41,7 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
+  triggerRef?: React.RefObject<HTMLButtonElement>
 } & Omit<MenuPopupProps, "children"> &
   Omit<MenuTriggerProviderProps, "children"> &
   SelectionProps
@@ -60,8 +61,9 @@ export const FilterMultiSelect = ({
   onSelectionChange,
   selectionMode = "multiple",
   onSearchInputChange,
+  triggerRef,
 }: FilterMultiSelectProps): JSX.Element => {
-  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange }
+  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
   const menuPopupProps = { isLoading, loadingSkeleton }
   const disabledKeys: Selection = new Set(
     items

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx

@@ -14,6 +14,7 @@ export type MenuTriggerProviderProps = {
   defaultOpen?: boolean
   onOpenChange?: (isOpen: boolean) => void
   children: React.ReactNode
+  triggerRef?: React.RefObject<HTMLButtonElement>
 }
 
 export type MenuTriggerProviderContextType = {
@@ -32,12 +33,14 @@ export function MenuTriggerProvider({
   defaultOpen,
   onOpenChange,
   children,
+  triggerRef,
 }: MenuTriggerProviderProps): JSX.Element {
   // Create state based on the incoming props to manage the open/close
   const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange })
 
   // Get A11y attributes and events for the menu trigger and menu elements
-  const ref = useRef<HTMLButtonElement>(null)
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = triggerRef || fallbackRef
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>(
     {},
     state,