carbon-react 119.0.1 → 119.1.0

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

@@ -1,10 +1,12 @@
 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, { useLayoutEffect, useRef } from "react";
+import React, { useLayoutEffect, useRef, useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledFlatTableCell, StyledCellContent } from "./flat-table-cell.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
+import { FlatTableThemeContext } from "../flat-table.component";
+import guid from "../../../__internal__/utils/helpers/guid";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const FlatTableCell = _ref => {
   let {
@@ -26,11 +28,19 @@ const FlatTableCell = _ref => {
     ...rest
   } = _ref;
   const ref = useRef(null);
+  const id = useRef(guid());
+  const [tabIndex, setTabIndex] = useState(-1);
+  const {
+    selectedId
+  } = useContext(FlatTableThemeContext);
   useLayoutEffect(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
     }
   }, [reportCellWidth, cellIndex]);
+  useEffect(() => {
+    setTabIndex(selectedId === id.current ? 0 : -1);
+  }, [selectedId]);
   return /*#__PURE__*/React.createElement(StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
@@ -43,11 +53,12 @@ const FlatTableCell = _ref => {
     rowSpan: rowspan,
     pl: pl,
     onClick: expandable && onClick ? onClick : undefined,
-    tabIndex: expandable && onClick ? 0 : undefined,
+    tabIndex: expandable && onClick ? tabIndex : undefined,
     onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
     colWidth: width,
     isTruncated: truncate,
-    expandable: expandable
+    expandable: expandable,
+    id: id.current
   }, rest), /*#__PURE__*/React.createElement(StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -3,6 +3,7 @@ import React, { useLayoutEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
 import { Checkbox } from "../../checkbox";
+import Events from "../../../__internal__/utils/helpers/events/events";
 const FlatTableCheckbox = _ref => {
   let {
     as = "td",
@@ -29,7 +30,9 @@ const FlatTableCheckbox = _ref => {
     if (onClick) onClick(event);
   };
   const handleKeyDown = event => {
-    event.stopPropagation();
+    if (!Events.isDownKey(event) && !Events.isUpKey(event)) {
+      event.stopPropagation();
+    }
   };
   return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,

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

@@ -9,6 +9,7 @@ import FlatTableCheckbox from "../flat-table-checkbox";
 import FlatTableRowHeader from "../flat-table-row-header";
 import FlatTableRowDraggable from "./__internal__/flat-table-row-draggable.component";
 import { FlatTableThemeContext } from "../flat-table.component";
+import guid from "../../../__internal__/utils/helpers/guid";
 const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -32,6 +33,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     moveItem,
     ...rest
   } = _ref;
+  const internalId = useRef(id ?? guid());
   const [isExpanded, setIsExpanded] = useState(expanded);
   let rowRef = useRef();
   if (ref) rowRef = ref;
@@ -43,6 +45,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
   const lhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
   const rhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const [tabIndex, setTabIndex] = useState(-1);
   const noStickyColumnsOverlap = useMemo(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
     const hasRhsColumn = rhsRowHeaderIndex !== -1;
@@ -50,7 +53,12 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return lhsRowHeaderIndex < rhsRowHeaderIndex;
   }, [lhsRowHeaderIndex, rhsRowHeaderIndex]);
   !noStickyColumnsOverlap ? process.env.NODE_ENV !== "production" ? invariant(false, `Do not render a right hand side \`${FlatTableRowHeader.displayName}\` before left hand side \`${FlatTableRowHeader.displayName}\``) : invariant(false) : void 0;
-  const themeContext = useContext(FlatTableThemeContext);
+  const {
+    colorTheme,
+    size,
+    setSelectedId,
+    selectedId
+  } = useContext(FlatTableThemeContext);
   const reportCellWidth = useCallback((width, index) => {
     const isLeftSticky = index < lhsRowHeaderIndex;
     const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
@@ -79,7 +87,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }
   function handleClick(ev) {
-    if (onClick) onClick(ev);
+    if (onClick) {
+      onClick(ev);
+    }
     if (expandable && !firstColumnExpandable) {
       toggleExpanded();
     }
@@ -87,7 +97,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   if (onClick || expandable) {
     interactiveRowProps = {
       isRowInteractive: !firstColumnExpandable,
-      tabIndex: firstColumnExpandable ? undefined : 0,
+      tabIndex: firstColumnExpandable ? undefined : tabIndex,
       onKeyDown,
       isFirstColumnInteractive: firstColumnExpandable,
       isExpanded
@@ -118,6 +128,14 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
+  useEffect(() => {
+    if (highlighted || selected) {
+      setSelectedId(internalId.current);
+    }
+  }, [highlighted, selected, setSelectedId]);
+  useEffect(() => {
+    setTabIndex(selectedId === internalId.current ? 0 : -1);
+  }, [selectedId]);
   const rowComponent = isInSidebar => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -131,15 +149,16 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: rowRef,
     lhsRowHeaderIndex: lhsRowHeaderIndex,
     rhsRowHeaderIndex: rhsRowHeaderIndex,
-    colorTheme: themeContext.colorTheme,
-    size: themeContext.size,
+    colorTheme: colorTheme,
+    size: size,
     stickyOffset: stickyOffset,
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable,
-    totalChildren: childrenArray.length
+    totalChildren: childrenArray.length,
+    id: internalId.current
   }, interactiveRowProps, rest), React.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/React.cloneElement(child, {
       expandable: expandable && index === firstCellIndex,
@@ -153,7 +172,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     });
   }));
   const draggableComponent = isInSidebar => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
-    id: id,
+    id: internalId.current,
     moveItem: moveItem,
     findItem: findItem
   }, rowComponent(isInSidebar));

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

