@fluentui-copilot/react-reference 0.0.0-nightly-20240624-0405-366a2af7.1 → 0.0.0-nightly-20240625-0406-eccb618e.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +15 -9
- package/CHANGELOG.md +8 -7
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js +2 -1
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js +11 -24
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js +2 -0
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js +8 -27
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +4 -4
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/package.json +5 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 25 Jun 2024 04:12:54 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,26 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-reference",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
20
|
+
"commit": "a2b62af32592fb38723c0fa355b6ad93845b2d45"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-reference",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
26
|
+
"commit": "a2b62af32592fb38723c0fa355b6ad93845b2d45"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-reference",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
32
|
+
"commit": "a2b62af32592fb38723c0fa355b6ad93845b2d45"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui-copilot/react-reference",
|
|
37
|
+
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
38
|
+
"commit": "a2b62af32592fb38723c0fa355b6ad93845b2d45"
|
|
33
39
|
}
|
|
34
40
|
]
|
|
35
41
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 25 Jun 2024 04:12:54 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240625-0406-eccb618e.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240625-0406-eccb618e.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.0..@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
9
|
+
Tue, 25 Jun 2024 04:12:54 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.0..@fluentui-copilot/react-reference_v0.0.0-nightly-20240625-0406-eccb618e.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240625-0406-eccb618e.1 ([commit](https://github.com/microsoft/fluentai/commit/a2b62af32592fb38723c0fa355b6ad93845b2d45) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240625-0406-eccb618e.1 ([commit](https://github.com/microsoft/fluentai/commit/a2b62af32592fb38723c0fa355b6ad93845b2d45) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240625-0406-eccb618e.1 ([commit](https://github.com/microsoft/fluentai/commit/a2b62af32592fb38723c0fa355b6ad93845b2d45) by beachball)
|
|
18
|
+
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240625-0406-eccb618e.1 ([commit](https://github.com/microsoft/fluentai/commit/a2b62af32592fb38723c0fa355b6ad93845b2d45) by beachball)
|
|
18
19
|
|
|
19
20
|
## [0.12.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.12.0)
|
|
20
21
|
|
|
@@ -13,10 +13,11 @@ const GRAPHIC_SIZE = '16px';
|
|
|
13
13
|
const useRootBaseClassName = __resetStyles("r1rjhy11", null, [".r1rjhy11{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;max-width:max-content;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}", ".r1rjhy11:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1rjhy11:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".r1rjhy11:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1rjhy11:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
|
|
14
14
|
export const useRootStyles = __styles({
|
|
15
15
|
overflow: {
|
|
16
|
+
B2u0y6b: "f6dzj5z",
|
|
16
17
|
a9b677: "fly5x3f"
|
|
17
18
|
}
|
|
18
19
|
}, {
|
|
19
|
-
d: [".fly5x3f{width:100%;}"]
|
|
20
|
+
d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
|
|
20
21
|
});
|
|
21
22
|
const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
|
|
22
23
|
const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: 'max-content',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: 'max-content',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,cAAc;AAChB,EAAE;AAEF,MAAMC,eAAe;AAErB,MAAMC,uBAAuBd,gBAAgB;IAC3Ce,YAAY;IACZC,iBAAiBb,OAAOc,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,CAAC;IACvEC,cAAclB,OAAOmB,kBAAkB;IACvCC,WAAW;IACXC,OAAOrB,OAAOsB,uBAAuB;IACrCC,WAAWvB,OAAOwB,oBAAoB;IACtCC,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACXC,SAAS,CAAC,EAAE9B,OAAO+B,kBAAkB,CAAC,CAAC,EAAE/B,OAAOgC,kBAAkB,CAAC,CAAC;IACpEC,gBAAgB;IAEhB,UAAU;QACRpB,iBAAiBb,OAAOkC,4BAA4B;QACpDC,aAAanC,OAAOoC,wBAAwB;QAC5Cf,OAAOrB,OAAOqC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAEnC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOoC,wBAAwB;QAClD;IACF;IAEA,iBAAiB;QACfvB,iBAAiBb,OAAOsC,8BAA8B;QACtDH,aAAanC,OAAOuC,0BAA0B;QAC9ClB,OAAOrB,OAAOwC,8BAA8B;QAE5C,CAAC,CAAC,GAAG,EAAEtC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBb,OAAOuC,0BAA0B;QACpD;IACF;AACF;AAEA,OAAO,MAAME,gBAAgB3C,WAAW;IACtC4C,UAAU;QACRd,UAAU;QACVe,OAAO;IACT;AACF,GAAG;AAEH,MAAMC,2BAA2B/C,gBAAgB;IAC/C,GAAGI,iBAAiB4C,cAAc;AACpC;AAEA,MAAMC,0BAA0BjD,gBAAgB;IAC9CgB,iBAAiBb,OAAOiB,mBAAmB;IAC3C8B,QAAQ;IACRC,QAAQ,CAAC,EAAEhD,OAAOiD,mBAAmB,CAAC,CAAC,EAAEjD,OAAOkD,mBAAmB,CAAC,CAAC;IACrEP,OAAO;AACT;AAEA,MAAMQ,0BAA0BtD,gBAAgB;IAC9CuD,UAAU1C;IACVqC,QAAQrC;IACR2C,YAAY3C;IACZiC,OAAOjC;IAEP,CAAC,CAAC,GAAG,EAAEF,yBAAyBC,YAAY,CAAC,CAAC,CAAC,EAAE;QAC/CsC,QAAQrC;QACRiC,OAAOjC;IACT;AACF;AAEA,MAAM4C,0BAA0BzD,gBAAgB;IAC9C0B,WAAWvB,OAAOuD,uBAAuB;IACzC9B,SAAS;IACT,GAAGxB,iBAAiBuD,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,oBAAoBhD;IAC1B,MAAMiD,wBAAwBhB;IAC9B,MAAMiB,uBAAuBf;IAC7B,MAAMgB,uBAAuBR;IAC7B,MAAMS,uBAAuBZ;IAE7BO,MAAMvD,IAAI,CAAC6D,SAAS,GAAGjE,aAAaG,oBAAoBC,IAAI,EAAEwD,mBAAmBD,MAAMvD,IAAI,CAAC6D,SAAS;IAErG,IAAIN,MAAMtD,QAAQ,EAAE;QAClBsD,MAAMtD,QAAQ,CAAC4D,SAAS,GAAGjE,aACzBG,oBAAoBE,QAAQ,EAC5BwD,uBACAF,MAAMtD,QAAQ,CAAC4D,SAAS;IAE5B;IAEA,IAAIN,MAAMrD,OAAO,EAAE;QACjBqD,MAAMrD,OAAO,CAAC2D,SAAS,GAAGjE,aAAaG,oBAAoBG,OAAO,EAAEwD,sBAAsBH,MAAMrD,OAAO,CAAC2D,SAAS;IACnH;IAEA,IAAIN,MAAMnD,OAAO,EAAE;QACjBmD,MAAMnD,OAAO,CAACyD,SAAS,GAAGjE,aAAaG,oBAAoBK,OAAO,EAAEuD,sBAAsBJ,MAAMnD,OAAO,CAACyD,SAAS;IACnH;IAEA,IAAIN,MAAMpD,OAAO,EAAE;QACjBoD,MAAMpD,OAAO,CAAC0D,SAAS,GAAGjE,aAAaG,oBAAoBI,OAAO,EAAEyD,sBAAsBL,MAAMpD,OAAO,CAAC0D,SAAS;IACnH;IAEA,OAAON;AACT,EAAE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getIntrinsicElementProps, mergeCallbacks,
|
|
3
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, mergeCallbacks, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
|
|
3
|
+
import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
|
|
4
|
+
import { useRootStyles } from '../Reference/useReferenceStyles.styles';
|
|
4
5
|
/**
|
|
5
6
|
* Create the state required to render ReferenceList.
|
|
6
7
|
*
|
|
@@ -20,28 +21,14 @@ export const useReferenceList_unstable = (props, ref) => {
|
|
|
20
21
|
} = props;
|
|
21
22
|
const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
|
|
22
23
|
const referenceListRef = React.useRef(null);
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
32
|
-
if (index >= maxVisibleReferences && React.isValidElement(child)) {
|
|
33
|
-
results.push(React.cloneElement(child, {
|
|
34
|
-
...child.props,
|
|
35
|
-
className: mergeClasses(child.props.className, referenceInOverflowClassName)
|
|
36
|
-
}));
|
|
37
|
-
} else {
|
|
38
|
-
results.push(child);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
return results;
|
|
42
|
-
}
|
|
43
|
-
return children;
|
|
44
|
-
}, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);
|
|
24
|
+
const totalReferencesCount = React.Children.count(children);
|
|
25
|
+
const styles = useRootStyles();
|
|
26
|
+
const resolvedChildren = useOverflowMaxVisibleItems({
|
|
27
|
+
additionalCondition: !areReferencesExpanded,
|
|
28
|
+
children,
|
|
29
|
+
maxVisibleItems: maxVisibleReferences,
|
|
30
|
+
overflowClassName: styles.overflow
|
|
31
|
+
});
|
|
45
32
|
// We keep track of whether we are interacting with the overflow button via keyboard or not.
|
|
46
33
|
const overflowButtonTriggeredViaKeyboard = React.useRef(false);
|
|
47
34
|
const focusAttributes = useArrowNavigationGroup({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n
|
|
1
|
+
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGN;IAEpF,MAAM,CAACO,uBAAuBC,yBAAyB,GAAGjB,MAAMkB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBnB,MAAMoB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBrB,MAAMsB,QAAQ,CAACC,KAAK,CAACZ;IAClD,MAAMa,SAASjB;IACf,MAAMkB,mBAAmBnB,2BAA2B;QAClDoB,qBAAqB,CAACV;QACtBL;QACAgB,iBAAiBf;QACjBgB,mBAAmBJ,OAAOK,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqC9B,MAAMoB,MAAM,CAAC;IAExD,MAAMW,kBAAkB3B,wBAAwB;QAC9C4B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBnC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMoB,wBAAwBrC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,oBAAoB1B,yBAAyB2B,aAAa,CAACvB;IAEjE,MAAMwB,QAA4B;QAChCxB;QACAc;QACAlB;QACAO;QACAmB;QACAjB;QAEAoB,YAAY;YACVC,MAAM;YACN5B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA6B,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKS;YACxB,GAAGY,eAAe;YAClB,GAAGhB,IAAI;YACPJ,UAAUc;QACZ,IACA;YAAEmB,aAAa;QAAM;QAEvB9B,gBAAgBwB,oBAAoBnC,KAAK0C,QAAQ,CAAC/B,gBAAgB;YAAE8B,aAAa;QAAO,KAAKL;QAC7F1B,gBAAgBG,wBAAwBb,KAAK0C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM1B,cAAc,EAAE;QACxB0B,MAAM1B,cAAc,CAACgC,OAAO,GAAG5C,eAAeiC,uBAAuBK,MAAM1B,cAAc,CAACgC,OAAO;IACnG;IAEA,IAAIN,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG5C,eAAemC,uBAAuBG,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}
|
|
@@ -5,7 +5,7 @@ export const referenceOverflowButtonClassNames = {
|
|
|
5
5
|
/**
|
|
6
6
|
* Styles for the root slot
|
|
7
7
|
*/
|
|
8
|
-
const useRootBaseClassName = __resetStyles("
|
|
8
|
+
const useRootBaseClassName = __resetStyles("r1hm0apo", null, [".r1hm0apo{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);cursor:pointer;display:inline-flex;justify-content:center;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".r1hm0apo:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1hm0apo:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"]);
|
|
9
9
|
/**
|
|
10
10
|
* Apply styling to the ReferenceOverflowButton slots based on the state
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useReferenceOverflowButtonStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","referenceOverflowButtonClassNames","root","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","cursor","display","justifyContent","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","caption1","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useReferenceOverflowButtonStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIrG,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,YAAY;IACZC,iBAAiBN,OAAOO,uBAAuB;IAC/CC,QAAQ,CAAC,EAAER,OAAOS,eAAe,CAAC,OAAO,EAAET,OAAOU,mBAAmB,CAAC,CAAC;IACvEC,cAAcX,OAAOY,kBAAkB;IACvCC,OAAOb,OAAOc,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAEnB,OAAOoB,kBAAkB,CAAC,CAAC,EAAEpB,OAAOqB,kBAAkB,CAAC,CAAC;IACpE,GAAGpB,iBAAiBqB,QAAQ;IAE5B,UAAU;QACRhB,iBAAiBN,OAAOuB,4BAA4B;QACpDC,aAAaxB,OAAOyB,wBAAwB;QAC5CZ,OAAOb,OAAO0B,4BAA4B;IAC5C;IAEA,iBAAiB;QACfpB,iBAAiBN,OAAO2B,8BAA8B;QACtDH,aAAaxB,OAAO4B,0BAA0B;QAC9Cf,OAAOb,OAAO6B,8BAA8B;IAC9C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAMC,oBAAoB5B;IAE1B2B,MAAM5B,IAAI,CAAC8B,SAAS,GAAGlC,aAAaG,kCAAkCC,IAAI,EAAE6B,mBAAmBD,MAAM5B,IAAI,CAAC8B,SAAS;IAEnH,OAAOF;AACT,EAAE"}
|
|
@@ -43,10 +43,12 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1rjhy11", nul
|
|
|
43
43
|
]);
|
|
44
44
|
const useRootStyles = (0, _reactcomponents.__styles)({
|
|
45
45
|
overflow: {
|
|
46
|
+
B2u0y6b: "f6dzj5z",
|
|
46
47
|
a9b677: "fly5x3f"
|
|
47
48
|
}
|
|
48
49
|
}, {
|
|
49
50
|
d: [
|
|
51
|
+
".f6dzj5z{max-width:100%;}",
|
|
50
52
|
".fly5x3f{width:100%;}"
|
|
51
53
|
]
|
|
52
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: 'max-content',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: 'max-content',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n textDecoration: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","backgroundColor","colorNeutralBackground3Hover","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","border","borderRadius","columnGap","spacingHorizontalXXS","flexShrink","__resetStyles","justifyContent","maxWidth","minHeight","rootBaseClassName","tokens","dividerBaseClassName","useDividerBaseClassName","contentBaseClassName","useContentBaseClassName","graphicBaseClassName","useGraphicBaseClassName","colorNeutralBackground3Pressed","state","className","borderColor","color","colorNeutralForeground2Pressed","citationBaseClassName","mergeClasses","useRootStyles","makeStyles","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAuBTC,2BAAwBC;eAAxBD;;IAhBFE,aAAY;eAAZA;;;iCAnB0E;AAIrE,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZZ;QACAa,SAAS;QACTC,QAAAA;;;OAGAC;QAAAA;QAAkBC;KAAoB;;MAEtCC,2BAAYC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACZC,0BAAgBD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAChBE,0BAAUF,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;MACVG,0BAAWH,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAKTlB,8BAAwBC,CAAAA;;UAIxBqB,oBAAOxB;kCACYyB;UACnBC,uBAAAC;UACFC,uBAAAC;UAEAC,uBAAiBC;UACf7B,IAAAA,CAAAA,SAAAA,GAAiBuB,IAAAA,6BAAOO,EAAAA,oBAAAA,IAA8B,EAAAR,mBAAAS,MAAA5B,IAAA,CAAA6B,SAAA;cACtDC,QAAAA,EAAaV;cACbW,QAAOX,CAAAA,SAAOY,GAAAA,IAAAA,6BAAAA,EAAAA,oBAA8B/B,QAAA,EAAAgC,uBAAAL,MAAA3B,QAAA,CAAA4B,SAAA;;cAG1ChC,OAAAA,EAAAA;cACFK,OAAA,CAAA2B,SAAA,GAAAK,IAAAA,6BAAA,EAAAvC,oBAAAO,OAAA,EAAAmB,sBAAAO,MAAA1B,OAAA,CAAA2B,SAAA;;IAEJ,IAAAD,MAAAxB,OAAA,EAAA;QAEAwB,MAAOxB,OAAM+B,CAAAA,SAAAA,GAAgBC,IAAAA,6BAAW,EAAAzC,oBAAAS,OAAA,EAAAmB,sBAAAK,MAAAxB,OAAA,CAAAyB,SAAA;;cAEpCZ,OAAU,EAAA;cACVoB,OAAO,CAAAR,SAAA,GAAAK,IAAAA,6BAAA,EAAAvC,oBAAAQ,OAAA,EAAAsB,sBAAAG,MAAAzB,OAAA,CAAA0B,SAAA;;IAEX,OAAGD;AAEH,wDACoC"}
|
|
@@ -11,39 +11,20 @@ Object.defineProperty(exports, "useReferenceList_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
|
+
const _reactutilities = require("@fluentui-copilot/react-utilities");
|
|
14
15
|
const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
|
|
15
16
|
const useReferenceList_unstable = (props, ref)=>{
|
|
16
17
|
const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
|
|
17
18
|
const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
|
|
18
19
|
const referenceListRef = _react.useRef(null);
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
|
|
24
|
-
const results = [];
|
|
25
|
-
for(let index = 0; index < childrenArray.length; index++){
|
|
26
|
-
const child = childrenArray[index];
|
|
27
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
28
|
-
if (index >= maxVisibleReferences && /*#__PURE__*/ _react.isValidElement(child)) {
|
|
29
|
-
results.push(/*#__PURE__*/ _react.cloneElement(child, {
|
|
30
|
-
...child.props,
|
|
31
|
-
className: (0, _reactcomponents.mergeClasses)(child.props.className, referenceInOverflowClassName)
|
|
32
|
-
}));
|
|
33
|
-
} else {
|
|
34
|
-
results.push(child);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return results;
|
|
38
|
-
}
|
|
39
|
-
return children;
|
|
40
|
-
}, [
|
|
41
|
-
areReferencesExpanded,
|
|
20
|
+
const totalReferencesCount = _react.Children.count(children);
|
|
21
|
+
const styles = (0, _useReferenceStylesstyles.useRootStyles)();
|
|
22
|
+
const resolvedChildren = (0, _reactutilities.useOverflowMaxVisibleItems)({
|
|
23
|
+
additionalCondition: !areReferencesExpanded,
|
|
42
24
|
children,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
]);
|
|
25
|
+
maxVisibleItems: maxVisibleReferences,
|
|
26
|
+
overflowClassName: styles.overflow
|
|
27
|
+
});
|
|
47
28
|
// We keep track of whether we are interacting with the overflow button via keyboard or not.
|
|
48
29
|
const overflowButtonTriggeredViaKeyboard = _react.useRef(false);
|
|
49
30
|
const focusAttributes = (0, _reactcomponents.useArrowNavigationGroup)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n
|
|
1
|
+
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["children","maxVisibleReferences","props","showLessButton","referenceListRef","totalReferencesCount","styles","showMoreButton","resolvedChildren","maxVisibleItems","overflowClassName","overflow","React","Children","count","useRootStyles","overflowButtonTriggeredViaKeyboard","useRef","additionalCondition","focusAttributes","memorizeCurrent","setAreReferencesExpanded","useArrowNavigationGroup","axis","onShowLessButtonClick","onShowMoreButtonClick","useCallback","areReferencesExpanded","components","slot","always","getIntrinsicElementProps","shouldUseOverflow","elementType","rest","undefined","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,cAAMG,EACNC,cAAMC;UAGJC,CAAAA,uBAAiBR,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBS,mBAAmBJ,OAAAA,MAAOK,CAAAA;UAC5BN,uBAAAO,OAAAC,QAAA,CAAAC,KAAA,CAAAd;UAEAM,SAAAS,IAAAA,uCAAA;UACAP,mBAAMQ,IAAAA,0CAA2CC,EAAAA;QAEjDC,qBAAMC,CAAAA;;yBAEMlB;2BACVmB,OAAiBT,QAAA;;gGAGyE;UAC1FU,qCAAyBT,OAAAK,MAAA,CAAA;UACxBE,kBAAEG,IAAAA,wCAAA,EAAA;QAELC,MAAMC;kBACJH;QACFD,iBAAK;;UAILK,wBAAkCb,OAAAc,WAAA,CAAA;iCAChCC;;UAEA1B,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAG;;UAEAC,oBAAAA,yBAAAA,aAAAA,CAAAA;UAEAuB,QAAAA;;;;;;;oBAQOT;kBACH;4BACUX;4BAEZ;;cAAqBqB,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBAEvBxB,IAAAA,8BAAgByB,EAAAA,KAAAA;8BAAoDC;eAAoBC,IAAKC;sBAC7FhC;;yBAAiGgC;QACnG;QAEA5B,gBAAUA,oBAAgBsB,qBAAA,CAAAO,QAAA,CAAA7B,gBAAA;yBAClBA;QACR,KAAA4B;QAEAhC,gBAAUA,wBAAgB0B,qBAAA,CAAAO,QAAA,CAAAjC,gBAAA;yBAClBA;QACR,KAAAgC;;IAGA,IAAAE,MAAA9B,cAAA,EAAA"}
|
|
@@ -22,10 +22,10 @@ const referenceOverflowButtonClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".
|
|
28
|
-
".
|
|
25
|
+
*/ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1hm0apo", null, [
|
|
26
|
+
".r1hm0apo{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);cursor:pointer;display:inline-flex;justify-content:center;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}",
|
|
27
|
+
".r1hm0apo:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
|
|
28
|
+
".r1hm0apo:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
|
|
29
29
|
]);
|
|
30
30
|
const useReferenceOverflowButtonStyles_unstable = (state)=>{
|
|
31
31
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["referenceOverflowButtonClassNames","tokens","root","alignItems","__resetStyles","color","state","
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'center',\n minHeight: '24px',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["referenceOverflowButtonClassNames","tokens","root","alignItems","__resetStyles","color","state","justifyContent","useRootBaseClassName","minHeight","mergeClasses","rootBaseClassName","className","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYJC,yCAA8B;eAA9BA;;;iCAhBuD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAYC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;CAAA;AAIZC,MAAOJ,4CAA8BK,CAAAA;;UAGrCC,oBAAgBC;UAChBC,IAAAA,CAAAA,SAAW,GAAAC,IAAAA,6BAAA,EAAAV,kCAAAE,IAAA,EAAAS,mBAAAL,MAAAJ,IAAA,CAAAU,SAAA;WACXC;sEAGU"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
4
4
|
"description": "Fluent AI controls for citations and references",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,9 +12,10 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-preview": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-preview": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
16
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
17
|
+
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
18
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20240625-0406-eccb618e.1",
|
|
18
19
|
"@swc/helpers": "^0.5.1"
|
|
19
20
|
},
|
|
20
21
|
"peerDependencies": {
|