@fluentui-copilot/react-reference 0.0.0-nightly-20240527-0406-162a35f3.1 → 0.0.0-nightly-20240531-0407-49d6b52e.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 +9 -9
- package/CHANGELOG.md +7 -7
- package/dist/index.d.ts +9 -24
- package/lib/components/Citation/useCitationStyles.styles.js +2 -0
- package/lib/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib/components/Reference/useReferenceStyles.styles.js +2 -0
- package/lib/components/Reference/useReferenceStyles.styles.js.map +1 -1
- 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 +24 -2
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map +1 -1
- package/lib/components/ReferenceList/useReferenceListStyles.styles.js +2 -0
- package/lib/components/ReferenceList/useReferenceListStyles.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 +6 -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/ReferenceList/useReferenceListStyles.styles.js +2 -0
- package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.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 +23 -19
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +4 -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/Citation/useCitationStyles.styles.js +1 -0
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.js +1 -0
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.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 +27 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.js +1 -0
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.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 +3 -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/ReferenceList/useReferenceListStyles.styles.js +1 -0
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.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 +26 -17
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +2 -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": "Fri, 31 May 2024 04:15:48 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240531-0407-49d6b52e.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240531-0407-49d6b52e.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,20 @@
|
|
|
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-20240531-0407-49d6b52e.1",
|
|
20
|
+
"commit": "9c3be0e96b259a17f931d3bbc23affaa0d137cea"
|
|
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-20240531-0407-49d6b52e.1",
|
|
26
|
+
"commit": "9c3be0e96b259a17f931d3bbc23affaa0d137cea"
|
|
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-20240531-0407-49d6b52e.1",
|
|
32
|
+
"commit": "9c3be0e96b259a17f931d3bbc23affaa0d137cea"
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
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, 31 May 2024 04:15:48 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-20240531-0407-49d6b52e.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240531-0407-49d6b52e.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.2..@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
9
|
+
Fri, 31 May 2024 04:15:48 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.2..@fluentui-copilot/react-reference_v0.0.0-nightly-20240531-0407-49d6b52e.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-20240531-0407-49d6b52e.1 ([commit](https://github.com/microsoft/fluentai/commit/9c3be0e96b259a17f931d3bbc23affaa0d137cea) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240531-0407-49d6b52e.1 ([commit](https://github.com/microsoft/fluentai/commit/9c3be0e96b259a17f931d3bbc23affaa0d137cea) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240531-0407-49d6b52e.1 ([commit](https://github.com/microsoft/fluentai/commit/9c3be0e96b259a17f931d3bbc23affaa0d137cea) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.11.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.11.2)
|
|
20
20
|
|
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
|
|
@@ -31,6 +31,8 @@ const useCitationRootStyles = __styles({
|
|
|
31
31
|
* Apply styling to the Citation slots based on the state
|
|
32
32
|
*/
|
|
33
33
|
export const useCitationStyles_unstable = state => {
|
|
34
|
+
'use no memo';
|
|
35
|
+
|
|
34
36
|
const rootBaseClassName = useCitationBaseClassName();
|
|
35
37
|
const rootStyles = useCitationRootStyles();
|
|
36
38
|
state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import {\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 color: tokens.colorNeutralForeground2,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\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\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","color","colorNeutralForeground2","border","strokeWidthThin","colorNeutralStroke2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useCitationStyles.styles.ts"],"sourcesContent":["import {\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 color: tokens.colorNeutralForeground2,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\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\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 rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","color","colorNeutralForeground2","border","strokeWidthThin","colorNeutralStroke2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGP,iBAAiBQ,cAAc;IAElCC,OAAOV,OAAOW,uBAAuB;IACrCC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IAEvEC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEhB,iBAAiBQ,cAAc,CAACS,UAAU,CAAC,GAAG,EAAEjB,iBAAiBQ,cAAc,CAACU,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAAcpB,OAAOqB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYvB,OAAOwB,oBAAoB;IACvCC,aAAazB,OAAOwB,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRhB,OAAOV,OAAO2B,0BAA0B;QACxCC,aAAa5B,OAAO6B,sBAAsB;QAC1CC,iBAAiB9B,OAAO+B,0BAA0B;IACpD;IAEA,iBAAiB;QACfL,QAAQ;QACRhB,OAAOV,OAAOgC,4BAA4B;QAC1CJ,aAAa5B,OAAOiC,wBAAwB;QAC5CH,iBAAiB9B,OAAOkC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBtC,WAAW;IACvCuC,SAAS;QACP/B,SAAS;QACTkB,YAAY;QACZE,aAAa;IACf;IACAY,iBAAiB;QACf3B,OAAOV,OAAOgC,4BAA4B;QAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;QAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC7C,UAAU;YACR5B,OAAOV,OAAOgC,4BAA4B;YAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;YAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC/C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,oBAAoBrC;IAC1B,MAAMsC,aAAaP;IAEnBK,MAAMrC,IAAI,CAACwC,SAAS,GAAG7C,aACrBI,mBAAmBC,IAAI,EACvBqC,MAAMH,eAAe,IAAIK,WAAWL,eAAe,EACnDG,MAAMI,KAAK,IAAIF,WAAWN,OAAO,EACjCK,mBACAD,MAAMrC,IAAI,CAACwC,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n buttonClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} 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 media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n ...shorthands.padding('0px'),\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n ...shorthands.gridArea('citation'),\n },\n media: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n ...shorthands.gridArea('actions'),\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n ...shorthands.gridArea('sensitivityLabel'),\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n ...shorthands.gridArea('metadata'),\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n ...shorthands.gridArea('content'),\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n ...shorthands.gridArea('title'),\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n const { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n buttonClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} 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 media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n ...shorthands.padding('0px'),\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n ...shorthands.gridArea('citation'),\n },\n media: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n ...shorthands.gridArea('actions'),\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n ...shorthands.gridArea('sensitivityLabel'),\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n ...shorthands.gridArea('metadata'),\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n ...shorthands.gridArea('content'),\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n ...shorthands.gridArea('title'),\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n 'use no memo';\n\n const { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -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,17 +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 => {
|
|
28
|
+
'use no memo';
|
|
29
|
+
|
|
30
|
+
const {
|
|
31
|
+
mode
|
|
32
|
+
} = state;
|
|
33
|
+
const styles = useStyles();
|
|
12
34
|
const iconBaseClassName = useIconBaseClassName();
|
|
13
35
|
const buttonBaseClassName = useButtonBaseClassName();
|
|
14
|
-
state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);
|
|
36
|
+
state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, styles[mode], state.root.className);
|
|
15
37
|
if (state.icon) {
|
|
16
38
|
state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);
|
|
17
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"}
|
|
@@ -11,6 +11,8 @@ const useRootClassName = __resetStyles("rc0s888", null, [".rc0s888{padding:0;mar
|
|
|
11
11
|
* Apply styling to the ReferenceList slots based on the state
|
|
12
12
|
*/
|
|
13
13
|
export const useReferenceListStyles_unstable = state => {
|
|
14
|
+
'use no memo';
|
|
15
|
+
|
|
14
16
|
state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);
|
|
15
17
|
return state;
|
|
16
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n};\n\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n padding: 0,\n margin: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalS,\n\n [`> .${referenceListItemClassName}`]: {\n listStyleType: 'none',\n },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n};\n\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n padding: 0,\n margin: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalS,\n\n [`> .${referenceListItemClassName}`]: {\n listStyleType: 'none',\n },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}
|
|
@@ -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,53 +12,33 @@ 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
|
/**
|
|
43
26
|
* Apply styling to the Reference slots based on the state
|
|
44
27
|
*/
|
|
45
28
|
export const useReferenceStyles_unstable = state => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} = state;
|
|
29
|
+
'use no memo';
|
|
30
|
+
|
|
49
31
|
const rootBaseClassName = useRootBaseClassName();
|
|
50
32
|
const citationBaseClassName = useCitationBaseClassName();
|
|
51
33
|
const dividerBaseClassName = useDividerBaseClassName();
|
|
52
34
|
const contentBaseClassName = useContentBaseClassName();
|
|
53
35
|
const graphicBaseClassName = useGraphicBaseClassName();
|
|
54
|
-
|
|
55
|
-
const dividerStyles = useDividerStyles();
|
|
56
|
-
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);
|
|
57
37
|
if (state.citation) {
|
|
58
38
|
state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
|
|
59
39
|
}
|
|
60
40
|
if (state.divider) {
|
|
61
|
-
state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName,
|
|
41
|
+
state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
|
|
62
42
|
}
|
|
63
43
|
if (state.content) {
|
|
64
44
|
state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
|