carbon-react 109.2.4 → 109.3.2

package/esm/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/esm/components/grid/grid-item/grid-item.style.js

@@ -1,42 +1,5 @@
 import styled, { css } from "styled-components";
-import { grid, flexbox } from "styled-system";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { padding } from "@styled-system/space";
-import PropTypes from "prop-types";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-
-function responsiveGridItem(responsiveSettings) {
-  return responsiveSettings.map(setting => {
-    const {
-      alignSelf,
-      gridArea,
-      gridColumn,
-      gridRow,
-      maxWidth,
-      justifySelf,
-      p,
-      pl,
-      pr,
-      pt,
-      pb
-    } = setting;
-    return 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)};
-      }
-    `;
-  });
-}
-
+import { grid, flexbox, padding } from "styled-system";
 export function getSpacing(prop) {
   if (typeof prop === "number") {
     switch (prop) {
@@ -78,17 +41,49 @@ export function getSpacing(prop) {
     }
   }
 
-  return prop;
+  return String(prop);
 }
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-const GridItemStyle = styled.div`
+
+function responsiveGridItem(responsiveSettings) {
+  return responsiveSettings.map(setting => {
+    const {
+      alignSelf,
+      gridArea,
+      gridColumn,
+      gridRow,
+      maxWidth,
+      justifySelf,
+      p,
+      pl,
+      pr,
+      pt,
+      pb
+    } = setting;
+    return 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 = styled.div`
   margin: 0;
   ${padding}
 
   ${({
   alignSelf,
   justifySelf,
-  gridArea,
+  gridArea = "auto / 1 / auto / 13",
   gridColumn,
   gridRow,
   responsiveSettings
@@ -108,23 +103,4 @@ const GridItemStyle = styled.div`
     `}
   `}
 `;
-GridItemStyle.propTypes = {
-  alignSelf: PropTypes.string,
-  gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  justifySelf: PropTypes.string,
-  ...paddingPropTypes,
-  responsiveSettings: PropTypes.arrayOf(PropTypes.shape({
-    alignSelf: PropTypes.string,
-    gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gridColumn: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gridRow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    justifySelf: PropTypes.string,
-    maxWidth: PropTypes.string,
-    ...paddingPropTypes
-  }))
-};
-GridItemStyle.defaultProps = {
-  gridArea: "auto / 1 / auto / 13"
-};
-export default GridItemStyle;
+export default StyledGridItem;

package/esm/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/esm/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/esm/components/grid/index.js

@@ -1,3 +1,2 @@
-import GridContainer from "./grid-container";
-import GridItem from "./grid-item";
-export { GridContainer, GridItem };
+export { default as GridContainer } from "./grid-container";
+export { default as GridItem } from "./grid-item";

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

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import React, { useCallback, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
@@ -8,7 +8,7 @@ import Button from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
-import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
 
 const MultiActionButton = ({
   align = "left",
@@ -26,14 +26,11 @@ const MultiActionButton = ({
   const buttonRef = useRef(null);
   const buttonContainer = useRef(null);
   const buttonChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const additionalButtons = useRef(buttonChildren.map(() => /*#__PURE__*/React.createRef()));
-  const listening = useRef(false);
-  const isMainButtonFocused = useRef(false);
-  const isFocusedAfterClosing = useRef(false);
+  const buttonChildrenRefs = useMemo(() => buttonChildren.map(() => /*#__PURE__*/React.createRef()), [buttonChildren]);
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
   const hideButtons = useCallback(() => {
-    if (isMainButtonFocused.current) return;
+    if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
 
@@ -55,15 +52,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();
         }
       };
@@ -71,62 +66,10 @@ const MultiActionButton = ({
     });
   };
 
-  const handleKeyDown = useCallback(ev => {
-    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
-    let nextIndex = -1;
-
-    if (Events.isUpKey(ev)) {
-      nextIndex = currentIndex > 0 ? currentIndex - 1 : buttonChildren.length - 1;
-      ev.preventDefault();
-    }
-
-    if (Events.isDownKey(ev)) {
-      nextIndex = currentIndex < buttonChildren.length - 1 ? currentIndex + 1 : 0;
-      ev.preventDefault();
-    }
-
-    if (Events.isTabKey(ev)) {
-      var _elements$indexOf;
-
-      const elements = Array.from(document.querySelectorAll(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 = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listening.current) {
-      document.addEventListener("keydown", handleKeyDown);
-      listening.current = true;
-    }
-  }, [handleKeyDown]);
-  const removeListeners = useCallback(() => {
-    /* istanbul ignore else */
-    if (listening.current) {
-      document.removeEventListener("keydown", handleKeyDown);
-      listening.current = false;
-    }
-  }, [handleKeyDown]);
-  useEffect(() => {
-    if (showAdditionalButtons) {
-      addListeners();
-    }
-
-    return () => {
-      removeListeners();
-    };
-  }, [showAdditionalButtons, addListeners, removeListeners]);
+  const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons);
 
   const handleMainButtonKeyDown = ev => {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev)) {
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
       ev.preventDefault();
 
       if (!showAdditionalButtons) {
@@ -135,34 +78,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.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,
@@ -182,7 +111,8 @@ const MultiActionButton = ({
     "data-element": "additional-buttons",
     align: align,
     minWidth: minWidth,
-    ref: buttonContainer
+    ref: buttonContainer,
+    onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
   useClickAwayListener([ref], hideButtons);

package/esm/components/select/utils/highlight-part-of-text.js

@@ -1,6 +1,7 @@
 import React from "react";
 import MatchingText from "./matching-text.style";
-export default function highlightPartOfText(text, partToHighlight) {
+
+function highlightPartOfText(text, partToHighlight) {
   if (!partToHighlight || !partToHighlight.length || !text) return text;
   const lowercaseText = text.toLowerCase();
   const lowercasePart = partToHighlight.toLowerCase();
@@ -26,4 +27,15 @@ export default function highlightPartOfText(text, partToHighlight) {
     key: "following"
   }, followingText)];
   return newValue;
+}
+
+export default function highlightPartOfTextRecursive(child, partToHighlight) {
+  if (typeof child === "string") {
+    return highlightPartOfText(child, partToHighlight);
+  }
+
+  const highlightedChildren = React.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
+  return /*#__PURE__*/React.cloneElement(child, {
+    children: highlightedChildren
+  });
 }

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

@@ -29,9 +29,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/esm/components/sidebar/sidebar.component.js

@@ -26,6 +26,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   children,
   onCancel,
   role = "dialog",
+  focusableContainers,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -84,7 +85,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     className: "carbon-sidebar"
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: sidebarRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, sidebar));
 });
 Sidebar.propTypes = {
@@ -122,7 +124,12 @@ Sidebar.propTypes = {
   header: PropTypes.node,
 
   /** The ARIA role to be applied to the container */
-  role: PropTypes.string
+  role: PropTypes.string,
+
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
+  focusableContainers: PropTypes.arrayOf(PropTypes.shape({
+    current: PropTypes.any
+  }))
 };
 Sidebar.defaultProps = {
   position: "right",

package/esm/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/esm/components/split-button/split-button.component.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useRef, useState, useContext, useCallback, useEffect } from "react";
+import React, { useContext, useCallback, useMemo, useRef, useState } from "react";
 import { ThemeContext } from "styled-components";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -15,7 +15,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
-import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const CONTENT_WIDTH_RATIO = 0.75;
 
@@ -35,73 +35,19 @@ const SplitButton = ({
   ...rest
 }) => {
   const theme = useContext(ThemeContext) || baseTheme;
-  const isToggleButtonFocused = useRef(false);
-  const isFocusedAfterClosing = useRef(false);
   const buttonLabelId = useRef(guid());
-  const buttonChildren = React.Children.toArray(children);
-  const additionalButtons = useRef(buttonChildren.map(() => /*#__PURE__*/React.createRef()));
+  const buttonChildren = useMemo(() => React.Children.toArray(children), [children]);
+  const buttonChildrenRefs = useMemo(() => buttonChildren.map(() => /*#__PURE__*/React.createRef()), [buttonChildren]);
   const splitButtonNode = useRef();
   const toggleButton = useRef();
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
-  const listening = useRef(false);
   const hideButtons = useCallback(() => {
-    if (isToggleButtonFocused.current) return;
+    if (toggleButton.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleKeyDown = useCallback(ev => {
-    const numOfChildren = children.length - 1;
-    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
-    let nextIndex = -1;
-
-    if (Events.isUpKey(ev)) {
-      nextIndex = currentIndex > 0 ? currentIndex - 1 : numOfChildren;
-      ev.preventDefault();
-    }
-
-    if (Events.isDownKey(ev)) {
-      nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
-      ev.preventDefault();
-    }
-
-    if (Events.isTabKey(ev)) {
-      var _elements$indexOf;
-
-      const elements = Array.from(document.querySelectorAll(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 = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listening.current) {
-      document.addEventListener("keydown", handleKeyDown);
-      listening.current = true;
-    }
-  }, [handleKeyDown]);
-  const removeListeners = useCallback(() => {
-    /* istanbul ignore else */
-    if (listening.current) {
-      document.removeEventListener("keydown", handleKeyDown);
-      listening.current = false;
-    }
-  }, [handleKeyDown]);
-  useEffect(() => {
-    if (showAdditionalButtons) {
-      addListeners();
-    }
-
-    return () => {
-      removeListeners();
-    };
-  }, [showAdditionalButtons, addListeners, removeListeners]);
+  const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons);
 
   function mainButtonProps() {
     return {
@@ -124,10 +70,6 @@ const SplitButton = ({
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,
-      onFocus: focusToggleButton,
-      onBlur: () => {
-        isToggleButtonFocused.current = false;
-      },
       onKeyDown: handleToggleButtonKeyDown,
       buttonType,
       size
@@ -184,7 +126,7 @@ const SplitButton = ({
   }
 
   function handleToggleButtonKeyDown(ev) {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev)) {
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
       ev.preventDefault();
 
       if (!showAdditionalButtons) {
@@ -192,10 +134,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.isEscKey(ev)) {
+      setShowAdditionalButtons(false);
+      ev.preventDefault();
     }
   }
 
@@ -205,15 +150,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();
         }
       };
@@ -221,17 +164,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.createElement(Popover, {
@@ -243,7 +175,8 @@ const SplitButton = ({
       "data-element": "additional-buttons",
       align: align,
       minWidth: minWidth,
-      ref: buttonContainer
+      ref: buttonContainer,
+      onKeyDown: handleKeyDown
     }, childrenWithProps()));
   }
 

package/esm/components/toast/toast.component.js

@@ -11,8 +11,7 @@ import IconButton from "../icon-button";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalManager from "../../hooks/__internal__/useModalManager";
-
-const Toast = ({
+const Toast = /*#__PURE__*/React.forwardRef(({
   children,
   className,
   id,
@@ -23,12 +22,16 @@ const Toast = ({
   targetPortalId,
   timeout,
   variant,
+  disableAutoFocus,
   ...restProps
-}) => {
+}, ref) => {
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
   const toastContentNodeRef = useRef();
+  const closeIconRef = useRef();
+  const focusedElementBeforeOpening = useRef();
+  const refToPass = ref || toastRef;
   const componentClasses = useMemo(() => {
     return classNames(className);
   }, [className]);
@@ -38,7 +41,7 @@ const Toast = ({
       onDismiss(ev);
     }
   }, [onDismiss]);
-  useModalManager(open, dismissToast, toastRef);
+  useModalManager(open, dismissToast, refToPass);
   useEffect(() => {
     clearTimeout(timer.current);
 
@@ -48,13 +51,34 @@ const Toast = ({
 
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
+  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]);
+  useEffect(() => {
+    return () => {
+      if (focusedElementBeforeOpening.current) {
+        focusedElementBeforeOpening.current.focus();
+      }
+    };
+  }, []);
 
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
-      onAction: onDismiss
+      onAction: onDismiss,
+      ref: closeIconRef
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));
@@ -96,10 +120,9 @@ const Toast = ({
     isCenter: isCenter
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
     isCenter: isCenter,
-    ref: toastRef
+    ref: refToPass
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
-};
-
+});
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
   variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
@@ -132,6 +155,9 @@ Toast.propTypes = {
   targetPortalId: PropTypes.string,
 
   /** Maximum toast width */
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+
+  /** Disables auto focus functionality when the Toast has a close icon */
+  disableAutoFocus: PropTypes.bool
 };
 export default Toast;