@fluentui/react-card 9.0.2 → 9.0.4

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 (171) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +79 -1
  3. package/CHANGELOG.md +28 -2
  4. package/lib/Card.js.map +1 -1
  5. package/lib/CardFooter.js.map +1 -1
  6. package/lib/CardHeader.js.map +1 -1
  7. package/lib/CardPreview.js.map +1 -1
  8. package/lib/components/Card/Card.js.map +1 -1
  9. package/lib/components/Card/Card.types.js +1 -1
  10. package/lib/components/Card/Card.types.js.map +1 -1
  11. package/lib/components/Card/CardContext.js +4 -8
  12. package/lib/components/Card/CardContext.js.map +1 -1
  13. package/lib/components/Card/index.js.map +1 -1
  14. package/lib/components/Card/renderCard.js +2 -8
  15. package/lib/components/Card/renderCard.js.map +1 -1
  16. package/lib/components/Card/useCard.js.map +1 -1
  17. package/lib/components/Card/useCardContextValue.js.map +1 -1
  18. package/lib/components/Card/useCardSelectable.js.map +1 -1
  19. package/lib/components/Card/useCardStyles.js.map +1 -1
  20. package/lib/components/CardFooter/CardFooter.js.map +1 -1
  21. package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
  22. package/lib/components/CardFooter/index.js.map +1 -1
  23. package/lib/components/CardFooter/renderCardFooter.js +1 -5
  24. package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
  25. package/lib/components/CardFooter/useCardFooter.js +1 -0
  26. package/lib/components/CardFooter/useCardFooter.js.map +1 -1
  27. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  28. package/lib/components/CardHeader/CardHeader.js.map +1 -1
  29. package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
  30. package/lib/components/CardHeader/index.js.map +1 -1
  31. package/lib/components/CardHeader/renderCardHeader.js +1 -11
  32. package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
  33. package/lib/components/CardHeader/useCardHeader.js.map +1 -1
  34. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  35. package/lib/components/CardPreview/CardPreview.js.map +1 -1
  36. package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
  37. package/lib/components/CardPreview/index.js.map +1 -1
  38. package/lib/components/CardPreview/renderCardPreview.js +1 -5
  39. package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
  40. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  41. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  42. package/lib/index.js.map +1 -1
  43. package/lib-commonjs/Card.js +5 -4
  44. package/lib-commonjs/Card.js.map +1 -1
  45. package/lib-commonjs/CardFooter.js +5 -4
  46. package/lib-commonjs/CardFooter.js.map +1 -1
  47. package/lib-commonjs/CardHeader.js +5 -4
  48. package/lib-commonjs/CardHeader.js.map +1 -1
  49. package/lib-commonjs/CardPreview.js +5 -4
  50. package/lib-commonjs/CardPreview.js.map +1 -1
  51. package/lib-commonjs/components/Card/Card.js +18 -17
  52. package/lib-commonjs/components/Card/Card.js.map +1 -1
  53. package/lib-commonjs/components/Card/Card.types.js +5 -2
  54. package/lib-commonjs/components/Card/Card.types.js.map +1 -1
  55. package/lib-commonjs/components/Card/CardContext.js +27 -30
  56. package/lib-commonjs/components/Card/CardContext.js.map +1 -1
  57. package/lib-commonjs/components/Card/index.js +10 -9
  58. package/lib-commonjs/components/Card/index.js.map +1 -1
  59. package/lib-commonjs/components/Card/renderCard.js +16 -25
  60. package/lib-commonjs/components/Card/renderCard.js.map +1 -1
  61. package/lib-commonjs/components/Card/useCard.js +81 -94
  62. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  63. package/lib-commonjs/components/Card/useCardContextValue.js +11 -11
  64. package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -1
  65. package/lib-commonjs/components/Card/useCardSelectable.js +130 -117
  66. package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
  67. package/lib-commonjs/components/Card/useCardStyles.js +738 -336
  68. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  69. package/lib-commonjs/components/CardFooter/CardFooter.js +16 -15
  70. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
  71. package/lib-commonjs/components/CardFooter/CardFooter.types.js +3 -2
  72. package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
  73. package/lib-commonjs/components/CardFooter/index.js +9 -8
  74. package/lib-commonjs/components/CardFooter/index.js.map +1 -1
  75. package/lib-commonjs/components/CardFooter/renderCardFooter.js +13 -20
  76. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
  77. package/lib-commonjs/components/CardFooter/useCardFooter.js +23 -30
  78. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
  79. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +45 -33
  80. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  81. package/lib-commonjs/components/CardHeader/CardHeader.js +16 -15
  82. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
  83. package/lib-commonjs/components/CardHeader/CardHeader.types.js +3 -2
  84. package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
  85. package/lib-commonjs/components/CardHeader/index.js +9 -8
  86. package/lib-commonjs/components/CardHeader/index.js.map +1 -1
  87. package/lib-commonjs/components/CardHeader/renderCardHeader.js +13 -26
  88. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
  89. package/lib-commonjs/components/CardHeader/useCardHeader.js +50 -64
  90. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
  91. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +88 -67
  92. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  93. package/lib-commonjs/components/CardPreview/CardPreview.js +16 -15
  94. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
  95. package/lib-commonjs/components/CardPreview/CardPreview.types.js +3 -2
  96. package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
  97. package/lib-commonjs/components/CardPreview/index.js +9 -8
  98. package/lib-commonjs/components/CardPreview/index.js.map +1 -1
  99. package/lib-commonjs/components/CardPreview/renderCardPreview.js +13 -20
  100. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
  101. package/lib-commonjs/components/CardPreview/useCardPreview.js +51 -60
  102. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  103. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +53 -37
  104. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  105. package/lib-commonjs/index.js +40 -153
  106. package/lib-commonjs/index.js.map +1 -1
  107. package/package.json +10 -9
  108. package/lib-amd/Card.js +0 -6
  109. package/lib-amd/Card.js.map +0 -1
  110. package/lib-amd/CardFooter.js +0 -6
  111. package/lib-amd/CardFooter.js.map +0 -1
  112. package/lib-amd/CardHeader.js +0 -6
  113. package/lib-amd/CardHeader.js.map +0 -1
  114. package/lib-amd/CardPreview.js +0 -6
  115. package/lib-amd/CardPreview.js.map +0 -1
  116. package/lib-amd/components/Card/Card.js +0 -16
  117. package/lib-amd/components/Card/Card.js.map +0 -1
  118. package/lib-amd/components/Card/Card.types.js +0 -5
  119. package/lib-amd/components/Card/Card.types.js.map +0 -1
  120. package/lib-amd/components/Card/CardContext.js +0 -31
  121. package/lib-amd/components/Card/CardContext.js.map +0 -1
  122. package/lib-amd/components/Card/index.js +0 -11
  123. package/lib-amd/components/Card/index.js.map +0 -1
  124. package/lib-amd/components/Card/renderCard.js +0 -18
  125. package/lib-amd/components/Card/renderCard.js.map +0 -1
  126. package/lib-amd/components/Card/useCard.js +0 -85
  127. package/lib-amd/components/Card/useCard.js.map +0 -1
  128. package/lib-amd/components/Card/useCardContextValue.js +0 -11
  129. package/lib-amd/components/Card/useCardContextValue.js.map +0 -1
  130. package/lib-amd/components/Card/useCardSelectable.js +0 -97
  131. package/lib-amd/components/Card/useCardSelectable.js.map +0 -1
  132. package/lib-amd/components/Card/useCardStyles.js +0 -253
  133. package/lib-amd/components/Card/useCardStyles.js.map +0 -1
  134. package/lib-amd/components/CardFooter/CardFooter.js +0 -15
  135. package/lib-amd/components/CardFooter/CardFooter.js.map +0 -1
  136. package/lib-amd/components/CardFooter/CardFooter.types.js +0 -5
  137. package/lib-amd/components/CardFooter/CardFooter.types.js.map +0 -1
  138. package/lib-amd/components/CardFooter/index.js +0 -10
  139. package/lib-amd/components/CardFooter/index.js.map +0 -1
  140. package/lib-amd/components/CardFooter/renderCardFooter.js +0 -16
  141. package/lib-amd/components/CardFooter/renderCardFooter.js.map +0 -1
  142. package/lib-amd/components/CardFooter/useCardFooter.js +0 -27
  143. package/lib-amd/components/CardFooter/useCardFooter.js.map +0 -1
  144. package/lib-amd/components/CardFooter/useCardFooterStyles.js +0 -31
  145. package/lib-amd/components/CardFooter/useCardFooterStyles.js.map +0 -1
  146. package/lib-amd/components/CardHeader/CardHeader.js +0 -15
  147. package/lib-amd/components/CardHeader/CardHeader.js.map +0 -1
  148. package/lib-amd/components/CardHeader/CardHeader.types.js +0 -5
  149. package/lib-amd/components/CardHeader/CardHeader.types.js.map +0 -1
  150. package/lib-amd/components/CardHeader/index.js +0 -10
  151. package/lib-amd/components/CardHeader/index.js.map +0 -1
  152. package/lib-amd/components/CardHeader/renderCardHeader.js +0 -18
  153. package/lib-amd/components/CardHeader/renderCardHeader.js.map +0 -1
  154. package/lib-amd/components/CardHeader/useCardHeader.js +0 -48
  155. package/lib-amd/components/CardHeader/useCardHeader.js.map +0 -1
  156. package/lib-amd/components/CardHeader/useCardHeaderStyles.js +0 -72
  157. package/lib-amd/components/CardHeader/useCardHeaderStyles.js.map +0 -1
  158. package/lib-amd/components/CardPreview/CardPreview.js +0 -15
  159. package/lib-amd/components/CardPreview/CardPreview.js.map +0 -1
  160. package/lib-amd/components/CardPreview/CardPreview.types.js +0 -5
  161. package/lib-amd/components/CardPreview/CardPreview.types.js.map +0 -1
  162. package/lib-amd/components/CardPreview/index.js +0 -10
  163. package/lib-amd/components/CardPreview/index.js.map +0 -1
  164. package/lib-amd/components/CardPreview/renderCardPreview.js +0 -16
  165. package/lib-amd/components/CardPreview/renderCardPreview.js.map +0 -1
  166. package/lib-amd/components/CardPreview/useCardPreview.js +0 -50
  167. package/lib-amd/components/CardPreview/useCardPreview.js.map +0 -1
  168. package/lib-amd/components/CardPreview/useCardPreviewStyles.js +0 -44
  169. package/lib-amd/components/CardPreview/useCardPreviewStyles.js.map +0 -1
  170. package/lib-amd/index.js +0 -30
  171. package/lib-amd/index.js.map +0 -1
