carbon-react 109.2.4 → 109.3.2

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/select/utils/highlight-part-of-text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = highlightPartOfText;
+exports.default = highlightPartOfTextRecursive;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -37,4 +37,16 @@ function highlightPartOfText(text, partToHighlight) {
     key: "following"
   }, followingText)];
   return newValue;
+}
+
+function highlightPartOfTextRecursive(child, partToHighlight) {
+  if (typeof child === "string") {
+    return highlightPartOfText(child, partToHighlight);
+  }
+
+  const highlightedChildren = _react.default.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
+
+  return /*#__PURE__*/_react.default.cloneElement(child, {
+    children: highlightedChildren
+  });
 }

package/lib/components/select/utils/with-filter.hoc.js

@@ -50,9 +50,10 @@ const filterOptionRows = (optionRow, filterText) => {
       const processedText = cell.props.children.toLowerCase();
       const processedValue = filterText.toLowerCase();
       return processedText.includes(processedValue);
-    }
+    } // filter recursively based on children
+
 
-    return false;
+    return filterOptionRows(cell, filterText);
   });
 
   if (hasText) {

package/lib/components/sidebar/sidebar.component.js

@@ -54,6 +54,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   children,
   onCancel,
   role = "dialog",
+  focusableContainers,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -114,7 +115,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     className: "carbon-sidebar"
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: sidebarRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, sidebar));
 });
 
@@ -153,7 +155,12 @@ Sidebar.propTypes = {
   header: _propTypes.default.node,
 
   /** The ARIA role to be applied to the container */
-  role: _propTypes.default.string
+  role: _propTypes.default.string,
+
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+  focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    current: _propTypes.default.any
+  }))
 };
 Sidebar.defaultProps = {
   position: "right",

package/lib/components/sidebar/sidebar.d.ts

@@ -42,6 +42,8 @@ export interface SidebarProps {
     | "medium-large"
     | "large"
     | "extra-large";
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+  focusableContainers?: React.MutableRefObject<HTMLElement>[];
 }
 
 declare const SidebarContext: React.Context<SidebarContextProps>;

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/components/toast/toast.component.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const Toast = ({
+const Toast = /*#__PURE__*/_react.default.forwardRef(({
   children,
   className,
   id,
@@ -46,12 +46,16 @@ const Toast = ({
   targetPortalId,
   timeout,
   variant,
+  disableAutoFocus,
   ...restProps
-}) => {
+}, ref) => {
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
   const toastContentNodeRef = (0, _react.useRef)();
+  const closeIconRef = (0, _react.useRef)();
+  const focusedElementBeforeOpening = (0, _react.useRef)();
+  const refToPass = ref || toastRef;
   const componentClasses = (0, _react.useMemo)(() => {
     return (0, _classnames.default)(className);
   }, [className]);
@@ -61,7 +65,7 @@ const Toast = ({
       onDismiss(ev);
     }
   }, [onDismiss]);
-  (0, _useModalManager.default)(open, dismissToast, toastRef);
+  (0, _useModalManager.default)(open, dismissToast, refToPass);
   (0, _react.useEffect)(() => {
     clearTimeout(timer.current);
 
@@ -71,13 +75,34 @@ const Toast = ({
 
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
+  (0, _react.useEffect)(() => {
+    if (onDismiss && !disableAutoFocus) {
+      if (open) {
+        var _closeIconRef$current;
+
+        focusedElementBeforeOpening.current = document.activeElement;
+        (_closeIconRef$current = closeIconRef.current) === null || _closeIconRef$current === void 0 ? void 0 : _closeIconRef$current.focus();
+      } else if (focusedElementBeforeOpening.current) {
+        focusedElementBeforeOpening.current.focus();
+        focusedElementBeforeOpening.current = undefined;
+      }
+    }
+  }, [open, onDismiss, disableAutoFocus]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (focusedElementBeforeOpening.current) {
+        focusedElementBeforeOpening.current.focus();
+      }
+    };
+  }, []);
 
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
-      onAction: onDismiss
+      onAction: onDismiss,
+      ref: closeIconRef
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"
     }));
@@ -119,9 +144,9 @@ const Toast = ({
     isCenter: isCenter
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
     isCenter: isCenter,
-    ref: toastRef
+    ref: refToPass
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
-};
+});
 
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
@@ -155,7 +180,10 @@ Toast.propTypes = {
   targetPortalId: _propTypes.default.string,
 
   /** Maximum toast width */
-  maxWidth: _propTypes.default.string
+  maxWidth: _propTypes.default.string,
+
+  /** Disables auto focus functionality when the Toast has a close icon */
+  disableAutoFocus: _propTypes.default.bool
 };
 var _default = Toast;
 exports.default = _default;

package/lib/components/toast/toast.d.ts

@@ -25,8 +25,12 @@ export interface ToastPropTypes {
   targetPortalId?: string;
   /** Maximum toast width */
   maxWidth?: string;
+  /** Disables auto focus functionality when the Toast has a close icon */
+  disableAutoFocus?: boolean;
 }
 
-declare class Toast extends React.Component<ToastPropTypes> {}
+declare function Toast(
+  props: ToastPropTypes & React.RefAttributes<HTMLDivElement>
+): JSX.Element;
 
 export default Toast;

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

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