@fluentui-copilot/react-preview 0.8.1 → 0.8.3

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

package/lib/components/PreviewContent/PreviewContent.js

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

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

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

package/lib/components/PreviewContent/index.js

@@ -2,4 +2,3 @@ export { PreviewContent } from './PreviewContent';
 export { renderPreviewContent_unstable } from './renderPreviewContent';
 export { usePreviewContent_unstable } from './usePreviewContent';
 export { previewContentClassNames, usePreviewContentStyles_unstable } from './usePreviewContentStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/PreviewContent/renderPreviewContent.js

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

package/lib/components/PreviewContent/usePreviewContent.js

@@ -7,18 +7,16 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
  *
  * @param props - props from this instance of PreviewContent
  * @param ref - reference to root HTMLElement of PreviewContent
- */
-export const usePreviewContent_unstable = (props, ref) => {
-  return {
-    components: {
-      root: 'div'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref,
-      ...props
-    }), {
-      elementType: 'div'
-    })
-  };
+ */ export const usePreviewContent_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
 };
-//# sourceMappingURL=usePreviewContent.js.map

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

@@ -0,0 +1,26 @@
+import { makeResetStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+export const previewContentClassNames = {
+    root: 'fai-PreviewContent'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    color: tokens.colorNeutralForeground3,
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+    rowGap: tokens.spacingVerticalXS,
+    wordBreak: 'break-word',
+    boxSizing: 'border-box',
+    ...typographyStyles.caption1
+});
+/**
+ * Apply styling to the PreviewContent slots based on the state
+ */ export const usePreviewContentStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,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/PreviewHeader/PreviewHeader.js

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

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

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

package/lib/components/PreviewHeader/index.js

@@ -2,4 +2,3 @@ export { PreviewHeader } from './PreviewHeader';
 export { renderPreviewHeader_unstable } from './renderPreviewHeader';
 export { usePreviewHeader_unstable } from './usePreviewHeader';
 export { previewHeaderClassNames, previewHeaderExtraClassNames, usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles.styles';
-//# sourceMappingURL=index.js.map