@fluentui/react-card 9.0.1 → 9.0.3
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.
- package/.swcrc +30 -0
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/lib/Card.js.map +1 -1
- package/lib/CardFooter.js.map +1 -1
- package/lib/CardHeader.js.map +1 -1
- package/lib/CardPreview.js.map +1 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/Card.types.js +1 -1
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/CardContext.js +4 -8
- package/lib/components/Card/CardContext.js.map +1 -1
- package/lib/components/Card/index.js.map +1 -1
- package/lib/components/Card/renderCard.js +2 -8
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardContextValue.js.map +1 -1
- package/lib/components/Card/useCardSelectable.js.map +1 -1
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
- package/lib/components/CardFooter/index.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js +1 -5
- package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooter.js +1 -0
- package/lib/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
- package/lib/components/CardHeader/index.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js +1 -11
- package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
- package/lib/components/CardPreview/index.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js +1 -5
- package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Card.js +5 -4
- package/lib-commonjs/Card.js.map +1 -1
- package/lib-commonjs/CardFooter.js +5 -4
- package/lib-commonjs/CardFooter.js.map +1 -1
- package/lib-commonjs/CardHeader.js +5 -4
- package/lib-commonjs/CardHeader.js.map +1 -1
- package/lib-commonjs/CardPreview.js +5 -4
- package/lib-commonjs/CardPreview.js.map +1 -1
- package/lib-commonjs/components/Card/Card.js +18 -17
- package/lib-commonjs/components/Card/Card.js.map +1 -1
- package/lib-commonjs/components/Card/Card.types.js +5 -2
- package/lib-commonjs/components/Card/Card.types.js.map +1 -1
- package/lib-commonjs/components/Card/CardContext.js +27 -30
- package/lib-commonjs/components/Card/CardContext.js.map +1 -1
- package/lib-commonjs/components/Card/index.js +10 -9
- package/lib-commonjs/components/Card/index.js.map +1 -1
- package/lib-commonjs/components/Card/renderCard.js +16 -25
- package/lib-commonjs/components/Card/renderCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +81 -94
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardContextValue.js +11 -11
- package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -1
- package/lib-commonjs/components/Card/useCardSelectable.js +130 -117
- package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +738 -336
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.js +16 -15
- package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.types.js +3 -2
- package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
- package/lib-commonjs/components/CardFooter/index.js +9 -8
- package/lib-commonjs/components/CardFooter/index.js.map +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js +13 -20
- package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooter.js +23 -30
- package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +45 -33
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.js +16 -15
- package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.types.js +3 -2
- package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
- package/lib-commonjs/components/CardHeader/index.js +9 -8
- package/lib-commonjs/components/CardHeader/index.js.map +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js +13 -26
- package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +50 -64
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +88 -67
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.js +16 -15
- package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.types.js +3 -2
- package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
- package/lib-commonjs/components/CardPreview/index.js +9 -8
- package/lib-commonjs/components/CardPreview/index.js.map +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js +13 -20
- package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js +51 -60
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +53 -37
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.js +40 -153
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
- package/lib-amd/Card.js +0 -6
- package/lib-amd/Card.js.map +0 -1
- package/lib-amd/CardFooter.js +0 -6
- package/lib-amd/CardFooter.js.map +0 -1
- package/lib-amd/CardHeader.js +0 -6
- package/lib-amd/CardHeader.js.map +0 -1
- package/lib-amd/CardPreview.js +0 -6
- package/lib-amd/CardPreview.js.map +0 -1
- package/lib-amd/components/Card/Card.js +0 -16
- package/lib-amd/components/Card/Card.js.map +0 -1
- package/lib-amd/components/Card/Card.types.js +0 -5
- package/lib-amd/components/Card/Card.types.js.map +0 -1
- package/lib-amd/components/Card/CardContext.js +0 -31
- package/lib-amd/components/Card/CardContext.js.map +0 -1
- package/lib-amd/components/Card/index.js +0 -11
- package/lib-amd/components/Card/index.js.map +0 -1
- package/lib-amd/components/Card/renderCard.js +0 -18
- package/lib-amd/components/Card/renderCard.js.map +0 -1
- package/lib-amd/components/Card/useCard.js +0 -85
- package/lib-amd/components/Card/useCard.js.map +0 -1
- package/lib-amd/components/Card/useCardContextValue.js +0 -11
- package/lib-amd/components/Card/useCardContextValue.js.map +0 -1
- package/lib-amd/components/Card/useCardSelectable.js +0 -97
- package/lib-amd/components/Card/useCardSelectable.js.map +0 -1
- package/lib-amd/components/Card/useCardStyles.js +0 -253
- package/lib-amd/components/Card/useCardStyles.js.map +0 -1
- package/lib-amd/components/CardFooter/CardFooter.js +0 -15
- package/lib-amd/components/CardFooter/CardFooter.js.map +0 -1
- package/lib-amd/components/CardFooter/CardFooter.types.js +0 -5
- package/lib-amd/components/CardFooter/CardFooter.types.js.map +0 -1
- package/lib-amd/components/CardFooter/index.js +0 -10
- package/lib-amd/components/CardFooter/index.js.map +0 -1
- package/lib-amd/components/CardFooter/renderCardFooter.js +0 -16
- package/lib-amd/components/CardFooter/renderCardFooter.js.map +0 -1
- package/lib-amd/components/CardFooter/useCardFooter.js +0 -27
- package/lib-amd/components/CardFooter/useCardFooter.js.map +0 -1
- package/lib-amd/components/CardFooter/useCardFooterStyles.js +0 -31
- package/lib-amd/components/CardFooter/useCardFooterStyles.js.map +0 -1
- package/lib-amd/components/CardHeader/CardHeader.js +0 -15
- package/lib-amd/components/CardHeader/CardHeader.js.map +0 -1
- package/lib-amd/components/CardHeader/CardHeader.types.js +0 -5
- package/lib-amd/components/CardHeader/CardHeader.types.js.map +0 -1
- package/lib-amd/components/CardHeader/index.js +0 -10
- package/lib-amd/components/CardHeader/index.js.map +0 -1
- package/lib-amd/components/CardHeader/renderCardHeader.js +0 -18
- package/lib-amd/components/CardHeader/renderCardHeader.js.map +0 -1
- package/lib-amd/components/CardHeader/useCardHeader.js +0 -48
- package/lib-amd/components/CardHeader/useCardHeader.js.map +0 -1
- package/lib-amd/components/CardHeader/useCardHeaderStyles.js +0 -72
- package/lib-amd/components/CardHeader/useCardHeaderStyles.js.map +0 -1
- package/lib-amd/components/CardPreview/CardPreview.js +0 -15
- package/lib-amd/components/CardPreview/CardPreview.js.map +0 -1
- package/lib-amd/components/CardPreview/CardPreview.types.js +0 -5
- package/lib-amd/components/CardPreview/CardPreview.types.js.map +0 -1
- package/lib-amd/components/CardPreview/index.js +0 -10
- package/lib-amd/components/CardPreview/index.js.map +0 -1
- package/lib-amd/components/CardPreview/renderCardPreview.js +0 -16
- package/lib-amd/components/CardPreview/renderCardPreview.js.map +0 -1
- package/lib-amd/components/CardPreview/useCardPreview.js +0 -50
- package/lib-amd/components/CardPreview/useCardPreview.js.map +0 -1
- package/lib-amd/components/CardPreview/useCardPreviewStyles.js +0 -44
- package/lib-amd/components/CardPreview/useCardPreviewStyles.js.map +0 -1
- package/lib-amd/index.js +0 -30
- package/lib-amd/index.js.map +0 -1
@@ -1,29 +1,20 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "renderCard_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>renderCard_unstable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
*/
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
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,"
|
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
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useCard_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useCard_unstable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
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
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
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
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
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
|
-
|
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,"
|
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
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useCardContextValue", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useCardContextValue
|
5
8
|
});
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
}
|
10
|
-
|
11
|
-
|
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,"
|
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
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useCardSelectable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useCardSelectable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
}
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
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
|
-
|
109
|
-
|
127
|
+
selected: isCardSelected,
|
128
|
+
selectable: isSelectable,
|
129
|
+
selectFocused: isSelectFocused,
|
130
|
+
selectableCardProps,
|
131
|
+
checkboxSlot,
|
132
|
+
floatingActionSlot
|
110
133
|
};
|
111
|
-
|
112
|
-
|
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
|