@fluentui-copilot/react-reference 0.12.3 → 0.13.0

package/CHANGELOG.json

@@ -2,7 +2,48 @@
   "name": "@fluentui-copilot/react-reference",
   "entries": [
     {
-      "date": "Mon, 05 Aug 2024 19:36:07 GMT",
+      "date": "Wed, 21 Aug 2024 00:24:50 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.13.0",
+      "version": "0.13.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "6ce23774f5f2055977299510e8df454d86a1a313",
+            "comment": "chore: Removing shorthands' usage now that griffel supports them."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "907c63c4da894b41cad4601b30e0df6d9f269056",
+            "comment": "chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components)."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "0a6327b6b174fc99abed7fa70ed0542e698bcf40",
+            "comment": "chore: bump react-components version to 9.54.10."
+          },
+          {
+            "author": "humbertomakotomorimoto@gmail.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "b2c628b1cb2f6bfb26313bbca4a35c2b586816b0",
+            "comment": "feat: Adding minVisibleReferences prop to ReferenceList that controls how many references to always show before overflowing."
+          }
+        ],
+        "none": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-reference",
+            "commit": "85fc7f2580c8bad8ea04e2c73960204b4ca1c116",
+            "comment": "chore: update api.md file."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Aug 2024 19:36:41 GMT",
       "tag": "@fluentui-copilot/react-reference_v0.12.3",
       "version": "0.12.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui-copilot/react-reference
 
