@carbon/react 1.102.0 → 1.103.0

package/es/components/FeatureFlags/index.js

@@ -7,10 +7,9 @@
 
 import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
-import React, { useContext, createContext, useState, useRef, useEffect } from 'react';
+import React, { useContext, createContext, useMemo } from 'react';
 import { deprecate } from '../../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
@@ -22,7 +21,7 @@ const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
  * 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,
@@ -35,46 +34,30 @@ function FeatureFlags({
   enableV12DynamicFloatingStyles = false,
   enableEnhancedFileUploader = false,
   enablePresence = false
-}) {
+}) => {
   const parentScope = useContext(FeatureFlagContext);
-  const [prevParentScope, setPrevParentScope] = 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] = useState(() => {
+  const scope = 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 = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
-  });
-  if (parentScope !== prevParentScope) {
-    const scope = 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 = 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,
   /**
@@ -93,81 +76,18 @@ 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 = useRef(false);
-  const savedCallback = useRef(callback);
-  const [prevValue, setPrevValue] = useState(value);
-  if (!compare(prevValue, value)) {
-    setPrevValue(value);
-  }
-  useEffect(() => {
-    savedCallback.current = callback;
-  });
-  useEffect(() => {
-    // We only want the callback triggered after the first render
-    if (initialRender.current) {
-      savedCallback.current(prevValue);
-    }
-  }, [prevValue]);
-  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 = useContext(FeatureFlagContext);
   return scope.enabled(flag);
-}
+};
 
 /**
  * Access all feature flag information for the given FeatureFlagContext
- *
- * @returns {FeatureFlagScope}
- */
-function useFeatureFlags() {
-  return 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 = () => useContext(FeatureFlagContext);
 
-export { FeatureFlagContext, FeatureFlags, useFeatureFlag, useFeatureFlags };
+export { FeatureFlags, useFeatureFlag, useFeatureFlags };

package/es/components/FileUploader/FileUploader.Skeleton.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import SkeletonText from '../SkeletonText/SkeletonText.js';
-import ButtonSkeleton from '../Button/Button.Skeleton.js';
+import { ButtonSkeleton } from '../Button/Button.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _ButtonSkeleton;

package/es/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/es/components/FileUploader/FileUploaderButton.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
@@ -35,7 +35,6 @@ function FileUploaderButton({
 }) {
   const prefix = usePrefix();
   const [labelText, setLabelText] = useState(ownerLabelText);
-  const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
   const generatedId = useId();
   const {
     current: inputId
@@ -49,12 +48,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) {
+  useEffect(() => {
     setLabelText(ownerLabelText);
-    setPrevOwnerLabelText(ownerLabelText);
-  }
+  }, [ownerLabelText]);
   function onClick(event) {
     event.target.value = null;
     if (inputNode.current) {

package/es/components/Icon/Icon.Skeleton.js

@@ -27,4 +27,4 @@ IconSkeleton.propTypes = {
   className: PropTypes.string
 };
 
-export { IconSkeleton, IconSkeleton as default };
+export { IconSkeleton };

package/es/components/IconIndicator/index.js

@@ -70,4 +70,4 @@ IconIndicator.propTypes = {
   size: PropTypes.oneOf([16, 20])
 };
 
-export { IconIndicator, IconIndicatorKinds, IconIndicator as default };
+export { IconIndicator, IconIndicatorKinds };

package/es/components/Menu/MenuItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
-import { useFloating, offset, autoUpdate, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';

package/es/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/es/components/Modal/ModalPresence.js

@@ -33,5 +33,18 @@ const useExclusiveModalPresenceContext = id => {
   const ctx = 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;
+};
 
-export { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext };
+export { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext, withModalPresence };

package/es/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/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { useMemo, useContext, useState, useRef, isValidElement, useCallback, cloneElement } from 'react';
+import React, { useMemo, useContext, useRef, useState, useEffect, isValidElement, useCallback, cloneElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -110,11 +110,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = useContext(FormContext);
   const multiSelectInstanceId = useId();
+  const prevOpenPropRef = useRef(open);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
   const [isFocused, setIsFocused] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(open || false);
-  const [prevOpenProp, setPrevOpenProp] = useState(open);
   const [topItems, setTopItems] = useState([]);
   const [itemsCleared, setItemsCleared] = useState(false);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
@@ -248,14 +248,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onMenuChange(open);
     }
   };
-
-  /**
-   * programmatically control this `open` prop
-   */
-  if (prevOpenProp !== open) {
-    setIsOpenWrapper(open);
-    setPrevOpenProp(open);
-  }
+  useEffect(() => {
+    if (prevOpenPropRef.current !== open) {
+      setIsOpen(open);
+      onMenuChange?.(open);
+      prevOpenPropRef.current = open;
+    }
+  }, [open, onMenuChange]);
   const normalizedProps = useNormalizedInputProps({
     id,
     disabled,

package/es/components/Notification/Notification.js

@@ -16,7 +16,7 @@ import '../Text/TextDirection.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import { useNoInteractiveChildren, useInteractiveChildrenNeedDescription } from '../../internal/useNoInteractiveChildren.js';
+import { useInteractiveChildrenNeedDescription, useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
 import { match, matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';

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, useEffect, cloneElement } from 'react';
+import React, { useContext, useState, useMemo, useRef, useCallback, useEffect, cloneElement } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -341,7 +341,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] = useState(numberValue);
+  const previousNumberValue = useRef(numberValue);
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -354,10 +354,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     numberingSystem
   }), [locale, formatOptions, numberingSystem]);
   const format = useCallback(value => isNaN(value) || value === null ? '' : numberFormatter.format(value), [numberFormatter]);
-  if (isControlled && !(isNaN(previousNumberValue) && isNaN(numberValue)) && previousNumberValue !== numberValue) {
-    setInputValue(format(numberValue));
-    setPreviousNumberValue(numberValue);
-  }
+  useEffect(() => {
+    if (isControlled && !(isNaN(previousNumberValue.current) && isNaN(numberValue)) && previousNumberValue.current !== numberValue) {
+      setInputValue(format(numberValue));
+      previousNumberValue.current = numberValue;
+    }
+  }, [isControlled, numberValue, format]);
   const inputRef = useRef(null);
   const ref = useMergedRefs([forwardRef, inputRef]);
   const numberInputClasses = cx({
@@ -504,7 +506,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);
@@ -606,22 +608,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/es/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;
     /**

package/es/components/OverflowMenu/OverflowMenu.js

@@ -66,10 +66,8 @@ 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/20452
   const {
-    offsetWidth: menuWidth,
-    offsetHeight: menuHeight
+    offsetWidth: menuWidth
   } = menuBody;
   switch (triggerButtonPositionProp) {
     case 'top':
@@ -423,7 +421,7 @@ OverflowMenu.propTypes = {
     left: PropTypes.number.isRequired
   }), PropTypes.func]),
   /**
-   * The adjustment in position applied to the floating menu.
+   * The adjustment in position applied to the floating menu when flipped.
    */
   menuOffsetFlip: PropTypes.oneOfType([PropTypes.shape({
     top: PropTypes.number.isRequired,
@@ -472,4 +470,4 @@ OverflowMenu.propTypes = {
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
 };
 
-export { OverflowMenu, OverflowMenu as default, getMenuOffset };
+export { OverflowMenu, getMenuOffset };

package/es/components/OverflowMenuV2/index.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import { warning } from '../../internal/warning.js';
 import { FeatureFlags } from '../FeatureFlags/index.js';
-import OverflowMenu from '../OverflowMenu/index.js';
+import { OverflowMenu } from '../OverflowMenu/index.js';
 
 let didWarnAboutDeprecation = false;
 function OverflowMenuV2(props) {

package/es/components/PageHeader/PageHeader.js

@@ -372,37 +372,19 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
-  // Early return if no tags are provided
-  if (!tags.length) {
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames,
-      ref: ref
-    }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
-      lg: 16,
-      md: 8,
-      sm: 4
-    }, children)));
-  }
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   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/20452
   const instanceId = useId('PageHeaderTabBar');
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   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/20452
-  }, [tags]);
-
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  }, [instanceId, tags]);
   const tagsContainerRef = useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   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/20452
   useEffect(() => {
     const handleResize = () => {
       // Close the popover when window resizes to prevent unwanted opens
@@ -419,14 +401,11 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
     visibleItems = [],
     hiddenItems = [],
     itemRefHandler = () => {}
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   } = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
     visibleItems: [],
     hiddenItems: [],
     itemRefHandler: () => {}
   };
-
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const handleOverflowClick = useCallback(event => {
     event.stopPropagation();
     setOpenPopover(prev => !prev);

package/es/components/Pagination/Pagination.Skeleton.js

@@ -41,4 +41,4 @@ PaginationSkeleton.propTypes = {
   className: PropTypes.string
 };
 
-export { PaginationSkeleton, PaginationSkeleton as default };
+export { PaginationSkeleton };

package/es/components/Pagination/Pagination.d.ts

@@ -69,6 +69,10 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * A function returning PII showing where the current page is.
      */
     pageRangeText?: (current: number, total: number) => string;
+    /**
+     * A function returning the label for the page select.
+     */
+    pageSelectLabelText?: (total: number) => string;
     /**
      * The number dictating how many items a page contains.
      */

package/es/components/Pagination/Pagination.js

@@ -65,6 +65,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
   pageNumberText: _pageNumberText = 'Page Number',
   pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
+  pageSelectLabelText = total => `Page of ${total} ${total === 1 ? 'page' : 'pages'}`,
   page: controlledPage = 1,
   pageInputDisabled,
   pageSize: controlledPageSize,
@@ -245,7 +246,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
   }, pageText(page)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
-    labelText: `Page of ${totalPages} pages`,
+    labelText: pageSelectLabelText(totalPages),
     inline: true,
     hideLabel: true,
     onChange: handlePageInputChange,
@@ -332,6 +333,10 @@ Pagination.propTypes = {
    * A function returning PII showing where the current page is.
    */
   pageRangeText: PropTypes.func,
+  /**
+   * A function returning the label for the page select.
+   */
+  pageSelectLabelText: PropTypes.func,
   /**
    * The number dictating how many items a page contains.
    */

package/es/components/Pagination/experimental/Pagination.js

@@ -78,7 +78,18 @@ function Pagination({
     hideLabel: true,
     noLabel: true,
     inline: true,
-    onChange: event => setCurrentPageSize(Number(event.target.value)),
+    onChange: event => {
+      const pageSize = Number(event.target.value);
+      const page = 1;
+      setCurrentPage(page);
+      setCurrentPageSize(pageSize);
+      if (onChange) {
+        onChange({
+          page,
+          pageSize
+        });
+      }
+    },
     value: currentPageSize
   }, pageSizes.map(size => /*#__PURE__*/React.createElement(SelectItem, {
     key: size,

package/es/components/Popover/index.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
-import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/RadioButton/RadioButton.Skeleton.js

@@ -32,4 +32,4 @@ RadioButtonSkeleton.propTypes = {
   className: PropTypes.string
 };
 
-export { RadioButtonSkeleton, RadioButtonSkeleton as default };
+export { RadioButtonSkeleton };

package/es/components/Search/index.js

@@ -6,7 +6,7 @@
  */
 
 import Search from './Search.js';
-export { default as SearchSkeleton } from './Search.Skeleton.js';
+export { SearchSkeleton } from './Search.Skeleton.js';
 
 
 

package/es/components/Select/index.js

@@ -6,7 +6,7 @@
  */
 
 import Select from './Select.js';
-export { default as SelectSkeleton } from './Select.Skeleton.js';
+export { SelectSkeleton } from './Select.Skeleton.js';
 
 
 

package/es/components/ShapeIndicator/index.js

@@ -90,4 +90,4 @@ ShapeIndicator.propTypes = {
   textSize: PropTypes.oneOf([12, 14])
 };
 
-export { ShapeIndicator, ShapeIndicatorKinds, ShapeIndicator as default };
+export { ShapeIndicator, ShapeIndicatorKinds };