@carbon/react 1.102.0-rc.0 → 1.103.0-rc.0

package/lib/components/ContainedList/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
 var ContainedList = require('./ContainedList.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
@@ -22,5 +20,4 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 exports.ContainedList = ContainedList.default;
-exports.default = ContainedList.default;
 exports.ContainedListItem = ContainedListItem.default;

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -18,6 +18,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var navigation = require('../../internal/keyboard/navigation.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var utils = require('../../internal/utils.js');
 require('../Switch/Switch.js');
 var IconSwitch = require('../Switch/IconSwitch.js');
 
@@ -83,7 +84,7 @@ const ContentSwitcher = ({
     }
   };
   const isIconOnly = React.Children.map(children, child => {
-    return /*#__PURE__*/React.isValidElement(child) ? child.type === IconSwitch.default : null;
+    return utils.isComponentElement(child, IconSwitch.default);
   })?.every(val => val === true);
   const classes = cx(`${prefix}--content-switcher`, className, {
     [`${prefix}--content-switcher--light`]: light,

package/lib/components/DataTable/TableExpandRow.js

@@ -54,7 +54,7 @@ const TableExpandRow = /*#__PURE__*/React.forwardRef(({
     }
   });
   const normalizedChildren = React.Children.toArray(children).map(child => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type !== TableSlugRow.default && child.type !== TableDecoratorRow.default) {
+    if (!utils.isComponentElement(child, TableSlugRow.default) && !utils.isComponentElement(child, TableDecoratorRow.default)) {
       return child;
     }
   });

package/lib/components/DataTable/TableToolbarMenu.js

@@ -29,7 +29,7 @@ const TableToolbarMenu = ({
   const prefix = usePrefix.usePrefix();
   const toolbarActionClasses = cx(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
   const menuOptionsClasses = cx(menuOptionsClass, `${prefix}--toolbar-action__menu`);
-  return /*#__PURE__*/React.createElement(index.default, _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React.createElement(index.OverflowMenu, _rollupPluginBabelHelpers.extends({
     renderIcon: renderIcon,
     className: toolbarActionClasses,
     title: iconDescription,

package/lib/components/DataTable/tools/normalize.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../../AILabel/index.js');
+var utils = require('../../../internal/utils.js');
 var cells = require('./cells.js');
 
 /**
@@ -64,7 +65,7 @@ const normalize = (rows, headers, prevState = {}) => {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasAILabelHeader: !!(slug || decorator?.type === index.AILabel),
+        hasAILabelHeader: !!(slug || utils.isComponentElement(decorator, index.AILabel)),
         info: {
           header: key
         }

package/lib/components/DatePicker/DatePicker.Skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,11 +7,14 @@
 import PropTypes from 'prop-types';
 import { type HTMLAttributes } from 'react';
 export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    range?: boolean;
     /**
-     * Specify whether the label should be hidden, or not
+     * Specify whether to hide the label.
      */
     hideLabel?: boolean;
+    /**
+     * Specify whether to render the range skeleton variant.
+     */
+    range?: boolean;
 }
 declare const DatePickerSkeleton: {
     ({ range, id, hideLabel, className, ...rest }: DatePickerSkeletonProps): import("react/jsx-runtime").JSX.Element;
@@ -21,7 +24,7 @@ declare const DatePickerSkeleton: {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Specify whether the label should be hidden, or not
+         * Specify whether to hide the label.
          */
         hideLabel: PropTypes.Requireable<boolean>;
         /**
@@ -29,7 +32,7 @@ declare const DatePickerSkeleton: {
          */
         id: PropTypes.Requireable<string>;
         /**
-         * Specify whether the skeleton should be of range date picker.
+         * Specify whether to render the range skeleton variant.
          */
         range: PropTypes.Requireable<boolean>;
     };

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -50,7 +50,7 @@ DatePickerSkeleton.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify whether the label should be hidden, or not
+   * Specify whether to hide the label.
    */
   hideLabel: PropTypes.bool,
   /**
@@ -58,7 +58,7 @@ DatePickerSkeleton.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Specify whether the skeleton should be of range date picker.
+   * Specify whether to render the range skeleton variant.
    */
   range: PropTypes.bool
 };

package/lib/components/DatePicker/DatePicker.js

@@ -22,6 +22,7 @@ var rangePlugin = require('./plugins/rangePlugin.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
+var utils = require('../../internal/utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useSavedCallback = require('../../internal/useSavedCallback.js');
 require('../FluidForm/FluidForm.js');
@@ -246,7 +247,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const childrenWithProps = React.Children.toArray(children).map(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   (child, index) => {
-    if (index === 0 && child.type === /*#__PURE__*/React.createElement(DatePickerInput.default, child.props).type) {
+    if (index === 0 && utils.isComponentElement(child, DatePickerInput.default)) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: startInputField,
@@ -255,7 +256,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
         warn: effectiveWarn
       });
     }
-    if (index === 1 && child.type === /*#__PURE__*/React.createElement(DatePickerInput.default, child.props).type) {
+    if (index === 1 && utils.isComponentElement(child, DatePickerInput.default)) {
       return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: endInputField,

package/lib/components/DatePicker/index.js

@@ -16,4 +16,4 @@ var DatePicker_Skeleton = require('./DatePicker.Skeleton.js');
 
 exports.DatePicker = DatePicker.default;
 exports.default = DatePicker.default;
-exports.DatePickerSkeleton = DatePicker_Skeleton.default;
+exports.DatePickerSkeleton = DatePicker_Skeleton.DatePickerSkeleton;

package/lib/components/Dropdown/Dropdown.js

@@ -176,9 +176,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     const {
       highlightedIndex
     } = changes;
-    if (highlightedIndex !== undefined && highlightedIndex > -1 &&
-    // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
-    typeof window !== undefined) {
+    if (highlightedIndex !== undefined && highlightedIndex > -1) {
       const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
       const highlightedItem = itemArray[highlightedIndex];
       if (highlightedItem) {

package/lib/components/Dropdown/index.js

@@ -16,4 +16,4 @@ var Dropdown_Skeleton = require('./Dropdown.Skeleton.js');
 
 exports.Dropdown = Dropdown.default;
 exports.default = Dropdown.default;
-exports.DropdownSkeleton = Dropdown_Skeleton.default;
+exports.DropdownSkeleton = Dropdown_Skeleton.DropdownSkeleton;

package/lib/components/FeatureFlags/index.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2015, 2025
+ * Copyright IBM Corp. 2015, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { ReactNode, type JSX } from 'react';
+import { type ReactNode } from 'react';
 export interface FeatureFlagsProps {
     children?: ReactNode;
     flags?: Record<string, boolean>;
@@ -20,19 +20,14 @@ export interface FeatureFlagsProps {
     enableEnhancedFileUploader?: boolean;
     enablePresence?: boolean;
 }
-/**
- * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
- * or disable feature flags in a given React tree
- */
-declare const FeatureFlagContext: React.Context<any>;
 /**
  * Supports an object of feature flag values with the `flags` prop, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
-declare namespace FeatureFlags {
-    var propTypes: {
+export declare const FeatureFlags: {
+    ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide the feature flags to enabled or disabled in the current Rea,ct tree
@@ -49,18 +44,13 @@ declare namespace FeatureFlags {
         enableEnhancedFileUploader: PropTypes.Requireable<boolean>;
         enablePresence: PropTypes.Requireable<boolean>;
     };
-}
+};
 /**
  * Access whether a given flag is enabled or disabled in a given
  * FeatureFlagContext
- *
- * @returns {boolean}
  */
-declare function useFeatureFlag(flag: any): any;
+export declare const useFeatureFlag: (flag: string) => boolean;
 /**
  * Access all feature flag information for the given FeatureFlagContext
- *
- * @returns {FeatureFlagScope}
  */
-declare function useFeatureFlags(): any;
-export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };
+export declare const useFeatureFlags: () => import("@carbon/feature-flags/types/FeatureFlagScope").FeatureFlagScope;

package/lib/components/FeatureFlags/index.js

@@ -12,7 +12,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
 
-// TODO: Can this variable be deleted now? It isn't used anywhere.
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
@@ -24,7 +23,7 @@ const FeatureFlagContext = /*#__PURE__*/React.createContext(featureFlags.Feature
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-function FeatureFlags({
+const FeatureFlags = ({
   children,
   flags = {},
   enableV12TileDefaultIcons = false,
@@ -37,46 +36,30 @@ function FeatureFlags({
   enableV12DynamicFloatingStyles = false,
   enableEnhancedFileUploader = false,
   enablePresence = false
-}) {
+}) => {
   const parentScope = React.useContext(FeatureFlagContext);
-  const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
-  const combinedFlags = {
-    'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
-    'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
-    'enable-v12-overflowmenu': enableV12Overflowmenu,
-    'enable-treeview-controllable': enableTreeviewControllable,
-    'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
-    'enable-focus-wrap-without-sentinels': enableFocusWrapWithoutSentinels,
-    'enable-dialog-element': enableDialogElement,
-    'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
-    'enable-enhanced-file-uploader': enableEnhancedFileUploader,
-    'enable-presence': enablePresence,
-    ...flags
-  };
-  const [scope, updateScope] = React.useState(() => {
+  const scope = React.useMemo(() => {
+    const combinedFlags = {
+      'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
+      'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
+      'enable-v12-overflowmenu': enableV12Overflowmenu,
+      'enable-treeview-controllable': enableTreeviewControllable,
+      'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+      'enable-focus-wrap-without-sentinels': enableFocusWrapWithoutSentinels,
+      'enable-dialog-element': enableDialogElement,
+      'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
+      'enable-enhanced-file-uploader': enableEnhancedFileUploader,
+      'enable-presence': enablePresence,
+      ...flags
+    };
     const scope = featureFlags.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
-  });
-  if (parentScope !== prevParentScope) {
-    const scope = featureFlags.createScope(combinedFlags);
-    scope.mergeWithScope(parentScope);
-    updateScope(scope);
-    setPrevParentScope(parentScope);
-  }
-
-  // We use a custom hook to detect if any of the keys or their values change
-  // for flags that are passed in. If they have changed, then we re-create the
-  // FeatureFlagScope using the new flags
-  useChangedValue(combinedFlags, isEqual, changedFlags => {
-    const scope = featureFlags.createScope(changedFlags);
-    scope.mergeWithScope(parentScope);
-    updateScope(scope);
-  });
+  }, [enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, flags, parentScope]);
   return /*#__PURE__*/React.createElement(FeatureFlagContext.Provider, {
     value: scope
   }, children);
-}
+};
 FeatureFlags.propTypes = {
   children: PropTypes.node,
   /**
@@ -95,84 +78,20 @@ FeatureFlags.propTypes = {
   enablePresence: PropTypes.bool
 };
 
-/**
- * This hook will store previous versions of the given `value` and compare the
- * current value to the previous one using the `compare` function. If the
- * compare function returns true, then the given `callback` is invoked in an
- * effect.
- *
- * @param {any} value
- * @param {Function} compare
- * @param {Function} callback
- */
-function useChangedValue(value, compare, callback) {
-  const initialRender = React.useRef(false);
-  const savedCallback = React.useRef(callback);
-  const [prevValue, setPrevValue] = React.useState(value);
-  if (!compare(prevValue, value)) {
-    setPrevValue(value);
-  }
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    // We only want the callback triggered after the first render
-    if (initialRender.current) {
-      savedCallback.current(prevValue);
-    }
-  }, [prevValue]);
-  React.useEffect(() => {
-    initialRender.current = true;
-  }, []);
-}
-
 /**
  * Access whether a given flag is enabled or disabled in a given
  * FeatureFlagContext
- *
- * @returns {boolean}
  */
-function useFeatureFlag(flag) {
+const useFeatureFlag = flag => {
   const scope = React.useContext(FeatureFlagContext);
   return scope.enabled(flag);
-}
+};
 
 /**
  * Access all feature flag information for the given FeatureFlagContext
- *
- * @returns {FeatureFlagScope}
- */
-function useFeatureFlags() {
-  return React.useContext(FeatureFlagContext);
-}
-
-/**
- * Compare two objects and determine if they are equal. This is a shallow
- * comparison since the objects we are comparing are objects with boolean flags
- * from the flags prop in the `FeatureFlags` component
- *
- * @param {object} a
- * @param {object} b
- * @returns {boolean}
  */
-function isEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  for (const key of Object.keys(a)) {
-    if (a[key] !== b[key]) {
-      return false;
-    }
-  }
-  for (const key of Object.keys(b)) {
-    if (b[key] !== a[key]) {
-      return false;
-    }
-  }
-  return true;
-}
+const useFeatureFlags = () => React.useContext(FeatureFlagContext);
 
-exports.FeatureFlagContext = FeatureFlagContext;
 exports.FeatureFlags = FeatureFlags;
 exports.useFeatureFlag = useFeatureFlag;
 exports.useFeatureFlags = useFeatureFlags;

package/lib/components/FileUploader/FileUploader.Skeleton.js

@@ -31,7 +31,7 @@ function FileUploaderSkeleton({
   })), /*#__PURE__*/React.createElement(SkeletonText.default, {
     width: "225px",
     className: `${prefix}--label-description`
-  }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React.createElement(Button_Skeleton.default, null)));
+  }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React.createElement(Button_Skeleton.ButtonSkeleton, null)));
 }
 FileUploaderSkeleton.propTypes = {
   /**

package/lib/components/FileUploader/FileUploaderButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/FileUploader/FileUploaderButton.js

@@ -39,7 +39,6 @@ function FileUploaderButton({
 }) {
   const prefix = usePrefix.usePrefix();
   const [labelText, setLabelText] = React.useState(ownerLabelText);
-  const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
   const generatedId = useId.useId();
   const {
     current: inputId
@@ -53,12 +52,9 @@ function FileUploaderButton({
     [`${prefix}--btn--sm`]: size === 'small' || size === 'sm',
     [`${prefix}--layout--size-${size}`]: size
   });
-
-  // Adjust label text state based on changes to the labelText prop
-  if (ownerLabelText !== prevOwnerLabelText) {
+  React.useEffect(() => {
     setLabelText(ownerLabelText);
-    setPrevOwnerLabelText(ownerLabelText);
-  }
+  }, [ownerLabelText]);
   function onClick(event) {
     event.target.value = null;
     if (inputNode.current) {

package/lib/components/Icon/Icon.Skeleton.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -32,4 +30,3 @@ IconSkeleton.propTypes = {
 };
 
 exports.IconSkeleton = IconSkeleton;
-exports.default = IconSkeleton;

package/lib/components/IconIndicator/index.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
@@ -76,4 +74,3 @@ IconIndicator.propTypes = {
 
 exports.IconIndicator = IconIndicator;
 exports.IconIndicatorKinds = IconIndicatorKinds;
-exports.default = IconIndicator;

package/lib/components/Modal/ModalPresence.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type PropsWithChildren } from 'react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
 import { type PresenceContext } from '../../internal/usePresenceContext';
 export interface ModalPresenceProps {
     /**
@@ -29,4 +29,12 @@ export declare const ModalPresenceContext: React.Context<ModalPresenceContextPro
  * Handles occurrences where only a single modal must consume a context.
  */
 export declare const useExclusiveModalPresenceContext: (id: string) => ModalPresenceContextProps | undefined;
+type WithModalPresenceProps = Pick<ModalPresenceProps, 'open'>;
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+export declare const withModalPresence: <TProps extends object>(Component: ComponentType<TProps>) => {
+    ({ open, ...componentProps }: TProps & WithModalPresenceProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/lib/components/Modal/ModalPresence.js

@@ -35,7 +35,21 @@ const useExclusiveModalPresenceContext = id => {
   const ctx = React.useContext(ModalPresenceContext);
   return ctx?.isPresenceExclusive(id) ? ctx : undefined;
 };
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+const withModalPresence = Component => {
+  const WithModalPresence = ({
+    open,
+    ...componentProps
+  }) => /*#__PURE__*/React.createElement(ModalPresence, {
+    open: open
+  }, /*#__PURE__*/React.createElement(Component, componentProps));
+  WithModalPresence.displayName = `withModalPresence(${Component.displayName || Component.name || 'Component'})`;
+  return WithModalPresence;
+};
 
 exports.ModalPresence = ModalPresence;
 exports.ModalPresenceContext = ModalPresenceContext;
 exports.useExclusiveModalPresenceContext = useExclusiveModalPresenceContext;
+exports.withModalPresence = withModalPresence;

package/lib/components/Modal/index.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Modal, { type ModalProps } from './Modal';
-import { ModalPresence, type ModalPresenceProps } from './ModalPresence';
+import { ModalPresence, withModalPresence, type ModalPresenceProps } from './ModalPresence';
 export default Modal;
-export { Modal, ModalPresence, type ModalProps, type ModalPresenceProps };
+export { Modal, ModalPresence, withModalPresence, type ModalProps, type ModalPresenceProps, };

package/lib/components/MultiSelect/MultiSelect.js

@@ -112,11 +112,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = React.useContext(FormContext.FormContext);
   const multiSelectInstanceId = useId.useId();
+  const prevOpenPropRef = React.useRef(open);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
-  const [prevOpenProp, setPrevOpenProp] = React.useState(open);
   const [topItems, setTopItems] = React.useState([]);
   const [itemsCleared, setItemsCleared] = React.useState(false);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
@@ -250,14 +250,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onMenuChange(open);
     }
   };
-
-  /**
-   * programmatically control this `open` prop
-   */
-  if (prevOpenProp !== open) {
-    setIsOpenWrapper(open);
-    setPrevOpenProp(open);
-  }
+  React.useEffect(() => {
+    if (prevOpenPropRef.current !== open) {
+      setIsOpen(open);
+      onMenuChange?.(open);
+      prevOpenPropRef.current = open;
+    }
+  }, [open, onMenuChange]);
   const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
     id,
     disabled,

package/lib/components/NumberInput/NumberInput.js

@@ -343,7 +343,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
    * The number value that was previously "committed" to the input on blur
    * Only used when type="text"
    */
-  const [previousNumberValue, setPreviousNumberValue] = React.useState(numberValue);
+  const previousNumberValue = React.useRef(numberValue);
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -356,10 +356,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     numberingSystem
   }), [locale, formatOptions, numberingSystem]);
   const format = React.useCallback(value => isNaN(value) || value === null ? '' : numberFormatter.format(value), [numberFormatter]);
-  if (isControlled && !(isNaN(previousNumberValue) && isNaN(numberValue)) && previousNumberValue !== numberValue) {
-    setInputValue(format(numberValue));
-    setPreviousNumberValue(numberValue);
-  }
+  React.useEffect(() => {
+    if (isControlled && !(isNaN(previousNumberValue.current) && isNaN(numberValue)) && previousNumberValue.current !== numberValue) {
+      setInputValue(format(numberValue));
+      previousNumberValue.current = numberValue;
+    }
+  }, [isControlled, numberValue, format]);
   const inputRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
   const numberInputClasses = cx({
@@ -506,7 +508,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // numberValue in useControllableState.
         setNumberValue(parsedFormattedNewValue);
         setInputValue(formattedNewValue);
-        setPreviousNumberValue(parsedFormattedNewValue);
+        previousNumberValue.current = parsedFormattedNewValue;
       }
       if (onChange) {
         onChange(event, state);
@@ -608,22 +610,22 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
-            direction: previousNumberValue < parsedFormattedNewValue ? 'up' : 'down'
+            direction: previousNumberValue.current < parsedFormattedNewValue ? 'up' : 'down'
           };
 
           // If the old and new values are NaN, don't call onChange
-          // to avoid an unecessary re-render and potential infinite
+          // to avoid an unnecessary re-render and potential infinite
           // loop when isControlled.
-          if (!(isNaN(previousNumberValue) && isNaN(parsedFormattedNewValue))) {
+          if (!(isNaN(previousNumberValue.current) && isNaN(parsedFormattedNewValue))) {
             onChange(e, state);
           }
         }
 
         // If the old and new values are NaN, don't set state to avoid
-        // an unecessary re-render and potential infinite loop when
+        // an unnecessary re-render and potential infinite loop when
         // isControlled.
-        if (!(isNaN(previousNumberValue) && isNaN(numberValue))) {
-          setPreviousNumberValue(numberValue);
+        if (!(isNaN(previousNumberValue.current) && isNaN(numberValue))) {
+          previousNumberValue.current = numberValue;
         }
         if (!(isNaN(numberValue) && isNaN(parsedFormattedNewValue))) {
           setNumberValue(parsedFormattedNewValue);

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -70,7 +70,7 @@ export interface OverflowMenuProps extends Omit<IconButtonProps, 'type' | 'aria-
      */
     menuOffset?: MenuOffset;
     /**
-     * The adjustment in position applied to the floating menu.
+     * The adjustment in position applied to the floating menu when flipped.
      */
     menuOffsetFlip?: MenuOffset;
     /**