carbon-react 109.2.4 → 109.3.2

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/hooks/__internal__/useMenuKeyboardNavigation/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useMenuKeyboardNavigation";

package/esm/hooks/__internal__/useMenuKeyboardNavigation/index.js

@@ -0,0 +1 @@
+export { default } from "./useMenuKeyboardNavigation";

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void) => (ev: any) => void;
+export default _default;

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -0,0 +1,70 @@
+import { useCallback, useMemo } from "react";
+import Events from "../../../__internal__/utils/helpers/events";
+import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
+export default ((mainControlRef, childrenRefs, hide) => {
+  const childrenLength = useMemo(() => childrenRefs.length, [childrenRefs]);
+  const handleKeyDown = useCallback(ev => {
+    ev.preventDefault();
+    const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
+    let nextIndex = -1;
+
+    const refocusMainControl = () => {
+      var _mainControlRef$curre;
+
+      hide();
+      (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
+    };
+
+    const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
+
+    if (Events.isEndKey(ev) || arrowModifierPressed && Events.isDownKey(ev)) {
+      nextIndex = childrenLength - 1;
+    }
+
+    if (Events.isHomeKey(ev) || arrowModifierPressed && Events.isUpKey(ev)) {
+      nextIndex = 0;
+    }
+
+    if (!arrowModifierPressed && Events.isUpKey(ev) && currentIndex > 0) {
+      nextIndex = currentIndex - 1;
+    }
+
+    if (!arrowModifierPressed && Events.isDownKey(ev) && currentIndex < childrenLength - 1) {
+      nextIndex = currentIndex + 1;
+    }
+
+    const tabPressed = Events.isTabKey(ev);
+    const tabShiftPressed = tabPressed && Events.isShiftKey(ev);
+
+    if (tabShiftPressed) {
+      if (currentIndex === 0) {
+        refocusMainControl();
+      } else {
+        nextIndex = currentIndex - 1;
+      }
+    } else if (tabPressed) {
+      if (currentIndex === childrenLength - 1) {
+        var _elements;
+
+        const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+        const indexOf = elements.indexOf(mainControlRef.current);
+        (_elements = elements[indexOf + 1]) === null || _elements === void 0 ? void 0 : _elements.focus(); // // timeout enforces that the "hide" method will be run after browser focuses on the next element
+
+        setTimeout(hide, 0);
+      } else {
+        nextIndex = currentIndex + 1;
+      }
+    }
+
+    if (nextIndex > -1) {
+      var _childrenRefs$nextInd;
+
+      (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
+    }
+
+    if (Events.isEscKey(ev)) {
+      refocusMainControl();
+    }
+  }, [childrenLength, hide, childrenRefs, mainControlRef]);
+  return handleKeyDown;
+});

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