@fluentui/react-card 9.0.0-beta.30 → 9.0.0-beta.32

package/CHANGELOG.json

@@ -2,7 +2,111 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Tue, 25 Oct 2022 00:34:18 GMT",
+      "date": "Fri, 11 Nov 2022 14:53:43 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.32",
+      "version": "9.0.0-beta.32",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "7c951efddfb820f51d6a52a8f994f1c1c712698a",
+            "comment": "feat: add selectable feature to card"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.3.0",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.2",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.2.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.8",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "87859b052155ca206ef3540a2a9623803f6e2b93",
+            "comment": "test: replace deprecated module.parent with require.main within isConformance"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:57:49 GMT",
+      "tag": "@fluentui/react-card_v9.0.0-beta.31",
+      "version": "9.0.0-beta.31",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.2.0",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.2.1",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-text to v9.1.5",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.1.7",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Oct 2022 00:35:40 GMT",
       "tag": "@fluentui/react-card_v9.0.0-beta.30",
       "version": "9.0.0-beta.30",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Tue, 25 Oct 2022 00:34:18 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Nov 2022 14:53:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.32)
+
+Fri, 11 Nov 2022 14:53:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.31..@fluentui/react-card_v9.0.0-beta.32)
+
+### Changes
+
+- feat: add selectable feature to card ([PR #24486](https://github.com/microsoft/fluentui/pull/24486) by marcosvmmoura@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-tabster to v9.3.0 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-button to v9.1.8 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
+## [9.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.31)
+
+Wed, 02 Nov 2022 11:57:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.30..@fluentui/react-card_v9.0.0-beta.31)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-tabster to v9.2.1 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-text to v9.1.5 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-button to v9.1.7 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+
 ## [9.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.30)
 
-Tue, 25 Oct 2022 00:34:18 GMT 
+Tue, 25 Oct 2022 00:35:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.29..@fluentui/react-card_v9.0.0-beta.30)
 
 ### Changes

package/dist/index.d.ts

@@ -110,6 +110,13 @@ export declare type CardHeaderSlots = {
  */
 export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
 
+/**
+ * Data sent from the selection events on a selectable card.
+ */
+declare type CardOnSelectData = {
+    selected: boolean;
+};
+
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
@@ -148,6 +155,23 @@ 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.
@@ -182,8 +206,29 @@ export declare type CardProps = ComponentProps<CardSlots> & {
      * @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 or not when rendered.
+     *
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Callback to be called when the selected state value changes.
+     */
+    onSelectionChange?: (event: CarOnSelectionChangeEvent, data: CardOnSelectData) => void;
 };
 
+/**
+ * Card refs to the root element slot.
+ */
+declare type CardRefElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+
 /**
  * Slots available in the Card component.
  */
@@ -191,13 +236,49 @@ export declare type CardSlots = {
     /**
      * Root element of the component.
      */
-    root: Slot<'div'>;
+    root: Slot<'div', 'a' | 'button'>;
+    /**
+     * Select element represents a checkbox.
+     */
+    select?: Slot<'div', 'input'>;
 };
 
 /**
  * State used in rendering Card.
  */
-export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
+export declare type CardState = ComponentState<CardSlots> & 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;
+    /**
+     * Represents a selectable card that contains a slot for the select element.
+     *
+     * @default false
+     */
+    hasSelectSlot: boolean;
+    /**
+     * Defines whether the card is currently selected.
+     *
+     * @default false
+     */
+    selected: 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.
@@ -226,9 +307,9 @@ export declare const renderCardPreview_unstable: (state: CardPreviewState) => JS
  * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
+ * @param ref - reference to the root element of Card
  */
-export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLElement>) => CardState;
+export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<CardRefElement>) => CardState;
 
 /**
  * Create the state required to render CardFooter.

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,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClF,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 } 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((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;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/"}

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 type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\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/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;\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 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"]}

package/lib/components/Card/renderCard.js

@@ -10,6 +10,7 @@ export const renderCard_unstable = state => {
     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);
 };
 //# 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,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","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 <slots.root {...slotProps.root} />;\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;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/"}

package/lib/components/Card/useCard.js

@@ -1,5 +1,32 @@
+import * as React from 'react';
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
+import { useCardSelectable } from './useCardSelectable';
+const focusMap = {
+  off: undefined,
+  'no-tab': 'limited-trap-focus',
+  'tab-exit': 'limited',
+  'tab-only': 'unlimited'
+};
+
+const useCardFocusAttributes = ({
+  focusMode = 'off'
+}, {
+  interactive
+}) => {
+  const internalFocusMode = interactive ? 'no-tab' : focusMode;
+  const groupperAttrs = useFocusableGroup({
+    tabBehavior: focusMap[internalFocusMode]
+  });
+
+  if (internalFocusMode === 'off') {
+    return null;
+  }
+
+  return { ...groupperAttrs,
+    tabIndex: 0
+  };
+};
 /**
  * Create the state required to render Card.
  *
@@ -7,42 +34,49 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
  * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
+ * @param ref - reference to the root element of Card
  */
 
