@fluentui-copilot/react-reference 0.0.0-nightly-20250708-1433-52f2b6b1.1 → 0.0.0-nightly-20250709-0404-150e065c.1

package/lib/components/ReferenceOverflowButton/renderReferenceOverflowButton.js

@@ -1,13 +1,18 @@
-  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { OverflowItem, assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of ReferenceOverflowButton
- */ export const renderReferenceOverflowButton_unstable = (state)=>{
-    assertSlots(state);
-    const { id, shouldRenderOverflowButton } = state;
-    return shouldRenderOverflowButton ? /*#__PURE__*/ _jsx(OverflowItem, {
-        id: id,
-        priority: 1,
-        children: /*#__PURE__*/ _jsx(state.root, {})
-    }, id) : null;
+ */
+export const renderReferenceOverflowButton_unstable = state => {
+  assertSlots(state);
+  const {
+    id,
+    shouldRenderOverflowButton
+  } = state;
+  return shouldRenderOverflowButton ? /*#__PURE__*/_jsx(OverflowItem, {
+    id: id,
+    priority: 1,
+    children: /*#__PURE__*/_jsx(state.root, {})
+  }, id) : null;
 };
+//# sourceMappingURL=renderReferenceOverflowButton.js.map

package/lib/components/ReferenceOverflowButton/useReferenceOverflowButton.js

@@ -12,82 +12,82 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
  *
  * @param props - props from this instance of ReferenceOverflowButton
  * @param ref - reference to root HTMLElement of ReferenceOverflowButton
- */ export const useReferenceOverflowButton_unstable = (props, ref)=>{
-    'use no memo';
-    const { children, id, text } = props;
-    const designVersion = useDesignVersion(props.designVersion);
-    const rootRef = React.useRef(null);
-    const [setTimeout] = useTimeout();
-    const referenceOverflowButtonId = useId('reference-overflow-button-', id);
-    const areReferencesExpanded = useReferenceListContext_unstable((ctx)=>ctx.areReferencesExpanded);
-    const maxVisibleReferences = useReferenceListContext_unstable((ctx)=>ctx.maxVisibleReferences);
-    const referenceListRef = useReferenceListContext_unstable((ctx)=>ctx.referenceListRef);
-    const totalReferencesCount = useReferenceListContext_unstable((ctx)=>ctx.totalReferencesCount);
-    const triggeredViaKeyboard = useReferenceListContext_unstable((ctx)=>ctx.overflowButtonTriggeredViaKeyboard);
-    const { isOverflowing, overflowCount } = useOverflowMenu();
-    const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
-    const { findFirstFocusable, findNextFocusable } = useFocusFinders();
-    const onKeyDown = React.useCallback((ev)=>{
-        if (ev.key === Enter || ev.key === Space) {
-            triggeredViaKeyboard.current = true;
+ */
+export const useReferenceOverflowButton_unstable = (props, ref) => {
+  'use no memo';
+
+  const {
+    children,
+    id,
+    text
+  } = props;
+  const designVersion = useDesignVersion(props.designVersion);
+  const rootRef = React.useRef(null);
+  const [setTimeout] = useTimeout();
+  const referenceOverflowButtonId = useId('reference-overflow-button-', id);
+  const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);
+  const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);
+  const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);
+  const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);
+  const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);
+  const {
+    isOverflowing,
+    overflowCount
+  } = useOverflowMenu();
+  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
+  const {
+    findFirstFocusable,
+    findNextFocusable
+  } = useFocusFinders();
+  const onKeyDown = React.useCallback(ev => {
+    if (ev.key === Enter || ev.key === Space) {
+      triggeredViaKeyboard.current = true;
+    }
+  }, [triggeredViaKeyboard]);
+  // 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(() => {
+    // 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 collapsed, we move focus to the overflow button.
+      if (!areReferencesExpanded) {
+        elementToFocus = rootRef.current;
+        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);
         }
-    }, [
-        triggeredViaKeyboard
-    ]);
-    // 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(()=>{
-        // 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 collapsed, we move focus to the overflow button.
-            if (!areReferencesExpanded) {
-                elementToFocus = rootRef.current;
-                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;
-            }
-            // 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.
-            setTimeout(()=>{
-                elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
-                triggeredViaKeyboard.current = false;
-            }, 0);
-        }
-    }, [
-        areReferencesExpanded,
-        findFirstFocusable,
-        findNextFocusable,
-        isOverflowing,
-        maxVisibleReferences,
-        overflowCount,
-        referenceListRef,
-        setTimeout,
-        totalReferencesCount,
-        triggeredViaKeyboard
-    ]);
-    const state = {
-        designVersion,
-        id: referenceOverflowButtonId,
-        shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
-        components: {
-            root: 'button'
-        },
-        root: slot.always(getIntrinsicElementProps('button', {
-            ref: useMergedRefs(rootRef, ref),
-            ...props
-        }), {
-            defaultProps: {
-                children: processedText
-            },
-            elementType: 'button'
-        })
-    };
-    state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);
-    return state;
+        elementToFocus = currentElement;
+      }
+      // 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.
+      setTimeout(() => {
+        elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+        triggeredViaKeyboard.current = false;
+      }, 0);
+    }
+  }, [areReferencesExpanded, findFirstFocusable, findNextFocusable, isOverflowing, maxVisibleReferences, overflowCount, referenceListRef, setTimeout, totalReferencesCount, triggeredViaKeyboard]);
+  const state = {
+    designVersion,
+    id: referenceOverflowButtonId,
+    shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
+    components: {
+      root: 'button'
+    },
+    root: slot.always(getIntrinsicElementProps('button', {
+      ref: useMergedRefs(rootRef, ref),
+      ...props
+    }), {
+      defaultProps: {
+        children: processedText
+      },
+      elementType: 'button'
+    })
+  };
+  state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);
+  return state;
 };
