carbon-react 125.5.0 → 125.5.1

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

@@ -179,7 +179,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     totalChildren: cellsArray.length,
     id: internalId.current,
     "data-selected": selected && expandableArea === "wholeRow",
-    "data-highlighted": highlighted && expandableArea === "wholeRow"
+    "data-highlighted": highlighted && expandableArea === "wholeRow",
+    rowHeight: rowRef?.current?.offsetHeight
   }, interactiveRowProps, rest), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
     value: {
       firstCellId,

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

@@ -16,6 +16,7 @@ interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "h
     isSubRow?: boolean;
     isFirstSubRow?: boolean;
     stickyOffset?: number;
+    rowHeight?: number;
 }
 declare const StyledFlatTableRow: import("styled-components").StyledComponent<"tr", any, StyledFlatTableRowProps, never>;
 export default StyledFlatTableRow;

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

@@ -8,7 +8,6 @@ import StyledIcon from "../../icon/icon.style";
 import { toColor } from "../../../style/utils/color";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import { isSafari } from "../../../__internal__/utils/helpers/browser-type-check";
-import cellSizes from "../cell-sizes.style";
 const horizontalBorderSizes = {
   medium: "2px",
   large: "4px"
@@ -86,13 +85,6 @@ const verticalBorderColor = colorTheme => {
       return "var(--colorsUtilityMajor100)";
   }
 };
-const getFocusHeight = size => {
-  if (!size) return "40px";
-  const {
-    height
-  } = cellSizes[size];
-  return height;
-};
 const StyledFlatTableRow = styled.tr`
   ${({
   bgColor,
@@ -116,7 +108,8 @@ const StyledFlatTableRow = styled.tr`
   size,
   theme,
   isDragging,
-  draggable
+  draggable,
+  rowHeight
 }) => {
   const backgroundColor = bgColor ? toColor(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? toColor(theme, horizontalBorderColor) : undefined;
@@ -223,6 +216,7 @@ const StyledFlatTableRow = styled.tr`
               top: 0px;
             }
           }
+
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
           ${isSafari(navigator) && css`
             ${theme.focusRedesignOptOut && /* istanbul ignore next */
@@ -239,10 +233,10 @@ const StyledFlatTableRow = styled.tr`
             ${!theme.focusRedesignOptOut && css`
               position: -webkit-sticky;
               :after {
-                content: none;
                 border: none;
                 content: "";
-                height: ${getFocusHeight(size)} ${newFocusStyling};
+                height: ${rowHeight}px;
+                ${newFocusStyling}
               }
             `}
           `}

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

@@ -188,7 +188,8 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
     totalChildren: cellsArray.length,
     id: internalId.current,
     "data-selected": selected && expandableArea === "wholeRow",
-    "data-highlighted": highlighted && expandableArea === "wholeRow"
+    "data-highlighted": highlighted && expandableArea === "wholeRow",
+    rowHeight: rowRef?.current?.offsetHeight
   }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowContext.default.Provider, {
     value: {
       firstCellId,

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

@@ -16,6 +16,7 @@ interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "h
     isSubRow?: boolean;
     isFirstSubRow?: boolean;
     stickyOffset?: number;
+    rowHeight?: number;
 }
 declare const StyledFlatTableRow: import("styled-components").StyledComponent<"tr", any, StyledFlatTableRowProps, never>;
 export default StyledFlatTableRow;

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

@@ -14,7 +14,6 @@ var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _color = require("../../../style/utils/color");
 var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
 var _browserTypeCheck = require("../../../__internal__/utils/helpers/browser-type-check");
-var _cellSizes = _interopRequireDefault(require("../cell-sizes.style"));
 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; }
@@ -95,13 +94,6 @@ const verticalBorderColor = colorTheme => {
       return "var(--colorsUtilityMajor100)";
   }
 };
-const getFocusHeight = size => {
-  if (!size) return "40px";
-  const {
-    height
-  } = _cellSizes.default[size];
-  return height;
-};
 const StyledFlatTableRow = _styledComponents.default.tr`
   ${({
   bgColor,
@@ -125,7 +117,8 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   size,
   theme,
   isDragging,
-  draggable
+  draggable,
+  rowHeight
 }) => {
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
@@ -232,6 +225,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
               top: 0px;
             }
           }
+
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
           ${(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
             ${theme.focusRedesignOptOut && /* istanbul ignore next */
@@ -248,10 +242,10 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
               position: -webkit-sticky;
               :after {
-                content: none;
                 border: none;
                 content: "";
-                height: ${getFocusHeight(size)} ${newFocusStyling};
+                height: ${rowHeight}px;
+                ${newFocusStyling}
               }
             `}
           `}

package/package.json

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