+
 export const useCard_unstable = (props, ref) => {
   const {
     appearance = 'filled',
-    focusMode = 'off',
     orientation = 'vertical',
-    size = 'medium'
+    size = 'medium',
+    as = 'div'
   } = props;
-  const focusMap = {
-    off: undefined,
-    'no-tab': 'limited-trap-focus',
-    'tab-exit': 'limited',
-    'tab-only': 'unlimited'
-  };
-  const groupperAttrs = useFocusableGroup({
-    tabBehavior: focusMap[focusMode]
+  const cardRef = React.useRef(null);
+  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
   });
-  const focusAttrs = focusMode !== 'off' ? {
-    tabIndex: 0,
-    ...groupperAttrs
-  } : null;
   return {
     appearance,
     orientation,
     size,
+    interactive,
+    selectable,
+    hasSelectSlot,
+    selected,
     components: {
-      root: 'div'
+      root: as,
+      select: 'div'
     },
-    root: getNativeElementProps(props.as || 'div', {
-      ref,
+    root: getNativeElementProps(as, {
+      ref: ref || cardRef,
       role: 'group',
-      ...focusAttrs,
-      ...props
-    })
+      ...focusAttributes,
+      ...props,
+      ...selectableProps
+    }),
+    select: selectableSlot
   };
 };
 //# 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":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EANtB,CAAP;AAaD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\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 root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n  const { appearance = 'filled', focusMode = 'off', orientation = 'vertical', size = 'medium' } = props;\n\n  const focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited',\n  } as const;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n  return {\n    appearance,\n    orientation,\n    size,\n\n    components: { root: 'div' },\n    root: getNativeElementProps(props.as || 'div', {\n      ref,\n      role: 'group',\n      ...focusAttrs,\n      ...props,\n    }),\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,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/"}

package/lib/components/Card/useCardSelectable.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useFocusFinders } from '@fluentui/react-tabster';
+export const useCardSelectable = (props, cardRef) => {
+  const {
+    select,
+    selected,
+    defaultSelected,
+    onSelectionChange
+  } = props;
+  const {
+    findAllFocusable
+  } = useFocusFinders();
+  const selectableRef = React.useRef(null);
+  const isSelectable = [selected, defaultSelected, onSelectionChange, select].some(bool => typeof bool !== 'undefined');
+  const hasSelectSlot = Boolean(select);
+  const [isCardSelected, setIsCardSelected] = React.useState(false);
+  const shouldRestrictTriggerAction = React.useCallback(event => {
+    var _a;
+
+    if (!cardRef.current) {
+      return false;
+    }
+
+    const focusableElements = findAllFocusable(cardRef.current);
+    const target = event.target;
+    const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));
+    const isTargetInSelectableSlot = (_a = selectableRef === null || selectableRef === void 0 ? void 0 : selectableRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
+    return isTargetInFocusableGroup && !isTargetInSelectableSlot;
+  }, [cardRef, findAllFocusable]);
+  const onChangeHandler = React.useCallback(event => {
+    if (shouldRestrictTriggerAction(event)) {
+      return;
+    }
+
+    const newCheckedValue = !isCardSelected;
+    setIsCardSelected(newCheckedValue);
+
+    if (onSelectionChange) {
+      onSelectionChange(event, {
+        selected: newCheckedValue
+      });
+    }
+  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
+  const onKeyDownHandler = React.useCallback(event => {
+    if ([Enter, Space].includes(event.key)) {
+      event.preventDefault();
+      onChangeHandler(event);
+    }
+  }, [onChangeHandler]);
+  const selectableProps = React.useMemo(() => {
+    if (!isSelectable) {
+      return null;
+    }
+
+    const selectableEvents = {
+      onClick: onChangeHandler,
+      onKeyDown: onKeyDownHandler
+    };
+
+    if (!hasSelectSlot) {
+      return { ...selectableEvents,
+        'aria-checked': isCardSelected
+      };
+    }
+
+    return selectableEvents;
+  }, [hasSelectSlot, isCardSelected, isSelectable, onChangeHandler, onKeyDownHandler]);
+  const selectableSlot = React.useMemo(() => {
+    if (!hasSelectSlot) {
+      return undefined;
+    }
+
+    return resolveShorthand(select, {
+      defaultProps: {
+        ref: selectableRef
+      }
+    });
+  }, [hasSelectSlot, select]);
+  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
+  return {
+    selected: isCardSelected,
+    selectable: isSelectable,
+    hasSelectSlot,
+    selectableProps,
+    selectableSlot
+  };
+};
+//# sourceMappingURL=useCardSelectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CarOnSelectionChangeEvent, CardProps, CardRefElement } from './Card.types';\n\nexport const useCardSelectable = (props: CardProps, cardRef: React.RefObject<CardRefElement>) => {\n  const { select, selected, defaultSelected, onSelectionChange } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n  const selectableRef = React.useRef<HTMLDivElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange, select].some(bool => typeof bool !== 'undefined');\n  const hasSelectSlot = Boolean(select);\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CarOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isTargetInSelectableSlot = selectableRef?.current?.contains(target);\n\n      return isTargetInFocusableGroup && !isTargetInSelectableSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n  const onChangeHandler = React.useCallback(\n    (event: CarOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, {\n          selected: newCheckedValue,\n        });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter, Space].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const selectableProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    const selectableEvents = {\n      onClick: onChangeHandler,\n      onKeyDown: onKeyDownHandler,\n    };\n\n    if (!hasSelectSlot) {\n      return {\n        ...selectableEvents,\n        'aria-checked': isCardSelected,\n      };\n    }\n\n    return selectableEvents;\n  }, [hasSelectSlot, isCardSelected, isSelectable, onChangeHandler, onKeyDownHandler]);\n\n  const selectableSlot = React.useMemo(() => {\n    if (!hasSelectSlot) {\n      return undefined;\n    }\n\n    return resolveShorthand(select, {\n      defaultProps: {\n        ref: selectableRef,\n      },\n    });\n  }, [hasSelectSlot, select]);\n\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n    defaultSelected,\n    selected,\n    setIsCardSelected,\n  ]);\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    hasSelectSlot,\n    selectableProps,\n    selectableSlot,\n  };\n};\n"],"sourceRoot":"../src/"}