@carbon/react 1.97.0 → 1.99.0-rc.0

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

@@ -8,7 +8,9 @@ import React, { type HTMLAttributes } from 'react';
 interface FileItem {
     name: string;
     uuid: string;
-    file: File;
+    file: File & {
+        invalidFileType?: boolean;
+    };
 }
 export interface FileChangeData {
     addedFiles: FileItem[];
@@ -58,6 +60,10 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Specify the title text of this `<FileUploader>`
      */
     labelTitle?: string;
+    /**
+     * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+     */
+    maxFileSize?: number;
     /**
      * Specify if the component should accept multiple files to upload
      */
@@ -66,24 +72,32 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Provide a name for the underlying `<input>` node
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: Array<File & {
+            invalidFileType?: boolean;
+        }>;
+    }) => void;
     /**
      * Provide an optional `onChange` hook that is called each time the input is changed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Also fires for file deletions and clearFiles operations
      * - Event includes enhanced file information in event.target
      */
-    onChange?: (event: any, data?: FileChangeData) => void;
+    onChange?: (event: React.SyntheticEvent<HTMLElement>, data?: FileChangeData) => void;
     /**
      * Provide an optional `onClick` hook that is called each time the
      * FileUploader is clicked
      */
-    onClick?: (event: any) => void;
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
     /**
      * Provide an optional `onDelete` hook that is called when an uploaded item is removed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Event includes deleted file information in event.target
      */
-    onDelete?: (event: any, data?: FileDeleteData) => void;
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, data?: FileDeleteData) => void;
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
@@ -101,9 +115,10 @@ export interface FileUploaderHandle {
     getCurrentFiles?: () => FileItem[];
 }
 declare const FileUploader: {
-    <ItemType>(props: FileUploaderProps): React.ReactElement<any>;
-    propTypes?: any;
-    contextTypes?: any;
-    defaultProps?: any;
+    (props: FileUploaderProps): React.ReactElement;
+    displayName?: string;
+    propTypes?: unknown;
+    contextTypes?: unknown;
+    defaultProps?: unknown;
 };
 export default FileUploader;

package/lib/components/FileUploader/FileUploader.js

@@ -24,7 +24,6 @@ require('../Text/TextDirection.js');
 var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
 
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const FileUploader = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonKind,
@@ -35,8 +34,10 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   iconDescription,
   labelDescription,
   labelTitle,
+  maxFileSize,
   multiple,
   name,
+  onAddFiles,
   onChange,
   onClick,
   onDelete,
@@ -48,20 +49,51 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   const enhancedFileUploaderEnabled = index.useFeatureFlag('enable-enhanced-file-uploader');
   const [fileItems, setFileItems] = React.useState([]);
   const [legacyFileNames, setLegacyFileNames] = React.useState([]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-  const [fileObjects, setFileObjects] = React.useState(new Map());
+  const uploaderButton = /*#__PURE__*/React.createRef();
   const nodes = [];
-  const createFileItem = file => ({
+  const createFileItem = React.useCallback(file => ({
     name: file.name,
     uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(new Uint8Array(8))).map(b => b.toString(36)).join('')}`,
     file
-  });
+  }), [fileUploaderInstanceId]);
+
+  /**
+   * Validates files based on file size restrictions.
+   * Marks invalid files with `invalidFileType: true` but includes them in the result.
+   *
+   * Note: The `accept` prop is passed to the native HTML input element (`FileUploaderButton`),
+   * which provides UI-level filtering in the file picker dialog, but there is no JavaScript validation
+   * for file types - users can bypass this by changing the file type filter in the dialog.
+   * https://github.com/carbon-design-system/carbon/issues/21166
+   */
+  const validateFiles = React.useCallback(files => {
+    return files.map(file => {
+      if (maxFileSize && file.size > maxFileSize) {
+        file.invalidFileType = true;
+      }
+      return file;
+    });
+  }, [maxFileSize]);
   const handleChange = React.useCallback(evt => {
     evt.stopPropagation();
-    const newFiles = Array.from(evt.target.files);
+    const incomingFiles = Array.from(evt.target.files);
+    const filesToValidate = multiple ? incomingFiles : [incomingFiles[0]];
+    const validatedFiles = validateFiles(filesToValidate);
+    if (onAddFiles) {
+      onAddFiles(evt, {
+        addedFiles: validatedFiles
+      });
+    }
+
+    // Filter out invalid files since FileUploader cannot display them
+    // (FileUploaderDropContainer returns all files because parent uses FileUploaderItem to display errors)
+    // https://github.com/carbon-design-system/carbon/issues/21166
+    const validFiles = validatedFiles.filter(file => !file.invalidFileType);
+    if (validFiles.length === 0) {
+      return;
+    }
     if (enhancedFileUploaderEnabled) {
-      const newFileItems = newFiles.map(createFileItem);
+      const newFileItems = validFiles.map(createFileItem);
       let updatedFileItems;
       if (multiple) {
         const existingNames = new Set(fileItems.map(item => item.name));
@@ -88,23 +120,14 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         onChange(enhancedEvent);
       }
     } else {
-      const filenames = newFiles.map(file => file.name);
+      const filenames = validFiles.map(file => file.name);
       const updatedFileNames = multiple ? [...new Set([...legacyFileNames, ...filenames])] : filenames;
       setLegacyFileNames(updatedFileNames);
-      setFileObjects(prevMap => {
-        const newMap = multiple ? new Map(prevMap) : new Map();
-        newFiles.forEach(file => {
-          newMap.set(file.name, file);
-        });
-        return newMap;
-      });
       if (onChange) {
         onChange(evt);
       }
     }
-  },
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onAddFiles, onChange, createFileItem, validateFiles]);
   const handleClick = React.useCallback((evt, {
     index,
     filenameStatus
@@ -141,15 +164,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         const deletedFileName = legacyFileNames[index];
         const filteredArray = legacyFileNames.filter(filename => filename !== deletedFileName);
         setLegacyFileNames(filteredArray);
-
-        // Update File objects
-        setFileObjects(prevMap => {
-          const newMap = new Map(prevMap);
-          if (deletedFileName) {
-            newMap.delete(deletedFileName);
-          }
-          return newMap;
-        });
         if (onDelete) {
           onDelete(evt);
         }
@@ -159,9 +173,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
       uploaderButton.current?.focus?.();
     }
-  },
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick, uploaderButton]);
   React.useImperativeHandle(ref, () => ({
     clearFiles() {
       if (enhancedFileUploaderEnabled) {
@@ -184,7 +196,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         }
       } else {
         setLegacyFileNames([]);
-        setFileObjects(new Map());
       }
     },
     ...(enhancedFileUploaderEnabled && {
@@ -193,7 +204,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
     })
   }), [enhancedFileUploaderEnabled, fileItems, onChange]);
-  const uploaderButton = /*#__PURE__*/React.createRef();
   const classes = cx({
     [`${prefix}--form-item`]: true,
     [className]: className
@@ -267,6 +277,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     })
   }))))));
 });
+FileUploader.displayName = 'FileUploader';
 FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
@@ -305,6 +316,10 @@ FileUploader.propTypes = {
    * Specify the title text of this `<FileUploader>`
    */
   labelTitle: PropTypes.string,
+  /**
+   * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+   */
+  maxFileSize: PropTypes.number,
   /**
    * Specify if the component should accept multiple files to upload
    */
@@ -313,6 +328,11 @@ FileUploader.propTypes = {
    * Provide a name for the underlying `<input>` node
    */
   name: PropTypes.string,
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles: PropTypes.func,
   /**
    * Provide an optional `onChange` hook that is called each time the input is
    * changed

package/lib/components/FileUploader/FileUploaderButton.js

@@ -40,10 +40,10 @@ function FileUploaderButton({
   const prefix = usePrefix.usePrefix();
   const [labelText, setLabelText] = React.useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId.useId();
   const {
     current: inputId
-  } = React.useRef(id || useId.useId());
+  } = React.useRef(id || generatedId);
   const inputNode = React.useRef(null);
   const classes = cx(`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

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

@@ -28,6 +28,10 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      * this control
      */
     labelText?: string;
+    /**
+     * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+     */
+    maxFileSize?: number;
     /**
      * Specify if the component should accept multiple files to upload
      */
@@ -40,7 +44,7 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      * Event handler that is called after files are added to the uploader
      */
     onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
-        addedFiles: File[];
+        addedFiles: AddedFile[];
     }) => void;
     /**
      * Provide an optional function to be called when the button element
@@ -64,7 +68,10 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      */
     tabIndex?: number | string;
 }
-declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): import("react/jsx-runtime").JSX.Element;
+interface AddedFile extends File {
+    invalidFileType?: boolean;
+}
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, maxFileSize, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**
@@ -88,6 +95,10 @@ declare namespace FileUploaderDropContainer {
          * this control
          */
         labelText: PropTypes.Validator<string>;
+        /**
+         * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+         */
+        maxFileSize: PropTypes.Requireable<number>;
         /**
          * Specify if the component should accept multiple files to upload
          */

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -27,6 +27,7 @@ function FileUploaderDropContainer({
   id,
   disabled,
   labelText = 'Add file',
+  maxFileSize,
   multiple = false,
   name,
   onAddFiles = noopFn.noopFn,
@@ -37,10 +38,10 @@ function FileUploaderDropContainer({
 }) {
   const prefix = usePrefix.usePrefix();
   const inputRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId.useId();
   const {
     current: uid
-  } = React.useRef(id || useId.useId());
+  } = React.useRef(id || generatedId);
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
@@ -48,12 +49,9 @@ function FileUploaderDropContainer({
   }, className);
 
   /**
-   * Filters the array of added files based on file type restrictions
+   * Filters the array of added files based on file type and size restrictions
    */
   function validateFiles(transferredFiles) {
-    if (!accept.length) {
-      return transferredFiles;
-    }
     const acceptedTypes = new Set(accept);
     return transferredFiles.reduce((acc, curr) => {
       const {
@@ -62,6 +60,13 @@ function FileUploaderDropContainer({
       } = curr;
       const fileExtensionRegExp = new RegExp(pattern, 'i');
       const [fileExtension] = name.match(fileExtensionRegExp) ?? [];
+      if (maxFileSize && curr.size > maxFileSize) {
+        curr.invalidFileType = true;
+        return acc.concat([curr]);
+      }
+      if (!accept.length) {
+        return acc.concat([curr]);
+      }
       if (fileExtension === undefined) {
         return acc;
       }
@@ -174,6 +179,10 @@ FileUploaderDropContainer.propTypes = {
    * this control
    */
   labelText: PropTypes.string.isRequired,
+  /**
+   * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+   */
+  maxFileSize: PropTypes.number,
   /**
    * Specify if the component should accept multiple files to upload
    */

package/lib/components/FileUploader/FileUploaderItem.js

@@ -40,10 +40,10 @@ function FileUploaderItem({
   const textRef = React.useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId.useId();
   const {
     current: id
-  } = React.useRef(uuid || useId.useId());
+  } = React.useRef(uuid || generatedId);
   const classes = cx(`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
@@ -53,11 +53,14 @@ function FileUploaderItem({
   const filterSpaceName = name => {
     return name?.replace(/\s+/g, '');
   };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
+    if (!element) {
+      setIsEllipsisApplied(false);
+      return false;
+    }
+    const isActive = element.offsetWidth < element.scrollWidth;
+    setIsEllipsisApplied(isActive);
+    return isActive;
   };
   React.useLayoutEffect(() => {
     isEllipsisActive(textRef.current);

package/lib/components/Link/Link.js

@@ -71,7 +71,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }, linkProps, rest, {
     onClick: handleOnClick
-  }), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
+  }), children, !inline && Icon && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React.createElement(Icon, null)));
 });

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

@@ -4,6 +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 { Menu } from './Menu';
-import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
-export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };
+import { Menu, type MenuProps } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuProps, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps, };
+export default Menu;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -726,6 +726,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     return /*#__PURE__*/React.createElement(index$1.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isActive: isChecked && !item['isSelectAll'],
       isHighlighted: highlightedIndex === index,
       title: itemText,

package/lib/components/MultiSelect/MultiSelect.js

@@ -511,6 +511,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']

package/lib/components/NumberInput/NumberInput.d.ts

@@ -135,10 +135,14 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     min?: number;
     /**
-     * Provide an optional handler that is called when the input or stepper
+     * Provide an optional handler that is called when the input is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, value?: string | number) => void;
+    /**
+     * Provide an optional handler that is called when the stepper
      * buttons are blurred.
      */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLButtonElement>) => void;
+    onStepperBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /**
      * Provide an optional handler that is called when the internal state of
      * NumberInput changes. This handler is called with event and state info.

package/lib/components/NumberInput/NumberInput.js

@@ -128,6 +128,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     max,
     min,
     onBlur,
+    onStepperBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -428,6 +429,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      let parsedValueForBlur;
       if (type === 'text') {
         // When isControlled, the current inputValue needs re-parsed
         // because the consumer's onChange hasn't been called yet and
@@ -443,6 +445,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
+        parsedValueForBlur = parsedFormattedNewValue;
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
@@ -468,7 +471,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         }
       }
       if (onBlur) {
-        onBlur(e);
+        if (type === 'number') {
+          onBlur(e, value);
+          return;
+        }
+        const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+        onBlur(e, parsedTextValue);
       }
     },
     pattern: pattern,
@@ -488,7 +496,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -501,7 +509,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -612,10 +620,14 @@ NumberInput.propTypes = {
    */
   stepStartValue: PropTypes.number,
   /**
-   * Provide an optional handler that is called when the input or stepper
-   * buttons are blurred.
+   * Provide an optional handler that is called when the input is blurred.
    */
   onBlur: PropTypes.func,
+  /**
+   * Provide an optional handler that is called when the stepper
+   * buttons are blurred.
+   */
+  onStepperBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.

package/lib/components/Pagination/Pagination.js

@@ -11,16 +11,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var PropTypes = require('prop-types');
 var React = require('react');
+var index = require('../IconButton/index.js');
+var PropTypes = require('prop-types');
 var Select = require('../Select/Select.js');
 require('../Select/Select.Skeleton.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
+var cx = require('classnames');
+var isEqual = require('react-fast-compare');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var index = require('../IconButton/index.js');
-var isEqual = require('react-fast-compare');
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -270,7 +270,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React.createElement(index.IconButton, {
-    align: "top-end",
+    align: "top",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,

package/lib/components/Popover/index.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/Popover/index.js

@@ -62,27 +62,41 @@ forwardRef) {
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
+  const lastClickWasInsidePopoverContent = React.useRef(false);
   let align = mapPopoverAlign.mapPopoverAlign(initialAlign);
 
+  // Tracks clicks inside PopoverContent to prevent it from closing when clicked, this handles an edge
+  // case where the popover will close when clicking non-focusable elements (e.g. text)
+  useEvent.useEvent(popover, 'mousedown', event => {
+    const target = event.target;
+    lastClickWasInsidePopoverContent.current = refs.floating.current?.contains(target) || false;
+
+    // reset flag
+    if (lastClickWasInsidePopoverContent.current) {
+      setTimeout(() => {
+        lastClickWasInsidePopoverContent.current = false;
+      }, 0);
+    }
+  });
+
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (isTabTip) {
-      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
-        onRequestClose?.();
-      }
-      return;
-    }
     if (!relatedTarget) {
+      // do not close if PopoverContent was clicked
+      if (lastClickWasInsidePopoverContent.current) {
+        lastClickWasInsidePopoverContent.current = false;
+        return;
+      }
       onRequestClose?.();
-      return;
-    }
-    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
-    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+    } else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+      const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+      const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 
-    // Only close if focus moved outside both containers
-    if (isOutsideMainContainer && isOutsideFloating) {
-      onRequestClose?.();
+      // Only close if focus moved outside both containers and not to an interactive parent wrapper
+      if (isOutsideFloating && !isFocusableWrapper) {
+        onRequestClose?.();
+      }
     }
   });
   useEvent.useWindowEvent('click', ({