@carbon/react 1.90.0 → 1.91.0

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -15,7 +15,6 @@ var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 
-var _Item, _Item2, _Item3;
 function Item() {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React.createElement("div", {
@@ -26,19 +25,43 @@ function Item() {
 }
 function BreadcrumbSkeleton({
   className,
+  items = 3,
+  noTrailingSlash,
+  size,
   ...rest
 }) {
   const prefix = usePrefix.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", _rollupPluginBabelHelpers.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'])
 };
 
 exports.BreadcrumbSkeleton = BreadcrumbSkeleton;

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -57,7 +57,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/lib/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/lib/components/CodeSnippet/CodeSnippet.js

@@ -238,7 +238,7 @@ CodeSnippet.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/ComboBox/ComboBox.js

@@ -31,6 +31,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var Text = require('../Text/Text.js');
@@ -47,18 +48,6 @@ const {
   ItemClick,
   FunctionSelectItem
 } = Downshift.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,
@@ -94,7 +83,7 @@ const getInputValue = ({
 };
 const findHighlightedIndex = ({
   items,
-  itemToString = defaultItemToString
+  itemToString = defaultItemToString.defaultItemToString
 }, inputValue) => {
   if (!inputValue) {
     return -1;
@@ -137,7 +126,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     invalidText,
     items,
     itemToElement = null,
-    itemToString = defaultItemToString,
+    itemToString = defaultItemToString.defaultItemToString,
     light,
     onChange,
     onInputChange,

package/lib/components/ComboButton/index.js

@@ -192,7 +192,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  tooltipAlignment: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/ComposedModal/ComposedModal.js

@@ -79,7 +79,7 @@ ModalBody.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
-  ['aria-label']: requiredIfGivenPropIsTruthy.default('hasScrollingContent', PropTypes.string),
+  ['aria-label']: requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
   /**
    * Specify the content to be placed in the ModalBody
    */

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -77,7 +77,7 @@ const ContentSwitcher = ({
           });
         }
       }
-    } else if (selectedIndex !== index) {
+    } else if (selectedIndex !== index && (isKeyboardEvent(event) ? match.matches(event, [keys.Enter, keys.Space]) : true)) {
       setSelectedIndex(index);
       focusSwitch(index);
       onChange(event);

package/lib/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/lib/components/Copy/Copy.js

@@ -72,7 +72,7 @@ Copy.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/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/lib/components/CopyButton/CopyButton.js

@@ -53,7 +53,7 @@ CopyButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

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