@fluentui/react-card 9.0.0-beta.13 → 9.0.0-beta.16
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/CHANGELOG.json +178 -1
- package/CHANGELOG.md +51 -2
- package/Spec.md +20 -16
- package/dist/index.d.ts +25 -26
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/useCard.js +16 -5
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardStyles.js +80 -79
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +0 -5
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +0 -5
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +0 -5
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib/index.js +4 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +16 -5
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +81 -80
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +1 -6
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +1 -6
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +1 -6
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -26
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { cardPreviewClassNames } from '../CardPreview/index';
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated Use `cardClassNames.root` instead.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
export const cardClassName = 'fui-Card';
|
|
9
4
|
export const cardClassNames = {
|
|
10
5
|
root: 'fui-Card'
|
|
11
6
|
};
|
|
@@ -16,132 +11,138 @@ export const cardClassNames = {
|
|
|
16
11
|
const useStyles = /*#__PURE__*/__styles({
|
|
17
12
|
"root": {
|
|
18
13
|
"mc9l5x": "ftgm304",
|
|
14
|
+
"qhf8xq": "f10pi13n",
|
|
19
15
|
"B68tc82": "f1p9o1ba",
|
|
20
16
|
"Bmxbyg5": "f1sil6mw",
|
|
21
17
|
"sj55zd": "f19n0e5",
|
|
22
|
-
"icvyot": "fzkkow9",
|
|
23
|
-
"vrafjx": ["fcdblym", "fjik90z"],
|
|
24
|
-
"oivjwe": "fg706s2",
|
|
25
|
-
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
26
|
-
"B4j52fo": "f192inf7",
|
|
27
|
-
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
28
|
-
"Bn0qgzm": "f1vxd6vx",
|
|
29
|
-
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
30
18
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
31
19
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
32
20
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
33
21
|
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
22
|
+
"E3zdtr": "f1mdlcz9",
|
|
23
|
+
"bn5sak": "frwkxtg",
|
|
24
|
+
"Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
|
|
25
|
+
"B1piin3": ["f15yvnhg", "f1n6gb5g"],
|
|
26
|
+
"By385i5": "fo72kxq",
|
|
27
|
+
"Bsft5z2": "f13zj6fq",
|
|
28
|
+
"B80jsxd": "f1nwj1ja",
|
|
29
|
+
"Bm2nyyq": "f8rth92",
|
|
30
|
+
"Barhvk9": ["flthirb", "ftkbnf5"],
|
|
31
|
+
"Bw17bha": "f1lh990p",
|
|
32
|
+
"vfts7": ["ftkbnf5", "flthirb"],
|
|
33
|
+
"xrcqlc": "f6czdpx",
|
|
34
|
+
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
|
35
|
+
"Bcgy8vk": "f1i1u9k0",
|
|
36
|
+
"Bhxzhr1": ["f1en4csx", "f13hvwk3"],
|
|
37
|
+
"B3778ie": ["f1ibwz09", "f1kp91vd"],
|
|
38
|
+
"d9w3h3": ["f1kp91vd", "f1ibwz09"],
|
|
39
|
+
"Bl18szs": ["f1pix4dl", "f13nd1z4"],
|
|
40
|
+
"B4j8arr": ["f13nd1z4", "f1pix4dl"],
|
|
34
41
|
"Ecqjvq": "f70or3y",
|
|
35
42
|
"B39syqp": ["f1s27jks", "f1x7x6se"],
|
|
36
43
|
"m3o775": "f1q2lvbs",
|
|
37
44
|
"I0kkcn": ["f1x7x6se", "f1s27jks"]
|
|
38
45
|
},
|
|
46
|
+
"interactiveNoOutline": {
|
|
47
|
+
"Be0v6ae": "ftr40te",
|
|
48
|
+
"B5kxglz": ["fcsoo7g", "f1rl4q8i"],
|
|
49
|
+
"B3pwyw6": "fbb4roj",
|
|
50
|
+
"Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
|
|
51
|
+
"dmfk": "fd4vwcp",
|
|
52
|
+
"B4ofi8": ["f1crelnc", "fup9tr0"],
|
|
53
|
+
"jgq6uv": "f12d33p4",
|
|
54
|
+
"Baxewws": ["fup9tr0", "f1crelnc"]
|
|
55
|
+
},
|
|
39
56
|
"filledInteractive": {
|
|
40
57
|
"Bceei9c": "f1k6fduh",
|
|
41
58
|
"De3pzq": "fxugw4r",
|
|
42
|
-
"g2u3we": "fghlq4f",
|
|
43
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
44
|
-
"B9xav0g": "fb073pr",
|
|
45
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
46
59
|
"E5pizo": "f1whvlc6",
|
|
60
|
+
"B0n5ga8": "f16gxe2i",
|
|
61
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
62
|
+
"B1q35kw": "f1osi826",
|
|
63
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
47
64
|
"Jwef8y": "f1knas48",
|
|
48
|
-
"Bgoe8wy": "fpa59ij",
|
|
49
|
-
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
50
|
-
"oetu4i": "fz67qlh",
|
|
51
|
-
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
52
65
|
"Bvxd0ez": "f1m145df",
|
|
53
|
-
"ecr2s2": "fb40n2d"
|
|
54
|
-
"B6oc9vd": "f7cshhm",
|
|
55
|
-
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
56
|
-
"wmxk5l": "f1bazisv",
|
|
57
|
-
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
66
|
+
"ecr2s2": "fb40n2d"
|
|
58
67
|
},
|
|
59
68
|
"filled": {
|
|
60
69
|
"De3pzq": "fxugw4r",
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
70
|
+
"E5pizo": "f1whvlc6",
|
|
71
|
+
"B0n5ga8": "f16gxe2i",
|
|
72
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
73
|
+
"B1q35kw": "f1osi826",
|
|
74
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
66
75
|
},
|
|
67
76
|
"filledAlternativeInteractive": {
|
|
68
77
|
"Bceei9c": "f1k6fduh",
|
|
69
78
|
"De3pzq": "f1dmdbja",
|
|
70
|
-
"g2u3we": "fghlq4f",
|
|
71
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
72
|
-
"B9xav0g": "fb073pr",
|
|
73
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
74
79
|
"E5pizo": "f1whvlc6",
|
|
80
|
+
"B0n5ga8": "f16gxe2i",
|
|
81
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
82
|
+
"B1q35kw": "f1osi826",
|
|
83
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
75
84
|
"Jwef8y": "f1uvynv3",
|
|
76
|
-
"Bgoe8wy": "fpa59ij",
|
|
77
|
-
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
78
|
-
"oetu4i": "fz67qlh",
|
|
79
|
-
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
80
85
|
"Bvxd0ez": "f1m145df",
|
|
81
|
-
"ecr2s2": "f1yhgkbh"
|
|
82
|
-
"B6oc9vd": "f7cshhm",
|
|
83
|
-
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
84
|
-
"wmxk5l": "f1bazisv",
|
|
85
|
-
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
86
|
+
"ecr2s2": "f1yhgkbh"
|
|
86
87
|
},
|
|
87
88
|
"filledAlternative": {
|
|
88
89
|
"De3pzq": "f1dmdbja",
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
90
|
+
"E5pizo": "f1whvlc6",
|
|
91
|
+
"B0n5ga8": "f16gxe2i",
|
|
92
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
93
|
+
"B1q35kw": "f1osi826",
|
|
94
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
94
95
|
},
|
|
95
96
|
"outlineInteractive": {
|
|
96
97
|
"Bceei9c": "f1k6fduh",
|
|
97
98
|
"De3pzq": "f1c21dwh",
|
|
98
|
-
"g2u3we": "fj3muxo",
|
|
99
|
-
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
100
|
-
"B9xav0g": "f1aperda",
|
|
101
|
-
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
102
99
|
"E5pizo": "f1couhl3",
|
|
100
|
+
"B0n5ga8": "ft83z1f",
|
|
101
|
+
"s924m2": ["f1g4150c", "f192dr6e"],
|
|
102
|
+
"B1q35kw": "f1qnawh6",
|
|
103
|
+
"Gp14am": ["f192dr6e", "f1g4150c"],
|
|
103
104
|
"Jwef8y": "fjxutwb",
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
105
|
+
"Be0v6ae": "f1llr77y",
|
|
106
|
+
"B5kxglz": ["fzk0khw", "fjj8tog"],
|
|
107
|
+
"B3pwyw6": "fb1u8ub",
|
|
108
|
+
"Bymgtzf": ["fjj8tog", "fzk0khw"],
|
|
108
109
|
"ecr2s2": "fophhak",
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"
|
|
112
|
-
"
|
|
110
|
+
"dmfk": "f1uohb70",
|
|
111
|
+
"B4ofi8": ["f1jm7v1n", "f1bus3rq"],
|
|
112
|
+
"jgq6uv": "f1fbu7rr",
|
|
113
|
+
"Baxewws": ["f1bus3rq", "f1jm7v1n"]
|
|
113
114
|
},
|
|
114
115
|
"outline": {
|
|
115
116
|
"De3pzq": "f1c21dwh",
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"
|
|
120
|
-
"
|
|
117
|
+
"E5pizo": "f1couhl3",
|
|
118
|
+
"B0n5ga8": "ft83z1f",
|
|
119
|
+
"s924m2": ["f1g4150c", "f192dr6e"],
|
|
120
|
+
"B1q35kw": "f1qnawh6",
|
|
121
|
+
"Gp14am": ["f192dr6e", "f1g4150c"]
|
|
121
122
|
},
|
|
122
123
|
"subtleInteractive": {
|
|
123
124
|
"Bceei9c": "f1k6fduh",
|
|
124
125
|
"De3pzq": "fhovq9v",
|
|
125
|
-
"g2u3we": "fghlq4f",
|
|
126
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
127
|
-
"B9xav0g": "fb073pr",
|
|
128
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
129
126
|
"E5pizo": "f1couhl3",
|
|
127
|
+
"B0n5ga8": "f16gxe2i",
|
|
128
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
129
|
+
"B1q35kw": "f1osi826",
|
|
130
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
130
131
|
"Jwef8y": "f1t94bn6",
|
|
131
132
|
"ecr2s2": "f1wfn5kd"
|
|
132
133
|
},
|
|
133
134
|
"subtle": {
|
|
134
135
|
"De3pzq": "fhovq9v",
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
136
|
+
"E5pizo": "f1couhl3",
|
|
137
|
+
"B0n5ga8": "f16gxe2i",
|
|
138
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
139
|
+
"B1q35kw": "f1osi826",
|
|
140
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
140
141
|
}
|
|
141
142
|
}, {
|
|
142
|
-
"d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".
|
|
143
|
-
"h": [".
|
|
144
|
-
"a": [".
|
|
143
|
+
"d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
|
|
144
|
+
"h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
145
|
+
"a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
145
146
|
});
|
|
146
147
|
/**
|
|
147
148
|
* Apply styling to the Card slots based on the state
|
|
@@ -151,7 +152,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
151
152
|
export const useCardStyles_unstable = state => {
|
|
152
153
|
const styles = useStyles();
|
|
153
154
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
154
|
-
state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
|
|
155
|
+
state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
155
156
|
return state;
|
|
156
157
|
};
|
|
157
158
|
//# sourceMappingURL=useCardStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA
|
|
1
|
+
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoJA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAXvB,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,SAAO,KAAP;AACD,CA5BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // TODO: Extract this to separate stiles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.margin('12px'),\n },\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
export const cardFooterClassName = 'fui-CardFooter';
|
|
7
2
|
export const cardFooterClassNames = {
|
|
8
3
|
root: 'fui-CardFooter',
|
|
9
4
|
action: 'fui-CardFooter__action'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,MAAM,EAAE;AAF2D,CAA9D;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
export const cardHeaderClassName = 'fui-CardHeader';
|
|
7
2
|
export const cardHeaderClassNames = {
|
|
8
3
|
root: 'fui-CardHeader',
|
|
9
4
|
image: 'fui-CardHeader__image',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAA9D;AASP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,oBAAoB,CAAC,OAAtB,EAA+B,MAAM,CAAC,aAAtC,EAAqD,KAAK,CAAC,OAAN,CAAc,SAAnE,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CAAC,oBAAoB,CAAC,WAAtB,EAAmC,KAAK,CAAC,WAAN,CAAkB,SAArD,CAA1C;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n content: 'fui-CardHeader__content',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> *': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> *': {\n height: '50%',\n },\n },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n }\n\n if (state.description) {\n state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
/**
|
|
3
|
-
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
export const cardPreviewClassName = 'fui-CardPreview';
|
|
7
2
|
export const cardPreviewClassNames = {
|
|
8
3
|
root: 'fui-CardPreview',
|
|
9
4
|
logo: 'fui-CardPreview__logo'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> *': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
|
|
1
|
+
export { Card, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
|
|
2
|
+
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
|
|
3
|
+
export { CardHeader, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
|
|
4
|
+
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
|
|
6
5
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SAAS,IAAT,EAAe,cAAf,EAA+B,mBAA/B,EAAoD,sBAApD,EAA4E,gBAA5E,QAAoG,QAApG;AAEA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export { Card, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|
|
@@ -20,12 +20,23 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
const useCard_unstable = (props, ref) => {
|
|
23
|
-
const groupperAttrs = react_tabster_1.useFocusableGroup({
|
|
24
|
-
tabBehavior: 'limitedTrapFocus'
|
|
25
|
-
});
|
|
26
23
|
const {
|
|
27
|
-
appearance = 'filled'
|
|
24
|
+
appearance = 'filled',
|
|
25
|
+
focusMode = 'off'
|
|
28
26
|
} = props;
|
|
27
|
+
const focusMap = {
|
|
28
|
+
off: undefined,
|
|
29
|
+
'no-tab': 'limited-trap-focus',
|
|
30
|
+
'tab-exit': 'limited',
|
|
31
|
+
'tab-only': 'unlimited'
|
|
32
|
+
};
|
|
33
|
+
const groupperAttrs = react_tabster_1.useFocusableGroup({
|
|
34
|
+
tabBehavior: focusMap[focusMode]
|
|
35
|
+
});
|
|
36
|
+
const focusAttrs = focusMode !== 'off' ? {
|
|
37
|
+
tabIndex: 0,
|
|
38
|
+
...groupperAttrs
|
|
39
|
+
} : null;
|
|
29
40
|
return {
|
|
30
41
|
appearance,
|
|
31
42
|
components: {
|
|
@@ -34,7 +45,7 @@ const useCard_unstable = (props, ref) => {
|
|
|
34
45
|
root: react_utilities_1.getNativeElementProps(props.as || 'div', {
|
|
35
46
|
ref,
|
|
36
47
|
role: 'group',
|
|
37
|
-
...
|
|
48
|
+
...focusAttrs,
|
|
38
49
|
...props
|
|
39
50
|
})
|
|
40
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,oBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAlB,CAAtB;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAJD,GAAP;AAWD,CA3BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\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 root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|