@fluentui-copilot/react-reference 0.15.5 → 0.16.0

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

@@ -1,249 +1,69 @@
-import { buttonClassNames, __resetStyles, __styles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
-import { tokens } from '@fluentui-copilot/tokens';
-/** deprecated Use ReferenceV2 component, hooks and types instead. */
+import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
 export 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'
 };
-/** deprecated Use ReferenceV2 component, hooks and types instead. */
 export const referenceExtraClassNames = {
-  text: 'fai-Reference__text',
-  mediaChild: 'fai-Reference__mediaChild'
+  graphicChild: 'fai-Reference__graphicChild'
 };
-const labelFontSize = typographyStyles.caption1Strong.fontSize;
-const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
-const maxPopoverWidth = '256px';
-const useReferenceClassName = __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 useStyles = __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 GRAPHIC_SIZE = '16px';
+const useRootBaseClassName = __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);}"]);
+export const useRootStyles = __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;}"]
+  d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
 });
-const useLabelStyles = __styles({
+const useRootNextStyles = __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;}", {
+  d: [[".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 = __resetStyles("r342rk1", null, [".r342rk1{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightBold);line-height:var(--lineHeightBase200);}"]);
+const useDividerBaseClassName = __resetStyles("r1eyqaw5", null, [".r1eyqaw5{background-color:var(--colorNeutralStroke2);height:16px;margin:var(--spacingVerticalNone) var(--spacingHorizontalXS);width:1px;}"]);
+const useGraphicBaseClassName = __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 = __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);}"]);
 /**
  * Apply styling to the Reference slots based on the state
- *
- * deprecated Use ReferenceV2 component, hooks and types instead.
  */
 export const useReferenceStyles_unstable = state => {
   'use no memo';
 
   const {
-    isExpanded,
-    mode,
-    layout
+    designVersion
   } = state;
-  const rootClassName = useReferenceClassName();
-  const styles = useStyles();
-  const labelStyles = useLabelStyles();
-  state.root.className = mergeClasses(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
+  const rootBaseClassName = useRootBaseClassName();
+  const rootNextStyles = useRootNextStyles();
+  const citationBaseClassName = useCitationBaseClassName();
+  const dividerBaseClassName = useDividerBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const graphicBaseClassName = useGraphicBaseClassName();
+  state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
   if (state.citation) {
-    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);
-  }
-  if (state.media) {
-    state.media.className = mergeClasses(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
-  }
-  if (state.actions) {
-    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);
-  }
-  state.label.className = mergeClasses(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
-  if (state.sensitivity) {
-    state.sensitivity.className = mergeClasses(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
-  }
-  state.metadata.className = mergeClasses(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
-  let isSubsequentText = false;
-  if (state.primaryText) {
-    state.primaryText.className = mergeClasses(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
-    isSubsequentText = true;
-  }
-  if (state.secondaryText) {
-    state.secondaryText.className = mergeClasses(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
-    isSubsequentText = true;
+    state.citation.className = mergeClasses(referenceClassNames.citation, citationBaseClassName, state.citation.className);
   }
-  if (state.tertiaryText) {
-    state.tertiaryText.className = mergeClasses(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
-    isSubsequentText = true;
+  if (state.divider) {
+    state.divider.className = mergeClasses(referenceClassNames.divider, dividerBaseClassName, state.divider.className);
   }
-  if (state.icon) {
-    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);
+  if (state.content) {
+    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
   }
-  state.content.className = mergeClasses(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
-  if (state.detailsButton) {
-    state.detailsButton.className = mergeClasses(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
+  if (state.graphic) {
+    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
   }
   return 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  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":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","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 { 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":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","referenceClassNames","root","citation","divider","graphic","content","referenceExtraClassNames","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","maxWidth","minHeight","padding","spacingVerticalXXS","spacingHorizontalS","textDecoration","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","overflow","width","useRootNextStyles","borderRadiusXLarge","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","textAlign","wordBreak","caption1","useReferenceStyles_unstable","state","designVersion","rootBaseClassName","rootNextStyles","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ReferenceList/ReferenceList.js

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { useReferenceList_unstable } from './useReferenceList';
 import { renderReferenceList_unstable } from './renderReferenceList';
+import { useReferenceList_unstable } from './useReferenceList';
 import { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
-import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
-/** deprecated Use ReferenceListV2 component, hooks and types instead. */
+import { useReferenceListContextValues_unstable } from './useReferenceListContextValues';
 export const ReferenceList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useReferenceList_unstable(props, ref);
+  const referenceListContextValues = useReferenceListContextValues_unstable(state);
   useReferenceListStyles_unstable(state);
-  useCustomStyleHook('useReferenceListStyles')(state);
-  return renderReferenceList_unstable(state);
+  return renderReferenceList_unstable(state, referenceListContextValues);
 });
 ReferenceList.displayName = 'ReferenceList';
 //# sourceMappingURL=ReferenceList.js.map

package/lib/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":["React","useReferenceList_unstable","renderReferenceList_unstable","useReferenceListStyles_unstable","useCustomStyleHook","ReferenceList","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,uEAAuE,GACvE,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"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":["React","renderReferenceList_unstable","useReferenceList_unstable","useReferenceListStyles_unstable","useReferenceListContextValues_unstable","ReferenceList","forwardRef","props","ref","state","referenceListContextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,sCAAsC,QAAQ,kCAAkC;AAGzF,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,6BAA6BN,uCAAuCK;IAE1EN,gCAAgCM;IAEhC,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

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

@@ -1,2 +1,2 @@
-/** deprecated Use ReferenceListV2 component, hooks and types instead. */export {};
+export {};
 //# sourceMappingURL=ReferenceList.types.js.map

package/lib/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,GACvE,WAAoE"}
+{"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":"AA6CA,WAEE"}

package/lib/components/ReferenceList/index.js

@@ -1,5 +1,5 @@
 export { ReferenceList } from './ReferenceList';
 export { renderReferenceList_unstable } from './renderReferenceList';
 export { useReferenceList_unstable } from './useReferenceList';
-export { referenceListClassNames, referenceListItemClassName, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
+export { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/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","renderReferenceList_unstable","useReferenceList_unstable","referenceListClassNames","referenceListItemClassName","useReferenceListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,0BAA0B,EAAEC,+BAA+B,QAAQ,kCAAkC"}
+{"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","renderReferenceList_unstable","useReferenceList_unstable","referenceListClassNames","useReferenceListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

package/lib/components/ReferenceList/renderReferenceList.js

@@ -1,8 +1,22 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-components';
-/** deprecated Use ReferenceListV2 component, hooks and types instead. */
-export const renderReferenceList_unstable = state => {
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Overflow, assertSlots } from '@fluentui/react-components';
+import { ReferenceListContextProvider } from '../../contexts/referenceListContext';
+/**
+ * Render the final JSX of ReferenceList
+ */
+export const renderReferenceList_unstable = (state, contextValues) => {
   assertSlots(state);
-  return /*#__PURE__*/_jsx(state.root, {});
+  const {
+    minVisibleReferences
+  } = state;
+  return /*#__PURE__*/_jsx(ReferenceListContextProvider, {
+    value: contextValues.referenceList,
+    children: /*#__PURE__*/_jsx(Overflow, {
+      minimumVisible: minVisibleReferences,
+      children: /*#__PURE__*/_jsxs(state.root, {
+        children: [/*#__PURE__*/_jsx(state.arrowableRegion, {}), state.showMoreButton && /*#__PURE__*/_jsx(state.showMoreButton, {}), state.showLessButton && /*#__PURE__*/_jsx(state.showLessButton, {})]
+      })
+    })
+  });
 };
 //# sourceMappingURL=renderReferenceList.js.map

package/lib/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","renderReferenceList_unstable","state","root"],"rangeMappings":";;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD,uEAAuE,GACvE,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,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/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":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","minVisibleReferences","value","referenceList","minimumVisible","root","arrowableRegion","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sCAAsC;AAEnF;;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;;kCACT,KAACN,MAAMO,eAAe;oBACrBP,MAAMQ,cAAc,kBAAI,KAACR,MAAMQ,cAAc;oBAC7CR,MAAMS,cAAc,kBAAI,KAACT,MAAMS,cAAc;;;;;AAKxD,EAAE"}

package/lib/components/ReferenceList/useReferenceList.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
-import { referenceListItemClassName } from './useReferenceListStyles.styles';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useArrowNavigationGroup, useMergedRefs } from '@fluentui/react-components';
+import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
+import { useRootStyles } from '../Reference/useReferenceStyles.styles';
 /**
  * Create the state required to render ReferenceList.
  *
@@ -9,23 +10,84 @@ import { referenceListItemClassName } from './useReferenceListStyles.styles';
  *
  * @param props - props from this instance of ReferenceList
  * @param ref - reference to root HTMLElement of ReferenceList
- *
- * deprecated Use ReferenceListV2 component, hooks and types instead.
  */
 export const useReferenceList_unstable = (props, ref) => {
-  return {
+  const {
+    arrowableRegion,
+    children,
+    maxVisibleReferences,
+    minVisibleReferences,
+    showLessButton,
+    showMoreButton,
+    ...rest
+  } = props;
+  const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
+  const referenceListRef = React.useRef(null);
+  const totalReferencesCount = React.Children.count(children);
+  const styles = useRootStyles();
+  const resolvedChildren = useOverflowMaxVisibleItems({
+    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.
+  const overflowButtonTriggeredViaKeyboard = React.useRef(false);
+  const focusAttributes = useArrowNavigationGroup({
+    axis: 'both',
+    circular: true,
+    memorizeCurrent: true
+  });
+  const onShowMoreButtonClick = React.useCallback(() => {
+    setAreReferencesExpanded(true);
+  }, []);
+  const onShowLessButtonClick = React.useCallback(() => {
+    setAreReferencesExpanded(false);
+  }, []);
+  const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
+  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.
+  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
+  const state = {
+    areReferencesExpanded,
+    overflowButtonTriggeredViaKeyboard,
+    maxVisibleReferences,
+    minVisibleReferences: minVisibleOverflowItems,
+    referenceListRef,
+    shouldUseOverflow,
+    totalReferencesCount,
     components: {
-      root: 'ol'
+      root: 'div',
+      arrowableRegion: 'div',
+      showMoreButton: 'span',
+      showLessButton: 'span'
     },
-    root: slot.always(getIntrinsicElementProps('ol', {
-      ref,
-      ...props,
-      children: React.Children.map(props.children, child => /*#__PURE__*/React.createElement("li", {
-        className: referenceListItemClassName
-      }, child))
+    root: slot.always(getIntrinsicElementProps('div', {
+      ref: useMergedRefs(ref, referenceListRef),
+      ...rest
     }), {
-      elementType: 'ol'
-    })
+      elementType: 'div'
+    }),
+    arrowableRegion: slot.always(arrowableRegion, {
+      defaultProps: {
+        ...focusAttributes,
+        children: resolvedChildren
+      },
+      elementType: 'div'
+    }),
+    showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
+      elementType: 'span'
+    }) : undefined,
+    showLessButton: areReferencesExpanded ? slot.optional(showLessButton, {
+      elementType: 'span'
+    }) : undefined
   };
+  if (state.showMoreButton) {
+    state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
+  }
+  if (state.showLessButton) {
+    state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
+  }
+  return state;
 };
 //# sourceMappingURL=useReferenceList.js.map

package/lib/components/ReferenceList/useReferenceList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { referenceListItemClassName } from './useReferenceListStyles.styles';\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 *\n * deprecated Use ReferenceListV2 component, hooks and types instead.\n */\nexport const useReferenceList_unstable = (\n  props: ReferenceListProps,\n  ref: React.Ref<HTMLOListElement>,\n): ReferenceListState => {\n  return {\n    components: {\n      root: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('ol', {\n        ref,\n        ...props,\n        children: React.Children.map(props.children, child => <li className={referenceListItemClassName}>{child}</li>),\n      }),\n      { elementType: 'ol' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","referenceListItemClassName","useReferenceList_unstable","props","ref","components","root","always","children","Children","map","child","li","className","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,6BAA6B;AAE5E,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;YACRK,UAAUV,MAAMW,QAAQ,CAACC,GAAG,CAACP,MAAMK,QAAQ,EAAEG,CAAAA,sBAAS,oBAACC;oBAAGC,WAAWZ;mBAA6BU;QACpG,IACA;YAAEG,aAAa;QAAK;IAExB;AACF,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 {\n    arrowableRegion,\n    children,\n    maxVisibleReferences,\n    minVisibleReferences,\n    showLessButton,\n    showMoreButton,\n    ...rest\n  } = 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  // Since the overflow button is an OverflowItem that's always visible, we need to account for it.\n  const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;\n\n  const state: ReferenceListState = {\n    areReferencesExpanded,\n    overflowButtonTriggeredViaKeyboard,\n    maxVisibleReferences,\n    minVisibleReferences: minVisibleOverflowItems,\n    referenceListRef,\n    shouldUseOverflow,\n    totalReferencesCount,\n\n    components: {\n      root: 'div',\n      arrowableRegion: 'div',\n      showMoreButton: 'span',\n      showLessButton: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, referenceListRef),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    arrowableRegion: slot.always(arrowableRegion, {\n      defaultProps: { ...focusAttributes, children: resolvedChildren },\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","arrowableRegion","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","minVisibleOverflowItems","state","components","root","always","elementType","defaultProps","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,EACJC,eAAe,EACfC,QAAQ,EACRC,oBAAoB,EACpBC,oBAAoB,EACpBC,cAAc,EACdC,cAAc,EACd,GAAGC,MACJ,GAAGR;IAEJ,MAAM,CAACS,uBAAuBC,yBAAyB,GAAGnB,MAAMoB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBrB,MAAMsB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBvB,MAAMwB,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,SAASnB;IACf,MAAMoB,mBAAmBrB,2BAA2B;QAClDsB,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqCjC,MAAMsB,MAAM,CAAC;IAExD,MAAMY,kBAAkB9B,wBAAwB;QAC9C+B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBtC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,wBAAwBxC,MAAMuC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMsB,oBACJ,AAAC3B,CAAAA,yBAAyB4B,aAAa5B,uBAAuBS,oBAAmB,KACjFV,yBAAyB6B,aACzB,CAACxB;IAEH,iGAAiG;IACjG,MAAMyB,0BAA0B7B,uBAAuBA,uBAAuB,IAAI;IAElF,MAAM8B,QAA4B;QAChC1B;QACAe;QACApB;QACAC,sBAAsB6B;QACtBtB;QACAoB;QACAlB;QAEAsB,YAAY;YACVC,MAAM;YACNnC,iBAAiB;YACjBK,gBAAgB;YAChBD,gBAAgB;QAClB;QACA+B,MAAM3C,KAAK4C,MAAM,CACf9C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKW;YACxB,GAAGJ,IAAI;QACT,IACA;YAAE+B,aAAa;QAAM;QAEvBrC,iBAAiBR,KAAK4C,MAAM,CAACpC,iBAAiB;YAC5CsC,cAAc;gBAAE,GAAGf,eAAe;gBAAEtB,UAAUe;YAAiB;YAC/DqB,aAAa;QACf;QACAhC,gBAAgByB,oBAAoBtC,KAAK+C,QAAQ,CAAClC,gBAAgB;YAAEgC,aAAa;QAAO,KAAKN;QAC7F3B,gBAAgBG,wBAAwBf,KAAK+C,QAAQ,CAACnC,gBAAgB;YAAEiC,aAAa;QAAO,KAAKN;IACnG;IAEA,IAAIE,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,CAACmC,OAAO,GAAGjD,eAAeoC,uBAAuBM,MAAM5B,cAAc,CAACmC,OAAO;IACnG;IAEA,IAAIP,MAAM7B,cAAc,EAAE;QACxB6B,MAAM7B,cAAc,CAACoC,OAAO,GAAGjD,eAAesC,uBAAuBI,MAAM7B,cAAc,CAACoC,OAAO;IACnG;IAEA,OAAOP;AACT,EAAE"}