carbon-react 109.3.0 → 109.3.1

package/lib/components/grid/grid-item/grid-item.style.d.ts

@@ -0,0 +1,17 @@
+import { PaddingProps, GridAreaProps, GridColumnProps, GridRowProps } from "styled-system";
+export declare function getSpacing(prop?: PaddingProps[keyof PaddingProps]): string;
+interface GridProperties extends PaddingProps {
+    alignSelf?: string;
+    justifySelf?: string;
+    gridColumn?: GridColumnProps["gridColumn"];
+    gridRow?: GridRowProps["gridRow"];
+    gridArea?: GridAreaProps["gridArea"];
+}
+interface ResponsiveSettings extends GridProperties {
+    maxWidth?: string;
+}
+export interface StyledGridItemProps extends GridProperties {
+    responsiveSettings?: ResponsiveSettings[];
+}
+declare const StyledGridItem: import("styled-components").StyledComponent<"div", any, StyledGridItemProps, never>;
+export default StyledGridItem;

package/lib/components/grid/grid-item/grid-item.style.js

@@ -10,52 +10,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _space = require("@styled-system/space");
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("../../../style/utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function responsiveGridItem(responsiveSettings) {
-  return responsiveSettings.map(setting => {
-    const {
-      alignSelf,
-      gridArea,
-      gridColumn,
-      gridRow,
-      maxWidth,
-      justifySelf,
-      p,
-      pl,
-      pr,
-      pt,
-      pb
-    } = setting;
-    return (0, _styledComponents.css)`
-      @media screen and (max-width: ${maxWidth}) {
-        align-self: ${alignSelf || "stretch"};
-        justify-self: ${justifySelf || "stretch"};
-        grid-area: ${gridArea};
-        grid-column: ${gridColumn};
-        grid-row: ${gridRow};
-        padding: ${getSpacing(p)};
-        padding-left: ${getSpacing(pl)};
-        padding-right: ${getSpacing(pr)};
-        padding-top: ${getSpacing(pt)};
-        padding-bottom: ${getSpacing(pb)};
-      }
-    `;
-  });
-}
-
 function getSpacing(prop) {
   if (typeof prop === "number") {
     switch (prop) {
@@ -97,18 +55,49 @@ function getSpacing(prop) {
     }
   }
 
-  return prop;
+  return String(prop);
 }
 
-const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes.default.space);
-const GridItemStyle = _styledComponents.default.div`
+function responsiveGridItem(responsiveSettings) {
+  return responsiveSettings.map(setting => {
+    const {
+      alignSelf,
+      gridArea,
+      gridColumn,
+      gridRow,
+      maxWidth,
+      justifySelf,
+      p,
+      pl,
+      pr,
+      pt,
+      pb
+    } = setting;
+    return (0, _styledComponents.css)`
+      @media screen and (max-width: ${maxWidth}) {
+        align-self: ${alignSelf || "stretch"};
+        justify-self: ${justifySelf || "stretch"};
+        grid-area: ${gridArea};
+        grid-column: ${gridColumn};
+        grid-row: ${gridRow};
+        padding: ${getSpacing(p)};
+        padding-left: ${getSpacing(pl)};
+        padding-right: ${getSpacing(pr)};
+        padding-top: ${getSpacing(pt)};
+        padding-bottom: ${getSpacing(pb)};
+      }
+    `;
+  });
+}
+
+const StyledGridItem = _styledComponents.default.div`
   margin: 0;
-  ${_space.padding}
+  ${_styledSystem.padding}
 
   ${({
   alignSelf,
   justifySelf,
-  gridArea,
+  gridArea = "auto / 1 / auto / 13",
   gridColumn,
   gridRow,
   responsiveSettings
@@ -128,24 +117,5 @@ const GridItemStyle = _styledComponents.default.div`
     `}
   `}
 `;
-GridItemStyle.propTypes = {
-  alignSelf: _propTypes2.default.string,
-  gridColumn: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  gridRow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  justifySelf: _propTypes2.default.string,
-  ...paddingPropTypes,
-  responsiveSettings: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    alignSelf: _propTypes2.default.string,
-    gridArea: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-    gridColumn: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-    gridRow: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-    justifySelf: _propTypes2.default.string,
-    maxWidth: _propTypes2.default.string,
-    ...paddingPropTypes
-  }))
-};
-GridItemStyle.defaultProps = {
-  gridArea: "auto / 1 / auto / 13"
-};
-var _default = GridItemStyle;
+var _default = StyledGridItem;
 exports.default = _default;

package/lib/components/grid/grid-item/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./grid-item";
+export { default } from "./grid-item.component";
+export type { GridItemProps } from "./grid-item.component";

package/lib/components/grid/index.d.ts

@@ -1,2 +1,4 @@
 export { default as GridContainer } from "./grid-container";
