carbon-react 123.7.0 → 123.7.1

package/esm/components/popover-container/popover-container.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, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
@@ -9,6 +9,7 @@ import Popover from "../../__internal__/popover";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
+import Events from "../../__internal__/utils/helpers/events";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -80,6 +81,23 @@ export const PopoverContainer = ({
   useEffect(() => {
     if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
   }, [isOpen]);
+  const closePopover = useCallback(ev => {
+    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (onClose) onClose(ev);
+    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+  }, [isControlled, isOpen, onClose]);
+  const handleEscKey = useCallback(ev => {
+    const eventIsFromSelectInput = Events.composedPath(ev).find(element => {
+      return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
+    });
+    if (!eventIsFromSelectInput && Events.isEscKey(ev)) closePopover(ev);
+  }, [closePopover]);
+  useEffect(() => {
+    document.addEventListener("keydown", handleEscKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscKey);
+    };
+  }, [handleEscKey]);
   const handleOpenButtonClick = e => {
     if (!isControlled) setIsOpenInternal(!isOpen);
 
@@ -89,9 +107,7 @@ export const PopoverContainer = ({
     } else if (onClose) onClose(e);
   };
   const handleCloseButtonClick = e => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
-    if (onClose) onClose(e);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    closePopover(e);
   };
   const renderOpenComponentProps = {
     tabIndex: isOpen ? -1 : 0,

package/lib/components/popover-container/popover-container.component.js

@@ -14,6 +14,7 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _utils = require("../../style/utils");
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 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; }
@@ -91,6 +92,23 @@ const PopoverContainer = ({
   (0, _react.useEffect)(() => {
     if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
   }, [isOpen]);
+  const closePopover = (0, _react.useCallback)(ev => {
+    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (onClose) onClose(ev);
+    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+  }, [isControlled, isOpen, onClose]);
+  const handleEscKey = (0, _react.useCallback)(ev => {
+    const eventIsFromSelectInput = _events.default.composedPath(ev).find(element => {
+      return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
+    });
+    if (!eventIsFromSelectInput && _events.default.isEscKey(ev)) closePopover(ev);
+  }, [closePopover]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("keydown", handleEscKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscKey);
+    };
+  }, [handleEscKey]);
   const handleOpenButtonClick = e => {
     if (!isControlled) setIsOpenInternal(!isOpen);
 
@@ -100,9 +118,7 @@ const PopoverContainer = ({
     } else if (onClose) onClose(e);
   };
   const handleCloseButtonClick = e => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
-    if (onClose) onClose(e);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    closePopover(e);
   };
   const renderOpenComponentProps = {
     tabIndex: isOpen ? -1 : 0,

package/package.json

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