@fluentui/react-card 9.0.0-beta.33 → 9.0.0-beta.35

package/lib/components/CardPreview/useCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,IAAI,EAAE,gBAAgB,CAAC,IAAD;EAVjB,CAAP;AAYD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AAEA,SAAS,uBAAT,QAAwC,qBAAxC;AACA,SAAS,qBAAT,QAAsC,wBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB,WAAlB;MAA+B,iBAA/B;MAAkD;IAAlD;EADjB,IAEF,uBAAuB,EAF3B;EAGA,MAAM,UAAU,GAAG,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAN,CAAhC;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAc,IAAI,WAAtB,EAAmC;MACjC;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,qBAAqB,CAAC,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;QACA,MAAM,eAAe,GAAG,GAAG,CAAC,YAAJ,CAAiB,kBAAjB,CAAxB;;QAEA,IAAI,eAAJ,EAAqB;UACnB,cAAc,CAAC,eAAD,CAAd;QACD,CAFD,MAEO,IAAI,GAAG,CAAC,GAAR,EAAa;UAClB,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFM,MAEA,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CArBD,EAqBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,EAAgD,WAAhD,EAA6D,cAA7D,CArBH;EAuBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,IAAI,EAAE,gBAAgB,CAAC,IAAD;EAVjB,CAAP;AAYD,CA3CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n  React.useEffect(() => {\n    if (referenceLabel && referenceId) {\n      return;\n    }\n\n    if (previewRef.current && previewRef.current.parentNode) {\n      const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n      if (img) {\n        const ariaLabel = img.getAttribute('aria-label');\n        const ariaDescribedby = img.getAttribute('aria-describedby');\n\n        if (ariaDescribedby) {\n          setReferenceId(ariaDescribedby);\n        } else if (img.alt) {\n          setReferenceLabel(img.alt);\n        } else if (ariaLabel) {\n          setReferenceLabel(ariaLabel);\n        }\n      }\n    }\n  }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: previewRef,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -2,4 +2,5 @@ export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_u
 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/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/index.ts"],"names":[],"mappings":"AAAA,SACE,IADF,EAEE,cAFF,EAGE,WAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CarOnSelectionChangeEvent } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/index.ts"],"names":[],"mappings":"AAAA,SACE,IADF,EAEE,cAFF,EAGE,WAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SAAS,YAAT,EAAuB,uBAAvB,QAAsD,QAAtD","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardOnSelectionChangeEvent } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"sourceRoot":"../src/"}

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

@@ -12,6 +12,8 @@ const useCard_1 = /*#__PURE__*/require("./useCard");
 const renderCard_1 = /*#__PURE__*/require("./renderCard");
 
 const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
+
+const useCardContextValue_1 = /*#__PURE__*/require("./useCardContextValue");
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
  */
@@ -19,8 +21,9 @@ const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
 
 exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCard_1.useCard_unstable(props, ref);
+  const cardContextValue = useCardContextValue_1.useCardContextValue(state);
   useCardStyles_1.useCardStyles_unstable(state);
