@carbon/react 1.89.0 → 1.90.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -111,6 +111,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     isFluid
   } = useContext(FormContext);
   const isFirstRender = useRef(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(!!open);
   const [prevOpen, setPrevOpen] = useState(!!open);
@@ -121,7 +122,10 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     itemToString,
     inputValue
   }), [items, inputValue, itemToString, filterItems]);
-  const nonSelectAllItems = useMemo(() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
+  const nonSelectAllItems = useMemo(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  () => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const selectAll = filteredItems.some(item => item.isSelectAll);
   const {
     selectedItems: controlledSelectedItems,
@@ -137,7 +141,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     filteredItems
   });
   const selectAllStatus = useMemo(() => {
-    const selectable = nonSelectAllItems.filter(item => !item.disabled);
+    const selectable = nonSelectAllItems.filter(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+    item => !item.disabled);
     const nonSelectedCount = selectable.filter(item => !controlledSelectedItems.some(sel => isEqual(sel, item))).length;
     const totalCount = selectable.length;
     return {
@@ -146,6 +152,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     };
   }, [controlledSelectedItems, nonSelectAllItems]);
   const handleSelectAllClick = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const selectable = nonSelectAllItems.filter(i => !i.disabled);
     const {
       checked,
@@ -162,6 +169,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       const toSelect = selectable.filter(e => !controlledSelectedItems.some(sel => isEqual(sel, e)));
       toggleAll([...controlledSelectedItems, ...toSelect]);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [nonSelectAllItems, selectAllStatus, controlledSelectedItems, toggleAll]);
   const {
     refs,
@@ -212,11 +220,14 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
 
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const selectAllItem = items.find(item => item.isSelectAll);
-    const selectableRealItems = nonSelectAllItems.filter(item => !item.disabled);
+    const selectableRealItems = nonSelectAllItems.filter(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+    item => !item.disabled);
 
     // Sort only non-select-all items, select-all item must stay at the top
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
     const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
@@ -233,6 +244,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       return [selectAllItem, ...sortedReal];
     }
     return sortedReal;
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -316,6 +328,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [isOpen, inputFocused]);
   const {
     getToggleButtonProps,
@@ -338,7 +351,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     inputId,
     inputValue,
     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;
     }
   });
@@ -509,7 +524,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }) : null;
 
   // exclude the select-all item from the count
-  const selectedItemsLength = controlledSelectedItems.filter(item => !item.isSelectAll).length;
+  const selectedItemsLength = controlledSelectedItems.filter(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  item => !item.isSelectAll).length;
   const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
