@fluentui/react-card 9.0.82 → 9.0.84
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.md +20 -2
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js +51 -17
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js +63 -25
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.84)
|
|
8
|
+
|
|
9
|
+
Mon, 17 Jun 2024 07:31:08 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.83..@fluentui/react-card_v9.0.84)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.0.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.83)
|
|
17
|
+
|
|
18
|
+
Wed, 12 Jun 2024 13:17:17 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.82..@fluentui/react-card_v9.0.83)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: improve header alignment when no description is passed ([PR #31681](https://github.com/microsoft/fluentui/pull/31681) by marcosvmmoura@gmail.com)
|
|
24
|
+
|
|
7
25
|
## [9.0.82](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.82)
|
|
8
26
|
|
|
9
|
-
Thu, 06 Jun 2024 15:
|
|
27
|
+
Thu, 06 Jun 2024 15:26:31 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.81..@fluentui/react-card_v9.0.82)
|
|
11
29
|
|
|
12
30
|
### Patches
|
|
@@ -18,30 +18,20 @@ export const cardHeaderCSSVars = {
|
|
|
18
18
|
const useStyles = /*#__PURE__*/__styles({
|
|
19
19
|
root: {
|
|
20
20
|
Bkc6ea2: "fkufhic",
|
|
21
|
-
mc9l5x: "f13qh94s",
|
|
22
|
-
t4k1zu: "f8a668j",
|
|
23
21
|
Bt984gj: "f122n59"
|
|
24
22
|
},
|
|
25
23
|
image: {
|
|
26
24
|
mc9l5x: "ftuwxu6",
|
|
27
|
-
t21cq0: ["fql5097", "f6yss9k"]
|
|
28
|
-
Br312pm: "fwpfdsa",
|
|
29
|
-
Ijaq50: "fldnz9j"
|
|
25
|
+
t21cq0: ["fql5097", "f6yss9k"]
|
|
30
26
|
},
|
|
31
27
|
header: {
|
|
32
|
-
Br312pm: "fd46tj4",
|
|
33
|
-
Ijaq50: "f16hsg94",
|
|
34
28
|
mc9l5x: "f22iagw"
|
|
35
29
|
},
|
|
36
30
|
description: {
|
|
37
|
-
Br312pm: "fd46tj4",
|
|
38
|
-
Ijaq50: "faunodf",
|
|
39
31
|
mc9l5x: "f22iagw"
|
|
40
32
|
},
|
|
41
33
|
action: {
|
|
42
34
|
Frg6f3: ["f6yss9k", "fql5097"],
|
|
43
|
-
Br312pm: "fis13di",
|
|
44
|
-
Ijaq50: "fldnz9j",
|
|
45
35
|
B7frvx2: "f1ndzpm5",
|
|
46
36
|
B06c7xf: ["f1fkeggc", "f1u45u6i"],
|
|
47
37
|
B8uq84v: "f16eyofs",
|
|
@@ -50,7 +40,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
50
40
|
apjfyd: "f18alut9"
|
|
51
41
|
}
|
|
52
42
|
}, {
|
|
53
|
-
d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".
|
|
43
|
+
d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".f22iagw{display:flex;}"],
|
|
54
44
|
m: [["@media (forced-colors: active){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}", {
|
|
55
45
|
m: "(forced-colors: active)"
|
|
56
46
|
}], ["@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}", {
|
|
@@ -63,23 +53,67 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
63
53
|
m: "(forced-colors: active)"
|
|
64
54
|
}]]
|
|
65
55
|
});
|
|
56
|
+
const useStylesGrid = /*#__PURE__*/__styles({
|
|
57
|
+
root: {
|
|
58
|
+
mc9l5x: "f13qh94s",
|
|
59
|
+
t4k1zu: "f8a668j"
|
|
60
|
+
},
|
|
61
|
+
image: {
|
|
62
|
+
Br312pm: "fwpfdsa",
|
|
63
|
+
Ijaq50: "fldnz9j"
|
|
64
|
+
},
|
|
65
|
+
header: {
|
|
66
|
+
Br312pm: "fd46tj4",
|
|
67
|
+
Ijaq50: "f16hsg94"
|
|
68
|
+
},
|
|
69
|
+
description: {
|
|
70
|
+
Br312pm: "fd46tj4",
|
|
71
|
+
Ijaq50: "faunodf"
|
|
72
|
+
},
|
|
73
|
+
action: {
|
|
74
|
+
Br312pm: "fis13di",
|
|
75
|
+
Ijaq50: "fldnz9j"
|
|
76
|
+
}
|
|
77
|
+
}, {
|
|
78
|
+
d: [".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
|
|
79
|
+
});
|
|
80
|
+
const useStylesFlex = /*#__PURE__*/__styles({
|
|
81
|
+
root: {
|
|
82
|
+
mc9l5x: "f22iagw"
|
|
83
|
+
},
|
|
84
|
+
header: {
|
|
85
|
+
Bh6795r: "fqerorx"
|
|
86
|
+
},
|
|
87
|
+
image: {},
|
|
88
|
+
description: {},
|
|
89
|
+
action: {}
|
|
90
|
+
}, {
|
|
91
|
+
d: [".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}"]
|
|
92
|
+
});
|
|
66
93
|
/**
|
|
67
94
|
* Apply styling to the CardHeader slots based on the state.
|
|
68
95
|
*/
|
|
69
96
|
export const useCardHeaderStyles_unstable = state => {
|
|
70
97
|
const styles = useStyles();
|
|
71
|
-
|
|
98
|
+
const stylesGrid = useStylesGrid();
|
|
99
|
+
const stylesFlex = useStylesFlex();
|
|
100
|
+
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
|
|
101
|
+
const getSlotStyles = slotName => {
|
|
102
|
+
var _state_slotName;
|
|
103
|
+
return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
|
|
104
|
+
};
|
|
105
|
+
state.root.className = getSlotStyles('root');
|
|
72
106
|
if (state.image) {
|
|
73
|
-
state.image.className =
|
|
107
|
+
state.image.className = getSlotStyles('image');
|
|
74
108
|
}
|
|
75
109
|
if (state.header) {
|
|
76
|
-
state.header.className =
|
|
110
|
+
state.header.className = getSlotStyles('header');
|
|
77
111
|
}
|
|
78
112
|
if (state.description) {
|
|
79
|
-
state.description.className =
|
|
113
|
+
state.description.className = getSlotStyles('description');
|
|
80
114
|
}
|
|
81
115
|
if (state.action) {
|
|
82
|
-
state.action.className =
|
|
116
|
+
state.action.className = getSlotStyles('action');
|
|
83
117
|
}
|
|
84
118
|
return state;
|
|
85
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","B7frvx2","B06c7xf","B8uq84v","snkdo8","Bpf22ct","apjfyd","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n const getSlotStyles = (slotName)=>{\n var _state_slotName;\n return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);\n };\n state.root.className = getSlotStyles('root');\n if (state.image) {\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n state.action.className = getSlotStyles('action');\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -33,8 +33,6 @@ const cardHeaderCSSVars = {
|
|
|
33
33
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
34
34
|
root: {
|
|
35
35
|
Bkc6ea2: "fkufhic",
|
|
36
|
-
mc9l5x: "f13qh94s",
|
|
37
|
-
t4k1zu: "f8a668j",
|
|
38
36
|
Bt984gj: "f122n59"
|
|
39
37
|
},
|
|
40
38
|
image: {
|
|
@@ -42,18 +40,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
42
40
|
t21cq0: [
|
|
43
41
|
"fql5097",
|
|
44
42
|
"f6yss9k"
|
|
45
|
-
]
|
|
46
|
-
Br312pm: "fwpfdsa",
|
|
47
|
-
Ijaq50: "fldnz9j"
|
|
43
|
+
]
|
|
48
44
|
},
|
|
49
45
|
header: {
|
|
50
|
-
Br312pm: "fd46tj4",
|
|
51
|
-
Ijaq50: "f16hsg94",
|
|
52
46
|
mc9l5x: "f22iagw"
|
|
53
47
|
},
|
|
54
48
|
description: {
|
|
55
|
-
Br312pm: "fd46tj4",
|
|
56
|
-
Ijaq50: "faunodf",
|
|
57
49
|
mc9l5x: "f22iagw"
|
|
58
50
|
},
|
|
59
51
|
action: {
|
|
@@ -61,8 +53,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
61
53
|
"f6yss9k",
|
|
62
54
|
"fql5097"
|
|
63
55
|
],
|
|
64
|
-
Br312pm: "fis13di",
|
|
65
|
-
Ijaq50: "fldnz9j",
|
|
66
56
|
B7frvx2: "f1ndzpm5",
|
|
67
57
|
B06c7xf: [
|
|
68
58
|
"f1fkeggc",
|
|
@@ -79,19 +69,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
79
69
|
}, {
|
|
80
70
|
d: [
|
|
81
71
|
".fkufhic{--fui-CardHeader--gap:12px;}",
|
|
82
|
-
".f13qh94s{display:grid;}",
|
|
83
|
-
".f8a668j{grid-auto-columns:min-content 1fr min-content;}",
|
|
84
72
|
".f122n59{align-items:center;}",
|
|
85
73
|
".ftuwxu6{display:inline-flex;}",
|
|
86
74
|
".fql5097{margin-right:var(--fui-CardHeader--gap);}",
|
|
87
75
|
".f6yss9k{margin-left:var(--fui-CardHeader--gap);}",
|
|
88
|
-
".
|
|
89
|
-
".fldnz9j{grid-row-start:span 2;}",
|
|
90
|
-
".fd46tj4{grid-column-start:2;}",
|
|
91
|
-
".f16hsg94{grid-row-start:1;}",
|
|
92
|
-
".f22iagw{display:flex;}",
|
|
93
|
-
".faunodf{grid-row-start:2;}",
|
|
94
|
-
".fis13di{grid-column-start:3;}"
|
|
76
|
+
".f22iagw{display:flex;}"
|
|
95
77
|
],
|
|
96
78
|
m: [
|
|
97
79
|
[
|
|
@@ -126,20 +108,76 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
126
108
|
]
|
|
127
109
|
]
|
|
128
110
|
});
|
|
111
|
+
const useStylesGrid = /*#__PURE__*/ (0, _react.__styles)({
|
|
112
|
+
root: {
|
|
113
|
+
mc9l5x: "f13qh94s",
|
|
114
|
+
t4k1zu: "f8a668j"
|
|
115
|
+
},
|
|
116
|
+
image: {
|
|
117
|
+
Br312pm: "fwpfdsa",
|
|
118
|
+
Ijaq50: "fldnz9j"
|
|
119
|
+
},
|
|
120
|
+
header: {
|
|
121
|
+
Br312pm: "fd46tj4",
|
|
122
|
+
Ijaq50: "f16hsg94"
|
|
123
|
+
},
|
|
124
|
+
description: {
|
|
125
|
+
Br312pm: "fd46tj4",
|
|
126
|
+
Ijaq50: "faunodf"
|
|
127
|
+
},
|
|
128
|
+
action: {
|
|
129
|
+
Br312pm: "fis13di",
|
|
130
|
+
Ijaq50: "fldnz9j"
|
|
131
|
+
}
|
|
132
|
+
}, {
|
|
133
|
+
d: [
|
|
134
|
+
".f13qh94s{display:grid;}",
|
|
135
|
+
".f8a668j{grid-auto-columns:min-content 1fr min-content;}",
|
|
136
|
+
".fwpfdsa{grid-column-start:1;}",
|
|
137
|
+
".fldnz9j{grid-row-start:span 2;}",
|
|
138
|
+
".fd46tj4{grid-column-start:2;}",
|
|
139
|
+
".f16hsg94{grid-row-start:1;}",
|
|
140
|
+
".faunodf{grid-row-start:2;}",
|
|
141
|
+
".fis13di{grid-column-start:3;}"
|
|
142
|
+
]
|
|
143
|
+
});
|
|
144
|
+
const useStylesFlex = /*#__PURE__*/ (0, _react.__styles)({
|
|
145
|
+
root: {
|
|
146
|
+
mc9l5x: "f22iagw"
|
|
147
|
+
},
|
|
148
|
+
header: {
|
|
149
|
+
Bh6795r: "fqerorx"
|
|
150
|
+
},
|
|
151
|
+
image: {},
|
|
152
|
+
description: {},
|
|
153
|
+
action: {}
|
|
154
|
+
}, {
|
|
155
|
+
d: [
|
|
156
|
+
".f22iagw{display:flex;}",
|
|
157
|
+
".fqerorx{flex-grow:1;}"
|
|
158
|
+
]
|
|
159
|
+
});
|
|
129
160
|
const useCardHeaderStyles_unstable = (state)=>{
|
|
130
161
|
const styles = useStyles();
|
|
131
|
-
|
|
162
|
+
const stylesGrid = useStylesGrid();
|
|
163
|
+
const stylesFlex = useStylesFlex();
|
|
164
|
+
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
|
|
165
|
+
const getSlotStyles = (slotName)=>{
|
|
166
|
+
var _state_slotName;
|
|
167
|
+
return (0, _react.mergeClasses)(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
|
|
168
|
+
};
|
|
169
|
+
state.root.className = getSlotStyles('root');
|
|
132
170
|
if (state.image) {
|
|
133
|
-
state.image.className = (
|
|
171
|
+
state.image.className = getSlotStyles('image');
|
|
134
172
|
}
|
|
135
173
|
if (state.header) {
|
|
136
|
-
state.header.className = (
|
|
174
|
+
state.header.className = getSlotStyles('header');
|
|
137
175
|
}
|
|
138
176
|
if (state.description) {
|
|
139
|
-
state.description.className = (
|
|
177
|
+
state.description.className = getSlotStyles('description');
|
|
140
178
|
}
|
|
141
179
|
if (state.action) {
|
|
142
|
-
state.action.className = (
|
|
180
|
+
state.action.className = getSlotStyles('action');
|
|
143
181
|
}
|
|
144
182
|
return state;
|
|
145
183
|
}; //# sourceMappingURL=useCardHeaderStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n Bkc6ea2: \"fkufhic\",\n
|
|
1
|
+
{"version":3,"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n Bkc6ea2: \"fkufhic\",\n Bt984gj: \"f122n59\"\n },\n image: {\n mc9l5x: \"ftuwxu6\",\n t21cq0: [\"fql5097\", \"f6yss9k\"]\n },\n header: {\n mc9l5x: \"f22iagw\"\n },\n description: {\n mc9l5x: \"f22iagw\"\n },\n action: {\n Frg6f3: [\"f6yss9k\", \"fql5097\"],\n B7frvx2: \"f1ndzpm5\",\n B06c7xf: [\"f1fkeggc\", \"f1u45u6i\"],\n B8uq84v: \"f16eyofs\",\n snkdo8: [\"f1u45u6i\", \"f1fkeggc\"],\n Bpf22ct: \"f1wkmkig\",\n apjfyd: \"f18alut9\"\n }\n}, {\n d: [\".fkufhic{--fui-CardHeader--gap:12px;}\", \".f122n59{align-items:center;}\", \".ftuwxu6{display:inline-flex;}\", \".fql5097{margin-right:var(--fui-CardHeader--gap);}\", \".f6yss9k{margin-left:var(--fui-CardHeader--gap);}\", \".f22iagw{display:flex;}\"],\n m: [[\"@media (forced-colors: active){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f16eyofs .fui-Button,.f16eyofs .fui-Link{border-bottom-color:currentColor;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f1wkmkig .fui-Button,.f1wkmkig .fui-Link{color:currentColor;}}\", {\n m: \"(forced-colors: active)\"\n }], [\"@media (forced-colors: active){.f18alut9 .fui-Button,.f18alut9 .fui-Link{outline-color:currentColor;}}\", {\n m: \"(forced-colors: active)\"\n }]]\n});\nconst useStylesGrid = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f13qh94s\",\n t4k1zu: \"f8a668j\"\n },\n image: {\n Br312pm: \"fwpfdsa\",\n Ijaq50: \"fldnz9j\"\n },\n header: {\n Br312pm: \"fd46tj4\",\n Ijaq50: \"f16hsg94\"\n },\n description: {\n Br312pm: \"fd46tj4\",\n Ijaq50: \"faunodf\"\n },\n action: {\n Br312pm: \"fis13di\",\n Ijaq50: \"fldnz9j\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f8a668j{grid-auto-columns:min-content 1fr min-content;}\", \".fwpfdsa{grid-column-start:1;}\", \".fldnz9j{grid-row-start:span 2;}\", \".fd46tj4{grid-column-start:2;}\", \".f16hsg94{grid-row-start:1;}\", \".faunodf{grid-row-start:2;}\", \".fis13di{grid-column-start:3;}\"]\n});\nconst useStylesFlex = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\"\n },\n header: {\n Bh6795r: \"fqerorx\"\n },\n image: {},\n description: {},\n action: {}\n}, {\n d: [\".f22iagw{display:flex;}\", \".fqerorx{flex-grow:1;}\"]\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = state => {\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n const getSlotStyles = slotName => {\n var _state_slotName;\n return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);\n };\n state.root.className = getSlotStyles('root');\n if (state.image) {\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n state.action.className = getSlotStyles('action');\n }\n return state;\n};\n//# sourceMappingURL=useCardHeaderStyles.styles.js.map"],"names":["cardHeaderClassNames","cardHeaderCSSVars","useCardHeaderStyles_unstable","root","image","header","description","action","cardHeaderGapVar","useStyles","__styles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","B7frvx2","B06c7xf","B8uq84v","snkdo8","Bpf22ct","apjfyd","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","mergeClasses","className"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.84",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
42
|
+
"@fluentui/react-tabster": "^9.22.0",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.19",
|
|
44
44
|
"@fluentui/react-utilities": "^9.18.10",
|
|
45
45
|
"@fluentui/react-jsx-runtime": "^9.0.39",
|