@fluentui-copilot/react-preview 0.0.0-nightly-20240618-0404-c00fc7a3.1 → 0.0.0-nightly-20240620-0404-740e30ec.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +3 -3
- package/CHANGELOG.md +4 -4
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js +38 -7
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js +50 -12
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-preview",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-preview_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 20 Jun 2024 04:10:59 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-preview_v0.0.0-nightly-20240620-0404-740e30ec.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240620-0404-740e30ec.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 20 Jun 2024 04:10:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240620-0404-740e30ec.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.0.0-nightly-20240620-0404-740e30ec.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.4.4..@fluentui-copilot/react-preview_v0.0.0-nightly-
|
|
9
|
+
Thu, 20 Jun 2024 04:10:59 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.4.4..@fluentui-copilot/react-preview_v0.0.0-nightly-20240620-0404-740e30ec.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
export const previewHeaderClassNames = {
|
|
3
3
|
root: 'fai-PreviewHeader',
|
|
4
4
|
actions: 'fai-PreviewHeader__actions',
|
|
@@ -11,11 +11,35 @@ export const previewHeaderExtraClassNames = {
|
|
|
11
11
|
};
|
|
12
12
|
const labelFontSize = typographyStyles.caption1Strong.fontSize;
|
|
13
13
|
const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
|
|
14
|
-
const useActionsBaseClassName = __resetStyles("
|
|
15
|
-
const useCitationBaseClassName = __resetStyles("
|
|
16
|
-
const useLabelBaseClassName = __resetStyles("
|
|
17
|
-
const useMediaBaseClassName = __resetStyles("
|
|
18
|
-
const useRootBaseClassName = __resetStyles("
|
|
14
|
+
const useActionsBaseClassName = __resetStyles("ry18yy9", null, [".ry18yy9{grid-row:1;justify-self:end;}"]);
|
|
15
|
+
const useCitationBaseClassName = __resetStyles("ry1eqmj", null, [".ry1eqmj{grid-row:1;}"]);
|
|
16
|
+
const useLabelBaseClassName = __resetStyles("r1tp8fqc", null, [".r1tp8fqc{align-self:start;display:-webkit-box;grid-row:1/3;overflow-y:hidden;padding-top:calc((16px / 2) - (var(--lineHeightBase200) - var(--fontSizeBase200)));word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);}"]);
|
|
17
|
+
const useMediaBaseClassName = __resetStyles("rcisese", null, [".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}", ".rcisese>.fai-PreviewHeader__mediaChild{height:16px;width:16px;}"]);
|
|
18
|
+
const useRootBaseClassName = __resetStyles("r1xjnine", null, [".r1xjnine{align-items:center;column-gap:var(--spacingHorizontalXS);display:grid;grid-template-rows:24px;}"]);
|
|
19
|
+
// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions
|
|
20
|
+
// based on the slots present, we need to conditionally set the grid template columns based on the slots present.
|
|
21
|
+
const useRootStyles = __styles({
|
|
22
|
+
onlyLabel: {
|
|
23
|
+
Budl1dq: "f1c2z91y"
|
|
24
|
+
},
|
|
25
|
+
previousAndLabel: {
|
|
26
|
+
Budl1dq: "f157hhv8"
|
|
27
|
+
},
|
|
28
|
+
labelAndActions: {
|
|
29
|
+
Budl1dq: "fkdjblp"
|
|
30
|
+
},
|
|
31
|
+
citationMediaLabel: {
|
|
32
|
+
Budl1dq: "f1ydiic3"
|
|
33
|
+
},
|
|
34
|
+
previousLabelActions: {
|
|
35
|
+
Budl1dq: "fn2gjqi"
|
|
36
|
+
},
|
|
37
|
+
all: {
|
|
38
|
+
Budl1dq: "f10lv8pf"
|
|
39
|
+
}
|
|
40
|
+
}, {
|
|
41
|
+
d: [".f1c2z91y{grid-template-columns:1fr;}", ".f157hhv8{grid-template-columns:min-content 1fr;}", ".fkdjblp{grid-template-columns:1fr min-content;}", ".f1ydiic3{grid-template-columns:min-content min-content 1fr;}", ".fn2gjqi{grid-template-columns:min-content 1fr min-content;}", ".f10lv8pf{grid-template-columns:min-content min-content 1fr min-content;}"]
|
|
42
|
+
});
|
|
19
43
|
/**
|
|
20
44
|
* Apply styling to the PreviewHeader slots based on the state
|
|
21
45
|
*/
|
|
@@ -27,17 +51,24 @@ export const usePreviewHeaderStyles_unstable = state => {
|
|
|
27
51
|
const labelBaseClassName = useLabelBaseClassName();
|
|
28
52
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
29
53
|
const rootBaseClassName = useRootBaseClassName();
|
|
30
|
-
|
|
54
|
+
const rootStyles = useRootStyles();
|
|
55
|
+
let actionsPresent = false;
|
|
31
56
|
if (state.actions) {
|
|
57
|
+
actionsPresent = true;
|
|
32
58
|
state.actions.className = mergeClasses(previewHeaderClassNames.actions, actionsBaseClassName, state.actions.className);
|
|
33
59
|
}
|
|
60
|
+
let citationPresent = false;
|
|
34
61
|
if (state.citation) {
|
|
62
|
+
citationPresent = true;
|
|
35
63
|
state.citation.className = mergeClasses(previewHeaderClassNames.citation, citationBaseClassName, state.citation.className);
|
|
36
64
|
}
|
|
37
65
|
state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);
|
|
66
|
+
let mediaPresent = false;
|
|
38
67
|
if (state.media) {
|
|
68
|
+
mediaPresent = true;
|
|
39
69
|
state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);
|
|
40
70
|
}
|
|
71
|
+
state.root.className = mergeClasses(previewHeaderClassNames.root, rootBaseClassName, !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && !actionsPresent && rootStyles.previousAndLabel, !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions, citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && actionsPresent && rootStyles.previousLabelActions, citationPresent && mediaPresent && actionsPresent && rootStyles.all, state.root.className);
|
|
41
72
|
return state;
|
|
42
73
|
};
|
|
43
74
|
//# sourceMappingURL=usePreviewHeaderStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n root: 'fai-PreviewHeader',\n actions: 'fai-PreviewHeader__actions',\n citation: 'fai-PreviewHeader__citation',\n label: 'fai-PreviewHeader__label',\n media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n
|
|
1
|
+
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n root: 'fai-PreviewHeader',\n actions: 'fai-PreviewHeader__actions',\n citation: 'fai-PreviewHeader__citation',\n label: 'fai-PreviewHeader__label',\n media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n gridRow: 1,\n justifySelf: 'end',\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n gridRow: 1,\n});\n\nconst useLabelBaseClassName = makeResetStyles({\n alignSelf: 'start',\n display: '-webkit-box',\n gridRow: '1 / 3',\n overflowY: 'hidden',\n // 16px is the height of the tallest element within the preview header\n paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,\n wordBreak: 'break-word',\n\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n\n ...typographyStyles.caption1Strong,\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n gridRow: 1,\n height: '16px',\n lineHeight: 0,\n width: '16px',\n\n [`> .${previewHeaderExtraClassNames.mediaChild}`]: {\n height: '16px',\n width: '16px',\n },\n});\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXS,\n display: 'grid',\n gridTemplateRows: '24px',\n});\n\n// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions\n// based on the slots present, we need to conditionally set the grid template columns based on the slots present.\nconst useRootStyles = makeStyles({\n onlyLabel: {\n gridTemplateColumns: '1fr',\n },\n previousAndLabel: {\n gridTemplateColumns: 'min-content 1fr',\n },\n labelAndActions: {\n gridTemplateColumns: '1fr min-content',\n },\n citationMediaLabel: {\n gridTemplateColumns: 'min-content min-content 1fr',\n },\n previousLabelActions: {\n gridTemplateColumns: 'min-content 1fr min-content',\n },\n all: {\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n },\n});\n\n/**\n * Apply styling to the PreviewHeader slots based on the state\n */\nexport const usePreviewHeaderStyles_unstable = (state: PreviewHeaderState): PreviewHeaderState => {\n 'use no memo';\n\n const actionsBaseClassName = useActionsBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const labelBaseClassName = useLabelBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n let actionsPresent = false;\n if (state.actions) {\n actionsPresent = true;\n state.actions.className = mergeClasses(\n previewHeaderClassNames.actions,\n actionsBaseClassName,\n state.actions.className,\n );\n }\n\n let citationPresent = false;\n if (state.citation) {\n citationPresent = true;\n state.citation.className = mergeClasses(\n previewHeaderClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);\n\n let mediaPresent = false;\n if (state.media) {\n mediaPresent = true;\n state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.root.className = mergeClasses(\n previewHeaderClassNames.root,\n rootBaseClassName,\n !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n !actionsPresent &&\n rootStyles.previousAndLabel,\n !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions,\n citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n actionsPresent &&\n rootStyles.previousLabelActions,\n citationPresent && mediaPresent && actionsPresent && rootStyles.all,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","previewHeaderClassNames","root","actions","citation","label","media","previewHeaderExtraClassNames","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","useActionsBaseClassName","gridRow","justifySelf","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","overflowY","paddingTop","wordBreak","useMediaBaseClassName","height","width","useRootBaseClassName","alignItems","columnGap","spacingHorizontalXS","gridTemplateRows","useRootStyles","onlyLabel","gridTemplateColumns","previousAndLabel","labelAndActions","citationMediaLabel","previousLabelActions","all","usePreviewHeaderStyles_unstable","state","actionsBaseClassName","citationBaseClassName","labelBaseClassName","mediaBaseClassName","rootBaseClassName","rootStyles","actionsPresent","className","citationPresent","mediaPresent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -32,22 +32,53 @@ const previewHeaderExtraClassNames = {
|
|
|
32
32
|
};
|
|
33
33
|
const labelFontSize = _reactcomponents.typographyStyles.caption1Strong.fontSize;
|
|
34
34
|
const labelLineHeight = _reactcomponents.typographyStyles.caption1Strong.lineHeight;
|
|
35
|
-
const useActionsBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
36
|
-
".
|
|
35
|
+
const useActionsBaseClassName = (0, _reactcomponents.__resetStyles)("ry18yy9", null, [
|
|
36
|
+
".ry18yy9{grid-row:1;justify-self:end;}"
|
|
37
37
|
]);
|
|
38
|
-
const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
39
|
-
".
|
|
38
|
+
const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("ry1eqmj", null, [
|
|
39
|
+
".ry1eqmj{grid-row:1;}"
|
|
40
40
|
]);
|
|
41
|
-
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
42
|
-
".
|
|
41
|
+
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("r1tp8fqc", null, [
|
|
42
|
+
".r1tp8fqc{align-self:start;display:-webkit-box;grid-row:1/3;overflow-y:hidden;padding-top:calc((16px / 2) - (var(--lineHeightBase200) - var(--fontSizeBase200)));word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);}"
|
|
43
43
|
]);
|
|
44
|
-
const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
45
|
-
".
|
|
46
|
-
".
|
|
44
|
+
const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("rcisese", null, [
|
|
45
|
+
".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}",
|
|
46
|
+
".rcisese>.fai-PreviewHeader__mediaChild{height:16px;width:16px;}"
|
|
47
47
|
]);
|
|
48
|
-
const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
49
|
-
".
|
|
48
|
+
const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1xjnine", null, [
|
|
49
|
+
".r1xjnine{align-items:center;column-gap:var(--spacingHorizontalXS);display:grid;grid-template-rows:24px;}"
|
|
50
50
|
]);
|
|
51
|
+
// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions
|
|
52
|
+
// based on the slots present, we need to conditionally set the grid template columns based on the slots present.
|
|
53
|
+
const useRootStyles = (0, _reactcomponents.__styles)({
|
|
54
|
+
onlyLabel: {
|
|
55
|
+
Budl1dq: "f1c2z91y"
|
|
56
|
+
},
|
|
57
|
+
previousAndLabel: {
|
|
58
|
+
Budl1dq: "f157hhv8"
|
|
59
|
+
},
|
|
60
|
+
labelAndActions: {
|
|
61
|
+
Budl1dq: "fkdjblp"
|
|
62
|
+
},
|
|
63
|
+
citationMediaLabel: {
|
|
64
|
+
Budl1dq: "f1ydiic3"
|
|
65
|
+
},
|
|
66
|
+
previousLabelActions: {
|
|
67
|
+
Budl1dq: "fn2gjqi"
|
|
68
|
+
},
|
|
69
|
+
all: {
|
|
70
|
+
Budl1dq: "f10lv8pf"
|
|
71
|
+
}
|
|
72
|
+
}, {
|
|
73
|
+
d: [
|
|
74
|
+
".f1c2z91y{grid-template-columns:1fr;}",
|
|
75
|
+
".f157hhv8{grid-template-columns:min-content 1fr;}",
|
|
76
|
+
".fkdjblp{grid-template-columns:1fr min-content;}",
|
|
77
|
+
".f1ydiic3{grid-template-columns:min-content min-content 1fr;}",
|
|
78
|
+
".fn2gjqi{grid-template-columns:min-content 1fr min-content;}",
|
|
79
|
+
".f10lv8pf{grid-template-columns:min-content min-content 1fr min-content;}"
|
|
80
|
+
]
|
|
81
|
+
});
|
|
51
82
|
const usePreviewHeaderStyles_unstable = (state)=>{
|
|
52
83
|
'use no memo';
|
|
53
84
|
const actionsBaseClassName = useActionsBaseClassName();
|
|
@@ -55,16 +86,23 @@ const usePreviewHeaderStyles_unstable = (state)=>{
|
|
|
55
86
|
const labelBaseClassName = useLabelBaseClassName();
|
|
56
87
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
57
88
|
const rootBaseClassName = useRootBaseClassName();
|
|
58
|
-
|
|
89
|
+
const rootStyles = useRootStyles();
|
|
90
|
+
let actionsPresent = false;
|
|
59
91
|
if (state.actions) {
|
|
92
|
+
actionsPresent = true;
|
|
60
93
|
state.actions.className = (0, _reactcomponents.mergeClasses)(previewHeaderClassNames.actions, actionsBaseClassName, state.actions.className);
|
|
61
94
|
}
|
|
95
|
+
let citationPresent = false;
|
|
62
96
|
if (state.citation) {
|
|
97
|
+
citationPresent = true;
|
|
63
98
|
state.citation.className = (0, _reactcomponents.mergeClasses)(previewHeaderClassNames.citation, citationBaseClassName, state.citation.className);
|
|
64
99
|
}
|
|
65
100
|
state.label.className = (0, _reactcomponents.mergeClasses)(previewHeaderClassNames.label, labelBaseClassName, state.label.className);
|
|
101
|
+
let mediaPresent = false;
|
|
66
102
|
if (state.media) {
|
|
103
|
+
mediaPresent = true;
|
|
67
104
|
state.media.className = (0, _reactcomponents.mergeClasses)(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);
|
|
68
105
|
}
|
|
106
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(previewHeaderClassNames.root, rootBaseClassName, !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && !actionsPresent && rootStyles.previousAndLabel, !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions, citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && actionsPresent && rootStyles.previousLabelActions, citationPresent && mediaPresent && actionsPresent && rootStyles.all, state.root.className);
|
|
69
107
|
return state;
|
|
70
108
|
}; //# sourceMappingURL=usePreviewHeaderStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n root: 'fai-PreviewHeader',\n actions: 'fai-PreviewHeader__actions',\n citation: 'fai-PreviewHeader__citation',\n label: 'fai-PreviewHeader__label',\n media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n
|
|
1
|
+
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n root: 'fai-PreviewHeader',\n actions: 'fai-PreviewHeader__actions',\n citation: 'fai-PreviewHeader__citation',\n label: 'fai-PreviewHeader__label',\n media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n gridRow: 1,\n justifySelf: 'end',\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n gridRow: 1,\n});\n\nconst useLabelBaseClassName = makeResetStyles({\n alignSelf: 'start',\n display: '-webkit-box',\n gridRow: '1 / 3',\n overflowY: 'hidden',\n // 16px is the height of the tallest element within the preview header\n paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,\n wordBreak: 'break-word',\n\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n\n ...typographyStyles.caption1Strong,\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n gridRow: 1,\n height: '16px',\n lineHeight: 0,\n width: '16px',\n\n [`> .${previewHeaderExtraClassNames.mediaChild}`]: {\n height: '16px',\n width: '16px',\n },\n});\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXS,\n display: 'grid',\n gridTemplateRows: '24px',\n});\n\n// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions\n// based on the slots present, we need to conditionally set the grid template columns based on the slots present.\nconst useRootStyles = makeStyles({\n onlyLabel: {\n gridTemplateColumns: '1fr',\n },\n previousAndLabel: {\n gridTemplateColumns: 'min-content 1fr',\n },\n labelAndActions: {\n gridTemplateColumns: '1fr min-content',\n },\n citationMediaLabel: {\n gridTemplateColumns: 'min-content min-content 1fr',\n },\n previousLabelActions: {\n gridTemplateColumns: 'min-content 1fr min-content',\n },\n all: {\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n },\n});\n\n/**\n * Apply styling to the PreviewHeader slots based on the state\n */\nexport const usePreviewHeaderStyles_unstable = (state: PreviewHeaderState): PreviewHeaderState => {\n 'use no memo';\n\n const actionsBaseClassName = useActionsBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const labelBaseClassName = useLabelBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n let actionsPresent = false;\n if (state.actions) {\n actionsPresent = true;\n state.actions.className = mergeClasses(\n previewHeaderClassNames.actions,\n actionsBaseClassName,\n state.actions.className,\n );\n }\n\n let citationPresent = false;\n if (state.citation) {\n citationPresent = true;\n state.citation.className = mergeClasses(\n previewHeaderClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);\n\n let mediaPresent = false;\n if (state.media) {\n mediaPresent = true;\n state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.root.className = mergeClasses(\n previewHeaderClassNames.root,\n rootBaseClassName,\n !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n !actionsPresent &&\n rootStyles.previousAndLabel,\n !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions,\n citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n actionsPresent &&\n rootStyles.previousLabelActions,\n citationPresent && mediaPresent && actionsPresent && rootStyles.all,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["previewHeaderClassNames","previewHeaderExtraClassNames","usePreviewHeaderStyles_unstable","root","actions","citation","label","media","mediaChild","labelFontSize","typographyStyles","caption1Strong","fontSize","labelLineHeight","lineHeight","useActionsBaseClassName","makeResetStyles","gridRow","__resetStyles","justifySelf","useMediaBaseClassName","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","Budl1dq","height","width","state","actionsBaseClassName","citationBaseClassName","useRootStyles","makeStyles","onlyLabel","gridTemplateColumns","rootStyles","previousAndLabel","actionsPresent","labelAndActions","mergeClasses","className","citationPresent","citationMediaLabel","labelBaseClassName","mediaPresent","all","mediaBaseClassName","rootBaseClassName","previousLabelActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAQAC,4BAAAA;eAAAA;;IA8CFC,+BAAA;eAAAA;;;iCA1DiE;AAIrE,MAAMF,0BAA8D;UACzEG;aACAC;cACAC;WACAC;WACAC;AACF;AAEO,MAAMN,+BAA+B;gBAC1CO;AACF;AAEA,MAAMC,gBAAgBC,iCAAAA,CAAiBC,cAAc,CAACC,QAAQ;AAC9D,MAAMC,kBAAkBH,iCAAAA,CAAiBC,cAAc,CAACG,UAAU;AAElE,MAAMC,0BAA0BC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;IAAA;CAAA;MAC9CC,2BAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,wBAAaD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;AACf,MAAAE,wBAAAF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AAEA,MAAMG,uBAAAA,IAAAA,8BAA2BL,EAAAA,YAAgB,MAAA;IAAA;CAAA;yHACtC;AACX,iHAAA;AAEA,MAAMM,gBAAAA,IAAAA,yBAAwBN,EAAAA;eAC5BO;QACAC,SAAS;;sBAEE;QACXC,SAAA;;qBAEW;QAEXA,SAAA;;wBAGGf;QACLe,SAAA;IAEA;0BACW;QACTC,SAAQ;;SAERC;QAEAF,SAAOxB;;;OAGP;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AACF;AAKEuB,MAAStB,kCAAA0B,CAAAA;;IAIX,MAAAC,uBAAAd;IACA,MAAAe,wBAAAT;IACA,MAAMU,qBAAgBC;UACpBC,qBAAWb;UACTc,oBAAAA;UACFC,aAAAJ;QACAK,iBAAkB;cAChBF,OAAAA,EAAAA;QACFG,iBAAA;QACAC,MAAAA,OAAAA,CAAAA,SAAiB,GAAAC,IAAAA,6BAAA,EAAAvC,wBAAAI,OAAA,EAAAyB,sBAAAD,MAAAxB,OAAA,CAAAoC,SAAA;;QAEjBC,kBAAA;QACAC,MAAAA,QAAAA,EAAAA;0BACER;QACFN,MAAAvB,QAAA,CAAAmC,SAAA,GAAAD,IAAAA,6BAAA,EAAAvC,wBAAAK,QAAA,EAAAyB,uBAAAF,MAAAvB,QAAA,CAAAmC,SAAA;;UAEEN,KAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAAqB,EAAAlC,wBAAAM,KAAA,EAAAqC,oBAAAf,MAAAtB,KAAA,CAAAkC,SAAA;QACvBI,eAAA;QACAC,MAAKtC,KAAA,EAAA;uBACH2B;QACFN,MAAArB,KAAA,CAAAiC,SAAA,GAAAD,IAAAA,6BAAA,EAAAvC,wBAAAO,KAAA,EAAAuC,oBAAAlB,MAAArB,KAAA,CAAAiC,SAAA;IACF;IAEAZ,MAAAzB,IAAA,CAAAqC,SAAA,GAAAD,IAAAA,6BAAA,EAAAvC,wBAAAG,IAAA,EAAA4C,mBAAA,CAAAN,mBAAA,CAAAG,gBAAA,CAAAP,kBAAAF,WAAAF,SAAA,EAAA,AAAAQ,CAAAA,mBAAA,CAAAG,gBAAAA,gBAAA,CAAAH,eAAA,KAAA,CAAAJ,kBAAAF,WAAAC,gBAAA,EAAA,CAAAK,mBAAA,CAAAG,gBAAAP,kBAAAF,WAAAG,eAAA,EAAAG,mBAAAG,gBAAA,CAAAP,kBAAAF,WAAAO,kBAAA,EAAA,AAAAD,CAAAA,mBAAA,CAAAG,gBAAAA,gBAAA,CAAAH,eAAA,KAAAJ,kBAAAF,WAAAa,oBAAA,EAAAP,mBAAAG,gBAAAP,kBAAAF,WAAAU,GAAA,EAAAjB,MAAAzB,IAAA,CAAAqC,SAAA;;4DAIE"}
|
package/package.json
CHANGED