@fluentui/react-card 9.0.0-beta.34 → 9.0.0-beta.36

package/CHANGELOG.json

@@ -2,7 +2,79 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Mon, 05 Dec 2022 18:25:37 GMT",
+      "date": "Wed, 21 Dec 2022 10:17:16 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.36",
+      "version": "9.0.0-beta.36",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.3.4",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.5",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.12",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 14:59:21 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.35",
+      "version": "9.0.0-beta.35",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "5a613ed831254b8d8fbb8fd4648bfc034050a7eb",
+            "comment": "fix: remove unnecessary selectable ref and add support for aria-describedby on card preview"
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "5743aed3aa6b7048694111230c534008a59348ff",
+            "comment": "fix selectable card accessibility"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.11",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:39 GMT",
       "tag": "@fluentui/react-card_v9.0.0-beta.34",
       "version": "9.0.0-beta.34",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Mon, 05 Dec 2022 18:25:37 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.36)
+
+Wed, 21 Dec 2022 10:17:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.35..@fluentui/react-card_v9.0.0-beta.36)
+
+### Changes
+
+- Bump @fluentui/react-tabster to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-button to v9.1.12 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+
+## [9.0.0-beta.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.35)
+
+Tue, 20 Dec 2022 14:59:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.34..@fluentui/react-card_v9.0.0-beta.35)
+
+### Changes
+
+- fix: remove unnecessary selectable ref and add support for aria-describedby on card preview ([PR #25934](https://github.com/microsoft/fluentui/pull/25934) by marcosvmmoura@gmail.com)
+- fix selectable card accessibility ([PR #25827](https://github.com/microsoft/fluentui/pull/25827) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-button to v9.1.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
 ## [9.0.0-beta.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.34)
 
-Mon, 05 Dec 2022 18:25:37 GMT 
+Mon, 05 Dec 2022 18:29:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.33..@fluentui/react-card_v9.0.0-beta.34)
 
 ### Changes

package/dist/index.d.ts

@@ -15,6 +15,18 @@ export declare const Card: ForwardRefComponent<CardProps>;
  */
 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.
  */
@@ -94,11 +106,11 @@ export declare type CardHeaderSlots = {
     /**
      * Element used to render the main header title.
      */
-    header: Slot<'span'>;
+    header: Slot<'div'>;
     /**
      * Element used to render short descriptions related to the title.
      */
-    description: Slot<'span'>;
+    description: Slot<'div'>;
     /**
      * Container that renders on the far end of the footer, used for action buttons.
      */
@@ -117,6 +129,13 @@ 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.
  */
@@ -213,7 +232,7 @@ export declare type CardProps = ComponentProps<CardSlots> & {
      */
     selected?: boolean;
     /**
-     * Defines whether the card is initially in a selected state or not when rendered.
+     * Defines whether the card is initially in a selected state when rendered.
      *
      * @default false
      */
@@ -221,13 +240,13 @@ export declare type CardProps = ComponentProps<CardSlots> & {
     /**
      * Callback to be called when the selected state value changes.
      */
-    onSelectionChange?: (event: CarOnSelectionChangeEvent, data: CardOnSelectData) => void;
+    onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
 };
 
 /**
- * Card refs to the root element slot.
+ * @internal
  */
-declare type CardRefElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+export declare const CardProvider: React_2.Provider<CardContextValue | undefined>;
 
 /**
  * Slots available in the Card component.
@@ -236,17 +255,21 @@ export declare type CardSlots = {
     /**
      * Root element of the component.
      */
-    root: Slot<'div', 'a' | 'button'>;
+    root: Slot<'div'>;
     /**
      * Select element represents a checkbox.
      */
-    select?: Slot<'div', 'input'>;
+    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> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {
+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.
      *
@@ -260,30 +283,23 @@ export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardPr
      */
     selectable: boolean;
     /**
-     * Represents a selectable card that contains a slot for the select element.
+     * Defines whether the card is currently selected.
      *
      * @default false
      */
-    hasSelectSlot: boolean;
+    selected: boolean;
     /**
-     * Defines whether the card is currently selected.
+     * Defines whether the card internal checkbox is currently focused.
      *
      * @default false
      */
-    selected: boolean;
+    selectFocused: boolean;
 }>;
 
-/**
- * Card selected event type
- *
- * This event is fired when a selectable card changes its selection state.
- */
-export declare type CarOnSelectionChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent;
-
 /**
  * Render the final JSX of Card.
  */
-export declare const renderCard_unstable: (state: CardState) => JSX.Element;
+export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSX.Element;
 
 /**
  * Render the final JSX of CardFooter.
@@ -309,7 +325,12 @@ export declare const renderCardPreview_unstable: (state: CardPreviewState) => JS
  * @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<CardRefElement>) => CardState;
+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.

package/lib/components/Card/Card.js

@@ -2,14 +2,16 @@ import * as React from 'react';
 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_unstable(props, ref);
+  const cardContextValue = useCardContextValue(state);
   useCardStyles_unstable(state);
-  return renderCard_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":["packages/react-components/react-card/src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiC,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;EAEA,sBAAsB,CAAC,KAAD,CAAtB;EACA,OAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps, CardRefElement } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<CardRefElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiC,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;EACA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,KAAD,CAA5C;EAEA,sBAAsB,CAAC,KAAD,CAAtB;EACA,OAAO,mBAAmB,CAAC,KAAD,EAAQ,gBAAR,CAA1B;AACD,CANmD,CAA7C;AAQP,IAAI,CAAC,WAAL,GAAmB,MAAnB","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"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 refs to the root element slot.\n */\nexport type CardRefElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CarOnSelectionChangeEvent = 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 * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div', 'a' | 'button'>;\n\n  /**\n   * Select element represents a checkbox.\n   */\n  select?: Slot<'div', '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 or not 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: CarOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\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       * Represents a selectable card that contains a slot for the select element.\n       *\n       * @default false\n       */\n      hasSelectSlot: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n    }\n  >;\n"]}
+{"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,37 @@
+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,"sources":["packages/react-components/react-card/src/components/Card/CardContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,MAAM,WAAW,gBAAG,KAAK,CAAC,aAAN,CAAkD,SAAlD,CAApB;AAEA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAqB;EACvD,mBAAmB,EAAE;IACnB,WAAW,EAAE,SADM;;IAEnB,cAAc,GAAA;MACZ;IACD,CAJkB;;IAKnB,cAAc,EAAE,SALG;;IAMnB,iBAAiB,GAAA;MACf;IACD;;EARkB;AADkC,CAAlD;AAaP;;AAEG;;AACH,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,WAAjB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,EAA7B,GAAiC,uBAAjC;AAAwD,CAA9F","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"],"sourceRoot":"../src/"}

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":"../src/","sources":["packages/react-components/react-card/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","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}
+{"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,16 +1,20 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
+import { CardProvider } from './CardContext';
 /**
  * Render the final JSX of Card.
  */
 
-export const renderCard_unstable = state => {
+export const renderCard_unstable = (state, cardContextValue) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slotProps.root.children, state.hasSelectSlot && slots.select ? /*#__PURE__*/React.createElement(slots.select, { ...slotProps.select
-  }) : null);
+  }, /*#__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":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,aAAN,IAAuB,KAAK,CAAC,MAA7B,gBAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAAtC,GAA+E,IAFlF,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {state.hasSelectSlot && slots.select ? <slots.select {...slotProps.select} /> : null}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,YAAT,QAA6B,eAA7B;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,gBAAnB,KAAyD;EAC1F,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAY,KAAZ,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa;IAAC,KAAK,EAAE;EAAR,CAAb,EACG,KAAK,CAAC,QAAN,gBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAAjB,GAA8D,IADjE,EAEG,KAAK,CAAC,cAAN,gBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAAvB,GAAgF,IAFnF,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,CADF,CADF;AASD,CAZM","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"],"sourceRoot":"../src/"}

package/lib/components/Card/useCard.js

@@ -1,31 +1,38 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 import { useCardSelectable } from './useCardSelectable';
+import { cardContextDefaultValue } from './CardContext';
 const focusMap = {
   off: undefined,
   'no-tab': 'limited-trap-focus',
   'tab-exit': 'limited',
   'tab-only': 'unlimited'
 };
+/**
+ * Create the state for interactive cards.
+ *
+ * This internal hook defines if the card is interactive
+ * and control focus properties based on that.
+ *
+ * @param props - props from this instance of Card
+ */
 
-const useCardFocusAttributes = ({
-  focusMode = 'off'
-}, {
-  interactive
+const useCardInteractive = ({
+  focusMode = 'off',
+  ...props
 }) => {
-  const internalFocusMode = interactive ? 'no-tab' : focusMode;
+  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
   const groupperAttrs = useFocusableGroup({
-    tabBehavior: focusMap[internalFocusMode]
+    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
   });
-
-  if (internalFocusMode === 'off') {
-    return null;
-  }
-
-  return { ...groupperAttrs,
+  const interactiveFocusAttributes = { ...groupperAttrs,
     tabIndex: 0
   };
+  return {
+    interactive,
+    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
+  };
 };
 /**
  * Create the state required to render Card.
@@ -43,40 +50,54 @@ export const useCard_unstable = (props, ref) => {
     appearance = 'filled',
     orientation = 'vertical',
     size = 'medium',
-    as = 'div'
+    floatingAction
   } = props;
-  const cardRef = React.useRef(null);
+  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
+  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
+  const cardBaseRef = useFocusWithin();
   const {
     selectable,
-    hasSelectSlot,
     selected,
-    selectableSlot,
-    selectableProps
-  } = useCardSelectable(props, cardRef);
-  const interactive = Boolean(selectable || ['a', 'button'].includes(as) || props.onClick || props.onDoubleClick || props.onMouseUp || props.onMouseDown || props.onPointerUp || props.onPointerDown || props.onTouchStart || props.onTouchEnd);
-  const focusAttributes = useCardFocusAttributes(props, {
-    interactive
-  });
+    selectableCardProps,
+    selectFocused,
+    checkboxSlot
+  } = useCardSelectable(props, {
+    referenceId,
+    referenceLabel
+  }, cardBaseRef);
+  const cardRef = useMergedRefs(cardBaseRef, ref);
+  const {
+    interactive,
+    focusAttributes
+  } = useCardInteractive(props);
   return {
     appearance,
     orientation,
     size,
     interactive,
     selectable,
-    hasSelectSlot,
+    selectFocused,
     selected,
+    selectableA11yProps: {
+      setReferenceId,
+      referenceId,
+      referenceLabel,
+      setReferenceLabel
+    },
     components: {
-      root: as,
-      select: 'div'
+      root: 'div',
+      floatingAction: 'div',
+      checkbox: 'input'
     },
-    root: getNativeElementProps(as, {
-      ref: ref || cardRef,
+    root: getNativeElementProps('div', {
+      ref: cardRef,
       role: 'group',
       ...focusAttributes,
       ...props,
-      ...selectableProps
+      ...selectableCardProps
     }),
-    select: selectableSlot
+    floatingAction: resolveShorthand(floatingAction),
+    checkbox: checkboxSlot
   };
 };
 //# sourceMappingURL=useCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,iBAAT,QAAkC,yBAAlC;AAGA,SAAS,iBAAT,QAAkC,qBAAlC;AAEA,MAAM,QAAQ,GAAG;EACf,GAAG,EAAE,SADU;EAEf,UAAU,oBAFK;EAGf,YAAY,SAHG;EAIf,YAAY;AAJG,CAAjB;;AAWA,MAAM,sBAAsB,GAAG,CAAC;EAAE,SAAS,GAAG;AAAd,CAAD,EAAmC;EAAE;AAAF,CAAnC,KAAqF;EAClH,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAH,GAAc,SAAnD;EAEA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,iBAAD;EADiB,CAAD,CAAvC;;EAIA,IAAI,iBAAiB,KAAK,KAA1B,EAAiC;IAC/B,OAAO,IAAP;EACD;;EAED,OAAO,EACL,GAAG,aADE;IAEL,QAAQ,EAAE;EAFL,CAAP;AAID,CAfD;AAiBA;;;;;;;;AAQG;;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAAgE;EAC9F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,WAAW,GAAG,UAAvC;IAAmD,IAAI,GAAG,QAA1D;IAAoE,EAAE,GAAG;EAAzE,IAAmF,KAAzF;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAhB;EAEA,MAAM;IAAE,UAAF;IAAc,aAAd;IAA6B,QAA7B;IAAuC,cAAvC;IAAuD;EAAvD,IAA2E,iBAAiB,CAAC,KAAD,EAAQ,OAAR,CAAlG;EAEA,MAAM,WAAW,GAAG,OAAO,CACzB,UAAU,IACR,CAAC,GAAD,EAAM,QAAN,EAAgB,QAAhB,CAAyB,EAAzB,CADF,IAEE,KAAK,CAAC,OAFR,IAGE,KAAK,CAAC,aAHR,IAIE,KAAK,CAAC,SAJR,IAKE,KAAK,CAAC,WALR,IAME,KAAK,CAAC,WANR,IAOE,KAAK,CAAC,aAPR,IAQE,KAAK,CAAC,YARR,IASE,KAAK,CAAC,UAViB,CAA3B;EAaA,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAD,EAAQ;IAAE;EAAF,CAAR,CAA9C;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAIL,WAJK;IAKL,UALK;IAML,aANK;IAOL,QAPK;IASL,UAAU,EAAE;MACV,IAAI,EAAE,EADI;MAEV,MAAM,EAAE;IAFE,CATP;IAcL,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;MAC9B,GAAG,EAAE,GAAG,IAAI,OADkB;MAE9B,IAAI,EAAE,OAFwB;MAG9B,GAAG,eAH2B;MAI9B,GAAG,KAJ2B;MAK9B,GAAG;IAL2B,CAAL,CAdtB;IAsBL,MAAM,EAAE;EAtBH,CAAP;AAwBD,CA7CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardRefElement, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\ntype UseCardFocusAttributesOptions = {\n  interactive: boolean;\n};\n\nconst useCardFocusAttributes = ({ focusMode = 'off' }: CardProps, { interactive }: UseCardFocusAttributesOptions) => {\n  const internalFocusMode = interactive ? 'no-tab' : focusMode;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[internalFocusMode],\n  });\n\n  if (internalFocusMode === 'off') {\n    return null;\n  }\n\n  return {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<CardRefElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', as = 'div' } = props;\n  const cardRef = React.useRef<CardRefElement>(null);\n\n  const { selectable, hasSelectSlot, selected, selectableSlot, selectableProps } = useCardSelectable(props, cardRef);\n\n  const interactive = Boolean(\n    selectable ||\n      ['a', 'button'].includes(as) ||\n      props.onClick ||\n      props.onDoubleClick ||\n      props.onMouseUp ||\n      props.onMouseDown ||\n      props.onPointerUp ||\n      props.onPointerDown ||\n      props.onTouchStart ||\n      props.onTouchEnd,\n  );\n\n  const focusAttributes = useCardFocusAttributes(props, { interactive });\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    hasSelectSlot,\n    selected,\n\n    components: {\n      root: as,\n      select: 'div',\n    },\n\n    root: getNativeElementProps(as, {\n      ref: ref || cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableProps,\n    }),\n\n    select: selectableSlot,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AACA,SAAS,iBAAT,EAA4B,cAA5B,QAAkD,yBAAlD;AAGA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,eAAxC;AAEA,MAAM,QAAQ,GAAG;EACf,GAAG,EAAE,SADU;EAEf,UAAU,oBAFK;EAGf,YAAY,SAHG;EAIf,YAAY;AAJG,CAAjB;AAOA;;;;;;;AAOG;;AACH,MAAM,kBAAkB,GAAG,CAAC;EAAE,SAAS,GAAG,KAAd;EAAqB,GAAG;AAAxB,CAAD,KAA+C;EACxE,MAAM,WAAW,GAAI,CACnB,SADmB,EAEnB,eAFmB,EAGnB,WAHmB,EAInB,aAJmB,EAKnB,aALmB,EAMnB,eANmB,EAOnB,cAPmB,EAQnB,YARmB,EASnB,aATmB,EAUnB,WAVmB,EAW6B,IAX7B,CAWkC,IAAI,IAAI,KAAK,CAAC,IAAD,CAX/C,CAArB;EAaA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAH,GAAc,SAA1B;EADiB,CAAD,CAAvC;EAIA,MAAM,0BAA0B,GAAG,EACjC,GAAG,aAD8B;IAEjC,QAAQ,EAAE;EAFuB,CAAnC;EAKA,OAAO;IACL,WADK;IAEL,eAAe,EAAE,SAAS,KAAK,KAAd,GAAsB,IAAtB,GAA6B;EAFzC,CAAP;AAID,CA3BD;AA6BA;;;;;;;;AAQG;;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAAgE;EAC9F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,WAAW,GAAG,UAAvC;IAAmD,IAAI,GAAG,QAA1D;IAAoE;EAApE,IAAuF,KAA7F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,uBAAuB,CAAC,mBAAxB,CAA4C,WAA3D,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAe,uBAAuB,CAAC,mBAAxB,CAA4C,WAA3D,CAA5C;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,mBAAxB;IAA6C,aAA7C;IAA4D;EAA5D,IAA6E,iBAAiB,CAClG,KADkG,EAElG;IAAE,WAAF;IAAe;EAAf,CAFkG,EAGlG,WAHkG,CAApG;EAMA,MAAM,OAAO,GAAG,aAAa,CAAC,WAAD,EAAc,GAAd,CAA7B;EAEA,MAAM;IAAE,WAAF;IAAe;EAAf,IAAmC,kBAAkB,CAAC,KAAD,CAA3D;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAIL,WAJK;IAKL,UALK;IAML,aANK;IAOL,QAPK;IAQL,mBAAmB,EAAE;MACnB,cADmB;MAEnB,WAFmB;MAGnB,cAHmB;MAInB;IAJmB,CARhB;IAeL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,cAAc,EAAE,KAFN;MAGV,QAAQ,EAAE;IAHA,CAfP;IAqBL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,OAD4B;MAEjC,IAAI,EAAE,OAF2B;MAGjC,GAAG,eAH8B;MAIjC,GAAG,KAJ8B;MAKjC,GAAG;IAL8B,CAAR,CArBtB;IA6BL,cAAc,EAAE,gBAAgB,CAAC,cAAD,CA7B3B;IA8BL,QAAQ,EAAE;EA9BL,CAAP;AAgCD,CAjDM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n  const interactive = ([\n    'onClick',\n    'onDoubleClick',\n    'onMouseUp',\n    'onMouseDown',\n    'onPointerUp',\n    'onPointerDown',\n    'onTouchStart',\n    'onTouchEnd',\n    'onDragStart',\n    'onDragEnd',\n  ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n    props,\n    { referenceId, referenceLabel },\n    cardBaseRef,\n  );\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: resolveShorthand(floatingAction),\n    checkbox: checkboxSlot,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Card/useCardContextValue.js

@@ -0,0 +1,8 @@
+export function useCardContextValue({
+  selectableA11yProps
+}) {
+  return {
+    selectableA11yProps
+  };
+}
+//# sourceMappingURL=useCardContextValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,mBAAV,CAA8B;EAAE;AAAF,CAA9B,EAAgE;EACpE,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"],"sourceRoot":"../src/"}