+//# sourceMappingURL=useReferenceOverflowButton.js.map

package/lib/contexts/index.js

@@ -1 +1,2 @@
 export { ReferenceListContext, ReferenceListContextProvider, useReferenceListContext_unstable } from './referenceListContext';
+//# sourceMappingURL=index.js.map

package/lib/contexts/referenceListContext.js

@@ -1,16 +1,17 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const ReferenceListContext = createContext(undefined);
 const referenceListContextDefaultValue = {
-    areReferencesExpanded: false,
-    maxVisibleReferences: undefined,
-    overflowButtonTriggeredViaKeyboard: {
-        current: false
-    },
-    referenceListRef: {
-        current: null
-    },
-    shouldUseOverflow: false,
-    totalReferencesCount: 0
+  areReferencesExpanded: false,
+  maxVisibleReferences: undefined,
+  overflowButtonTriggeredViaKeyboard: {
+    current: false
+  },
+  referenceListRef: {
+    current: null
+  },
+  shouldUseOverflow: false,
+  totalReferencesCount: 0
 };
 export const ReferenceListContextProvider = ReferenceListContext.Provider;
-export const useReferenceListContext_unstable = (selector)=>useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue)=>selector(ctx));
+export const useReferenceListContext_unstable = selector => useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));
+//# sourceMappingURL=referenceListContext.js.map

package/lib/index.js

