@fluentui-copilot/react-preview 0.0.0-nightly-20250708-0404-c05494d1.1 → 0.0.0-nightly-20250708-1433-52f2b6b1.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-preview",
   "entries": [
     {
-      "date": "Tue, 08 Jul 2025 04:12:16 GMT",
-      "tag": "@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-0404-c05494d1.1",
-      "version": "0.0.0-nightly-20250708-0404-c05494d1.1",
+      "date": "Tue, 08 Jul 2025 14:40:39 GMT",
+      "tag": "@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-1433-52f2b6b1.1",
+      "version": "0.0.0-nightly-20250708-1433-52f2b6b1.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # Change Log - @fluentui-copilot/react-preview
 
-This log was last generated on Tue, 08 Jul 2025 04:12:16 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Jul 2025 14:40:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250708-0404-c05494d1.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-0404-c05494d1.1)
+## [0.0.0-nightly-20250708-1433-52f2b6b1.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-1433-52f2b6b1.1)
 
-Tue, 08 Jul 2025 04:12:16 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.8.2..@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-0404-c05494d1.1)
+Tue, 08 Jul 2025 14:40:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-preview_v0.8.2..@fluentui-copilot/react-preview_v0.0.0-nightly-20250708-1433-52f2b6b1.1)
 
 ### Changes
 

package/lib/Preview.js

@@ -1,2 +1 @@
 export { Preview, renderPreview_unstable, usePreview_unstable } from './components/Preview/index';
-//# sourceMappingURL=Preview.js.map

package/lib/PreviewContent.js

@@ -1,2 +1 @@
 export { PreviewContent, previewContentClassNames, renderPreviewContent_unstable, usePreviewContentStyles_unstable, usePreviewContent_unstable } from './components/PreviewContent/index';
-//# sourceMappingURL=PreviewContent.js.map

package/lib/PreviewHeader.js

@@ -1,2 +1 @@
 export { PreviewHeader, previewHeaderClassNames, previewHeaderExtraClassNames, renderPreviewHeader_unstable, usePreviewHeaderStyles_unstable, usePreviewHeader_unstable } from './components/PreviewHeader/index';
-//# sourceMappingURL=PreviewHeader.js.map

package/lib/PreviewMetadata.js

@@ -1,2 +1 @@
 export { PreviewMetadata, previewMetadataClassNames, renderPreviewMetadata_unstable, usePreviewMetadataStyles_unstable, usePreviewMetadata_unstable } from './components/PreviewMetadata/index';
-//# sourceMappingURL=PreviewMetadata.js.map

package/lib/PreviewSurface.js

@@ -1,2 +1 @@
 export { PreviewSurface, previewSurfaceClassNames, renderPreviewSurface_unstable, usePreviewSurfaceStyles_unstable, usePreviewSurface_unstable } from './components/PreviewSurface/index';
-//# sourceMappingURL=PreviewSurface.js.map

package/lib/PreviewTrigger.js

@@ -1,2 +1 @@
 export { PreviewTrigger, renderPreviewTrigger_unstable, usePreviewTrigger_unstable } from './components/PreviewTrigger/index';
-//# sourceMappingURL=PreviewTrigger.js.map

package/lib/components/Preview/Preview.js

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

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

@@ -1,4 +1,3 @@
 /**
  * State used in rendering Preview
- */export {};
-//# sourceMappingURL=Preview.types.js.map
+ */ export { };

package/lib/components/Preview/index.js

@@ -1,4 +1,3 @@
 export { Preview } from './Preview';
 export { renderPreview_unstable } from './renderPreview';
 export { usePreview_unstable } from './usePreview';
-//# sourceMappingURL=index.js.map

package/lib/components/Preview/renderPreview.js

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

package/lib/components/Preview/usePreview.js

@@ -5,11 +5,11 @@ import { useTimeout } from '@fluentui/react-utilities';
 import { addOpenedByHoverPreview, closeAllOpenedByHoverPreviews, removeOpenedByHoverPreview } from '../../utils';
 const POPOVER_MOUSE_DELAY = 250;
 const POPOVER_KEYBOARD_HIDE_DELAY = 0;