@@ -690,6 +707,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     let isChecked;
     let isIndeterminate = false;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     if (item.isSelectAll) {
       isChecked = selectAllStatus.checked;
       isIndeterminate = selectAllStatus.indeterminate;
@@ -787,6 +805,7 @@ FilterableMultiSelect.propTypes = {
    * change, and in some cases they can not be shimmed by Carbon to shield you
    * from potentially breaking changes.
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),
   /**

package/es/components/MultiSelect/MultiSelect.js

@@ -111,12 +111,15 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return true; // Return true if item is not an object with undefined values
     });
   }, [items]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const selectAll = filteredItems.some(item => item.isSelectAll);
   const prefix = usePrefix();
   const {
     isFluid
   } = useContext(FormContext);
   const multiSelectInstanceId = useId();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [isFocused, setIsFocused] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(open || false);
@@ -185,13 +188,15 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     stateReducer,
     isOpen,
     itemToString: filteredItems => {
-      return Array.isArray(filteredItems) && filteredItems.map(function (item) {
+      return Array.isArray(filteredItems) && filteredItems.map(item => {
         return itemToString(item);
       }).join(', ') || '';
     },
     selectedItem: controlledSelectedItems,
     items: filteredItems,
+    // 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
@@ -386,6 +391,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
   const handleFocus = evt => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
   const readOnlyEventHandlers = readOnly ? {
@@ -413,7 +419,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     size: 'mini'
   }) : null;
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
-  const selectedItemsLength = selectAll ? selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
+  const selectedItemsLength = selectAll ?
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
@@ -432,7 +440,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       nonSelectAllSelectedCount,
       totalSelectableCount
     };
-  }, [selectedItems, filteredItems]);
+  },
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [selectedItems, filteredItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React.createElement("label", _extends({
@@ -484,14 +494,20 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen &&
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
+  sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,
       totalSelectableCount
     } = getSelectionStats(selectedItems, filteredItems);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some(selected => isEqual(selected, item));
-    const isIndeterminate = item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
+    const isIndeterminate =
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+    item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
     const itemProps = getItemProps({
       item,
       // we don't want Downshift to set aria-selected for us

package/es/components/Notification/Notification.js

@@ -108,7 +108,6 @@ function NotificationButton({
     [`${prefix}--${notificationType}-notification__close-icon`]: notificationType
   });
   return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
-    // eslint-disable-next-line react/button-has-type
     type: type,
     "aria-label": deprecatedAriaLabel || ariaLabel,
     title: deprecatedAriaLabel || ariaLabel,
@@ -808,6 +807,7 @@ Callout.propTypes = {
 /**
  * @deprecated Use `CalloutProps` instead.
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20071
 
 let didWarnAboutDeprecation = false;
 const StaticNotification = props => {

package/es/components/NumberInput/NumberInput.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useMemo, useCallback, useRef, cloneElement, useEffect } from 'react';
+import React, { useContext, useState, useMemo, useCallback, useRef, useEffect, cloneElement } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -41,7 +41,8 @@ const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'
 };
-const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, forwardRef) {
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
   const {
     allowEmpty = false,
     className: customClassName,
@@ -101,6 +102,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     }
     return 0;
   });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
   const numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
   /**
@@ -173,11 +175,16 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--number__invalid--warning`]: normalizedProps.warn
   });
-  if (controlledValue !== prevControlledValue && !(isNaN(Number(controlledValue)) === isNaN(Number(prevControlledValue)))) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    setValue(controlledValue);
-    setPrevControlledValue(controlledValue);
-  }
+  useEffect(() => {
+    if (type === 'number' && controlledValue !== undefined) {
+      if (allowEmpty && controlledValue === '') {
+        setValue('');
+      } else {
+        setValue(controlledValue);
+      }
+      setPrevControlledValue(controlledValue);
+    }
+  }, [controlledValue, type, allowEmpty]);
   let ariaDescribedBy = undefined;
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -228,6 +235,8 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     [`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const Icon = normalizedProps.icon;
   const getDecimalPlaces = num => {
     const parts = num.toString().split('.');
@@ -337,7 +346,9 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     onKeyUp: onKeyUp,
     onKeyDown: e => {
       if (type === 'text') {
+        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
         match(e, ArrowUp) && handleStep(e, 'up');
+        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
         match(e, ArrowDown) && handleStep(e, 'down');
       }
       if (rest?.onKeyDown) {

package/es/components/OverflowMenu/OverflowMenu.js

@@ -66,6 +66,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
   if (process.env.NODE_ENV !== 'production') {
     !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const {
     offsetWidth: menuWidth,
     offsetHeight: menuHeight
@@ -88,6 +89,7 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const OverflowMenu = /*#__PURE__*/forwardRef(({
   align,
   ['aria-label']: ariaLabel = null,

package/es/components/OverflowMenu/next/index.js

@@ -23,7 +23,8 @@ import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js'
 import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 const defaultSize = 'md';
-const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   autoAlign = false,
   children,
   className,
@@ -34,7 +35,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
   tooltipAlignment,
   menuTarget,
   ...rest
-}, forwardRef) {
+}, forwardRef) => {
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -89,12 +89,14 @@ const OverflowMenuItem = frFn((props, ref) => {
     // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
     // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`
     // so we have to use `any` here
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     ,
     ref: ref,
     tabIndex: -1
     // itemText as any: itemText may be a ReactNode, but `title` only accepts string
     // to avoid compatibility issue, we use `any` here. Consider to enforce `itemText` to be `string?`
     // in the next major release
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     ,
     title: requireTitle ? title || itemText : undefined
   }, rest), OverflowMenuItemContent));

package/es/components/PageHeader/PageHeader.d.ts

@@ -26,7 +26,7 @@ interface PageHeaderBreadcrumbBarProps {
     /**
      * `true` by default to render BreadcrumbBar bottom border.
      */
-    border?: Boolean;
+    border?: boolean;
     children?: React.ReactNode;
     className?: string;
     /**
@@ -40,7 +40,7 @@ interface PageHeaderBreadcrumbBarProps {
     /**
      * `true` to set content actions flush against page actions
      */
-    contentActionsFlush?: Boolean;
+    contentActionsFlush?: boolean;
     /**
      * The PageHeaderContent's page actions
      */
@@ -48,7 +48,7 @@ interface PageHeaderBreadcrumbBarProps {
     /**
      * `true` to set page actions flush with page
      */
-    pageActionsFlush?: Boolean;
+    pageActionsFlush?: boolean;
 }
 declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 /**

package/es/components/PageHeader/PageHeader.js

@@ -42,11 +42,11 @@ import { Text } from '../Text/Text.js';
  * ----------
  */
 
-const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader({
+const PageHeader = /*#__PURE__*/React.forwardRef(({
   className,
   children,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header`]: true
@@ -64,7 +64,7 @@ PageHeader.displayName = 'PageHeader';
  * -----------------------
  */
 
-const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeaderBreadcrumbBar({
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(({
   border = true,
   className,
   children,
@@ -74,7 +74,7 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
   pageActions,
   pageActionsFlush,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__breadcrumb-bar`]: true,
@@ -111,7 +111,7 @@ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
  * -----------------
  */
 
-const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderContent({
+const PageHeaderContent = /*#__PURE__*/React.forwardRef(({
   className,
   children,
   title,
@@ -119,7 +119,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
   contextualActions,
   pageActions,
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content`]: true
@@ -131,6 +131,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
     return element.offsetHeight < element.scrollHeight;
   };
   useLayoutEffect(() => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -202,6 +203,7 @@ PageHeaderContent.propTypes = {
 
 const PageHeaderContentPageActions = ({
   className,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   children,
   menuButtonLabel = 'Actions',
   actions,
@@ -237,6 +239,7 @@ const PageHeaderContentPageActions = ({
         }
       }
     });
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, []);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
@@ -359,12 +362,12 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar({
+const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
   className,
   children,
   tags = [],
   ...other
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
@@ -380,18 +383,26 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
       sm: 4
     }, children)));
   }
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const [openPopover, setOpenPopover] = useState(false);
   const tagSize = tags[0]?.size || 'md';
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const instanceId = useId('PageHeaderTabBar');
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const tagsWithIds = useMemo(() => {
     return tags.map((tag, index) => ({
       ...tag,
       id: tag.id || `tag-${index}-${instanceId}`
     }));
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [tags]);
+
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const tagsContainerRef = useRef(null);
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const offsetRef = useRef(null);
   // To close popover when window resizes
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   useEffect(() => {
     const handleResize = () => {
       // Close the popover when window resizes to prevent unwanted opens
@@ -408,11 +419,14 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
     visibleItems = [],
     hiddenItems = [],
     itemRefHandler = () => {}
+    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   } = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
     visibleItems: [],
     hiddenItems: [],
     itemRefHandler: () => {}
   };
+
+  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
   const handleOverflowClick = useCallback(event => {
     event.stopPropagation();
     setOpenPopover(prev => !prev);

package/es/components/Pagination/Pagination.js

@@ -49,7 +49,9 @@ function getPageSize(pageSizes, pageSize) {
   }
   return pageSizes[0].value;
 }
-const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
+
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const Pagination = /*#__PURE__*/React.forwardRef(({
   backwardText = 'Previous page',
   className: customClassName = '',
   disabled = false,
@@ -60,6 +62,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
   itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
   itemsPerPageText = 'Items per page:',
   onChange,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   pageNumberText: _pageNumberText = 'Page Number',
   pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
   page: controlledPage = 1,
@@ -72,7 +75,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
   size = 'md',
   totalItems,
   ...rest
-}, ref) {
+}, ref) => {
   const prefix = usePrefix();
   const inputId = useFallbackId(id?.toString());
   const backBtnRef = useRef(null);
@@ -122,6 +125,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
       handleFocus(focusTarget);
       setFocusTarget(null);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [focusTarget]);
 
   // Sync state with props

package/es/components/PaginationNav/PaginationNav.js

@@ -107,7 +107,6 @@ function PaginationOverflow({
   fromIndex = NaN,
   count = NaN,
   onSelect,
-  // eslint-disable-next-line react/prop-types
   disableOverflow,
   translateWithId: t = translateWithId
 }) {
@@ -165,7 +164,7 @@ function PaginationOverflow({
   }
   return null;
 }
-const PaginationNav = /*#__PURE__*/React.forwardRef(function PaginationNav({
+const PaginationNav = /*#__PURE__*/React.forwardRef(({
   className,
   onChange = () => {},
   totalItems = NaN,
@@ -176,7 +175,7 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(function PaginationNav({
   size = 'lg',
   translateWithId: t = translateWithId,
   ...rest
-}, ref) {
+}, ref) => {
   const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
   const isSm = useMatchMedia(smMediaQuery);
   let numberOfPages;
@@ -396,8 +395,6 @@ PaginationNav.propTypes = {
    * Set this to true if you are having performance problems with large data sets.
    */
   disableOverflow: PropTypes.bool,
-  // eslint-disable-line react/prop-types
-
   /**
    * The number of items to be shown (minimum of 4 unless props.items < 4).
    */

package/es/components/Popover/index.js

@@ -48,8 +48,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   open,
   alignmentAxisOffset,
   ...rest
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 },
 //this is a workaround, have to come back and fix this.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 forwardRef) {
   const prefix = usePrefix();
   const floating = useRef(null);
@@ -61,8 +63,12 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-
-    // No relatedTarget, focus moved to nowhere, so close the popover
+    if (isTabTip) {
+      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+        onRequestClose?.();
+      }
+      return;
+    }
     if (!relatedTarget) {
       onRequestClose?.();
       return;
@@ -87,7 +93,12 @@ forwardRef) {
   // needs to be placed 1px further outside the popover content. To do so,
   // we look to see if any of the children has a className containing "slug"
   const initialCaretHeight = React.Children.toArray(children).some(x => {
-    return x?.props?.className?.includes('slug') || x?.props?.className?.includes('ai-label');
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+      x?.props?.className?.includes('slug') ||
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+      x?.props?.className?.includes('ai-label')
+    );
   }) ? 7 : 6;
   // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
   const popoverDimensions = useRef({
@@ -206,6 +217,7 @@ forwardRef) {
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);
   const mappedChildren = React.Children.map(children, child => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const item = child;
     const displayName = item?.type?.displayName;
 
@@ -220,9 +232,13 @@ forwardRef) {
     const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
     const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if (/*#__PURE__*/React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
       const className = item?.props?.className;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
       const ref = (item?.props).ref;
       const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
       return /*#__PURE__*/React.cloneElement(item, {
         className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
         // With cloneElement, if you pass a `ref`, it overrides the original ref.
@@ -354,9 +370,7 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-function PopoverContentRenderFunction(
-// eslint-disable-next-line react/prop-types
-{
+function PopoverContentRenderFunction({
   className,
   children,
   ...rest

package/es/components/ProgressBar/ProgressBar.js

@@ -55,14 +55,16 @@ function ProgressBar({
   });
   let StatusIcon = null;
   if (isError) {
-    StatusIcon = /*#__PURE__*/React.forwardRef(function ErrorFilled16(props, ref) {
+    // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+    StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
       return /*#__PURE__*/React.createElement(ErrorFilled, _extends({
         ref: ref,
         size: 16
       }, props));
     });
   } else if (isFinished) {
-    StatusIcon = /*#__PURE__*/React.forwardRef(function CheckmarkFilled16(props, ref) {
+    // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+    StatusIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
       return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
         ref: ref,
         size: 16