@fluentui/react-card 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (191) hide show
  1. package/CHANGELOG.json +2063 -22
  2. package/CHANGELOG.md +627 -42
  3. package/README.md +68 -4
  4. package/dist/index.d.ts +389 -0
  5. package/lib/Card.js.map +1 -1
  6. package/lib/CardFooter.js.map +1 -1
  7. package/lib/CardHeader.js.map +1 -1
  8. package/lib/CardPreview.js.map +1 -1
  9. package/lib/components/Card/Card.js +10 -9
  10. package/lib/components/Card/Card.js.map +1 -1
  11. package/lib/components/Card/Card.types.js.map +1 -1
  12. package/lib/components/Card/CardContext.js +29 -0
  13. package/lib/components/Card/CardContext.js.map +1 -0
  14. package/lib/components/Card/index.js +1 -0
  15. package/lib/components/Card/index.js.map +1 -1
  16. package/lib/components/Card/renderCard.js +16 -9
  17. package/lib/components/Card/renderCard.js.map +1 -1
  18. package/lib/components/Card/useCard.js +89 -16
  19. package/lib/components/Card/useCard.js.map +1 -1
  20. package/lib/components/Card/useCardContextValue.js +8 -0
  21. package/lib/components/Card/useCardContextValue.js.map +1 -0
  22. package/lib/components/Card/useCardSelectable.js +116 -0
  23. package/lib/components/Card/useCardSelectable.js.map +1 -0
  24. package/lib/components/Card/useCardStyles.js +329 -34
  25. package/lib/components/Card/useCardStyles.js.map +1 -1
  26. package/lib/components/CardFooter/CardFooter.js +7 -8
  27. package/lib/components/CardFooter/CardFooter.js.map +1 -1
  28. package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
  29. package/lib/components/CardFooter/index.js.map +1 -1
  30. package/lib/components/CardFooter/renderCardFooter.js +11 -10
  31. package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
  32. package/lib/components/CardFooter/useCardFooter.js +10 -14
  33. package/lib/components/CardFooter/useCardFooter.js.map +1 -1
  34. package/lib/components/CardFooter/useCardFooterStyles.js +20 -20
  35. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  36. package/lib/components/CardHeader/CardHeader.js +7 -8
  37. package/lib/components/CardHeader/CardHeader.js.map +1 -1
  38. package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
  39. package/lib/components/CardHeader/index.js.map +1 -1
  40. package/lib/components/CardHeader/renderCardHeader.js +17 -10
  41. package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
  42. package/lib/components/CardHeader/useCardHeader.js +40 -25
  43. package/lib/components/CardHeader/useCardHeader.js.map +1 -1
  44. package/lib/components/CardHeader/useCardHeaderStyles.js +53 -40
  45. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  46. package/lib/components/CardPreview/CardPreview.js +7 -8
  47. package/lib/components/CardPreview/CardPreview.js.map +1 -1
  48. package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
  49. package/lib/components/CardPreview/index.js.map +1 -1
  50. package/lib/components/CardPreview/renderCardPreview.js +11 -10
  51. package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
  52. package/lib/components/CardPreview/useCardPreview.js +42 -15
  53. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  54. package/lib/components/CardPreview/useCardPreviewStyles.js +24 -28
  55. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  56. package/lib/index.js +5 -4
  57. package/lib/index.js.map +1 -1
  58. package/lib-commonjs/Card.js +1 -3
  59. package/lib-commonjs/Card.js.map +1 -1
  60. package/lib-commonjs/CardFooter.js +1 -3
  61. package/lib-commonjs/CardFooter.js.map +1 -1
  62. package/lib-commonjs/CardHeader.js +1 -3
  63. package/lib-commonjs/CardHeader.js.map +1 -1
  64. package/lib-commonjs/CardPreview.js +1 -3
  65. package/lib-commonjs/CardPreview.js.map +1 -1
  66. package/lib-commonjs/components/Card/Card.js +11 -15
  67. package/lib-commonjs/components/Card/Card.js.map +1 -1
  68. package/lib-commonjs/components/Card/Card.types.js.map +1 -1
  69. package/lib-commonjs/components/Card/CardContext.js +36 -0
  70. package/lib-commonjs/components/Card/CardContext.js.map +1 -0
  71. package/lib-commonjs/components/Card/index.js +2 -7
  72. package/lib-commonjs/components/Card/index.js.map +1 -1
  73. package/lib-commonjs/components/Card/renderCard.js +20 -18
  74. package/lib-commonjs/components/Card/renderCard.js.map +1 -1
  75. package/lib-commonjs/components/Card/useCard.js +91 -23
  76. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  77. package/lib-commonjs/components/Card/useCardContextValue.js +15 -0
  78. package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -0
  79. package/lib-commonjs/components/Card/useCardSelectable.js +123 -0
  80. package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -0
  81. package/lib-commonjs/components/Card/useCardStyles.js +331 -39
  82. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  83. package/lib-commonjs/components/CardFooter/CardFooter.js +8 -14
  84. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
  85. package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
  86. package/lib-commonjs/components/CardFooter/index.js +1 -7
  87. package/lib-commonjs/components/CardFooter/index.js.map +1 -1
  88. package/lib-commonjs/components/CardFooter/renderCardFooter.js +15 -20
  89. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
  90. package/lib-commonjs/components/CardFooter/useCardFooter.js +13 -21
  91. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
  92. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +22 -25
  93. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  94. package/lib-commonjs/components/CardHeader/CardHeader.js +8 -14
  95. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
  96. package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
  97. package/lib-commonjs/components/CardHeader/index.js +1 -7
  98. package/lib-commonjs/components/CardHeader/index.js.map +1 -1
  99. package/lib-commonjs/components/CardHeader/renderCardHeader.js +21 -20
  100. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
  101. package/lib-commonjs/components/CardHeader/useCardHeader.js +43 -33
  102. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
  103. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +55 -45
  104. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  105. package/lib-commonjs/components/CardPreview/CardPreview.js +8 -14
  106. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
  107. package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
  108. package/lib-commonjs/components/CardPreview/index.js +1 -7
  109. package/lib-commonjs/components/CardPreview/index.js.map +1 -1
  110. package/lib-commonjs/components/CardPreview/renderCardPreview.js +15 -20
  111. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
  112. package/lib-commonjs/components/CardPreview/useCardPreview.js +44 -21
  113. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  114. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +26 -33
  115. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  116. package/lib-commonjs/index.js +150 -10
  117. package/lib-commonjs/index.js.map +1 -1
  118. package/package.json +30 -30
  119. package/assets/ai_deck_template.png +0 -0
  120. package/assets/avatar_elvia.svg +0 -9
  121. package/assets/avatar_mauricio.svg +0 -9
  122. package/assets/doc_template.png +0 -0
  123. package/assets/powerpoint_logo.svg +0 -9
  124. package/assets/sales_template.png +0 -0
  125. package/assets/word_logo.svg +0 -9
  126. package/dist/react-card.d.ts +0 -188
  127. package/lib/Card.d.ts +0 -1
  128. package/lib/CardFooter.d.ts +0 -1
  129. package/lib/CardHeader.d.ts +0 -1
  130. package/lib/CardPreview.d.ts +0 -1
  131. package/lib/common/isConformant.d.ts +0 -4
  132. package/lib/common/isConformant.js +0 -11
  133. package/lib/common/isConformant.js.map +0 -1
  134. package/lib/components/Card/Card.d.ts +0 -6
  135. package/lib/components/Card/Card.types.d.ts +0 -13
  136. package/lib/components/Card/index.d.ts +0 -5
  137. package/lib/components/Card/renderCard.d.ts +0 -5
  138. package/lib/components/Card/useCard.d.ts +0 -12
  139. package/lib/components/Card/useCardStyles.d.ts +0 -5
  140. package/lib/components/CardFooter/CardFooter.d.ts +0 -6
  141. package/lib/components/CardFooter/CardFooter.types.d.ts +0 -13
  142. package/lib/components/CardFooter/index.d.ts +0 -5
  143. package/lib/components/CardFooter/renderCardFooter.d.ts +0 -5
  144. package/lib/components/CardFooter/useCardFooter.d.ts +0 -16
  145. package/lib/components/CardFooter/useCardFooterStyles.d.ts +0 -5
  146. package/lib/components/CardHeader/CardHeader.d.ts +0 -6
  147. package/lib/components/CardHeader/CardHeader.types.d.ts +0 -17
  148. package/lib/components/CardHeader/index.d.ts +0 -5
  149. package/lib/components/CardHeader/renderCardHeader.d.ts +0 -5
  150. package/lib/components/CardHeader/useCardHeader.d.ts +0 -13
  151. package/lib/components/CardHeader/useCardHeaderStyles.d.ts +0 -5
  152. package/lib/components/CardPreview/CardPreview.d.ts +0 -6
  153. package/lib/components/CardPreview/CardPreview.types.d.ts +0 -13
  154. package/lib/components/CardPreview/index.d.ts +0 -5
  155. package/lib/components/CardPreview/renderCardPreview.d.ts +0 -5
  156. package/lib/components/CardPreview/useCardPreview.d.ts +0 -16
  157. package/lib/components/CardPreview/useCardPreviewStyles.d.ts +0 -5
  158. package/lib/index.d.ts +0 -4
  159. package/lib/tsdoc-metadata.json +0 -11
  160. package/lib-commonjs/Card.d.ts +0 -1
  161. package/lib-commonjs/CardFooter.d.ts +0 -1
  162. package/lib-commonjs/CardHeader.d.ts +0 -1
  163. package/lib-commonjs/CardPreview.d.ts +0 -1
  164. package/lib-commonjs/common/isConformant.d.ts +0 -4
  165. package/lib-commonjs/common/isConformant.js +0 -22
  166. package/lib-commonjs/common/isConformant.js.map +0 -1
  167. package/lib-commonjs/components/Card/Card.d.ts +0 -6
  168. package/lib-commonjs/components/Card/Card.types.d.ts +0 -13
  169. package/lib-commonjs/components/Card/index.d.ts +0 -5
  170. package/lib-commonjs/components/Card/renderCard.d.ts +0 -5
  171. package/lib-commonjs/components/Card/useCard.d.ts +0 -12
  172. package/lib-commonjs/components/Card/useCardStyles.d.ts +0 -5
  173. package/lib-commonjs/components/CardFooter/CardFooter.d.ts +0 -6
  174. package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts +0 -13
  175. package/lib-commonjs/components/CardFooter/index.d.ts +0 -5
  176. package/lib-commonjs/components/CardFooter/renderCardFooter.d.ts +0 -5
  177. package/lib-commonjs/components/CardFooter/useCardFooter.d.ts +0 -16
  178. package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts +0 -5
  179. package/lib-commonjs/components/CardHeader/CardHeader.d.ts +0 -6
  180. package/lib-commonjs/components/CardHeader/CardHeader.types.d.ts +0 -17
  181. package/lib-commonjs/components/CardHeader/index.d.ts +0 -5
  182. package/lib-commonjs/components/CardHeader/renderCardHeader.d.ts +0 -5
  183. package/lib-commonjs/components/CardHeader/useCardHeader.d.ts +0 -13
  184. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts +0 -5
  185. package/lib-commonjs/components/CardPreview/CardPreview.d.ts +0 -6
  186. package/lib-commonjs/components/CardPreview/CardPreview.types.d.ts +0 -13
  187. package/lib-commonjs/components/CardPreview/index.d.ts +0 -5
  188. package/lib-commonjs/components/CardPreview/renderCardPreview.d.ts +0 -5
  189. package/lib-commonjs/components/CardPreview/useCardPreview.d.ts +0 -16
  190. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts +0 -5
  191. package/lib-commonjs/index.d.ts +0 -4
