@fluentui-copilot/react-suggestions 0.0.0-nightly-20250110-0407-410e54d9.1 → 0.0.0-nightly-20250115-0404-40580f77.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.
Files changed (16) hide show
  1. package/CHANGELOG.json +5 -5
  2. package/CHANGELOG.md +5 -5
  3. package/dist/index.d.ts +8 -2
  4. package/lib/components/SuggestionList/SuggestionList.types.js +1 -2
  5. package/lib/components/SuggestionList/SuggestionList.types.js.map +1 -1
  6. package/lib/components/SuggestionList/useSuggestionList.js +3 -1
  7. package/lib/components/SuggestionList/useSuggestionList.js.map +1 -1
  8. package/lib/components/SuggestionList/useSuggestionListStyles.styles.js +5 -2
  9. package/lib/components/SuggestionList/useSuggestionListStyles.styles.js.map +1 -1
  10. package/lib-commonjs/components/SuggestionList/SuggestionList.types.js +0 -2
  11. package/lib-commonjs/components/SuggestionList/SuggestionList.types.js.map +1 -1
  12. package/lib-commonjs/components/SuggestionList/useSuggestionList.js +2 -1
  13. package/lib-commonjs/components/SuggestionList/useSuggestionList.js.map +1 -1
  14. package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.js +5 -1
  15. package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.js.map +1 -1
  16. package/package.json +2 -2
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui-copilot/react-suggestions",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 10 Jan 2025 04:15:38 GMT",
6
- "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250110-0407-410e54d9.1",
7
- "version": "0.0.0-nightly-20250110-0407-410e54d9.1",
5
+ "date": "Wed, 15 Jan 2025 04:13:08 GMT",
6
+ "tag": "@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250115-0404-40580f77.1",
7
+ "version": "0.0.0-nightly-20250115-0404-40580f77.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-20250110-0407-410e54d9.1",
20
- "commit": "463da68d3da20455f5fcbbbaa0e28838800c8b73"
19
+ "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250115-0404-40580f77.1",
20
+ "commit": "6b509048d6c2a10f46ed0d7552ac13453a5223b5"
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 Fri, 10 Jan 2025 04:15:38 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 15 Jan 2025 04:13:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250110-0407-410e54d9.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250110-0407-410e54d9.1)
7
+ ## [0.0.0-nightly-20250115-0404-40580f77.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250115-0404-40580f77.1)
8
8
 
