@fluentui-copilot/react-preview 0.0.0-nightly-20240313-0404-8abc883d.1

package/lib/Preview.js

@@ -0,0 +1,2 @@
+export * from './components/Preview/index';
+//# sourceMappingURL=Preview.js.map

package/lib/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Preview.ts"],"sourcesContent":["export * from './components/Preview/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}

package/lib/PreviewContent.js

@@ -0,0 +1,2 @@
+export * from './components/PreviewContent/index';
+//# sourceMappingURL=PreviewContent.js.map

package/lib/PreviewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewContent.ts"],"sourcesContent":["export * from './components/PreviewContent/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/PreviewHeader.js

@@ -0,0 +1,2 @@
+export * from './components/PreviewHeader/index';
+//# sourceMappingURL=PreviewHeader.js.map

package/lib/PreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewHeader.ts"],"sourcesContent":["export * from './components/PreviewHeader/index';\n"],"names":[],"mappings":"AAAA,cAAc,mCAAmC"}

package/lib/PreviewMetadata.js

@@ -0,0 +1,2 @@
+export * from './components/PreviewMetadata/index';
+//# sourceMappingURL=PreviewMetadata.js.map

package/lib/PreviewMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewMetadata.ts"],"sourcesContent":["export * from './components/PreviewMetadata/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/PreviewSurface.js

@@ -0,0 +1,2 @@
+export * from './components/PreviewSurface/index';
+//# sourceMappingURL=PreviewSurface.js.map

package/lib/PreviewSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewSurface.ts"],"sourcesContent":["export * from './components/PreviewSurface/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/PreviewTrigger.js

@@ -0,0 +1,2 @@
+export * from './components/PreviewTrigger/index';
+//# sourceMappingURL=PreviewTrigger.js.map

package/lib/PreviewTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewTrigger.ts"],"sourcesContent":["export * from './components/PreviewTrigger/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/components/Preview/Preview.js

@@ -0,0 +1,8 @@
+import { usePreview_unstable } from './usePreview';
+import { renderPreview_unstable } from './renderPreview';
+export const Preview = props => {
+  const state = usePreview_unstable(props);
+  return renderPreview_unstable(state);
+};
+Preview.displayName = 'Preview';
+//# sourceMappingURL=Preview.js.map

package/lib/components/Preview/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Preview.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { usePreview_unstable } from './usePreview';\nimport { renderPreview_unstable } from './renderPreview';\nimport type { PreviewProps } from './Preview.types';\n\nexport const Preview: React.FC<PreviewProps> = props => {\n  const state = usePreview_unstable(props);\n\n  return renderPreview_unstable(state);\n};\n\nPreview.displayName = 'Preview';\n"],"names":["usePreview_unstable","renderPreview_unstable","Preview","props","state","displayName"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQJ,oBAAoBG;IAElC,OAAOF,uBAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

package/lib/components/Preview/Preview.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Preview.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = PopoverProps;\n\n/**\n * State used in rendering Preview\n */\nexport type PreviewState = PopoverState & {\n  /**\n   * Whether the Preview was opened by click or keyboard and is therefore locked until intentional interaction to close it.\n   */\n  isPreviewLocked: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAeE"}

package/lib/components/Preview/index.js

@@ -0,0 +1,5 @@
+export * from './Preview';
+export * from './Preview.types';
+export * from './renderPreview';
+export * from './usePreview';
+//# sourceMappingURL=index.js.map

package/lib/components/Preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Preview';\nexport * from './Preview.types';\nexport * from './renderPreview';\nexport * from './usePreview';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,eAAe"}

package/lib/components/Preview/renderPreview.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { renderPopover_unstable } from '@fluentui/react-components';
+import { PreviewContextProvider } from '../../previewContext';
+/**
+ * Render the final JSX of Preview
+ */
+export const renderPreview_unstable = state => {
+  const {
+    appearance,
+    arrowRef,
+    contentRef,
+    inertTrapFocus,
+    inline,
+    isPreviewLocked,
+    mountNode,
+    open,
+    openOnContext,
+    openOnHover,
+    setOpen,
+    size,
+    toggleOpen,
+    trapFocus,
+    triggerRef,
+    withArrow
+  } = state;
+  return /*#__PURE__*/React.createElement(PreviewContextProvider, {
+    value: {
+      appearance,
+      arrowRef,
+      contentRef,
+      inertTrapFocus,
+      inline,
+      isPreviewLocked,
+      mountNode,
+      open,
+      openOnContext,
+      openOnHover,
+      setOpen,
+      size,
+      toggleOpen,
+      trapFocus,
+      triggerRef,
+      withArrow
+    }
+  }, renderPopover_unstable(state));
+};
+//# sourceMappingURL=renderPreview.js.map

package/lib/components/Preview/renderPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderPopover_unstable } from '@fluentui/react-components';\n\nimport { PreviewContextProvider } from '../../previewContext';\nimport type { PreviewState } from './Preview.types';\n\n/**\n * Render the final JSX of Preview\n */\nexport const renderPreview_unstable = (state: PreviewState) => {\n  const {\n    appearance,\n    arrowRef,\n    contentRef,\n    inertTrapFocus,\n    inline,\n    isPreviewLocked,\n    mountNode,\n    open,\n    openOnContext,\n    openOnHover,\n    setOpen,\n    size,\n    toggleOpen,\n    trapFocus,\n    triggerRef,\n    withArrow,\n  } = state;\n\n  return (\n    <PreviewContextProvider\n      value={{\n        appearance,\n        arrowRef,\n        contentRef,\n        inertTrapFocus,\n        inline,\n        isPreviewLocked,\n        mountNode,\n        open,\n        openOnContext,\n        openOnHover,\n        setOpen,\n        size,\n        toggleOpen,\n        trapFocus,\n        triggerRef,\n        withArrow,\n      }}\n    >\n      {renderPopover_unstable(state)}\n    </PreviewContextProvider>\n  );\n};\n"],"names":["React","renderPopover_unstable","PreviewContextProvider","renderPreview_unstable","state","appearance","arrowRef","contentRef","inertTrapFocus","inline","isPreviewLocked","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpE,SAASC,sBAAsB,QAAQ,uBAAuB;AAG9D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACV,GAAGhB;IAEJ,qBACE,oBAACF;QACCmB,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;OAECnB,uBAAuBG;AAG9B,EAAE"}

