@fluentui/react-card 9.0.0-beta.4 → 9.0.0-beta.41

package/README.md

@@ -1,11 +1,75 @@
-# @fluentui/react-card
+# @fluentui/react-card [ALPHA]
 
-**React Card components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**React Card components for [Fluent UI React](https://react.fluentui.dev)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+**⚠️ Please note that functionality is still being added to this package. Due to lockstep versioning, the version of this package is aligned with the others in _react-components_.**
+
+These are not production-ready components and **should never be used in a product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
 
 To import React Card components:
 
 ```js
-import { ComponentName } from '@fluentui/react-card';
+import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components/unstable';
+```
+
+Example Card usage:
+
+![example of a Card component in usage](./docs/assets/card-example.png)
+
+```jsx
+import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
+import { Button, Body1, Caption1 } from '@fluentui/react-components';
+import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
+
+const App = () => (
+  <>
+    <Card>
+      <CardHeader
+        image={
+          <img
+            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
+            alt="Face of a person"
+          />
+        }
+        header={
+          <Body1>
+            <b>Elvia Atkins</b> mentioned you
+          </Body1>
+        }
+        description={<Caption1>5h ago · About us - Overview</Caption1>}
+      />
+      <CardPreview
+        logo={
+          <img
+            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/word_logo.svg"
+            alt="Microsoft Word logo"
+          />
+        }
+      >
+        <img
+          src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
+          alt="Preview of a Word document"
+        />
+      </CardPreview>
+      <CardFooter>
+        <Button icon={<ArrowReply16Regular />}>Reply</Button>
+        <Button icon={<Share16Regular />}>Share</Button>
+      </CardFooter>
+    </Card>
+  </>
+);
 ```
+
+## Specification
+
+See the [Spec.md](./Spec.md) file for background information on the design/engineering decisions of the component.
+
+## API
+
+For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-card--default).
+
+## Migration
+
+For migration information, have a look at the [migration guide](./MIGRATION.md).

package/dist/index.d.ts

