@fluentui-copilot/react-suggestions 0.10.1 → 0.11.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 +21 -0
- package/CHANGELOG.md +11 -1
- package/dist/index.d.ts +3 -2
- package/lib/components/Suggestion/Suggestion.types.js.map +1 -1
- package/lib/components/Suggestion/useSuggestion.js +4 -2
- package/lib/components/Suggestion/useSuggestion.js.map +1 -1
- package/lib/components/Suggestion/useSuggestionStyles.styles.js +19 -4
- package/lib/components/Suggestion/useSuggestionStyles.styles.js.map +1 -1
- package/lib/components/SuggestionList/useSuggestionListStyles.styles.js +2 -1
- package/lib/components/SuggestionList/useSuggestionListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Suggestion/Suggestion.types.js.map +1 -1
- package/lib-commonjs/components/Suggestion/useSuggestion.js +3 -1
- package/lib-commonjs/components/Suggestion/useSuggestion.js.map +1 -1
- package/lib-commonjs/components/Suggestion/useSuggestionStyles.styles.js +18 -3
- package/lib-commonjs/components/Suggestion/useSuggestionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-suggestions",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Thu, 20 Mar 2025 17:00:43 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-suggestions_v0.11.0",
|
|
7
|
+
"version": "0.11.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "makotom@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-suggestions",
|
|
13
|
+
"commit": "9958f308833b5b38dd8afdaf5505f87aca5d3961",
|
|
14
|
+
"comment": "chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "owcampbe@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-suggestions",
|
|
19
|
+
"commit": "cb598dd186792bad162261c823731b50115c133b",
|
|
20
|
+
"comment": "feat: Add designVersion=next styles."
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
4
25
|
{
|
|
5
26
|
"date": "Wed, 29 Jan 2025 01:37:03 GMT",
|
|
6
27
|
"tag": "@fluentui-copilot/react-suggestions_v0.10.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-suggestions
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 20 Mar 2025 17:00:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.11.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.11.0)
|
|
8
|
+
|
|
9
|
+
Thu, 20 Mar 2025 17:00:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.10.0..@fluentui-copilot/react-suggestions_v0.11.0)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components. ([PR #2745](https://github.com/microsoft/fluentai/pull/2745) by makotom@microsoft.com)
|
|
15
|
+
- feat: Add designVersion=next styles. ([PR #2803](https://github.com/microsoft/fluentai/pull/2803) by owcampbe@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [0.10.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.10.0)
|
|
8
18
|
|
|
9
19
|
Wed, 29 Jan 2025 01:37:03 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import type { ButtonState } from '@fluentui/react-components';
|
|
|
6
6
|
import type { ComponentProps } from '@fluentui/react-components';
|
|
7
7
|
import type { ComponentState } from '@fluentui/react-components';
|
|
8
8
|
import type { CopilotMode } from '@fluentui-copilot/react-provider';
|
|
9
|
+
import type { DesignVersion } from '@fluentui-copilot/react-provider';
|
|
9
10
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
10
11
|
import type { Slot } from '@fluentui/react-components';
|
|
11
12
|
import type { SlotClassNames } from '@fluentui/react-components';
|
|
@@ -45,11 +46,11 @@ export declare type SuggestionListSlots = {
|
|
|
45
46
|
*/
|
|
46
47
|
export declare type SuggestionListState = ComponentState<SuggestionListSlots> & Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;
|
|
47
48
|
|
|
48
|
-
export declare type SuggestionProps = CopilotMode & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
|
|
49
|
+
export declare type SuggestionProps = CopilotMode & DesignVersion & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
|
|
49
50
|
|
|
50
51
|
export declare type SuggestionSlots = ButtonSlots;
|
|
51
52
|
|
|
52
|
-
export declare type SuggestionState = ComponentState<SuggestionSlots> & Required<Pick<SuggestionProps, 'mode'>> & Omit<ButtonState, keyof ButtonSlots>;
|
|
53
|
+
export declare type SuggestionState = ComponentState<SuggestionSlots> & Required<Pick<SuggestionProps, 'mode' | 'designVersion'>> & Omit<ButtonState, keyof ButtonSlots>;
|
|
53
54
|
|
|
54
55
|
export declare type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;
|
|
55
56
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { ButtonProps, ButtonSlots, ButtonState, ComponentProps, ComponentState } from '@fluentui/react-components';\n\nexport type SuggestionSlots = ButtonSlots;\n\nexport type SuggestionProps = CopilotMode
|
|
1
|
+
{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ButtonProps, ButtonSlots, ButtonState, ComponentProps, ComponentState } from '@fluentui/react-components';\n\nexport type SuggestionSlots = ButtonSlots;\n\nexport type SuggestionProps = CopilotMode &\n DesignVersion &\n ComponentProps<SuggestionSlots> &\n Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n Required<Pick<SuggestionProps, 'mode' | 'designVersion'>> &\n Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAUA,WAEuC"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { useButton_unstable } from '@fluentui/react-components';
|
|
2
|
-
import { useCopilotMode } from '@fluentui-copilot/react-provider';
|
|
2
|
+
import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
3
3
|
export const useSuggestion_unstable = (props, ref) => {
|
|
4
4
|
const buttonState = useButton_unstable(props, ref);
|
|
5
5
|
const mode = useCopilotMode(props.mode);
|
|
6
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
6
7
|
return {
|
|
7
8
|
...buttonState,
|
|
8
|
-
mode
|
|
9
|
+
mode,
|
|
10
|
+
designVersion
|
|
9
11
|
};
|
|
10
12
|
};
|
|
11
13
|
//# sourceMappingURL=useSuggestion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode } 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 return { ...buttonState, mode };\n};\n"],"names":["useButton_unstable","useCopilotMode","useSuggestion_unstable","props","ref","buttonState","mode"],"rangeMappings":"
|
|
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":["useButton_unstable","useCopilotMode","useDesignVersion","useSuggestion_unstable","props","ref","buttonState","mode","designVersion"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AAGpF,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcN,mBAAmBI,OAAOC;IAC9C,MAAME,OAAON,eAAeG,MAAMG,IAAI;IACtC,MAAMC,gBAAgBN,iBAAiBE,MAAMI,aAAa;IAC1D,OAAO;QAAE,GAAGF,WAAW;QAAEC;QAAMC;IAAc;AAC/C,EAAE"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands,
|
|
1
|
+
import { __styles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
export const suggestionClassNames = {
|
|
3
4
|
root: 'fai-Suggestion',
|
|
4
5
|
icon: 'fai-Suggestion__icon'
|
|
5
6
|
};
|
|
6
|
-
const
|
|
7
|
+
const useSuggestionStyles = __styles({
|
|
7
8
|
root: {
|
|
8
9
|
Bahqtrf: "fk6fouc",
|
|
9
10
|
Be2twd7: "fy9rknc",
|
|
@@ -89,11 +90,25 @@ const useSuggestionStylesStyles = __styles({
|
|
|
89
90
|
m: "(forced-colors: none)"
|
|
90
91
|
}]]
|
|
91
92
|
});
|
|
93
|
+
const useNextStyles = __styles({
|
|
94
|
+
root: {
|
|
95
|
+
qh2i5f: "f1m56mwy",
|
|
96
|
+
Bvf7fsn: "frhssjw",
|
|
97
|
+
Be2twd7: "fy9rknc"
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
100
|
+
d: [".f1m56mwy{padding-horizontal:var(--spacingHorizontalM);padding-horizontal:var(--spacingHorizontalM);}", ".frhssjw{padding-vertical:var(--spacingVerticalSNudge);}", ".fy9rknc{font-size:var(--fontSizeBase200);}"]
|
|
101
|
+
});
|
|
92
102
|
export const useSuggestionStyles_unstable = state => {
|
|
93
103
|
'use no memo';
|
|
94
104
|
|
|
95
|
-
const
|
|
96
|
-
|
|
105
|
+
const {
|
|
106
|
+
designVersion,
|
|
107
|
+
mode
|
|
108
|
+
} = state;
|
|
109
|
+
const styles = useSuggestionStyles();
|
|
110
|
+
const nextStyles = useNextStyles();
|
|
111
|
+
state.root.className = mergeClasses(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, state.root.className);
|
|
97
112
|
return state;
|
|
98
113
|
};
|
|
99
114
|
//# sourceMappingURL=useSuggestionStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands,
|
|
1
|
+
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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 },\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 state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","typographyStyles","tokens","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","useSuggestionStyles_unstable","state","designVersion","mode","styles","nextStyles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,6BAA6B;AACpG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBR,WAAW;IACrCM,MAAM;QACJ,GAAGH,iBAAiBM,QAAQ;QAC5B,kBAAkB;QAClB,GAAGP,WAAWQ,MAAM,CAAC,OAAO,SAASN,OAAOO,iBAAiB,CAAC;QAC9DC,cAAcR,OAAOS,kBAAkB;QACvCC,SAAS,CAAC,EAAEV,OAAOW,iBAAiB,CAAC,CAAC,EAAEX,OAAOY,gBAAgB,CAAC,CAAC;QACjEC,OAAOb,OAAOc,uBAAuB;QACrCC,WAAW;IAGb;IACAC,SAAS;QACP,gCAAgC;YAC9B,UAAU;gBACR,kBAAkB;gBAClB,GAAGlB,WAAWmB,WAAW,CAACjB,OAAOkB,sBAAsB,CAAC;gBACxDL,OAAOb,OAAOmB,0BAA0B;gBACxCC,iBAAiBpB,OAAOqB,0BAA0B;YACpD;YACA,4CAA4C;YAC5C,iBAAiB;gBACf,kBAAkB;gBAClB,GAAGvB,WAAWmB,WAAW,CAACjB,OAAOsB,wBAAwB,CAAC;gBAC1DT,OAAOb,OAAOuB,4BAA4B;gBAC1CH,iBAAiBpB,OAAOwB,4BAA4B;YACtD;QACF;IACF;IACAC,QAAQ;QACN,GAAG1B,iBAAiB2B,KAAK;QACzBhB,SAAS,CAAC,EAAEV,OAAO2B,qBAAqB,CAAC,CAAC,EAAE3B,OAAO4B,kBAAkB,CAAC,CAAC;IACzE;AACF;AAEA,MAAMC,gBAAgBjC,WAAW;IAC/BM,MAAM;QACJ4B,mBAAmB9B,OAAO4B,kBAAkB;QAC5CG,iBAAiB/B,OAAO2B,qBAAqB;QAC7CK,UAAUhC,OAAOiC,eAAe;IAClC;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,SAASlC;IACf,MAAMmC,aAAaV;IACnBM,MAAMjC,IAAI,CAACsC,SAAS,GAAG3C,aACrBI,qBAAqBC,IAAI,EACzBoC,OAAOpC,IAAI,EACXmC,SAAS,YAAYC,OAAOb,MAAM,EAClCW,kBAAkB,UAAUG,WAAWrC,IAAI,EAC3C,CAACiC,MAAMM,QAAQ,IAAIH,OAAOtB,OAAO,EACjCmB,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __styles, mergeClasses
|
|
1
|
+
import { __styles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
export const suggestionListClassNames = {
|
|
3
4
|
root: 'fai-SuggestionList',
|
|
4
5
|
action: 'fai-SuggestionList__action'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { ButtonProps, ButtonSlots, ButtonState, ComponentProps, ComponentState } from '@fluentui/react-components';\n\nexport type SuggestionSlots = ButtonSlots;\n\nexport type SuggestionProps = CopilotMode
|
|
1
|
+
{"version":3,"sources":["Suggestion.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ButtonProps, ButtonSlots, ButtonState, ComponentProps, ComponentState } from '@fluentui/react-components';\n\nexport type SuggestionSlots = ButtonSlots;\n\nexport type SuggestionProps = CopilotMode &\n DesignVersion &\n ComponentProps<SuggestionSlots> &\n Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n Required<Pick<SuggestionProps, 'mode' | 'designVersion'>> &\n Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -13,8 +13,10 @@ const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
|
13
13
|
const useSuggestion_unstable = (props, ref)=>{
|
|
14
14
|
const buttonState = (0, _reactcomponents.useButton_unstable)(props, ref);
|
|
15
15
|
const mode = (0, _reactprovider.useCopilotMode)(props.mode);
|
|
16
|
+
const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
|
|
16
17
|
return {
|
|
17
18
|
...buttonState,
|
|
18
|
-
mode
|
|
19
|
+
mode,
|
|
20
|
+
designVersion
|
|
19
21
|
};
|
|
20
22
|
}; //# sourceMappingURL=useSuggestion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestion.ts"],"sourcesContent":["import { useButton_unstable } from '@fluentui/react-components';\nimport { useCopilotMode } 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 return { ...buttonState, mode };\n};\n"],"names":["useSuggestion_unstable","props","ref","buttonState","useButton_unstable","mode","useCopilotMode"],"rangeMappings":"
|
|
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;UAEAC,cAAMA,IAAAA,mCAAcC,EAAAA,OAAmBH;UACvCI,OAAMA,IAAAA,6BAAOC,EAAAA,MAAeL,IAAMI;UAClCE,gBAAMA,IAAAA,+BAAgBC,EAAAA,MAAiBP,aAAMM;WAC7C;sBAAYJ;;;;AACd"}
|
|
@@ -21,7 +21,7 @@ const suggestionClassNames = {
|
|
|
21
21
|
root: 'fai-Suggestion',
|
|
22
22
|
icon: 'fai-Suggestion__icon'
|
|
23
23
|
};
|
|
24
|
-
const
|
|
24
|
+
const useSuggestionStyles = (0, _reactcomponents.__styles)({
|
|
25
25
|
root: {
|
|
26
26
|
Bahqtrf: "fk6fouc",
|
|
27
27
|
Be2twd7: "fy9rknc",
|
|
@@ -211,9 +211,24 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
|
|
|
211
211
|
]
|
|
212
212
|
]
|
|
213
213
|
});
|
|
214
|
+
const useNextStyles = (0, _reactcomponents.__styles)({
|
|
215
|
+
root: {
|
|
216
|
+
qh2i5f: "f1m56mwy",
|
|
217
|
+
Bvf7fsn: "frhssjw",
|
|
218
|
+
Be2twd7: "fy9rknc"
|
|
219
|
+
}
|
|
220
|
+
}, {
|
|
221
|
+
d: [
|
|
222
|
+
".f1m56mwy{padding-horizontal:var(--spacingHorizontalM);padding-horizontal:var(--spacingHorizontalM);}",
|
|
223
|
+
".frhssjw{padding-vertical:var(--spacingVerticalSNudge);}",
|
|
224
|
+
".fy9rknc{font-size:var(--fontSizeBase200);}"
|
|
225
|
+
]
|
|
226
|
+
});
|
|
214
227
|
const useSuggestionStyles_unstable = (state)=>{
|
|
215
228
|
'use no memo';
|
|
216
|
-
const
|
|
217
|
-
|
|
229
|
+
const { designVersion, mode } = state;
|
|
230
|
+
const styles = useSuggestionStyles();
|
|
231
|
+
const nextStyles = useNextStyles();
|
|
232
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, mode === 'canvas' && styles.canvas, designVersion === 'next' && nextStyles.root, !state.disabled && styles.enabled, state.root.className);
|
|
218
233
|
return state;
|
|
219
234
|
}; //# sourceMappingURL=useSuggestionStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands,
|
|
1
|
+
{"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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 },\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 state.root.className,\n );\n\n return state;\n};\n"],"names":["suggestionClassNames","root","icon","useSuggestionStyles","makeStyles","typographyStyles","shorthands","borderRadius","padding","color","colorNeutralForeground2","textAlign","ibv6hh","enabled","tokens","colorBrandForeground2Hover","z8tnut","canvas","B9di4we","useNextStyles","paddingHorizontal","paddingVertical","spacingVerticalSNudge","fontSize","Bejlia0","v5djml","Bptf8dt","useSuggestionStyles_unstable","j4j8r","H566xl","designVersion","a9g2gr","styles","rgbxn1","nextStyles","Bahqtrf"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;;;;;iCALkD;AAKxD,MAAMA,uBAAoD;UAC/DC;UACAC;AACF;AAEA,MAAMC,sBAAsBC,IAAAA,yBAAAA,EAAAA;UAC1BH;iBACKI;iBACH;iBACGC;iBACHC;iBACAC;iBACAC;YAAAA;YAAcC;SAAAA;iBACdC;QAGFC,QAAA;YAAA;YAAA;SAAA;QACAC,QAAAA;gBACE;YAAA;YAAA;SAAA;gBACE;;;YACE;SAAkB;;;;YAEXC;SAAOC;;gBAEhB;YAAA;YAAA;SAAA;iBACA;iBACA;;;;;gBAKA;gBACF;QACFC,QAAA;QACAC,SAAQ;gBACHZ;gBACHG;;IAEJK,SAAA;QAEAK,SAAMC;QACJlB,SAAM;YAAA;YAAA;SAAA;eACJmB;iBACAC;YAAAA;YAAiBP;SAAOQ;gBACxBC;QACFC,SAAA;QACFC,QAAA;QAEAC,SAAaC;YAAAA;YAAAA;SAAAA;QACXC,OAAA;QAEAC,QAAQC;YAAAA;YAAa;SAAQ;QAE7BC,QAAMC;QACNC,QAAMC;;YAUN;QACAC,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses
|
|
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","root","action","__styles","display","flexWrap","justifyContent","tokens","margin","t21cq0","maxWidth","horizontalAlignmentStart","minWidth","d","state","p","useStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;;;;;iCALoB;AAK1B,MAAMA,2BAAgE;UAC3EC;YACAC;AACF;AAEA;;CAEC,SAECD,YAAME,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACKC;gBACLC;iBACID;gBACAA;gBACAA;gBACAA;QACJE,QAAC;iBACD;iBACEC;YAAAA;YAAW;SAAY;iBACzB;;8BAEFC;iBACEL;;YAGFJ;iBACEU;iBACAF;;AAIJ,GAAA;IAEAG,GAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;YAEC;SACD;QAAA;YAAA;YAAiDC;gBAC/CC,GAAA,CAAA;;SAEA;QAAA;YAAA;YAAeC;gBACfF,GAAAA,CAAAA;;SAOA;QAAA;QAAkB;QAAA;QAAA;KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-suggestions",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"description": "A Fluent AI package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "^0.
|
|
15
|
+
"@fluentui-copilot/react-provider": "^0.10.1",
|
|
16
|
+
"@fluentui-copilot/tokens": "^0.3.6",
|
|
16
17
|
"@swc/helpers": "^0.5.1"
|
|
17
18
|
},
|
|
18
19
|
"peerDependencies": {
|