@fluentui/react-card 0.0.0-nightly-20230223-0420.1 → 0.0.0-nightly-20230223-2115.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 (110) hide show
  1. package/.swcrc +33 -0
  2. package/CHANGELOG.json +15 -15
  3. package/CHANGELOG.md +10 -10
  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 +3 -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 +3 -8
  15. package/lib/components/Card/renderCard.js.map +1 -1
  16. package/lib/components/Card/useCard.js +5 -4
  17. package/lib/components/Card/useCard.js.map +1 -1
  18. package/lib/components/Card/useCardContextValue.js +4 -3
  19. package/lib/components/Card/useCardContextValue.js.map +1 -1
  20. package/lib/components/Card/useCardSelectable.js +6 -5
  21. package/lib/components/Card/useCardSelectable.js.map +1 -1
  22. package/lib/components/Card/useCardStyles.js.map +1 -1
  23. package/lib/components/CardFooter/CardFooter.js.map +1 -1
  24. package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
  25. package/lib/components/CardFooter/index.js.map +1 -1
  26. package/lib/components/CardFooter/renderCardFooter.js +2 -5
  27. package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
  28. package/lib/components/CardFooter/useCardFooter.js +1 -0
  29. package/lib/components/CardFooter/useCardFooter.js.map +1 -1
  30. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  31. package/lib/components/CardHeader/CardHeader.js.map +1 -1
  32. package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
  33. package/lib/components/CardHeader/index.js.map +1 -1
  34. package/lib/components/CardHeader/renderCardHeader.js +2 -11
  35. package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
  36. package/lib/components/CardHeader/useCardHeader.js.map +1 -1
  37. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  38. package/lib/components/CardPreview/CardPreview.js.map +1 -1
  39. package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
  40. package/lib/components/CardPreview/index.js.map +1 -1
  41. package/lib/components/CardPreview/renderCardPreview.js +2 -5
  42. package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
  43. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  44. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  45. package/lib/index.js.map +1 -1
  46. package/lib-commonjs/Card.js +5 -4
  47. package/lib-commonjs/Card.js.map +1 -1
  48. package/lib-commonjs/CardFooter.js +5 -4
  49. package/lib-commonjs/CardFooter.js.map +1 -1
  50. package/lib-commonjs/CardHeader.js +5 -4
  51. package/lib-commonjs/CardHeader.js.map +1 -1
  52. package/lib-commonjs/CardPreview.js +5 -4
  53. package/lib-commonjs/CardPreview.js.map +1 -1
  54. package/lib-commonjs/components/Card/Card.js +18 -17
  55. package/lib-commonjs/components/Card/Card.js.map +1 -1
  56. package/lib-commonjs/components/Card/Card.types.js +5 -2
  57. package/lib-commonjs/components/Card/Card.types.js.map +1 -1
  58. package/lib-commonjs/components/Card/CardContext.js +26 -30
  59. package/lib-commonjs/components/Card/CardContext.js.map +1 -1
  60. package/lib-commonjs/components/Card/index.js +10 -9
  61. package/lib-commonjs/components/Card/index.js.map +1 -1
  62. package/lib-commonjs/components/Card/renderCard.js +18 -25
  63. package/lib-commonjs/components/Card/renderCard.js.map +1 -1
  64. package/lib-commonjs/components/Card/useCard.js +82 -94
  65. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  66. package/lib-commonjs/components/Card/useCardContextValue.js +12 -11
  67. package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -1
  68. package/lib-commonjs/components/Card/useCardSelectable.js +131 -117
  69. package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
  70. package/lib-commonjs/components/Card/useCardStyles.js +738 -336
  71. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  72. package/lib-commonjs/components/CardFooter/CardFooter.js +16 -15
  73. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
  74. package/lib-commonjs/components/CardFooter/CardFooter.types.js +3 -2
  75. package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
  76. package/lib-commonjs/components/CardFooter/index.js +9 -8
  77. package/lib-commonjs/components/CardFooter/index.js.map +1 -1
  78. package/lib-commonjs/components/CardFooter/renderCardFooter.js +15 -20
  79. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
  80. package/lib-commonjs/components/CardFooter/useCardFooter.js +23 -30
  81. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
  82. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +45 -33
  83. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  84. package/lib-commonjs/components/CardHeader/CardHeader.js +16 -15
  85. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
  86. package/lib-commonjs/components/CardHeader/CardHeader.types.js +3 -2
  87. package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
  88. package/lib-commonjs/components/CardHeader/index.js +9 -8
  89. package/lib-commonjs/components/CardHeader/index.js.map +1 -1
  90. package/lib-commonjs/components/CardHeader/renderCardHeader.js +15 -26
  91. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
  92. package/lib-commonjs/components/CardHeader/useCardHeader.js +50 -64
  93. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
  94. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +88 -67
  95. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  96. package/lib-commonjs/components/CardPreview/CardPreview.js +16 -15
  97. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
  98. package/lib-commonjs/components/CardPreview/CardPreview.types.js +3 -2
  99. package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
  100. package/lib-commonjs/components/CardPreview/index.js +9 -8
  101. package/lib-commonjs/components/CardPreview/index.js.map +1 -1
  102. package/lib-commonjs/components/CardPreview/renderCardPreview.js +15 -20
  103. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
  104. package/lib-commonjs/components/CardPreview/useCardPreview.js +51 -60
  105. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  106. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +53 -37
  107. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  108. package/lib-commonjs/index.js +40 -153
  109. package/lib-commonjs/index.js.map +1 -1
  110. package/package.json +9 -9
@@ -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,72 @@ 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 = (param)=>{
29
+ let { focusMode ='off' , ...props } = param;
30
+ const interactive = [
31
+ 'onClick',
32
+ 'onDoubleClick',
33
+ 'onMouseUp',
34
+ 'onMouseDown',
35
+ 'onPointerUp',
36
+ 'onPointerDown',
37
+ 'onTouchStart',
38
+ 'onTouchEnd',
39
+ 'onDragStart',
40
+ 'onDragEnd'
41
+ ].some((prop)=>props[prop]);
42
+ const groupperAttrs = (0, _reactTabster.useFocusableGroup)({
43
+ tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
44
+ });
45
+ const interactiveFocusAttributes = {
46
+ ...groupperAttrs,
47
+ tabIndex: 0
48
+ };
49
+ return {
50
+ interactive,
51
+ focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
52
+ };
106
53
  };
107
- exports.useCard_unstable = useCard_unstable;
54
+ const useCard_unstable = (props, ref)=>{
55
+ const { appearance ='filled' , orientation ='vertical' , size ='medium' } = props;
56
+ const [referenceId, setReferenceId] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
57
+ const [referenceLabel, setReferenceLabel] = _react.useState(_cardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
58
+ const cardBaseRef = (0, _reactTabster.useFocusWithin)();
59
+ const { selectable , selected , selectableCardProps , selectFocused , checkboxSlot , floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
60
+ referenceId,
61
+ referenceLabel
62
+ }, cardBaseRef);
63
+ const cardRef = (0, _reactUtilities.useMergedRefs)(cardBaseRef, ref);
64
+ const { interactive , focusAttributes } = useCardInteractive(props);
65
+ return {
66
+ appearance,
67
+ orientation,
68
+ size,
69
+ interactive,
70
+ selectable,
71
+ selectFocused,
72
+ selected,
73
+ selectableA11yProps: {
74
+ setReferenceId,
75
+ referenceId,
76
+ referenceLabel,
77
+ setReferenceLabel
78
+ },
79
+ components: {
80
+ root: 'div',
81
+ floatingAction: 'div',
82
+ checkbox: 'input'
83
+ },
84
+ root: (0, _reactUtilities.getNativeElementProps)('div', {
85
+ ref: cardRef,
86
+ role: 'group',
87
+ ...focusAttributes,
88
+ ...props,
89
+ ...selectableCardProps
90
+ }),
91
+ floatingAction: floatingActionSlot,
92
+ checkbox: checkboxSlot
93
+ };
94
+ }; //# sourceMappingURL=useCard.js.map
95
+
108
96
  //# sourceMappingURL=useCard.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AACA;AAEA,MAAMA,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGC,iCAAiB,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,GAAG,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,GAAGC,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAC7G,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAEnH,MAAMQ,WAAW,GAAGlB,8BAAc,EAAkB;EACpD,MAAM;IACJmB,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,aAAa;IACbC,YAAY;IACZC;EAAkB,CACnB,GAAGC,qCAAiB,CAAC9B,KAAK,EAAE;IAAEe,WAAW;IAAEM;EAAc,CAAE,EAAEE,WAAW,CAAC;EAE1E,MAAMQ,OAAO,GAAGC,+BAAa,CAACT,WAAW,EAAEZ,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;IACRL,mBAAmB,EAAE;MACnBJ,cAAc;MACdD,WAAW;MACXM,cAAc;MACdC;KACD;IAEDW,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAEF,uCAAqB,CAAC,KAAK,EAAE;MACjCrB,GAAG,EAAEoB,OAAO;MACZM,IAAI,EAAE,OAAO;MACb,GAAG5B,eAAe;MAClB,GAAGT,KAAK;MACR,GAAG0B;KACJ,CAAC;IAEFS,cAAc,EAAEN,kBAAkB;IAClCO,QAAQ,EAAER;GACX;AACH,CAAC;AApDYU,wBAAgB","names":["focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","react_tabster_1","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","CardContext_1","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable_1","cardRef","react_utilities_1","components","root","floatingAction","checkbox","role","exports"],"sourceRoot":"","sources":["../../../../../../../../../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 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = 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 {\n selectable,\n selected,\n selectableCardProps,\n selectFocused,\n checkboxSlot,\n 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"]}
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 = param => {\n let {\n focusMode = 'off',\n ...props\n } = param;\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","param","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":";;;;+BA8CaA;;aAAAA;;;6DA9CU;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AACA;;;;;;;CAOC,GACD,MAAMC,qBAAqBC,CAAAA,QAAS;IAClC,IAAI,EACFC,WAAY,MAAK,EACjB,GAAGC,OACJ,GAAGF;IACJ,MAAMG,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,aAAaZ,QAAQ,CAACO,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,MAAMd,mBAAmB,CAACO,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,GAAGZ,mBAAmBG;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,16 @@
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(param) {
10
+ let { selectableA11yProps } = param;
11
+ return {
12
+ selectableA11yProps
13
+ };
14
+ } //# sourceMappingURL=useCardContextValue.js.map
15
+
15
16
  //# sourceMappingURL=useCardContextValue.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAEA,SAAgBA,mBAAmB,CAAC;EAAEC;AAAmB,CAAa;EACpE,OAAO;IAAEA;EAAmB,CAAE;AAChC;AAFAC","names":["useCardContextValue","selectableA11yProps","exports"],"sourceRoot":"","sources":["../../../../../../../../../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"]}
1
+ {"version":3,"sources":["../../../lib/components/Card/useCardContextValue.js"],"sourcesContent":["export function useCardContextValue(param) {\n let {\n selectableA11yProps\n } = param;\n return {\n selectableA11yProps\n };\n}\n//# sourceMappingURL=useCardContextValue.js.map"],"names":["useCardContextValue","param","selectableA11yProps"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,oBAAoBC,KAAK,EAAE;IACzC,IAAI,EACFC,oBAAmB,EACpB,GAAGD;IACJ,OAAO;QACLC;IACF;AACF,EACA,+CAA+C"}
@@ -1,123 +1,137 @@
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, param, cardRef)=>{
15
+ let { referenceLabel , referenceId } = param;
16
+ const { checkbox ={} , selected , defaultSelected , onSelectionChange , floatingAction , onClick , onKeyDown } = props;
17
+ const { findAllFocusable } = (0, _reactTabster.useFocusFinders)();
18
+ const checkboxRef = _react.useRef(null);
19
+ const isSelectable = [
20
+ selected,
21
+ defaultSelected,
22
+ onSelectionChange
23
+ ].some((prop)=>typeof prop !== 'undefined');
24
+ const [isCardSelected, setIsCardSelected] = _react.useState(false);
25
+ const [isSelectFocused, setIsSelectFocused] = _react.useState(false);
26
+ const shouldRestrictTriggerAction = _react.useCallback((event)=>{
27
+ if (!cardRef.current) {
28
+ return false;
29
+ }
30
+ const focusableElements = findAllFocusable(cardRef.current);
31
+ const target = event.target;
32
+ const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
33
+ const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
34
+ return isElementInFocusableGroup && !isCheckboxSlot;
35
+ }, [
36
+ cardRef,
37
+ findAllFocusable
38
+ ]);
39
+ const onChangeHandler = _react.useCallback((event)=>{
40
+ if (shouldRestrictTriggerAction(event)) {
41
+ return;
42
+ }
43
+ const newCheckedValue = !isCardSelected;
44
+ setIsCardSelected(newCheckedValue);
45
+ if (onSelectionChange) {
46
+ onSelectionChange(event, {
47
+ selected: newCheckedValue
48
+ });
49
+ }
50
+ }, [
51
+ onSelectionChange,
52
+ isCardSelected,
53
+ shouldRestrictTriggerAction
54
+ ]);
55
+ const onKeyDownHandler = _react.useCallback((event)=>{
56
+ if ([
57
+ _keyboardKeys.Enter
58
+ ].includes(event.key)) {
59
+ event.preventDefault();
60
+ onChangeHandler(event);
61
+ }
62
+ }, [
63
+ onChangeHandler
64
+ ]);
65
+ const checkboxSlot = _react.useMemo(()=>{
66
+ if (!isSelectable || floatingAction) {
67
+ return;
68
+ }
69
+ const selectableCheckboxProps = {};
70
+ if (referenceId) {
71
+ selectableCheckboxProps['aria-labelledby'] = referenceId;
72
+ } else if (referenceLabel) {
73
+ selectableCheckboxProps['aria-label'] = referenceLabel;
74
+ }
75
+ return (0, _reactUtilities.resolveShorthand)(checkbox, {
76
+ defaultProps: {
77
+ ref: checkboxRef,
78
+ type: 'checkbox',
79
+ checked: isCardSelected,
80
+ onChange: (event)=>onChangeHandler(event),
81
+ onFocus: ()=>setIsSelectFocused(true),
82
+ onBlur: ()=>setIsSelectFocused(false),
83
+ ...selectableCheckboxProps
84
+ }
85
+ });
86
+ }, [
87
+ checkbox,
88
+ floatingAction,
89
+ isCardSelected,
90
+ isSelectable,
91
+ onChangeHandler,
92
+ referenceId,
93
+ referenceLabel
94
+ ]);
95
+ const floatingActionSlot = _react.useMemo(()=>{
96
+ if (!floatingAction) {
97
+ return;
98
+ }
99
+ return (0, _reactUtilities.resolveShorthand)(floatingAction, {
100
+ defaultProps: {
101
+ ref: checkboxRef
102
+ }
103
+ });
104
+ }, [
105
+ floatingAction
106
+ ]);
107
+ const selectableCardProps = _react.useMemo(()=>{
108
+ if (!isSelectable) {
109
+ return null;
110
+ }
111
+ return {
112
+ onClick: (0, _reactUtilities.mergeCallbacks)(onClick, onChangeHandler),
113
+ onKeyDown: (0, _reactUtilities.mergeCallbacks)(onKeyDown, onKeyDownHandler)
114
+ };
115
+ }, [
116
+ isSelectable,
117
+ onChangeHandler,
118
+ onClick,
119
+ onKeyDown,
120
+ onKeyDownHandler
121
+ ]);
122
+ _react.useEffect(()=>setIsCardSelected(Boolean(defaultSelected ?? selected)), [
123
+ defaultSelected,
124
+ selected,
125
+ setIsCardSelected
126
+ ]);
107
127
  return {
108
- onClick: react_utilities_1.mergeCallbacks(onClick, onChangeHandler),
109
- onKeyDown: react_utilities_1.mergeCallbacks(onKeyDown, onKeyDownHandler)
128
+ selected: isCardSelected,
129
+ selectable: isSelectable,
130
+ selectFocused: isSelectFocused,
131
+ selectableCardProps,
132
+ checkboxSlot,
133
+ floatingActionSlot
110
134
  };
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;
135
+ }; //# sourceMappingURL=useCardSelectable.js.map
136
+
123
137
  //# sourceMappingURL=useCardSelectable.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","react_tabster_1","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","keyboard_keys_1","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","react_utilities_1","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isCheckboxSlot = checkboxRef?.current === target;\n\n return isElementInFocusableGroup && !isCheckboxSlot;\n },\n [cardRef, findAllFocusable],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, { selected: newCheckedValue });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n const floatingActionSlot = React.useMemo(() => {\n if (!floatingAction) {\n return;\n }\n\n return resolveShorthand(floatingAction, {\n defaultProps: {\n ref: checkboxRef,\n },\n });\n }, [floatingAction]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n };\n }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n defaultSelected,\n selected,\n setIsCardSelected,\n ]);\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n floatingActionSlot,\n };\n};\n"]}
1
+ {"version":3,"sources":["../../../lib/components/Card/useCardSelectable.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (props, param, cardRef) => {\n let {\n referenceLabel,\n referenceId\n } = param;\n const {\n checkbox = {},\n selected,\n defaultSelected,\n onSelectionChange,\n floatingAction,\n onClick,\n onKeyDown\n } = props;\n const {\n findAllFocusable\n } = useFocusFinders();\n const checkboxRef = React.useRef(null);\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n const shouldRestrictTriggerAction = React.useCallback(event => {\n if (!cardRef.current) {\n return false;\n }\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target;\n const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;\n return isElementInFocusableGroup && !isCheckboxSlot;\n }, [cardRef, findAllFocusable]);\n const onChangeHandler = React.useCallback(event => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n const newCheckedValue = !isCardSelected;\n setIsCardSelected(newCheckedValue);\n if (onSelectionChange) {\n onSelectionChange(event, {\n selected: newCheckedValue\n });\n }\n }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);\n const onKeyDownHandler = React.useCallback(event => {\n if ([Enter].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n }, [onChangeHandler]);\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || floatingAction) {\n return;\n }\n const selectableCheckboxProps = {};\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: event => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps\n }\n });\n }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n const floatingActionSlot = React.useMemo(() => {\n if (!floatingAction) {\n return;\n }\n return resolveShorthand(floatingAction, {\n defaultProps: {\n ref: checkboxRef\n }\n });\n }, [floatingAction]);\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n };\n }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [defaultSelected, selected, setIsCardSelected]);\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n floatingActionSlot\n };\n};\n//# sourceMappingURL=useCardSelectable.js.map"],"names":["useCardSelectable","props","param","cardRef","referenceLabel","referenceId","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}