+export type { GridContainerProps } from "./grid-container";
 export { default as GridItem } from "./grid-item";
+export type { GridItemProps } from "./grid-item";

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -21,7 +21,7 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _utils = require("../../style/utils");
 
-var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+var _useMenuKeyboardNavigation = _interopRequireDefault(require("../../hooks/__internal__/useMenuKeyboardNavigation"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,14 +47,11 @@ const MultiActionButton = ({
   const buttonRef = (0, _react.useRef)(null);
   const buttonContainer = (0, _react.useRef)(null);
   const buttonChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const additionalButtons = (0, _react.useRef)(buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()));
-  const listening = (0, _react.useRef)(false);
-  const isMainButtonFocused = (0, _react.useRef)(false);
-  const isFocusedAfterClosing = (0, _react.useRef)(false);
+  const buttonChildrenRefs = (0, _react.useMemo)(() => buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()), [buttonChildren]);
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const hideButtons = (0, _react.useCallback)(() => {
-    if (isMainButtonFocused.current) return;
+    if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
 
@@ -76,15 +73,13 @@ const MultiActionButton = ({
       const props = {
         key: index.toString(),
         role: "menuitem",
-        ref: additionalButtons.current[index],
+        ref: buttonChildrenRefs[index],
         tabIndex: -1,
         onClick: ev => {
           var _buttonRef$current;
 
           if (child.props.onClick) child.props.onClick(ev);
-          isMainButtonFocused.current = false;
           hideButtons();
-          isFocusedAfterClosing.current = true;
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
@@ -92,62 +87,10 @@ const MultiActionButton = ({
     });
   };
 
-  const handleKeyDown = (0, _react.useCallback)(ev => {
-    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
-    let nextIndex = -1;
-
-    if (_events.default.isUpKey(ev)) {
-      nextIndex = currentIndex > 0 ? currentIndex - 1 : buttonChildren.length - 1;
-      ev.preventDefault();
-    }
-
-    if (_events.default.isDownKey(ev)) {
-      nextIndex = currentIndex < buttonChildren.length - 1 ? currentIndex + 1 : 0;
-      ev.preventDefault();
-    }
-
-    if (_events.default.isTabKey(ev)) {
-      var _elements$indexOf;
-
-      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
-      const indexOf = elements.indexOf(buttonRef.current);
-      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
-
-      setTimeout(hideButtons, 0);
-    }
-
-    if (nextIndex > -1) {
-      var _additionalButtons$cu;
-
-      (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
-    }
-  }, [buttonChildren, hideButtons]);
-  const addListeners = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (!listening.current) {
-      document.addEventListener("keydown", handleKeyDown);
-      listening.current = true;
-    }
-  }, [handleKeyDown]);
-  const removeListeners = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (listening.current) {
-      document.removeEventListener("keydown", handleKeyDown);
-      listening.current = false;
-    }
-  }, [handleKeyDown]);
-  (0, _react.useEffect)(() => {
-    if (showAdditionalButtons) {
-      addListeners();
-    }
-
-    return () => {
-      removeListeners();
-    };
-  }, [showAdditionalButtons, addListeners, removeListeners]);
+  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons);
 
   const handleMainButtonKeyDown = ev => {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev)) {
+    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
       ev.preventDefault();
 
       if (!showAdditionalButtons) {
@@ -156,34 +99,20 @@ const MultiActionButton = ({
 
 
       setTimeout(() => {
-        var _additionalButtons$cu2, _additionalButtons$cu3;
+        var _buttonChildrenRefs$, _buttonChildrenRefs$$;
 
-        (_additionalButtons$cu2 = additionalButtons.current[0]) === null || _additionalButtons$cu2 === void 0 ? void 0 : (_additionalButtons$cu3 = _additionalButtons$cu2.current) === null || _additionalButtons$cu3 === void 0 ? void 0 : _additionalButtons$cu3.focus();
+        (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
+    } else if (_events.default.isEscKey(ev)) {
+      ev.preventDefault();
+      setShowAdditionalButtons(false);
     }
   };
 
-  const focusMainButton = () => {
-    isMainButtonFocused.current = true;
-
-    if (isFocusedAfterClosing.current) {
-      isFocusedAfterClosing.current = false;
-      return;
-    }
-
-    showButtons();
-  };
-
-  const blurMainButton = () => {
-    isMainButtonFocused.current = false;
-  };
-
   const mainButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
-    onFocus: focusMainButton,
-    onBlur: blurMainButton,
     onKeyDown: handleMainButtonKeyDown,
     buttonType,
     size,
@@ -203,7 +132,8 @@ const MultiActionButton = ({
     "data-element": "additional-buttons",
     align: align,
     minWidth: minWidth,
-    ref: buttonContainer
+    ref: buttonContainer,
+    onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
   (0, _useClickAwayListener.default)([ref], hideButtons);

package/lib/components/split-button/split-button.component.js

@@ -35,7 +35,7 @@ var _utils = require("../../style/utils");
 
 var _themes = require("../../style/themes");
 
-var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+var _useMenuKeyboardNavigation = _interopRequireDefault(require("../../hooks/__internal__/useMenuKeyboardNavigation"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -65,75 +65,19 @@ const SplitButton = ({
 }) => {
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
-  const isToggleButtonFocused = (0, _react.useRef)(false);
-  const isFocusedAfterClosing = (0, _react.useRef)(false);
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
-
-  const buttonChildren = _react.default.Children.toArray(children);
-
-  const additionalButtons = (0, _react.useRef)(buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()));
+  const buttonChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
+  const buttonChildrenRefs = (0, _react.useMemo)(() => buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()), [buttonChildren]);
   const splitButtonNode = (0, _react.useRef)();
   const toggleButton = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
-  const listening = (0, _react.useRef)(false);
   const hideButtons = (0, _react.useCallback)(() => {
-    if (isToggleButtonFocused.current) return;
+    if (toggleButton.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleKeyDown = (0, _react.useCallback)(ev => {
-    const numOfChildren = children.length - 1;
-    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
-    let nextIndex = -1;
-
-    if (_events.default.isUpKey(ev)) {
-      nextIndex = currentIndex > 0 ? currentIndex - 1 : numOfChildren;
-      ev.preventDefault();
-    }
-
-    if (_events.default.isDownKey(ev)) {
-      nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
-      ev.preventDefault();
-    }
-
-    if (_events.default.isTabKey(ev)) {
-      var _elements$indexOf;
-
-      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
-      const indexOf = elements.indexOf(toggleButton.current);
-      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
-
-      setTimeout(hideButtons, 0);
-    }
-
-    if (nextIndex > -1) {
-      additionalButtons.current[nextIndex].current.focus();
-    }
-  }, [hideButtons, children]);
-  const addListeners = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (!listening.current) {
-      document.addEventListener("keydown", handleKeyDown);
-      listening.current = true;
-    }
-  }, [handleKeyDown]);
-  const removeListeners = (0, _react.useCallback)(() => {
-    /* istanbul ignore else */
-    if (listening.current) {
-      document.removeEventListener("keydown", handleKeyDown);
-      listening.current = false;
-    }
-  }, [handleKeyDown]);
-  (0, _react.useEffect)(() => {
-    if (showAdditionalButtons) {
-      addListeners();
-    }
-
-    return () => {
-      removeListeners();
-    };
-  }, [showAdditionalButtons, addListeners, removeListeners]);
+  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons);
 
   function mainButtonProps() {
     return {
@@ -156,10 +100,6 @@ const SplitButton = ({
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,
-      onFocus: focusToggleButton,
-      onBlur: () => {
-        isToggleButtonFocused.current = false;
-      },
       onKeyDown: handleToggleButtonKeyDown,
       buttonType,
       size
@@ -216,7 +156,7 @@ const SplitButton = ({
   }
 
   function handleToggleButtonKeyDown(ev) {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev)) {
+    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
       ev.preventDefault();
 
       if (!showAdditionalButtons) {
@@ -224,10 +164,13 @@ const SplitButton = ({
       }
 
       setTimeout(() => {
-        var _additionalButtons$cu, _additionalButtons$cu2;
+        var _buttonChildrenRefs$, _buttonChildrenRefs$$;
 
-        (_additionalButtons$cu = additionalButtons.current[0]) === null || _additionalButtons$cu === void 0 ? void 0 : (_additionalButtons$cu2 = _additionalButtons$cu.current) === null || _additionalButtons$cu2 === void 0 ? void 0 : _additionalButtons$cu2.focus();
+        (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
+    } else if (_events.default.isEscKey(ev)) {
+      setShowAdditionalButtons(false);
+      ev.preventDefault();
     }
   }
 
@@ -237,15 +180,13 @@ const SplitButton = ({
       const childProps = {
         key: index.toString(),
         role: "menuitem",
-        ref: additionalButtons.current[index],
+        ref: buttonChildrenRefs[index],
         tabIndex: -1,
         onClick: ev => {
           var _toggleButton$current;
 
           if (child.props.onClick) child.props.onClick(ev);
-          isToggleButtonFocused.current = false;
           hideButtons();
-          isFocusedAfterClosing.current = true;
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
@@ -253,17 +194,6 @@ const SplitButton = ({
     });
   }
 
-  function focusToggleButton() {
-    isToggleButtonFocused.current = true;
-
-    if (isFocusedAfterClosing.current) {
-      isFocusedAfterClosing.current = false;
-      return;
-    }
-
-    showButtons();
-  }
-
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
@@ -275,7 +205,8 @@ const SplitButton = ({
       "data-element": "additional-buttons",
       align: align,
       minWidth: minWidth,
-      ref: buttonContainer
+      ref: buttonContainer,
+      onKeyDown: handleKeyDown
     }, childrenWithProps()));
   }
 

package/lib/hooks/__internal__/useMenuKeyboardNavigation/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useMenuKeyboardNavigation";

package/lib/hooks/__internal__/useMenuKeyboardNavigation/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useMenuKeyboardNavigation.default;
+  }
+});
+
+var _useMenuKeyboardNavigation = _interopRequireDefault(require("./useMenuKeyboardNavigation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useMenuKeyboardNavigation/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useMenuKeyboardNavigation/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
+export default _default;

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+
+var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (mainControlRef, childrenRefs, hide) => {
+  const childrenLength = (0, _react.useMemo)(() => childrenRefs.length, [childrenRefs]);
+  const handleKeyDown = (0, _react.useCallback)(ev => {
+    ev.preventDefault();
+    const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
+    let nextIndex = -1;
+
+    const refocusMainControl = () => {
+      var _mainControlRef$curre;
+
+      hide();
+      (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
+    };
+
+    const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
+
+    if (_events.default.isEndKey(ev) || arrowModifierPressed && _events.default.isDownKey(ev)) {
+      nextIndex = childrenLength - 1;
+    }
+
+    if (_events.default.isHomeKey(ev) || arrowModifierPressed && _events.default.isUpKey(ev)) {
+      nextIndex = 0;
+    }
+
+    if (!arrowModifierPressed && _events.default.isUpKey(ev) && currentIndex > 0) {
+      nextIndex = currentIndex - 1;
+    }
+
+    if (!arrowModifierPressed && _events.default.isDownKey(ev) && currentIndex < childrenLength - 1) {
+      nextIndex = currentIndex + 1;
+    }
+
+    const tabPressed = _events.default.isTabKey(ev);
+
+    const tabShiftPressed = tabPressed && _events.default.isShiftKey(ev);
+
+    if (tabShiftPressed) {
+      if (currentIndex === 0) {
+        refocusMainControl();
+      } else {
+        nextIndex = currentIndex - 1;
+      }
+    } else if (tabPressed) {
+      if (currentIndex === childrenLength - 1) {
+        var _elements;
+
+        const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+        const indexOf = elements.indexOf(mainControlRef.current);
+        (_elements = elements[indexOf + 1]) === null || _elements === void 0 ? void 0 : _elements.focus(); // // timeout enforces that the "hide" method will be run after browser focuses on the next element
+
+        setTimeout(hide, 0);
+      } else {
+        nextIndex = currentIndex + 1;
+      }
+    }
+
+    if (nextIndex > -1) {
+      var _childrenRefs$nextInd;
+
+      (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
+    }
+
+    if (_events.default.isEscKey(ev)) {
+      refocusMainControl();
+    }
+  }, [childrenLength, hide, childrenRefs, mainControlRef]);
+  return handleKeyDown;
+};
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.3.0",
+  "version": "109.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/grid/grid-container/grid-container.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { SpaceProps, GridProps } from "styled-system";
-import { GridItemProps } from "../grid-item/grid-item";
-
-type GridContainerChild =
-  | React.ReactElement<GridItemProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface GridContainerProps extends SpaceProps, GridProps {
-  /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
-  children?: GridContainerChild | GridContainerChild[];
-}
-
-declare function GridContainer(props: GridContainerProps): JSX.Element;
-
-export default GridContainer;

package/esm/components/grid/grid-item/grid-item.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import {
-  PaddingProps,
-  GridAreaProps,
-  GridRowProps,
-  GridColumnProps,
-} from "styled-system";
-
-interface ResponsiveSettingsShape extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Maximum width of the item */
-  maxWidth?: string;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-}
-
-export interface GridItemProps extends PaddingProps {
-  /** How the grid item is aligned along the block (column) axis. Values: start, end, center, stretch */
-  alignSelf?: string;
-  /** How the grid item is aligned along the inline (row) axis. Values: start, end, center, stretch */
-  justifySelf?: string;
-  /** Defines the Component(s) to be rendered within the GridItem */
-  children?: React.ReactNode;
-  /** Shorthand property for gridColumn and gridRow */
-  gridArea?: GridAreaProps;
-  /** Starting and ending column position of the GridItem within the GridContainer separated by "/" */
-  gridColumn?: GridColumnProps;
-  /** Starting and ending row position of the GridItem within the GridContainer separated by "/" */
-  gridRow?: GridRowProps;
-  responsiveSettings?: ResponsiveSettingsShape[];
-}
-
-declare function GridItem(props: GridItemProps): JSX.Element;
-
-export default GridItem;