carbon-react 109.2.2 → 109.3.0

package/lib/__spec_helper__/mock-match-media.d.ts

@@ -1,6 +1,6 @@
-declare function setup(): void;
+declare function setupMatchMediaMock(): void;
 declare function mockMatchMedia(
   matches?: boolean
 ): { removeListener: jest.Mock };
 
-export { setup, mockMatchMedia };
+export { setupMatchMediaMock, mockMatchMedia };

package/lib/__spec_helper__/mock-match-media.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockMatchMedia = exports.setup = void 0;
+exports.mockMatchMedia = exports.setupMatchMediaMock = void 0;
 let mocked = false;
 let _matches = false;
 const removeListener = jest.fn();
 
-const setup = () => {
+const setupMatchMediaMock = () => {
   if (!global.window) {
     return;
   }
@@ -29,11 +29,11 @@ const setup = () => {
   mocked = true;
 };
 
-exports.setup = setup;
+exports.setupMatchMediaMock = setupMatchMediaMock;
 
 const mockMatchMedia = matches => {
   if (!mocked) {
-    throw new Error("window.matchMedia has not been mocked. Did you call setup()?");
+    throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");
   }
 
   _matches = matches;

package/lib/__spec_helper__/mock-resize-observer.d.ts

@@ -0,0 +1,2 @@
+export default setupResizeObserverMock;
+declare function setupResizeObserverMock(): void;

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -38,7 +38,7 @@ const AccordionGroup = ({
 
     return hasAccordionChildren;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `AccordionGroup accepts only children of type \`${_accordion.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `AccordionGroup accepts only children of type \`${_accordion.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const filteredChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => {
     return /*#__PURE__*/_react.default.isValidElement(child);
   }), [children]);

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -82,8 +82,8 @@ const ActionPopoverItem = ({
 }) => {
   const l = (0, _useLocale.default)();
   const context = (0, _react.useContext)(_actionPopoverContext.default);
-  (0, _invariant.default)(context, "ActionPopoverItem must be used within an ActionPopover component");
-  (0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");
+  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
+  !( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : (0, _invariant.default)(false) : void 0;
   const {
     setOpenPopover,
     isOpenPopover,

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -42,11 +42,11 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const context = (0, _react.useContext)(_actionPopoverContext.default);
-  (0, _invariant.default)(context, "ActionPopoverMenu must be used within an ActionPopover component");
+  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   const {
     focusButton
   } = context;
-  (0, _invariant.default)(setOpen && setFocusIndex && typeof focusIndex !== "undefined", "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");
+  !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : (0, _invariant.default)(false) : void 0;
   const hasProperChildren = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
@@ -58,7 +58,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
 
     return !incorrectChild;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const items = (0, _react.useMemo)(() => {
     return _react.default.Children.toArray(children).filter(child => {
       return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;

package/lib/components/action-popover/action-popover.component.js

@@ -74,7 +74,7 @@ const ActionPopover = ({
 
     return !incorrectChild;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const mappedPlacement = (0, _react.useMemo)(() => {
     if (placement === "top" && !rightAlignMenu) {
       return "top-end";

package/lib/components/alert/alert.component.js

@@ -42,6 +42,15 @@ Alert.propTypes = {
   "disableEscKey": _propTypes.default.bool,
   "disableFocusTrap": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,
+  "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
   "focusFirstElement": _propTypes.default.shape({
     "current": function (props, propName) {
       if (props[propName] == null) {

package/lib/components/anchor-navigation/anchor-navigation.component.js

@@ -34,7 +34,7 @@ const AnchorNavigation = ({
   children,
   stickyNavigation
 }) => {
-  (0, _invariant.default)((0, _reactIs.isFragment)(stickyNavigation), "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.");
+  !(0, _reactIs.isFragment)(stickyNavigation) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : (0, _invariant.default)(false) : void 0;
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(stickyNavigation.props.children).find(child => {
       return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _anchorNavigationItem.default.displayName;
@@ -42,7 +42,7 @@ const AnchorNavigation = ({
 
     return !incorrectChild;
   }, [stickyNavigation]);
-  (0, _invariant.default)(hasCorrectItemStructure, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${_anchorNavigationItem.default.displayName}\``);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${_anchorNavigationItem.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
   const [selectedIndex, setSelectedIndex] = (0, _react.useState)(0);
   const sectionRefs = (0, _react.useRef)(_react.default.Children.map(stickyNavigation.props.children, child => child.props.target));
   const anchorRefs = (0, _react.useRef)(Array.from({

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

@@ -118,10 +118,10 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   fullWidth = false,
   ...rest
 }, ref) => {
-  (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
+  !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `iconType` must be defined or this node must have children.") : (0, _invariant.default)(false) : void 0;
 
   if (subtext) {
-    (0, _invariant.default)(size === "large", "subtext prop has no effect unless the button is large.");
+    !(size === "large") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "subtext prop has no effect unless the button is large.") : (0, _invariant.default)(false) : void 0;
   }
 
   if (!deprecatedForwardRefWarnTriggered && forwardRef) {

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

@@ -43,7 +43,7 @@ const ButtonBar = ({
 
     return !incorrectChild;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, "ButtonBar accepts only `Button` or `IconButton` elements.");
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ButtonBar accepts only `Button` or `IconButton` elements.") : (0, _invariant.default)(false) : void 0;
 
   const getBtnProps = child => {
     var _child$props, _child$props2, _child$props2$childre, _child$props2$childre2;

package/lib/components/decimal/decimal.component.js

@@ -52,10 +52,10 @@ const Decimal = ({
   const emptyValue = allowEmptyValue ? "" : "0.00";
   const getSafeValueProp = (0, _react.useCallback)(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
-    (0, _invariant.default)(typeof initialValue === "string", "Decimal `value` prop must be a string");
+    !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Decimal `value` prop must be a string") : (0, _invariant.default)(false) : void 0;
 
     if (initialValue && !allowEmptyValue) {
-      (0, _invariant.default)(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+      !(initialValue !== "") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`") : (0, _invariant.default)(false) : void 0;
     }
 
     return initialValue;
@@ -185,7 +185,7 @@ const Decimal = ({
   const prevControlledRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    (0, _invariant.default)(prevControlledRef.current !== isControlled, message);
+    !(prevControlledRef.current !== isControlled) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, message) : (0, _invariant.default)(false) : void 0;
     prevControlledRef.current = isControlled;
   }, [isControlled]);
   const prevValue = (0, _usePrevious.default)(value);

package/lib/components/dialog/dialog.component.js

@@ -55,6 +55,7 @@ const Dialog = ({
   help,
   role = "dialog",
   contentPadding = {},
+  focusableContainers,
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -180,7 +181,8 @@ const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     wrapperRef: dialogRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.DialogStyle, _extends({
     "aria-modal": true,
     ref: dialogRef,
@@ -271,7 +273,12 @@ Dialog.propTypes = {
     p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
-  })
+  }),
+
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+  focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    current: _propTypes.default.any
+  }))
 };
 Dialog.defaultProps = {
   size: "medium",

package/lib/components/dialog/dialog.d.ts

@@ -59,6 +59,8 @@ export interface DialogProps extends ModalProps {
   role?: string;
   /** Padding to be set on the Dialog content */
   contentPadding?: ContentPaddingInterface;
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+  focusableContainers?: React.MutableRefObject<HTMLElement>[];
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -56,6 +56,7 @@ const DialogFullScreen = ({
   contentRef,
   help,
   role = "dialog",
+  focusableContainers,
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -110,7 +111,8 @@ const DialogFullScreen = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
     "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
@@ -194,7 +196,12 @@ DialogFullScreen.propTypes = {
   })]),
 
   /** The ARIA role to be applied to the DialogFullscreen 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 dialog */
+  focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    current: _propTypes.default.any
+  }))
 };
 var _default = DialogFullScreen;
 exports.default = _default;

package/lib/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -41,6 +41,8 @@ export interface DialogFullScreenProps extends ModalProps {
   title?: React.ReactNode;
   /** The ARIA role to be applied to the DialogFullscreen container */
   role?: string;
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+  focusableContainers?: React.MutableRefObject<HTMLElement>[];
 }
 
 declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;

package/lib/components/drawer/drawer.component.js

@@ -93,7 +93,7 @@ const Drawer = ({
   const previousValue = (0, _usePrevious.default)(expanded);
   (0, _react.useEffect)(() => {
     const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
-    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
+    !(isControlled.current === (expanded !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, message) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current && previousValue !== expanded) {
       setIsExpanded(expanded);

package/lib/components/icon/icon.component.js

@@ -58,7 +58,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(override));
 
   if (tooltipFlipOverrides) {
-    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+    !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
   }
 
   const isInteractive = !!tooltipMessage && !disabled;

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

@@ -242,6 +242,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       menuType: menuContext.menuType,
       asPassiveItem: asPassiveItem
     }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
+      onClick: onClick,
       className: className,
       menuType: menuContext.menuType,
       ref: ref,

package/lib/components/note/note.component.js

@@ -45,12 +45,12 @@ const Note = ({
   onLinkAdded,
   ...rest
 }) => {
-  (0, _invariant.default)(width > 0, "<Note> width must be greater than 0");
-  (0, _invariant.default)(createdDate, "<Note> createdDate is required");
-  (0, _invariant.default)(noteContent, "<Note> noteContent is required");
-  (0, _invariant.default)(!status || status.text, "<Note> status.text is required");
-  (0, _invariant.default)(!status || status.timeStamp, "<Note> status.timeStamp is required");
-  (0, _invariant.default)(!inlineControl || inlineControl.type === _actionPopover.ActionPopover, "<Note> inlineControl must be an instance of <ActionPopover>");
+  !(width > 0) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> width must be greater than 0") : (0, _invariant.default)(false) : void 0;
+  !createdDate ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> createdDate is required") : (0, _invariant.default)(false) : void 0;
+  !noteContent ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> noteContent is required") : (0, _invariant.default)(false) : void 0;
+  !(!status || status.text) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> status.text is required") : (0, _invariant.default)(false) : void 0;
+  !(!status || status.timeStamp) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> status.timeStamp is required") : (0, _invariant.default)(false) : void 0;
+  !(!inlineControl || inlineControl.type === _actionPopover.ActionPopover) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "<Note> inlineControl must be an instance of <ActionPopover>") : (0, _invariant.default)(false) : void 0;
 
   const renderStatus = () => {
     if (!status) {

package/lib/components/numeral-date/numeral-date.component.js

@@ -108,7 +108,7 @@ const NumeralDate = ({
   const [internalMessages, setInternalMessages] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
   }, [value]);
   const validationMessages = {
     dd: l.numeralDate.validation.day(),

package/lib/components/search/search.component.js

@@ -57,7 +57,7 @@ const Search = ({
 }) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
-  (0, _invariant.default)(typeof initialValue === "string", "This component has no initial value");
+  !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "This component has no initial value") : (0, _invariant.default)(false) : void 0;
   const [searchValue, setSearchValue] = (0, _react.useState)(initialValue);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [searchIsActive, setSearchIsActive] = (0, _react.useState)(initialValue.length >= threshold);

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

@@ -193,8 +193,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(prevValue => {
@@ -228,7 +228,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    (0, _invariant.default)(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
+    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onListActionMissingMessage) : (0, _invariant.default)(false) : void 0;
   }, [listActionButton, onListAction]);
   (0, _react.useEffect)(() => {
     if (isControlled.current) {

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

@@ -229,8 +229,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -174,8 +174,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -49,7 +49,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => _tooltip2.TOOLTIP_POSITIONS.includes(placement));
-  (0, _invariant.default)(isFlipOverridesValid, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;