carbon-react 125.12.1 → 125.13.0

package/esm/components/date/__internal__/date-picker/date-picker.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, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import DayPicker from "react-day-picker";
 import { flip, offset } from "@floating-ui/dom";
@@ -98,11 +98,16 @@ export const DatePicker = ({
       onDayClick?.(date, ev);
     }
   };
-  const handleOnKeyDown = ev => {
-    if (Events.isEscKey(ev)) {
+  const handleKeyUp = useCallback(ev => {
+    /* istanbul ignore else */
+    if (open && Events.isEscKey(ev)) {
       inputElement.current?.querySelector("input")?.focus();
       setOpen(false);
+      ev.stopPropagation();
     }
+  }, [inputElement, open, setOpen]);
+  const handleOnKeyDown = ev => {
+    /* istanbul ignore else */
     if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
@@ -145,6 +150,7 @@ export const DatePicker = ({
   }, /*#__PURE__*/React.createElement(StyledDayPicker, {
     ref: ref,
     onMouseDown: pickerMouseDown,
+    onKeyUp: handleKeyUp,
     onKeyDown: handleOnKeyDown
   }, /*#__PURE__*/React.createElement("div", {
     id: pickerTabGuardId

package/esm/components/date/date.component.js

@@ -180,13 +180,17 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
       onFocus(ev);
     }
   };
+  const handleKeyUp = useCallback(ev => {
+    /* istanbul ignore else */
+    if (open && Events.isEscKey(ev)) {
+      setOpen(false);
+      ev.stopPropagation();
+    }
+  }, [open]);
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
     }
-    if (Events.isEscKey(ev)) {
-      setOpen(false);
-    }
     if (open && Events.isTabKey(ev)) {
       if (Events.isShiftKey(ev)) {
         setOpen(false);
@@ -288,6 +292,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     onChange: handleChange,
     onClick: handleClick,
     onFocus: handleFocus,
+    onKeyUp: handleKeyUp,
     onKeyDown: handleKeyDown,
     iconOnClick: handleClick,
     onMouseDown: handleMouseDown,

package/esm/components/portal/portal.d.ts

@@ -12,6 +12,12 @@ export interface PortalProps {
     id?: string;
     /** Callback function triggered when parent element is scrolled or window resized. */
     onReposition?: () => void;
+    /** A flag to ensure the portal content will remain interactive with by both mouse
+     * users and screenreader users, even if a modal is opened outside of or on top of
+     * the portal.
+     * To be used with caution.
+     */
+    inertOptOut?: boolean;
 }
-declare const Portal: ({ children, className, id, onReposition }: PortalProps) => React.JSX.Element;
+declare const Portal: ({ children, className, id, onReposition, inertOptOut, }: PortalProps) => React.JSX.Element;
 export default Portal;

package/esm/components/portal/portal.js

@@ -1,14 +1,26 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
+import styled, { css } from "styled-components";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import StyledPortalEntrance from "./portal.style";
 export const PortalContext = /*#__PURE__*/React.createContext({});
+const Container = styled.div`
+  ${({
+  theme
+}) => css`
+     {
+      position: relative;
+      z-index: ${theme.zIndex.aboveAll};
+    }
+  `}
+`;
 const Portal = ({
   children,
   className,
   id,
-  onReposition
+  onReposition,
+  inertOptOut
 }) => {
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
@@ -51,6 +63,9 @@ const Portal = ({
       if (id !== undefined) {
         node.setAttribute("id", id);
       }
+      if (inertOptOut) {
+        node.setAttribute("data-not-inert", "true");
+      }
       setPortalNode(node);
       let mainNode = document.body;
       const rootDiv = document.getElementById("root");
@@ -64,8 +79,9 @@ const Portal = ({
     }
     return node;
   };
+  const portalContent = inertOptOut ? /*#__PURE__*/React.createElement(Container, null, children) : children;
   return /*#__PURE__*/React.createElement(StyledPortalEntrance, {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children), getPortalContainer()));
+  }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, portalContent), getPortalContainer()));
 };
 export default Portal;

package/esm/components/toast/toast.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
-declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;

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

@@ -8,6 +8,10 @@ export default function useModalAria(containerRef) {
   useEffect(() => {
     const originalValues = [];
     const hideNonTopModalElements = rootElement => {
+      if (rootElement.dataset.notInert === "true") {
+        // stop recursing, and do nothing, if the container has the "data-not-inert" flag
+        return;
+      }
       if (!rootElement.contains(topModal)) {
         originalValues.push({
           element: rootElement,
@@ -17,13 +21,18 @@ export default function useModalAria(containerRef) {
         // need to manually call the blur event on any currently-focused element that might be inside the element
         // we're making inert, since Firefox fails to do this, which can result in the focus styles remaining on
         // an input that is no longer focused
-        if (rootElement.contains(document.activeElement)) {
-          document.activeElement?.blur();
+        if (rootElement.contains(document.activeElement) && document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
         }
         rootElement.setAttribute("aria-hidden", "true");
         rootElement.setAttribute("inert", "");
       } else if (rootElement !== topModal) {
-        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+        Array.from(rootElement.children).forEach(node => {
+          // istanbul ignore else
+          if (node instanceof HTMLElement) {
+            hideNonTopModalElements(node);
+          }
+        });
       }
     };
     if (isTopModal) {

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -106,11 +106,16 @@ const DatePicker = ({
       onDayClick?.(date, ev);
     }
   };
-  const handleOnKeyDown = ev => {
-    if (_events.default.isEscKey(ev)) {
+  const handleKeyUp = (0, _react.useCallback)(ev => {
+    /* istanbul ignore else */
+    if (open && _events.default.isEscKey(ev)) {
       inputElement.current?.querySelector("input")?.focus();
       setOpen(false);
+      ev.stopPropagation();
     }
+  }, [inputElement, open, setOpen]);
+  const handleOnKeyDown = ev => {
+    /* istanbul ignore else */
     if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && _events.default.isTabKey(ev) && _events.default.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
@@ -153,6 +158,7 @@ const DatePicker = ({
   }, /*#__PURE__*/_react.default.createElement(_dayPicker.default, {
     ref: ref,
     onMouseDown: pickerMouseDown,
+    onKeyUp: handleKeyUp,
     onKeyDown: handleOnKeyDown
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: pickerTabGuardId

package/lib/components/date/date.component.js

@@ -189,13 +189,17 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
       onFocus(ev);
     }
   };
+  const handleKeyUp = (0, _react.useCallback)(ev => {
+    /* istanbul ignore else */
+    if (open && _events.default.isEscKey(ev)) {
+      setOpen(false);
+      ev.stopPropagation();
+    }
+  }, [open]);
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
     }
-    if (_events.default.isEscKey(ev)) {
-      setOpen(false);
-    }
     if (open && _events.default.isTabKey(ev)) {
       if (_events.default.isShiftKey(ev)) {
         setOpen(false);
@@ -297,6 +301,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     onChange: handleChange,
     onClick: handleClick,
     onFocus: handleFocus,
+    onKeyUp: handleKeyUp,
     onKeyDown: handleKeyDown,
     iconOnClick: handleClick,
     onMouseDown: handleMouseDown,

package/lib/components/portal/portal.d.ts

@@ -12,6 +12,12 @@ export interface PortalProps {
     id?: string;
     /** Callback function triggered when parent element is scrolled or window resized. */
     onReposition?: () => void;
+    /** A flag to ensure the portal content will remain interactive with by both mouse
+     * users and screenreader users, even if a modal is opened outside of or on top of
+     * the portal.
+     * To be used with caution.
+     */
+    inertOptOut?: boolean;
 }
-declare const Portal: ({ children, className, id, onReposition }: PortalProps) => React.JSX.Element;
+declare const Portal: ({ children, className, id, onReposition, inertOptOut, }: PortalProps) => React.JSX.Element;
 export default Portal;

package/lib/components/portal/portal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.PortalContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 var _portal = _interopRequireDefault(require("./portal.style"));
@@ -13,11 +14,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PortalContext = exports.PortalContext = /*#__PURE__*/_react.default.createContext({});
+const Container = _styledComponents.default.div`
+  ${({
+  theme
+}) => (0, _styledComponents.css)`
+     {
+      position: relative;
+      z-index: ${theme.zIndex.aboveAll};
+    }
+  `}
+`;
 const Portal = ({
   children,
   className,
   id,
-  onReposition
+  onReposition,
+  inertOptOut
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
@@ -60,6 +72,9 @@ const Portal = ({
       if (id !== undefined) {
         node.setAttribute("id", id);
       }
+      if (inertOptOut) {
+        node.setAttribute("data-not-inert", "true");
+      }
       setPortalNode(node);
       let mainNode = document.body;
       const rootDiv = document.getElementById("root");
@@ -73,8 +88,9 @@ const Portal = ({
     }
     return node;
   };
+  const portalContent = inertOptOut ? /*#__PURE__*/_react.default.createElement(Container, null, children) : children;
   return /*#__PURE__*/_react.default.createElement(_portal.default, {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));
+  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, portalContent), getPortalContainer()));
 };
 var _default = exports.default = Portal;

package/lib/components/toast/toast.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
-declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;

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

@@ -15,6 +15,10 @@ function useModalAria(containerRef) {
   (0, _react.useEffect)(() => {
     const originalValues = [];
     const hideNonTopModalElements = rootElement => {
+      if (rootElement.dataset.notInert === "true") {
+        // stop recursing, and do nothing, if the container has the "data-not-inert" flag
+        return;
+      }
       if (!rootElement.contains(topModal)) {
         originalValues.push({
           element: rootElement,
@@ -24,13 +28,18 @@ function useModalAria(containerRef) {
         // need to manually call the blur event on any currently-focused element that might be inside the element
         // we're making inert, since Firefox fails to do this, which can result in the focus styles remaining on
         // an input that is no longer focused
-        if (rootElement.contains(document.activeElement)) {
-          document.activeElement?.blur();
+        if (rootElement.contains(document.activeElement) && document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
         }
         rootElement.setAttribute("aria-hidden", "true");
         rootElement.setAttribute("inert", "");
       } else if (rootElement !== topModal) {
-        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+        Array.from(rootElement.children).forEach(node => {
+          // istanbul ignore else
+          if (node instanceof HTMLElement) {
+            hideNonTopModalElements(node);
+          }
+        });
       }
     };
     if (isTopModal) {

package/package.json

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