@fluentui-copilot/react-reference 0.11.2 → 0.11.4

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js

@@ -15,19 +15,20 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reactutilities = require("@fluentui/react-utilities");
 const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
 const useReferenceOverflowButton_unstable = (props, ref)=>{
+    'use no memo';
     const { children, text } = props;
     const rootRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
-    const { areReferencesExpanded, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
-            ctxAppearance: ctx.appearance,
+    const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
             areReferencesExpanded: ctx.areReferencesExpanded,
-            previousOverflowCount: ctx.previousOverflowCount,
+            maxVisibleReferences: ctx.maxVisibleReferences,
+            referenceListRef: ctx.referenceListRef,
+            totalReferencesCount: ctx.totalReferencesCount,
             triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
         }));
-    const appearance = props.appearance || ctxAppearance;
     const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
     const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
-    const { findPrevFocusable } = (0, _reactcomponents.useFocusFinders)();
+    const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();
     const onKeyDown = _react.useCallback((ev)=>{
         if (ev.key === _keyboardkeys.Enter || ev.key === _keyboardkeys.Space) {
             triggeredViaKeyboard.current = true;
@@ -35,17 +36,22 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
     }, [
         triggeredViaKeyboard
     ]);
-    // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.
+    // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.
+    const previousOverflow = _react.useRef(0);
+    // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.
     _react.useEffect(()=>{
-        if (triggeredViaKeyboard.current) {
+        // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.
+        if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {
             let elementToFocus;
-            // If the references are contracted, we move focus to the overflow button.
+            // If the references are collapsed, we move focus to the overflow button.
             if (!areReferencesExpanded) {
                 elementToFocus = rootRef.current;
-            } else if (rootRef.current && previousOverflowCount) {
-                let currentElement = rootRef.current;
-                for(let i = 0; i < previousOverflowCount.current && currentElement; i++){
-                    currentElement = findPrevFocusable(currentElement);
+                previousOverflow.current = overflowCount;
+            } else if (rootRef.current && referenceListRef.current) {
+                const positionToFocus = maxVisibleReferences < totalReferencesCount - previousOverflow.current ? maxVisibleReferences : totalReferencesCount - previousOverflow.current;
+                let currentElement = findFirstFocusable(referenceListRef.current);
+                for(let i = 0; i < positionToFocus && currentElement; i++){
+                    currentElement = findNextFocusable(currentElement);
                 }
                 elementToFocus = currentElement;
             }
@@ -55,16 +61,19 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
                 triggeredViaKeyboard.current = false;
             }, 0);
         }
-        // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.
-        previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
+    }, [
         areReferencesExpanded,
+        findFirstFocusable,
+        findNextFocusable,
         isOverflowing,
+        maxVisibleReferences,
+        overflowCount,
+        referenceListRef,
+        setTimeout,
+        totalReferencesCount,
         triggeredViaKeyboard
     ]);
     const state = {
-        appearance,
         shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
         components: {
             root: 'button'

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, ctxAppearance, previousOverflowCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      ctxAppearance: ctx.appearance,\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      previousOverflowCount: ctx.previousOverflowCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n  const appearance = props.appearance || ctxAppearance;\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findPrevFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // When the references are expanded or contracted via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(\n    () => {\n      if (triggeredViaKeyboard.current) {\n        let elementToFocus: HTMLElement | null | undefined;\n\n        // If the references are contracted, we move focus to the overflow button.\n        if (!areReferencesExpanded) {\n          elementToFocus = rootRef.current;\n        }\n        // If the references are expanded, we move focus to the first reference that was hidden when they were contracted.\n        // We do this by moving focus to the element that is overflowCount elements before the overflow button.\n        else if (rootRef.current && previousOverflowCount) {\n          let currentElement: HTMLElement | null | undefined = rootRef.current;\n          for (let i = 0; i < previousOverflowCount.current && currentElement; i++) {\n            currentElement = findPrevFocusable(currentElement);\n          }\n          elementToFocus = currentElement;\n        }\n\n        // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n        setTimeout(() => {\n          elementToFocus?.focus();\n          triggeredViaKeyboard.current = false;\n        }, 0);\n      }\n\n      // We update the previousOverflowCount to the current one when references are contracted, so that we have the correct number once they are expanded.\n      previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [areReferencesExpanded, isOverflowing, triggeredViaKeyboard],\n  );\n\n  const state: ReferenceOverflowButtonState = {\n    appearance,\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["children","props","setTimeout","text","areReferencesExpanded","previousOverflowCount","ctxAppearance","appearance","triggeredViaKeyboard","processedText","useReferenceListContext_unstable","useFocusFinders","onKeyDown","React","useCallback","Enter","ctx","overflowButtonTriggeredViaKeyboard","isOverflowing","useEffect","elementToFocus","rootRef","current","ev","currentElement","i","overflowCount","findPrevFocusable","focus","shouldRenderOverflowButton","ref","state","elementType","root","slot","always","getIntrinsicElementProps","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BUA;;;eAAAA;;;;iEA3Ba;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAQA,sCAAmBC,CAAAA,OAAAA;UAE3B,EAEAD,QAAOE,EAEPC,IAAA;oBAGIC,OAAAA,MAAAA,CAAAA;sBACAC,GAAAA,IAAAA,0BAAAA;iCAEF,EACFC,aAAMC,EAENF,qBAAqB,EAErBG,oBAAMC,KAENC,IAAAA,sDAA8BC,EAAAA,CAAAA,MAAAA,CAAAA;YAC9BL,eAAMM,IAAYC,UAAMC;mCAELC,IAAAA,qBAA2B;mCACxCP,IAAAA,qBAA+B;kCACjCQ,IAAAC,kCAAA;;UAEDT,aAAAA,MAAAA,UAAAA,IAAAA;UAAqB,EAGxBU,aAAA,EACAL,aAAMM,yCAEEX;0BACEY,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAAA,OAAAA,SAAAA,aAAAA,KAAAA,iBAAAA;6BAGChB,yCACHgB;sBAIGP,OAAIQ,WAAQC,CAAOC,CAAAA;uBACtBR,mBAAIS,IAAAA,GAAAA,GAAAA,KAAiDH,mBAAAA,EAAQC;iCACpDG,OAAOA,GAAIpB;;;;KAEpB;qHACiBmB;oBACnB,CAAA;iCAEAF,OAAA,EAAA;;sFAEEF;wCACAZ;iCACCa,QAAAC,OAAA;mBACL,IAAAD,QAAAC,OAAA,IAAAjB,uBAAA;gBAEA,IAAAmB,iBAAAH,QAAAC,OAAA;gBACAjB,IAAAA,IAAAA,IAAAA,GAAAA,IAAAA,sBAAgCD,OAAAA,IAAAA,gBAA4BsB,IAAAA;oBAE9DF,iBAAAG,kBAAAH;gBACA;gBAACpB,iBAAAA;;2JAAsCI;YAAqBN,WAAA;gBAG9DkB,mBAA4C,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAQ,KAAA;gBAC1CrB,qBAAAA,OAAAA,GAAAA;eACAsB;;4JAGQ;8BACRP,OAAA,GAAAlB,wBAAA,IAAAsB;8DAIgCI;;;QACpBZ;QAAAV;KAAA;UACVuB,QACA;;oCAEctB,iBAAAA;oBACZ;kBACAuB;;QAGNC,MAAAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;YAEAL,KAAME,IAAAA,8BAAc,EAAAZ,SAAGgB;YAEvB,GAAApC,KAAO8B;QACP,IAAA"}
+{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  slot,\n  useFocusFinders,\n  useMergedRefs,\n  useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n  props: ReferenceOverflowButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const { children, text } = props;\n\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const [setTimeout] = useTimeout();\n\n  const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } =\n    useReferenceListContext_unstable(ctx => ({\n      areReferencesExpanded: ctx.areReferencesExpanded,\n      maxVisibleReferences: ctx.maxVisibleReferences,\n      referenceListRef: ctx.referenceListRef,\n      totalReferencesCount: ctx.totalReferencesCount,\n      triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n    }));\n\n  const { isOverflowing, overflowCount } = useOverflowMenu();\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n  const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n  const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    ev => {\n      if (ev.key === Enter || ev.key === Space) {\n        triggeredViaKeyboard.current = true;\n      }\n    },\n    [triggeredViaKeyboard],\n  );\n\n  // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n  const previousOverflow = React.useRef(0);\n\n  // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n  React.useEffect(() => {\n    // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n    if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n      let elementToFocus: HTMLElement | null | undefined;\n\n      // If the references are collapsed, we move focus to the overflow button.\n      if (!areReferencesExpanded) {\n        elementToFocus = rootRef.current;\n        previousOverflow.current = overflowCount;\n      }\n      // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n      // We do this by moving focus according to the following heuristics:\n      // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n      // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n      else if (rootRef.current && referenceListRef.current) {\n        const positionToFocus =\n          maxVisibleReferences < totalReferencesCount - previousOverflow.current\n            ? maxVisibleReferences\n            : totalReferencesCount - previousOverflow.current;\n\n        let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n        for (let i = 0; i < positionToFocus && currentElement; i++) {\n          currentElement = findNextFocusable(currentElement);\n        }\n\n        elementToFocus = currentElement;\n      }\n\n      // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n      setTimeout(() => {\n        elementToFocus?.focus();\n        triggeredViaKeyboard.current = false;\n      }, 0);\n    }\n  }, [\n    areReferencesExpanded,\n    findFirstFocusable,\n    findNextFocusable,\n    isOverflowing,\n    maxVisibleReferences,\n    overflowCount,\n    referenceListRef,\n    setTimeout,\n    totalReferencesCount,\n    triggeredViaKeyboard,\n  ]);\n\n  const state: ReferenceOverflowButtonState = {\n    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(rootRef, ref),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: processedText,\n        },\n        elementType: 'button',\n      },\n    ),\n  };\n\n  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n  return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","areReferencesExpanded","referenceListRef","ctx","totalReferencesCount","maxVisibleReferences","isOverflowing","processedText","findFirstFocusable","triggeredViaKeyboard","React","Space","overflowButtonTriggeredViaKeyboard","useEffect","undefined","text","overflowCount","elementToFocus","previousOverflow","current","Enter","rootRef","positionToFocus","i","currentElement","useRef","findNextFocusable","focus","shouldRenderOverflowButton","setTimeout","state","getIntrinsicElementProps","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAQC;oBAIJC,OAAAA,MAAkBC,CAAAA;sBAClBC,GAAAA,IAAAA,0BAAAA;iCAEF,EAEFC,oBAAQC,EAERJ,gBAAMK,EAENH,oBAAQI,EACRC,oBAAkBC,+DAEgB,EAAAP,CAAAA,MAAKQ,CAAAA;mCACjCF,IAAAA,qBAA+B;kCACjCN,IAAAE,oBAAA;YACFH,kBACAC,IAAAD,gBAAA;kCAACO,IAAAA,oBAAAA;kCAAqBN,IAAAS,kCAAA;;UAIxB,EAEAN,aAAA,EACAI,aAAMG,yCACJ;UACAN,gBAAIF,aAAyBS,QAAAA,aAAaL,KAAAA,IAAAA,WAA4B,OAAEM,SAAA,aAAAA,KAAAC,iBAAAD;8BAGtE,mBACKd,yCACHgB;sBACAC,OAAAA,WAAiBC,CAAAA,CAAAA;kBACnB,KAKKC,mBAAIC,IAAAA,GAAQF,GAAAA,KAAOR,mBAAIT,EAAAA;iCACpBoB,OAAAA,GAAAA;;;;KAMGC;8IAC4BC;6BACrCd,OAAAe,MAAA,CAAA;oHAEiBD;oBACnB,CAAA;uHAEA;qCACWV,aAAAL,qBAAAU,OAAA,EAAA;;qFAEsB;wCAC9B;gBACLF,iBAAAI,QAAAF,OAAA;gBACCD,iBAAAC,OAAA,GAAAH;mBACDf,IAAAA,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;gBACAO,MAAAA,kBAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA,GAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA;gBACAkB,IAAAA,iBAAAA,mBAAAA,iBAAAA,OAAAA;gBACApB,IAAAA,IAAAA,IAAAA,GAAAA,IAAAA,mBAAAA,gBAAAA,IAAAA;oBACAD,iBAAAA,kBAAAA;gBACAW;gBACAd,iBAAAA;;2JAEAE;uBACAK;gBACDQ,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAU,KAAA;gBAEDlB,qBAA4CU,OAAA,GAAA;eAC1CS;;;;QAGQpB;QAAAkB;QAAApB;QAAAD;QAAAW;QAAAd;QAAA2B;QAAAzB;QAAAK;KAAA;UACRqB,QAAA;oCAGEC,iBAAAA;oBACEhC;kBACA;;mCAGAiC,CAAAA,MAAAA,CAAAA,IAAAA,yCAAc,EAAA,UAAA;mDACZhC,EAAAA,SAAUO;oBACZ;;0BAEF;gBAEJP,UAAAO;YAEAuB;YAEAG,aAAOH;QACP"}

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/{useReferenceOverflowButtonStyles.js → useReferenceOverflowButtonStyles.styles.js}

@@ -27,39 +27,9 @@ const referenceOverflowButtonClassNames = {
     ".rbsq19a:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
     ".rbsq19a:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
 ]);
-const useRootStyles = (0, _reactcomponents.__styles)({
-    darker: {
-        De3pzq: "f3vzo32",
-        g2u3we: "fj3muxo",
-        h3c5rm: [
-            "f1akhkt",
-            "f1lxtadh"
-        ],
-        B9xav0g: "f1aperda",
-        zhjwy3: [
-            "f1lxtadh",
-            "f1akhkt"
-        ],
-        Jwef8y: "f14vf7cg",
-        iro3zm: "fho4vwd"
-    }
-}, {
-    d: [
-        ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
-        ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
-        ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
-        ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
-        ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}"
-    ],
-    h: [
-        ".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}",
-        ".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"
-    ]
-});
 const useReferenceOverflowButtonStyles_unstable = (state)=>{
-    const { appearance } = state;
+    'use no memo';
     const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);
     return state;
