@carbon/react 1.89.0 → 1.90.0

package/lib/components/Menu/Menu.js

@@ -30,7 +30,6 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   containerRef,
   label,
   menuAlignment,
-  mode,
   onClose,
   onOpen,
   open,
@@ -120,6 +119,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     }
   }
   function focusItem(e) {
+    const validItems = focusableItems?.filter(item => item?.ref?.current);
+    if (!validItems?.length) return;
     const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
     let indexToFocus = currentItem;
 
@@ -136,14 +137,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
       }
     }
     if (indexToFocus < 0) {
-      indexToFocus = focusableItems.length - 1;
+      indexToFocus = validItems.length - 1;
     }
-    if (indexToFocus >= focusableItems.length) {
+    if (indexToFocus >= validItems.length) {
       indexToFocus = 0;
     }
     if (indexToFocus !== currentItem) {
-      const nodeToFocus = focusableItems[indexToFocus];
-      nodeToFocus.ref?.current?.focus();
+      const nodeToFocus = validItems[indexToFocus];
+      nodeToFocus?.ref?.current?.focus();
       e?.preventDefault();
     }
   }
@@ -306,7 +307,6 @@ Menu.propTypes = {
   /**
    * A label describing the Menu.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   label: PropTypes.string,
   /**
    * Specify how the menu should align with the button element
@@ -342,17 +342,14 @@ Menu.propTypes = {
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   target: PropTypes.object,
   /**
    * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
   /**
    * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   y: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 };
 

package/lib/components/Menu/MenuContext.js

@@ -46,6 +46,7 @@ function menuReducer(state, action) {
 const MenuContext = /*#__PURE__*/React.createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   dispatch: _ => {}
 });
 

package/lib/components/Menu/MenuItem.js

