@fluentui-copilot/react-preview 0.5.3 → 0.5.5

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui-copilot/react-preview",
   "entries": [
     {
-      "date": "Fri, 23 Aug 2024 01:04:50 GMT",
+      "date": "Tue, 01 Oct 2024 20:50:52 GMT",
+      "tag": "@fluentui-copilot/react-preview_v0.5.5",
+      "version": "0.5.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui-copilot/react-preview",
+            "commit": "f53811655d0bccaa1a9c26b986db741e55b132b3",
+            "comment": "fix: move max width to content so that preview matches design spec"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Sep 2024 19:17:54 GMT",
+      "tag": "@fluentui-copilot/react-preview_v0.5.4",
+      "version": "0.5.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-preview",
+            "commit": "2a0f7bac90a8e65fa591a660f107ab8a79bee774",
+            "comment": "feat: Adding showDelay and hideDelay props to Preview component to control the delay in opening/closing it when opened by hover."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Sep 2024 18:11:50 GMT",
+      "tag": "@fluentui-copilot/react-preview_v0.5.3",
+      "version": "0.5.3",
+      "comments": {
+        "none": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-preview",
+            "commit": "6c540d99d0a351ca0b736ea12c1e3b0c5730984f",
+            "comment": "chore: Cherry-picking package updates from 0.18.1 release back to main."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 23 Aug 2024 01:05:09 GMT",
       "tag": "@fluentui-copilot/react-preview_v0.5.3",
       "version": "0.5.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui-copilot/react-preview
 
-This log was last generated on Fri, 23 Aug 2024 01:04:50 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Oct 2024 20:50:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.5.5)
+
+Tue, 01 Oct 2024 20:50:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.5.4..@fluentui-copilot/react-preview_v0.5.5)
+
+### Patches
+
+- fix: move max width to content so that preview matches design spec ([PR #2207](https://github.com/microsoft/fluentai/pull/2207) by mgodbolt@microsoft.com)
+
+## [0.5.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.5.4)
+
+Fri, 06 Sep 2024 19:17:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.5.3..@fluentui-copilot/react-preview_v0.5.4)
+
+### Patches
+
+- feat: Adding showDelay and hideDelay props to Preview component to control the delay in opening/closing it when opened by hover. ([PR #2137](https://github.com/microsoft/fluentai/pull/2137) by makotom@microsoft.com)
+
 ## [0.5.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.5.3)
 
-Fri, 23 Aug 2024 01:04:50 GMT 
+Fri, 23 Aug 2024 01:05:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.5.2..@fluentui-copilot/react-preview_v0.5.3)
 
 ### Patches

package/dist/index.d.ts

@@ -119,7 +119,18 @@ export declare type PreviewMetadataState = ComponentState<PreviewMetadataSlots>;
 /**
  * Preview Props
  */
-export declare type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;
+export declare type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'> & {
+    /**
+     * Sets the delay in milliseconds for closing the Preview on mouse leaving its trigger or popover surface when it was opened by hover.
+     * @default 250
+     */
+    hideDelay?: number;
+    /**
+     * Sets the delay in milliseconds for opening the Preview on hovering its trigger.
+     * @default 250
+     */
+    showDelay?: number;
+};
 
 /**
  * State used in rendering Preview

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

@@ -1 +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 = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;\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":[],"rangeMappings":";;","mappings":"AAOA;;CAEC,GACD,WAKE"}
+{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'> & {\n  /**\n   * Sets the delay in milliseconds for closing the Preview on mouse leaving its trigger or popover surface when it was opened by hover.\n   * @default 250\n   */\n  hideDelay?: number;\n\n  /**\n   * Sets the delay in milliseconds for opening the Preview on hovering its trigger.\n   * @default 250\n   */\n  showDelay?: number;\n};\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":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKE"}

package/lib/components/Preview/usePreview.js

