carbon-react 125.1.0 → 125.2.1

package/esm/components/flat-table/flat-table.component.js

@@ -27,10 +27,12 @@ export const FlatTable = ({
 }) => {
   const wrapperRef = useRef(null);
   const tableRef = useRef(null);
+  const container = useRef(null);
   const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
+  const [focused, setFocused] = useState(false);
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -92,12 +94,12 @@ export const FlatTable = ({
   });
   const handleKeyDown = ev => {
     const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+    const focusableElementsArray = Array.from(focusableElements || /* istanbul ignore next */[]);
 
     /* istanbul ignore if */
-    if (!focusableElements) {
+    if (!focusableElementsArray.length) {
       return;
     }
-    const focusableElementsArray = Array.from(focusableElements);
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
     if (Events.isDownKey(ev)) {
       ev.preventDefault();
@@ -144,7 +146,6 @@ export const FlatTable = ({
     display: "flex",
     flexDirection: "column",
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-    tabIndex: 0,
     role: "region",
     overflowX: width ? "hidden" : undefined,
     width: width,
@@ -154,8 +155,17 @@ export const FlatTable = ({
     footer: !!footer,
     firstColRowSpanIndex: firstColRowSpanIndex,
     lastColRowSpanIndex: lastColRowSpanIndex,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    isFocused: focused
   }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+    ref: container,
+    onFocus: () => {
+      if (container.current === document.activeElement) {
+        setFocused(true);
+      }
+    },
+    onBlur: () => setFocused(false),
+    tabIndex: 0,
     overflowX: overflowX,
     width: width
   }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({

package/esm/components/flat-table/flat-table.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFoo
     hasVerticalScrollbar: boolean;
     lastColRowSpanIndex: number;
     firstColRowSpanIndex: number;
+    isFocused: boolean;
 }
 declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
 declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;

package/esm/components/flat-table/flat-table.style.js

@@ -25,6 +25,10 @@ const StyledTableContainer = styled.div`
 
       ${overflowX && `overflow-x: ${overflowX};`}
     `}
+
+  :focus {
+    outline: none;
+  }
 `;
 const StyledFlatTable = styled.table`
   border-collapse: separate;
@@ -106,35 +110,22 @@ const StyledFlatTableWrapper = styled(StyledBox)`
 
   ${({
   isInSidebar,
-  theme
+  theme,
+  isFocused
 }) => css`
       box-sizing: border-box;
 
-      :focus {
-        /* istanbul ignore next */
-        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+      /* istanbul ignore next */
+      ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
 css`
-          ${oldFocusStyling}
+        ${oldFocusStyling}
+      `}
 
-          :not(:focus-visible) {
-            outline: none;
-          }
-
-          :focus-visible {
-            ${oldFocusStyling}
-          }
-        `}
-
-        ${!theme.focusRedesignOptOut && css`
-          ${addFocusStyling()}
-          :not(:focus-visible) {
-            outline: none;
-            box-shadow: none;
-          }
-        `}
-      }
+      ${!theme.focusRedesignOptOut && isFocused && css`
+        ${addFocusStyling()}
+      `}
 
-      ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
+      ${isInSidebar ? "min-width: fit-content;" : ""}
     `}
 
   ${({

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

@@ -11,6 +11,8 @@ 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";
+import FocusTrap from "../../__internal__/focus-trap";
+import { ModalContext } from "../modal";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -81,19 +83,20 @@ export const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  useEffect(() => {
-    if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
-  }, [isOpen]);
   const closePopover = useCallback(ev => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(ev);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    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);
+    if (!eventIsFromSelectInput && Events.isEscKey(ev)) {
+      closePopover(ev);
+    }
   }, [closePopover]);
   useEffect(() => {
     document.addEventListener("keydown", handleEscKey);
@@ -113,7 +116,7 @@ export const PopoverContainer = ({
     closePopover(e);
   };
   const renderOpenComponentProps = {
-    tabIndex: isOpen ? -1 : 0,
+    tabIndex: 0,
     "aria-expanded": isOpen,
     "aria-haspopup": "dialog",
     isOpen,
@@ -135,12 +138,8 @@ export const PopoverContainer = ({
     if (onClose && isOpen) onClose(e);
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
+  const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+  const popover = /*#__PURE__*/React.createElement(Transition, {
     in: isOpen,
     timeout: {
       exit: 300
@@ -148,11 +147,14 @@ export const PopoverContainer = ({
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    nodeRef: popoverContentNodeRef
+    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({
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
+    disablePortal: true,
     reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end"
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
   }, shouldCoverButton && {
     middleware: popoverMiddleware
   }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
@@ -164,10 +166,24 @@ export const PopoverContainer = ({
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
     ref: popoverContentNodeRef,
+    tabIndex: shouldCoverButton ? -1 : undefined,
     disableAnimation: disableAnimation || reduceMotion
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
+  }, 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, {
+    value: {
+      isAnimationComplete
+    }
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
+    wrapperRef: popoverContentNodeRef,
+    isOpen: isOpen
+  }, popover)) : popover);
 };
 export default PopoverContainer;

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

@@ -53,6 +53,10 @@ const PopoverContainerContentStyle = styled.div`
 }) => theme.zIndex.popover};
 
   ${animationToRender}
+
+  :focus {
+    outline: none;
+  }
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {

package/lib/components/flat-table/flat-table.component.js

@@ -36,10 +36,12 @@ const FlatTable = ({
 }) => {
   const wrapperRef = (0, _react.useRef)(null);
   const tableRef = (0, _react.useRef)(null);
+  const container = (0, _react.useRef)(null);
   const [hasVerticalScrollbar, setHasVerticalScrollbar] = (0, _react.useState)(false);
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
+  const [focused, setFocused] = (0, _react.useState)(false);
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -101,12 +103,12 @@ const FlatTable = ({
   });
   const handleKeyDown = ev => {
     const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+    const focusableElementsArray = Array.from(focusableElements || /* istanbul ignore next */[]);
 
     /* istanbul ignore if */
-    if (!focusableElements) {
+    if (!focusableElementsArray.length) {
       return;
     }
-    const focusableElementsArray = Array.from(focusableElements);
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
     if (_events.default.isDownKey(ev)) {
       ev.preventDefault();
@@ -153,7 +155,6 @@ const FlatTable = ({
     display: "flex",
     flexDirection: "column",
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-    tabIndex: 0,
     role: "region",
     overflowX: width ? "hidden" : undefined,
     width: width,
@@ -163,8 +164,17 @@ const FlatTable = ({
     footer: !!footer,
     firstColRowSpanIndex: firstColRowSpanIndex,
     lastColRowSpanIndex: lastColRowSpanIndex,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    isFocused: focused
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
+    ref: container,
+    onFocus: () => {
+      if (container.current === document.activeElement) {
+        setFocused(true);
+      }
+    },
+    onBlur: () => setFocused(false),
+    tabIndex: 0,
     overflowX: overflowX,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({

package/lib/components/flat-table/flat-table.style.d.ts

@@ -9,6 +9,7 @@ interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFoo
     hasVerticalScrollbar: boolean;
     lastColRowSpanIndex: number;
     firstColRowSpanIndex: number;
+    isFocused: boolean;
 }
 declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
 declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;

package/lib/components/flat-table/flat-table.style.js

@@ -34,6 +34,10 @@ const StyledTableContainer = exports.StyledTableContainer = _styledComponents.de
 
       ${overflowX && `overflow-x: ${overflowX};`}
     `}
+
+  :focus {
+    outline: none;
+  }
 `;
 const StyledFlatTable = exports.StyledFlatTable = _styledComponents.default.table`
   border-collapse: separate;
@@ -115,35 +119,22 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
 
   ${({
   isInSidebar,
-  theme
+  theme,
+  isFocused
 }) => (0, _styledComponents.css)`
       box-sizing: border-box;
 
-      :focus {
-        /* istanbul ignore next */
-        ${theme.focusRedesignOptOut && /* istanbul ignore next */
+      /* istanbul ignore next */
+      ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
 (0, _styledComponents.css)`
-          ${oldFocusStyling}
+        ${oldFocusStyling}
+      `}
 
-          :not(:focus-visible) {
-            outline: none;
-          }
-
-          :focus-visible {
-            ${oldFocusStyling}
-          }
-        `}
-
-        ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
-          ${(0, _addFocusStyling.default)()}
-          :not(:focus-visible) {
-            outline: none;
-            box-shadow: none;
-          }
-        `}
-      }
+      ${!theme.focusRedesignOptOut && isFocused && (0, _styledComponents.css)`
+        ${(0, _addFocusStyling.default)()}
+      `}
 
-      ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
+      ${isInSidebar ? "min-width: fit-content;" : ""}
     `}
 
   ${({

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

@@ -16,6 +16,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _utils = require("../../style/utils");
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
+var _modal = require("../modal");
 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; }
@@ -92,19 +94,20 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
-  (0, _react.useEffect)(() => {
-    if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
-  }, [isOpen]);
   const closePopover = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(ev);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    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);
+    if (!eventIsFromSelectInput && _events.default.isEscKey(ev)) {
+      closePopover(ev);
+    }
   }, [closePopover]);
   (0, _react.useEffect)(() => {
     document.addEventListener("keydown", handleEscKey);
@@ -124,7 +127,7 @@ const PopoverContainer = ({
     closePopover(e);
   };
   const renderOpenComponentProps = {
-    tabIndex: isOpen ? -1 : 0,
+    tabIndex: 0,
     "aria-expanded": isOpen,
     "aria-haspopup": "dialog",
     isOpen,
@@ -146,12 +149,8 @@ const PopoverContainer = ({
     if (onClose && isOpen) onClose(e);
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
-  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, {
+  const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
+  const popover = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
       exit: 300
@@ -159,11 +158,14 @@ const PopoverContainer = ({
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    nodeRef: popoverContentNodeRef
+    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({
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
+    disablePortal: true,
     reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end"
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
   }, shouldCoverButton && {
     middleware: popoverMiddleware
   }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
@@ -175,11 +177,25 @@ const PopoverContainer = ({
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
     ref: popoverContentNodeRef,
+    tabIndex: shouldCoverButton ? -1 : undefined,
     disableAnimation: disableAnimation || reduceMotion
   }, (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))));
+  }, 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, {
+    value: {
+      isAnimationComplete
+    }
+  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    wrapperRef: popoverContentNodeRef,
+    isOpen: isOpen
+  }, popover)) : popover);
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

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

@@ -60,6 +60,10 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
 }) => theme.zIndex.popover};
 
   ${animationToRender}
+
+  :focus {
+    outline: none;
+  }
 `;
 const PopoverContainerOpenIcon = exports.PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {

package/package.json

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