carbon-react 119.7.0 → 119.7.1

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useRef, useEffect, useLayoutEffect, useCallback, useContext } from "react";
+import React, { useRef, useEffect, useLayoutEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -12,7 +12,7 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export const Dialog = _ref => {
   let {
@@ -49,9 +49,7 @@ export const Dialog = _ref => {
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(dialogRef);
   const centerDialog = useCallback(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -162,7 +160,7 @@ export const Dialog = _ref => {
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
-    "aria-modal": topModal?.contains(dialogRef.current) ? true : undefined,
+    "aria-modal": isTopModal ? true : undefined,
     ref: dialogRef,
     topMargin: TOP_MARGIN
   }, dialogProps, {

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useRef, useContext } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -12,7 +12,7 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 export const DialogFullScreen = _ref => {
   let {
     "aria-describedby": ariaDescribedBy,
@@ -48,9 +48,7 @@ export const DialogFullScreen = _ref => {
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -96,7 +94,7 @@ export const DialogFullScreen = _ref => {
     additionalWrapperRefs: focusableContainers,
     focusableSelectors: focusableSelectors
   }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
-    "aria-modal": role === "dialog" && topModal?.contains(dialogRef.current) ? true : undefined
+    "aria-modal": role === "dialog" && isTopModal ? true : undefined
   }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback, useContext, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import Modal from "../modal";
 import StyledSidebar from "./sidebar.style";
@@ -12,7 +12,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 
 // TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
 
@@ -52,9 +52,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(sidebarRef);
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -71,7 +69,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "data-role": rest["data-role"]
   };
   const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
-    "aria-modal": !enableBackgroundUI && topModal?.contains(sidebarRef.current),
+    "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,

package/esm/components/toast/toast.component.js

@@ -58,8 +58,11 @@ const Toast = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useEffect(() => {
     if (!disableAutoFocus) {
       if (open) {
-        focusedElementBeforeOpening.current = document.activeElement;
-        toastContentNodeRef.current?.focus();
+        // setTimeout needed as otherwise this runs before the ref is populated
+        setTimeout(() => {
+          focusedElementBeforeOpening.current = document.activeElement;
+          toastContentNodeRef.current?.focus();
+        }, 0);
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = null;

package/esm/hooks/__internal__/useModalAria/index.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;

package/esm/hooks/__internal__/useModalAria/useModalAria.js

@@ -0,0 +1,45 @@
+import { useContext, useEffect } from "react";
+import TopModalContext from "../../../components/carbon-provider/top-modal-context";
+export default function useModalAria(containerRef) {
+  const {
+    topModal
+  } = useContext(TopModalContext);
+  const isTopModal = topModal?.contains(containerRef.current);
+  useEffect(() => {
+    const originalValues = [];
+    const hideNonTopModalElements = rootElement => {
+      if (!rootElement.contains(topModal)) {
+        originalValues.push({
+          element: rootElement,
+          "aria-hidden": rootElement.getAttribute("aria-hidden"),
+          inert: rootElement.getAttribute("inert")
+        });
+        rootElement.setAttribute("aria-hidden", "true");
+        rootElement.setAttribute("inert", "");
+      } else if (rootElement !== topModal) {
+        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+      }
+    };
+    if (isTopModal) {
+      hideNonTopModalElements(document.body);
+    }
+    return () => originalValues.forEach(_ref => {
+      let {
+        element,
+        "aria-hidden": ariaHidden,
+        inert
+      } = _ref;
+      if (ariaHidden === null) {
+        element.removeAttribute("aria-hidden");
+      } else {
+        element.setAttribute("aria-hidden", ariaHidden);
+      }
+      if (inert === null) {
+        element.removeAttribute("inert");
+      } else {
+        element.setAttribute("inert", inert);
+      }
+    });
+  }, [topModal, isTopModal]);
+  return isTopModal;
+}

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

@@ -17,7 +17,7 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -58,9 +58,7 @@ const Dialog = _ref => {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(dialogRef);
   const centerDialog = (0, _react.useCallback)(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -171,7 +169,7 @@ const Dialog = _ref => {
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
-    "aria-modal": topModal?.contains(dialogRef.current) ? true : undefined,
+    "aria-modal": isTopModal ? true : undefined,
     ref: dialogRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {

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

@@ -17,7 +17,7 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -57,9 +57,7 @@ const DialogFullScreen = _ref => {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -105,7 +103,7 @@ const DialogFullScreen = _ref => {
     additionalWrapperRefs: focusableContainers,
     focusableSelectors: focusableSelectors
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
-    "aria-modal": role === "dialog" && topModal?.contains(dialogRef.current) ? true : undefined
+    "aria-modal": role === "dialog" && isTopModal ? true : undefined
   }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",

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

@@ -17,7 +17,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _utils = require("../../style/utils");
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -61,9 +61,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(sidebarRef);
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -80,7 +78,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "data-role": rest["data-role"]
   };
   const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, _extends({
-    "aria-modal": !enableBackgroundUI && topModal?.contains(sidebarRef.current),
+    "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,

package/lib/components/toast/toast.component.js

@@ -67,8 +67,11 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   (0, _react.useEffect)(() => {
     if (!disableAutoFocus) {
       if (open) {
-        focusedElementBeforeOpening.current = document.activeElement;
-        toastContentNodeRef.current?.focus();
+        // setTimeout needed as otherwise this runs before the ref is populated
+        setTimeout(() => {
+          focusedElementBeforeOpening.current = document.activeElement;
+          toastContentNodeRef.current?.focus();
+        }, 0);
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = null;

package/lib/hooks/__internal__/useModalAria/index.d.ts

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

package/lib/hooks/__internal__/useModalAria/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useModalAria.default;
+  }
+});
+var _useModalAria = _interopRequireDefault(require("./useModalAria"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useModalAria/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useModalAria/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useModalAria/useModalAria.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;

package/lib/hooks/__internal__/useModalAria/useModalAria.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useModalAria;
+var _react = require("react");
+var _topModalContext = _interopRequireDefault(require("../../../components/carbon-provider/top-modal-context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useModalAria(containerRef) {
+  const {
+    topModal
+  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = topModal?.contains(containerRef.current);
+  (0, _react.useEffect)(() => {
+    const originalValues = [];
+    const hideNonTopModalElements = rootElement => {
+      if (!rootElement.contains(topModal)) {
+        originalValues.push({
+          element: rootElement,
+          "aria-hidden": rootElement.getAttribute("aria-hidden"),
+          inert: rootElement.getAttribute("inert")
+        });
+        rootElement.setAttribute("aria-hidden", "true");
+        rootElement.setAttribute("inert", "");
+      } else if (rootElement !== topModal) {
+        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+      }
+    };
+    if (isTopModal) {
+      hideNonTopModalElements(document.body);
+    }
+    return () => originalValues.forEach(_ref => {
+      let {
+        element,
+        "aria-hidden": ariaHidden,
+        inert
+      } = _ref;
+      if (ariaHidden === null) {
+        element.removeAttribute("aria-hidden");
+      } else {
+        element.setAttribute("aria-hidden", ariaHidden);
+      }
+      if (inert === null) {
+        element.removeAttribute("inert");
+      } else {
+        element.setAttribute("inert", inert);
+      }
+    });
+  }, [topModal, isTopModal]);
+  return isTopModal;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.7.0",
+  "version": "119.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",