@@ -0,0 +1,388 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * A card provides scaffolding for hosting actions and content for a single topic.
+ */
+export declare const Card: ForwardRefComponent<CardProps>;
+
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export declare const cardClassNames: SlotClassNames<CardSlots>;
+
+/**
+ * Data shared between card components
+ */
+export declare interface CardContextValue {
+    selectableA11yProps: {
+        referenceId?: string;
+        setReferenceId: (referenceId: string) => void;
+        referenceLabel?: string;
+        setReferenceLabel: (referenceLabel: string) => void;
+    };
+}
+
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */
+export declare const cardCSSVars: {
+    cardSizeVar: string;
+    cardBorderRadiusVar: string;
+};
+
+/**
+ * Component to render Button actions in a Card component.
+ */
+export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
+
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
+
+/**
+ * CardFooter component props.
+ */
+export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
+
+/**
+ * Slots available in the CardFooter component.
+ */
+export declare type CardFooterSlots = {
+    /**
+     * Root element of the component.
+     */
+    root: Slot<'div'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
+    action?: Slot<'div'>;
+};
+
+/**
+ * State used in rendering CardFooter.
+ */
+export declare type CardFooterState = ComponentState<CardFooterSlots>;
+
+/**
+ * Component to render an image, text and an action in a Card component.
+ */
+export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
+
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
+
+/**
+ * CSS variable names used internally for uniform styling in CardHeader.
+ */
+export declare const cardHeaderCSSVars: {
+    cardHeaderGapVar: string;
+};
+
+/**
+ * CardHeader component props.
+ */
+export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
+
+/**
+ * Slots available in the CardHeader component.
+ */
+export declare type CardHeaderSlots = {
+    /**
+     * Root element of the component.
+     */
+    root: Slot<'div'>;
+    /**
+     * Element used to render an image or avatar related to the card.
+     */
+    image: Slot<'div', 'img'>;
+    /**
+     * Element used to render the main header title.
+     */
+    header: Slot<'div'>;
+    /**
+     * Element used to render short descriptions related to the title.
+     */
+    description: Slot<'div'>;
+    /**
+     * Container that renders on the far end of the footer, used for action buttons.
+     */
+    action?: Slot<'div'>;
+};
+
+/**
+ * State used in rendering CardHeader.
+ */
+export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
+
+/**
+ * Data sent from the selection events on a selectable card.
+ */
+declare type CardOnSelectData = {
+    selected: boolean;
+};
+
+/**
+ * Card selected event type
+ *
+ * This event is fired when a selectable card changes its selection state.
+ */
+export declare type CardOnSelectionChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent;
+
+/**
+ * Component to render image previews of documents or articles in a Card component.
+ */
+export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
+
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
+
+/**
+ * CardPreview component props.
+ */
+export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
+
+/**
+ * Slots available in the Card component.
+ */
+export declare type CardPreviewSlots = {
+    /**
+     * Root element of the component.
+     */
+    root: Slot<'div'>;
+    /**
+     * Container that holds a logo related to the image preview provided.
+     */
+    logo?: Slot<'div', 'img'>;
+};
+
+/**
+ * State used in rendering CardPreview.
+ */
+export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
+
+/**
+ * Card component props.
+ */
+export declare type CardProps = ComponentProps<CardSlots> & {
+    /**
+     * Sets the appearance of the card.
+     *
+     * `filled`
+     * The card will have a shadow, border and background color.
+     *
+     * `filled-alternative`
+     * This appearance is similar to `filled`, but the background color will be a little darker.
+     *
+     * `outline`
+     * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.
+     *
+     * `subtle`
+     * This appearance is similar to `filled-alternative`, but no border is applied.
+     *
+     * @default 'filled'
+     */
+    appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+    /**
+     * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
+     *
+     * `off`
+     * The card will not focusable.
+     *
+     * `no-tab`
+     * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
+     * pressing the Escape key.
+     *
+     * `tab-exit`
+     * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
+     * the Tab key on the last inner element.
+     *
+     * `tab-only`
+     * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
+     * after the last inner element.
+     *
+     * @default 'off'
+     */
+    focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
+    /**
+     * Defines the orientation of the card.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controls the card's border radius and padding between inner elements.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Defines the controlled selected state of the card.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Defines whether the card is initially in a selected state when rendered.
+     *
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Callback to be called when the selected state value changes.
+     */
+    onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
+};
+
+/**
+ * @internal
+ */
+export declare const CardProvider: React_2.Provider<CardContextValue | undefined>;
+
+/**
+ * Slots available in the Card component.
+ */
+export declare type CardSlots = {
+    /**
+     * Root element of the component.
+     */
+    root: Slot<'div'>;
+    /**
+     * Select element represents a checkbox.
+     */
+    floatingAction?: Slot<'div'>;
+    /**
+     * The internal checkbox element that renders when the card is selectable.
+     */
+    checkbox?: Slot<'input'>;
+};
+
+/**
+ * State used in rendering Card.
+ */
+export declare type CardState = ComponentState<CardSlots> & CardContextValue & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {
+    /**
+     * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.
+     *
+     * @default false
+     */
+    interactive: boolean;
+    /**
+     * Represents a selectable card.
+     *
+     * @default false
+     */
+    selectable: boolean;
+    /**
+     * Defines whether the card is currently selected.
+     *
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Defines whether the card internal checkbox is currently focused.
+     *
+     * @default false
+     */
+    selectFocused: boolean;
+}>;
+
+/**
+ * Render the final JSX of Card.
+ */
+export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSX.Element;
+
+/**
+ * Render the final JSX of CardFooter.
+ */
+export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
+
+/**
+ * Render the final JSX of CardHeader.
+ */
+export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
+
+/**
+ * Render the final JSX of CardPreview.
+ */
+export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
+
+/**
+ * Create the state required to render Card.
+ *
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
+ *
+ * @param props - props from this instance of Card
+ * @param ref - reference to the root element of Card
+ */
+export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLDivElement>) => CardState;
+
+/**
+ * @internal
+ */
+export declare const useCardContext_unstable: () => CardContextValue;
+
+/**
+ * Create the state required to render CardFooter.
+ *
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
+ *
+ * @param props - props from this instance of CardFooter
+ * @param ref - reference to root HTMLElement of CardFooter
+ */
+export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
+
+/**
+ * Apply styling to the CardFooter slots based on the state.
+ */
+export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
+
+/**
+ * Create the state required to render CardHeader.
+ *
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
+ *
+ * @param props - props from this instance of CardHeader
+ * @param ref - reference to root HTMLElement of CardHeader
+ */
+export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
+
+/**
+ * Apply styling to the CardHeader slots based on the state.
+ */
+export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
+
+/**
+ * Create the state required to render CardPreview.
+ *
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
+ *
+ * @param props - props from this instance of CardPreview
+ * @param ref - reference to root HTMLElement of CardPreview
+ */
+export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
+
+/**
+ * Apply styling to the CardPreview slots based on the state.
+ */
+export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
+
+/**
+ * Apply styling to the Card slots based on the state.
+ */
+export declare const useCardStyles_unstable: (state: CardState) => CardState;
+
+export { }

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Card/index';\n"]}

package/lib/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../src/CardFooter.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"CardFooter.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardFooter.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardFooter/index';\n"]}

package/lib/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../src/CardHeader.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"CardHeader.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardHeader.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardHeader/index';\n"]}

package/lib/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.js","sourceRoot":"","sources":["../src/CardPreview.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"CardPreview.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardPreview.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/CardPreview/index';\n"]}