@@ -1,29 +1,20 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "renderCard_unstable", {
6
+ enumerable: true,
7
+ get: ()=>renderCard_unstable
5
8
  });
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");
10
- /**
11
- * Render the final JSX of Card.
12
- */
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));
27
- };
28
- exports.renderCard_unstable = renderCard_unstable;
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _cardContext = require("./CardContext");
13
+ const renderCard_unstable = (state, cardContextValue)=>{
14
+ const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
15
+ return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(_cardContext.CardProvider, {
16
+ value: cardContextValue
17
+ }, slots.checkbox ? /*#__PURE__*/ _react.createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ _react.createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));
18
+ }; //# sourceMappingURL=renderCard.js.map
19
+
29
20
  //# sourceMappingURL=renderCard.js.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"sources":["../../../lib/components/Card/renderCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state, cardContextValue) => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(CardProvider, {\n value: cardContextValue\n }, slots.checkbox ? /*#__PURE__*/React.createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/React.createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n//# sourceMappingURL=renderCard.js.map"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlots","React","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;6BACI;AAItB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAqB;IAC9D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACE,yBAAY,EAAE;QACjHC,OAAOR;IACT,GAAGC,MAAMQ,QAAQ,GAAG,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,QAAQ,EAAEP,UAAUO,QAAQ,IAAI,IAAI,EAAER,MAAMS,cAAc,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,cAAc,EAAER,UAAUQ,cAAc,IAAI,IAAI,EAAER,UAAUI,IAAI,CAACK,QAAQ;AAC1O,GACA,sCAAsC"}