package/lib/components/Preview/usePreview.js

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { Enter, Escape } from '@fluentui/keyboard-keys';
+import { mergeCallbacks, useFluent, useId, useIsomorphicLayoutEffect, usePopover_unstable } from '@fluentui/react-components';
+import { useTimeout } from '@fluentui/react-utilities';
+import { addOpenedByHoverPreview, closeAllOpenedByHoverPreviews, removeOpenedByHoverPreview } from '../../utils';
+const POPOVER_MOUSE_HIDE_DELAY = 500;
+const POPOVER_KEYBOARD_HIDE_DELAY = 0;
+const getDelay = type => {
+  if (type === 'focus' || type === 'blur') {
+    return POPOVER_KEYBOARD_HIDE_DELAY;
+  }
+  return POPOVER_MOUSE_HIDE_DELAY;
+};
+/**
+ * Create the state required to render Preview.
+ *
+ * The returned state can be modified with hooks such as usePreviewStyles_unstable,
+ * before being passed to renderPreview_unstable.
+ *
+ * @param props - props from this instance of Preview
+ * @param ref - reference to root HTMLElement of Preview
+ */
+export const usePreview_unstable = props => {
+  const {
+    onOpenChange,
+    open,
+    unstable_disableAutoFocus
+  } = props;
+  const children = React.Children.toArray(props.children);
+  const {
+    targetDocument
+  } = useFluent();
+  const [setTimeout, clearTimeout] = useTimeout();
+  const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);
+  const {
+    current: previewInternalState
+  } = React.useRef({
+    openByClick: false,
+    openByHoverOverTrigger: false,
+    openByHoverOverPopover: false,
+    openByKeyboard: false
+  });
+  const isOpen = () => {
+    return previewInternalState.openByClick || previewInternalState.openByHoverOverTrigger || previewInternalState.openByHoverOverPopover || previewInternalState.openByKeyboard;
+  };
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const preventDefaultClose = React.useRef(false);
+  let popoverTrigger = undefined;
+  let popoverSurface = undefined;
+  if (children.length === 2) {
+    popoverTrigger = children[0];
+    popoverSurface = children[1];
+  } else if (children.length === 1) {
+    popoverSurface = children[0];
+  }
+  const popoverSurfaceId = useId('preview-surface', popoverSurface === null || popoverSurface === void 0 ? void 0 : popoverSurface.props.id);
+  const closeCallback = () => {
+    previewInternalState.openByClick = false;
+    previewInternalState.openByHoverOverTrigger = false;
+    previewInternalState.openByHoverOverPopover = false;
+    previewInternalState.openByKeyboard = false;
+    setIsPopoverOpen(isOpen());
+  };
+  React.useEffect(() => {
+    return () => {
+      // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.
+      removeOpenedByHoverPreview(popoverSurfaceId);
+    };
+  }, [popoverSurfaceId]);
+  if (popoverSurface && popoverTrigger) {
+    const handleTriggerTargetEnter = e => {
+      previewInternalState.openByHoverOverTrigger = true;
+      // We want to disable auto focus only if the popover is being opened by hovering over the trigger
+      if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {
+        setDisableAutoFocus(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+          open: true
+        });
+        closeAllOpenedByHoverPreviews(popoverSurfaceId);
+        addOpenedByHoverPreview(popoverSurfaceId, closeCallback);
+      }
+      setIsPopoverOpen(isOpen());
+    };
+    const handleTriggerTargetLeave = e => {
+      previewInternalState.openByHoverOverTrigger = false;
+      setTimeout(() => {
+        setIsPopoverOpen(isOpen());
+        // We want to call onOpenChange only if the popover is actually closing when leaving the trigger
+        if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !previewInternalState.openByHoverOverPopover && isPopoverOpen) {
+          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+            open: false
+          });
+          removeOpenedByHoverPreview(popoverSurfaceId);
+        }
+      }, getDelay(e.type));
+    };
+    const handleTriggerClick = e => {
+      // Setting preventDefaultClose so that onPopoverOpenChange does not apply its logic when click is on the trigger as we want to control that behavior.
+      preventDefaultClose.current = true;
+      // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.
+      setDisableAutoFocus(false);
+      const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
+      // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.
+      previewInternalState.openByClick = previewInternalState.openByKeyboard ? false : !previewInternalState.openByClick;
+      previewInternalState.openByHoverOverTrigger = false;
+      previewInternalState.openByHoverOverPopover = false;
+      previewInternalState.openByKeyboard = false;
+      if (!tmpOpenByHoverOverTrigger) {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+          open: previewInternalState.openByClick
+        });
+      }
+      if (!isOpen()) {
+        removeOpenedByHoverPreview(popoverSurfaceId);
+      }
+      setIsPopoverOpen(isOpen());
+    };
+    const handleTriggerKeyDown = e => {
+      if (e.key === Enter) {
+        clearTimeout();
+        // Setting default prevented so that Enter key does not trigger a click event or onPopoverOpenChange.
+        e.preventDefault();
+        // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via keyboard.
+        setDisableAutoFocus(false);
+        const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
+        // If openByClick is true, then the popover was already opened via click and we always want to close it.
+        previewInternalState.openByKeyboard = previewInternalState.openByClick ? false : !previewInternalState.openByKeyboard;
+        previewInternalState.openByClick = false;
+        previewInternalState.openByHoverOverTrigger = false;
+        previewInternalState.openByHoverOverPopover = false;
+        if (!tmpOpenByHoverOverTrigger) {
+          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+            open: previewInternalState.openByKeyboard
+          });
+        }
+        if (!isOpen()) {
+          removeOpenedByHoverPreview(popoverSurfaceId);
+        }
+        setIsPopoverOpen(isOpen());
+      }
+    };
+    const handlePopoverTargetEnter = e => {
+      previewInternalState.openByHoverOverPopover = true;
+      setIsPopoverOpen(isOpen());
+    };
+    const handlePopoverTargetLeave = e => {
+      previewInternalState.openByHoverOverPopover = false;
+      setTimeout(() => {
+        setIsPopoverOpen(isOpen());
+        // We want to call onOpenChange only if the popover is actually closing when leaving the popover
+        if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !previewInternalState.openByHoverOverTrigger) {
+          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+            open: false
+          });
+          removeOpenedByHoverPreview(popoverSurfaceId);
+        }
+      }, getDelay(e.type));
+    };
+    popoverTrigger = React.cloneElement(popoverTrigger, {
+      ...popoverTrigger.props,
+      children: React.cloneElement(popoverTrigger.props.children, {
+        ...popoverTrigger.props.children.props,
+        onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),
+        onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),
+        onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),
+        onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),
+        onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave)
+      })
+    });
+    var _popoverSurface_props_arialabelledby;
+    popoverSurface = React.cloneElement(popoverSurface, {
+      ...popoverSurface.props,
+      'aria-labelledby': ((_popoverSurface_props_arialabelledby = popoverSurface.props['aria-labelledby']) !== null && _popoverSurface_props_arialabelledby !== void 0 ? _popoverSurface_props_arialabelledby : popoverSurface.props['aria-label']) ? undefined : popoverSurfaceId,
+      id: popoverSurfaceId,
+      onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),
+      onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),
+      onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter)
+    });
+  }
+  // Hitting Escape key should close the popover if it was opened by hover.
+  // This is necessary to attach to the document because focus is likely not within the trigger or popover.
+  useIsomorphicLayoutEffect(() => {
+    if (isPopoverOpen) {
+      const onDocumentKeyDown = e => {
+        const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;
+        if (openedByHover && e.key === Escape) {
+          clearTimeout();
+          // We set state back to its default if the Escape key has been pressed
+          setDisableAutoFocus(true);
+          closeCallback();
+          removeOpenedByHoverPreview(popoverSurfaceId);
+          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+            open: false
+          });
+          e.stopPropagation();
+        }
+      };
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
+        capture: true
+      });
+      return () => {
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
+          capture: true
+        });
+      };
+    }
+  }, [targetDocument, isPopoverOpen]);
+  const onPopoverOpenChange = (e, data) => {
+    if (!preventDefaultClose.current) {
+      // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.
+      if (!data.open) {
+        clearTimeout();
+        closeCallback();
+        removeOpenedByHoverPreview(popoverSurfaceId);
+      }
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, data);
+    }
+    preventDefaultClose.current = false;
+  };
+  let resolvedChildren = children;
+  if (popoverSurface) {
+    if (popoverTrigger) {
+      resolvedChildren = [popoverTrigger, popoverSurface];
+    } else {
+      resolvedChildren = popoverSurface;
+    }
+  }
+  const popoverState = usePopover_unstable({
+    ...props,
+    children: resolvedChildren,
+    onOpenChange: onPopoverOpenChange,
+    open: open !== null && open !== void 0 ? open : isPopoverOpen,
+    unstable_disableAutoFocus: unstable_disableAutoFocus !== null && unstable_disableAutoFocus !== void 0 ? unstable_disableAutoFocus : disableAutoFocus
+  });
+  return {
+    ...popoverState,
+    isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard
+  };
+};
+//# sourceMappingURL=usePreview.js.map