@@ -109,6 +109,10 @@ const StyledFlatTableRow = styled.tr`
         color: var(--colorsActionMinor500);
       }
 
+      :focus-visible {
+        outline: none;
+      }
+
       ${allCellTypes} {
         ${backgroundColor && `background-color: ${backgroundColor};`}
 

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

@@ -1,10 +1,12 @@
 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 } from "react";
+import React, { useCallback, useEffect, useContext, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
 import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
+import { FlatTableThemeContext } from "../flat-table.component";
+import guid from "../../../__internal__/utils/helpers/guid";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 const FlatTableRowHeader = _ref => {
   let {
@@ -23,12 +25,20 @@ const FlatTableRowHeader = _ref => {
     stickyAlignment = "left",
     ...rest
   } = _ref;
+  const id = useRef(guid());
+  const [tabIndex, setTabIndex] = useState(-1);
+  const {
+    selectedId
+  } = useContext(FlatTableThemeContext);
   const handleOnClick = useCallback(ev => {
     if (expandable && onClick) onClick(ev);
   }, [expandable, onClick]);
   const handleOnKeyDown = useCallback(ev => {
     if (expandable && onKeyDown) onKeyDown(ev);
   }, [expandable, onKeyDown]);
+  useEffect(() => {
+    setTabIndex(selectedId === id.current ? 0 : -1);
+  }, [selectedId]);
   return /*#__PURE__*/React.createElement(StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
@@ -38,11 +48,12 @@ const FlatTableRowHeader = _ref => {
     py: py || "10px",
     px: px || 3,
     onClick: handleOnClick,
-    tabIndex: expandable && onClick ? 0 : undefined,
+    tabIndex: expandable && onClick ? tabIndex : undefined,
     onKeyDown: handleOnKeyDown,
     isTruncated: truncate,
     expandable: expandable,
-    stickyAlignment: stickyAlignment
+    stickyAlignment: stickyAlignment,
+    id: id.current
   }, rest), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -5,8 +5,12 @@ import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
 import { DrawerSidebarContext } from "../drawer";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-export const FlatTableThemeContext = /*#__PURE__*/React.createContext({});
+import Events from "../../__internal__/utils/helpers/events/events";
+export const FlatTableThemeContext = /*#__PURE__*/React.createContext({
+  setSelectedId: () => {}
+});
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
 const FlatTable = _ref => {
   let {
     caption,
@@ -31,6 +35,7 @@ const FlatTable = _ref => {
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
+  const [selectedId, setSelectedId] = useState("");
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -47,6 +52,8 @@ const FlatTable = _ref => {
       const rowSpan = cell?.getAttribute("rowspan");
       return rowSpan >= index + 1;
     });
+
+    /* istanbul ignore else */
     if (wrapperRef.current && tableRef.current) {
       const {
         offsetHeight,
@@ -75,6 +82,58 @@ const FlatTable = _ref => {
       }
     }
   }, [footer, children, height, minHeight]);
+  const findParentIndexOfFocusedChild = array => array.findIndex(el => {
+    const focusableRowElements = el.querySelectorAll("button, input, a, [tabindex]");
+
+    /* istanbul ignore else */
+    if (focusableRowElements) {
+      const focusableRowElementsArray = Array.from(focusableRowElements);
+      if (focusableRowElementsArray.find(el2 => el2 === document.activeElement)) {
+        return true;
+      }
+    }
+    return false;
+  });
+  const handleKeyDown = ev => {
+    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+    /* istanbul ignore if */
+    if (!focusableElements) {
+      return;
+    }
+    const focusableElementsArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+    const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
+    if (Events.isDownKey(ev)) {
+      if (currentFocusIndex !== -1 && currentFocusIndex < focusableElementsArray.length) {
+        focusableElementsArray[currentFocusIndex + 1]?.focus();
+      } else {
+        // it may be that an element within the row currently has focus
+        const index = findParentIndexOfFocusedChild(focusableElementsArray);
+        if (index !== -1 && index < focusableElementsArray.length) {
+          focusableElementsArray[index + 1]?.focus();
+        }
+      }
+    } else if (Events.isUpKey(ev)) {
+      if (currentFocusIndex > 0) {
+        focusableElementsArray[currentFocusIndex - 1]?.focus();
+      } else {
+        // it may be that an element within the row currently has focus
+        const index = findParentIndexOfFocusedChild(focusableElementsArray);
+        if (index > 0) {
+          focusableElementsArray[index - 1]?.focus();
+        }
+      }
+    }
+  };
+  useLayoutEffect(() => {
+    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+    // if no other menu item is selected, we need to make the first row a tab stop
+    if (focusableElements && !selectedId) {
+      const focusableArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+      setSelectedId(focusableArray[0]?.getAttribute("id") || "");
+    }
+  }, [selectedId]);
   return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, _ref2 => {
     let {
       isInSidebar
@@ -101,7 +160,8 @@ const FlatTable = _ref => {
       hasHorizontalScrollbar: hasHorizontalScrollbar,
       hasFooter: !!footer,
       firstColRowSpanIndex: firstColRowSpanIndex,
-      lastColRowSpanIndex: lastColRowSpanIndex
+      lastColRowSpanIndex: lastColRowSpanIndex,
+      onKeyDown: handleKeyDown
     }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
       overflowX: overflowX,
       width: width
@@ -111,7 +171,9 @@ const FlatTable = _ref => {
     }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
       value: {
         colorTheme,
-        size
+        size,
+        setSelectedId,
+        selectedId
       }
     }, children)), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
       hasStickyFooter: hasStickyFooter

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

@@ -10,6 +10,8 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 var _flatTableCell = require("./flat-table-cell.style");
 var _utils = require("../../../style/utils");
 var _icon = _interopRequireDefault(require("../../icon"));
+var _flatTable = require("../flat-table.component");
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 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; }
@@ -35,11 +37,19 @@ const FlatTableCell = _ref => {
     ...rest
   } = _ref;
   const ref = (0, _react.useRef)(null);
+  const id = (0, _react.useRef)((0, _guid.default)());
+  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
+  const {
+    selectedId
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   (0, _react.useLayoutEffect)(() => {
     if (ref.current && reportCellWidth) {
       reportCellWidth(ref.current.offsetWidth, cellIndex);
     }
   }, [reportCellWidth, cellIndex]);
+  (0, _react.useEffect)(() => {
+    setTabIndex(selectedId === id.current ? 0 : -1);
+  }, [selectedId]);
   return /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
@@ -52,11 +62,12 @@ const FlatTableCell = _ref => {
     rowSpan: rowspan,
     pl: pl,
     onClick: expandable && onClick ? onClick : undefined,
-    tabIndex: expandable && onClick ? 0 : undefined,
+    tabIndex: expandable && onClick ? tabIndex : undefined,
     onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
     colWidth: width,
     isTruncated: truncate,
-    expandable: expandable
+    expandable: expandable,
+    id: id.current
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox.style"));
 var _checkbox = require("../../checkbox");
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/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; }
@@ -38,7 +39,9 @@ const FlatTableCheckbox = _ref => {
     if (onClick) onClick(event);
   };
   const handleKeyDown = event => {
-    event.stopPropagation();
+    if (!_events.default.isDownKey(event) && !_events.default.isUpKey(event)) {
+      event.stopPropagation();
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, _extends({
     ref: ref,

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

@@ -14,6 +14,7 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox"
 var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
 var _flatTableRowDraggable = _interopRequireDefault(require("./__internal__/flat-table-row-draggable.component"));
 var _flatTable = require("../flat-table.component");
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 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; }
@@ -41,6 +42,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     moveItem,
     ...rest
   } = _ref;
+  const internalId = (0, _react.useRef)(id ?? (0, _guid.default)());
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   let rowRef = (0, _react.useRef)();
   if (ref) rowRef = ref;
@@ -52,6 +54,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const childrenArray = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const lhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
   const rhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const noStickyColumnsOverlap = (0, _react.useMemo)(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
     const hasRhsColumn = rhsRowHeaderIndex !== -1;
@@ -59,7 +62,12 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     return lhsRowHeaderIndex < rhsRowHeaderIndex;
   }, [lhsRowHeaderIndex, rhsRowHeaderIndex]);
   !noStickyColumnsOverlap ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Do not render a right hand side \`${_flatTableRowHeader.default.displayName}\` before left hand side \`${_flatTableRowHeader.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
-  const themeContext = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const {
+    colorTheme,
+    size,
+    setSelectedId,
+    selectedId
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const reportCellWidth = (0, _react.useCallback)((width, index) => {
     const isLeftSticky = index < lhsRowHeaderIndex;
     const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
@@ -88,7 +96,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }
   function handleClick(ev) {
-    if (onClick) onClick(ev);
+    if (onClick) {
+      onClick(ev);
+    }
     if (expandable && !firstColumnExpandable) {
       toggleExpanded();
     }
@@ -96,7 +106,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   if (onClick || expandable) {
     interactiveRowProps = {
       isRowInteractive: !firstColumnExpandable,
-      tabIndex: firstColumnExpandable ? undefined : 0,
+      tabIndex: firstColumnExpandable ? undefined : tabIndex,
       onKeyDown,
       isFirstColumnInteractive: firstColumnExpandable,
       isExpanded
@@ -127,6 +137,14 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
+  (0, _react.useEffect)(() => {
+    if (highlighted || selected) {
+      setSelectedId(internalId.current);
+    }
+  }, [highlighted, selected, setSelectedId]);
+  (0, _react.useEffect)(() => {
+    setTabIndex(selectedId === internalId.current ? 0 : -1);
+  }, [selectedId]);
   const rowComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -140,15 +158,16 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: rowRef,
     lhsRowHeaderIndex: lhsRowHeaderIndex,
     rhsRowHeaderIndex: rhsRowHeaderIndex,
-    colorTheme: themeContext.colorTheme,
-    size: themeContext.size,
+    colorTheme: colorTheme,
+    size: size,
     stickyOffset: stickyOffset,
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable,
-    totalChildren: childrenArray.length
+    totalChildren: childrenArray.length,
+    id: internalId.current
   }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex,
@@ -162,7 +181,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   }));
   const draggableComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
-    id: id,
+    id: internalId.current,
     moveItem: moveItem,
     findItem: findItem
   }, rowComponent(isInSidebar));

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

@@ -118,6 +118,10 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         color: var(--colorsActionMinor500);
       }
 
+      :focus-visible {
+        outline: none;
+      }
+
       ${allCellTypes} {
         ${backgroundColor && `background-color: ${backgroundColor};`}
 

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

@@ -10,6 +10,8 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 var _utils = require("../../../style/utils");
 var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTableRowHeader = require("./flat-table-row-header.style");
+var _flatTable = require("../flat-table.component");
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 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; }
@@ -32,12 +34,20 @@ const FlatTableRowHeader = _ref => {
     stickyAlignment = "left",
     ...rest
   } = _ref;
+  const id = (0, _react.useRef)((0, _guid.default)());
+  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
+  const {
+    selectedId
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const handleOnClick = (0, _react.useCallback)(ev => {
     if (expandable && onClick) onClick(ev);
   }, [expandable, onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(ev => {
     if (expandable && onKeyDown) onKeyDown(ev);
   }, [expandable, onKeyDown]);
+  (0, _react.useEffect)(() => {
+    setTabIndex(selectedId === id.current ? 0 : -1);
+  }, [selectedId]);
   return /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
@@ -47,11 +57,12 @@ const FlatTableRowHeader = _ref => {
     py: py || "10px",
     px: px || 3,
     onClick: handleOnClick,
-    tabIndex: expandable && onClick ? 0 : undefined,
+    tabIndex: expandable && onClick ? tabIndex : undefined,
     onKeyDown: handleOnKeyDown,
     isTruncated: truncate,
     expandable: expandable,
-    stickyAlignment: stickyAlignment
+    stickyAlignment: stickyAlignment,
+    id: id.current
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -10,13 +10,17 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 var _flatTable = require("./flat-table.style");
 var _drawer = require("../drawer");
 var _utils = require("../../style/utils");
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events/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; }
 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 FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({});
+const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
+  setSelectedId: () => {}
+});
 exports.FlatTableThemeContext = FlatTableThemeContext;
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
 const FlatTable = _ref => {
   let {
     caption,
@@ -41,6 +45,7 @@ const FlatTable = _ref => {
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
+  const [selectedId, setSelectedId] = (0, _react.useState)("");
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -57,6 +62,8 @@ const FlatTable = _ref => {
       const rowSpan = cell?.getAttribute("rowspan");
       return rowSpan >= index + 1;
     });
+
+    /* istanbul ignore else */
     if (wrapperRef.current && tableRef.current) {
       const {
         offsetHeight,
@@ -85,6 +92,58 @@ const FlatTable = _ref => {
       }
     }
   }, [footer, children, height, minHeight]);
+  const findParentIndexOfFocusedChild = array => array.findIndex(el => {
+    const focusableRowElements = el.querySelectorAll("button, input, a, [tabindex]");
+
+    /* istanbul ignore else */
+    if (focusableRowElements) {
+      const focusableRowElementsArray = Array.from(focusableRowElements);
+      if (focusableRowElementsArray.find(el2 => el2 === document.activeElement)) {
+        return true;
+      }
+    }
+    return false;
+  });
+  const handleKeyDown = ev => {
+    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+    /* istanbul ignore if */
+    if (!focusableElements) {
+      return;
+    }
+    const focusableElementsArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+    const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
+    if (_events.default.isDownKey(ev)) {
+      if (currentFocusIndex !== -1 && currentFocusIndex < focusableElementsArray.length) {
+        focusableElementsArray[currentFocusIndex + 1]?.focus();
+      } else {
+        // it may be that an element within the row currently has focus
+        const index = findParentIndexOfFocusedChild(focusableElementsArray);
+        if (index !== -1 && index < focusableElementsArray.length) {
+          focusableElementsArray[index + 1]?.focus();
+        }
+      }
+    } else if (_events.default.isUpKey(ev)) {
+      if (currentFocusIndex > 0) {
+        focusableElementsArray[currentFocusIndex - 1]?.focus();
+      } else {
+        // it may be that an element within the row currently has focus
+        const index = findParentIndexOfFocusedChild(focusableElementsArray);
+        if (index > 0) {
+          focusableElementsArray[index - 1]?.focus();
+        }
+      }
+    }
+  };
+  (0, _react.useLayoutEffect)(() => {
+    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+    // if no other menu item is selected, we need to make the first row a tab stop
+    if (focusableElements && !selectedId) {
+      const focusableArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+      setSelectedId(focusableArray[0]?.getAttribute("id") || "");
+    }
+  }, [selectedId]);
   return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, _ref2 => {
     let {
       isInSidebar
@@ -111,7 +170,8 @@ const FlatTable = _ref => {
       hasHorizontalScrollbar: hasHorizontalScrollbar,
       hasFooter: !!footer,
       firstColRowSpanIndex: firstColRowSpanIndex,
-      lastColRowSpanIndex: lastColRowSpanIndex
+      lastColRowSpanIndex: lastColRowSpanIndex,
+      onKeyDown: handleKeyDown
     }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
       overflowX: overflowX,
       width: width
@@ -121,7 +181,9 @@ const FlatTable = _ref => {
     }, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
       value: {
         colorTheme,
-        size
+        size,
+        setSelectedId,
+        selectedId
       }
     }, children)), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
       hasStickyFooter: hasStickyFooter

package/package.json

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