@@ -1,19 +1,22 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useCard_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useCard_unstable
5
8
  });
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");
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _reactTabster = require("@fluentui/react-tabster");
13
+ const _useCardSelectable = require("./useCardSelectable");
14
+ const _cardContext = require("./CardContext");
12
15
  const focusMap = {
13
- off: undefined,
14
- 'no-tab': 'limited-trap-focus',
15
- 'tab-exit': 'limited',
16
- 'tab-only': 'unlimited'
16
+ off: undefined,
17
+ 'no-tab': 'limited-trap-focus',
18
+ 'tab-exit': 'limited',
19
+ 'tab-only': 'unlimited'
17
20
  };
18
21
  /**
19
22
  * Create the state for interactive cards.
@@ -22,87 +25,71 @@ const focusMap = {
22
25
  * and control focus properties based on that.
23
26
  *
24
27
  * @param props - props from this instance of Card
25
- */
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]
33
- });
34
- const interactiveFocusAttributes = {
35
- ...groupperAttrs,
36
- tabIndex: 0
37
- };
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
- },
91
- components: {
92
- root: 'div',
93
- floatingAction: 'div',
94
- checkbox: 'input'
95
- },
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
105
- };
28
+ */ const useCardInteractive = ({ focusMode ='off' , ...props })=>{
29
+ const interactive = [
30
+ 'onClick',
31
+ 'onDoubleClick',
32
+ 'onMouseUp',
33
+ 'onMouseDown',
34
+ 'onPointerUp',
35
+ 'onPointerDown',
36
+ 'onTouchStart',
37
+ 'onTouchEnd',
38
+ 'onDragStart',
39
+ 'onDragEnd'
40
+ ].some((prop)=>props[prop]);
41
+ const groupperAttrs = (0, _reactTabster.useFocusableGroup)({
42
+ tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
43
+ });
44
+ const interactiveFocusAttributes = {
45
+ ...groupperAttrs,
46
+ tabIndex: 0
47
+ };
48
+ return {
49
+ interactive,
50
+ focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
51
+ };
106
52
  };
107
- exports.useCard_unstable = useCard_unstable;
53
+ const useCard_unstable = (props, ref)=>{
54
+ const { appearance ='filled' , orientation ='vertical' , size ='medium' } = props;
55
+ const [referenceId, setReferenceId] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
56
+ const [referenceLabel, setReferenceLabel] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
57
+ const cardBaseRef = (0, _reactTabster.useFocusWithin)();
58
+ const { selectable , selected , selectableCardProps , selectFocused , checkboxSlot , floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
59
+ referenceId,
60
+ referenceLabel
61
+ }, cardBaseRef);
62
+ const cardRef = (0, _reactUtilities.useMergedRefs)(cardBaseRef, ref);
63
+ const { interactive , focusAttributes } = useCardInteractive(props);
64
+ return {
65
+ appearance,
66
+ orientation,
67
+ size,
68
+ interactive,
69
+ selectable,
70
+ selectFocused,
71
+ selected,
72
+ selectableA11yProps: {
73
+ setReferenceId,
74
+ referenceId,
75
+ referenceLabel,
76
+ setReferenceLabel
77
+ },
78
+ components: {
79
+ root: 'div',
80
+ floatingAction: 'div',
81
+ checkbox: 'input'
82
+ },
83
+ root: (0, _reactUtilities.getNativeElementProps)('div', {
84
+ ref: cardRef,
85
+ role: 'group',
86
+ ...focusAttributes,
87
+ ...props,
88
+ ...selectableCardProps
89
+ }),
90
+ floatingAction: floatingActionSlot,
91
+ checkbox: checkboxSlot
92
+ };
93
+ }; //# sourceMappingURL=useCard.js.map
94
+
108
95
  //# sourceMappingURL=useCard.js.map
