fix(s2/Card): support press event callbacks on standalone Card

packages/@react-spectrum/s2/src/Card.tsx

@@ -29,10 +29,14 @@ import {ImageContext} from './Image';
 import {ImageCoordinator} from './ImageCoordinator';
 import {inertValue} from 'react-aria/private/utils/inertValue';
 import {Link} from 'react-aria-components/Link';
+import {mergeProps} from 'react-aria/mergeProps';
 import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 import {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';
 import {useDOMRef} from './useDOMRef';
+import {useFocusRing} from 'react-aria/useFocusRing';
+import {useHover} from 'react-aria/useHover';
+import {usePress} from 'react-aria/usePress';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface CardRenderProps {
@@ -121,10 +125,12 @@ let card = style({
   contain: 'layout',
   disableTapHighlight: true,
   userSelect: {
-    isCardView: 'none'
+    isCardView: 'none',
+    isInteractive: 'none'
   },
   cursor: {
-    isLink: 'pointer'
+    isLink: 'pointer',
+    isInteractive: 'pointer'
   },
   width: {
     size: {
@@ -396,9 +402,51 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
   [props] = useSpectrumContextProps(props, ref, CardContext);
   let {ElementType, layout} = useContext(InternalCardViewContext);
   let domRef = useDOMRef(ref);
-  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;
+  let {
+    density = 'regular',
+    size = 'M',
+    variant = 'primary',
+    UNSAFE_className = '',
+    UNSAFE_style,
+    styles,
+    id,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    onAction,
+    isDisabled,
+    ...otherProps
+  } = props;
   let isQuiet = variant === 'quiet';
   let isSkeleton = useIsSkeleton();
+
+  // True when the card is used standalone (not inside CardView) and the caller
+  // has provided at least one press/action callback.
+  let isInteractiveStandalone = ElementType === 'div' && !isSkeleton && !props.href &&
+    !!(onPress || onPressStart || onPressEnd || onPressChange || onPressUp || onAction);
+
+  // Hooks must be called unconditionally (React rules of hooks).
+  // isDisabled is set to true when not in interactive standalone mode so the
+  // hooks are effectively no-ops in those code paths.
+  let {pressProps, isPressed: isInteractivePressed} = usePress({
+    ref: domRef,
+    onPress: (e) => {
+      onPress?.(e);
+      onAction?.();
+    },
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    isDisabled: isDisabled || !isInteractiveStandalone
+  });
+  let {hoverProps, isHovered: isInteractiveHovered} = useHover({
+    isDisabled: isDisabled || !isInteractiveStandalone
+  });
+  let {focusProps, isFocusVisible: isInteractiveFocusVisible} = useFocusRing();
+
   let children = (
     <Provider
       values={[
@@ -452,6 +500,43 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
   }
 
   if (ElementType === 'div' || isSkeleton) {
+    if (isInteractiveStandalone) {
+      return (
+        <div
+          {...mergeProps(filterDOMProps(otherProps), pressProps, hoverProps, focusProps)}
+          id={id != null ? String(id) : undefined}
+          ref={domRef}
+          role="button"
+          tabIndex={isDisabled ? undefined : 0}
+          aria-disabled={isDisabled ? true : undefined}
+          className={
+            UNSAFE_className + card({
+              size,
+              density,
+              variant,
+              isCardView: false,
+              isInteractive: true,
+              isHovered: isInteractiveHovered,
+              isFocusVisible: isInteractiveFocusVisible,
+              isSelected: false
+            }, styles)
+          }
+          style={variant === 'quiet' ? UNSAFE_style : press({isPressed: isInteractivePressed})}>
+          <InternalCardContext.Provider value={{
+            size,
+            isQuiet,
+            isCheckboxSelection: false,
+            isHovered: isInteractiveHovered,
+            isFocusVisible: isInteractiveFocusVisible,
+            isSelected: false,
+            isPressed: isInteractivePressed
+          }}>
+            {children}
+          </InternalCardContext.Provider>
+        </div>
+      );
+    }
+
     return (
       <div
         {...filterDOMProps(otherProps)}

packages/@react-spectrum/s2/test/Card.test.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {Card} from '../src/Card';
+import {Content, Text} from '../src/Content';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('Card', () => {
+  let user;
+  beforeAll(() => {
+    jest.useFakeTimers();
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders as a plain div when no press callbacks are provided', () => {
+    let {getByText} = render(
+      <Card>
+        <Content><Text slot="title">Static Card</Text></Content>
+      </Card>
+    );
+    let el = getByText('Static Card').closest('[class]')!.parentElement!;
+    expect(el.tagName).toBe('DIV');
+    expect(el).not.toHaveAttribute('role');
+    expect(el).not.toHaveAttribute('tabindex');
+  });
+
+  it('renders as role=button and fires onPress when onPress is provided', async () => {
+    let onPress = jest.fn();
+    let {getByRole} = render(
+      <Card onPress={onPress}>
+        <Content><Text slot="title">Interactive Card</Text></Content>
+      </Card>
+    );
+
+    let card = getByRole('button');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveAttribute('tabindex', '0');
+
+    await user.click(card);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires onAction when onAction is provided', async () => {
+    let onAction = jest.fn();
+    let {getByRole} = render(
+      <Card onAction={onAction}>
+        <Content><Text slot="title">Action Card</Text></Content>
+      </Card>
+    );
+
+    let card = getByRole('button');
+    await user.click(card);
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires both onPress and onAction when both are provided', async () => {
+    let onPress = jest.fn();
+    let onAction = jest.fn();
+    let {getByRole} = render(
+      <Card onPress={onPress} onAction={onAction}>
+        <Content><Text slot="title">Both Callbacks Card</Text></Content>
+      </Card>
+    );
+
+    let card = getByRole('button');
+    await user.click(card);
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires onPressStart and onPressEnd when provided', async () => {
+    let onPressStart = jest.fn();
+    let onPressEnd = jest.fn();
+    let {getByRole} = render(
+      <Card onPressStart={onPressStart} onPressEnd={onPressEnd}>
+        <Content><Text slot="title">Press Events Card</Text></Content>
+      </Card>
+    );
+
+    let card = getByRole('button');
+    await user.click(card);
+    expect(onPressStart).toHaveBeenCalledTimes(1);
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire press callbacks when disabled', async () => {
+    let onPress = jest.fn();
+    let {getByRole} = render(
+      <Card onPress={onPress} isDisabled>
+        <Content><Text slot="title">Disabled Card</Text></Content>
+      </Card>
+    );
+
+    let card = getByRole('button');
+    expect(card).not.toHaveAttribute('tabindex');
+    expect(card).toHaveAttribute('aria-disabled', 'true');
+
+    await user.click(card);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('does not expose role=button when no press callbacks are provided', () => {
+    let {queryByRole} = render(
+      <Card>
+        <Content><Text slot="title">Static Card</Text></Content>
+      </Card>
+    );
+    expect(queryByRole('button')).toBeNull();
+  });
+
+  it('has pointer cursor and no user-select when interactive', async () => {
+    let onPress = jest.fn();
+    let {getByRole} = render(
+      <Card onPress={onPress}>
+        <Content><Text slot="title">Interactive Card</Text></Content>
+      </Card>
+    );
+    let card = getByRole('button');
+    expect(card).toHaveStyle({cursor: 'pointer', userSelect: 'none'});
+  });
+});