@fluentui-copilot/react-reference 0.0.0-nightly-20250319-0404-611607b9.1 → 0.0.0-nightly-20250321-0406-b2bc2ed5.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 +24 -3
- package/CHANGELOG.md +14 -4
- package/dist/index.d.ts +7 -6
- package/lib/components/Citation/Citation.types.js.map +1 -1
- package/lib/components/Citation/useCitation.js +3 -0
- package/lib/components/Citation/useCitation.js.map +1 -1
- package/lib/components/Citation/useCitationStyles.styles.js +18 -1
- package/lib/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib/components/reference-v2/Reference/Reference.types.js.map +1 -1
- package/lib/components/reference-v2/Reference/useReference.js +3 -0
- package/lib/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js +18 -1
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +3 -0
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +19 -2
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Citation/Citation.types.js.map +1 -1
- package/lib-commonjs/components/Citation/useCitation.js +3 -0
- package/lib-commonjs/components/Citation/useCitation.js.map +1 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js +21 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/Reference.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/useReference.js +3 -0
- package/lib-commonjs/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js +21 -1
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +3 -0
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +21 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/package.json +6 -6
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": "Fri, 21 Mar 2025 04:14:53 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,6 +16,27 @@
|
|
|
16
16
|
]
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 20 Mar 2025 17:00:43 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-reference_v0.14.0",
|
|
22
|
+
"version": "0.14.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "makotom@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-reference",
|
|
28
|
+
"commit": "9958f308833b5b38dd8afdaf5505f87aca5d3961",
|
|
29
|
+
"comment": "chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "owcampbe@microsoft.com",
|
|
33
|
+
"package": "@fluentui-copilot/react-reference",
|
|
34
|
+
"commit": "6376749aa066e0c6270a3ef3c31b38a4ef571f1c",
|
|
35
|
+
"comment": "feat: Add designVersion=next styles to Citation, Reference, and ReferenceListOverflowButton."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
19
40
|
{
|
|
20
41
|
"date": "Fri, 28 Feb 2025 00:27:24 GMT",
|
|
21
42
|
"tag": "@fluentui-copilot/react-reference_v0.13.10",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,28 @@
|
|
|
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, 21 Mar 2025 04:14:53 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-20250321-0406-b2bc2ed5.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20250321-0406-b2bc2ed5.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.
|
|
9
|
+
Fri, 21 Mar 2025 04:14:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.14.0..@fluentui-copilot/react-reference_v0.0.0-nightly-20250321-0406-b2bc2ed5.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
15
|
|
|
16
|
+
## [0.14.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.14.0)
|
|
17
|
+
|
|
18
|
+
Thu, 20 Mar 2025 17:00:43 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.13.10..@fluentui-copilot/react-reference_v0.14.0)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components. ([PR #2745](https://github.com/microsoft/fluentai/pull/2745) by makotom@microsoft.com)
|
|
24
|
+
- feat: Add designVersion=next styles to Citation, Reference, and ReferenceListOverflowButton. ([PR #2805](https://github.com/microsoft/fluentai/pull/2805) by owcampbe@microsoft.com)
|
|
25
|
+
|
|
16
26
|
## [0.13.10](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.10)
|
|
17
27
|
|
|
18
28
|
Fri, 28 Feb 2025 00:27:24 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-components';
|
|
|
6
6
|
import type { Context } from '@fluentui/react-context-selector';
|
|
7
7
|
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
8
8
|
import type { CopilotMode } from '@fluentui-copilot/react-provider';
|
|
9
|
+
import type { DesignVersion } from '@fluentui-copilot/react-provider';
|
|
9
10
|
import { FC } from 'react';
|
|
10
11
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
11
12
|
import type { PreviewHeaderProps } from '@fluentui-copilot/react-preview';
|
|
@@ -26,7 +27,7 @@ export declare const citationClassNames: SlotClassNames<CitationSlots>;
|
|
|
26
27
|
/**
|
|
27
28
|
* Citation Props
|
|
28
29
|
*/
|
|
29
|
-
export declare type CitationProps = ComponentProps<Partial<CitationSlots>> & {
|
|
30
|
+
export declare type CitationProps = ComponentProps<Partial<CitationSlots>> & DesignVersion & {
|
|
30
31
|
/**
|
|
31
32
|
* HREF to the associated `Reference`.
|
|
32
33
|
*/
|
|
@@ -48,7 +49,7 @@ export declare type CitationSlots = {
|
|
|
48
49
|
/**
|
|
49
50
|
* State used in rendering Citation
|
|
50
51
|
*/
|
|
51
|
-
export declare type CitationState = ComponentState<CitationSlots> & Required<Pick<CitationProps, 'block'>> & {
|
|
52
|
+
export declare type CitationState = ComponentState<CitationSlots> & Required<Pick<CitationProps, 'block' | 'designVersion'>> & {
|
|
52
53
|
isPopoverLocked: boolean;
|
|
53
54
|
};
|
|
54
55
|
|
|
@@ -243,7 +244,7 @@ export declare const referenceOverflowButtonClassNames: SlotClassNames<Reference
|
|
|
243
244
|
/**
|
|
244
245
|
* ReferenceOverflowButton Props
|
|
245
246
|
*/
|
|
246
|
-
export declare type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {
|
|
247
|
+
export declare type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & DesignVersion & {
|
|
247
248
|
/**
|
|
248
249
|
* The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.
|
|
249
250
|
* If a string is passed, that is what is rendered verbatim.
|
|
@@ -260,7 +261,7 @@ export declare type ReferenceOverflowButtonSlots = {
|
|
|
260
261
|
/**
|
|
261
262
|
* State used in rendering ReferenceOverflowButton
|
|
262
263
|
*/
|
|
263
|
-
export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {
|
|
264
|
+
export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & Pick<Required<ReferenceOverflowButtonProps>, 'designVersion'> & {
|
|
264
265
|
id: string;
|
|
265
266
|
shouldRenderOverflowButton: boolean;
|
|
266
267
|
};
|
|
@@ -361,7 +362,7 @@ export declare const referenceV2ExtraClassNames: {
|
|
|
361
362
|
graphicChild: string;
|
|
362
363
|
};
|
|
363
364
|
|
|
364
|
-
export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & {};
|
|
365
|
+
export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & DesignVersion & {};
|
|
365
366
|
|
|
366
367
|
export declare type ReferenceV2Slots = {
|
|
367
368
|
/** The root of the component that renders the reference as either a button or an anchor element. */
|
|
@@ -376,7 +377,7 @@ export declare type ReferenceV2Slots = {
|
|
|
376
377
|
graphic?: Slot<'span'>;
|
|
377
378
|
};
|
|
378
379
|
|
|
379
|
-
export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'id'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
|
|
380
|
+
export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'id' | 'designVersion'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
|
|
380
381
|
|
|
381
382
|
/**
|
|
382
383
|
* Render the final JSX of Citation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n /**\n * The root slot.\n */\n root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> & {\n
|
|
1
|
+
{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n /**\n * The root slot.\n */\n root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> &\n DesignVersion & {\n /**\n * HREF to the associated `Reference`.\n */\n referenceHref?: string;\n\n /**\n * Whether the citation is a block citation and has no built in margins.\n * Citations are inline by default with margins to separate them from inline text.\n */\n block?: boolean;\n };\n\n/**\n * State used in rendering Citation\n */\nexport type CitationState = ComponentState<CitationSlots> &\n Required<Pick<CitationProps, 'block' | 'designVersion'>> & {\n isPopoverLocked: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA2BA;;CAEC,GACD,WAGI"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
|
|
2
2
|
import { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';
|
|
3
|
+
import { useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
3
4
|
/**
|
|
4
5
|
* Create the state required to render Citation.
|
|
5
6
|
*
|
|
@@ -15,9 +16,11 @@ export const useCitation_unstable = (props, ref) => {
|
|
|
15
16
|
block = false,
|
|
16
17
|
...otherProps
|
|
17
18
|
} = props;
|
|
19
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
18
20
|
const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && props['aria-expanded'];
|
|
19
21
|
const state = {
|
|
20
22
|
block,
|
|
23
|
+
designVersion,
|
|
21
24
|
isPopoverLocked,
|
|
22
25
|
components: {
|
|
23
26
|
root: 'a'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n const { referenceHref, block = false, ...otherProps } = props;\n\n const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n const state: CitationState = {\n block,\n isPopoverLocked,\n components: {\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n ref,\n href: referenceHref,\n role: undefined,\n 'aria-expanded': undefined,\n ...otherProps,\n }),\n { elementType: 'a' },\n ),\n };\n\n return state;\n};\n"],"names":["getIntrinsicElementProps","slot","usePreviewContext_unstable","useCitation_unstable","props","ref","referenceHref","block","otherProps","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","undefined","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n const { referenceHref, block = false, ...otherProps } = props;\n const designVersion = useDesignVersion(props.designVersion);\n\n const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n const state: CitationState = {\n block,\n designVersion,\n isPopoverLocked,\n components: {\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n ref,\n href: referenceHref,\n role: undefined,\n 'aria-expanded': undefined,\n ...otherProps,\n }),\n { elementType: 'a' },\n ),\n };\n\n return state;\n};\n"],"names":["getIntrinsicElementProps","slot","usePreviewContext_unstable","useDesignVersion","useCitation_unstable","props","ref","referenceHref","block","otherProps","designVersion","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IACxD,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,kBAAkBT,2BAA2BU,CAAAA,MAAOA,IAAIC,eAAe,KAAMR,KAAK,CAAC,gBAAgB;IAEzG,MAAMS,QAAuB;QAC3BN;QACAE;QACAC;QACAI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,KAAK;YAC5BM;YACAY,MAAMX;YACNY,MAAMC;YACN,iBAAiBA;YACjB,GAAGX,UAAU;QACf,IACA;YAAEY,aAAa;QAAI;IAEvB;IAEA,OAAOP;AACT,EAAE"}
|
|
@@ -28,15 +28,32 @@ const useCitationRootStyles = __styles({
|
|
|
28
28
|
d: [".f22iagw{display:flex;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".fkjhhq2{color:var(--colorBrandForeground2Pressed);}", ".f1nbqb3e{border-top-color:var(--colorBrandStroke2Pressed);}", ".fah3j9v{border-right-color:var(--colorBrandStroke2Pressed);}", ".f56crja{border-left-color:var(--colorBrandStroke2Pressed);}", ".fef4ti1{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}"],
|
|
29
29
|
h: [".fbszb7v:hover{color:var(--colorBrandForeground2Pressed);}", ".ftxwbyd:hover{border-top-color:var(--colorBrandStroke2Pressed);}", ".f1p7dilp:hover{border-right-color:var(--colorBrandStroke2Pressed);}", ".f15x2k42:hover{border-left-color:var(--colorBrandStroke2Pressed);}", ".fegdlwn:hover{border-bottom-color:var(--colorBrandStroke2Pressed);}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"]
|
|
30
30
|
});
|
|
31
|
+
const useNextStyles = __styles({
|
|
32
|
+
root: {
|
|
33
|
+
Beyfa6y: 0,
|
|
34
|
+
Bbmb7ep: 0,
|
|
35
|
+
Btl43ni: 0,
|
|
36
|
+
B7oj6ja: 0,
|
|
37
|
+
Dimara: "f1kijzfu"
|
|
38
|
+
}
|
|
39
|
+
}, {
|
|
40
|
+
d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
|
|
41
|
+
p: -1
|
|
42
|
+
}]]
|
|
43
|
+
});
|
|
31
44
|
/**
|
|
32
45
|
* Apply styling to the Citation slots based on the state
|
|
33
46
|
*/
|
|
34
47
|
export const useCitationStyles_unstable = state => {
|
|
35
48
|
'use no memo';
|
|
36
49
|
|
|
50
|
+
const {
|
|
51
|
+
designVersion
|
|
52
|
+
} = state;
|
|
37
53
|
const rootBaseClassName = useCitationBaseClassName();
|
|
38
54
|
const rootStyles = useCitationRootStyles();
|
|
39
|
-
|
|
55
|
+
const nextStyles = useNextStyles();
|
|
56
|
+
state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
40
57
|
return state;
|
|
41
58
|
};
|
|
42
59
|
//# sourceMappingURL=useCitationStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import {
|
|
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 ...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","caption2Strong","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","color","colorNeutralForeground2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","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;IACZ,GAAGR,iBAAiBS,cAAc;IAElCC,iBAAiBT,OAAOU,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,OAAOd,OAAOe,uBAAuB;IAErCC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEnB,iBAAiBS,cAAc,CAACW,UAAU,CAAC,GAAG,EAAEpB,iBAAiBS,cAAc,CAACY,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAAcrB,OAAOsB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYxB,OAAOyB,oBAAoB;IACvCC,aAAa1B,OAAOyB,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRb,OAAOd,OAAO4B,0BAA0B;QACxCC,aAAa7B,OAAO8B,sBAAsB;QAC1CrB,iBAAiBT,OAAO+B,0BAA0B;IACpD;IAEA,iBAAiB;QACfJ,QAAQ;QACRb,OAAOd,OAAOgC,4BAA4B;QAC1CH,aAAa7B,OAAOiC,wBAAwB;QAC5CxB,iBAAiBT,OAAOkC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBvC,WAAW;IACvCwC,SAAS;QACPhC,SAAS;QACToB,YAAY;QACZE,aAAa;IACf;IACAW,iBAAiB;QACfvB,OAAOd,OAAOgC,4BAA4B;QAC1C,GAAGlC,WAAW+B,WAAW,CAAC7B,OAAOiC,wBAAwB,CAAC;QAC1DxB,iBAAiBT,OAAOsC,qBAAqB;QAC7C,UAAU;YACRxB,OAAOd,OAAOgC,4BAA4B;YAC1C,GAAGlC,WAAW+B,WAAW,CAAC7B,OAAOiC,wBAAwB,CAAC;YAC1DxB,iBAAiBT,OAAOsC,qBAAqB;QAC/C;IACF;AACF;AAEA,MAAMC,gBAAgB3C,WAAW;IAAEM,MAAM;QAAEmB,cAAcrB,OAAOwC,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBzC;IAC1B,MAAM0C,aAAaV;IACnB,MAAMW,aAAaP;IAEnBG,MAAMxC,IAAI,CAAC6C,SAAS,GAAGlD,aACrBI,mBAAmBC,IAAI,EACvBwC,MAAML,eAAe,IAAIQ,WAAWR,eAAe,EACnDK,MAAMM,KAAK,IAAIH,WAAWT,OAAO,EACjCQ,mBACAD,kBAAkB,UAAUG,WAAW5C,IAAI,EAC3CwC,MAAMxC,IAAI,CAAC6C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n /** The root of the component that renders the reference as either a button or an anchor element. */\n root: NonNullable<Slot<'button', 'a'>>;\n\n /** The number of the citation this reference corresponds to. */\n citation?: Slot<'span'>;\n\n /** A divider that visually separates the citation from the content of the reference. */\n divider?: Slot<'span'>;\n\n /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n content?: Slot<'span'>;\n\n /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n Required<Pick<ReferenceProps, 'id'>> &\n Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"
|
|
1
|
+
{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n /** The root of the component that renders the reference as either a button or an anchor element. */\n root: NonNullable<Slot<'button', 'a'>>;\n\n /** The number of the citation this reference corresponds to. */\n citation?: Slot<'span'>;\n\n /** A divider that visually separates the citation from the content of the reference. */\n divider?: Slot<'span'>;\n\n /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n content?: Slot<'span'>;\n\n /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & DesignVersion & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n Required<Pick<ReferenceProps, 'id' | 'designVersion'>> &\n Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAuBA,WAEgD"}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';
|
|
3
3
|
import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
|
|
4
4
|
import { referenceExtraClassNames } from './useReferenceStyles.styles';
|
|
5
|
+
import { useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
5
6
|
/**
|
|
6
7
|
* Create the state required to render Reference.
|
|
7
8
|
*
|
|
@@ -17,6 +18,7 @@ export const useReference_unstable = (props, ref) => {
|
|
|
17
18
|
children,
|
|
18
19
|
id
|
|
19
20
|
} = props;
|
|
21
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
20
22
|
const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);
|
|
21
23
|
const referenceId = useId('reference-', id);
|
|
22
24
|
const elementType = as || (props.href ? 'a' : 'button');
|
|
@@ -41,6 +43,7 @@ export const useReference_unstable = (props, ref) => {
|
|
|
41
43
|
renderByDefault: citation !== undefined && content !== undefined
|
|
42
44
|
});
|
|
43
45
|
const state = {
|
|
46
|
+
designVersion,
|
|
44
47
|
id: referenceId,
|
|
45
48
|
shouldUseOverflow,
|
|
46
49
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n props: ReferenceProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n const { as, children, id } = props;\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\n\n const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n const propsWithAssignedAs = {\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n id: referenceId,\n } as ReferenceProps;\n\n const citation = slot.optional(props.citation, { elementType: 'span' });\n const graphic = slot.optional(props.graphic, { elementType: 'span' });\n const content = slot.optional(props.content, {\n elementType: 'span',\n renderByDefault: graphic !== undefined || !!children,\n });\n const divider = slot.optional(props.divider, {\n elementType: 'span',\n renderByDefault: citation !== undefined && content !== undefined,\n });\n\n const state: ReferenceState = {\n id: referenceId,\n shouldUseOverflow,\n\n components: {\n root: elementType,\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(elementType, {\n ref,\n ...propsWithAssignedAs,\n }),\n { elementType },\n ),\n citation,\n divider,\n content,\n graphic,\n };\n\n if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n state.graphic.children = React.cloneElement(state.graphic.children, {\n className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n });\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","as","children","id","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n props: ReferenceProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n const { as, children, id } = props;\n\n const designVersion = useDesignVersion(props.designVersion);\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\n\n const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n const propsWithAssignedAs = {\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n id: referenceId,\n } as ReferenceProps;\n\n const citation = slot.optional(props.citation, { elementType: 'span' });\n const graphic = slot.optional(props.graphic, { elementType: 'span' });\n const content = slot.optional(props.content, {\n elementType: 'span',\n renderByDefault: graphic !== undefined || !!children,\n });\n const divider = slot.optional(props.divider, {\n elementType: 'span',\n renderByDefault: citation !== undefined && content !== undefined,\n });\n\n const state: ReferenceState = {\n designVersion,\n id: referenceId,\n shouldUseOverflow,\n\n components: {\n root: elementType,\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(elementType, {\n ref,\n ...propsWithAssignedAs,\n }),\n { elementType },\n ),\n citation,\n divider,\n content,\n graphic,\n };\n\n if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n state.graphic.children = React.cloneElement(state.graphic.children, {\n className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n });\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useDesignVersion","useReference_unstable","props","ref","as","children","id","designVersion","shouldUseOverflow","ctx","referenceId","elementType","href","propsWithAssignedAs","type","undefined","citation","optional","graphic","content","renderByDefault","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGJ;IAE7B,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,oBAAoBV,iCAAiCW,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcb,MAAM,cAAcS;IAExC,MAAMK,cAAcP,MAAO,CAAA,AAACF,MAAqCU,IAAI,GAAG,MAAM,QAAO;IACrF,MAAMC,sBAAsB;QAC1BC,MAAMH,gBAAgB,WAAW,WAAWI;QAC5C,GAAGb,KAAK;QACRE,IAAIO;QACJL,IAAII;IACN;IAEA,MAAMM,WAAWpB,KAAKqB,QAAQ,CAACf,MAAMc,QAAQ,EAAE;QAAEL,aAAa;IAAO;IACrE,MAAMO,UAAUtB,KAAKqB,QAAQ,CAACf,MAAMgB,OAAO,EAAE;QAAEP,aAAa;IAAO;IACnE,MAAMQ,UAAUvB,KAAKqB,QAAQ,CAACf,MAAMiB,OAAO,EAAE;QAC3CR,aAAa;QACbS,iBAAiBF,YAAYH,aAAa,CAAC,CAACV;IAC9C;IACA,MAAMgB,UAAUzB,KAAKqB,QAAQ,CAACf,MAAMmB,OAAO,EAAE;QAC3CV,aAAa;QACbS,iBAAiBJ,aAAaD,aAAaI,YAAYJ;IACzD;IAEA,MAAMO,QAAwB;QAC5Bf;QACAD,IAAII;QACJF;QAEAe,YAAY;YACVC,MAAMb;YACNK,UAAU;YACVK,SAAS;YACTH,SAAS;YACTC,SAAS;QACX;QAEAK,MAAM5B,KAAK6B,MAAM,CACf/B,yBAAyBiB,aAAa;YACpCR;YACA,GAAGU,mBAAmB;QACxB,IACA;YAAEF;QAAY;QAEhBK;QACAK;QACAF;QACAD;IACF;IAEA,IAAII,MAAMJ,OAAO,IAAIzB,MAAMiC,cAAc,CAAcJ,MAAMJ,OAAO,CAACb,QAAQ,GAAG;QAC9EiB,MAAMJ,OAAO,CAACb,QAAQ,GAAGZ,MAAMkC,YAAY,CAACL,MAAMJ,OAAO,CAACb,QAAQ,EAAE;YAClEuB,WAAWjC,aAAa2B,MAAMJ,OAAO,CAACb,QAAQ,CAACH,KAAK,CAAC0B,SAAS,EAAE7B,yBAAyB8B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}
|
|
@@ -20,6 +20,19 @@ export const useRootStyles = __styles({
|
|
|
20
20
|
}, {
|
|
21
21
|
d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
|
|
22
22
|
});
|
|
23
|
+
const useRootNextStyles = __styles({
|
|
24
|
+
root: {
|
|
25
|
+
Beyfa6y: 0,
|
|
26
|
+
Bbmb7ep: 0,
|
|
27
|
+
Btl43ni: 0,
|
|
28
|
+
B7oj6ja: 0,
|
|
29
|
+
Dimara: "f1kijzfu"
|
|
30
|
+
}
|
|
31
|
+
}, {
|
|
32
|
+
d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
|
|
33
|
+
p: -1
|
|
34
|
+
}]]
|
|
35
|
+
});
|
|
23
36
|
const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
|
|
24
37
|
const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
|
|
25
38
|
const useGraphicBaseClassName = __resetStyles("rpyrgl4", null, [".rpyrgl4{display:inline-flex;font-size:16px;height:16px;line-height:16px;width:16px;}", ".rpyrgl4>.fai-Reference__graphicChild{height:16px;width:16px;}"]);
|
|
@@ -30,12 +43,16 @@ const useContentBaseClassName = __resetStyles("r1ycou3l", null, [".r1ycou3l{alig
|
|
|
30
43
|
export const useReferenceStyles_unstable = state => {
|
|
31
44
|
'use no memo';
|
|
32
45
|
|
|
46
|
+
const {
|
|
47
|
+
designVersion
|
|
48
|
+
} = state;
|
|
33
49
|
const rootBaseClassName = useRootBaseClassName();
|
|
50
|
+
const rootNextStyles = useRootNextStyles();
|
|
34
51
|
const citationBaseClassName = useCitationBaseClassName();
|
|
35
52
|
const dividerBaseClassName = useDividerBaseClassName();
|
|
36
53
|
const contentBaseClassName = useContentBaseClassName();
|
|
37
54
|
const graphicBaseClassName = useGraphicBaseClassName();
|
|
38
|
-
state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);
|
|
55
|
+
state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
|
|
39
56
|
if (state.citation) {
|
|
40
57
|
state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
41
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } 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\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: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\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 display: 'inline-flex',\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 alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\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
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } 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\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: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\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 useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 display: 'inline-flex',\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 alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\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 { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootNextStyles = useRootNextStyles();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\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","typographyStyles","tokens","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","useRootNextStyles","borderRadiusXLarge","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","useReferenceStyles_unstable","state","designVersion","rootBaseClassName","rootNextStyles","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,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,iBAAiBZ,OAAOa,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEd,OAAOe,eAAe,CAAC,OAAO,EAAEf,OAAOgB,mBAAmB,CAAC,CAAC;IACvEC,cAAcjB,OAAOkB,kBAAkB;IACvCC,WAAW;IACXC,OAAOpB,OAAOqB,uBAAuB;IACrCC,WAAWtB,OAAOuB,oBAAoB;IACtCC,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACXC,SAAS,CAAC,EAAE7B,OAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,OAAO+B,kBAAkB,CAAC,CAAC;IACpEC,gBAAgB;IAEhB,UAAU;QACRpB,iBAAiBZ,OAAOiC,4BAA4B;QACpDC,aAAalC,OAAOmC,wBAAwB;QAC5Cf,OAAOpB,OAAOoC,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAEnC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBZ,OAAOmC,wBAAwB;QAClD;IACF;IAEA,iBAAiB;QACfvB,iBAAiBZ,OAAOqC,8BAA8B;QACtDH,aAAalC,OAAOsC,0BAA0B;QAC9ClB,OAAOpB,OAAOuC,8BAA8B;QAE5C,CAAC,CAAC,GAAG,EAAEtC,oBAAoBG,OAAO,CAAC,CAAC,CAAC,EAAE;YACrCQ,iBAAiBZ,OAAOsC,0BAA0B;QACpD;IACF;AACF;AAEA,OAAO,MAAME,gBAAgB3C,WAAW;IACtC4C,UAAU;QACRd,UAAU;QACVe,OAAO;IACT;AACF,GAAG;AAEH,MAAMC,oBAAoB9C,WAAW;IAAEK,MAAM;QAAEe,cAAcjB,OAAO4C,kBAAkB;IAAC;AAAE;AAEzF,MAAMC,2BAA2BjD,gBAAgB;IAC/C,GAAGG,iBAAiB+C,cAAc;AACpC;AAEA,MAAMC,0BAA0BnD,gBAAgB;IAC9CgB,iBAAiBZ,OAAOgB,mBAAmB;IAC3CgC,QAAQ;IACRC,QAAQ,CAAC,EAAEjD,OAAOkD,mBAAmB,CAAC,CAAC,EAAElD,OAAOmD,mBAAmB,CAAC,CAAC;IACrET,OAAO;AACT;AAEA,MAAMU,0BAA0BxD,gBAAgB;IAC9C4B,SAAS;IACT6B,UAAU5C;IACVuC,QAAQvC;IACR6C,YAAY7C;IACZiC,OAAOjC;IAEP,CAAC,CAAC,GAAG,EAAEF,yBAAyBC,YAAY,CAAC,CAAC,CAAC,EAAE;QAC/CwC,QAAQvC;QACRiC,OAAOjC;IACT;AACF;AAEA,MAAM8C,0BAA0B3D,gBAAgB;IAC9Ce,YAAY;IACZW,WAAWtB,OAAOwD,uBAAuB;IACzChC,SAAS;IACTiC,WAAW;IACXC,WAAW;IACX,GAAG3D,iBAAiB4D,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBrD;IAC1B,MAAMsD,iBAAiBrB;IACvB,MAAMsB,wBAAwBpB;IAC9B,MAAMqB,uBAAuBnB;IAC7B,MAAMoB,uBAAuBZ;IAC7B,MAAMa,uBAAuBhB;IAE7BS,MAAM3D,IAAI,CAACmE,SAAS,GAAGvE,aACrBG,oBAAoBC,IAAI,EACxB6D,mBACAD,kBAAkB,UAAUE,eAAe9D,IAAI,EAC/C2D,MAAM3D,IAAI,CAACmE,SAAS;IAGtB,IAAIR,MAAM1D,QAAQ,EAAE;QAClB0D,MAAM1D,QAAQ,CAACkE,SAAS,GAAGvE,aACzBG,oBAAoBE,QAAQ,EAC5B8D,uBACAJ,MAAM1D,QAAQ,CAACkE,SAAS;IAE5B;IAEA,IAAIR,MAAMzD,OAAO,EAAE;QACjByD,MAAMzD,OAAO,CAACiE,SAAS,GAAGvE,aAAaG,oBAAoBG,OAAO,EAAE8D,sBAAsBL,MAAMzD,OAAO,CAACiE,SAAS;IACnH;IAEA,IAAIR,MAAMvD,OAAO,EAAE;QACjBuD,MAAMvD,OAAO,CAAC+D,SAAS,GAAGvE,aAAaG,oBAAoBK,OAAO,EAAE6D,sBAAsBN,MAAMvD,OAAO,CAAC+D,SAAS;IACnH;IAEA,IAAIR,MAAMxD,OAAO,EAAE;QACjBwD,MAAMxD,OAAO,CAACgE,SAAS,GAAGvE,aAAaG,oBAAoBI,OAAO,EAAE+D,sBAAsBP,MAAMxD,OAAO,CAACgE,SAAS;IACnH;IAEA,OAAOR;AACT,EAAE"}
|
package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n /** The root of the component that renders the overflow button. */\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n
|
|
1
|
+
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n /** The root of the component that renders the overflow button. */\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> &\n DesignVersion & {\n /**\n * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n * If a string is passed, that is what is rendered verbatim.\n * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n */\n text?: string | ((overflowCount: number) => React.ReactNode);\n };\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &\n Pick<Required<ReferenceOverflowButtonProps>, 'designVersion'> & {\n id: string;\n shouldRenderOverflowButton: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC,GACD,WAII"}
|
|
@@ -3,6 +3,7 @@ import { Enter, Space } from '@fluentui/keyboard-keys';
|
|
|
3
3
|
import { getIntrinsicElementProps, mergeCallbacks, slot, useFocusFinders, useId, useMergedRefs, useOverflowMenu } from '@fluentui/react-components';
|
|
4
4
|
import { useTimeout } from '@fluentui/react-utilities';
|
|
5
5
|
import { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';
|
|
6
|
+
import { useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
6
7
|
/**
|
|
7
8
|
* Create the state required to render ReferenceOverflowButton.
|
|
8
9
|
*
|
|
@@ -20,6 +21,7 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
|
|
|
20
21
|
id,
|
|
21
22
|
text
|
|
22
23
|
} = props;
|
|
24
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
23
25
|
const rootRef = React.useRef(null);
|
|
24
26
|
const [setTimeout] = useTimeout();
|
|
25
27
|
const referenceOverflowButtonId = useId('reference-overflow-button-', id);
|
|
@@ -69,6 +71,7 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
|
|
|
69
71
|
}
|
|
70
72
|
}, [areReferencesExpanded, findFirstFocusable, findNextFocusable, isOverflowing, maxVisibleReferences, overflowCount, referenceListRef, setTimeout, totalReferencesCount, triggeredViaKeyboard]);
|
|
71
73
|
const state = {
|
|
74
|
+
designVersion,
|
|
72
75
|
id: referenceOverflowButtonId,
|
|
73
76
|
shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
|
|
74
77
|
components: {
|
package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useId,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, id, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter || ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement | null | undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n id: referenceOverflowButtonId,\n shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useId","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","id","text","rootRef","useRef","setTimeout","referenceOverflowButtonId","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useId,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, id, text } = props;\n const designVersion = useDesignVersion(props.designVersion);\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter || ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement | null | undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n designVersion,\n id: referenceOverflowButtonId,\n shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useId","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useDesignVersion","useReferenceOverflowButton_unstable","props","ref","children","id","text","designVersion","rootRef","useRef","setTimeout","referenceOverflowButtonId","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,KAAK,EACLC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAEvG,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGJ;IAC/B,MAAMK,gBAAgBP,iBAAiBE,MAAMK,aAAa;IAE1D,MAAMC,UAAUpB,MAAMqB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGZ;IAErB,MAAMa,4BAA4BhB,MAAM,8BAA8BU;IAEtE,MAAMO,wBAAwBb,iCAAiCc,CAAAA,MAAOA,IAAID,qBAAqB;IAC/F,MAAME,uBAAuBf,iCAAiCc,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBhB,iCAAiCc,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBjB,iCAAiCc,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBlB,iCAAiCc,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGvB;IAEzC,MAAMwB,gBAAgBjB,qBAAAA,sBAAAA,WAAa,OAAOE,SAAS,aAAaA,KAAKc,iBAAiBd;IAEtF,MAAM,EAAEgB,kBAAkB,EAAEC,iBAAiB,EAAE,GAAG7B;IAClD,MAAM8B,YAAYpC,MAAMqC,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKtC,SAASqC,GAAGC,GAAG,KAAKrC,OAAO;YACxC2B,qBAAqBW,OAAO,GAAG;QACjC;IACF,GACA;QAACX;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMY,mBAAmBzC,MAAMqB,MAAM,CAAC;IAEtC,gHAAgH;IAChHrB,MAAM0C,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIhB,yBAAyBiB,aAAad,qBAAqBW,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBxB,QAAQoB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIZ,QAAQoB,OAAO,IAAIb,iBAAiBa,OAAO,EAAE;gBACpD,MAAMK,kBACJnB,uBAAuBE,uBAAuBa,iBAAiBD,OAAO,GAClEd,uBACAE,uBAAuBa,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBP,iBAAiBa,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBX,kBAAkBW;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/IxB,WAAW;gBACTsB,2BAAAA,qCAAAA,eAAgBI,KAAK;gBACrBnB,qBAAqBW,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAL;QACAM;QACAL;QACAL;QACAM;QACAC;KACD;IAED,MAAMoB,QAAsC;QAC1C9B;QACAF,IAAIM;QACJ2B,4BAA4BnB,iBAAiBP;QAE7C2B,YAAY;YACVC,MAAM;QACR;QAEAA,MAAM/C,KAAKgD,MAAM,CACflD,yBAAyB,UAAU;YACjCY,KAAKP,cAAcY,SAASL;YAC5B,GAAGD,KAAK;QACV,IACA;YACEwC,cAAc;gBACZtC,UAAUiB;YACZ;YACAsB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAAChB,SAAS,GAAGhC,eAAegC,WAAWtB,MAAMsB,SAAS;IAEhE,OAAOa;AACT,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
3
|
export const referenceOverflowButtonClassNames = {
|
|
4
4
|
root: 'fai-ReferenceOverflowButton'
|
|
@@ -7,14 +7,31 @@ export const referenceOverflowButtonClassNames = {
|
|
|
7
7
|
* Styles for the root slot
|
|
8
8
|
*/
|
|
9
9
|
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);}"]);
|
|
10
|
+
const useNextStyles = __styles({
|
|
11
|
+
root: {
|
|
12
|
+
Beyfa6y: 0,
|
|
13
|
+
Bbmb7ep: 0,
|
|
14
|
+
Btl43ni: 0,
|
|
15
|
+
B7oj6ja: 0,
|
|
16
|
+
Dimara: "f1kijzfu"
|
|
17
|
+
}
|
|
18
|
+
}, {
|
|
19
|
+
d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
|
|
20
|
+
p: -1
|
|
21
|
+
}]]
|
|
22
|
+
});
|
|
10
23
|
/**
|
|
11
24
|
* Apply styling to the ReferenceOverflowButton slots based on the state
|
|
12
25
|
*/
|
|
13
26
|
export const useReferenceOverflowButtonStyles_unstable = state => {
|
|
14
27
|
'use no memo';
|
|
15
28
|
|
|
29
|
+
const {
|
|
30
|
+
designVersion
|
|
31
|
+
} = state;
|
|
16
32
|
const rootBaseClassName = useRootBaseClassName();
|
|
17
|
-
|
|
33
|
+
const nextStyles = useNextStyles();
|
|
34
|
+
state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
18
35
|
return state;
|
|
19
36
|
};
|
|
20
37
|
//# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n referenceOverflowButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","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","useNextStyles","borderRadiusXLarge","useReferenceOverflowButtonStyles_unstable","state","designVersion","rootBaseClassName","nextStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,YAAY;IACZC,iBAAiBL,OAAOM,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEP,OAAOQ,eAAe,CAAC,OAAO,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACvEC,cAAcV,OAAOW,kBAAkB;IACvCC,OAAOZ,OAAOa,uBAAuB;IACrCC,QAAQ;IACRC,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,SAAS,CAAC,EAAElB,OAAOmB,kBAAkB,CAAC,CAAC,EAAEnB,OAAOoB,kBAAkB,CAAC,CAAC;IACpE,GAAGrB,iBAAiBsB,QAAQ;IAE5B,UAAU;QACRhB,iBAAiBL,OAAOsB,4BAA4B;QACpDC,aAAavB,OAAOwB,wBAAwB;QAC5CZ,OAAOZ,OAAOyB,4BAA4B;IAC5C;IAEA,iBAAiB;QACfpB,iBAAiBL,OAAO0B,8BAA8B;QACtDH,aAAavB,OAAO2B,0BAA0B;QAC9Cf,OAAOZ,OAAO4B,8BAA8B;IAC9C;AACF;AAEA,MAAMC,gBAAgBhC,WAAW;IAAEK,MAAM;QAAEQ,cAAcV,OAAO8B,kBAAkB;IAAC;AAAE;AAErF;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoB/B;IAC1B,MAAMgC,aAAaN;IAEnBG,MAAM9B,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,kCAAkCC,IAAI,EACtCgC,mBACAD,kBAAkB,UAAUE,WAAWjC,IAAI,EAC3C8B,MAAM9B,IAAI,CAACkC,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n /**\n * The root slot.\n */\n root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> & {\n
|
|
1
|
+
{"version":3,"sources":["Citation.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type CitationSlots = {\n /**\n * The root slot.\n */\n root: NonNullable<Slot<'a'>>;\n};\n\n/**\n * Citation Props\n */\nexport type CitationProps = ComponentProps<Partial<CitationSlots>> &\n DesignVersion & {\n /**\n * HREF to the associated `Reference`.\n */\n referenceHref?: string;\n\n /**\n * Whether the citation is a block citation and has no built in margins.\n * Citations are inline by default with margins to separate them from inline text.\n */\n block?: boolean;\n };\n\n/**\n * State used in rendering Citation\n */\nexport type CitationState = ComponentState<CitationSlots> &\n Required<Pick<CitationProps, 'block' | 'designVersion'>> & {\n isPopoverLocked: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA2BA;;CAEC"}
|
|
@@ -10,11 +10,14 @@ Object.defineProperty(exports, "useCitation_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _reactcomponents = require("@fluentui/react-components");
|
|
12
12
|
const _reactpreview = require("@fluentui-copilot/react-preview");
|
|
13
|
+
const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
13
14
|
const useCitation_unstable = (props, ref)=>{
|
|
14
15
|
const { referenceHref, block = false, ...otherProps } = props;
|
|
16
|
+
const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
|
|
15
17
|
const isPopoverLocked = (0, _reactpreview.usePreviewContext_unstable)((ctx)=>ctx.isPreviewLocked) && props['aria-expanded'];
|
|
16
18
|
const state = {
|
|
17
19
|
block,
|
|
20
|
+
designVersion,
|
|
18
21
|
isPopoverLocked,
|
|
19
22
|
components: {
|
|
20
23
|
root: 'a'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n const { referenceHref, block = false, ...otherProps } = props;\n\n const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n const state: CitationState = {\n block,\n isPopoverLocked,\n components: {\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n ref,\n href: referenceHref,\n role: undefined,\n 'aria-expanded': undefined,\n ...otherProps,\n }),\n { elementType: 'a' },\n ),\n };\n\n return state;\n};\n"],"names":["referenceHref","props","ref","
|
|
1
|
+
{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n const { referenceHref, block = false, ...otherProps } = props;\n const designVersion = useDesignVersion(props.designVersion);\n\n const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n const state: CitationState = {\n block,\n designVersion,\n isPopoverLocked,\n components: {\n root: 'a',\n },\n root: slot.always(\n getIntrinsicElementProps('a', {\n ref,\n href: referenceHref,\n role: undefined,\n 'aria-expanded': undefined,\n ...otherProps,\n }),\n { elementType: 'a' },\n ),\n };\n\n return state;\n};\n"],"names":["referenceHref","props","ref","isPopoverLocked","block","state","components","usePreviewContext_unstable","ctx","isPreviewLocked","root","href","role","otherProps","elementType","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcUA;;;eAAAA;;;iCAdqC;8BACJ;+BAEV;AAW/B,MAAQA,uBAAuB,CAAAC,OAAOC;UACtC,EAEAF,aAAMG,EAENC,QAAMC,KAAAA;UAGJF,gBAAAA,IAAAA,+BAAAA,EAAAA,MAAAA,aAAAA;UACAG,kBAAYC,IAAAA,wCAAA,EAAAC,CAAAA,MAAAA,IAAAC,eAAA,KAAAR,KAAA,CAAA,gBAAA;kBACVS;;;;oBAKEC;kBACAC;;mCAEA,CAAGC,MAAAA,CAAAA,IAAAA,yCAAU,EAAA,KAAA;;kBAEbC;kBAAiBC;YAEvB,iBAAAA;YAEA,GAAAF,UAAOR;QACP,IAAA"}
|
|
@@ -87,10 +87,30 @@ const useCitationRootStyles = (0, _reactcomponents.__styles)({
|
|
|
87
87
|
".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"
|
|
88
88
|
]
|
|
89
89
|
});
|
|
90
|
+
const useNextStyles = (0, _reactcomponents.__styles)({
|
|
91
|
+
root: {
|
|
92
|
+
Beyfa6y: 0,
|
|
93
|
+
Bbmb7ep: 0,
|
|
94
|
+
Btl43ni: 0,
|
|
95
|
+
B7oj6ja: 0,
|
|
96
|
+
Dimara: "f1kijzfu"
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
d: [
|
|
100
|
+
[
|
|
101
|
+
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
|
|
102
|
+
{
|
|
103
|
+
p: -1
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
]
|
|
107
|
+
});
|
|
90
108
|
const useCitationStyles_unstable = (state)=>{
|
|
91
109
|
'use no memo';
|
|
110
|
+
const { designVersion } = state;
|
|
92
111
|
const rootBaseClassName = useCitationBaseClassName();
|
|
93
112
|
const rootStyles = useCitationRootStyles();
|
|
94
|
-
|
|
113
|
+
const nextStyles = useNextStyles();
|
|
114
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
95
115
|
return state;
|
|
96
116
|
}; //# sourceMappingURL=useCitationStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import {
|
|
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 ...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":["citationClassNames","useCitationStyles_unstable","tokens","root","useCitationBaseClassName","makeResetStyles","display","__styles","justifyContent","boxSizing","alignItems","t21cq0","typographyStyles","caption2Strong","color","minWidth","height","verticalAlign","borderRadius","borderRadiusMedium","textDecoration","marginLeft","marginRight","Bwzppfd","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Pressed","backgroundColor","Beyfa6y","Bbmb7ep","Btl43ni","useCitationRootStyles","isBlock","isPopoverLocked","designVersion","useNextStyles","nextStyles","state","className","mergeClasses","rootStyles","block","rootBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,kBAAAA;eAAAA;;IAqDPC,0BAA0BC;eAA1BD;;;iCA1D0E;AAKzE,MAAMD,qBAAoD;UAC/DG;AACF;AAEA,MAAMC,2BAA2BC,IAAAA,8BAAAA,EAAAA,UAAgB,YAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;MAC/CC,wBAASC,IAAAA,yBAAA,EAAA;aACTC;QACAC,QAAAA;QACAC,QAAAA;YAAAA;YAAY;SAAA;QACZC,QAAGC;YAAAA;YAAiBC;SAAAA;;qBAGTX;QACXY,QAAOZ;QAEPa,QAAAA;QACAC,QAAQ;YAAA;YAAA;SAAA;QACRC,SAAAA;QAEAC,QAAAA;YAAAA;YAAchB;SAAOiB;QAErBC,QAAAA;QAEAC,SAAAA;QACAC,SAAAA;QAEAC,SAAA;YAAU;YAAA;SAAA;gBACRC;gBACAV;YAAAA;YAAcW;SAAAA;gBACdC;;;OAIF;QAAA;QAAiB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;;;QACP;QAAA;QAAA;QAAA;QAAA;KAAA;;sBAEKxB,IAAAA,yBAAOyB,EAAAA;UACpBC;QACFC,SAAA;QACFC,SAAA;QAEAC,SAAMC;QACJC,SAAS;gBACP3B;;;OAGF;QAAA;YAAA;YAAA;gBACA4B,GAAAA,CAAAA;;;;;MAMIjC,6BAA0BC,CAAAA;;UAG9B,EACFiC,aAAA,EAEA,GAAMC;UAA6BjC,oBAAMC;UAAEc,aAAAA;UAAwCmB,aAAAD;IAAEE,MAAAnC,IAAA,CAAAoC,SAAA,GAAAC,IAAAA,6BAAA,EAAAxC,mBAAAG,IAAA,EAAAmC,MAAAJ,eAAA,IAAAO,WAAAP,eAAA,EAAAI,MAAAI,KAAA,IAAAD,WAAAR,OAAA,EAAAU,mBAAAR,kBAAA,UAAAE,WAAAlC,IAAA,EAAAmC,MAAAnC,IAAA,CAAAoC,SAAA;IAErF,OAAAD;uDAG2CA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n /** The root of the component that renders the reference as either a button or an anchor element. */\n root: NonNullable<Slot<'button', 'a'>>;\n\n /** The number of the citation this reference corresponds to. */\n citation?: Slot<'span'>;\n\n /** A divider that visually separates the citation from the content of the reference. */\n divider?: Slot<'span'>;\n\n /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n content?: Slot<'span'>;\n\n /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n Required<Pick<ReferenceProps, 'id'>> &\n Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
1
|
+
{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n /** The root of the component that renders the reference as either a button or an anchor element. */\n root: NonNullable<Slot<'button', 'a'>>;\n\n /** The number of the citation this reference corresponds to. */\n citation?: Slot<'span'>;\n\n /** A divider that visually separates the citation from the content of the reference. */\n divider?: Slot<'span'>;\n\n /** A space containing the content of the reference, which goes into an ellipsis if it overflows. */\n content?: Slot<'span'>;\n\n /** A space within the content slot where a graphic such as an icon or an image can be displayed before the rest of the content. */\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & DesignVersion & {};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n Required<Pick<ReferenceProps, 'id' | 'designVersion'>> &\n Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -13,8 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
14
|
const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
|
|
15
15
|
const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
|
|
16
|
+
const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
16
17
|
const useReference_unstable = (props, ref)=>{
|
|
17
18
|
const { as, children, id } = props;
|
|
19
|
+
const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
|
|
18
20
|
const shouldUseOverflow = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.shouldUseOverflow);
|
|
19
21
|
const referenceId = (0, _reactcomponents.useId)('reference-', id);
|
|
20
22
|
const elementType = as || (props.href ? 'a' : 'button');
|
|
@@ -39,6 +41,7 @@ const useReference_unstable = (props, ref)=>{
|
|
|
39
41
|
renderByDefault: citation !== undefined && content !== undefined
|
|
40
42
|
});
|
|
41
43
|
const state = {
|
|
44
|
+
designVersion,
|
|
42
45
|
id: referenceId,
|
|
43
46
|
shouldUseOverflow,
|
|
44
47
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n props: ReferenceProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n const { as, children, id } = props;\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\n\n const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n const propsWithAssignedAs = {\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n id: referenceId,\n } as ReferenceProps;\n\n const citation = slot.optional(props.citation, { elementType: 'span' });\n const graphic = slot.optional(props.graphic, { elementType: 'span' });\n const content = slot.optional(props.content, {\n elementType: 'span',\n renderByDefault: graphic !== undefined || !!children,\n });\n const divider = slot.optional(props.divider, {\n elementType: 'span',\n renderByDefault: citation !== undefined && content !== undefined,\n });\n\n const state: ReferenceState = {\n id: referenceId,\n shouldUseOverflow,\n\n components: {\n root: elementType,\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(elementType, {\n ref,\n ...propsWithAssignedAs,\n }),\n { elementType },\n ),\n citation,\n divider,\n content,\n graphic,\n };\n\n if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n state.graphic.children = React.cloneElement(state.graphic.children, {\n className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n });\n }\n\n return state;\n};\n"],"names":["as","props","children","
|
|
1
|
+
{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles.styles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n props: ReferenceProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n const { as, children, id } = props;\n\n const designVersion = useDesignVersion(props.designVersion);\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\n\n const elementType = as || ((props as JSX.IntrinsicElements['a']).href ? 'a' : 'button');\n const propsWithAssignedAs = {\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n id: referenceId,\n } as ReferenceProps;\n\n const citation = slot.optional(props.citation, { elementType: 'span' });\n const graphic = slot.optional(props.graphic, { elementType: 'span' });\n const content = slot.optional(props.content, {\n elementType: 'span',\n renderByDefault: graphic !== undefined || !!children,\n });\n const divider = slot.optional(props.divider, {\n elementType: 'span',\n renderByDefault: citation !== undefined && content !== undefined,\n });\n\n const state: ReferenceState = {\n designVersion,\n id: referenceId,\n shouldUseOverflow,\n\n components: {\n root: elementType,\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(elementType, {\n ref,\n ...propsWithAssignedAs,\n }),\n { elementType },\n ),\n citation,\n divider,\n content,\n graphic,\n };\n\n if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n state.graphic.children = React.cloneElement(state.graphic.children, {\n className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n });\n }\n\n return state;\n};\n"],"names":["as","props","children","referenceId","id","type","elementType","designVersion","undefined","shouldUseOverflow","useReferenceListContext_unstable","ctx","propsWithAssignedAs","citation","optional","slot","content","renderByDefault","graphic","root","ref","always","getIntrinsicElementProps","divider","state","React","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;;iEApBa;iCAC6C;sCACnB;0CACR;+BAER;AAe/B,MAAQA,wBAAqBC,CAAAA,OAAAA;UAE7B,EAEAD,EAAA,EAEAE,QAAMC,EAENC,EAAA,KACAH;UACEI,gBAAMC,IAAAA,+BAAgB,EAAWL,MAAAM,aAAWC;UAC5CC,oBAAQC,IAAAA,sDAAA,EAAAC,CAAAA,MAAAA,IAAAF,iBAAA;UACRT,cAAIM,IAAAA,sBAAAA,EAAAA,cAAAA;UACJF,cAAID,MAAAA,CAAAA,MAAAA,IAAAA,GAAAA,MAAAA,QAAAA;UACNS,sBAAA;QAEAP,MAAMQ,gBAAgBC,WAASb,WAAMY;gBAAYP;QAAoBN,IAAAM;QACrEF,IAAAD;;UAAmEU,WAAAE,qBAAA,CAAAD,QAAA,CAAAb,MAAAY,QAAA,EAAA;QACnEP,aAAMU;;UAEJC,UAAAA,qBAAAA,CAAAA,QAAiBC,CAAAA,MAAYV,OAAAA,EAAAA;QAC/BF,aAAA;;UAEEA,UAAAA,qBAAa,CAAAQ,QAAA,CAAAb,MAAAe,OAAA,EAAA;qBACbC;QACFA,iBAAAC,YAAAV,aAAA,CAAA,CAAAN;;UAGEK,UAAAA,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBACIJ;yBACJM,aAAAA,aAAAA,YAAAA;;kBAGEU;;;;oBAIAH;kBACFV;sBAEMS;qBAEFK;qBACGR;qBAEL;;cAAcG,qBAAA,CAAAM,MAAA,CAAAC,IAAAA,yCAAA,EAAAhB,aAAA;;eAGhBiB,mBAAAA;YACAP;;QAEF;QAEAH;;;;;QAMAW,MAAOA,OAAAA,kBAAAA,OAAAA,cAAAA,CAAAA,MAAAA,OAAAA,CAAAA,QAAAA,GAAAA;QACPA,MAAAN,OAAA,CAAAhB,QAAA,iBAAAuB,OAAAC,YAAA,CAAAF,MAAAN,OAAA,CAAAhB,QAAA,EAAA"}
|
|
@@ -52,6 +52,24 @@ const useRootStyles = (0, _reactcomponents.__styles)({
|
|
|
52
52
|
".fly5x3f{width:100%;}"
|
|
53
53
|
]
|
|
54
54
|
});
|
|
55
|
+
const useRootNextStyles = (0, _reactcomponents.__styles)({
|
|
56
|
+
root: {
|
|
57
|
+
Beyfa6y: 0,
|
|
58
|
+
Bbmb7ep: 0,
|
|
59
|
+
Btl43ni: 0,
|
|
60
|
+
B7oj6ja: 0,
|
|
61
|
+
Dimara: "f1kijzfu"
|
|
62
|
+
}
|
|
63
|
+
}, {
|
|
64
|
+
d: [
|
|
65
|
+
[
|
|
66
|
+
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
|
|
67
|
+
{
|
|
68
|
+
p: -1
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
]
|
|
72
|
+
});
|
|
55
73
|
const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("rzdip90", null, [
|
|
56
74
|
".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"
|
|
57
75
|
]);
|
|
@@ -67,12 +85,14 @@ const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("r1ycou3l",
|
|
|
67
85
|
]);
|
|
68
86
|
const useReferenceStyles_unstable = (state)=>{
|
|
69
87
|
'use no memo';
|
|
88
|
+
const { designVersion } = state;
|
|
70
89
|
const rootBaseClassName = useRootBaseClassName();
|
|
90
|
+
const rootNextStyles = useRootNextStyles();
|
|
71
91
|
const citationBaseClassName = useCitationBaseClassName();
|
|
72
92
|
const dividerBaseClassName = useDividerBaseClassName();
|
|
73
93
|
const contentBaseClassName = useContentBaseClassName();
|
|
74
94
|
const graphicBaseClassName = useGraphicBaseClassName();
|
|
75
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, state.root.className);
|
|
95
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
|
|
76
96
|
if (state.citation) {
|
|
77
97
|
state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
78
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } 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\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: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\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 display: 'inline-flex',\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 alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\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
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } 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\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: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n maxWidth: '100%',\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 useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 display: 'inline-flex',\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 alignItems: 'center',\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n textAlign: 'start',\n wordBreak: 'break-word',\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 { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootNextStyles = useRootNextStyles();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\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","useReferenceStyles_unstable","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","borderRadius","columnGap","spacingHorizontalXXS","flexShrink","justifyContent","maxWidth","minHeight","padding","textDecoration","Dimara","useCitationBaseClassName","__resetStyles","useDividerBaseClassName","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","state","overflow","width","rootNextStyles","useRootNextStyles","citationBaseClassName","makeStyles","useContentBaseClassName","borderRadiusXLarge","className","mergeClasses","rootBaseClassName","designVersion","dividerBaseClassName","height","margin","tokens","spacingVerticalNone","spacingHorizontalXS","contentBaseClassName","useGraphicBaseClassName","graphicBaseClassName","fontSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAuCTC,2BAAA;eAAAA;;IAhCFC,aAAY;eAAZA;;;iCApBkE;AAK7D,MAAMH,sBAAsD;UACjEI;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMP,2BAA2B;kBACtCQ;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZC;QACAC,SAAS;QACTC,QAAAA;;;OAGAC;QAAAA;QAAkBC;KAAoB;;MAEtCC,oBAAYN,IAAAA,yBAAA,EAAA;UACZO;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,SAAAA;QAEAC,QAAA;;;;;;YAG4C;oBAE1C;;;;;MAGFC,2BAAAC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MAEAC,0BAAiBD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;gCACSE,IAAAA,8BAAAA,EAAAA,WAAAA,MAA8B;IAAA;IAAA;CAAA;gCAClCC,IAAAA,8BAAAA,EAAAA,YAA0B,MAAA;IAAA;CAAA;MAK9C5B,8BAAA6B,CAAAA;;IAIJ,MAAO,EACLC,aAAU;UAERC,oBAAOtB;UACTuB,iBAAAC;IACF,MAAGC,wBAAAV;IAEH,MAAMS,uBAAoBE;UAAajC,uBAAMkC;UAAEtB,uBAAqBuB;UAAmBnC,IAAA,CAAAoC,SAAA,GAAAC,IAAAA,6BAAA,EAAAzC,oBAAAI,IAAA,EAAAsC,mBAAAC,kBAAA,UAAAT,eAAA9B,IAAA,EAAA2B,MAAA3B,IAAA,CAAAoC,SAAA;IAAE,IAAAT,MAAA1B,QAAA,EAAA;QAEzF0B,MAAML,QAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA2Bd,EAAAA,oBAAgBP,QAAA,EAAA+B,uBAAAL,MAAA1B,QAAA,CAAAmC,SAAA;;IAEjD,IAAAT,MAAAzB,OAAA,EAAA;QAEAyB,MAAMH,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA0BhB,EAAAA,oBAAgBN,OAAA,EAAAsC,sBAAAb,MAAAzB,OAAA,CAAAkC,SAAA;;QAE9CK,MAAQrC,OAAA,EAAA;QACRsC,MAAAA,OAAWC,CAAAA,SAAOC,GAAAA,IAAAA,6BAAoB,EAAChD,oBAASiD,OAAAA,EAAoBC,sBAACnB,MAAAvB,OAAA,CAAAgC,SAAA;;IAEvE,IAAAT,MAAAxB,OAAA,EAAA;QAEAwB,MAAMoB,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA0BvC,EAAAA,oBAAgBL,OAAA,EAAA6C,sBAAArB,MAAAxB,OAAA,CAAAiC,SAAA;;WAE9Ca;wDAEY3C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n /** The root of the component that renders the overflow button. */\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n
|
|
1
|
+
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n /** The root of the component that renders the overflow button. */\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> &\n DesignVersion & {\n /**\n * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n * If a string is passed, that is what is rendered verbatim.\n * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n */\n text?: string | ((overflowCount: number) => React.ReactNode);\n };\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &\n Pick<Required<ReferenceOverflowButtonProps>, 'designVersion'> & {\n id: string;\n shouldRenderOverflowButton: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC"}
|
package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js
CHANGED
|
@@ -14,9 +14,11 @@ const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
|
14
14
|
const _reactcomponents = require("@fluentui/react-components");
|
|
15
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
|
|
17
|
+
const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
17
18
|
const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
18
19
|
'use no memo';
|
|
19
20
|
const { children, id, text } = props;
|
|
21
|
+
const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
|
|
20
22
|
const rootRef = _react.useRef(null);
|
|
21
23
|
const [setTimeout] = (0, _reactutilities.useTimeout)();
|
|
22
24
|
const referenceOverflowButtonId = (0, _reactcomponents.useId)('reference-overflow-button-', id);
|
|
@@ -73,6 +75,7 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
|
73
75
|
triggeredViaKeyboard
|
|
74
76
|
]);
|
|
75
77
|
const state = {
|
|
78
|
+
designVersion,
|
|
76
79
|
id: referenceOverflowButtonId,
|
|
77
80
|
shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
|
|
78
81
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useId,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, id, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter || ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement | null | undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n id: referenceOverflowButtonId,\n shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useId,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, id, text } = props;\n const designVersion = useDesignVersion(props.designVersion);\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter || ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement | null | undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n designVersion,\n id: referenceOverflowButtonId,\n shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","setTimeout","id","text","designVersion","referenceListRef","useReferenceListContext_unstable","rootRef","totalReferencesCount","triggeredViaKeyboard","referenceOverflowButtonId","overflowCount","useOverflowMenu","areReferencesExpanded","maxVisibleReferences","useFocusFinders","React","ev","Enter","ctx","overflowButtonTriggeredViaKeyboard","isOverflowing","processedText","findFirstFocusable","onKeyDown","undefined","elementToFocus","current","currentElement","findNextFocusable","previousOverflow","i","positionToFocus","state","shouldRenderOverflowButton","components","slot","always","getIntrinsicElementProps","root","defaultProps","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BEA;;;eAAAA;;;;iEA7BqB;8BACM;iCAStB;gCACoB;sCACsB;+BAEhB;AAe/B,MAAAA,sCAAA,CAAAC,OAAAC;;UAKA,EAEAC,QAAOC,EAEPC,EAAA,EAEAC,IAAA,KACAL;UACAM,gBAAMC,IAAAA,+BAAmBC,EAAAA,MAAAA,aAAAA;UACzBC,UAAMC,OAAAA,MAAAA,CAAAA;UACN,CAAAP,WAAMQ,GAAAA,IAAAA,0BAAuBH;UAE7BI,4BAAuBC,IAAAA,sBAAa,EAAE,8BAAGC;UAEzCC,wBAAsBb,IAAAA,sDAAAA,EAAAA,CAAAA,MAAAA,IAAAA,qBAA6B;UAEnDc,uBAA0BR,IAAAA,sDAAwBS,EAAAA,CAAAA,MAAAA,IAAAA,oBAAAA;UAClDV,mBAAkBW,IAAAA,sDAChBC,EAAAA,CAAAA,MAAAA,IAAAA,gBAAAA;UACET,uBAAeU,IAAAA,sDAA2B,EAAAC,CAAAA,MAAAA,IAAAX,oBAAA;iCACxCC,IAAAA,sDAA+B,EAAAU,CAAAA,MAAAA,IAAAC,kCAAA;UACjC,EACFC,aACA,eAACZ,KAAqBG,IAAAA,gCAAA;UAGxBU,gBAAAtB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,KAAAQ,iBAAAR;UACA,EAEAoB,kBAAA,EACAP,iBAAgB,yCACd;UACAQ,YAAIV,OAAAA,WAAyBW,CAAAA,CAAAA;kBAC3B,KAAIC,mBAAAA,IAAAA,GAAAA,GAAAA,KAAAA,mBAAAA,EAAAA;iCAEJC,OAAA,GAAA;;;;KAEED;8IAC2Bf;6BAMpBJ,OAAQoB,MAAO,CAAA;oHAGhBb;oBAGN,CAAA;uHAC4D;qCAC1Dc,aAAiBC,qBAAkBD,OAAAA,EAAAA;;qFAGpBA;wCACnB;iCAEArB,QAAAoB,OAAA;iCACWA,OAAA,GAAAhB;uBACTe,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;wCACAjB,uBAA+BD,uBAAAsB,iBAAAH,OAAA,GAAAb,uBAAAN,uBAAAsB,iBAAAH,OAAA;oBACjCC,iBAAGL,mBAAAlB,iBAAAsB,OAAA;gBACL,IAAA,IAAAI,IAAA,GAAAA,IAAAC,mBAAAJ,gBAAAG,IAAA;oBACCH,iBAAAC,kBAAAD;gBACDf;gBACAU,iBAAAA;;2JAEAF;uBACAP;gBACAH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAN,qBAAAA,OAAAA,GAAAA;eACAJ;;;;QAEAQ;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;UACDwB,QAAA;QAED7B;YACEA;oCACIM,iBAAAA;oBACJwB;kBAEAC;;cAEAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAEAC,IAAAA,8BAAWF,EAAM9B,SACf+B;oBACEvC;;0BAGF;0BACEyC;;yBAEA;;;UAIND,IAAA,CAAAf,SAAA,GAAAiB,IAAAA,+BAAA,EAAAjB,WAAA1B,MAAA0B,SAAA;WAEAS;GAGF,sDAAE"}
|
|
@@ -27,9 +27,29 @@ const referenceOverflowButtonClassNames = {
|
|
|
27
27
|
".r1hm0apo:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
|
|
28
28
|
".r1hm0apo:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
|
|
29
29
|
]);
|
|
30
|
+
const useNextStyles = (0, _reactcomponents.__styles)({
|
|
31
|
+
root: {
|
|
32
|
+
Beyfa6y: 0,
|
|
33
|
+
Bbmb7ep: 0,
|
|
34
|
+
Btl43ni: 0,
|
|
35
|
+
B7oj6ja: 0,
|
|
36
|
+
Dimara: "f1kijzfu"
|
|
37
|
+
}
|
|
38
|
+
}, {
|
|
39
|
+
d: [
|
|
40
|
+
[
|
|
41
|
+
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
|
|
42
|
+
{
|
|
43
|
+
p: -1
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
]
|
|
47
|
+
});
|
|
30
48
|
const useReferenceOverflowButtonStyles_unstable = (state)=>{
|
|
31
49
|
'use no memo';
|
|
50
|
+
const { designVersion } = state;
|
|
32
51
|
const rootBaseClassName = useRootBaseClassName();
|
|
33
|
-
|
|
52
|
+
const nextStyles = useNextStyles();
|
|
53
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, state.root.className);
|
|
34
54
|
return state;
|
|
35
55
|
}; //# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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\nconst useNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\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 { designVersion } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n referenceOverflowButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["referenceOverflowButtonClassNames","backgroundColor","colorNeutralBackground3Pressed","root","alignItems","__resetStyles","tokens","colorNeutralBackground3","border","borderRadius","color","cursor","display","justifyContent","typographyStyles","p","designVersion","useNextStyles","useRootBaseClassName","className","mergeClasses","rootBaseClassName","nextStyles","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,iCAAAA;eAAAA;;IA2BTC,yCAAwBC;eAAxBD;;;iCAhCgE;AAK7D,MAAMD,oCAAkF;UAC7FG;AACF;AAEA;;CAEC,SAECC,uBAAYC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;CAAA;MACZJ,gBAAiBK,IAAAA,yBAAOC,EAAAA;UACxBC;QACAC,SAAAA;QACAC,SAAOJ;QACPK,SAAQ;QACRC,SAAS;QACTC,QAAAA;;;OAGA;QAAA;YAAGC;YAAyB;gBAE5BC,GAAA,CAAA;;;;;MAOEd,4CAAwBC,CAAAA;;UAG1B,EACFc,aAAA,EAEA,GAAMC;UAA6Bd,oBAAMe;UAAET,aAAAA;UAAwCN,IAAA,CAAAgB,SAAA,GAAAC,IAAAA,6BAAA,EAAApB,kCAAAG,IAAA,EAAAkB,mBAAAL,kBAAA,UAAAM,WAAAnB,IAAA,EAAAoB,MAAApB,IAAA,CAAAgB,SAAA;IAAE,OAAAI;AAErF"}
|
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-20250321-0406-b2bc2ed5.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,11 +12,11 @@
|
|
|
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-
|
|
18
|
-
"@fluentui-copilot/react-utilities": "^0.0.0-nightly-
|
|
19
|
-
"@fluentui-copilot/tokens": "^0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-preview": "^0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
16
|
+
"@fluentui-copilot/react-provider": "^0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
17
|
+
"@fluentui-copilot/react-sensitivity-label": "^0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
18
|
+
"@fluentui-copilot/react-utilities": "^0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
19
|
+
"@fluentui-copilot/tokens": "^0.0.0-nightly-20250321-0406-b2bc2ed5.1",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|