-const getDelay = (type, popoverMouseHideDelay) => {
-  if (type === 'focus' || type === 'blur') {
-    return POPOVER_KEYBOARD_HIDE_DELAY;
-  }
-  return popoverMouseHideDelay;
+const getDelay = (type, popoverMouseHideDelay)=>{
+    if (type === 'focus' || type === 'blur') {
+        return POPOVER_KEYBOARD_HIDE_DELAY;
+    }
+    return popoverMouseHideDelay;
 };
 /**
  * Create the state required to render Preview.
@@ -19,248 +19,243 @@ const getDelay = (type, popoverMouseHideDelay) => {
  *
  * @param props - props from this instance of Preview
  * @param ref - reference to root HTMLElement of Preview
- */
-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 [setEnterTimeout, clearEnterTimeout] = useTimeout();
-  const [setLeaveTimeout, clearLeaveTimeout] = useTimeout();
-  const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);
-  const {
-    current: previewInternalState
-  } = React.useRef({
-    openByClick: false,
-    openByHoverOverTrigger: false,
-    openByHoverOverPopover: false,
-    openByKeyboard: false
-  });
-  const triggerMousedOver = React.useRef(false);
-  const isOpen = () => {
-    return previewInternalState.openByClick || previewInternalState.openByHoverOverTrigger || previewInternalState.openByHoverOverPopover || previewInternalState.openByKeyboard;
-  };
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-  const preventDefaultClose = React.useRef(false);
-  let popoverTrigger = undefined;
-  let popoverSurface = undefined;
-  if (children.length === 2) {
-    popoverTrigger = children[0];
-    popoverSurface = children[1];
-  } else if (children.length === 1) {
-    popoverSurface = children[0];
-  }
-  const popoverSurfaceId = useId('preview-surface', popoverSurface === null || popoverSurface === void 0 ? void 0 : popoverSurface.props.id);
-  const closeCallback = () => {
-    previewInternalState.openByClick = false;
-    previewInternalState.openByHoverOverTrigger = false;
-    previewInternalState.openByHoverOverPopover = false;
-    previewInternalState.openByKeyboard = false;
-    setIsPopoverOpen(isOpen());
-    clearEnterTimeout();
-  };
-  React.useEffect(() => {
-    return () => {
-      // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.
-      removeOpenedByHoverPreview(popoverSurfaceId);
-    };
-  }, [popoverSurfaceId]);
-  if (popoverSurface && popoverTrigger) {
-    const handleTriggerTargetEnter = e => {
-      previewInternalState.openByHoverOverTrigger = true;
-      triggerMousedOver.current = true;
-      // We want to disable auto focus only if the popover is being opened by hovering over the trigger
-      if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {
-        setDisableAutoFocus(true);
-        closeAllOpenedByHoverPreviews(popoverSurfaceId);
-      }
-      setEnterTimeout(() => {
-        if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen && isOpen()) {
-          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-            open: true
-          });
-          addOpenedByHoverPreview(popoverSurfaceId, closeCallback);
-        }
-        setIsPopoverOpen(isOpen());
-      }, showDelay);
-    };
-    const handleTriggerTargetLeave = e => {
-      previewInternalState.openByHoverOverTrigger = false;
-      triggerMousedOver.current = false;
-      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) {
-          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-            open: false
-          });
-          removeOpenedByHoverPreview(popoverSurfaceId);
-        }
-      }, 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.
-      preventDefaultClose.current = true;
-      // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.
-      setDisableAutoFocus(false);
-      const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
-      // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.
-      previewInternalState.openByClick = previewInternalState.openByKeyboard ? false : !previewInternalState.openByClick;
-      previewInternalState.openByHoverOverTrigger = false;
-      previewInternalState.openByHoverOverPopover = false;
-      previewInternalState.openByKeyboard = false;
-      // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.
-      if (triggerMousedOver.current) {
-        previewInternalState.openByClick = false;
-        triggerMousedOver.current = false;
-      } else {
-        e.preventDefault();
-      }
-      if (!tmpOpenByHoverOverTrigger) {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-          open: previewInternalState.openByClick
-        });
-      }
-      if (!isOpen()) {
-        removeOpenedByHoverPreview(popoverSurfaceId);
-      }
-      setIsPopoverOpen(isOpen());
+ */ 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 [setEnterTimeout, clearEnterTimeout] = useTimeout();
+    const [setLeaveTimeout, clearLeaveTimeout] = useTimeout();
+    const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);
+    const { current: previewInternalState } = React.useRef({
+        openByClick: false,
+        openByHoverOverTrigger: false,
+        openByHoverOverPopover: false,
+        openByKeyboard: false
+    });
+    const triggerMousedOver = React.useRef(false);
+    const isOpen = ()=>{
+        return previewInternalState.openByClick || previewInternalState.openByHoverOverTrigger || previewInternalState.openByHoverOverPopover || previewInternalState.openByKeyboard;
     };
