feat(react-card): add useCardBase_unstable hook

change/@fluentui-react-card-55a4ca35-b847-4f4d-b9ed-e46abdfac39d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks for Card",
+  "packageName": "@fluentui/react-card",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/library/src/components/Card/Card.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 
 /**
  * Card selected event type
@@ -135,6 +135,8 @@ export type CardProps = ComponentProps<CardSlots> & {
   disabled?: boolean;
 };
 
+export type CardBaseProps = DistributiveOmit<CardProps, 'appearance' | 'orientation' | 'size'>;
+
 /**
  * State used in rendering Card.
  */
@@ -178,3 +180,5 @@ export type CardState = ComponentState<CardSlots> &
       disabled: boolean;
     }
   >;
+
+export type CardBaseState = DistributiveOmit<CardState, 'appearance' | 'orientation' | 'size'>;

packages/react-components/react-card/library/src/components/Card/index.ts

@@ -1,5 +1,7 @@
 export { Card } from './Card';
 export type {
+  CardBaseProps,
+  CardBaseState,
   CardContextValue,
   CardOnSelectData,
   CardOnSelectionChangeEvent,
@@ -9,5 +11,5 @@ export type {
 } from './Card.types';
 export { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';
 export { renderCard_unstable } from './renderCard';
-export { useCard_unstable } from './useCard';
+export { useCard_unstable, useCardBase_unstable } from './useCard';
 export { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';

packages/react-components/react-card/library/src/components/Card/useCard.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 
-import type { CardProps, CardState } from './Card.types';
+import type { CardBaseProps, CardBaseState, CardProps, CardState } from './Card.types';
 import { useCardSelectable } from './useCardSelectable';
 import { cardContextDefaultValue } from './CardContext';
 
@@ -79,7 +79,26 @@ const useCardInteractive = ({ focusMode: initialFocusMode, disabled = false, ...
  * @param ref - reference to the root element of Card
  */
 export const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {
-  const { appearance = 'filled', orientation = 'vertical', size = 'medium', disabled = false, ...restProps } = props;
+  const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;
+  const state = useCardBase_unstable(cardProps, ref);
+
+  return {
+    ...state,
+    appearance,
+    orientation,
+    size,
+  };
+};
+
+/**
+ * Base hook for Card component, which manages state related to interactivity, selection,
+ * focus management, ARIA attributes, and slot structure without design props.
+ *
+ * @param props - props from this instance of Card
+ * @param ref - reference to the root element of Card
+ */
+export const useCardBase_unstable = (props: CardBaseProps, ref: React.Ref<HTMLDivElement>): CardBaseState => {
+  const { disabled = false, ...restProps } = props;
 
   const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
   const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
@@ -107,9 +126,6 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement
   }
 
   return {
-    appearance,
-    orientation,
-    size,
     interactive,
     selectable,
     selectFocused,

packages/react-components/react-card/library/src/components/CardFooter/CardFooter.types.ts

@@ -20,7 +20,17 @@ export type CardFooterSlots = {
  */
 export type CardFooterProps = ComponentProps<CardFooterSlots>;
 
+/**
+ * CardFooter base props (same as CardFooterProps since CardFooter has no design props)
+ */
+export type CardFooterBaseProps = CardFooterProps;
+
 /**
  * State used in rendering CardFooter.
  */
 export type CardFooterState = ComponentState<CardFooterSlots>;
+
+/**
+ * CardFooter base state (same as CardFooterState since CardFooter has no design props)
+ */
+export type CardFooterBaseState = CardFooterState;

packages/react-components/react-card/library/src/components/CardFooter/index.ts

@@ -1,5 +1,11 @@
 export { CardFooter } from './CardFooter';
-export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';
+export type {
+  CardFooterBaseProps,
+  CardFooterBaseState,
+  CardFooterProps,
+  CardFooterSlots,
+  CardFooterState,
+} from './CardFooter.types';
 export { renderCardFooter_unstable } from './renderCardFooter';
-export { useCardFooter_unstable } from './useCardFooter';
+export { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';
 export { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';

packages/react-components/react-card/library/src/components/CardFooter/useCardFooter.ts

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { CardFooterProps, CardFooterState } from './CardFooter.types';
+import type { CardFooterBaseProps, CardFooterBaseState, CardFooterProps, CardFooterState } from './CardFooter.types';
 
 /**
  * Create the state required to render CardFooter.
@@ -12,6 +14,20 @@ import type { CardFooterProps, CardFooterState } from './CardFooter.types';
  * @param ref - reference to root HTMLElement of CardFooter
  */
 export const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {
+  return useCardFooterBase_unstable(props, ref);
+};
+
+/**
+ * Base hook for CardFooter component, which manages state related to slots structure.
+ * Note: CardFooter has no design props, so this is equivalent to useCardFooter_unstable.
+ *
+ * @param props - props from this instance of CardFooter
+ * @param ref - reference to root HTMLElement of CardFooter
+ */
+export const useCardFooterBase_unstable = (
+  props: CardFooterBaseProps,
+  ref: React.Ref<HTMLElement>,
+): CardFooterBaseState => {
   const { action } = props;
 
   return {

packages/react-components/react-card/library/src/components/CardHeader/CardHeader.types.ts

@@ -35,7 +35,17 @@ export type CardHeaderSlots = {
  */
 export type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
+/**
+ * CardHeader base props (same as CardHeaderProps since CardHeader has no design props)
+ */
+export type CardHeaderBaseProps = CardHeaderProps;
+
 /**
  * State used in rendering CardHeader.
  */
 export type CardHeaderState = ComponentState<CardHeaderSlots>;
+
+/**
+ * CardHeader base state (same as CardHeaderState since CardHeader has no design props)
+ */
+export type CardHeaderBaseState = CardHeaderState;

packages/react-components/react-card/library/src/components/CardHeader/index.ts

@@ -1,5 +1,11 @@
 export { CardHeader } from './CardHeader';
-export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';
+export type {
+  CardHeaderBaseProps,
+  CardHeaderBaseState,
+  CardHeaderProps,
+  CardHeaderSlots,
+  CardHeaderState,
+} from './CardHeader.types';
 export { renderCardHeader_unstable } from './renderCardHeader';
-export { useCardHeader_unstable } from './useCardHeader';
+export { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';
 export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';

packages/react-components/react-card/library/src/components/CardHeader/useCardHeader.ts

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
-import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
+import type { CardHeaderBaseProps, CardHeaderBaseState, CardHeaderProps, CardHeaderState } from './CardHeader.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
 
@@ -54,6 +54,21 @@ function getReferenceId(
  * @param ref - reference to root HTMLElement of CardHeader
  */
 export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {
+  return useCardHeaderBase_unstable(props, ref);
+};
+
+/**
+ * Base hook for CardHeader component, which manages state related to slots structure
+ * and the card's selectable accessibility properties.
+ * Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.
+ *
+ * @param props - props from this instance of CardHeader
+ * @param ref - reference to root HTMLElement of CardHeader
+ */
+export const useCardHeaderBase_unstable = (
+  props: CardHeaderBaseProps,
+  ref: React.Ref<HTMLElement>,
+): CardHeaderBaseState => {
   const { image, header, description, action } = props;
 
   const {

packages/react-components/react-card/library/src/components/CardPreview/CardPreview.types.ts

@@ -20,7 +20,17 @@ export type CardPreviewSlots = {
  */
 export type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
+/**
+ * CardPreview base props (same as CardPreviewProps since CardPreview has no design props)
+ */
+export type CardPreviewBaseProps = CardPreviewProps;
+
 /**
  * State used in rendering CardPreview.
  */
 export type CardPreviewState = ComponentState<CardPreviewSlots>;
+
+/**
+ * CardPreview base state (same as CardPreviewState since CardPreview has no design props)
+ */
+export type CardPreviewBaseState = CardPreviewState;

packages/react-components/react-card/library/src/components/CardPreview/index.ts

@@ -1,5 +1,11 @@
 export { CardPreview } from './CardPreview';
-export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';
+export type {
+  CardPreviewBaseProps,
+  CardPreviewBaseState,
+  CardPreviewProps,
+  CardPreviewSlots,
+  CardPreviewState,
+} from './CardPreview.types';
 export { renderCardPreview_unstable } from './renderCardPreview';
-export { useCardPreview_unstable } from './useCardPreview';
+export { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';
 export { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';

packages/react-components/react-card/library/src/components/CardPreview/useCardPreview.ts

@@ -2,7 +2,12 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
-import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
+import type {
+  CardPreviewBaseProps,
+  CardPreviewBaseState,
+  CardPreviewProps,
+  CardPreviewState,
+} from './CardPreview.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
 
@@ -16,6 +21,21 @@ import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
  * @param ref - reference to root HTMLElement of CardPreview
  */
 export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {
+  return useCardPreviewBase_unstable(props, ref);
+};
+
+/**
+ * Base hook for CardPreview component, which manages state related to slots structure
+ * and the card's selectable accessibility label.
+ * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.
+ *
+ * @param props - props from this instance of CardPreview
+ * @param ref - reference to root HTMLElement of CardPreview
+ */
+export const useCardPreviewBase_unstable = (
+  props: CardPreviewBaseProps,
+  ref: React.Ref<HTMLElement>,
+): CardPreviewBaseState => {
   const { logo } = props;
 
   const {

packages/react-components/react-card/library/src/index.ts

@@ -34,3 +34,13 @@ export {
 export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';
 export { CardProvider, useCardContext_unstable } from './Card';
 export type { CardContextValue } from './Card';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useCardBase_unstable } from './Card';
+// export type { CardBaseProps, CardBaseState } from './Card';
+// export { useCardFooterBase_unstable } from './CardFooter';
+// export type { CardFooterBaseProps, CardFooterBaseState } from './CardFooter';
+// export { useCardHeaderBase_unstable } from './CardHeader';
+// export type { CardHeaderBaseProps, CardHeaderBaseState } from './CardHeader';
+// export { useCardPreviewBase_unstable } from './CardPreview';
+// export type { CardPreviewBaseProps, CardPreviewBaseState } from './CardPreview';