@carbon/react 1.90.0-rc.0 → 1.91.0-rc.0

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,
@@ -184,6 +173,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
@@ -213,6 +203,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevInputLengthRef.current = inputValue.length;
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
   const isManualClearingRef = React.useRef(false);
   const [isClearing, setIsClearing] = React.useState(false);
@@ -253,6 +244,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       prevSelectedItemProp.current = selectedItemProp;
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [selectedItemProp]);
   const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
     item: itemToString(item),
@@ -267,8 +259,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
+      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
       onInputChange && onInputChange(inputValue);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [inputValue]);
   const handleSelectionClear = () => {
     if (textInput?.current) {
@@ -321,6 +315,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           if (state.highlightedIndex !== -1) {
             const filteredList = filterItems(items, itemToString, inputValue);
             const highlightedItem = filteredList[state.highlightedIndex];
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
             if (highlightedItem && !highlightedItem.disabled) {
               return {
                 ...changes,
@@ -332,6 +328,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             const autoIndex = indexToHighlight(inputValue);
             if (autoIndex !== -1) {
               const matchingItem = items[autoIndex];
+
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
               if (matchingItem && !matchingItem.disabled) {
                 return {
                   ...changes,
@@ -484,8 +482,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({
@@ -498,7 +498,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isItemDisabled(item, _index) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
       return item?.disabled;
     },
     ...downshiftProps,
@@ -535,6 +537,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         toggleMenu
       };
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -583,7 +586,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
-  }), [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+  }),
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   React.useEffect(() => {
     if (textInput.current) {
       if (inputRef.current && typeaheadText) {

package/lib/components/ComboButton/index.js

@@ -56,6 +56,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   let middlewares = [];
   if (!enableOnlyFloatingStyles) {
     middlewares = [react.flip({
@@ -191,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
    */
@@ -138,6 +138,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
       setWasOpen(!!open);
       toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open, wasOpen, prefix]);
   // Remove the document.body className on unmount
   React.useEffect(() => {
@@ -213,7 +214,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     }
     const lastContent = modalContent.children[modalContent.children.length - 1];
     const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
-    for (let elem of modalContent.children) {
+    for (const elem of modalContent.children) {
       if (elem.contains(currentActiveNode)) {
         const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
         if (spaceBelow < gradientSpacing) {
@@ -280,6 +281,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, true);
     };
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open]);
   React.useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
@@ -311,6 +313,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         focusButton(innerModal.current);
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`

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