@fluentui/react-card 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

package/.swcrc

@@ -1,15 +1,5 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "env": {
-    "targets": {
-      "chrome": "84",
-      "edge": "84",
-      "firefox": "75",
-      "opera": "73",
-      "safari": "14.1"
-    },
-    "bugfixes": true
-  },
   "exclude": [
     "/testing",
     "/**/*.cy.ts",
@@ -32,7 +22,8 @@
         "runtime": "classic",
         "useSpread": true
       }
-    }
+    },
+    "target": "es2019"
   },
   "minify": false,
   "sourceMaps": true

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 17 Mar 2023 15:00:13 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20230317-1454.1",
-      "version": "0.0.0-nightly-20230317-1454.1",
+      "date": "Wed, 22 Mar 2023 04:46:40 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20230322-0439.1",
+      "version": "0.0.0-nightly-20230322-0439.1",
       "comments": {
         "prerelease": [
           {
@@ -16,38 +16,95 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Mar 2023 21:23:26 GMT",
+      "tag": "@fluentui/react-card_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.6.1",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.3.5",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,23 +1,39 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Fri, 17 Mar 2023 15:00:13 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Mar 2023 04:46:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230317-1454.1)
+## [0.0.0-nightly-20230322-0439.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230322-0439.1)
 
-Fri, 17 Mar 2023 15:00:13 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.2..@fluentui/react-card_v0.0.0-nightly-20230317-1454.1)
+Wed, 22 Mar 2023 04:46:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.3..@fluentui/react-card_v0.0.0-nightly-20230322-0439.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.3)
+
+Tue, 21 Mar 2023 21:23:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.2..@fluentui/react-card_v9.0.3)
+
+### Patches
+
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-button to v9.3.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
 
 ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.2)
 

package/lib/Card.js

@@ -1,2 +1,2 @@
-export * from "./components/Card/index";
+export * from './components/Card/index';
 //# sourceMappingURL=Card.js.map

package/lib/CardFooter.js

@@ -1,2 +1,2 @@
-export * from "./components/CardFooter/index";
+export * from './components/CardFooter/index';
 //# sourceMappingURL=CardFooter.js.map

package/lib/CardHeader.js

@@ -1,2 +1,2 @@
-export * from "./components/CardHeader/index";
+export * from './components/CardHeader/index';
 //# sourceMappingURL=CardHeader.js.map

package/lib/CardPreview.js

@@ -1,2 +1,2 @@
-export * from "./components/CardPreview/index";
+export * from './components/CardPreview/index';
 //# sourceMappingURL=CardPreview.js.map

package/lib/components/Card/Card.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useCard_unstable } from "./useCard";
-import { renderCard_unstable } from "./renderCard";
-import { useCardStyles_unstable } from "./useCardStyles";
-import { useCardContextValue } from "./useCardContextValue";
+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.
  */
@@ -12,5 +12,5 @@ export const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCardStyles_unstable(state);
   return renderCard_unstable(state, cardContextValue);
 });
-Card.displayName = "Card";
+Card.displayName = 'Card';
 //# sourceMappingURL=Card.js.map

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

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 //# sourceMappingURL=Card.types.js.map

package/lib/components/Card/CardContext.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 const cardContext = /*#__PURE__*/React.createContext(undefined);
 /**
  * @internal
@@ -17,8 +17,9 @@ export const cardContextDefaultValue = {
  * @internal
  */
 export const CardProvider = cardContext.Provider;
+var _React_useContext;
 /**
  * @internal
  */
