carbon-react 110.0.3 → 110.1.1

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/components/definition-list/definition-list.style.js

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import StyledButton from "../button/button.style";
-import { StyledLink } from "../link/link.style";
 import { baseTheme } from "../../style/themes";
 export const StyledDl = styled.dl`
   ${space}
@@ -64,13 +63,5 @@ export const StyledDd = styled.dd`
     padding: 0;
     border: none;
   }
-
-  ${StyledLink} {
-    a,
-    button {
-      font-weight: 700px;
-      text-decoration: none;
-    }
-  }
   ${space}
 `;

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

@@ -35,9 +35,9 @@ const Dialog = ({
   ...rest
 }) => {
   const locale = useLocale();
-  const dialogRef = useRef();
-  const innerContentRef = useRef();
-  const titleRef = useRef();
+  const dialogRef = useRef(null);
+  const innerContentRef = useRef(null);
+  const titleRef = useRef(null);
   const listenersAdded = useRef(false);
   const {
     current: titleId

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -36,8 +36,8 @@ const DialogFullScreen = ({
   ...rest
 }) => {
   const locale = useLocale();
-  const dialogRef = useRef();
-  const headingRef = useRef();
+  const dialogRef = useRef(null);
+  const headingRef = useRef(null);
   const {
     current: titleId
   } = useRef(createGuid());

package/esm/components/dialog-full-screen/dialog-full-screen.style.js

@@ -6,6 +6,10 @@ import StyledFullScreenHeading from "../../__internal__/full-screen-heading/full
 import { StyledHeader, StyledHeaderContent, StyledHeading } from "../heading/heading.style";
 import { StyledForm } from "../form/form.style";
 const StyledDialogFullScreen = styled.div`
+  :focus {
+    outline: none;
+  }
+
   background-color: var(--colorsUtilityMajor025);
   height: 100%;
   left: 0;

package/esm/components/sidebar/sidebar.component.js

@@ -2,27 +2,29 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Modal from "../modal";
-import SidebarStyle from "./sidebar.style";
+import StyledSidebar from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
 import Box from "../box";
-import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
-  disableEscKey,
-  enableBackgroundUI,
+  disableEscKey = false,
+  enableBackgroundUI = false,
   header,
-  position,
-  size,
+  position = "right",
+  size = "medium",
   children,
   onCancel,
   role = "dialog",
@@ -33,7 +35,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: titleId
   } = useRef(createGuid());
-  let sidebarRef = useRef();
+  let sidebarRef = useRef(null);
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
@@ -52,7 +54,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": rest["data-element"],
     "data-role": rest["data-role"]
   };
-  const sidebar = /*#__PURE__*/React.createElement(SidebarStyle, {
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -65,14 +67,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     role: role
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: titleId
-  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, {
+  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
-    p: 4,
-    pt: "27px",
+    pt: "var(--spacing300)",
+    pb: "var(--spacing400)",
+    px: "var(--spacing400)"
+  }, filterStyledSystemPaddingProps(rest), {
     scrollVariant: "light",
     overflow: "auto",
     flex: "1"
-  }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+  }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }
@@ -90,6 +94,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   }, sidebar));
 });
 Sidebar.propTypes = {
+  /** Styled system padding props to apply to Sidebar content */
+  ...paddingPropTypes,
+
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
 
@@ -115,10 +122,10 @@ Sidebar.propTypes = {
   enableBackgroundUI: PropTypes.bool,
 
   /** Sets the position of sidebar, either left or right. */
-  position: PropTypes.oneOf(SIDEBAR_ALIGNMENTS),
+  position: PropTypes.oneOf(["left", "right"]),
 
   /** Sets the size of the sidebar when open. */
-  size: PropTypes.oneOf(SIDEBAR_SIZES),
+  size: PropTypes.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
 
   /** Node that will be used as sidebar header. */
   header: PropTypes.node,
@@ -131,9 +138,4 @@ Sidebar.propTypes = {
     current: PropTypes.any
   }))
 };
-Sidebar.defaultProps = {
-  position: "right",
-  size: "medium",
-  enableBackgroundUI: false
-};
 export default Sidebar;

package/esm/components/sidebar/sidebar.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PaddingProps } from "styled-system";
 
 export interface SidebarContextProps {
   isInSidebar: boolean;
 }