-    const handleTriggerKeyDown = e => {
-      if (e.key === Enter) {
-        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.
-        setDisableAutoFocus(false);
-        const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
-        // If openByClick is true, then the popover was already opened via click and we always want to close it.
-        previewInternalState.openByKeyboard = previewInternalState.openByClick ? false : !previewInternalState.openByKeyboard;
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const preventDefaultClose = React.useRef(false);
+    let popoverTrigger = undefined;
+    let popoverSurface = undefined;
+    if (children.length === 2) {
+        popoverTrigger = children[0];
+        popoverSurface = children[1];
+    } else if (children.length === 1) {
+        popoverSurface = children[0];
+    }
+    const popoverSurfaceId = useId('preview-surface', popoverSurface === null || popoverSurface === void 0 ? void 0 : popoverSurface.props.id);
+    const closeCallback = ()=>{
         previewInternalState.openByClick = false;
         previewInternalState.openByHoverOverTrigger = false;
         previewInternalState.openByHoverOverPopover = false;
-        if (!tmpOpenByHoverOverTrigger) {
-          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-            open: previewInternalState.openByKeyboard
-          });
-        }
-        if (!isOpen()) {
-          removeOpenedByHoverPreview(popoverSurfaceId);
-        }
+        previewInternalState.openByKeyboard = false;
         setIsPopoverOpen(isOpen());
-      }
+        clearEnterTimeout();
     };