package/lib/components/Preview/usePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n  mergeCallbacks,\n  useFluent,\n  useId,\n  useIsomorphicLayoutEffect,\n  usePopover_unstable,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-components';\n\nimport { addOpenedByHoverPreview, closeAllOpenedByHoverPreviews, removeOpenedByHoverPreview } from '../../utils';\nimport type { PreviewProps, PreviewState } from './Preview.types';\n\ntype PreviewInternalState = {\n  openByClick: boolean;\n  openByHoverOverTrigger: boolean;\n  openByHoverOverPopover: boolean;\n  openByKeyboard: boolean;\n};\n\nconst POPOVER_MOUSE_HIDE_DELAY = 500;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string): number => {\n  if (type === 'focus' || type === 'blur') {\n    return POPOVER_KEYBOARD_HIDE_DELAY;\n  }\n\n  return POPOVER_MOUSE_HIDE_DELAY;\n};\n\ntype TargetEvent<T> = React.MouseEvent<T> | React.FocusEvent<T>;\n\n/**\n * Create the state required to render Preview.\n *\n * The returned state can be modified with hooks such as usePreviewStyles_unstable,\n * before being passed to renderPreview_unstable.\n *\n * @param props - props from this instance of Preview\n * @param ref - reference to root HTMLElement of Preview\n */\nexport const usePreview_unstable = (props: PreviewProps): PreviewState => {\n  const { onOpenChange, open, unstable_disableAutoFocus } = props;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  const { targetDocument } = useFluent();\n  const [setTimeout, clearTimeout] = useTimeout();\n\n  const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);\n\n  const { current: previewInternalState } = React.useRef<PreviewInternalState>({\n    openByClick: false,\n    openByHoverOverTrigger: false,\n    openByHoverOverPopover: false,\n    openByKeyboard: false,\n  });\n\n  const isOpen = () => {\n    return (\n      previewInternalState.openByClick ||\n      previewInternalState.openByHoverOverTrigger ||\n      previewInternalState.openByHoverOverPopover ||\n      previewInternalState.openByKeyboard\n    );\n  };\n\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const preventDefaultClose = React.useRef(false);\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const popoverSurfaceId = useId('preview-surface', popoverSurface?.props.id);\n\n  const closeCallback = () => {\n    previewInternalState.openByClick = false;\n    previewInternalState.openByHoverOverTrigger = false;\n    previewInternalState.openByHoverOverPopover = false;\n    previewInternalState.openByKeyboard = false;\n    setIsPopoverOpen(isOpen());\n  };\n\n  React.useEffect(() => {\n    return () => {\n      // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.\n      removeOpenedByHoverPreview(popoverSurfaceId);\n    };\n  }, [popoverSurfaceId]);\n\n  if (popoverSurface && popoverTrigger) {\n    const handleTriggerTargetEnter = (e: TargetEvent<HTMLSpanElement>): void => {\n      previewInternalState.openByHoverOverTrigger = true;\n\n      // We want to disable auto focus only if the popover is being opened by hovering over the trigger\n      if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {\n        setDisableAutoFocus(true);\n        onOpenChange?.(e, { open: true });\n        closeAllOpenedByHoverPreviews(popoverSurfaceId);\n        addOpenedByHoverPreview(popoverSurfaceId, closeCallback);\n      }\n\n      setIsPopoverOpen(isOpen());\n    };\n\n    const handleTriggerTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n      previewInternalState.openByHoverOverTrigger = false;\n      setTimeout(() => {\n        setIsPopoverOpen(isOpen());\n\n        // We want to call onOpenChange only if the popover is actually closing when leaving the trigger\n        if (\n          !previewInternalState.openByClick &&\n          !previewInternalState.openByKeyboard &&\n          !previewInternalState.openByHoverOverPopover &&\n          isPopoverOpen\n        ) {\n          onOpenChange?.(e, { open: false });\n          removeOpenedByHoverPreview(popoverSurfaceId);\n        }\n      }, getDelay(e.type));\n    };\n\n    const handleTriggerClick = (e: TargetEvent<HTMLSpanElement>): void => {\n      // Setting preventDefaultClose so that onPopoverOpenChange does not apply its logic when click is on the trigger as we want to control that behavior.\n      preventDefaultClose.current = true;\n\n      // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.\n      setDisableAutoFocus(false);\n\n      const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n      // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.\n      previewInternalState.openByClick = previewInternalState.openByKeyboard\n        ? false\n        : !previewInternalState.openByClick;\n      previewInternalState.openByHoverOverTrigger = false;\n      previewInternalState.openByHoverOverPopover = false;\n      previewInternalState.openByKeyboard = false;\n\n      if (!tmpOpenByHoverOverTrigger) {\n        onOpenChange?.(e, { open: previewInternalState.openByClick });\n      }\n\n      if (!isOpen()) {\n        removeOpenedByHoverPreview(popoverSurfaceId);\n      }\n\n      setIsPopoverOpen(isOpen());\n    };\n\n    const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n      if (e.key === Enter) {\n        clearTimeout();\n\n        // Setting default prevented so that Enter key does not trigger a click event or onPopoverOpenChange.\n        e.preventDefault();\n\n        // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via keyboard.\n        setDisableAutoFocus(false);\n\n        const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n        // If openByClick is true, then the popover was already opened via click and we always want to close it.\n        previewInternalState.openByKeyboard = previewInternalState.openByClick\n          ? false\n          : !previewInternalState.openByKeyboard;\n        previewInternalState.openByClick = false;\n        previewInternalState.openByHoverOverTrigger = false;\n        previewInternalState.openByHoverOverPopover = false;\n\n        if (!tmpOpenByHoverOverTrigger) {\n          onOpenChange?.(e, { open: previewInternalState.openByKeyboard });\n        }\n\n        if (!isOpen()) {\n          removeOpenedByHoverPreview(popoverSurfaceId);\n        }\n\n        setIsPopoverOpen(isOpen());\n      }\n    };\n\n    const handlePopoverTargetEnter = (e: TargetEvent<HTMLDivElement>): void => {\n      previewInternalState.openByHoverOverPopover = true;\n      setIsPopoverOpen(isOpen());\n    };\n\n    const handlePopoverTargetLeave = (e: TargetEvent<HTMLDivElement>): void => {\n      previewInternalState.openByHoverOverPopover = false;\n      setTimeout(() => {\n        setIsPopoverOpen(isOpen());\n\n        // We want to call onOpenChange only if the popover is actually closing when leaving the popover\n        if (\n          !previewInternalState.openByClick &&\n          !previewInternalState.openByKeyboard &&\n          !previewInternalState.openByHoverOverTrigger\n        ) {\n          onOpenChange?.(e, { open: false });\n          removeOpenedByHoverPreview(popoverSurfaceId);\n        }\n      }, getDelay(e.type));\n    };\n\n    popoverTrigger = React.cloneElement(popoverTrigger, {\n      ...popoverTrigger.props,\n      children: React.cloneElement(popoverTrigger.props.children as React.ReactElement, {\n        ...popoverTrigger.props.children.props,\n        onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),\n        onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),\n        onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),\n        onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),\n        onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave),\n      }),\n    });\n\n    popoverSurface = React.cloneElement(popoverSurface, {\n      ...popoverSurface.props,\n      'aria-labelledby':\n        popoverSurface.props['aria-labelledby'] ?? popoverSurface.props['aria-label'] ? undefined : popoverSurfaceId,\n      id: popoverSurfaceId,\n      onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),\n      onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),\n      onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter),\n    });\n  }\n\n  // Hitting Escape key should close the popover if it was opened by hover.\n  // This is necessary to attach to the document because focus is likely not within the trigger or popover.\n  useIsomorphicLayoutEffect(() => {\n    if (isPopoverOpen) {\n      const onDocumentKeyDown = (e: KeyboardEvent) => {\n        const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;\n\n        if (openedByHover && e.key === Escape) {\n          clearTimeout();\n\n          // We set state back to its default if the Escape key has been pressed\n          setDisableAutoFocus(true);\n          closeCallback();\n          removeOpenedByHoverPreview(popoverSurfaceId);\n\n          onOpenChange?.(e as unknown as OpenPopoverEvents, { open: false });\n\n          e.stopPropagation();\n        }\n      };\n\n      targetDocument?.addEventListener('keydown', onDocumentKeyDown, { capture: true });\n\n      return () => {\n        targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n      };\n    }\n  }, [targetDocument, isPopoverOpen]);\n\n  const onPopoverOpenChange = (e: OpenPopoverEvents, data: OnOpenChangeData): void => {\n    if (!preventDefaultClose.current) {\n      // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.\n      if (!data.open) {\n        clearTimeout();\n        closeCallback();\n        removeOpenedByHoverPreview(popoverSurfaceId);\n      }\n\n      onOpenChange?.(e, data);\n    }\n\n    preventDefaultClose.current = false;\n  };\n\n  let resolvedChildren = children as [JSX.Element, JSX.Element] | JSX.Element;\n  if (popoverSurface) {\n    if (popoverTrigger) {\n      resolvedChildren = [popoverTrigger, popoverSurface];\n    } else {\n      resolvedChildren = popoverSurface;\n    }\n  }\n\n  const popoverState = usePopover_unstable({\n    ...props,\n    children: resolvedChildren,\n    onOpenChange: onPopoverOpenChange,\n    open: open ?? isPopoverOpen,\n    unstable_disableAutoFocus: unstable_disableAutoFocus ?? disableAutoFocus,\n  });\n\n  return {\n    ...popoverState,\n    isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard,\n  };\n};\n"],"names":["React","Enter","Escape","mergeCallbacks","useFluent","useId","useIsomorphicLayoutEffect","usePopover_unstable","useTimeout","addOpenedByHoverPreview","closeAllOpenedByHoverPreviews","removeOpenedByHoverPreview","POPOVER_MOUSE_HIDE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","usePreview_unstable","props","onOpenChange","open","unstable_disableAutoFocus","children","Children","toArray","targetDocument","setTimeout","clearTimeout","disableAutoFocus","setDisableAutoFocus","useState","current","previewInternalState","useRef","openByClick","openByHoverOverTrigger","openByHoverOverPopover","openByKeyboard","isOpen","isPopoverOpen","setIsPopoverOpen","preventDefaultClose","popoverTrigger","undefined","popoverSurface","length","popoverSurfaceId","id","closeCallback","useEffect","handleTriggerTargetEnter","e","handleTriggerTargetLeave","handleTriggerClick","tmpOpenByHoverOverTrigger","handleTriggerKeyDown","key","preventDefault","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","onClick","onKeyDown","onMouseEnter","onMouseLeave","onFocus","onDocumentKeyDown","openedByHover","stopPropagation","addEventListener","capture","removeEventListener","onPopoverOpenChange","data","resolvedChildren","popoverState","isPreviewLocked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,EAAEC,MAAM,QAAQ,0BAA0B;AACxD,SACEC,cAAc,EACdC,SAAS,EACTC,KAAK,EACLC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AAGvD,SAASC,uBAAuB,EAAEC,6BAA6B,EAAEC,0BAA0B,QAAQ,cAAc;AAUjH,MAAMC,2BAA2B;AACjC,MAAMC,8BAA8B;AAEpC,MAAMC,WAAW,CAACC;IAChB,IAAIA,SAAS,WAAWA,SAAS,QAAQ;QACvC,OAAOF;IACT;IAEA,OAAOD;AACT;AAIA;;;;;;;;CAQC,GACD,OAAO,MAAMI,sBAAsB,CAACC;IAClC,MAAM,EAAEC,YAAY,EAAEC,IAAI,EAAEC,yBAAyB,EAAE,GAAGH;IAE1D,MAAMI,WAAWrB,MAAMsB,QAAQ,CAACC,OAAO,CAACN,MAAMI,QAAQ;IAEtD,MAAM,EAAEG,cAAc,EAAE,GAAGpB;IAC3B,MAAM,CAACqB,YAAYC,aAAa,GAAGlB;IAEnC,MAAM,CAACmB,kBAAkBC,oBAAoB,GAAG5B,MAAM6B,QAAQ,CAAC;IAE/D,MAAM,EAAEC,SAASC,oBAAoB,EAAE,GAAG/B,MAAMgC,MAAM,CAAuB;QAC3EC,aAAa;QACbC,wBAAwB;QACxBC,wBAAwB;QACxBC,gBAAgB;IAClB;IAEA,MAAMC,SAAS;QACb,OACEN,qBAAqBE,WAAW,IAChCF,qBAAqBG,sBAAsB,IAC3CH,qBAAqBI,sBAAsB,IAC3CJ,qBAAqBK,cAAc;IAEvC;IAEA,MAAM,CAACE,eAAeC,iBAAiB,GAAGvC,MAAM6B,QAAQ,CAAC;IACzD,MAAMW,sBAAsBxC,MAAMgC,MAAM,CAAC;IAEzC,IAAIS,iBAAiDC;IACrD,IAAIC,iBAAiDD;IACrD,IAAIrB,SAASuB,MAAM,KAAK,GAAG;QACzBH,iBAAiBpB,QAAQ,CAAC,EAAE;QAC5BsB,iBAAiBtB,QAAQ,CAAC,EAAE;IAC9B,OAAO,IAAIA,SAASuB,MAAM,KAAK,GAAG;QAChCD,iBAAiBtB,QAAQ,CAAC,EAAE;IAC9B;IAEA,MAAMwB,mBAAmBxC,MAAM,mBAAmBsC,2BAAAA,qCAAAA,eAAgB1B,KAAK,CAAC6B,EAAE;IAE1E,MAAMC,gBAAgB;QACpBhB,qBAAqBE,WAAW,GAAG;QACnCF,qBAAqBG,sBAAsB,GAAG;QAC9CH,qBAAqBI,sBAAsB,GAAG;QAC9CJ,qBAAqBK,cAAc,GAAG;QACtCG,iBAAiBF;IACnB;IAEArC,MAAMgD,SAAS,CAAC;QACd,OAAO;YACL,oHAAoH;YACpHrC,2BAA2BkC;QAC7B;IACF,GAAG;QAACA;KAAiB;IAErB,IAAIF,kBAAkBF,gBAAgB;QACpC,MAAMQ,2BAA2B,CAACC;YAChCnB,qBAAqBG,sBAAsB,GAAG;YAE9C,iGAAiG;YACjG,IAAI,CAACH,qBAAqBE,WAAW,IAAI,CAACF,qBAAqBK,cAAc,IAAI,CAACE,eAAe;gBAC/FV,oBAAoB;gBACpBV,yBAAAA,mCAAAA,aAAegC,GAAG;oBAAE/B,MAAM;gBAAK;gBAC/BT,8BAA8BmC;gBAC9BpC,wBAAwBoC,kBAAkBE;YAC5C;YAEAR,iBAAiBF;QACnB;QAEA,MAAMc,2BAA2B,CAACD;YAChCnB,qBAAqBG,sBAAsB,GAAG;YAC9CT,WAAW;gBACTc,iBAAiBF;gBAEjB,gGAAgG;gBAChG,IACE,CAACN,qBAAqBE,WAAW,IACjC,CAACF,qBAAqBK,cAAc,IACpC,CAACL,qBAAqBI,sBAAsB,IAC5CG,eACA;oBACApB,yBAAAA,mCAAAA,aAAegC,GAAG;wBAAE/B,MAAM;oBAAM;oBAChCR,2BAA2BkC;gBAC7B;YACF,GAAG/B,SAASoC,EAAEnC,IAAI;QACpB;QAEA,MAAMqC,qBAAqB,CAACF;YAC1B,qJAAqJ;YACrJV,oBAAoBV,OAAO,GAAG;YAE9B,uHAAuH;YACvHF,oBAAoB;YAEpB,MAAMyB,4BAA4BtB,qBAAqBG,sBAAsB;YAE7E,8GAA8G;YAC9GH,qBAAqBE,WAAW,GAAGF,qBAAqBK,cAAc,GAClE,QACA,CAACL,qBAAqBE,WAAW;YACrCF,qBAAqBG,sBAAsB,GAAG;YAC9CH,qBAAqBI,sBAAsB,GAAG;YAC9CJ,qBAAqBK,cAAc,GAAG;YAEtC,IAAI,CAACiB,2BAA2B;gBAC9BnC,yBAAAA,mCAAAA,aAAegC,GAAG;oBAAE/B,MAAMY,qBAAqBE,WAAW;gBAAC;YAC7D;YAEA,IAAI,CAACI,UAAU;gBACb1B,2BAA2BkC;YAC7B;YAEAN,iBAAiBF;QACnB;QAEA,MAAMiB,uBAAuB,CAACJ;YAC5B,IAAIA,EAAEK,GAAG,KAAKtD,OAAO;gBACnByB;gBAEA,qGAAqG;gBACrGwB,EAAEM,cAAc;gBAEhB,0HAA0H;gBAC1H5B,oBAAoB;gBAEpB,MAAMyB,4BAA4BtB,qBAAqBG,sBAAsB;gBAE7E,wGAAwG;gBACxGH,qBAAqBK,cAAc,GAAGL,qBAAqBE,WAAW,GAClE,QACA,CAACF,qBAAqBK,cAAc;gBACxCL,qBAAqBE,WAAW,GAAG;gBACnCF,qBAAqBG,sBAAsB,GAAG;gBAC9CH,qBAAqBI,sBAAsB,GAAG;gBAE9C,IAAI,CAACkB,2BAA2B;oBAC9BnC,yBAAAA,mCAAAA,aAAegC,GAAG;wBAAE/B,MAAMY,qBAAqBK,cAAc;oBAAC;gBAChE;gBAEA,IAAI,CAACC,UAAU;oBACb1B,2BAA2BkC;gBAC7B;gBAEAN,iBAAiBF;YACnB;QACF;QAEA,MAAMoB,2BAA2B,CAACP;YAChCnB,qBAAqBI,sBAAsB,GAAG;YAC9CI,iBAAiBF;QACnB;QAEA,MAAMqB,2BAA2B,CAACR;YAChCnB,qBAAqBI,sBAAsB,GAAG;YAC9CV,WAAW;gBACTc,iBAAiBF;gBAEjB,gGAAgG;gBAChG,IACE,CAACN,qBAAqBE,WAAW,IACjC,CAACF,qBAAqBK,cAAc,IACpC,CAACL,qBAAqBG,sBAAsB,EAC5C;oBACAhB,yBAAAA,mCAAAA,aAAegC,GAAG;wBAAE/B,MAAM;oBAAM;oBAChCR,2BAA2BkC;gBAC7B;YACF,GAAG/B,SAASoC,EAAEnC,IAAI;QACpB;QAEA0B,iBAAiBzC,MAAM2D,YAAY,CAAClB,gBAAgB;YAClD,GAAGA,eAAexB,KAAK;YACvBI,UAAUrB,MAAM2D,YAAY,CAAClB,eAAexB,KAAK,CAACI,QAAQ,EAAwB;gBAChF,GAAGoB,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK;gBACtC2C,QAAQzD,eAAesC,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK,CAAC2C,MAAM,EAAET;gBACnEU,SAAS1D,eAAesC,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK,CAAC4C,OAAO,EAAET;gBACrEU,WAAW3D,eAAesC,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK,CAAC6C,SAAS,EAAER;gBACzES,cAAc5D,eAAesC,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK,CAAC8C,YAAY,EAAEd;gBAC/Ee,cAAc7D,eAAesC,eAAexB,KAAK,CAACI,QAAQ,CAACJ,KAAK,CAAC+C,YAAY,EAAEb;YACjF;QACF;YAKIR;QAHJA,iBAAiB3C,MAAM2D,YAAY,CAAChB,gBAAgB;YAClD,GAAGA,eAAe1B,KAAK;YACvB,mBACE0B,CAAAA,CAAAA,uCAAAA,eAAe1B,KAAK,CAAC,kBAAkB,cAAvC0B,kDAAAA,uCAA2CA,eAAe1B,KAAK,CAAC,aAAa,AAAD,IAAIyB,YAAYG;YAC9FC,IAAID;YACJkB,cAAc5D,eAAewC,eAAe1B,KAAK,CAAC8C,YAAY,EAAEN;YAChEO,cAAc7D,eAAewC,eAAe1B,KAAK,CAAC+C,YAAY,EAAEN;YAChEO,SAAS9D,eAAewC,eAAe1B,KAAK,CAACgD,OAAO,EAAER;QACxD;IACF;IAEA,yEAAyE;IACzE,yGAAyG;IACzGnD,0BAA0B;QACxB,IAAIgC,eAAe;YACjB,MAAM4B,oBAAoB,CAAChB;gBACzB,MAAMiB,gBAAgB,CAACpC,qBAAqBE,WAAW,IAAI,CAACF,qBAAqBK,cAAc;gBAE/F,IAAI+B,iBAAiBjB,EAAEK,GAAG,KAAKrD,QAAQ;oBACrCwB;oBAEA,sEAAsE;oBACtEE,oBAAoB;oBACpBmB;oBACApC,2BAA2BkC;oBAE3B3B,yBAAAA,mCAAAA,aAAegC,GAAmC;wBAAE/B,MAAM;oBAAM;oBAEhE+B,EAAEkB,eAAe;gBACnB;YACF;YAEA5C,2BAAAA,qCAAAA,eAAgB6C,gBAAgB,CAAC,WAAWH,mBAAmB;gBAAEI,SAAS;YAAK;YAE/E,OAAO;gBACL9C,2BAAAA,qCAAAA,eAAgB+C,mBAAmB,CAAC,WAAWL,mBAAmB;oBAAEI,SAAS;gBAAK;YACpF;QACF;IACF,GAAG;QAAC9C;QAAgBc;KAAc;IAElC,MAAMkC,sBAAsB,CAACtB,GAAsBuB;QACjD,IAAI,CAACjC,oBAAoBV,OAAO,EAAE;YAChC,wGAAwG;YACxG,IAAI,CAAC2C,KAAKtD,IAAI,EAAE;gBACdO;gBACAqB;gBACApC,2BAA2BkC;YAC7B;YAEA3B,yBAAAA,mCAAAA,aAAegC,GAAGuB;QACpB;QAEAjC,oBAAoBV,OAAO,GAAG;IAChC;IAEA,IAAI4C,mBAAmBrD;IACvB,IAAIsB,gBAAgB;QAClB,IAAIF,gBAAgB;YAClBiC,mBAAmB;gBAACjC;gBAAgBE;aAAe;QACrD,OAAO;YACL+B,mBAAmB/B;QACrB;IACF;IAEA,MAAMgC,eAAepE,oBAAoB;QACvC,GAAGU,KAAK;QACRI,UAAUqD;QACVxD,cAAcsD;QACdrD,MAAMA,iBAAAA,kBAAAA,OAAQmB;QACdlB,2BAA2BA,sCAAAA,uCAAAA,4BAA6BO;IAC1D;IAEA,OAAO;QACL,GAAGgD,YAAY;QACfC,iBAAiB7C,qBAAqBE,WAAW,IAAIF,qBAAqBK,cAAc;IAC1F;AACF,EAAE"}

package/lib/components/PreviewContent/PreviewContent.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { usePreviewContent_unstable } from './usePreviewContent';
+import { renderPreviewContent_unstable } from './renderPreviewContent';
+import { usePreviewContentStyles_unstable } from './usePreviewContentStyles';
+export const PreviewContent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePreviewContent_unstable(props, ref);
+  usePreviewContentStyles_unstable(state);
+  return renderPreviewContent_unstable(state);
+});
+PreviewContent.displayName = 'PreviewContent';
+//# sourceMappingURL=PreviewContent.js.map

package/lib/components/PreviewContent/PreviewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewContent_unstable } from './usePreviewContent';\nimport { renderPreviewContent_unstable } from './renderPreviewContent';\nimport { usePreviewContentStyles_unstable } from './usePreviewContentStyles';\nimport type { PreviewContentProps } from './PreviewContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewContent: ForwardRefComponent<PreviewContentProps> = React.forwardRef((props, ref) => {\n  const state = usePreviewContent_unstable(props, ref);\n\n  usePreviewContentStyles_unstable(state);\n  return renderPreviewContent_unstable(state);\n});\n\nPreviewContent.displayName = 'PreviewContent';\n"],"names":["React","usePreviewContent_unstable","renderPreviewContent_unstable","usePreviewContentStyles_unstable","PreviewContent","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAI7E,OAAO,MAAMC,+BAA2DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDJ,iCAAiCK;IACjC,OAAON,8BAA8BM;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/PreviewContent/PreviewContent.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PreviewContent.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewContent.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PreviewContentSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * PreviewContent Props\n */\nexport type PreviewContentProps = ComponentProps<PreviewContentSlots>;\n\n/**\n * State used in rendering PreviewContent\n */\nexport type PreviewContentState = ComponentState<PreviewContentSlots>;\n"],"names":[],"mappings":"AAAA,WAcsE"}

