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

package/lib/components/CardHeader/CardHeader.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useCardHeader_unstable } from "./useCardHeader";
-import { renderCardHeader_unstable } from "./renderCardHeader";
-import { useCardHeaderStyles_unstable } from "./useCardHeaderStyles";
+import * as React from 'react';
+import { useCardHeader_unstable } from './useCardHeader';
+import { renderCardHeader_unstable } from './renderCardHeader';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
 /**
  * Component to render an image, text and an action in a Card component.
  */
@@ -10,5 +10,5 @@ export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCardHeaderStyles_unstable(state);
   return renderCardHeader_unstable(state);
 });
-CardHeader.displayName = "CardHeader";
+CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=CardHeader.js.map

package/lib/components/CardHeader/index.js

@@ -1,6 +1,6 @@
-export * from "./CardHeader";
-export * from "./CardHeader.types";
-export * from "./renderCardHeader";
-export * from "./useCardHeader";
-export * from "./useCardHeaderStyles";
+export * from './CardHeader';
+export * from './CardHeader.types';
+export * from './renderCardHeader';
+export * from './useCardHeader';
+export * from './useCardHeaderStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/CardHeader/renderCardHeader.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 CardHeader.
  */

package/lib/components/CardHeader/useCardHeader.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { getNativeElementProps, resolveShorthand, useId } from "@fluentui/react-utilities";
-import { useCardContext_unstable } from "../Card/CardContext";
-import { cardHeaderClassNames } from "./useCardHeaderStyles";
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardHeaderClassNames } from './useCardHeaderStyles';
 /**
  * Create the state required to render CardHeader.
  *
@@ -36,13 +36,13 @@ export const useCardHeader_unstable = (props, ref) => {
   }, [header, setReferenceId, generatedId]);
   return {
     components: {
-      root: "div",
-      image: "div",
-      header: "div",
-      description: "div",
-      action: "div"
+      root: 'div',
+      image: 'div',
+      header: 'div',
+      description: 'div',
+      action: 'div'
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref,
       ...props
     }),

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -1,19 +1,19 @@
-import { __styles, mergeClasses } from "@griffel/react";
+import { __styles, mergeClasses } from '@griffel/react';
 /**
  * Static CSS class names used internally for the component slots.
  */
 export const cardHeaderClassNames = {
-  root: "fui-CardHeader",
-  image: "fui-CardHeader__image",
-  header: "fui-CardHeader__header",
-  description: "fui-CardHeader__description",
-  action: "fui-CardHeader__action"
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action'
 };
 /**
  * CSS variable names used internally for uniform styling in CardHeader.
  */
 export const cardHeaderCSSVars = {
-  cardHeaderGapVar: "--fui-CardHeader--gap"
+  cardHeaderGapVar: '--fui-CardHeader--gap'
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {

package/lib/components/CardPreview/CardPreview.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useCardPreview_unstable } from "./useCardPreview";
-import { renderCardPreview_unstable } from "./renderCardPreview";
-import { useCardPreviewStyles_unstable } from "./useCardPreviewStyles";
+import * as React from 'react';
+import { useCardPreview_unstable } from './useCardPreview';
+import { renderCardPreview_unstable } from './renderCardPreview';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
@@ -10,5 +10,5 @@ export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCardPreviewStyles_unstable(state);
   return renderCardPreview_unstable(state);
 });
-CardPreview.displayName = "CardPreview";
+CardPreview.displayName = 'CardPreview';
 //# sourceMappingURL=CardPreview.js.map

package/lib/components/CardPreview/index.js

@@ -1,6 +1,6 @@
-export * from "./CardPreview";
-export * from "./CardPreview.types";
-export * from "./renderCardPreview";
-export * from "./useCardPreview";
-export * from "./useCardPreviewStyles";
+export * from './CardPreview';
+export * from './CardPreview.types';
+export * from './renderCardPreview';
+export * from './useCardPreview';
+export * from './useCardPreviewStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/CardPreview/renderCardPreview.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 CardPreview.
  */

