@carbon/react 1.88.0 → 1.89.0-rc.1

package/es/components/Toggletip/index.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { PopoverContent, Popover } from '../Popover/index.js';
+import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
@@ -149,57 +149,17 @@ function Toggletip({
     autoAlign: autoAlign
   }, rest), children));
 }
-Toggletip.propTypes = {
-  /**
-   * Specify how the toggletip should align with the button
-   */
-  align: PropTypes.oneOf(['top', 'top-left',
-  // deprecated use top-start instead
-  'top-right',
-  // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
-  // deprecated use bottom-start instead
-  'bottom-right',
-  // deprecated use bottom-end instead
 
-  'left', 'left-bottom',
-  // deprecated use left-end instead
-  'left-top',
-  // deprecated use left-start instead
-
-  'right', 'right-bottom',
-  // deprecated use right-end instead
-  'right-top',
-  // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  /**
-   * **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.
-   */
-  as: PropTypes.elementType,
-  /**
-   * 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
-   * React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool,
-  /**
-   * Custom children to be rendered as the content of the label
-   */
-  children: PropTypes.node,
-  /**
-   * Provide a custom class name to be added to the outermost node in the
-   * component
-   */
-  className: PropTypes.string,
+// Get all the properties from Popover except for "open".
+// The Typescript types for PropTypes are really messed up so we need lots of
+// casting.  It will be great when we can finally get rid of PropTypes altogether.
+const {
+  open,
+  ...popoverNonOpenPropTypes
+} = Popover.propTypes ?? {};
+Toggletip.propTypes = {
+  // Has all of Popover's PropTypes except for "open".
+  ...popoverNonOpenPropTypes,
   /**
    * Specify if the toggletip should be open by default
    */

package/es/components/UIShell/Header.d.ts

@@ -8,15 +8,15 @@ import React, { ReactNode } from 'react';
 export interface HeaderProps {
     children?: ReactNode;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-label
      */
     'aria-label'?: string;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-labelledby
      */
     'aria-labelledby'?: string;
     /**
-     * Optionally provide a custom class name that is applied to the underlying <header>
+     * Optionally provide a custom class name that is applied to the underlying header
      */
     className?: string;
 }

package/es/components/UIShell/Header.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const Header = ({
@@ -25,11 +24,15 @@ const Header = ({
 };
 Header.propTypes = {
   /**
-   * Required props for the accessibility label of the header
+   * Optionally provide aria-label
    */
-  ...AriaLabelPropType,
+  'aria-label': PropTypes.string,
   /**
-   * Optionally provide a custom class name that is applied to the underlying <header>
+   * Optionally provide aria-labelledby
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * Optionally provide a custom class name that is applied to the underlying header
    */
   className: PropTypes.string
 };

package/es/internal/Selection.js

@@ -48,7 +48,7 @@ const useSelection = ({
 
     // Assert special properties (e.g., `disabled`, `isSelectAll`, etc.) are
     // `any` since those properties aren’t part of the generic type.
-    const allSelectableItems = filteredItems.filter(item => !item?.disabled);
+    const allSelectableItems = filteredItems.filter(item => !item?.disabled && !item?.isSelectAll);
     const disabledItemCount = filteredItems.filter(item => item?.disabled).length;
     let newSelectedItems;
 

package/es/internal/useMergedRefs.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 
 /**
  * Merges multiple refs into a single callback ref.
@@ -16,15 +16,16 @@ import { useCallback } from 'react';
  * node, assigns that node to every ref in the array.
  */
 const useMergedRefs = refs => {
+  const memoizedRefs = useMemo(() => refs, refs);
   return useCallback(node => {
-    refs.forEach(ref => {
+    memoizedRefs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref) {
         ref.current = node;
       }
     });
-  }, [refs]);
+  }, [memoizedRefs]);
 };
 
 export { useMergedRefs };

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { ToggletipBaseProps } from '../Toggletip';
 import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
@@ -17,15 +18,11 @@ export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActi
 export type DeprecatedAlignment = DeprecatedPopoverAlignment;
 export type NewAlignment = NewPopoverAlignment;
 export type Alignment = PopoverAlignment;
-export interface AILabelProps {
+export interface AILabelProps extends ToggletipBaseProps {
     AILabelContent?: React.ReactNode;
     aiText?: string;
     aiTextLabel?: string;
     textLabel?: string;
-    align?: Alignment;
-    autoAlign?: boolean;
-    children?: React.ReactNode;
-    className?: string;
     kind?: 'default' | 'inline';
     onRevertClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
     revertActive?: boolean;

package/lib/components/AILabel/index.js

@@ -10,12 +10,10 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../Toggletip/index.js');
 var index$1 = require('../IconButton/index.js');
-var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -145,6 +143,7 @@ const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
 });
 AILabel.displayName = 'AILabel';
 AILabel.propTypes = {
+  ...index.Toggletip.propTypes,
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
@@ -158,49 +157,10 @@ AILabel.propTypes = {
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
   aiTextLabel: deprecate.deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
-  /**
-   * Specify how the popover should align with the button
-   */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
-  // deprecated use top-start instead
-  'top-right',
-  // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
-  // deprecated use bottom-start instead
-  'bottom-right',
-  // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
-  // deprecated use left-end instead
-  'left-top',
-  // deprecated use left-start instead
-
-  'right', 'right-bottom',
-  // deprecated use right-end instead
-  'right-top',
-  // deprecated use right-start instead
-
-  // 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),
   /**
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
   'aria-label': PropTypes.string,
-  /**
-   * Will auto-align the popover. This prop is currently experimental and is
-   * subject to future changes. Requires React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool,
-  /**
-   * Specify the content you want rendered inside the `AILabel` ToggleTip
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to the `AILabel`
-   */
-  className: PropTypes.string,
   /**
    * Specify the type of `AILabel`, from the following list of types:
    */

package/lib/components/ContainedList/ContainedList.d.ts

@@ -7,9 +7,9 @@
 import React, { ReactNode } from 'react';
 import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-export interface ContainedListType extends React.FC<ContainedListProps> {
+export type ContainedListType = React.FC<ContainedListProps> & {
     ContainedListItem: typeof ContainedListItem;
-}
+};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**

package/lib/components/Copy/Copy.js

@@ -61,6 +61,7 @@ function Copy({
     autoAlign: autoAlign,
     className: classNames,
     label: animation ? feedback : initialLabel,
+    leaveDelayMs: animation ? feedbackTimeout : undefined,
     onClick: events.composeEventHandlers([onClick, handleClick]),
     onAnimationEnd: events.composeEventHandlers([onAnimationEnd, handleAnimationEnd])
   }, other, {

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

@@ -130,18 +130,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 +173,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

@@ -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);
+        }
       });
     }
 

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.
@@ -363,29 +369,12 @@ function PopoverContentRenderFunction(
     caretRef,
     autoAlign
   } = React.useContext(PopoverContext);
-  const textRef = React.useRef(null);
-  const [isMultiLine, setIsMultiLine] = React.useState(false);
-  const ref = useMergedRefs.useMergedRefs([setFloating, textRef, forwardRef]);
+  const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  React.useEffect(() => {
-    checkIfMultiLine();
-  }, [children]);
-  const checkIfMultiLine = () => {
-    const el = textRef.current;
-    if (el) {
-      const style = getComputedStyle(el);
-      const lineHeight = parseFloat(style.lineHeight);
-      const height = el.offsetHeight;
-      const lines = Math.floor(height / lineHeight);
-      setIsMultiLine(lines > 1);
-    }
-  };
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React.createElement("span", {
-    className: cx(`${prefix}--popover-content`, className, {
-      [`${prefix}--tooltip-content--multiline`]: isMultiLine
-    }),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
     className: cx({

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 {

package/lib/components/StructuredList/StructuredList.js

@@ -32,6 +32,7 @@ function StructuredListWrapper(props) {
     ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
+    selectedInitialRow,
     ...other
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -40,7 +41,7 @@ function StructuredListWrapper(props) {
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush && !selection
   }, className);
-  const [selectedRow, setSelectedRow] = React.useState(null);
+  const [selectedRow, setSelectedRow] = React.useState(selectedInitialRow ?? null);
   return /*#__PURE__*/React.createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
   }, /*#__PURE__*/React.createElement(GridSelectedRowDispatchContext.Provider, {
@@ -81,7 +82,11 @@ StructuredListWrapper.propTypes = {
   /**
    * Specify whether your StructuredListWrapper should have selections
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify which row will be selected initially
+   */
+  selectedInitialRow: PropTypes.string
 };
 function StructuredListHead(props) {
   const {
@@ -143,21 +148,22 @@ function StructuredListRow(props) {
     head,
     onClick,
     selection,
+    id,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
-  const id = useId.useId('grid-input');
+  const rowId = id ?? useId.useId('grid-input');
   const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix.usePrefix();
   const value = {
-    id
+    id: rowId
   };
   const classes = cx(`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
     // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
-    [`${prefix}--structured-list-row--selected`]: selectedRow === id
+    [`${prefix}--structured-list-row--selected`]: selectedRow === rowId
   }, className);
   const itemRef = React.useRef(null);
   const handleClick = () => {
@@ -178,7 +184,7 @@ function StructuredListRow(props) {
     className: classes,
     ref: itemRef,
     onClick: event => {
-      setSelectedRow?.(id);
+      setSelectedRow?.(rowId);
       onClick && onClick(event);
       if (selection) {
         // focus items only when selection is enabled
@@ -194,7 +200,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React.createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React.createElement(iconsReact.RadioButtonChecked, {
+  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === rowId ? /*#__PURE__*/React.createElement(iconsReact.RadioButtonChecked, {
     className: `${prefix}--structured-list__icon`
   }) : /*#__PURE__*/React.createElement(iconsReact.RadioButton, {
     className: `${prefix}--structured-list__icon`
@@ -228,7 +234,11 @@ StructuredListRow.propTypes = {
   /**
    * Mark if this row should be selectable
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify row id so that it can be used for initial selection
+   */
+  id: PropTypes.string
 };
 function StructuredListInput(props) {
   const defaultId = useId.useId('structureListInput');