carbon-react 126.3.0 → 126.3.1

package/esm/__internal__/popover/popover.component.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
 declare type CustomRefObject<T> = {
     current?: T | null;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     isOpen?: boolean;
     animationFrame?: boolean;
     popoverStrategy?: "absolute" | "fixed";
+    childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -18,7 +18,8 @@ const Popover = ({
   disableBackgroundUI,
   isOpen = true,
   animationFrame,
-  popoverStrategy = "absolute"
+  popoverStrategy = "absolute",
+  childRefOverride
 }) => {
   const elementDOM = useRef(null);
   const {
@@ -30,7 +31,7 @@ const Popover = ({
     elementDOM.current = document.createElement("div");
     mountNode.appendChild(elementDOM.current);
   }
-  const childRef = React.Children.only(children).ref;
+  const childRef = childRefOverride || React.Children.only(children).ref;
   const innerRef = useRef(null);
   const floatingReference = childRef || innerRef;
   let content;

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

@@ -13,6 +13,7 @@ import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener"
 import Events from "../../__internal__/utils/helpers/events";
 import FocusTrap from "../../__internal__/focus-trap";
 import { ModalContext } from "../modal";
+import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -22,18 +23,20 @@ export const renderOpen = ({
   id,
   "aria-expanded": ariaExpanded,
   "aria-haspopup": ariaHasPopup
-}) => /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
-  tabIndex: tabIndex,
-  onClick: onClick,
-  "data-element": dataElement,
-  ref: ref,
-  "aria-label": ariaLabel,
-  "aria-haspopup": ariaHasPopup,
-  "aria-expanded": ariaExpanded,
-  id: id
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "settings"
-}));
+}) => {
+  return /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
+    tabIndex: tabIndex,
+    onClick: onClick,
+    "data-element": dataElement,
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded,
+    id: id
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "settings"
+  }));
+};
 export const renderClose = ({
   "data-element": dataElement,
   tabIndex,
@@ -84,8 +87,12 @@ export const PopoverContainer = ({
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = useCallback(ev => {
-    if (!isControlled) setIsOpenInternal(false);
-    if (onClose) onClose(ev);
+    if (!isControlled) {
+      setIsOpenInternal(false);
+    }
+    if (onClose) {
+      onClose(ev);
+    }
     if (isOpen && openButtonRef.current) {
       openButtonRef.current.focus();
     }
@@ -115,6 +122,7 @@ export const PopoverContainer = ({
   const handleCloseButtonClick = e => {
     closePopover(e);
   };
+  useFocusPortalContent(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -139,25 +147,7 @@ export const PopoverContainer = ({
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-  const popover = /*#__PURE__*/React.createElement(Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 300
-    },
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    nodeRef: popoverContentNodeRef,
-    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
-    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
-    disablePortal: true,
-    reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
+  const popover = state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
@@ -171,19 +161,39 @@ export const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
+  }, title), renderCloseComponent(renderCloseComponentProps)), children);
+  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover)) : popover);
+  }, popover(state))) : popover(state);
+  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
+    "data-component": "popover-container",
+    onMouseDown: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: popoverReference
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
+    in: isOpen,
+    timeout: {
+      exit: 300
+    },
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef,
+    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
+    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
+  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+    reference: popoverReference,
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
+  }, shouldCoverButton && {
+    middleware: popoverMiddleware
+  }, {
+    childRefOverride: popoverContentNodeRef
+  }), childrenToRender(state))));
 };
 export default PopoverContainer;

package/esm/components/step-sequence/step-sequence.component.js

@@ -1,15 +1,21 @@
 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 from "react";
 import PropTypes from "prop-types";
+import Logger from "../../__internal__/utils/logger";
 import StyledStepSequence from "./step-sequence.style";
 export const StepSequenceContext = /*#__PURE__*/React.createContext({
   orientation: "horizontal"
 });