package/lib/components/PreviewContent/index.js

@@ -0,0 +1,6 @@
+export * from './PreviewContent';
+export * from './PreviewContent.types';
+export * from './renderPreviewContent';
+export * from './usePreviewContent';
+export * from './usePreviewContentStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/PreviewContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PreviewContent';\nexport * from './PreviewContent.types';\nexport * from './renderPreviewContent';\nexport * from './usePreviewContent';\nexport * from './usePreviewContentStyles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,4BAA4B"}

package/lib/components/PreviewContent/renderPreviewContent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of PreviewContent
+ */
+export const renderPreviewContent_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsx(state.root, {});
+};
+//# sourceMappingURL=renderPreviewContent.js.map

package/lib/components/PreviewContent/renderPreviewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPreviewContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewContentState, PreviewContentSlots } from './PreviewContent.types';\n\n/**\n * Render the final JSX of PreviewContent\n */\nexport const renderPreviewContent_unstable = (state: PreviewContentState) => {\n  assertSlots<PreviewContentSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderPreviewContent_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/PreviewContent/usePreviewContent.js

@@ -0,0 +1,24 @@
+import { getNativeElementProps, slot } from '@fluentui/react-components';
+/**
+ * Create the state required to render PreviewContent.
+ *
+ * The returned state can be modified with hooks such as usePreviewContentStyles_unstable,
+ * before being passed to renderPreviewContent_unstable.
+ *
+ * @param props - props from this instance of PreviewContent
+ * @param ref - reference to root HTMLElement of PreviewContent
+ */
+export const usePreviewContent_unstable = (props, ref) => {
+  return {
+    components: {
+      root: 'div'
+    },
+    root: slot.always(getNativeElementProps('div', {
+      ref,
+      ...props
+    }), {
+      elementType: 'div'
+    })
+  };
+};
+//# sourceMappingURL=usePreviewContent.js.map

package/lib/components/PreviewContent/usePreviewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewContent.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-components';\nimport type { PreviewContentProps, PreviewContentState } from './PreviewContent.types';\n\n/**\n * Create the state required to render PreviewContent.\n *\n * The returned state can be modified with hooks such as usePreviewContentStyles_unstable,\n * before being passed to renderPreviewContent_unstable.\n *\n * @param props - props from this instance of PreviewContent\n * @param ref - reference to root HTMLElement of PreviewContent\n */\nexport const usePreviewContent_unstable = (\n  props: PreviewContentProps,\n  ref: React.Ref<HTMLElement>,\n): PreviewContentState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getNativeElementProps","slot","usePreviewContent_unstable","props","ref","components","root","always","elementType"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,IAAI,QAAQ,6BAA6B;AAGzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/PreviewContent/usePreviewContentStyles.js

@@ -0,0 +1,17 @@
+import { __resetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+export const previewContentClassNames = {
+  root: 'fai-PreviewContent'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseClassName = __resetStyles("r3uexl1", "rbb2gfj", [".r3uexl1{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;padding-top:var(--spacingVerticalS);padding-right:var(--spacingHorizontalS);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalS);row-gap:var(--spacingVerticalXS);word-break:break-word;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rbb2gfj{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;padding-top:var(--spacingVerticalS);padding-left:var(--spacingHorizontalS);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalS);row-gap:var(--spacingVerticalXS);word-break:break-word;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+/**
+ * Apply styling to the PreviewContent slots based on the state
+ */
+export const usePreviewContentStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);
+  return state;
+};
+//# sourceMappingURL=usePreviewContentStyles.js.map

package/lib/components/PreviewContent/usePreviewContentStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewContentStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { PreviewContentSlots, PreviewContentState } from './PreviewContent.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewContentClassNames: SlotClassNames<PreviewContentSlots> = {\n  root: 'fai-PreviewContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground3,\n  display: 'flex',\n  flexDirection: 'column',\n  ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  rowGap: tokens.spacingVerticalXS,\n  wordBreak: 'break-word',\n\n  ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the PreviewContent slots based on the state\n */\nexport const usePreviewContentStyles_unstable = (state: PreviewContentState): PreviewContentState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","shorthands","tokens","typographyStyles","previewContentClassNames","root","useRootBaseClassName","color","colorNeutralForeground3","display","flexDirection","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","caption1","usePreviewContentStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,OAAOL,OAAOM,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACf,GAAGT,WAAWU,OAAO,CAACT,OAAOU,gBAAgB,EAAEV,OAAOW,kBAAkB,CAAC;IACzEC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAW;IAEX,GAAGb,iBAAiBc,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBd;IAE1Ba,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,yBAAyBC,IAAI,EAAEe,mBAAmBD,MAAMd,IAAI,CAACgB,SAAS;IAE1G,OAAOF;AACT,EAAE"}

package/lib/components/PreviewHeader/PreviewHeader.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { usePreviewHeader_unstable } from './usePreviewHeader';
+import { renderPreviewHeader_unstable } from './renderPreviewHeader';
+import { usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles';
+export const PreviewHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = usePreviewHeader_unstable(props, ref);
+  usePreviewHeaderStyles_unstable(state);
+  return renderPreviewHeader_unstable(state);
+});
+PreviewHeader.displayName = 'PreviewHeader';
+//# sourceMappingURL=PreviewHeader.js.map

package/lib/components/PreviewHeader/PreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewHeader_unstable } from './usePreviewHeader';\nimport { renderPreviewHeader_unstable } from './renderPreviewHeader';\nimport { usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles';\nimport type { PreviewHeaderProps } from './PreviewHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewHeader: ForwardRefComponent<PreviewHeaderProps> = React.forwardRef((props, ref) => {\n  const state = usePreviewHeader_unstable(props, ref);\n\n  usePreviewHeaderStyles_unstable(state);\n  return renderPreviewHeader_unstable(state);\n});\n\nPreviewHeader.displayName = 'PreviewHeader';\n"],"names":["React","usePreviewHeader_unstable","renderPreviewHeader_unstable","usePreviewHeaderStyles_unstable","PreviewHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAI3E,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/PreviewHeader/PreviewHeader.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PreviewHeader.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PreviewHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type PreviewHeaderSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Actions slot.\n   */\n  actions: Slot<'div'>;\n\n  /**\n   * Citation slot. Displays a `Citation`. Set to `null` to hide the citation.\n   */\n  citation: Slot<'span'>;\n\n  /**\n   * Label slot. Primary description of the preview.\n   */\n  label: NonNullable<Slot<'span'>>;\n\n  /**\n   * Media slot. Used to display Avatars, Icons, etc.\n   */\n  media: Slot<'div'>;\n};\n\n/**\n * PreviewHeader Props\n */\nexport type PreviewHeaderProps = ComponentProps<Partial<PreviewHeaderSlots>>;\n\n/**\n * State used in rendering PreviewHeader\n */\nexport type PreviewHeaderState = ComponentState<PreviewHeaderSlots>;\n"],"names":[],"mappings":"AAAA,WAkCoE"}

package/lib/components/PreviewHeader/index.js

@@ -0,0 +1,6 @@
+export * from './PreviewHeader';
+export * from './PreviewHeader.types';
+export * from './renderPreviewHeader';
+export * from './usePreviewHeader';
+export * from './usePreviewHeaderStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/PreviewHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PreviewHeader';\nexport * from './PreviewHeader.types';\nexport * from './renderPreviewHeader';\nexport * from './usePreviewHeader';\nexport * from './usePreviewHeaderStyles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B"}

package/lib/components/PreviewHeader/renderPreviewHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of PreviewHeader
+ */
+export const renderPreviewHeader_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsxs(state.root, {
+    children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.label, {}), state.actions && /*#__PURE__*/_jsx(state.actions, {})]
+  });
+};
+//# sourceMappingURL=renderPreviewHeader.js.map

package/lib/components/PreviewHeader/renderPreviewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderPreviewHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewHeaderState, PreviewHeaderSlots } from './PreviewHeader.types';\n\n/**\n * Render the final JSX of PreviewHeader\n */\nexport const renderPreviewHeader_unstable = (state: PreviewHeaderState) => {\n  assertSlots<PreviewHeaderSlots>(state);\n\n  return (\n    <state.root>\n      {state.citation && <state.citation />}\n      {state.media && <state.media />}\n      <state.label />\n      {state.actions && <state.actions />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPreviewHeader_unstable","state","root","citation","media","label","actions"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,KAAK,kBAAI,KAACH,MAAMG,KAAK;0BAC5B,KAACH,MAAMI,KAAK;YACXJ,MAAMK,OAAO,kBAAI,KAACL,MAAMK,OAAO;;;AAGtC,EAAE"}