carbon-react 109.2.2 → 109.3.0

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

@@ -168,8 +168,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   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";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(prevValue => {
@@ -203,7 +203,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    invariant(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
+    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? invariant(false, onListActionMissingMessage) : invariant(false) : void 0;
   }, [listActionButton, onListAction]);
   useEffect(() => {
     if (isControlled.current) {

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

@@ -201,8 +201,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   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";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -149,8 +149,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   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";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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/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;

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

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

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,55 +1,57 @@
-import { useRef, useCallback, useMemo } from "react";
+import { useRef, useCallback } from "react";
 import guid from "../../../__internal__/utils/helpers/guid";
 import ScrollBlockManager from "./scroll-block-manager"; // TODO: This component can be refactored to remove redundant code after
 // we can confirm that all Sage products use version 105.0.0^
 
 const scrollBlockManager = new ScrollBlockManager();
 
+const getRules = () => {
+  /* istanbul ignore next */
+  const {
+    documentElement,
+    body
+  } = document || {};
+  const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+  const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+  return [// TODO: First two entries of this array with the documentElement can be removed
+  {
+    element: documentElement,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: documentElement,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: body,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "paddingRight",
+    blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+  }];
+};
+
 const useScrollBlock = () => {
   const {
     current: containerGuid
   } = useRef(guid());
   const originalValuesRef = useRef([]);
-  const rules = useMemo(() => {
-    /* istanbul ignore next */
-    const {
-      documentElement,
-      body
-    } = document || {};
-    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
-    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [// TODO: First two entries of this array with the documentElement can be removed
-    {
-      element: documentElement,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: documentElement,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: body,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "paddingRight",
-      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
-    }];
-  }, []);
   const restoreValues = useCallback(() => {
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValuesRef.current[index];
     });
-  }, [rules]);
+  }, []);
   const blockScroll = useCallback(() => {
+    const rules = getRules();
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
 
@@ -73,7 +75,7 @@ const useScrollBlock = () => {
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [restoreValues, containerGuid, rules]);
+  }, [restoreValues, containerGuid]);
   const allowScroll = useCallback(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
@@ -88,14 +90,14 @@ const useScrollBlock = () => {
 
 
     const originalValues = scrollBlockManager.getOriginalValues();
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValues[index];
     });
     scrollBlockManager.saveOriginalValues([]);
-  }, [containerGuid, rules]);
+  }, [containerGuid]);
   return {
     blockScroll,
     allowScroll

package/lib/__internal__/field-help/field-help.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { StyledFieldHelpProps } from "./field-help.style";
+export interface FieldHelpProps extends StyledFieldHelpProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The unique id of the FieldHelp component */
+    id?: string;
+}
+export declare const FieldHelp: ({ children, labelInline, labelWidth, id, }: FieldHelpProps) => JSX.Element;
+export default FieldHelp;

package/lib/__internal__/field-help/field-help.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FieldHelp = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,28 +13,24 @@ var _fieldHelp = _interopRequireDefault(require("./field-help.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 FieldHelp = ({
   children,
   labelInline,
-  labelWidth,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(_fieldHelp.default, _extends({
+  labelWidth = 30,
+  id
+}) => /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
   "data-element": "help",
   labelInline: labelInline,
-  labelWidth: labelWidth
-}, rest), children);
+  labelWidth: labelWidth,
+  id: id
+}, children);
 
+exports.FieldHelp = FieldHelp;
 FieldHelp.propTypes = {
-  /** Child elements */
-  children: _propTypes.default.node,
-
-  /** When true, label is placed in line an input */
-  labelInline: _propTypes.default.bool,
-
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth: _propTypes.default.number
+  "children": _propTypes.default.node,
+  "id": _propTypes.default.string,
+  "labelInline": _propTypes.default.bool,
+  "labelWidth": _propTypes.default.number
 };
 var _default = FieldHelp;
 exports.default = _default;

package/lib/__internal__/field-help/field-help.style.d.ts

@@ -0,0 +1,8 @@
+export interface StyledFieldHelpProps {
+    /** When true, label is placed in line an input */
+    labelInline?: boolean;
+    /** Width of a label in percentage. Works only when labelInline is true */
+    labelWidth?: number;
+}
+declare const StyledFieldHelp: import("styled-components").StyledComponent<"span", any, StyledFieldHelpProps, never>;
+export default StyledFieldHelp;