@@ -2,20 +2,33 @@ import { Reference, referenceClassNames, referenceExtraClassNames, renderReferen
 import { ReferenceList, referenceListClassNames, renderReferenceList_unstable, useReferenceListStyles_unstable, useReferenceList_unstable } from './ReferenceList';
 import { generateReferenceCitationPreview, useReferenceCitationPreview } from './utilities';
 export { Citation, citationClassNames, renderCitation_unstable, useCitation_unstable, useCitationStyles_unstable } from './Citation';
-/** @deprecated use Reference */ const ReferenceV2 = Reference;
-/** @deprecated use referenceClassNames */ const referenceV2ClassNames = referenceClassNames;
-/** @deprecated use referenceExtraClassNames */ const referenceV2ExtraClassNames = referenceExtraClassNames;
-/** @deprecated use renderReference_unstable */ const renderReferenceV2_unstable = renderReference_unstable;
-/** @deprecated use useReferenceStyles_unstable */ const useReferenceV2Styles_unstable = useReferenceStyles_unstable;
-/** @deprecated use useReference_unstable */ const useReferenceV2_unstable = useReference_unstable;
+/** @deprecated use Reference */
+const ReferenceV2 = Reference;
+/** @deprecated use referenceClassNames */
+const referenceV2ClassNames = referenceClassNames;
+/** @deprecated use referenceExtraClassNames */
+const referenceV2ExtraClassNames = referenceExtraClassNames;
+/** @deprecated use renderReference_unstable */
+const renderReferenceV2_unstable = renderReference_unstable;
+/** @deprecated use useReferenceStyles_unstable */
+const useReferenceV2Styles_unstable = useReferenceStyles_unstable;
+/** @deprecated use useReference_unstable */
+const useReferenceV2_unstable = useReference_unstable;
 export { Reference, ReferenceV2, referenceClassNames, referenceV2ClassNames, referenceExtraClassNames, referenceV2ExtraClassNames, renderReference_unstable, renderReferenceV2_unstable, useReferenceStyles_unstable, useReferenceV2Styles_unstable, useReference_unstable, useReferenceV2_unstable };
-/** @deprecated use ReferenceList */ const ReferenceListV2 = ReferenceList;
-/** @deprecated use referenceListClassNames */ const referenceListV2ClassNames = referenceListClassNames;
-/** @deprecated use renderReferenceList_unstable */ const renderReferenceListV2_unstable = renderReferenceList_unstable;
-/** @deprecated use useReferenceListStyles_unstable */ const useReferenceListV2Styles_unstable = useReferenceListStyles_unstable;
-/** @deprecated use useReferenceList_unstable */ const useReferenceListV2_unstable = useReferenceList_unstable;
+/** @deprecated use ReferenceList */
+const ReferenceListV2 = ReferenceList;
+/** @deprecated use referenceListClassNames */
+const referenceListV2ClassNames = referenceListClassNames;
+/** @deprecated use renderReferenceList_unstable */
+const renderReferenceListV2_unstable = renderReferenceList_unstable;
+/** @deprecated use useReferenceListStyles_unstable */
+const useReferenceListV2Styles_unstable = useReferenceListStyles_unstable;
+/** @deprecated use useReferenceList_unstable */
+const useReferenceListV2_unstable = useReferenceList_unstable;
 export { ReferenceList, ReferenceListV2, referenceListClassNames, referenceListV2ClassNames, renderReferenceList_unstable, renderReferenceListV2_unstable, useReferenceListStyles_unstable, useReferenceListV2Styles_unstable, useReferenceList_unstable, useReferenceListV2_unstable };
 export { ReferenceOverflowButton, referenceOverflowButtonClassNames, renderReferenceOverflowButton_unstable, useReferenceOverflowButtonStyles_unstable, useReferenceOverflowButton_unstable } from './ReferenceOverflowButton';
 export { ReferenceListContext, ReferenceListContextProvider, useReferenceListContext_unstable } from './contexts';
-/** @deprecated use useReferenceCitationPreview */ const useReferenceCitationPreviewV2 = useReferenceCitationPreview;
+/** @deprecated use useReferenceCitationPreview */
+const useReferenceCitationPreviewV2 = useReferenceCitationPreview;
 export { generateReferenceCitationPreview, useReferenceCitationPreview, useReferenceCitationPreviewV2 };
+//# sourceMappingURL=index.js.map

package/lib/utilities/generateReferenceCitationPreview.js

@@ -5,20 +5,18 @@ import { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';
 import { Citation } from '../Citation';
 import { Reference } from '../Reference';
 // Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.
-const CitationCloseButton = (citationCloseButtonProps)=>{
-    const setPopoverOpen = usePopoverContext_unstable((context)=>context.setOpen);
-    const onPopoverCloseClick = React.useCallback((ev)=>{
-        setPopoverOpen(ev, false);
-        // Don't navigate
-        ev.preventDefault();
-    }, [
-        setPopoverOpen
-    ]);
-    const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);
-    return /*#__PURE__*/ React.createElement(Citation, {
-        ...citationCloseButtonProps,
-        onClick: onCitationCloseButtonClick
-    });
+const CitationCloseButton = citationCloseButtonProps => {
+  const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);
+  const onPopoverCloseClick = React.useCallback(ev => {
+    setPopoverOpen(ev, false);
+    // Don't navigate
+    ev.preventDefault();
+  }, [setPopoverOpen]);
+  const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);
+  return /*#__PURE__*/React.createElement(Citation, {
+    ...citationCloseButtonProps,
+    onClick: onCitationCloseButtonClick
+  });
 };
 /**
  * Function to generate a Citation - Reference pair with correctly wired props.
@@ -31,66 +29,79 @@ const CitationCloseButton = (citationCloseButtonProps)=>{
  * `generateReferenceCitationPreview` directly.
  *
  * @returns A Citation - Reference pair with correctly wired props.
- */ export const generateReferenceCitationPreview = (props)=>{
-    const { citationPreviewProps, citationPreviewSurfaceProps, citationProps, index, previewContentProps, previewHeaderProps, referencePreviewProps, referencePreviewSurfaceProps, referenceProps, sensitivityLabelProps } = props;
-    const CitationWithPreview = (props)=>{
-        var _previewContentProps_content;
-        return /*#__PURE__*/ React.createElement(Preview, {
-            closeOnScroll: true,
-            positioning: "above",
-            size: "small",
-            trapFocus: true,
-            withArrow: true,
-            ...citationPreviewProps
-        }, /*#__PURE__*/ React.createElement(PreviewTrigger, null, /*#__PURE__*/ React.createElement(Citation, {
-            ...citationProps,
-            ...props
-        }, index)), /*#__PURE__*/ React.createElement(PreviewSurface, citationPreviewSurfaceProps, /*#__PURE__*/ React.createElement(PreviewContent, null, /*#__PURE__*/ React.createElement(PreviewHeader, {
-            citation: /*#__PURE__*/ React.createElement(CitationCloseButton, {
-                "aria-label": `Close Reference ${index}`,
-                referenceHref: "#",
-                tabIndex: -1
-            }, index),
-            media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic
-        }, referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children), /*#__PURE__*/ React.createElement(PreviewMetadata, {
-            icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
-            primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
-            secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
-            tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
-        }), sensitivityLabelProps && /*#__PURE__*/ React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : citationPreviewProps === null || citationPreviewProps === void 0 ? void 0 : citationPreviewProps.children)));
+ */
+export const generateReferenceCitationPreview = props => {
+  const {
+    citationPreviewProps,
+    citationPreviewSurfaceProps,
+    citationProps,
+    index,
+    previewContentProps,
+    previewHeaderProps,
+    referencePreviewProps,
+    referencePreviewSurfaceProps,
+    referenceProps,
+    sensitivityLabelProps
+  } = props;
+  const CitationWithPreview = props => {
+    var _previewContentProps_content;
+    return /*#__PURE__*/React.createElement(Preview, {
+      closeOnScroll: true,
+      positioning: "above",
+      size: "small",
+      trapFocus: true,
+      withArrow: true,
+      ...citationPreviewProps
+    }, /*#__PURE__*/React.createElement(PreviewTrigger, null, /*#__PURE__*/React.createElement(Citation, {
+      ...citationProps,
+      ...props
+    }, index)), /*#__PURE__*/React.createElement(PreviewSurface, citationPreviewSurfaceProps, /*#__PURE__*/React.createElement(PreviewContent, null, /*#__PURE__*/React.createElement(PreviewHeader, {
+      citation: /*#__PURE__*/React.createElement(CitationCloseButton, {
+        "aria-label": `Close Reference ${index}`,
+        referenceHref: "#",
+        tabIndex: -1
+      }, index),
+      media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic
+    }, referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children), /*#__PURE__*/React.createElement(PreviewMetadata, {
+      icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
+      primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
+      secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
+      tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
+    }), sensitivityLabelProps && /*#__PURE__*/React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : citationPreviewProps === null || citationPreviewProps === void 0 ? void 0 : citationPreviewProps.children)));
+  };
+  const ReferenceWithPreview = props => {
+    const mergedReferenceProps = {
+      citation: index,
+      ...referenceProps,
+      ...props
     };
-    const ReferenceWithPreview = (props)=>{
-        const mergedReferenceProps = {
-            citation: index,
-            ...referenceProps,
-            ...props
-        };
-        var _previewHeaderProps_children, _previewContentProps_content;
-        return /*#__PURE__*/ React.createElement(Preview, {
-            closeOnScroll: true,
-            positioning: "above",
-            size: "small",
-            trapFocus: true,
-            withArrow: true,
-            ...referencePreviewProps
-        }, /*#__PURE__*/ React.createElement(PreviewTrigger, null, /*#__PURE__*/ React.createElement(Reference, mergedReferenceProps)), /*#__PURE__*/ React.createElement(PreviewSurface, referencePreviewSurfaceProps, /*#__PURE__*/ React.createElement(PreviewContent, null, /*#__PURE__*/ React.createElement(PreviewHeader, {
-            citation: /*#__PURE__*/ React.createElement(CitationCloseButton, {
-                "aria-label": `Close Reference ${index}`,
-                referenceHref: "#",
-                tabIndex: -1
-            }, index),
-            media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
-            ...previewHeaderProps
-        }, (_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__*/ React.createElement(PreviewMetadata, {
-            icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
-            primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
-            secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
-            tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
-        }), sensitivityLabelProps && /*#__PURE__*/ React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : referencePreviewProps === null || referencePreviewProps === void 0 ? void 0 : referencePreviewProps.children)));
-    };
-    const components = {
-        Citation: CitationWithPreview,
-        Reference: ReferenceWithPreview
-    };
-    return components;
+    var _previewHeaderProps_children, _previewContentProps_content;
+    return /*#__PURE__*/React.createElement(Preview, {
+      closeOnScroll: true,
+      positioning: "above",
+      size: "small",
+      trapFocus: true,
+      withArrow: true,
+      ...referencePreviewProps
+    }, /*#__PURE__*/React.createElement(PreviewTrigger, null, /*#__PURE__*/React.createElement(Reference, mergedReferenceProps)), /*#__PURE__*/React.createElement(PreviewSurface, referencePreviewSurfaceProps, /*#__PURE__*/React.createElement(PreviewContent, null, /*#__PURE__*/React.createElement(PreviewHeader, {
+      citation: /*#__PURE__*/React.createElement(CitationCloseButton, {
+        "aria-label": `Close Reference ${index}`,
+        referenceHref: "#",
+        tabIndex: -1
+      }, index),
+      media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
+      ...previewHeaderProps
+    }, (_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__*/React.createElement(PreviewMetadata, {
+      icon: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.icon,
+      primaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.primaryText,
+      secondaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.secondaryText,
+      tertiaryText: previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.tertiaryText
+    }), sensitivityLabelProps && /*#__PURE__*/React.createElement(SensitivityLabel, sensitivityLabelProps), (_previewContentProps_content = previewContentProps === null || previewContentProps === void 0 ? void 0 : previewContentProps.content) !== null && _previewContentProps_content !== void 0 ? _previewContentProps_content : referencePreviewProps === null || referencePreviewProps === void 0 ? void 0 : referencePreviewProps.children)));
+  };
+  const components = {
+    Citation: CitationWithPreview,
+    Reference: ReferenceWithPreview
+  };
+  return components;
 };
+//# sourceMappingURL=generateReferenceCitationPreview.js.map

package/lib/utilities/index.js

@@ -1,2 +1,3 @@
 export { generateReferenceCitationPreview } from './generateReferenceCitationPreview';
 export { useReferenceCitationPreview } from './useReferenceCitationPreview';
+//# sourceMappingURL=index.js.map

package/lib/utilities/useReferenceCitationPreview.js

@@ -1,4 +1,4 @@
-  import * as React from 'react';
+import * as React from 'react';
 import { generateReferenceCitationPreview } from './generateReferenceCitationPreview';
 /**
  * Hook to generate a Citation - Reference pair with correctly wired props.
@@ -11,8 +11,8 @@ import { generateReferenceCitationPreview } from './generateReferenceCitationPre
  * `generateReferenceCitationPreview` directly.
  *
  * @returns A Citation - Reference pair with correctly wired props.
- */ export const useReferenceCitationPreview = (props)=>{
-    return React.useMemo(()=>generateReferenceCitationPreview(props), [
-        props
-    ]);
+ */
+export const useReferenceCitationPreview = props => {
+  return React.useMemo(() => generateReferenceCitationPreview(props), [props]);
 };
+//# sourceMappingURL=useReferenceCitationPreview.js.map

package/lib-commonjs/Citation.js

@@ -26,3 +26,4 @@ _export(exports, {
     }
 });
 const _index = require("./components/Citation/index");
+ //# sourceMappingURL=Citation.js.map

package/lib-commonjs/Reference.js

@@ -29,3 +29,4 @@ _export(exports, {
     }
 });
 const _index = require("./components/Reference/index");
+ //# sourceMappingURL=Reference.js.map

package/lib-commonjs/ReferenceList.js

@@ -26,3 +26,4 @@ _export(exports, {
     }
 });
 const _index = require("./components/ReferenceList/index");
+ //# sourceMappingURL=ReferenceList.js.map

package/lib-commonjs/ReferenceOverflowButton.js

@@ -26,3 +26,4 @@ _export(exports, {
     }
 });
 const _index = require("./components/ReferenceOverflowButton/index");
+ //# sourceMappingURL=ReferenceOverflowButton.js.map

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

@@ -20,4 +20,4 @@ const Citation = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _reactprovider.useCustomStyleHook)('useCitationStyles')(state);
     return (0, _renderCitation.renderCitation_unstable)(state);
 });
