carbon-react 109.2.4 → 109.3.0

package/esm/__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/esm/__internal__/field-help/field-help.component.js

@@ -1,28 +1,24 @@
-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 from "react";
 import PropTypes from "prop-types";
-import FieldHelpStyle from "./field-help.style";
+import StyledFieldHelp from "./field-help.style";
 
 const FieldHelp = ({
   children,
   labelInline,
-  labelWidth,
-  ...rest
-}) => /*#__PURE__*/React.createElement(FieldHelpStyle, _extends({
+  labelWidth = 30,
+  id
+}) => /*#__PURE__*/React.createElement(StyledFieldHelp, {
   "data-element": "help",
   labelInline: labelInline,
-  labelWidth: labelWidth
-}, rest), children);
+  labelWidth: labelWidth,
+  id: id
+}, children);
 
 FieldHelp.propTypes = {
-  /** Child elements */
-  children: PropTypes.node,
-
-  /** When true, label is placed in line an input */
-  labelInline: PropTypes.bool,
-
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth: PropTypes.number
+  "children": PropTypes.node,
+  "id": PropTypes.string,
+  "labelInline": PropTypes.bool,
+  "labelWidth": PropTypes.number
 };
+export { FieldHelp };
 export default FieldHelp;

package/esm/__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/esm/__internal__/field-help/field-help.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
-const FieldHelpStyle = styled.span`
+const StyledFieldHelp = styled.span`
   display: block;
   flex: 1;
   margin-top: 8px;
