@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/es/components/DataTable/TableExpandRow.js

@@ -1,130 +1,93 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef, Children } from 'react';
-import { ChevronRight } from '@carbon/icons-react';
-import TableCell from './TableCell.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import TableSlugRow from './TableSlugRow.js';
-import TableDecoratorRow from './TableDecoratorRow.js';
-import { AILabel } from '../AILabel/index.js';
-import { isComponentElement } from '../../internal/utils.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { AILabel } from "../AILabel/index.js";
+import { isComponentElement } from "../../internal/utils.js";
+import TableCell from "./TableCell.js";
+import TableDecoratorRow from "./TableDecoratorRow.js";
+import TableSlugRow from "./TableSlugRow.js";
+import classNames from "classnames";
+import React, { Children, forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "@carbon/icons-react";
 
-/** Props shared between `TableRow` and `TableExpandRow`. */
-
-const TableExpandRow = /*#__PURE__*/forwardRef(({
-  ['aria-controls']: ariaControls,
-  ['aria-label']: ariaLabel,
-  ariaLabel: deprecatedAriaLabel,
-  className: rowClassName,
-  children,
-  isExpanded,
-  onExpand,
-  expandIconDescription,
-  isSelected,
-  expandHeader = 'expand',
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-
-  // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
-  let rowHasAILabel;
-  const decorator = Children.toArray(children).map(child => {
-    if (isComponentElement(child, TableSlugRow)) {
-      if (child.props.slug) {
-        rowHasAILabel = true;
-      }
-      return child;
-    } else if (isComponentElement(child, TableDecoratorRow)) {
-      if (isComponentElement(child.props.decorator, AILabel)) {
-        rowHasAILabel = true;
-      }
-      return child;
-    }
-  });
-  const normalizedChildren = Children.toArray(children).map(child => {
-    if (!isComponentElement(child, TableSlugRow) && !isComponentElement(child, TableDecoratorRow)) {
-      return child;
-    }
-  });
-  const className = cx({
-    [`${prefix}--parent-row`]: true,
-    [`${prefix}--expandable-row`]: isExpanded,
-    [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
-  }, rowClassName);
-  const previousValue = isExpanded ? 'collapsed' : undefined;
-  return /*#__PURE__*/React.createElement("tr", _extends({}, rest, {
-    ref: ref,
-    className: className,
-    "data-parent-row": true
-  }), decorator, /*#__PURE__*/React.createElement(TableCell, {
-    className: `${prefix}--table-expand`,
-    "data-previous-value": previousValue,
-    headers: expandHeader
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: `${prefix}--table-expand__button`,
-    onClick: onExpand,
-    title: expandIconDescription,
-    "aria-label": deprecatedAriaLabel || ariaLabel,
-    "aria-expanded": isExpanded,
-    "aria-controls": ariaControls
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: `${prefix}--table-expand__svg`,
-    "aria-label": expandIconDescription
-  }))), normalizedChildren);
+//#region src/components/DataTable/TableExpandRow.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const TableExpandRow = forwardRef(({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader = "expand", ...rest }, ref) => {
+	const prefix = usePrefix();
+	let rowHasAILabel;
+	const decorator = Children.toArray(children).map((child) => {
+		if (isComponentElement(child, TableSlugRow)) {
+			if (child.props.slug) rowHasAILabel = true;
+			return child;
+		} else if (isComponentElement(child, TableDecoratorRow)) {
+			if (isComponentElement(child.props.decorator, AILabel)) rowHasAILabel = true;
+			return child;
+		}
+	});
+	const normalizedChildren = Children.toArray(children).map((child) => {
+		if (!isComponentElement(child, TableSlugRow) && !isComponentElement(child, TableDecoratorRow)) return child;
+	});
+	const className = classNames({
+		[`${prefix}--parent-row`]: true,
+		[`${prefix}--expandable-row`]: isExpanded,
+		[`${prefix}--data-table--selected`]: isSelected,
+		[`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
+	}, rowClassName);
+	const previousValue = isExpanded ? "collapsed" : void 0;
+	return /* @__PURE__ */ jsxs("tr", {
+		...rest,
+		ref,
+		className,
+		"data-parent-row": true,
+		children: [
+			decorator,
+			/* @__PURE__ */ jsx(TableCell, {
+				className: `${prefix}--table-expand`,
+				"data-previous-value": previousValue,
+				headers: expandHeader,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${prefix}--table-expand__button`,
+					onClick: onExpand,
+					title: expandIconDescription,
+					"aria-label": deprecatedAriaLabel || ariaLabel,
+					"aria-expanded": isExpanded,
+					"aria-controls": ariaControls,
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						className: `${prefix}--table-expand__svg`,
+						"aria-label": expandIconDescription
+					})
+				})
+			}),
+			normalizedChildren
+		]
+	});
 });
 TableExpandRow.propTypes = {
-  /**
-   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
-   * TODO: make this required in v12
-   */
-  'aria-controls': PropTypes.string,
-  /**
-   * Specify the string read by a voice reader when the expand trigger is
-   * focused
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-  /**@ts-ignore*/
-  'aria-label': PropTypes.string,
-  /**
-   * Deprecated, please use `aria-label` instead.
-   * Specify the string read by a voice reader when the expand trigger is
-   * focused
-   */
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
-   */
-  expandHeader: PropTypes.string,
-  /**
-   * The description of the chevron right icon, to be put in its SVG `<title>` element.
-   */
-  expandIconDescription: PropTypes.string,
-  /**
-   * Specify whether this row is expanded or not. This helps coordinate data
-   * attributes so that `TableExpandRow` and `TableExpandedRow` work together
-   */
-  isExpanded: PropTypes.bool,
-  /**
-   * Specify if the row is selected
-   */
-  isSelected: PropTypes.bool,
-  /**
-   * Hook for when a listener initiates a request to expand the given row
-   */
-  onExpand: PropTypes.func.isRequired
+	"aria-controls": PropTypes.string,
+	"aria-label": PropTypes.string,
+	ariaLabel: PropTypes.string,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	expandHeader: PropTypes.string,
+	expandIconDescription: PropTypes.string,
+	isExpanded: PropTypes.bool,
+	isSelected: PropTypes.bool,
+	onExpand: PropTypes.func.isRequired
 };