-Citation.displayName = 'Citation';
+Citation.displayName = 'Citation'; //# sourceMappingURL=Citation.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Citation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCitation_unstable } from './useCitation';\nimport { renderCitation_unstable } from './renderCitation';\nimport { useCitationStyles_unstable } from './useCitationStyles.styles';\nimport type { CitationProps } from './Citation.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Citation component - TODO: add more docs\nexport const Citation: ForwardRefComponent<CitationProps> = React.forwardRef((props, ref) => {\n  const state = useCitation_unstable(props, ref);\n\n  useCitationStyles_unstable(state);\n  useCustomStyleHook('useCitationStyles')(state);\n\n  return renderCitation_unstable(state);\n});\n\nCitation.displayName = 'Citation';\n"],"names":["Citation","React","forwardRef","props","ref","state","useCitation_unstable","useCitationStyles_unstable","useCustomStyleHook","renderCitation_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;6BACc;gCACG;yCACG;+BAGR;AAG5B,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3BG,IAAAA,iCAAAA,EAAmB,qBAAqBH;IAExC,OAAOI,IAAAA,uCAAAA,EAAwBJ;AACjC;AAEAL,SAASU,WAAW,GAAG"}
+{"version":3,"sources":["Citation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCitation_unstable } from './useCitation';\nimport { renderCitation_unstable } from './renderCitation';\nimport { useCitationStyles_unstable } from './useCitationStyles.styles';\nimport type { CitationProps } from './Citation.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Citation component - TODO: add more docs\nexport const Citation: ForwardRefComponent<CitationProps> = React.forwardRef((props, ref) => {\n  const state = useCitation_unstable(props, ref);\n\n  useCitationStyles_unstable(state);\n  useCustomStyleHook('useCitationStyles')(state);\n\n  return renderCitation_unstable(state);\n});\n\nCitation.displayName = 'Citation';\n"],"names":["Citation","React","forwardRef","props","state","useCitation_unstable","useCitationStyles_unstable","useCustomStyleHook","renderCitation_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;6BACc;gCACG;yCACG;+BAGR;AAG5B,MAAMA,WAAAA,WAAAA,GAAAA,OAA+CC,UAAMC,CAAU,CAACC,OAACA;UAC5EC,QAAMA,IAAAA,iCAAQC,EAAAA,OAAqBF;2DAEnCG,EAAAA;yCACAC,EAAAA,qBAAmBH;WAEnBI,IAAAA,uCAAOA,EAAAA;AACT;AAEAR,SAASS,WAAW,GAAG"}

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

@@ -4,3 +4,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+ //# sourceMappingURL=Citation.types.js.map

package/lib-commonjs/components/Citation/index.js

@@ -29,3 +29,4 @@ const _Citation = require("./Citation");
 const _renderCitation = require("./renderCitation");
 const _useCitation = require("./useCitation");
 const _useCitationStylesstyles = require("./useCitationStyles.styles");
+ //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Citation/renderCitation.js

@@ -13,4 +13,4 @@ const _reactcomponents = require("@fluentui/react-components");
 const renderCitation_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
-};
+}; //# sourceMappingURL=renderCitation.js.map

