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

package/lib/components/DataTable/tools/denormalize.js

@@ -1,33 +1,38 @@
 /**
- * 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.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
 
+//#region src/components/DataTable/tools/denormalize.js
 /**
- * Counterpart to `normalize` for a collection of rows. This method unravels the
- * normalization step that we use to build the given parameters in order to
- * return a natural interface to working with rows for a consumer.
- *
- * The default heuristic here is to map through all the row ids and return the
- * value of the row for the given id, in addition to adding a `cells` key that
- * contains the results of mapping over the rows cells and getting individual
- * cell info.
- *
- * @param {Array<string>} rowIds array of row ids in the table
- * @param {object} rowsById object containing lookups for rows by id
- * @param {object} cellsById object containing lookups for cells by id
- */
+* Copyright IBM Corp. 2016, 2023
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Counterpart to `normalize` for a collection of rows. This method unravels the
+* normalization step that we use to build the given parameters in order to
+* return a natural interface to working with rows for a consumer.
+*
+* The default heuristic here is to map through all the row ids and return the
+* value of the row for the given id, in addition to adding a `cells` key that
+* contains the results of mapping over the rows cells and getting individual
+* cell info.
+*
+* @param {Array<string>} rowIds array of row ids in the table
+* @param {object} rowsById object containing lookups for rows by id
+* @param {object} cellsById object containing lookups for cells by id
+*/
 const denormalize = (rowIds, rowsById, cellsById) => {
-  return rowIds.map(id => ({
-    ...rowsById[id],
-    cells: rowsById[id].cells.map(cellId => cellsById[cellId])
-  }));
+	return rowIds.map((id) => ({
+		...rowsById[id],
+		cells: rowsById[id].cells.map((cellId) => cellsById[cellId])
+	}));
 };
 
-exports.default = denormalize;
+//#endregion
+exports.default = denormalize;

package/lib/components/DataTable/tools/filter.js

@@ -1,33 +1,31 @@
 /**
- * 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.
  */
 
-'use strict';
 