@@ -14,11 +13,4 @@ const FieldHelpStyle = styled.span`
       padding-left: 0;
     `}
 `;
-FieldHelpStyle.defaultProps = {
-  labelWidth: 30
-};
-FieldHelpStyle.propTypes = {
-  labelWidth: PropTypes.number,
-  labelInline: PropTypes.bool
-};
-export default FieldHelpStyle;
+export default StyledFieldHelp;

package/esm/__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/esm/__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/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -37,17 +37,66 @@ const isRadio = element => {
   return element.hasAttribute("type") && element.getAttribute("type") === "radio";
 };
 
-const nextNonRadioElementIndex = (element, focusableElements) => {
+const getRadioElementToFocus = (groupName, shiftKey) => {
+  const buttonsInGroup = document.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
+  const selectedButton = [...buttonsInGroup].find(button => button.checked);
+
+  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;
 };
 
-export { defaultFocusableSelectors, nextNonRadioElementIndex, isRadio, setElementFocus };
+export { defaultFocusableSelectors, getNextElement, setElementFocus };

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { defaultFocusableSelectors, nextNonRadioElementIndex, isRadio, setElementFocus } from "./focus-trap-utils";
+import { defaultFocusableSelectors, getNextElement, setElementFocus } from "./focus-trap-utils";
 import { ModalContext } from "../../components/modal/modal.component";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 
@@ -10,7 +10,8 @@ const FocusTrap = ({
   focusFirstElement,
   bespokeTrap,
   wrapperRef,
-  isOpen
+  isOpen,
+  additionalWrapperRefs
 }) => {
   const trapRef = useRef(null);
   const [focusableElements, setFocusableElements] = useState();
@@ -28,19 +29,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 = useCallback(() => {
-    const ref = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
-
-    if (ref) {
-      const elements = Array.from(ref.querySelectorAll(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(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]);
   useEffect(() => {
     const observer = new MutationObserver(updateFocusableElements);
     observer.observe(trapRef.current, {
@@ -78,20 +81,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 (isRadio(activeElement)) {
-            const nextIndex = nextNonRadioElementIndex(activeElement, focusableElements);
-            setElementFocus(focusableElements[nextIndex]);
-            ev.preventDefault();
+          if (activeElement === wrapperRef.current) {
+            elementToFocus = getNextElement(firstElement, focusableElements, ev.shiftKey);
+          } else {
+            elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
           }
-        } else if (activeElement === lastElement) {
-          firstElement.focus();
+
+          setElementFocus(elementToFocus);
+          ev.preventDefault();
+        } else {
+          const elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
+          setElementFocus(elementToFocus);
           ev.preventDefault();
         }
       }
@@ -178,6 +180,14 @@ FocusTrap.propTypes = {
   }),
 
   /* whether the modal (etc.) component that the focus trap is inside is open or not */
-  isOpen: PropTypes.bool
+  isOpen: PropTypes.bool,
+
+  /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
+  additionalWrapperRefs: PropTypes.arrayOf(PropTypes.shape({
+    current: PropTypes.any
+  }))
+};
+FocusTrap.defaultProps = {
+  additionalWrapperRefs: []
 };
 export default FocusTrap;

package/esm/__spec_helper__/index.d.ts

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

package/esm/__spec_helper__/index.js

@@ -1,12 +1,6 @@
-import Enzyme from "enzyme";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-import { setup } from "./mock-match-media";
+import { enableFetchMocks } from "jest-fetch-mock";
+import { setupMatchMediaMock } from "./mock-match-media";
 import setupResizeObserverMock from "./mock-resize-observer";
-
-require("jest-fetch-mock").enableMocks();
-
+enableFetchMocks();
 setupResizeObserverMock();
-setup();
-Enzyme.configure({
-  adapter: new Adapter()
-});
+setupMatchMediaMock();

package/esm/__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/esm/__spec_helper__/mock-match-media.js

@@ -1,7 +1,7 @@
 let mocked = false;
 let _matches = false;
 const removeListener = jest.fn();
-export const setup = () => {
+export const setupMatchMediaMock = () => {
   if (!global.window) {
     return;
   }
@@ -23,7 +23,7 @@ export const setup = () => {
 };
 export 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/esm/__spec_helper__/mock-resize-observer.d.ts

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

package/esm/components/alert/alert.component.js

@@ -30,6 +30,15 @@ Alert.propTypes = {
   "disableEscKey": PropTypes.bool,
   "disableFocusTrap": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
+  "focusableContainers": PropTypes.arrayOf(PropTypes.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.shape({
     "current": function (props, propName) {
       if (props[propName] == null) {

package/esm/components/dialog/dialog.component.js

@@ -31,6 +31,7 @@ const Dialog = ({
   help,
   role = "dialog",
   contentPadding = {},
+  focusableContainers,
   ...rest
 }) => {
   const locale = useLocale();
@@ -156,7 +157,8 @@ const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     wrapperRef: dialogRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(DialogStyle, _extends({
     "aria-modal": true,
     ref: dialogRef,
@@ -247,7 +249,12 @@ Dialog.propTypes = {
     p: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     px: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     py: PropTypes.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.arrayOf(PropTypes.shape({
+    current: PropTypes.any
+  }))
 };
 Dialog.defaultProps = {
   size: "medium",

package/esm/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/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -32,6 +32,7 @@ const DialogFullScreen = ({
   contentRef,
   help,
   role = "dialog",
+  focusableContainers,
   ...rest
 }) => {
   const locale = useLocale();
@@ -86,7 +87,8 @@ const DialogFullScreen = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef,
-    isOpen: open
+    isOpen: open,
+    additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
     "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
@@ -170,6 +172,11 @@ DialogFullScreen.propTypes = {
   })]),
 
   /** The ARIA role to be applied to the DialogFullscreen container */
-  role: PropTypes.string
+  role: PropTypes.string,
+
+  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+  focusableContainers: PropTypes.arrayOf(PropTypes.shape({
+    current: PropTypes.any
+  }))
 };
 export default DialogFullScreen;

package/esm/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/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/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/__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)();

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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.4",
+  "version": "109.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -16,11 +16,10 @@
   "scripts": {
     "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
-    "test": "jest --config=./jest.conf.json",
-    "test-update": "jest --config=./jest.conf.json --updateSnapshot",
+    "test": "jest --config=./jest.config.json",
+    "test-update": "jest --config=./jest.config.json --updateSnapshot",
     "test:cypress": "npx cypress open --e2e",
     "cypress:react": "npx cypress open --component",
-    "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
     "build": "node ./scripts/build.js",

package/esm/__internal__/field-help/field-help.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** 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 function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-export interface FieldHelpProps {
-  /** Child elements */
-  children?: React.ReactNode;
-  /** 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 function FieldHelp(props: FieldHelpProps): JSX.Element;
-
-export default FieldHelp;