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

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

@@ -1,31 +1,30 @@
 /**
- * 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.
  */
 
+//#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);
+	}));
 };
 
-export { defaultFilterRows };
+//#endregion
+export { defaultFilterRows };

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

@@ -1,83 +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.
  */
 
-import { AILabel } from '../../AILabel/index.js';
-import { isComponentElement } from '../../../internal/utils.js';
-import { getCellId } from './cells.js';
+import { AILabel } from "../../AILabel/index.js";
+import { isComponentElement } from "../../../internal/utils.js";
+import { getCellId } from "./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 = 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 || isComponentElement(decorator, 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 = getCellId(row.id, key);
+			cellsById[id] = {
+				id,
+				value: row[key],
+				isEditable: false,
+				isEditing: false,
+				isValid: true,
+				errors: null,
+				hasAILabelHeader: !!(slug || isComponentElement(decorator, AILabel)),
+				info: { header: key }
+			};
+			rowsById[row.id].cells[i] = id;
+		});
+	});
+	return {
+		rowIds,
+		rowsById,
+		cellsById
+	};
 };
 
-export { normalize as default };
+//#endregion
+export { normalize as default };

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

@@ -1,87 +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.
  */
 
-import { getCellId } from './cells.js';
-import { sortStates } from '../state/sortStates.js';
+import { sortStates } from "../state/sortStates.js";
+import { getCellId } from "./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[getCellId(a, key)];
-  const cellB = cellsById[getCellId(b, key)];
-  return sortRow(cellA?.value, cellB?.value, {
-    key,
-    sortDirection,
-    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[getCellId(a, key)];
+	const cellB = cellsById[getCellId(b, key)];
+	return sortRow(cellA?.value, cellB?.value, {
+		key,
+		sortDirection,
+		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);
 };
 
-export { compare, defaultSortRow, sortRows };
+//#endregion
+export { sortRows };

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -1,105 +1,77 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-var _span, _span2;
-const DataTableSkeleton = ({
-  headers,
-  rowCount = 5,
-  columnCount = 5,
-  zebra = false,
-  className,
-  showHeader = true,
-  showToolbar = true,
-  size = 'lg',
-  ...rest
-}) => {
-  const prefix = 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", _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 = usePrefix();
+	const dataTableSkeletonClasses = classNames(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__ */ jsx("tr", { children: columnsArray.map((j) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", {}) }, j)) }, i);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${prefix}--skeleton ${prefix}--data-table-container`,
+		children: [
+			showHeader ? /* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--data-table-header`,
+				children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--data-table-header__title` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--data-table-header__description` })]
+			}) : null,
+			showToolbar ? /* @__PURE__ */ jsx("section", {
+				"aria-label": "data table toolbar",
+				className: `${prefix}--table-toolbar`,
+				children: /* @__PURE__ */ jsx("div", {
+					className: `${prefix}--toolbar-content`,
+					children: /* @__PURE__ */ jsx("span", { className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm` })
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("table", {
+				className: dataTableSkeletonClasses,
+				...rest,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columnsArray.map((i) => /* @__PURE__ */ jsx("th", { children: headers ? /* @__PURE__ */ jsx("div", {
+					className: `${prefix}--table-header-label`,
+					children: headers[i]?.header
+				}) : /* @__PURE__ */ jsx("span", {}) }, i)) }) }), /* @__PURE__ */ 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: PropTypes.string,
+	columnCount: PropTypes.number,
+	headers: PropTypes.arrayOf(PropTypes.shape({ header: PropTypes.node.isRequired }).isRequired),
+	rowCount: PropTypes.number,
+	showHeader: PropTypes.bool,
+	showToolbar: PropTypes.bool,
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]),
+	zebra: PropTypes.bool
 };
 
-export { DataTableSkeleton as default };
+//#endregion
+export { DataTableSkeleton as default };

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -1,62 +1,55 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-const DatePickerSkeleton = ({
-  range,
-  id,
-  hideLabel,
-  className,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const dateInput = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--date-picker-container`
-  }, !hideLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--label`,
-    id: id
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--date-picker__input ${prefix}--skeleton`
-  }));
-  if (range) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${prefix}--form-item`
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className)
-    }, rest), dateInput, dateInput));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-item`
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className)
-  }, rest), dateInput));
+//#region src/components/DatePicker/DatePicker.Skeleton.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 DatePickerSkeleton = ({ range, id, hideLabel, className, ...rest }) => {
+	const prefix = usePrefix();
+	const dateInput = /* @__PURE__ */ jsxs("div", {
+		className: `${prefix}--date-picker-container`,
+		children: [!hideLabel && /* @__PURE__ */ jsx("span", {
+			className: `${prefix}--label`,
+			id
+		}), /* @__PURE__ */ jsx("div", { className: `${prefix}--date-picker__input ${prefix}--skeleton` })]
+	});
+	if (range) return /* @__PURE__ */ jsx("div", {
+		className: `${prefix}--form-item`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classNames(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className),
+			...rest,
+			children: [dateInput, dateInput]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `${prefix}--form-item`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className),
+			...rest,
+			children: dateInput
+		})
+	});
 };
 DatePickerSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether to hide the label.
-   */
-  hideLabel: PropTypes.bool,
-  /**
-   * Specify the id to add.
-   */
-  id: PropTypes.string,
-  /**
-   * Specify whether to render the range skeleton variant.
-   */
-  range: PropTypes.bool
+	className: PropTypes.string,
+	hideLabel: PropTypes.bool,
+	id: PropTypes.string,
+	range: PropTypes.bool
 };
 
-export { DatePickerSkeleton, DatePickerSkeleton as default };
+//#endregion
+export { DatePickerSkeleton as default };

package/es/components/DatePicker/DatePicker.d.ts

@@ -11,8 +11,10 @@ import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {
     /**
-     * Flatpickr prop passthrough enables direct date input, and when set to false,
-     * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
+     * Flatpickr prop passthrough enables direct date input, and when set to
+     * false, we must clear dates manually by resetting the value prop to an empty
+     * value (such as `""`, `null`, or `undefined`) or an array of all empty
+     * values, making it a controlled input.
      */
     allowInput?: boolean;
     /**