package/lib/components/Card/Card.js

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { useCard } from './useCard';
-import { renderCard } from './renderCard';
-import { useCardStyles } from './useCardStyles';
+import { useCard_unstable } from './useCard';
+import { renderCard_unstable } from './renderCard';
+import { useCardStyles_unstable } from './useCardStyles';
+import { useCardContextValue } from './useCardContextValue';
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
  */
-
 export const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCard(props, ref);
-  useCardStyles(state);
-  return renderCard(state);
+  const state = useCard_unstable(props, ref);
+  const cardContextValue = useCardContextValue(state);
+  useCardStyles_unstable(state);
+  return renderCard_unstable(state, cardContextValue);
 });
 Card.displayName = 'Card';
 //# sourceMappingURL=Card.js.map

package/lib/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AACA,SAAO,UAAU,CAAC,KAAD,CAAjB;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AAGxD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D;;;AAGA,OAAO,MAAMC,IAAI,gBAAmCL,KAAK,CAACM,UAAU,CAAiB,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,gBAAgB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC1C,MAAME,gBAAgB,GAAGN,mBAAmB,CAACK,KAAK,CAAC;EAEnDN,sBAAsB,CAACM,KAAK,CAAC;EAC7B,OAAOP,mBAAmB,CAACO,KAAK,EAAEC,gBAAgB,CAAC;AACrD,CAAC,CAAC;AAEFL,IAAI,CAACM,WAAW,GAAG,MAAM","names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"]}

package/lib/components/Card/Card.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.types.js","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Select element represents a checkbox.\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n    }\n  >;\n"]}

package/lib/components/Card/CardContext.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+const cardContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * @internal
+ */
+export const cardContextDefaultValue = {
+  selectableA11yProps: {
+    referenceId: undefined,
+    setReferenceId() {
+      /* Noop */
+    },
+    referenceLabel: undefined,
+    setReferenceLabel() {
+      /* Noop */
+    }
+  }
+};
+/**
+ * @internal
+ */
+export const CardProvider = cardContext.Provider;
+/**
+ * @internal
+ */
+export const useCardContext_unstable = () => {
+  var _a;
+  return (_a = React.useContext(cardContext)) !== null && _a !== void 0 ? _a : cardContextDefaultValue;
+};
+//# sourceMappingURL=CardContext.js.map

package/lib/components/Card/CardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,MAAMC,WAAW,gBAAGD,KAAK,CAACE,aAAa,CAA+BC,SAAS,CAAC;AAEhF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAqB;EACvDC,mBAAmB,EAAE;IACnBC,WAAW,EAAEH,SAAS;IACtBI,cAAc;MACZ;IAAA,CACD;IACDC,cAAc,EAAEL,SAAS;IACzBM,iBAAiB;MACf;IAAA;;CAGL;AAED;;;AAGA,OAAO,MAAMC,YAAY,GAAGT,WAAW,CAACU,QAAQ;AAEhD;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACZ,WAAW,CAAC,mCAAIG,uBAAuB;AAAA","names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"]}

package/lib/components/Card/index.js

@@ -1,5 +1,6 @@
 export * from './Card';
 export * from './Card.types';
+export * from './CardContext';
 export * from './renderCard';
 export * from './useCard';
 export * from './useCardStyles';

package/lib/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}

package/lib/components/Card/renderCard.js

@@ -1,14 +1,22 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
+import { CardProvider } from './CardContext';
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
-
-export const renderCard = state => {
+export const renderCard_unstable = (state, cardContextValue) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(CardProvider, {
+    value: cardContextValue
+  }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, {
+    ...slotProps.checkbox
+  }) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, {
+    ...slotProps.floatingAction
+  }) : null, slotProps.root.children));
 };
 //# sourceMappingURL=renderCard.js.map

package/lib/components/Card/renderCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,YAAY,QAAQ,eAAe;AAE5C;;;AAGA,OAAO,MAAMC,mBAAmB,GAAG,CAACC,KAAgB,EAAEC,gBAAkC,KAAI;EAC1F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAYG,KAAK,CAAC;EAEvD,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BR,oBAACE,YAAY;IAACO,KAAK,EAAEJ;EAAgB,GAClCC,KAAK,CAACI,QAAQ,gBAAGV,oBAACM,KAAK,CAACI,QAAQ;IAAA,GAAKH,SAAS,CAACG;EAAQ,EAAI,GAAG,IAAI,EAClEJ,KAAK,CAACK,cAAc,gBAAGX,oBAACM,KAAK,CAACK,cAAc;IAAA,GAAKJ,SAAS,CAACI;EAAc,EAAI,GAAG,IAAI,EACpFJ,SAAS,CAACC,IAAI,CAACI,QAAQ,CACX,CACJ;AAEjB,CAAC","names":["React","getSlots","CardProvider","renderCard_unstable","state","cardContextValue","slots","slotProps","root","value","checkbox","floatingAction","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"]}