carbon-react 110.0.1 → 110.0.4

package/esm/components/profile/profile.style.js

@@ -7,12 +7,12 @@ const ProfileNameStyle = styled.span`
   font-weight: bold;
   display: block;
   font-size: ${({
-  size
+  size = "M"
 }) => profileConfigSizes[size].nameSize};
 `;
 const ProfileEmailStyle = styled.span`
   font-size: ${({
-  size
+  size = "M"
 }) => profileConfigSizes[size].emailSize};
 `;
 const ProfileStyle = styled.div`
@@ -29,13 +29,13 @@ const ProfileDetailsStyle = styled.div`
   display: inline-block;
   margin-top: ${({
   hasSrc,
-  size
+  size = "M"
 }) => hasSrc ? profileConfigSizes[size].marginTop : ""};
   line-height: ${({
-  size
+  size = "M"
 }) => profileConfigSizes[size].lineHeight};
   margin-left: ${({
-  size
+  size = "M"
 }) => profileConfigSizes[size].marginLeft};
 `;
 const ProfileAvatarStyle = styled(Portrait)`
@@ -44,13 +44,4 @@ const ProfileAvatarStyle = styled(Portrait)`
 ProfileStyle.defaultProps = {
   theme: baseTheme
 };
-ProfileNameStyle.defaultProps = {
-  size: "M"
-};
-ProfileEmailStyle.defaultProps = {
-  size: "M"
-};
-ProfileDetailsStyle.defaultProps = {
-  size: "M"
-};
 export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle };

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

@@ -33,7 +33,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: titleId
   } = useRef(createGuid());
-  let sidebarRef = useRef();
+  let sidebarRef = useRef(null);
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {

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

@@ -3,6 +3,11 @@ 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`
+  // prevents outline being added in safari
+  :focus {
+    outline: none;
+  }
+
   ${({
   onCancel,
   position,

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