@fluentui-copilot/react-reference 0.15.4 → 0.16.0

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

@@ -17,361 +17,93 @@ _export(exports, {
     },
     useReferenceStyles_unstable: function() {
         return useReferenceStyles_unstable;
+    },
+    useRootStyles: function() {
+        return useRootStyles;
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
 const referenceClassNames = {
     root: 'fai-Reference',
     citation: 'fai-Reference__citation',
-    media: 'fai-Reference__media',
-    actions: 'fai-Reference__actions',
-    sensitivity: 'fai-Reference__sensitivity',
-    metadata: 'fai-Reference__metadata',
-    primaryText: 'fai-Reference__primaryText',
-    secondaryText: 'fai-Reference__secondaryText',
-    tertiaryText: 'fai-Reference__tertiaryText',
-    icon: 'fai-Reference__icon',
-    label: 'fai-Reference__label',
-    content: 'fai-Reference__content',
-    detailsButton: 'fai-Reference__detailsButton'
+    divider: 'fai-Reference__divider',
+    graphic: 'fai-Reference__graphic',
+    content: 'fai-Reference__content'
 };
 const referenceExtraClassNames = {
-    text: 'fai-Reference__text',
-    mediaChild: 'fai-Reference__mediaChild'
+    graphicChild: 'fai-Reference__graphicChild'
 };
-const labelFontSize = _reactcomponents.typographyStyles.caption1Strong.fontSize;
-const labelLineHeight = _reactcomponents.typographyStyles.caption1Strong.lineHeight;
-const maxPopoverWidth = '256px';
-const useReferenceClassName = (0, _reactcomponents.__resetStyles)("r8mog99", null, [
-    ".r8mog99{box-sizing:border-box;width:100%;display:grid;grid-template-areas:\"citation         media            title            actions\" \".                .                title            .\" \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\" \"metadata         metadata         metadata         metadata\" \"content          content          content          content\";grid-template-columns:min-content min-content 1fr min-content;grid-template-rows:32px auto auto auto auto;border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);padding:var(--spacingVerticalS) var(--spacingHorizontalS);box-shadow:none;column-gap:var(--spacingHorizontalXS);align-items:center;}"
+const GRAPHIC_SIZE = '16px';
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r5aus6y", null, [
+    ".r5aus6y{align-items:center;background-color:var(--colorNeutralBackground3);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);box-sizing:border-box;color:var(--colorNeutralForeground2);column-gap:var(--spacingHorizontalXXS);display:inline-flex;flex-shrink:0;justify-content:center;max-width:100%;min-height:24px;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);text-decoration:none;}",
+    ".r5aus6y:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
+    ".r5aus6y:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}",
+    ".r5aus6y:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}",
+    ".r5aus6y:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"
 ]);
-const useStyles = (0, _reactcomponents.__styles)({
-    canvas: {},
-    sidecar: {
-        wkccdc: "f2e0fxj",
-        Byoj8tv: 0,
-        uwmqm3: 0,
-        z189sj: 0,
-        z8tnut: 0,
-        B0ocmuz: "f1v65gcw"
-    },
-    inline: {},
-    popover: {
-        B4j52fo: "f1pit55b",
-        Bekrc4i: [
-            "f1orqat1",
-            "ffbvwxd"
-        ],
-        Bn0qgzm: "f136mcbi",
-        ibv6hh: [
-            "ffbvwxd",
-            "f1orqat1"
-        ],
-        a9b677: "f1uniyfe",
-        Byoj8tv: 0,
-        uwmqm3: 0,
-        z189sj: 0,
-        z8tnut: 0,
-        B0ocmuz: "f1c5fvqg"
-    },
-    closed: {
-        Belr9w4: "f1sff6ri"
-    },
-    citation: {
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "f4z8xh6"
-    },
-    media: {
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "fujjg13",
-        mc9l5x: "f22iagw",
-        Bt984gj: "f122n59",
-        Brf1p80: "f4d9j23"
-    },
-    mediaPopover: {
-        a9b677: "fjw5fx7",
-        Bqenvij: "fd461yt",
-        psn4ub: "fe9dio4",
-        vf399t: "f1ojxjpn"
-    },
-    actions: {
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: "f16hsg94",
-        Bq1tomu: "fceb517",
-        Bdqf98w: "f1a7i8kp",
-        mc9l5x: "f22iagw"
-    },
-    detailsButton: {
-        D5xksd: "fzmnlw3"
-    },
-    sensitivity: {
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "fw0kx7a",
-        Bdqf98w: "fsxvdwy"
-    },
-    metadata: {
-        B6of3ja: "fww94b8",
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "f14r5tnm",
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "f13mqy1h",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "fcpl73t"
-    },
-    metadataSubsequentText: {
-        qhf8xq: "f10pi13n",
-        Frg6f3: [
-            "foyynoy",
-            "f1vcna3q"
-        ],
-        Ftih45: "f1wl9k8s",
-        Br0sdwz: "f1aocrix",
-        Brfgrao: "f1j7ml58",
-        Fbdkly: [
-            "f1s1fjay",
-            "f15a459s"
-        ],
-        Bciustq: "f1wl9tmt",
-        Baz25je: "f8pn7wt",
-        uvfttm: [
-            "f1x8pvcy",
-            "f9sc749"
-        ],
-        Bbv0w2i: [
-            "f1jpmc5p",
-            "f1yq6w5o"
-        ],
-        Bm6vgfq: [
-            "fjml6kk",
-            "f1geml7w"
-        ]
-    },
-    icon: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "f13mqy1h",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "fcpl73t",
-        ha4doy: "fmrv4ls"
-    },
-    content: {
-        B6of3ja: "fww94b8",
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "fqi5tbq",
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Belr9w4: "f1wn3y0l",
-        sj55zd: "f11d4kpn",
-        Biipf1f: "f9ijwd5"
-    },
-    hidden: {
-        mc9l5x: "fjseox"
+const useRootStyles = (0, _reactcomponents.__styles)({
+    overflow: {
+        B2u0y6b: "f6dzj5z",
+        a9b677: "fly5x3f"
     }
 }, {
     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;}"
+        ".f6dzj5z{max-width:100%;}",
+        ".fly5x3f{width:100%;}"
     ]
 });
-const useLabelStyles = (0, _reactcomponents.__styles)({
+const useRootNextStyles = (0, _reactcomponents.__styles)({
     root: {
-        Bw0ie65: 0,
-        Br312pm: 0,
-        nk6f5a: 0,
-        Ijaq50: 0,
-        Bq1tomu: "f1m7hl8e",
-        qb2dma: "f9h729m",
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fy9rknc",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "fwrc4pm",
-        Biipf1f: "f9ijwd5",
-        Fd1uvx: "fpfc2by",
-        Bh9c35c: "f1lvsx7g",
-        mc9l5x: "f1rvi9lw",
-        Bmxbyg5: "f1sil6mw"
-    },
-    canvas: {
-        z8tnut: "f1vd4pcd"
-    },
-    sidecar: {
-        z8tnut: "f1u9e4k4"
-    },
-    closed: {
-        B2u0y6b: "f6dzj5z",
-        Bh9c35c: "fvvof4m"
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu"
     }
 }, {
     d: [
         [
-            ".f1m7hl8e{grid-area:title;}",
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
             {
                 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;}"
+        ]
     ]
 });
+const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("r342rk1", null, [
+    ".r342rk1{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightBold);line-height:var(--lineHeightBase200);}"
+]);
+const useDividerBaseClassName = (0, _reactcomponents.__resetStyles)("r1eyqaw5", null, [
+    ".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"
+]);
+const useGraphicBaseClassName = (0, _reactcomponents.__resetStyles)("rpyrgl4", null, [
+    ".rpyrgl4{display:inline-flex;font-size:16px;height:16px;line-height:16px;width:16px;}",
+    ".rpyrgl4>.fai-Reference__graphicChild{height:16px;width:16px;}"
+]);
+const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("r1ycou3l", null, [
+    ".r1ycou3l{align-items:center;column-gap:var(--spacingHorizontalSNudge);display:inline-flex;text-align:start;word-break:break-word;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
+]);
 const useReferenceStyles_unstable = (state)=>{
     'use no memo';
-    const { isExpanded, mode, layout } = state;
-    const rootClassName = useReferenceClassName();
-    const styles = useStyles();
-    const labelStyles = useLabelStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
+    const { designVersion } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootNextStyles = useRootNextStyles();
+    const citationBaseClassName = useCitationBaseClassName();
+    const dividerBaseClassName = useDividerBaseClassName();
+    const contentBaseClassName = useContentBaseClassName();
+    const graphicBaseClassName = useGraphicBaseClassName();
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
     if (state.citation) {
-        state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, styles.citation, state.citation.className);
-    }
-    if (state.media) {
-        state.media.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
-    }
-    if (state.actions) {
-        state.actions.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.actions, styles.actions, state.actions.className);
-    }
-    state.label.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
-    if (state.sensitivity) {
-        state.sensitivity.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
-    }
-    state.metadata.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
-    let isSubsequentText = false;
-    if (state.primaryText) {
-        state.primaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
-        isSubsequentText = true;
-    }
-    if (state.secondaryText) {
-        state.secondaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
-        isSubsequentText = true;
+        state.citation.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.citation, citationBaseClassName, state.citation.className);
     }
-    if (state.tertiaryText) {
-        state.tertiaryText.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
-        isSubsequentText = true;
+    if (state.divider) {
+        state.divider.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
     }
-    if (state.icon) {
-        state.icon.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.icon, styles.icon, state.icon.className);
+    if (state.content) {
+        state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, contentBaseClassName, state.content.className);
     }
-    state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
-    if (state.detailsButton) {
-        state.detailsButton.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
+    if (state.graphic) {
+        state.graphic.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
     }
     return state;
 }; //# sourceMappingURL=useReferenceStyles.styles.js.map

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  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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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"}
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  graphic: 'fai-Reference__graphic',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  graphicChild: 'fai-Reference__graphicChild',\n};\n\nconst GRAPHIC_SIZE = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground2,\n  columnGap: tokens.spacingHorizontalXXS,\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  maxWidth: '100%',\n  minHeight: '24px',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  textDecoration: 'none',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${referenceClassNames.divider}`]: {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n    },\n  },\n});\n\nexport const useRootStyles = makeStyles({\n  overflow: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n});\n\nconst useRootNextStyles = makeStyles({ root: { borderRadius: tokens.borderRadiusXLarge } });\n\nconst useCitationBaseClassName = makeResetStyles({\n  ...typographyStyles.caption2Strong,\n});\n\nconst useDividerBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralStroke2,\n  height: '16px',\n  margin: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXS}`,\n  width: '1px',\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: GRAPHIC_SIZE,\n  height: GRAPHIC_SIZE,\n  lineHeight: GRAPHIC_SIZE,\n  width: GRAPHIC_SIZE,\n\n  [`> .${referenceExtraClassNames.graphicChild}`]: {\n    height: GRAPHIC_SIZE,\n    width: GRAPHIC_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\n  textAlign: 'start',\n  wordBreak: 'break-word',\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { designVersion } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootNextStyles = useRootNextStyles();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && rootNextStyles.root,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(\n      referenceClassNames.citation,\n      citationBaseClassName,\n      state.citation.className,\n    );\n  }\n\n  if (state.divider) {\n    state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.graphic) {\n    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","useReferenceStyles_unstable","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","borderRadius","columnGap","spacingHorizontalXXS","flexShrink","justifyContent","maxWidth","minHeight","padding","textDecoration","Dimara","useCitationBaseClassName","__resetStyles","useDividerBaseClassName","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","state","overflow","width","rootNextStyles","useRootNextStyles","citationBaseClassName","makeStyles","useContentBaseClassName","borderRadiusXLarge","className","mergeClasses","rootBaseClassName","designVersion","dividerBaseClassName","height","margin","tokens","spacingVerticalNone","spacingHorizontalXS","contentBaseClassName","useGraphicBaseClassName","graphicBaseClassName","fontSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IAuCTC,2BAAA;eAAAA;;IAhCFC,aAAY;eAAZA;;;iCApBgD;AAK3C,MAAMH,sBAAsD;UACjEI;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMP,2BAA2B;kBACtCQ;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;cACZC;QACAC,SAAS;QACTC,QAAAA;;;OAGAC;QAAAA;QAAkBC;KAAoB;;MAEtCC,oBAAYN,IAAAA,yBAAA,EAAA;UACZO;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,SAAAA;QAEAC,QAAA;;;;;;YAG4C;oBAE1C;;;;;MAGFC,2BAAAC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MAEAC,0BAAiBD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;gCACSE,IAAAA,8BAAAA,EAAAA,WAAAA,MAA8B;IAAA;IAAA;CAAA;gCAClCC,IAAAA,8BAAAA,EAAAA,YAA0B,MAAA;IAAA;CAAA;MAK9C5B,8BAAA6B,CAAAA;;IAIJ,MAAO,EACLC,aAAU;UAERC,oBAAOtB;UACTuB,iBAAAC;IACF,MAAGC,wBAAAV;IAEH,MAAMS,uBAAoBE;UAAajC,uBAAMkC;UAAEtB,uBAAqBuB;UAAmBnC,IAAA,CAAAoC,SAAA,GAAAC,IAAAA,6BAAA,EAAAzC,oBAAAI,IAAA,EAAAsC,mBAAAC,kBAAA,UAAAT,eAAA9B,IAAA,EAAA2B,MAAA3B,IAAA,CAAAoC,SAAA;IAAE,IAAAT,MAAA1B,QAAA,EAAA;QAEzF0B,MAAML,QAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA2Bd,EAAAA,oBAAgBP,QAAA,EAAA+B,uBAAAL,MAAA1B,QAAA,CAAAmC,SAAA;;IAEjD,IAAAT,MAAAzB,OAAA,EAAA;QAEAyB,MAAMH,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA0BhB,EAAAA,oBAAgBN,OAAA,EAAAsC,sBAAAb,MAAAzB,OAAA,CAAAkC,SAAA;;QAE9CK,MAAQrC,OAAA,EAAA;QACRsC,MAAAA,OAAWC,CAAAA,SAAOC,GAAAA,IAAAA,6BAAoB,EAAChD,oBAASiD,OAAAA,EAAoBC,sBAACnB,MAAAvB,OAAA,CAAAgC,SAAA;;IAEvE,IAAAT,MAAAxB,OAAA,EAAA;QAEAwB,MAAMoB,OAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAA0BvC,EAAAA,oBAAgBL,OAAA,EAAA6C,sBAAArB,MAAAxB,OAAA,CAAAiC,SAAA;;WAE9Ca;wDAEY3C"}

package/lib-commonjs/components/ReferenceList/ReferenceList.js

@@ -10,14 +10,14 @@ Object.defineProperty(exports, "ReferenceList", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useReferenceList = require("./useReferenceList");
 const _renderReferenceList = require("./renderReferenceList");
+const _useReferenceList = require("./useReferenceList");
 const _useReferenceListStylesstyles = require("./useReferenceListStyles.styles");
-const _reactprovider = require("@fluentui-copilot/react-provider");
+const _useReferenceListContextValues = require("./useReferenceListContextValues");
 const ReferenceList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useReferenceList.useReferenceList_unstable)(props, ref);
+    const referenceListContextValues = (0, _useReferenceListContextValues.useReferenceListContextValues_unstable)(state);
     (0, _useReferenceListStylesstyles.useReferenceListStyles_unstable)(state);
-    (0, _reactprovider.useCustomStyleHook)('useReferenceListStyles')(state);
-    return (0, _renderReferenceList.renderReferenceList_unstable)(state);
+    return (0, _renderReferenceList.renderReferenceList_unstable)(state, referenceListContextValues);
 });
 ReferenceList.displayName = 'ReferenceList'; //# sourceMappingURL=ReferenceList.js.map

