@fluentui-copilot/react-preview 0.7.3 → 0.8.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 +39 -1
- package/CHANGELOG.md +20 -2
- package/lib/components/PreviewContent/usePreviewContentStyles.styles.js +2 -2
- package/lib/components/PreviewContent/usePreviewContentStyles.styles.js.map +1 -1
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js +2 -2
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js +5 -2
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,45 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-preview",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 12 Jun 2025 17:49:28 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-preview_v0.8.0",
|
|
7
|
+
"version": "0.8.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-preview",
|
|
13
|
+
"commit": "53a6e5419e6170dea520ebec933d347ce0bedb60",
|
|
14
|
+
"comment": "chore: Update typographyStyles import to use @fluentui-copilot/tokens instead of @fluentui/react-components"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Mon, 19 May 2025 18:04:28 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-preview_v0.7.4",
|
|
22
|
+
"version": "0.7.4",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-preview",
|
|
28
|
+
"commit": "5f102f2e0c314897038ea0a9b2319cad70ee1c67",
|
|
29
|
+
"comment": "fix: Adding correct styles when Links are used as the label of a PreviewHeader."
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"none": [
|
|
33
|
+
{
|
|
34
|
+
"author": "hochelmartin@gmail.com",
|
|
35
|
+
"package": "@fluentui-copilot/react-preview",
|
|
36
|
+
"commit": "442954951d0eca92de20ecb0ff0fa9492431b62d",
|
|
37
|
+
"comment": "fix: exclude story files from production build"
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"date": "Sat, 03 May 2025 01:27:44 GMT",
|
|
6
44
|
"tag": "@fluentui-copilot/react-preview_v0.7.3",
|
|
7
45
|
"version": "0.7.3",
|
|
8
46
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
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, 12 Jun 2025 17:49:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.8.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.8.0)
|
|
8
|
+
|
|
9
|
+
Thu, 12 Jun 2025 17:49:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.7.4..@fluentui-copilot/react-preview_v0.8.0)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update typographyStyles import to use @fluentui-copilot/tokens instead of @fluentui/react-components ([PR #3125](https://github.com/microsoft/fluentai/pull/3125) by Humberto.Morimoto@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [0.7.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.7.4)
|
|
17
|
+
|
|
18
|
+
Mon, 19 May 2025 18:04:28 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.7.3..@fluentui-copilot/react-preview_v0.7.4)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: Adding correct styles when Links are used as the label of a PreviewHeader. ([PR #3007](https://github.com/microsoft/fluentai/pull/3007) by Humberto.Morimoto@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [0.7.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.7.3)
|
|
8
26
|
|
|
9
|
-
Sat, 03 May 2025 01:
|
|
27
|
+
Sat, 03 May 2025 01:27:44 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.7.2..@fluentui-copilot/react-preview_v0.7.3)
|
|
11
29
|
|
|
12
30
|
### Patches
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
2
|
-
import { tokens } from '@fluentui-copilot/tokens';
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
|
|
3
3
|
export const previewContentClassNames = {
|
|
4
4
|
root: 'fai-PreviewContent'
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { PreviewContentSlots, PreviewContentState } from './PreviewContent.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewContentClassNames: SlotClassNames<PreviewContentSlots> = {\n root: 'fai-PreviewContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n flexDirection: 'column',\n maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n rowGap: tokens.spacingVerticalXS,\n wordBreak: 'break-word',\n boxSizing: 'border-box',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the PreviewContent slots based on the state\n */\nexport const usePreviewContentStyles_unstable = (state: PreviewContentState): PreviewContentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","previewContentClassNames","root","useRootBaseClassName","color","colorNeutralForeground3","display","flexDirection","maxWidth","spacingHorizontalXS","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","boxSizing","caption1","usePreviewContentStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACfC,UAAU,CAAC,aAAa,EAAET,OAAOU,mBAAmB,CAAC,KAAK,CAAC;IAC3DC,SAAS,CAAC,EAAEX,OAAOY,gBAAgB,CAAC,CAAC,EAAEZ,OAAOa,kBAAkB,CAAC,CAAC;IAClEC,QAAQd,OAAOe,iBAAiB;IAChCC,WAAW;IACXC,WAAW;IACX,GAAGhB,iBAAiBiB,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBjB;IAE1BgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGvB,aAAaG,yBAAyBC,IAAI,EAAEkB,mBAAmBD,MAAMjB,IAAI,CAACmB,SAAS;IAE1G,OAAOF;AACT,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
1
|
+
import { linkClassNames, __resetStyles, __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
3
|
export const previewHeaderClassNames = {
|
|
4
4
|
root: 'fai-PreviewHeader',
|
|
@@ -14,7 +14,7 @@ const labelFontSize = typographyStyles.caption1Strong.fontSize;
|
|
|
14
14
|
const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
|
|
15
15
|
const useActionsBaseClassName = __resetStyles("ry18yy9", null, [".ry18yy9{grid-row:1;justify-self:end;}"]);
|
|
16
16
|
const useCitationBaseClassName = __resetStyles("ry1eqmj", null, [".ry1eqmj{grid-row:1;}"]);
|
|
17
|
-
const useLabelBaseClassName = __resetStyles("
|
|
17
|
+
const useLabelBaseClassName = __resetStyles("rattnj5", null, [".rattnj5{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);}", ".rattnj5 .fui-Link{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);}", ".rattnj5 .fui-Link:hover{color:var(--colorNeutralForeground3Hover);}", ".rattnj5 .fui-Link:hover:active{color:var(--colorNeutralForeground3Pressed);}"]);
|
|
18
18
|
const useMediaBaseClassName = __resetStyles("rcisese", null, [".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}", ".rcisese>.fai-PreviewHeader__mediaChild{height:16px;width:16px;}"]);
|
|
19
19
|
const useRootBaseClassName = __resetStyles("r1xjnine", null, [".r1xjnine{align-items:center;column-gap:var(--spacingHorizontalXS);display:grid;grid-template-rows:24px;}"]);
|
|
20
20
|
// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {\n linkClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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 [`& .${linkClassNames.root}`]: {\n ...typographyStyles.caption1Strong,\n color: tokens.colorNeutralForeground3,\n\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':hover:active': {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\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":["linkClassNames","makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","previewHeaderClassNames","root","actions","citation","label","media","previewHeaderExtraClassNames","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","useActionsBaseClassName","gridRow","justifySelf","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","overflowY","paddingTop","wordBreak","color","colorNeutralForeground3","colorNeutralForeground3Hover","colorNeutralForeground3Pressed","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":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { PreviewContentSlots, PreviewContentState } from './PreviewContent.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewContentClassNames: SlotClassNames<PreviewContentSlots> = {\n root: 'fai-PreviewContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n flexDirection: 'column',\n maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n rowGap: tokens.spacingVerticalXS,\n wordBreak: 'break-word',\n boxSizing: 'border-box',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the PreviewContent slots based on the state\n */\nexport const usePreviewContentStyles_unstable = (state: PreviewContentState): PreviewContentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["previewContentClassNames","usePreviewContentStyles_unstable","tokens","root","color","colorNeutralForeground3","padding","boxSizing","useRootBaseClassName","typographyStyles","caption1","rootBaseClassName","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAYFC,gCAA8BC;eAA9BD;;;iCAjB2B;AAK/B,MAAMD,2BAAgE;UAC3EG;AACF;AAEA;;CAEC,SAECC,uBAAcC,IAAAA,8BAAuB,EAAA,UAAA,MAAA;IAAA;CAAA;AAIrCC,MAASL,mCAA8BC,CAAAA;;UAGvCK,oBAAWC;UACRC,IAAAA,CAAAA,SAAAA,GAAiBC,IAAAA,6BAAQ,EAAAV,yBAAAG,IAAA,EAAAQ,mBAAAC,MAAAT,IAAA,CAAAU,SAAA;IAC9B,OAAAD;AAEA"}
|
|
@@ -38,8 +38,11 @@ const useActionsBaseClassName = (0, _reactcomponents.__resetStyles)("ry18yy9", n
|
|
|
38
38
|
const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("ry1eqmj", null, [
|
|
39
39
|
".ry1eqmj{grid-row:1;}"
|
|
40
40
|
]);
|
|
41
|
-
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
42
|
-
".
|
|
41
|
+
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("rattnj5", null, [
|
|
42
|
+
".rattnj5{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
|
+
".rattnj5 .fui-Link{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);}",
|
|
44
|
+
".rattnj5 .fui-Link:hover{color:var(--colorNeutralForeground3Hover);}",
|
|
45
|
+
".rattnj5 .fui-Link:hover:active{color:var(--colorNeutralForeground3Pressed);}"
|
|
43
46
|
]);
|
|
44
47
|
const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("rcisese", null, [
|
|
45
48
|
".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {\n linkClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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 [`& .${linkClassNames.root}`]: {\n ...typographyStyles.caption1Strong,\n color: tokens.colorNeutralForeground3,\n\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':hover:active': {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\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","lineHeight","root","actions","citation","label","media","mediaChild","labelFontSize","typographyStyles","caption1Strong","fontSize","labelLineHeight","useActionsBaseClassName","makeResetStyles","gridRow","__resetStyles","justifySelf","useMediaBaseClassName","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","Budl1dq","linkClassNames","colorNeutralForeground3","state","height","width","labelBaseClassName","mediaBaseClassName","useRootBaseClassName","alignItems","useRootStyles","columnGap","spacingHorizontalXS","gridTemplateRows","className","mergeClasses","actionsBaseClassName","citationPresent","makeStyles","onlyLabel","gridTemplateColumns","citationBaseClassName","previousAndLabel","labelAndActions","citationMediaLabel","rootBaseClassName","mediaPresent","actionsPresent","rootStyles","previousLabelActions","all"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,uBAAAA;eAAAA;;IAQAC,4BAAAA;eAAAA;;IA8CXC,+BAAY;eAAZA;;;iCA5DgB;AAMX,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,CAACT,UAAU;AAElE,MAAMY,0BAA0BC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;IAAA;CAAA;MAC9CC,2BAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,wBAAaD,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;IAAA;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;;wBAGGd;QAEHc,SAAOC;;0BAESC;iBAEd;;;iBAGA;;;OAGF;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AACF;AAKExB,MAAAA,kCAAYyB,CAAAA;;UAIVC,uBAAQd;UACRe,wBAAOT;UACTU,qBAAAT;IACF,MAAAU,qBAAAZ;IAEA,MAAMa,oBAAAA;UACJC,aAAYC;QACZC,iBAAkBC;QAClBb,MAAAA,OAAS,EAAA;QACTc,iBAAAA;QACFV,MAAAvB,OAAA,CAAAkC,SAAA,GAAAC,IAAAA,6BAAA,EAAAvC,wBAAAI,OAAA,EAAAoC,sBAAAb,MAAAvB,OAAA,CAAAkC,SAAA;IAEA;IACA,IAAAG,kBAAA;IACA,IAAMP,MAAAA,QAAAA,EAAgBQ;QACpBC,kBAAW;cACTC,QAAAA,CAAAA,SAAAA,GAAqBL,IAAAA,6BAAA,EAAAvC,wBAAAK,QAAA,EAAAwC,uBAAAlB,MAAAtB,QAAA,CAAAiC,SAAA;;UAEvBQ,KAAAA,CAAAA,SAAkB,GAAAP,IAAAA,6BAAA,EAAAvC,wBAAAM,KAAA,EAAAwB,oBAAAH,MAAArB,KAAA,CAAAgC,SAAA;uBAChBM;QACFjB,MAAApB,KAAA,EAAA;QACAwC,eAAAA;cACEH,KAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAAqB,EAAA5C,wBAAAO,KAAA,EAAAwB,oBAAAJ,MAAApB,KAAA,CAAA+B,SAAA;;UAEvBU,IAAAA,CAAAA,SAAAA,GAAoBT,IAAAA,6BAAA,EAAAvC,wBAAAG,IAAA,EAAA8C,mBAAA,CAAAR,mBAAA,CAAAS,gBAAA,CAAAC,kBAAAC,WAAAT,SAAA,EAAA,AAAAF,CAAAA,mBAAA,CAAAS,gBAAAA,gBAAA,CAAAT,eAAA,KAAA,CAAAU,kBAAAC,WAAAN,gBAAA,EAAA,CAAAL,mBAAA,CAAAS,gBAAAC,kBAAAC,WAAAL,eAAA,EAAAN,mBAAAS,gBAAA,CAAAC,kBAAAC,WAAAJ,kBAAA,EAAA,AAAAP,CAAAA,mBAAA,CAAAS,gBAAAA,gBAAA,CAAAT,eAAA,KAAAU,kBAAAC,WAAAC,oBAAA,EAAAZ,mBAAAS,gBAAAC,kBAAAC,WAAAE,GAAA,EAAA3B,MAAAxB,IAAA,CAAAmC,SAAA;WAClBM;4DAEoB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-preview",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Preview components.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "^0.
|
|
15
|
+
"@fluentui-copilot/react-provider": "^0.12.0",
|
|
16
16
|
"@fluentui-copilot/tokens": "^0.3.11",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|