-}; //# sourceMappingURL=useReferenceOverflowButtonStyles.js.map
+}; //# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map

package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n  root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground3,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  display: 'inline-flex',\n  padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n  ...typographyStyles.caption1,\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    borderColor: tokens.colorNeutralStroke1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    borderColor: tokens.colorNeutralStroke1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n  state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["referenceOverflowButtonClassNames","useReferenceOverflowButtonStyles_unstable","root","backgroundColor","colorNeutralBackground3","display","state","rootBaseClassName","useRootBaseClassName","tokens","colorNeutralBackground3Hover","className","borderColor"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYFC,yCAAA;eAAAA;;;iCAhBqD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAwBC,IAAAA,8BAAAA,EAAAA,WAAuB,MAAA;IAAA;IAAA;IAAA;CAAA;AAI/CC,MAASJ,4CAAAK,CAAAA;;UAITC,oBAAUC;UACRL,IAAAA,CAAAA,SAAAA,GAAiBM,IAAAA,6BAAOC,EAAAA,kCAA4BR,IAAA,EAAAK,mBAAAD,MAAAJ,IAAA,CAAAS,SAAA;WACpDC;sEAEF"}

package/lib-commonjs/contexts/reference-v2/referenceListContext.js

@@ -22,15 +22,16 @@ _export(exports, {
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const ReferenceListContext = (0, _reactcontextselector.createContext)(undefined);
 const referenceListContextDefaultValue = {
-    appearance: 'lighter',
     areReferencesExpanded: false,
+    maxVisibleReferences: undefined,
     overflowButtonTriggeredViaKeyboard: {
         current: false
     },
-    previousOverflowCount: {
-        current: 0
+    referenceListRef: {
+        current: null
     },
-    shouldUseOverflow: false
+    shouldUseOverflow: false,
+    totalReferencesCount: 0
 };
 const ReferenceListContextProvider = ReferenceListContext.Provider;
 const useReferenceListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ReferenceListContext, (ctx = referenceListContextDefaultValue)=>selector(ctx)); //# sourceMappingURL=referenceListContext.js.map

package/lib-commonjs/contexts/reference-v2/referenceListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'appearance'\n  | 'areReferencesExpanded'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'previousOverflowCount'\n  | 'shouldUseOverflow'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  appearance: 'lighter',\n  areReferencesExpanded: false,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  previousOverflowCount: { current: 0 },\n  shouldUseOverflow: false,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["ReferenceListContext","ReferenceListContextProvider","useReferenceListContext_unstable","createContext","undefined","referenceListContextDefaultValue","appearance","areReferencesExpanded","overflowButtonTriggeredViaKeyboard","current","previousOverflowCount","shouldUseOverflow","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,oBAAAA;eAAAA;;IAYAC,4BAAAA;eAAAA;;IAEAC,gCAAAA;eAAAA;;;sCA9BqC;AAgB3C,MAAMF,uBAA2DG,IAAAA,mCAAAA,EAEtEC;AAEF,MAAMC,mCAA8D;gBAClEC;2BACAC;wCACAC;iBAAsCC;;2BACtCC;iBAAyBD;;uBACzBE;AACF;AAEO,MAAMV,+BAA+BD,qBAAqBY,QAAQ;AAElE,MAAMV,mCAAmCW,CAAAA,WAC9CC,IAAAA,wCAAAA,EAAmBd,sBAAsB,CAACe,MAAMV,gCAAgC,GAAKQ,SAASE"}
+{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n  ReferenceListState,\n  | 'areReferencesExpanded'\n  | 'maxVisibleReferences'\n  | 'overflowButtonTriggeredViaKeyboard'\n  | 'referenceListRef'\n  | 'shouldUseOverflow'\n  | 'totalReferencesCount'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n  ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n  areReferencesExpanded: false,\n  maxVisibleReferences: undefined,\n  overflowButtonTriggeredViaKeyboard: { current: false },\n  referenceListRef: { current: null },\n  shouldUseOverflow: false,\n  totalReferencesCount: 0,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n  useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["ReferenceListContext","ReferenceListContextProvider","useReferenceListContext_unstable","createContext","undefined","referenceListContextDefaultValue","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","current","referenceListRef","shouldUseOverflow","totalReferencesCount","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiBaA,oBAAAA;eAAAA;;IAaAC,4BAAAA;eAAAA;;IAEAC,gCAAAA;eAAAA;;;sCAhCqC;AAiB3C,MAAMF,uBAA2DG,IAAAA,mCAAAA,EAEtEC;AAEF,MAAMC,mCAA8D;2BAClEC;0BACAC;wCACAC;iBAAsCC;;sBACtCC;iBAAoBD;;uBACpBE;0BACAC;AACF;AAEO,MAAMX,+BAA+BD,qBAAqBa,QAAQ;AAElE,MAAMX,mCAAmCY,CAAAA,WAC9CC,IAAAA,wCAAAA,EAAmBf,sBAAsB,CAACgB,MAAMX,gCAAgC,GAAKS,SAASE"}

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

@@ -33,9 +33,9 @@ const CitationCloseButton = (citationCloseButtonProps)=>{
     });
 };
 const useReferenceCitationPreview = (props)=>{
-    const { citationPreviewProps, citationPreviewSurfaceProps, citationProps, index, previewContentProps, referencePreviewProps, referencePreviewSurfaceProps, referenceProps, sensitivityLabelProps } = props;
+    const { citationPreviewProps, citationPreviewSurfaceProps, citationProps, index, previewContentProps, previewHeaderProps, referencePreviewProps, referencePreviewSurfaceProps, referenceProps, sensitivityLabelProps } = props;
     const components = _react.useMemo(()=>{
-        const citationWithPreview = (props)=>{
+        const CitationWithPreview = (props)=>{
             var _previewContentProps_content;
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactpreview.Preview, {
                 closeOnScroll: true,
@@ -63,7 +63,7 @@ const useReferenceCitationPreview = (props)=>{
                                         tabIndex: -1,
                                         children: index
                                     }),
-                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
+                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
                                     children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
@@ -82,8 +82,13 @@ const useReferenceCitationPreview = (props)=>{
                 ]
             });
         };
-        const referenceWithPreview = (props)=>{
-            var _previewContentProps_content;
+        const ReferenceWithPreview = (props)=>{
+            const mergedReferenceProps = {
+                citation: index,
+                ...referenceProps,
+                ...props
+            };
+            var _previewHeaderProps_children, _previewContentProps_content;
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactpreview.Preview, {
                 closeOnScroll: true,
                 positioning: "below",
@@ -94,9 +99,7 @@ const useReferenceCitationPreview = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewTrigger, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ReferenceV2.Reference, {
-                            citation: index,
-                            ...referenceProps,
-                            ...props
+                            ...mergedReferenceProps
                         })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewSurface, {
@@ -110,8 +113,9 @@ const useReferenceCitationPreview = (props)=>{
                                         tabIndex: -1,
                                         children: index
                                     }),
-                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
-                                    children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
+                                    media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
+                                    ...previewHeaderProps,
+                                    children: (_previewHeaderProps_children = previewHeaderProps === null || previewHeaderProps === void 0 ? void 0 : previewHeaderProps.children) !== null && _previewHeaderProps_children !== void 0 ? _previewHeaderProps_children : referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
                                     icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
@@ -130,14 +134,15 @@ const useReferenceCitationPreview = (props)=>{
             });
         };
         return {
-            Citation: citationWithPreview,
-            Reference: referenceWithPreview
+            Citation: CitationWithPreview,
+            Reference: ReferenceWithPreview
         };
     }, [
         citationPreviewProps,
         citationPreviewSurfaceProps,
         citationProps,
         index,
+        previewHeaderProps,
         referencePreviewProps,
         referencePreviewSurfaceProps,
         referenceProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const citationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const referenceWithPreview: PackagedReference = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference citation={index} {...referenceProps} {...props} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.media as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: citationWithPreview,\n      Reference: referenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","citationPreviewProps","useReferenceCitationPreview","citationPreviewSurfaceProps","citationProps","components","previewContentProps","positioning","withArrow","useMemo","PreviewTrigger","PreviewSurface","aria-label","referenceHref","index","referenceProps","primaryText","secondaryText","sensitivityLabelProps","SensitivityLabel","referenceWithPreview","_jsxs","Preview","closeOnScroll","trapFocus","referencePreviewProps","Reference","citation","referencePreviewSurfaceProps","PreviewContent","tabIndex","media","children","PreviewMetadata","_previewContentProps_content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;4BACA;iEAEuB;iCAEoC;8BASpD;uCAC0B;0BASR;6BACC;AAgC1B,6IAA6I;AAC7I,MAAMA,sBAAsBC,CAAAA;UAC1BC,iBAAMA,IAAAA,2CAAiBC,EAAAA,CAAAA,UAA2BC,QAAWA,OAAQC;UAErEC,sBAAMA,OAAsBC,WAAMC,CAAAA,CAAAA;uBAE9BN,IAAeO;yBAEf;yBACGC;OACL;QAAAR;KACA;UAACA,6BAAAA,IAAAA,+BAAAA,EAAAA,qBAAAA,yBAAAA,OAAAA;WAAe,WAAA,GAAAS,IAAAA,eAAA,EAAAC,kBAAA,EAAA;QAGlB,GAAAX,wBAAMY;QAENC,SAAAD;;;;IACF,MAAA,EAEAE,oBAAaC,EACXC,2BACEF,EAWFG,aAAMC,OACJ,qBA2BWC,uBA1BT,8BACwB,gBAACC,uBAAyB;uBAAkBC,OAASC,OAAA,CAAA;oCAAKR,CAAAA;;4EAC7ES,EAAAA;;;;;;;;qDAKD,EAAAA,4BAACC,EAAAA;6CAAmBR,GAAAA,IAAAA,eAAAA,EAAAA,kBAAAA,EAAAA;;;;;;mFAISS,EAAAA;sDAAyCC;kGAA6B,EAAA;;8FACxFC,EAAAA;;iEAGA,EAAEC,MAAAA,OAAAA,CAAAA;;;;;8DAMPC,QAAWD,mBAAET,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;iEACbW,QAAeX,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;gGACH,EAAEA;;yEAEfY,QAAAA,wBAA0BC,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAAA;2EAAqBD,QAAqBZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAW,aAAA;;;yDACpEX,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;;;;;;;;;;cAOXc,uBAAMA,CAAAA;;mBACJ,WAAA,GAAAC,IAAAA,gBAAA,EAAAC,qBACGA,EAAAA;+BAAQC;6BAAchB;;2BAAiCiB;2BAAUhB;wCAAciB;;;mEAC9E,EAAAC,sBAAChB,EAAAA;;6CACYiB;;;;;;oEAEb,EAAChB,4BAAAA,EAAAA;;2CAAmBiB,GAAAA,IAAAA,eAAAA,EAAAA,2BAAAA,EAA4B;yDAC9C,GAAA/B,IAAAA,eAAA,EAAAX,qBAAC2C;;;;;;8DAGqFC,QAAAA,mBAAW,KAAA,IAAA,KAAA,IAAAf,eAAAgB,KAAA;yEACxFjB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;;kEAGEC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;yEAENA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAgBiB;;0EAElBC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;yDACK,WAAE3B,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;4DACNU;;gEACAC,wBAAeX,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,OAAqBW,MAAAA,QAAaiB,iCAAA,KAAA,IAAAA,+BAAAT,0BAAA,QAAAA,0BAAA,KAAA,IAAA,KAAA,IAAAA,sBAAAO,QAAA;6BAAA;;;;;;;;;;;;;;;;;;;;;;0DAS7D"}
+{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n  Preview,\n  PreviewContent,\n  PreviewHeader,\n  PreviewMetadata,\n  PreviewSurface,\n  PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n  PreviewHeaderProps,\n  PreviewMetadataProps,\n  PreviewProps,\n  PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n  PreviewMetadataProps,\n  'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n  content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n  citationPreviewProps?: PreviewProps;\n  citationPreviewSurfaceProps?: PreviewSurfaceProps;\n  citationProps?: CitationProps;\n  index: number;\n  previewContentProps?: PackagedPreviewContentProps;\n  previewHeaderProps?: PreviewHeaderProps;\n  referencePreviewProps?: PreviewProps;\n  referencePreviewSurfaceProps?: PreviewSurfaceProps;\n  referenceProps?: ReferenceProps;\n  sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n  Citation: PackagedCitation;\n  Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n  const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n    ev => {\n      setPopoverOpen(ev, false);\n\n      // Don't navigate\n      ev.preventDefault();\n    },\n    [setPopoverOpen],\n  );\n\n  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n  return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n  const {\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewContentProps,\n    previewHeaderProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    sensitivityLabelProps,\n  } = props;\n\n  const components = React.useMemo(() => {\n    const CitationWithPreview: PackagedCitation = props => {\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n          <PreviewTrigger>\n            <Citation {...citationProps} {...props}>\n              {index}\n            </Citation>\n          </PreviewTrigger>\n          <PreviewSurface {...citationPreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n              >\n                {referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? citationPreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    const ReferenceWithPreview: PackagedReference = props => {\n      const mergedReferenceProps = {\n        citation: index,\n        ...referenceProps,\n        ...props,\n      } as ReferenceProps;\n\n      return (\n        <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n          <PreviewTrigger>\n            <Reference {...mergedReferenceProps} />\n          </PreviewTrigger>\n          <PreviewSurface {...referencePreviewSurfaceProps}>\n            <PreviewContent>\n              <PreviewHeader\n                citation={\n                  <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n                    {index}\n                  </CitationCloseButton>\n                }\n                media={referenceProps?.graphic as PreviewHeaderProps['media']}\n                {...previewHeaderProps}\n              >\n                {previewHeaderProps?.children ?? referenceProps?.children}\n              </PreviewHeader>\n              <PreviewMetadata\n                icon={previewContentProps?.icon}\n                primaryText={previewContentProps?.primaryText}\n                secondaryText={previewContentProps?.secondaryText}\n                tertiaryText={previewContentProps?.tertiaryText}\n              />\n              {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n              {previewContentProps?.content ?? referencePreviewProps?.children}\n            </PreviewContent>\n          </PreviewSurface>\n        </Preview>\n      );\n    };\n\n    return {\n      Citation: CitationWithPreview,\n      Reference: ReferenceWithPreview,\n    };\n  }, [\n    citationPreviewProps,\n    citationPreviewSurfaceProps,\n    citationProps,\n    index,\n    previewHeaderProps,\n    referencePreviewProps,\n    referencePreviewSurfaceProps,\n    referenceProps,\n    previewContentProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","citationPreviewProps","useReferenceCitationPreview","citationPreviewSurfaceProps","citationProps","components","previewContentProps","closeOnScroll","size","referenceHref","tabIndex","index","media","referenceProps","secondaryText","tertiaryText","sensitivityLabelProps","SensitivityLabel","primaryText","mergedReferenceProps","Preview","positioning","withArrow","referencePreviewProps","PreviewTrigger","Reference","PreviewSurface","referencePreviewSurfaceProps","PreviewHeader","PreviewContent","graphic","children","_previewHeaderProps_children","previewHeaderProps","PreviewMetadata","_previewContentProps_content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;4BACA;iEAEuB;iCAEoC;8BASpD;uCAC0B;0BASR;6BACC;AAiC1B,6IAA6I;AAC7I,MAAMA,sBAAsBC,CAAAA;UAC1BC,iBAAMA,IAAAA,2CAAiBC,EAAAA,CAAAA,UAA2BC,QAAWA,OAAQC;UAErEC,sBAAMA,OAAsBC,WAAMC,CAAAA,CAAAA;uBAE9BN,IAAeO;yBAEf;yBACGC;OACL;QAAAR;KACA;UAACA,6BAAAA,IAAAA,+BAAAA,EAAAA,qBAAAA,yBAAAA,OAAAA;WAAe,WAAA,GAAAS,IAAAA,eAAA,EAAAC,kBAAA,EAAA;QAGlB,GAAAX,wBAAMY;QAENC,SAAAD;;;;IACF,MAAA,EAEAE,oBAAaC,EACXC,2BACEF,EAYFG,aAAMC,OACJ,qBA2BWC,oBA1BT,uBACWC,8BAA0B,gBAAQC,uBAAsB;uBAAeP,OAAAA,OAAAA,CAAAA;;;4EAE5E,EAAA;;;;;;;;+BAIkBE,GAAAA,IAAAA,eAAAA,EAAAA,4BAAAA,EAAAA;mEAClB,EAAAL,kBAAA,EAAA;;;;;;mFAGoEW,EAAAA;sDAAkBC;kGAC7EC,EAAAA;;;4DAGLC,IAAAA,eAAK,EAAA1B,qBAAE2B;yEAENA,OAAAA,CAAAA;;;;;8DAKDC,QAAAA,mBAAeR,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,OAAAA;iEACfS,QAAcT,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;;kEAEfU,QAAAA,wBAA0BC,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;yEAAqBD,QAAAA,wBAAqB,KAAA,IAAA,KAAA,IAAAV,oBAAAY,WAAA;;0EACpEZ,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;;;;;;;;;;;qCAQHa,CAAAA;yCACMR;0BACVA;iCACQ;wBACV;;8CAGGS;8BAAQb,GAAAA,IAAAA,gBAAa,EAAAa,qBAAA,EAAA;+BAACC;6BAAoBb;;2BAAuBc;2BAAcC;;;qDAC9E,EAAAC,4BAACA,EAAAA;mEACC,EAAAC,sBAAA,EAAA;mDAAeN;;;;uDAEhBO;6CAAmBC,GAAAA,IAAAA,gBAAAA,EAAAA,4BAAAA,EAA4B;;2CAC9C,GAAA9B,IAAAA,eAAA,EAAA+B,2BAACC,EAAAA;;yEACC,OAACD,CAAAA;;;;;yFAGMjB,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,OAAAA;;8EAGEE,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAgBiB,IAAAA,mBAAOC,QAAA,MAAA,QAAAC,iCAAA,KAAA,IAAAA,+BAAAnB,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAkB,QAAA;;gGAC1BE,EAAAA;0EAEHA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;;2EAEFC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,aAAAA;0EACO5B,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;yDACNY,WAAaZ,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;4DACbQ;;gEACYR,wBAAEA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,OAAqBS,MAAAA,QAAYoB,iCAAA,KAAA,IAAAA,+BAAAZ,0BAAA,QAAAA,0BAAA,KAAA,IAAA,KAAA,IAAAA,sBAAAQ,QAAA;6BAAA;;;;;;;;;;;;;;;;;;;;;;;0DAUpD"}

package/lib-commonjs/hooks/useReferenceCitationPreview.js

@@ -32,7 +32,7 @@ const CitationCloseButton = (citationCloseButtonProps)=>{
         onClick: onCitationCloseButtonClick
     });
 };
-const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationId: propsCiteId, citationProps, referenceProps, previewProps, previewSurfaceProps, sensitivityLabelProps })=>{
+const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationId: propsCiteId, citationProps, referenceProps, previewHeaderProps, previewProps, previewSurfaceProps, sensitivityLabelProps })=>{
     const refId = (0, _reactcomponents.useId)();
     const citeId = (0, _reactcomponents.useId)();
     const referenceId = propsRefId !== null && propsRefId !== void 0 ? propsRefId : refId;
@@ -74,7 +74,7 @@ const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationI
             const title = _reactcomponents.slot.optional(referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.label, {
                 elementType: 'div'
             });
-            var _sensitivityLabelProps_description;
+            var _previewHeaderProps_children, _sensitivityLabelProps_description, _previewSurfaceProps_children;
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactpreview.Preview, {
                 closeOnScroll: true,
                 positioning: "below",
@@ -103,7 +103,8 @@ const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationI
                                         children: index
                                     }),
                                     media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.media,
-                                    children: title === null || title === void 0 ? void 0 : title.children
+                                    ...previewHeaderProps,
+                                    children: (_previewHeaderProps_children = previewHeaderProps === null || previewHeaderProps === void 0 ? void 0 : previewHeaderProps.children) !== null && _previewHeaderProps_children !== void 0 ? _previewHeaderProps_children : title === null || title === void 0 ? void 0 : title.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
                                     icon: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.icon,
@@ -116,7 +117,7 @@ const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationI
                                     children: sensitivity.children
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(citationWithPreviewState.content, {}),
-                                previewProps === null || previewProps === void 0 ? void 0 : previewProps.children
+                                (_previewSurfaceProps_children = previewSurfaceProps === null || previewSurfaceProps === void 0 ? void 0 : previewSurfaceProps.children) !== null && _previewSurfaceProps_children !== void 0 ? _previewSurfaceProps_children : previewProps === null || previewProps === void 0 ? void 0 : previewProps.children
                             ]
                         })
                     })