+let deprecateWarnTriggered = false;
 export const StepSequence = ({
   children,
   orientation = "horizontal",
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The `StepSequence` component is deprecated and will soon be removed," + " please use the `StepFlow` component instead.");
+  }
   return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
     "data-component": "step-sequence",
     orientation: orientation,

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const _default: (container?: RefObject<HTMLElement>, target?: RefObject<HTMLElement>, focusCallback?: ((ev: KeyboardEvent) => void) | undefined) => void;
+export default _default;

package/esm/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import Events from "../../../__internal__/utils/helpers/events";
+import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
+export default ((container, target, focusCallback) => {
+  useEffect(() => {
+    const handleFocusPortalContent = ev => {
+      if (container?.current && target?.current) {
+        const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        if (target?.current === document.activeElement) {
+          if (Events.isTabKey(ev) && !Events.isShiftKey(ev) && focusableElementsInContainer[0]) {
+            ev.preventDefault();
+            focusableElementsInContainer[0]?.focus();
+          }
+          return;
+        }
+
+        /* istanbul ignore if */
+        if (!focusableElementsInContainer.length) {
+          return;
+        }
+        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
+        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        if (Events.isTabKey(ev)) {
+          // last element focused inside portal navigate to next element in DOM after the target/ trigger element
+          if (lastElementFocused && !Events.isShiftKey(ev)) {
+            ev.preventDefault();
+            const allFocusableElements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+            const filteredElements = allFocusableElements.filter(el => el === target.current || Number(el.tabIndex) !== -1);
+            const nextIndex = filteredElements.indexOf(target.current) + 1;
+            focusCallback?.(ev);
+            filteredElements[nextIndex]?.focus();
+            return;
+          }
+          // first element focused inside portal navigate back to the target/ trigger element
+          if (firstElementFocused && Events.isShiftKey(ev)) {
+            ev.preventDefault();
+            focusCallback?.(ev);
+
+            /* istanbul ignore else */
+            if (target.current !== document.activeElement) {
+              target.current?.focus();
+            }
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleFocusPortalContent);
+    return () => {
+      document.removeEventListener("keydown", handleFocusPortalContent);
+    };
+  }, [target, container, focusCallback]);
+});

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
 declare type CustomRefObject<T> = {
     current?: T | null;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     isOpen?: boolean;
     animationFrame?: boolean;
     popoverStrategy?: "absolute" | "fixed";
+    childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/lib/__internal__/popover/popover.component.js

@@ -27,7 +27,8 @@ const Popover = ({
   disableBackgroundUI,
   isOpen = true,
   animationFrame,
-  popoverStrategy = "absolute"
+  popoverStrategy = "absolute",
+  childRefOverride
 }) => {
   const elementDOM = (0, _react.useRef)(null);
   const {
@@ -39,7 +40,7 @@ const Popover = ({
     elementDOM.current = document.createElement("div");
     mountNode.appendChild(elementDOM.current);
   }
-  const childRef = _react.default.Children.only(children).ref;
+  const childRef = childRefOverride || _react.default.Children.only(children).ref;
   const innerRef = (0, _react.useRef)(null);
   const floatingReference = childRef || innerRef;
   let content;

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

@@ -18,6 +18,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _modal = require("../modal");
+var _useFocusPortalContent = _interopRequireDefault(require("../../hooks/__internal__/useFocusPortalContent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -31,18 +32,20 @@ const renderOpen = ({
   id,
   "aria-expanded": ariaExpanded,
   "aria-haspopup": ariaHasPopup
-}) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
-  tabIndex: tabIndex,
-  onClick: onClick,
-  "data-element": dataElement,
-  ref: ref,
-  "aria-label": ariaLabel,
-  "aria-haspopup": ariaHasPopup,
-  "aria-expanded": ariaExpanded,
-  id: id
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "settings"
-}));
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
+    tabIndex: tabIndex,
+    onClick: onClick,
+    "data-element": dataElement,
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "settings"
+  }));
+};
 exports.renderOpen = renderOpen;
 const renderClose = ({
   "data-element": dataElement,
@@ -95,8 +98,12 @@ const PopoverContainer = ({
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsOpenInternal(false);
-    if (onClose) onClose(ev);
+    if (!isControlled) {
+      setIsOpenInternal(false);
+    }
+    if (onClose) {
+      onClose(ev);
+    }
     if (isOpen && openButtonRef.current) {
       openButtonRef.current.focus();
     }
@@ -126,6 +133,7 @@ const PopoverContainer = ({
   const handleCloseButtonClick = e => {
     closePopover(e);
   };
+  (0, _useFocusPortalContent.default)(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -150,25 +158,7 @@ const PopoverContainer = ({
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
-  const popover = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 300
-    },
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    nodeRef: popoverContentNodeRef,
-    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
-    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
-    disablePortal: true,
-    reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
+  const popover = state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
@@ -182,20 +172,40 @@ const PopoverContainer = ({
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.ModalContext.Provider, {
+  }, title), renderCloseComponent(renderCloseComponentProps)), children);
+  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.ModalContext.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover)) : popover);
+  }, popover(state))) : popover(state);
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+    "data-component": "popover-container",
+    onMouseDown: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: popoverReference
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    in: isOpen,
+    timeout: {
+      exit: 300
+    },
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef,
+    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
+    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
+  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+    reference: popoverReference,
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
+  }, shouldCoverButton && {
+    middleware: popoverMiddleware
+  }, {
+    childRefOverride: popoverContentNodeRef
+  }), childrenToRender(state))));
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

