carbon-react 114.17.1 → 114.17.3

package/esm/components/button/button.config.d.ts

@@ -1,4 +1,4 @@
-import { ButtonTypes } from "./button.component";
+import { ButtonTypes, ButtonIconPosition, SizeOptions } from "./button.component";
 export declare const BUTTON_VARIANTS: ButtonTypes[];
-export declare const BUTTON_SIZES: string[];
-export declare const BUTTON_ICON_POSITIONS: string[];
+export declare const BUTTON_SIZES: SizeOptions[];
+export declare const BUTTON_ICON_POSITIONS: ButtonIconPosition[];

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -103,7 +103,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [openSubmenuId, closeSubmenu]);
   const findCurrentIndex = useCallback(id => {
     const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index === -1 ? 0 : index;
+    return index;
   }, [submenuItemIds]);
   const handleKeyDown = useCallback(event => {
     if (!submenuOpen) {
@@ -137,7 +137,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
 
       if (Events.isTabKey(event) && Events.isShiftKey(event)) {
-        if (nextIndex === 0) {
+        if (nextIndex <= 0) {
           closeSubmenu();
           return;
         }

package/esm/components/select/multi-select/multi-select.component.js

@@ -371,11 +371,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
-
-  function onSelectListClose() {
+  const onSelectListClose = useCallback(() => {
     setOpenState(false);
     setFilterText("");
-  }
+  }, []);
 
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {

package/esm/components/select/select-list/select-list.component.js

@@ -6,6 +6,7 @@ import { flip, offset, size } from "@floating-ui/dom";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import findLastIndex from "lodash/findLastIndex";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
+import useModalManager from "../../../hooks/__internal__/useModalManager";
 import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
@@ -220,7 +221,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 
     if (key === "Tab" && listActionButton) {
       handleActionButtonTab(event, isActionButtonFocused);
-    } else if (key === "Tab" || key === "Escape") {
+    } else if (key === "Tab") {
       onSelectListClose();
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
@@ -246,6 +247,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       highlightNextItem(key);
     }
   }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  const handleEscapeKey = useCallback(event => {
+    if (event.key === "Escape") {
+      onSelectListClose();
+    }
+  }, [onSelectListClose]);
+  useModalManager(isOpen, handleEscapeKey, listRef);
   const handleListScroll = useCallback(event => {
     const element = event.target;
     /* istanbul ignore else */

package/esm/components/select/simple-select/simple-select.component.js

@@ -294,10 +294,9 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     }
   }
 
-  function onSelectListClose() {
+  const onSelectListClose = useCallback(() => {
     setOpenState(false);
-  }
-
+  }, []);
   const assignInput = useCallback(element => {
     setTextboxRef(element);
 

package/lib/components/button/button.config.d.ts

@@ -1,4 +1,4 @@
-import { ButtonTypes } from "./button.component";
+import { ButtonTypes, ButtonIconPosition, SizeOptions } from "./button.component";
 export declare const BUTTON_VARIANTS: ButtonTypes[];
-export declare const BUTTON_SIZES: string[];
-export declare const BUTTON_ICON_POSITIONS: string[];
+export declare const BUTTON_SIZES: SizeOptions[];
+export declare const BUTTON_ICON_POSITIONS: ButtonIconPosition[];

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -128,7 +128,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   }, [openSubmenuId, closeSubmenu]);
   const findCurrentIndex = (0, _react.useCallback)(id => {
     const index = submenuItemIds.findIndex(itemId => itemId === id);
-    return index === -1 ? 0 : index;
+    return index;
   }, [submenuItemIds]);
   const handleKeyDown = (0, _react.useCallback)(event => {
     if (!submenuOpen) {
@@ -162,7 +162,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       if (_events.default.isTabKey(event) && _events.default.isShiftKey(event)) {
-        if (nextIndex === 0) {
+        if (nextIndex <= 0) {
           closeSubmenu();
           return;
         }

package/lib/components/select/multi-select/multi-select.component.js

@@ -402,11 +402,10 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return [...previousValue, newValue];
     });
   }, [textboxRef, actualValue, updateValue]);
-
-  function onSelectListClose() {
+  const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);
     setFilterText("");
-  }
+  }, []);
 
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {

package/lib/components/select/select-list/select-list.component.js

@@ -17,6 +17,8 @@ var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
 
 var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
 
+var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
+
 var _selectList = require("./select-list.style");
 
 var _popover = _interopRequireDefault(require("../../../__internal__/popover"));
@@ -252,7 +254,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     if (key === "Tab" && listActionButton) {
       handleActionButtonTab(event, isActionButtonFocused);
-    } else if (key === "Tab" || key === "Escape") {
+    } else if (key === "Tab") {
       onSelectListClose();
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
@@ -278,6 +280,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       highlightNextItem(key);
     }
   }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  const handleEscapeKey = (0, _react.useCallback)(event => {
+    if (event.key === "Escape") {
+      onSelectListClose();
+    }
+  }, [onSelectListClose]);
+  (0, _useModalManager.default)(isOpen, handleEscapeKey, listRef);
   const handleListScroll = (0, _react.useCallback)(event => {
     const element = event.target;
     /* istanbul ignore else */

package/lib/components/select/simple-select/simple-select.component.js

@@ -322,10 +322,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   }
 
-  function onSelectListClose() {
+  const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);
-  }
-
+  }, []);
   const assignInput = (0, _react.useCallback)(element => {
     setTextboxRef(element);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.17.1",
+  "version": "114.17.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -104,7 +104,7 @@
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
     "babel-plugin-dev-expression": "^0.2.3",
-    "browserslist": "^4.16.6",
+    "browserslist": "^4.21.5",
     "chromatic": "^6.0.5",
     "commitizen": "^4.2.5",
     "conventional-changelog-conventionalcommits": "^4.5.0",