@fluentui-copilot/react-reference 0.15.4 → 0.15.5-hotfix.2
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 +31 -1
- package/CHANGELOG.md +19 -1
- package/lib/components/Citation/useCitationStyles.styles.js +1 -1
- package/lib/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib/components/Citation/useCitationStyles.styles.raw.js +74 -0
- package/lib/components/Citation/useCitationStyles.styles.raw.js.map +1 -0
- package/lib/components/Reference/useReferenceStyles.styles.raw.js +206 -0
- package/lib/components/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.raw.js +49 -0
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.raw.js.map +1 -0
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js +33 -0
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.raw.js +115 -0
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js +54 -0
- package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +51 -0
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +1 -0
- package/lib/utilities/useReferenceGroup.js +2 -8
- package/lib/utilities/useReferenceGroup.js.map +1 -1
- package/lib/utilities/useReferenceGroup.styles.js +9 -0
- package/lib/utilities/useReferenceGroup.styles.js.map +1 -0
- package/lib/utilities/useReferenceGroup.styles.raw.js +7 -0
- package/lib/utilities/useReferenceGroup.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js +7 -7
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js +85 -0
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js +214 -0
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.raw.js +60 -0
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js +44 -0
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.raw.js +132 -0
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js +63 -0
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +61 -0
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/utilities/useReferenceGroup.js +2 -10
- package/lib-commonjs/utilities/useReferenceGroup.js.map +1 -1
- package/lib-commonjs/utilities/useReferenceGroup.styles.js +20 -0
- package/lib-commonjs/utilities/useReferenceGroup.styles.js.map +1 -0
- package/lib-commonjs/utilities/useReferenceGroup.styles.raw.js +16 -0
- package/lib-commonjs/utilities/useReferenceGroup.styles.raw.js.map +1 -0
- package/package.json +7 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,37 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 19 Sep 2025 15:10:20 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.15.5-hotfix.2",
|
|
7
|
+
"version": "0.15.5-hotfix.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "hochelmartin@gmail.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-reference",
|
|
13
|
+
"commit": "3e4ebe676646c4c4346dbbab83511f963ffefd85",
|
|
14
|
+
"comment": "release: prepare hotfix 0.26.2-hotfix.2"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 28 May 2025 16:45:32 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-reference_v0.15.5",
|
|
22
|
+
"version": "0.15.5",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "mgodbolt@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-reference",
|
|
28
|
+
"commit": "5f0ad3bf1731d25041cfd0b24d690201799162a5",
|
|
29
|
+
"comment": "Citation: Add padding to prevent numbers from touching the border"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"date": "Mon, 19 May 2025 18:04:28 GMT",
|
|
6
36
|
"tag": "@fluentui-copilot/react-reference_v0.15.4",
|
|
7
37
|
"version": "0.15.4",
|
|
8
38
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 19 Sep 2025 15:10:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.15.5-hotfix.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.15.5-hotfix.2)
|
|
8
|
+
|
|
9
|
+
Fri, 19 Sep 2025 15:10:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.15.5..@fluentui-copilot/react-reference_v0.15.5-hotfix.2)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- release: prepare hotfix 0.26.2-hotfix.2 ([PR #3284](https://github.com/microsoft/fluentai/pull/3284) by hochelmartin@gmail.com)
|
|
15
|
+
|
|
16
|
+
## [0.15.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.15.5)
|
|
17
|
+
|
|
18
|
+
Wed, 28 May 2025 16:45:32 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.15.4..@fluentui-copilot/react-reference_v0.15.5)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Citation: Add padding to prevent numbers from touching the border ([PR #3054](https://github.com/microsoft/fluentai/pull/3054) by mgodbolt@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [0.15.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.15.3)
|
|
8
26
|
|
|
9
27
|
Sat, 03 May 2025 01:27:44 GMT
|
|
@@ -3,7 +3,7 @@ import { tokens } from '@fluentui-copilot/tokens';
|
|
|
3
3
|
export const citationClassNames = {
|
|
4
4
|
root: 'fai-Citation'
|
|
5
5
|
};
|
|
6
|
-
const useCitationBaseClassName = __resetStyles("
|
|
6
|
+
const useCitationBaseClassName = __resetStyles("rf7wmfm", "r9ecysy", [".rf7wmfm{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;cursor:pointer;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);color:var(--colorNeutralForeground2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);padding-inline:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-left:var(--spacingHorizontalXXS);margin-right:var(--spacingHorizontalXXS);}", ".rf7wmfm:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".rf7wmfm:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}", ".r9ecysy{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;cursor:pointer;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);color:var(--colorNeutralForeground2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);padding-inline:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-right:var(--spacingHorizontalXXS);margin-left:var(--spacingHorizontalXXS);}", ".r9ecysy:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".r9ecysy:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}"]);
|
|
7
7
|
const useCitationRootStyles = __styles({
|
|
8
8
|
isBlock: {
|
|
9
9
|
mc9l5x: "f22iagw",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","cursor","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","
|
|
1
|
+
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n paddingInline: tokens.spacingHorizontalXXS,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","cursor","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","paddingInline","spacingHorizontalXXS","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useNextStyles","borderRadiusXLarge","useCitationStyles_unstable","state","designVersion","rootBaseClassName","rootStyles","nextStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,6BAA6B;AACrH,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,GAAGT,iBAAiBU,cAAc;IAElCC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,OAAOf,OAAOgB,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEpB,iBAAiBU,cAAc,CAACW,UAAU,CAAC,GAAG,EAAErB,iBAAiBU,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IACxHC,eAAetB,OAAOuB,oBAAoB;IAE1CC,cAAcxB,OAAOyB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAY3B,OAAOuB,oBAAoB;IACvCK,aAAa5B,OAAOuB,oBAAoB;IAExC,UAAU;QACRf,QAAQ;QACRO,OAAOf,OAAO6B,0BAA0B;QACxCC,aAAa9B,OAAO+B,sBAAsB;QAC1CrB,iBAAiBV,OAAOgC,0BAA0B;IACpD;IAEA,iBAAiB;QACfxB,QAAQ;QACRO,OAAOf,OAAOiC,4BAA4B;QAC1CH,aAAa9B,OAAOkC,wBAAwB;QAC5CxB,iBAAiBV,OAAOmC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBxC,WAAW;IACvCyC,SAAS;QACPjC,SAAS;QACTuB,YAAY;QACZC,aAAa;IACf;IACAU,iBAAiB;QACfvB,OAAOf,OAAOiC,4BAA4B;QAC1C,GAAGnC,WAAWgC,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;QAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOf,OAAOiC,4BAA4B;YAC1C,GAAGnC,WAAWgC,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;YAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB5C,WAAW;IAAEM,MAAM;QAAEsB,cAAcxB,OAAOyC,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB1C;IAC1B,MAAM2C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMzC,IAAI,CAAC8C,SAAS,GAAGnD,aACrBI,mBAAmBC,IAAI,EACvByC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW7C,IAAI,EAC3CyC,MAAMzC,IAAI,CAAC8C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const citationClassNames = {
|
|
4
|
+
root: 'fai-Citation'
|
|
5
|
+
};
|
|
6
|
+
const useCitationBaseClassName = makeResetStyles({
|
|
7
|
+
display: 'inline-flex',
|
|
8
|
+
justifyContent: 'center',
|
|
9
|
+
boxSizing: 'border-box',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
cursor: 'pointer',
|
|
12
|
+
...typographyStyles.caption2Strong,
|
|
13
|
+
backgroundColor: tokens.colorNeutralBackground3,
|
|
14
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
|
|
15
|
+
color: tokens.colorNeutralForeground2,
|
|
16
|
+
minWidth: '14px',
|
|
17
|
+
height: '14px',
|
|
18
|
+
verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,
|
|
19
|
+
paddingInline: tokens.spacingHorizontalXXS,
|
|
20
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
21
|
+
textDecoration: 'none',
|
|
22
|
+
marginLeft: tokens.spacingHorizontalXXS,
|
|
23
|
+
marginRight: tokens.spacingHorizontalXXS,
|
|
24
|
+
':hover': {
|
|
25
|
+
cursor: 'pointer',
|
|
26
|
+
color: tokens.colorBrandForeground2Hover,
|
|
27
|
+
borderColor: tokens.colorBrandStroke2Hover,
|
|
28
|
+
backgroundColor: tokens.colorBrandBackground2Hover
|
|
29
|
+
},
|
|
30
|
+
':hover:active': {
|
|
31
|
+
cursor: 'pointer',
|
|
32
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
33
|
+
borderColor: tokens.colorBrandStroke2Pressed,
|
|
34
|
+
backgroundColor: tokens.colorBrandBackground2Pressed
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const useCitationRootStyles = makeStyles({
|
|
38
|
+
isBlock: {
|
|
39
|
+
display: 'flex',
|
|
40
|
+
marginLeft: 0,
|
|
41
|
+
marginRight: 0
|
|
42
|
+
},
|
|
43
|
+
isPopoverLocked: {
|
|
44
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
45
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
|
|
46
|
+
backgroundColor: tokens.colorBrandBackground2,
|
|
47
|
+
':hover': {
|
|
48
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
49
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
|
|
50
|
+
backgroundColor: tokens.colorBrandBackground2
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const useNextStyles = makeStyles({
|
|
55
|
+
root: {
|
|
56
|
+
borderRadius: tokens.borderRadiusXLarge
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
/**
|
|
60
|
+
* Apply styling to the Citation slots based on the state
|
|
61
|
+
*/
|
|
62
|
+
export const useCitationStyles_unstable = state => {
|
|
63
|
+
'use no memo';
|
|
64
|
+
|
|
65
|
+
const {
|
|
66
|
+
designVersion
|
|
67
|
+
} = state;
|
|
68
|
+
const rootBaseClassName = useCitationBaseClassName();
|
|
69
|
+
const rootStyles = useCitationRootStyles();
|
|
70
|
+
const nextStyles = useNextStyles();
|
|
71
|
+
state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
72
|
+
return state;
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=useCitationStyles.styles.raw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.caption2Strong,\n\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n color: tokens.colorNeutralForeground2,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n paddingInline: tokens.spacingHorizontalXXS,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","cursor","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","paddingInline","spacingHorizontalXXS","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useNextStyles","borderRadiusXLarge","useCitationStyles_unstable","state","designVersion","rootBaseClassName","rootStyles","nextStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,6BAA6B;AACrH,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,GAAGT,iBAAiBU,cAAc;IAElCC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,OAAOf,OAAOgB,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEpB,iBAAiBU,cAAc,CAACW,UAAU,CAAC,GAAG,EAAErB,iBAAiBU,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IACxHC,eAAetB,OAAOuB,oBAAoB;IAE1CC,cAAcxB,OAAOyB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAY3B,OAAOuB,oBAAoB;IACvCK,aAAa5B,OAAOuB,oBAAoB;IAExC,UAAU;QACRf,QAAQ;QACRO,OAAOf,OAAO6B,0BAA0B;QACxCC,aAAa9B,OAAO+B,sBAAsB;QAC1CrB,iBAAiBV,OAAOgC,0BAA0B;IACpD;IAEA,iBAAiB;QACfxB,QAAQ;QACRO,OAAOf,OAAOiC,4BAA4B;QAC1CH,aAAa9B,OAAOkC,wBAAwB;QAC5CxB,iBAAiBV,OAAOmC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBxC,WAAW;IACvCyC,SAAS;QACPjC,SAAS;QACTuB,YAAY;QACZC,aAAa;IACf;IACAU,iBAAiB;QACfvB,OAAOf,OAAOiC,4BAA4B;QAC1C,GAAGnC,WAAWgC,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;QAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOf,OAAOiC,4BAA4B;YAC1C,GAAGnC,WAAWgC,WAAW,CAAC9B,OAAOkC,wBAAwB,CAAC;YAC1DxB,iBAAiBV,OAAOuC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB5C,WAAW;IAAEM,MAAM;QAAEsB,cAAcxB,OAAOyC,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB1C;IAC1B,MAAM2C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMzC,IAAI,CAAC8C,SAAS,GAAGnD,aACrBI,mBAAmBC,IAAI,EACvByC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW7C,IAAI,EAC3CyC,MAAMzC,IAAI,CAAC8C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
/** deprecated Use ReferenceV2 component, hooks and types instead. */
|
|
4
|
+
export const referenceClassNames = {
|
|
5
|
+
root: 'fai-Reference',
|
|
6
|
+
citation: 'fai-Reference__citation',
|
|
7
|
+
media: 'fai-Reference__media',
|
|
8
|
+
actions: 'fai-Reference__actions',
|
|
9
|
+
sensitivity: 'fai-Reference__sensitivity',
|
|
10
|
+
metadata: 'fai-Reference__metadata',
|
|
11
|
+
primaryText: 'fai-Reference__primaryText',
|
|
12
|
+
secondaryText: 'fai-Reference__secondaryText',
|
|
13
|
+
tertiaryText: 'fai-Reference__tertiaryText',
|
|
14
|
+
icon: 'fai-Reference__icon',
|
|
15
|
+
label: 'fai-Reference__label',
|
|
16
|
+
content: 'fai-Reference__content',
|
|
17
|
+
detailsButton: 'fai-Reference__detailsButton'
|
|
18
|
+
};
|
|
19
|
+
/** deprecated Use ReferenceV2 component, hooks and types instead. */
|
|
20
|
+
export const referenceExtraClassNames = {
|
|
21
|
+
text: 'fai-Reference__text',
|
|
22
|
+
mediaChild: 'fai-Reference__mediaChild'
|
|
23
|
+
};
|
|
24
|
+
const labelFontSize = typographyStyles.caption1Strong.fontSize;
|
|
25
|
+
const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
|
|
26
|
+
const maxPopoverWidth = '256px';
|
|
27
|
+
const useReferenceClassName = makeResetStyles({
|
|
28
|
+
boxSizing: 'border-box',
|
|
29
|
+
width: '100%',
|
|
30
|
+
display: 'grid',
|
|
31
|
+
gridTemplateAreas: `
|
|
32
|
+
"citation media title actions"
|
|
33
|
+
". . title ."
|
|
34
|
+
"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel"
|
|
35
|
+
"metadata metadata metadata metadata"
|
|
36
|
+
"content content content content"
|
|
37
|
+
`,
|
|
38
|
+
gridTemplateColumns: 'min-content min-content 1fr min-content',
|
|
39
|
+
gridTemplateRows: '32px auto auto auto auto',
|
|
40
|
+
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
|
|
41
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
42
|
+
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
|
|
43
|
+
boxShadow: 'none',
|
|
44
|
+
columnGap: tokens.spacingHorizontalXS,
|
|
45
|
+
alignItems: 'center'
|
|
46
|
+
});
|
|
47
|
+
const useStyles = makeStyles({
|
|
48
|
+
canvas: {},
|
|
49
|
+
sidecar: {
|
|
50
|
+
gridTemplateRows: '24px auto auto auto',
|
|
51
|
+
padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`
|
|
52
|
+
},
|
|
53
|
+
inline: {},
|
|
54
|
+
popover: {
|
|
55
|
+
...shorthands.borderWidth('0px'),
|
|
56
|
+
width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,
|
|
57
|
+
padding: '0px'
|
|
58
|
+
},
|
|
59
|
+
closed: {
|
|
60
|
+
rowGap: 0
|
|
61
|
+
},
|
|
62
|
+
citation: {
|
|
63
|
+
gridArea: 'citation'
|
|
64
|
+
},
|
|
65
|
+
media: {
|
|
66
|
+
gridArea: 'media',
|
|
67
|
+
display: 'flex',
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
justifyContent: 'center'
|
|
70
|
+
},
|
|
71
|
+
mediaPopover: {
|
|
72
|
+
width: '16px',
|
|
73
|
+
height: '16px',
|
|
74
|
+
[`> .${referenceExtraClassNames.mediaChild}`]: {
|
|
75
|
+
width: '16px',
|
|
76
|
+
height: '16px'
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
actions: {
|
|
80
|
+
gridArea: 'actions',
|
|
81
|
+
justifySelf: 'end',
|
|
82
|
+
display: 'flex',
|
|
83
|
+
gridRowStart: 1
|
|
84
|
+
},
|
|
85
|
+
detailsButton: {
|
|
86
|
+
[`> ${buttonClassNames.icon}`]: {
|
|
87
|
+
color: tokens.colorNeutralForeground3
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
sensitivity: {
|
|
91
|
+
gridArea: 'sensitivityLabel',
|
|
92
|
+
justifySelf: 'start'
|
|
93
|
+
},
|
|
94
|
+
metadata: {
|
|
95
|
+
marginTop: tokens.spacingVerticalXS,
|
|
96
|
+
gridArea: 'metadata',
|
|
97
|
+
...typographyStyles.caption2
|
|
98
|
+
},
|
|
99
|
+
metadataSubsequentText: {
|
|
100
|
+
position: 'relative',
|
|
101
|
+
marginLeft: tokens.spacingHorizontalS,
|
|
102
|
+
'&::before': {
|
|
103
|
+
content: '""',
|
|
104
|
+
display: 'block',
|
|
105
|
+
position: 'absolute',
|
|
106
|
+
left: `calc(${tokens.spacingHorizontalS} / -2)`,
|
|
107
|
+
top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,
|
|
108
|
+
height: typographyStyles.caption2.fontSize,
|
|
109
|
+
...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
icon: {
|
|
113
|
+
...typographyStyles.caption2,
|
|
114
|
+
verticalAlign: 'middle'
|
|
115
|
+
},
|
|
116
|
+
content: {
|
|
117
|
+
marginTop: tokens.spacingVerticalXS,
|
|
118
|
+
gridArea: 'content',
|
|
119
|
+
display: 'flex',
|
|
120
|
+
flexDirection: 'column',
|
|
121
|
+
rowGap: tokens.spacingVerticalS,
|
|
122
|
+
color: tokens.colorNeutralForeground3,
|
|
123
|
+
wordBreak: 'break-word'
|
|
124
|
+
},
|
|
125
|
+
hidden: {
|
|
126
|
+
display: 'none'
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
const useLabelStyles = makeStyles({
|
|
130
|
+
root: {
|
|
131
|
+
gridArea: 'title',
|
|
132
|
+
alignSelf: 'start',
|
|
133
|
+
...typographyStyles.caption1Strong,
|
|
134
|
+
wordBreak: 'break-word',
|
|
135
|
+
'-webkit-box-orient': 'vertical',
|
|
136
|
+
'-webkit-line-clamp': '2',
|
|
137
|
+
display: '-webkit-box',
|
|
138
|
+
overflowY: 'hidden'
|
|
139
|
+
},
|
|
140
|
+
canvas: {
|
|
141
|
+
// 24px is the height of the tallest element within the reference
|
|
142
|
+
paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`
|
|
143
|
+
},
|
|
144
|
+
sidecar: {
|
|
145
|
+
// 16px is the height of the tallest element within the reference
|
|
146
|
+
paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`
|
|
147
|
+
},
|
|
148
|
+
closed: {
|
|
149
|
+
maxWidth: '100%',
|
|
150
|
+
'-webkit-line-clamp': '1'
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
/**
|
|
154
|
+
* Apply styling to the Reference slots based on the state
|
|
155
|
+
*
|
|
156
|
+
* deprecated Use ReferenceV2 component, hooks and types instead.
|
|
157
|
+
*/
|
|
158
|
+
export const useReferenceStyles_unstable = state => {
|
|
159
|
+
'use no memo';
|
|
160
|
+
|
|
161
|
+
const {
|
|
162
|
+
isExpanded,
|
|
163
|
+
mode,
|
|
164
|
+
layout
|
|
165
|
+
} = state;
|
|
166
|
+
const rootClassName = useReferenceClassName();
|
|
167
|
+
const styles = useStyles();
|
|
168
|
+
const labelStyles = useLabelStyles();
|
|
169
|
+
state.root.className = mergeClasses(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
|
|
170
|
+
if (state.citation) {
|
|
171
|
+
state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);
|
|
172
|
+
}
|
|
173
|
+
if (state.media) {
|
|
174
|
+
state.media.className = mergeClasses(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
|
|
175
|
+
}
|
|
176
|
+
if (state.actions) {
|
|
177
|
+
state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);
|
|
178
|
+
}
|
|
179
|
+
state.label.className = mergeClasses(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
|
|
180
|
+
if (state.sensitivity) {
|
|
181
|
+
state.sensitivity.className = mergeClasses(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
|
|
182
|
+
}
|
|
183
|
+
state.metadata.className = mergeClasses(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
|
|
184
|
+
let isSubsequentText = false;
|
|
185
|
+
if (state.primaryText) {
|
|
186
|
+
state.primaryText.className = mergeClasses(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
|
|
187
|
+
isSubsequentText = true;
|
|
188
|
+
}
|
|
189
|
+
if (state.secondaryText) {
|
|
190
|
+
state.secondaryText.className = mergeClasses(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
|
|
191
|
+
isSubsequentText = true;
|
|
192
|
+
}
|
|
193
|
+
if (state.tertiaryText) {
|
|
194
|
+
state.tertiaryText.className = mergeClasses(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
|
|
195
|
+
isSubsequentText = true;
|
|
196
|
+
}
|
|
197
|
+
if (state.icon) {
|
|
198
|
+
state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);
|
|
199
|
+
}
|
|
200
|
+
state.content.className = mergeClasses(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
|
|
201
|
+
if (state.detailsButton) {
|
|
202
|
+
state.detailsButton.className = mergeClasses(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
|
|
203
|
+
}
|
|
204
|
+
return state;
|
|
205
|
+
};
|
|
206
|
+
//# sourceMappingURL=useReferenceStyles.styles.raw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n buttonClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n padding: '0px',\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n gridArea: 'citation',\n },\n media: {\n gridArea: 'media',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n gridArea: 'actions',\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n gridArea: 'sensitivityLabel',\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n gridArea: 'metadata',\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n gridArea: 'content',\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n gridArea: 'title',\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const referenceGroupToggleClassNames = {
|
|
4
|
+
root: 'fai-ReferenceGroupToggle',
|
|
5
|
+
icon: 'fai-ReferenceGroupToggle__icon'
|
|
6
|
+
};
|
|
7
|
+
const useButtonBaseClassName = makeResetStyles({
|
|
8
|
+
display: 'inline-flex',
|
|
9
|
+
columnGap: tokens.spacingHorizontalSNudge,
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
...typographyStyles.caption1,
|
|
12
|
+
border: 0,
|
|
13
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
14
|
+
color: tokens.colorNeutralForeground3,
|
|
15
|
+
cursor: 'pointer',
|
|
16
|
+
width: 'max-content',
|
|
17
|
+
padding: `${tokens.spacingVerticalXS} 0`
|
|
18
|
+
});
|
|
19
|
+
const useIconBaseClassName = makeResetStyles({
|
|
20
|
+
display: 'inline-flex',
|
|
21
|
+
alignItems: 'center'
|
|
22
|
+
});
|
|
23
|
+
const useStyles = makeStyles({
|
|
24
|
+
canvas: {
|
|
25
|
+
...typographyStyles.caption1
|
|
26
|
+
},
|
|
27
|
+
sidecar: {
|
|
28
|
+
...typographyStyles.caption2
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
/**
|
|
32
|
+
* Apply styling to the ReferenceGroupToggle slots based on the state
|
|
33
|
+
*/
|
|
34
|
+
export const useReferenceGroupToggleStyles_unstable = state => {
|
|
35
|
+
'use no memo';
|
|
36
|
+
|
|
37
|
+
const {
|
|
38
|
+
mode
|
|
39
|
+
} = state;
|
|
40
|
+
const styles = useStyles();
|
|
41
|
+
const iconBaseClassName = useIconBaseClassName();
|
|
42
|
+
const buttonBaseClassName = useButtonBaseClassName();
|
|
43
|
+
state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
|
|
44
|
+
if (state.icon) {
|
|
45
|
+
state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
|
|
46
|
+
}
|
|
47
|
+
return state;
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=useReferenceGroupToggleStyles.styles.raw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n root: 'fai-ReferenceGroupToggle',\n icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n columnGap: tokens.spacingHorizontalSNudge,\n alignItems: 'center',\n ...typographyStyles.caption1,\n border: 0,\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground3,\n cursor: 'pointer',\n width: 'max-content',\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: { ...typographyStyles.caption1 },\n sidecar: {\n ...typographyStyles.caption2,\n },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n 'use no memo';\n\n const { mode } = state;\n const styles = useStyles();\n\n const iconBaseClassName = useIconBaseClassName();\n const buttonBaseClassName = useButtonBaseClassName();\n state.root.className = mergeClasses(\n referenceGroupToggleClassNames.root,\n buttonBaseClassName,\n styles[mode],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWN,OAAOO,uBAAuB;IACzCC,YAAY;IACZ,GAAGT,iBAAiBU,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBX,OAAOY,0BAA0B;IAClDC,OAAOb,OAAOc,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACPC,SAAS,CAAC,EAAEjB,OAAOkB,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYvB,WAAW;IAC3BwB,QAAQ;QAAE,GAAGtB,iBAAiBU,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGvB,iBAAiBwB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGhC,aACrBG,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGhC,aAAaG,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { makeResetStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
/** deprecated Use ReferenceListV2 component, hooks and types instead. */
|
|
4
|
+
export const referenceListClassNames = {
|
|
5
|
+
root: 'fai-ReferenceList'
|
|
6
|
+
};
|
|
7
|
+
/** deprecated Use ReferenceListV2 component, hooks and types instead. */
|
|
8
|
+
export const referenceListItemClassName = 'fai-ReferenceList__item';
|
|
9
|
+
/**
|
|
10
|
+
* Styles for the root slot
|
|
11
|
+
*/
|
|
12
|
+
const useRootClassName = makeResetStyles({
|
|
13
|
+
padding: 0,
|
|
14
|
+
margin: 0,
|
|
15
|
+
display: 'flex',
|
|
16
|
+
flexDirection: 'column',
|
|
17
|
+
gap: tokens.spacingVerticalS,
|
|
18
|
+
[`> .${referenceListItemClassName}`]: {
|
|
19
|
+
listStyleType: 'none'
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
/**
|
|
23
|
+
* Apply styling to the ReferenceList slots based on the state
|
|
24
|
+
*
|
|
25
|
+
* deprecated Use ReferenceListV2 component, hooks and types instead.
|
|
26
|
+
*/
|
|
27
|
+
export const useReferenceListStyles_unstable = state => {
|
|
28
|
+
'use no memo';
|
|
29
|
+
|
|
30
|
+
state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);
|
|
31
|
+
return state;
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=useReferenceListStyles.styles.raw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n};\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n padding: 0,\n margin: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalS,\n\n [`> .${referenceListItemClassName}`]: {\n listStyleType: 'none',\n },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n *\n * deprecated Use ReferenceListV2 component, hooks and types instead.\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,uEAAuE,GACvE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,uEAAuE,GACvE,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}
|