@carbon/react 1.90.0 → 1.91.0

package/es/components/Breadcrumb/Breadcrumb.Skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
@@ -11,14 +11,39 @@ export interface BreadcrumbSkeletonProps extends React.HTMLAttributes<HTMLDivEle
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * Specify the number of items
+     */
+    items?: number;
+    /**
+     * Optional prop to omit the trailing slash for the breadcrumbs
+     */
+    noTrailingSlash?: boolean;
+    /**
+     * Specify the size of the Breadcrumb. Currently
+     * supports the following: `sm` & `md` (default: 'md')
+     */
+    size?: 'sm' | 'md';
 }
-declare function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSkeleton({ className, items, noTrailingSlash, size, ...rest }: BreadcrumbSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbSkeleton {
     var propTypes: {
         /**
          * Specify an optional className to add.
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify the number of items
+         */
+        items: PropTypes.Requireable<number>;
+        /**
+         * Optional prop to omit the trailing slash for the breadcrumbs
+         */
+        noTrailingSlash: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Breadcrumb. Currently supports the following: `sm` & `md` (default: 'md')
+         */
+        size: PropTypes.Requireable<string>;
     };
 }
 export default BreadcrumbSkeleton;

package/es/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -11,7 +11,6 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _Item, _Item2, _Item3;
 function Item() {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", {
@@ -22,19 +21,43 @@ function Item() {
 }
 function BreadcrumbSkeleton({
   className,
+  items = 3,
+  noTrailingSlash,
+  size,
   ...rest
 }) {
   const prefix = usePrefix();
-  const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
+  const classes = cx({
+    [`${prefix}--breadcrumb`]: true,
+    [`${prefix}--skeleton`]: true,
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm'
+  }, className);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classes
-  }, rest), _Item || (_Item = /*#__PURE__*/React.createElement(Item, null)), _Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null)), _Item3 || (_Item3 = /*#__PURE__*/React.createElement(Item, null)));
+  }, rest), Array.from({
+    length: items
+  }, (_, i) => /*#__PURE__*/React.createElement(Item, {
+    key: i
+  })));
 }
 BreadcrumbSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /**
+   * Specify the number of items
+   */
+  items: PropTypes.number,
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool,
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following: `sm` & `md` (default: 'md')
+   */
+  size: PropTypes.oneOf(['sm', 'md'])
 };
 
 export { BreadcrumbSkeleton, BreadcrumbSkeleton as default };

package/es/components/Breadcrumb/Breadcrumb.js

@@ -53,7 +53,8 @@ Breadcrumb.propTypes = {
    */
   noTrailingSlash: PropTypes.bool,
   /**
-   * Specify the size of the Breadcrumb. Currently supports the following:
+   * Specify the size of the Breadcrumb. Currently
+   * supports the following: `sm` & `md` (default: 'md')
    */
   size: PropTypes.oneOf(['sm', 'md'])
 };

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/CodeSnippet/CodeSnippet.js

@@ -19,7 +19,7 @@ import { useId } from '../../internal/useId.js';
 import copy from 'copy-to-clipboard';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const rowHeightInPixels = 16;

package/es/components/ComboBox/ComboBox.js

@@ -27,6 +27,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, autoUpdate, flip, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
+import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 import { Text } from '../Text/Text.js';
@@ -43,18 +44,6 @@ const {
   ItemClick,
   FunctionSelectItem
 } = useCombobox.stateChangeTypes;