@@ -1 +1 @@
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":"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"}
1
+ {"version":3,"sources":["../../../lib/components/Card/useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited'\n};\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({\n focusMode = 'off',\n ...props\n}) => {\n const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n });\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0\n };\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\n };\n};\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props, ref) => {\n const {\n appearance = 'filled',\n orientation = 'vertical',\n size = 'medium'\n } = props;\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const cardBaseRef = useFocusWithin();\n const {\n selectable,\n selected,\n selectableCardProps,\n selectFocused,\n checkboxSlot,\n floatingActionSlot\n } = useCardSelectable(props, {\n referenceId,\n referenceLabel\n }, cardBaseRef);\n const cardRef = useMergedRefs(cardBaseRef, ref);\n const {\n interactive,\n focusAttributes\n } = useCardInteractive(props);\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel\n },\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input'\n },\n root: getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps\n }),\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot\n };\n};\n//# sourceMappingURL=useCard.js.map"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BA6CaA;;aAAAA;;;6DA7CU;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AACA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAC1BC,WAAY,MAAK,EACjB,GAAGC,OACJ,GAAK;IACJ,MAAMC,cAAc;QAAC;QAAW;QAAiB;QAAa;QAAe;QAAe;QAAiB;QAAgB;QAAc;QAAe;KAAY,CAACC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAC/L,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACtCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IACA,MAAMQ,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IACA,OAAO;QACLP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC1E;AACF;AAUO,MAAMb,mBAAmB,CAACM,OAAOU,MAAQ;IAC9C,MAAM,EACJC,YAAa,SAAQ,EACrBC,aAAc,WAAU,EACxBC,MAAO,SAAQ,EAChB,GAAGb;IACJ,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EACJC,WAAU,EACVC,SAAQ,EACRC,oBAAmB,EACnBC,cAAa,EACbC,aAAY,EACZC,mBAAkB,EACnB,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC3Bc;QACAM;IACF,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EACJT,YAAW,EACXQ,gBAAe,EAChB,GAAGX,mBAAmBE;IACvB,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QACAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YACjC3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB;QACAS,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,GACA,mCAAmC"}
@@ -1,15 +1,15 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useCardContextValue", {
6
+ enumerable: true,
7
+ get: ()=>useCardContextValue
5
8
  });
6
- exports.useCardContextValue = void 0;
7
- function useCardContextValue({
8
- selectableA11yProps
9
- }) {
10
- return {
11
- selectableA11yProps
12
- };
13
- }
14
- exports.useCardContextValue = useCardContextValue;
9
+ function useCardContextValue({ selectableA11yProps }) {
10
+ return {
11
+ selectableA11yProps
12
+ };
13
+ } //# sourceMappingURL=useCardContextValue.js.map
14
+
15
15
  //# sourceMappingURL=useCardContextValue.js.map
@@ -1 +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"}
1
+ {"version":3,"sources":["../../../lib/components/Card/useCardContextValue.js"],"sourcesContent":["export function useCardContextValue({\n selectableA11yProps\n}) {\n return {\n selectableA11yProps\n };\n}\n//# sourceMappingURL=useCardContextValue.js.map"],"names":["useCardContextValue","selectableA11yProps"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,oBAAoB,EAClCC,oBAAmB,EACpB,EAAE;IACD,OAAO;QACLA;IACF;AACF,EACA,+CAA+C"}
@@ -1,123 +1,136 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useCardSelectable", {
6
+ enumerable: true,
7
+ get: ()=>useCardSelectable
5
8
  });