-    const handlePopoverTargetEnter = e => {
-      previewInternalState.openByHoverOverPopover = true;
-      setIsPopoverOpen(isOpen());
-    };
-    const handlePopoverTargetLeave = e => {
-      previewInternalState.openByHoverOverPopover = false;
-      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) {
-          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-            open: false
-          });
-          removeOpenedByHoverPreview(popoverSurfaceId);
+    React.useEffect(()=>{
+        return ()=>{
+            // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.
+            removeOpenedByHoverPreview(popoverSurfaceId);
+        };
+    }, [
+        popoverSurfaceId
+    ]);
+    if (popoverSurface && popoverTrigger) {
+        const handleTriggerTargetEnter = (e)=>{
+            previewInternalState.openByHoverOverTrigger = true;
+            triggerMousedOver.current = true;
+            // We want to disable auto focus only if the popover is being opened by hovering over the trigger
+            if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {
+                setDisableAutoFocus(true);
+                closeAllOpenedByHoverPreviews(popoverSurfaceId);
+            }
+            setEnterTimeout(()=>{
+                if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen && isOpen()) {
+                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                        open: true
+                    });
+                    addOpenedByHoverPreview(popoverSurfaceId, closeCallback);
+                }
+                setIsPopoverOpen(isOpen());
+            }, showDelay);
+        };
+        const handleTriggerTargetLeave = (e)=>{
+            previewInternalState.openByHoverOverTrigger = false;
+            triggerMousedOver.current = false;
+            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) {
+                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                        open: false
+                    });
+                    removeOpenedByHoverPreview(popoverSurfaceId);
+                }
+            }, 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.
+            preventDefaultClose.current = true;
+            // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.
+            setDisableAutoFocus(false);
+            const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
+            // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.
+            previewInternalState.openByClick = previewInternalState.openByKeyboard ? false : !previewInternalState.openByClick;
+            previewInternalState.openByHoverOverTrigger = false;
+            previewInternalState.openByHoverOverPopover = false;
+            previewInternalState.openByKeyboard = false;
+            // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.
+            if (triggerMousedOver.current) {
+                previewInternalState.openByClick = false;
+                triggerMousedOver.current = false;
+            } else {
+                e.preventDefault();
+            }
+            if (!tmpOpenByHoverOverTrigger) {
+                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                    open: previewInternalState.openByClick
+                });
+            }
+            if (!isOpen()) {
+                removeOpenedByHoverPreview(popoverSurfaceId);
+            }
+            setIsPopoverOpen(isOpen());
+        };
+        const handleTriggerKeyDown = (e)=>{
+            if (e.key === Enter) {
+                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.
+                setDisableAutoFocus(false);
+                const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;
+                // If openByClick is true, then the popover was already opened via click and we always want to close it.
+                previewInternalState.openByKeyboard = previewInternalState.openByClick ? false : !previewInternalState.openByKeyboard;
+                previewInternalState.openByClick = false;
+                previewInternalState.openByHoverOverTrigger = false;
+                previewInternalState.openByHoverOverPopover = false;
+                if (!tmpOpenByHoverOverTrigger) {
+                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                        open: previewInternalState.openByKeyboard
+                    });
+                }
+                if (!isOpen()) {
+                    removeOpenedByHoverPreview(popoverSurfaceId);
+                }
+                setIsPopoverOpen(isOpen());
+            }
+        };
+        const handlePopoverTargetEnter = (e)=>{
+            previewInternalState.openByHoverOverPopover = true;
+            setIsPopoverOpen(isOpen());
+        };
+        const handlePopoverTargetLeave = (e)=>{
+            previewInternalState.openByHoverOverPopover = false;
+            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) {
+                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                        open: false
+                    });
+                    removeOpenedByHoverPreview(popoverSurfaceId);
+                }
+            }, getDelay(e.type, hideDelay));
+        };
+        popoverTrigger = React.cloneElement(popoverTrigger, {
+            ...popoverTrigger.props,
+            children: React.cloneElement(popoverTrigger.props.children, {
+                ...popoverTrigger.props.children.props,
+                onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),
+                onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),
+                onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),
+                onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),
+                onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave)
+            })
+        });
+        var _popoverSurface_props_arialabelledby;
+        popoverSurface = React.cloneElement(popoverSurface, {
+            ...popoverSurface.props,
+            'aria-labelledby': (_popoverSurface_props_arialabelledby = popoverSurface.props['aria-labelledby']) !== null && _popoverSurface_props_arialabelledby !== void 0 ? _popoverSurface_props_arialabelledby : popoverSurface.props['aria-label'] ? undefined : popoverSurfaceId,
+            id: popoverSurfaceId,
+            onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),
+            onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),
+            onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter)
+        });
+    }
+    // Hitting Escape key should close the popover if it was opened by hover.
+    // This is necessary to attach to the document because focus is likely not within the trigger or popover.
+    useIsomorphicLayoutEffect(()=>{
+        if (isPopoverOpen) {
+            const onDocumentKeyDown = (e)=>{
+                const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;
+                if (openedByHover && e.key === Escape) {
+                    clearLeaveTimeout();
+                    // We set state back to its default if the Escape key has been pressed
+                    setDisableAutoFocus(true);
+                    closeCallback();
+                    removeOpenedByHoverPreview(popoverSurfaceId);
+                    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+                        open: false
+                    });
+                    e.stopPropagation();
+                }
+            };
+            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
+                capture: true
+            });
+            return ()=>{
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
+                    capture: true
+                });
+            };
+        }
+    }, [
+        targetDocument,
+        isPopoverOpen
+    ]);
+    const onPopoverOpenChange = (e, data)=>{
+        if (!preventDefaultClose.current) {
+            // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.
+            if (!data.open) {
+                clearLeaveTimeout();
+                closeCallback();
+                removeOpenedByHoverPreview(popoverSurfaceId);
+            }
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, data);
         }
