@fluentui-copilot/react-reference 0.0.0-nightly-20240520-0407-55b74dbd.1 → 0.0.0-nightly-20240523-0404-0f9673a1.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-reference",
   "entries": [
     {
-      "date": "Mon, 20 May 2024 04:13:18 GMT",
-      "tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240520-0407-55b74dbd.1",
-      "version": "0.0.0-nightly-20240520-0407-55b74dbd.1",
+      "date": "Thu, 23 May 2024 04:10:37 GMT",
+      "tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240523-0404-0f9673a1.1",
+      "version": "0.0.0-nightly-20240523-0404-0f9673a1.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,20 @@
           {
             "author": "beachball",
             "package": "@fluentui-copilot/react-reference",
-            "comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240520-0407-55b74dbd.1",
-            "commit": "d5006981e0ae0aff17330b814080b11ed5265191"
+            "comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240523-0404-0f9673a1.1",
+            "commit": "a5e07def327b056a91073e1e8cb4f833588faeee"
           },
           {
             "author": "beachball",
             "package": "@fluentui-copilot/react-reference",
-            "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240520-0407-55b74dbd.1",
-            "commit": "d5006981e0ae0aff17330b814080b11ed5265191"
+            "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240523-0404-0f9673a1.1",
+            "commit": "a5e07def327b056a91073e1e8cb4f833588faeee"
           },
           {
             "author": "beachball",
             "package": "@fluentui-copilot/react-reference",
-            "comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240520-0407-55b74dbd.1",
-            "commit": "d5006981e0ae0aff17330b814080b11ed5265191"
+            "comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240523-0404-0f9673a1.1",
+            "commit": "a5e07def327b056a91073e1e8cb4f833588faeee"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui-copilot/react-reference
 
-This log was last generated on Mon, 20 May 2024 04:13:18 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 04:10:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240520-0407-55b74dbd.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240520-0407-55b74dbd.1)
+## [0.0.0-nightly-20240523-0404-0f9673a1.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240523-0404-0f9673a1.1)
 
-Mon, 20 May 2024 04:13:18 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.2..@fluentui-copilot/react-reference_v0.0.0-nightly-20240520-0407-55b74dbd.1)
+Thu, 23 May 2024 04:10:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.11.2..@fluentui-copilot/react-reference_v0.0.0-nightly-20240523-0404-0f9673a1.1)
 
 ### Changes
 
 - Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240520-0407-55b74dbd.1 ([commit](https://github.com/microsoft/fluentai/commit/d5006981e0ae0aff17330b814080b11ed5265191) by beachball)
-- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240520-0407-55b74dbd.1 ([commit](https://github.com/microsoft/fluentai/commit/d5006981e0ae0aff17330b814080b11ed5265191) by beachball)
-- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240520-0407-55b74dbd.1 ([commit](https://github.com/microsoft/fluentai/commit/d5006981e0ae0aff17330b814080b11ed5265191) by beachball)
+- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240523-0404-0f9673a1.1 ([commit](https://github.com/microsoft/fluentai/commit/a5e07def327b056a91073e1e8cb4f833588faeee) by beachball)
+- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240523-0404-0f9673a1.1 ([commit](https://github.com/microsoft/fluentai/commit/a5e07def327b056a91073e1e8cb4f833588faeee) by beachball)
+- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240523-0404-0f9673a1.1 ([commit](https://github.com/microsoft/fluentai/commit/a5e07def327b056a91073e1e8cb4f833588faeee) by beachball)
 
 ## [0.11.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.11.2)
 

package/dist/index.d.ts

@@ -356,7 +356,7 @@ export declare const ReferenceV2: ForwardRefComponent<ReferenceV2Props>;
 export declare const referenceV2ClassNames: SlotClassNames<ReferenceV2Slots>;
 
 export declare const referenceV2ExtraClassNames: {
-    mediaChild: string;
+    graphicChild: string;
 };
 
 export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>> & {
@@ -368,11 +368,11 @@ export declare type ReferenceV2Props = ComponentProps<Partial<ReferenceV2Slots>>
 };
 
 export declare type ReferenceV2Slots = {
-    root: NonNullable<Slot<'button'>>;
+    root: NonNullable<Slot<'button', 'a'>>;
     citation?: Slot<'span'>;
     divider?: Slot<'span'>;
     content?: Slot<'span'>;
-    media?: Slot<'span'>;
+    graphic?: Slot<'span'>;
 };
 
 export declare type ReferenceV2State = ComponentState<ReferenceV2Slots> & Required<Pick<ReferenceV2Props, 'appearance' | 'id'>> & Pick<ReferenceListV2State, 'shouldUseOverflow'>;
@@ -602,6 +602,6 @@ export declare const useReferenceStylesV2_unstable: (state: ReferenceV2State) =>
  * @param props - props from this instance of Reference
  * @param ref - reference to root HTMLElement of Reference
  */
-export declare const useReferenceV2_unstable: (props: ReferenceV2Props, ref: React_2.Ref<HTMLButtonElement>) => ReferenceV2State;
+export declare const useReferenceV2_unstable: (props: ReferenceV2Props, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ReferenceV2State;
 
 export { }

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  media?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAmBA,WAEgD"}
+{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button', 'a'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":"AAmBA,WAEgD"}

package/lib/components/reference-v2/Reference/renderReference.js

@@ -8,7 +8,7 @@ export const renderReference_unstable = state => {
   } = state;
   const reference = /*#__PURE__*/_jsxs(state.root, {
     children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.divider && /*#__PURE__*/_jsx(state.divider, {}), state.content && /*#__PURE__*/_jsxs(state.content, {
-      children: [state.media && /*#__PURE__*/_jsx(state.media, {}), state.root.children]
+      children: [state.graphic && /*#__PURE__*/_jsx(state.graphic, {}), state.root.children]
     })]
   });
   return shouldUseOverflow ? /*#__PURE__*/_jsx(OverflowItem, {

package/lib/components/reference-v2/Reference/renderReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.media && <state.media />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderReference_unstable","state","id","shouldUseOverflow","reference","root","citation","divider","content","media","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAE,GAAGF;IAElC,MAAMG,0BACJ,MAACH,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;YACjCL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;YAC/BN,MAAMO,OAAO,kBACZ,MAACP,MAAMO,OAAO;;oBACXP,MAAMQ,KAAK,kBAAI,KAACR,MAAMQ,KAAK;oBAC3BR,MAAMI,IAAI,CAACK,QAAQ;;;;;IAM5B,OAAOP,kCACL,KAACL;QAAsBI,IAAIA;kBACxBE;OADgBF,MAInBE;AAEJ,EAAE"}
+{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.graphic && <state.graphic />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderReference_unstable","state","id","shouldUseOverflow","reference","root","citation","divider","content","graphic","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAE,GAAGF;IAElC,MAAMG,0BACJ,MAACH,MAAMI,IAAI;;YACRJ,MAAMK,QAAQ,kBAAI,KAACL,MAAMK,QAAQ;YACjCL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;YAC/BN,MAAMO,OAAO,kBACZ,MAACP,MAAMO,OAAO;;oBACXP,MAAMQ,OAAO,kBAAI,KAACR,MAAMQ,OAAO;oBAC/BR,MAAMI,IAAI,CAACK,QAAQ;;;;;IAM5B,OAAOP,kCACL,KAACL;QAAsBI,IAAIA;kBACxBE;OADgBF,MAInBE;AAEJ,EAAE"}

package/lib/components/reference-v2/Reference/useReference.js

@@ -28,12 +28,12 @@ export const useReference_unstable = (props, ref) => {
   const citation = slot.optional(props.citation, {
     elementType: 'span'
   });
-  const media = slot.optional(props.media, {
+  const graphic = slot.optional(props.graphic, {
     elementType: 'span'
   });
   const content = slot.optional(props.content, {
     elementType: 'span',
-    renderByDefault: media !== undefined || !!children
+    renderByDefault: graphic !== undefined || !!children
   });
   const divider = slot.optional(props.divider, {
     elementType: 'span',
@@ -47,7 +47,7 @@ export const useReference_unstable = (props, ref) => {
       root: 'button',
       citation: 'span',
       divider: 'span',
-      media: 'span',
+      graphic: 'span',
       content: 'span'
     },
     root: slot.always(getIntrinsicElementProps('button', {
@@ -60,11 +60,11 @@ export const useReference_unstable = (props, ref) => {
     citation,
     divider,
     content,
-    media
+    graphic
   };
-  if (state.media && React.isValidElement(state.media.children)) {
-    state.media.children = React.cloneElement(state.media.children, {
-      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild)
+  if (state.graphic && React.isValidElement(state.graphic.children)) {
+    state.graphic.children = React.cloneElement(state.graphic.children, {
+      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild)
     });
   }
   return state;

package/lib/components/reference-v2/Reference/useReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (props: ReferenceProps, ref: React.Ref<HTMLButtonElement>): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const media = slot.optional(props.media, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: media !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      media: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    media,\n  };\n\n  if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n    state.media.children = React.cloneElement(state.media.children, {\n      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","children","id","ctxAppearance","shouldUseOverflow","ctx","appearance","referenceId","citation","optional","elementType","media","content","renderByDefault","undefined","divider","state","components","root","always","isValidElement","cloneElement","className","mediaChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,uBAAuB;AAGhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGH;IAEzB,MAAM,EAAEI,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,iCAAiCS,CAAAA,MAAQ,CAAA;YACpFF,eAAeE,IAAIC,UAAU;YAC7BF,mBAAmBC,IAAID,iBAAiB;QAC1C,CAAA;IACA,MAAME,aAAaP,MAAMO,UAAU,IAAIH;IAEvC,MAAMI,cAAcZ,MAAM,cAAcO;IAExC,MAAMM,WAAWd,KAAKe,QAAQ,CAACV,MAAMS,QAAQ,EAAE;QAAEE,aAAa;IAAO;IACrE,MAAMC,QAAQjB,KAAKe,QAAQ,CAACV,MAAMY,KAAK,EAAE;QAAED,aAAa;IAAO;IAC/D,MAAME,UAAUlB,KAAKe,QAAQ,CAACV,MAAMa,OAAO,EAAE;QAC3CF,aAAa;QACbG,iBAAiBF,UAAUG,aAAa,CAAC,CAACb;IAC5C;IACA,MAAMc,UAAUrB,KAAKe,QAAQ,CAACV,MAAMgB,OAAO,EAAE;QAC3CL,aAAa;QACbG,iBAAiBL,aAAaM,aAAaF,YAAYE;IACzD;IAEA,MAAME,QAAwB;QAC5BV;QACAJ,IAAIK;QACJH;QAEAa,YAAY;YACVC,MAAM;YACNV,UAAU;YACVO,SAAS;YACTJ,OAAO;YACPC,SAAS;QACX;QAEAM,MAAMxB,KAAKyB,MAAM,CACf3B,yBAAyB,UAAU;YACjCQ;YACA,GAAGD,KAAK;YACRG,IAAIK;QACN,IACA;YAAEG,aAAa;QAAS;QAE1BF;QACAO;QACAH;QACAD;IACF;IAEA,IAAIK,MAAML,KAAK,IAAIpB,MAAM6B,cAAc,CAAcJ,MAAML,KAAK,CAACV,QAAQ,GAAG;QAC1Ee,MAAML,KAAK,CAACV,QAAQ,GAAGV,MAAM8B,YAAY,CAACL,MAAML,KAAK,CAACV,QAAQ,EAAE;YAC9DqB,WAAW7B,aAAauB,MAAML,KAAK,CAACV,QAAQ,CAACF,KAAK,CAACuB,SAAS,EAAEzB,yBAAyB0B,UAAU;QACnG;IACF;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useId","useReferenceListContext_unstable","referenceExtraClassNames","useReference_unstable","props","ref","children","id","ctxAppearance","shouldUseOverflow","ctx","appearance","referenceId","citation","optional","elementType","graphic","content","renderByDefault","undefined","divider","state","components","root","always","isValidElement","cloneElement","className","graphicChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AACjG,SAASC,gCAAgC,QAAQ,sDAAsD;AACvG,SAASC,wBAAwB,QAAQ,uBAAuB;AAGhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAE,GAAGH;IAEzB,MAAM,EAAEI,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,iCAAiCS,CAAAA,MAAQ,CAAA;YACpFF,eAAeE,IAAIC,UAAU;YAC7BF,mBAAmBC,IAAID,iBAAiB;QAC1C,CAAA;IACA,MAAME,aAAaP,MAAMO,UAAU,IAAIH;IAEvC,MAAMI,cAAcZ,MAAM,cAAcO;IAExC,MAAMM,WAAWd,KAAKe,QAAQ,CAACV,MAAMS,QAAQ,EAAE;QAAEE,aAAa;IAAO;IACrE,MAAMC,UAAUjB,KAAKe,QAAQ,CAACV,MAAMY,OAAO,EAAE;QAAED,aAAa;IAAO;IACnE,MAAME,UAAUlB,KAAKe,QAAQ,CAACV,MAAMa,OAAO,EAAE;QAC3CF,aAAa;QACbG,iBAAiBF,YAAYG,aAAa,CAAC,CAACb;IAC9C;IACA,MAAMc,UAAUrB,KAAKe,QAAQ,CAACV,MAAMgB,OAAO,EAAE;QAC3CL,aAAa;QACbG,iBAAiBL,aAAaM,aAAaF,YAAYE;IACzD;IAEA,MAAME,QAAwB;QAC5BV;QACAJ,IAAIK;QACJH;QAEAa,YAAY;YACVC,MAAM;YACNV,UAAU;YACVO,SAAS;YACTJ,SAAS;YACTC,SAAS;QACX;QAEAM,MAAMxB,KAAKyB,MAAM,CACf3B,yBAAyB,UAAU;YACjCQ;YACA,GAAGD,KAAK;YACRG,IAAIK;QACN,IACA;YAAEG,aAAa;QAAS;QAE1BF;QACAO;QACAH;QACAD;IACF;IAEA,IAAIK,MAAML,OAAO,IAAIpB,MAAM6B,cAAc,CAAcJ,MAAML,OAAO,CAACV,QAAQ,GAAG;QAC9Ee,MAAML,OAAO,CAACV,QAAQ,GAAGV,MAAM8B,YAAY,CAACL,MAAML,OAAO,CAACV,QAAQ,EAAE;YAClEqB,WAAW7B,aAAauB,MAAML,OAAO,CAACV,QAAQ,CAACF,KAAK,CAACuB,SAAS,EAAEzB,yBAAyB0B,YAAY;QACvG;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/reference-v2/Reference/useReferenceStyles.js

@@ -3,13 +3,13 @@ export const referenceClassNames = {
   root: 'fai-Reference',
   citation: 'fai-Reference__citation',
   divider: 'fai-Reference__divider',
-  media: 'fai-Reference__media',
+  graphic: 'fai-Reference__graphic',
   content: 'fai-Reference__content'
 };
 export const referenceExtraClassNames = {
-  mediaChild: 'fai-Reference__mediaChild'
+  graphicChild: 'fai-Reference__graphicChild'
 };
-const MEDIA_SIZE = '16px';
+const GRAPHIC_SIZE = '16px';
 const useRootBaseClassName = __resetStyles("r1aeqif9", null, [".r1aeqif9{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:flex;flex-shrink:0;justify-content:center;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);}", ".r1aeqif9:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}", ".r1aeqif9:hover .fai-Reference__divider{background-color:var(--colorNeutralStroke1Hover);}", ".r1aeqif9:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}", ".r1aeqif9:hover:active .fai-Reference__divider{background-color:var(--colorNeutralStroke1Pressed);}"]);
 export const useRootStyles = __styles({
   darker: {
@@ -37,7 +37,7 @@ const useDividerStyles = __styles({
 }, {
   d: [".f1d3jkam{background-color:var(--colorNeutralStroke1);}"]
 });
-const useMediaBaseClassName = __resetStyles("r4nw7iy", null, [".r4nw7iy{font-size:16px;height:16px;line-height:16px;width:16px;}", ".r4nw7iy>.fai-Reference__mediaChild{height:16px;width:16px;}"]);
+const useGraphicBaseClassName = __resetStyles("rjrtsj7", null, [".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}", ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"]);
 const useContentBaseClassName = __resetStyles("r1yvxokd", null, [".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;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
@@ -50,7 +50,7 @@ export const useReferenceStyles_unstable = state => {
   const citationBaseClassName = useCitationBaseClassName();
   const dividerBaseClassName = useDividerBaseClassName();
   const contentBaseClassName = useContentBaseClassName();
-  const mediaBaseClassName = useMediaBaseClassName();
+  const graphicBaseClassName = useGraphicBaseClassName();
   const rootStyles = useRootStyles();
   const dividerStyles = useDividerStyles();
   state.root.className = mergeClasses(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
@@ -63,8 +63,8 @@ export const useReferenceStyles_unstable = state => {
   if (state.content) {
     state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);
   }
-  if (state.media) {
-    state.media.className = mergeClasses(referenceClassNames.media, mediaBaseClassName, state.media.className);
+  if (state.graphic) {
+    state.graphic.className = mergeClasses(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
   }
   return state;
 };

package/lib/components/reference-v2/Reference/useReferenceStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  media: 'fai-Reference__media',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst MEDIA_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: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\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  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\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 useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  fontSize: MEDIA_SIZE,\n  height: MEDIA_SIZE,\n  lineHeight: MEDIA_SIZE,\n  width: MEDIA_SIZE,\n\n  [`> .${referenceExtraClassNames.mediaChild}`]: {\n    height: MEDIA_SIZE,\n    width: MEDIA_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\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  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\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(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(referenceClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","divider","media","content","referenceExtraClassNames","mediaChild","MEDIA_SIZE","useRootBaseClassName","alignItems","backgroundColor","colorNeutralBackground3","border","strokeWidthThin","colorNeutralStroke2","borderRadius","borderRadiusMedium","boxSizing","color","colorNeutralForeground2","columnGap","spacingHorizontalXXS","display","flexShrink","justifyContent","padding","spacingVerticalXXS","spacingHorizontalS","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","darker","colorNeutralBackground5","colorNeutralStroke1","colorNeutralBackground5Hover","colorNeutralBackground5Pressed","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useDividerStyles","useMediaBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","appearance","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","mediaBaseClassName","rootStyles","dividerStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\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: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\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  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\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 useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\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  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\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  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\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(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\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","shorthands","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","padding","spacingVerticalXXS","spacingHorizontalS","colorNeutralBackground3Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralStroke1Pressed","colorNeutralForeground2Pressed","useRootStyles","darker","colorNeutralBackground5","colorNeutralStroke1","colorNeutralBackground5Hover","colorNeutralBackground5Pressed","overflow","width","useCitationBaseClassName","caption2Strong","useDividerBaseClassName","height","margin","spacingVerticalNone","spacingHorizontalXS","useDividerStyles","useGraphicBaseClassName","fontSize","lineHeight","useContentBaseClassName","spacingHorizontalSNudge","caption1","useReferenceStyles_unstable","state","appearance","rootBaseClassName","citationBaseClassName","dividerBaseClassName","contentBaseClassName","graphicBaseClassName","rootStyles","dividerStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/hooks/reference-v2/useReferenceCitationPreview.js

@@ -57,7 +57,7 @@ export const useReferenceCitationPreview = props => {
                 tabIndex: -1,
                 children: index
               }),
-              media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
+              media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
               children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
             }), /*#__PURE__*/_jsx(PreviewMetadata, {
               icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
@@ -72,6 +72,11 @@ export const useReferenceCitationPreview = props => {
       });
     };
     const referenceWithPreview = props => {
+      const mergedReferenceProps = {
+        citation: index,
+        ...referenceProps,
+        ...props
+      };
       var _previewContentProps_content;
       return /*#__PURE__*/_jsxs(Preview, {
         closeOnScroll: true,
@@ -82,9 +87,7 @@ export const useReferenceCitationPreview = props => {
         ...referencePreviewProps,
         children: [/*#__PURE__*/_jsx(PreviewTrigger, {
           children: /*#__PURE__*/_jsx(Reference, {
-            citation: index,
-            ...referenceProps,
-            ...props
+            ...mergedReferenceProps
           })
         }), /*#__PURE__*/_jsx(PreviewSurface, {
           ...referencePreviewSurfaceProps,
@@ -96,7 +99,7 @@ export const useReferenceCitationPreview = props => {
                 tabIndex: -1,
                 children: index
               }),
-              media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
+              media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
               children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
             }), /*#__PURE__*/_jsx(PreviewMetadata, {
               icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,

package/lib/hooks/reference-v2/useReferenceCitationPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const citationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const referenceWithPreview: PackagedReference = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference citation={index} {...referenceProps} {...props} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: citationWithPreview,\n      Reference: referenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["React","mergeCallbacks","usePopoverContext_unstable","Preview","PreviewContent","PreviewHeader","PreviewMetadata","PreviewSurface","PreviewTrigger","SensitivityLabel","Citation","Reference","CitationCloseButton","citationCloseButtonProps","setPopoverOpen","context","setOpen","onPopoverCloseClick","useCallback","ev","preventDefault","onCitationCloseButtonClick","onClick","useReferenceCitationPreview","props","citationPreviewProps","citationPreviewSurfaceProps","citationProps","index","previewContentProps","referencePreviewProps","referencePreviewSurfaceProps","referenceProps","sensitivityLabelProps","components","useMemo","citationWithPreview","closeOnScroll","positioning","size","trapFocus","withArrow","citation","aria-label","referenceHref","tabIndex","media","children","icon","primaryText","secondaryText","tertiaryText","content","referenceWithPreview"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const citationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const referenceWithPreview: PackagedReference = props => {\n      const mergedReferenceProps = {\n        citation: index,\n        ...referenceProps,\n        ...props,\n      } as ReferenceProps;\n\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference {...mergedReferenceProps} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: citationWithPreview,\n      Reference: referenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["React","mergeCallbacks","usePopoverContext_unstable","Preview","PreviewContent","PreviewHeader","PreviewMetadata","PreviewSurface","PreviewTrigger","SensitivityLabel","Citation","Reference","CitationCloseButton","citationCloseButtonProps","setPopoverOpen","context","setOpen","onPopoverCloseClick","useCallback","ev","preventDefault","onCitationCloseButtonClick","onClick","useReferenceCitationPreview","props","citationPreviewProps","citationPreviewSurfaceProps","citationProps","index","previewContentProps","referencePreviewProps","referencePreviewSurfaceProps","referenceProps","sensitivityLabelProps","components","useMemo","citationWithPreview","closeOnScroll","positioning","size","trapFocus","withArrow","citation","aria-label","referenceHref","tabIndex","media","graphic","children","icon","primaryText","secondaryText","tertiaryText","content","referenceWithPreview","mergedReferenceProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  media?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListState } from '../ReferenceList';\n\nexport type ReferenceSlots = {\n  root: NonNullable<Slot<'button', 'a'>>;\n  citation?: Slot<'span'>;\n  divider?: Slot<'span'>;\n  content?: Slot<'span'>;\n  graphic?: Slot<'span'>;\n};\n\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> & {\n  /**\n   * The appearance of the reference.\n   * @default 'lighter'\n   */\n  appearance?: 'lighter' | 'darker';\n};\n\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'appearance' | 'id'>> &\n  Pick<ReferenceListState, 'shouldUseOverflow'>;\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/reference-v2/Reference/renderReference.js

@@ -19,7 +19,7 @@ const renderReference_unstable = (state)=>{
             state.divider && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.divider, {}),
             state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
                 children: [
-                    state.media && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
+                    state.graphic && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.graphic, {}),
                     state.root.children
                 ]
             })

package/lib-commonjs/components/reference-v2/Reference/renderReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.media && <state.media />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["renderReference_unstable","state","assertSlots","id","divider","_jsxs","root","content","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE0C;AAGnC,MAAMA,2BAA2BC,CAAAA;oCACtCC,EAAAA;UAEA,EAEAC,EAAA;sBAGWC,WAAO,GAAAC,IAAAA,gBAAA,EAAAJ,MAAIK,IAACL,EAAAA;kBAClBA;YAAAA,MAAMM,QAAO,IAAA,WACZ,GAAAC,IAAAA,eAACP,EAAAA,MAAMM,QAAO,EAAA,CAAA;YAAAN,MAAAG,OAAA,IAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAP,MAAAG,OAAA,EAAA,CAAA;YAAAH,MAAAM,OAAA,IAAA,WAAA,GAAAF,IAAAA,gBAAA,EAAAJ,MAAAM,OAAA,EAAA;;;;;;;;;;;;8CASSJ"}
+{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  const { id, shouldUseOverflow } = state;\n\n  const reference = (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.divider && <state.divider />}\n      {state.content && (\n        <state.content>\n          {state.graphic && <state.graphic />}\n          {state.root.children}\n        </state.content>\n      )}\n    </state.root>\n  );\n\n  return shouldUseOverflow ? (\n    <OverflowItem key={id} id={id}>\n      {reference}\n    </OverflowItem>\n  ) : (\n    reference\n  );\n};\n"],"names":["renderReference_unstable","state","assertSlots","id","divider","_jsxs","root","content","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;iCAE0C;AAGnC,MAAMA,2BAA2BC,CAAAA;oCACtCC,EAAAA;UAEA,EAEAC,EAAA;sBAGWC,WAAO,GAAAC,IAAAA,gBAAA,EAAAJ,MAAIK,IAACL,EAAAA;kBAClBA;YAAAA,MAAMM,QAAO,IAAA,WACZ,GAAAC,IAAAA,eAACP,EAAAA,MAAMM,QAAO,EAAA,CAAA;YAAAN,MAAAG,OAAA,IAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAP,MAAAG,OAAA,EAAA,CAAA;YAAAH,MAAAM,OAAA,IAAA,WAAA,GAAAF,IAAAA,gBAAA,EAAAJ,MAAAM,OAAA,EAAA;;;;;;;;;;;;8CASSJ"}

package/lib-commonjs/components/reference-v2/Reference/useReference.js

@@ -24,12 +24,12 @@ const useReference_unstable = (props, ref)=>{
     const citation = _reactcomponents.slot.optional(props.citation, {
         elementType: 'span'
     });
-    const media = _reactcomponents.slot.optional(props.media, {
+    const graphic = _reactcomponents.slot.optional(props.graphic, {
         elementType: 'span'
     });
     const content = _reactcomponents.slot.optional(props.content, {
         elementType: 'span',
-        renderByDefault: media !== undefined || !!children
+        renderByDefault: graphic !== undefined || !!children
     });
     const divider = _reactcomponents.slot.optional(props.divider, {
         elementType: 'span',
@@ -43,7 +43,7 @@ const useReference_unstable = (props, ref)=>{
             root: 'button',
             citation: 'span',
             divider: 'span',
-            media: 'span',
+            graphic: 'span',
             content: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('button', {
@@ -56,11 +56,11 @@ const useReference_unstable = (props, ref)=>{
         citation,
         divider,
         content,
-        media
+        graphic
     };
-    if (state.media && /*#__PURE__*/ _react.isValidElement(state.media.children)) {
-        state.media.children = /*#__PURE__*/ _react.cloneElement(state.media.children, {
-            className: (0, _reactcomponents.mergeClasses)(state.media.children.props.className, _useReferenceStyles.referenceExtraClassNames.mediaChild)
+    if (state.graphic && /*#__PURE__*/ _react.isValidElement(state.graphic.children)) {
+        state.graphic.children = /*#__PURE__*/ _react.cloneElement(state.graphic.children, {
+            className: (0, _reactcomponents.mergeClasses)(state.graphic.children.props.className, _useReferenceStyles.referenceExtraClassNames.graphicChild)
         });
     }
     return state;

package/lib-commonjs/components/reference-v2/Reference/useReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (props: ReferenceProps, ref: React.Ref<HTMLButtonElement>): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const media = slot.optional(props.media, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: media !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      media: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    media,\n  };\n\n  if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n    state.media.children = React.cloneElement(state.media.children, {\n      className: mergeClasses(state.media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["children","props","ctxAppearance","referenceId","shouldUseOverflow","slot","ctx","appearance","optional","content","elementType","citation","renderByDefault","media","divider","state","components","undefined","ref","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC6C;sCACnB;oCACR;AAavC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,UACEC;UAGF,EAEAA,aAAMC,EAENC,iBAAiBC,+DAA6C,EAAAC,CAAAA,MAAA,CAAA;YAAOJ,eAAAI,IAAAC,UAAA;YACrEH,mBAAmBI,IAAAA,iBAAoB;;UAAwBD,aAAAN,MAAAM,UAAA,IAAAL;UAC/DC,cAAgBE,IAAAA,sBAAKG,EAAAA,cAAeC;UAClCC,WAAAA,qBAAa,CAAAF,QAAA,CAAAP,MAAAU,QAAA,EAAA;qBACbC;;UAEFC,QAAMC,qBAAUT,CAAAA,QAAKG,CAAAA,MAASP,KAAMa,EAAAA;qBAClCJ;;UAEFD,UAAAJ,qBAAA,CAAAG,QAAA,CAAAP,MAAAQ,OAAA,EAAA;QAEAC,aAAMK;yBACJR,UAAAA,aAAAA,CAAAA,CAAAA;;UAEAH,UAAAA,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBAEAY;yBACQL,aAAAM,aAAAR,YAAAQ;;kBAENH;;;;oBAKIT;kBAEFa;sBACGjB;qBACHkB;mBAEF;qBAAET;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,UAAAA;;eAEAF,KAAAA;gBACAI;QACF,IAAA;YAEAH,aAAe;;;;QAIfD;QAEAI;IACA"}
+{"version":3,"sources":["useReference.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\n\n/**\n * Create the state required to render Reference.\n *\n * The returned state can be modified with hooks such as useReferenceStyles_unstable,\n * before being passed to renderReference_unstable.\n *\n * @param props - props from this instance of Reference\n * @param ref - reference to root HTMLElement of Reference\n */\nexport const useReference_unstable = (\n  props: ReferenceProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ReferenceState => {\n  const { children, id } = props;\n\n  const { ctxAppearance, shouldUseOverflow } = useReferenceListContext_unstable(ctx => ({\n    ctxAppearance: ctx.appearance,\n    shouldUseOverflow: ctx.shouldUseOverflow,\n  }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const referenceId = useId('reference-', id);\n\n  const citation = slot.optional(props.citation, { elementType: 'span' });\n  const graphic = slot.optional(props.graphic, { elementType: 'span' });\n  const content = slot.optional(props.content, {\n    elementType: 'span',\n    renderByDefault: graphic !== undefined || !!children,\n  });\n  const divider = slot.optional(props.divider, {\n    elementType: 'span',\n    renderByDefault: citation !== undefined && content !== undefined,\n  });\n\n  const state: ReferenceState = {\n    appearance,\n    id: referenceId,\n    shouldUseOverflow,\n\n    components: {\n      root: 'button',\n      citation: 'span',\n      divider: 'span',\n      graphic: 'span',\n      content: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        ...props,\n        id: referenceId,\n      }),\n      { elementType: 'button' },\n    ),\n    citation,\n    divider,\n    content,\n    graphic,\n  };\n\n  if (state.graphic && React.isValidElement<HTMLElement>(state.graphic.children)) {\n    state.graphic.children = React.cloneElement(state.graphic.children, {\n      className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild),\n    });\n  }\n\n  return state;\n};\n"],"names":["children","props","ctxAppearance","referenceId","shouldUseOverflow","slot","ctx","appearance","optional","graphic","content","elementType","citation","renderByDefault","divider","state","components","undefined","ref","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBUA;;;eAAAA;;;;iEAnBa;iCAC6C;sCACnB;oCACR;AAgBvC,MAAQA,wBAAiBC,CAAAA,OAAAA;UAEzB,UACEC;UAGF,EAEAA,aAAMC,EAENC,iBAAiBC,+DAA6C,EAAAC,CAAAA,MAAA,CAAA;YAAOJ,eAAAI,IAAAC,UAAA;YACrEH,mBAAgBC,IAAKG,iBAAeC;;UAA+BF,aAAAN,MAAAM,UAAA,IAAAL;UACnEC,cAAgBE,IAAAA,sBAAKG,EAAAA,cAAeE;UAClCC,WAAAA,qBAAa,CAAAH,QAAA,CAAAP,MAAAW,QAAA,EAAA;qBACbC;;UAEFJ,UAAMK,qBAAUT,CAAAA,QAAKG,CAAAA,MAASP,OAAMa,EAAO;qBACzCH;;UAEFD,UAAAL,qBAAA,CAAAG,QAAA,CAAAP,MAAAS,OAAA,EAAA;QAEAC,aAAMI;yBACJR,YAAAA,aAAAA,CAAAA,CAAAA;;UAEAH,UAAAA,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,OAAAA,EAAAA;qBAEAY;yBACQJ,aAAAK,aAAAP,YAAAO;;kBAENH;;;;oBAKIT;kBAEFa;sBACGjB;qBACHkB;qBAEF;qBAAER;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAAA,EAAAA,UAAAA;;eAEAF,KAAAA;gBACAD;QACF,IAAA;YAEAE,aAAUF;;;;QAIVC;QAEAD;IACA"}

package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.js

@@ -27,13 +27,13 @@ const referenceClassNames = {
     root: 'fai-Reference',
     citation: 'fai-Reference__citation',
     divider: 'fai-Reference__divider',
-    media: 'fai-Reference__media',
+    graphic: 'fai-Reference__graphic',
     content: 'fai-Reference__content'
 };
 const referenceExtraClassNames = {
-    mediaChild: 'fai-Reference__mediaChild'
+    graphicChild: 'fai-Reference__graphicChild'
 };
-const MEDIA_SIZE = '16px';
+const GRAPHIC_SIZE = '16px';
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1aeqif9", null, [
     ".r1aeqif9{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:flex;flex-shrink:0;justify-content:center;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);}",
     ".r1aeqif9:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
@@ -89,9 +89,9 @@ const useDividerStyles = (0, _reactcomponents.__styles)({
         ".f1d3jkam{background-color:var(--colorNeutralStroke1);}"
     ]
 });
-const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r4nw7iy", null, [
-    ".r4nw7iy{font-size:16px;height:16px;line-height:16px;width:16px;}",
-    ".r4nw7iy>.fai-Reference__mediaChild{height:16px;width:16px;}"
+const useGraphicBaseClassName = (0, _reactcomponents.__resetStyles)("rjrtsj7", null, [
+    ".rjrtsj7{font-size:16px;height:16px;line-height:16px;width:16px;}",
+    ".rjrtsj7>.fai-Reference__graphicChild{height:16px;width:16px;}"
 ]);
 const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("r1yvxokd", null, [
     ".r1yvxokd{column-gap:var(--spacingHorizontalSNudge);display:inline-flex;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
@@ -102,7 +102,7 @@ const useReferenceStyles_unstable = (state)=>{
     const citationBaseClassName = useCitationBaseClassName();
     const dividerBaseClassName = useDividerBaseClassName();
     const contentBaseClassName = useContentBaseClassName();
-    const mediaBaseClassName = useMediaBaseClassName();
+    const graphicBaseClassName = useGraphicBaseClassName();
     const rootStyles = useRootStyles();
     const dividerStyles = useDividerStyles();
     state.root.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
@@ -115,8 +115,8 @@ const useReferenceStyles_unstable = (state)=>{
     if (state.content) {
         state.content.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.content, contentBaseClassName, state.content.className);
     }
-    if (state.media) {
-        state.media.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.media, mediaBaseClassName, state.media.className);
+    if (state.graphic) {
+        state.graphic.className = (0, _reactcomponents.mergeClasses)(referenceClassNames.graphic, graphicBaseClassName, state.graphic.className);
     }
     return state;
 }; //# sourceMappingURL=useReferenceStyles.js.map

package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  divider: 'fai-Reference__divider',\n  media: 'fai-Reference__media',\n  content: 'fai-Reference__content',\n};\n\nexport const referenceExtraClassNames = {\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst MEDIA_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: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\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  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\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 useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  fontSize: MEDIA_SIZE,\n  height: MEDIA_SIZE,\n  lineHeight: MEDIA_SIZE,\n  width: MEDIA_SIZE,\n\n  [`> .${referenceExtraClassNames.mediaChild}`]: {\n    height: MEDIA_SIZE,\n    width: MEDIA_SIZE,\n  },\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\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  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\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(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(referenceClassNames.content, contentBaseClassName, state.content.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(referenceClassNames.media, mediaBaseClassName, state.media.className);\n  }\n\n  return state;\n};\n"],"names":["referenceClassNames","referenceExtraClassNames","shorthands","tokens","alignItems","root","citation","divider","media","content","mediaChild","MEDIA_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","borderRadius","boxSizing","color","columnGap","spacingHorizontalXXS","display","flexShrink","padding","a9b677","__resetStyles","useDividerBaseClassName","useDividerStyles","borderColor","useMediaBaseClassName","useContentBaseClassName","colorNeutralStroke1","rootBaseClassName","dividerBaseClassName","contentBaseClassName","overflow","width","useRootStyles","dividerStyles","state","className","mergeClasses","appearance","rootStyles","darker","useCitationBaseClassName","typographyStyles","caption2Strong","citationBaseClassName","colorNeutralStroke2","margin","mediaBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IA2CNC,2BAAuBC;eAAvBD;;IApCLE,aAAY;eAAZA;;;iCApBgB;AAKX,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;WACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;gBACtCS;AACF;AAEA,MAAMC,aAAa;AAEnB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;YACZC;QACAC,QAAQ;QACRC,QAAAA;QACAC,QAAAA;YAAAA;YAAW;SAAA;QACXC,SAAOhB;QACPiB,QAAAA;YAAAA;YAAkBC;SAAAA;QAClBC,QAAAA;QACAC,QAAAA;;cAEAC;QAEAC,QAAA;;;;;QAG4C;QAAA;QAAA;QAAA;QAAA;KAAA;;;QAEH;KAAA;;iCAEvCC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACFC,0BAAAD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAEAE,mBAAiBd,IAAAA,yBAAA,EAAA;YACfC;gBACAc;;;;;KAIoD;;MAEtDC,wBAAAJ,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AACF,MAAAK,0BAAAL,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAKOxB,8BAA8B8B,CAAAA;UAEjC,YACEjB;UAGFkB,oBAAiBrB;kCACET;UACnB+B,uBAAAP;UACFQ,uBAAAJ;UACAK,qBAAUN;UACRO,aAAOC;UACTC,gBAAAX;IACFY,MAAGnC,IAAA,CAAAoC,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAK,IAAA,EAAA4B,mBAAAU,eAAA,YAAAC,WAAAC,MAAA,EAAAL,MAAAnC,IAAA,CAAAoC,SAAA;IAEH,IAAMK,MAAAA,QAAAA,EAAAA;QACJN,MAAGO,QAAAA,CAAAA,SAAiBC,GAAAA,IAAAA,6BAAc,EAAAhD,oBAAAM,QAAA,EAAA2C,uBAAAT,MAAAlC,QAAA,CAAAmC,SAAA;IACpC;IAEA,IAAMd,MAAAA,OAAAA,EAAAA;QACJZ,MAAAA,OAAAA,CAAAA,SAAiBZ,GAAO+C,IAAAA,6BAAAA,EAAAA,oBAAmB3C,OAAA,EAAA2B,sBAAAS,eAAA,YAAAJ,cAAAM,MAAA,EAAAL,MAAAjC,OAAA,CAAAkC,SAAA;;QAE3CU,MAAQ1C,OAAGN,EAAAA;QACXkC,MAAAA,OAAO,CAAAI,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAS,OAAA,EAAA0B,sBAAAK,MAAA/B,OAAA,CAAAgC,SAAA;IACT;IAEA,IAAMb,MAAAA,KAAAA,EAAAA;QACJiB,MAAAA,KAAQ,CAAAJ,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAQ,KAAA,EAAA4C,oBAAAZ,MAAAhC,KAAA,CAAAiC,SAAA;;WAERD;AACF,GAEA,8CAA8C"}
+{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\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: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\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  darker: {\n    backgroundColor: tokens.colorNeutralBackground5,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground5Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground5Pressed,\n    },\n  },\n  overflow: {\n    width: '100%',\n  },\n});\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 useDividerStyles = makeStyles({\n  darker: {\n    backgroundColor: tokens.colorNeutralStroke1,\n  },\n});\n\nconst useGraphicBaseClassName = makeResetStyles({\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  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'inline-flex',\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  const { appearance } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const citationBaseClassName = useCitationBaseClassName();\n  const dividerBaseClassName = useDividerBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const graphicBaseClassName = useGraphicBaseClassName();\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootBaseClassName,\n    appearance === 'darker' && rootStyles.darker,\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(\n      referenceClassNames.divider,\n      dividerBaseClassName,\n      appearance === 'darker' && dividerStyles.darker,\n      state.divider.className,\n    );\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","shorthands","tokens","alignItems","root","citation","divider","graphic","content","graphicChild","GRAPHIC_SIZE","useRootBaseClassName","makeResetStyles","__styles","backgroundColor","border","borderRadius","boxSizing","color","columnGap","spacingHorizontalXXS","display","flexShrink","padding","a9b677","__resetStyles","useDividerBaseClassName","useDividerStyles","borderColor","useGraphicBaseClassName","useContentBaseClassName","colorNeutralStroke1","rootBaseClassName","dividerBaseClassName","contentBaseClassName","overflow","width","useRootStyles","dividerStyles","state","className","mergeClasses","appearance","rootStyles","darker","useCitationBaseClassName","typographyStyles","caption2Strong","citationBaseClassName","colorNeutralStroke2","margin","graphicBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,mBAAAA;eAAAA;;IAQAC,wBAAAA;eAAAA;;IA2CNC,2BAAuBC;eAAvBD;;IApCLE,aAAY;eAAZA;;;iCApBgB;AAKX,MAAMJ,sBAAsD;UACjEK;cACAC;aACAC;aACAC;aACAC;AACF;AAEO,MAAMR,2BAA2B;kBACtCS;AACF;AAEA,MAAMC,eAAe;AAErB,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAC3CT,MAAAA,gBAAYU,IAAAA,yBAAA,EAAA;YACZC;QACAC,QAAQ;QACRC,QAAAA;QACAC,QAAAA;YAAAA;YAAW;SAAA;QACXC,SAAOhB;QACPiB,QAAAA;YAAAA;YAAkBC;SAAAA;QAClBC,QAAAA;QACAC,QAAAA;;cAEAC;QAEAC,QAAA;;;;;QAG4C;QAAA;QAAA;QAAA;QAAA;KAAA;;;QAEH;KAAA;;iCAEvCC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACFC,0BAAAD,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAEAE,mBAAiBd,IAAAA,yBAAA,EAAA;YACfC;gBACAc;;;;;KAIoD;;MAEtDC,0BAAAJ,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAAA;AACF,MAAAK,0BAAAL,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MAKOxB,8BAA8B8B,CAAAA;UAEjC,YACEjB;UAGFkB,oBAAiBrB;kCACET;UACnB+B,uBAAAP;UACFQ,uBAAAJ;UACAK,uBAAUN;UACRO,aAAOC;UACTC,gBAAAX;IACFY,MAAGnC,IAAA,CAAAoC,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAK,IAAA,EAAA4B,mBAAAU,eAAA,YAAAC,WAAAC,MAAA,EAAAL,MAAAnC,IAAA,CAAAoC,SAAA;IAEH,IAAMK,MAAAA,QAAAA,EAAAA;QACJN,MAAGO,QAAAA,CAAAA,SAAiBC,GAAAA,IAAAA,6BAAc,EAAAhD,oBAAAM,QAAA,EAAA2C,uBAAAT,MAAAlC,QAAA,CAAAmC,SAAA;IACpC;IAEA,IAAMd,MAAAA,OAAAA,EAAAA;QACJZ,MAAAA,OAAAA,CAAAA,SAAiBZ,GAAO+C,IAAAA,6BAAAA,EAAAA,oBAAmB3C,OAAA,EAAA2B,sBAAAS,eAAA,YAAAJ,cAAAM,MAAA,EAAAL,MAAAjC,OAAA,CAAAkC,SAAA;;QAE3CU,MAAQ1C,OAAGN,EAAAA;QACXkC,MAAAA,OAAO,CAAAI,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAS,OAAA,EAAA0B,sBAAAK,MAAA/B,OAAA,CAAAgC,SAAA;IACT;IAEA,IAAMb,MAAAA,OAAAA,EAAAA;QACJiB,MAAAA,OAAQ,CAAAJ,SAAA,GAAAC,IAAAA,6BAAA,EAAA1C,oBAAAQ,OAAA,EAAA4C,sBAAAZ,MAAAhC,OAAA,CAAAiC,SAAA;;WAERD;AACF,GAEA,8CAAgC3B"}

package/lib-commonjs/hooks/reference-v2/useReferenceCitationPreview.js

@@ -63,7 +63,7 @@ const useReferenceCitationPreview = (props)=>{
                                         tabIndex: -1,
                                         children: index
                                     }),
-                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
+                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
                                     children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
@@ -83,6 +83,11 @@ const useReferenceCitationPreview = (props)=>{
             });
         };
         const referenceWithPreview = (props)=>{
+            const mergedReferenceProps = {
+                citation: index,
+                ...referenceProps,
+                ...props
+            };
             var _previewContentProps_content;
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactpreview.Preview, {
                 closeOnScroll: true,
@@ -94,9 +99,7 @@ const useReferenceCitationPreview = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewTrigger, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ReferenceV2.Reference, {
-                            citation: index,
-                            ...referenceProps,
-                            ...props
+                            ...mergedReferenceProps
                         })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewSurface, {
@@ -110,7 +113,7 @@ const useReferenceCitationPreview = (props)=>{
                                         tabIndex: -1,
                                         children: index
                                     }),
-                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
+                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
                                     children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {

package/lib-commonjs/hooks/reference-v2/useReferenceCitationPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const citationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const referenceWithPreview: PackagedReference = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference citation={index} {...referenceProps} {...props} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: citationWithPreview,\n      Reference: referenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","citationPreviewProps","useReferenceCitationPreview","citationPreviewSurfaceProps","citationProps","components","previewContentProps","positioning","withArrow","useMemo","PreviewTrigger","PreviewSurface","aria-label","referenceHref","index","referenceProps","primaryText","secondaryText","sensitivityLabelProps","SensitivityLabel","referenceWithPreview","_jsxs","Preview","closeOnScroll","trapFocus","referencePreviewProps","Reference","citation","referencePreviewSurfaceProps","PreviewContent","tabIndex","media","children","PreviewMetadata","_previewContentProps_content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;4BACA;iEAEuB;iCAEoC;8BASpD;uCAC0B;0BASR;6BACC;AAgC1B,6IAA6I;AAC7I,MAAMA,sBAAsBC,CAAAA;UAC1BC,iBAAMA,IAAAA,2CAAiBC,EAAAA,CAAAA,UAA2BC,QAAWA,OAAQC;UAErEC,sBAAMA,OAAsBC,WAAMC,CAAAA,CAAAA;uBAE9BN,IAAeO;yBAEf;yBACGC;OACL;QAAAR;KACA;UAACA,6BAAAA,IAAAA,+BAAAA,EAAAA,qBAAAA,yBAAAA,OAAAA;WAAe,WAAA,GAAAS,IAAAA,eAAA,EAAAC,kBAAA,EAAA;QAGlB,GAAAX,wBAAMY;QAENC,SAAAD;;;;IACF,MAAA,EAEAE,oBAAaC,EACXC,2BACEF,EAWFG,aAAMC,OACJ,qBA2BWC,uBA1BT,8BACwB,gBAACC,uBAAyB;uBAAkBC,OAASC,OAAA,CAAA;oCAAKR,CAAAA;;4EAC7ES,EAAAA;;;;;;;;qDAKD,EAAAA,4BAACC,EAAAA;6CAAmBR,GAAAA,IAAAA,eAAAA,EAAAA,kBAAAA,EAAAA;;;;;;mFAISS,EAAAA;sDAAyCC;kGAA6B,EAAA;;8FACxFC,EAAAA;;iEAGA,EAAEC,MAAAA,OAAAA,CAAAA;;;;;8DAMPC,QAAWD,mBAAET,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;iEACbW,QAAeX,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;gGACH,EAAEA;;yEAEfY,QAAAA,wBAA0BC,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAAA;2EAAqBD,QAAqBZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAW,aAAA;;;yDACpEX,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;;;;;;;;;;cAOXc,uBAAMA,CAAAA;;mBACJ,WAAA,GAAAC,IAAAA,gBAAA,EAAAC,qBACGA,EAAAA;+BAAQC;6BAAchB;;2BAAiCiB;2BAAUhB;wCAAciB;;;mEAC9E,EAAAC,sBAAChB,EAAAA;;6CACYiB;;;;;;oEAEb,EAAChB,4BAAAA,EAAAA;;2CAAmBiB,GAAAA,IAAAA,eAAAA,EAAAA,2BAAAA,EAA4B;yDAC9C,GAAA/B,IAAAA,eAAA,EAAAX,qBAAC2C;;;;;;8DAGqFC,QAAAA,mBAAW,KAAA,IAAA,KAAA,IAAAf,eAAAgB,KAAA;yEACxFjB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;;kEAGEC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;yEAENA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAgBiB;;0EAElBC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;yDACK,WAAE3B,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;4DACNU;;gEACAC,wBAAeX,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,OAAqBW,MAAAA,QAAaiB,iCAAA,KAAA,IAAAA,+BAAAT,0BAAA,QAAAA,0BAAA,KAAA,IAAA,KAAA,IAAAA,sBAAAO,QAAA;6BAAA;;;;;;;;;;;;;;;;;;;;;;0DAS7D"}
+{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const citationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const referenceWithPreview: PackagedReference = props => {\n      const mergedReferenceProps = {\n        citation: index,\n        ...referenceProps,\n        ...props,\n      } as ReferenceProps;\n\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference {...mergedReferenceProps} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: citationWithPreview,\n      Reference: referenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","citationPreviewProps","useReferenceCitationPreview","citationPreviewSurfaceProps","citationProps","components","previewContentProps","positioning","withArrow","useMemo","PreviewTrigger","PreviewSurface","aria-label","referenceHref","index","referenceProps","primaryText","secondaryText","sensitivityLabelProps","SensitivityLabel","referenceWithPreview","mergedReferenceProps","citation","_jsxs","Preview","closeOnScroll","trapFocus","referencePreviewProps","Reference","referencePreviewSurfaceProps","PreviewContent","tabIndex","graphic","children","PreviewMetadata","_previewContentProps_content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;4BACA;iEAEuB;iCAEoC;8BASpD;uCAC0B;0BASR;6BACC;AAgC1B,6IAA6I;AAC7I,MAAMA,sBAAsBC,CAAAA;UAC1BC,iBAAMA,IAAAA,2CAAiBC,EAAAA,CAAAA,UAA2BC,QAAWA,OAAQC;UAErEC,sBAAMA,OAAsBC,WAAMC,CAAAA,CAAAA;uBAE9BN,IAAeO;yBAEf;yBACGC;OACL;QAAAR;KACA;UAACA,6BAAAA,IAAAA,+BAAAA,EAAAA,qBAAAA,yBAAAA,OAAAA;WAAe,WAAA,GAAAS,IAAAA,eAAA,EAAAC,kBAAA,EAAA;QAGlB,GAAAX,wBAAMY;QAENC,SAAAD;;;;IACF,MAAA,EAEAE,oBAAaC,EACXC,2BACEF,EAWFG,aAAMC,OACJ,qBA2BWC,uBA1BT,8BACwB,gBAACC,uBAAyB;uBAAkBC,OAASC,OAAA,CAAA;oCAAKR,CAAAA;;4EAC7ES,EAAAA;;;;;;;;qDAKD,EAAAA,4BAACC,EAAAA;6CAAmBR,GAAAA,IAAAA,eAAAA,EAAAA,kBAAAA,EAAAA;;;;;;mFAISS,EAAAA;sDAAyCC;kGAA6B,EAAA;;8FACxFC,EAAAA;;iEAGA,EAAEC,MAAAA,OAAAA,CAAAA;;;;;8DAMPC,QAAWD,mBAAET,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,OAAAA;iEACbW,QAAeX,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;gGACH,EAAEA;;yEAEfY,QAAAA,wBAA0BC,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAAA;2EAAqBD,QAAqBZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAW,aAAA;;;yDACpEX,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;;;;;;;;;;cAOXc,uBAAMA,CAAAA;kBACJC,uBAAMA;0BACJC;iCACGP;wBACH;;;mBAGF,WAAA,GAAAQ,IAAAA,gBAAA,EAAAC,qBACGA,EAAAA;+BAAQC;6BAAclB;;2BAAiCmB;2BAAUlB;wCAAcmB;;;mEAC9E,EAAAC,sBAAClB,EAAAA;mDACC;;;;;oEAEF,EAACC,4BAAAA,EAAAA;;2CAAmBkB,GAAAA,IAAAA,eAAAA,EAAAA,2BAAAA,EAA4B;yDAC9C,GAAAhC,IAAAA,eAAA,EAAAX,qBAAC4C;;;;;;8DAGqFC,QAAAA,mBAAW,KAAA,IAAA,KAAA,IAAAhB,eAAAiB,OAAA;yEACxFlB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;;kEAGEC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;yEAENA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAgBkB;;0EAElBC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;yDACK,WAAE5B,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;4DACNU;;gEACAC,wBAAeX,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,OAAqBW,MAAAA,QAAakB,iCAAA,KAAA,IAAAA,+BAAAR,0BAAA,QAAAA,0BAAA,KAAA,IAAA,KAAA,IAAAA,sBAAAM,QAAA;6BAAA;;;;;;;;;;;;;;;;;;;;;;0DAS7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-reference",
-  "version": "0.0.0-nightly-20240520-0407-55b74dbd.1",
+  "version": "0.0.0-nightly-20240523-0404-0f9673a1.1",
   "description": "Fluent AI controls for citations and references",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,19 +12,19 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-preview": "0.0.0-nightly-20240520-0407-55b74dbd.1",
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240520-0407-55b74dbd.1",
-    "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240520-0407-55b74dbd.1",
+    "@fluentui-copilot/react-preview": "0.0.0-nightly-20240523-0404-0f9673a1.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20240523-0404-0f9673a1.1",
+    "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240523-0404-0f9673a1.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
-    "@fluentui/react-components": ">=9.49.2 <10.0.0",
-    "@fluentui/react-context-selector": ">=9.1.59 <10.0.0",
-    "@fluentui/react-icons": ">=2.0.239 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.37 <10.0.0",
-    "@fluentui/react-shared-contexts": ">=9.18.0 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.8 <10.0.0",
+    "@fluentui/react-components": ">=9.52.0 <10.0.0",
+    "@fluentui/react-context-selector": ">=9.1.60 <10.0.0",
+    "@fluentui/react-icons": ">=2.0.240 <3.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.38 <10.0.0",
+    "@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
+    "@fluentui/react-utilities": ">=9.18.9 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",