@@ -133,6 +134,7 @@ const useReferenceCitationPreview = ({ index, referenceId: propsRefId, citationI
         citationId,
         referenceProps,
         citationProps,
+        previewHeaderProps,
         previewProps,
         previewSurfaceProps,
         sensitivityLabelProps

package/lib-commonjs/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  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":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","index","refId","useId","citeId","referenceId","citationId","components","citationHref","PackagedReference","referenceIndex","referenceProps","propsRefId","props","_ref","_props_index","CitationWithPreview","defaultProps","children","content","citationWithPreviewState","undefined","excerpt","Caption1","assertSlots","optional","elementType","sensitivityLabelProps","Preview","closeOnScroll","sensitivity","positioning","trapFocus","label","withArrow","PreviewTrigger","PreviewSurface","previewSurfaceProps","aria-label","primaryText","secondaryText","SensitivityLabel","description","tertiaryText","_sensitivityLabelProps_description","previewProps","citationProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\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 { PreviewHeaderProps, 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  previewHeaderProps?: PreviewHeaderProps;\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  previewHeaderProps,\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                {...previewHeaderProps}\n              >\n                {previewHeaderProps?.children ?? 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              {previewSurfaceProps?.children ?? 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    previewHeaderProps,\n    previewProps,\n    previewSurfaceProps,\n    sensitivityLabelProps,\n  ]);\n\n  return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","index","refId","useId","citeId","referenceId","citationId","components","citationHref","PackagedReference","props","referenceProps","referenceIndex","_props_index","_ref","CitationWithPreview","Reference","content","children","undefined","excerpt","Caption1","title","citationWithPreviewState","positioning","optional","sensitivity","size","withArrow","label","previewProps","PreviewTrigger","PreviewSurface","previewSurfaceProps","referenceHref","media","previewHeaderProps","primaryText","_previewHeaderProps_children","SensitivityLabel","description","sensitivityLabelProps","secondaryText","citationProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

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

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

@@ -1 +0,0 @@
-{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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/useReferenceStyles.js.map

@@ -1 +0,0 @@
-{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,gBAAgB,EAChBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAgBlB,iBAAiBmB,cAAc,CAACC,QAAQ;AAC9D,MAAMC,kBAAkBrB,iBAAiBmB,cAAc,CAACG,UAAU;AAElE,MAAMC,kBAAkB;AAExB,MAAMC,wBAAwB7B,gBAAgB;IAC5C8B,WAAW;IACXC,OAAO;IACPC,SAAS;IACTC,mBAAmB,CAAC;;;;;;IAMlB,CAAC;IACHC,qBAAqB;IACrBC,kBAAkB;IAClBC,QAAQ,CAAC,EAAEhC,OAAOiC,eAAe,CAAC,OAAO,EAAEjC,OAAOkC,mBAAmB,CAAC,CAAC;IACvEC,cAAcnC,OAAOoC,kBAAkB;IACvCC,SAAS,CAAC,EAAErC,OAAOsC,gBAAgB,CAAC,CAAC,EAAEtC,OAAOuC,kBAAkB,CAAC,CAAC;IAClEC,WAAW;IACXC,WAAWzC,OAAO0C,mBAAmB;IACrCC,YAAY;AACd;AAEA,MAAMC,YAAY/C,WAAW;IAC3BgD,QAAQ,CAAC;IACTC,SAAS;QACPf,kBAAkB;QAClB,GAAGhC,WAAWsC,OAAO,CAACrC,OAAO+C,iBAAiB,EAAE/C,OAAOuC,kBAAkB,CAAC;IAC5E;IACAS,QAAQ,CAAC;IACTC,SAAS;QACP,GAAGlD,WAAWmD,WAAW,CAAC,MAAM;QAChCvB,OAAO,CAAC,KAAK,EAAEH,gBAAgB,IAAI,EAAExB,OAAOmD,kBAAkB,CAAC,MAAM,CAAC;QACtE,GAAGpD,WAAWsC,OAAO,CAAC,MAAM;IAC9B;IACAe,QAAQ;QACNC,QAAQ;IACV;IACAjD,UAAU;QACR,GAAGL,WAAWuD,QAAQ,CAAC,WAAW;IACpC;IACAjD,OAAO;QACL,GAAGN,WAAWuD,QAAQ,CAAC,QAAQ;QAC/B1B,SAAS;QACTe,YAAY;QACZY,gBAAgB;IAClB;IACAC,cAAc;QACZ7B,OAAO;QACP8B,QAAQ;QAER,CAAC,CAAC,GAAG,EAAEzC,yBAAyBE,UAAU,CAAC,CAAC,CAAC,EAAE;YAC7CS,OAAO;YACP8B,QAAQ;QACV;IACF;IACAnD,SAAS;QACP,GAAGP,WAAWuD,QAAQ,CAAC,UAAU;QACjCI,aAAa;QACb9B,SAAS;QACT+B,cAAc;IAChB;IACA5C,eAAe;QACb,CAAC,CAAC,EAAE,EAAEpB,iBAAiBiB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC9BgD,OAAO5D,OAAO6D,uBAAuB;QACvC;IACF;IACAtD,aAAa;QACX,GAAGR,WAAWuD,QAAQ,CAAC,mBAAmB;QAC1CI,aAAa;IACf;IACAlD,UAAU;QACRsD,WAAW9D,OAAO+C,iBAAiB;QAEnC,GAAGhD,WAAWuD,QAAQ,CAAC,WAAW;QAClC,GAAGrD,iBAAiB8D,QAAQ;IAC9B;IACAC,wBAAwB;QACtBC,UAAU;QACVC,YAAYlE,OAAOuC,kBAAkB;QAErC,aAAa;YACXzB,SAAS;YACTc,SAAS;YACTqC,UAAU;YACVE,MAAM,CAAC,KAAK,EAAEnE,OAAOuC,kBAAkB,CAAC,MAAM,CAAC;YAC/C6B,KAAK,CAAC,MAAM,EAAEnE,iBAAiB8D,QAAQ,CAACxC,UAAU,CAAC,GAAG,EAAEtB,iBAAiB8D,QAAQ,CAAC1C,QAAQ,CAAC,MAAM,CAAC;YAClGoC,QAAQxD,iBAAiB8D,QAAQ,CAAC1C,QAAQ;YAC1C,GAAGtB,WAAWsE,UAAU,CAACrE,OAAOiC,eAAe,EAAE,SAASjC,OAAOsE,mBAAmB,CAAC;QACvF;IACF;IACA1D,MAAM;QACJ,GAAGX,iBAAiB8D,QAAQ;QAC5BQ,eAAe;IACjB;IACAzD,SAAS;QACPgD,WAAW9D,OAAO+C,iBAAiB;QACnC,GAAGhD,WAAWuD,QAAQ,CAAC,UAAU;QACjC1B,SAAS;QACT4C,eAAe;QACfnB,QAAQrD,OAAOsC,gBAAgB;QAC/BsB,OAAO5D,OAAO6D,uBAAuB;QACrCY,WAAW;IACb;IACAC,QAAQ;QACN9C,SAAS;IACX;AACF;AAEA,MAAM+C,iBAAiB9E,WAAW;IAChCM,MAAM;QACJ,GAAGJ,WAAWuD,QAAQ,CAAC,QAAQ;QAC/BsB,WAAW;QACX,GAAG3E,iBAAiBmB,cAAc;QAClCqD,WAAW;QACX,sBAAsB;QACtB,sBAAsB;QACtB7C,SAAS;QACTiD,WAAW;IACb;IAEAhC,QAAQ;QACN,iEAAiE;QACjEiC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEA2B,SAAS;QACP,iEAAiE;QACjEgC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEAiC,QAAQ;QACN2B,UAAU;QACV,sBAAsB;IACxB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGH;IAErC,MAAMI,gBAAgB5D;IACtB,MAAM6D,SAAS1C;IACf,MAAM2C,cAAcZ;IACpBM,MAAM9E,IAAI,CAACqF,SAAS,GAAG1F,aACrBI,oBAAoBC,IAAI,EACxBkF,eACAC,MAAM,CAACH,KAAK,EACZG,MAAM,CAACF,OAAO,EACd,CAACF,cAAcI,OAAOlC,MAAM,EAC5B6B,MAAM9E,IAAI,CAACqF,SAAS;IAGtB,IAAIP,MAAM7E,QAAQ,EAAE;QAClB6E,MAAM7E,QAAQ,CAACoF,SAAS,GAAG1F,aAAaI,oBAAoBE,QAAQ,EAAEkF,OAAOlF,QAAQ,EAAE6E,MAAM7E,QAAQ,CAACoF,SAAS;IACjH;IAEA,IAAIP,MAAM5E,KAAK,EAAE;QACf4E,MAAM5E,KAAK,CAACmF,SAAS,GAAG1F,aACtBI,oBAAoBG,KAAK,EACzBiF,OAAOjF,KAAK,EACZ+E,WAAW,aAAaE,OAAO9B,YAAY,EAC3CyB,MAAM5E,KAAK,CAACmF,SAAS;IAEzB;IAEA,IAAIP,MAAM3E,OAAO,EAAE;QACjB2E,MAAM3E,OAAO,CAACkF,SAAS,GAAG1F,aAAaI,oBAAoBI,OAAO,EAAEgF,OAAOhF,OAAO,EAAE2E,MAAM3E,OAAO,CAACkF,SAAS;IAC7G;IAEAP,MAAMpE,KAAK,CAAC2E,SAAS,GAAG1F,aACtBI,oBAAoBW,KAAK,EACzB0E,YAAYpF,IAAI,EAChBoF,WAAW,CAACJ,KAAK,EACjB,CAACD,cAAcK,YAAYnC,MAAM,EACjC6B,MAAMpE,KAAK,CAAC2E,SAAS;IAGvB,IAAIP,MAAM1E,WAAW,EAAE;QACrB0E,MAAM1E,WAAW,CAACiF,SAAS,GAAG1F,aAC5BI,oBAAoBK,WAAW,EAC/B+E,OAAO/E,WAAW,EAClB,CAAC2E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAM1E,WAAW,CAACiF,SAAS;IAE/B;IAEAP,MAAMzE,QAAQ,CAACgF,SAAS,GAAG1F,aACzBI,oBAAoBM,QAAQ,EAC5B8E,OAAO9E,QAAQ,EACf,CAAC0E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMzE,QAAQ,CAACgF,SAAS;IAG1B,IAAIC,mBAAmB;IACvB,IAAIR,MAAMxE,WAAW,EAAE;QACrBwE,MAAMxE,WAAW,CAAC+E,SAAS,GAAG1F,aAC5BI,oBAAoBO,WAAW,EAC/BO,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMxE,WAAW,CAAC+E,SAAS;QAE7BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMvE,aAAa,EAAE;QACvBuE,MAAMvE,aAAa,CAAC8E,SAAS,GAAG1F,aAC9BI,oBAAoBQ,aAAa,EACjCM,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMvE,aAAa,CAAC8E,SAAS;QAE/BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMtE,YAAY,EAAE;QACtBsE,MAAMtE,YAAY,CAAC6E,SAAS,GAAG1F,aAC7BI,oBAAoBS,YAAY,EAChCK,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMtE,YAAY,CAAC6E,SAAS;QAE9BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMrE,IAAI,EAAE;QACdqE,MAAMrE,IAAI,CAAC4E,SAAS,GAAG1F,aAAaI,oBAAoBU,IAAI,EAAE0E,OAAO1E,IAAI,EAAEqE,MAAMrE,IAAI,CAAC4E,SAAS;IACjG;IACAP,MAAMnE,OAAO,CAAC0E,SAAS,GAAG1F,aACxBI,oBAAoBY,OAAO,EAC3BwE,OAAOxE,OAAO,EACd,CAACoE,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMnE,OAAO,CAAC0E,SAAS;IAGzB,IAAIP,MAAMlE,aAAa,EAAE;QACvBkE,MAAMlE,aAAa,CAACyE,SAAS,GAAG1F,aAC9BI,oBAAoBa,aAAa,EACjCuE,OAAOvE,aAAa,EACpBkE,MAAMlE,aAAa,CAACyE,SAAS;IAEjC;IAEA,OAAOP;AACT,EAAE"}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["useReferenceGroupToggleStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n  root: 'fai-ReferenceGroupToggle',\n  icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  columnGap: tokens.spacingHorizontalSNudge,\n  alignItems: 'center',\n  ...typographyStyles.caption1,\n  border: 0,\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground3,\n  cursor: 'pointer',\n  width: 'max-content',\n  ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n  const iconBaseClassName = useIconBaseClassName();\n  const buttonBaseClassName = useButtonBaseClassName();\n  state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useReferenceGroupToggleStyles_unstable","state","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,iBAAiB,EAAE,EAAE;AACpD;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMY,yCAAyC,CAACC;IACrD,MAAMC,oBAAoBH;IAC1B,MAAMI,sBAAsBnB;IAC5BiB,MAAMnB,IAAI,CAACsB,SAAS,GAAG3B,aAAaI,+BAA+BC,IAAI,EAAEqB,qBAAqBF,MAAMnB,IAAI,CAACsB,SAAS;IAElH,IAAIH,MAAMlB,IAAI,EAAE;QACdkB,MAAMlB,IAAI,CAACqB,SAAS,GAAG3B,aAAaI,+BAA+BE,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACqB,SAAS;IAClH;IAEA,OAAOH;AACT,EAAE"}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["useReferenceListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n  root: 'fai-ReferenceList',\n};\n\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: tokens.spacingVerticalS,\n\n  [`> .${referenceListItemClassName}`]: {\n    listStyleType: 'none',\n  },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n  state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}