@fluentui-copilot/react-reference 0.0.0-nightly-20240530-0404-c2e14c44.1 → 0.0.0-nightly-20240603-0405-523b7bd2.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 +60 -9
- package/CHANGELOG.md +22 -7
- package/dist/index.d.ts +9 -24
- package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggle.js +3 -0
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js +22 -2
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.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 +1 -9
- package/lib/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js +4 -26
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js +9 -9
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceListContextValues.js +8 -6
- package/lib/components/reference-v2/ReferenceList/useReferenceListContextValues.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +21 -19
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +2 -20
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/lib/contexts/reference-v2/referenceListContext.js +5 -4
- package/lib/contexts/reference-v2/referenceListContext.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js +3 -0
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js +26 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.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 +1 -6
- package/lib-commonjs/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js +2 -38
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js +9 -7
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListContextValues.js +5 -4
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListContextValues.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 +25 -17
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +1 -32
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/reference-v2/referenceListContext.js +5 -4
- package/lib-commonjs/contexts/reference-v2/referenceListContext.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 03 Jun 2024 04:11:32 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240603-0405-523b7bd2.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240603-0405-523b7bd2.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,71 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-reference",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240603-0405-523b7bd2.1",
|
|
20
|
+
"commit": "9f42362f4854ac0aa2e0d9c126246e8ad4edd19d"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-reference",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240603-0405-523b7bd2.1",
|
|
26
|
+
"commit": "9f42362f4854ac0aa2e0d9c126246e8ad4edd19d"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-reference",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240603-0405-523b7bd2.1",
|
|
32
|
+
"commit": "9f42362f4854ac0aa2e0d9c126246e8ad4edd19d"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Fri, 31 May 2024 18:42:53 GMT",
|
|
39
|
+
"tag": "@fluentui-copilot/react-reference_v0.11.3",
|
|
40
|
+
"version": "0.11.3",
|
|
41
|
+
"comments": {
|
|
42
|
+
"patch": [
|
|
43
|
+
{
|
|
44
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
45
|
+
"package": "@fluentui-copilot/react-reference",
|
|
46
|
+
"commit": "49d6b52e7778cac38b533448eda8d7441e1b43b1",
|
|
47
|
+
"comment": "chore: Removing tint API from Reference v2 components until we come up with a more robust approach."
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
51
|
+
"package": "@fluentui-copilot/react-reference",
|
|
52
|
+
"commit": "dbd9212bded202a2b958699fdaacf75e864b3dbb",
|
|
53
|
+
"comment": "feat: Adding anchor semantics to Reference v2."
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "tristan.watanabe@gmail.com",
|
|
57
|
+
"package": "@fluentui-copilot/react-reference",
|
|
58
|
+
"commit": "7583464747aec7a8a79a8c79eaeff85d749025e4",
|
|
59
|
+
"comment": "chore: bump @fluentui dependencies to latest 9.52.0."
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
63
|
+
"package": "@fluentui-copilot/react-reference",
|
|
64
|
+
"commit": "d77b903b7d6979cf9fdd91bd6b858c1f228ca3af",
|
|
65
|
+
"comment": "fix(react-reference): Fixing focus behavior when expanding/contracting references."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "owcampbe@microsoft.com",
|
|
69
|
+
"package": "@fluentui-copilot/react-reference",
|
|
70
|
+
"commit": "037f6425eb2ec38ccf1c4f967b3b9db20759fc02",
|
|
71
|
+
"comment": "fix: Restore ReferenceToggle size differences based on CopilotMode."
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "seanmonahan@microsoft.com",
|
|
75
|
+
"package": "@fluentui-copilot/react-reference",
|
|
76
|
+
"commit": "c2e14c44cafafbdc10f52b9855384748a7524a63",
|
|
77
|
+
"comment": "chore: add eslint-plugin-react-compiler"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "tristan.watanabe@gmail.com",
|
|
81
|
+
"package": "@fluentui-copilot/react-reference",
|
|
82
|
+
"commit": "6df44dbcd267772e1b62426d14abe54a0b35bb97",
|
|
83
|
+
"comment": "chore: useStyle hook files now properly contain .styles. within filename."
|
|
33
84
|
}
|
|
34
85
|
]
|
|
35
86
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 03 Jun 2024 04:11:32 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-20240603-0405-523b7bd2.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240603-0405-523b7bd2.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.
|
|
9
|
+
Mon, 03 Jun 2024 04:11:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.3..@fluentui-copilot/react-reference_v0.0.0-nightly-20240603-0405-523b7bd2.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240603-0405-523b7bd2.1 ([commit](https://github.com/microsoft/fluentai/commit/9f42362f4854ac0aa2e0d9c126246e8ad4edd19d) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240603-0405-523b7bd2.1 ([commit](https://github.com/microsoft/fluentai/commit/9f42362f4854ac0aa2e0d9c126246e8ad4edd19d) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240603-0405-523b7bd2.1 ([commit](https://github.com/microsoft/fluentai/commit/9f42362f4854ac0aa2e0d9c126246e8ad4edd19d) by beachball)
|
|
18
|
+
|
|
19
|
+
## [0.11.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.11.3)
|
|
20
|
+
|
|
21
|
+
Fri, 31 May 2024 18:42:53 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.2..@fluentui-copilot/react-reference_v0.11.3)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- chore: Removing tint API from Reference v2 components until we come up with a more robust approach. ([PR #1688](https://github.com/microsoft/fluentai/pull/1688) by Humberto.Morimoto@microsoft.com)
|
|
27
|
+
- feat: Adding anchor semantics to Reference v2. ([PR #1645](https://github.com/microsoft/fluentai/pull/1645) by Humberto.Morimoto@microsoft.com)
|
|
28
|
+
- chore: bump @fluentui dependencies to latest 9.52.0. ([PR #1657](https://github.com/microsoft/fluentai/pull/1657) by tristan.watanabe@gmail.com)
|
|
29
|
+
- fix(react-reference): Fixing focus behavior when expanding/contracting references. ([PR #1682](https://github.com/microsoft/fluentai/pull/1682) by Humberto.Morimoto@microsoft.com)
|
|
30
|
+
- fix: Restore ReferenceToggle size differences based on CopilotMode. ([PR #1684](https://github.com/microsoft/fluentai/pull/1684) by owcampbe@microsoft.com)
|
|
31
|
+
- chore: add eslint-plugin-react-compiler ([PR #1642](https://github.com/microsoft/fluentai/pull/1642) by seanmonahan@microsoft.com)
|
|
32
|
+
- chore: useStyle hook files now properly contain .styles. within filename. ([PR #1671](https://github.com/microsoft/fluentai/pull/1671) by tristan.watanabe@gmail.com)
|
|
18
33
|
|
|
19
34
|
## [0.11.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.11.2)
|
|
20
35
|
|
package/dist/index.d.ts
CHANGED
|
@@ -153,7 +153,7 @@ export declare const referenceGroupToggleClassNames: SlotClassNames<ReferenceGro
|
|
|
153
153
|
/**
|
|
154
154
|
* ReferenceGroupToggle Props
|
|
155
155
|
*/
|
|
156
|
-
export declare type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> & {
|
|
156
|
+
export declare type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> & CopilotMode & {
|
|
157
157
|
isOpen?: boolean;
|
|
158
158
|
};
|
|
159
159
|
|
|
@@ -165,7 +165,7 @@ export declare type ReferenceGroupToggleSlots = {
|
|
|
165
165
|
/**
|
|
166
166
|
* State used in rendering ReferenceGroupToggle
|
|
167
167
|
*/
|
|
168
|
-
export declare type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> & Required<Pick<ReferenceGroupToggleProps, 'isOpen'>>;
|
|
168
|
+
export declare type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> & Required<Pick<ReferenceGroupToggleProps, 'isOpen' | 'mode'>>;
|
|
169
169
|
|
|
170
170
|
export declare const ReferenceList: ForwardRefComponent<ReferenceListProps>;
|
|
171
171
|
|
|
@@ -178,7 +178,7 @@ export declare const ReferenceListContextProvider: Provider<ReferenceListContext
|
|
|
178
178
|
/**
|
|
179
179
|
* Context shared between ReferenceList and its children components
|
|
180
180
|
*/
|
|
181
|
-
export declare type ReferenceListContextValue = Pick<ReferenceListV2State, '
|
|
181
|
+
export declare type ReferenceListContextValue = Pick<ReferenceListV2State, 'areReferencesExpanded' | 'maxVisibleReferences' | 'overflowButtonTriggeredViaKeyboard' | 'referenceListRef' | 'shouldUseOverflow' | 'totalReferencesCount'>;
|
|
182
182
|
|
|
183
183
|
/**
|
|
184
184
|
* ReferenceList Props
|
|
@@ -206,11 +206,6 @@ export declare type ReferenceListV2ContextValues = {
|
|
|
206
206
|
};
|
|
207
207
|
|
|
208
208
|
export declare type ReferenceListV2Props = ComponentProps<ReferenceListV2Slots> & {
|
|
209
|
-
/**
|
|
210
|
-
* The appearance of the reference.
|
|
211
|
-
* @default 'lighter'
|
|
212
|
-
*/
|
|
213
|
-
appearance?: 'lighter' | 'darker';
|
|
214
209
|
/**
|
|
215
210
|
* The maximum number of references to display before the overflow button is shown even if there is
|
|
216
211
|
* enough space available to show more.
|
|
@@ -226,11 +221,12 @@ export declare type ReferenceListV2Slots = {
|
|
|
226
221
|
showLessButton?: Slot<'span'>;
|
|
227
222
|
};
|
|
228
223
|
|
|
229
|
-
export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> &
|
|
224
|
+
export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> & Pick<ReferenceListV2Props, 'maxVisibleReferences'> & {
|
|
230
225
|
areReferencesExpanded: boolean;
|
|
231
226
|
overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;
|
|
232
|
-
|
|
227
|
+
referenceListRef: React.RefObject<HTMLDivElement>;
|
|
233
228
|
shouldUseOverflow: boolean;
|
|
229
|
+
totalReferencesCount: number;
|
|
234
230
|
};
|
|
235
231
|
|
|
236
232
|
export declare const ReferenceOverflowButton: ForwardRefComponent<ReferenceOverflowButtonProps>;
|
|
@@ -241,11 +237,6 @@ export declare const referenceOverflowButtonClassNames: SlotClassNames<Reference
|
|
|
241
237
|
* ReferenceOverflowButton Props
|
|
242
238
|
*/
|
|
243
239
|
export declare type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {
|
|
244
|
-
/**
|
|
245
|
-
* The appearance of the reference.
|
|
246
|
-
* @default 'lighter'
|
|
247
|
-
*/
|
|
248
|
-
appearance?: 'lighter' | 'darker';
|
|
249
240
|
text?: string | ((overflowCount: number) => React.ReactNode);
|
|
250
241
|
};
|
|
251
242
|
|
|
@@ -256,7 +247,7 @@ export declare type ReferenceOverflowButtonSlots = {
|
|
|
256
247
|
/**
|
|
257
248
|
* State used in rendering ReferenceOverflowButton
|
|
258
249
|
*/
|
|
259
|
-
export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &
|
|
250
|
+
export declare type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {
|
|
260
251
|
shouldRenderOverflowButton: boolean;
|
|
261
252
|
};
|
|
262
253
|
|
|
@@ -359,13 +350,7 @@ export declare const referenceV2ExtraClassNames: {
|
|
|
359
350
|
graphicChild: string;
|
|
360
351
|
};
|
|
361
352
|
|
|
362
|
-
export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & {
|
|
363
|
-
/**
|
|
364
|
-
* The appearance of the reference.
|
|
365
|
-
* @default 'lighter'
|
|
366
|
-
*/
|
|
367
|
-
appearance?: 'lighter' | 'darker';
|
|
368
|
-
};
|
|
353
|
+
export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & {};
|
|
369
354
|
|
|
370
355
|
export declare type ReferenceV2Slots = {
|
|
371
356
|
root: NonNullable<Slot<'button', 'a'>>;
|
|
@@ -375,7 +360,7 @@ export declare type ReferenceV2Slots = {
|
|
|
375
360
|
graphic?: Slot<'span'>;
|
|
376
361
|
};
|
|
377
362
|
|
|
378
|
-
export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, '
|
|
363
|
+
export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'id'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
|
|
379
364
|
|
|
380
365
|
/**
|
|
381
366
|
* Render the final JSX of Citation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceGroupToggle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupToggleSlots = {\n root: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n};\n\n/**\n * ReferenceGroupToggle Props\n */\nexport type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> & {\n
|
|
1
|
+
{"version":3,"sources":["ReferenceGroupToggle.types.ts"],"sourcesContent":["import { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceGroupToggleSlots = {\n root: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n};\n\n/**\n * ReferenceGroupToggle Props\n */\nexport type ReferenceGroupToggleProps = ComponentProps<ReferenceGroupToggleSlots> &\n CopilotMode & {\n isOpen?: boolean;\n };\n\n/**\n * State used in rendering ReferenceGroupToggle\n */\nexport type ReferenceGroupToggleState = ComponentState<ReferenceGroupToggleSlots> &\n Required<Pick<ReferenceGroupToggleProps, 'isOpen' | 'mode'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC,GACD,WAC+D"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
|
|
3
3
|
import { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';
|
|
4
|
+
import { useCopilotMode } from '@fluentui-copilot/react-provider';
|
|
4
5
|
/**
|
|
5
6
|
* Create the state required to render ReferenceGroupToggle.
|
|
6
7
|
*
|
|
@@ -14,7 +15,9 @@ export const useReferenceGroupToggle_unstable = (props, ref) => {
|
|
|
14
15
|
const {
|
|
15
16
|
isOpen = false
|
|
16
17
|
} = props;
|
|
18
|
+
const mode = useCopilotMode(props.mode);
|
|
17
19
|
return {
|
|
20
|
+
mode,
|
|
18
21
|
isOpen,
|
|
19
22
|
components: {
|
|
20
23
|
root: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n props: ReferenceGroupToggleProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n const { isOpen = false } = props;\n\n return {\n isOpen,\n components: {\n root: 'button',\n icon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-expanded': isOpen,\n type: 'button',\n ...props,\n }),\n { elementType: 'button' },\n ),\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","ChevronDown16Regular","ChevronUp16Regular","useReferenceGroupToggle_unstable","props","ref","isOpen","components","root","icon","always","type","elementType","optional","defaultProps","children","renderByDefault"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReferenceGroupToggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { ChevronDown16Regular, ChevronUp16Regular } from '@fluentui/react-icons';\nimport type { ReferenceGroupToggleProps, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceGroupToggle.\n *\n * The returned state can be modified with hooks such as useReferenceGroupToggleStyles_unstable,\n * before being passed to renderReferenceGroupToggle_unstable.\n *\n * @param props - props from this instance of ReferenceGroupToggle\n * @param ref - reference to root HTMLElement of ReferenceGroupToggle\n */\nexport const useReferenceGroupToggle_unstable = (\n props: ReferenceGroupToggleProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceGroupToggleState => {\n const { isOpen = false } = props;\n\n const mode = useCopilotMode(props.mode);\n return {\n mode,\n isOpen,\n components: {\n root: 'button',\n icon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n 'aria-expanded': isOpen,\n type: 'button',\n ...props,\n }),\n { elementType: 'button' },\n ),\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: isOpen ? <ChevronUp16Regular /> : <ChevronDown16Regular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","ChevronDown16Regular","ChevronUp16Regular","useCopilotMode","useReferenceGroupToggle_unstable","props","ref","isOpen","mode","components","root","icon","always","type","elementType","optional","defaultProps","children","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAEjF,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,SAAS,KAAK,EAAE,GAAGF;IAE3B,MAAMG,OAAOL,eAAeE,MAAMG,IAAI;IACtC,OAAO;QACLA;QACAD;QACAE,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMV,KAAKY,MAAM,CACfb,yBAAyB,UAAU;YACjCO;YACA,iBAAiBC;YACjBM,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAS;QAE1BH,MAAMX,KAAKe,QAAQ,CAACV,MAAMM,IAAI,EAAE;YAC9BK,cAAc;gBACZC,UAAUV,uBAAS,oBAACL,0CAAwB,oBAACD;YAC/C;YACAiB,iBAAiB;YACjBJ,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,19 +1,39 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
export const referenceGroupToggleClassNames = {
|
|
3
3
|
root: 'fai-ReferenceGroupToggle',
|
|
4
4
|
icon: 'fai-ReferenceGroupToggle__icon'
|
|
5
5
|
};
|
|
6
6
|
const useButtonBaseClassName = __resetStyles("rctdkan", "rfdmif3", [".rctdkan{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rfdmif3{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
|
|
7
7
|
const useIconBaseClassName = __resetStyles("r18biwo", null, [".r18biwo{display:inline-flex;align-items:center;}"]);
|
|
8
|
+
const useStyles = __styles({
|
|
9
|
+
canvas: {
|
|
10
|
+
Bahqtrf: "fk6fouc",
|
|
11
|
+
Be2twd7: "fy9rknc",
|
|
12
|
+
Bhrd7zp: "figsok6",
|
|
13
|
+
Bg96gwp: "fwrc4pm"
|
|
14
|
+
},
|
|
15
|
+
sidecar: {
|
|
16
|
+
Bahqtrf: "fk6fouc",
|
|
17
|
+
Be2twd7: "f13mqy1h",
|
|
18
|
+
Bhrd7zp: "figsok6",
|
|
19
|
+
Bg96gwp: "fcpl73t"
|
|
20
|
+
}
|
|
21
|
+
}, {
|
|
22
|
+
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}"]
|
|
23
|
+
});
|
|
8
24
|
/**
|
|
9
25
|
* Apply styling to the ReferenceGroupToggle slots based on the state
|
|
10
26
|
*/
|
|
11
27
|
export const useReferenceGroupToggleStyles_unstable = state => {
|
|
12
28
|
'use no memo';
|
|
13
29
|
|
|
30
|
+
const {
|
|
31
|
+
mode
|
|
32
|
+
} = state;
|
|
33
|
+
const styles = useStyles();
|
|
14
34
|
const iconBaseClassName = useIconBaseClassName();
|
|
15
35
|
const buttonBaseClassName = useButtonBaseClassName();
|
|
16
|
-
state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);
|
|
36
|
+
state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
|
|
17
37
|
if (state.icon) {
|
|
18
38
|
state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
|
|
19
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n root: 'fai-ReferenceGroupToggle',\n icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n columnGap: tokens.spacingHorizontalSNudge,\n alignItems: 'center',\n ...typographyStyles.caption1,\n border: 0,\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground3,\n cursor: 'pointer',\n width: 'max-content',\n ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: { ...typographyStyles.caption1 },\n sidecar: {\n ...typographyStyles.caption2,\n },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n 'use no memo';\n\n const { mode } = state;\n const styles = useStyles();\n\n const iconBaseClassName = useIconBaseClassName();\n const buttonBaseClassName = useButtonBaseClassName();\n state.root.className = mergeClasses(\n referenceGroupToggleClassNames.root,\n buttonBaseClassName,\n styles[mode],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBT,gBAAgB;IAC7CU,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,iBAAiB,EAAE,EAAE;AACpD;AAEA,MAAMC,uBAAuBxB,gBAAgB;IAC3CU,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYxB,WAAW;IAC3ByB,QAAQ;QAAE,GAAGrB,iBAAiBS,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGtB,iBAAiBuB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGjC,aACrBI,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGjC,aAAaI,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,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 root: NonNullable<Slot<'button', 'a'>>;\n citation?: Slot<'span'>;\n divider?: Slot<'span'>;\n content?: Slot<'span'>;\n graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {
|
|
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 root: NonNullable<Slot<'button', 'a'>>;\n citation?: Slot<'span'>;\n divider?: Slot<'span'>;\n content?: Slot<'span'>;\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":"AAaA,WAEgD"}
|
|
@@ -16,14 +16,7 @@ export const useReference_unstable = (props, ref) => {
|
|
|
16
16
|
children,
|
|
17
17
|
id
|
|
18
18
|
} = props;
|
|
19
|
-
const
|
|
20
|
-
ctxAppearance,
|
|
21
|
-
shouldUseOverflow
|
|
22
|
-
} = useReferenceListContext_unstable(ctx => ({
|
|
23
|
-
ctxAppearance: ctx.appearance,
|
|
24
|
-
shouldUseOverflow: ctx.shouldUseOverflow
|
|
25
|
-
}));
|
|
26
|
-
const appearance = props.appearance || ctxAppearance;
|
|
19
|
+
const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);
|
|
27
20
|
const referenceId = useId('reference-', id);
|
|
28
21
|
const citation = slot.optional(props.citation, {
|
|
29
22
|
elementType: 'span'
|
|
@@ -40,7 +33,6 @@ export const useReference_unstable = (props, ref) => {
|
|
|
40
33
|
renderByDefault: citation !== undefined && content !== undefined
|
|
41
34
|
});
|
|
42
35
|
const state = {
|
|
43
|
-
appearance,
|
|
44
36
|
id: referenceId,
|
|
45
37
|
shouldUseOverflow,
|
|
46
38
|
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 { children, id } = props;\n\n const
|
|
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 { children, id } = props;\n\n const shouldUseOverflow = useReferenceListContext_unstable(ctx => ctx.shouldUseOverflow);\n\n const referenceId = useId('reference-', id);\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: 'button',\n citation: 'span',\n divider: 'span',\n graphic: 'span',\n content: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n ...props,\n id: referenceId,\n }),\n { elementType: 'button' },\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","children","id","shouldUseOverflow","ctx","referenceId","citation","optional","elementType","graphic","content","renderByDefault","undefined","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;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGH;IAEzB,MAAMI,oBAAoBP,iCAAiCQ,CAAAA,MAAOA,IAAID,iBAAiB;IAEvF,MAAME,cAAcV,MAAM,cAAcO;IAExC,MAAMI,WAAWZ,KAAKa,QAAQ,CAACR,MAAMO,QAAQ,EAAE;QAAEE,aAAa;IAAO;IACrE,MAAMC,UAAUf,KAAKa,QAAQ,CAACR,MAAMU,OAAO,EAAE;QAAED,aAAa;IAAO;IACnE,MAAME,UAAUhB,KAAKa,QAAQ,CAACR,MAAMW,OAAO,EAAE;QAC3CF,aAAa;QACbG,iBAAiBF,YAAYG,aAAa,CAAC,CAACX;IAC9C;IACA,MAAMY,UAAUnB,KAAKa,QAAQ,CAACR,MAAMc,OAAO,EAAE;QAC3CL,aAAa;QACbG,iBAAiBL,aAAaM,aAAaF,YAAYE;IACzD;IAEA,MAAME,QAAwB;QAC5BZ,IAAIG;QACJF;QAEAY,YAAY;YACVC,MAAM;YACNV,UAAU;YACVO,SAAS;YACTJ,SAAS;YACTC,SAAS;QACX;QAEAM,MAAMtB,KAAKuB,MAAM,CACfzB,yBAAyB,UAAU;YACjCQ;YACA,GAAGD,KAAK;YACRG,IAAIG;QACN,IACA;YAAEG,aAAa;QAAS;QAE1BF;QACAO;QACAH;QACAD;IACF;IAEA,IAAIK,MAAML,OAAO,IAAIlB,MAAM2B,cAAc,CAAcJ,MAAML,OAAO,CAACR,QAAQ,GAAG;QAC9Ea,MAAML,OAAO,CAACR,QAAQ,GAAGV,MAAM4B,YAAY,CAACL,MAAML,OAAO,CAACR,QAAQ,EAAE;YAClEmB,WAAW3B,aAAaqB,MAAML,OAAO,CAACR,QAAQ,CAACF,KAAK,CAACqB,SAAS,EAAEvB,yBAAyBwB,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses,
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
export const referenceClassNames = {
|
|
3
3
|
root: 'fai-Reference',
|
|
4
4
|
citation: 'fai-Reference__citation',
|
|
@@ -12,31 +12,14 @@ export const referenceExtraClassNames = {
|
|
|
12
12
|
const GRAPHIC_SIZE = '16px';
|
|
13
13
|
const useRootBaseClassName = __resetStyles("r1aeqif9", null, [".r1aeqif9{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:flex;flex-shrink:0;justify-content:center;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);}", ".r1aeqif9:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1aeqif9:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".r1aeqif9:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1aeqif9:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
|
|
14
14
|
export const useRootStyles = __styles({
|
|
15
|
-
darker: {
|
|
16
|
-
De3pzq: "f3vzo32",
|
|
17
|
-
g2u3we: "fj3muxo",
|
|
18
|
-
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
19
|
-
B9xav0g: "f1aperda",
|
|
20
|
-
zhjwy3: ["f1lxtadh", "f1akhkt"],
|
|
21
|
-
Jwef8y: "f14vf7cg",
|
|
22
|
-
iro3zm: "fho4vwd"
|
|
23
|
-
},
|
|
24
15
|
overflow: {
|
|
25
16
|
a9b677: "fly5x3f"
|
|
26
17
|
}
|
|
27
18
|
}, {
|
|
28
|
-
d: [".
|
|
29
|
-
h: [".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}", ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"]
|
|
19
|
+
d: [".fly5x3f{width:100%;}"]
|
|
30
20
|
});
|
|
31
21
|
const useCitationBaseClassName = __resetStyles("rzdip90", null, [".rzdip90{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);}"]);
|
|
32
22
|
const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
|
|
33
|
-
const useDividerStyles = __styles({
|
|
34
|
-
darker: {
|
|
35
|
-
De3pzq: "f1d3jkam"
|
|
36
|
-
}
|
|
37
|
-
}, {
|
|
38
|
-
d: [".f1d3jkam{background-color:var(--colorNeutralStroke1);}"]
|
|
39
|
-
});
|
|
40
23
|
const useGraphicBaseClassName = __resetStyles("rjrtsj7", null, [".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}", ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"]);
|
|
41
24
|
const useContentBaseClassName = __resetStyles("r1yvxokd", null, [".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
42
25
|
/**
|
|
@@ -45,22 +28,17 @@ const useContentBaseClassName = __resetStyles("r1yvxokd", null, [".r1yvxokd{colu
|
|
|
45
28
|
export const useReferenceStyles_unstable = state => {
|
|
46
29
|
'use no memo';
|
|
47
30
|
|
|
48
|
-
const {
|
|
49
|
-
appearance
|
|
50
|
-
} = state;
|
|
51
31
|
const rootBaseClassName = useRootBaseClassName();
|
|
52
32
|
const citationBaseClassName = useCitationBaseClassName();
|
|
53
33
|
const dividerBaseClassName = useDividerBaseClassName();
|
|
54
34
|
const contentBaseClassName = useContentBaseClassName();
|
|
55
35
|
const graphicBaseClassName = useGraphicBaseClassName();
|
|
56
|
-
|
|
57
|
-
const dividerStyles = useDividerStyles();
|
|
58
|
-
state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
|
|
36
|
+
state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);
|
|
59
37
|
if (state.citation) {
|
|
60
38
|
state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
61
39
|
}
|
|
62
40
|
if (state.divider) {
|
|
63
|
-
state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName,
|
|
41
|
+
state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
|
|
64
42
|
}
|
|
65
43
|
if (state.content) {
|
|
66
44
|
state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n divider: 'fai-Reference__divider',\n graphic: 'fai-Reference__graphic',\n content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground2,\n columnGap: tokens.spacingHorizontalXXS,\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${referenceClassNames.divider}`]: {\n backgroundColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n});\n\nexport const useRootStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralStroke2,\n height: '16px',\n margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n fontSize: GRAPHIC_SIZE,\n height: GRAPHIC_SIZE,\n lineHeight: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n\n [`> .${referenceExtraClassNames.graphicChild}`]: {\n height: GRAPHIC_SIZE,\n width: GRAPHIC_SIZE,\n },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'inline-flex',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const dividerBaseClassName = useDividerBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const graphicBaseClassName = useGraphicBaseClassName();\n\n state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.citation) {\n state.citation.className = mergeClasses(\n referenceClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n if (state.divider) {\n state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n }\n\n if (state.graphic) {\n state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","padding","spacingVerticalXXS","spacingHorizontalS","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n root: NonNullable<Slot<'div'>>;\n showMoreButton?: Slot<'span'>;\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The
|
|
1
|
+
{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n root: NonNullable<Slot<'div'>>;\n showMoreButton?: Slot<'span'>;\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4BA,WAEE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup } from '@fluentui/react-components';
|
|
2
|
+
import { getIntrinsicElementProps, mergeCallbacks, mergeClasses, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
|
|
3
3
|
import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render ReferenceList.
|
|
@@ -12,7 +12,6 @@ import { useRootStyles as useReferenceStyles } from '../Reference/useReferenceSt
|
|
|
12
12
|
*/
|
|
13
13
|
export const useReferenceList_unstable = (props, ref) => {
|
|
14
14
|
const {
|
|
15
|
-
appearance = 'lighter',
|
|
16
15
|
children,
|
|
17
16
|
maxVisibleReferences,
|
|
18
17
|
showLessButton,
|
|
@@ -20,11 +19,13 @@ export const useReferenceList_unstable = (props, ref) => {
|
|
|
20
19
|
...rest
|
|
21
20
|
} = props;
|
|
22
21
|
const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
|
|
22
|
+
const referenceListRef = React.useRef(null);
|
|
23
23
|
const referenceInOverflowClassName = useReferenceStyles().overflow;
|
|
24
|
+
const childrenArray = React.Children.toArray(children);
|
|
25
|
+
const totalReferencesCount = childrenArray.length;
|
|
24
26
|
const resolvedChildren = React.useMemo(() => {
|
|
25
27
|
if (maxVisibleReferences !== undefined && !areReferencesExpanded) {
|
|
26
28
|
const results = [];
|
|
27
|
-
const childrenArray = React.Children.toArray(children);
|
|
28
29
|
for (let index = 0; index < childrenArray.length; index++) {
|
|
29
30
|
const child = childrenArray[index];
|
|
30
31
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -40,9 +41,7 @@ export const useReferenceList_unstable = (props, ref) => {
|
|
|
40
41
|
return results;
|
|
41
42
|
}
|
|
42
43
|
return children;
|
|
43
|
-
}, [areReferencesExpanded, children, maxVisibleReferences, referenceInOverflowClassName]);
|
|
44
|
-
// We keep track of the previous overflow count to determine element to move focus to when expanding the references via keyboard.
|
|
45
|
-
const previousOverflowCount = React.useRef(0);
|
|
44
|
+
}, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);
|
|
46
45
|
// We keep track of whether we are interacting with the overflow button via keyboard or not.
|
|
47
46
|
const overflowButtonTriggeredViaKeyboard = React.useRef(false);
|
|
48
47
|
const focusAttributes = useArrowNavigationGroup({
|
|
@@ -58,18 +57,19 @@ export const useReferenceList_unstable = (props, ref) => {
|
|
|
58
57
|
}, []);
|
|
59
58
|
const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
|
|
60
59
|
const state = {
|
|
61
|
-
appearance,
|
|
62
60
|
areReferencesExpanded,
|
|
63
61
|
overflowButtonTriggeredViaKeyboard,
|
|
64
|
-
|
|
62
|
+
maxVisibleReferences,
|
|
63
|
+
referenceListRef,
|
|
65
64
|
shouldUseOverflow,
|
|
65
|
+
totalReferencesCount,
|
|
66
66
|
components: {
|
|
67
67
|
root: 'div',
|
|
68
68
|
showMoreButton: 'span',
|
|
69
69
|
showLessButton: 'span'
|
|
70
70
|
},
|
|
71
71
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
72
|
-
ref,
|
|
72
|
+
ref: useMergedRefs(ref, referenceListRef),
|
|
73
73
|
...focusAttributes,
|
|
74
74
|
...rest,
|
|
75
75
|
children: resolvedChildren
|