package/lib/components/step-sequence/step-sequence.component.js

@@ -6,17 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StepSequenceContext = exports.StepSequence = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _stepSequence = _interopRequireDefault(require("./step-sequence.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const StepSequenceContext = exports.StepSequenceContext = /*#__PURE__*/_react.default.createContext({
   orientation: "horizontal"
 });
+let deprecateWarnTriggered = false;
 const StepSequence = ({
   children,
   orientation = "horizontal",
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    _logger.default.deprecate("The `StepSequence` component is deprecated and will soon be removed," + " please use the `StepFlow` component instead.");
+  }
   return /*#__PURE__*/_react.default.createElement(_stepSequence.default, _extends({
     "data-component": "step-sequence",
     orientation: orientation,

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

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

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

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

package/lib/hooks/__internal__/useFocusPortalContent/package.json

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

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

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const _default: (container?: RefObject<HTMLElement>, target?: RefObject<HTMLElement>, focusCallback?: ((ev: KeyboardEvent) => void) | undefined) => void;
+export default _default;

package/lib/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = (container, target, focusCallback) => {
+  (0, _react.useEffect)(() => {
+    const handleFocusPortalContent = ev => {
+      if (container?.current && target?.current) {
+        const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        if (target?.current === document.activeElement) {
+          if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && focusableElementsInContainer[0]) {
+            ev.preventDefault();
+            focusableElementsInContainer[0]?.focus();
+          }
+          return;
+        }
+
+        /* istanbul ignore if */
+        if (!focusableElementsInContainer.length) {
+          return;
+        }
+        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
+        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        if (_events.default.isTabKey(ev)) {
+          // last element focused inside portal navigate to next element in DOM after the target/ trigger element
+          if (lastElementFocused && !_events.default.isShiftKey(ev)) {
+            ev.preventDefault();
+            const allFocusableElements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+            const filteredElements = allFocusableElements.filter(el => el === target.current || Number(el.tabIndex) !== -1);
+            const nextIndex = filteredElements.indexOf(target.current) + 1;
+            focusCallback?.(ev);
+            filteredElements[nextIndex]?.focus();
+            return;
+          }
+          // first element focused inside portal navigate back to the target/ trigger element
+          if (firstElementFocused && _events.default.isShiftKey(ev)) {
+            ev.preventDefault();
+            focusCallback?.(ev);
+
+            /* istanbul ignore else */
+            if (target.current !== document.activeElement) {
+              target.current?.focus();
+            }
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleFocusPortalContent);
+    return () => {
+      document.removeEventListener("keydown", handleFocusPortalContent);
+    };
+  }, [target, container, focusCallback]);
+};
+exports.default = _default;

package/package.json

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