@fluentui-copilot/react-reference 0.9.0 → 0.10.0

package/lib/components/Citation/useCitation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  PopoverSurface,\n  mergeCallbacks,\n  slot,\n  useFluent,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-components';\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-components';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\n\ntype CitationInternalState = {\n  openByClick: boolean;\n  openByHoverOverCitation: boolean;\n  openByHoverOverPopover: boolean;\n  openByKeyboard: boolean;\n};\n\nconst POPOVER_MOUSE_HIDE_DELAY = 500;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string): number => {\n  if (type === 'focus' || type === 'blur') {\n    return POPOVER_KEYBOARD_HIDE_DELAY;\n  }\n\n  return POPOVER_MOUSE_HIDE_DELAY;\n};\n\ntype TargetEvent<T> = React.MouseEvent<T> | React.FocusEvent<T>;\n\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLElement>): CitationState => {\n  const { popover, popoverSurface, referenceHref, block = false, ...otherProps } = props;\n\n  const { targetDocument } = useFluent();\n  const [setTimeout, clearTimeout] = useTimeout();\n  const popoverId = useId('citation-popover-');\n\n  const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);\n\n  const { current: citationInternalState } = React.useRef<CitationInternalState>({\n    openByClick: false,\n    openByHoverOverCitation: false,\n    openByHoverOverPopover: false,\n    openByKeyboard: false,\n  });\n\n  const isOpen = () => {\n    return (\n      citationInternalState.openByClick ||\n      citationInternalState.openByHoverOverCitation ||\n      citationInternalState.openByHoverOverPopover ||\n      citationInternalState.openByKeyboard\n    );\n  };\n\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const preventDefaultClose = React.useRef(false);\n\n  const handleCitationTargetEnter = (e: TargetEvent<HTMLSpanElement>): void => {\n    citationInternalState.openByHoverOverCitation = true;\n\n    // We want to disable auto focus only if the popover is being opened by hovering over the citation\n    if (!citationInternalState.openByClick && !citationInternalState.openByKeyboard) {\n      setDisableAutoFocus(true);\n    }\n\n    setIsPopoverOpen(isOpen());\n  };\n\n  const handleCitationTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n    citationInternalState.openByHoverOverCitation = false;\n    setTimeout(() => {\n      setIsPopoverOpen(isOpen());\n    }, getDelay(e.type));\n  };\n\n  const handleCitationClick = (e: TargetEvent<HTMLSpanElement>): void => {\n    // Setting preventDefaultClose so that onPopoverOpenChange does not apply its logic when click is on the citation as we want to control that behavior.\n    preventDefaultClose.current = true;\n\n    // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.\n    setDisableAutoFocus(false);\n\n    // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.\n    citationInternalState.openByClick = citationInternalState.openByKeyboard\n      ? false\n      : !citationInternalState.openByClick;\n    citationInternalState.openByHoverOverCitation = false;\n    citationInternalState.openByHoverOverPopover = false;\n    citationInternalState.openByKeyboard = false;\n\n    setIsPopoverOpen(isOpen());\n  };\n\n  const handleCitationKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === Enter) {\n      clearTimeout();\n\n      // Setting default prevented so the enter key does not trigger a click event or onPopoverOpenChange.\n      e.preventDefault();\n\n      // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via keyboard.\n      setDisableAutoFocus(false);\n\n      // If openByClick is true, then the popover was already opened via click and we always want to close it.\n      citationInternalState.openByKeyboard = citationInternalState.openByClick\n        ? false\n        : !citationInternalState.openByKeyboard;\n      citationInternalState.openByClick = false;\n      citationInternalState.openByHoverOverCitation = false;\n      citationInternalState.openByHoverOverPopover = false;\n\n      setIsPopoverOpen(isOpen());\n    }\n  };\n\n  const handlePopoverTargetEnter = (e: TargetEvent<HTMLDivElement>): void => {\n    citationInternalState.openByHoverOverPopover = true;\n    setIsPopoverOpen(isOpen());\n  };\n\n  const handlePopoverTargetLeave = (e: TargetEvent<HTMLDivElement>): void => {\n    citationInternalState.openByHoverOverPopover = false;\n    setTimeout(() => {\n      setIsPopoverOpen(isOpen());\n    }, getDelay(e.type));\n  };\n\n  const onPopoverOpenChange = (e: OpenPopoverEvents, data: OnOpenChangeData): void => {\n    if (!data.open) {\n      // We set all open state to false if preventDefaultClose was not set to true\n      if (!preventDefaultClose.current) {\n        clearTimeout();\n        citationInternalState.openByClick = false;\n        citationInternalState.openByHoverOverCitation = false;\n        citationInternalState.openByHoverOverPopover = false;\n        citationInternalState.openByKeyboard = false;\n\n        // use isOpen if managing owned popover, otherwise use data.open\n        const open = popover ? isOpen() : data.open;\n        setIsPopoverOpen(open);\n      }\n    }\n\n    preventDefaultClose.current = false;\n  };\n\n  // hitting escape should close the popover if it was opened by hover\n  // this is necessary to attach to the document because focus is likely not within the citation or popover\n  useIsomorphicLayoutEffect(() => {\n    if (isPopoverOpen) {\n      const onDocumentKeyDown = (e: KeyboardEvent) => {\n        const openedByHover = !citationInternalState.openByClick && !citationInternalState.openByKeyboard;\n        if (openedByHover && e.key === Escape) {\n          clearTimeout();\n\n          // We set state back to its default if the Escape key has been pressed\n          setDisableAutoFocus(true);\n          citationInternalState.openByClick = false;\n          citationInternalState.openByHoverOverCitation = false;\n          citationInternalState.openByHoverOverPopover = false;\n          citationInternalState.openByKeyboard = false;\n\n          setIsPopoverOpen(isOpen());\n\n          e.stopPropagation();\n        }\n      };\n\n      targetDocument?.addEventListener('keydown', onDocumentKeyDown, { capture: true });\n\n      return () => {\n        targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n      };\n    }\n  }, [targetDocument, isPopoverOpen]);\n\n  const isPopoverLocked =\n    (usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean)) ||\n    citationInternalState.openByClick ||\n    citationInternalState.openByKeyboard;\n\n  const state: CitationState = {\n    block,\n    disableAutoFocus,\n    isPopoverOpen,\n    isPopoverLocked,\n    onPopoverOpenChange,\n    components: {\n      root: 'a',\n      popover: 'div',\n      popoverSurface: PopoverSurface,\n    },\n    root: slot.always(\n      getNativeElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: null,\n        'aria-expanded': null,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n    popover: slot.optional(popover, { elementType: 'div' }),\n    popoverSurface: slot.optional(popoverSurface, {\n      defaultProps: {\n        id: popoverId,\n        'aria-labelledby': popoverId,\n      },\n      elementType: PopoverSurface,\n      renderByDefault: true,\n    }),\n  };\n\n  // attach popover handling events only if a popover is present\n\n  if (state.popover) {\n    state.root.onMouseEnter = mergeCallbacks(state.root.onMouseEnter, handleCitationTargetEnter);\n    state.root.onMouseLeave = mergeCallbacks(state.root.onMouseLeave, handleCitationTargetLeave);\n    state.root.onBlur = mergeCallbacks(state.root.onBlur, handleCitationTargetLeave);\n    state.root.onClick = mergeCallbacks(state.root.onClick, handleCitationClick);\n    state.root.onKeyDown = mergeCallbacks(state.root.onKeyDown, handleCitationKeyDown);\n    state.popover.onMouseEnter = mergeCallbacks(state.popover.onMouseEnter, handlePopoverTargetEnter);\n    state.popover.onMouseLeave = mergeCallbacks(state.popover.onMouseLeave, handlePopoverTargetLeave);\n    state.popover.onFocus = mergeCallbacks(state.popover.onFocus, handlePopoverTargetEnter);\n  }\n\n  return state;\n};\n"],"names":["React","getNativeElementProps","PopoverSurface","mergeCallbacks","slot","useFluent","useId","useIsomorphicLayoutEffect","Enter","Escape","useTimeout","usePreviewContext_unstable","POPOVER_MOUSE_HIDE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","useCitation_unstable","props","ref","popover","popoverSurface","referenceHref","block","otherProps","targetDocument","setTimeout","clearTimeout","popoverId","disableAutoFocus","setDisableAutoFocus","useState","current","citationInternalState","useRef","openByClick","openByHoverOverCitation","openByHoverOverPopover","openByKeyboard","isOpen","isPopoverOpen","setIsPopoverOpen","preventDefaultClose","handleCitationTargetEnter","e","handleCitationTargetLeave","handleCitationClick","handleCitationKeyDown","key","preventDefault","handlePopoverTargetEnter","handlePopoverTargetLeave","onPopoverOpenChange","data","open","onDocumentKeyDown","openedByHover","stopPropagation","addEventListener","capture","removeEventListener","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","elementType","optional","defaultProps","id","renderByDefault","onMouseEnter","onMouseLeave","onBlur","onClick","onKeyDown","onFocus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,cAAc,EACdC,cAAc,EACdC,IAAI,EACJC,SAAS,EACTC,KAAK,EACLC,yBAAyB,QACpB,6BAA6B;AACpC,SAASC,KAAK,EAAEC,MAAM,QAAQ,0BAA0B;AACxD,SAASC,UAAU,QAAQ,4BAA4B;AAGvD,SAASC,0BAA0B,QAAQ,kCAAkC;AAS7E,MAAMC,2BAA2B;AACjC,MAAMC,8BAA8B;AAEpC,MAAMC,WAAW,CAACC;IAChB,IAAIA,SAAS,WAAWA,SAAS,QAAQ;QACvC,OAAOF;IACT;IAEA,OAAOD;AACT;AAIA;;;;;;;;CAQC,GACD,OAAO,MAAMI,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGN;IAEjF,MAAM,EAAEO,cAAc,EAAE,GAAGnB;IAC3B,MAAM,CAACoB,YAAYC,aAAa,GAAGhB;IACnC,MAAMiB,YAAYrB,MAAM;IAExB,MAAM,CAACsB,kBAAkBC,oBAAoB,GAAG7B,MAAM8B,QAAQ,CAAC;IAE/D,MAAM,EAAEC,SAASC,qBAAqB,EAAE,GAAGhC,MAAMiC,MAAM,CAAwB;QAC7EC,aAAa;QACbC,yBAAyB;QACzBC,wBAAwB;QACxBC,gBAAgB;IAClB;IAEA,MAAMC,SAAS;QACb,OACEN,sBAAsBE,WAAW,IACjCF,sBAAsBG,uBAAuB,IAC7CH,sBAAsBI,sBAAsB,IAC5CJ,sBAAsBK,cAAc;IAExC;IAEA,MAAM,CAACE,eAAeC,iBAAiB,GAAGxC,MAAM8B,QAAQ,CAAC;IACzD,MAAMW,sBAAsBzC,MAAMiC,MAAM,CAAC;IAEzC,MAAMS,4BAA4B,CAACC;QACjCX,sBAAsBG,uBAAuB,GAAG;QAEhD,kGAAkG;QAClG,IAAI,CAACH,sBAAsBE,WAAW,IAAI,CAACF,sBAAsBK,cAAc,EAAE;YAC/ER,oBAAoB;QACtB;QAEAW,iBAAiBF;IACnB;IAEA,MAAMM,4BAA4B,CAACD;QACjCX,sBAAsBG,uBAAuB,GAAG;QAChDV,WAAW;YACTe,iBAAiBF;QACnB,GAAGxB,SAAS6B,EAAE5B,IAAI;IACpB;IAEA,MAAM8B,sBAAsB,CAACF;QAC3B,sJAAsJ;QACtJF,oBAAoBV,OAAO,GAAG;QAE9B,uHAAuH;QACvHF,oBAAoB;QAEpB,8GAA8G;QAC9GG,sBAAsBE,WAAW,GAAGF,sBAAsBK,cAAc,GACpE,QACA,CAACL,sBAAsBE,WAAW;QACtCF,sBAAsBG,uBAAuB,GAAG;QAChDH,sBAAsBI,sBAAsB,GAAG;QAC/CJ,sBAAsBK,cAAc,GAAG;QAEvCG,iBAAiBF;IACnB;IAEA,MAAMQ,wBAAwB,CAACH;QAC7B,IAAIA,EAAEI,GAAG,KAAKvC,OAAO;YACnBkB;YAEA,oGAAoG;YACpGiB,EAAEK,cAAc;YAEhB,0HAA0H;YAC1HnB,oBAAoB;YAEpB,wGAAwG;YACxGG,sBAAsBK,cAAc,GAAGL,sBAAsBE,WAAW,GACpE,QACA,CAACF,sBAAsBK,cAAc;YACzCL,sBAAsBE,WAAW,GAAG;YACpCF,sBAAsBG,uBAAuB,GAAG;YAChDH,sBAAsBI,sBAAsB,GAAG;YAE/CI,iBAAiBF;QACnB;IACF;IAEA,MAAMW,2BAA2B,CAACN;QAChCX,sBAAsBI,sBAAsB,GAAG;QAC/CI,iBAAiBF;IACnB;IAEA,MAAMY,2BAA2B,CAACP;QAChCX,sBAAsBI,sBAAsB,GAAG;QAC/CX,WAAW;YACTe,iBAAiBF;QACnB,GAAGxB,SAAS6B,EAAE5B,IAAI;IACpB;IAEA,MAAMoC,sBAAsB,CAACR,GAAsBS;QACjD,IAAI,CAACA,KAAKC,IAAI,EAAE;YACd,4EAA4E;YAC5E,IAAI,CAACZ,oBAAoBV,OAAO,EAAE;gBAChCL;gBACAM,sBAAsBE,WAAW,GAAG;gBACpCF,sBAAsBG,uBAAuB,GAAG;gBAChDH,sBAAsBI,sBAAsB,GAAG;gBAC/CJ,sBAAsBK,cAAc,GAAG;gBAEvC,gEAAgE;gBAChE,MAAMgB,OAAOlC,UAAUmB,WAAWc,KAAKC,IAAI;gBAC3Cb,iBAAiBa;YACnB;QACF;QAEAZ,oBAAoBV,OAAO,GAAG;IAChC;IAEA,oEAAoE;IACpE,yGAAyG;IACzGxB,0BAA0B;QACxB,IAAIgC,eAAe;YACjB,MAAMe,oBAAoB,CAACX;gBACzB,MAAMY,gBAAgB,CAACvB,sBAAsBE,WAAW,IAAI,CAACF,sBAAsBK,cAAc;gBACjG,IAAIkB,iBAAiBZ,EAAEI,GAAG,KAAKtC,QAAQ;oBACrCiB;oBAEA,sEAAsE;oBACtEG,oBAAoB;oBACpBG,sBAAsBE,WAAW,GAAG;oBACpCF,sBAAsBG,uBAAuB,GAAG;oBAChDH,sBAAsBI,sBAAsB,GAAG;oBAC/CJ,sBAAsBK,cAAc,GAAG;oBAEvCG,iBAAiBF;oBAEjBK,EAAEa,eAAe;gBACnB;YACF;YAEAhC,2BAAAA,qCAAAA,eAAgBiC,gBAAgB,CAAC,WAAWH,mBAAmB;gBAAEI,SAAS;YAAK;YAE/E,OAAO;gBACLlC,2BAAAA,qCAAAA,eAAgBmC,mBAAmB,CAAC,WAAWL,mBAAmB;oBAAEI,SAAS;gBAAK;YACpF;QACF;IACF,GAAG;QAAClC;QAAgBe;KAAc;IAElC,MAAMqB,kBACJ,AAACjD,2BAA2BkD,CAAAA,MAAOA,IAAIC,eAAe,KAAM7C,KAAK,CAAC,gBAAgB,IAClFe,sBAAsBE,WAAW,IACjCF,sBAAsBK,cAAc;IAEtC,MAAM0B,QAAuB;QAC3BzC;QACAM;QACAW;QACAqB;QACAT;QACAa,YAAY;YACVC,MAAM;YACN9C,SAAS;YACTC,gBAAgBlB;QAClB;QACA+D,MAAM7D,KAAK8D,MAAM,CACfjE,sBAAsB,KAAK;YACzBiB;YACAiD,MAAM9C;YACN+C,MAAM;YACN,iBAAiB;YACjB,GAAG7C,UAAU;QACf,IACA;YAAE8C,aAAa;QAAI;QAErBlD,SAASf,KAAKkE,QAAQ,CAACnD,SAAS;YAAEkD,aAAa;QAAM;QACrDjD,gBAAgBhB,KAAKkE,QAAQ,CAAClD,gBAAgB;YAC5CmD,cAAc;gBACZC,IAAI7C;gBACJ,mBAAmBA;YACrB;YACA0C,aAAanE;YACbuE,iBAAiB;QACnB;IACF;IAEA,8DAA8D;IAE9D,IAAIV,MAAM5C,OAAO,EAAE;QACjB4C,MAAME,IAAI,CAACS,YAAY,GAAGvE,eAAe4D,MAAME,IAAI,CAACS,YAAY,EAAEhC;QAClEqB,MAAME,IAAI,CAACU,YAAY,GAAGxE,eAAe4D,MAAME,IAAI,CAACU,YAAY,EAAE/B;QAClEmB,MAAME,IAAI,CAACW,MAAM,GAAGzE,eAAe4D,MAAME,IAAI,CAACW,MAAM,EAAEhC;QACtDmB,MAAME,IAAI,CAACY,OAAO,GAAG1E,eAAe4D,MAAME,IAAI,CAACY,OAAO,EAAEhC;QACxDkB,MAAME,IAAI,CAACa,SAAS,GAAG3E,eAAe4D,MAAME,IAAI,CAACa,SAAS,EAAEhC;QAC5DiB,MAAM5C,OAAO,CAACuD,YAAY,GAAGvE,eAAe4D,MAAM5C,OAAO,CAACuD,YAAY,EAAEzB;QACxEc,MAAM5C,OAAO,CAACwD,YAAY,GAAGxE,eAAe4D,MAAM5C,OAAO,CAACwD,YAAY,EAAEzB;QACxEa,MAAM5C,OAAO,CAAC4D,OAAO,GAAG5E,eAAe4D,MAAM5C,OAAO,CAAC4D,OAAO,EAAE9B;IAChE;IAEA,OAAOc;AACT,EAAE"}
+{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLElement>): CitationState => {\n  const { referenceHref, block = false, ...otherProps } = props;\n\n  const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n  const state: CitationState = {\n    block,\n    isPopoverLocked,\n    components: {\n      root: 'a',\n    },\n    root: slot.always(\n      getNativeElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: null,\n        'aria-expanded': null,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["getNativeElementProps","slot","usePreviewContext_unstable","useCitation_unstable","props","ref","referenceHref","block","otherProps","isPopoverLocked","ctx","isPreviewLocked","state","components","root","always","href","role","elementType"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,IAAI,QAAQ,6BAA6B;AACzE,SAASC,0BAA0B,QAAQ,kCAAkC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,kBAAkBP,2BAA2BQ,CAAAA,MAAOA,IAAIC,eAAe,KAAMP,KAAK,CAAC,gBAAgB;IAEzG,MAAMQ,QAAuB;QAC3BL;QACAE;QACAI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,sBAAsB,KAAK;YACzBK;YACAW,MAAMV;YACNW,MAAM;YACN,iBAAiB;YACjB,GAAGT,UAAU;QACf,IACA;YAAEU,aAAa;QAAI;IAEvB;IAEA,OAAON;AACT,EAAE"}

package/lib/components/Citation/useCitationStyles.js

@@ -1,8 +1,6 @@
 import { __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
 export const citationClassNames = {
-  root: 'fai-Citation',
-  popover: 'fai-Citation__popover',
-  popoverSurface: 'fai-Citation__popoverSurface'
+  root: 'fai-Citation'
 };
 const useCitationBaseClassName = __resetStyles("rad2akz", "r1hx2d32", [".rad2akz{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);color:var(--colorNeutralForeground2);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-left:var(--spacingHorizontalXXS);margin-right:var(--spacingHorizontalXXS);}", ".rad2akz:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".rad2akz:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}", ".r1hx2d32{display:inline-flex;justify-content:center;box-sizing:border-box;align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase100);color:var(--colorNeutralForeground2);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);min-width:14px;height:14px;vertical-align:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);border-radius:var(--borderRadiusMedium);text-decoration:none;margin-right:var(--spacingHorizontalXXS);margin-left:var(--spacingHorizontalXXS);}", ".r1hx2d32:hover{cursor:pointer;color:var(--colorBrandForeground2Hover);border-color:var(--colorBrandStroke2Hover);background-color:var(--colorBrandBackground2Hover);}", ".r1hx2d32:hover:active{cursor:pointer;color:var(--colorBrandForeground2Pressed);border-color:var(--colorBrandStroke2Pressed);background-color:var(--colorBrandBackground2Pressed);}"]);
 const useCitationRootStyles = __styles({
@@ -36,9 +34,6 @@ export const useCitationStyles_unstable = state => {
   const rootBaseClassName = useCitationBaseClassName();
   const rootStyles = useCitationRootStyles();
   state.root.className = mergeClasses(citationClassNames.root, state.isPopoverLocked && rootStyles.isPopoverLocked, state.block && rootStyles.isBlock, rootBaseClassName, state.root.className);
-  if (state.popover) {
-    state.popover.className = mergeClasses(citationClassNames.popover, state.popover.className);
-  }
   return state;
 };
 //# sourceMappingURL=useCitationStyles.js.map

package/lib/components/Citation/useCitationStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCitationStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n  root: 'fai-Citation',\n  popover: 'fai-Citation__popover',\n  popoverSurface: 'fai-Citation__popoverSurface',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  justifyContent: 'center',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  ...typographyStyles.caption2Strong,\n\n  color: tokens.colorNeutralForeground2,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n\n  minWidth: '14px',\n  height: '14px',\n  verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n\n  borderRadius: tokens.borderRadiusMedium,\n\n  textDecoration: 'none',\n\n  marginLeft: tokens.spacingHorizontalXXS,\n  marginRight: tokens.spacingHorizontalXXS,\n\n  ':hover': {\n    cursor: 'pointer',\n    color: tokens.colorBrandForeground2Hover,\n    borderColor: tokens.colorBrandStroke2Hover,\n    backgroundColor: tokens.colorBrandBackground2Hover,\n  },\n\n  ':hover:active': {\n    cursor: 'pointer',\n    color: tokens.colorBrandForeground2Pressed,\n    borderColor: tokens.colorBrandStroke2Pressed,\n    backgroundColor: tokens.colorBrandBackground2Pressed,\n  },\n});\n\nconst useCitationRootStyles = makeStyles({\n  isBlock: {\n    display: 'flex',\n    marginLeft: 0,\n    marginRight: 0,\n  },\n  isPopoverLocked: {\n    color: tokens.colorBrandForeground2Pressed,\n    ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n    backgroundColor: tokens.colorBrandBackground2,\n    ':hover': {\n      color: tokens.colorBrandForeground2Pressed,\n      ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n  },\n});\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n  const rootBaseClassName = useCitationBaseClassName();\n  const rootStyles = useCitationRootStyles();\n  state.root.className = mergeClasses(\n    citationClassNames.root,\n    state.isPopoverLocked && rootStyles.isPopoverLocked,\n    state.block && rootStyles.isBlock,\n    rootBaseClassName,\n    state.root.className,\n  );\n  if (state.popover) {\n    state.popover.className = mergeClasses(citationClassNames.popover, state.popover.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","popover","popoverSurface","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","color","colorNeutralForeground2","border","strokeWidthThin","colorNeutralStroke2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,SAAS;IACTC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAA2BV,gBAAgB;IAC/CW,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGT,iBAAiBU,cAAc;IAElCC,OAAOZ,OAAOa,uBAAuB;IACrCC,QAAQ,CAAC,EAAEd,OAAOe,eAAe,CAAC,OAAO,EAAEf,OAAOgB,mBAAmB,CAAC,CAAC;IAEvEC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAElB,iBAAiBU,cAAc,CAACS,UAAU,CAAC,GAAG,EAAEnB,iBAAiBU,cAAc,CAACU,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAActB,OAAOuB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYzB,OAAO0B,oBAAoB;IACvCC,aAAa3B,OAAO0B,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRhB,OAAOZ,OAAO6B,0BAA0B;QACxCC,aAAa9B,OAAO+B,sBAAsB;QAC1CC,iBAAiBhC,OAAOiC,0BAA0B;IACpD;IAEA,iBAAiB;QACfL,QAAQ;QACRhB,OAAOZ,OAAOkC,4BAA4B;QAC1CJ,aAAa9B,OAAOmC,wBAAwB;QAC5CH,iBAAiBhC,OAAOoC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBxC,WAAW;IACvCyC,SAAS;QACP/B,SAAS;QACTkB,YAAY;QACZE,aAAa;IACf;IACAY,iBAAiB;QACf3B,OAAOZ,OAAOkC,4BAA4B;QAC1C,GAAGnC,WAAW+B,WAAW,CAAC9B,OAAOmC,wBAAwB,CAAC;QAC1DH,iBAAiBhC,OAAOwC,qBAAqB;QAC7C,UAAU;YACR5B,OAAOZ,OAAOkC,4BAA4B;YAC1C,GAAGnC,WAAW+B,WAAW,CAAC9B,OAAOmC,wBAAwB,CAAC;YAC1DH,iBAAiBhC,OAAOwC,qBAAqB;QAC/C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,oBAAoBrC;IAC1B,MAAMsC,aAAaP;IACnBK,MAAMvC,IAAI,CAAC0C,SAAS,GAAG/C,aACrBI,mBAAmBC,IAAI,EACvBuC,MAAMH,eAAe,IAAIK,WAAWL,eAAe,EACnDG,MAAMI,KAAK,IAAIF,WAAWN,OAAO,EACjCK,mBACAD,MAAMvC,IAAI,CAAC0C,SAAS;IAEtB,IAAIH,MAAMtC,OAAO,EAAE;QACjBsC,MAAMtC,OAAO,CAACyC,SAAS,GAAG/C,aAAaI,mBAAmBE,OAAO,EAAEsC,MAAMtC,OAAO,CAACyC,SAAS;IAC5F;IAEA,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["useCitationStyles.ts"],"sourcesContent":["import {\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n  root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  justifyContent: 'center',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  ...typographyStyles.caption2Strong,\n\n  color: tokens.colorNeutralForeground2,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n\n  minWidth: '14px',\n  height: '14px',\n  verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n\n  borderRadius: tokens.borderRadiusMedium,\n\n  textDecoration: 'none',\n\n  marginLeft: tokens.spacingHorizontalXXS,\n  marginRight: tokens.spacingHorizontalXXS,\n\n  ':hover': {\n    cursor: 'pointer',\n    color: tokens.colorBrandForeground2Hover,\n    borderColor: tokens.colorBrandStroke2Hover,\n    backgroundColor: tokens.colorBrandBackground2Hover,\n  },\n\n  ':hover:active': {\n    cursor: 'pointer',\n    color: tokens.colorBrandForeground2Pressed,\n    borderColor: tokens.colorBrandStroke2Pressed,\n    backgroundColor: tokens.colorBrandBackground2Pressed,\n  },\n});\n\nconst useCitationRootStyles = makeStyles({\n  isBlock: {\n    display: 'flex',\n    marginLeft: 0,\n    marginRight: 0,\n  },\n  isPopoverLocked: {\n    color: tokens.colorBrandForeground2Pressed,\n    ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n    backgroundColor: tokens.colorBrandBackground2,\n    ':hover': {\n      color: tokens.colorBrandForeground2Pressed,\n      ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n  },\n});\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n  const rootBaseClassName = useCitationBaseClassName();\n  const rootStyles = useCitationRootStyles();\n\n  state.root.className = mergeClasses(\n    citationClassNames.root,\n    state.isPopoverLocked && rootStyles.isPopoverLocked,\n    state.block && rootStyles.isBlock,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","color","colorNeutralForeground2","border","strokeWidthThin","colorNeutralStroke2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGP,iBAAiBQ,cAAc;IAElCC,OAAOV,OAAOW,uBAAuB;IACrCC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IAEvEC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEhB,iBAAiBQ,cAAc,CAACS,UAAU,CAAC,GAAG,EAAEjB,iBAAiBQ,cAAc,CAACU,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAAcpB,OAAOqB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYvB,OAAOwB,oBAAoB;IACvCC,aAAazB,OAAOwB,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRhB,OAAOV,OAAO2B,0BAA0B;QACxCC,aAAa5B,OAAO6B,sBAAsB;QAC1CC,iBAAiB9B,OAAO+B,0BAA0B;IACpD;IAEA,iBAAiB;QACfL,QAAQ;QACRhB,OAAOV,OAAOgC,4BAA4B;QAC1CJ,aAAa5B,OAAOiC,wBAAwB;QAC5CH,iBAAiB9B,OAAOkC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBtC,WAAW;IACvCuC,SAAS;QACP/B,SAAS;QACTkB,YAAY;QACZE,aAAa;IACf;IACAY,iBAAiB;QACf3B,OAAOV,OAAOgC,4BAA4B;QAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;QAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC7C,UAAU;YACR5B,OAAOV,OAAOgC,4BAA4B;YAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;YAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC/C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,oBAAoBrC;IAC1B,MAAMsC,aAAaP;IAEnBK,MAAMrC,IAAI,CAACwC,SAAS,GAAG7C,aACrBI,mBAAmBC,IAAI,EACvBqC,MAAMH,eAAe,IAAIK,WAAWL,eAAe,EACnDG,MAAMI,KAAK,IAAIF,WAAWN,OAAO,EACjCK,mBACAD,MAAMrC,IAAI,CAACwC,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/Reference/Reference.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { Button, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceSlots = {\n  /**\n   * The root slot.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Citation slot. Displays a `Citation`. Set the `null` to hide the citation.\n   */\n  citation: Slot<'div'>;\n\n  /**\n   * Media slot. Used to display Avatars, Icons, etc.\n   */\n  media: Slot<'div'>;\n\n  /**\n   * Actions slot.\n   */\n  actions: Slot<'div'>;\n\n  /**\n   * Label slot. Primary description of the reference.\n   */\n  label: NonNullable<Slot<'div'>>;\n\n  /**\n   * Sensitivity slot. Used to display a `SensitivityLabel`.\n   */\n  sensitivity: Slot<'span'>;\n\n  /**\n   * @deprecated Use `sensitivity` instead.\n   * Sensitivity label slot. Displays a label indicating how sensitive the information displayed in the reference is.\n   */\n  sensitivityLabel: Slot<'span'>;\n\n  /**\n   * Metadata slot. Container for `primaryText`, `secondaryText`, `tertiaryText` and `icon`.\n   */\n  metadata: NonNullable<Slot<'div'>>;\n\n  /**\n   * Primary text slot. First displayed metadata text.\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text slot. Second displayed metadata text.\n   */\n  secondaryText: Slot<'span'>;\n\n  /**\n   * Tertiary text slot. Third displayed metadata text.\n   */\n  tertiaryText: Slot<'span'>;\n\n  /**\n   * Icon slot. Icon displayed in metadata area.\n   */\n  icon: Slot<'span'>;\n\n  /**\n   * Content slot.\n   */\n  content: NonNullable<Slot<'div'>>;\n\n  /**\n   * Details button slot. Used to expand/collapse the reference.\n   */\n  detailsButton: Slot<typeof Button>;\n};\n\n/**\n * Reference Props\n */\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> &\n  CopilotMode & {\n    /**\n     * Numeric index associated with `Citation`.\n     */\n    index: number;\n\n    /**\n     * HREF back to the `Citation` this `Reference` is associated with.\n     */\n    citationHref?: string;\n\n    /**\n     * Unique ID associated with this `Reference`.\n     */\n    referenceId?: string;\n\n    /**\n     * Text snippet from the reference source.\n     */\n    excerpt?: string;\n\n    layout?: 'inline' | 'popover';\n  };\n\n/**\n * State used in rendering Reference\n */\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'mode' | 'layout' | 'index'>> & {\n    /**\n     * State used to renderer the `Reference` in an expanded state.\n     */\n    isExpanded: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAiHI"}
+{"version":3,"sources":["Reference.types.ts"],"sourcesContent":["import type { CopilotMode } from '@fluentui-copilot/react-provider';\nimport type { Button, ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceSlots = {\n  /**\n   * The root slot.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Citation slot. Displays a `Citation`. Set the `null` to hide the citation.\n   */\n  citation: Slot<'div'>;\n\n  /**\n   * Media slot. Used to display Avatars, Icons, etc.\n   */\n  media: Slot<'div'>;\n\n  /**\n   * Actions slot.\n   */\n  actions: Slot<'div'>;\n\n  /**\n   * Label slot. Primary description of the reference.\n   */\n  label: NonNullable<Slot<'div'>>;\n\n  /**\n   * Sensitivity slot. Used to display a `SensitivityLabel`.\n   */\n  sensitivity: Slot<'span'>;\n\n  /**\n   * Metadata slot. Container for `primaryText`, `secondaryText`, `tertiaryText` and `icon`.\n   */\n  metadata: NonNullable<Slot<'div'>>;\n\n  /**\n   * Primary text slot. First displayed metadata text.\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text slot. Second displayed metadata text.\n   */\n  secondaryText: Slot<'span'>;\n\n  /**\n   * Tertiary text slot. Third displayed metadata text.\n   */\n  tertiaryText: Slot<'span'>;\n\n  /**\n   * Icon slot. Icon displayed in metadata area.\n   */\n  icon: Slot<'span'>;\n\n  /**\n   * Content slot.\n   */\n  content: NonNullable<Slot<'div'>>;\n\n  /**\n   * Details button slot. Used to expand/collapse the reference.\n   */\n  detailsButton: Slot<typeof Button>;\n};\n\n/**\n * Reference Props\n */\nexport type ReferenceProps = ComponentProps<Partial<ReferenceSlots>> &\n  CopilotMode & {\n    /**\n     * Numeric index associated with `Citation`.\n     */\n    index: number;\n\n    /**\n     * HREF back to the `Citation` this `Reference` is associated with.\n     */\n    citationHref?: string;\n\n    /**\n     * Unique ID associated with this `Reference`.\n     */\n    referenceId?: string;\n\n    /**\n     * Text snippet from the reference source.\n     */\n    excerpt?: string;\n\n    /**\n     * @deprecated Inline layout is the only one that is available, use `Preview` component instead for an equivalent to a `Reference` with a popover layout inside of a `Popover`.\n     */\n    layout?: 'inline' | 'popover';\n  };\n\n/**\n * State used in rendering Reference\n */\nexport type ReferenceState = ComponentState<ReferenceSlots> &\n  Required<Pick<ReferenceProps, 'mode' | 'layout' | 'index'>> & {\n    /**\n     * State used to renderer the `Reference` in an expanded state.\n     */\n    isExpanded: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WA8GI"}

package/lib/components/Reference/renderReference.js

@@ -8,7 +8,7 @@ export const renderReference_unstable = state => {
   return /*#__PURE__*/_jsxs(state.root, {
     children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.label, {}), state.actions && /*#__PURE__*/_jsxs(state.actions, {
       children: [state.actions.children, state.detailsButton && /*#__PURE__*/_jsx(state.detailsButton, {})]
-    }), state.sensitivityLabel && /*#__PURE__*/_jsx(state.sensitivityLabel, {}), state.sensitivity && /*#__PURE__*/_jsx(state.sensitivity, {}), /*#__PURE__*/_jsxs(state.metadata, {
+    }), state.sensitivity && /*#__PURE__*/_jsx(state.sensitivity, {}), /*#__PURE__*/_jsxs(state.metadata, {
       children: [state.primaryText && /*#__PURE__*/_jsx(state.primaryText, {}), state.secondaryText && /*#__PURE__*/_jsx(state.secondaryText, {}), state.tertiaryText && /*#__PURE__*/_jsx(state.tertiaryText, {}), state.icon && /*#__PURE__*/_jsx(state.icon, {}), state.metadata.children]
     }), /*#__PURE__*/_jsx(state.content, {})]
   });

package/lib/components/Reference/renderReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\n\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\n/**\n * Render the final JSX of Reference\n */\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  return (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.media && <state.media />}\n      <state.label />\n      {state.actions && (\n        <state.actions>\n          {state.actions.children}\n          {state.detailsButton && <state.detailsButton />}\n        </state.actions>\n      )}\n      {state.sensitivityLabel && <state.sensitivityLabel />}\n      {state.sensitivity && <state.sensitivity />}\n      <state.metadata>\n        {state.primaryText && <state.primaryText />}\n        {state.secondaryText && <state.secondaryText />}\n        {state.tertiaryText && <state.tertiaryText />}\n        {state.icon && <state.icon />}\n        {state.metadata.children}\n      </state.metadata>\n      <state.content />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderReference_unstable","state","root","citation","media","label","actions","children","detailsButton","sensitivityLabel","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,KAAK,kBAAI,KAACH,MAAMG,KAAK;0BAC5B,KAACH,MAAMI,KAAK;YACXJ,MAAMK,OAAO,kBACZ,MAACL,MAAMK,OAAO;;oBACXL,MAAMK,OAAO,CAACC,QAAQ;oBACtBN,MAAMO,aAAa,kBAAI,KAACP,MAAMO,aAAa;;;YAG/CP,MAAMQ,gBAAgB,kBAAI,KAACR,MAAMQ,gBAAgB;YACjDR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACT,MAAMU,QAAQ;;oBACZV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;oBACvCX,MAAMY,aAAa,kBAAI,KAACZ,MAAMY,aAAa;oBAC3CZ,MAAMa,YAAY,kBAAI,KAACb,MAAMa,YAAY;oBACzCb,MAAMc,IAAI,kBAAI,KAACd,MAAMc,IAAI;oBACzBd,MAAMU,QAAQ,CAACJ,QAAQ;;;0BAE1B,KAACN,MAAMe,OAAO;;;AAGpB,EAAE"}
+{"version":3,"sources":["renderReference.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\n\nimport type { ReferenceState, ReferenceSlots } from './Reference.types';\n\n/**\n * Render the final JSX of Reference\n */\nexport const renderReference_unstable = (state: ReferenceState) => {\n  assertSlots<ReferenceSlots>(state);\n\n  return (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.media && <state.media />}\n      <state.label />\n      {state.actions && (\n        <state.actions>\n          {state.actions.children}\n          {state.detailsButton && <state.detailsButton />}\n        </state.actions>\n      )}\n      {state.sensitivity && <state.sensitivity />}\n      <state.metadata>\n        {state.primaryText && <state.primaryText />}\n        {state.secondaryText && <state.secondaryText />}\n        {state.tertiaryText && <state.tertiaryText />}\n        {state.icon && <state.icon />}\n        {state.metadata.children}\n      </state.metadata>\n      <state.content />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderReference_unstable","state","root","citation","media","label","actions","children","detailsButton","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,KAAK,kBAAI,KAACH,MAAMG,KAAK;0BAC5B,KAACH,MAAMI,KAAK;YACXJ,MAAMK,OAAO,kBACZ,MAACL,MAAMK,OAAO;;oBACXL,MAAMK,OAAO,CAACC,QAAQ;oBACtBN,MAAMO,aAAa,kBAAI,KAACP,MAAMO,aAAa;;;YAG/CP,MAAMQ,WAAW,kBAAI,KAACR,MAAMQ,WAAW;0BACxC,MAACR,MAAMS,QAAQ;;oBACZT,MAAMU,WAAW,kBAAI,KAACV,MAAMU,WAAW;oBACvCV,MAAMW,aAAa,kBAAI,KAACX,MAAMW,aAAa;oBAC3CX,MAAMY,YAAY,kBAAI,KAACZ,MAAMY,YAAY;oBACzCZ,MAAMa,IAAI,kBAAI,KAACb,MAAMa,IAAI;oBACzBb,MAAMS,QAAQ,CAACH,QAAQ;;;0BAE1B,KAACN,MAAMc,OAAO;;;AAGpB,EAAE"}

package/lib/components/Reference/useReference.js

@@ -88,7 +88,6 @@ export const useReference_unstable = (props, ref) => {
       actions: 'div',
       label: 'div',
       sensitivity: 'span',
-      sensitivityLabel: 'span',
       metadata: 'div',
       content: 'div',
       primaryText: 'span',
@@ -109,7 +108,6 @@ export const useReference_unstable = (props, ref) => {
       defaultProps: {
         children: /*#__PURE__*/React.createElement(Citation, {
           block: true,
-          referenceId: referenceId,
           ...citationProps
         }, index)
       },
@@ -125,9 +123,6 @@ export const useReference_unstable = (props, ref) => {
     sensitivity: slot.optional(props.sensitivity, {
       elementType: 'span'
     }),
-    sensitivityLabel: slot.optional(props.sensitivityLabel, {
-      elementType: 'span'
-    }),
     metadata: slot.always(props.metadata, {
       elementType: 'div'
     }),

package/lib/components/Reference/useReference.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReference.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Button,\n  Caption1,\n  getNativeElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useId,\n  usePopoverContext_unstable as usePopoverContext,\n} from '@fluentui/react-components';\nimport {\n  ChevronDown24Regular,\n  ChevronUp24Regular,\n  ChevronDown16Regular,\n  ChevronUp16Regular,\n} from '@fluentui/react-icons';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport { Citation } from '../Citation';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\nimport { useReferenceGroupSetOpen } from '../../context/ReferenceGroupContext';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\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<HTMLElement>): ReferenceState => {\n  const { index, referenceId, citationHref, excerpt, layout = 'inline' } = props;\n\n  const mode = useCopilotMode(props.mode);\n\n  const labelId = useId();\n  const mediaId = useId();\n  const [isExpanded, setIsExpanded] = React.useState(layout === 'popover' ? true : false);\n\n  const setPopoverOpen = usePopoverContext(context => context.setOpen);\n\n  const onExpandClick: React.MouseEventHandler<HTMLButtonElement> = _e => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const label = slot.always(props.label, {\n    defaultProps: { id: labelId },\n    elementType: 'div',\n  });\n  const media = slot.optional(props.media, { defaultProps: { id: mediaId }, elementType: 'div' });\n  if (media && React.isValidElement<HTMLElement>(media.children)) {\n    media.children = React.cloneElement(media.children, {\n      className: mergeClasses(media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  if (media?.id) {\n    label['aria-describedby'] = label['aria-describedby']?.concat(media.id) ?? media.id;\n  }\n\n  const ariaLabelledByProp = props['aria-labelledby'];\n  const groupSemantics = React.useMemo(() => {\n    return layout === 'inline'\n      ? {\n          role: 'group',\n          'aria-labelledby': `${ariaLabelledByProp ?? ''} ${label.id}`,\n          tabIndex: -1,\n        }\n      : {};\n  }, [layout, ariaLabelledByProp, label.id]);\n\n  // Within a popup, a citation should function as a close button\n  const citationProps = React.useMemo(() => {\n    const onPopoverCloseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      setPopoverOpen(e, false);\n\n      // don't navigate\n      e.preventDefault();\n    };\n\n    return layout === 'popover'\n      ? {\n          referenceHref: '#',\n          tabIndex: -1,\n          'aria-label': `Reference ${index}, close`,\n          onClick: onPopoverCloseClick,\n        }\n      : {\n          referenceHref: citationHref,\n        };\n  }, [layout, citationHref, index, setPopoverOpen]);\n\n  const state: ReferenceState = {\n    isExpanded,\n    mode: layout === 'popover' ? 'sidecar' : mode,\n    layout,\n    index,\n    components: {\n      root: 'div',\n      citation: 'div',\n      media: 'div',\n      actions: 'div',\n      label: 'div',\n      sensitivity: 'span',\n      sensitivityLabel: 'span',\n      metadata: 'div',\n      content: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      icon: 'span',\n      detailsButton: Button,\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id: referenceId,\n        ...groupSemantics,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    citation: slot.optional(props.citation, {\n      defaultProps: {\n        children: (\n          <Citation block referenceId={referenceId} {...citationProps}>\n            {index}\n          </Citation>\n        ),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    media,\n    actions: slot.optional(layout === 'inline' ? props.actions : null, {\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    label,\n    sensitivity: slot.optional(props.sensitivity, { elementType: 'span' }),\n    sensitivityLabel: slot.optional(props.sensitivityLabel, { elementType: 'span' }),\n    metadata: slot.always(props.metadata, { elementType: 'div' }),\n    primaryText: slot.optional(props.primaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    tertiaryText: slot.optional(props.tertiaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children: excerpt && <Caption1>{excerpt}</Caption1>,\n      },\n      elementType: 'div',\n    }),\n    detailsButton: slot.optional(layout === 'inline' ? props.detailsButton : null, {\n      defaultProps: {\n        appearance: 'transparent',\n        'aria-expanded': isExpanded,\n        'aria-label': 'show details',\n        size: mode === 'sidecar' ? 'small' : 'medium',\n        icon: {\n          children: getIcon(isExpanded, mode),\n        },\n      },\n      renderByDefault: true,\n      elementType: Button,\n    }),\n  };\n\n  if (state.detailsButton) {\n    const onClick = state.detailsButton.onClick as React.MouseEventHandler<HTMLButtonElement>;\n    state.detailsButton.onClick = mergeCallbacks(onClick, onExpandClick);\n  }\n\n  const referenceGroupSetOpen = useReferenceGroupSetOpen();\n  const onTargettedByCitation = (e: React.FocusEvent<HTMLElement>) => {\n    const relatedTargetHash: string | undefined = (e.relatedTarget as HTMLAnchorElement)?.hash;\n    if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {\n      referenceGroupSetOpen();\n      setIsExpanded(true);\n    }\n  };\n  state.root.onFocus = mergeCallbacks(state.root.onFocus, onTargettedByCitation);\n\n  return state;\n};\n\nconst getIcon = (isExpanded: boolean, mode: ReferenceProps['mode']): JSX.Element => {\n  if (mode === 'sidecar') {\n    return !isExpanded ? <ChevronDown16Regular /> : <ChevronUp16Regular />;\n  }\n\n  return !isExpanded ? <ChevronDown24Regular /> : <ChevronUp24Regular />;\n};\n"],"names":["React","Button","Caption1","getNativeElementProps","mergeCallbacks","mergeClasses","slot","useId","usePopoverContext_unstable","usePopoverContext","ChevronDown24Regular","ChevronUp24Regular","ChevronDown16Regular","ChevronUp16Regular","referenceExtraClassNames","Citation","useReferenceGroupSetOpen","useCopilotMode","useReference_unstable","props","ref","index","referenceId","citationHref","excerpt","layout","mode","labelId","mediaId","isExpanded","setIsExpanded","useState","setPopoverOpen","context","setOpen","onExpandClick","_e","label","always","defaultProps","id","elementType","media","optional","isValidElement","children","cloneElement","className","mediaChild","concat","ariaLabelledByProp","groupSemantics","useMemo","role","tabIndex","citationProps","onPopoverCloseClick","e","preventDefault","referenceHref","onClick","state","components","root","citation","actions","sensitivity","sensitivityLabel","metadata","content","primaryText","secondaryText","tertiaryText","icon","detailsButton","block","renderByDefault","hidden","appearance","size","getIcon","referenceGroupSetOpen","onTargettedByCitation","relatedTargetHash","relatedTarget","hash","substring","onFocus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,MAAM,EACNC,QAAQ,EACRC,qBAAqB,EACrBC,cAAc,EACdC,YAAY,EACZC,IAAI,EACJC,KAAK,EACLC,8BAA8BC,iBAAiB,QAC1C,6BAA6B;AACpC,SACEC,oBAAoB,EACpBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,QACb,wBAAwB;AAC/B,SAASC,wBAAwB,QAAQ,uBAAuB;AAChE,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,EAAEC,SAAS,QAAQ,EAAE,GAAGN;IAEzE,MAAMO,OAAOT,eAAeE,MAAMO,IAAI;IAEtC,MAAMC,UAAUpB;IAChB,MAAMqB,UAAUrB;IAChB,MAAM,CAACsB,YAAYC,cAAc,GAAG9B,MAAM+B,QAAQ,CAACN,WAAW,YAAY,OAAO;IAEjF,MAAMO,iBAAiBvB,kBAAkBwB,CAAAA,UAAWA,QAAQC,OAAO;IAEnE,MAAMC,gBAA4DC,CAAAA;QAChEN,cAAc,CAACD;IACjB;IAEA,MAAMQ,QAAQ/B,KAAKgC,MAAM,CAACnB,MAAMkB,KAAK,EAAE;QACrCE,cAAc;YAAEC,IAAIb;QAAQ;QAC5Bc,aAAa;IACf;IACA,MAAMC,QAAQpC,KAAKqC,QAAQ,CAACxB,MAAMuB,KAAK,EAAE;QAAEH,cAAc;YAAEC,IAAIZ;QAAQ;QAAGa,aAAa;IAAM;IAC7F,IAAIC,uBAAS1C,MAAM4C,cAAc,CAAcF,MAAMG,QAAQ,GAAG;QAC9DH,MAAMG,QAAQ,iBAAG7C,MAAM8C,YAAY,CAACJ,MAAMG,QAAQ,EAAE;YAClDE,WAAW1C,aAAaqC,MAAMG,QAAQ,CAAC1B,KAAK,CAAC4B,SAAS,EAAEjC,yBAAyBkC,UAAU;QAC7F;IACF;IAEA,IAAIN,kBAAAA,4BAAAA,MAAOF,EAAE,EAAE;YACeH;YAAAA;QAA5BA,KAAK,CAAC,mBAAmB,GAAGA,CAAAA,iCAAAA,yBAAAA,KAAK,CAAC,mBAAmB,cAAzBA,6CAAAA,uBAA2BY,MAAM,CAACP,MAAMF,EAAE,eAA1CH,2CAAAA,gCAA+CK,MAAMF,EAAE;IACrF;IAEA,MAAMU,qBAAqB/B,KAAK,CAAC,kBAAkB;IACnD,MAAMgC,iBAAiBnD,MAAMoD,OAAO,CAAC;QACnC,OAAO3B,WAAW,WACd;YACE4B,MAAM;YACN,mBAAmB,CAAC,EAAEH,+BAAAA,gCAAAA,qBAAsB,GAAG,CAAC,EAAEb,MAAMG,EAAE,CAAC,CAAC;YAC5Dc,UAAU,CAAC;QACb,IACA,CAAC;IACP,GAAG;QAAC7B;QAAQyB;QAAoBb,MAAMG,EAAE;KAAC;IAEzC,+DAA+D;IAC/D,MAAMe,gBAAgBvD,MAAMoD,OAAO,CAAC;QAClC,MAAMI,sBAAsB,CAACC;YAC3BzB,eAAeyB,GAAG;YAElB,iBAAiB;YACjBA,EAAEC,cAAc;QAClB;QAEA,OAAOjC,WAAW,YACd;YACEkC,eAAe;YACfL,UAAU,CAAC;YACX,cAAc,CAAC,UAAU,EAAEjC,MAAM,OAAO,CAAC;YACzCuC,SAASJ;QACX,IACA;YACEG,eAAepC;QACjB;IACN,GAAG;QAACE;QAAQF;QAAcF;QAAOW;KAAe;IAEhD,MAAM6B,QAAwB;QAC5BhC;QACAH,MAAMD,WAAW,YAAY,YAAYC;QACzCD;QACAJ;QACAyC,YAAY;YACVC,MAAM;YACNC,UAAU;YACVtB,OAAO;YACPuB,SAAS;YACT5B,OAAO;YACP6B,aAAa;YACbC,kBAAkB;YAClBC,UAAU;YACVC,SAAS;YACTC,aAAa;YACbC,eAAe;YACfC,cAAc;YACdC,MAAM;YACNC,eAAezE;QACjB;QACA8D,MAAMzD,KAAKgC,MAAM,CACfnC,sBAAsB,OAAO;YAC3BiB;YACAoB,IAAIlB;YACJ,GAAG6B,cAAc;YACjB,GAAGhC,KAAK;QACV,IACA;YAAEsB,aAAa;QAAM;QAEvBuB,UAAU1D,KAAKqC,QAAQ,CAACxB,MAAM6C,QAAQ,EAAE;YACtCzB,cAAc;gBACZM,wBACE,oBAAC9B;oBAAS4D,OAAAA;oBAAMrD,aAAaA;oBAAc,GAAGiC,aAAa;mBACxDlC;YAGP;YACAuD,iBAAiB;YACjBnC,aAAa;QACf;QACAC;QACAuB,SAAS3D,KAAKqC,QAAQ,CAAClB,WAAW,WAAWN,MAAM8C,OAAO,GAAG,MAAM;YACjEW,iBAAiB;YACjBnC,aAAa;QACf;QACAJ;QACA6B,aAAa5D,KAAKqC,QAAQ,CAACxB,MAAM+C,WAAW,EAAE;YAAEzB,aAAa;QAAO;QACpE0B,kBAAkB7D,KAAKqC,QAAQ,CAACxB,MAAMgD,gBAAgB,EAAE;YAAE1B,aAAa;QAAO;QAC9E2B,UAAU9D,KAAKgC,MAAM,CAACnB,MAAMiD,QAAQ,EAAE;YAAE3B,aAAa;QAAM;QAC3D6B,aAAahE,KAAKqC,QAAQ,CAACxB,MAAMmD,WAAW,EAAE;YAC5C/B,cAAc;gBACZsC,QAAQ,CAAChD;YACX;YACAY,aAAa;QACf;QACA8B,eAAejE,KAAKqC,QAAQ,CAACxB,MAAMoD,aAAa,EAAE;YAChDhC,cAAc;gBACZsC,QAAQ,CAAChD;YACX;YACAY,aAAa;QACf;QACA+B,cAAclE,KAAKqC,QAAQ,CAACxB,MAAMqD,YAAY,EAAE;YAC9CjC,cAAc;gBACZsC,QAAQ,CAAChD;YACX;YACAY,aAAa;QACf;QACAgC,MAAMnE,KAAKqC,QAAQ,CAACxB,MAAMsD,IAAI,EAAE;YAAEhC,aAAa;QAAO;QACtD4B,SAAS/D,KAAKgC,MAAM,CAACnB,MAAMkD,OAAO,EAAE;YAClC9B,cAAc;gBACZM,UAAUrB,yBAAW,oBAACtB,gBAAUsB;YAClC;YACAiB,aAAa;QACf;QACAiC,eAAepE,KAAKqC,QAAQ,CAAClB,WAAW,WAAWN,MAAMuD,aAAa,GAAG,MAAM;YAC7EnC,cAAc;gBACZuC,YAAY;gBACZ,iBAAiBjD;gBACjB,cAAc;gBACdkD,MAAMrD,SAAS,YAAY,UAAU;gBACrC+C,MAAM;oBACJ5B,UAAUmC,QAAQnD,YAAYH;gBAChC;YACF;YACAkD,iBAAiB;YACjBnC,aAAaxC;QACf;IACF;IAEA,IAAI4D,MAAMa,aAAa,EAAE;QACvB,MAAMd,UAAUC,MAAMa,aAAa,CAACd,OAAO;QAC3CC,MAAMa,aAAa,CAACd,OAAO,GAAGxD,eAAewD,SAASzB;IACxD;IAEA,MAAM8C,wBAAwBjE;IAC9B,MAAMkE,wBAAwB,CAACzB;YACkBA;QAA/C,MAAM0B,qBAAyC1B,mBAAAA,EAAE2B,aAAa,cAAf3B,uCAAD,AAACA,iBAAuC4B,IAAI;QAC1F,IAAIF,qBAAqBA,kBAAkBG,SAAS,CAAC,OAAOhE,aAAa;YACvE2D;YACAnD,cAAc;QAChB;IACF;IACA+B,MAAME,IAAI,CAACwB,OAAO,GAAGnF,eAAeyD,MAAME,IAAI,CAACwB,OAAO,EAAEL;IAExD,OAAOrB;AACT,EAAE;AAEF,MAAMmB,UAAU,CAACnD,YAAqBH;IACpC,IAAIA,SAAS,WAAW;QACtB,OAAO,CAACG,2BAAa,oBAACjB,4CAA0B,oBAACC;IACnD;IAEA,OAAO,CAACgB,2BAAa,oBAACnB,4CAA0B,oBAACC;AACnD"}
+{"version":3,"sources":["useReference.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Button,\n  Caption1,\n  getNativeElementProps,\n  mergeCallbacks,\n  mergeClasses,\n  slot,\n  useId,\n  usePopoverContext_unstable as usePopoverContext,\n} from '@fluentui/react-components';\nimport {\n  ChevronDown24Regular,\n  ChevronUp24Regular,\n  ChevronDown16Regular,\n  ChevronUp16Regular,\n} from '@fluentui/react-icons';\nimport { referenceExtraClassNames } from './useReferenceStyles';\nimport { Citation } from '../Citation';\nimport type { ReferenceProps, ReferenceState } from './Reference.types';\nimport { useReferenceGroupSetOpen } from '../../context/ReferenceGroupContext';\nimport { useCopilotMode } from '@fluentui-copilot/react-provider';\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<HTMLElement>): ReferenceState => {\n  const { index, referenceId, citationHref, excerpt, layout = 'inline' } = props;\n\n  const mode = useCopilotMode(props.mode);\n\n  const labelId = useId();\n  const mediaId = useId();\n  const [isExpanded, setIsExpanded] = React.useState(layout === 'popover' ? true : false);\n\n  const setPopoverOpen = usePopoverContext(context => context.setOpen);\n\n  const onExpandClick: React.MouseEventHandler<HTMLButtonElement> = _e => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const label = slot.always(props.label, {\n    defaultProps: { id: labelId },\n    elementType: 'div',\n  });\n  const media = slot.optional(props.media, { defaultProps: { id: mediaId }, elementType: 'div' });\n  if (media && React.isValidElement<HTMLElement>(media.children)) {\n    media.children = React.cloneElement(media.children, {\n      className: mergeClasses(media.children.props.className, referenceExtraClassNames.mediaChild),\n    });\n  }\n\n  if (media?.id) {\n    label['aria-describedby'] = label['aria-describedby']?.concat(media.id) ?? media.id;\n  }\n\n  const ariaLabelledByProp = props['aria-labelledby'];\n  const groupSemantics = React.useMemo(() => {\n    return layout === 'inline'\n      ? {\n          role: 'group',\n          'aria-labelledby': `${ariaLabelledByProp ?? ''} ${label.id}`,\n          tabIndex: -1,\n        }\n      : {};\n  }, [layout, ariaLabelledByProp, label.id]);\n\n  // Within a popup, a citation should function as a close button\n  const citationProps = React.useMemo(() => {\n    const onPopoverCloseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      setPopoverOpen(e, false);\n\n      // don't navigate\n      e.preventDefault();\n    };\n\n    return layout === 'popover'\n      ? {\n          referenceHref: '#',\n          tabIndex: -1,\n          'aria-label': `Reference ${index}, close`,\n          onClick: onPopoverCloseClick,\n        }\n      : {\n          referenceHref: citationHref,\n        };\n  }, [layout, citationHref, index, setPopoverOpen]);\n\n  const state: ReferenceState = {\n    isExpanded,\n    mode: layout === 'popover' ? 'sidecar' : mode,\n    layout,\n    index,\n    components: {\n      root: 'div',\n      citation: 'div',\n      media: 'div',\n      actions: 'div',\n      label: 'div',\n      sensitivity: 'span',\n      metadata: 'div',\n      content: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      icon: 'span',\n      detailsButton: Button,\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id: referenceId,\n        ...groupSemantics,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    citation: slot.optional(props.citation, {\n      defaultProps: {\n        children: (\n          <Citation block {...citationProps}>\n            {index}\n          </Citation>\n        ),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    media,\n    actions: slot.optional(layout === 'inline' ? props.actions : null, {\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    label,\n    sensitivity: slot.optional(props.sensitivity, { elementType: 'span' }),\n    metadata: slot.always(props.metadata, { elementType: 'div' }),\n    primaryText: slot.optional(props.primaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    tertiaryText: slot.optional(props.tertiaryText, {\n      defaultProps: {\n        hidden: !isExpanded,\n      },\n      elementType: 'span',\n    }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children: excerpt && <Caption1>{excerpt}</Caption1>,\n      },\n      elementType: 'div',\n    }),\n    detailsButton: slot.optional(layout === 'inline' ? props.detailsButton : null, {\n      defaultProps: {\n        appearance: 'transparent',\n        'aria-expanded': isExpanded,\n        'aria-label': 'show details',\n        size: mode === 'sidecar' ? 'small' : 'medium',\n        icon: {\n          children: getIcon(isExpanded, mode),\n        },\n      },\n      renderByDefault: true,\n      elementType: Button,\n    }),\n  };\n\n  if (state.detailsButton) {\n    const onClick = state.detailsButton.onClick as React.MouseEventHandler<HTMLButtonElement>;\n    state.detailsButton.onClick = mergeCallbacks(onClick, onExpandClick);\n  }\n\n  const referenceGroupSetOpen = useReferenceGroupSetOpen();\n  const onTargettedByCitation = (e: React.FocusEvent<HTMLElement>) => {\n    const relatedTargetHash: string | undefined = (e.relatedTarget as HTMLAnchorElement)?.hash;\n    if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {\n      referenceGroupSetOpen();\n      setIsExpanded(true);\n    }\n  };\n  state.root.onFocus = mergeCallbacks(state.root.onFocus, onTargettedByCitation);\n\n  return state;\n};\n\nconst getIcon = (isExpanded: boolean, mode: ReferenceProps['mode']): JSX.Element => {\n  if (mode === 'sidecar') {\n    return !isExpanded ? <ChevronDown16Regular /> : <ChevronUp16Regular />;\n  }\n\n  return !isExpanded ? <ChevronDown24Regular /> : <ChevronUp24Regular />;\n};\n"],"names":["React","Button","Caption1","getNativeElementProps","mergeCallbacks","mergeClasses","slot","useId","usePopoverContext_unstable","usePopoverContext","ChevronDown24Regular","ChevronUp24Regular","ChevronDown16Regular","ChevronUp16Regular","referenceExtraClassNames","Citation","useReferenceGroupSetOpen","useCopilotMode","useReference_unstable","props","ref","index","referenceId","citationHref","excerpt","layout","mode","labelId","mediaId","isExpanded","setIsExpanded","useState","setPopoverOpen","context","setOpen","onExpandClick","_e","label","always","defaultProps","id","elementType","media","optional","isValidElement","children","cloneElement","className","mediaChild","concat","ariaLabelledByProp","groupSemantics","useMemo","role","tabIndex","citationProps","onPopoverCloseClick","e","preventDefault","referenceHref","onClick","state","components","root","citation","actions","sensitivity","metadata","content","primaryText","secondaryText","tertiaryText","icon","detailsButton","block","renderByDefault","hidden","appearance","size","getIcon","referenceGroupSetOpen","onTargettedByCitation","relatedTargetHash","relatedTarget","hash","substring","onFocus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,MAAM,EACNC,QAAQ,EACRC,qBAAqB,EACrBC,cAAc,EACdC,YAAY,EACZC,IAAI,EACJC,KAAK,EACLC,8BAA8BC,iBAAiB,QAC1C,6BAA6B;AACpC,SACEC,oBAAoB,EACpBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,QACb,wBAAwB;AAC/B,SAASC,wBAAwB,QAAQ,uBAAuB;AAChE,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,EAAEC,SAAS,QAAQ,EAAE,GAAGN;IAEzE,MAAMO,OAAOT,eAAeE,MAAMO,IAAI;IAEtC,MAAMC,UAAUpB;IAChB,MAAMqB,UAAUrB;IAChB,MAAM,CAACsB,YAAYC,cAAc,GAAG9B,MAAM+B,QAAQ,CAACN,WAAW,YAAY,OAAO;IAEjF,MAAMO,iBAAiBvB,kBAAkBwB,CAAAA,UAAWA,QAAQC,OAAO;IAEnE,MAAMC,gBAA4DC,CAAAA;QAChEN,cAAc,CAACD;IACjB;IAEA,MAAMQ,QAAQ/B,KAAKgC,MAAM,CAACnB,MAAMkB,KAAK,EAAE;QACrCE,cAAc;YAAEC,IAAIb;QAAQ;QAC5Bc,aAAa;IACf;IACA,MAAMC,QAAQpC,KAAKqC,QAAQ,CAACxB,MAAMuB,KAAK,EAAE;QAAEH,cAAc;YAAEC,IAAIZ;QAAQ;QAAGa,aAAa;IAAM;IAC7F,IAAIC,uBAAS1C,MAAM4C,cAAc,CAAcF,MAAMG,QAAQ,GAAG;QAC9DH,MAAMG,QAAQ,iBAAG7C,MAAM8C,YAAY,CAACJ,MAAMG,QAAQ,EAAE;YAClDE,WAAW1C,aAAaqC,MAAMG,QAAQ,CAAC1B,KAAK,CAAC4B,SAAS,EAAEjC,yBAAyBkC,UAAU;QAC7F;IACF;IAEA,IAAIN,kBAAAA,4BAAAA,MAAOF,EAAE,EAAE;YACeH;YAAAA;QAA5BA,KAAK,CAAC,mBAAmB,GAAGA,CAAAA,iCAAAA,yBAAAA,KAAK,CAAC,mBAAmB,cAAzBA,6CAAAA,uBAA2BY,MAAM,CAACP,MAAMF,EAAE,eAA1CH,2CAAAA,gCAA+CK,MAAMF,EAAE;IACrF;IAEA,MAAMU,qBAAqB/B,KAAK,CAAC,kBAAkB;IACnD,MAAMgC,iBAAiBnD,MAAMoD,OAAO,CAAC;QACnC,OAAO3B,WAAW,WACd;YACE4B,MAAM;YACN,mBAAmB,CAAC,EAAEH,+BAAAA,gCAAAA,qBAAsB,GAAG,CAAC,EAAEb,MAAMG,EAAE,CAAC,CAAC;YAC5Dc,UAAU,CAAC;QACb,IACA,CAAC;IACP,GAAG;QAAC7B;QAAQyB;QAAoBb,MAAMG,EAAE;KAAC;IAEzC,+DAA+D;IAC/D,MAAMe,gBAAgBvD,MAAMoD,OAAO,CAAC;QAClC,MAAMI,sBAAsB,CAACC;YAC3BzB,eAAeyB,GAAG;YAElB,iBAAiB;YACjBA,EAAEC,cAAc;QAClB;QAEA,OAAOjC,WAAW,YACd;YACEkC,eAAe;YACfL,UAAU,CAAC;YACX,cAAc,CAAC,UAAU,EAAEjC,MAAM,OAAO,CAAC;YACzCuC,SAASJ;QACX,IACA;YACEG,eAAepC;QACjB;IACN,GAAG;QAACE;QAAQF;QAAcF;QAAOW;KAAe;IAEhD,MAAM6B,QAAwB;QAC5BhC;QACAH,MAAMD,WAAW,YAAY,YAAYC;QACzCD;QACAJ;QACAyC,YAAY;YACVC,MAAM;YACNC,UAAU;YACVtB,OAAO;YACPuB,SAAS;YACT5B,OAAO;YACP6B,aAAa;YACbC,UAAU;YACVC,SAAS;YACTC,aAAa;YACbC,eAAe;YACfC,cAAc;YACdC,MAAM;YACNC,eAAexE;QACjB;QACA8D,MAAMzD,KAAKgC,MAAM,CACfnC,sBAAsB,OAAO;YAC3BiB;YACAoB,IAAIlB;YACJ,GAAG6B,cAAc;YACjB,GAAGhC,KAAK;QACV,IACA;YAAEsB,aAAa;QAAM;QAEvBuB,UAAU1D,KAAKqC,QAAQ,CAACxB,MAAM6C,QAAQ,EAAE;YACtCzB,cAAc;gBACZM,wBACE,oBAAC9B;oBAAS2D,OAAAA;oBAAO,GAAGnB,aAAa;mBAC9BlC;YAGP;YACAsD,iBAAiB;YACjBlC,aAAa;QACf;QACAC;QACAuB,SAAS3D,KAAKqC,QAAQ,CAAClB,WAAW,WAAWN,MAAM8C,OAAO,GAAG,MAAM;YACjEU,iBAAiB;YACjBlC,aAAa;QACf;QACAJ;QACA6B,aAAa5D,KAAKqC,QAAQ,CAACxB,MAAM+C,WAAW,EAAE;YAAEzB,aAAa;QAAO;QACpE0B,UAAU7D,KAAKgC,MAAM,CAACnB,MAAMgD,QAAQ,EAAE;YAAE1B,aAAa;QAAM;QAC3D4B,aAAa/D,KAAKqC,QAAQ,CAACxB,MAAMkD,WAAW,EAAE;YAC5C9B,cAAc;gBACZqC,QAAQ,CAAC/C;YACX;YACAY,aAAa;QACf;QACA6B,eAAehE,KAAKqC,QAAQ,CAACxB,MAAMmD,aAAa,EAAE;YAChD/B,cAAc;gBACZqC,QAAQ,CAAC/C;YACX;YACAY,aAAa;QACf;QACA8B,cAAcjE,KAAKqC,QAAQ,CAACxB,MAAMoD,YAAY,EAAE;YAC9ChC,cAAc;gBACZqC,QAAQ,CAAC/C;YACX;YACAY,aAAa;QACf;QACA+B,MAAMlE,KAAKqC,QAAQ,CAACxB,MAAMqD,IAAI,EAAE;YAAE/B,aAAa;QAAO;QACtD2B,SAAS9D,KAAKgC,MAAM,CAACnB,MAAMiD,OAAO,EAAE;YAClC7B,cAAc;gBACZM,UAAUrB,yBAAW,oBAACtB,gBAAUsB;YAClC;YACAiB,aAAa;QACf;QACAgC,eAAenE,KAAKqC,QAAQ,CAAClB,WAAW,WAAWN,MAAMsD,aAAa,GAAG,MAAM;YAC7ElC,cAAc;gBACZsC,YAAY;gBACZ,iBAAiBhD;gBACjB,cAAc;gBACdiD,MAAMpD,SAAS,YAAY,UAAU;gBACrC8C,MAAM;oBACJ3B,UAAUkC,QAAQlD,YAAYH;gBAChC;YACF;YACAiD,iBAAiB;YACjBlC,aAAaxC;QACf;IACF;IAEA,IAAI4D,MAAMY,aAAa,EAAE;QACvB,MAAMb,UAAUC,MAAMY,aAAa,CAACb,OAAO;QAC3CC,MAAMY,aAAa,CAACb,OAAO,GAAGxD,eAAewD,SAASzB;IACxD;IAEA,MAAM6C,wBAAwBhE;IAC9B,MAAMiE,wBAAwB,CAACxB;YACkBA;QAA/C,MAAMyB,qBAAyCzB,mBAAAA,EAAE0B,aAAa,cAAf1B,uCAAD,AAACA,iBAAuC2B,IAAI;QAC1F,IAAIF,qBAAqBA,kBAAkBG,SAAS,CAAC,OAAO/D,aAAa;YACvE0D;YACAlD,cAAc;QAChB;IACF;IACA+B,MAAME,IAAI,CAACuB,OAAO,GAAGlF,eAAeyD,MAAME,IAAI,CAACuB,OAAO,EAAEL;IAExD,OAAOpB;AACT,EAAE;AAEF,MAAMkB,UAAU,CAAClD,YAAqBH;IACpC,IAAIA,SAAS,WAAW;QACtB,OAAO,CAACG,2BAAa,oBAACjB,4CAA0B,oBAACC;IACnD;IAEA,OAAO,CAACgB,2BAAa,oBAACnB,4CAA0B,oBAACC;AACnD"}

package/lib/components/Reference/useReferenceStyles.js

@@ -5,7 +5,6 @@ export const referenceClassNames = {
   media: 'fai-Reference__media',
   actions: 'fai-Reference__actions',
   sensitivity: 'fai-Reference__sensitivity',
-  sensitivityLabel: 'fai-Reference__sensitivityLabel',
   metadata: 'fai-Reference__metadata',
   primaryText: 'fai-Reference__primaryText',
   secondaryText: 'fai-Reference__secondaryText',
@@ -86,39 +85,6 @@ const useStyles = __styles({
     Bw0ie65: "f15c84mf",
     Bdqf98w: "fsxvdwy"
   },
-  sensitivityLabel: {
-    B6of3ja: "fww94b8",
-    De3pzq: "f3vzo32",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"],
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
-    Ijaq50: "fpymh5q",
-    Br312pm: "fjieyc3",
-    nk6f5a: "f18utan",
-    Bw0ie65: "f15c84mf",
-    Bdqf98w: "fsxvdwy",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fdw0yi8", "fk8j09s"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["fk8j09s", "fdw0yi8"],
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "f13mqy1h",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fcpl73t"
-  },
   metadata: {
     B6of3ja: "fww94b8",
     Ijaq50: "f1md2vp3",
@@ -166,7 +132,7 @@ const useStyles = __styles({
     mc9l5x: "fjseox"
   }
 }, {
-  d: [".f2e0fxj{grid-template-rows:24px auto auto auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1pit55b{border-top-width:0px;}", ".f1orqat1{border-right-width:0px;}", ".ffbvwxd{border-left-width:0px;}", ".f136mcbi{border-bottom-width:0px;}", ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".f1sff6ri{row-gap:0;}", ".fwllpr6{grid-row-start:citation;}", ".fx0qcsv{grid-column-start:citation;}", ".f1ldxewp{grid-row-end:citation;}", ".ftmncab{grid-column-end:citation;}", ".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe9dio4>.fai-Reference__mediaChild{width:16px;}", ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}", ".f16hsg94{grid-row-start:1;}", ".f35n22n{grid-column-start:actions;}", ".fh3uimt{grid-row-end:actions;}", ".fnh4yke{grid-column-end:actions;}", ".f1a7i8kp{justify-self:end;}", ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}", ".fpymh5q{grid-row-start:sensitivityLabel;}", ".fjieyc3{grid-column-start:sensitivityLabel;}", ".f18utan{grid-row-end:sensitivityLabel;}", ".f15c84mf{grid-column-end:sensitivityLabel;}", ".fsxvdwy{justify-self:start;}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f1md2vp3{grid-row-start:metadata;}", ".f1y0qc5c{grid-column-start:metadata;}", ".f179ty8e{grid-row-end:metadata;}", ".f83o9dc{grid-column-end:metadata;}", ".f10pi13n{position:relative;}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1j7ml58::before{position:absolute;}", ".f1s1fjay::before{left:calc(var(--spacingHorizontalS) / -2);}", ".f15a459s::before{right:calc(var(--spacingHorizontalS) / -2);}", ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);}", ".f8pn7wt::before{height:var(--fontSizeBase100);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1jpmc5p::before{border-left-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fmrv4ls{vertical-align:middle;}", ".fxwmwwq{grid-row-start:content;}", ".f1e0gndy{grid-column-start:content;}", ".f4zz6gv{grid-row-end:content;}", ".f7idnck{grid-column-end:content;}", ".f1vx9l62{flex-direction:column;}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f9ijwd5{word-break:break-word;}", ".fjseox{display:none;}"]
+  d: [".f2e0fxj{grid-template-rows:24px auto auto auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1pit55b{border-top-width:0px;}", ".f1orqat1{border-right-width:0px;}", ".ffbvwxd{border-left-width:0px;}", ".f136mcbi{border-bottom-width:0px;}", ".f1uniyfe{width:calc(256px - (var(--spacingHorizontalM) * 2));}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".f1sff6ri{row-gap:0;}", ".fwllpr6{grid-row-start:citation;}", ".fx0qcsv{grid-column-start:citation;}", ".f1ldxewp{grid-row-end:citation;}", ".ftmncab{grid-column-end:citation;}", ".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe9dio4>.fai-Reference__mediaChild{width:16px;}", ".f1ojxjpn>.fai-Reference__mediaChild{height:16px;}", ".f16hsg94{grid-row-start:1;}", ".f35n22n{grid-column-start:actions;}", ".fh3uimt{grid-row-end:actions;}", ".fnh4yke{grid-column-end:actions;}", ".f1a7i8kp{justify-self:end;}", ".fzmnlw3>fui-Button__icon{color:var(--colorNeutralForeground3);}", ".fpymh5q{grid-row-start:sensitivityLabel;}", ".fjieyc3{grid-column-start:sensitivityLabel;}", ".f18utan{grid-row-end:sensitivityLabel;}", ".f15c84mf{grid-column-end:sensitivityLabel;}", ".fsxvdwy{justify-self:start;}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1md2vp3{grid-row-start:metadata;}", ".f1y0qc5c{grid-column-start:metadata;}", ".f179ty8e{grid-row-end:metadata;}", ".f83o9dc{grid-column-end:metadata;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f10pi13n{position:relative;}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1j7ml58::before{position:absolute;}", ".f1s1fjay::before{left:calc(var(--spacingHorizontalS) / -2);}", ".f15a459s::before{right:calc(var(--spacingHorizontalS) / -2);}", ".f1wl9tmt::before{top:calc((var(--lineHeightBase100) - var(--fontSizeBase100)) / 2);}", ".f8pn7wt::before{height:var(--fontSizeBase100);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1jpmc5p::before{border-left-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fmrv4ls{vertical-align:middle;}", ".fxwmwwq{grid-row-start:content;}", ".f1e0gndy{grid-column-start:content;}", ".f4zz6gv{grid-row-end:content;}", ".f7idnck{grid-column-end:content;}", ".f1vx9l62{flex-direction:column;}", ".f1wn3y0l{row-gap:var(--spacingVerticalS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f9ijwd5{word-break:break-word;}", ".fjseox{display:none;}"]
 });
 const useLabelStyles = __styles({
   root: {
@@ -224,9 +190,6 @@ export const useReferenceStyles_unstable = state => {
   if (state.sensitivity) {
     state.sensitivity.className = mergeClasses(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
   }
-  if (state.sensitivityLabel) {
-    state.sensitivityLabel.className = mergeClasses(referenceClassNames.sensitivityLabel, styles.sensitivityLabel, !isExpanded && styles.hidden, state.sensitivityLabel.className);
-  }
   state.metadata.className = mergeClasses(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
   let isSubsequentText = false;
   if (state.primaryText) {

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

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

package/lib/hooks/index.js

@@ -1,4 +1,3 @@
-export * from './useReferenceCitation';
-export { useReferenceCitationPreview } from './useReferenceCitationPreview';
+export * from './useReferenceCitationPreview';
 export * from './useReferenceGroup';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useReferenceCitation';\nexport { useReferenceCitationPreview, type UseReferenceCitationPreview } from './useReferenceCitationPreview';\nexport * from './useReferenceGroup';\n"],"names":["useReferenceCitationPreview"],"mappings":"AAAA,cAAc,yBAAyB;AACvC,SAASA,2BAA2B,QAA0C,gCAAgC;AAC9G,cAAc,sBAAsB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useReferenceCitationPreview';\nexport * from './useReferenceGroup';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC;AAC9C,cAAc,sBAAsB"}

package/lib/hooks/useReferenceCitationPreview.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import * as React from 'react';
-import { Badge, Caption1, assertSlots, mergeCallbacks, slot, useId, usePopoverContext_unstable } from '@fluentui/react-components';
-// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Caption1, assertSlots, mergeCallbacks, slot, useId, usePopoverContext_unstable } from '@fluentui/react-components';
 import { Preview, PreviewContent, PreviewHeader, PreviewMetadata, PreviewSurface, PreviewTrigger } from '@fluentui-copilot/react-preview';
+import { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';
 import { Citation } from '../Citation';
 import { Reference } from '../Reference';
 // 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.
@@ -33,7 +33,8 @@ export const useReferenceCitationPreview = ({
   citationProps,
   referenceProps,
   previewProps,
-  previewSurfaceProps
+  previewSurfaceProps,
+  sensitivityLabelProps
 }) => {
   const refId = useId();
   const citeId = useId();
@@ -69,13 +70,14 @@ export const useReferenceCitationPreview = ({
         content
       };
       assertSlots(citationWithPreviewState);
-      // We resolve the slots' objects for sensitivityLabel and title here so that we can use the information from their children below.
-      const sensitivityLabel = slot.optional(referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.sensitivityLabel, {
+      // We resolve the slots' objects for sensitivity and title here so that we can use the information from their children below.
+      const sensitivity = slot.optional(referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.sensitivity, {
         elementType: 'span'
       });
       const title = slot.optional(referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.label, {
         elementType: 'div'
       });
+      var _sensitivityLabelProps_description;
       return /*#__PURE__*/_jsxs(Preview, {
         closeOnScroll: true,
         positioning: "below",
@@ -87,7 +89,6 @@ export const useReferenceCitationPreview = ({
           children: /*#__PURE__*/_jsx(Citation, {
             ...citationProps,
             id: citationId,
-            referenceId: referenceId,
             ...props,
             children: index
           })
@@ -108,11 +109,9 @@ export const useReferenceCitationPreview = ({
               primaryText: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.primaryText,
               secondaryText: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.secondaryText,
               tertiaryText: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.tertiaryText
-            }), sensitivityLabel && /*#__PURE__*/_jsx(Badge, {
-              color: "informative",
-              shape: "rounded",
-              size: "small",
-              children: sensitivityLabel.children
+            }), sensitivity && /*#__PURE__*/_jsx(SensitivityLabel, {
+              description: (_sensitivityLabelProps_description = sensitivityLabelProps === null || sensitivityLabelProps === void 0 ? void 0 : sensitivityLabelProps.description) !== null && _sensitivityLabelProps_description !== void 0 ? _sensitivityLabelProps_description : '',
+              children: sensitivity.children
             }), /*#__PURE__*/_jsx(citationWithPreviewState.content, {}), previewProps === null || previewProps === void 0 ? void 0 : previewProps.children]
           })
         })]
@@ -122,7 +121,7 @@ export const useReferenceCitationPreview = ({
       Citation: CitationWithPreview,
       Reference: PackagedReference
     };
-  }, [index, referenceId, citationId, referenceProps, citationProps, previewProps, previewSurfaceProps]);
+  }, [index, referenceId, citationId, referenceProps, citationProps, previewProps, previewSurfaceProps, sensitivityLabelProps]);
   return components;
 };
 //# sourceMappingURL=useReferenceCitationPreview.js.map

package/lib/hooks/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';\nimport {\n  Badge,\n  Caption1,\n  assertSlots,\n  mergeCallbacks,\n  slot,\n  useId,\n  usePopoverContext_unstable,\n} from '@fluentui/react-components';\nimport type { Slot } from '@fluentui/react-components';\n\n// eslint-disable-next-line @nx/enforce-module-boundaries\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\n// eslint-disable-next-line @nx/enforce-module-boundaries\nimport type { PreviewProps, PreviewSurfaceProps } from '@fluentui-copilot/react-preview';\n\nimport { Citation } from '../Citation';\nimport { Reference } from '../Reference';\nimport type { CitationProps } from '../Citation';\nimport type { ReferenceProps } from '../Reference';\n\ntype PartialCitationProps = 'referenceHref' | 'referenceId';\n\n/**\n * Props for a \"packaged Citation\". A packaged Citation is a `Citation` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedCitationProps = Omit<CitationProps, PartialCitationProps | 'popover' | 'popoverSurface'> &\n  Partial<Pick<CitationProps, PartialCitationProps>>;\n\n/**\n * A \"packaged Citation\". A packaged Citation is a `Citation` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedCitation = React.FC<PackagedCitationProps>;\n\ntype PartialReferenceProps = 'citationHref' | 'index' | 'referenceId';\n\n/**\n * Props for a \"packaged Reference\". A packaged Reference is a `Reference` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedReferenceProps = Omit<ReferenceProps, PartialReferenceProps> &\n  Partial<Pick<ReferenceProps, PartialReferenceProps>>;\n\n/**\n * A \"packaged Reference\". A packaged Reference is a `Reference` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedReference = React.FC<PackagedReferenceProps>;\n\n/**\n * Data used to package a `Citation` and `Reference` together with\n * the `useReferenceCitation` hook.\n */\nexport type ReferenceCitationData = {\n  index: number;\n  referenceId?: string;\n  citationId?: string;\n  citationProps?: PackagedCitationProps;\n  referenceProps?: PackagedReferenceProps;\n  previewProps?: PreviewProps;\n  previewSurfaceProps?: PreviewSurfaceProps;\n};\n\nexport type UseReferenceCitationPreview = (data: ReferenceCitationData) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\ntype PreviewExtraSlots = {\n  content: Slot<'div'>;\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\n/**\n * Hook to package a `Citation` and `Reference` together in an\n * accessibly by default manner.\n *\n * When using citations and references, prefer using them via this\n * hook to ensure props are wired up correctly.\n */\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = ({\n  index,\n  referenceId: propsRefId,\n  citationId: propsCiteId,\n  citationProps,\n  referenceProps,\n  previewProps,\n  previewSurfaceProps,\n}) => {\n  const refId = useId();\n  const citeId = useId();\n\n  const referenceId = propsRefId ?? refId;\n  const citationId = propsCiteId ?? citeId;\n\n  const components = React.useMemo(() => {\n    const citationHref = `#${citationId}`;\n\n    const PackagedReference: PackagedReference = props => {\n      const referenceIndex = props.index ?? referenceProps?.index ?? index;\n\n      return (\n        <Reference\n          {...referenceProps}\n          index={referenceIndex}\n          referenceId={referenceId}\n          citationHref={citationHref}\n          {...props}\n        />\n      );\n    };\n\n    const CitationWithPreview: PackagedCitation = props => {\n      // We assert content as a slot to use it with its resolved props object and the correct defaults below.\n      const content = slot.always(referenceProps ? referenceProps.content : undefined, {\n        defaultProps: {\n          children: referenceProps?.excerpt && <Caption1>{referenceProps.excerpt}</Caption1>,\n        },\n        elementType: 'div',\n      });\n      const citationWithPreviewState = {\n        components: {\n          content: 'div',\n        },\n        content,\n      };\n      assertSlots<PreviewExtraSlots>(citationWithPreviewState);\n\n      // We resolve the slots' objects for sensitivityLabel and title here so that we can use the information from their children below.\n      const sensitivityLabel = slot.optional(referenceProps?.sensitivityLabel, { elementType: 'span' });\n      const title = slot.optional(referenceProps?.label, { elementType: 'div' });\n\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...previewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} id={citationId} referenceId={referenceId} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...previewSurfaceProps}>\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}\n              >\n                {title?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={referenceProps?.icon}\n                primaryText={referenceProps?.primaryText}\n                secondaryText={referenceProps?.secondaryText}\n                tertiaryText={referenceProps?.tertiaryText}\n              />\n              {sensitivityLabel && (\n                <Badge color=\"informative\" shape=\"rounded\" size=\"small\">\n                  {sensitivityLabel.children}\n                </Badge>\n              )}\n              <citationWithPreviewState.content />\n              {previewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: CitationWithPreview,\n      Reference: PackagedReference,\n    };\n  }, [index, referenceId, citationId, referenceProps, citationProps, previewProps, previewSurfaceProps]);\n\n  return components;\n};\n"],"names":["React","Badge","Caption1","assertSlots","mergeCallbacks","slot","useId","usePopoverContext_unstable","Preview","PreviewContent","PreviewHeader","PreviewMetadata","PreviewSurface","PreviewTrigger","Citation","Reference","CitationCloseButton","citationCloseButtonProps","setPopoverOpen","context","setOpen","onPopoverCloseClick","useCallback","ev","preventDefault","onCitationCloseButtonClick","onClick","useReferenceCitationPreview","index","referenceId","propsRefId","citationId","propsCiteId","citationProps","referenceProps","previewProps","previewSurfaceProps","refId","citeId","components","useMemo","citationHref","PackagedReference","props","referenceIndex","CitationWithPreview","content","always","undefined","defaultProps","children","excerpt","elementType","citationWithPreviewState","sensitivityLabel","optional","title","label","closeOnScroll","positioning","size","trapFocus","withArrow","id","citation","aria-label","referenceHref","tabIndex","media","icon","primaryText","secondaryText","tertiaryText","color","shape"],"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';\nimport {\n  Caption1,\n  assertSlots,\n  mergeCallbacks,\n  slot,\n  useId,\n  usePopoverContext_unstable,\n} from '@fluentui/react-components';\nimport type { Slot } 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 { PreviewProps, PreviewSurfaceProps } from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../Citation';\nimport { Reference } from '../Reference';\nimport type { CitationProps } from '../Citation';\nimport type { ReferenceProps } from '../Reference';\n\n/**\n * Props for a \"packaged Citation\". A packaged Citation is a `Citation` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedCitationProps = Omit<CitationProps, 'referenceHref'> &\n  Partial<Pick<CitationProps, 'referenceHref'>>;\n\n/**\n * A \"packaged Citation\". A packaged Citation is a `Citation` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedCitation = React.FC<PackagedCitationProps>;\n\ntype PartialReferenceProps = 'citationHref' | 'index' | 'referenceId';\n\n/**\n * Props for a \"packaged Reference\". A packaged Reference is a `Reference` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedReferenceProps = Omit<ReferenceProps, PartialReferenceProps> &\n  Partial<Pick<ReferenceProps, PartialReferenceProps>>;\n\n/**\n * A \"packaged Reference\". A packaged Reference is a `Reference` that is\n * pre-packaged with props set by the `useReferenceCitation` hook.\n */\nexport type PackagedReference = React.FC<PackagedReferenceProps>;\n\n/**\n * Data used to package a `Citation` and `Reference` together with\n * the `useReferenceCitation` hook.\n */\nexport type ReferenceCitationData = {\n  index: number;\n  referenceId?: string;\n  citationId?: string;\n  citationProps?: PackagedCitationProps;\n  referenceProps?: PackagedReferenceProps;\n  previewProps?: PreviewProps;\n  previewSurfaceProps?: PreviewSurfaceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (data: ReferenceCitationData) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\ntype PreviewExtraSlots = {\n  content: Slot<'div'>;\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\n/**\n * Hook to package a `Citation` and `Reference` together in an\n * accessibly by default manner.\n *\n * When using citations and references, prefer using them via this\n * hook to ensure props are wired up correctly.\n */\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = ({\n  index,\n  referenceId: propsRefId,\n  citationId: propsCiteId,\n  citationProps,\n  referenceProps,\n  previewProps,\n  previewSurfaceProps,\n  sensitivityLabelProps,\n}) => {\n  const refId = useId();\n  const citeId = useId();\n\n  const referenceId = propsRefId ?? refId;\n  const citationId = propsCiteId ?? citeId;\n\n  const components = React.useMemo(() => {\n    const citationHref = `#${citationId}`;\n\n    const PackagedReference: PackagedReference = props => {\n      const referenceIndex = props.index ?? referenceProps?.index ?? index;\n\n      return (\n        <Reference\n          {...referenceProps}\n          index={referenceIndex}\n          referenceId={referenceId}\n          citationHref={citationHref}\n          {...props}\n        />\n      );\n    };\n\n    const CitationWithPreview: PackagedCitation = props => {\n      // We assert content as a slot to use it with its resolved props object and the correct defaults below.\n      const content = slot.always(referenceProps ? referenceProps.content : undefined, {\n        defaultProps: {\n          children: referenceProps?.excerpt && <Caption1>{referenceProps.excerpt}</Caption1>,\n        },\n        elementType: 'div',\n      });\n      const citationWithPreviewState = {\n        components: {\n          content: 'div',\n        },\n        content,\n      };\n      assertSlots<PreviewExtraSlots>(citationWithPreviewState);\n\n      // We resolve the slots' objects for sensitivity and title here so that we can use the information from their children below.\n      const sensitivity = slot.optional(referenceProps?.sensitivity, { elementType: 'span' });\n      const title = slot.optional(referenceProps?.label, { elementType: 'div' });\n\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...previewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} id={citationId} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...previewSurfaceProps}>\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}\n              >\n                {title?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={referenceProps?.icon}\n                primaryText={referenceProps?.primaryText}\n                secondaryText={referenceProps?.secondaryText}\n                tertiaryText={referenceProps?.tertiaryText}\n              />\n              {sensitivity && (\n                <SensitivityLabel description={sensitivityLabelProps?.description ?? ''}>\n                  {sensitivity.children}\n                </SensitivityLabel>\n              )}\n              <citationWithPreviewState.content />\n              {previewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: CitationWithPreview,\n      Reference: PackagedReference,\n    };\n  }, [\n    index,\n    referenceId,\n    citationId,\n    referenceProps,\n    citationProps,\n    previewProps,\n    previewSurfaceProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["React","Caption1","assertSlots","mergeCallbacks","slot","useId","usePopoverContext_unstable","Preview","PreviewContent","PreviewHeader","PreviewMetadata","PreviewSurface","PreviewTrigger","SensitivityLabel","Citation","Reference","CitationCloseButton","citationCloseButtonProps","setPopoverOpen","context","setOpen","onPopoverCloseClick","useCallback","ev","preventDefault","onCitationCloseButtonClick","onClick","useReferenceCitationPreview","index","referenceId","propsRefId","citationId","propsCiteId","citationProps","referenceProps","previewProps","previewSurfaceProps","sensitivityLabelProps","refId","citeId","components","useMemo","citationHref","PackagedReference","props","referenceIndex","CitationWithPreview","content","always","undefined","defaultProps","children","excerpt","elementType","citationWithPreviewState","sensitivity","optional","title","label","closeOnScroll","positioning","size","trapFocus","withArrow","id","citation","aria-label","referenceHref","tabIndex","media","icon","primaryText","secondaryText","tertiaryText","description"],"mappings":"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"}

package/lib/index.js

@@ -1,7 +1,6 @@
 export { Citation, citationClassNames, renderCitation_unstable, useCitation_unstable, useCitationStyles_unstable } from './Citation';
 export { Reference, referenceClassNames, renderReference_unstable, useReference_unstable, useReferenceStyles_unstable } from './Reference';
-export { useReferenceCitation, useReferenceCitationPreview, useReferenceGroup } from './hooks';
+export { useReferenceCitationPreview, useReferenceGroup } from './hooks';
 export { ReferenceList, referenceListClassNames, useReferenceList_unstable, useReferenceListStyles_unstable, renderReferenceList_unstable } from './ReferenceList';
-export { ReferenceGroup, referenceGroupClassNames, renderReferenceGroup_unstable, useReferenceGroup_unstable, useReferenceGroupStyles_unstable } from './ReferenceGroup';
 export { ReferenceGroupToggle, referenceGroupToggleClassNames, renderReferenceGroupToggle_unstable, useReferenceGroupToggleStyles_unstable, useReferenceGroupToggle_unstable } from './ReferenceGroupToggle';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Citation,\n  citationClassNames,\n  renderCitation_unstable,\n  useCitation_unstable,\n  useCitationStyles_unstable,\n} from './Citation';\nexport {\n  Reference,\n  referenceClassNames,\n  renderReference_unstable,\n  useReference_unstable,\n  useReferenceStyles_unstable,\n} from './Reference';\nexport { useReferenceCitation, useReferenceCitationPreview, useReferenceGroup } from './hooks';\nexport {\n  ReferenceList,\n  referenceListClassNames,\n  useReferenceList_unstable,\n  useReferenceListStyles_unstable,\n  renderReferenceList_unstable,\n} from './ReferenceList';\nexport {\n  ReferenceGroup,\n  referenceGroupClassNames,\n  renderReferenceGroup_unstable,\n  useReferenceGroup_unstable,\n  useReferenceGroupStyles_unstable,\n} from './ReferenceGroup';\nexport {\n  ReferenceGroupToggle,\n  referenceGroupToggleClassNames,\n  renderReferenceGroupToggle_unstable,\n  useReferenceGroupToggleStyles_unstable,\n  useReferenceGroupToggle_unstable,\n} from './ReferenceGroupToggle';\n\n// Types\n\nexport type { CitationSlots, CitationProps, CitationState } from './Citation';\nexport type { ReferenceSlots, ReferenceProps, ReferenceState } from './Reference';\nexport type { ReferenceListSlots, ReferenceListProps, ReferenceListState } from './ReferenceList';\nexport type { ReferenceGroupSlots, ReferenceGroupProps, ReferenceGroupState } from './ReferenceGroup';\nexport type {\n  ReferenceGroupToggleSlots,\n  ReferenceGroupToggleProps,\n  ReferenceGroupToggleState,\n} from './ReferenceGroupToggle';\n\nexport type {\n  PackagedCitationProps,\n  PackagedCitation,\n  PackagedReferenceProps,\n  PackagedReference,\n  ReferenceCitationData,\n  UseReferenceCitation,\n  UseReferenceCitationPreview,\n  UseReferenceGroup,\n  UseReferenceGroupProps,\n} from './hooks';\n"],"names":["Citation","citationClassNames","renderCitation_unstable","useCitation_unstable","useCitationStyles_unstable","Reference","referenceClassNames","renderReference_unstable","useReference_unstable","useReferenceStyles_unstable","useReferenceCitation","useReferenceCitationPreview","useReferenceGroup","ReferenceList","referenceListClassNames","useReferenceList_unstable","useReferenceListStyles_unstable","renderReferenceList_unstable","ReferenceGroup","referenceGroupClassNames","renderReferenceGroup_unstable","useReferenceGroup_unstable","useReferenceGroupStyles_unstable","ReferenceGroupToggle","referenceGroupToggleClassNames","renderReferenceGroupToggle_unstable","useReferenceGroupToggleStyles_unstable","useReferenceGroupToggle_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,oBAAoB,EACpBC,0BAA0B,QACrB,aAAa;AACpB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,qBAAqB,EACrBC,2BAA2B,QACtB,cAAc;AACrB,SAASC,oBAAoB,EAAEC,2BAA2B,EAAEC,iBAAiB,QAAQ,UAAU;AAC/F,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AACzB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,gCAAgC,QAC3B,mBAAmB;AAC1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Citation,\n  citationClassNames,\n  renderCitation_unstable,\n  useCitation_unstable,\n  useCitationStyles_unstable,\n} from './Citation';\nexport {\n  Reference,\n  referenceClassNames,\n  renderReference_unstable,\n  useReference_unstable,\n  useReferenceStyles_unstable,\n} from './Reference';\nexport { useReferenceCitationPreview, useReferenceGroup } from './hooks';\nexport {\n  ReferenceList,\n  referenceListClassNames,\n  useReferenceList_unstable,\n  useReferenceListStyles_unstable,\n  renderReferenceList_unstable,\n} from './ReferenceList';\nexport {\n  ReferenceGroupToggle,\n  referenceGroupToggleClassNames,\n  renderReferenceGroupToggle_unstable,\n  useReferenceGroupToggleStyles_unstable,\n  useReferenceGroupToggle_unstable,\n} from './ReferenceGroupToggle';\n\n// Types\n\nexport type { CitationSlots, CitationProps, CitationState } from './Citation';\nexport type { ReferenceSlots, ReferenceProps, ReferenceState } from './Reference';\nexport type { ReferenceListSlots, ReferenceListProps, ReferenceListState } from './ReferenceList';\nexport type {\n  ReferenceGroupToggleSlots,\n  ReferenceGroupToggleProps,\n  ReferenceGroupToggleState,\n} from './ReferenceGroupToggle';\n\nexport type {\n  PackagedCitationProps,\n  PackagedCitation,\n  PackagedReferenceProps,\n  PackagedReference,\n  ReferenceCitationData,\n  UseReferenceCitationPreview,\n  UseReferenceGroup,\n  UseReferenceGroupProps,\n} from './hooks';\n"],"names":["Citation","citationClassNames","renderCitation_unstable","useCitation_unstable","useCitationStyles_unstable","Reference","referenceClassNames","renderReference_unstable","useReference_unstable","useReferenceStyles_unstable","useReferenceCitationPreview","useReferenceGroup","ReferenceList","referenceListClassNames","useReferenceList_unstable","useReferenceListStyles_unstable","renderReferenceList_unstable","ReferenceGroupToggle","referenceGroupToggleClassNames","renderReferenceGroupToggle_unstable","useReferenceGroupToggleStyles_unstable","useReferenceGroupToggle_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,oBAAoB,EACpBC,0BAA0B,QACrB,aAAa;AACpB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,qBAAqB,EACrBC,2BAA2B,QACtB,cAAc;AACrB,SAASC,2BAA2B,EAAEC,iBAAiB,QAAQ,UAAU;AACzE,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AACzB,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB"}