@fluentui-copilot/react-suggestions 0.0.0-nightly-20240812-0407-f0d7d2a8.1 → 0.0.0-nightly-20240816-0407-4f31c87a.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 CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui-copilot/react-suggestions",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 12 Aug 2024 04:14:18 GMT",
6
- "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240812-0407-f0d7d2a8.1",
7
- "version": "0.0.0-nightly-20240812-0407-f0d7d2a8.1",
5
+ "date": "Fri, 16 Aug 2024 04:14:16 GMT",
6
+ "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240816-0407-4f31c87a.1",
7
+ "version": "0.0.0-nightly-20240816-0407-4f31c87a.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,8 +16,8 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui-copilot/react-suggestions",
19
- "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240812-0407-f0d7d2a8.1",
20
- "commit": "3e848a1913b99b7e9b2a7f932fd9e98b0a2ba00c"
19
+ "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240816-0407-4f31c87a.1",
20
+ "commit": "52bc7571c6ef0aff09d0e248505c586bc311a06d"
21
21
  }
22
22
  ]
23
23
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # Change Log - @fluentui-copilot/react-suggestions
2
2
 
3
- This log was last generated on Mon, 12 Aug 2024 04:14:18 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 16 Aug 2024 04:14:16 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240812-0407-f0d7d2a8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240812-0407-f0d7d2a8.1)
7
+ ## [0.0.0-nightly-20240816-0407-4f31c87a.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240816-0407-4f31c87a.1)
8
8
 
