@kaizen/components 1.67.1 → 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/cjs/TextField/TextField.cjs

@@ -46,7 +46,7 @@ var TextField = function (_a) {
     id: "".concat(id, "-field-group"),
     "data-testid": "".concat(id, "-field-group"),
     inline: inline,
-    classNameOverride: classnames__default.default(TextField_module.withLabel, disabled && TextField_module.withDisabled)
+    classNameOverride: classnames__default.default(reversed && TextField_module.reversed)
   }, React__default.default.createElement(Label.Label, {
     id: "".concat(id, "-field-label"),
     "data-testid": "".concat(id, "-field-label"),
@@ -64,7 +64,7 @@ var TextField = function (_a) {
     status: status,
     startIconAdornment: icon,
     endIconAdornment: status === "success" && React__default.default.createElement("div", {
-      className: classnames__default.default(TextField_module.success, disabled && TextField_module.disabled)
+      className: classnames__default.default(TextField_module.icon, TextField_module.success, disabled && TextField_module.disabled)
     }, React__default.default.createElement(Icon.Icon, {
       name: "check_circle",
       isPresentational: true,

package/dist/cjs/TextField/TextField.module.scss.cjs

@@ -2,12 +2,10 @@
 
 var styles = {
   "input": "TextField-module_input__CEokl",
-  "success": "TextField-module_success__pMLcV",
+  "icon": "TextField-module_icon__wFK4Q",
   "fade-0-to-1": "TextField-module_fade-0-to-1__Ac-99",
-  "withReversed": "TextField-module_withReversed__agi-Q",
-  "disabled": "TextField-module_disabled__gS8tk",
-  "error": "TextField-module_error__7S-f2",
-  "caution": "TextField-module_caution__3gzHk",
-  "message": "TextField-module_message__bQOgK"
+  "success": "TextField-module_success__pMLcV",
+  "reversed": "TextField-module_reversed__qW9r1",
+  "disabled": "TextField-module_disabled__gS8tk"
 };
 module.exports = styles;

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/esm/TextField/TextField.mjs

@@ -38,7 +38,7 @@ const TextField = /*#__PURE__*/function () {
       id: "".concat(id, "-field-group"),
       "data-testid": "".concat(id, "-field-group"),
       inline: inline,
-      classNameOverride: classnames(styles.withLabel, disabled && styles.withDisabled)
+      classNameOverride: classnames(reversed && styles.reversed)
     }, /*#__PURE__*/React.createElement(Label, {
       id: "".concat(id, "-field-label"),
       "data-testid": "".concat(id, "-field-label"),
@@ -56,7 +56,7 @@ const TextField = /*#__PURE__*/function () {
       status: status,
       startIconAdornment: icon,
       endIconAdornment: status === "success" && ( /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles.success, disabled && styles.disabled)
+        className: classnames(styles.icon, styles.success, disabled && styles.disabled)
       }, /*#__PURE__*/React.createElement(Icon, {
         name: "check_circle",
         isPresentational: true,

package/dist/esm/TextField/TextField.module.scss.mjs

@@ -1,11 +1,9 @@
 var styles = {
   "input": "TextField-module_input__CEokl",
-  "success": "TextField-module_success__pMLcV",
+  "icon": "TextField-module_icon__wFK4Q",
   "fade-0-to-1": "TextField-module_fade-0-to-1__Ac-99",
-  "withReversed": "TextField-module_withReversed__agi-Q",
-  "disabled": "TextField-module_disabled__gS8tk",
-  "error": "TextField-module_error__7S-f2",
-  "caution": "TextField-module_caution__3gzHk",
-  "message": "TextField-module_message__bQOgK"
+  "success": "TextField-module_success__pMLcV",
+  "reversed": "TextField-module_reversed__qW9r1",
+  "disabled": "TextField-module_disabled__gS8tk"
 };
 export { styles as default };