@carbon/react 1.90.0 → 1.91.0-rc.0

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/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>;
         /**