-  return renderCard_1.renderCard_unstable(state);
+  return renderCard_1.renderCard_unstable(state, cardContextValue);
 });
 exports.Card.displayName = 'Card';
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiC,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;EAEA,eAAA,CAAA,sBAAA,CAAuB,KAAvB;EACA,OAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps, CardRefElement } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<CardRefElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAGA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiC,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;EACA,MAAM,gBAAgB,GAAG,qBAAA,CAAA,mBAAA,CAAoB,KAApB,CAAzB;EAEA,eAAA,CAAA,sBAAA,CAAuB,KAAvB;EACA,OAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,gBAA3B,CAAP;AACD,CANmD,CAAvC;AAQb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCardContext_unstable = exports.CardProvider = exports.cardContextDefaultValue = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const cardContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * @internal
+ */
+
+exports.cardContextDefaultValue = {
+  selectableA11yProps: {
+    referenceId: undefined,
+
+    setReferenceId() {
+      /* Noop */
+    },
+
+    referenceLabel: undefined,
+
+    setReferenceLabel() {
+      /* Noop */
+    }
+
+  }
+};
+/**
+ * @internal
+ */
+
+exports.CardProvider = cardContext.Provider;
+/**
+ * @internal
+ */
+
+const useCardContext_unstable = () => {
+  var _a;
+
+  return (_a = React.useContext(cardContext)) !== null && _a !== void 0 ? _a : exports.cardContextDefaultValue;
+};
+
+exports.useCardContext_unstable = useCardContext_unstable;
+//# sourceMappingURL=CardContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/CardContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAM,WAAW,gBAAG,KAAK,CAAC,aAAN,CAAkD,SAAlD,CAApB;AAEA;;AAEG;;AACU,OAAA,CAAA,uBAAA,GAA4C;EACvD,mBAAmB,EAAE;IACnB,WAAW,EAAE,SADM;;IAEnB,cAAc,GAAA;MACZ;IACD,CAJkB;;IAKnB,cAAc,EAAE,SALG;;IAMnB,iBAAiB,GAAA;MACf;IACD;;EARkB;AADkC,CAA5C;AAab;;AAEG;;AACU,OAAA,CAAA,YAAA,GAAe,WAAW,CAAC,QAA3B;AAEb;;AAEG;;AACI,MAAM,uBAAuB,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,WAAjB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,EAA7B,GAAiC,OAAA,CAAA,uBAAjC;AAAwD,CAA9F;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"sourceRoot":"../src/"}

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

@@ -10,6 +10,8 @@ tslib_1.__exportStar(require("./Card"), exports);
 
 tslib_1.__exportStar(require("./Card.types"), exports);
 