package/lib-commonjs/components/Citation/renderCitation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCitation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { CitationState, CitationSlots } from './Citation.types';\n/**\n * Render the final JSX of Citation\n */\nexport const renderCitation_unstable = (state: CitationState) => {\n  assertSlots<CitationSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["renderCitation_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;4BAPb;iCAE4B;AAKrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,4BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
+{"version":3,"sources":["renderCitation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { CitationState, CitationSlots } from './Citation.types';\n/**\n * Render the final JSX of Citation\n */\nexport const renderCitation_unstable = (state: CitationState) => {\n  assertSlots<CitationSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","state","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BASEA;;;eAAAA;;;4BATwB;iCAGE;AAM1BA,MAAAA,0BAA2BC,CAAAA;oCAE3B,EAAAA;IACA,OAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAAA,CAAA"}

package/lib-commonjs/components/Citation/useCitation.js

@@ -33,4 +33,4 @@ const useCitation_unstable = (props, ref)=>{
         })
     };
     return state;
-};
+}; //# sourceMappingURL=useCitation.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n  const { referenceHref, block = false, ...otherProps } = props;\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n  const state: CitationState = {\n    block,\n    designVersion,\n    isPopoverLocked,\n    components: {\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: undefined,\n        'aria-expanded': undefined,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["useCitation_unstable","props","ref","referenceHref","block","otherProps","designVersion","useDesignVersion","isPopoverLocked","usePreviewContext_unstable","ctx","isPreviewLocked","state","components","root","slot","always","getIntrinsicElementProps","href","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAbkC;8BACJ;+BAEV;AAU1B,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,aAAa,EAAEC,QAAQ,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IACxD,MAAMK,gBAAgBC,IAAAA,+BAAAA,EAAiBN,MAAMK,aAAa;IAE1D,MAAME,kBAAkBC,IAAAA,wCAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,eAAe,KAAMV,KAAK,CAAC,gBAAgB;IAEzG,MAAMW,QAAuB;QAC3BR;QACAE;QACAE;QACAK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,KAAK;YAC5Bf;YACAgB,MAAMf;YACNgB,MAAMC;YACN,iBAAiBA;YACjB,GAAGf,UAAU;QACf,IACA;YAAEgB,aAAa;QAAI;IAEvB;IAEA,OAAOT;AACT"}
+{"version":3,"sources":["useCitation.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport { usePreviewContext_unstable } from '@fluentui-copilot/react-preview';\nimport type { CitationProps, CitationState } from './Citation.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n/**\n * Create the state required to render Citation.\n *\n * The returned state can be modified with hooks such as useCitationStyles_unstable,\n * before being passed to renderCitation_unstable.\n *\n * @param props - props from this instance of Citation\n * @param ref - reference to root HTMLElement of Citation\n */\nexport const useCitation_unstable = (props: CitationProps, ref: React.Ref<HTMLAnchorElement>): CitationState => {\n  const { referenceHref, block = false, ...otherProps } = props;\n  const designVersion = useDesignVersion(props.designVersion);\n\n  const isPopoverLocked = usePreviewContext_unstable(ctx => ctx.isPreviewLocked) && (props['aria-expanded'] as boolean);\n\n  const state: CitationState = {\n    block,\n    designVersion,\n    isPopoverLocked,\n    components: {\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        href: referenceHref,\n        role: undefined,\n        'aria-expanded': undefined,\n        ...otherProps,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["referenceHref","props","ref","isPopoverLocked","block","state","components","usePreviewContext_unstable","ctx","isPreviewLocked","root","href","role","otherProps","elementType","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcUA;;;eAAAA;;;iCAdqC;8BACJ;+BAEV;AAW/B,MAAQA,uBAAuB,CAAAC,OAAOC;UACtC,EAEAF,aAAMG,EAENC,QAAMC,KAAAA;UAGJF,gBAAAA,IAAAA,+BAAAA,EAAAA,MAAAA,aAAAA;UACAG,kBAAYC,IAAAA,wCAAA,EAAAC,CAAAA,MAAAA,IAAAC,eAAA,KAAAR,KAAA,CAAA,gBAAA;kBACVS;;;;oBAKEC;kBACAC;;mCAEA,CAAGC,MAAAA,CAAAA,IAAAA,yCAAU,EAAA,KAAA;;kBAEbC;kBAAiBC;YAEvB,iBAAAA;YAEA,GAAAF,UAAOR;QACP,IAAA"}

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

@@ -18,4 +18,4 @@ const Reference = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useReferenceStylesstyles.useReferenceStyles_unstable)(state);
     return (0, _renderReference.renderReference_unstable)(state);
 });
