@fluentui-copilot/react-suggestions 0.13.1 → 0.13.3
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 +36 -0
- package/CHANGELOG.md +20 -1
- package/lib/Suggestion.js +0 -1
- package/lib/SuggestionList.js +0 -1
- package/lib/components/Suggestion/Suggestion.js +8 -10
- package/lib/components/Suggestion/Suggestion.types.js +1 -2
- package/lib/components/Suggestion/index.js +0 -1
- package/lib/components/Suggestion/useSuggestion.js +9 -10
- package/lib/components/Suggestion/useSuggestionStyles.styles.raw.js +69 -0
- package/lib/components/Suggestion/useSuggestionStyles.styles.raw.js.map +1 -0
- package/lib/components/SuggestionList/SuggestionList.js +5 -6
- package/lib/components/SuggestionList/SuggestionList.types.js +1 -2
- package/lib/components/SuggestionList/index.js +0 -1
- package/lib/components/SuggestionList/renderSuggestionList.js +9 -8
- package/lib/components/SuggestionList/useSuggestionList.js +24 -29
- package/lib/components/SuggestionList/useSuggestionListStyles.styles.raw.js +43 -0
- package/lib/components/SuggestionList/useSuggestionListStyles.styles.raw.js.map +1 -0
- package/lib/index.js +0 -1
- package/lib-commonjs/Suggestion.js +0 -1
- package/lib-commonjs/SuggestionList.js +0 -1
- package/lib-commonjs/components/Suggestion/Suggestion.js +1 -1
- package/lib-commonjs/components/Suggestion/Suggestion.js.map +1 -1
- package/lib-commonjs/components/Suggestion/Suggestion.types.js +0 -1
- package/lib-commonjs/components/Suggestion/index.js +0 -1
- package/lib-commonjs/components/Suggestion/useSuggestion.js +1 -1
- package/lib-commonjs/components/Suggestion/useSuggestion.js.map +1 -1
- package/lib-commonjs/components/Suggestion/useSuggestionStyles.styles.raw.js +87 -0
- package/lib-commonjs/components/Suggestion/useSuggestionStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/SuggestionList/SuggestionList.js +1 -1
- package/lib-commonjs/components/SuggestionList/SuggestionList.js.map +1 -1
- package/lib-commonjs/components/SuggestionList/SuggestionList.types.js +0 -1
- package/lib-commonjs/components/SuggestionList/index.js +0 -1
- package/lib-commonjs/components/SuggestionList/renderSuggestionList.js +1 -1
- package/lib-commonjs/components/SuggestionList/renderSuggestionList.js.map +1 -1
- package/lib-commonjs/components/SuggestionList/useSuggestionList.js +1 -1
- package/lib-commonjs/components/SuggestionList/useSuggestionList.js.map +1 -1
- package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.raw.js +59 -0
- package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/index.js +0 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-suggestions",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Thu, 17 Jul 2025 17:47:35 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-suggestions_v0.13.3",
|
|
7
|
+
"version": "0.13.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "hochelmartin@gmail.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-suggestions",
|
|
13
|
+
"commit": "fef5160c07333e8d9996952a305b34e357604919",
|
|
14
|
+
"comment": "feat: enable griffel raw styles"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 01 Jul 2025 14:45:30 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-suggestions_v0.13.2",
|
|
22
|
+
"version": "0.13.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "jiangemma@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-suggestions",
|
|
28
|
+
"commit": "c9607d83ec7c4f592e563a391e0e7fa87af24929",
|
|
29
|
+
"comment": "Bump v9 to ^9.66.0"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "jiangemma@microsoft.com",
|
|
33
|
+
"package": "@fluentui-copilot/react-suggestions",
|
|
34
|
+
"commit": "93c39ced303a2ffdb20764a1d1a1595a12b4ae27",
|
|
35
|
+
"comment": "chore: Bump v9 to 9.66.0 dependency deduplication followup"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
4
40
|
{
|
|
5
41
|
"date": "Thu, 12 Jun 2025 17:50:58 GMT",
|
|
6
42
|
"tag": "@fluentui-copilot/react-suggestions_v0.13.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-suggestions
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 17:47:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.13.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.13.3)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 17:47:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.13.2..@fluentui-copilot/react-suggestions_v0.13.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #3227](https://github.com/microsoft/fluentai/pull/3227) by hochelmartin@gmail.com)
|
|
15
|
+
|
|
16
|
+
## [0.13.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.13.2)
|
|
17
|
+
|
|
18
|
+
Tue, 01 Jul 2025 14:45:30 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.13.0..@fluentui-copilot/react-suggestions_v0.13.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Bump v9 to ^9.66.0 ([PR #3169](https://github.com/microsoft/fluentai/pull/3169) by jiangemma@microsoft.com)
|
|
24
|
+
- chore: Bump v9 to 9.66.0 dependency deduplication followup ([PR #3176](https://github.com/microsoft/fluentai/pull/3176) by jiangemma@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [0.13.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.13.0)
|
|
8
27
|
|
|
9
28
|
Thu, 12 Jun 2025 17:50:58 GMT
|
package/lib/Suggestion.js
CHANGED
package/lib/SuggestionList.js
CHANGED
|
@@ -4,15 +4,13 @@ import { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react
|
|
|
4
4
|
import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
|
|
5
5
|
import { useSuggestion_unstable } from './useSuggestion';
|
|
6
6
|
// Suggestion component - TODO: add more docs
|
|
7
|
-
export const Suggestion = /*#__PURE__*/React.forwardRef((props, ref)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return renderButton_unstable(state);
|
|
7
|
+
export const Suggestion = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
8
|
+
'use no memo';
|
|
9
|
+
const state = useSuggestion_unstable(props, ref);
|
|
10
|
+
state.appearance = props.appearance || 'outline';
|
|
11
|
+
useButtonStyles_unstable(state);
|
|
12
|
+
useSuggestionStyles_unstable(state);
|
|
13
|
+
useCustomStyleHook('useSuggestionStyles')(state);
|
|
14
|
+
return renderButton_unstable(state);
|
|
16
15
|
});
|
|
17
16
|
Suggestion.displayName = 'Suggestion';
|
|
18
|
-
//# sourceMappingURL=Suggestion.js.map
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=Suggestion.types.js.map
|
|
1
|
+
export { };
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { useButton_unstable } from '@fluentui/react-components';
|
|
2
2
|
import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
3
|
-
export const useSuggestion_unstable = (props, ref)
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
export const useSuggestion_unstable = (props, ref)=>{
|
|
4
|
+
const buttonState = useButton_unstable(props, ref);
|
|
5
|
+
const mode = useCopilotMode(props.mode);
|
|
6
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
7
|
+
return {
|
|
8
|
+
...buttonState,
|
|
9
|
+
mode,
|
|
10
|
+
designVersion
|
|
11
|
+
};
|
|
12
12
|
};
|
|
13
|
-
//# sourceMappingURL=useSuggestion.js.map
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const suggestionClassNames = {
|
|
4
|
+
root: 'fai-Suggestion',
|
|
5
|
+
icon: 'fai-Suggestion__icon'
|
|
6
|
+
};
|
|
7
|
+
const useSuggestionStyles = makeStyles({
|
|
8
|
+
root: {
|
|
9
|
+
...typographyStyles.caption1,
|
|
10
|
+
// Brand/M365/140
|
|
11
|
+
...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),
|
|
12
|
+
borderRadius: tokens.borderRadiusXLarge,
|
|
13
|
+
padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,
|
|
14
|
+
color: tokens.colorNeutralForeground2,
|
|
15
|
+
textAlign: 'start'
|
|
16
|
+
},
|
|
17
|
+
enabled: {
|
|
18
|
+
'@media (forced-colors: none)': {
|
|
19
|
+
':hover': {
|
|
20
|
+
// Brand/M365/120
|
|
21
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Hover),
|
|
22
|
+
color: tokens.colorBrandForeground2Hover,
|
|
23
|
+
backgroundColor: tokens.colorBrandBackground2Hover
|
|
24
|
+
},
|
|
25
|
+
// Figma states 'on hover and pressed state'
|
|
26
|
+
':active:hover': {
|
|
27
|
+
// Brand/M365/120
|
|
28
|
+
...shorthands.borderColor(tokens.colorBrandStroke2Pressed),
|
|
29
|
+
color: tokens.colorBrandForeground2Pressed,
|
|
30
|
+
backgroundColor: tokens.colorBrandBackground2Pressed
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
canvas: {
|
|
35
|
+
...typographyStyles.body1,
|
|
36
|
+
padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const useNextStyles = makeStyles({
|
|
40
|
+
root: {
|
|
41
|
+
paddingHorizontal: tokens.spacingHorizontalM,
|
|
42
|
+
paddingVertical: tokens.spacingVerticalSNudge,
|
|
43
|
+
fontSize: tokens.fontSizeBase200,
|
|
44
|
+
...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
|
|
45
|
+
backgroundColor: tokens.colorSubtleBackground
|
|
46
|
+
},
|
|
47
|
+
enabled: {
|
|
48
|
+
'@media (forced-colors: none)': {
|
|
49
|
+
':hover': {
|
|
50
|
+
...shorthands.borderColor(tokens.colorNeutralStroke2),
|
|
51
|
+
color: tokens.colorNeutralForeground2Hover,
|
|
52
|
+
backgroundColor: tokens.colorSubtleBackgroundHover
|
|
53
|
+
},
|
|
54
|
+
':active:hover': {
|
|
55
|
+
...shorthands.borderColor(tokens.colorNeutralStroke2),
|
|
56
|
+
color: tokens.colorNeutralForeground2Pressed,
|
|
57
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
export const useSuggestionStyles_unstable = (state)=>{
|
|
63
|
+
'use no memo';
|
|
64
|
+
const { designVersion, mode } = state;
|
|
65
|
+
const styles = useSuggestionStyles();
|
|
66
|
+
const nextStyles = useNextStyles();
|
|
67
|
+
state.root.className = mergeClasses(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, designVersion === 'next' && !state.disabled && nextStyles.enabled, state.root.className);
|
|
68
|
+
return state;
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames, ButtonSlots } from '@fluentui/react-components';\nimport type { SuggestionState } from './Suggestion.types';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fai-Suggestion',\n icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStyles = makeStyles({\n root: {\n ...typographyStyles.caption1,\n // Brand/M365/140\n ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n borderRadius: tokens.borderRadiusXLarge,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,\n color: tokens.colorNeutralForeground2,\n textAlign: 'start',\n // remove this MQ once https://github.com/microsoft/fluentui/issues/28552 is resolved\n // media queries have zero specificity\n },\n enabled: {\n '@media (forced-colors: none)': {\n ':hover': {\n // Brand/M365/120\n ...shorthands.borderColor(tokens.colorBrandStroke2Hover),\n color: tokens.colorBrandForeground2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n // Figma states 'on hover and pressed state'\n ':active:hover': {\n // Brand/M365/120\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n color: tokens.colorBrandForeground2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n },\n },\n canvas: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`,\n },\n});\n\nconst useNextStyles = makeStyles({\n root: {\n paddingHorizontal: tokens.spacingHorizontalM,\n paddingVertical: tokens.spacingVerticalSNudge,\n fontSize: tokens.fontSizeBase200,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n backgroundColor: tokens.colorSubtleBackground,\n },\n enabled: {\n '@media (forced-colors: none)': {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n 'use no memo';\n\n const { designVersion, mode } = state;\n\n const styles = useSuggestionStyles();\n const nextStyles = useNextStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n mode === 'canvas' && styles.canvas,\n designVersion === 'next' && nextStyles.root,\n !state.disabled && styles.enabled,\n designVersion === 'next' && !state.disabled && nextStyles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","spacingVerticalSNudge","spacingHorizontalM","useNextStyles","paddingHorizontal","paddingVertical","fontSize","fontSizeBase200","strokeWidthThin","colorNeutralStroke2","colorSubtleBackground","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","useSuggestionStyles_unstable","state","designVersion","mode","styles","nextStyles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AAClF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBR,WAAW;IACrCM,MAAM;QACJ,GAAGF,iBAAiBK,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASP,OAAOQ,iBAAiB,CAAC;QAC9DC,cAAcT,OAAOU,kBAAkB;QACvCC,SAAS,CAAC,EAAEX,OAAOY,iBAAiB,CAAC,CAAC,EAAEZ,OAAOa,gBAAgB,CAAC,CAAC;QACjEC,OAAOd,OAAOe,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOmB,sBAAsB,CAAC;gBACxDL,OAAOd,OAAOoB,0BAA0B;gBACxCC,iBAAiBrB,OAAOsB,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGvB,WAAWmB,WAAW,CAAClB,OAAOuB,wBAAwB,CAAC;gBAC1DT,OAAOd,OAAOwB,4BAA4B;gBAC1CH,iBAAiBrB,OAAOyB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAGzB,iBAAiB0B,KAAK;QACzBhB,SAAS,CAAC,EAAEX,OAAO4B,qBAAqB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgBjC,WAAW;IAC/BM,MAAM;QACJ4B,mBAAmB/B,OAAO6B,kBAAkB;QAC5CG,iBAAiBhC,OAAO4B,qBAAqB;QAC7CK,UAAUjC,OAAOkC,eAAe;QAChC,GAAGnC,WAAWQ,MAAM,CAACP,OAAOmC,eAAe,EAAE,SAASnC,OAAOoC,mBAAmB,CAAC;QACjFf,iBAAiBrB,OAAOqC,qBAAqB;IAC/C;IACApB,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,GAAGlB,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOsC,4BAA4B;gBAC1CjB,iBAAiBrB,OAAOuC,0BAA0B;YACpD;YACA,iBAAiB;gBACf,GAAGxC,WAAWmB,WAAW,CAAClB,OAAOoC,mBAAmB,CAAC;gBACrDtB,OAAOd,OAAOwC,8BAA8B;gBAC5CnB,iBAAiBrB,OAAOyC,4BAA4B;YACtD;QACF;IACF;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASzC;IACf,MAAM0C,aAAajB;IACnBa,MAAMxC,IAAI,CAAC6C,SAAS,GAAGlD,aACrBI,qBAAqBC,IAAI,EACzB2C,OAAO3C,IAAI,EACX0C,SAAS,YAAYC,OAAOpB,MAAM,EAClCkB,kBAAkB,UAAUG,WAAW5C,IAAI,EAC3C,CAACwC,MAAMM,QAAQ,IAAIH,OAAO7B,OAAO,EACjC2B,kBAAkB,UAAU,CAACD,MAAMM,QAAQ,IAAIF,WAAW9B,OAAO,EACjE0B,MAAMxC,IAAI,CAAC6C,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -4,11 +4,10 @@ import { renderSuggestionList_unstable } from './renderSuggestionList';
|
|
|
4
4
|
import { useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';
|
|
5
5
|
import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
|
|
6
6
|
// SuggestionList component - TODO: add more docs
|
|
7
|
-
export const SuggestionList = /*#__PURE__*/React.forwardRef((props, ref)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
export const SuggestionList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
8
|
+
const state = useSuggestionList_unstable(props, ref);
|
|
9
|
+
useSuggestionListStyles_unstable(state);
|
|
10
|
+
useCustomStyleHook('useSuggestionListStyles')(state);
|
|
11
|
+
return renderSuggestionList_unstable(state);
|
|
12
12
|
});
|
|
13
13
|
SuggestionList.displayName = 'SuggestionList';
|
|
14
|
-
//# sourceMappingURL=SuggestionList.js.map
|
|
@@ -2,4 +2,3 @@ export { SuggestionList } from './SuggestionList';
|
|
|
2
2
|
export { renderSuggestionList_unstable } from './renderSuggestionList';
|
|
3
3
|
export { useSuggestionList_unstable } from './useSuggestionList';
|
|
4
4
|
export { suggestionListClassNames, useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-components';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of SuggestionList
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
*/ export const renderSuggestionList_unstable = (state)=>{
|
|
6
|
+
assertSlots(state);
|
|
7
|
+
return /*#__PURE__*/ _jsxs(state.root, {
|
|
8
|
+
children: [
|
|
9
|
+
state.root.children,
|
|
10
|
+
state.action && /*#__PURE__*/ _jsx(state.action, {})
|
|
11
|
+
]
|
|
12
|
+
});
|
|
11
13
|
};
|
|
12
|
-
//# sourceMappingURL=renderSuggestionList.js.map
|
|
@@ -8,33 +8,28 @@ import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluent
|
|
|
8
8
|
*
|
|
9
9
|
* @param props - props from this instance of SuggestionList
|
|
10
10
|
* @param ref - reference to root HTMLElement of SuggestionList
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
action: slot.optional(action, {
|
|
36
|
-
elementType: 'span'
|
|
37
|
-
})
|
|
38
|
-
};
|
|
11
|
+
*/ export const useSuggestionList_unstable = (props, ref)=>{
|
|
12
|
+
const { action, horizontalAlignment = 'end' } = props;
|
|
13
|
+
return {
|
|
14
|
+
horizontalAlignment,
|
|
15
|
+
components: {
|
|
16
|
+
root: 'div',
|
|
17
|
+
action: 'span'
|
|
18
|
+
},
|
|
19
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
20
|
+
ref,
|
|
21
|
+
role: 'toolbar',
|
|
22
|
+
'aria-label': 'suggestions',
|
|
23
|
+
...props,
|
|
24
|
+
...useArrowNavigationGroup({
|
|
25
|
+
axis: 'both',
|
|
26
|
+
circular: true
|
|
27
|
+
})
|
|
28
|
+
}), {
|
|
29
|
+
elementType: 'div'
|
|
30
|
+
}),
|
|
31
|
+
action: slot.optional(action, {
|
|
32
|
+
elementType: 'span'
|
|
33
|
+
})
|
|
34
|
+
};
|
|
39
35
|
};
|
|
40
|
-
//# sourceMappingURL=useSuggestionList.js.map
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
+
export const suggestionListClassNames = {
|
|
4
|
+
root: 'fai-SuggestionList',
|
|
5
|
+
action: 'fai-SuggestionList__action'
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Styles for the root slot
|
|
9
|
+
*/ const useStyles = makeStyles({
|
|
10
|
+
root: {
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexWrap: 'wrap',
|
|
13
|
+
justifyContent: 'flex-end',
|
|
14
|
+
gap: tokens.spacingVerticalS,
|
|
15
|
+
margin: `
|
|
16
|
+
${tokens.spacingVerticalNone}
|
|
17
|
+
${tokens.spacingHorizontalNone}
|
|
18
|
+
${tokens.spacingVerticalS}
|
|
19
|
+
${tokens.spacingHorizontalNone}
|
|
20
|
+
`,
|
|
21
|
+
'> :nth-last-of-type(2)': {
|
|
22
|
+
maxWidth: `calc(100% - ${tokens.spacingHorizontalXXL} - ${tokens.spacingVerticalS})`
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
horizontalAlignmentStart: {
|
|
26
|
+
justifyContent: 'flex-start'
|
|
27
|
+
},
|
|
28
|
+
action: {
|
|
29
|
+
minWidth: tokens.spacingHorizontalXXL,
|
|
30
|
+
maxWidth: tokens.spacingHorizontalXXL
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
/**
|
|
34
|
+
* Apply styling to the SuggestionList slots based on the state
|
|
35
|
+
*/ export const useSuggestionListStyles_unstable = (state)=>{
|
|
36
|
+
'use no memo';
|
|
37
|
+
const styles = useStyles();
|
|
38
|
+
state.root.className = mergeClasses(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
|
|
39
|
+
if (state.action) {
|
|
40
|
+
state.action.className = mergeClasses(suggestionListClassNames.action, styles.action, state.action.className);
|
|
41
|
+
}
|
|
42
|
+
return state;
|
|
43
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { SuggestionListSlots, SuggestionListState } from './SuggestionList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const suggestionListClassNames: SlotClassNames<SuggestionListSlots> = {\n root: 'fai-SuggestionList',\n action: 'fai-SuggestionList__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n gap: tokens.spacingVerticalS,\n margin: `\n ${tokens.spacingVerticalNone}\n ${tokens.spacingHorizontalNone}\n ${tokens.spacingVerticalS}\n ${tokens.spacingHorizontalNone}\n `,\n '> :nth-last-of-type(2)': {\n maxWidth: `calc(100% - ${tokens.spacingHorizontalXXL} - ${tokens.spacingVerticalS})`,\n },\n },\n horizontalAlignmentStart: {\n justifyContent: 'flex-start',\n },\n\n action: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the SuggestionList slots based on the state\n */\nexport const useSuggestionListStyles_unstable = (state: SuggestionListState): SuggestionListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n suggestionListClassNames.root,\n styles.root,\n state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart,\n state.root.className,\n );\n\n if (state.action) {\n state.action.className = mergeClasses(suggestionListClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","suggestionListClassNames","root","action","useStyles","display","flexWrap","justifyContent","gap","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","horizontalAlignmentStart","minWidth","useSuggestionListStyles_unstable","state","styles","className","horizontalAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACtE,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKR,OAAOS,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEV,OAAOW,mBAAmB,CAAC;MAC7B,EAAEX,OAAOY,qBAAqB,CAAC;MAC/B,EAAEZ,OAAOS,gBAAgB,CAAC;MAC1B,EAAET,OAAOY,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEb,OAAOc,oBAAoB,CAAC,GAAG,EAAEd,OAAOS,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAM,0BAA0B;QACxBR,gBAAgB;IAClB;IAEAJ,QAAQ;QACNa,UAAUhB,OAAOc,oBAAoB;QACrCD,UAAUb,OAAOc,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMG,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMhB,IAAI,CAACkB,SAAS,GAAGrB,aACrBE,yBAAyBC,IAAI,EAC7BiB,OAAOjB,IAAI,EACXgB,MAAMG,mBAAmB,KAAK,WAAWF,OAAOJ,wBAAwB,EACxEG,MAAMhB,IAAI,CAACkB,SAAS;IAGtB,IAAIF,MAAMf,MAAM,EAAE;QAChBe,MAAMf,MAAM,CAACiB,SAAS,GAAGrB,aAAaE,yBAAyBE,MAAM,EAAEgB,OAAOhB,MAAM,EAAEe,MAAMf,MAAM,CAACiB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
export { Suggestion, suggestionClassNames, useSuggestionStyles_unstable, useSuggestion_unstable } from './Suggestion';
|
|
2
2
|
export { SuggestionList, renderSuggestionList_unstable, suggestionListClassNames, useSuggestionListStyles_unstable, useSuggestionList_unstable } from './SuggestionList';
|
|
3
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -23,4 +23,4 @@ const Suggestion = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
23
23
|
(0, _reactprovider.useCustomStyleHook)('useSuggestionStyles')(state);
|
|
24
24
|
return (0, _reactcomponents.renderButton_unstable)(state);
|
|
25
25
|
});
|
|
26
|
-
Suggestion.displayName = 'Suggestion';
|
|
26
|
+
Suggestion.displayName = 'Suggestion';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport { useSuggestion_unstable } from './useSuggestion';\nimport type { SuggestionProps } from './Suggestion.types';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<SuggestionProps> = React.forwardRef((props, ref) => {\n 'use no memo';\n\n const state = useSuggestion_unstable(props, ref);\n state.appearance = props.appearance || 'outline';\n useButtonStyles_unstable(state);\n useSuggestionStyles_unstable(state);\n useCustomStyleHook('useSuggestionStyles')(state);\n\n return renderButton_unstable(state);\n});\n\nSuggestion.displayName = 'Suggestion';\n"],"names":["Suggestion","React","forwardRef","props","state","
|
|
1
|
+
{"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\nimport { useSuggestion_unstable } from './useSuggestion';\nimport type { SuggestionProps } from './Suggestion.types';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<SuggestionProps> = React.forwardRef((props, ref) => {\n 'use no memo';\n\n const state = useSuggestion_unstable(props, ref);\n state.appearance = props.appearance || 'outline';\n useButtonStyles_unstable(state);\n useSuggestionStyles_unstable(state);\n useCustomStyleHook('useSuggestionStyles')(state);\n\n return renderButton_unstable(state);\n});\n\nSuggestion.displayName = 'Suggestion';\n"],"names":["Suggestion","React","forwardRef","props","ref","state","useSuggestion_unstable","appearance","useButtonStyles_unstable","useSuggestionStyles_unstable","useCustomStyleHook","renderButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;2CACsB;iCAEmB;+BAC7B;+BACI;AAIhC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF;IAEA,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAC5CC,MAAME,UAAU,GAAGJ,MAAMI,UAAU,IAAI;IACvCC,IAAAA,yCAAAA,EAAyBH;IACzBI,IAAAA,uDAAAA,EAA6BJ;IAC7BK,IAAAA,iCAAAA,EAAmB,uBAAuBL;IAE1C,OAAOM,IAAAA,sCAAAA,EAAsBN;AAC/B;AAEAL,WAAWY,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { SuggestionProps, SuggestionState } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n props: SuggestionProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SuggestionState => {\n const buttonState = useButton_unstable(props, ref);\n const mode = useCopilotMode(props.mode);\n const designVersion = useDesignVersion(props.designVersion);\n return { ...buttonState, mode, designVersion };\n};\n"],"names":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode","designVersion","useDesignVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACc;AAG1C,MAAMA,yBAAyB,CACpCC,OACAC;
|
|
1
|
+
{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { SuggestionProps, SuggestionState } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n props: SuggestionProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SuggestionState => {\n const buttonState = useButton_unstable(props, ref);\n const mode = useCopilotMode(props.mode);\n const designVersion = useDesignVersion(props.designVersion);\n return { ...buttonState, mode, designVersion };\n};\n"],"names":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode","designVersion","useDesignVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACc;AAG1C,MAAMA,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,mCAAAA,EAAmBH,OAAOC;IAC9C,MAAMG,OAAOC,IAAAA,6BAAAA,EAAeL,MAAMI,IAAI;IACtC,MAAME,gBAAgBC,IAAAA,+BAAAA,EAAiBP,MAAMM,aAAa;IAC1D,OAAO;QAAE,GAAGJ,WAAW;QAAEE;QAAME;IAAc;AAC/C"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
suggestionClassNames: function() {
|
|
13
|
+
return suggestionClassNames;
|
|
14
|
+
},
|
|
15
|
+
useSuggestionStyles_unstable: function() {
|
|
16
|
+
return useSuggestionStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const suggestionClassNames = {
|
|
22
|
+
root: 'fai-Suggestion',
|
|
23
|
+
icon: 'fai-Suggestion__icon'
|
|
24
|
+
};
|
|
25
|
+
const useSuggestionStyles = (0, _reactcomponents.makeStyles)({
|
|
26
|
+
root: {
|
|
27
|
+
..._tokens.typographyStyles.caption1,
|
|
28
|
+
// Brand/M365/140
|
|
29
|
+
..._reactcomponents.shorthands.border('1px', 'solid', _tokens.tokens.colorBrandStroke2),
|
|
30
|
+
borderRadius: _tokens.tokens.borderRadiusXLarge,
|
|
31
|
+
padding: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingVerticalS}`,
|
|
32
|
+
color: _tokens.tokens.colorNeutralForeground2,
|
|
33
|
+
textAlign: 'start'
|
|
34
|
+
},
|
|
35
|
+
enabled: {
|
|
36
|
+
'@media (forced-colors: none)': {
|
|
37
|
+
':hover': {
|
|
38
|
+
// Brand/M365/120
|
|
39
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Hover),
|
|
40
|
+
color: _tokens.tokens.colorBrandForeground2Hover,
|
|
41
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2Hover
|
|
42
|
+
},
|
|
43
|
+
// Figma states 'on hover and pressed state'
|
|
44
|
+
':active:hover': {
|
|
45
|
+
// Brand/M365/120
|
|
46
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorBrandStroke2Pressed),
|
|
47
|
+
color: _tokens.tokens.colorBrandForeground2Pressed,
|
|
48
|
+
backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
canvas: {
|
|
53
|
+
..._tokens.typographyStyles.body1,
|
|
54
|
+
padding: `${_tokens.tokens.spacingVerticalSNudge} ${_tokens.tokens.spacingHorizontalM}`
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
const useNextStyles = (0, _reactcomponents.makeStyles)({
|
|
58
|
+
root: {
|
|
59
|
+
paddingHorizontal: _tokens.tokens.spacingHorizontalM,
|
|
60
|
+
paddingVertical: _tokens.tokens.spacingVerticalSNudge,
|
|
61
|
+
fontSize: _tokens.tokens.fontSizeBase200,
|
|
62
|
+
..._reactcomponents.shorthands.border(_tokens.tokens.strokeWidthThin, 'solid', _tokens.tokens.colorNeutralStroke2),
|
|
63
|
+
backgroundColor: _tokens.tokens.colorSubtleBackground
|
|
64
|
+
},
|
|
65
|
+
enabled: {
|
|
66
|
+
'@media (forced-colors: none)': {
|
|
67
|
+
':hover': {
|
|
68
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorNeutralStroke2),
|
|
69
|
+
color: _tokens.tokens.colorNeutralForeground2Hover,
|
|
70
|
+
backgroundColor: _tokens.tokens.colorSubtleBackgroundHover
|
|
71
|
+
},
|
|
72
|
+
':active:hover': {
|
|
73
|
+
..._reactcomponents.shorthands.borderColor(_tokens.tokens.colorNeutralStroke2),
|
|
74
|
+
color: _tokens.tokens.colorNeutralForeground2Pressed,
|
|
75
|
+
backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
const useSuggestionStyles_unstable = (state)=>{
|
|
81
|
+
'use no memo';
|
|
82
|
+
const { designVersion, mode } = state;
|
|
83
|
+
const styles = useSuggestionStyles();
|
|
84
|
+
const nextStyles = useNextStyles();
|
|
85
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, designVersion === 'next' && !state.disabled && nextStyles.enabled, state.root.className);
|
|
86
|
+
return state;
|
|
87
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames, ButtonSlots } from '@fluentui/react-components';\nimport type { SuggestionState } from './Suggestion.types';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fai-Suggestion',\n icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStyles = makeStyles({\n root: {\n ...typographyStyles.caption1,\n // Brand/M365/140\n ...shorthands.border('1px', 'solid', tokens.colorBrandStroke2),\n borderRadius: tokens.borderRadiusXLarge,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalS}`,\n color: tokens.colorNeutralForeground2,\n textAlign: 'start',\n // remove this MQ once https://github.com/microsoft/fluentui/issues/28552 is resolved\n // media queries have zero specificity\n },\n enabled: {\n '@media (forced-colors: none)': {\n ':hover': {\n // Brand/M365/120\n ...shorthands.borderColor(tokens.colorBrandStroke2Hover),\n color: tokens.colorBrandForeground2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n // Figma states 'on hover and pressed state'\n ':active:hover': {\n // Brand/M365/120\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n color: tokens.colorBrandForeground2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n },\n },\n canvas: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalM}`,\n },\n});\n\nconst useNextStyles = makeStyles({\n root: {\n paddingHorizontal: tokens.spacingHorizontalM,\n paddingVertical: tokens.spacingVerticalSNudge,\n fontSize: tokens.fontSizeBase200,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n backgroundColor: tokens.colorSubtleBackground,\n },\n enabled: {\n '@media (forced-colors: none)': {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n 'use no memo';\n\n const { designVersion, mode } = state;\n\n const styles = useSuggestionStyles();\n const nextStyles = useNextStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n mode === 'canvas' && styles.canvas,\n designVersion === 'next' && nextStyles.root,\n !state.disabled && styles.enabled,\n designVersion === 'next' && !state.disabled && nextStyles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["suggestionClassNames","useSuggestionStyles_unstable","root","icon","useSuggestionStyles","makeStyles","typographyStyles","caption1","shorthands","border","tokens","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","spacingVerticalSNudge","spacingHorizontalM","useNextStyles","paddingHorizontal","paddingVertical","fontSize","fontSizeBase200","strokeWidthThin","colorNeutralStroke2","colorSubtleBackground","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","state","designVersion","mode","styles","nextStyles","className","mergeClasses","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;IAgEAC,4BAAAA;eAAAA;;;iCArEwC;wBACZ;AAIlC,MAAMD,uBAAoD;IAC/DE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,sBAAsBC,IAAAA,2BAAAA,EAAW;IACrCH,MAAM;QACJ,GAAGI,wBAAAA,CAAiBC,QAAQ;QAC5B,kBAAkB;QAClB,GAAGC,2BAAAA,CAAWC,MAAM,CAAC,OAAO,SAASC,cAAAA,CAAOC,iBAAiB,CAAC;QAC9DC,cAAcF,cAAAA,CAAOG,kBAAkB;QACvCC,SAAS,CAAC,EAAEJ,cAAAA,CAAOK,iBAAiB,CAAC,CAAC,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,CAAC;QACjEC,OAAOP,cAAAA,CAAOQ,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGZ,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAOY,sBAAsB,CAAC;gBACxDL,OAAOP,cAAAA,CAAOa,0BAA0B;gBACxCC,iBAAiBd,cAAAA,CAAOe,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGjB,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAOgB,wBAAwB,CAAC;gBAC1DT,OAAOP,cAAAA,CAAOiB,4BAA4B;gBAC1CH,iBAAiBd,cAAAA,CAAOkB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAGvB,wBAAAA,CAAiBwB,KAAK;QACzBhB,SAAS,CAAC,EAAEJ,cAAAA,CAAOqB,qBAAqB,CAAC,CAAC,EAAErB,cAAAA,CAAOsB,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgB5B,IAAAA,2BAAAA,EAAW;IAC/BH,MAAM;QACJgC,mBAAmBxB,cAAAA,CAAOsB,kBAAkB;QAC5CG,iBAAiBzB,cAAAA,CAAOqB,qBAAqB;QAC7CK,UAAU1B,cAAAA,CAAO2B,eAAe;QAChC,GAAG7B,2BAAAA,CAAWC,MAAM,CAACC,cAAAA,CAAO4B,eAAe,EAAE,SAAS5B,cAAAA,CAAO6B,mBAAmB,CAAC;QACjFf,iBAAiBd,cAAAA,CAAO8B,qBAAqB;IAC/C;IACApB,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,GAAGZ,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAO6B,mBAAmB,CAAC;gBACrDtB,OAAOP,cAAAA,CAAO+B,4BAA4B;gBAC1CjB,iBAAiBd,cAAAA,CAAOgC,0BAA0B;YACpD;YACA,iBAAiB;gBACf,GAAGlC,2BAAAA,CAAWa,WAAW,CAACX,cAAAA,CAAO6B,mBAAmB,CAAC;gBACrDtB,OAAOP,cAAAA,CAAOiC,8BAA8B;gBAC5CnB,iBAAiBd,cAAAA,CAAOkC,4BAA4B;YACtD;QACF;IACF;AACF;AAEO,MAAM3C,+BAA+B,CAAC4C;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAAS5C;IACf,MAAM6C,aAAahB;IACnBY,MAAM3C,IAAI,CAACgD,SAAS,GAAGC,IAAAA,6BAAAA,EACrBnD,qBAAqBE,IAAI,EACzB8C,OAAO9C,IAAI,EACX6C,SAAS,YAAYC,OAAOnB,MAAM,EAClCiB,kBAAkB,UAAUG,WAAW/C,IAAI,EAC3C,CAAC2C,MAAMO,QAAQ,IAAIJ,OAAO5B,OAAO,EACjC0B,kBAAkB,UAAU,CAACD,MAAMO,QAAQ,IAAIH,WAAW7B,OAAO,EACjEyB,MAAM3C,IAAI,CAACgD,SAAS;IAGtB,OAAOL;AACT"}
|
|
@@ -20,4 +20,4 @@ const SuggestionList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
20
20
|
(0, _reactprovider.useCustomStyleHook)('useSuggestionListStyles')(state);
|
|
21
21
|
return (0, _renderSuggestionList.renderSuggestionList_unstable)(state);
|
|
22
22
|
});
|
|
23
|
-
SuggestionList.displayName = 'SuggestionList';
|
|
23
|
+
SuggestionList.displayName = 'SuggestionList';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionList_unstable } from './useSuggestionList';\nimport { renderSuggestionList_unstable } from './renderSuggestionList';\nimport { useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';\nimport type { SuggestionListProps } from './SuggestionList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// SuggestionList component - TODO: add more docs\nexport const SuggestionList: ForwardRefComponent<SuggestionListProps> = React.forwardRef((props, ref) => {\n const state = useSuggestionList_unstable(props, ref);\n\n useSuggestionListStyles_unstable(state);\n useCustomStyleHook('useSuggestionListStyles')(state);\n\n return renderSuggestionList_unstable(state);\n});\n\nSuggestionList.displayName = 'SuggestionList';\n"],"names":["SuggestionList","React","forwardRef","props","state","useSuggestionList_unstable","useSuggestionListStyles_unstable","useCustomStyleHook","renderSuggestionList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;mCACoB;sCACG;+CACG;+BAGd;AAG5B,MAAMA,iBAAAA,WAAAA,
|
|
1
|
+
{"version":3,"sources":["SuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionList_unstable } from './useSuggestionList';\nimport { renderSuggestionList_unstable } from './renderSuggestionList';\nimport { useSuggestionListStyles_unstable } from './useSuggestionListStyles.styles';\nimport type { SuggestionListProps } from './SuggestionList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// SuggestionList component - TODO: add more docs\nexport const SuggestionList: ForwardRefComponent<SuggestionListProps> = React.forwardRef((props, ref) => {\n const state = useSuggestionList_unstable(props, ref);\n\n useSuggestionListStyles_unstable(state);\n useCustomStyleHook('useSuggestionListStyles')(state);\n\n return renderSuggestionList_unstable(state);\n});\n\nSuggestionList.displayName = 'SuggestionList';\n"],"names":["SuggestionList","React","forwardRef","props","ref","state","useSuggestionList_unstable","useSuggestionListStyles_unstable","useCustomStyleHook","renderSuggestionList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;mCACoB;sCACG;+CACG;+BAGd;AAG5B,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjCG,IAAAA,iCAAAA,EAAmB,2BAA2BH;IAE9C,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACvC;AAEAL,eAAeU,WAAW,GAAG"}
|
|
@@ -29,4 +29,3 @@ const _SuggestionList = require("./SuggestionList");
|
|
|
29
29
|
const _renderSuggestionList = require("./renderSuggestionList");
|
|
30
30
|
const _useSuggestionList = require("./useSuggestionList");
|
|
31
31
|
const _useSuggestionListStylesstyles = require("./useSuggestionListStyles.styles");
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSuggestionList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SuggestionListState, SuggestionListSlots } from './SuggestionList.types';\n\n/**\n * Render the final JSX of SuggestionList\n */\nexport const renderSuggestionList_unstable = (state: SuggestionListState) => {\n assertSlots<SuggestionListSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["renderSuggestionList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SuggestionListState, SuggestionListSlots } from './SuggestionList.types';\n\n/**\n * Render the final JSX of SuggestionList\n */\nexport const renderSuggestionList_unstable = (state: SuggestionListState) => {\n assertSlots<SuggestionListSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["renderSuggestionList_unstable","state","assertSlots","_jsxs","root","children","action","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,4BAAAA,EAAiCD;IAEjC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,MAAM,EAAA,CAAA;;;AAGpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport type { SuggestionListProps, SuggestionListState } from './SuggestionList.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render SuggestionList.\n *\n * The returned state can be modified with hooks such as useSuggestionListStyles_unstable,\n * before being passed to renderSuggestionList_unstable.\n *\n * @param props - props from this instance of SuggestionList\n * @param ref - reference to root HTMLElement of SuggestionList\n */\nexport const useSuggestionList_unstable = (\n props: SuggestionListProps,\n ref: React.Ref<HTMLDivElement>,\n): SuggestionListState => {\n const { action, horizontalAlignment = 'end' } = props;\n return {\n horizontalAlignment,\n components: {\n root: 'div',\n action: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'toolbar',\n 'aria-label': 'suggestions',\n ...props,\n ...useArrowNavigationGroup({ axis: 'both', circular: true }),\n }),\n { elementType: 'div' },\n ),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import { getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport type { SuggestionListProps, SuggestionListState } from './SuggestionList.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render SuggestionList.\n *\n * The returned state can be modified with hooks such as useSuggestionListStyles_unstable,\n * before being passed to renderSuggestionList_unstable.\n *\n * @param props - props from this instance of SuggestionList\n * @param ref - reference to root HTMLElement of SuggestionList\n */\nexport const useSuggestionList_unstable = (\n props: SuggestionListProps,\n ref: React.Ref<HTMLDivElement>,\n): SuggestionListState => {\n const { action, horizontalAlignment = 'end' } = props;\n return {\n horizontalAlignment,\n components: {\n root: 'div',\n action: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'toolbar',\n 'aria-label': 'suggestions',\n ...props,\n ...useArrowNavigationGroup({ axis: 'both', circular: true }),\n }),\n { elementType: 'div' },\n ),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["useSuggestionList_unstable","props","ref","action","horizontalAlignment","components","root","slot","always","getIntrinsicElementProps","role","useArrowNavigationGroup","axis","circular","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;iCAd2D;AAcjE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,sBAAsB,KAAK,EAAE,GAAGH;IAChD,OAAO;QACLG;QACAC,YAAY;YACVC,MAAM;YACNH,QAAQ;QACV;QACAG,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BP;YACAQ,MAAM;YACN,cAAc;YACd,GAAGT,KAAK;YACR,GAAGU,IAAAA,wCAAAA,EAAwB;gBAAEC,MAAM;gBAAQC,UAAU;YAAK,EAAE;QAC9D,IACA;YAAEC,aAAa;QAAM;QAEvBX,QAAQI,qBAAAA,CAAKQ,QAAQ,CAACZ,QAAQ;YAAEW,aAAa;QAAO;IACtD;AACF"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
suggestionListClassNames: function() {
|
|
13
|
+
return suggestionListClassNames;
|
|
14
|
+
},
|
|
15
|
+
useSuggestionListStyles_unstable: function() {
|
|
16
|
+
return useSuggestionListStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const suggestionListClassNames = {
|
|
22
|
+
root: 'fai-SuggestionList',
|
|
23
|
+
action: 'fai-SuggestionList__action'
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Styles for the root slot
|
|
27
|
+
*/ const useStyles = (0, _reactcomponents.makeStyles)({
|
|
28
|
+
root: {
|
|
29
|
+
display: 'flex',
|
|
30
|
+
flexWrap: 'wrap',
|
|
31
|
+
justifyContent: 'flex-end',
|
|
32
|
+
gap: _tokens.tokens.spacingVerticalS,
|
|
33
|
+
margin: `
|
|
34
|
+
${_tokens.tokens.spacingVerticalNone}
|
|
35
|
+
${_tokens.tokens.spacingHorizontalNone}
|
|
36
|
+
${_tokens.tokens.spacingVerticalS}
|
|
37
|
+
${_tokens.tokens.spacingHorizontalNone}
|
|
38
|
+
`,
|
|
39
|
+
'> :nth-last-of-type(2)': {
|
|
40
|
+
maxWidth: `calc(100% - ${_tokens.tokens.spacingHorizontalXXL} - ${_tokens.tokens.spacingVerticalS})`
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
horizontalAlignmentStart: {
|
|
44
|
+
justifyContent: 'flex-start'
|
|
45
|
+
},
|
|
46
|
+
action: {
|
|
47
|
+
minWidth: _tokens.tokens.spacingHorizontalXXL,
|
|
48
|
+
maxWidth: _tokens.tokens.spacingHorizontalXXL
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
const useSuggestionListStyles_unstable = (state)=>{
|
|
52
|
+
'use no memo';
|
|
53
|
+
const styles = useStyles();
|
|
54
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
|
|
55
|
+
if (state.action) {
|
|
56
|
+
state.action.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.action, styles.action, state.action.className);
|
|
57
|
+
}
|
|
58
|
+
return state;
|
|
59
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { SuggestionListSlots, SuggestionListState } from './SuggestionList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const suggestionListClassNames: SlotClassNames<SuggestionListSlots> = {\n root: 'fai-SuggestionList',\n action: 'fai-SuggestionList__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'flex-end',\n gap: tokens.spacingVerticalS,\n margin: `\n ${tokens.spacingVerticalNone}\n ${tokens.spacingHorizontalNone}\n ${tokens.spacingVerticalS}\n ${tokens.spacingHorizontalNone}\n `,\n '> :nth-last-of-type(2)': {\n maxWidth: `calc(100% - ${tokens.spacingHorizontalXXL} - ${tokens.spacingVerticalS})`,\n },\n },\n horizontalAlignmentStart: {\n justifyContent: 'flex-start',\n },\n\n action: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the SuggestionList slots based on the state\n */\nexport const useSuggestionListStyles_unstable = (state: SuggestionListState): SuggestionListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n suggestionListClassNames.root,\n styles.root,\n state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart,\n state.root.className,\n );\n\n if (state.action) {\n state.action.className = mergeClasses(suggestionListClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["suggestionListClassNames","useSuggestionListStyles_unstable","root","action","useStyles","makeStyles","display","flexWrap","justifyContent","gap","tokens","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","horizontalAlignmentStart","minWidth","state","styles","className","mergeClasses","horizontalAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAuCAC,gCAAAA;eAAAA;;;iCA5C4B;wBAClB;AAIhB,MAAMD,2BAAgE;IAC3EE,MAAM;IACNC,QAAQ;AACV;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BH,MAAM;QACJI,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKC,cAAAA,CAAOC,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEF,cAAAA,CAAOG,mBAAmB,CAAC;MAC7B,EAAEH,cAAAA,CAAOI,qBAAqB,CAAC;MAC/B,EAAEJ,cAAAA,CAAOC,gBAAgB,CAAC;MAC1B,EAAED,cAAAA,CAAOI,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEL,cAAAA,CAAOM,oBAAoB,CAAC,GAAG,EAAEN,cAAAA,CAAOC,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAM,0BAA0B;QACxBT,gBAAgB;IAClB;IAEAL,QAAQ;QACNe,UAAUR,cAAAA,CAAOM,oBAAoB;QACrCD,UAAUL,cAAAA,CAAOM,oBAAoB;IACvC;AAGF;AAKO,MAAMf,mCAAmC,CAACkB;IAC/C;IAEA,MAAMC,SAAShB;IACfe,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,6BAAAA,EACrBtB,yBAAyBE,IAAI,EAC7BkB,OAAOlB,IAAI,EACXiB,MAAMI,mBAAmB,KAAK,WAAWH,OAAOH,wBAAwB,EACxEE,MAAMjB,IAAI,CAACmB,SAAS;IAGtB,IAAIF,MAAMhB,MAAM,EAAE;QAChBgB,MAAMhB,MAAM,CAACkB,SAAS,GAAGC,IAAAA,6BAAAA,EAAatB,yBAAyBG,MAAM,EAAEiB,OAAOjB,MAAM,EAAEgB,MAAMhB,MAAM,CAACkB,SAAS;IAC9G;IAEA,OAAOF;AACT"}
|
package/lib-commonjs/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-suggestions",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.3",
|
|
4
4
|
"description": "A Fluent AI package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,17 +12,17 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "^0.12.
|
|
16
|
-
"@fluentui-copilot/tokens": "^0.3.
|
|
15
|
+
"@fluentui-copilot/react-provider": "^0.12.3",
|
|
16
|
+
"@fluentui-copilot/tokens": "^0.3.12",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@fluentui/react-components": ">=9.
|
|
21
|
-
"@fluentui/react-context-selector": ">=9.1
|
|
22
|
-
"@fluentui/react-icons": ">=2.0.
|
|
23
|
-
"@fluentui/react-jsx-runtime": ">=9.
|
|
24
|
-
"@fluentui/react-shared-contexts": ">=9.
|
|
25
|
-
"@fluentui/react-utilities": ">=9.
|
|
20
|
+
"@fluentui/react-components": ">=9.66.0 <10.0.0",
|
|
21
|
+
"@fluentui/react-context-selector": ">=9.2.1 <10.0.0",
|
|
22
|
+
"@fluentui/react-icons": ">=2.0.303 <3.0.0",
|
|
23
|
+
"@fluentui/react-jsx-runtime": ">=9.1.1 <10.0.0",
|
|
24
|
+
"@fluentui/react-shared-contexts": ">=9.24.0 <10.0.0",
|
|
25
|
+
"@fluentui/react-utilities": ">=9.21.1 <10.0.0",
|
|
26
26
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
27
27
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
28
28
|
"react": ">=16.14.0 <19.0.0",
|