carbon-react 142.11.7 → 142.11.8

package/esm/components/flat-table/__internal__/build-position-map.js

@@ -5,6 +5,8 @@ export default ((array, propertyName) => array.reduce((acc, _, index) => {
       acc[currentId] = 0;
     } else {
       const previousId = array[index - 1].getAttribute("id");
+
+      /* istanbul ignore else */
       if (previousId) {
         acc[currentId] = acc[previousId] + array[index - 1][propertyName];
       }

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
 import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
-export interface FlatTableRowProps {
+export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
     /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */

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

@@ -29,6 +29,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   draggable,
   findItem,
   moveItem,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }, ref) => {
   const internalId = useRef(id ? String(id) : guid());
@@ -158,12 +160,17 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     };
   }, [addRow, removeRow]);
   const isFirstSubRow = firstRowId === internalId.current;
+  const getDataElement = () => {
+    if (dataElement) return dataElement;
+    return isSubRow ? "flat-table-sub-row" : "flat-table-row";
+  };
   const rowComponent = () => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
     isFirstSubRow: isFirstSubRow,
-    "data-element": isSubRow ? "flat-table-sub-row" : "flat-table-row",
+    "data-element": getDataElement(),
+    "data-role": dataRole,
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
@@ -183,7 +190,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     "data-selected": selected && expandableArea === "wholeRow",
     "data-highlighted": highlighted && expandableArea === "wholeRow",
     rowHeight: rowRef?.current?.offsetHeight