-Reference.displayName = 'Reference';
+Reference.displayName = 'Reference'; //# sourceMappingURL=Reference.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles.styles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["Reference","React","forwardRef","props","ref","state","useReference_unstable","useReferenceStyles_unstable","renderReference_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;8BACe;iCACG;0CACG;AAIrC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAE3CG,IAAAA,qDAAAA,EAA4BF;IAC5B,OAAOG,IAAAA,yCAAAA,EAAyBH;AAClC;AAEAL,UAAUS,WAAW,GAAG"}
+{"version":3,"sources":["Reference.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReference_unstable } from './useReference';\nimport { renderReference_unstable } from './renderReference';\nimport { useReferenceStyles_unstable } from './useReferenceStyles.styles';\nimport type { ReferenceProps } from './Reference.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const Reference: ForwardRefComponent<ReferenceProps> = React.forwardRef((props, ref) => {\n  const state = useReference_unstable(props, ref);\n\n  useReferenceStyles_unstable(state);\n  return renderReference_unstable(state);\n});\n\nReference.displayName = 'Reference';\n"],"names":["Reference","React","forwardRef","props","state","useReference_unstable","useReferenceStyles_unstable","renderReference_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;8BACe;iCACG;0CACG;AAIrC,MAAMA,YAAAA,WAAAA,GAAAA,OAAiDC,UAAMC,CAAU,CAACC,OAACA;UAC9EC,QAAMA,IAAAA,mCAAQC,EAAAA,OAAsBF;6DAEpCG,EAAAA;WACAC,IAAAA,yCAAOA,EAAAA;AACT;AAEAP,UAAUQ,WAAW,GAAG"}

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+ //# sourceMappingURL=Reference.types.js.map

package/lib-commonjs/components/Reference/index.js

@@ -32,3 +32,4 @@ const _Reference = require("./Reference");
 const _renderReference = require("./renderReference");
 const _useReference = require("./useReference");
 const _useReferenceStylesstyles = require("./useReferenceStyles.styles");
+ //# sourceMappingURL=index.js.map

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

@@ -29,4 +29,4 @@ const renderReference_unstable = (state)=>{
         id: id,
         children: reference
     }, id) : reference;
-};
+}; //# sourceMappingURL=renderReference.js.map