-export const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;
+export const useCardContext_unstable = () => (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
 //# sourceMappingURL=CardContext.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,WAAA,gBAAcD,KAAA,CAAME,aAAa,CAA+BC,SAAA;AAEtE;;;AAGA,OAAO,MAAMC,uBAAA,GAA4C;EACvDC,mBAAA,EAAqB;IACnBC,WAAA,EAAaH,SAAA;IACbI,eAAA,EAAiB;MACf,WACF;IACAC,cAAA,EAAgBL,SAAA;IAChBM,kBAAA,EAAoB;MAClB;EAEJ;AACF;AAEA;;;AAGA,OAAO,MAAMC,YAAA,GAAeT,WAAA,CAAYU,QAAQ;AAEhD;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAAA,KAAMZ,KAAA,CAAMa,UAAU,CAACZ,WAAA,KAAgBG,uBAAA"}
+{"version":3,"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","_React_useContext","useCardContext_unstable","useContext"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,WAAA,gBAAcD,KAAA,CAAME,aAAa,CAA+BC,SAAA;AAEtE;;;AAGA,OAAO,MAAMC,uBAAA,GAA4C;EACvDC,mBAAA,EAAqB;IACnBC,WAAA,EAAaH,SAAA;IACbI,eAAA,EAAiB;MACf,WACF;IACAC,cAAA,EAAgBL,SAAA;IAChBM,kBAAA,EAAoB;MAClB;EAEJ;AACF;AAEA;;;AAGA,OAAO,MAAMC,YAAA,GAAeT,WAAA,CAAYU,QAAQ;IAKHC,iBAAA;AAH7C;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAAA,KAAM,CAAAD,iBAAA,GAAAZ,KAAA,CAAMc,UAAU,CAACb,WAAA,eAAjBW,iBAAA,cAAAA,iBAAA,GAAiCR,uBAAuB"}

package/lib/components/Card/index.js

@@ -1,7 +1,7 @@
-export * from "./Card";
-export * from "./Card.types";
-export * from "./CardContext";
-export * from "./renderCard";
-export * from "./useCard";
-export * from "./useCardStyles";
+export * from './Card';
+export * from './Card.types';
+export * from './CardContext';
+export * from './renderCard';
+export * from './useCard';
+export * from './useCardStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/Card/renderCard.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
-import { CardProvider } from "./CardContext";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { CardProvider } from './CardContext';
 /**
  * Render the final JSX of Card.
  */

package/lib/components/Card/useCard.js

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { getNativeElementProps, useMergedRefs } from "@fluentui/react-utilities";
-import { useFocusableGroup, useFocusWithin } from "@fluentui/react-tabster";
-import { useCardSelectable } from "./useCardSelectable";
-import { cardContextDefaultValue } from "./CardContext";
+import * as React from 'react';
+import { getNativeElementProps, 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"
+  'no-tab': 'limited-trap-focus',
+  'tab-exit': 'limited',
+  'tab-only': 'unlimited'
 };
 /**
  * Create the state for interactive cards.
@@ -18,12 +18,12 @@ const focusMap = {
  * @param props - props from this instance of Card
  */
 const useCardInteractive = ({
-  focusMode = "off",
+  focusMode = 'off',
   ...props
 }) => {
-  const interactive = ["onClick", "onDoubleClick", "onMouseUp", "onMouseDown", "onPointerUp", "onPointerDown", "onTouchStart", "onTouchEnd", "onDragStart", "onDragEnd"].some(prop => props[prop]);
+  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
   const groupperAttrs = useFocusableGroup({
-    tabBehavior: focusMap[interactive ? "no-tab" : focusMode]
+    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
   });
   const interactiveFocusAttributes = {
     ...groupperAttrs,
@@ -31,7 +31,7 @@ const useCardInteractive = ({
   };
   return {
     interactive,
-    focusAttributes: focusMode === "off" ? null : interactiveFocusAttributes
+    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
   };
 };
 /**
@@ -45,9 +45,9 @@ const useCardInteractive = ({
  */
 export const useCard_unstable = (props, ref) => {
   const {
-    appearance = "filled",
-    orientation = "vertical",
-    size = "medium"
+    appearance = 'filled',
+    orientation = 'vertical',
+    size = 'medium'
   } = props;
   const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
   const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
@@ -83,13 +83,13 @@ export const useCard_unstable = (props, ref) => {
       setReferenceLabel
     },
     components: {
-      root: "div",
-      floatingAction: "div",
-      checkbox: "input"
+      root: 'div',
+      floatingAction: 'div',
+      checkbox: 'input'
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref: cardRef,
-      role: "group",
+      role: 'group',
       ...focusAttributes,
       ...props,
       ...selectableCardProps

package/lib/components/Card/useCardSelectable.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { mergeCallbacks, resolveShorthand } from "@fluentui/react-utilities";
-import { Enter } from "@fluentui/keyboard-keys";
-import { useFocusFinders } from "@fluentui/react-tabster";
+import * as React from 'react';
+import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
+import { Enter } from '@fluentui/keyboard-keys';
+import { useFocusFinders } from '@fluentui/react-tabster';
 /**
  * @internal
  *
@@ -31,7 +31,7 @@ export const useCardSelectable = (props, {
     findAllFocusable
   } = useFocusFinders();
   const checkboxRef = React.useRef(null);
-  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== "undefined");
+  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
   const [isCardSelected, setIsCardSelected] = React.useState(false);
   const [isSelectFocused, setIsSelectFocused] = React.useState(false);
   const shouldRestrictTriggerAction = React.useCallback(event => {
@@ -41,7 +41,7 @@ export const useCardSelectable = (props, {
     const focusableElements = findAllFocusable(cardRef.current);
     const target = event.target;
     const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
-    const isCheckboxSlot = checkboxRef?.current === target;
+    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
     return isElementInFocusableGroup && !isCheckboxSlot;
   }, [cardRef, findAllFocusable]);
   const onChangeHandler = React.useCallback(event => {
@@ -68,14 +68,14 @@ export const useCardSelectable = (props, {
     }
     const selectableCheckboxProps = {};
     if (referenceId) {
-      selectableCheckboxProps["aria-labelledby"] = referenceId;
+      selectableCheckboxProps['aria-labelledby'] = referenceId;
     } else if (referenceLabel) {
-      selectableCheckboxProps["aria-label"] = referenceLabel;
+      selectableCheckboxProps['aria-label'] = referenceLabel;
     }
     return resolveShorthand(checkbox, {
       defaultProps: {
         ref: checkboxRef,
-        type: "checkbox",
+        type: 'checkbox',
         checked: isCardSelected,
         onChange: event => onChangeHandler(event),
         onFocus: () => setIsSelectFocused(true),
@@ -103,7 +103,7 @@ export const useCardSelectable = (props, {
       onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
     };
   }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
-  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [defaultSelected, selected, setIsCardSelected]);
+  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
   return {
     selected: isCardSelected,
     selectable: isSelectable,

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

@@ -1 +1 @@
-{"version":3,"names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sources":["../../../src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sources":["../../../src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"mappings":"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"}

package/lib/components/Card/useCardStyles.js

@@ -1,23 +1,23 @@
-import { shorthands, __styles, mergeClasses } from "@griffel/react";
-import { tokens } from "@fluentui/react-theme";
-import { createFocusOutlineStyle } from "@fluentui/react-tabster";
-import { cardPreviewClassNames } from "../CardPreview/useCardPreviewStyles";
-import { cardHeaderClassNames } from "../CardHeader/useCardHeaderStyles";
-import { cardFooterClassNames } from "../CardFooter/useCardFooterStyles";
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
+import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
+import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
 /**
  * Static CSS class names used internally for the component slots.
  */
 export const cardClassNames = {
-  root: "fui-Card",
-  floatingAction: "fui-Card__floatingAction",
-  checkbox: "fui-Card__checkbox"
+  root: 'fui-Card',
+  floatingAction: 'fui-Card__floatingAction',
+  checkbox: 'fui-Card__checkbox'
 };
 /**
  * CSS variable names used internally for uniform styling in Card.
  */
 export const cardCSSVars = {
-  cardSizeVar: "--fui-Card--size",
-  cardBorderRadiusVar: "--fui-Card--border-radius"
+  cardSizeVar: '--fui-Card--size',
+  cardBorderRadiusVar: '--fui-Card--border-radius'
 };
 const focusOutlineStyle = {
   outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
@@ -311,19 +311,19 @@ export const useCardStyles_unstable = state => {
   };
   const appearanceMap = {
     filled: styles.filled,
-    "filled-alternative": styles.filledAlternative,
+    'filled-alternative': styles.filledAlternative,
     outline: styles.outline,
     subtle: styles.subtle
   };
   const selectedMap = {
     filled: styles.filledInteractiveSelected,
-    "filled-alternative": styles.filledAlternativeInteractiveSelected,
+    'filled-alternative': styles.filledAlternativeInteractiveSelected,
     outline: styles.outlineInteractiveSelected,
     subtle: styles.subtleInteractiveSelected
   };
   const interactiveMap = {
     filled: styles.filledInteractive,
-    "filled-alternative": styles.filledAlternativeInteractive,
+    'filled-alternative': styles.filledAlternativeInteractive,
     outline: styles.outlineInteractive,
     subtle: styles.subtleInteractive
   };

package/lib/components/CardFooter/CardFooter.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useCardFooter_unstable } from "./useCardFooter";
-import { renderCardFooter_unstable } from "./renderCardFooter";
-import { useCardFooterStyles_unstable } from "./useCardFooterStyles";
+import * as React from 'react';
+import { useCardFooter_unstable } from './useCardFooter';
+import { renderCardFooter_unstable } from './renderCardFooter';
+import { useCardFooterStyles_unstable } from './useCardFooterStyles';
 /**
  * Component to render Button actions in a Card component.
  */
@@ -10,5 +10,5 @@ export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCardFooterStyles_unstable(state);
   return renderCardFooter_unstable(state);
 });
-CardFooter.displayName = "CardFooter";
+CardFooter.displayName = 'CardFooter';
 //# sourceMappingURL=CardFooter.js.map

package/lib/components/CardFooter/index.js

@@ -1,6 +1,6 @@
-export * from "./CardFooter";
-export * from "./CardFooter.types";
-export * from "./renderCardFooter";
-export * from "./useCardFooter";
-export * from "./useCardFooterStyles";
+export * from './CardFooter';
+export * from './CardFooter.types';
+export * from './renderCardFooter';
+export * from './useCardFooter';
+export * from './useCardFooterStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardFooter.
  */

package/lib/components/CardFooter/useCardFooter.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getNativeElementProps, resolveShorthand } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardFooter.
  *
@@ -15,10 +15,10 @@ export const useCardFooter_unstable = (props, ref) => {
   } = props;
   return {
     components: {
-      root: "div",
-      action: "div"
+      root: 'div',
+      action: 'div'
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref,
       ...props
     }),

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,10 +1,10 @@
-import { __styles, mergeClasses, shorthands } from "@griffel/react";
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 /**
  * Static CSS class names used internally for the component slots.
  */
 export const cardFooterClassNames = {
-  root: "fui-CardFooter",
-  action: "fui-CardFooter__action"
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action'
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {