@fluentui/react-card 0.0.0-nightly-20230222-0421.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 (111) hide show
  1. package/.swcrc +33 -0
  2. package/CHANGELOG.json +30 -15
  3. package/CHANGELOG.md +19 -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 +3 -2
  23. package/lib/components/Card/useCardStyles.js.map +1 -1
  24. package/lib/components/CardFooter/CardFooter.js.map +1 -1
  25. package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
  26. package/lib/components/CardFooter/index.js.map +1 -1
  27. package/lib/components/CardFooter/renderCardFooter.js +2 -5
  28. package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
  29. package/lib/components/CardFooter/useCardFooter.js +1 -0
  30. package/lib/components/CardFooter/useCardFooter.js.map +1 -1
  31. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  32. package/lib/components/CardHeader/CardHeader.js.map +1 -1
  33. package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
  34. package/lib/components/CardHeader/index.js.map +1 -1
  35. package/lib/components/CardHeader/renderCardHeader.js +2 -11
  36. package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
  37. package/lib/components/CardHeader/useCardHeader.js.map +1 -1
  38. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  39. package/lib/components/CardPreview/CardPreview.js.map +1 -1
  40. package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
  41. package/lib/components/CardPreview/index.js.map +1 -1
  42. package/lib/components/CardPreview/renderCardPreview.js +2 -5
  43. package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
  44. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  45. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  46. package/lib/index.js.map +1 -1
  47. package/lib-commonjs/Card.js +5 -4
  48. package/lib-commonjs/Card.js.map +1 -1
  49. package/lib-commonjs/CardFooter.js +5 -4
  50. package/lib-commonjs/CardFooter.js.map +1 -1
  51. package/lib-commonjs/CardHeader.js +5 -4
  52. package/lib-commonjs/CardHeader.js.map +1 -1
  53. package/lib-commonjs/CardPreview.js +5 -4
  54. package/lib-commonjs/CardPreview.js.map +1 -1
  55. package/lib-commonjs/components/Card/Card.js +18 -17
  56. package/lib-commonjs/components/Card/Card.js.map +1 -1
  57. package/lib-commonjs/components/Card/Card.types.js +5 -2
  58. package/lib-commonjs/components/Card/Card.types.js.map +1 -1
  59. package/lib-commonjs/components/Card/CardContext.js +26 -30
  60. package/lib-commonjs/components/Card/CardContext.js.map +1 -1
  61. package/lib-commonjs/components/Card/index.js +10 -9
  62. package/lib-commonjs/components/Card/index.js.map +1 -1
  63. package/lib-commonjs/components/Card/renderCard.js +18 -25
  64. package/lib-commonjs/components/Card/renderCard.js.map +1 -1
  65. package/lib-commonjs/components/Card/useCard.js +82 -94
  66. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  67. package/lib-commonjs/components/Card/useCardContextValue.js +12 -11
  68. package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -1
  69. package/lib-commonjs/components/Card/useCardSelectable.js +131 -117
  70. package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
  71. package/lib-commonjs/components/Card/useCardStyles.js +738 -335
  72. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  73. package/lib-commonjs/components/CardFooter/CardFooter.js +16 -15
  74. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
  75. package/lib-commonjs/components/CardFooter/CardFooter.types.js +3 -2
  76. package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
  77. package/lib-commonjs/components/CardFooter/index.js +9 -8
  78. package/lib-commonjs/components/CardFooter/index.js.map +1 -1
  79. package/lib-commonjs/components/CardFooter/renderCardFooter.js +15 -20
  80. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
  81. package/lib-commonjs/components/CardFooter/useCardFooter.js +23 -30
  82. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
  83. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +45 -33
  84. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  85. package/lib-commonjs/components/CardHeader/CardHeader.js +16 -15
  86. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
  87. package/lib-commonjs/components/CardHeader/CardHeader.types.js +3 -2
  88. package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
  89. package/lib-commonjs/components/CardHeader/index.js +9 -8
  90. package/lib-commonjs/components/CardHeader/index.js.map +1 -1
  91. package/lib-commonjs/components/CardHeader/renderCardHeader.js +15 -26
  92. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
  93. package/lib-commonjs/components/CardHeader/useCardHeader.js +50 -64
  94. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
  95. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +88 -67
  96. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  97. package/lib-commonjs/components/CardPreview/CardPreview.js +16 -15
  98. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
  99. package/lib-commonjs/components/CardPreview/CardPreview.types.js +3 -2
  100. package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
  101. package/lib-commonjs/components/CardPreview/index.js +9 -8
  102. package/lib-commonjs/components/CardPreview/index.js.map +1 -1
  103. package/lib-commonjs/components/CardPreview/renderCardPreview.js +15 -20
  104. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
  105. package/lib-commonjs/components/CardPreview/useCardPreview.js +51 -60
  106. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  107. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +53 -37
  108. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  109. package/lib-commonjs/index.js +40 -153
  110. package/lib-commonjs/index.js.map +1 -1
  111. package/package.json +9 -9
@@ -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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"}