@@ -3,13 +3,13 @@ import { Enter, Escape } from '@fluentui/keyboard-keys';
 import { mergeCallbacks, resolvePositioningShorthand, 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_MOUSE_DELAY = 250;
 const POPOVER_KEYBOARD_HIDE_DELAY = 0;
-const getDelay = type => {
+const getDelay = (type, popoverMouseHideDelay) => {
   if (type === 'focus' || type === 'blur') {
     return POPOVER_KEYBOARD_HIDE_DELAY;
   }
-  return POPOVER_MOUSE_HIDE_DELAY;
+  return popoverMouseHideDelay;
 };
 /**
  * Create the state required to render Preview.
@@ -22,16 +22,19 @@ const getDelay = type => {
  */
 export const usePreview_unstable = props => {
   const {
+    hideDelay = POPOVER_MOUSE_DELAY,
     onOpenChange,
     open,
     positioning,
+    showDelay = POPOVER_MOUSE_DELAY,
     unstable_disableAutoFocus
   } = props;
   const children = React.Children.toArray(props.children);
   const {
     targetDocument
   } = useFluent();
-  const [setTimeout, clearTimeout] = useTimeout();
+  const [setEnterTimeout, clearEnterTimeout] = useTimeout();
+  const [setLeaveTimeout, clearLeaveTimeout] = useTimeout();
   const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);
   const {
     current: previewInternalState
@@ -62,6 +65,7 @@ export const usePreview_unstable = props => {
     previewInternalState.openByHoverOverPopover = false;
     previewInternalState.openByKeyboard = false;
     setIsPopoverOpen(isOpen());
+    clearEnterTimeout();
   };
   React.useEffect(() => {
     return () => {
@@ -82,12 +86,14 @@ export const usePreview_unstable = props => {
         closeAllOpenedByHoverPreviews(popoverSurfaceId);
         addOpenedByHoverPreview(popoverSurfaceId, closeCallback);
       }
-      setIsPopoverOpen(isOpen());
+      setEnterTimeout(() => {
+        setIsPopoverOpen(isOpen());
+      }, showDelay);
     };
     const handleTriggerTargetLeave = e => {
       previewInternalState.openByHoverOverTrigger = false;
       triggerMousedOver.current = false;
-      setTimeout(() => {
+      setLeaveTimeout(() => {
         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) {
@@ -96,7 +102,7 @@ export const usePreview_unstable = props => {
           });
           removeOpenedByHoverPreview(popoverSurfaceId);
         }
-      }, getDelay(e.type));
+      }, getDelay(e.type, hideDelay));
     };
     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.
@@ -128,7 +134,7 @@ export const usePreview_unstable = props => {
     };
     const handleTriggerKeyDown = e => {
       if (e.key === Enter) {
-        clearTimeout();
+        clearLeaveTimeout();
         // 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.
@@ -156,7 +162,7 @@ export const usePreview_unstable = props => {
     };
     const handlePopoverTargetLeave = e => {
       previewInternalState.openByHoverOverPopover = false;
-      setTimeout(() => {
+      setLeaveTimeout(() => {
         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) {
@@ -165,7 +171,7 @@ export const usePreview_unstable = props => {
           });
           removeOpenedByHoverPreview(popoverSurfaceId);
         }
-      }, getDelay(e.type));
+      }, getDelay(e.type, hideDelay));
     };
     popoverTrigger = React.cloneElement(popoverTrigger, {
       ...popoverTrigger.props,
@@ -195,7 +201,7 @@ export const usePreview_unstable = props => {
       const onDocumentKeyDown = e => {
         const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;
         if (openedByHover && e.key === Escape) {
-          clearTimeout();
+          clearLeaveTimeout();
           // We set state back to its default if the Escape key has been pressed
           setDisableAutoFocus(true);
           closeCallback();
@@ -220,7 +226,7 @@ export const usePreview_unstable = props => {
     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();
+        clearLeaveTimeout();
         closeCallback();
         removeOpenedByHoverPreview(popoverSurfaceId);
       }

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

@@ -1 +1 @@
-{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n  mergeCallbacks,\n  resolvePositioningShorthand,\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, positioning, 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  const triggerMousedOver = React.useRef(false);\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      triggerMousedOver.current = 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      triggerMousedOver.current = false;\n\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      // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n      if (triggerMousedOver.current) {\n        previewInternalState.openByClick = false;\n        triggerMousedOver.current = false;\n      }\n      // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n      else {\n        e.preventDefault();\n      }\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    positioning:\n      typeof positioning === 'string'\n        ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n        : { autoSize: true, ...positioning },\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","resolvePositioningShorthand","useFluent","useId","useIsomorphicLayoutEffect","usePopover_unstable","useTimeout","addOpenedByHoverPreview","closeAllOpenedByHoverPreviews","removeOpenedByHoverPreview","POPOVER_MOUSE_HIDE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","usePreview_unstable","props","onOpenChange","open","positioning","unstable_disableAutoFocus","children","Children","toArray","targetDocument","setTimeout","clearTimeout","disableAutoFocus","setDisableAutoFocus","useState","current","previewInternalState","useRef","openByClick","openByHoverOverTrigger","openByHoverOverPopover","openByKeyboard","triggerMousedOver","isOpen","isPopoverOpen","setIsPopoverOpen","preventDefaultClose","popoverTrigger","undefined","popoverSurface","length","popoverSurfaceId","id","closeCallback","useEffect","handleTriggerTargetEnter","e","handleTriggerTargetLeave","handleTriggerClick","tmpOpenByHoverOverTrigger","preventDefault","handleTriggerKeyDown","key","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","onClick","onKeyDown","onMouseEnter","onMouseLeave","onFocus","onDocumentKeyDown","openedByHover","stopPropagation","addEventListener","capture","removeEventListener","onPopoverOpenChange","data","resolvedChildren","popoverState","autoSize","isPreviewLocked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n  mergeCallbacks,\n  resolvePositioningShorthand,\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_DELAY = 250;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string, popoverMouseHideDelay: number): number => {\n  if (type === 'focus' || type === 'blur') {\n    return POPOVER_KEYBOARD_HIDE_DELAY;\n  }\n\n  return popoverMouseHideDelay;\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 {\n    hideDelay = POPOVER_MOUSE_DELAY,\n    onOpenChange,\n    open,\n    positioning,\n    showDelay = POPOVER_MOUSE_DELAY,\n    unstable_disableAutoFocus,\n  } = props;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  const { targetDocument } = useFluent();\n  const [setEnterTimeout, clearEnterTimeout] = useTimeout();\n  const [setLeaveTimeout, clearLeaveTimeout] = 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  const triggerMousedOver = React.useRef(false);\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    clearEnterTimeout();\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      triggerMousedOver.current = 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      setEnterTimeout(() => {\n        setIsPopoverOpen(isOpen());\n      }, showDelay);\n    };\n\n    const handleTriggerTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n      previewInternalState.openByHoverOverTrigger = false;\n      triggerMousedOver.current = false;\n\n      setLeaveTimeout(() => {\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, hideDelay));\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      // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n      if (triggerMousedOver.current) {\n        previewInternalState.openByClick = false;\n        triggerMousedOver.current = false;\n      }\n      // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n      else {\n        e.preventDefault();\n      }\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        clearLeaveTimeout();\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      setLeaveTimeout(() => {\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, hideDelay));\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          clearLeaveTimeout();\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        clearLeaveTimeout();\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    positioning:\n      typeof positioning === 'string'\n        ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n        : { autoSize: true, ...positioning },\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","resolvePositioningShorthand","useFluent","useId","useIsomorphicLayoutEffect","usePopover_unstable","useTimeout","addOpenedByHoverPreview","closeAllOpenedByHoverPreviews","removeOpenedByHoverPreview","POPOVER_MOUSE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","popoverMouseHideDelay","usePreview_unstable","props","hideDelay","onOpenChange","open","positioning","showDelay","unstable_disableAutoFocus","children","Children","toArray","targetDocument","setEnterTimeout","clearEnterTimeout","setLeaveTimeout","clearLeaveTimeout","disableAutoFocus","setDisableAutoFocus","useState","current","previewInternalState","useRef","openByClick","openByHoverOverTrigger","openByHoverOverPopover","openByKeyboard","triggerMousedOver","isOpen","isPopoverOpen","setIsPopoverOpen","preventDefaultClose","popoverTrigger","undefined","popoverSurface","length","popoverSurfaceId","id","closeCallback","useEffect","handleTriggerTargetEnter","e","handleTriggerTargetLeave","handleTriggerClick","tmpOpenByHoverOverTrigger","preventDefault","handleTriggerKeyDown","key","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","onClick","onKeyDown","onMouseEnter","onMouseLeave","onFocus","onDocumentKeyDown","openedByHover","stopPropagation","addEventListener","capture","removeEventListener","onPopoverOpenChange","data","resolvedChildren","popoverState","autoSize","isPreviewLocked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -5,7 +5,7 @@ export const previewContentClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootBaseClassName = __resetStyles("r1jbsjc3", null, [".r1jbsjc3{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;padding:var(--spacingVerticalS) 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);}"]);
+const useRootBaseClassName = __resetStyles("rd6u8g", null, [".rd6u8g{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;max-width:calc(256px - var(--spacingHorizontalXS) * 2);padding:var(--spacingVerticalS) var(--spacingHorizontalS);row-gap:var(--spacingVerticalXS);word-break:break-word;box-sizing:border-box;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
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, 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  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  'use no memo';\n\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","tokens","typographyStyles","previewContentClassNames","root","useRootBaseClassName","color","colorNeutralForeground3","display","flexDirection","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","caption1","usePreviewContentStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIrG,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACfC,SAAS,CAAC,EAAET,OAAOU,gBAAgB,CAAC,CAAC,EAAEV,OAAOW,kBAAkB,CAAC,CAAC;IAClEC,QAAQZ,OAAOa,iBAAiB;IAChCC,WAAW;IAEX,GAAGb,iBAAiBc,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBd;IAE1Ba,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,yBAAyBC,IAAI,EAAEe,mBAAmBD,MAAMd,IAAI,CAACgB,SAAS;IAE1G,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, 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  maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  rowGap: tokens.spacingVerticalXS,\n  wordBreak: 'break-word',\n  boxSizing: 'border-box',\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  'use no memo';\n\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","tokens","typographyStyles","previewContentClassNames","root","useRootBaseClassName","color","colorNeutralForeground3","display","flexDirection","maxWidth","spacingHorizontalXS","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","boxSizing","caption1","usePreviewContentStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIrG,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACfC,UAAU,CAAC,aAAa,EAAET,OAAOU,mBAAmB,CAAC,KAAK,CAAC;IAC3DC,SAAS,CAAC,EAAEX,OAAOY,gBAAgB,CAAC,CAAC,EAAEZ,OAAOa,kBAAkB,CAAC,CAAC;IAClEC,QAAQd,OAAOe,iBAAiB;IAChCC,WAAW;IACXC,WAAW;IACX,GAAGhB,iBAAiBiB,QAAQ;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBjB;IAE1BgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGvB,aAAaG,yBAAyBC,IAAI,EAAEkB,mBAAmBD,MAAMjB,IAAI,CAACmB,SAAS;IAE1G,OAAOF;AACT,EAAE"}

package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.js

@@ -7,17 +7,17 @@ export const previewSurfaceClassNames = {
  */
 const useRootStyles = __styles({
   base: {
-    B2u0y6b: "f2rbwfs",
     Byoj8tv: 0,
     uwmqm3: 0,
     z189sj: 0,
     z8tnut: 0,
-    B0ocmuz: "f16d74zd"
+    B0ocmuz: "f16d74zd",
+    B7ck84d: "f1ewtqcl"
   }
 }, {
-  d: [".f2rbwfs{max-width:256px;}", [".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}", {
+  d: [[".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}", {
     p: -1
-  }]]
+  }], ".f1ewtqcl{box-sizing:border-box;}"]
 });
 /**
  * Apply styling to the PreviewSurface slots based on the state

package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePreviewSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';\nimport type { PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewSurfaceClassNames: SlotClassNames<PreviewSurfaceSlots> = {\n  root: 'fai-PreviewSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    maxWidth: '256px',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  },\n});\n\n/**\n * Apply styling to the PreviewSurface slots based on the state\n */\nexport const usePreviewSurfaceStyles_unstable = (state: PreviewSurfaceState): PreviewSurfaceState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, state.root.className);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","usePopoverSurfaceStyles_unstable","previewSurfaceClassNames","root","useRootStyles","base","maxWidth","padding","spacingVerticalXS","spacingHorizontalXS","usePreviewSurfaceStyles_unstable","state","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gCAAgC,QAAQ,6BAA6B;AAIhH,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAgBN,WAAW;IAC/BO,MAAM;QACJC,UAAU;QACVC,SAAS,CAAC,EAAEP,OAAOQ,iBAAiB,CAAC,CAAC,EAAER,OAAOS,mBAAmB,CAAC,CAAC;IACtE;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,aAAaR;IAEnBO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,yBAAyBC,IAAI,EAAES,WAAWP,IAAI,EAAEM,MAAMR,IAAI,CAACU,SAAS;IAExGZ,iCAAiCU;IAEjC,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["usePreviewSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';\nimport type { PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewSurfaceClassNames: SlotClassNames<PreviewSurfaceSlots> = {\n  root: 'fai-PreviewSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n    boxSizing: 'border-box',\n  },\n});\n\n/**\n * Apply styling to the PreviewSurface slots based on the state\n */\nexport const usePreviewSurfaceStyles_unstable = (state: PreviewSurfaceState): PreviewSurfaceState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, state.root.className);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","usePopoverSurfaceStyles_unstable","previewSurfaceClassNames","root","useRootStyles","base","padding","spacingVerticalXS","spacingHorizontalXS","boxSizing","usePreviewSurfaceStyles_unstable","state","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gCAAgC,QAAQ,6BAA6B;AAIhH,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAgBN,WAAW;IAC/BO,MAAM;QACJC,SAAS,CAAC,EAAEN,OAAOO,iBAAiB,CAAC,CAAC,EAAEP,OAAOQ,mBAAmB,CAAC,CAAC;QACpEC,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,aAAaR;IAEnBO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,yBAAyBC,IAAI,EAAES,WAAWP,IAAI,EAAEM,MAAMR,IAAI,CAACU,SAAS;IAExGZ,iCAAiCU;IAEjC,OAAOA;AACT,EAAE"}

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

@@ -1 +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 = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'>;\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":[],"rangeMappings":";;","mappings":"AAOA;;CAEC"}
+{"version":3,"sources":["Preview.types.ts"],"sourcesContent":["import type { PopoverProps, PopoverState } from '@fluentui/react-components';\n\n/**\n * Preview Props\n */\nexport type PreviewProps = Omit<PopoverProps, 'mouseLeaveDelay' | 'openOnHover'> & {\n  /**\n   * Sets the delay in milliseconds for closing the Preview on mouse leaving its trigger or popover surface when it was opened by hover.\n   * @default 250\n   */\n  hideDelay?: number;\n\n  /**\n   * Sets the delay in milliseconds for opening the Preview on hovering its trigger.\n   * @default 250\n   */\n  showDelay?: number;\n};\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":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}

package/lib-commonjs/components/Preview/usePreview.js

@@ -14,19 +14,20 @@ const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reactcomponents = require("@fluentui/react-components");
 const _reactutilities = require("@fluentui/react-utilities");
 const _utils = require("../../utils");
-const POPOVER_MOUSE_HIDE_DELAY = 500;
+const POPOVER_MOUSE_DELAY = 250;
 const POPOVER_KEYBOARD_HIDE_DELAY = 0;
-const getDelay = (type)=>{
+const getDelay = (type, popoverMouseHideDelay)=>{
     if (type === 'focus' || type === 'blur') {
         return POPOVER_KEYBOARD_HIDE_DELAY;
     }
-    return POPOVER_MOUSE_HIDE_DELAY;
+    return popoverMouseHideDelay;
 };
 const usePreview_unstable = (props)=>{
-    const { onOpenChange, open, positioning, unstable_disableAutoFocus } = props;
+    const { hideDelay = POPOVER_MOUSE_DELAY, onOpenChange, open, positioning, showDelay = POPOVER_MOUSE_DELAY, unstable_disableAutoFocus } = props;
     const children = _react.Children.toArray(props.children);
     const { targetDocument } = (0, _reactcomponents.useFluent)();
-    const [setTimeout, clearTimeout] = (0, _reactutilities.useTimeout)();
+    const [setEnterTimeout, clearEnterTimeout] = (0, _reactutilities.useTimeout)();
+    const [setLeaveTimeout, clearLeaveTimeout] = (0, _reactutilities.useTimeout)();
     const [disableAutoFocus, setDisableAutoFocus] = _react.useState(true);
     const { current: previewInternalState } = _react.useRef({
         openByClick: false,
@@ -55,6 +56,7 @@ const usePreview_unstable = (props)=>{
         previewInternalState.openByHoverOverPopover = false;
         previewInternalState.openByKeyboard = false;
         setIsPopoverOpen(isOpen());
+        clearEnterTimeout();
     };
     _react.useEffect(()=>{
         return ()=>{
@@ -77,12 +79,14 @@ const usePreview_unstable = (props)=>{
                 (0, _utils.closeAllOpenedByHoverPreviews)(popoverSurfaceId);
                 (0, _utils.addOpenedByHoverPreview)(popoverSurfaceId, closeCallback);
             }
-            setIsPopoverOpen(isOpen());
+            setEnterTimeout(()=>{
+                setIsPopoverOpen(isOpen());
+            }, showDelay);
         };
         const handleTriggerTargetLeave = (e)=>{
             previewInternalState.openByHoverOverTrigger = false;
             triggerMousedOver.current = false;
-            setTimeout(()=>{
+            setLeaveTimeout(()=>{
                 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) {
@@ -91,7 +95,7 @@ const usePreview_unstable = (props)=>{
                     });
                     (0, _utils.removeOpenedByHoverPreview)(popoverSurfaceId);
                 }
-            }, getDelay(e.type));
+            }, getDelay(e.type, hideDelay));
         };
         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.
@@ -123,7 +127,7 @@ const usePreview_unstable = (props)=>{
         };
         const handleTriggerKeyDown = (e)=>{
             if (e.key === _keyboardkeys.Enter) {
-                clearTimeout();
+                clearLeaveTimeout();
                 // 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.
@@ -151,7 +155,7 @@ const usePreview_unstable = (props)=>{
         };
         const handlePopoverTargetLeave = (e)=>{
             previewInternalState.openByHoverOverPopover = false;
-            setTimeout(()=>{
+            setLeaveTimeout(()=>{
                 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) {
@@ -160,7 +164,7 @@ const usePreview_unstable = (props)=>{
                     });
                     (0, _utils.removeOpenedByHoverPreview)(popoverSurfaceId);
                 }
-            }, getDelay(e.type));
+            }, getDelay(e.type, hideDelay));
         };
         popoverTrigger = /*#__PURE__*/ _react.cloneElement(popoverTrigger, {
             ...popoverTrigger.props,
@@ -190,7 +194,7 @@ const usePreview_unstable = (props)=>{
             const onDocumentKeyDown = (e)=>{
                 const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;
                 if (openedByHover && e.key === _keyboardkeys.Escape) {
-                    clearTimeout();
+                    clearLeaveTimeout();
                     // We set state back to its default if the Escape key has been pressed
                     setDisableAutoFocus(true);
                     closeCallback();
@@ -218,7 +222,7 @@ const usePreview_unstable = (props)=>{
         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();
+                clearLeaveTimeout();
                 closeCallback();
                 (0, _utils.removeOpenedByHoverPreview)(popoverSurfaceId);
             }

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

@@ -1 +1 @@
-{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n  mergeCallbacks,\n  resolvePositioningShorthand,\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, positioning, 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  const triggerMousedOver = React.useRef(false);\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      triggerMousedOver.current = 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      triggerMousedOver.current = false;\n\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      // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n      if (triggerMousedOver.current) {\n        previewInternalState.openByClick = false;\n        triggerMousedOver.current = false;\n      }\n      // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n      else {\n        e.preventDefault();\n      }\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    positioning:\n      typeof positioning === 'string'\n        ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n        : { autoSize: true, ...positioning },\n    unstable_disableAutoFocus: unstable_disableAutoFocus ?? disableAutoFocus,\n  });\n\n  return {\n    ...popoverState,\n    isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard,\n  };\n};\n"],"names":["onOpenChange","POPOVER_MOUSE_HIDE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","positioning","targetDocument","open","disableAutoFocus","unstable_disableAutoFocus","previewInternalState","openByHoverOverTrigger","toArray","props","children","openByHoverOverPopover","openByKeyboard","useFluent","setTimeout","triggerMousedOver","React","useRef","setDisableAutoFocus","useState","current","isPopoverOpen","openByClick","preventDefaultClose","undefined","length","popoverSurface","isOpen","popoverSurfaceId","setIsPopoverOpen","useId","id","removeOpenedByHoverPreview","e","closeAllOpenedByHoverPreviews","addOpenedByHoverPreview","handleTriggerTargetLeave","handleTriggerClick","preventDefault","tmpOpenByHoverOverTrigger","handleTriggerKeyDown","popoverTrigger","cloneElement","mergeCallbacks","onKeyDown","onMouseLeave","onBlur","onClick","onMouseEnter","handlePopoverTargetEnter","_popoverSurface_props_arialabelledby","useIsomorphicLayoutEffect","onDocumentKeyDown","openedByHover","closeCallback","key","Escape","capture","addEventListener","removeEventListener","onPopoverOpenChange","clearTimeout","data","resolvedChildren","autoSize","resolvePositioningShorthand","isPreviewLocked","popoverState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n  mergeCallbacks,\n  resolvePositioningShorthand,\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_DELAY = 250;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string, popoverMouseHideDelay: number): number => {\n  if (type === 'focus' || type === 'blur') {\n    return POPOVER_KEYBOARD_HIDE_DELAY;\n  }\n\n  return popoverMouseHideDelay;\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 {\n    hideDelay = POPOVER_MOUSE_DELAY,\n    onOpenChange,\n    open,\n    positioning,\n    showDelay = POPOVER_MOUSE_DELAY,\n    unstable_disableAutoFocus,\n  } = props;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  const { targetDocument } = useFluent();\n  const [setEnterTimeout, clearEnterTimeout] = useTimeout();\n  const [setLeaveTimeout, clearLeaveTimeout] = 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  const triggerMousedOver = React.useRef(false);\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    clearEnterTimeout();\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      triggerMousedOver.current = 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      setEnterTimeout(() => {\n        setIsPopoverOpen(isOpen());\n      }, showDelay);\n    };\n\n    const handleTriggerTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n      previewInternalState.openByHoverOverTrigger = false;\n      triggerMousedOver.current = false;\n\n      setLeaveTimeout(() => {\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, hideDelay));\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      // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n      if (triggerMousedOver.current) {\n        previewInternalState.openByClick = false;\n        triggerMousedOver.current = false;\n      }\n      // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n      else {\n        e.preventDefault();\n      }\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        clearLeaveTimeout();\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      setLeaveTimeout(() => {\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, hideDelay));\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          clearLeaveTimeout();\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        clearLeaveTimeout();\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    positioning:\n      typeof positioning === 'string'\n        ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n        : { autoSize: true, ...positioning },\n    unstable_disableAutoFocus: unstable_disableAutoFocus ?? disableAutoFocus,\n  });\n\n  return {\n    ...popoverState,\n    isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard,\n  };\n};\n"],"names":["hideDelay","POPOVER_MOUSE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","popoverMouseHideDelay","targetDocument","useFluent","onOpenChange","setEnterTimeout","open","positioning","disableAutoFocus","showDelay","current","previewInternalState","openByHoverOverPopover","toArray","props","children","openByKeyboard","triggerMousedOver","clearEnterTimeout","useTimeout","setLeaveTimeout","openByClick","setDisableAutoFocus","React","useState","preventDefaultClose","popoverTrigger","popoverSurface","openByHoverOverTrigger","useRef","isOpen","popoverSurfaceId","useId","setIsPopoverOpen","useEffect","length","removeOpenedByHoverPreview","closeCallback","handleTriggerTargetEnter","closeAllOpenedByHoverPreviews","addOpenedByHoverPreview","handleTriggerTargetLeave","e","handleTriggerClick","isPopoverOpen","tmpOpenByHoverOverTrigger","clearLeaveTimeout","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","mergeCallbacks","onMouseLeave","onMouseEnter","onFocus","_popoverSurface_props_arialabelledby","useIsomorphicLayoutEffect","undefined","openedByHover","Escape","stopPropagation","key","onPopoverOpenChange","removeEventListener","onDocumentKeyDown","data","resolvedChildren","popoverState","autoSize","resolvePositioningShorthand","unstable_disableAutoFocus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.js

@@ -22,8 +22,8 @@ const previewContentClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1jbsjc3", null, [
-    ".r1jbsjc3{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;padding:var(--spacingVerticalS) 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);}"
+ */ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rd6u8g", null, [
+    ".rd6u8g{color:var(--colorNeutralForeground3);display:flex;flex-direction:column;max-width:calc(256px - var(--spacingHorizontalXS) * 2);padding:var(--spacingVerticalS) var(--spacingHorizontalS);row-gap:var(--spacingVerticalXS);word-break:break-word;box-sizing:border-box;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
 ]);
 const usePreviewContentStyles_unstable = (state)=>{
     'use no memo';

package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, 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  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  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["previewContentClassNames","tokens","root","color","colorNeutralForeground3","rowGap","state","rootBaseClassName","useRootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAYHC,gCAAwB;eAAxBA;;;iCAhBsD;AAIzD,MAAMD,2BAAgE;UAC3EE;AACF;AAEA;;CAEC,SAECC,uBAAcC,IAAAA,8BAAuB,EAAA,YAAA,MAAA;IAAA;CAAA;AAIrCC,MAAQJ,mCAAwBK,CAAAA;;IAIlC,MAAAC,oBAAAC;IAEAF,MAAAJ,IAAA,CAAAO,SAAA,GAAAC,IAAAA,6BAAA,EAAAV,yBAAAE,IAAA,EAAAK,mBAAAD,MAAAJ,IAAA,CAAAO,SAAA;;6DAIE"}
+{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, 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  maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  rowGap: tokens.spacingVerticalXS,\n  wordBreak: 'break-word',\n  boxSizing: 'border-box',\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  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["previewContentClassNames","usePreviewContentStyles_unstable","tokens","root","color","colorNeutralForeground3","padding","boxSizing","useRootBaseClassName","typographyStyles","caption1","rootBaseClassName","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAYFC,gCAA8BC;eAA9BD;;;iCAhBqD;AAIzD,MAAMD,2BAAgE;UAC3EG;AACF;AAEA;;CAEC,SAECC,uBAAcC,IAAAA,8BAAuB,EAAA,UAAA,MAAA;IAAA;CAAA;AAIrCC,MAASL,mCAA8BC,CAAAA;;UAGvCK,oBAAWC;UACRC,IAAAA,CAAAA,SAAAA,GAAiBC,IAAAA,6BAAQ,EAAAV,yBAAAG,IAAA,EAAAQ,mBAAAC,MAAAT,IAAA,CAAAU,SAAA;IAC9B,OAAAD;AAEA"}

package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.js

@@ -24,22 +24,22 @@ const previewSurfaceClassNames = {
  * Styles for the root slot
  */ const useRootStyles = (0, _reactcomponents.__styles)({
     base: {
-        B2u0y6b: "f2rbwfs",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "f16d74zd"
+        B0ocmuz: "f16d74zd",
+        B7ck84d: "f1ewtqcl"
     }
 }, {
     d: [
-        ".f2rbwfs{max-width:256px;}",
         [
             ".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}",
             {
                 p: -1
             }
-        ]
+        ],
+        ".f1ewtqcl{box-sizing:border-box;}"
     ]
 });
 const usePreviewSurfaceStyles_unstable = (state)=>{

package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePreviewSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';\nimport type { PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewSurfaceClassNames: SlotClassNames<PreviewSurfaceSlots> = {\n  root: 'fai-PreviewSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    maxWidth: '256px',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  },\n});\n\n/**\n * Apply styling to the PreviewSurface slots based on the state\n */\nexport const usePreviewSurfaceStyles_unstable = (state: PreviewSurfaceState): PreviewSurfaceState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, state.root.className);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  return state;\n};\n"],"names":["previewSurfaceClassNames","root","base","__styles","maxWidth","padding","Byoj8tv","uwmqm3","z189sj","B0ocmuz","state","mergeClasses","usePopoverSurfaceStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;;;;;iCAJ8D;AAIpE,MAAMA,2BAAgE;UAC3EC;AACF;AAEA;;CAEC,SAECC,gBAAMC,IAAAA,yBAAA,EAAA;UACJC;iBACAC;QACFC,SAAA;QACFC,QAAA;QAEAC,QAAA;;QAGAC,SAAO;;;OAKLC;QAAAA;QAAuBC;YAAAA;YAAiF;gBAExGC,GAAAA,CAAAA;;SAEA;KAAA;AACF"}
+{"version":3,"sources":["usePreviewSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';\nimport type { PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewSurfaceClassNames: SlotClassNames<PreviewSurfaceSlots> = {\n  root: 'fai-PreviewSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n    boxSizing: 'border-box',\n  },\n});\n\n/**\n * Apply styling to the PreviewSurface slots based on the state\n */\nexport const usePreviewSurfaceStyles_unstable = (state: PreviewSurfaceState): PreviewSurfaceState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, state.root.className);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  return state;\n};\n"],"names":["previewSurfaceClassNames","root","base","__styles","padding","boxSizing","uwmqm3","z189sj","z8tnut","B7ck84d","state","usePopoverSurfaceStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;;;;;iCAJ8D;AAIpE,MAAMA,2BAAgE;UAC3EC;AACF;AAEA;;CAEC,SAECC,gBAAMC,IAAAA,yBAAA,EAAA;UACJC;iBACAC;QACFC,QAAA;QACFC,QAAA;QAEAC,QAAA;;QAGAC,SAAO;;;OAKLC;QAAAA;YAAAA;YAA8ER;gBAE9ES,GAAAA,CAAAA;;SAEA;QAAA;KAAOD;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-preview",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Preview components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",