@@ -1,41 +1,37 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
2
  /**
3
- * Styles for the root slot
3
+ * Static CSS class names used internally for the component slots.
4
4
  */
5
-
6
- var useStyles = /*#__PURE__*/__styles({
7
- "root": {
8
- "qhf8xq": "f10pi13n",
9
- "B6of3ja": "f1hu3pq6",
10
- "t21cq0": ["f8nhgx1", "f16yxz7i"],
11
- "jrapky": "f19f4twv",
12
- "Frg6f3": ["f16yxz7i", "f8nhgx1"],
13
- "Bb0eobv": "floiv14",
14
- "m1g0b5": "f1r7p6p5"
5
+ export const cardPreviewClassNames = {
6
+ root: 'fui-CardPreview',
7
+ logo: 'fui-CardPreview__logo'
8
+ };
9
+ const useStyles = /*#__PURE__*/__styles({
10
+ root: {
11
+ qhf8xq: "f10pi13n",
12
+ pnb5jt: "f1rzl30s",
13
+ Elg2ur: "f1chxnfo",
14
+ B184ckt: "f17xb19f"
15
15
  },
16
- "logo": {
17
- "qhf8xq": "f1euv43f",
18
- "B5kzvoi": "f1gcvs1y",
19
- "oyh7mz": ["f1t6tvco", "ffrfxm3"],
20
- "a9b677": "f1szoe96",
21
- "Bqenvij": "f1d2rq10"
16
+ logo: {
17
+ qhf8xq: "f1euv43f",
18
+ B5kzvoi: "f1gcvs1y",
19
+ oyh7mz: ["f1t6tvco", "ffrfxm3"],
20
+ a9b677: "f1szoe96",
21
+ Bqenvij: "f1d2rq10"
22
22
  }
23
23
  }, {
24
- "d": [".f10pi13n{position:relative;}", ".f1hu3pq6{margin-top:0;}", ".f8nhgx1{margin-right:-12px;}", ".f16yxz7i{margin-left:-12px;}", ".f19f4twv{margin-bottom:0;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
24
+ d: [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
25
25
  });
26
26
  /**
27
- * Apply styling to the CardPreview slots based on the state
27
+ * Apply styling to the CardPreview slots based on the state.
28
28
  */
29
-
30
-
31
- export var useCardPreviewStyles = function (state) {
32
- var styles = useStyles();
33
- state.root.className = mergeClasses('fluentui-react-card-preview', styles.root, state.root.className);
34
-
29
+ export const useCardPreviewStyles_unstable = state => {
30
+ const styles = useStyles();
31
+ state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
35
32
  if (state.logo) {
36
- state.logo.className = mergeClasses(styles.logo, state.logo.className);
33
+ state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
37
34
  }
38
-
39
35
  return state;
40
36
  };
41
37
  //# sourceMappingURL=useCardPreviewStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,6BAAD,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
1
+ {"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","pnb5jt","Elg2ur","B184ckt","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AAGzD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAkBhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAGZ,SAAS,EAAE;EAC1BW,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAElG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACdY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;;EAGpG,OAAOF,KAAK;AACd,CAAC"}
package/lib/index.js CHANGED
@@ -1,5 +1,6 @@
1
- export * from './Card';
2
- export * from './CardFooter';
3
- export * from './CardHeader';
4
- export * from './CardPreview';
1
+ export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
2
+ export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
3
+ export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
4
+ export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
5
+ export { CardProvider, useCardContext_unstable } from './Card';
5
6
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
1
+ {"version":3,"names":["Card","cardClassNames","cardCSSVars","renderCard_unstable","useCardStyles_unstable","useCard_unstable","CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","CardHeader","cardHeaderClassNames","cardHeaderCSSVars","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","CardProvider","useCardContext_unstable"],"sources":["../src/packages/react-components/react-card/src/index.ts"],"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"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,WAAW,EACXC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,QAAQ;AAEf,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAErB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,iBAAiB,EACjBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAErB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAEtB,SAASC,YAAY,EAAEC,uBAAuB,QAAQ,QAAQ"}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- var tslib_1 = /*#__PURE__*/require("tslib");
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
7
  tslib_1.__exportStar(require("./components/Card/index"), exports);
10
8
  //# sourceMappingURL=Card.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Card.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/Card.ts"],"sourcesContent":["export * from './components/Card/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,6BAAAC,OAAA"}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- var tslib_1 = /*#__PURE__*/require("tslib");
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
7
  tslib_1.__exportStar(require("./components/CardFooter/index"), exports);
10
8
  //# sourceMappingURL=CardFooter.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CardFooter.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/CardFooter.ts"],"sourcesContent":["export * from './components/CardFooter/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- var tslib_1 = /*#__PURE__*/require("tslib");
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
7
  tslib_1.__exportStar(require("./components/CardHeader/index"), exports);
10
8
  //# sourceMappingURL=CardHeader.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CardHeader.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/CardHeader.ts"],"sourcesContent":["export * from './components/CardHeader/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- var tslib_1 = /*#__PURE__*/require("tslib");
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
7
  tslib_1.__exportStar(require("./components/CardPreview/index"), exports);
10
8
  //# sourceMappingURL=CardPreview.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CardPreview.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/CardPreview.ts"],"sourcesContent":["export * from './components/CardPreview/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,oCAAAC,OAAA"}
@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Card = void 0;
7
-
8
- var React = /*#__PURE__*/require("react");
9
-
10
- var useCard_1 = /*#__PURE__*/require("./useCard");
11
-
12
- var renderCard_1 = /*#__PURE__*/require("./renderCard");
13
-
14
- var useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
7
+ const React = /*#__PURE__*/require("react");
8
+ const useCard_1 = /*#__PURE__*/require("./useCard");
9
+ const renderCard_1 = /*#__PURE__*/require("./renderCard");
10
+ const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
11
+ const useCardContextValue_1 = /*#__PURE__*/require("./useCardContextValue");
15
12
  /**
16
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
13
+ * A card provides scaffolding for hosting actions and content for a single topic.
17
14
  */
18
-
19
-
20
- exports.Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
- var state = useCard_1.useCard(props, ref);
22
- useCardStyles_1.useCardStyles(state);
23
- return renderCard_1.renderCard(state);
15
+ exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
16
+ const state = useCard_1.useCard_unstable(props, ref);
17
+ const cardContextValue = useCardContextValue_1.useCardContextValue(state);
18
+ useCardStyles_1.useCardStyles_unstable(state);
19
+ return renderCard_1.renderCard_unstable(state, cardContextValue);
24
20
  });
25
21
  exports.Card.displayName = 'Card';
26
22
  //# sourceMappingURL=Card.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,EAAe,GAAf,CAAd;AAEA,EAAA,eAAA,CAAA,aAAA,CAAc,KAAd;AACA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
1
+ {"version":3,"names":["React","require","useCard_1","renderCard_1","useCardStyles_1","useCardContextValue_1","exports","Card","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"sources":["../src/packages/react-components/react-card/src/components/Card/Card.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,SAAA,gBAAAD,OAAA;AACA,MAAAE,YAAA,gBAAAF,OAAA;AACA,MAAAG,eAAA,gBAAAH,OAAA;AAGA,MAAAI,qBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,IAAI,gBAAmCP,KAAK,CAACQ,UAAU,CAAiB,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGT,SAAA,CAAAU,gBAAgB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC1C,MAAMG,gBAAgB,GAAGR,qBAAA,CAAAS,mBAAmB,CAACH,KAAK,CAAC;EAEnDP,eAAA,CAAAW,sBAAsB,CAACJ,KAAK,CAAC;EAC7B,OAAOR,YAAA,CAAAa,mBAAmB,CAACL,KAAK,EAAEE,gBAAgB,CAAC;AACrD,CAAC,CAAC;AAEFP,OAAA,CAAAC,IAAI,CAACU,WAAW,GAAG,MAAM"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
1
+ {"version":3,"names":[],"sources":["../src/packages/react-components/react-card/src/components/Card/Card.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n selectableA11yProps: {\n referenceId?: string;\n setReferenceId: (referenceId: string) => void;\n referenceLabel?: string;\n setReferenceLabel: (referenceLabel: string) => void;\n };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Floating action that can be rendered on the top-right of a card. Often used together with\n * `selected`, `defaultSelected`, and `onSelectionChange` props\n */\n floatingAction?: Slot<'div'>;\n\n /**\n * The internal checkbox element that renders when the card is selectable.\n */\n checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n /**\n * Sets the appearance of the card.\n *\n * `filled`\n * The card will have a shadow, border and background color.\n *\n * `filled-alternative`\n * This appearance is similar to `filled`, but the background color will be a little darker.\n *\n * `outline`\n * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n *\n * `subtle`\n * This appearance is similar to `filled-alternative`, but no border is applied.\n *\n * @default 'filled'\n */\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @default 'off'\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n /**\n * Defines the orientation of the card.\n *\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n\n /**\n * Controls the card's border radius and padding between inner elements.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Defines the controlled selected state of the card.\n *\n * @default false\n */\n selected?: boolean;\n\n /**\n * Defines whether the card is initially in a selected state when rendered.\n *\n * @default false\n */\n defaultSelected?: boolean;\n\n /**\n * Callback to be called when the selected state value changes.\n */\n onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n CardContextValue &\n Required<\n Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n /**\n * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n *\n * @default false\n */\n interactive: boolean;\n\n /**\n * Represents a selectable card.\n *\n * @default false\n */\n selectable: boolean;\n\n /**\n * Defines whether the card is currently selected.\n *\n * @default false\n */\n selected: boolean;\n\n /**\n * Defines whether the card internal checkbox is currently focused.\n *\n * @default false\n */\n selectFocused: boolean;\n }\n >;\n"],"mappings":""}
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useCardContext_unstable = exports.CardProvider = exports.cardContextDefaultValue = void 0;
7
+ const React = /*#__PURE__*/require("react");
8
+ const cardContext = /*#__PURE__*/React.createContext(undefined);
9
+ /**
10
+ * @internal
11
+ */
12
+ exports.cardContextDefaultValue = {
13
+ selectableA11yProps: {
14
+ referenceId: undefined,
15
+ setReferenceId() {
16
+ /* Noop */
17
+ },
18
+ referenceLabel: undefined,
19
+ setReferenceLabel() {
20
+ /* Noop */
21
+ }
22
+ }
23
+ };
24
+ /**
25
+ * @internal
26
+ */
27
+ exports.CardProvider = cardContext.Provider;
28
+ /**
29
+ * @internal
30
+ */
31
+ const useCardContext_unstable = () => {
32
+ var _a;
33
+ return (_a = React.useContext(cardContext)) !== null && _a !== void 0 ? _a : exports.cardContextDefaultValue;
34
+ };
35
+ exports.useCardContext_unstable = useCardContext_unstable;
36
+ //# sourceMappingURL=CardContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","require","cardContext","createContext","undefined","exports","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","_a","useContext"],"sources":["../src/packages/react-components/react-card/src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n /* Noop */\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n /* Noop */\n },\n },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAA+BC,SAAS,CAAC;AAEhF;;;AAGaC,OAAA,CAAAC,uBAAuB,GAAqB;EACvDC,mBAAmB,EAAE;IACnBC,WAAW,EAAEJ,SAAS;IACtBK,cAAcA,CAAA;MACZ;IAAA,CACD;IACDC,cAAc,EAAEN,SAAS;IACzBO,iBAAiBA,CAAA;MACf;IAAA;;CAGL;AAED;;;AAGaN,OAAA,CAAAO,YAAY,GAAGV,WAAW,CAACW,QAAQ;AAEhD;;;AAGO,MAAMC,uBAAuB,GAAGA,CAAA,KAAK;EAAA,IAAAC,EAAA;EAAC,QAAAA,EAAA,GAAAf,KAAK,CAACgB,UAAU,CAACd,WAAW,CAAC,cAAAa,EAAA,cAAAA,EAAA,GAAIV,OAAA,CAAAC,uBAAuB;AAAA;AAAxFD,OAAA,CAAAS,uBAAuB,GAAAA,uBAAA"}
@@ -3,16 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
- var tslib_1 = /*#__PURE__*/require("tslib");
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
7
  tslib_1.__exportStar(require("./Card"), exports);
10
-
11
8
  tslib_1.__exportStar(require("./Card.types"), exports);
12
-
9
+ tslib_1.__exportStar(require("./CardContext"), exports);
13
10
  tslib_1.__exportStar(require("./renderCard"), exports);
14
-
15
11
  tslib_1.__exportStar(require("./useCard"), exports);
16
-
17
12
  tslib_1.__exportStar(require("./useCardStyles"), exports);
18
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../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","sourceRoot":""}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-card/src/components/Card/index.ts"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,YAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA"}
@@ -3,25 +3,27 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderCard = void 0;
7
-
8
- var tslib_1 = /*#__PURE__*/require("tslib");
9
-
10
- var React = /*#__PURE__*/require("react");
11
-
12
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
6
+ exports.renderCard_unstable = void 0;
7
+ const React = /*#__PURE__*/require("react");
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
+ const CardContext_1 = /*#__PURE__*/require("./CardContext");
13
10
  /**
14
- * Render the final JSX of Card
11
+ * Render the final JSX of Card.
15
12
  */
16
-
17
-
18
- var renderCard = function (state) {
19
- var _a = react_utilities_1.getSlots(state),
20
- slots = _a.slots,
21
- slotProps = _a.slotProps;
22
-
23
- return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
13
+ const renderCard_unstable = (state, cardContextValue) => {
14
+ const {
15
+ slots,
16
+ slotProps
17
+ } = react_utilities_1.getSlots(state);
18
+ return React.createElement(slots.root, {
19
+ ...slotProps.root
20
+ }, React.createElement(CardContext_1.CardProvider, {
21
+ value: cardContextValue
22
+ }, slots.checkbox ? React.createElement(slots.checkbox, {
23
+ ...slotProps.checkbox
24
+ }) : null, slots.floatingAction ? React.createElement(slots.floatingAction, {
25
+ ...slotProps.floatingAction
26
+ }) : null, slotProps.root.children));
24
27
  };
25
-
26
- exports.renderCard = renderCard;
28
+ exports.renderCard_unstable = renderCard_unstable;
27
29
  //# sourceMappingURL=renderCard.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
1
+ {"version":3,"names":["React","require","react_utilities_1","CardContext_1","renderCard_unstable","state","cardContextValue","slots","slotProps","getSlots","createElement","root","CardProvider","value","checkbox","floatingAction","children","exports"],"sources":["../src/packages/react-components/react-card/src/components/Card/renderCard.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,aAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,mBAAmB,GAAGA,CAACC,KAAgB,EAAEC,gBAAkC,KAAI;EAC1F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,iBAAA,CAAAO,QAAQ,CAAYJ,KAAK,CAAC;EAEvD,OACEL,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BX,KAAA,CAAAU,aAAA,CAACP,aAAA,CAAAS,YAAY;IAACC,KAAK,EAAEP;EAAgB,GAClCC,KAAK,CAACO,QAAQ,GAAGd,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,GAAG,IAAI,EAClEP,KAAK,CAACQ,cAAc,GAAGf,KAAA,CAAAU,aAAA,CAACH,KAAK,CAACQ,cAAc;IAAA,GAAKP,SAAS,CAACO;EAAc,EAAI,GAAG,IAAI,EACpFP,SAAS,CAACG,IAAI,CAACK,QAAQ,CACX,CACJ;AAEjB,CAAC;AAZYC,OAAA,CAAAb,mBAAmB,GAAAA,mBAAA"}
@@ -3,38 +3,106 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useCard = void 0;
7
-
8
- var tslib_1 = /*#__PURE__*/require("tslib");
9
-
10
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
- var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
6
+ exports.useCard_unstable = void 0;
7
+ const React = /*#__PURE__*/require("react");
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
10
+ const useCardSelectable_1 = /*#__PURE__*/require("./useCardSelectable");
11
+ const CardContext_1 = /*#__PURE__*/require("./CardContext");
12
+ const focusMap = {
13
+ off: undefined,
14
+ 'no-tab': 'limited-trap-focus',
15
+ 'tab-exit': 'limited',
16
+ 'tab-only': 'unlimited'
17
+ };
13
18
  /**
14
- * Create the state required to render Card.
19
+ * Create the state for interactive cards.
15
20
  *
16
- * The returned state can be modified with hooks such as useCardStyles,
17
- * before being passed to renderCard.
21
+ * This internal hook defines if the card is interactive
22
+ * and control focus properties based on that.
18
23
  *
19
24
  * @param props - props from this instance of Card
20
- * @param ref - reference to root HTMLElement of Card
21
25
  */
22
-
23
-
24
- var useCard = function (props, ref) {
25
- var groupperAttrs = react_tabster_1.useFocusableGroup({
26
- tabBehavior: react_tabster_1.FocusableGroupTabBehavior.LimitedTrapFocus
26
+ const useCardInteractive = ({
27
+ focusMode = 'off',
28
+ ...props
29
+ }) => {
30
+ const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
31
+ const groupperAttrs = react_tabster_1.useFocusableGroup({
32
+ tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
27
33
  });
34
+ const interactiveFocusAttributes = {
35
+ ...groupperAttrs,
36
+ tabIndex: 0
37
+ };
28
38
  return {
39
+ interactive,
40
+ focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
41
+ };
42
+ };
43
+ /**
44
+ * Create the state required to render Card.
45
+ *
46
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
47
+ * before being passed to renderCard_unstable.
48
+ *
49
+ * @param props - props from this instance of Card
50
+ * @param ref - reference to the root element of Card
51
+ */
52
+ const useCard_unstable = (props, ref) => {
53
+ const {
54
+ appearance = 'filled',
55
+ orientation = 'vertical',
56
+ size = 'medium'
57
+ } = props;
58
+ const [referenceId, setReferenceId] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
59
+ const [referenceLabel, setReferenceLabel] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
60
+ const cardBaseRef = react_tabster_1.useFocusWithin();
61
+ const {
62
+ selectable,
63
+ selected,
64
+ selectableCardProps,
65
+ selectFocused,
66
+ checkboxSlot,
67
+ floatingActionSlot
68
+ } = useCardSelectable_1.useCardSelectable(props, {
69
+ referenceId,
70
+ referenceLabel
71
+ }, cardBaseRef);
72
+ const cardRef = react_utilities_1.useMergedRefs(cardBaseRef, ref);
73
+ const {
74
+ interactive,
75
+ focusAttributes
76
+ } = useCardInteractive(props);
77
+ return {
78
+ appearance,
79
+ orientation,
80
+ size,
81
+ interactive,
82
+ selectable,
83
+ selectFocused,
84
+ selected,
85
+ selectableA11yProps: {
86
+ setReferenceId,
87
+ referenceId,
88
+ referenceLabel,
89
+ setReferenceLabel
90
+ },
29
91
  components: {
30
- root: 'div'
92
+ root: 'div',
93
+ floatingAction: 'div',
94
+ checkbox: 'input'
31
95
  },
32
- root: react_utilities_1.getNativeElementProps(props.as || 'div', tslib_1.__assign(tslib_1.__assign({
33
- ref: ref,
34
- role: 'group'
35
- }, groupperAttrs), props))
96
+ root: react_utilities_1.getNativeElementProps('div', {
97
+ ref: cardRef,
98
+ role: 'group',
99
+ ...focusAttributes,
100
+ ...props,
101
+ ...selectableCardProps
102
+ }),
103
+ floatingAction: floatingActionSlot,
104
+ checkbox: checkboxSlot
36
105
  };
37
106
  };
38
-
39
- exports.useCard = useCard;
107
+ exports.useCard_unstable = useCard_unstable;
40
108
  //# sourceMappingURL=useCard.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAA8C;AACnE,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,eAAA,CAAA,yBAAA,CAA0B;AADD,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAuC,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA;AAC3C,MAAA,GAAG,EAAA,GADwC;AAE3C,MAAA,IAAI,EAAE;AAFqC,KAAA,EAGxC,aAHwC,CAAA,EAIxC,KAJwC,CAAvC;AAHD,GAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
1
+ {"version":3,"names":["React","require","react_utilities_1","react_tabster_1","useCardSelectable_1","CardContext_1","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role","exports"],"sources":["../src/packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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 [\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>)[]\n ).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' } = 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, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\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: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,eAAA,gBAAAF,OAAA;AAGA,MAAAG,mBAAA,gBAAAH,OAAA;AACA,MAAAI,aAAA,gBAAAJ,OAAA;AAEA,MAAMK,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GACf,CACE,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CAEd,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3B,MAAMC,aAAa,GAAGZ,eAAA,CAAAa,iBAAiB,CAAC;IACtCC,WAAW,EAAEX,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMQ,0BAA0B,GAAG;IACjC,GAAGH,aAAa;IAChBI,QAAQ,EAAE;GACX;EAED,OAAO;IACLP,WAAW;IACXQ,eAAe,EAAEV,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGQ;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASO,MAAMG,gBAAgB,GAAGA,CAACV,KAAgB,EAAEW,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGd,KAAK;EAElF,MAAM,CAACe,WAAW,EAAEC,cAAc,CAAC,GAAG3B,KAAK,CAAC4B,QAAQ,CAACvB,aAAA,CAAAwB,uBAAuB,CAACC,mBAAmB,CAACJ,WAAW,CAAC;EAC7G,MAAM,CAACK,cAAc,EAAEC,iBAAiB,CAAC,GAAGhC,KAAK,CAAC4B,QAAQ,CAACvB,aAAA,CAAAwB,uBAAuB,CAACC,mBAAmB,CAACJ,WAAW,CAAC;EAEnH,MAAMO,WAAW,GAAG9B,eAAA,CAAA+B,cAAc,EAAkB;EACpD,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,mBAAmB;IAAEC,aAAa;IAAEC,YAAY;IAAEC;EAAkB,CAAE,GAClGpC,mBAAA,CAAAqC,iBAAiB,CAAC9B,KAAK,EAAE;IAAEe,WAAW;IAAEK;EAAc,CAAE,EAAEE,WAAW,CAAC;EAExE,MAAMS,OAAO,GAAGxC,iBAAA,CAAAyC,aAAa,CAACV,WAAW,EAAEX,GAAG,CAAC;EAE/C,MAAM;IAAEV,WAAW;IAAEQ;EAAe,CAAE,GAAGX,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLY,UAAU;IACVC,WAAW;IACXC,IAAI;IACJb,WAAW;IACXuB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRN,mBAAmB,EAAE;MACnBH,cAAc;MACdD,WAAW;MACXK,cAAc;MACdC;KACD;IAEDY,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAE3C,iBAAA,CAAA8C,qBAAqB,CAAC,KAAK,EAAE;MACjC1B,GAAG,EAAEoB,OAAO;MACZO,IAAI,EAAE,OAAO;MACb,GAAG7B,eAAe;MAClB,GAAGT,KAAK;MACR,GAAG0B;KACJ,CAAC;IAEFS,cAAc,EAAEN,kBAAkB;IAClCO,QAAQ,EAAER;GACX;AACH,CAAC;AA9CYW,OAAA,CAAA7B,gBAAgB,GAAAA,gBAAA"}
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useCardContextValue = void 0;
7
+ function useCardContextValue({
8
+ selectableA11yProps
9
+ }) {
10
+ return {
11
+ selectableA11yProps
12
+ };
13
+ }
14
+ exports.useCardContextValue = useCardContextValue;
15
+ //# sourceMappingURL=useCardContextValue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useCardContextValue","selectableA11yProps","exports"],"sources":["../src/packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n return { selectableA11yProps };\n}\n"],"mappings":";;;;;;AAEA,SAAgBA,mBAAmBA,CAAC;EAAEC;AAAmB,CAAa;EACpE,OAAO;IAAEA;EAAmB,CAAE;AAChC;AAFAC,OAAA,CAAAF,mBAAA,GAAAA,mBAAA"}