-TableExpandRow.displayName = 'TableExpandRow';
+TableExpandRow.displayName = "TableExpandRow";
 
-export { TableExpandRow as default };
+//#endregion
+export { TableExpandRow as default };

package/es/components/DataTable/TableExpandedRow.js

@@ -1,62 +1,56 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
-import TableCell from './TableCell.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import TableCell from "./TableCell.js";
+import classNames from "classnames";
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const TableExpandedRow = ({
-  className: customClassName,
-  children,
-  colSpan,
-  ...rest
-}) => {
-  const rowRef = useRef(null);
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--expandable-row`, customClassName);
-  const toggleParentHoverClass = eventType => {
-    if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
-      const parentNode = rowRef.current.previousElementSibling;
-      if (eventType === 'enter') {
-        parentNode.classList.add(`${prefix}--expandable-row--hover`);
-      } else {
-        parentNode.classList.remove(`${prefix}--expandable-row--hover`);
-      }
-    }
-  };
-  return /*#__PURE__*/React.createElement("tr", _extends({
-    ref: rowRef,
-    onMouseEnter: () => toggleParentHoverClass('enter'),
-    onMouseLeave: () => toggleParentHoverClass('leave')
-  }, rest, {
-    className: className,
-    "data-child-row": true
-  }), /*#__PURE__*/React.createElement(TableCell, {
-    colSpan: colSpan
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--child-row-inner-container`
-  }, children)));
+//#region src/components/DataTable/TableExpandedRow.tsx
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const TableExpandedRow = ({ className: customClassName, children, colSpan, ...rest }) => {
+	const rowRef = useRef(null);
+	const prefix = usePrefix();
+	const className = classNames(`${prefix}--expandable-row`, customClassName);
+	const toggleParentHoverClass = (eventType) => {
+		if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
+			const parentNode = rowRef.current.previousElementSibling;
+			if (eventType === "enter") parentNode.classList.add(`${prefix}--expandable-row--hover`);
+			else parentNode.classList.remove(`${prefix}--expandable-row--hover`);
+		}
+	};
+	return /* @__PURE__ */ jsx("tr", {
+		ref: rowRef,
+		onMouseEnter: () => toggleParentHoverClass("enter"),
+		onMouseLeave: () => toggleParentHoverClass("leave"),
+		...rest,
+		className,
+		"data-child-row": true,
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan,
+			children: /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--child-row-inner-container`,
+				children
+			})
+		})
+	});
 };
 TableExpandedRow.propTypes = {
-  /**
-   * Pass in the contents for your TableExpandedRow
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * The width of the expanded row's internal cell
-   */
-  colSpan: PropTypes.number.isRequired
+	children: PropTypes.node,
+	className: PropTypes.string,
+	colSpan: PropTypes.number.isRequired
 };
 
-export { TableExpandedRow as default };
+//#endregion
+export { TableExpandedRow as default };

package/es/components/DataTable/TableHead.js

@@ -1,15 +1,17 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import wrapComponent from '../../tools/wrapComponent.js';
+import wrapComponent from "../../tools/wrapComponent.js";
 
+//#region src/components/DataTable/TableHead.tsx
 const TableHead = wrapComponent({
-  name: 'TableHead',
-  type: 'thead'
+	name: "TableHead",
+	type: "thead"
 });
 
-export { TableHead as default };
+//#endregion
+export { TableHead as default };