-      }, getDelay(e.type, hideDelay));
+        preventDefaultClose.current = false;
     };
-    popoverTrigger = React.cloneElement(popoverTrigger, {
-      ...popoverTrigger.props,
-      children: React.cloneElement(popoverTrigger.props.children, {
-        ...popoverTrigger.props.children.props,
-        onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),
-        onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),
-        onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),
-        onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),
-        onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave)
-      })
-    });
-    var _popoverSurface_props_arialabelledby;
-    popoverSurface = React.cloneElement(popoverSurface, {
-      ...popoverSurface.props,
-      'aria-labelledby': (_popoverSurface_props_arialabelledby = popoverSurface.props['aria-labelledby']) !== null && _popoverSurface_props_arialabelledby !== void 0 ? _popoverSurface_props_arialabelledby : popoverSurface.props['aria-label'] ? undefined : popoverSurfaceId,
-      id: popoverSurfaceId,
-      onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),
-      onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),
-      onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter)
-    });
-  }
-  // Hitting Escape key should close the popover if it was opened by hover.
-  // This is necessary to attach to the document because focus is likely not within the trigger or popover.
-  useIsomorphicLayoutEffect(() => {
-    if (isPopoverOpen) {
-      const onDocumentKeyDown = e => {
-        const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;
-        if (openedByHover && e.key === Escape) {
-          clearLeaveTimeout();
-          // We set state back to its default if the Escape key has been pressed
-          setDisableAutoFocus(true);
-          closeCallback();
-          removeOpenedByHoverPreview(popoverSurfaceId);
-          onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
-            open: false
-          });
-          e.stopPropagation();
+    let resolvedChildren = children;
+    if (popoverSurface) {
+        if (popoverTrigger) {
+            resolvedChildren = [
+                popoverTrigger,
+                popoverSurface
+            ];
+        } else {
+            resolvedChildren = popoverSurface;
         }
-      };
-      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
-        capture: true
-      });
-      return () => {
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
-          capture: true
-        });
-      };
-    }
-  }, [targetDocument, isPopoverOpen]);
-  const onPopoverOpenChange = (e, data) => {
-    if (!preventDefaultClose.current) {
-      // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.
-      if (!data.open) {
-        clearLeaveTimeout();
-        closeCallback();
-        removeOpenedByHoverPreview(popoverSurfaceId);
-      }
-      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, data);
     }
-    preventDefaultClose.current = false;
-  };
-  let resolvedChildren = children;
-  if (popoverSurface) {
-    if (popoverTrigger) {
-      resolvedChildren = [popoverTrigger, popoverSurface];
-    } else {
-      resolvedChildren = popoverSurface;
-    }
-  }
-  const popoverState = usePopover_unstable({
-    ...props,
-    children: resolvedChildren,
-    onOpenChange: onPopoverOpenChange,
-    open: open !== null && open !== void 0 ? open : isPopoverOpen,
-    positioning: typeof positioning === 'string' ? {
-      autoSize: true,
-      ...resolvePositioningShorthand(positioning)
-    } : {
-      autoSize: true,
-      ...positioning
-    },
-    unstable_disableAutoFocus: unstable_disableAutoFocus !== null && unstable_disableAutoFocus !== void 0 ? unstable_disableAutoFocus : disableAutoFocus
-  });
-  return {
-    ...popoverState,
-    isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard
-  };
+    const popoverState = usePopover_unstable({
+        ...props,
+        children: resolvedChildren,
+        onOpenChange: onPopoverOpenChange,
+        open: open !== null && open !== void 0 ? open : isPopoverOpen,
+        positioning: typeof positioning === 'string' ? {
+            autoSize: true,
+            ...resolvePositioningShorthand(positioning)
+        } : {
+            autoSize: true,
+            ...positioning
+        },
+        unstable_disableAutoFocus: unstable_disableAutoFocus !== null && unstable_disableAutoFocus !== void 0 ? unstable_disableAutoFocus : disableAutoFocus
+    });
+    return {
+        ...popoverState,
+        isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard
+    };
 };
-//# sourceMappingURL=usePreview.js.map