@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/DataTable/TableToolbarSearch.js

@@ -1,203 +1,113 @@
 /**
- * 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, useState, useEffect } from 'react';
-import Search from '../Search/Search.js';
-import '../Search/Search.Skeleton.js';
-import { useId } from '../../internal/useId.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { noopFn } from '../../internal/noopFn.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
+import Search_default from "../Search/index.js";
+import classNames from "classnames";
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/components/DataTable/TableToolbarSearch.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 translationIds = {
-  'carbon.table.toolbar.search.label': 'carbon.table.toolbar.search.label',
-  'carbon.table.toolbar.search.placeholder': 'carbon.table.toolbar.search.placeholder'
+	"carbon.table.toolbar.search.label": "carbon.table.toolbar.search.label",
+	"carbon.table.toolbar.search.placeholder": "carbon.table.toolbar.search.placeholder"
 };
 const defaultTranslations = {
-  [translationIds['carbon.table.toolbar.search.label']]: 'Filter table',
-  [translationIds['carbon.table.toolbar.search.placeholder']]: 'Filter table'
+	[translationIds["carbon.table.toolbar.search.label"]]: "Filter table",
+	[translationIds["carbon.table.toolbar.search.placeholder"]]: "Filter table"
 };
-const defaultTranslateWithId = messageId => {
-  return defaultTranslations[messageId];
+const defaultTranslateWithId = (messageId) => {
+	return defaultTranslations[messageId];
 };
-
-/**
- * @deprecated Passing `''` as the event sentinel is legacy compatibility
- * behavior for `DataTable` filtering. In the next major release, this type
- * should become an optional `ChangeEvent<HTMLInputElement>` instead.
- */
-
-const TableToolbarSearch = ({
-  className,
-  searchContainerClass,
-  onChange: onChangeProp,
-  onClear = noopFn,
-  translateWithId: t = defaultTranslateWithId,
-  placeholder,
-  labelText,
-  expanded: expandedProp,
-  defaultExpanded,
-  defaultValue,
-  disabled,
-  onExpand,
-  persistent = false,
-  id,
-  onBlur,
-  onFocus,
-  size = 'lg',
-  tabIndex = '0',
-  ...rest
-}) => {
-  const {
-    current: controlled
-  } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
-  const expanded = controlled ? expandedProp : expandedState;
-  const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useId('table-toolbar-search');
-  const [focusTarget, setFocusTarget] = useState(null);
-  const prefix = usePrefix();
-  useEffect(() => {
-    if (focusTarget) {
-      focusTarget.current?.querySelector?.('input')?.focus();
-      setFocusTarget(null);
-    }
-  }, [focusTarget]);
-  useEffect(() => {
-    if (defaultValue) {
-      // TODO: Remove the `''` event sentinel and pass `undefined` for
-      // value initialization in the next major release.
-      onChangeProp?.('', defaultValue);
-    }
-  },
-  //eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  const searchClasses = cx(className, searchContainerClass, {
-    [`${prefix}--toolbar-search-container-active`]: expanded,
-    [`${prefix}--toolbar-search-container-disabled`]: disabled,
-    [`${prefix}--toolbar-search-container-expandable`]: !persistent,
-    [`${prefix}--toolbar-search-container-persistent`]: persistent
-  });
-  const handleExpand = (event, value = !expanded) => {
-    if (!disabled) {
-      if (!controlled && !persistent) {
-        setExpandedState(value);
-      }
-      if (onExpand) {
-        onExpand(event, value);
-      }
-    }
-  };
-  const onChange = e => {
-    setValue(e.target.value);
-    if (onChangeProp) {
-      onChangeProp(e, e.target.value);
-    }
-  };
-  const handleOnFocus = event => handleExpand(event, true);
-  const handleOnBlur = event => !value && handleExpand(event, false);
-  return /*#__PURE__*/React.createElement(Search, _extends({
-    disabled: disabled,
-    className: searchClasses,
-    value: value,
-    id: typeof id !== 'undefined' ? id : uniqueId,
-    labelText: labelText || t('carbon.table.toolbar.search.label'),
-    placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
-    onChange: onChange,
-    onClear: onClear,
-    onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
-    onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
-    size: size
-    // HTMLAttributes defines tabIndex as number | undefined but in reality it
-    // also accepts a string, so we cast here to convince Typescript this is okay.
-    ,
-    tabIndex: tabIndex
-  }, rest));
+const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size = "lg", tabIndex = "0", ...rest }) => {
+	const { current: controlled } = useRef(expandedProp !== void 0);
+	const [expandedState, setExpandedState] = useState(Boolean(defaultExpanded || defaultValue));
+	const expanded = controlled ? expandedProp : expandedState;
+	const [value, setValue] = useState(defaultValue || "");
+	const uniqueId = useId("table-toolbar-search");
+	const [focusTarget, setFocusTarget] = useState(null);
+	const prefix = usePrefix();
+	useEffect(() => {
+		if (focusTarget) {
+			focusTarget.current?.querySelector?.("input")?.focus();
+			setFocusTarget(null);
+		}
+	}, [focusTarget]);
+	useEffect(() => {
+		if (defaultValue) onChangeProp?.("", defaultValue);
+	}, []);
+	const searchClasses = classNames(className, searchContainerClass, {
+		[`${prefix}--toolbar-search-container-active`]: expanded,
+		[`${prefix}--toolbar-search-container-disabled`]: disabled,
+		[`${prefix}--toolbar-search-container-expandable`]: !persistent,
+		[`${prefix}--toolbar-search-container-persistent`]: persistent
+	});
+	const handleExpand = (event, value = !expanded) => {
+		if (!disabled) {
+			if (!controlled && !persistent) setExpandedState(value);
+			if (onExpand) onExpand(event, value);
+		}
+	};
+	const onChange = (e) => {
+		setValue(e.target.value);
+		if (onChangeProp) onChangeProp(e, e.target.value);
+	};
+	const handleOnFocus = (event) => handleExpand(event, true);
+	const handleOnBlur = (event) => !value && handleExpand(event, false);
+	return /* @__PURE__ */ jsx(Search_default, {
+		disabled,
+		className: searchClasses,
+		value,
+		id: typeof id !== "undefined" ? id : uniqueId,
+		labelText: labelText || t("carbon.table.toolbar.search.label"),
+		placeholder: placeholder || t("carbon.table.toolbar.search.placeholder"),
+		onChange,
+		onClear,
+		onFocus: onFocus ? (event) => onFocus(event, handleExpand) : handleOnFocus,
+		onBlur: onBlur ? (event) => onBlur(event, handleExpand) : handleOnBlur,
+		size,
+		tabIndex,
+		...rest
+	});
 };
 TableToolbarSearch.propTypes = {
-  children: PropTypes.node,
-  /**
-   * Provide an optional class name for the search container
-   */
-  className: PropTypes.string,
-  /**
-   * Specifies if the search should initially render in an expanded state
-   */
-  defaultExpanded: PropTypes.bool,
-  /**
-   * Provide an optional default value for the Search component
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * Specifies if the search should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specifies if the search should expand
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Provide an optional id for the search container
-   */
-  id: PropTypes.string,
-  /**
-   * Provide an optional label text for the Search component icon
-   */
-  labelText: PropTypes.string,
-  /**
-   * Provide an optional function to be called when the search input loses focus, this will be
-   * passed the event as the first parameter and a function to handle the expanding of the search
-   * input as the second
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Provide an optional hook that is called each time the input is updated
-   */
-  onChange: PropTypes.func,
-  /**
-   * Optional callback called when the search value is cleared.
-   */
-  onClear: PropTypes.func,
-  /**
-   * Provide an optional hook that is called each time the input is expanded
-   */
-  onExpand: PropTypes.func,
-  /**
-   * Provide an optional function to be called when the search input gains focus, this will be
-   * passed the event as the first parameter and a function to handle the expanding of the search
-   * input as the second.
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Whether the search should be allowed to expand
-   */
-  persistent: PropTypes.bool,
-  /**
-   * Provide an optional placeholder text for the Search component
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Provide an optional className for the overall container of the Search
-   */
-  searchContainerClass: PropTypes.string,
-  /**
-   * Specify the size of the Search
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
-   */
-  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func
+	children: PropTypes.node,
+	className: PropTypes.string,
+	defaultExpanded: PropTypes.bool,
+	defaultValue: PropTypes.string,
+	disabled: PropTypes.bool,
+	expanded: PropTypes.bool,
+	id: PropTypes.string,
+	labelText: PropTypes.string,
+	onBlur: PropTypes.func,
+	onChange: PropTypes.func,
+	onClear: PropTypes.func,
+	onExpand: PropTypes.func,
+	onFocus: PropTypes.func,
+	persistent: PropTypes.bool,
+	placeholder: PropTypes.string,
+	searchContainerClass: PropTypes.string,
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg"
+	]),
+	tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	translateWithId: PropTypes.func
 };
 
-export { TableToolbarSearch as default };
+//#endregion
+export { TableToolbarSearch as default };

package/es/components/DataTable/state/getDerivedStateFromProps.js

@@ -1,54 +1,49 @@
 /**
- * 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 { initialSortState, getSortedState } from './sorting.js';
-import normalize from '../tools/normalize.js';
+import { getSortedState, initialSortState } from "./sorting.js";
+import normalize from "../tools/normalize.js";
 
+//#region src/components/DataTable/state/getDerivedStateFromProps.js
 /**
- * Helper to derive the next state from the given props and the
- * prevState. Potential future-facing API hook for React v17.
- *
- * Currently, it's being used as a way to normalize the incoming data that we
- * are receiving for rows
- */
+* 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.
+*/
+/**
+* Helper to derive the next state from the given props and the
+* prevState. Potential future-facing API hook for React v17.
+*
+* Currently, it's being used as a way to normalize the incoming data that we
+* are receiving for rows
+*/
 const getDerivedStateFromProps = (props, prevState) => {
-  const {
-    rowIds,
-    rowsById,
-    cellsById
-  } = normalize(props.rows, props.headers, prevState);
-  const state = {
-    rowIds,
-    rowsById,
-    cellsById,
-    sortDirection: prevState.sortDirection || initialSortState,
-    sortHeaderKey: prevState.sortHeaderKey || null,
-    // Copy over rowIds so the reference doesn't mutate the stored
-    // `initialRowOrder`
-    initialRowOrder: rowIds.slice(),
-    filterInputValue: prevState.filterInputValue || null,
-    // Optional state field to indicate whether a consumer should show a
-    // batch actions menu
-    shouldShowBatchActions: prevState.shouldShowBatchActions || false,
-    // TODO: Investigate deleting this property when this util is ported to
-    // TypeScript. The only reason it was added was to address a type error in
-    // packages/react/src/components/DataTable/DataTable.tsx
-    isExpandedAll: false
-  };
-  if (prevState.sortDirection && prevState.sortHeaderKey) {
-    const {
-      rowIds
-    } = getSortedState(props, state, prevState.sortHeaderKey, prevState.sortDirection);
-    state.rowIds = rowIds;
-  }
-  state.isExpandedAll = state.rowIds.every(id => {
-    return state.rowsById[id].isExpanded === true;
-  });
-  return state;
+	const { rowIds, rowsById, cellsById } = normalize(props.rows, props.headers, prevState);
+	const state = {
+		rowIds,
+		rowsById,
+		cellsById,
+		sortDirection: prevState.sortDirection || initialSortState,
+		sortHeaderKey: prevState.sortHeaderKey || null,
+		initialRowOrder: rowIds.slice(),
+		filterInputValue: prevState.filterInputValue || null,
+		shouldShowBatchActions: prevState.shouldShowBatchActions || false,
+		isExpandedAll: false
+	};
+	if (prevState.sortDirection && prevState.sortHeaderKey) {
+		const { rowIds } = getSortedState(props, state, prevState.sortHeaderKey, prevState.sortDirection);
+		state.rowIds = rowIds;
+	}
+	state.isExpandedAll = state.rowIds.every((id) => {
+		return state.rowsById[id].isExpanded === true;
+	});
+	return state;
 };
 
-export { getDerivedStateFromProps as default };
+//#endregion
+export { getDerivedStateFromProps as default };

package/es/components/DataTable/state/sortStates.js

@@ -1,19 +1,21 @@
 /**
- * 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/state/sortStates.ts
 /**
- * We currently support the following sorting states for DataTable headers,
- * namely: `NONE` for no sorting being applied, and then `DESC` and `ASC` for
- * the corresponding direction of the sorting order.
- */
+* We currently support the following sorting states for DataTable headers,
+* namely: `NONE` for no sorting being applied, and then `DESC` and `ASC` for
+* the corresponding direction of the sorting order.
+*/
 const sortStates = {
-  NONE: 'NONE',
-  DESC: 'DESC',
-  ASC: 'ASC'
+	NONE: "NONE",
+	DESC: "DESC",
+	ASC: "ASC"
 };
 
-export { sortStates };
+//#endregion
+export { sortStates };

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

@@ -1,88 +1,69 @@
 /**
- * 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 { sortStates } from './sortStates.js';
-import { sortRows } from '../tools/sorting.js';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+import { sortStates } from "./sortStates.js";
+import { sortRows } from "../tools/sorting.js";
 
+//#region src/components/DataTable/state/sorting.ts
+/**
+* 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 initialSortState = sortStates.NONE;
-
 /**
- * Gets the next sort direction for a header.
- *
- * @param prevHeader - Key of the previously sorted header.
- * @param currentHeader - Key of the currently selected header.
- * @param prevState - Previous sort direction.
- */
+* Gets the next sort direction for a header.
+*
+* @param prevHeader - Key of the previously sorted header.
+* @param currentHeader - Key of the currently selected header.
+* @param prevState - Previous sort direction.
+*/
 const getNextSortDirection = (prevHeader, currentHeader, prevState) => {
-  // Cycle for sorting the same header: NONE -> ASC -> DESC -> NONE.
-  if (prevHeader === currentHeader) {
-    switch (prevState) {
-      case sortStates.NONE:
-        return sortStates.ASC;
-      case sortStates.ASC:
-        return sortStates.DESC;
-      case sortStates.DESC:
-        return sortStates.NONE;
-    }
-  }
-
-  // Sorting a new header starts at ascending order.
-  return sortStates.ASC;
+	if (prevHeader === currentHeader) switch (prevState) {
+		case sortStates.NONE: return sortStates.ASC;
+		case sortStates.ASC: return sortStates.DESC;
+		case sortStates.DESC: return sortStates.NONE;
+	}
+	return sortStates.ASC;
 };
-
 /**
- * Gets the next sort state.
- *
- * @param props - Component props.
- * @param state - Current table state.
- * @param key - Header key to sort by.
- */
-const getNextSortState = (props, state, {
-  key
-}) => {
-  const {
-    sortDirection,
-    sortHeaderKey
-  } = state;
-  const nextSortDirection = getNextSortDirection(key, sortHeaderKey ?? '', sortDirection);
-  return getSortedState(props, state, key, nextSortDirection);
+* Gets the next sort state.
+*
+* @param props - Component props.
+* @param state - Current table state.
+* @param key - Header key to sort by.
+*/
+const getNextSortState = (props, state, { key }) => {
+	const { sortDirection, sortHeaderKey } = state;
+	return getSortedState(props, state, key, getNextSortDirection(key, sortHeaderKey ?? "", sortDirection));
 };
-
 /**
- * Gets a sort state update.
- *
- * @param props - Component props.
- * @param state - Current state of the table.
- * @param key - Header key to sort by.
- * @param sortDirection - Sort direction to apply.
- */
-const getSortedState = ({
-  locale,
-  sortRow
-}, {
-  rowIds,
-  cellsById,
-  initialRowOrder
-}, key, sortDirection) => {
-  const nextRowIds = sortDirection !== sortStates.NONE ? sortRows({
-    rowIds,
-    cellsById,
-    sortDirection,
-    key,
-    locale,
-    sortRow
-  }) : initialRowOrder;
-  return {
-    sortHeaderKey: key,
-    sortDirection,
-    rowIds: nextRowIds
-  };
+* Gets a sort state update.
+*
+* @param props - Component props.
+* @param state - Current state of the table.
+* @param key - Header key to sort by.
+* @param sortDirection - Sort direction to apply.
+*/
+const getSortedState = ({ locale, sortRow }, { rowIds, cellsById, initialRowOrder }, key, sortDirection) => {
+	return {
+		sortHeaderKey: key,
+		sortDirection,
+		rowIds: sortDirection !== sortStates.NONE ? sortRows({
+			rowIds,
+			cellsById,
+			sortDirection,
+			key,
+			locale,
+			sortRow
+		}) : initialRowOrder
+	};
 };
 
-export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };
+//#endregion
+export { getNextSortState, getSortedState, initialSortState };

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

@@ -1,16 +1,24 @@
 /**
- * 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/cells.ts
 /**
- * Generates a unique cell ID by combining the row ID and header.
- *
- * Generic helper used to consolidate all call sites for getting a cell ID into
- * one method.
- */
+* 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.
+*/
+/**
+* Generates a unique cell ID by combining the row ID and header.
+*
+* Generic helper used to consolidate all call sites for getting a cell ID into
+* one method.
+*/
 const getCellId = (rowId, header) => `${rowId}:${header}`;
 
-export { getCellId };
+//#endregion
+export { getCellId };

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

@@ -1,29 +1,37 @@
 /**
- * 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/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])
+	}));
 };
 
-export { denormalize as default };
+//#endregion
+export { denormalize as default };