-const defaultItemToString = item => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
-    return item['label'];
-  }
-  return '';
-};
 const defaultShouldFilterItem = () => true;
 const autocompleteCustomFilter = ({
   item,

package/es/components/ComboButton/index.js

@@ -21,7 +21,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, hide, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 var _ChevronDown;

package/es/components/ComposedModal/ComposedModal.js

@@ -16,7 +16,7 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import { toggleClass } from '../../tools/toggleClass.js';
-import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
+import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import { wrapFocusWithoutSentinels, wrapFocus, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { LayoutConstraint } from '../Layout/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
+import { ArrowRight, ArrowLeft, Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { getNextIndex } from '../../internal/keyboard/navigation.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
@@ -75,7 +75,7 @@ const ContentSwitcher = ({
           });
         }
       }
-    } else if (selectedIndex !== index) {
+    } else if (selectedIndex !== index && (isKeyboardEvent(event) ? matches(event, [Enter, Space]) : true)) {
       setSelectedIndex(index);
       focusSwitch(index);
       onChange(event);

package/es/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/Copy/Copy.js

@@ -13,7 +13,7 @@ import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 

package/es/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/CopyButton/CopyButton.js

@@ -14,7 +14,7 @@ import Copy from '../Copy/Copy.js';
 import { LayoutConstraint } from '../Layout/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 function CopyButton({

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

@@ -20,7 +20,7 @@ declare const translationKeys: {
     readonly unselectRow: "carbon.table.row.unselect";
 };
 /**
- * Message ids that will be passed to translateWithId().
+ * Message IDs that will be passed to translateWithId().
  */
 type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -35,7 +35,6 @@ export interface DataTableCell<T> {
         header: string;
     };
     hasAILabelHeader?: boolean;
-    hasDecoratorHeader?: boolean;
 }
 type DataTableCells<T extends any[]> = {
     [K in keyof T]: DataTableCell<T[K]>;
@@ -54,8 +53,17 @@ export interface DataTableHeader {
     decorator?: ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
+    /**
+     * The headers for the table.
+     */
     headers: DataTableHeader[];
+    /**
+     * The rows for the table.
+     */
     rows: (DataTableRow<ColTypes> & RowType)[];
+    /**
+     * The rows that are currently selected.
+     */
     selectedRows: (DataTableRow<ColTypes> & RowType)[];
     getHeaderProps: (options: {
         header: DataTableHeader;
@@ -154,14 +162,36 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         [key: string]: unknown;
         hasAILabelHeader?: boolean;
-        hasDecoratorHeader?: boolean;
+        key: string;
     };
+    /**
+     * Handles input value changes.
+     */
     onInputChange: (event: ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
+    /**
+     * Sorts the table by a specific header.
+     */
     sortBy: (headerKey: string) => void;
+    /**
+     * Selects all rows.
+     */
     selectAll: () => void;
+    /**
+     * Selects or deselects a specific row.
+     */
     selectRow: (rowId: string) => void;
+    /**
+     * Expands or collapses a specific row.
+     */
     expandRow: (rowId: string) => void;
+    /**
+     * Expands or collapses all rows.
+     */
     expandAll: () => void;
+    /**
+     * Whether the table is using radio buttons for selection instead of
+     * checkboxes.
+     */
     radio: boolean | undefined;
 }
 export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
@@ -179,6 +209,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     locale?: string;
     overflowMenuOnHover?: boolean;
     radio?: boolean;
+    /**
+     * @deprecated Use `children` instead. This prop will be removed in
+     * the next major version.
+     *
+     * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function
+     */
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement;
     rows: Omit<DataTableRow<ColTypes>, 'cells'>[];
     size?: DataTableSize;
@@ -188,14 +224,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     useZebraStyles?: boolean;
 }
 /**
- * Data Tables are used to represent a collection of resources, displaying a
- * subset of their fields in columns, or headers. We prioritize direct updates
- * to the state of what we're rendering, so internally we end up normalizing the
- * given data and then denormalizing it when rendering.
- *
- * As a result, each part of the DataTable is accessible through look-up by id,
- * and updating the state of the single entity will cascade updates to the
- * consumer.
+ * DataTable components are used to represent a collection of resources,
+ * displaying a subset of their fields in columns, or headers. We prioritize
+ * direct updates to the state of what we're rendering, so internally we
+ * normalize the given data and then denormalize it at render time. Each part of
+ * the DataTable is accessible through look-up by ID, and updating the state of
+ * a single entity cascades updates to the consumer.
  */
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
@@ -266,7 +300,7 @@ export declare const DataTable: {
             enableToggle: PropTypes.Requireable<boolean>;
             expandIconDescription: PropTypes.Requireable<string>;
             id: PropTypes.Requireable<string>;
-            isExpanded: React.Validator;
+            isExpanded: PropTypes.Validator<boolean | null | undefined>;
             onExpand: PropTypes.Requireable<any>;
         };
     };
@@ -348,6 +382,10 @@ export declare const DataTable: {
     };
     TableToolbarMenu: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>;
     propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
          */
@@ -383,6 +421,13 @@ export declare const DataTable: {
          * Specify whether the control should be a radio button or inline checkbox
          */
         radio: PropTypes.Requireable<boolean>;
+        /**
+         * @deprecated Use `children` instead. This prop will be removed in
+         * the next major version.
+         *
+         * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function
+         */
+        render: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * The `rows` prop is where you provide us with a list of all the rows that
          * you want to render in the table. The only hard requirement is that this
@@ -409,13 +454,13 @@ export declare const DataTable: {
          */
         stickyHeader: PropTypes.Requireable<boolean>;
         /**
-         * Optional method that takes in a message id and returns an
+         * Optional method that takes in a message ID and returns an
          * internationalized string. See `DataTable.translationKeys` for all
-         * available message ids.
+         * available message IDs.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * `false` If true, will use a width of 'auto' instead of 100%
+         * If `true`, sets the table width to `auto` instead of `100%`.
          */
         useStaticWidth: PropTypes.Requireable<boolean>;
         /**