+//#region src/components/DataTable/tools/filter.ts
 /**
- * Filters row IDs based on whether any of the cell values in the row include
- * the input value as a substring. Boolean cell values are ignored.
- */
-const defaultFilterRows = ({
-  rowIds,
-  headers,
-  cellsById,
-  inputValue,
-  getCellId
-}) => {
-  const normalizedInput = inputValue.trim().toLowerCase();
-  if (!normalizedInput) return rowIds;
-  return rowIds.filter(rowId => headers.some(({
-    key
-  }) => {
-    const cellId = getCellId(rowId, key);
-    const cell = cellsById[cellId];
-    if (typeof cell.value === 'boolean') return false;
-    return String(cell.value).toLowerCase().includes(normalizedInput);
-  }));
+* 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.
+*/
+/**
+* Filters row IDs based on whether any of the cell values in the row include
+* the input value as a substring. Boolean cell values are ignored.
+*/
+const defaultFilterRows = ({ rowIds, headers, cellsById, inputValue, getCellId }) => {
+	const normalizedInput = inputValue.trim().toLowerCase();
+	if (!normalizedInput) return rowIds;
+	return rowIds.filter((rowId) => headers.some(({ key }) => {
+		const cell = cellsById[getCellId(rowId, key)];
+		if (typeof cell.value === "boolean") return false;
+		return String(cell.value).toLowerCase().includes(normalizedInput);
+	}));
 };
 
-exports.defaultFilterRows = defaultFilterRows;
+//#endregion
+exports.defaultFilterRows = defaultFilterRows;

package/lib/components/DataTable/tools/normalize.js

@@ -1,87 +1,68 @@
 /**
- * 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.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var index = require('../../AILabel/index.js');
-var utils = require('../../../internal/utils.js');
-var cells = require('./cells.js');
+const require_index = require('../../AILabel/index.js');
+const require_utils = require('../../../internal/utils.js');
+const require_cells = require('./cells.js');
 
+//#region src/components/DataTable/tools/normalize.js
 /**
- * Normalize a collection of rows with the given headers.
- *
- * @param {Array<object>} rows
- * @param {Array<object>} headers
- * @returns {object}
- */
+* 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.
+*/
+/**
+* Normalize a collection of rows with the given headers.
+*
+* @param {Array<object>} rows
+* @param {Array<object>} headers
+* @returns {object}
+*/
 const normalize = (rows, headers, prevState = {}) => {
-  const {
-    rowsById: prevRowsByIds
-  } = prevState;
-  const rowIds = new Array(rows.length);
-  const rowsById = {};
-  const cellsById = {};
-  rows.forEach((row, i) => {
-    rowIds[i] = row.id;
-    // Initialize the row info and state values, namely for selection and
-    // expansion
-    const {
-      id,
-      isSelected = false,
-      isExpanded = false,
-      disabled = false
-    } = row;
-    rowsById[id] = {
-      id,
-      isSelected,
-      isExpanded,
-      disabled,
-      cells: new Array(headers.length)
-    };
-
-    // If we have a previous state, and the row existed in that previous state,
-    // then we'll set the state values of the row to the previous state values.
-    if (prevRowsByIds && prevRowsByIds[row.id] !== undefined) {
-      rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
-      rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
-    }
-    headers.forEach(({
-      key,
-      slug,
-      decorator
-    }, i) => {
-      const id = cells.getCellId(row.id, key);
-      // Initialize the cell info and state values, namely for editing
-      cellsById[id] = {
-        id,
-        value: row[key],
-        isEditable: false,
-        isEditing: false,
-        isValid: true,
-        errors: null,
-        hasAILabelHeader: !!(slug || utils.isComponentElement(decorator, index.AILabel)),
-        info: {
-          header: key
-        }
-      };
-
-      // TODO: When working on inline edits, we'll need to derive the state
-      // values similarly to rows above.
-
-      rowsById[row.id].cells[i] = id;
-    });
-  });
-  return {
-    rowIds,
-    rowsById,
-    cellsById
-  };
+	const { rowsById: prevRowsByIds } = prevState;
+	const rowIds = new Array(rows.length);
+	const rowsById = {};
+	const cellsById = {};
+	rows.forEach((row, i) => {
+		rowIds[i] = row.id;
+		const { id, isSelected = false, isExpanded = false, disabled = false } = row;
+		rowsById[id] = {
+			id,
+			isSelected,
+			isExpanded,
+			disabled,
+			cells: new Array(headers.length)
+		};
+		if (prevRowsByIds && prevRowsByIds[row.id] !== void 0) {
+			rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
+			rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
+		}
+		headers.forEach(({ key, slug, decorator }, i) => {
+			const id = require_cells.getCellId(row.id, key);
+			cellsById[id] = {
+				id,
+				value: row[key],
+				isEditable: false,
+				isEditing: false,
+				isValid: true,
+				errors: null,
+				hasAILabelHeader: !!(slug || require_utils.isComponentElement(decorator, require_index.AILabel)),
+				info: { header: key }
+			};
+			rowsById[row.id].cells[i] = id;
+		});
+	});
+	return {
+		rowIds,
+		rowsById,
+		cellsById
+	};
 };
 
-exports.default = normalize;
+//#endregion
+exports.default = normalize;

package/lib/components/DataTable/tools/sorting.js

@@ -1,91 +1,66 @@
 /**
- * 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.
  */
 
-'use strict';
-
-var cells = require('./cells.js');
-var sortStates = require('../state/sortStates.js');
+const require_sortStates = require('../state/sortStates.js');
+const require_cells = require('./cells.js');
 
+//#region src/components/DataTable/tools/sorting.ts
 /**
- * Compare two values to determine their order. If both values have the same
- * type, the default sort algorithm will be used for those types. Otherwise, the
- * values will be converted to strings for comparison.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-const compare = (a, b, locale = 'en') => {
-  // prevent multiple null values in one column (sorting breaks)
-  if (a === null) a = '';
-  if (b === null) b = '';
-  if (typeof a === 'number' && typeof b === 'number') {
-    return a - b;
-  }
-  if (typeof a === 'string' && typeof b === 'string') {
-    return compareStrings(a, b, locale);
-  }
-  const aChild = a?.props?.children;
-  const bChild = b?.props?.children;
-  if (typeof aChild === 'string' && typeof bChild === 'string') {
-    return compareStrings(aChild, bChild, locale);
-  }
-  return compareStrings(String(a), String(b), locale);
+* 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.
+*/
+/**
+* Compare two values to determine their order. If both values have the same
+* type, the default sort algorithm will be used for those types. Otherwise, the
+* values will be converted to strings for comparison.
+*/
+const compare = (a, b, locale = "en") => {
+	if (a === null) a = "";
+	if (b === null) b = "";
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	if (typeof a === "string" && typeof b === "string") return compareStrings(a, b, locale);
+	const aChild = a?.props?.children;
+	const bChild = b?.props?.children;
+	if (typeof aChild === "string" && typeof bChild === "string") return compareStrings(aChild, bChild, locale);
+	return compareStrings(String(a), String(b), locale);
 };
-
 /**
- * Compares two strings using `localeCompare`.
- *
- * Note: Uses numeric comparison if strings are numeric.
- */
-const compareStrings = (a, b, locale = 'en') => {
-  const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
-  return a.localeCompare(b, locale, {
-    numeric: isNumeric
-  });
+* Compares two strings using `localeCompare`.
+*
+* Note: Uses numeric comparison if strings are numeric.
+*/
+const compareStrings = (a, b, locale = "en") => {
+	const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
+	return a.localeCompare(b, locale, { numeric: isNumeric });
 };
-
-// TODO: Should `SortRowParams` in
-// packages/react/src/components/DataTable/state/sorting.ts be used here?
-
 /**
- * Sorts table rows based on the provided column key and direction.
- */
-const sortRows = ({
-  rowIds,
-  cellsById,
-  sortDirection,
-  key,
-  locale = 'en',
-  sortRow = defaultSortRow
-}) => rowIds.slice().sort((a, b) => {
-  const cellA = cellsById[cells.getCellId(a, key)];
-  const cellB = cellsById[cells.getCellId(b, key)];
-  return sortRow(cellA?.value, cellB?.value, {
-    key,
-    sortDirection,
-    sortStates: sortStates.sortStates,
-    locale,
-    compare,
-    rowIds: [a, b]
-  });
+* Sorts table rows based on the provided column key and direction.
+*/
+const sortRows = ({ rowIds, cellsById, sortDirection, key, locale = "en", sortRow = defaultSortRow }) => rowIds.slice().sort((a, b) => {
+	const cellA = cellsById[require_cells.getCellId(a, key)];
+	const cellB = cellsById[require_cells.getCellId(b, key)];
+	return sortRow(cellA?.value, cellB?.value, {
+		key,
+		sortDirection,
+		sortStates: require_sortStates.sortStates,
+		locale,
+		compare,
+		rowIds: [a, b]
+	});
 });
-
 /**
- * Sorts table rows based on the sort direction.
- */
-const defaultSortRow = (cellA, cellB, {
-  sortDirection,
-  sortStates,
-  locale
-}) => {
-  if (sortDirection === sortStates.ASC) {
-    return compare(cellA, cellB, locale);
-  }
-  return compare(cellB, cellA, locale);
+* Sorts table rows based on the sort direction.
+*/
+const defaultSortRow = (cellA, cellB, { sortDirection, sortStates, locale }) => {
+	if (sortDirection === sortStates.ASC) return compare(cellA, cellB, locale);
+	return compare(cellB, cellA, locale);
 };
 
-exports.compare = compare;
-exports.defaultSortRow = defaultSortRow;
-exports.sortRows = sortRows;
+//#endregion
+exports.sortRows = sortRows;

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -1,109 +1,81 @@
 /**
- * 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.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
-var usePrefix = require('../../internal/usePrefix.js');
-
-var _span, _span2;
-const DataTableSkeleton = ({
-  headers,
-  rowCount = 5,
-  columnCount = 5,
-  zebra = false,
-  className,
-  showHeader = true,
-  showToolbar = true,
-  size = 'lg',
-  ...rest
-}) => {
-  const prefix = usePrefix.usePrefix();
-  const dataTableSkeletonClasses = cx(className, {
-    [`${prefix}--skeleton`]: true,
-    [`${prefix}--data-table`]: true,
-    [`${prefix}--data-table--${size}`]: size,
-    [`${prefix}--data-table--zebra`]: zebra
-  });
-  const rowRepeat = rowCount;
-  const rows = Array(rowRepeat);
-  const columnsArray = Array.from({
-    length: columnCount
-  }, (_, index) => index);
-  for (let i = 0; i < rowRepeat; i++) {
-    rows[i] = /*#__PURE__*/React.createElement("tr", {
-      key: i
-    }, columnsArray.map(j => /*#__PURE__*/React.createElement("td", {
-      key: j
-    }, _span || (_span = /*#__PURE__*/React.createElement("span", null)))));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--data-table-container`
-  }, showHeader ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-header`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-header__title`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-header__description`
-  })) : null, showToolbar ? /*#__PURE__*/React.createElement("section", {
-    "aria-label": "data table toolbar",
-    className: `${prefix}--table-toolbar`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--toolbar-content`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`
-  }))) : null, /*#__PURE__*/React.createElement("table", _rollupPluginBabelHelpers.extends({
-    className: dataTableSkeletonClasses
-  }, rest), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React.createElement("th", {
-    key: i
-  }, headers ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--table-header-label`
-  }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("tbody", null, rows)));
+//#region src/components/DataTableSkeleton/DataTableSkeleton.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 DataTableSkeleton = ({ headers, rowCount = 5, columnCount = 5, zebra = false, className, showHeader = true, showToolbar = true, size = "lg", ...rest }) => {
+	const prefix = require_usePrefix.usePrefix();
+	const dataTableSkeletonClasses = (0, classnames.default)(className, {
+		[`${prefix}--skeleton`]: true,
+		[`${prefix}--data-table`]: true,
+		[`${prefix}--data-table--${size}`]: size,
+		[`${prefix}--data-table--zebra`]: zebra
+	});
+	const rowRepeat = rowCount;
+	const rows = Array(rowRepeat);
+	const columnsArray = Array.from({ length: columnCount }, (_, index) => index);
+	for (let i = 0; i < rowRepeat; i++) rows[i] = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columnsArray.map((j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}) }, j)) }, i);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${prefix}--skeleton ${prefix}--data-table-container`,
+		children: [
+			showHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${prefix}--data-table-header`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--data-table-header__title` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--data-table-header__description` })]
+			}) : null,
+			showToolbar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				"aria-label": "data table toolbar",
+				className: `${prefix}--table-toolbar`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--toolbar-content`,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm` })
+				})
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: dataTableSkeletonClasses,
+				...rest,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: columnsArray.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: headers ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--table-header-label`,
+					children: headers[i]?.header
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}) }, i)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: rows })]
+			})
+		]
+	});
 };
 DataTableSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the number of columns that you want to render in the skeleton state