-This log was last generated on Mon, 05 Aug 2024 19:36:07 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Aug 2024 00:24:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.13.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.13.0)
+
+Wed, 21 Aug 2024 00:24:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.3..@fluentui-copilot/react-reference_v0.13.0)
+
+### Patches
+
+- chore: Removing shorthands' usage now that griffel supports them. ([PR #1994](https://github.com/microsoft/fluentai/pull/1994) by Humberto.Morimoto@microsoft.com)
+- chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components). ([PR #1993](https://github.com/microsoft/fluentai/pull/1993) by Humberto.Morimoto@microsoft.com)
+- chore: bump react-components version to 9.54.10. ([PR #2018](https://github.com/microsoft/fluentai/pull/2018) by ololubek@microsoft.com)
+- feat: Adding minVisibleReferences prop to ReferenceList that controls how many references to always show before overflowing. ([PR #2004](https://github.com/microsoft/fluentai/pull/2004) by humbertomakotomorimoto@gmail.com)
+
 ## [0.12.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.12.3)
 
-Mon, 05 Aug 2024 19:36:07 GMT 
+Mon, 05 Aug 2024 19:36:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.2..@fluentui-copilot/react-reference_v0.12.3)
 
 ### Patches

package/dist/index.d.ts

@@ -5,15 +5,17 @@ import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { CopilotMode } from '@fluentui-copilot/react-provider';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
-import type { PopoverProps } from '@fluentui/react-components';
-import type { PopoverSurfaceProps } from '@fluentui/react-components';
-import type { PopoverSurfaceSlots } from '@fluentui/react-components';
-import type { PositioningShorthand } from '@fluentui/react-components';
+import type { PreviewHeaderProps } from '@fluentui-copilot/react-preview';
+import type { PreviewMetadataProps } from '@fluentui-copilot/react-preview';
+import type { PreviewProps } from '@fluentui-copilot/react-preview';
+import type { PreviewSurfaceProps } from '@fluentui-copilot/react-preview';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';
+import type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
 
@@ -50,10 +52,6 @@ export declare type CitationState = ComponentState<CitationSlots> & Required<Pic
     isPopoverLocked: boolean;
 };
 
-declare type CopilotMode = {
-    mode?: 'canvas' | 'sidecar';
-};
-
 /**
  * Function to generate a Citation - Reference pair with correctly wired props.
  * Both the Citation and the Reference act as trigger components to Previews that are also correctly wired by the function.
@@ -102,70 +100,6 @@ export declare type PackagedReferenceV2 = React_2.FC<ReferenceV2Props>;
 
 declare type PartialReferenceProps = 'citationHref' | 'index' | 'referenceId';
 
-/**
- * PreviewHeader Props
- */
-declare type PreviewHeaderProps = ComponentProps<Partial<PreviewHeaderSlots>>;
-
-declare type PreviewHeaderSlots = {
-    root: NonNullable<Slot<'div'>>;
-    /**
-     * Actions slot.
-     */
-    actions: Slot<'div'>;
-    /**
-     * Citation slot. Displays a `Citation`. Set to `null` to hide the citation.
-     */
-    citation: Slot<'span'>;
-    /**
-     * Label slot. Primary description of the preview.
-     */
-    label: NonNullable<Slot<'span'>>;
-    /**
-     * Media slot. Used to display Avatars, Icons, etc.
-     */
-    media: Slot<'div'>;
-};
-
-/**
- * PreviewMetadata Props
- */
-declare type PreviewMetadataProps = ComponentProps<Partial<PreviewMetadataSlots>>;
-
-declare type PreviewMetadataSlots = {
-    root: Slot<'div'>;
-    /**
-     * Icon slot in the metadata displayed after all text.
-     */
-    icon: Slot<'span'>;
-    /**
-     * First text displayed in the metadata.
-     */
-    primaryText: Slot<'span'>;
-    /**
-     * Second text displayed in the metadata.
-     */
-    secondaryText: Slot<'span'>;
-    /**
-     * Third text displayed in the metadata.
-     */
-    tertiaryText: Slot<'span'>;
-};
-
-/**
- * Preview Props
- */
-declare type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;
-
-declare const PreviewSurface: ForwardRefComponent<PreviewSurfaceProps>;
-
-/**
- * PreviewSurface Props
- */
-declare type PreviewSurfaceProps = ComponentProps<PreviewSurfaceSlots> & PopoverSurfaceProps & {};
-
-declare type PreviewSurfaceSlots = PopoverSurfaceSlots & {};
-
 /** deprecated Use ReferenceV2 component, hooks and types instead. */
 export declare const Reference: ForwardRefComponent<ReferenceProps>;
 
@@ -270,9 +204,17 @@ export declare type ReferenceListV2Props = ComponentProps<ReferenceListV2Slots>
      * The maximum number of references to display before the overflow button is shown even if there is
      * enough space available to show more.
      * If not set, the overflow functionality will be disabled.
+     * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.
      * @default undefined
      */
     maxVisibleReferences?: number;
+    /**
+     * The minimum number of references to always show before overflowing.
+     * If this value exceeds the number of references, the overflow functionality will be disabled.
+     * If this value is greater than `maxVisibleReferences`, then this will take precedence.
+     * @default undefined
+     */
+    minVisibleReferences?: number;
 };
 
 export declare type ReferenceListV2Slots = {
@@ -284,7 +226,7 @@ export declare type ReferenceListV2Slots = {
     showLessButton?: Slot<'span'>;
 };
 
-export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> & Pick<ReferenceListV2Props, 'maxVisibleReferences'> & {
+export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> & Pick<ReferenceListV2Props, 'maxVisibleReferences' | 'minVisibleReferences'> & {
     areReferencesExpanded: boolean;
     overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;
     referenceListRef: React.RefObject<HTMLDivElement>;
@@ -461,40 +403,6 @@ export declare const renderReferenceOverflowButton_unstable: (state: ReferenceOv
 
 export declare const renderReferenceV2_unstable: (state: ReferenceV2State) => JSX.Element;
 
-/**
- * SensitivityLabel Props
- */
-declare type SensitivityLabelProps = ComponentProps<SensitivityLabelSlots> & {
-    description: string;
-};
-
-declare type SensitivityLabelSlots = {
-    root: Slot<'span'>;
-    label?: Slot<'span'>;
-    tooltip?: Slot<typeof SensitivityTooltip>;
-};
-
-declare const SensitivityTooltip: ForwardRefComponent<SensitivityTooltipProps>;
-
-/**
- * SensitivityTooltip Props
- */
-declare type SensitivityTooltipProps = ComponentProps<SensitivityTooltipSlots> & {
-    positioning?: PositioningShorthand;
-    /**
-     * Prop to display a backplate behind the tooltip
-     */
-    withBackplate?: boolean;
-};
-
-declare type SensitivityTooltipSlots = {
-    root: Slot<'span'>;
-    heading?: Slot<'span'>;
-    message?: Slot<'span'>;
-    previewSurface?: Slot<typeof PreviewSurface>;
-    trigger?: Slot<'span'>;
-};
-
 /**
  * Create the state required to render Citation.
  *

package/lib/components/Reference/useReferenceStyles.styles.js

@@ -28,10 +28,11 @@ const useStyles = __styles({
   canvas: {},
   sidecar: {
     wkccdc: "f2e0fxj",
-    z8tnut: "f1ywm7hm",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "f14wxoun",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1v65gcw"
   },
   inline: {},
   popover: {
@@ -40,25 +41,28 @@ const useStyles = __styles({
     Bn0qgzm: "f136mcbi",
     ibv6hh: ["ffbvwxd", "f1orqat1"],
     a9b677: "f1uniyfe",
-    z8tnut: "f1nbblvp",
-    z189sj: ["fifp7yv", "f1asdtw4"],
-    Byoj8tv: "f1ov4xf1",
-    uwmqm3: ["f1asdtw4", "fifp7yv"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg"
   },
   closed: {
     Belr9w4: "f1sff6ri"
   },
   citation: {
-    Ijaq50: "fwllpr6",
-    Br312pm: "fx0qcsv",
-    nk6f5a: "f1ldxewp",
-    Bw0ie65: "ftmncab"
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f4z8xh6"
   },
   media: {
-    Ijaq50: "f11uok23",
-    Br312pm: "f1qdfnnj",
-    nk6f5a: "f1s27gz",
-    Bw0ie65: "f86d0yl",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fujjg13",
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     Brf1p80: "f4d9j23"
@@ -70,10 +74,11 @@ const useStyles = __styles({
     vf399t: "f1ojxjpn"
   },
   actions: {
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
     Ijaq50: "f16hsg94",
-    Br312pm: "f35n22n",
-    nk6f5a: "fh3uimt",
-    Bw0ie65: "fnh4yke",
+    Bq1tomu: "fceb517",
     Bdqf98w: "f1a7i8kp",
     mc9l5x: "f22iagw"
   },
@@ -81,18 +86,20 @@ const useStyles = __styles({
     D5xksd: "fzmnlw3"
   },
   sensitivity: {
-    Ijaq50: "fpymh5q",
-    Br312pm: "fjieyc3",
-    nk6f5a: "f18utan",
-    Bw0ie65: "f15c84mf",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fw0kx7a",
     Bdqf98w: "fsxvdwy"
   },
   metadata: {
     B6of3ja: "fww94b8",
-    Ijaq50: "f1md2vp3",
-    Br312pm: "f1y0qc5c",
-    nk6f5a: "f179ty8e",
-    Bw0ie65: "f83o9dc",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f14r5tnm",
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "figsok6",
@@ -120,10 +127,11 @@ const useStyles = __styles({
   },
   content: {
     B6of3ja: "fww94b8",
-    Ijaq50: "fxwmwwq",
-    Br312pm: "f1e0gndy",
-    nk6f5a: "f4zz6gv",
-    Bw0ie65: "f7idnck",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fqi5tbq",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
     Belr9w4: "f1wn3y0l",
@@ -134,14 +142,31 @@ const useStyles = __styles({
     mc9l5x: "fjseox"
   }
 }, {
-  d: [".f2e0fxj{grid-template-rows:24px auto auto auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1pit55b{border-top-width:0px;}", ".f1orqat1{border-right-width:0px;}", ".ffbvwxd{border-left-width:0px;}", ".f136mcbi{border-bottom-width:0px;}", ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".f1sff6ri{row-gap:0;}", ".fwllpr6{grid-row-start:citation;}", ".fx0qcsv{grid-column-start:citation;}", ".f1ldxewp{grid-row-end:citation;}", ".ftmncab{grid-column-end:citation;}", ".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe9dio4>.fai-Reference__mediaChild{width:16px;}", ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}", ".f16hsg94{grid-row-start:1;}", ".f35n22n{grid-column-start:actions;}", ".fh3uimt{grid-row-end:actions;}", ".fnh4yke{grid-column-end:actions;}", ".f1a7i8kp{justify-self:end;}", ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}", ".fpymh5q{grid-row-start:sensitivityLabel;}", ".fjieyc3{grid-column-start:sensitivityLabel;}", ".f18utan{grid-row-end:sensitivityLabel;}", ".f15c84mf{grid-column-end:sensitivityLabel;}", ".fsxvdwy{justify-self:start;}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1md2vp3{grid-row-start:metadata;}", ".f1y0qc5c{grid-column-start:metadata;}", ".f179ty8e{grid-row-end:metadata;}", ".f83o9dc{grid-column-end:metadata;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f10pi13n{position:relative;}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1j7ml58::before{position:absolute;}", ".f1s1fjay::before{left:calc(var(--spacingHorizontalS) / -2);}", ".f15a459s::before{right:calc(var(--spacingHorizontalS) / -2);}", ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);}", ".f8pn7wt::before{height:var(--fontSizeBase100);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1jpmc5p::before{border-left-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fmrv4ls{vertical-align:middle;}", ".fxwmwwq{grid-row-start:content;}", ".f1e0gndy{grid-column-start:content;}", ".f4zz6gv{grid-row-end:content;}", ".f7idnck{grid-column-end:content;}", ".f1vx9l62{flex-direction:column;}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f9ijwd5{word-break:break-word;}", ".fjseox{display:none;}"]
+  d: [".f2e0fxj{grid-template-rows:24px auto auto auto;}", [".f1v65gcw{padding:var(--spacingVerticalXS) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1pit55b{border-top-width:0px;}", ".f1orqat1{border-right-width:0px;}", ".ffbvwxd{border-left-width:0px;}", ".f136mcbi{border-bottom-width:0px;}", ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}", [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], ".f1sff6ri{row-gap:0;}", [".f4z8xh6{grid-area:citation;}", {
+    p: -1
+  }], [".fujjg13{grid-area:media;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe9dio4>.fai-Reference__mediaChild{width:16px;}", ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}", [".fceb517{grid-area:actions;}", {
+    p: -1
+  }], ".f1a7i8kp{justify-self:end;}", ".f16hsg94{grid-row-start:1;}", ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}", [".fw0kx7a{grid-area:sensitivityLabel;}", {
+    p: -1
+  }], ".fsxvdwy{justify-self:start;}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", [".f14r5tnm{grid-area:metadata;}", {
+    p: -1
+  }], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f10pi13n{position:relative;}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1j7ml58::before{position:absolute;}", ".f1s1fjay::before{left:calc(var(--spacingHorizontalS) / -2);}", ".f15a459s::before{right:calc(var(--spacingHorizontalS) / -2);}", ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);}", ".f8pn7wt::before{height:var(--fontSizeBase100);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1jpmc5p::before{border-left-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fmrv4ls{vertical-align:middle;}", [".fqi5tbq{grid-area:content;}", {
+    p: -1
+  }], ".f1vx9l62{flex-direction:column;}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f9ijwd5{word-break:break-word;}", ".fjseox{display:none;}"]
 });
 const useLabelStyles = __styles({
   root: {
-    Ijaq50: "faq1aip",
-    Br312pm: "f1m489tg",
-    nk6f5a: "fv2srd9",
-    Bw0ie65: "f1tz6hh8",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f1m7hl8e",
     qb2dma: "f9h729m",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
@@ -164,7 +189,9 @@ const useLabelStyles = __styles({
     Bh9c35c: "fvvof4m"
   }
 }, {
-  d: [".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f9h729m{align-self:start;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f9ijwd5{word-break:break-word;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1rvi9lw{display:-webkit-box;}", ".f1sil6mw{overflow-y:hidden;}", ".f1vd4pcd{padding-top:calc((24px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}", ".f1u9e4k4{padding-top:calc((16px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}", ".f6dzj5z{max-width:100%;}", ".fvvof4m{-webkit-line-clamp:1;}"]
+  d: [[".f1m7hl8e{grid-area:title;}", {
+    p: -1
+  }], ".f9h729m{align-self:start;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f9ijwd5{word-break:break-word;}", ".fpfc2by{-webkit-box-orient:vertical;}", ".f1lvsx7g{-webkit-line-clamp:2;}", ".f1rvi9lw{display:-webkit-box;}", ".f1sil6mw{overflow-y:hidden;}", ".f1vd4pcd{padding-top:calc((24px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}", ".f1u9e4k4{padding-top:calc((16px / 2 ) - (var(--lineHeightBase200) - var(--fontSizeBase200)));}", ".f6dzj5z{max-width:100%;}", ".fvvof4m{-webkit-line-clamp:1;}"]
 });
 /**
  * Apply styling to the Reference slots based on the state

package/lib/components/Reference/useReferenceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    ...shorthands.padding('0px'),\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    ...shorthands.gridArea('citation'),\n  },\n  media: {\n    ...shorthands.gridArea('media'),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    ...shorthands.gridArea('actions'),\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    ...shorthands.gridArea('sensitivityLabel'),\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    ...shorthands.gridArea('metadata'),\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    ...shorthands.gridArea('content'),\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    ...shorthands.gridArea('title'),\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    padding: '0px',\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    gridArea: 'citation',\n  },\n  media: {\n    gridArea: 'media',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    gridArea: 'actions',\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    gridArea: 'sensitivityLabel',\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    gridArea: 'metadata',\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    gridArea: 'title',\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js

@@ -1,9 +1,9 @@
-import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
 export const referenceGroupToggleClassNames = {
   root: 'fai-ReferenceGroupToggle',
   icon: 'fai-ReferenceGroupToggle__icon'
 };
-const useButtonBaseClassName = __resetStyles("rctdkan", "rfdmif3", [".rctdkan{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rfdmif3{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
+const useButtonBaseClassName = __resetStyles("rqbbkgr", null, [".rqbbkgr{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding:var(--spacingVerticalXS) 0;}"]);
 const useIconBaseClassName = __resetStyles("r18biwo", null, [".r18biwo{display:inline-flex;align-items:center;}"]);
 const useStyles = __styles({
   canvas: {

package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBT,gBAAgB;IAC7CU,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,iBAAiB,EAAE,EAAE;AACpD;AAEA,MAAMC,uBAAuBxB,gBAAgB;IAC3CU,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYxB,WAAW;IAC3ByB,QAAQ;QAAE,GAAGrB,iBAAiBS,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGtB,iBAAiBuB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGjC,aACrBI,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGjC,aAAaI,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useStyles","canvas","sidecar","caption2","useReferenceGroupToggleStyles_unstable","state","mode","styles","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACPC,SAAS,CAAC,EAAElB,OAAOmB,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA,MAAMY,YAAYvB,WAAW;IAC3BwB,QAAQ;QAAE,GAAGrB,iBAAiBS,QAAQ;IAAC;IACvCa,SAAS;QACP,GAAGtB,iBAAiBuB,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,SAASP;IAEf,MAAMQ,oBAAoBT;IAC1B,MAAMU,sBAAsBzB;IAC5BqB,MAAMvB,IAAI,CAAC4B,SAAS,GAAGhC,aACrBG,+BAA+BC,IAAI,EACnC2B,qBACAF,MAAM,CAACD,KAAK,EACZD,MAAMvB,IAAI,CAAC4B,SAAS;IAGtB,IAAIL,MAAMtB,IAAI,EAAE;QACdsB,MAAMtB,IAAI,CAAC2B,SAAS,GAAGhC,aAAaG,+BAA+BE,IAAI,EAAEyB,mBAAmBH,MAAMtB,IAAI,CAAC2B,SAAS;IAClH;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  /** The root of the component that contains the list of references. */\n  root: NonNullable<Slot<'div'>>;\n\n  /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n  showMoreButton?: Slot<'span'>;\n\n  /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    referenceListRef: React.RefObject<HTMLDivElement>;\n    shouldUseOverflow: boolean;\n    totalReferencesCount: number;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAiCA,WAEE"}
+{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  /** The root of the component that contains the list of references. */\n  root: NonNullable<Slot<'div'>>;\n\n  /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n  showMoreButton?: Slot<'span'>;\n\n  /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n\n  /**\n   * The minimum number of references to always show before overflowing.\n   * If this value exceeds the number of references, the overflow functionality will be disabled.\n   * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n   * @default undefined\n   */\n  minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Pick<ReferenceListProps, 'maxVisibleReferences' | 'minVisibleReferences'> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    referenceListRef: React.RefObject<HTMLDivElement>;\n    shouldUseOverflow: boolean;\n    totalReferencesCount: number;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA0CA,WAEE"}

package/lib/components/reference-v2/ReferenceList/renderReferenceList.js

@@ -6,9 +6,13 @@ import { ReferenceListContextProvider } from '../../../contexts/reference-v2/ref
  */
 export const renderReferenceList_unstable = (state, contextValues) => {
   assertSlots(state);
+  const {
+    minVisibleReferences
+  } = state;
   return /*#__PURE__*/_jsx(ReferenceListContextProvider, {
     value: contextValues.referenceList,
     children: /*#__PURE__*/_jsx(Overflow, {
+      minimumVisible: minVisibleReferences,
       children: /*#__PURE__*/_jsxs(state.root, {
         children: [state.root.children, state.showMoreButton && /*#__PURE__*/_jsx(state.showMoreButton, {}), state.showLessButton && /*#__PURE__*/_jsx(state.showLessButton, {})]
       })

package/lib/components/reference-v2/ReferenceList/renderReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  return (\n    <ReferenceListContextProvider value={contextValues.referenceList}>\n      <Overflow>\n        <state.root>\n          {state.root.children}\n          {state.showMoreButton && <state.showMoreButton />}\n          {state.showLessButton && <state.showLessButton />}\n        </state.root>\n      </Overflow>\n    </ReferenceListContextProvider>\n  );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","value","referenceList","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,qBACE,KAACF;QAA6BI,OAAOD,cAAcE,aAAa;kBAC9D,cAAA,KAACP;sBACC,cAAA,MAACI,MAAMI,IAAI;;oBACRJ,MAAMI,IAAI,CAACC,QAAQ;oBACnBL,MAAMM,cAAc,kBAAI,KAACN,MAAMM,cAAc;oBAC7CN,MAAMO,cAAc,kBAAI,KAACP,MAAMO,cAAc;;;;;AAKxD,EAAE"}
+{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  const { minVisibleReferences } = state;\n\n  return (\n    <ReferenceListContextProvider value={contextValues.referenceList}>\n      <Overflow minimumVisible={minVisibleReferences}>\n        <state.root>\n          {state.root.children}\n          {state.showMoreButton && <state.showMoreButton />}\n          {state.showLessButton && <state.showLessButton />}\n        </state.root>\n      </Overflow>\n    </ReferenceListContextProvider>\n  );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","minVisibleReferences","value","referenceList","minimumVisible","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,MAAM,EAAEE,oBAAoB,EAAE,GAAGF;IAEjC,qBACE,KAACF;QAA6BK,OAAOF,cAAcG,aAAa;kBAC9D,cAAA,KAACR;YAASS,gBAAgBH;sBACxB,cAAA,MAACF,MAAMM,IAAI;;oBACRN,MAAMM,IAAI,CAACC,QAAQ;oBACnBP,MAAMQ,cAAc,kBAAI,KAACR,MAAMQ,cAAc;oBAC7CR,MAAMS,cAAc,kBAAI,KAACT,MAAMS,cAAc;;;;;AAKxD,EAAE"}

package/lib/components/reference-v2/ReferenceList/useReferenceList.js

@@ -15,6 +15,7 @@ export const useReferenceList_unstable = (props, ref) => {
   const {
     children,
     maxVisibleReferences,
+    minVisibleReferences,
     showLessButton,
     showMoreButton,
     ...rest
@@ -27,6 +28,7 @@ export const useReferenceList_unstable = (props, ref) => {
     additionalCondition: !areReferencesExpanded,
     children,
     maxVisibleItems: maxVisibleReferences,
+    minVisibleItems: minVisibleReferences,
     overflowClassName: styles.overflow
   });
   // We keep track of whether we are interacting with the overflow button via keyboard or not.
@@ -42,11 +44,12 @@ export const useReferenceList_unstable = (props, ref) => {
   const onShowLessButtonClick = React.useCallback(() => {
     setAreReferencesExpanded(false);
   }, []);
-  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
+  const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
   const state = {
     areReferencesExpanded,
     overflowButtonTriggeredViaKeyboard,
     maxVisibleReferences,
+    minVisibleReferences,
     referenceListRef,
     shouldUseOverflow,
     totalReferencesCount,

package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGN;IAEpF,MAAM,CAACO,uBAAuBC,yBAAyB,GAAGjB,MAAMkB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBnB,MAAMoB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBrB,MAAMsB,QAAQ,CAACC,KAAK,CAACZ;IAClD,MAAMa,SAASjB;IACf,MAAMkB,mBAAmBnB,2BAA2B;QAClDoB,qBAAqB,CAACV;QACtBL;QACAgB,iBAAiBf;QACjBgB,mBAAmBJ,OAAOK,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqC9B,MAAMoB,MAAM,CAAC;IAExD,MAAMW,kBAAkB3B,wBAAwB;QAC9C4B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBnC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMoB,wBAAwBrC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,oBAAoB1B,yBAAyB2B,aAAa,CAACvB;IAEjE,MAAMwB,QAA4B;QAChCxB;QACAc;QACAlB;QACAO;QACAmB;QACAjB;QAEAoB,YAAY;YACVC,MAAM;YACN5B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA6B,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKS;YACxB,GAAGY,eAAe;YAClB,GAAGhB,IAAI;YACPJ,UAAUc;QACZ,IACA;YAAEmB,aAAa;QAAM;QAEvB9B,gBAAgBwB,oBAAoBnC,KAAK0C,QAAQ,CAAC/B,gBAAgB;YAAE8B,aAAa;QAAO,KAAKL;QAC7F1B,gBAAgBG,wBAAwBb,KAAK0C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM1B,cAAc,EAAE;QACxB0B,MAAM1B,cAAc,CAACgC,OAAO,GAAG5C,eAAeiC,uBAAuBK,MAAM1B,cAAc,CAACgC,OAAO;IACnG;IAEA,IAAIN,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG5C,eAAemC,uBAAuBG,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","minVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","minVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGP;IAE1G,MAAM,CAACQ,uBAAuBC,yBAAyB,GAAGlB,MAAMmB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBpB,MAAMqB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBtB,MAAMuB,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,SAASlB;IACf,MAAMmB,mBAAmBpB,2BAA2B;QAClDqB,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqChC,MAAMqB,MAAM,CAAC;IAExD,MAAMY,kBAAkB7B,wBAAwB;QAC9C8B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBrC,MAAMsC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,wBAAwBvC,MAAMsC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMsB,oBACJ,AAAC3B,CAAAA,yBAAyB4B,aAAa5B,uBAAuBS,oBAAmB,KACjFV,yBAAyB6B,aACzB,CAACxB;IAEH,MAAMyB,QAA4B;QAChCzB;QACAe;QACApB;QACAC;QACAO;QACAoB;QACAlB;QAEAqB,YAAY;YACVC,MAAM;YACN7B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA8B,MAAMzC,KAAK0C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKU;YACxB,GAAGa,eAAe;YAClB,GAAGjB,IAAI;YACPL,UAAUe;QACZ,IACA;YAAEoB,aAAa;QAAM;QAEvB/B,gBAAgByB,oBAAoBrC,KAAK4C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;QAC7F3B,gBAAgBG,wBAAwBd,KAAK4C,QAAQ,CAACjC,gBAAgB;YAAEgC,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG9C,eAAemC,uBAAuBK,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,IAAIN,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,CAACkC,OAAO,GAAG9C,eAAeqC,uBAAuBG,MAAM5B,cAAc,CAACkC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}

package/lib-commonjs/components/Reference/useReferenceStyles.styles.js

@@ -49,16 +49,11 @@ const useStyles = (0, _reactcomponents.__styles)({
     canvas: {},
     sidecar: {
         wkccdc: "f2e0fxj",
-        z8tnut: "f1ywm7hm",
-        z189sj: [
-            "f1vdfbxk",
-            "f1f5gg8d"
-        ],
-        Byoj8tv: "f14wxoun",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ]
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1v65gcw"
     },
     inline: {},
     popover: {
@@ -73,31 +68,28 @@ const useStyles = (0, _reactcomponents.__styles)({
             "f1orqat1"
         ],
         a9b677: "f1uniyfe",
-        z8tnut: "f1nbblvp",
-        z189sj: [
-            "fifp7yv",
-            "f1asdtw4"
-        ],
-        Byoj8tv: "f1ov4xf1",
-        uwmqm3: [
-            "f1asdtw4",
-            "fifp7yv"
-        ]
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1c5fvqg"
     },
     closed: {
         Belr9w4: "f1sff6ri"
     },
     citation: {
-        Ijaq50: "fwllpr6",
-        Br312pm: "fx0qcsv",
-        nk6f5a: "f1ldxewp",
-        Bw0ie65: "ftmncab"
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "f4z8xh6"
     },
     media: {
-        Ijaq50: "f11uok23",
-        Br312pm: "f1qdfnnj",
-        nk6f5a: "f1s27gz",
-        Bw0ie65: "f86d0yl",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fujjg13",
         mc9l5x: "f22iagw",
         Bt984gj: "f122n59",
         Brf1p80: "f4d9j23"
@@ -109,10 +101,11 @@ const useStyles = (0, _reactcomponents.__styles)({
         vf399t: "f1ojxjpn"
     },
     actions: {
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
         Ijaq50: "f16hsg94",
-        Br312pm: "f35n22n",
-        nk6f5a: "fh3uimt",
-        Bw0ie65: "fnh4yke",
+        Bq1tomu: "fceb517",
         Bdqf98w: "f1a7i8kp",
         mc9l5x: "f22iagw"
     },
@@ -120,18 +113,20 @@ const useStyles = (0, _reactcomponents.__styles)({
         D5xksd: "fzmnlw3"
     },
     sensitivity: {
-        Ijaq50: "fpymh5q",
-        Br312pm: "fjieyc3",
-        nk6f5a: "f18utan",
-        Bw0ie65: "f15c84mf",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fw0kx7a",
         Bdqf98w: "fsxvdwy"
     },
     metadata: {
         B6of3ja: "fww94b8",
-        Ijaq50: "f1md2vp3",
-        Br312pm: "f1y0qc5c",
-        nk6f5a: "f179ty8e",
-        Bw0ie65: "f83o9dc",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "f14r5tnm",
         Bahqtrf: "fk6fouc",
         Be2twd7: "f13mqy1h",
         Bhrd7zp: "figsok6",
@@ -174,10 +169,11 @@ const useStyles = (0, _reactcomponents.__styles)({
     },
     content: {
         B6of3ja: "fww94b8",
-        Ijaq50: "fxwmwwq",
-        Br312pm: "f1e0gndy",
-        nk6f5a: "f4zz6gv",
-        Bw0ie65: "f7idnck",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "fqi5tbq",
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
         Belr9w4: "f1wn3y0l",
@@ -190,28 +186,36 @@ const useStyles = (0, _reactcomponents.__styles)({
 }, {
     d: [
         ".f2e0fxj{grid-template-rows:24px auto auto auto;}",
-        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        [
+            ".f1v65gcw{padding:var(--spacingVerticalXS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
         ".f1pit55b{border-top-width:0px;}",
         ".f1orqat1{border-right-width:0px;}",
         ".ffbvwxd{border-left-width:0px;}",
         ".f136mcbi{border-bottom-width:0px;}",
         ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}",
-        ".f1nbblvp{padding-top:0px;}",
-        ".fifp7yv{padding-right:0px;}",
-        ".f1asdtw4{padding-left:0px;}",
-        ".f1ov4xf1{padding-bottom:0px;}",
+        [
+            ".f1c5fvqg{padding:0px;}",
+            {
+                p: -1
+            }
+        ],
         ".f1sff6ri{row-gap:0;}",
-        ".fwllpr6{grid-row-start:citation;}",
-        ".fx0qcsv{grid-column-start:citation;}",
-        ".f1ldxewp{grid-row-end:citation;}",
-        ".ftmncab{grid-column-end:citation;}",
-        ".f11uok23{grid-row-start:media;}",
-        ".f1qdfnnj{grid-column-start:media;}",
-        ".f1s27gz{grid-row-end:media;}",
-        ".f86d0yl{grid-column-end:media;}",
+        [
+            ".f4z8xh6{grid-area:citation;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fujjg13{grid-area:media;}",
+            {
+                p: -1
+            }
+        ],
         ".f22iagw{display:flex;}",
         ".f122n59{align-items:center;}",
         ".f4d9j23{justify-content:center;}",
@@ -219,22 +223,29 @@ const useStyles = (0, _reactcomponents.__styles)({
         ".fd461yt{height:16px;}",
         ".fe9dio4>.fai-Reference__mediaChild{width:16px;}",
         ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}",
-        ".f16hsg94{grid-row-start:1;}",
-        ".f35n22n{grid-column-start:actions;}",
-        ".fh3uimt{grid-row-end:actions;}",
-        ".fnh4yke{grid-column-end:actions;}",
+        [
+            ".fceb517{grid-area:actions;}",
+            {
+                p: -1
+            }
+        ],
         ".f1a7i8kp{justify-self:end;}",
+        ".f16hsg94{grid-row-start:1;}",
         ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}",
-        ".fpymh5q{grid-row-start:sensitivityLabel;}",
-        ".fjieyc3{grid-column-start:sensitivityLabel;}",
-        ".f18utan{grid-row-end:sensitivityLabel;}",
-        ".f15c84mf{grid-column-end:sensitivityLabel;}",
+        [
+            ".fw0kx7a{grid-area:sensitivityLabel;}",
+            {
+                p: -1
+            }
+        ],
         ".fsxvdwy{justify-self:start;}",
         ".fww94b8{margin-top:var(--spacingVerticalXS);}",
-        ".f1md2vp3{grid-row-start:metadata;}",
-        ".f1y0qc5c{grid-column-start:metadata;}",
-        ".f179ty8e{grid-row-end:metadata;}",
-        ".f83o9dc{grid-column-end:metadata;}",
+        [
+            ".f14r5tnm{grid-area:metadata;}",
+            {
+                p: -1
+            }
+        ],
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".f13mqy1h{font-size:var(--fontSizeBase100);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
@@ -256,10 +267,12 @@ const useStyles = (0, _reactcomponents.__styles)({
         ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}",
         ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}",
         ".fmrv4ls{vertical-align:middle;}",
-        ".fxwmwwq{grid-row-start:content;}",
-        ".f1e0gndy{grid-column-start:content;}",
-        ".f4zz6gv{grid-row-end:content;}",
-        ".f7idnck{grid-column-end:content;}",
+        [
+            ".fqi5tbq{grid-area:content;}",
+            {
+                p: -1
+            }
+        ],
         ".f1vx9l62{flex-direction:column;}",
         ".f1wn3y0l{row-gap:var(--spacingVerticalS);}",
         ".f11d4kpn{color:var(--colorNeutralForeground3);}",
@@ -269,10 +282,11 @@ const useStyles = (0, _reactcomponents.__styles)({
 });
 const useLabelStyles = (0, _reactcomponents.__styles)({
     root: {
-        Ijaq50: "faq1aip",
-        Br312pm: "f1m489tg",
-        nk6f5a: "fv2srd9",
-        Bw0ie65: "f1tz6hh8",
+        Bw0ie65: 0,
+        Br312pm: 0,
+        nk6f5a: 0,
+        Ijaq50: 0,
+        Bq1tomu: "f1m7hl8e",
         qb2dma: "f9h729m",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fy9rknc",
@@ -296,10 +310,12 @@ const useLabelStyles = (0, _reactcomponents.__styles)({
     }
 }, {
     d: [
-        ".faq1aip{grid-row-start:title;}",
-        ".f1m489tg{grid-column-start:title;}",
-        ".fv2srd9{grid-row-end:title;}",
-        ".f1tz6hh8{grid-column-end:title;}",
+        [
+            ".f1m7hl8e{grid-area:title;}",
+            {
+                p: -1
+            }
+        ],
         ".f9h729m{align-self:start;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fy9rknc{font-size:var(--fontSizeBase200);}",

package/lib-commonjs/components/Reference/useReferenceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    ...shorthands.padding('0px'),\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    ...shorthands.gridArea('citation'),\n  },\n  media: {\n    ...shorthands.gridArea('media'),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    ...shorthands.gridArea('actions'),\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    ...shorthands.gridArea('sensitivityLabel'),\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    ...shorthands.gridArea('metadata'),\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    ...shorthands.gridArea('content'),\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    ...shorthands.gridArea('title'),\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","mediaChild","metadata","mergeClasses","root","citation","actions","sensitivity","primaryText","secondaryText","tertiaryText","label","content","detailsButton","text","labelFontSize","maxPopoverWidth","caption1Strong","fontSize","useReferenceClassName","makeResetStyles","lineHeight","boxSizing","width","__resetStyles","display","__styles","gridTemplateAreas","uwmqm3","gridTemplateRows","border","borderRadius","padding","spacingVerticalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","z8tnut","z189sj","useStyles","makeStyles","canvas","sidecar","Belr9w4","popover","shorthands","Bw0ie65","rowGap","Ijaq50","media","justifyContent","a9b677","mediaPopover","height","nk6f5a","justifySelf","gridRowStart","D5xksd","buttonClassNames","color","marginTop","typographyStyles","metadataSubsequentText","position","marginLeft","left","spacingHorizontalS","top","Bciustq","icon","caption2","verticalAlign","Bm6vgfq","flexDirection","hidden","Br312pm","useLabelStyles","alignSelf","wordBreak","paddingTop","closed","maxWidth","Bhrd7zp","Bg96gwp","Biipf1f","Bmxbyg5","rootClassName","labelStyles","state","B2u0y6b","Bh9c35c","isSubsequentText","mode","layout","styles","referenceExtraClassNames","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    padding: '0px',\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    gridArea: 'citation',\n  },\n  media: {\n    gridArea: 'media',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    gridArea: 'actions',\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    gridArea: 'sensitivityLabel',\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    gridArea: 'metadata',\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    gridArea: 'title',\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","mediaChild","root","citation","actions","sensitivity","primaryText","secondaryText","tertiaryText","label","content","detailsButton","text","labelFontSize","maxPopoverWidth","caption1Strong","fontSize","useReferenceClassName","makeResetStyles","lineHeight","boxSizing","width","__resetStyles","display","__styles","gridTemplateAreas","z8tnut","gridTemplateColumns","border","borderRadius","padding","boxShadow","columnGap","alignItems","a9b677","Byoj8tv","useStyles","canvas","sidecar","gridTemplateRows","inline","popover","Br312pm","closed","rowGap","Bq1tomu","gridArea","Bw0ie65","media","justifyContent","Bt984gj","mediaPopover","height","justifySelf","gridRowStart","D5xksd","metadata","marginTop","typographyStyles","metadataSubsequentText","position","marginLeft","left","top","icon","caption2","verticalAlign","Br0sdwz","tokens","spacingVerticalXS","flexDirection","spacingVerticalS","color","colorNeutralForeground3","hidden","Bhrd7zp","Bg96gwp","ha4doy","useLabelStyles","alignSelf","wordBreak","overflowY","Beiy3e4","paddingTop","maxWidth","p","state","nk6f5a","Bahqtrf","Biipf1f","isSubsequentText","Fd1uvx","Bmxbyg5","B2u0y6b"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js

@@ -21,9 +21,8 @@ const referenceGroupToggleClassNames = {
     root: 'fai-ReferenceGroupToggle',
     icon: 'fai-ReferenceGroupToggle__icon'
 };
-const useButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rctdkan", "rfdmif3", [
-    ".rctdkan{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}",
-    ".rfdmif3{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"
+const useButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rqbbkgr", null, [
+    ".rqbbkgr{display:inline-flex;column-gap:var(--spacingHorizontalSNudge);align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);border:0;background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground3);cursor:pointer;width:max-content;padding:var(--spacingVerticalXS) 0;}"
 ]);
 const useIconBaseClassName = (0, _reactcomponents.__resetStyles)("r18biwo", null, [
     ".r18biwo{display:inline-flex;align-items:center;}"

package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["referenceGroupToggleClassNames","typographyStyles","root","icon","useButtonBaseClassName","makeResetStyles","display","__resetStyles","columnGap","tokens","spacingHorizontalSNudge","alignItems","Bahqtrf","border","backgroundColor","color","shorthands","Be2twd7","Bhrd7zp","useIconBaseClassName","d","useStyles","state","styles","iconBaseClassName","buttonBaseClassName","className","mergeClasses","mode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,8BAAAA;eAAAA;;IA0BNC,sCAAyB;eAAzBA;;;iCA/BW;AAKX,MAAMD,iCAA4E;UACvFE;UACAC;AACF;AAEA,MAAMC,yBAAyBC,IAAAA,8BAAAA,EAAAA,WAAgB,WAAA;IAAA;IAAA;CAAA;MAC7CC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,YAAWC,IAAAA,yBAAOC,EAAAA;YAClBC;QACAC,SAAGX;QACHY,SAAQ;QACRC,SAAAA;QACAC,SAAON;;aAEA;QACPG,SAAGI;QACLC,SAAA;QAEAC,SAAMC;QACJb,SAAS;;AAEX,GAAA;IAEAc,GAAA;QAAMC;QAAuB;QAAA;QAAA;QAAA;QAAA;KAAA;;MAGtBpB,yCAAyBqB,CAAAA;;IAIhC,MAAA,QAEC,GACDA;UACEC,SAAAF;UAEAG,oBAAiBF;UACjBG,sBAAeJ;UAEfnB,IAAMsB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoBL,EAAAA,+BAAAA,IAAAA,EAAAA,qBAAAA,MAAAA,CAAAA,KAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;QAC1BG,MAAMG,IAAAA,EAAAA;QACNH,MAAMpB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EACrB3B,+BAA+BE,IAAI,EACnCuB,mBAAAA,MACAF,IAAOK,CAAAA,SACPN;;WAIAA;mEAGKA"}
+{"version":3,"sources":["useReferenceGroupToggleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: { ...typographyStyles.caption1 },\n  sidecar: {\n    ...typographyStyles.caption2,\n  },\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  'use no memo';\n\n  const { mode } = state;\n  const styles = useStyles();\n\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(\n    referenceGroupToggleClassNames.root,\n    buttonBaseClassName,\n    styles[mode],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["referenceGroupToggleClassNames","typographyStyles","root","icon","useButtonBaseClassName","makeResetStyles","display","__resetStyles","columnGap","tokens","spacingHorizontalSNudge","alignItems","Bahqtrf","border","backgroundColor","color","padding","Be2twd7","Bhrd7zp","useIconBaseClassName","d","useStyles","state","styles","iconBaseClassName","buttonBaseClassName","className","mergeClasses","mode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,8BAAAA;eAAAA;;IA0BNC,sCAAyB;eAAzBA;;;iCA9BqE;AAIrE,MAAMD,iCAA4E;UACvFE;UACAC;AACF;AAEA,MAAMC,yBAAyBC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;IAAA;CAAA;MAC7CC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,YAAWC,IAAAA,yBAAOC,EAAAA;YAClBC;QACAC,SAAGX;QACHY,SAAQ;QACRC,SAAAA;QACAC,SAAON;;aAEA;QACPO,SAAS;QACXC,SAAA;QAEAC,SAAMC;QACJb,SAAS;;AAEX,GAAA;IAEAc,GAAA;QAAMC;QAAuB;QAAA;QAAA;QAAA;QAAA;KAAA;;MAGtBpB,yCAAyBqB,CAAAA;;IAIhC,MAAA,QAEC,GACDA;UACEC,SAAAF;UAEAG,oBAAiBF;UACjBG,sBAAeJ;UAEfnB,IAAMsB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoBL,EAAAA,+BAAAA,IAAAA,EAAAA,qBAAAA,MAAAA,CAAAA,KAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;QAC1BG,MAAMG,IAAAA,EAAAA;QACNH,MAAMpB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EACrB3B,+BAA+BE,IAAI,EACnCuB,mBAAAA,MACAF,IAAOK,CAAAA,SACPN;;WAIAA;mEAGKA"}

package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  /** The root of the component that contains the list of references. */\n  root: NonNullable<Slot<'div'>>;\n\n  /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n  showMoreButton?: Slot<'span'>;\n\n  /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    referenceListRef: React.RefObject<HTMLDivElement>;\n    shouldUseOverflow: boolean;\n    totalReferencesCount: number;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n  /** The root of the component that contains the list of references. */\n  root: NonNullable<Slot<'div'>>;\n\n  /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n  showMoreButton?: Slot<'span'>;\n\n  /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n  showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n  /**\n   * The maximum number of references to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n   * @default undefined\n   */\n  maxVisibleReferences?: number;\n\n  /**\n   * The minimum number of references to always show before overflowing.\n   * If this value exceeds the number of references, the overflow functionality will be disabled.\n   * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n   * @default undefined\n   */\n  minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n  Pick<ReferenceListProps, 'maxVisibleReferences' | 'minVisibleReferences'> & {\n    areReferencesExpanded: boolean;\n    overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n    referenceListRef: React.RefObject<HTMLDivElement>;\n    shouldUseOverflow: boolean;\n    totalReferencesCount: number;\n  };\n\nexport type ReferenceListContextValues = {\n  referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js

@@ -13,9 +13,11 @@ const _reactcomponents = require("@fluentui/react-components");
 const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
 const renderReferenceList_unstable = (state, contextValues)=>{
     (0, _reactcomponents.assertSlots)(state);
+    const { minVisibleReferences } = state;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_referenceListContext.ReferenceListContextProvider, {
         value: contextValues.referenceList,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
+            minimumVisible: minVisibleReferences,
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
                 children: [
                     state.root.children,

package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  return (\n    <ReferenceListContextProvider value={contextValues.referenceList}>\n      <Overflow>\n        <state.root>\n          {state.root.children}\n          {state.showMoreButton && <state.showMoreButton />}\n          {state.showLessButton && <state.showLessButton />}\n        </state.root>\n      </Overflow>\n    </ReferenceListContextProvider>\n  );\n};\n"],"names":["assertSlots","state","value","contextValues","referenceList","Overflow","_jsx","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAEhC,EAAAA;WACgCC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,kDAA2B,EAAA;6BAC9DC,aAACC;6BACC,GAAAC,IAAAA,eAAA,EAAAD,yBAAA,EAACJ;;;0BACEA,IAAMM,CAAIC,QAACA;oBAAQP,MAAAQ,cAAA,IAAA,WAAA,GAAAH,IAAAA,eAAA,EAAAL,MAAAQ,cAAA,EAAA,CAAA;oBAAAR,MAAAS,cAAA,IAAA,WAAA,GAAAJ,IAAAA,eAAA,EAAAL,MAAAS,cAAA,EAAA,CAAA;iBAAA"}
+{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  const { minVisibleReferences } = state;\n\n  return (\n    <ReferenceListContextProvider value={contextValues.referenceList}>\n      <Overflow minimumVisible={minVisibleReferences}>\n        <state.root>\n          {state.root.children}\n          {state.showMoreButton && <state.showMoreButton />}\n          {state.showLessButton && <state.showLessButton />}\n        </state.root>\n      </Overflow>\n    </ReferenceListContextProvider>\n  );\n};\n"],"names":["assertSlots","state","minVisibleReferences","contextValues","minimumVisible","referenceList","showMoreButton","root","showLessButton","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAExBC,EAAAA;UAER,sBACuCC;sBACzBC,GAAAA,IAAAA,eAAAA,EAAAA,kDAAgBF,EAAAA;6BACxBG,aAAA;;4BACGJ;iCACMK,GAAAA,IAAAA,gBAAAA,EAAAA,MAAcC,IAAA,EAAA;;0BACpBN,IAAMO,CAAAA,QAAAA;oBAAcP,MAAAK,cAAI,IAACL,WAAMO,GAAAA,IAAAA,eAAAA,EAAAA,MAAcF,cAAA,EAAA,CAAA;oBAAAL,MAAAO,cAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAR,MAAAO,cAAA,EAAA,CAAA;iBAAA;;;;GAKxD,+CAAE"}

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js

@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactutilities = require("@fluentui-copilot/react-utilities");
 const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
 const useReferenceList_unstable = (props, ref)=>{
-    const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
+    const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
     const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
     const referenceListRef = _react.useRef(null);
     const totalReferencesCount = _react.Children.count(children);
@@ -23,6 +23,7 @@ const useReferenceList_unstable = (props, ref)=>{
         additionalCondition: !areReferencesExpanded,
         children,
         maxVisibleItems: maxVisibleReferences,
+        minVisibleItems: minVisibleReferences,
         overflowClassName: styles.overflow
     });
     // We keep track of whether we are interacting with the overflow button via keyboard or not.
@@ -38,11 +39,12 @@ const useReferenceList_unstable = (props, ref)=>{
     const onShowLessButtonClick = _react.useCallback(()=>{
         setAreReferencesExpanded(false);
     }, []);
-    const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
+    const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
     const state = {
         areReferencesExpanded,
         overflowButtonTriggeredViaKeyboard,
         maxVisibleReferences,
+        minVisibleReferences,
         referenceListRef,
         shouldUseOverflow,
         totalReferencesCount,

package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["children","maxVisibleReferences","props","showLessButton","referenceListRef","totalReferencesCount","styles","showMoreButton","resolvedChildren","maxVisibleItems","overflowClassName","overflow","React","Children","count","useRootStyles","overflowButtonTriggeredViaKeyboard","useRef","additionalCondition","focusAttributes","memorizeCurrent","setAreReferencesExpanded","useArrowNavigationGroup","axis","onShowLessButtonClick","onShowMoreButtonClick","useCallback","areReferencesExpanded","components","slot","always","getIntrinsicElementProps","shouldUseOverflow","elementType","rest","undefined","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,cAAMG,EACNC,cAAMC;UAGJC,CAAAA,uBAAiBR,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBS,mBAAmBJ,OAAAA,MAAOK,CAAAA;UAC5BN,uBAAAO,OAAAC,QAAA,CAAAC,KAAA,CAAAd;UAEAM,SAAAS,IAAAA,uCAAA;UACAP,mBAAMQ,IAAAA,0CAA2CC,EAAAA;QAEjDC,qBAAMC,CAAAA;;yBAEMlB;2BACVmB,OAAiBT,QAAA;;gGAGyE;UAC1FU,qCAAyBT,OAAAK,MAAA,CAAA;UACxBE,kBAAEG,IAAAA,wCAAA,EAAA;QAELC,MAAMC;kBACJH;QACFD,iBAAK;;UAILK,wBAAkCb,OAAAc,WAAA,CAAA;iCAChCC;;UAEA1B,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAG;;UAEAC,oBAAAA,yBAAAA,aAAAA,CAAAA;UAEAuB,QAAAA;;;;;;;oBAQOT;kBACH;4BACUX;4BAEZ;;cAAqBqB,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBAEvBxB,IAAAA,8BAAgByB,EAAAA,KAAAA;8BAAoDC;eAAoBC,IAAKC;sBAC7FhC;;yBAAiGgC;QACnG;QAEA5B,gBAAUA,oBAAgBsB,qBAAA,CAAAO,QAAA,CAAA7B,gBAAA;yBAClBA;QACR,KAAA4B;QAEAhC,gBAAUA,wBAAgB0B,qBAAA,CAAAO,QAAA,CAAAjC,gBAAA;yBAClBA;QACR,KAAAgC;;IAGA,IAAAE,MAAA9B,cAAA,EAAA"}
+{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useArrowNavigationGroup,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n  const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n  const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n  const totalReferencesCount = React.Children.count(children);\n  const styles = useRootStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    additionalCondition: !areReferencesExpanded,\n    children,\n    maxVisibleItems: maxVisibleReferences,\n    minVisibleItems: minVisibleReferences,\n    overflowClassName: styles.overflow,\n  });\n\n  // We keep track of whether we are interacting with the overflow button via keyboard or not.\n  const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'both',\n    circular: true,\n    memorizeCurrent: true,\n  });\n\n  const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(true);\n  }, []);\n\n  const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n    setAreReferencesExpanded(false);\n  }, []);\n\n  const shouldUseOverflow =\n    (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n    maxVisibleReferences !== undefined &&\n    !areReferencesExpanded;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...focusAttributes,\n        ...rest,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n  };\n\n  if (state.showMoreButton) {\n    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n  }\n\n  if (state.showLessButton) {\n    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n  }\n\n  return state;\n};\n"],"names":["children","maxVisibleReferences","props","minVisibleReferences","referenceListRef","totalReferencesCount","useRootStyles","showLessButton","resolvedChildren","additionalCondition","minVisibleItems","overflowClassName","styles","overflow","React","Children","count","overflowButtonTriggeredViaKeyboard","useRef","focusAttributes","memorizeCurrent","onShowLessButtonClick","useCallback","setAreReferencesExpanded","circular","shouldUseOverflow","areReferencesExpanded","components","rest","elementType","showMoreButton","slot","optional","ref","undefined","mergeCallbacks","onShowMoreButtonClick","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,oBAAeG,EACfC,cAAMC,gBACJC;UAGAC,CAAAA,uBAAiBP,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBQ,mBAAmBC,OAAAA,MAAOC,CAAAA;UAC5BR,uBAAAS,OAAAC,QAAA,CAAAC,KAAA,CAAAhB;UAEAY,SAAAN,IAAAA,uCAAA;UACAE,mBAAMS,IAAAA,0CAA2CC,EAAAA;QAEjDT,qBAAMU,CAAAA;;yBAEMlB;yBACVmB;QACFT,mBAAAC,OAAAC,QAAA;;gGAG2B;UACxBI,qCAAEH,OAAAI,MAAA,CAAA;UAELC,kBAAME,IAAAA,wCAA8BC,EAAAA;cAClCC;QACFC,UAAK;QAELJ,iBAAMK;;UAMJC,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAT;;UAEAd,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAC;;UAEAC,oBAAAA,CAAAA,yBAAAA,aAAAA,uBAAAA,oBAAAA,KAAAA,yBAAAA,aAAAA,CAAAA;UAEAsB,QAAAA;;;;;;;;oBASOC;kBACH5B;4BAEF;4BAAE6B;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAoCC,EAAAA,OAAKC;mDAA2BH,EAAaI,KAAA7B;eAAOe,eAAKe;eAC7F3B,IAAAA;sBAAwEsB;YAAoB;YAC9FA,aAAA;QAEA;wBACQC,oBAAyBK,qBAAAA,CAAAA,QAAAA,CAAeC,gBAAAA;YAChDP,aAAA;QAEA,KAAIQ;wBACI9B,wBAAyB4B,qBAAAA,CAAAA,QAAed,CAAAA,gBAAAA;YAChDQ,aAAA;QAEA,KAAAK;IACA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-reference",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "Fluent AI controls for citations and references",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,20 +12,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-preview": "^0.5.1",
-    "@fluentui-copilot/react-provider": "^0.8.4",
-    "@fluentui-copilot/react-sensitivity-label": "^0.5.1",
-    "@fluentui-copilot/react-utilities": "^0.0.2",
+    "@fluentui-copilot/react-preview": "^0.5.2",
+    "@fluentui-copilot/react-provider": "^0.9.0",
+    "@fluentui-copilot/react-sensitivity-label": "^0.5.2",
+    "@fluentui-copilot/react-utilities": "^0.0.3",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
-    "@fluentui/react-components": ">=9.54.4 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.1.63 <10.0.0",
+    "@fluentui/react-components": ">=9.54.10 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.1.65 <10.0.0",
     "@fluentui/react-icons": ">=2.0.247 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.40 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.11 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.20.0 <10.0.0",
+    "@fluentui/react-utilities": ">=9.18.13 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",