carbon-react 141.1.0 → 141.1.1

package/esm/components/flat-table/__internal__/use-table-cell.d.ts

@@ -11,5 +11,6 @@ declare const _default: (id: string) => {
     tabIndex: number;
     isInHighlightedRow: boolean | undefined;
     isInSelectedRow: boolean | undefined;
+    bringToFront: (ev: React.MouseEvent<HTMLElement, MouseEvent> | React.FocusEvent<HTMLElement>, tagName: "TD" | "TH") => void;
 };
 export default _default;

package/esm/components/flat-table/__internal__/use-table-cell.js

@@ -22,6 +22,48 @@ export default (id => {
   const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const isFirstCell = id === firstCellId;
   const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  const bringToFront = (ev, tagName) => {
+    /* istanbul ignore if */
+    if (!ev || !ev.nativeEvent || typeof ev.nativeEvent.composedPath !== "function") {
+      return;
+    }
+    const {
+      nativeEvent
+    } = ev;
+
+    // get the entire path of the event
+    const path = nativeEvent.composedPath();
+
+    // get the table from the path
+    const tableBody = path.find(el => {
+      return el instanceof HTMLElement && el.tagName === "TBODY";
+    });
+
+    // if there is no table in the path we don't do anything
+    if (!tableBody) {
+      return;
+    }
+
+    // get all the th and td elements that are sticky
+    const stickyCells = Array.from(tableBody.querySelectorAll("th, td")).filter(el => {
+      return el.getAttribute("data-sticky-align") === "left" || el.getAttribute("data-sticky-align") === "right" || el.classList.contains("isSticky");
+    });
+
+    // reset the z-index to the default value for all the sticky cells, in case other cells were clicked before
+    stickyCells.map(el => {
+      el.classList.remove("bringToFront");
+      return el;
+    });
+
+    // find the current cell in the path
+    const cell = path.find(el => el instanceof HTMLElement && el.tagName === tagName);
+
+    // if the current cell is sticky, increase the z-index value
+    const cellIndex = stickyCells.indexOf(cell);
+    if (cellIndex !== -1) {
+      stickyCells[cellIndex].classList.add("bringToFront");
+    }
+  };
   useEffect(() => {
     const tabstopTimer = setTimeout(() => {
       setTabIndex(isExpandableCell && getTabStopElementId() === id ? 0 : -1);
@@ -41,6 +83,7 @@ export default (id => {
     isExpandableCell,
     tabIndex,
     isInHighlightedRow: highlighted,
-    isInSelectedRow: selected
+    isInSelectedRow: selected,
+    bringToFront
   };
 });

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

@@ -29,8 +29,12 @@ export const FlatTableCell = ({
     makeCellSticky,
     isInHighlightedRow,
     isInSelectedRow,
-    tabIndex
+    tabIndex,
+    bringToFront
   } = useTableCell(internalId.current);
+  const handleOnFocus = ev => {
+    bringToFront(ev, "TD");
+  };
   return /*#__PURE__*/React.createElement(StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
@@ -53,7 +57,8 @@ export const FlatTableCell = ({
     "data-selected": isInSelectedRow && isExpandableCell,
     "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
-    id: internalId.current
+    id: internalId.current,
+    onFocus: handleOnFocus
   }), /*#__PURE__*/React.createElement(StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -19,10 +19,12 @@ const firstColumnOldFocusStyling = `
   outline: 2px solid var(--colorsSemanticFocus500);
   outline-offset: -1px;
 `;
-const newFocusStyling = `
-  ${addFocusStyling(true)}
-  z-index: 1000;
-`;
+const newFocusStyling = theme => {
+  return `
+    ${addFocusStyling(true)}
+    z-index: ${theme.zIndex.overlay + 5};
+  `;
+};
 const getLeftStickyStyling = (index, themeOptOut) => index === 0 && /* istanbul ignore next */
 themeOptOut && /* istanbul ignore next */
 css`
@@ -196,7 +198,7 @@ const StyledFlatTableRow = styled.tr`
             right: 0px;
             top: 0;
             bottom: 0px;
-            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */oldFocusStyling}
+            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */oldFocusStyling}
             pointer-events: none;
           }
 
@@ -232,7 +234,7 @@ const StyledFlatTableRow = styled.tr`
                 border: none;
                 content: "";
                 height: ${rowHeight}px;
-                ${newFocusStyling}
+                ${newFocusStyling(theme)}
               }
             `}
           `}
@@ -280,7 +282,7 @@ const StyledFlatTableRow = styled.tr`
           cursor: pointer;
 
           :focus {
-            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */firstColumnOldFocusStyling}
+            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */firstColumnOldFocusStyling}
           }
 
           :hover {

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

@@ -31,11 +31,15 @@ export const FlatTableRowHeader = ({
     isExpandableCell,
     tabIndex,
     isInHighlightedRow,
-    isInSelectedRow
+    isInSelectedRow,
+    bringToFront
   } = useTableCell(internalId.current);
   const handleOnClick = useCallback(ev => {
     if (isExpandableCell && onClick) onClick(ev);
   }, [isExpandableCell, onClick]);
+  const handleOnFocus = ev => {
+    bringToFront(ev, "TH");
+  };
   const handleOnKeyDown = useCallback(ev => {
     if (isExpandableCell && onKeyDown) {
       onKeyDown(ev);
@@ -66,7 +70,8 @@ export const FlatTableRowHeader = ({
     "data-selected": isInSelectedRow && isExpandableCell,
     "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
-    id: internalId.current
+    id: internalId.current,
+    onFocus: handleOnFocus
   }), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -269,6 +269,16 @@ css`
 }) => theme.zIndex.overlay};
   }
 
+  tbody
+    ${StyledFlatTableRowHeader}.bringToFront,
+    ${StyledFlatTableCell}.bringToFront,
+    tbody
+    ${StyledFlatTableCheckbox}.bringToFront {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + 5};
+  }
+
   ${({
   footer
 }) => footer && css`

package/lib/components/flat-table/__internal__/use-table-cell.d.ts

@@ -11,5 +11,6 @@ declare const _default: (id: string) => {
     tabIndex: number;
     isInHighlightedRow: boolean | undefined;
     isInSelectedRow: boolean | undefined;
+    bringToFront: (ev: React.MouseEvent<HTMLElement, MouseEvent> | React.FocusEvent<HTMLElement>, tagName: "TD" | "TH") => void;
 };
 export default _default;

package/lib/components/flat-table/__internal__/use-table-cell.js

@@ -29,6 +29,48 @@ var _default = id => {
   const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const isFirstCell = id === firstCellId;
   const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  const bringToFront = (ev, tagName) => {
+    /* istanbul ignore if */
+    if (!ev || !ev.nativeEvent || typeof ev.nativeEvent.composedPath !== "function") {
+      return;
+    }
+    const {
+      nativeEvent
+    } = ev;
+
+    // get the entire path of the event
+    const path = nativeEvent.composedPath();
+
+    // get the table from the path
+    const tableBody = path.find(el => {
+      return el instanceof HTMLElement && el.tagName === "TBODY";
+    });
+
+    // if there is no table in the path we don't do anything
+    if (!tableBody) {
+      return;
+    }
+
+    // get all the th and td elements that are sticky
+    const stickyCells = Array.from(tableBody.querySelectorAll("th, td")).filter(el => {
+      return el.getAttribute("data-sticky-align") === "left" || el.getAttribute("data-sticky-align") === "right" || el.classList.contains("isSticky");
+    });
+
+    // reset the z-index to the default value for all the sticky cells, in case other cells were clicked before
+    stickyCells.map(el => {
+      el.classList.remove("bringToFront");
+      return el;
+    });
+
+    // find the current cell in the path
+    const cell = path.find(el => el instanceof HTMLElement && el.tagName === tagName);
+
+    // if the current cell is sticky, increase the z-index value
+    const cellIndex = stickyCells.indexOf(cell);
+    if (cellIndex !== -1) {
+      stickyCells[cellIndex].classList.add("bringToFront");
+    }
+  };
   (0, _react.useEffect)(() => {
     const tabstopTimer = setTimeout(() => {
       setTabIndex(isExpandableCell && getTabStopElementId() === id ? 0 : -1);
@@ -48,7 +90,8 @@ var _default = id => {
     isExpandableCell,
     tabIndex,
     isInHighlightedRow: highlighted,
-    isInSelectedRow: selected
+    isInSelectedRow: selected,
+    bringToFront
   };
 };
 exports.default = _default;

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

@@ -38,8 +38,12 @@ const FlatTableCell = ({
     makeCellSticky,
     isInHighlightedRow,
     isInSelectedRow,
-    tabIndex
+    tabIndex,
+    bringToFront
   } = (0, _useTableCell.default)(internalId.current);
+  const handleOnFocus = ev => {
+    bringToFront(ev, "TD");
+  };
   return /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
@@ -62,7 +66,8 @@ const FlatTableCell = ({
     "data-selected": isInSelectedRow && isExpandableCell,
     "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
-    id: internalId.current
+    id: internalId.current,
+    onFocus: handleOnFocus
   }), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -28,10 +28,12 @@ const firstColumnOldFocusStyling = `
   outline: 2px solid var(--colorsSemanticFocus500);
   outline-offset: -1px;
 `;
-const newFocusStyling = `
-  ${(0, _addFocusStyling.default)(true)}
-  z-index: 1000;
-`;
+const newFocusStyling = theme => {
+  return `
+    ${(0, _addFocusStyling.default)(true)}
+    z-index: ${theme.zIndex.overlay + 5};
+  `;
+};
 const getLeftStickyStyling = (index, themeOptOut) => index === 0 && /* istanbul ignore next */
 themeOptOut && /* istanbul ignore next */
 (0, _styledComponents.css)`
@@ -205,7 +207,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             right: 0px;
             top: 0;
             bottom: 0px;
-            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */oldFocusStyling}
+            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */oldFocusStyling}
             pointer-events: none;
           }
 
@@ -241,7 +243,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
                 border: none;
                 content: "";
                 height: ${rowHeight}px;
-                ${newFocusStyling}
+                ${newFocusStyling(theme)}
               }
             `}
           `}
@@ -289,7 +291,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
           cursor: pointer;
 
           :focus {
-            ${!theme.focusRedesignOptOut ? newFocusStyling : /* istanbul ignore next */firstColumnOldFocusStyling}
+            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */firstColumnOldFocusStyling}
           }
 
           :hover {

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

@@ -40,11 +40,15 @@ const FlatTableRowHeader = ({
     isExpandableCell,
     tabIndex,
     isInHighlightedRow,
-    isInSelectedRow
+    isInSelectedRow,
+    bringToFront
   } = (0, _useTableCell.default)(internalId.current);
   const handleOnClick = (0, _react.useCallback)(ev => {
     if (isExpandableCell && onClick) onClick(ev);
   }, [isExpandableCell, onClick]);
+  const handleOnFocus = ev => {
+    bringToFront(ev, "TH");
+  };
   const handleOnKeyDown = (0, _react.useCallback)(ev => {
     if (isExpandableCell && onKeyDown) {
       onKeyDown(ev);
@@ -75,7 +79,8 @@ const FlatTableRowHeader = ({
     "data-selected": isInSelectedRow && isExpandableCell,
     "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
-    id: internalId.current
+    id: internalId.current,
+    onFocus: handleOnFocus
   }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable

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

@@ -278,6 +278,16 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
 }) => theme.zIndex.overlay};
   }
 
+  tbody
+    ${_flatTableRowHeader.StyledFlatTableRowHeader}.bringToFront,
+    ${_flatTableCell.StyledFlatTableCell}.bringToFront,
+    tbody
+    ${_flatTableCheckbox.default}.bringToFront {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + 5};
+  }
+
   ${({
   footer
 }) => footer && (0, _styledComponents.css)`

package/package.json

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