-   */
-  columnCount: PropTypes.number,
-  /**
-   * Optionally specify the displayed headers
-   */
-  headers: PropTypes.arrayOf(PropTypes.shape({
-    header: PropTypes.node.isRequired
-  }).isRequired),
-  /**
-   * Specify the number of rows that you want to render in the skeleton state
-   */
-  rowCount: PropTypes.number,
-  /**
-   * Specify if the table header should be rendered as part of the skeleton.
-   */
-  showHeader: PropTypes.bool,
-  /**
-   * Specify if the table toolbar should be rendered as part of the skeleton.
-   */
-  showToolbar: PropTypes.bool,
-  /**
-   * Changes the row height of table.
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /**
-   * Optionally specify whether you want the DataTable to be zebra striped
-   */
-  zebra: PropTypes.bool
+	className: prop_types.default.string,
+	columnCount: prop_types.default.number,
+	headers: prop_types.default.arrayOf(prop_types.default.shape({ header: prop_types.default.node.isRequired }).isRequired),
+	rowCount: prop_types.default.number,
+	showHeader: prop_types.default.bool,
+	showToolbar: prop_types.default.bool,
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]),
+	zebra: prop_types.default.bool
 };
 
-exports.default = DataTableSkeleton;
+//#endregion
+exports.default = DataTableSkeleton;