package/lib/__internal__/field-help/field-help.style.js

@@ -7,15 +7,11 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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; }
 
-const FieldHelpStyle = _styledComponents.default.span`
+const StyledFieldHelp = _styledComponents.default.span`
   display: block;
   flex: 1;
   margin-top: 8px;
@@ -29,12 +25,5 @@ const FieldHelpStyle = _styledComponents.default.span`
       padding-left: 0;
     `}
 `;
-FieldHelpStyle.defaultProps = {
-  labelWidth: 30
-};
-FieldHelpStyle.propTypes = {
-  labelWidth: _propTypes.default.number,
-  labelInline: _propTypes.default.bool
-};
-var _default = FieldHelpStyle;
+var _default = StyledFieldHelp;
 exports.default = _default;

package/lib/__internal__/field-help/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./field-help";
+export { default } from "./field-help.component";
+export type { FieldHelpProps } from "./field-help.component";

package/lib/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,4 +1,3 @@
 export const defaultFocusableSelectors: "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
-export function nextNonRadioElementIndex(element: any, focusableElements: any): number;
-export function isRadio(element: any): any;
+export function getNextElement(element: any, focusableElements: any, shiftKey: any): any;
 export function setElementFocus(element: any): void;

package/lib/__internal__/focus-trap/focus-trap-utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setElementFocus = setElementFocus;
-exports.isRadio = exports.nextNonRadioElementIndex = exports.defaultFocusableSelectors = void 0;
+exports.getNextElement = exports.defaultFocusableSelectors = void 0;
 const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
 exports.defaultFocusableSelectors = defaultFocusableSelectors;
 
@@ -45,19 +45,66 @@ const isRadio = element => {
   return element.hasAttribute("type") && element.getAttribute("type") === "radio";
 };
 
-exports.isRadio = isRadio;
+const getRadioElementToFocus = (groupName, shiftKey) => {
+  const buttonsInGroup = document.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
+  const selectedButton = [...buttonsInGroup].find(button => button.checked);
 
-const nextNonRadioElementIndex = (element, focusableElements) => {
+  if (selectedButton) {
+    return selectedButton;
+  }
+
+  return buttonsInGroup[shiftKey ? buttonsInGroup.length - 1 : 0];
+};
+
+const getNextElement = (element, focusableElements, shiftKey) => {
   const currentIndex = focusableElements.indexOf(element);
-  let nextIndex = currentIndex - 1;
-  if (currentIndex === 0) return focusableElements.length - 1;
-  const isNextRadio = isRadio(focusableElements[nextIndex]);
+  const increment = shiftKey ? -1 : 1;
+  let nextIndex = currentIndex;
+  let foundElement;
+
+  while (!foundElement) {
+    nextIndex += increment;
+
+    if (nextIndex < 0) {
+      nextIndex += focusableElements.length;
+    }
+
+    if (nextIndex >= focusableElements.length) {
+      nextIndex -= focusableElements.length;
+    }
+
+    const nextElement = focusableElements[nextIndex];
+
+    if (nextElement === element) {
+      // guard in case there is only one focusable element (or only a single radio group) in the trap.
+      // If this happens we don't want to freeze the browser by looping forever, and it's OK to just focus
+      // the same element we're already on
+      return element;
+    }
+
+    if (isRadio(nextElement)) {
+      // if we've reached a radio element we need to ensure we focus the correct button in its group
+      const nextElementGroupName = nextElement.getAttribute("name");
+
+      if (isRadio(element)) {
+        const groupName = element.getAttribute("name"); // if the name is different we're in a new group so can focus the appropriate button in it*/
+
+        if (nextElementGroupName !== groupName) {
+          foundElement = getRadioElementToFocus(nextElementGroupName, shiftKey);
+        } // otherwise we're still in the same radio group so need to continue the loop
 
-  if (isNextRadio) {
-    nextIndex = nextNonRadioElementIndex(focusableElements[nextIndex], focusableElements);
+      } else {
+        // if we've moved into a radio group from a non-radio starting point, we still have to ensure we focus
+        // the correct button in the group
+        foundElement = getRadioElementToFocus(nextElementGroupName, shiftKey);
+      }
+    } else {
+      // if we've reached a non-radio element, we can focus it with no issues
+      foundElement = nextElement;
+    }
   }
 
-  return nextIndex;
+  return foundElement;
 };
 
-exports.nextNonRadioElementIndex = nextNonRadioElementIndex;
+exports.getNextElement = getNextElement;

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -27,7 +27,8 @@ const FocusTrap = ({
   focusFirstElement,
   bespokeTrap,
   wrapperRef,
-  isOpen
+  isOpen,
+  additionalWrapperRefs
 }) => {
   const trapRef = (0, _react.useRef)(null);
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
@@ -45,19 +46,21 @@ const FocusTrap = ({
 
     return Array.from(candidate).some((el, i) => el !== focusableElements[i]);
   }, [focusableElements]);
+  const allRefs = [wrapperRef, ...additionalWrapperRefs].map(ref => ref === null || ref === void 0 ? void 0 : ref.current);
   const updateFocusableElements = (0, _react.useCallback)(() => {
-    const ref = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
-
-    if (ref) {
-      const elements = Array.from(ref.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
-
-      if (hasNewInputs(elements)) {
-        setFocusableElements(Array.from(elements));
-        setFirstElement(elements[0]);
-        setLastElement(elements[elements.length - 1]);
+    const elements = [];
+    allRefs.forEach(ref => {
+      if (ref) {
+        elements.push(...Array.from(ref.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1));
       }
+    });
+
+    if (hasNewInputs(elements)) {
+      setFocusableElements(Array.from(elements));
+      setFirstElement(elements[0]);
+      setLastElement(elements[elements.length - 1]);
     }
-  }, [hasNewInputs, wrapperRef]);
+  }, [hasNewInputs, allRefs]);
   (0, _react.useEffect)(() => {
     const observer = new MutationObserver(updateFocusableElements);
     observer.observe(trapRef.current, {
@@ -95,20 +98,19 @@ const FocusTrap = ({
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
-          if (activeElement === firstElement || activeElement === wrapperRef.current) {
-            lastElement.focus();
-            ev.preventDefault();
-          } // If current element is radio button -
-          // find next non radio button element
-
+          let elementToFocus;
 
-          if ((0, _focusTrapUtils.isRadio)(activeElement)) {
-            const nextIndex = (0, _focusTrapUtils.nextNonRadioElementIndex)(activeElement, focusableElements);
-            (0, _focusTrapUtils.setElementFocus)(focusableElements[nextIndex]);
-            ev.preventDefault();
+          if (activeElement === wrapperRef.current) {
+            elementToFocus = (0, _focusTrapUtils.getNextElement)(firstElement, focusableElements, ev.shiftKey);
+          } else {
+            elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
           }
-        } else if (activeElement === lastElement) {
-          firstElement.focus();
+
+          (0, _focusTrapUtils.setElementFocus)(elementToFocus);
+          ev.preventDefault();
+        } else {
+          const elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
+          (0, _focusTrapUtils.setElementFocus)(elementToFocus);
           ev.preventDefault();
         }
       }
@@ -196,7 +198,15 @@ FocusTrap.propTypes = {
   }),
 
   /* whether the modal (etc.) component that the focus trap is inside is open or not */
-  isOpen: _propTypes.default.bool
+  isOpen: _propTypes.default.bool,
+
+  /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
+  additionalWrapperRefs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    current: _propTypes.default.any
+  }))
+};
+FocusTrap.defaultProps = {
+  additionalWrapperRefs: []
 };
 var _default = FocusTrap;
 exports.default = _default;

package/lib/__internal__/validations/validation-icon.component.js

@@ -57,7 +57,7 @@ const ValidationIcon = ({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
-    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon 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 ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
   }
 
   const {

package/lib/__spec_helper__/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__spec_helper__/index.js

@@ -1,8 +1,6 @@
 "use strict";
 
-var _enzyme = _interopRequireDefault(require("enzyme"));
-
-var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
+var _jestFetchMock = require("jest-fetch-mock");
 
 var _mockMatchMedia = require("./mock-match-media");
 
@@ -10,11 +8,6 @@ var _mockResizeObserver = _interopRequireDefault(require("./mock-resize-observer
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-require("jest-fetch-mock").enableMocks();
-
+(0, _jestFetchMock.enableFetchMocks)();
 (0, _mockResizeObserver.default)();
-(0, _mockMatchMedia.setup)();
-
-_enzyme.default.configure({
-  adapter: new _enzymeAdapterReact.default()
-});
+(0, _mockMatchMedia.setupMatchMediaMock)();