carbon-react 110.0.1 → 110.0.4

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

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

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

@@ -1,8 +1,8 @@
 const defaultFocusableSelectors = 'button:not([disabled]), [href], input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]';
+const INTERVAL = 10;
+const MAX_TIME = 100;
 
-const waitForVisibleAndFocus = element => {
-  const INTERVAL = 10;
-  const MAX_TIME = 100;
+const setElementFocus = element => {
   let timeSoFar = 0;
 
   const stylesMatch = () => {
@@ -24,15 +24,6 @@ const waitForVisibleAndFocus = element => {
   check();
 };
 
-function setElementFocus(element) {
-  if (typeof element === "function") {
-    element();
-  } else {
-    const el = element.current || element;
-    waitForVisibleAndFocus(el);
-  }
-}
-
 const isRadio = element => {
   return element.hasAttribute("type") && element.getAttribute("type") === "radio";
 };

package/esm/__internal__/focus-trap/focus-trap.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
+export interface FocusTrapProps {
+    children: React.ReactNode;
+    autoFocus?: boolean;
+    /** provide a custom first element to focus */
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement;
+    /** a custom callback that will override the default focus trap behaviour */
+    bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** a ref to the container wrapping the focusable elements */
+    wrapperRef?: CustomRefObject<HTMLElement>;
+    isOpen?: boolean;
+    /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
+    additionalWrapperRefs?: CustomRefObject<HTMLElement>[];
+}
+declare const FocusTrap: ({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => JSX.Element;
+export default FocusTrap;

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

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { defaultFocusableSelectors, getNextElement, setElementFocus } from "./focus-trap-utils";
 import { ModalContext } from "../../components/modal/modal.component";
-import usePrevious from "../../hooks/__internal__/usePrevious";
+import usePrevious from "../../hooks/__internal__/usePrevious"; // TODO investigate why React.RefObject<T> produces a failed prop type when current = null
 
 const FocusTrap = ({
   children,
@@ -29,7 +29,8 @@ 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 trapWrappers = useMemo(() => additionalWrapperRefs !== null && additionalWrapperRefs !== void 0 && additionalWrapperRefs.length ? [wrapperRef, ...additionalWrapperRefs] : [wrapperRef], [additionalWrapperRefs, wrapperRef]);
+  const allRefs = trapWrappers.map(ref => ref === null || ref === void 0 ? void 0 : ref.current);
   const updateFocusableElements = useCallback(() => {
     const elements = [];
     allRefs.forEach(ref => {
@@ -46,14 +47,18 @@ const FocusTrap = ({
   }, [hasNewInputs, allRefs]);
   useEffect(() => {
     const observer = new MutationObserver(updateFocusableElements);
-    observer.observe(trapRef.current, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      characterData: true
+    trapWrappers.forEach(wrapper => {
+      if (wrapper !== null && wrapper !== void 0 && wrapper.current) {
+        observer.observe(wrapper === null || wrapper === void 0 ? void 0 : wrapper.current, {
+          subtree: true,
+          childList: true,
+          attributes: true,
+          characterData: true
+        });
+      }
     });
     return () => observer.disconnect();
-  }, [updateFocusableElements]);
+  }, [updateFocusableElements, trapWrappers]);
   useLayoutEffect(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
@@ -61,7 +66,8 @@ const FocusTrap = ({
   const prevShouldSetFocus = usePrevious(shouldSetFocus);
   useEffect(() => {
     if (shouldSetFocus && !prevShouldSetFocus) {
-      setElementFocus(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
+      setElementFocus(candidateFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
   }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   useEffect(() => {
@@ -71,19 +77,17 @@ const FocusTrap = ({
         return;
       }
 
-      const {
-        activeElement
-      } = document;
+      const activeElement = document.activeElement;
 
       if (ev.key === "Tab") {
-        if (!focusableElements.length) {
+        if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
           /* Block the trap */
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
           let elementToFocus;
 
-          if (activeElement === wrapperRef.current) {
+          if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
             elementToFocus = getNextElement(firstElement, focusableElements, ev.shiftKey);
           } else {
             elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
@@ -99,9 +103,9 @@ const FocusTrap = ({
       }
     };
 
-    document.addEventListener("keydown", trapFn);
+    document.addEventListener("keydown", trapFn, true);
     return function cleanup() {
-      document.removeEventListener("keydown", trapFn);
+      document.removeEventListener("keydown", trapFn, true);
     };
   }, [firstElement, lastElement, focusableElements, bespokeTrap, wrapperRef]);
   const updateCurrentFocusedElement = useCallback(() => {
@@ -153,7 +157,10 @@ const FocusTrap = ({
 
 
   const clonedChildren = React.Children.map(children, child => {
-    return /*#__PURE__*/React.cloneElement(child, focusProps(child.props.tabIndex === undefined));
+    var _focusableChild$props;
+
+    const focusableChild = child;
+    return /*#__PURE__*/React.cloneElement(focusableChild, focusProps((focusableChild === null || focusableChild === void 0 ? void 0 : (_focusableChild$props = focusableChild.props) === null || _focusableChild$props === void 0 ? void 0 : _focusableChild$props.tabIndex) === undefined));
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef
@@ -161,33 +168,42 @@ const FocusTrap = ({
 };
 
 FocusTrap.propTypes = {
-  children: PropTypes.node.isRequired,
-
-  /** flag to set focus automatically on first render */
-  autoFocus: PropTypes.bool,
-
-  /** provide a custom first element to focus */
-  focusFirstElement: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
+  "additionalWrapperRefs": PropTypes.arrayOf(PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "autoFocus": PropTypes.bool,
+  "bespokeTrap": PropTypes.func,
+  "children": PropTypes.node,
+  "focusFirstElement": PropTypes.oneOfType([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");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
   })]),
-
-  /** a custom callback that will override the default focus trap behaviour */
-  bespokeTrap: PropTypes.func,
-
-  /** a ref to the container wrapping the focusable elements */
-  wrapperRef: PropTypes.shape({
-    current: PropTypes.any
-  }),
-
-  /* whether the modal (etc.) component that the focus trap is inside is open or not */
-  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: []
+  "isOpen": PropTypes.bool,
+  "wrapperRef": PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })
 };
 export default FocusTrap;

package/esm/__internal__/focus-trap/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./focus-trap.component";
+export type { FocusTrapProps } from "./focus-trap.component";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,4 +1,4 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const elementsTagTest: (wrapper: ReactWrapper, elements: string[]) => void;
+declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
 declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string | undefined, role?: string | undefined) => void;
 export { elementsTagTest, rootTagTest };

package/esm/components/definition-list/__internal__/dl.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DlContextProps {
+    asSingleColumn?: boolean;
+}
+declare const _default: React.Context<DlContextProps>;
+export default _default;

package/esm/components/definition-list/dd.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+export interface DdProps extends SpaceProps {
+    /** Prop for what will render in the `<Dd></Dd>` tags */
+    children: React.ReactNode;
+}
+declare const Dd: ({ children, ...rest }: DdProps) => JSX.Element;
+export default Dd;

package/esm/components/definition-list/dd.component.js

@@ -1,7 +1,6 @@
 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 "@styled-system/prop-types";
 import PropTypes from "prop-types";
 import { StyledDd } from "./definition-list.style";
 
@@ -17,9 +16,315 @@ const Dd = ({
   }, rest), children);
 };
 
-Dd.propTypes = { ...propTypes.space,
-
-  /** Prop to render string or node in the `<Dd></Dd>` tags */
-  children: PropTypes.node.isRequired
+Dd.propTypes = {
+  "children": PropTypes.node,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
 export default Dd;

package/esm/components/definition-list/definition-list.style.d.ts

@@ -0,0 +1,22 @@
+export interface StyledDlProps {
+    /** Render the DefinitionList as a single column */
+    asSingleColumn?: boolean;
+    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+        by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+     */
+    w?: number;
+}
+export declare type ElementAlignment = "left" | "center" | "right";
+export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, StyledDlProps, never>;
+export interface StyledDtDivProps {
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+}
+export declare const StyledDtDiv: import("styled-components").StyledComponent<"div", any, StyledDtDivProps, never>;
+export interface StyledDdDivProps {
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
+}
+export declare const StyledDdDiv: import("styled-components").StyledComponent<"div", any, StyledDdDivProps, never>;
+export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
+export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;

package/esm/components/definition-list/definition-list.style.js

@@ -7,14 +7,13 @@ export const StyledDl = styled.dl`
   ${space}
 
   ${({
-  asSingleColumn
+  asSingleColumn,
+  w
 }) => css`
     ${!asSingleColumn && css`
       display: grid;
       grid-template-rows: auto;
-      grid-template-columns: ${({
-  w
-}) => `${w}% auto;`};
+      grid-template-columns: ${w}% auto;
     `}
     ${asSingleColumn && css`
       line-height: 21px;

package/esm/components/definition-list/dl.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
+export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+    /** prop to render children. */
+    children: React.ReactNode;
+}
+declare const Dl: ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps) => JSX.Element;
+export default Dl;