carbon-react 109.2.4 → 109.3.2

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/grid/grid-container/grid-container.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { SpaceProps, GridProps } from "styled-system";
+export interface GridContainerProps extends SpaceProps, GridProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
+    children?: React.ReactNode;
+}
+export declare const GridContainer: (props: GridContainerProps) => JSX.Element;
+export default GridContainer;