@carbon/react 1.89.0-rc.0 → 1.89.0

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

@@ -5,6 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
+interface FileItem {
+    name: string;
+    uuid: string;
+    file: File;
+}
+export interface FileChangeData {
+    addedFiles: FileItem[];
+    removedFiles: FileItem[];
+    currentFiles: FileItem[];
+    action: 'add' | 'remove' | 'clear';
+}
+export interface FileDeleteData {
+    deletedFile: FileItem;
+    remainingFiles: FileItem[];
+}
 export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Specify the types of files that this input should be able to receive
@@ -52,20 +67,23 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      */
     name?: string;
     /**
-     * Provide an optional `onChange` hook that is called each time the input is
-     * changed
+     * 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) => void;
+    onChange?: (event: any, data?: FileChangeData) => void;
     /**
      * Provide an optional `onClick` hook that is called each time the
      * FileUploader is clicked
      */
     onClick?: (event: any) => void;
     /**
-     * Provide an optional `onDelete` hook that is called when an uploaded item
-     * is removed
+     * 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) => void;
+    onDelete?: (event: any, data?: FileDeleteData) => void;
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
@@ -77,6 +95,10 @@ export interface FileUploaderHandle {
      * Clear internal state
      */
     clearFiles: () => void;
+    /**
+     * Get current files (only available when 'enable-enhanced-file-uploader' feature flag is enabled)
+     */
+    getCurrentFiles?: () => FileItem[];
 }
 declare const FileUploader: {
     <ItemType>(props: FileUploaderProps): React.ReactElement<any>;

package/lib/components/FileUploader/FileUploader.js

@@ -21,6 +21,7 @@ var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var useId = require('../../internal/useId.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 
 const FileUploader = /*#__PURE__*/React.forwardRef(({
@@ -42,45 +43,149 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   ...other
 }, ref) => {
   const fileUploaderInstanceId = useId.useId('file-uploader');
-  const [state, updateState] = React.useState({
-    fileNames: []
-  });
-  const nodes = [];
   const prefix = usePrefix.usePrefix();
-  const handleChange = evt => {
+  const enhancedFileUploaderEnabled = index.useFeatureFlag('enable-enhanced-file-uploader');
+  const [fileItems, setFileItems] = React.useState([]);
+  const [legacyFileNames, setLegacyFileNames] = React.useState([]);
+  const [fileObjects, setFileObjects] = React.useState(new Map());
+  const nodes = [];
+  const createFileItem = file => ({
+    name: file.name,
+    uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(new Uint8Array(8))).map(b => b.toString(36)).join('')}`,
+    file
+  });
+  const handleChange = React.useCallback(evt => {
     evt.stopPropagation();
-    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-    updateState(prevState => ({
-      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
-    }));
-    if (onChange) {
-      onChange(evt);
+    const newFiles = Array.from(evt.target.files);
+    if (enhancedFileUploaderEnabled) {
+      const newFileItems = newFiles.map(createFileItem);
+      let updatedFileItems;
+      if (multiple) {
+        const existingNames = new Set(fileItems.map(item => item.name));
+        const uniqueNewItems = newFileItems.filter(item => !existingNames.has(item.name));
+        updatedFileItems = [...fileItems, ...uniqueNewItems];
+      } else {
+        updatedFileItems = newFileItems;
+      }
+      setFileItems(updatedFileItems);
+      if (onChange) {
+        const allFiles = updatedFileItems.map(item => item.file);
+        const enhancedEvent = {
+          ...evt,
+          target: {
+            ...evt.target,
+            files: Object.assign(allFiles, {
+              item: index => allFiles[index] || null
+            }),
+            addedFiles: newFileItems,
+            currentFiles: updatedFileItems,
+            action: 'add'
+          }
+        };
+        onChange(enhancedEvent);
+      }
+    } else {
+      const filenames = newFiles.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);
+      }
     }
-  };
-  const handleClick = (evt, {
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
+  const handleClick = React.useCallback((evt, {
     index,
     filenameStatus
   }) => {
     if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
-      updateState({
-        fileNames: filteredArray
-      });
-      if (onDelete) {
-        onDelete(evt);
-        uploaderButton.current?.focus?.();
+      if (enhancedFileUploaderEnabled) {
+        const deletedItem = fileItems[index];
+        if (!deletedItem) return;
+        const remainingItems = fileItems.filter((_, i) => i !== index);
+        setFileItems(remainingItems);
+        const remainingFiles = remainingItems.map(item => item.file);
+        const enhancedEvent = {
+          ...evt,
+          target: {
+            ...evt.target,
+            files: Object.assign(remainingFiles, {
+              item: index => remainingFiles[index] || null
+            }),
+            deletedFile: deletedItem,
+            deletedFileName: deletedItem.name,
+            remainingFiles: remainingItems,
+            currentFiles: remainingItems,
+            action: 'remove'
+          }
+        };
+        if (onDelete) {
+          onDelete(enhancedEvent);
+        }
+        if (onChange) {
+          onChange(enhancedEvent);
+        }
+      } else {
+        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);
+        }
+      }
+      if (onClick) {
+        onClick(evt);
       }
-      onClick?.(evt);
+      uploaderButton.current?.focus?.();
     }
-  };
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
   React.useImperativeHandle(ref, () => ({
     clearFiles() {
-      updateState({
-        fileNames: []
-      });
-    }
-  }));
+      if (enhancedFileUploaderEnabled) {
+        const previousItems = [...fileItems];
+        setFileItems([]);
+        if (onChange && previousItems.length > 0) {
+          const enhancedEvent = {
+            target: {
+              files: Object.assign([], {
+                item: () => null
+              }),
+              clearedFiles: previousItems,
+              currentFiles: [],
+              action: 'clear'
+            },
+            preventDefault: () => {},
+            stopPropagation: () => {}
+          };
+          onChange(enhancedEvent);
+        }
+      } else {
+        setLegacyFileNames([]);
+        setFileObjects(new Map());
+      }
+    },
+    ...(enhancedFileUploaderEnabled && {
+      getCurrentFiles() {
+        return [...fileItems];
+      }
+    })
+  }), [enhancedFileUploaderEnabled, fileItems, onChange]);
   const uploaderButton = /*#__PURE__*/React.createRef();
   const classes = cx({
     [`${prefix}--form-item`]: true,
@@ -93,6 +198,15 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
   });
+  const displayFiles = enhancedFileUploaderEnabled ? fileItems.map((item, index) => ({
+    name: item.name,
+    key: item.uuid,
+    index
+  })) : legacyFileNames.map((name, index) => ({
+    name,
+    key: index,
+    index
+  }));
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classes
   }, other), !labelTitle ? null : /*#__PURE__*/React.createElement(Text.Text, {
@@ -116,32 +230,32 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": fileUploaderInstanceId
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--file-container`
-  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({
-    key: index,
+  }, displayFiles.length === 0 ? null : displayFiles.map(file => /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({
+    key: file.key,
     className: selectedFileClasses,
     ref: node => {
-      nodes[index] = node;
-    } // eslint-disable-line
+      nodes[file.index] = node;
+    }
   }, other), /*#__PURE__*/React.createElement(Text.Text, {
     as: "p",
     className: `${prefix}--file-filename`,
-    id: name
-  }, name), /*#__PURE__*/React.createElement("span", {
+    id: enhancedFileUploaderEnabled ? `${fileUploaderInstanceId}-file-${fileItems[file.index]?.uuid || file.index}` : `${fileUploaderInstanceId}-file-${file.index}`
+  }, file.name), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React.createElement(Filename.default, {
-    name: name,
+    name: file.name,
     iconDescription: iconDescription,
     status: filenameStatus,
     onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         handleClick(evt, {
-          index,
+          index: file.index,
           filenameStatus
         });
       }
     },
     onClick: evt => handleClick(evt, {
-      index,
+      index: file.index,
       filenameStatus
     })
   }))))));
@@ -211,7 +325,7 @@ FileUploader.propTypes = {
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['sm', 'small', 'md', 'field', 'lg'])
 };
 
 exports.default = FileUploader;

package/lib/components/Link/Link.js

@@ -52,9 +52,23 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     linkProps['aria-disabled'] = true;
   }
   const BaseComponentAsAny = BaseComponent ?? 'a';
+  const handleOnClick = event => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      // If the link is not disabled, we allow the onClick event to propagate
+      // so that any parent handlers can also respond to the click.
+      if (rest.onClick) {
+        rest.onClick(event);
+      }
+    }
+  };
   return /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({
     ref: ref
-  }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
+  }, linkProps, rest, {
+    onClick: handleOnClick
+  }), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React.createElement(Icon, null)));
 });

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2023, 2025
  *
  * 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/Menu/MenuContext.js

@@ -30,10 +30,17 @@ function menuReducer(state, action) {
         hasSelectableItems: true
       };
     case 'registerItem':
-      return {
-        ...state,
-        items: [...state.items, action.payload].filter(item => item.ref.current !== null)
-      };
+      {
+        const newItem = action.payload;
+        const items = state.items.filter(item => item.ref.current);
+        const next = newItem.ref.current?.nextElementSibling;
+        const idx = items.findIndex(item => item.ref.current === next);
+        items.splice(idx < 0 ? items.length : idx, 0, newItem);
+        return {
+          ...state,
+          items
+        };
+      }
   }
 }
 const MenuContext = /*#__PURE__*/React.createContext({

package/lib/components/Menu/MenuItem.js

@@ -51,7 +51,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
     middleware: [react.offset({
       mainAxis: -6,
       crossAxis: -6
-    })]
+    })],
+    strategy: 'fixed'
   });
   const {
     getReferenceProps,
@@ -130,18 +131,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
   });
-  const [isFocusable, setIsFocusable] = React.useState(false);
+
   // on first render, register this menuitem in the context's state
   // (used for keyboard navigation)
   React.useEffect(() => {
     registerItem();
-
-    // Detects if this is the first focusable item
-    const currentItems = context.state.items;
-    if (!disabled && menuItem.current && currentItems.length === 0) {
-      setIsFocusable(true);
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -180,7 +174,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: isFocusable ? 0 : -1,
+    tabIndex: !disabled ? 0 : -1,
     "aria-disabled": isDisabled ?? undefined,
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,

package/lib/components/Modal/Modal.js

@@ -19,7 +19,7 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
-var index$4 = require('../Layer/index.js');
+var index$3 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
@@ -28,13 +28,13 @@ var usePrefix = require('../../internal/usePrefix.js');
 var usePreviousValue = require('../../internal/usePreviousValue.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var index$3 = require('../IconButton/index.js');
+var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$2 = require('../Dialog/index.js');
+var Dialog = require('../Dialog/Dialog.js');
 var index$1 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 var warning = require('../../internal/warning.js');
@@ -85,6 +85,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const innerModal = React.useRef(null);
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
+  const wrapFocusTimeout = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
   const prevOpen = usePreviousValue.usePreviousValue(open);
   const modalInstanceId = `modal-${useId.useId()}`;
@@ -146,13 +147,20 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
       const {
         current: endTrapNode
       } = endTrap;
-      wrapFocus.wrapFocus({
-        bodyNode,
-        startTrapNode,
-        endTrapNode,
-        currentActiveNode,
-        oldActiveNode,
-        selectorsFloatingMenus
+      // use setTimeout to ensure focus is set after all browser default focus behavior. Fixes issue of
+      // focus not wrapping in Firefox
+      wrapFocusTimeout.current = setTimeout(() => {
+        wrapFocus.wrapFocus({
+          bodyNode,
+          startTrapNode,
+          endTrapNode,
+          currentActiveNode,
+          oldActiveNode,
+          selectorsFloatingMenus
+        });
+        if (wrapFocusTimeout.current) {
+          clearTimeout(wrapFocusTimeout.current);
+        }
       });
     }
 
@@ -293,7 +301,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   }) : null;
   const modalButton = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React.createElement(index$3.IconButton, {
+  }, /*#__PURE__*/React.createElement(index$2.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -310,7 +318,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   // alertdialog is the only permitted aria role for a native dialog element
   // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
   const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(index$2.unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog.Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,
@@ -333,7 +341,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     className: `${prefix}--modal--inner__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React.createElement(index$3.IconButton, {
+  }, /*#__PURE__*/React.createElement(index$2.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -345,7 +353,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React.createElement(index$4.Layer, _rollupPluginBabelHelpers.extends({
+  })))), /*#__PURE__*/React.createElement(index$3.Layer, _rollupPluginBabelHelpers.extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -401,7 +409,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     className: `${prefix}--modal-header__heading`
   }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React.createElement(index$4.Layer, _rollupPluginBabelHelpers.extends({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React.createElement(index$3.Layer, _rollupPluginBabelHelpers.extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -438,7 +446,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
-  return /*#__PURE__*/React.createElement(index$4.Layer, _rollupPluginBabelHelpers.extends({}, rest, {
+  return /*#__PURE__*/React.createElement(index$3.Layer, _rollupPluginBabelHelpers.extends({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -124,11 +124,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     inputValue
   }), [items, inputValue, itemToString$1, filterItems]);
   const nonSelectAllItems = React.useMemo(() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
-  let selectAll = filteredItems.some(item => item.isSelectAll);
-  if ((selected ?? []).length > 0 && selectAll) {
-    console.warn('Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.');
-    selectAll = false;
-  }
+  const selectAll = filteredItems.some(item => item.isSelectAll);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,

package/lib/components/MultiSelect/MultiSelect.js

@@ -113,11 +113,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return true; // Return true if item is not an object with undefined values
     });
   }, [items]);
-  let selectAll = filteredItems.some(item => item.isSelectAll);
-  if ((selected ?? []).length > 0 && selectAll) {
-    console.warn('Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.');
-    selectAll = false;
-  }
+  const selectAll = filteredItems.some(item => item.isSelectAll);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -491,13 +487,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   })), 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) => {
-    const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,
       totalSelectableCount
     } = getSelectionStats(selectedItems, filteredItems);
-    const isIndeterminate = item['isSelectAll'] && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
+    const isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some(selected => isEqual(selected, item));
+    const isIndeterminate = item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
     const itemProps = getItemProps({
       item,
       // we don't want Downshift to set aria-selected for us

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

@@ -25,6 +25,10 @@ export interface PopoverBaseProps {
      * Specify how the popover should align with the trigger element.
      */
     align?: PopoverAlignment;
+    /**
+     * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
+     */
+    alignmentAxisOffset?: number;
     /**
      * Will auto-align the popover on first render if it is not visible. This prop
      * is currently experimental and is subject to future changes. Requires

package/lib/components/Popover/index.js

@@ -19,7 +19,6 @@ var useEvent = require('../../internal/useEvent.js');
 var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
-var index$1 = require('../Toggletip/index.js');
 
 const PopoverContext = /*#__PURE__*/React.createContext({
   setFloating: {
@@ -64,7 +63,10 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
+
+    // No relatedTarget, focus moved to nowhere, so close the popover
     if (!relatedTarget) {
+      onRequestClose?.();
       return;
     }
     const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
@@ -237,7 +239,7 @@ forwardRef) {
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these cases we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type === index$1.ToggletipButton) {
+          if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type['displayName'] === 'ToggletipButton') {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }
@@ -294,6 +296,10 @@ Popover.propTypes = {
 
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
+  /**
+   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
+   */
+  alignmentAxisOffset: PropTypes.number,
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.

package/lib/components/StructuredList/StructuredList.d.ts

@@ -32,6 +32,10 @@ export interface StructuredListWrapperProps extends DivAttrs {
      * Specify whether your StructuredListWrapper should have selections
      */
     selection?: boolean;
+    /**
+     * Specify which row will be selected initially
+     */
+    selectedInitialRow?: string;
 }
 export declare function StructuredListWrapper(props: StructuredListWrapperProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListWrapper {
@@ -65,6 +69,10 @@ export declare namespace StructuredListWrapper {
          * Specify whether your StructuredListWrapper should have selections
          */
         selection: PropTypes.Requireable<boolean>;
+        /**
+         * Specify which row will be selected initially
+         */
+        selectedInitialRow: PropTypes.Requireable<string>;
     };
 }
 export interface StructuredListHeadProps extends DivAttrs {
@@ -148,6 +156,10 @@ export interface StructuredListRowProps extends DivAttrs {
      * Mark if this row should be selectable
      */
     selection?: boolean;
+    /**
+     * Specify row id so that it can be used for initial selection
+     */
+    id?: string;
 }
 export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
@@ -180,6 +192,10 @@ export declare namespace StructuredListRow {
          * Mark if this row should be selectable
          */
         selection: PropTypes.Requireable<boolean>;
+        /**
+         * Specify row id so that it can be used for initial selection
+         */
+        id: PropTypes.Requireable<string>;
     };
 }
 export interface StructuredListInputProps extends DivAttrs {