9
- Fri, 10 Jan 2025 04:15:38 GMT
10
- [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.9.4..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250110-0407-410e54d9.1)
9
+ Wed, 15 Jan 2025 04:13:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-suggestions_v0.9.4..@fluentui-copilot/react-suggestions_v0.0.0-nightly-20250115-0404-40580f77.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-20250110-0407-410e54d9.1 ([commit](https://github.com/microsoft/fluentai/commit/463da68d3da20455f5fcbbbaa0e28838800c8b73) by beachball)
15
+ - Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250115-0404-40580f77.1 ([commit](https://github.com/microsoft/fluentai/commit/6b509048d6c2a10f46ed0d7552ac13453a5223b5) by beachball)
16
16
 
17
17
  ## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-suggestions_v0.9.4)
18
18
 
package/dist/index.d.ts CHANGED
@@ -29,7 +29,13 @@ export declare const suggestionListClassNames: SlotClassNames<SuggestionListSlot
29
29
  /**
30
30
  * SuggestionList Props
31
31
  */
32
- export declare type SuggestionListProps = ComponentProps<SuggestionListSlots> & {};
32
+ export declare type SuggestionListProps = ComponentProps<SuggestionListSlots> & {
33
+ /**
34
+ * The horizontal alignment of the SuggestionsList.
35
+ * @default 'end'
36
+ */
37
+ horizontalAlignment?: 'start' | 'end';
38
+ };
33
39
 
34
40
  export declare type SuggestionListSlots = {
35
41
  root: Slot<'div'>;
@@ -49,7 +55,7 @@ export declare type SuggestionListSlots = {
49
55
  /**
50
56
  * State used in rendering SuggestionList
51
57
  */
52
- export declare type SuggestionListState = ComponentState<SuggestionListSlots>;
58
+ export declare type SuggestionListState = ComponentState<SuggestionListSlots> & Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;
53
59
 
54
60
  declare type SuggestionProps = CopilotMode & ComponentProps<SuggestionSlots> & Omit<ButtonProps, keyof ButtonSlots>;
55
61
 
package/lib/components/SuggestionList/SuggestionList.types.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /**
2
2
  * State used in rendering SuggestionList
3
- */export {}; // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from SuggestionListProps.
4
- // & Required<Pick<SuggestionListProps, 'propName'>>
3
+ */export {};
5
4
  //# sourceMappingURL=SuggestionList.types.js.map
package/lib/components/SuggestionList/SuggestionList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["SuggestionList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, TooltipProps, Button } from '@fluentui/react-components';\n\nexport type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;\n\nexport type SuggestionListSlots = {\n root: Slot<'div'>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reload?: Slot<typeof Button>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reloadTooltip?: Slot<TooltipComponent>;\n action?: Slot<'span'>;\n};\n\n/**\n * SuggestionList Props\n */\nexport type SuggestionListProps = ComponentProps<SuggestionListSlots> & {};\n\n/**\n * State used in rendering SuggestionList\n */\nexport type SuggestionListState = ComponentState<SuggestionListSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from SuggestionListProps.\n// & Required<Pick<SuggestionListProps, 'propName'>>\n"],"names":[],"rangeMappings":";;;","mappings":"AAwBA;;CAEC,GACD,WAAsE,CACtE,+HAA+H;CAC/H,oDAAoD"}
1
+ {"version":3,"sources":["SuggestionList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, TooltipProps, Button } from '@fluentui/react-components';\n\nexport type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;\n\nexport type SuggestionListSlots = {\n root: Slot<'div'>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reload?: Slot<typeof Button>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reloadTooltip?: Slot<TooltipComponent>;\n action?: Slot<'span'>;\n};\n\n/**\n * SuggestionList Props\n */\nexport type SuggestionListProps = ComponentProps<SuggestionListSlots> & {\n /**\n * The horizontal alignment of the SuggestionsList.\n * @default 'end'\n */\n horizontalAlignment?: 'start' | 'end';\n};\n\n/**\n * State used in rendering SuggestionList\n */\nexport type SuggestionListState = ComponentState<SuggestionListSlots> &\n Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AA8BA;;CAEC,GACD,WAC6D"}
package/lib/components/SuggestionList/useSuggestionList.js CHANGED
@@ -14,10 +14,12 @@ import { ArrowCounterclockwise16Regular, ArrowCounterclockwise16Filled, bundleIc
14
14
  export const useSuggestionList_unstable = (props, ref) => {
15
15
  const {
16
16
  action,
17
- reload
17
+ reload,
18
+ horizontalAlignment = 'end'
18
19
  } = props;
19
20
  const ReloadIcon = bundleIcon(ArrowCounterclockwise16Filled, ArrowCounterclockwise16Regular);
20
21
  return {
22
+ horizontalAlignment,
21
23
  components: {
22
24
  root: 'div',
23
25
  reload: Button,
package/lib/components/SuggestionList/useSuggestionList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button, Tooltip, getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport { ArrowCounterclockwise16Regular, ArrowCounterclockwise16Filled, bundleIcon } from '@fluentui/react-icons';\nimport type { SuggestionListProps, SuggestionListState, TooltipComponent } 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, reload } = props;\n const ReloadIcon = bundleIcon(ArrowCounterclockwise16Filled, ArrowCounterclockwise16Regular);\n return {\n components: {\n root: 'div',\n reload: Button,\n reloadTooltip: Tooltip as TooltipComponent,\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 reloadTooltip: slot.optional(props.reloadTooltip, {\n defaultProps: {\n relationship: 'label',\n content: 'Reload',\n withArrow: reload !== undefined,\n },\n renderByDefault: true,\n elementType: Tooltip as TooltipComponent,\n }),\n reload: slot.optional(reload, {\n defaultProps: {\n icon: <ReloadIcon />,\n size: 'small',\n appearance: 'transparent',\n },\n elementType: Button,\n }),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["React","Button","Tooltip","getIntrinsicElementProps","slot","useArrowNavigationGroup","ArrowCounterclockwise16Regular","ArrowCounterclockwise16Filled","bundleIcon","useSuggestionList_unstable","props","ref","action","reload","ReloadIcon","components","root","reloadTooltip","always","role","axis","circular","elementType","optional","defaultProps","relationship","content","withArrow","undefined","renderByDefault","icon","size","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,EAAEC,OAAO,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,uBAAuB,QAAQ,6BAA6B;AACtH,SAASC,8BAA8B,EAAEC,6BAA6B,EAAEC,UAAU,QAAQ,wBAAwB;AAGlH,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,WAAWD,+BAA+BD;IAC7D,OAAO;QACLS,YAAY;YACVC,MAAM;YACNH,QAAQZ;YACRgB,eAAef;YACfU,QAAQ;QACV;QACAI,MAAMZ,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BQ;YACAQ,MAAM;YACN,cAAc;YACd,GAAGT,KAAK;YACR,GAAGL,wBAAwB;gBAAEe,MAAM;gBAAQC,UAAU;YAAK,EAAE;QAC9D,IACA;YAAEC,aAAa;QAAM;QAEvBL,eAAeb,KAAKmB,QAAQ,CAACb,MAAMO,aAAa,EAAE;YAChDO,cAAc;gBACZC,cAAc;gBACdC,SAAS;gBACTC,WAAWd,WAAWe;YACxB;YACAC,iBAAiB;YACjBP,aAAapB;QACf;QACAW,QAAQT,KAAKmB,QAAQ,CAACV,QAAQ;YAC5BW,cAAc;gBACZM,oBAAM,oBAAChB;gBACPiB,MAAM;gBACNC,YAAY;YACd;YACAV,aAAarB;QACf;QACAW,QAAQR,KAAKmB,QAAQ,CAACX,QAAQ;YAAEU,aAAa;QAAO;IACtD;AACF,EAAE"}
1
+ {"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button, Tooltip, getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport { ArrowCounterclockwise16Regular, ArrowCounterclockwise16Filled, bundleIcon } from '@fluentui/react-icons';\nimport type { SuggestionListProps, SuggestionListState, TooltipComponent } 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, reload, horizontalAlignment = 'end' } = props;\n const ReloadIcon = bundleIcon(ArrowCounterclockwise16Filled, ArrowCounterclockwise16Regular);\n return {\n horizontalAlignment,\n components: {\n root: 'div',\n reload: Button,\n reloadTooltip: Tooltip as TooltipComponent,\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 reloadTooltip: slot.optional(props.reloadTooltip, {\n defaultProps: {\n relationship: 'label',\n content: 'Reload',\n withArrow: reload !== undefined,\n },\n renderByDefault: true,\n elementType: Tooltip as TooltipComponent,\n }),\n reload: slot.optional(reload, {\n defaultProps: {\n icon: <ReloadIcon />,\n size: 'small',\n appearance: 'transparent',\n },\n elementType: Button,\n }),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["React","Button","Tooltip","getIntrinsicElementProps","slot","useArrowNavigationGroup","ArrowCounterclockwise16Regular","ArrowCounterclockwise16Filled","bundleIcon","useSuggestionList_unstable","props","ref","action","reload","horizontalAlignment","ReloadIcon","components","root","reloadTooltip","always","role","axis","circular","elementType","optional","defaultProps","relationship","content","withArrow","undefined","renderByDefault","icon","size","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,EAAEC,OAAO,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,uBAAuB,QAAQ,6BAA6B;AACtH,SAASC,8BAA8B,EAAEC,6BAA6B,EAAEC,UAAU,QAAQ,wBAAwB;AAGlH,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,sBAAsB,KAAK,EAAE,GAAGJ;IACxD,MAAMK,aAAaP,WAAWD,+BAA+BD;IAC7D,OAAO;QACLQ;QACAE,YAAY;YACVC,MAAM;YACNJ,QAAQZ;YACRiB,eAAehB;YACfU,QAAQ;QACV;QACAK,MAAMb,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BQ;YACAS,MAAM;YACN,cAAc;YACd,GAAGV,KAAK;YACR,GAAGL,wBAAwB;gBAAEgB,MAAM;gBAAQC,UAAU;YAAK,EAAE;QAC9D,IACA;YAAEC,aAAa;QAAM;QAEvBL,eAAed,KAAKoB,QAAQ,CAACd,MAAMQ,aAAa,EAAE;YAChDO,cAAc;gBACZC,cAAc;gBACdC,SAAS;gBACTC,WAAWf,WAAWgB;YACxB;YACAC,iBAAiB;YACjBP,aAAarB;QACf;QACAW,QAAQT,KAAKoB,QAAQ,CAACX,QAAQ;YAC5BY,cAAc;gBACZM,oBAAM,oBAAChB;gBACPiB,MAAM;gBACNC,YAAY;YACd;YACAV,aAAatB;QACf;QACAW,QAAQR,KAAKoB,QAAQ,CAACZ,QAAQ;YAAEW,aAAa;QAAO;IACtD;AACF,EAAE"}
package/lib/components/SuggestionList/useSuggestionListStyles.styles.js CHANGED
@@ -23,6 +23,9 @@ const useStyles = __styles({
23
23
  B74szlk: ["f4bgq6r", "f83tq75"],
24
24
  Beptln2: "fr3gje9"
25
25
  },
26
+ horizontalAlignmentStart: {
27
+ Brf1p80: "fbhxue7"
28
+ },
26
29
  reload: {
27
30
  Bf4jedk: "f79feoa",
28
31
  B2u0y6b: "f1cs043"
@@ -38,7 +41,7 @@ const useStyles = __styles({
38
41
  p: -1
39
42
  }], [".f83tq75{margin:var(--spacingVerticalNone) var(--spacingHorizontalNone) var(--spacingVerticalS) var(--spacingHorizontalNone);}", {
40
43
  p: -1
41
- }], ".fr3gje9>:nth-last-of-type(2){max-width:calc(100% - var(--spacingHorizontalXXL) - var(--spacingVerticalS));}", ".f79feoa{min-width:var(--spacingHorizontalXXL);}", ".f1cs043{max-width:var(--spacingHorizontalXXL);}"]
44
+ }], ".fr3gje9>:nth-last-of-type(2){max-width:calc(100% - var(--spacingHorizontalXXL) - var(--spacingVerticalS));}", ".fbhxue7{justify-content:flex-start;}", ".f79feoa{min-width:var(--spacingHorizontalXXL);}", ".f1cs043{max-width:var(--spacingHorizontalXXL);}"]
42
45
  });
43
46
  /**
44
47
  * Apply styling to the SuggestionList slots based on the state
@@ -47,7 +50,7 @@ export const useSuggestionListStyles_unstable = state => {
47
50
  'use no memo';
48
51
 
49
52
  const styles = useStyles();
50
- state.root.className = mergeClasses(suggestionListClassNames.root, styles.root, state.root.className);
53
+ state.root.className = mergeClasses(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
51
54
  if (state.reload) {
52
55
  state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.className);
53
56
  }
package/lib/components/SuggestionList/useSuggestionListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 reload: 'fai-SuggestionList__reload',\n reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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 reload: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n if (state.reload) {\n state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","reload","reloadTooltip","action","useStyles","display","flexWrap","justifyContent","gap","spacingVerticalS","margin","spacingVerticalNone","spacingHorizontalNone","maxWidth","spacingHorizontalXXL","minWidth","useSuggestionListStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI9E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;IACRC,eAAe;IACfC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKV,OAAOW,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEZ,OAAOa,mBAAmB,CAAC;MAC7B,EAAEb,OAAOc,qBAAqB,CAAC;MAC/B,EAAEd,OAAOW,gBAAgB,CAAC;MAC1B,EAAEX,OAAOc,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEf,OAAOgB,oBAAoB,CAAC,GAAG,EAAEhB,OAAOW,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAR,QAAQ;QACNc,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;IAEAX,QAAQ;QACNY,UAAUjB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASd;IACfa,MAAMjB,IAAI,CAACmB,SAAS,GAAGtB,aAAaE,yBAAyBC,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IAEpG,IAAIF,MAAMhB,MAAM,EAAE;QAChBgB,MAAMhB,MAAM,CAACkB,SAAS,GAAGtB,aAAaE,yBAAyBE,MAAM,EAAEiB,OAAOjB,MAAM,EAAEgB,MAAMhB,MAAM,CAACkB,SAAS;IAC9G;IAEA,IAAIF,MAAMd,MAAM,EAAE;QAChBc,MAAMd,MAAM,CAACgB,SAAS,GAAGtB,aAAaE,yBAAyBI,MAAM,EAAEe,OAAOf,MAAM,EAAEc,MAAMd,MAAM,CAACgB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 reload: 'fai-SuggestionList__reload',\n reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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 reload: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\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.reload) {\n state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","reload","reloadTooltip","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,EAAEC,MAAM,QAAQ,6BAA6B;AAI9E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,QAAQ;IACRC,eAAe;IACfC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,SAAS;QACTC,UAAU;QACVC,gBAAgB;QAChBC,KAAKV,OAAOW,gBAAgB;QAC5BC,QAAQ,CAAC;MACP,EAAEZ,OAAOa,mBAAmB,CAAC;MAC7B,EAAEb,OAAOc,qBAAqB,CAAC;MAC/B,EAAEd,OAAOW,gBAAgB,CAAC;MAC1B,EAAEX,OAAOc,qBAAqB,CAAC;IACjC,CAAC;QACD,0BAA0B;YACxBC,UAAU,CAAC,YAAY,EAAEf,OAAOgB,oBAAoB,CAAC,GAAG,EAAEhB,OAAOW,gBAAgB,CAAC,CAAC,CAAC;QACtF;IACF;IACAM,0BAA0B;QACxBR,gBAAgB;IAClB;IACAN,QAAQ;QACNe,UAAUlB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;IAEAX,QAAQ;QACNa,UAAUlB,OAAOgB,oBAAoB;QACrCD,UAAUf,OAAOgB,oBAAoB;IACvC;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMG,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMlB,IAAI,CAACoB,SAAS,GAAGvB,aACrBE,yBAAyBC,IAAI,EAC7BmB,OAAOnB,IAAI,EACXkB,MAAMG,mBAAmB,KAAK,WAAWF,OAAOJ,wBAAwB,EACxEG,MAAMlB,IAAI,CAACoB,SAAS;IAGtB,IAAIF,MAAMjB,MAAM,EAAE;QAChBiB,MAAMjB,MAAM,CAACmB,SAAS,GAAGvB,aAAaE,yBAAyBE,MAAM,EAAEkB,OAAOlB,MAAM,EAAEiB,MAAMjB,MAAM,CAACmB,SAAS;IAC9G;IAEA,IAAIF,MAAMf,MAAM,EAAE;QAChBe,MAAMf,MAAM,CAACiB,SAAS,GAAGvB,aAAaE,yBAAyBI,MAAM,EAAEgB,OAAOhB,MAAM,EAAEe,MAAMf,MAAM,CAACiB,SAAS;IAC9G;IAEA,OAAOF;AACT,EAAE"}
package/lib-commonjs/components/SuggestionList/SuggestionList.types.js CHANGED
@@ -4,6 +4,4 @@
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from SuggestionListProps.
8
- // & Required<Pick<SuggestionListProps, 'propName'>>
9
7
  //# sourceMappingURL=SuggestionList.types.js.map
package/lib-commonjs/components/SuggestionList/SuggestionList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["SuggestionList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, TooltipProps, Button } from '@fluentui/react-components';\n\nexport type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;\n\nexport type SuggestionListSlots = {\n root: Slot<'div'>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reload?: Slot<typeof Button>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reloadTooltip?: Slot<TooltipComponent>;\n action?: Slot<'span'>;\n};\n\n/**\n * SuggestionList Props\n */\nexport type SuggestionListProps = ComponentProps<SuggestionListSlots> & {};\n\n/**\n * State used in rendering SuggestionList\n */\nexport type SuggestionListState = ComponentState<SuggestionListSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from SuggestionListProps.\n// & Required<Pick<SuggestionListProps, 'propName'>>\n"],"names":[],"rangeMappings":";;;;;;;","mappings":"AAwBA;;CAEC;;;;CACD,+HACA;qDACA"}
1
+ {"version":3,"sources":["SuggestionList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot, TooltipProps, Button } from '@fluentui/react-components';\n\nexport type TooltipComponent = React.FunctionComponent<Partial<TooltipProps>>;\n\nexport type SuggestionListSlots = {\n root: Slot<'div'>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reload?: Slot<typeof Button>;\n /**\n * @deprecated - Use `action` slot instead. Will be removed in the next major release (0.9.0)\n * Deprecated on 10/23/2023\n */\n reloadTooltip?: Slot<TooltipComponent>;\n action?: Slot<'span'>;\n};\n\n/**\n * SuggestionList Props\n */\nexport type SuggestionListProps = ComponentProps<SuggestionListSlots> & {\n /**\n * The horizontal alignment of the SuggestionsList.\n * @default 'end'\n */\n horizontalAlignment?: 'start' | 'end';\n};\n\n/**\n * State used in rendering SuggestionList\n */\nexport type SuggestionListState = ComponentState<SuggestionListSlots> &\n Required<Pick<SuggestionListProps, 'horizontalAlignment'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AA8BA;;CAEC"}
package/lib-commonjs/components/SuggestionList/useSuggestionList.js CHANGED
@@ -13,9 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _reactcomponents = require("@fluentui/react-components");
14
14
  const _reacticons = require("@fluentui/react-icons");
15
15
  const useSuggestionList_unstable = (props, ref)=>{
16
- const { action, reload } = props;
16
+ const { action, reload, horizontalAlignment = 'end' } = props;
17
17
  const ReloadIcon = (0, _reacticons.bundleIcon)(_reacticons.ArrowCounterclockwise16Filled, _reacticons.ArrowCounterclockwise16Regular);
18
18
  return {
19
+ horizontalAlignment,
19
20
  components: {
20
21
  root: 'div',
21
22
  reload: _reactcomponents.Button,
package/lib-commonjs/components/SuggestionList/useSuggestionList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button, Tooltip, getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport { ArrowCounterclockwise16Regular, ArrowCounterclockwise16Filled, bundleIcon } from '@fluentui/react-icons';\nimport type { SuggestionListProps, SuggestionListState, TooltipComponent } 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, reload } = props;\n const ReloadIcon = bundleIcon(ArrowCounterclockwise16Filled, ArrowCounterclockwise16Regular);\n return {\n components: {\n root: 'div',\n reload: Button,\n reloadTooltip: Tooltip as TooltipComponent,\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 reloadTooltip: slot.optional(props.reloadTooltip, {\n defaultProps: {\n relationship: 'label',\n content: 'Reload',\n withArrow: reload !== undefined,\n },\n renderByDefault: true,\n elementType: Tooltip as TooltipComponent,\n }),\n reload: slot.optional(reload, {\n defaultProps: {\n icon: <ReloadIcon />,\n size: 'small',\n appearance: 'transparent',\n },\n elementType: Button,\n }),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["action","props","components","Button","slot","always","ref","role","getIntrinsicElementProps","circular","useArrowNavigationGroup","elementType","reloadTooltip","relationship","withArrow","reload","undefined","renderByDefault","defaultProps","icon","appearance","size","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;;iEApBa;iCACkE;4BACC;AAkBxF,MAAQA,6BAAmBC,CAAAA,OAAAA;UAC3B,EACAD,MAAA,QACEE;uBAEUC,IAAAA,sBAAAA,EAAAA,yCAAAA,EAAAA,0CAAAA;;oBAERH;kBACF;oBACMI,uBAAKC;2BAEPC,wBAAAA;oBACAC;;mCAEA,CAAGN,MAAK,CAAAO,IAAAA,yCAAA,EAAA,OAAA;;;0BACmCC;oBAAiB;eAC9DC,IAAAA,wCACA,EAAA;sBAAEC;gBAAmBF,UAAA;cAEvBG;;yBAEIC;;uBAEAC,qBAAAA,CAAAA,QAAWC,CAAAA,MAAWC,aAAAA,EAAAA;0BACxB;8BACAC;yBACAN;gBACFG,WAAAC,WAAAC;;6BAEEE;yBACEC,wBAAAA;;qCAEAC,CAAAA,QAAAA,CAAAA,QAAY;0BACd;sBACAT,WAAaR,GAAAA,OAAAA,aAAAA,CAAAA,YAAAA;gBACfkB,MAAA;gBACArB,YAAQI;;yBAA4CD,uBAAA;QACtD;QACAH,QAAAI,qBAAA,CAAAkB,QAAA,CAAAtB,QAAA"}
1
+ {"version":3,"sources":["useSuggestionList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button, Tooltip, getIntrinsicElementProps, slot, useArrowNavigationGroup } from '@fluentui/react-components';\nimport { ArrowCounterclockwise16Regular, ArrowCounterclockwise16Filled, bundleIcon } from '@fluentui/react-icons';\nimport type { SuggestionListProps, SuggestionListState, TooltipComponent } 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, reload, horizontalAlignment = 'end' } = props;\n const ReloadIcon = bundleIcon(ArrowCounterclockwise16Filled, ArrowCounterclockwise16Regular);\n return {\n horizontalAlignment,\n components: {\n root: 'div',\n reload: Button,\n reloadTooltip: Tooltip as TooltipComponent,\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 reloadTooltip: slot.optional(props.reloadTooltip, {\n defaultProps: {\n relationship: 'label',\n content: 'Reload',\n withArrow: reload !== undefined,\n },\n renderByDefault: true,\n elementType: Tooltip as TooltipComponent,\n }),\n reload: slot.optional(reload, {\n defaultProps: {\n icon: <ReloadIcon />,\n size: 'small',\n appearance: 'transparent',\n },\n elementType: Button,\n }),\n action: slot.optional(action, { elementType: 'span' }),\n };\n};\n"],"names":["action","horizontalAlignment","ref","Button","root","Tooltip","useArrowNavigationGroup","props","axis","reloadTooltip","content","slot","optional","renderByDefault","elementType","reload","icon","size","React","createElement","ReloadIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;;iEApBa;iCACkE;4BACC;AAkBxF,MAAQA,6BAAgBC,CAAAA,OAAsBC;UAC9C,EACAF,MAAA,QACEC,wBACY,KAAA;uBAEFE,IAAAA,sBAAAA,EAAAA,yCAAAA,EAAAA,0CAAAA;;;oBAGV;kBACAC;oBAEIF,uBAAAA;2BACMG,wBAAA;oBACN;;mCAEA,CAAGC,MAAAA,CAAAA,IAAAA,yCAAwB,EAAA,OAAA;;;0BAAiC;eAC9DC,KACA;2DAAe,EAAA;gBAAMC,MAAA;gBAEvBC,UAAAA;;;yBAGIC;;uBAEFC,qBAAA,CAAAC,QAAA,CAAAL,MAAAE,aAAA,EAAA;0BACAI;8BACAC;gBACFJ,SAAA;gBACAK,WAAQJ,WAAcI;;6BAElBC;yBACAC,wBAAM;;gBAERN,qBAAA,CAAAC,QAAA,CAAAG,QAAA;0BACAD;gBACFE,MAAA,WAAA,GAAAE,OAAAC,aAAA,CAAAC,YAAA;gBACApB,MAAAA;4BAAgCc;;YAClCA,aAAAX,uBAAA;QACA"}
package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.js CHANGED
@@ -43,6 +43,9 @@ const suggestionListClassNames = {
43
43
  ],
44
44
  Beptln2: "fr3gje9"
45
45
  },
46
+ horizontalAlignmentStart: {
47
+ Brf1p80: "fbhxue7"
48
+ },
46
49
  reload: {
47
50
  Bf4jedk: "f79feoa",
48
51
  B2u0y6b: "f1cs043"
@@ -75,6 +78,7 @@ const suggestionListClassNames = {
75
78
  }
76
79
  ],
77
80
  ".fr3gje9>:nth-last-of-type(2){max-width:calc(100% - var(--spacingHorizontalXXL) - var(--spacingVerticalS));}",
81
+ ".fbhxue7{justify-content:flex-start;}",
78
82
  ".f79feoa{min-width:var(--spacingHorizontalXXL);}",
79
83
  ".f1cs043{max-width:var(--spacingHorizontalXXL);}"
80
84
  ]
@@ -82,7 +86,7 @@ const suggestionListClassNames = {
82
86
  const useSuggestionListStyles_unstable = (state)=>{
83
87
  'use no memo';
84
88
  const styles = useStyles();
85
- state.root.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.root, styles.root, state.root.className);
89
+ state.root.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.root, styles.root, state.horizontalAlignment === 'start' && styles.horizontalAlignmentStart, state.root.className);
86
90
  if (state.reload) {
87
91
  state.reload.className = (0, _reactcomponents.mergeClasses)(suggestionListClassNames.reload, styles.reload, state.reload.className);
88
92
  }
package/lib-commonjs/components/SuggestionList/useSuggestionListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 reload: 'fai-SuggestionList__reload',\n reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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 reload: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\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(suggestionListClassNames.root, styles.root, state.root.className);\n\n if (state.reload) {\n state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","reload","reloadTooltip","action","__styles","display","flexWrap","justifyContent","tokens","margin","t21cq0","maxWidth","minWidth","d","state","p","useStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAsDXC,gCAAA;eAAAA;;;iCA1DuC;AAIlC,MAAMD,2BAAgE;UAC3EE;YACAC;mBACAC;YACAC;AACF;AAEA;;CAEC,SAECH,YAAMI,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACKC;gBACLC;iBACID;gBACAA;gBACAA;gBACAA;QACJE,QAAC;iBACD;iBACEC;YAAAA;YAAW;SAAY;iBACzB;;YAEFV;iBACEW;iBACAD;;YAGFR;iBACES;iBACAD;;AAIJ,GAAA;IAEAE,GAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;YAEC;SACD;QAAA;YAAA;YAAiDC;gBAC/CC,GAAA,CAAA;;SAEA;QAAA;YAAA;YAAeC;gBACfF,GAAAA,CAAAA;;SAEA;QAAA;QAAkB;QAAA;KAAA;;AAMlB,MAAAf,mCAAAe,CAAAA"}
1
+ {"version":3,"sources":["useSuggestionListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 reload: 'fai-SuggestionList__reload',\n reloadTooltip: 'fai-SuggestionList__reloadTooltip',\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 reload: {\n minWidth: tokens.spacingHorizontalXXL,\n maxWidth: tokens.spacingHorizontalXXL,\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.reload) {\n state.reload.className = mergeClasses(suggestionListClassNames.reload, styles.reload, state.reload.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","reload","reloadTooltip","action","__styles","display","flexWrap","justifyContent","tokens","margin","t21cq0","maxWidth","horizontalAlignmentStart","minWidth","d","state","p","useStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IA8DXC,gCAAA;eAAAA;;;iCAlEuC;AAIlC,MAAMD,2BAAgE;UAC3EE;YACAC;mBACAC;YACAC;AACF;AAEA;;CAEC,SAECH,YAAMI,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACKC;gBACLC;iBACID;gBACAA;gBACAA;gBACAA;QACJE,QAAC;iBACD;iBACEC;YAAAA;YAAW;SAAY;iBACzB;;8BAEFC;iBACEL;;YAEFN;iBACEY;iBACAF;;YAGFR;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;;AAMlB,MAAAhB,mCAAAgB,CAAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-suggestions",
3
- "version": "0.0.0-nightly-20250110-0407-410e54d9.1",
3
+ "version": "0.0.0-nightly-20250115-0404-40580f77.1",
4
4
  "description": "A Fluent AI package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,7 +12,7 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "0.0.0-nightly-20250110-0407-410e54d9.1",
15
+ "@fluentui-copilot/react-provider": "0.0.0-nightly-20250115-0404-40580f77.1",
16
16
  "@swc/helpers": "^0.5.1"
17
17
  },
18
18
  "peerDependencies": {