package/lib/components/CardPreview/useCardPreview.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { getNativeElementProps, resolveShorthand, useMergedRefs } from "@fluentui/react-utilities";
-import { useCardContext_unstable } from "../Card/CardContext";
-import { cardPreviewClassNames } from "./useCardPreviewStyles";
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardPreviewClassNames } from './useCardPreviewStyles';
 /**
  * Create the state required to render CardPreview.
  *
@@ -31,8 +31,8 @@ export const useCardPreview_unstable = (props, ref) => {
     if (previewRef.current && previewRef.current.parentNode) {
       const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);
       if (img) {
-        const ariaLabel = img.getAttribute("aria-label");
-        const ariaDescribedby = img.getAttribute("aria-describedby");
+        const ariaLabel = img.getAttribute('aria-label');
+        const ariaDescribedby = img.getAttribute('aria-describedby');
         if (ariaDescribedby) {
           setReferenceId(ariaDescribedby);
         } else if (img.alt) {
@@ -45,10 +45,10 @@ export const useCardPreview_unstable = (props, ref) => {
   }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);
   return {
     components: {
-      root: "div",
-      logo: "div"
+      root: 'div',
+      logo: 'div'
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref: previewRef,
       ...props
     }),

package/lib/components/CardPreview/useCardPreviewStyles.js

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

package/lib/index.js

@@ -1,6 +1,6 @@
-export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from "./Card";
-export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from "./CardFooter";
-export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from "./CardHeader";
-export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from "./CardPreview";
-export { CardProvider, useCardContext_unstable } from "./Card";
+export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
+export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
+export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
+export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
+export { CardProvider, useCardContext_unstable } from './Card';
 //# sourceMappingURL=index.js.map

package/lib-commonjs/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/Card.js"],"sourcesContent":["export * from \"./components/Card/index\";\n//# sourceMappingURL=Card.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,gCAAgC"}
+{"version":3,"sources":["../lib/Card.js"],"sourcesContent":["export * from './components/Card/index';\n//# sourceMappingURL=Card.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,gCAAgC"}

package/lib-commonjs/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardFooter.js"],"sourcesContent":["export * from \"./components/CardFooter/index\";\n//# sourceMappingURL=CardFooter.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["../lib/CardFooter.js"],"sourcesContent":["export * from './components/CardFooter/index';\n//# sourceMappingURL=CardFooter.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}

package/lib-commonjs/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardHeader.js"],"sourcesContent":["export * from \"./components/CardHeader/index\";\n//# sourceMappingURL=CardHeader.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["../lib/CardHeader.js"],"sourcesContent":["export * from './components/CardHeader/index';\n//# sourceMappingURL=CardHeader.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}

package/lib-commonjs/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/CardPreview.js"],"sourcesContent":["export * from \"./components/CardPreview/index\";\n//# sourceMappingURL=CardPreview.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}
+{"version":3,"sources":["../lib/CardPreview.js"],"sourcesContent":["export * from './components/CardPreview/index';\n//# sourceMappingURL=CardPreview.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}

package/lib-commonjs/components/Card/Card.js

@@ -18,6 +18,6 @@ const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useCardStyles.useCardStyles_unstable)(state);
     return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
 });
-Card.displayName = "Card"; //# sourceMappingURL=Card.js.map
+Card.displayName = 'Card'; //# sourceMappingURL=Card.js.map
 
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/Card.js"],"sourcesContent":["import * as React from \"react\";\nimport { useCard_unstable } from \"./useCard\";\nimport { renderCard_unstable } from \"./renderCard\";\nimport { useCardStyles_unstable } from \"./useCardStyles\";\nimport { useCardContextValue } from \"./useCardContextValue\";\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = \"Card\";\n//# sourceMappingURL=Card.js.map"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;yBACU;4BACG;+BACG;qCACH;AAI7B,MAAMA,OAAO,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAChE,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAmB,EAACH;IAC7CI,IAAAA,qCAAsB,EAACJ;IACvB,OAAOK,IAAAA,+BAAmB,EAACL,OAAOE;AACpC;AACAP,KAAKW,WAAW,GAAG,QACnB,gCAAgC"}
+{"version":3,"sources":["../../../lib/components/Card/Card.js"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport { useCardContextValue } from './useCardContextValue';\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = 'Card';\n//# sourceMappingURL=Card.js.map"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;yBACU;4BACG;+BACG;qCACH;AAI7B,MAAMA,OAAO,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAChE,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAmB,EAACH;IAC7CI,IAAAA,qCAAsB,EAACJ;IACvB,OAAOK,IAAAA,+BAAmB,EAACL,OAAOE;AACpC;AACAP,KAAKW,WAAW,GAAG,QACnB,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/Card.types.js"],"sourcesContent":["import * as React from \"react\";\n//# sourceMappingURL=Card.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/Card/Card.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Card.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,sCAAsC"}

package/lib-commonjs/components/Card/CardContext.js

@@ -27,6 +27,7 @@ const cardContextDefaultValue = {
     }
 };
 const CardProvider = cardContext.Provider;
-const useCardContext_unstable = ()=>_react.useContext(cardContext) ?? cardContextDefaultValue; //# sourceMappingURL=CardContext.js.map
+var _React_useContext;
+const useCardContext_unstable = ()=>(_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue; //# sourceMappingURL=CardContext.js.map
 
 //# sourceMappingURL=CardContext.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/CardContext.js"],"sourcesContent":["import * as React from \"react\";\nconst cardContext = /*#__PURE__*/React.createContext(undefined);\n/**\n * @internal\n */\nexport const cardContextDefaultValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */},\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */}\n  }\n};\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n//# sourceMappingURL=CardContext.js.map"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","useContext"],"mappings":";;;;;;;;;;;IAKaA,uBAAuB,MAAvBA;IAaAC,YAAY,MAAZA;IAIAC,uBAAuB,MAAvBA;;;6DAtBU;AACvB,MAAMC,cAAc,WAAW,GAAEC,OAAMC,aAAa,CAACC;AAI9C,MAAMN,0BAA0B;IACrCO,qBAAqB;QACnBC,aAAaF;QACbG,kBAAiB;QACf,QAAQ,GAAE;QACZC,gBAAgBJ;QAChBK,qBAAoB;QAClB,QAAQ,GAAE;IACd;AACF;AAIO,MAAMV,eAAeE,YAAYS,QAAQ;AAIzC,MAAMV,0BAA0B,IAAME,OAAMS,UAAU,CAACV,gBAAgBH,yBAC9E,uCAAuC"}