@@ -152,7 +152,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   }, [direction]);
   React.useEffect(() => {
     if (IconElement && !context.state.hasIcons) {
-      // @ts-ignore - TODO: Should we be passing payload?
+      // @ts-expect-error - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
@@ -227,17 +227,14 @@ MenuItem.propTypes = {
   /**
    * Provide an optional function to be called when the MenuItem is clicked.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.func,
   /**
    * A component used to render an icon.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   shortcut: PropTypes.string
 };
 const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelectable({
@@ -255,12 +252,12 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
     onChange,
     defaultValue: defaultSelected ?? false
   });
-  function handleClick(e) {
+  function handleClick() {
     setChecked(!checked);
   }
   React.useEffect(() => {
     if (!context.state.hasSelectableItems) {
-      // @ts-ignore - TODO: Should we be passing payload?
+      // @ts-expect-error - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableSelectableItems'
       });
@@ -284,7 +281,6 @@ MenuItemSelectable.propTypes = {
   /**
    * Specify whether the option should be selected by default.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   defaultSelected: PropTypes.bool,
   /**
    * A required label titling this option.
@@ -293,12 +289,10 @@ MenuItemSelectable.propTypes = {
   /**
    * Provide an optional function to be called when the selection state changes.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes.func,
   /**
    * Pass a bool to props.selected to control the state of this option.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   selected: PropTypes.bool
 };
 const MenuItemGroup = /*#__PURE__*/React.forwardRef(function MenuItemGroup({
@@ -350,12 +344,13 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     onChange,
     defaultValue: defaultSelectedItem ?? {}
   });
+  //eslint-disable-next-line  @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   function handleClick(item, e) {
     setSelection(item);
   }
   React.useEffect(() => {
     if (!context.state.hasSelectableItems) {
-      // @ts-ignore - TODO: Should we be passing payload?
+      // @ts-expect-error - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableSelectableItems'
       });
@@ -391,12 +386,10 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   itemToString: PropTypes.func,
   /**
    * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   items: PropTypes.array,
   /**
    * A required label titling this radio group.
@@ -405,7 +398,6 @@ MenuItemRadioGroup.propTypes = {
   /**
    * Provide an optional function to be called when the selection changes.
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onChange: PropTypes.func,
   /**
    * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.

package/lib/components/MenuButton/index.js

@@ -25,7 +25,8 @@ var mergeRefs = require('../../tools/mergeRefs.js');
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
-const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton({
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
+const MenuButton = /*#__PURE__*/React.forwardRef(({
   children,
   className,
   disabled,
@@ -36,13 +37,14 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton({
   tabIndex = 0,
   menuTarget,
   ...rest
-}, forwardRef) {
+}, forwardRef) => {
   // feature flag utilized to separate out only the dynamic styles from @floating-ui
   // flag is turned on when collision detection (ie. flip, hide) logic is not desired
   const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId.useId('MenuButton');
   const prefix = usePrefix.usePrefix();
   const triggerRef = 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({
@@ -161,6 +163,7 @@ MenuButton.propTypes = {
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes.oneOf(validButtonKinds),
   /**
@@ -174,11 +177,13 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Specify the tabIndex of the button.
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number,
   /**

package/lib/components/Modal/Modal.js

@@ -42,7 +42,7 @@ var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debou
 var Text = require('../Text/Text.js');
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
-const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
+const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -68,7 +68,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = !passiveModal,
+  preventCloseOnClickOutside,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -100,9 +100,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
-  if (!passiveModal && preventCloseOnClickOutside === false) {
-    console.error(invalidOutsideClickMessage);
-  }
+  process.env.NODE_ENV !== "production" ? warning.warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -129,7 +127,15 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
       target
     } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    const shouldCloseOnOutsideClick =
+    // Passive modals can close on clicks outside the modal when
+    // preventCloseOnClickOutside is undefined or explicitly set to false.
+    passiveModal && !preventCloseOnClickOutside ||
+    // Non-passive modals have to explicitly opt-in for close on outside
+    // behavior by explicitly setting preventCloseOnClickOutside to false,
+    // rather than just leaving it undefined.
+    !passiveModal && preventCloseOnClickOutside === false;
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -171,6 +177,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     }
     const lastContent = modalContent.children[modalContent.children.length - 1];
     const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+
+    // eslint-disable-next-line   prefer-const -- https://github.com/carbon-design-system/carbon/issues/20071
     for (let elem of modalContent.children) {
       if (elem.contains(currentActiveNode)) {
         const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
@@ -233,6 +241,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     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(() => {
     return () => {

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -21,6 +21,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 
 let didWarnAboutDeprecation = false;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
 process.env.NODE_ENV !== 'production';
 class ModalWrapper extends React.Component {
   constructor(...args) {
@@ -57,6 +58,7 @@ class ModalWrapper extends React.Component {
       handleSubmit?.(evt);
     });
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   if(isDev) {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -113,6 +113,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     isFluid
   } = React.useContext(FormContext.FormContext);
   const isFirstRender = React.useRef(true);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(!!open);
   const [prevOpen, setPrevOpen] = React.useState(!!open);
@@ -123,7 +124,10 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     itemToString: itemToString$1,
     inputValue
   }), [items, inputValue, itemToString$1, filterItems]);
-  const nonSelectAllItems = React.useMemo(() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
+  const nonSelectAllItems = React.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,
@@ -139,7 +143,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     filteredItems
   });
   const selectAllStatus = React.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 {
@@ -148,6 +154,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     };
   }, [controlledSelectedItems, nonSelectAllItems]);
   const handleSelectAllClick = React.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,
@@ -164,6 +171,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       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,
@@ -214,11 +222,14 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
 
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = React.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,
@@ -235,6 +246,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       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$1, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -318,6 +330,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     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,
@@ -340,7 +353,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     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;
     }
   });
@@ -511,7 +526,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }) : 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,
@@ -692,6 +709,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.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;
@@ -789,6 +807,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/lib/components/MultiSelect/MultiSelect.js

@@ -113,12 +113,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.usePrefix();
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
   const multiSelectInstanceId = useId.useId();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -187,13 +190,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
@@ -388,6 +393,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 ? {
@@ -415,7 +421,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 = React.useMemo(() => getMenuProps({
@@ -434,7 +442,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", _rollupPluginBabelHelpers.extends({
@@ -486,14 +496,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(index$2.default.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.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/lib/components/Notification/Notification.js

@@ -110,7 +110,6 @@ function NotificationButton({
     [`${prefix}--${notificationType}-notification__close-icon`]: notificationType
   });
   return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({}, rest, {
-    // eslint-disable-next-line react/button-has-type
     type: type,
     "aria-label": deprecatedAriaLabel || ariaLabel,
     title: deprecatedAriaLabel || ariaLabel,
@@ -810,6 +809,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/lib/components/NumberInput/NumberInput.js

@@ -43,7 +43,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,
@@ -103,6 +104,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] = React.useState(controlledValue);
   const numberParser = React.useMemo(() => new utilities.NumberParser(locale, formatOptions), [locale, formatOptions]);
   /**
@@ -175,11 +177,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);
-  }
+  React.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;
@@ -230,6 +237,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('.');
@@ -339,7 +348,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.match(e, keys.ArrowUp) && handleStep(e, 'up');
+        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
         match.match(e, keys.ArrowDown) && handleStep(e, 'down');
       }
       if (rest?.onKeyDown) {

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -70,6 +70,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
@@ -92,6 +93,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__*/React.forwardRef(({
   align,
   ['aria-label']: ariaLabel = null,

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

@@ -25,7 +25,8 @@ var deprecateValuesWithin = require('../../../prop-types/deprecateValuesWithin.j
 var mapPopoverAlign = require('../../../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,
@@ -36,7 +37,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
   tooltipAlignment,
   menuTarget,
   ...rest
-}, forwardRef) {
+}, forwardRef) => {
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -93,12 +93,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/lib/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>>;
 /**