@fluentui-copilot/react-preview 0.4.4 → 0.5.0
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 +32 -1
- package/CHANGELOG.md +15 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/Preview/Preview.types.js.map +1 -1
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js +38 -7
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Preview/Preview.types.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,7 +2,38 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-preview",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 20 Jun 2024 23:05:26 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-preview_v0.5.0",
|
|
7
|
+
"version": "0.5.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-preview",
|
|
13
|
+
"commit": "b8a46e43b66fa17ed3cbb98a57171f9805ca5801",
|
|
14
|
+
"comment": "fix: failing e2e tests after playwright/test dependency update to v1.44.0."
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
20
|
+
"package": "@fluentui-copilot/react-preview",
|
|
21
|
+
"commit": "600da249375e1f5fb25fce0a605dbdd9a8a05469",
|
|
22
|
+
"comment": "fix: Fixing PreviewHeader styles so that extra gaps are not present when a slot is empty."
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"minor": [
|
|
26
|
+
{
|
|
27
|
+
"author": "makotom@microsoft.com",
|
|
28
|
+
"package": "@fluentui-copilot/react-preview",
|
|
29
|
+
"commit": "c00fc7a3d5067bbbd8759812cdb6f3a19781dde3",
|
|
30
|
+
"comment": "fix(Preview): Removing mouseLeaveDelay and openOnHover props that were leaking from Popover props."
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"date": "Thu, 13 Jun 2024 21:00:45 GMT",
|
|
6
37
|
"tag": "@fluentui-copilot/react-preview_v0.4.4",
|
|
7
38
|
"version": "0.4.4",
|
|
8
39
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 20 Jun 2024 23:05:26 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.5.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.5.0)
|
|
8
|
+
|
|
9
|
+
Thu, 20 Jun 2024 23:05:26 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.4.4..@fluentui-copilot/react-preview_v0.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- fix(Preview): Removing mouseLeaveDelay and openOnHover props that were leaking from Popover props. ([PR #1728](https://github.com/microsoft/fluentai/pull/1728) by makotom@microsoft.com)
|
|
15
|
+
|
|
16
|
+
### Patches
|
|
17
|
+
|
|
18
|
+
- fix: Fixing PreviewHeader styles so that extra gaps are not present when a slot is empty. ([PR #1741](https://github.com/microsoft/fluentai/pull/1741) by Humberto.Morimoto@microsoft.com)
|
|
19
|
+
|
|
7
20
|
## [0.4.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.4.4)
|
|
8
21
|
|
|
9
|
-
Thu, 13 Jun 2024 21:00:
|
|
22
|
+
Thu, 13 Jun 2024 21:00:45 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.4.3..@fluentui-copilot/react-preview_v0.4.4)
|
|
11
24
|
|
|
12
25
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -119,7 +119,7 @@ export declare type PreviewMetadataState = ComponentState<PreviewMetadataSlots>;
|
|
|
119
119
|
/**
|
|
120
120
|
* Preview Props
|
|
121
121
|
*/
|
|
122
|
-
export declare type PreviewProps = PopoverProps
|
|
122
|
+
export declare type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;
|
|
123
123
|
|
|
124
124
|
/**
|
|
125
125
|
* State used in rendering Preview
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = PopoverProps
|
|
1
|
+
{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;\n\n/**\n * State used in rendering Preview\n */\nexport type PreviewState = PopoverState & {\n /**\n * Whether the Preview was opened by click or keyboard and is therefore locked until intentional interaction to close it.\n */\n isPreviewLocked: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAOA;;CAEC,GACD,WAKE"}
|
|
@@ -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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = PopoverProps
|
|
1
|
+
{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;\n\n/**\n * State used in rendering Preview\n */\nexport type PreviewState = PopoverState & {\n /**\n * Whether the Preview was opened by click or keyboard and is therefore locked until intentional interaction to close it.\n */\n isPreviewLocked: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAOA;;CAEC"}
|
|
@@ -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"}
|