-export interface SidebarProps {
+export interface SidebarProps extends PaddingProps {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby"?: string;
   /**

package/esm/components/sidebar/sidebar.style.js

@@ -2,7 +2,12 @@ import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
-const SidebarStyle = styled.div`
+const StyledSidebar = styled.div`
+  // prevents outline being added in safari
+  :focus {
+    outline: none;
+  }
+
   ${({
   onCancel,
   position,
@@ -37,7 +42,7 @@ const SidebarStyle = styled.div`
     `}
   `}
 `;
-SidebarStyle.defaultProps = {
+StyledSidebar.defaultProps = {
   theme: baseTheme
 };
-export default SidebarStyle;
+export default StyledSidebar;

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

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setElementFocus = setElementFocus;
-exports.getNextElement = exports.defaultFocusableSelectors = void 0;
+exports.setElementFocus = 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;
+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 = () => {
@@ -32,14 +31,7 @@ const waitForVisibleAndFocus = element => {
   check();
 };
 
-function setElementFocus(element) {
-  if (typeof element === "function") {
-    element();
-  } else {
-    const el = element.current || element;
-    waitForVisibleAndFocus(el);
-  }
-}
+exports.setElementFocus = setElementFocus;
 
 const isRadio = element => {
   return element.hasAttribute("type") && element.getAttribute("type") === "radio";

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

@@ -46,7 +46,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 = (0, _react.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 = (0, _react.useCallback)(() => {
     const elements = [];
     allRefs.forEach(ref => {
@@ -63,14 +64,18 @@ const FocusTrap = ({
   }, [hasNewInputs, allRefs]);
   (0, _react.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]);
   (0, _react.useLayoutEffect)(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
@@ -78,7 +83,8 @@ const FocusTrap = ({
   const prevShouldSetFocus = (0, _usePrevious.default)(shouldSetFocus);
   (0, _react.useEffect)(() => {
     if (shouldSetFocus && !prevShouldSetFocus) {
-      (0, _focusTrapUtils.setElementFocus)(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+      const candidateFirstElement = focusFirstElement && "current" in focusFirstElement ? focusFirstElement.current : focusFirstElement;
+      (0, _focusTrapUtils.setElementFocus)(candidateFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
   }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
@@ -88,19 +94,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 = (0, _focusTrapUtils.getNextElement)(firstElement, focusableElements, ev.shiftKey);
           } else {
             elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
@@ -116,9 +120,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 = (0, _react.useCallback)(() => {
@@ -170,7 +174,10 @@ const FocusTrap = ({
 
 
   const clonedChildren = _react.default.Children.map(children, child => {
-    return /*#__PURE__*/_react.default.cloneElement(child, focusProps(child.props.tabIndex === undefined));
+    var _focusableChild$props;
+
+    const focusableChild = child;
+    return /*#__PURE__*/_react.default.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.default.createElement("div", {
@@ -179,34 +186,43 @@ const FocusTrap = ({
 };
 
 FocusTrap.propTypes = {
-  children: _propTypes.default.node.isRequired,
-
-  /** flag to set focus automatically on first render */
-  autoFocus: _propTypes.default.bool,
-
-  /** provide a custom first element to focus */
-  focusFirstElement: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.any
+  "additionalWrapperRefs": _propTypes.default.arrayOf(_propTypes.default.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.default.bool,
+  "bespokeTrap": _propTypes.default.func,
+  "children": _propTypes.default.node,
+  "focusFirstElement": _propTypes.default.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.default.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.default.func,
-
-  /** a ref to the container wrapping the focusable elements */
-  wrapperRef: _propTypes.default.shape({
-    current: _propTypes.default.any
-  }),
-
-  /* whether the modal (etc.) component that the focus trap is inside is open or not */
-  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: []
+  "isOpen": _propTypes.default.bool,
+  "wrapperRef": _propTypes.default.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");
+      }
+    }
+  })
 };
 var _default = FocusTrap;
 exports.default = _default;

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

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

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

@@ -11,8 +11,6 @@ var _styledSystem = require("styled-system");
 
 var _button = _interopRequireDefault(require("../button/button.style"));
 
-var _link = require("../link/link.style");
-
 var _themes = require("../../style/themes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,14 +84,6 @@ const StyledDd = _styledComponents.default.dd`
     padding: 0;
     border: none;
   }
-
-  ${_link.StyledLink} {
-    a,
-    button {
-      font-weight: 700px;
-      text-decoration: none;
-    }
-  }
   ${_styledSystem.space}
 `;
 exports.StyledDd = StyledDd;

package/lib/components/dialog/dialog.component.js

@@ -59,9 +59,9 @@ const Dialog = ({
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
-  const dialogRef = (0, _react.useRef)();
-  const innerContentRef = (0, _react.useRef)();
-  const titleRef = (0, _react.useRef)();
+  const dialogRef = (0, _react.useRef)(null);
+  const innerContentRef = (0, _react.useRef)(null);
+  const titleRef = (0, _react.useRef)(null);
   const listenersAdded = (0, _react.useRef)(false);
   const {
     current: titleId

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -60,8 +60,8 @@ const DialogFullScreen = ({
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
-  const dialogRef = (0, _react.useRef)();
-  const headingRef = (0, _react.useRef)();
+  const dialogRef = (0, _react.useRef)(null);
+  const headingRef = (0, _react.useRef)(null);
   const {
     current: titleId
   } = (0, _react.useRef)((0, _guid.default)());

package/lib/components/dialog-full-screen/dialog-full-screen.style.js

@@ -26,6 +26,10 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 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 StyledDialogFullScreen = _styledComponents.default.div`
+  :focus {
+    outline: none;
+  }
+
   background-color: var(--colorsUtilityMajor025);
   height: 100%;
   left: 0;

package/lib/components/sidebar/sidebar.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar.style"));
@@ -23,12 +25,12 @@ var _sidebarHeader = _interopRequireDefault(require("./__internal__/sidebar-head
 
 var _box = _interopRequireDefault(require("../box"));
 
-var _sidebar2 = require("./sidebar.config");
-
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _utils = require("../../style/utils");
+
 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; }
@@ -37,6 +39,8 @@ 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 paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
+
 const SidebarContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.SidebarContext = SidebarContext;
@@ -46,11 +50,11 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
-  disableEscKey,
-  enableBackgroundUI,
+  disableEscKey = false,
+  enableBackgroundUI = false,
   header,
-  position,
-  size,
+  position = "right",
+  size = "medium",
   children,
   onCancel,
   role = "dialog",
@@ -61,7 +65,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   const {
     current: titleId
   } = (0, _react.useRef)((0, _guid.default)());
-  let sidebarRef = (0, _react.useRef)();
+  let sidebarRef = (0, _react.useRef)(null);
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
@@ -94,14 +98,16 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     role: role
   }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
     id: titleId
-  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",
-    p: 4,
-    pt: "27px",
+    pt: "var(--spacing300)",
+    pb: "var(--spacing400)",
+    px: "var(--spacing400)"
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
     scrollVariant: "light",
     overflow: "auto",
     flex: "1"
-  }, /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
+  }), /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }
@@ -121,6 +127,9 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 Sidebar.propTypes = {
+  /** Styled system padding props to apply to Sidebar content */
+  ...paddingPropTypes,
+
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": _propTypes.default.string,
 
@@ -146,10 +155,10 @@ Sidebar.propTypes = {
   enableBackgroundUI: _propTypes.default.bool,
 
   /** Sets the position of sidebar, either left or right. */
-  position: _propTypes.default.oneOf(_sidebar2.SIDEBAR_ALIGNMENTS),
+  position: _propTypes.default.oneOf(["left", "right"]),
 
   /** Sets the size of the sidebar when open. */
-  size: _propTypes.default.oneOf(_sidebar2.SIDEBAR_SIZES),
+  size: _propTypes.default.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
 
   /** Node that will be used as sidebar header. */
   header: _propTypes.default.node,
@@ -162,10 +171,5 @@ Sidebar.propTypes = {
     current: _propTypes.default.any
   }))
 };
-Sidebar.defaultProps = {
-  position: "right",
-  size: "medium",
-  enableBackgroundUI: false
-};
 var _default = Sidebar;
 exports.default = _default;

package/lib/components/sidebar/sidebar.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PaddingProps } from "styled-system";
 
 export interface SidebarContextProps {
   isInSidebar: boolean;
 }
-export interface SidebarProps {
+export interface SidebarProps extends PaddingProps {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby"?: string;
   /**

package/lib/components/sidebar/sidebar.style.js

@@ -19,7 +19,12 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 SidebarStyle = _styledComponents.default.div`
+const StyledSidebar = _styledComponents.default.div`
+  // prevents outline being added in safari
+  :focus {
+    outline: none;
+  }
+
   ${({
   onCancel,
   position,
@@ -54,8 +59,8 @@ const SidebarStyle = _styledComponents.default.div`
     `}
   `}
 `;
-SidebarStyle.defaultProps = {
+StyledSidebar.defaultProps = {
   theme: _base.default
 };
-var _default = SidebarStyle;
+var _default = StyledSidebar;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.0.3",
+  "version": "110.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {