@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/SideNav/SideNav.tsx

@@ -21,13 +21,7 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
-import {
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
+import {useCallback, useImperativeHandle, useRef, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
@@ -47,6 +41,7 @@ import type {ResizableConfig} from '../Resizable/useResizable';
 import {ResizeHandle} from '../Resizable/ResizeHandle';
 import {themeProps} from '../utils/themeProps';
 import {SizeProvider} from '../SizeContext/SizeContext';
+import {useDevWarning} from '../hooks/useDevWarning';
 import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -57,6 +52,85 @@ import {useMergedRefs} from '../hooks/useMergedRefs';
 /** Width below which dragging collapses the sidebar (when collapsible). */
 const COLLAPSE_THRESHOLD = 160;
 
+// =============================================================================
+// Collapse config
+// =============================================================================
+
+interface ResolvedCollapseConfig {
+  isCollapsible: boolean;
+  defaultIsCollapsed: boolean;
+  isCollapsed: boolean | undefined;
+  onCollapsedChange: ((isCollapsed: boolean) => void) | undefined;
+  /** Dev-warning text when both props address the same state, else null. */
+  conflict: string | null;
+}
+
+/**
+ * `collapsible` and `resizable` can each carry collapse state, so they are
+ * normalized here into one config with one owner — two independently
+ * initialized copies of the same boolean is what rendered an expanded nav at
+ * width 0 in #4790. `resizable` is the superset, so its keys win.
+ */
+function resolveCollapseConfig(
+  collapsible: boolean | SideNavCollapsibleConfig,
+  resizable: boolean | ResizableConfig,
+): ResolvedCollapseConfig {
+  const fromCollapsible = typeof collapsible === 'object' ? collapsible : {};
+  const fromResizable = typeof resizable === 'object' ? resizable : {};
+
+  const resizableCarriesCollapse =
+    fromResizable.defaultIsCollapsed !== undefined ||
+    fromResizable.isCollapsed !== undefined ||
+    fromResizable.onCollapseChange !== undefined;
+
+  return {
+    isCollapsible: !!collapsible || resizableCarriesCollapse,
+    defaultIsCollapsed:
+      (resizableCarriesCollapse
+        ? fromResizable.defaultIsCollapsed
+        : fromCollapsible.defaultIsCollapsed) ?? false,
+    isCollapsed: resizableCarriesCollapse
+      ? fromResizable.isCollapsed
+      : fromCollapsible.isCollapsed,
+    onCollapsedChange: resizableCarriesCollapse
+      ? fromResizable.onCollapseChange
+      : fromCollapsible.onCollapsedChange,
+    conflict: describeCollapseConflict(fromCollapsible, fromResizable),
+  };
+}
+
+/**
+ * Names the keys that address the same collapse state on both props, and
+ * which one won. Silent for the common non-overlapping combinations —
+ * `collapsible: true` alongside a resize config is not a conflict.
+ */
+function describeCollapseConflict(
+  collapsible: SideNavCollapsibleConfig,
+  resizable: ResizableConfig,
+): string | null {
+  const collapsibleKeys = [
+    collapsible.defaultIsCollapsed !== undefined && 'defaultIsCollapsed',
+    collapsible.isCollapsed !== undefined && 'isCollapsed',
+    collapsible.onCollapsedChange !== undefined && 'onCollapsedChange',
+  ].filter((key): key is string => key !== false);
+  const resizableKeys = [
+    resizable.defaultIsCollapsed !== undefined && 'defaultIsCollapsed',
+    resizable.isCollapsed !== undefined && 'isCollapsed',
+    resizable.onCollapseChange !== undefined && 'onCollapseChange',
+  ].filter((key): key is string => key !== false);
+
+  if (collapsibleKeys.length === 0 || resizableKeys.length === 0) {
+    return null;
+  }
+
+  return (
+    `${collapsibleKeys.map(key => `collapsible.${key}`).join(', ')} and ` +
+    `${resizableKeys.map(key => `resizable.${key}`).join(', ')} address the ` +
+    `same collapse state. resizable wins; the collapsible ` +
+    `${collapsibleKeys.length === 1 ? 'value is' : 'values are'} ignored.`
+  );
+}
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -269,8 +343,13 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
    *   - `defaultWidth` — initial width in pixels (default: 260)
    *   - `minWidth` — minimum width in pixels (default: 180)
    *   - `maxWidth` — maximum width in pixels (default: 480)
-   *   - `autoSaveId` — localStorage key for persisting width
+   *   - `autoSaveId` — localStorage key for persisting width and collapse state
    *   - `onWidthChange` — called when the width changes
+   *   - `defaultIsCollapsed` / `isCollapsed` / `onCollapseChange` — collapse
+   *     state, when `resizable` should own it rather than `collapsible`
+   *
+   * When both props carry collapse state, `resizable` wins and a dev warning
+   * names the conflicting keys.
    *
    * @default false
    */
@@ -334,40 +413,31 @@ export function SideNav({
   const t = useTranslator();
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
-  const isCollapsible = !!collapsible;
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
-  const defaultIsCollapsed = collapsibleConfig.defaultIsCollapsed ?? false;
-  const controlledCollapsed = collapsibleConfig.isCollapsed;
-  const onCollapsedChange = collapsibleConfig.onCollapsedChange;
 
   // Resizable config
   const resizableConfig = typeof resizable === 'object' ? resizable : {};
   const isResizable = !!resizable;
 
-  // Collapse state (controlled + uncontrolled)
-  const isControlled = controlledCollapsed !== undefined;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] =
-    useState(defaultIsCollapsed);
-  const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
+  const collapseConfig = resolveCollapseConfig(collapsible, resizable);
+  const {isCollapsible, onCollapsedChange} = collapseConfig;
+
+  useDevWarning(
+    'SideNav',
+    collapseConfig.conflict ?? '',
+    collapseConfig.conflict != null,
+  );
+
   const navRef = useRef<HTMLElement>(null);
   const mergedNavRef = useMergedRefs(ref, navRef);
   const collapseStateRef = useRef<SideNavCollapseState>({
-    isCollapsed: collapsed,
+    isCollapsed: false,
     toggle: () => {},
     isCollapsible,
   });
 
-  const setCollapsedState = useCallback(
-    (value: boolean) => {
-      if (!isControlled) {
-        setUncontrolledCollapsed(value);
-      }
-      onCollapsedChange?.(value);
-    },
-    [isControlled, onCollapsedChange],
-  );
-
-  // Resize hook — callbacks keep SideNav in sync without effects.
+  // useResizable is the sole collapse owner in every SideNav mode. Keeping that
+  // owner mounted when resize is toggled preserves the current collapse state.
   const resizableHook = useResizable({
     defaultSize: resizableConfig.defaultWidth ?? 260,
     minSizePx: resizableConfig.minWidth ?? 180,
@@ -375,10 +445,14 @@ export function SideNav({
     collapsible: isCollapsible,
     collapsedSize: COLLAPSE_THRESHOLD,
     autoSaveId: resizableConfig.autoSaveId,
+    defaultIsCollapsed: collapseConfig.defaultIsCollapsed,
+    isCollapsed: collapseConfig.isCollapsed,
     onSizeChange: resizableConfig.onWidthChange,
-    onCollapseChange: isCollapsible ? setCollapsedState : undefined,
+    onCollapseChange: onCollapsedChange,
   });
 
+  const collapsed = resizableHook.isCollapsed;
+
   const toggle = useCallback(() => {
     const next = !collapsed;
 
@@ -389,15 +463,12 @@ export function SideNav({
       isCollapsed: next,
     };
 
-    setCollapsedState(next);
-    if (isResizable) {
-      if (next) {
-        resizableHook.collapse();
-      } else {
-        resizableHook.expand();
-      }
+    if (next) {
+      resizableHook.collapse();
+    } else {
+      resizableHook.expand();
     }
-  }, [collapsed, setCollapsedState, isResizable, resizableHook]);
+  }, [collapsed, resizableHook]);
 
   const showResizeHandle = isResizable && !collapsed;
 

package/src/SideNav/SideNavHeading.tsx

@@ -37,6 +37,7 @@ import {Icon} from '../Icon';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useSideNavCollapse} from './SideNavCollapseContext';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
@@ -60,7 +61,7 @@ const styles = stylex.create({
     minHeight: spacingVars['--spacing-8'],
     paddingInlineStart: {
       default: spacingVars['--spacing-2'],
-      ':has(.astryx-navicon)': 0,
+      ':has(.astryx-nav-icon)': 0,
     },
     paddingInlineEnd: spacingVars['--spacing-2'],
     paddingBlock: 0,
@@ -212,7 +213,7 @@ const styles = stylex.create({
     minHeight: spacingVars['--spacing-8'],
     paddingInlineStart: {
       default: spacingVars['--spacing-2'],
-      ':has(.astryx-navicon)': 0,
+      ':has(.astryx-nav-icon)': 0,
     },
     paddingInlineEnd: spacingVars['--spacing-2'],
     paddingBlock: 0,
@@ -433,6 +434,7 @@ export function SideNavHeading({
             themeProps('side-nav-heading'),
             focusOutlineProps.focusVisible(
               navItemStyles.item,
+              interactionOverlayStyles.backgroundColor,
               styles.rootCollapsed,
               xstyle,
             ),
@@ -456,6 +458,7 @@ export function SideNavHeading({
               themeProps('side-nav-heading'),
               focusOutlineProps.focusVisible(
                 navItemStyles.item,
+                interactionOverlayStyles.backgroundColor,
                 styles.rootCollapsed,
                 styles.menuTrigger,
                 xstyle,

package/src/SideNav/SideNavItem.doc.mjs

@@ -55,7 +55,7 @@ export const docs = {
     {
       name: 'endContent',
       type: 'ReactNode',
-      description: 'Right-side content such as badges or counts.',
+      description: 'Passive right-side content only (badges, counts). Interactive controls go in actions.',
       slotElements: [
         {
           __element: 'Icon',
@@ -72,6 +72,18 @@ export const docs = {
         },
       ],
     },
+    {
+      name: 'actions',
+      type: 'ReactNode',
+      description:
+        'Row-level secondary controls (icon buttons, menus) rendered as siblings of the primary element at the trailing edge of the row — after the expand/collapse toggle, before any nested children in DOM and focus order. Each control owns its accessible name and behavior. Controls inherit the row control size through SizeContext, so an unsized icon button matches the built-in expand/collapse toggle; an explicit size still wins. Hidden while the SideNav rail is collapsed. Use endContent for passive content (badges, counts); use actions for anything interactive.',
+      slotElements: [
+        {
+          __element: 'Button',
+          props: {label: 'Rename', variant: 'ghost', size: 'sm'},
+        },
+      ],
+    },
     {
       name: 'children',
       type: 'ReactNode',
@@ -152,7 +164,13 @@ export const docsZh = {
     {
       name: 'endContent',
       type: 'ReactNode',
-      description: '右侧内容，如徽章或计数。',
+      description: '仅用于被动右侧内容（徽章、计数）。交互控件请使用 actions。',
+    },
+    {
+      name: 'actions',
+      type: 'ReactNode',
+      description:
+        '行级次要控件（图标按钮、菜单），作为主元素的同级节点渲染在行尾——位于展开/折叠切换按钮之后、任何嵌套子项之前（DOM 与焦点顺序一致）。每个控件自行负责其无障碍名称与行为。控件通过 SizeContext 继承行内控件尺寸，因此未指定尺寸的图标按钮会与内置的展开/折叠切换按钮保持同一尺寸；显式指定的 size 优先。侧边栏折叠为图标栏时隐藏。被动内容（徽章、计数）请使用 endContent；交互内容请使用 actions。',
     },
     {
       name: 'children',
@@ -188,7 +206,10 @@ export const docsDense = {
     isDisabled: 'Disabled state.',
     href: 'Navigation URL.',
     onClick: 'Click handler.',
-    endContent: 'Right-side content such as badges or counts.',
+    endContent:
+      'Passive right-side content only (badges, counts). Interactive controls go in actions.',
+    actions:
+      'Row-level secondary controls (icon buttons, menus) rendered as siblings of the primary element, after the expand/collapse toggle and before nested children in DOM/focus order. Inherit the row control size via SizeContext (explicit size wins). Hidden when rail collapsed. Passive content goes in endContent; interactive content goes here.',
     children: 'Sub-items for nesting.',
     collapsible: 'Enables collapse for items w/ children. true=uncontrolled, object=controlled mode.',
     size: "Row size variant: 'sm' | 'md' | 'lg'.",

package/src/SideNav/SideNavItem.tsx

@@ -8,7 +8,7 @@
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
- * Navigation item with icon, selected state, and nesting.
+ * Navigation item with icon, selected state, row-level actions, and nesting.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -51,7 +51,9 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles, type NavItemSize} from '../NavItem/navItemStyles.stylex';
+import {SizeProvider} from '../SizeContext/SizeContext';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {
   useSideNavCollapse,
   SideNavCollapseContext,
@@ -91,6 +93,18 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
   },
+  // Row-level secondary controls (actions slot) — siblings of the primary
+  // element at the trailing edge of the row. pointerEvents opts back in when
+  // a disabled row's navItemStyles.disabled sets pointer-events: none on the
+  // wrapper: the slot is passthrough, so each control owns its own disabled
+  // state (keyboard focus already reaches it either way).
+  actions: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-1'],
+    pointerEvents: 'auto',
+  },
   children: {
     paddingInlineStart: spacingVars['--spacing-6'],
   },
@@ -135,7 +149,13 @@ const styles = stylex.create({
     transform: 'rotate(180deg)',
   },
   // Standalone toggle button for the chevron when collapsible + href.
+  // Boxed like a `size="sm"` icon Button so it and whatever sits in
+  // `actions` paint one size of hover pill; without a box of its own it
+  // shrank to the 24px chevron beside a 28px menu button.
+  // SYNC: matches ROW_CONTROL_SIZE below.
   expandToggle: {
+    width: sizeVars['--size-element-sm'],
+    height: sizeVars['--size-element-sm'],
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -151,14 +171,6 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
     borderRadius: radiusVars['--radius-element'],
-    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-      '@media (hover: hover)': {
-        backgroundColor: colorVars['--color-overlay-hover'],
-      },
-    },
-    ':active': {
-      backgroundColor: colorVars['--color-overlay-pressed'],
-    },
   },
   // Primary action element inside the split-action row (link or button).
   // Flex:1 so it fills remaining space, giving a wide click target.
@@ -217,6 +229,16 @@ const styles = stylex.create({
   },
 });
 
+/**
+ * Cascaded to the `actions` slot through `SizeContext` so a consumer's row
+ * controls come out the same height as the built-in expand/collapse toggle,
+ * the way `SideNav` already cascades one size to its footer icons. An
+ * explicit `size` on a supplied control still wins.
+ *
+ * SYNC: `styles.expandToggle` carries the matching box.
+ */
+const ROW_CONTROL_SIZE = 'sm';
+
 // Non-collapsed state for popover children — ensures nested items render expanded
 const EXPANDED_COLLAPSE_STATE = {
   isCollapsed: false,
@@ -319,9 +341,24 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
    */
   onClick?: (e: React.MouseEvent) => void;
   /**
-   * Right-side content (badges, counts).
+   * Passive right-side content only (badges, counts). Interactive
+   * controls (icon buttons, menus) go in `actions`. `endContent`
+   * renders inside the primary link or button.
    */
   endContent?: ReactNode;
+  /**
+   * Row-level secondary controls (icon buttons, menus) rendered as siblings
+   * of the primary element at the trailing edge of the row — after the
+   * expand/collapse toggle, and before any nested children in DOM and focus
+   * order. Content is passthrough: each control owns its accessible name,
+   * keyboard behavior, and disabled state. Hidden while the SideNav rail is
+   * collapsed.
+   *
+   * Controls inherit the row's control size through `SizeContext`, so an
+   * unsized icon button comes out the same box as the built-in
+   * expand/collapse toggle. An explicit `size` still wins.
+   */
+  actions?: ReactNode;
   /**
    * Sub-items for nesting.
    */
@@ -358,7 +395,10 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
 /**
  * Navigation item for SideNav.
  *
- * Supports icons, selected state, nesting, and end content like badges or counts.
+ * Supports icons, selected state, nesting, and end content like badges or
+ * counts. Interactive row-level controls (menus, icon buttons) go in
+ * `actions`, which renders them as siblings of the primary element — never
+ * nested inside it — before any nested children in DOM and focus order.
  *
  * @example
  * ```
@@ -373,6 +413,13 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
  *   <SideNavItem label="General" href="/settings/general" />
  *   <SideNavItem label="Security" href="/settings/security" />
  * </SideNavItem>
+ * <SideNavItem
+ *   label="Projects"
+ *   href="/projects"
+ *   collapsible
+ *   actions={<MoreMenu label="Project actions" items={items} />}>
+ *   <SideNavItem label="Alpha" href="/projects/alpha" />
+ * </SideNavItem>
  * ```
  */
 export function SideNavItem({
@@ -385,6 +432,7 @@ export function SideNavItem({
   href,
   onClick,
   endContent,
+  actions,
   children,
   collapsible: itemCollapsible,
   size = 'md',
@@ -442,6 +490,7 @@ export function SideNavItem({
   const hasPrimaryAction = !!href || !!onClick;
   const hasIndependentToggle =
     isItemCollapsible && hasPrimaryAction && !isCollapsed;
+  const hasActions = !!actions;
 
   const handleClick = (e: React.MouseEvent) => {
     if (isDisabled) {
@@ -512,6 +561,7 @@ export function SideNavItem({
       }),
       focusOutlineProps.focusVisible(
         navItemStyles.item,
+        interactionOverlayStyles.backgroundColor,
         navItemStyles[size],
         styles.itemCollapsed,
         size === 'sm' && styles.itemCollapsedSm,
@@ -617,30 +667,56 @@ export function SideNavItem({
 
   const itemStyleArgs = [
     navItemStyles.item,
+    interactionOverlayStyles.backgroundColor,
     navItemStyles[size],
     isSelected && navItemStyles.selected,
     isDisabled && navItemStyles.disabled,
   ] as const;
 
-  // Two shapes of the same row appearance:
-  // - `rowProps` for the split-action path, where the row is a plain <div>
-  //   container and its children take focus (so the ring belongs on them);
-  // - `focusableRowProps` for every other path, where the row element is
-  //   itself the focusable control.
+  // Three shapes of the same row appearance:
+  // - `rowProps` — split-action path (toggle, no actions): presentational
+  //   <div>; the ring belongs on each child tab stop.
+  // - `focusableRowProps` — ordinary row: the row element is the control.
+  // - `actionsRowProps` — same pill, but the ring is drawn for the primary
+  //   only. The wrapper is not a tab stop, so `:focus-visible` on it would
+  //   never match, and matching any descendant instead would light the whole
+  //   row around the chevron's or an action's own ring.
   const rowProps = mergeProps(itemThemeProps, stylex.props(...itemStyleArgs));
   const focusableRowProps = mergeProps(
     itemThemeProps,
     focusOutlineProps.focusVisible(...itemStyleArgs),
   );
+  const actionsRowProps = mergeProps(
+    itemThemeProps,
+    focusOutlineProps.focusWithinFirstChild(...itemStyleArgs),
+  );
+
+  // Row-wrapper path: primary element + row controls as siblings.
+  //
+  // Used when the row carries more than one control: an independent
+  // expand/collapse toggle (collapsible + href/onClick), consumer-supplied
+  // actions, or both. A <div> is the styled flex row; the primary link or
+  // button, the chevron toggle, and the actions slot render as siblings so
+  // no interactive element nests inside another, and every row-level
+  // control precedes the nested children group in DOM and focus order.
+  const hasRowWrapper = hasIndependentToggle || hasActions;
 
-  // Split-action path: collapsible plus a primary action renders the primary
-  // element and the chevron toggle as siblings in a <div> row, since a
-  // <button> cannot nest inside an <a>.
   let itemElement;
 
-  if (hasIndependentToggle) {
+  if (hasRowWrapper) {
+    // aria-expanded/-controls stay on the primary element only when the
+    // whole row is the collapse toggle (no independent chevron button).
+    const rowPrimaryAriaProps = hasIndependentToggle
+      ? {'aria-current': isSelected ? ('page' as const) : undefined}
+      : {
+          'aria-current': isSelected ? ('page' as const) : undefined,
+          'aria-disabled': isDisabled || undefined,
+          'aria-expanded': isItemCollapsible ? !isItemCollapsed : undefined,
+          'aria-controls': isItemCollapsible ? `${id}-children` : undefined,
+        };
+
     itemElement = (
-      <div data-testid={testId} {...rowProps}>
+      <div data-testid={testId} {...(hasActions ? actionsRowProps : rowProps)}>
         <NavItemElement
           ref={ref}
           href={href}
@@ -648,31 +724,45 @@ export function SideNavItem({
           isDisabled={isDisabled}
           onClick={handleClick}
           {...rest}
-          aria-current={isSelected ? ('page' as const) : undefined}
-          {...focusOutlineProps.focusVisible(styles.splitAction)}>
+          {...rowPrimaryAriaProps}
+          {...(hasActions
+            ? // The wrapper rings for this element; suppressing here is what
+              // keeps the UA's own ring from painting inside that one.
+              focusOutlineProps.suppressed(styles.splitAction)
+            : focusOutlineProps.focusVisible(styles.splitAction))}>
           {itemContent}
         </NavItemElement>
-        <button
-          type="button"
-          onClick={handleToggleClick}
-          aria-label={
-            isItemCollapsed
-              ? t('@astryx.sideNavItem.expand', {label})
-              : t('@astryx.sideNavItem.collapse', {label})
-          }
-          aria-expanded={!isItemCollapsed}
-          aria-controls={`${id}-children`}
-          {...focusOutlineProps.focusVisible(styles.expandToggle)}>
-          <Icon
-            icon="chevronDown"
-            size="lg"
-            color="inherit"
-            xstyle={[
-              styles.expandChevron,
-              !isItemCollapsed && styles.expandChevronExpanded,
-            ]}
-          />
-        </button>
+        {hasIndependentToggle && (
+          <button
+            type="button"
+            onClick={handleToggleClick}
+            aria-label={
+              isItemCollapsed
+                ? t('@astryx.sideNavItem.expand', {label})
+                : t('@astryx.sideNavItem.collapse', {label})
+            }
+            aria-expanded={!isItemCollapsed}
+            aria-controls={`${id}-children`}
+            {...focusOutlineProps.focusVisible(
+              styles.expandToggle,
+              interactionOverlayStyles.backgroundColor,
+            )}>
+            <Icon
+              icon="chevronDown"
+              size="lg"
+              color="inherit"
+              xstyle={[
+                styles.expandChevron,
+                !isItemCollapsed && styles.expandChevronExpanded,
+              ]}
+            />
+          </button>
+        )}
+        {hasActions && (
+          <span {...stylex.props(styles.actions)}>
+            <SizeProvider value={ROW_CONTROL_SIZE}>{actions}</SizeProvider>
+          </span>
+        )}
       </div>
     );
   } else {