6
- exports.useCardSelectable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
10
- const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
- /**
12
- * @internal
13
- *
14
- * Create the state related to selectable cards.
15
- *
16
- * This internal hook controls all the logic for selectable cards and is
17
- * intended to be used alongside with useCard_unstable.
18
- *
19
- * @param props - props from this instance of Card
20
- * @param a11yProps - accessibility props shared between elements of the card
21
- * @param ref - reference to the root element of Card
22
- */
23
- const useCardSelectable = (props, {
24
- referenceLabel,
25
- referenceId
26
- }, cardRef) => {
27
- const {
28
- checkbox = {},
29
- selected,
30
- defaultSelected,
31
- onSelectionChange,
32
- floatingAction,
33
- onClick,
34
- onKeyDown
35
- } = props;
36
- const {
37
- findAllFocusable
38
- } = react_tabster_1.useFocusFinders();
39
- const checkboxRef = React.useRef(null);
40
- const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
41
- const [isCardSelected, setIsCardSelected] = React.useState(false);
42
- const [isSelectFocused, setIsSelectFocused] = React.useState(false);
43
- const shouldRestrictTriggerAction = React.useCallback(event => {
44
- if (!cardRef.current) {
45
- return false;
46
- }
47
- const focusableElements = findAllFocusable(cardRef.current);
48
- const target = event.target;
49
- const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
50
- const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
51
- return isElementInFocusableGroup && !isCheckboxSlot;
52
- }, [cardRef, findAllFocusable]);
53
- const onChangeHandler = React.useCallback(event => {
54
- if (shouldRestrictTriggerAction(event)) {
55
- return;
56
- }
57
- const newCheckedValue = !isCardSelected;
58
- setIsCardSelected(newCheckedValue);
59
- if (onSelectionChange) {
60
- onSelectionChange(event, {
61
- selected: newCheckedValue
62
- });
63
- }
64
- }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
65
- const onKeyDownHandler = React.useCallback(event => {
66
- if ([keyboard_keys_1.Enter].includes(event.key)) {
67
- event.preventDefault();
68
- onChangeHandler(event);
69
- }
70
- }, [onChangeHandler]);
71
- const checkboxSlot = React.useMemo(() => {
72
- if (!isSelectable || floatingAction) {
73
- return;
74
- }
75
- const selectableCheckboxProps = {};
76
- if (referenceId) {
77
- selectableCheckboxProps['aria-labelledby'] = referenceId;
78
- } else if (referenceLabel) {
79
- selectableCheckboxProps['aria-label'] = referenceLabel;
80
- }
81
- return react_utilities_1.resolveShorthand(checkbox, {
82
- defaultProps: {
83
- ref: checkboxRef,
84
- type: 'checkbox',
85
- checked: isCardSelected,
86
- onChange: event => onChangeHandler(event),
87
- onFocus: () => setIsSelectFocused(true),
88
- onBlur: () => setIsSelectFocused(false),
89
- ...selectableCheckboxProps
90
- }
91
- });
92
- }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
93
- const floatingActionSlot = React.useMemo(() => {
94
- if (!floatingAction) {
95
- return;
96
- }
97
- return react_utilities_1.resolveShorthand(floatingAction, {
98
- defaultProps: {
99
- ref: checkboxRef
100
- }
101
- });
102
- }, [floatingAction]);
103
- const selectableCardProps = React.useMemo(() => {
104
- if (!isSelectable) {
105
- return null;
106
- }
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _keyboardKeys = require("@fluentui/keyboard-keys");
13
+ const _reactTabster = require("@fluentui/react-tabster");
14
+ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
15
+ const { checkbox ={} , selected , defaultSelected , onSelectionChange , floatingAction , onClick , onKeyDown } = props;
16
+ const { findAllFocusable } = (0, _reactTabster.useFocusFinders)();
17
+ const checkboxRef = _react.useRef(null);
18
+ const isSelectable = [
19
+ selected,
20
+ defaultSelected,
21
+ onSelectionChange
22
+ ].some((prop)=>typeof prop !== 'undefined');
23
+ const [isCardSelected, setIsCardSelected] = _react.useState(false);
24
+ const [isSelectFocused, setIsSelectFocused] = _react.useState(false);
25
+ const shouldRestrictTriggerAction = _react.useCallback((event)=>{
26
+ if (!cardRef.current) {
27
+ return false;
28
+ }
29
+ const focusableElements = findAllFocusable(cardRef.current);
30
+ const target = event.target;
31
+ const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
32
+ const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
33
+ return isElementInFocusableGroup && !isCheckboxSlot;
34
+ }, [
35
+ cardRef,
36
+ findAllFocusable
37
+ ]);
38
+ const onChangeHandler = _react.useCallback((event)=>{
39
+ if (shouldRestrictTriggerAction(event)) {
40
+ return;
41
+ }
42
+ const newCheckedValue = !isCardSelected;
43
+ setIsCardSelected(newCheckedValue);
44
+ if (onSelectionChange) {
45
+ onSelectionChange(event, {
46
+ selected: newCheckedValue
47
+ });
48
+ }
49
+ }, [
50
+ onSelectionChange,
51
+ isCardSelected,
52
+ shouldRestrictTriggerAction
53
+ ]);
54
+ const onKeyDownHandler = _react.useCallback((event)=>{
55
+ if ([
56
+ _keyboardKeys.Enter
57
+ ].includes(event.key)) {
58
+ event.preventDefault();
59
+ onChangeHandler(event);
60
+ }
61
+ }, [
62
+ onChangeHandler
63
+ ]);
64
+ const checkboxSlot = _react.useMemo(()=>{
65
+ if (!isSelectable || floatingAction) {
66
+ return;
67
+ }
68
+ const selectableCheckboxProps = {};
69
+ if (referenceId) {
70
+ selectableCheckboxProps['aria-labelledby'] = referenceId;
71
+ } else if (referenceLabel) {
72
+ selectableCheckboxProps['aria-label'] = referenceLabel;
73
+ }
74
+ return (0, _reactUtilities.resolveShorthand)(checkbox, {
75
+ defaultProps: {
76
+ ref: checkboxRef,
77
+ type: 'checkbox',
78
+ checked: isCardSelected,
79
+ onChange: (event)=>onChangeHandler(event),
80
+ onFocus: ()=>setIsSelectFocused(true),
81
+ onBlur: ()=>setIsSelectFocused(false),
82
+ ...selectableCheckboxProps
83
+ }
84
+ });
85
+ }, [
86
+ checkbox,
87
+ floatingAction,
88
+ isCardSelected,
89
+ isSelectable,
90
+ onChangeHandler,
91
+ referenceId,
92
+ referenceLabel
93
+ ]);
94
+ const floatingActionSlot = _react.useMemo(()=>{
95
+ if (!floatingAction) {
96
+ return;
97
+ }
98
+ return (0, _reactUtilities.resolveShorthand)(floatingAction, {
99
+ defaultProps: {
100
+ ref: checkboxRef
101
+ }
102
+ });
103
+ }, [
104
+ floatingAction
105
+ ]);
106
+ const selectableCardProps = _react.useMemo(()=>{
107
+ if (!isSelectable) {
108
+ return null;
109
+ }
110
+ return {
111
+ onClick: (0, _reactUtilities.mergeCallbacks)(onClick, onChangeHandler),
112
+ onKeyDown: (0, _reactUtilities.mergeCallbacks)(onKeyDown, onKeyDownHandler)
113
+ };
114
+ }, [
115
+ isSelectable,
116
+ onChangeHandler,
117
+ onClick,
118
+ onKeyDown,
119
+ onKeyDownHandler
120
+ ]);
121
+ _react.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [
122
+ defaultSelected,
123
+ selected,
124
+ setIsCardSelected
125
+ ]);
107
126
  return {
108
- onClick: react_utilities_1.mergeCallbacks(onClick, onChangeHandler),
109
- onKeyDown: react_utilities_1.mergeCallbacks(onKeyDown, onKeyDownHandler)
127
+ selected: isCardSelected,
128
+ selectable: isSelectable,
129
+ selectFocused: isSelectFocused,
130
+ selectableCardProps,
131
+ checkboxSlot,
132
+ floatingActionSlot
110
133
  };
111
- }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
112
- React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
113
- return {
114
- selected: isCardSelected,
115
- selectable: isSelectable,
116
- selectFocused: isSelectFocused,
117
- selectableCardProps,
118
- checkboxSlot,
119
- floatingActionSlot
120
- };
121
- };
122
- exports.useCardSelectable = useCardSelectable;
134
+ }; //# sourceMappingURL=useCardSelectable.js.map
135
+
123
136
  //# sourceMappingURL=useCardSelectable.js.map