-  }, interactiveRowProps, rest), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
+  }, interactiveRowProps, rest, {
+    "data-component": "flat-table-row"
+  }), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
     value: {
       firstCellId,
       expandable,
@@ -208,6 +217,8 @@ if (process.env.NODE_ENV !== "production") {
   FlatTableRow.propTypes = {
     "bgColor": PropTypes.string,
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "draggable": PropTypes.bool,
     "expandable": PropTypes.bool,
     "expandableArea": PropTypes.oneOf(["firstColumn", "wholeRow"]),

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

@@ -233,7 +233,8 @@ const StyledFlatTableRow = styled.tr`
                 border: none;
               }
             `}
-            ${!theme.focusRedesignOptOut && css`
+            ${!theme.focusRedesignOptOut && /* istanbul ignore next */
+  css`
               position: -webkit-sticky;
               :after {
                 border: none;

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-export interface FlatTableProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
     /** A string to render as the table's caption */

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

@@ -108,6 +108,8 @@ export const FlatTable = ({
       } else {
         // it may be that an element within the row currently has focus
         const index = findParentIndexOfFocusedChild(focusableElementsArray);
+
+        /* istanbul ignore else */
         if (index !== -1 && index < focusableElementsArray.length) {
           focusableElementsArray[index + 1]?.focus();
         }
@@ -135,7 +137,6 @@ export const FlatTable = ({
   };
   return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
-    "data-component": "flat-table-wrapper",
     "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -160,7 +161,9 @@ export const FlatTable = ({
     lastColRowSpanIndex: lastColRowSpanIndex,
     onKeyDown: handleKeyDown,
     isFocused: focused
-  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+  }, rest, {
+    "data-component": "flat-table-wrapper"
+  }), /*#__PURE__*/React.createElement(StyledTableContainer, {
     ref: container,
     onFocus: () => {
       if (container.current === document.activeElement) {
@@ -170,7 +173,8 @@ export const FlatTable = ({
     onBlur: () => setFocused(false),
     tabIndex: 0,
     overflowX: overflowX,
-    width: width
+    width: width,
+    "data-role": "flat-table-container"
   }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
     ref: tableRef,
     "data-component": "flat-table"
@@ -181,7 +185,8 @@ export const FlatTable = ({
       getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter
+    hasStickyFooter: hasStickyFooter,
+    "data-role": "flat-table-footer"
   }, footer));
 };
 FlatTable.displayName = "FlatTable";

package/esm/components/textarea/textarea.component.js

@@ -116,7 +116,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
         scrollElement = scrollElement?.parentElement || null;
       }
       const scrollPosition = scrollElement?.scrollTop;
-      textarea.style.height = "0px";
+
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {

package/lib/components/flat-table/__internal__/build-position-map.js

@@ -11,6 +11,8 @@ var _default = (array, propertyName) => array.reduce((acc, _, index) => {
       acc[currentId] = 0;
     } else {
       const previousId = array[index - 1].getAttribute("id");
+
+      /* istanbul ignore else */
       if (previousId) {
         acc[currentId] = acc[previousId] + array[index - 1][propertyName];
       }

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
 import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
-export interface FlatTableRowProps {
+export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
     /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */

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

@@ -38,6 +38,8 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
   draggable,
   findItem,
   moveItem,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }, ref) => {
   const internalId = (0, _react.useRef)(id ? String(id) : (0, _guid.default)());
@@ -167,12 +169,17 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
     };
   }, [addRow, removeRow]);
   const isFirstSubRow = firstRowId === internalId.current;
+  const getDataElement = () => {
+    if (dataElement) return dataElement;
+    return isSubRow ? "flat-table-sub-row" : "flat-table-row";
+  };
   const rowComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
     isFirstSubRow: isFirstSubRow,
-    "data-element": isSubRow ? "flat-table-sub-row" : "flat-table-row",
+    "data-element": getDataElement(),
+    "data-role": dataRole,
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
@@ -192,7 +199,9 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
     "data-selected": selected && expandableArea === "wholeRow",
     "data-highlighted": highlighted && expandableArea === "wholeRow",
     rowHeight: rowRef?.current?.offsetHeight
-  }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRow2.default.Provider, {
+  }, interactiveRowProps, rest, {
+    "data-component": "flat-table-row"
+  }), /*#__PURE__*/_react.default.createElement(_flatTableRow2.default.Provider, {
     value: {
       firstCellId,
       expandable,
@@ -217,6 +226,8 @@ if (process.env.NODE_ENV !== "production") {
   FlatTableRow.propTypes = {
     "bgColor": _propTypes.default.string,
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "draggable": _propTypes.default.bool,
     "expandable": _propTypes.default.bool,
     "expandableArea": _propTypes.default.oneOf(["firstColumn", "wholeRow"]),

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

@@ -242,7 +242,8 @@ const StyledFlatTableRow = _styledComponents.default.tr`
                 border: none;
               }
             `}
-            ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+            ${!theme.focusRedesignOptOut && /* istanbul ignore next */
+  (0, _styledComponents.css)`
               position: -webkit-sticky;
               :after {
                 border: none;

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
-export interface FlatTableProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
     /** A string to render as the table's caption */

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

@@ -117,6 +117,8 @@ const FlatTable = ({
       } else {
         // it may be that an element within the row currently has focus
         const index = findParentIndexOfFocusedChild(focusableElementsArray);
+
+        /* istanbul ignore else */
         if (index !== -1 && index < focusableElementsArray.length) {
           focusableElementsArray[index + 1]?.focus();
         }
@@ -144,7 +146,6 @@ const FlatTable = ({
   };
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
-    "data-component": "flat-table-wrapper",
     "data-role": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -169,7 +170,9 @@ const FlatTable = ({
     lastColRowSpanIndex: lastColRowSpanIndex,
     onKeyDown: handleKeyDown,
     isFocused: focused
-  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
+  }, rest, {
+    "data-component": "flat-table-wrapper"
+  }), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
     ref: container,
     onFocus: () => {
       if (container.current === document.activeElement) {
@@ -179,7 +182,8 @@ const FlatTable = ({
     onBlur: () => setFocused(false),
     tabIndex: 0,
     overflowX: overflowX,
-    width: width
+    width: width,
+    "data-role": "flat-table-container"
   }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
     ref: tableRef,
     "data-component": "flat-table"
@@ -190,7 +194,8 @@ const FlatTable = ({
       getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
-    hasStickyFooter: hasStickyFooter
+    hasStickyFooter: hasStickyFooter,
+    "data-role": "flat-table-footer"
   }, footer));
 };
 exports.FlatTable = FlatTable;

package/lib/components/textarea/textarea.component.js

@@ -125,7 +125,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
         scrollElement = scrollElement?.parentElement || null;
       }
       const scrollPosition = scrollElement?.scrollTop;
-      textarea.style.height = "0px";
+
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, textareaMinHeight)}px`;
       if (scrollElement && scrollPosition) {

package/package.json

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