+{"version":3,"sources":["../../../lib/components/Card/CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = /*#__PURE__*/React.createContext(undefined);\n/**\n * @internal\n */\nexport const cardContextDefaultValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */},\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */}\n  }\n};\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n//# sourceMappingURL=CardContext.js.map"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAKaA,uBAAuB,MAAvBA;IAaAC,YAAY,MAAZA;IAKAC,uBAAuB,MAAvBA;;;6DAvBU;AACvB,MAAMC,cAAc,WAAW,GAAEC,OAAMC,aAAa,CAACC;AAI9C,MAAMN,0BAA0B;IACrCO,qBAAqB;QACnBC,aAAaF;QACbG,kBAAiB;QACf,QAAQ,GAAE;QACZC,gBAAgBJ;QAChBK,qBAAoB;QAClB,QAAQ,GAAE;IACd;AACF;AAIO,MAAMV,eAAeE,YAAYS,QAAQ;AAChD,IAAIC;AAIG,MAAMX,0BAA0B,IAAM,AAACW,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,IAAI,IAAIU,sBAAsB,KAAK,IAAIA,oBAAoBb,uBAAuB,EACvL,uCAAuC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/index.js"],"sourcesContent":["export * from \"./Card\";\nexport * from \"./Card.types\";\nexport * from \"./CardContext\";\nexport * from \"./renderCard\";\nexport * from \"./useCard\";\nexport * from \"./useCardStyles\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/Card/index.js"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/renderCard.js"],"sourcesContent":["import * as React from \"react\";\nimport { getSlots } from \"@fluentui/react-utilities\";\nimport { CardProvider } from \"./CardContext\";\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state, cardContextValue) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(CardProvider, {\n    value: cardContextValue\n  }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n//# sourceMappingURL=renderCard.js.map"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlots","React","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;6BACI;AAItB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAqB;IAC9D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACE,yBAAY,EAAE;QACjHC,OAAOR;IACT,GAAGC,MAAMQ,QAAQ,GAAG,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,QAAQ,EAAEP,UAAUO,QAAQ,IAAI,IAAI,EAAER,MAAMS,cAAc,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,cAAc,EAAER,UAAUQ,cAAc,IAAI,IAAI,EAAER,UAAUI,IAAI,CAACK,QAAQ;AAC1O,GACA,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/Card/renderCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state, cardContextValue) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(CardProvider, {\n    value: cardContextValue\n  }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n//# sourceMappingURL=renderCard.js.map"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlots","React","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;6BACI;AAItB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAqB;IAC9D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACE,yBAAY,EAAE;QACjHC,OAAOR;IACT,GAAGC,MAAMQ,QAAQ,GAAG,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,QAAQ,EAAEP,UAAUO,QAAQ,IAAI,IAAI,EAAER,MAAMS,cAAc,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,cAAc,EAAER,UAAUQ,cAAc,IAAI,IAAI,EAAER,UAAUI,IAAI,CAACK,QAAQ;AAC1O,GACA,sCAAsC"}

package/lib-commonjs/components/Card/useCard.js

@@ -14,9 +14,9 @@ const _useCardSelectable = require("./useCardSelectable");
 const _cardContext = require("./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.
@@ -25,21 +25,21 @@ const focusMap = {
  * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- */ const useCardInteractive = ({ focusMode ="off" , ...props })=>{
+ */ const useCardInteractive = ({ focusMode ='off' , ...props })=>{
     const interactive = [
-        "onClick",
-        "onDoubleClick",
-        "onMouseUp",
-        "onMouseDown",
-        "onPointerUp",
-        "onPointerDown",
-        "onTouchStart",
-        "onTouchEnd",
-        "onDragStart",
-        "onDragEnd"
+        'onClick',
+        'onDoubleClick',
+        'onMouseUp',
+        'onMouseDown',
+        'onPointerUp',
+        'onPointerDown',
+        'onTouchStart',
+        'onTouchEnd',
+        'onDragStart',
+        'onDragEnd'
     ].some((prop)=>props[prop]);
     const groupperAttrs = (0, _reactTabster.useFocusableGroup)({
-        tabBehavior: focusMap[interactive ? "no-tab" : focusMode]
+        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
     });
     const interactiveFocusAttributes = {
         ...groupperAttrs,
@@ -47,11 +47,11 @@ const focusMap = {
     };
     return {
         interactive,
-        focusAttributes: focusMode === "off" ? null : interactiveFocusAttributes
+        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
     };
 };
 const useCard_unstable = (props, ref)=>{
-    const { appearance ="filled" , orientation ="vertical" , size ="medium"  } = props;
+    const { appearance ='filled' , orientation ='vertical' , size ='medium'  } = props;
     const [referenceId, setReferenceId] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
     const [referenceLabel, setReferenceLabel] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
     const cardBaseRef = (0, _reactTabster.useFocusWithin)();
@@ -76,13 +76,13 @@ const useCard_unstable = (props, ref)=>{
             setReferenceLabel
         },
         components: {
-            root: "div",
-            floatingAction: "div",
-            checkbox: "input"
+            root: 'div',
+            floatingAction: 'div',
+            checkbox: 'input'
         },
-        root: (0, _reactUtilities.getNativeElementProps)("div", {
+        root: (0, _reactUtilities.getNativeElementProps)('div', {
             ref: cardRef,
-            role: "group",
+            role: 'group',
             ...focusAttributes,
             ...props,
             ...selectableCardProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/useCard.js"],"sourcesContent":["import * as React from \"react\";\nimport { getNativeElementProps, useMergedRefs } from \"@fluentui/react-utilities\";\nimport { useFocusableGroup, useFocusWithin } from \"@fluentui/react-tabster\";\nimport { useCardSelectable } from \"./useCardSelectable\";\nimport { cardContextDefaultValue } from \"./CardContext\";\nconst focusMap = {\n  off: undefined,\n  \"no-tab\": \"limited-trap-focus\",\n  \"tab-exit\": \"limited\",\n  \"tab-only\": \"unlimited\"\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 = ({\n  focusMode = \"off\",\n  ...props\n}) => {\n  const interactive = [\"onClick\", \"onDoubleClick\", \"onMouseUp\", \"onMouseDown\", \"onPointerUp\", \"onPointerDown\", \"onTouchStart\", \"onTouchEnd\", \"onDragStart\", \"onDragEnd\"].some(prop => props[prop]);\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? \"no-tab\" : focusMode]\n  });\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0\n  };\n  return {\n    interactive,\n    focusAttributes: focusMode === \"off\" ? null : interactiveFocusAttributes\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, ref) => {\n  const {\n    appearance = \"filled\",\n    orientation = \"vertical\",\n    size = \"medium\"\n  } = props;\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const cardBaseRef = useFocusWithin();\n  const {\n    selectable,\n    selected,\n    selectableCardProps,\n    selectFocused,\n    checkboxSlot,\n    floatingActionSlot\n  } = useCardSelectable(props, {\n    referenceId,\n    referenceLabel\n  }, cardBaseRef);\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n  const {\n    interactive,\n    focusAttributes\n  } = useCardInteractive(props);\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    components: {\n      root: \"div\",\n      floatingAction: \"div\",\n      checkbox: \"input\"\n    },\n    root: getNativeElementProps(\"div\", {\n      ref: cardRef,\n      role: \"group\",\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps\n    }),\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot\n  };\n};\n//# sourceMappingURL=useCard.js.map"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BA6CaA;;aAAAA;;;6DA7CU;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AACA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAC1BC,WAAY,MAAK,EACjB,GAAGC,OACJ,GAAK;IACJ,MAAMC,cAAc;QAAC;QAAW;QAAiB;QAAa;QAAe;QAAe;QAAiB;QAAgB;QAAc;QAAe;KAAY,CAACC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAC/L,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACtCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IACA,MAAMQ,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IACA,OAAO;QACLP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC1E;AACF;AAUO,MAAMb,mBAAmB,CAACM,OAAOU,MAAQ;IAC9C,MAAM,EACJC,YAAa,SAAQ,EACrBC,aAAc,WAAU,EACxBC,MAAO,SAAQ,EAChB,GAAGb;IACJ,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EACJC,WAAU,EACVC,SAAQ,EACRC,oBAAmB,EACnBC,cAAa,EACbC,aAAY,EACZC,mBAAkB,EACnB,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC3Bc;QACAM;IACF,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EACJT,YAAW,EACXQ,gBAAe,EAChB,GAAGX,mBAAmBE;IACvB,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QACAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YACjC3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB;QACAS,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,GACA,mCAAmC"}
+{"version":3,"sources":["../../../lib/components/Card/useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited'\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 = ({\n  focusMode = 'off',\n  ...props\n}) => {\n  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n  });\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0\n  };\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\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, ref) => {\n  const {\n    appearance = 'filled',\n    orientation = 'vertical',\n    size = 'medium'\n  } = props;\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const cardBaseRef = useFocusWithin();\n  const {\n    selectable,\n    selected,\n    selectableCardProps,\n    selectFocused,\n    checkboxSlot,\n    floatingActionSlot\n  } = useCardSelectable(props, {\n    referenceId,\n    referenceLabel\n  }, cardBaseRef);\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n  const {\n    interactive,\n    focusAttributes\n  } = useCardInteractive(props);\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    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input'\n    },\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps\n    }),\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot\n  };\n};\n//# sourceMappingURL=useCard.js.map"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BA6CaA;;aAAAA;;;6DA7CU;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AACA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAC1BC,WAAY,MAAK,EACjB,GAAGC,OACJ,GAAK;IACJ,MAAMC,cAAc;QAAC;QAAW;QAAiB;QAAa;QAAe;QAAe;QAAiB;QAAgB;QAAc;QAAe;KAAY,CAACC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAC/L,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACtCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IACA,MAAMQ,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IACA,OAAO;QACLP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC1E;AACF;AAUO,MAAMb,mBAAmB,CAACM,OAAOU,MAAQ;IAC9C,MAAM,EACJC,YAAa,SAAQ,EACrBC,aAAc,WAAU,EACxBC,MAAO,SAAQ,EAChB,GAAGb;IACJ,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EACJC,WAAU,EACVC,SAAQ,EACRC,oBAAmB,EACnBC,cAAa,EACbC,aAAY,EACZC,mBAAkB,EACnB,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC3Bc;QACAM;IACF,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EACJT,YAAW,EACXQ,gBAAe,EAChB,GAAGX,mBAAmBE;IACvB,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QACAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YACjC3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB;QACAS,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,GACA,mCAAmC"}

package/lib-commonjs/components/Card/useCardSelectable.js

@@ -19,7 +19,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         selected,
         defaultSelected,
         onSelectionChange
-    ].some((prop)=>typeof prop !== "undefined");
+    ].some((prop)=>typeof prop !== 'undefined');
     const [isCardSelected, setIsCardSelected] = _react.useState(false);
     const [isSelectFocused, setIsSelectFocused] = _react.useState(false);
     const shouldRestrictTriggerAction = _react.useCallback((event)=>{
@@ -29,7 +29,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         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,
@@ -67,14 +67,14 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         }
         const selectableCheckboxProps = {};
         if (referenceId) {
-            selectableCheckboxProps["aria-labelledby"] = referenceId;
+            selectableCheckboxProps['aria-labelledby'] = referenceId;
         } else if (referenceLabel) {
-            selectableCheckboxProps["aria-label"] = referenceLabel;
+            selectableCheckboxProps['aria-label'] = referenceLabel;
         }
         return (0, _reactUtilities.resolveShorthand)(checkbox, {
             defaultProps: {
                 ref: checkboxRef,
-                type: "checkbox",
+                type: 'checkbox',
                 checked: isCardSelected,
                 onChange: (event)=>onChangeHandler(event),
                 onFocus: ()=>setIsSelectFocused(true),
@@ -118,7 +118,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         onKeyDown,
         onKeyDownHandler
     ]);
-    _react.useEffect(()=>setIsCardSelected(Boolean(defaultSelected ?? selected)), [
+    _react.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [
         defaultSelected,
         selected,
         setIsCardSelected

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Card/useCardSelectable.js"],"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/**\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 = (props, {\n  referenceLabel,\n  referenceId\n}, cardRef) => {\n  const {\n    checkbox = {},\n    selected,\n    defaultSelected,\n    onSelectionChange,\n    floatingAction,\n    onClick,\n    onKeyDown\n  } = props;\n  const {\n    findAllFocusable\n  } = useFocusFinders();\n  const checkboxRef = React.useRef(null);\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== \"undefined\");\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n  const shouldRestrictTriggerAction = React.useCallback(event => {\n    if (!cardRef.current) {\n      return false;\n    }\n    const focusableElements = findAllFocusable(cardRef.current);\n    const target = event.target;\n    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n    const isCheckboxSlot = checkboxRef?.current === target;\n    return isElementInFocusableGroup && !isCheckboxSlot;\n  }, [cardRef, findAllFocusable]);\n  const onChangeHandler = React.useCallback(event => {\n    if (shouldRestrictTriggerAction(event)) {\n      return;\n    }\n    const newCheckedValue = !isCardSelected;\n    setIsCardSelected(newCheckedValue);\n    if (onSelectionChange) {\n      onSelectionChange(event, {\n        selected: newCheckedValue\n      });\n    }\n  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);\n  const onKeyDownHandler = React.useCallback(event => {\n    if ([Enter].includes(event.key)) {\n      event.preventDefault();\n      onChangeHandler(event);\n    }\n  }, [onChangeHandler]);\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n    const selectableCheckboxProps = {};\n    if (referenceId) {\n      selectableCheckboxProps[\"aria-labelledby\"] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps[\"aria-label\"] = referenceLabel;\n    }\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: \"checkbox\",\n        checked: isCardSelected,\n        onChange: event => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps\n      }\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef\n      }\n    });\n  }, [floatingAction]);\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [defaultSelected, selected, setIsCardSelected]);\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot\n  };\n};\n//# sourceMappingURL=useCardSelectable.js.map"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Card/useCardSelectable.js"],"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/**\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 = (props, {\n  referenceLabel,\n  referenceId\n}, cardRef) => {\n  const {\n    checkbox = {},\n    selected,\n    defaultSelected,\n    onSelectionChange,\n    floatingAction,\n    onClick,\n    onKeyDown\n  } = props;\n  const {\n    findAllFocusable\n  } = useFocusFinders();\n  const checkboxRef = React.useRef(null);\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n  const shouldRestrictTriggerAction = React.useCallback(event => {\n    if (!cardRef.current) {\n      return false;\n    }\n    const focusableElements = findAllFocusable(cardRef.current);\n    const target = event.target;\n    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;\n    return isElementInFocusableGroup && !isCheckboxSlot;\n  }, [cardRef, findAllFocusable]);\n  const onChangeHandler = React.useCallback(event => {\n    if (shouldRestrictTriggerAction(event)) {\n      return;\n    }\n    const newCheckedValue = !isCardSelected;\n    setIsCardSelected(newCheckedValue);\n    if (onSelectionChange) {\n      onSelectionChange(event, {\n        selected: newCheckedValue\n      });\n    }\n  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);\n  const onKeyDownHandler = React.useCallback(event => {\n    if ([Enter].includes(event.key)) {\n      event.preventDefault();\n      onChangeHandler(event);\n    }\n  }, [onChangeHandler]);\n  const checkboxSlot = React.useMemo(() => {\n    if (!isSelectable || floatingAction) {\n      return;\n    }\n    const selectableCheckboxProps = {};\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n    return resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: event => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps\n      }\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef\n      }\n    });\n  }, [floatingAction]);\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot\n  };\n};\n//# sourceMappingURL=useCardSelectable.js.map"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}

package/lib-commonjs/components/Card/useCardStyles.js

@@ -16,13 +16,13 @@ _export(exports, {
 const _react = require("@griffel/react");
 const _reactTheme = require("@fluentui/react-theme");
 const cardClassNames = {
-    root: "fui-Card",
-    floatingAction: "fui-Card__floatingAction",
-    checkbox: "fui-Card__checkbox"
+    root: 'fui-Card',
+    floatingAction: 'fui-Card__floatingAction',
+    checkbox: 'fui-Card__checkbox'
 };
 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})`,
@@ -547,7 +547,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f1n6gb5g::after{left:0;}",
         ".f15yvnhg::after{right:0;}",
         ".fo72kxq::after{bottom:0;}",
-        '.f13zj6fq::after{content:"";}',
+        ".f13zj6fq::after{content:\"\";}",
         ".f1nwj1ja::after{pointer-events:none;}",
         ".f8rth92::after{border-top-style:solid;}",
         ".flthirb::after{border-right-style:solid;}",
@@ -567,7 +567,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
         ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
         ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
-        '.f15bsgw9[data-fui-focus-visible]::after{content:"";}',
+        ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
         ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
         ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
         ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
@@ -595,7 +595,7 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}",
         ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}",
         ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}",
-        '.ffht0p2[data-fui-focus-within]:focus-within::after{content:"";}',
+        ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}",
         ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}",
         ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}",
         ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}",
@@ -623,17 +623,17 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
         ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}",
         ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}",
-        '.ffcmwrh>:not([aria-hidden="true"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}',
-        '.f6ppoih>:not([aria-hidden="true"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}',
-        '.f1dc9p14>:not([aria-hidden="true"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}',
-        '.fd933vt>:not([aria-hidden="true"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}',
+        ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}",
+        ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}",
+        ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}",
+        ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}",
         ".f18esqgw>.fui-CardHeader:last-of-type,.f18esqgw>.fui-CardFooter:last-of-type{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}",
         ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
         ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}",
         ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}",
-        '.f19chtn8>:not([aria-hidden="true"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}',
+        ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}",
         ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}",
-        '.fy4glsf>:not([aria-hidden="true"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}',
+        ".fy4glsf>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}",
         ".f1pi9uxy{--fui-Card--size:8px;}",
         ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}",
         ".frsmuga{--fui-Card--size:12px;}",
@@ -719,19 +719,19 @@ 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
     };