@carbon/react 1.89.0-rc.1 → 1.90.0-rc.0

package/README.md

@@ -114,14 +114,14 @@ function MyComponent() {
 ```
 
 For a full list of icons available, checkout our
-[website](https://www.carbondesignsystem.com/guidelines/icons/library/).
+[website](https://carbondesignsystem.com/elements/icons/library/).
 
 ## 📖 API Documentation
 
 If you're looking for `@carbon/react` API documentation, check out:
 
 - [Storybook](https://react.carbondesignsystem.com/)
-- [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library/)
+- [Icon Library](https://carbondesignsystem.com/elements/icons/library/)
 
 ## 🙌 Contributing
 

package/es/components/ComposedModal/ComposedModal.js

@@ -24,7 +24,7 @@ import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { deprecate } from '../../prop-types/deprecate.js';
-import { unstable__Dialog } from '../Dialog/index.js';
+import { Dialog } from '../Dialog/Dialog.js';
 import { warning } from '../../internal/warning.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
@@ -166,9 +166,14 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
     evt.stopPropagation();
-    const containsModalFooter = Children.toArray(childrenWithProps).some(child => isComponentElement(child, ModalFooter));
-    const isPassive = !containsModalFooter;
-    const shouldCloseOnOutsideClick = isPassive ? preventCloseOnClickOutside !== false : preventCloseOnClickOutside === true;
+    const shouldCloseOnOutsideClick =
+    // Passive modals can close on clicks outside the modal when
+    // preventCloseOnClickOutside is undefined or explicitly set to false.
+    isPassive && !preventCloseOnClickOutside ||
+    // Non-passive modals have to explicitly opt-in for close on outside
+    // behavior by explicitly setting preventCloseOnClickOutside to false,
+    // rather than just leaving it undefined.
+    !isPassive && preventCloseOnClickOutside === false;
     if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
@@ -252,6 +257,12 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         return child;
     }
   });
+
+  // Modals without a footer are considered passive and carry limitations as
+  // outlined in the design spec.
+  const containsModalFooter = Children.toArray(childrenWithProps).some(child => isComponentElement(child, ModalFooter));
+  const isPassive = !containsModalFooter;
+  process.env.NODE_ENV !== "production" ? warning(!(!isPassive && preventCloseOnClickOutside === false), '`<ComposedModal>` prop `preventCloseOnClickOutside` should not be ' + '`false` when `<ModalFooter>` is present. Transactional, non-passive ' + 'Modals should not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal') : void 0;
   useEffect(() => {
     if (!open) return;
     const handleEscapeKey = event => {
@@ -304,7 +315,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'sm'
   }) : null;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,

package/es/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import { type SortRowFn } from './state/sorting';
 import type { DataTableSortState } from './state/sortStates';
 import { TranslateWithId } from '../../types/common';
 declare const translationKeys: {
@@ -181,13 +182,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement;
     rows: Omit<DataTableRow<ColTypes>, 'cells'>[];
     size?: DataTableSize;
-    sortRow?: (cellA: any, cellB: any, options: {
-        sortDirection: DataTableSortState;
-        sortStates: Record<DataTableSortState, DataTableSortState>;
-        locale: string;
-        key: string;
-        compare: (a: number | string, b: number | string, locale?: string) => number;
-    }) => number;
+    sortRow?: SortRowFn;
     stickyHeader?: boolean;
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
@@ -286,7 +281,7 @@ export declare const DataTable: {
     };
     TableHead: (props: React.HTMLAttributes<"thead">) => React.ReactElement<any>;
     TableHeader: React.ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
-    TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
     TableSelectAll: {
         ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: import("./TableSelectAll").TableSelectAllProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {

package/es/components/DataTable/DataTable.js

@@ -549,9 +549,16 @@ const DataTable = props => {
    * @param headerKey - The field for the header that we are sorting by.
    */
   const handleSortBy = headerKey => () => {
-    setState(prev => getNextSortState(props, prev, {
-      key: headerKey
-    }));
+    setState(prev => {
+      const sortState = getNextSortState(props, prev, {
+        key: headerKey
+      });
+      return {
+        ...prev,
+        // Preserve ALL existing state
+        ...sortState // Then apply only the sorting changes
+      };
+    });
   };
 
   /**

package/es/components/DataTable/TableExpandRow.d.ts

@@ -4,13 +4,41 @@
  * 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 React, { type MouseEventHandler, type PropsWithChildren } from 'react';
-import { TableRowProps } from './TableRow';
-export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+import React, { type HTMLAttributes, type MouseEventHandler, type PropsWithChildren } from 'react';
+/** Props shared between `TableRow` and `TableExpandRow`. */
+export interface TableRowExpandInteropProps {
+    /**
+     * @deprecated Use `aria-label` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    'aria-label'?: string;
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+     */
+    'aria-controls'?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded?: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify if the row is selected.
+     */
+    isSelected?: boolean;
+}
+export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']?: string;
+    'aria-controls'?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the
@@ -21,7 +49,7 @@ export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    'aria-label': 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
      */

package/es/components/DataTable/TableExpandRow.js

@@ -17,6 +17,8 @@ import TableDecoratorRow from './TableDecoratorRow.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 
+/** Props shared between `TableRow` and `TableExpandRow`. */
+
 const TableExpandRow = /*#__PURE__*/React.forwardRef(({
   ['aria-controls']: ariaControls,
   ['aria-label']: ariaLabel,
@@ -85,13 +87,13 @@ 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,
+  'aria-controls': PropTypes.string,
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
   /**@ts-ignore*/
-  ['aria-label']: PropTypes.string,
+  'aria-label': PropTypes.string,
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is

package/es/components/DataTable/TableHeader.d.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
-import { sortStates } from './state/sorting';
 import { TranslateWithId } from '../../types/common';
-import { DataTableSortState } from './state/sortStates';
+import { sortStates, type DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
     header: ReactNode;

package/es/components/DataTable/TableHeader.js

@@ -10,12 +10,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, cloneElement } from 'react';
 import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
-import './state/sorting.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { sortStates } from './state/sortStates.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { sortStates } from './state/sortStates.js';
 
 const defaultScope = 'col';
 const translationKeys = {

package/es/components/DataTable/TableRow.d.ts

@@ -5,15 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+import type { TableRowExpandInteropProps } from './TableExpandRow';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, TableRowExpandInteropProps {
     /**
      * Specify an optional className to be applied to the container node
      */
     className?: string;
-    /**
-     * Specify if the row is selected
-     */
-    isSelected?: boolean;
 }
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

package/es/components/DataTable/TableRow.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { Children } from 'react';
+import React, { forwardRef, Children } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,28 +15,10 @@ import TableDecoratorRow from './TableDecoratorRow.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 
-const TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const prefix = usePrefix();
-  let rowHasAILabel;
-  if (props?.children) {
-    // TODO: Why is this loop a `map`? It's not returning anything. Ideally,
-    // it seems that it should be a `some`. Maybe I'm missing something?
-    Children.toArray(props.children).map(child => {
-      if (isComponentElement(child, TableSlugRow)) {
-        if (child.props.slug) {
-          rowHasAILabel = true;
-        }
-      } else if (isComponentElement(child, TableDecoratorRow) && isComponentElement(child.props.decorator, AILabel)) {
-        rowHasAILabel = true;
-      }
-    });
-  }
+const frFn = forwardRef;
+const TableRow = frFn((props, ref) => {
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
-  const className = cx(props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
-  });
   const {
     ariaLabel,
     'aria-label': ariaLabelAlt,
@@ -46,6 +28,17 @@ const TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
     isSelected,
     ...cleanProps
   } = props;
+  const prefix = usePrefix();
+  const rowHasAILabel = Children.toArray(props.children).some(child => {
+    if (isComponentElement(child, TableSlugRow)) {
+      return !!child.props.slug;
+    }
+    return isComponentElement(child, TableDecoratorRow) && isComponentElement(child.props.decorator, AILabel);
+  });
+  const className = cx(props.className, {
+    [`${prefix}--data-table--selected`]: isSelected,
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
+  });
   if (className) {
     cleanProps.className = className;
   }
@@ -61,7 +54,27 @@ TableRow.propTypes = {
   /**
    * Specify if the row is selected
    */
-  isSelected: PropTypes.bool
+  isSelected: PropTypes.bool,
+  /**
+   * Non-standard alias for `aria-label`.
+   */
+  ariaLabel: PropTypes.string,
+  /**
+   * Accessible label for the row element.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * Associates this row with the id of the corresponding expanded row content.
+   */
+  'aria-controls': PropTypes.string,
+  /**
+   * Handler called when the row’s expand toggle is clicked.
+   */
+  onExpand: PropTypes.func,
+  /**
+   * Flag indicating whether the row is currently expanded.
+   */
+  isExpanded: PropTypes.bool
 };
 
 export { TableRow as default };

package/es/components/DataTable/state/sorting.d.ts

@@ -1,15 +1,56 @@
-export { sortStates };
-export const initialSortState: import("./sortStates").DataTableSortState;
-export function getNextSortDirection(prevHeader: string, header: string, prevState: string): string;
-export function getNextSortState(props: any, state: any, { key }: {
-    key: any;
-}): any;
-export function getSortedState(props: {
+/**
+ * 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.
+ */
+import { type DataTableSortState } from './sortStates';
+import type { DataTableCell } from '../DataTable';
+export interface SortRowParams {
+    key: string;
+    sortDirection: DataTableSortState;
+    sortStates: Record<DataTableSortState, DataTableSortState>;
     locale: string;
-    sortRows: Function;
-}, state: {
-    rowIds: Array<string>;
-    cellsById: object;
-    initialRowOrder: Array<string>;
-}, key: string, sortDirection: string): object;
-import { sortStates } from './sortStates';
+    compare: (a: string | number, b: string | number, locale?: string) => number;
+}
+export type SortRowFn = (cellA: any, cellB: any, options: SortRowParams) => number;
+interface Props {
+    locale?: string;
+    sortRow?: SortRowFn;
+}
+interface State<ColTypes extends any[]> {
+    rowIds: string[];
+    cellsById: Record<string, DataTableCell<ColTypes[number]>>;
+    initialRowOrder: string[];
+    sortHeaderKey: string | null;
+    sortDirection: DataTableSortState;
+}
+export declare const initialSortState: DataTableSortState;
+/**
+ * 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.
+ */
+export declare const getNextSortDirection: (prevHeader: string, currentHeader: string, prevState: DataTableSortState) => DataTableSortState;
+/**
+ * Gets the next sort state.
+ *
+ * @param props - Component props.
+ * @param state - Current table state.
+ * @param key - Header key to sort by.
+ */
+export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+    key: string;
+}) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
+/**
+ * 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.
+ */
+export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export {};

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

@@ -8,37 +8,39 @@
 import { sortStates } from './sortStates.js';
 import { sortRows } from '../tools/sorting.js';
 
-// Our initialSortState should be `NONE`, unless a consumer has specified a
-// different initialSortState
 const initialSortState = sortStates.NONE;
 
 /**
- * Utility used to get the next sort state given the following pieces of
- * information:
+ * Gets the next sort direction for a header.
  *
- * @param {string} prevHeader the value of the previous header
- * @param {string} header the value of the currently selected header
- * @param {string} prevState the previous sort state of the table
- * @returns {string}
+ * @param prevHeader - Key of the previously sorted header.
+ * @param currentHeader - Key of the currently selected header.
+ * @param prevState - Previous sort direction.
  */
-const getNextSortDirection = (prevHeader, header, prevState) => {
-  // If the previous header is equivalent to the current header, we know that we
-  // have to derive the next sort state from the previous sort state
-  if (prevHeader === header) {
-    // When transitioning, we know that the sequence of states is as follows:
-    // NONE -> ASC -> DESC -> NONE
-    if (prevState === 'NONE') {
-      return sortStates.ASC;
+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;
     }
-    if (prevState === 'ASC') {
-      return sortStates.DESC;
-    }
-    return sortStates.NONE;
   }
-  // Otherwise, we have selected a new header and need to start off by sorting
-  // in descending order by default
+
+  // Sorting a new header starts at ascending order.
   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
 }) => {
@@ -46,38 +48,26 @@ const getNextSortState = (props, state, {
     sortDirection,
     sortHeaderKey
   } = state;
-  const nextSortDirection = getNextSortDirection(key, sortHeaderKey, sortDirection);
+  const nextSortDirection = getNextSortDirection(key, sortHeaderKey ?? '', sortDirection);
   return getSortedState(props, state, key, nextSortDirection);
 };
 
 /**
- * Derive the set of sorted state fields from props and state for the given
- * header key and sortDirection
+ * Gets a sort state update.
  *
- * @param {object} props
- * @param {string} props.locale The current locale
- * @param {Function} props.sortRows Method to handle sorting a collection of
- * rows
- * @param {object} state
- * @param {Array<string>} state.rowIds Array of row ids
- * @param {object} state.cellsById Lookup object for cells by id
- * @param {Array<string>} state.initialRowOrder Initial row order for the
- * current set of rows
- * @param {string} key The key for the given header we are serving the
- * sorted state for
- * @param {string} sortDirection The sortState that we want to order by
- * @returns {object}
+ * @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 = (props, state, key, sortDirection) => {
-  const {
-    rowIds,
-    cellsById,
-    initialRowOrder
-  } = state;
-  const {
-    locale,
-    sortRow
-  } = props;
+const getSortedState = ({
+  locale,
+  sortRow
+}, {
+  rowIds,
+  cellsById,
+  initialRowOrder
+}, key, sortDirection) => {
   const nextRowIds = sortDirection !== sortStates.NONE ? sortRows({
     rowIds,
     cellsById,
@@ -88,9 +78,9 @@ const getSortedState = (props, state, key, sortDirection) => {
   }) : initialRowOrder;
   return {
     sortHeaderKey: key,
-    sortDirection: sortDirection,
+    sortDirection,
     rowIds: nextRowIds
   };
 };
 
-export { getNextSortDirection, getNextSortState, getSortedState, initialSortState, sortStates };
+export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };

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

@@ -42,6 +42,10 @@ const compareStrings = (a, b, locale = 'en') => {
     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.
  */