carbon-react 110.0.3 → 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/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

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

@@ -61,7 +61,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 = () => {

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

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

package/package.json

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