+tslib_1.__exportStar(require("./CardContext"), exports);
+
 tslib_1.__exportStar(require("./renderCard"), exports);
 
 tslib_1.__exportStar(require("./useCard"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"],"sourceRoot":"../src/"}

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

@@ -8,19 +8,24 @@ exports.renderCard_unstable = void 0;
 const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const CardContext_1 = /*#__PURE__*/require("./CardContext");
 /**
  * Render the final JSX of Card.
  */
 
 
-const renderCard_unstable = state => {
+const renderCard_unstable = (state, cardContextValue) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
-  }, slotProps.root.children, state.hasSelectSlot && slots.select ? React.createElement(slots.select, { ...slotProps.select
-  }) : null);
+  }, React.createElement(CardContext_1.CardProvider, {
+    value: cardContextValue
+  }, slots.checkbox ? React.createElement(slots.checkbox, { ...slotProps.checkbox
+  }) : null, slots.floatingAction ? React.createElement(slots.floatingAction, { ...slotProps.floatingAction
+  }) : null, slotProps.root.children));
 };
 
 exports.renderCard_unstable = renderCard_unstable;

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAAqB;EACtD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,aAAN,IAAuB,KAAK,CAAC,MAA7B,GAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAAtC,GAA+E,IAFlF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {state.hasSelectSlot && slots.select ? <slots.select {...slotProps.select} /> : null}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,gBAAnB,KAAyD;EAC1F,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa;IAAC,KAAK,EAAE;EAAR,CAAb,EACG,KAAK,CAAC,QAAN,GAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAAjB,GAA8D,IADjE,EAEG,KAAK,CAAC,cAAN,GAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAAvB,GAAgF,IAFnF,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,CADF,CADF;AASD,CAZM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlots<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAEA,MAAM,QAAQ,GAAG;EACf,GAAG,EAAE,SADU;EAEf,UAAU,oBAFK;EAGf,YAAY,SAHG;EAIf,YAAY;AAJG,CAAjB;;AAWA,MAAM,sBAAsB,GAAG,CAAC;EAAE,SAAS,GAAG;AAAd,CAAD,EAAmC;EAAE;AAAF,CAAnC,KAAqF;EAClH,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAH,GAAc,SAAnD;EAEA,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;IACtC,WAAW,EAAE,QAAQ,CAAC,iBAAD;EADiB,CAAlB,CAAtB;;EAIA,IAAI,iBAAiB,KAAK,KAA1B,EAAiC;IAC/B,OAAO,IAAP;EACD;;EAED,OAAO,EACL,GAAG,aADE;IAEL,QAAQ,EAAE;EAFL,CAAP;AAID,CAfD;AAiBA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAAgE;EAC9F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,WAAW,GAAG,UAAvC;IAAmD,IAAI,GAAG,QAA1D;IAAoE,EAAE,GAAG;EAAzE,IAAmF,KAAzF;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAhB;EAEA,MAAM;IAAE,UAAF;IAAc,aAAd;IAA6B,QAA7B;IAAuC,cAAvC;IAAuD;EAAvD,IAA2E,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,OAAzB,CAAjF;EAEA,MAAM,WAAW,GAAG,OAAO,CACzB,UAAU,IACR,CAAC,GAAD,EAAM,QAAN,EAAgB,QAAhB,CAAyB,EAAzB,CADF,IAEE,KAAK,CAAC,OAFR,IAGE,KAAK,CAAC,aAHR,IAIE,KAAK,CAAC,SAJR,IAKE,KAAK,CAAC,WALR,IAME,KAAK,CAAC,WANR,IAOE,KAAK,CAAC,aAPR,IAQE,KAAK,CAAC,YARR,IASE,KAAK,CAAC,UAViB,CAA3B;EAaA,MAAM,eAAe,GAAG,sBAAsB,CAAC,KAAD,EAAQ;IAAE;EAAF,CAAR,CAA9C;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAIL,WAJK;IAKL,UALK;IAML,aANK;IAOL,QAPK;IASL,UAAU,EAAE;MACV,IAAI,EAAE,EADI;MAEV,MAAM,EAAE;IAFE,CATP;IAcL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;MAC9B,GAAG,EAAE,GAAG,IAAI,OADkB;MAE9B,IAAI,EAAE,OAFwB;MAG9B,GAAG,eAH2B;MAI9B,GAAG,KAJ2B;MAK9B,GAAG;IAL2B,CAA1B,CAdD;IAsBL,MAAM,EAAE;EAtBH,CAAP;AAwBD,CA7CM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardRefElement, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\ntype UseCardFocusAttributesOptions = {\n  interactive: boolean;\n};\n\nconst useCardFocusAttributes = ({ focusMode = 'off' }: CardProps, { interactive }: UseCardFocusAttributesOptions) => {\n  const internalFocusMode = interactive ? 'no-tab' : focusMode;\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[internalFocusMode],\n  });\n\n  if (internalFocusMode === 'off') {\n    return null;\n  }\n\n  return {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<CardRefElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', as = 'div' } = props;\n  const cardRef = React.useRef<CardRefElement>(null);\n\n  const { selectable, hasSelectSlot, selected, selectableSlot, selectableProps } = useCardSelectable(props, cardRef);\n\n  const interactive = Boolean(\n    selectable ||\n      ['a', 'button'].includes(as) ||\n      props.onClick ||\n      props.onDoubleClick ||\n      props.onMouseUp ||\n      props.onMouseDown ||\n      props.onPointerUp ||\n      props.onPointerDown ||\n      props.onTouchStart ||\n      props.onTouchEnd,\n  );\n\n  const focusAttributes = useCardFocusAttributes(props, { interactive });\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    hasSelectSlot,\n    selected,\n\n    components: {\n      root: as,\n      select: 'div',\n    },\n\n    root: getNativeElementProps(as, {\n      ref: ref || cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableProps,\n    }),\n\n    select: selectableSlot,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n  const interactive = ([\n    'onClick',\n    'onDoubleClick',\n    'onMouseUp',\n    'onMouseDown',\n    'onPointerUp',\n    'onPointerDown',\n    'onTouchStart',\n    'onTouchEnd',\n    'onDragStart',\n    'onDragEnd',\n  ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n    props,\n    { referenceId, referenceLabel },\n    cardBaseRef,\n  );\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: resolveShorthand(floatingAction),\n    checkbox: checkboxSlot,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCardContextValue = void 0;
+
+function useCardContextValue({
+  selectableA11yProps
+}) {
+  return {
+    selectableA11yProps
+  };
+}
+
+exports.useCardContextValue = useCardContextValue;
+//# sourceMappingURL=useCardContextValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,mBAAhB,CAAoC;EAAE;AAAF,CAApC,EAAsE;EACpE,OAAO;IAAE;EAAF,CAAP;AACD;;AAFD,OAAA,CAAA,mBAAA,GAAA,mBAAA","sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"],"sourceRoot":"../src/"}

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

@@ -12,33 +12,50 @@ const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+/**
+ * @internal
+ *
+ * Create the state related to selectable cards.
+ *
+ * This internal hook controls all the logic for selectable cards and is
+ * intended to be used alongside with useCard_unstable.
+ *
+ * @param props - props from this instance of Card
+ * @param a11yProps - accessibility props shared between elements of the card
+ * @param ref - reference to the root element of Card
+ */
 
-const useCardSelectable = (props, cardRef) => {
+
+const useCardSelectable = (props, {
+  referenceLabel,
+  referenceId
+}, cardRef) => {
   const {
-    select,
+    checkbox = {},
     selected,
     defaultSelected,
-    onSelectionChange
+    onSelectionChange,
+    floatingAction,
+    onClick,
+    onKeyDown
   } = props;
   const {
     findAllFocusable
   } = react_tabster_1.useFocusFinders();
-  const selectableRef = React.useRef(null);
-  const isSelectable = [selected, defaultSelected, onSelectionChange, select].some(bool => typeof bool !== 'undefined');
-  const hasSelectSlot = Boolean(select);
+  const checkboxRef = React.useRef(null);
+  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 => {
-    var _a;
-
     if (!cardRef.current) {
       return false;
     }
 
     const focusableElements = findAllFocusable(cardRef.current);
     const target = event.target;
-    const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));
-    const isTargetInSelectableSlot = (_a = selectableRef === null || selectableRef === void 0 ? void 0 : selectableRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
-    return isTargetInFocusableGroup && !isTargetInSelectableSlot;
+    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
+    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
+    return isElementInFocusableGroup && !isCheckboxSlot;
   }, [cardRef, findAllFocusable]);
   const onChangeHandler = React.useCallback(event => {
     if (shouldRestrictTriggerAction(event)) {
@@ -60,42 +77,48 @@ const useCardSelectable = (props, cardRef) => {
       onChangeHandler(event);
     }
   }, [onChangeHandler]);
-  const selectableProps = React.useMemo(() => {
-    if (!isSelectable) {
-      return null;
+  const checkboxSlot = React.useMemo(() => {
+    if (!isSelectable || !!floatingAction) {
+      return;
     }
 
-    const selectableEvents = {
-      onClick: onChangeHandler,
-      onKeyDown: onKeyDownHandler
-    };
+    const selectableCheckboxProps = {};
 
-    if (!hasSelectSlot) {
-      return { ...selectableEvents,
-        'aria-checked': isCardSelected
-      };
+    if (referenceId) {
+      selectableCheckboxProps['aria-labelledby'] = referenceId;
+    } else if (referenceLabel) {
+      selectableCheckboxProps['aria-label'] = referenceLabel;
     }
 
-    return selectableEvents;
-  }, [hasSelectSlot, isCardSelected, isSelectable, onChangeHandler, onKeyDownHandler]);
-  const selectableSlot = React.useMemo(() => {
-    if (!hasSelectSlot) {
-      return undefined;
-    }
-
-    return react_utilities_1.resolveShorthand(select, {
+    return react_utilities_1.resolveShorthand(checkbox, {
       defaultProps: {
-        ref: selectableRef
+        ref: checkboxRef,
+        type: 'checkbox',
+        checked: isCardSelected,
+        onChange: event => onChangeHandler(event),
+        onFocus: () => setIsSelectFocused(true),
+        onBlur: () => setIsSelectFocused(false),
+        ...selectableCheckboxProps
       }
     });
-  }, [hasSelectSlot, select]);
+  }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);
+  const selectableCardProps = React.useMemo(() => {
+    if (!isSelectable) {
+      return null;
+    }
+
+    return {
+      onClick: react_utilities_1.mergeCallbacks(onClick, onChangeHandler),
+      onKeyDown: react_utilities_1.mergeCallbacks(onKeyDown, onKeyDownHandler)
+    };
+  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
   React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
   return {
     selected: isCardSelected,
     selectable: isSelectable,
-    hasSelectSlot,
-    selectableProps,
-    selectableSlot
+    selectFocused: isSelectFocused,
+    selectableCardProps,
+    checkboxSlot
   };
 };
 

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

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