package/lib-commonjs/components/ReferenceList/ReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport type { ReferenceListProps } from './ReferenceList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n\n  useReferenceListStyles_unstable(state);\n  useCustomStyleHook('useReferenceListStyles')(state);\n\n  return renderReferenceList_unstable(state);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["state","useReferenceList_unstable","props","ref","useReferenceListStyles_unstable","renderReferenceList_unstable","ReferenceList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUQA;;;eAAAA;;;;iEAVe;kCACmB;qCACG;8CACG;+BAGb;AAIjC,MAAMA,gBAAQC,WAAAA,GAAAA,OAA0BC,UAAOC,CAAAA,CAAAA,OAAAA;UAE/CC,QAAAA,IAAAA,2CAAgCJ,EAAAA,OAAAA;qEACb,EAAAA;yCAEZK,EAAAA,0BAA6BL;IACtC,OAAGK,IAAAA,iDAAA,EAAAL;AAEHM"}
+{"version":3,"sources":["ReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { renderReferenceList_unstable } from './renderReferenceList';\nimport { useReferenceList_unstable } from './useReferenceList';\nimport { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\nimport { useReferenceListContextValues_unstable } from './useReferenceListContextValues';\nimport type { ReferenceListProps } from './ReferenceList.types';\n\nexport const ReferenceList: ForwardRefComponent<ReferenceListProps> = React.forwardRef((props, ref) => {\n  const state = useReferenceList_unstable(props, ref);\n  const referenceListContextValues = useReferenceListContextValues_unstable(state);\n\n  useReferenceListStyles_unstable(state);\n\n  return renderReferenceList_unstable(state, referenceListContextValues);\n});\n\nReferenceList.displayName = 'ReferenceList';\n"],"names":["ReferenceList","React","forwardRef","props","state","useReferenceList_unstable","referenceListContextValues","useReferenceListContextValues_unstable","useReferenceListStyles_unstable","renderReferenceList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;qCAEsB;kCACH;8CACM;+CACO;AAGhD,MAAMA,gBAAAA,WAAAA,GAAAA,OAAyDC,UAAMC,CAAU,CAACC,OAACA;UACtFC,QAAMA,IAAAA,2CAAQC,EAAAA,OAA0BF;UACxCG,6BAAMA,IAAAA,qEAA6BC,EAAAA;qEAEnCC,EAAAA;WAEAC,IAAAA,iDAAOA,EAAAA,OAA6BL;AACtC;AAEAJ,cAAcU,WAAW,GAAG"}

package/lib-commonjs/components/ReferenceList/ReferenceList.types.js

@@ -1,4 +1,4 @@
-/** deprecated Use ReferenceListV2 component, hooks and types instead. */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport type ReferenceListSlots = {\n  /**\n   * The root slot.\n   */\n  root: Slot<'ol'>;\n};\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots>;\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport type ReferenceListState = ComponentState<ReferenceListSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAaA,uEAAuE"}
+{"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../contexts/referenceListContext';\n\nexport type ReferenceListSlots = {\n  /** The root of the component that contains the list of references. */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The region that contains the references and is used for arrow navigation. */\n  arrowableRegion: 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<Partial<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/ReferenceList/index.js

@@ -15,9 +15,6 @@ _export(exports, {
     referenceListClassNames: function() {
         return _useReferenceListStylesstyles.referenceListClassNames;
     },
-    referenceListItemClassName: function() {
-        return _useReferenceListStylesstyles.referenceListItemClassName;
-    },
     renderReferenceList_unstable: function() {
         return _renderReferenceList.renderReferenceList_unstable;
     },

package/lib-commonjs/components/ReferenceList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { ReferenceList } from './ReferenceList';\nexport type { ReferenceListProps, ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nexport { renderReferenceList_unstable } from './renderReferenceList';\nexport { useReferenceList_unstable } from './useReferenceList';\nexport { referenceListClassNames, referenceListItemClassName, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\n"],"names":["ReferenceList","referenceListClassNames","referenceListItemClassName","renderReferenceList_unstable","useReferenceListStyles_unstable","useReferenceList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAIbC,uBAAuB;eAAvBA,qDAAuB;;IAAEC,0BAA0B;eAA1BA,wDAA0B;;IAFnDC,4BAA4B;eAA5BA,iDAA4B;;IAEyBC,+BAA+B;eAA/BA,6DAA+B;;IADpFC,yBAAyB;eAAzBA,2CAAyB;;;+BAHJ;qCAEe;kCACH;8CAC2D"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { ReferenceList } from './ReferenceList';\nexport type { ReferenceListContextValues, ReferenceListProps, ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nexport { renderReferenceList_unstable } from './renderReferenceList';\nexport { useReferenceList_unstable } from './useReferenceList';\nexport { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\n"],"names":["ReferenceList","referenceListClassNames","renderReferenceList_unstable","useReferenceListStyles_unstable","useReferenceList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAIbC,uBAAuB;eAAvBA,qDAAuB;;IAFvBC,4BAA4B;eAA5BA,iDAA4B;;IAEHC,+BAA+B;eAA/BA,6DAA+B;;IADxDC,yBAAyB;eAAzBA,2CAAyB;;;+BAHJ;qCAEe;kCACH;8CAC+B"}

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

@@ -10,7 +10,21 @@ Object.defineProperty(exports, "renderReferenceList_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
-const renderReferenceList_unstable = (state)=>{
+const _referenceListContext = require("../../contexts/referenceListContext");
+const renderReferenceList_unstable = (state, contextValues)=>{
     (0, _reactcomponents.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+    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: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.arrowableRegion, {}),
+                    state.showMoreButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showMoreButton, {}),
+                    state.showLessButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showLessButton, {})
+                ]
+            })
+        })
+    });
 }; //# sourceMappingURL=renderReferenceList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots } from './ReferenceList.types';\n\n/** deprecated Use ReferenceListV2 component, hooks and types instead. */\nexport const renderReferenceList_unstable = (state: ReferenceListState) => {\n  assertSlots<ReferenceListSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","state","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAQEA;;;eAAAA;;;4BARwB;iCAGE;AAK1BA,MAAAA,+BAAgCC,CAAAA;oCAEhC,EAAAA;IACA,OAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAAA,CAAA"}
+{"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/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.arrowableRegion />\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","arrowableRegion","_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;;;iCAESC,GAAAA,IAAAA,gBAAAA,EAAAA,MAAcC,IAAA,EAAA;;+BACdC,GAAAA,IAAAA,eAAAA,EAAAA,MAAcC,eAAI,EAAA,CAAA;oBAACR,MAAMO,cAAc,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAT,MAAAK,cAAA,EAAA,CAAA;oBAAAL,MAAAO,cAAA,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAT,MAAAO,cAAA,EAAA,CAAA;iBAAA;;;;GAKxD,+CAAE"}