9
- Mon, 12 Aug 2024 04:14:18 GMT
10
- [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.8.4..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240812-0407-f0d7d2a8.1)
9
+ Fri, 16 Aug 2024 04:14:16 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.8.4..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20240816-0407-4f31c87a.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-provider to v0.0.0-nightly-20240812-0407-f0d7d2a8.1 ([commit](https://github.com/microsoft/fluentai/commit/3e848a1913b99b7e9b2a7f932fd9e98b0a2ba00c) by beachball)
15
+ - Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240816-0407-4f31c87a.1 ([commit](https://github.com/microsoft/fluentai/commit/52bc7571c6ef0aff09d0e248505c586bc311a06d) by beachball)
16
16
 
17
17
  ## [0.8.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.8.4)
18
18
 
package/dist/index.d.ts CHANGED
@@ -6,6 +6,7 @@ import type { ButtonSlots } from '@fluentui/react-components';
6
6
  import type { ButtonState } from '@fluentui/react-components';
7
7
  import type { ComponentProps } from '@fluentui/react-components';
8
8
  import type { ComponentState } from '@fluentui/react-components';
9
+ import type { CopilotMode } from '@fluentui-copilot/react-provider';
9
10
  import type { ForwardRefComponent } from '@fluentui/react-components';
10
11
  import * as React_2 from 'react';
11
12
  import type { Slot } from '@fluentui/react-components';
@@ -17,7 +18,7 @@ import type { TooltipProps } from '@fluentui/react-components';
17
18
  */
18
19
  export declare const renderSuggestionList_unstable: (state: SuggestionListState) => JSX.Element;
19
20
 
20
- export declare const Suggestion: ForwardRefComponent<ButtonProps>;
21
+ export declare const Suggestion: ForwardRefComponent<SuggestionProps>;
21
22
 
22
23
  export declare const suggestionClassNames: SlotClassNames<ButtonSlots>;
23
24
 
@@ -50,6 +51,12 @@ export declare type SuggestionListSlots = {
50
51
  */
51
52
  export declare type SuggestionListState = ComponentState<SuggestionListSlots>;
52
53
 
54
+ declare type SuggestionProps = CopilotMode & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
55
+
56
+ declare type SuggestionSlots = ButtonSlots;
57
+
58
+ declare type SuggestionState = ComponentState<SuggestionSlots> & Required<Pick<SuggestionProps, 'mode'>> & Omit<ButtonState, keyof ButtonSlots>;
59
+
53
60
  export declare type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;
54
61
 
55
62
  /**
@@ -68,6 +75,6 @@ export declare const useSuggestionList_unstable: (props: SuggestionListProps, re
68
75
  */
69
76
  export declare const useSuggestionListStyles_unstable: (state: SuggestionListState) => SuggestionListState;
70
77
 
71
- export declare const useSuggestionStyles_unstable: (state: ButtonState) => ButtonState;
78
+ export declare const useSuggestionStyles_unstable: (state: SuggestionState) => SuggestionState;
72
79
 
73
80
  export { }
@@ -1,12 +1,13 @@
1
1
  import * as React from 'react';
2
2
  import { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';
3
- import { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';
3
+ import { renderButton_unstable, useButtonStyles_unstable } from '@fluentui/react-components';
4
4
  import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
5
+ import { useSuggestion_unstable } from './useSuggestion';
5
6
  // Suggestion component - TODO: add more docs
6
7
  export const Suggestion = /*#__PURE__*/React.forwardRef((props, ref) => {
7
8
  'use no memo';
8
9
 
9
- const state = useButton_unstable(props, ref);
10
+ const state = useSuggestion_unstable(props, ref);
10
11
  state.appearance = props.appearance || 'outline';
11
12
  useButtonStyles_unstable(state);
12
13
  useSuggestionStyles_unstable(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n 'use no memo';\n\n const state = useButton_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":["React","useSuggestionStyles_unstable","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useCustomStyleHook","Suggestion","forwardRef","props","ref","state","appearance","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,qBAAqB,EAAEC,wBAAwB,EAAEC,kBAAkB,QAAQ,6BAA6B;AACjH,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,6CAA6C;AAC7C,OAAO,MAAMC,2BAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF;IAEA,MAAMC,QAAQN,mBAAmBI,OAAOC;IACxCC,MAAMC,UAAU,GAAGH,MAAMG,UAAU,IAAI;IACvCR,yBAAyBO;IACzBT,6BAA6BS;IAC7BL,mBAAmB,uBAAuBK;IAE1C,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,WAAWM,WAAW,GAAG"}
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":["React","useSuggestionStyles_unstable","renderButton_unstable","useButtonStyles_unstable","useCustomStyleHook","useSuggestion_unstable","Suggestion","forwardRef","props","ref","state","appearance","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,qBAAqB,EAAEC,wBAAwB,QAAQ,6BAA6B;AAC7F,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF;IAEA,MAAMC,QAAQL,uBAAuBG,OAAOC;IAC5CC,MAAMC,UAAU,GAAGH,MAAMG,UAAU,IAAI;IACvCR,yBAAyBO;IACzBT,6BAA6BS;IAC7BN,mBAAmB,uBAAuBM;IAE1C,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,WAAWM,WAAW,GAAG"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Suggestion.types.js.map
@@ -0,0 +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 & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n Required<Pick<SuggestionProps, 'mode'>> &\n Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAOA,WAEuC"}
@@ -0,0 +1,11 @@
1
+ import { useButton_unstable } from '@fluentui/react-components';
2
+ import { useCopilotMode } from '@fluentui-copilot/react-provider';
3
+ export const useSuggestion_unstable = (props, ref) => {
4
+ const buttonState = useButton_unstable(props, ref);
5
+ const mode = useCopilotMode(props.mode);
6
+ return {
7
+ ...buttonState,
8
+ mode
9
+ };
10
+ };
11
+ //# sourceMappingURL=useSuggestion.js.map
@@ -0,0 +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 } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n props: SuggestionProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n) => {\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":";;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAMC,cAAcL,mBAAmBG,OAAOC;IAC9C,MAAME,OAAOL,eAAeE,MAAMG,IAAI;IACtC,OAAO;QAAE,GAAGD,WAAW;QAAEC;IAAK;AAChC,EAAE"}
@@ -47,13 +47,21 @@ const useSuggestionStylesStyles = __styles({
47
47
  H566xl: ["f1u9p12n", "fs1n9un"],
48
48
  a9g2gr: "fezean8",
49
49
  rgbxn1: "f1yr11xb"
50
+ },
51
+ canvas: {
52
+ Bahqtrf: "fk6fouc",
53
+ Be2twd7: "fkhj508",
54
+ Bhrd7zp: "figsok6",
55
+ Bg96gwp: "f1i3iumi",
56
+ z8tnut: "fp2oml8",
57
+ Byoj8tv: "f1tdddsa"
50
58
  }
51
59
  }, {
52
60
  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
53
61
  p: -1
54
62
  }], [".fcca7b8{padding:var(--spacingVerticalXS) var(--spacingVerticalS);}", {
55
63
  p: -1
56
- }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fpgzoln{text-align:start;}"],
64
+ }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fpgzoln{text-align:start;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}"],
57
65
  m: [["@media (forced-colors: none){.fxuoarf:hover{border-top-color:var(--colorBrandStroke2Hover);}}", {
58
66
  m: "(forced-colors: none)"
59
67
  }], ["@media (forced-colors: none){.f1qi0eim:hover{border-right-color:var(--colorBrandStroke2Hover);}.fiwk2rq:hover{border-left-color:var(--colorBrandStroke2Hover);}}", {
@@ -80,7 +88,7 @@ export const useSuggestionStyles_unstable = state => {
80
88
  'use no memo';
81
89
 
82
90
  const styles = useSuggestionStylesStyles();
83
- state.root.className = mergeClasses(suggestionClassNames.root, styles.root, !state.disabled && styles.enabled, state.root.className);
91
+ state.root.className = mergeClasses(suggestionClassNames.root, styles.root, state.mode === 'canvas' && styles.canvas, !state.disabled && styles.enabled, state.root.className);
84
92
  return state;
85
93
  };
86
94
  //# sourceMappingURL=useSuggestionStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames, ButtonSlots, ButtonState } from '@fluentui/react-components';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fai-Suggestion',\n icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStylesStyles = 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});\n\nexport const useSuggestionStyles_unstable = (state: ButtonState): ButtonState => {\n 'use no memo';\n\n const styles = useSuggestionStylesStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n !state.disabled && styles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStylesStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","useSuggestionStyles_unstable","state","styles","className","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAG5G,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,4BAA4BR,WAAW;IAC3CM,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;AACF;AAEA,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASvB;IACfsB,MAAMxB,IAAI,CAAC0B,SAAS,GAAG/B,aACrBI,qBAAqBC,IAAI,EACzByB,OAAOzB,IAAI,EACX,CAACwB,MAAMG,QAAQ,IAAIF,OAAOX,OAAO,EACjCU,MAAMxB,IAAI,CAAC0B,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\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 useSuggestionStylesStyles = 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 paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n 'use no memo';\n\n const styles = useSuggestionStylesStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n state.mode === 'canvas' && styles.canvas,\n !state.disabled && styles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","suggestionClassNames","root","icon","useSuggestionStylesStyles","caption1","border","colorBrandStroke2","borderRadius","borderRadiusXLarge","padding","spacingVerticalXS","spacingVerticalS","color","colorNeutralForeground2","textAlign","enabled","borderColor","colorBrandStroke2Hover","colorBrandForeground2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandStroke2Pressed","colorBrandForeground2Pressed","colorBrandBackground2Pressed","canvas","body1","paddingTop","spacingVerticalSNudge","paddingBottom","useSuggestionStyles_unstable","state","styles","className","mode","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAI5G,OAAO,MAAMC,uBAAoD;IAC/DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,4BAA4BR,WAAW;IAC3CM,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;QACzBC,YAAY5B,OAAO6B,qBAAqB;QACxCC,eAAe9B,OAAO6B,qBAAqB;IAC7C;AACF;AAEA,OAAO,MAAME,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGpC,aACrBI,qBAAqBC,IAAI,EACzB8B,OAAO9B,IAAI,EACX6B,MAAMG,IAAI,KAAK,YAAYF,OAAOP,MAAM,EACxC,CAACM,MAAMI,QAAQ,IAAIH,OAAOhB,OAAO,EACjCe,MAAM7B,IAAI,CAAC+B,SAAS;IAGtB,OAAOF;AACT,EAAE"}
@@ -13,9 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _useSuggestionStylesstyles = require("./useSuggestionStyles.styles");
14
14
  const _reactcomponents = require("@fluentui/react-components");
15
15
  const _reactprovider = require("@fluentui-copilot/react-provider");
16
+ const _useSuggestion = require("./useSuggestion");
16
17
  const Suggestion = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
17
18
  'use no memo';
18
- const state = (0, _reactcomponents.useButton_unstable)(props, ref);
19
+ const state = (0, _useSuggestion.useSuggestion_unstable)(props, ref);
19
20
  state.appearance = props.appearance || 'outline';
20
21
  (0, _reactcomponents.useButtonStyles_unstable)(state);
21
22
  (0, _useSuggestionStylesstyles.useSuggestionStyles_unstable)(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["Suggestion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSuggestionStyles_unstable } from './useSuggestionStyles.styles';\nimport type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Suggestion component - TODO: add more docs\nexport const Suggestion: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n 'use no memo';\n\n const state = useButton_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","appearance","ref","useButtonStyles_unstable","useSuggestionStyles_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;2CACsB;iCAEuC;+BACjD;AAG5B,MAAMA,aAAAA,WAAAA,GAAAA,OAA+CC,UAAMC,CAAU,CAACC,OAACA;;UAI5EC,QAAMC,IAAAA,mCAAmBA,EAAAA,OAAUC;UACnCC,UAAAA,GAAAA,MAAAA,UAAyBH,IAAAA;iDACzBI,EAAAA;+DACmB,EAAAJ;yCAEZK,EAAAA,uBAAsBL;IAC/B,OAAGK,IAAAA,sCAAA,EAAAL;AAEHJ"}
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","appearance","ref","useButtonStyles_unstable","useSuggestionStyles_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;2CACsB;iCAEmB;+BAC7B;+BACI;AAIhC,MAAMA,aAAAA,WAAAA,GAAAA,OAAmDC,UAAMC,CAAU,CAACC,OAACA;;UAIhFC,QAAMC,IAAAA,qCAAmBA,EAAUF,OAAIG;UACvCC,UAAAA,GAAAA,MAAAA,UAAyBH,IAAAA;iDACzBI,EAAAA;+DACmB,EAAAJ;yCAEZK,EAAAA,uBAAsBL;IAC/B,OAAGK,IAAAA,sCAAA,EAAAL;AAEHJ"}
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ //# sourceMappingURL=Suggestion.types.js.map
@@ -0,0 +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 & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;\n\nexport type SuggestionState = ComponentState<SuggestionSlots> &\n Required<Pick<SuggestionProps, 'mode'>> &\n Omit<ButtonState, keyof ButtonSlots>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useSuggestion_unstable", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useSuggestion_unstable;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const _reactprovider = require("@fluentui-copilot/react-provider");
13
+ const useSuggestion_unstable = (props, ref)=>{
14
+ const buttonState = (0, _reactcomponents.useButton_unstable)(props, ref);
15
+ const mode = (0, _reactprovider.useCopilotMode)(props.mode);
16
+ return {
17
+ ...buttonState,
18
+ mode
19
+ };
20
+ }; //# sourceMappingURL=useSuggestion.js.map
@@ -0,0 +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 } from './Suggestion.types';\n\nexport const useSuggestion_unstable = (\n props: SuggestionProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n) => {\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":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIaA;;;eAAAA;;;iCAJsB;+BACJ;AAGxB,MAAMA,yBAAyB,CACpCC,OACAC;UAEAC,cAAMA,IAAAA,mCAAcC,EAAAA,OAAmBH;UACvCI,OAAMA,IAAAA,6BAAOC,EAAAA,MAAeL,IAAMI;WAClC;sBAAYF;;;AACd"}
@@ -95,6 +95,14 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
95
95
  ],
96
96
  a9g2gr: "fezean8",
97
97
  rgbxn1: "f1yr11xb"
98
+ },
99
+ canvas: {
100
+ Bahqtrf: "fk6fouc",
101
+ Be2twd7: "fkhj508",
102
+ Bhrd7zp: "figsok6",
103
+ Bg96gwp: "f1i3iumi",
104
+ z8tnut: "fp2oml8",
105
+ Byoj8tv: "f1tdddsa"
98
106
  }
99
107
  }, {
100
108
  d: [
@@ -127,7 +135,11 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
127
135
  }
128
136
  ],
129
137
  ".fkfq4zb{color:var(--colorNeutralForeground2);}",
130
- ".fpgzoln{text-align:start;}"
138
+ ".fpgzoln{text-align:start;}",
139
+ ".fkhj508{font-size:var(--fontSizeBase300);}",
140
+ ".f1i3iumi{line-height:var(--lineHeightBase300);}",
141
+ ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
142
+ ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}"
131
143
  ],
132
144
  m: [
133
145
  [
@@ -195,6 +207,6 @@ const useSuggestionStylesStyles = (0, _reactcomponents.__styles)({
195
207
  const useSuggestionStyles_unstable = (state)=>{
196
208
  'use no memo';
197
209
  const styles = useSuggestionStylesStyles();
198
- state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, !state.disabled && styles.enabled, state.root.className);
210
+ state.root.className = (0, _reactcomponents.mergeClasses)(suggestionClassNames.root, styles.root, state.mode === 'canvas' && styles.canvas, !state.disabled && styles.enabled, state.root.className);
199
211
  return state;
200
212
  }; //# sourceMappingURL=useSuggestionStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames, ButtonSlots, ButtonState } from '@fluentui/react-components';\n\nexport const suggestionClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fai-Suggestion',\n icon: 'fai-Suggestion__icon',\n};\n\nconst useSuggestionStylesStyles = 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});\n\nexport const useSuggestionStyles_unstable = (state: ButtonState): ButtonState => {\n 'use no memo';\n\n const styles = useSuggestionStylesStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n !state.disabled && styles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["suggestionClassNames","root","icon","useSuggestionStylesStyles","makeStyles","typographyStyles","shorthands","borderRadius","padding","color","colorNeutralForeground2","textAlign","ibv6hh","enabled","tokens","colorBrandForeground2Hover","z8tnut","B0ocmuz","sj55zd","fsow6f","B9di4we","state","B1f0e9u"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,oBAAAA;eAAAA;;;;;;iCAH0D;AAGhE,MAAMA,uBAAoD;UAC/DC;UACAC;AACF;AAEA,MAAMC,4BAA4BC,IAAAA,yBAAAA,EAAAA;UAChCH;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;QACFC,SAAA;QAEAC,QAAO;QACLC,QAAA;;aAGMlB;QAONmB,SAAOC;QACPC,SAAA;YAAA;YAAA;SAAA"}
1
+ {"version":3,"sources":["useSuggestionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\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 useSuggestionStylesStyles = 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 paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n },\n});\n\nexport const useSuggestionStyles_unstable = (state: SuggestionState): SuggestionState => {\n 'use no memo';\n\n const styles = useSuggestionStylesStyles();\n state.root.className = mergeClasses(\n suggestionClassNames.root,\n styles.root,\n state.mode === 'canvas' && styles.canvas,\n !state.disabled && styles.enabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["suggestionClassNames","root","icon","useSuggestionStylesStyles","makeStyles","typographyStyles","shorthands","borderRadius","padding","color","colorNeutralForeground2","textAlign","ibv6hh","enabled","tokens","colorBrandForeground2Hover","z8tnut","canvas","paddingTop","B9di4we","B1f0e9u","useSuggestionStyles_unstable","bb0oo","B88lpqa","styles","state","Bejlia0","v5djml"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,oBAAAA;eAAAA;;;;;;iCAJ0D;AAIhE,MAAMA,uBAAoD;UAC/DC;UACAC;AACF;AAEA,MAAMC,4BAA4BC,IAAAA,yBAAAA,EAAAA;UAChCH;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;gBACHa;;aAEF;QACFC,SAAA;QAEAC,SAAaC;YAAAA;YAAAA;SAAAA;QACXC,OAAA;QAEAC,SAAMC;YAAAA;YAASrB;SAAAA;QACfsB,QAAMxB;QAQNyB,SAAOD;QACPE,QAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-suggestions",
3
- "version": "0.0.0-nightly-20240812-0407-f0d7d2a8.1",
3
+ "version": "0.0.0-nightly-20240816-0407-4f31c87a.1",
4
4
  "description": "A Fluent AI package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,11 +12,11 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "0.0.0-nightly-20240812-0407-f0d7d2a8.1",
15
+ "@fluentui-copilot/react-provider": "0.0.0-nightly-20240816-0407-4f31c87a.1",
16
16
  "@swc/helpers": "^0.5.1"
17
17
  },
18
18
  "peerDependencies": {
19
- "@fluentui/react-components": ">=9.54.8 <10.0.0",
19
+ "@fluentui/react-components": ">=9.54.10 <10.0.0",
20
20
  "@fluentui/react-context-selector": ">=9.1.65 <10.0.0",
21
21
  "@fluentui/react-icons": ">=2.0.247 <3.0.0",
22
22
  "@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",