@fluentui/react-popover 9.12.5 → 9.12.7

package/CHANGELOG.md

@@ -1,26 +1,62 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Thu, 21 Aug 2025 12:20:19 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.12.7)
+
+Thu, 02 Oct 2025 15:07:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.12.6..@fluentui/react-popover_v9.12.7)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-portal to v9.8.3 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-positioning to v9.20.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.12.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.12.6)
+
+Mon, 08 Sep 2025 12:51:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.12.5..@fluentui/react-popover_v9.12.6)
+
+### Patches
+
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-portal to v9.8.2 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-positioning to v9.20.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.12.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.12.5)
 
-Thu, 21 Aug 2025 12:20:19 GMT 
+Thu, 21 Aug 2025 12:25:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.12.4..@fluentui/react-popover_v9.12.5)
 
 ### Patches
 
 - fix: replace deprecated element.ref usages to support react 19 ([PR #35030](https://github.com/microsoft/fluentui/pull/35030) by dmytrokirpa@microsoft.com)
 - docs: Include Positioning Docs Link For positioning props ([PR #35031](https://github.com/microsoft/fluentui/pull/35031) by v.kozlova@gmail.com)
-- Bump @fluentui/react-aria to v9.16.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-portal to v9.8.1 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-positioning to v9.20.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-aria to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-portal to v9.8.1 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-positioning to v9.20.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.12.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.12.4)
 

package/dist/index.d.ts

@@ -6,14 +6,12 @@ import type { ContextSelector } from '@fluentui/react-context-selector';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { JSXElementConstructor } from 'react';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { PositioningVirtualElement } from '@fluentui/react-positioning';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';
-import { ReactElement } from 'react';
 import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -273,12 +271,12 @@ export declare const renderPopover_unstable: (state: PopoverState) => JSXElement
 /**
  * Render the final JSX of PopoverSurface
  */
-export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSXElement;
 
 /**
  * Render the final JSX of PopoverTrigger
  */
-export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => JSXElement | null;
 
 /**
  * Create the state required to render Popover.

package/lib/components/Popover/Popover.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { usePopover_unstable } from './usePopover';
 import { renderPopover_unstable } from './renderPopover';

package/lib/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n\n  return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQJ,oBAAoBG;IAElC,OAAOF,uBAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n\n  return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQJ,oBAAoBG;IAElC,OAAOF,uBAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

package/lib/components/Popover/usePopover.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside, elementContains, useTimeout } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';

package/lib/components/Popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\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 [open, setOpenState] = useOpenState(initialState);\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    (e: OpenPopoverEvents) => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n    disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n  const activateModal = useActivateModal();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    const contentElement = positioningRefs.contentRef.current;\n\n    if (open && contentElement) {\n      const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n      const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n      firstFocusable?.focus();\n\n      if (shouldFocusContainer) {\n        // Modal activation happens automatically when something inside the modal is focused programmatically.\n        // When the container is focused, we need to activate the modal manually.\n        activateModal(contentElement);\n      }\n    }\n  }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  'use no memo';\n\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  'use no memo';\n\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","findFirstFocusable","activateModal","useEffect","unstable_disableAutoFocus","contentElement","current","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\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 [open, setOpenState] = useOpenState(initialState);\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    (e: OpenPopoverEvents) => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n    disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n  const activateModal = useActivateModal();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    const contentElement = positioningRefs.contentRef.current;\n\n    if (open && contentElement) {\n      const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n      const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n      firstFocusable?.focus();\n\n      if (shouldFocusContainer) {\n        // Modal activation happens automatically when something inside the modal is focused programmatically.\n        // When the container is focused, we need to activate the modal manually.\n        activateModal(contentElement);\n      }\n    }\n  }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  'use no memo';\n\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  'use no memo';\n\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","findFirstFocusable","activateModal","useEffect","unstable_disableAutoFocus","contentElement","current","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}

package/lib/components/PopoverSurface/PopoverSurface.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { usePopoverSurface_unstable } from './usePopoverSurface';
 import { renderPopoverSurface_unstable } from './renderPopoverSurface';

package/lib/components/PopoverSurface/PopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n  return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n  return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/PopoverSurface/renderPopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n  assertSlots<PopoverSurfaceSlots>(state);\n\n  const surface = (\n    <state.root>\n      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n      {state.root.children}\n    </state.root>\n  );\n\n  if (state.inline) {\n    return surface;\n  }\n\n  return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,yBAAyB;AAGhD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,MAAMC,wBACJ,MAACD,MAAME,IAAI;;YACRF,MAAMG,SAAS,kBAAI,KAACC;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,qBAAO,KAACH;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n  assertSlots<PopoverSurfaceSlots>(state);\n\n  const surface = (\n    <state.root>\n      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n      {state.root.children}\n    </state.root>\n  );\n\n  if (state.inline) {\n    return surface;\n  }\n\n  return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAGhD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,MAAMC,wBACJ,MAACD,MAAME,IAAI;;YACRF,MAAMG,SAAS,kBAAI,KAACC;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,qBAAO,KAACH;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}

package/lib/components/PopoverSurface/usePopoverSurface.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';

package/lib/components/PopoverSurface/usePopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const { modalAttributes } = useModalAttributes({\n    trapFocus,\n    legacyTrapFocus: !inertTrapFocus,\n    alwaysFocusable: !trapFocus,\n  });\n\n  const state: PopoverSurfaceState = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n        role: trapFocus ? 'dialog' : 'group',\n        'aria-modal': trapFocus ? true : undefined,\n        ...modalAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      e.preventDefault();\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,uBAAuB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,aAAaJ,2BAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,cAAcN,2BAA2BK,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,UAAUP,2BAA2BK,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,YAAYR,2BAA2BK,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWT,2BAA2BK,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,OAAOV,2BAA2BK,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,YAAYX,2BAA2BK,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,aAAaZ,2BAA2BK,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYb,2BAA2BK,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,iBAAiBd,2BAA2BK,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,SAASf,2BAA2BK,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,GAAGjB,mBAAmB;QAC7Cc;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMM,QAA6B;QACjCJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FO,KAAKN,cAAcM,KAAKC;YACxBmB,MAAMV,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOW;YACjC,GAAGR,eAAe;YAClB,GAAGd,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAL,iCAAAA,2CAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAH,iCAAAA,2CAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI5B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI4B,EAAEC,GAAG,KAAK,cAAY7B,sBAAAA,WAAW8B,OAAO,cAAlB9B,0CAAAA,oBAAoB+B,QAAQ,CAACH,EAAEI,MAAM,IAAqB;YAClFJ,EAAEK,cAAc;YAChB9B,QAAQyB,GAAG;QACb;QAEAD,8BAAAA,wCAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const { modalAttributes } = useModalAttributes({\n    trapFocus,\n    legacyTrapFocus: !inertTrapFocus,\n    alwaysFocusable: !trapFocus,\n  });\n\n  const state: PopoverSurfaceState = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n        role: trapFocus ? 'dialog' : 'group',\n        'aria-modal': trapFocus ? true : undefined,\n        ...modalAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      e.preventDefault();\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,0BAA0B,QAAQ,uBAAuB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,aAAaJ,2BAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,cAAcN,2BAA2BK,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,UAAUP,2BAA2BK,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,YAAYR,2BAA2BK,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWT,2BAA2BK,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,OAAOV,2BAA2BK,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,YAAYX,2BAA2BK,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,aAAaZ,2BAA2BK,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYb,2BAA2BK,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,iBAAiBd,2BAA2BK,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,SAASf,2BAA2BK,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,GAAGjB,mBAAmB;QAC7Cc;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMM,QAA6B;QACjCJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FO,KAAKN,cAAcM,KAAKC;YACxBmB,MAAMV,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOW;YACjC,GAAGR,eAAe;YAClB,GAAGd,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAL,iCAAAA,2CAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAH,iCAAAA,2CAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI5B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI4B,EAAEC,GAAG,KAAK,cAAY7B,sBAAAA,WAAW8B,OAAO,cAAlB9B,0CAAAA,oBAAoB+B,QAAQ,CAACH,EAAEI,MAAM,IAAqB;YAClFJ,EAAEK,cAAc;YAChB9B,QAAQyB,GAAG;QACb;QAEAD,8BAAAA,wCAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}

package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';
 import { tokens, typographyStyles } from '@fluentui/react-theme';

package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","k","m","t","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n    root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n    small: 6,\n    medium: 8,\n    large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusMedium,\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1,\n        ...createSlideStyles(10),\n        // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n        filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n    },\n    inline: {\n        // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n        // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n        zIndex: 1\n    },\n    inverted: {\n        backgroundColor: tokens.colorNeutralBackgroundStatic,\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    smallPadding: {\n        padding: '12px'\n    },\n    mediumPadding: {\n        padding: '16px'\n    },\n    largePadding: {\n        padding: '20px'\n    },\n    smallArrow: createArrowHeightStyles(arrowHeights.small),\n    mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n    arrow: createArrowStyles({\n        arrowHeight: undefined\n    })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n    state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","k","m","t","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n    root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n    small: 6,\n    medium: 8,\n    large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusMedium,\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1,\n        ...createSlideStyles(10),\n        // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n        filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n    },\n    inline: {\n        // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n        // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n        zIndex: 1\n    },\n    inverted: {\n        backgroundColor: tokens.colorNeutralBackgroundStatic,\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    smallPadding: {\n        padding: '12px'\n    },\n    mediumPadding: {\n        padding: '16px'\n    },\n    largePadding: {\n        padding: '20px'\n    },\n    smallArrow: createArrowHeightStyles(arrowHeights.small),\n    mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n    arrow: createArrowStyles({\n        arrowHeight: undefined\n    })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n    state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';
 import { tokens, typographyStyles } from '@fluentui/react-theme';

package/lib/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n  root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n\n    // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  inline: {\n    // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    zIndex: 1,\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  smallPadding: { padding: '12px' },\n\n  mediumPadding: { padding: '16px' },\n\n  largePadding: { padding: '20px' },\n\n  smallArrow: createArrowHeightStyles(arrowHeights.small),\n  mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n  arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    popoverSurfaceClassNames.root,\n    styles.root,\n    state.inline && styles.inline,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.appearance === 'inverted' && styles.inverted,\n    state.appearance === 'brand' && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,iBAAiB,QAAQ,8BAA8B;AAC5G,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAKjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,eAA4C;IACvDC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYb,WAAW;IAC3BQ,MAAM;QACJM,OAAOT,OAAOU,uBAAuB;QACrCC,iBAAiBX,OAAOY,uBAAuB;QAC/CC,cAAcb,OAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,OAAOgB,sBAAsB,EAAE;QACpD,GAAGf,iBAAiBgB,KAAK;QACzB,GAAGlB,kBAAkB,GAAG;QAExB,wFAAwF;QACxFmB,QACE,CAAC,oBAAoB,EAAElB,OAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,OAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,OAAOwB,4BAA4B;QACpDf,OAAOT,OAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,OAAO2B,oBAAoB;QAC5ClB,OAAOT,OAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,YAAYpC,wBAAwBO,aAAaC,KAAK;IACtD6B,kBAAkBrC,wBAAwBO,aAAaE,MAAM;IAC7D6B,OAAOrC,kBAAkB;QAAEsC,aAAaC;IAAU;AACpD;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,GAAG7C,aACrBM,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,GAAGhD,aACrB4C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n  root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n\n    // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  inline: {\n    // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    zIndex: 1,\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  smallPadding: { padding: '12px' },\n\n  mediumPadding: { padding: '16px' },\n\n  largePadding: { padding: '20px' },\n\n  smallArrow: createArrowHeightStyles(arrowHeights.small),\n  mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n  arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    popoverSurfaceClassNames.root,\n    styles.root,\n    state.inline && styles.inline,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.appearance === 'inverted' && styles.inverted,\n    state.appearance === 'brand' && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,iBAAiB,QAAQ,8BAA8B;AAC5G,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAKjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,eAA4C;IACvDC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYb,WAAW;IAC3BQ,MAAM;QACJM,OAAOT,OAAOU,uBAAuB;QACrCC,iBAAiBX,OAAOY,uBAAuB;QAC/CC,cAAcb,OAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,OAAOgB,sBAAsB,EAAE;QACpD,GAAGf,iBAAiBgB,KAAK;QACzB,GAAGlB,kBAAkB,GAAG;QAExB,wFAAwF;QACxFmB,QACE,CAAC,oBAAoB,EAAElB,OAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,OAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,OAAOwB,4BAA4B;QACpDf,OAAOT,OAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,OAAO2B,oBAAoB;QAC5ClB,OAAOT,OAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,YAAYpC,wBAAwBO,aAAaC,KAAK;IACtD6B,kBAAkBrC,wBAAwBO,aAAaE,MAAM;IAC7D6B,OAAOrC,kBAAkB;QAAEsC,aAAaC;IAAU;AACpD;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,GAAG7C,aACrBM,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,GAAGhD,aACrB4C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}

package/lib/components/PopoverTrigger/PopoverTrigger.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { usePopoverTrigger_unstable } from './usePopoverTrigger';
 import { renderPopoverTrigger_unstable } from './renderPopoverTrigger';

package/lib/components/PopoverTrigger/PopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n  const state = usePopoverTrigger_unstable(props);\n\n  return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AAIvE;;CAEC,GACD,OAAO,MAAMC,iBAAgDC,CAAAA;IAC3D,MAAMC,QAAQJ,2BAA2BG;IAEzC,OAAOF,8BAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}
+{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n  const state = usePopoverTrigger_unstable(props);\n\n  return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AAIvE;;CAEC,GACD,OAAO,MAAMC,iBAAgDC,CAAAA;IAC3D,MAAMC,QAAQJ,2BAA2BG;IAEzC,OAAOF,8BAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}

package/lib/components/PopoverTrigger/renderPopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"sourcesContent":["import type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState) => {\n  return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAEA;;CAEC,GACD,OAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState): JSXElement | null => {\n  return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAGA;;CAEC,GACD,OAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}

package/lib/components/PopoverTrigger/usePopoverTrigger.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, mergeCallbacks, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';

package/lib/components/PopoverTrigger/usePopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/usePopoverTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  mergeCallbacks,\n  useMergedRefs,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n  const child = getTriggerChild(children);\n\n  const open = usePopoverContext_unstable(context => context.open);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      toggleOpen(e);\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === Escape && open && !e.isDefaultPrevented()) {\n      setOpen(e, false);\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: Dialog, Popover, Menu and Tooltip\n      e.preventDefault();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n  };\n\n  const contextMenuProps = {\n    ...triggerAttributes,\n    'aria-expanded': `${open}`,\n    ...child?.props,\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    ref: useMergedRefs(triggerRef, getReactElementRef(child)),\n  } as const;\n\n  const triggerChildProps = {\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  };\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      props.children,\n      useARIAButtonProps(\n        child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n        openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n      ),\n    ),\n  };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","isDefaultPrevented","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"mappings":"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"}
+{"version":3,"sources":["../src/components/PopoverTrigger/usePopoverTrigger.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  mergeCallbacks,\n  useMergedRefs,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n  const child = getTriggerChild(children);\n\n  const open = usePopoverContext_unstable(context => context.open);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      toggleOpen(e);\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === Escape && open && !e.isDefaultPrevented()) {\n      setOpen(e, false);\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: Dialog, Popover, Menu and Tooltip\n      e.preventDefault();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n  };\n\n  const contextMenuProps = {\n    ...triggerAttributes,\n    'aria-expanded': `${open}`,\n    ...child?.props,\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    ref: useMergedRefs(triggerRef, getReactElementRef(child)),\n  } as const;\n\n  const triggerChildProps = {\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  };\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      props.children,\n      useARIAButtonProps(\n        child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n        openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n      ),\n    ),\n  };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","isDefaultPrevented","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"mappings":"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"}

package/lib/popoverContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const PopoverContext = createContext(undefined);
 const popoverContextDefaultValue = {

package/lib/popoverContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n  undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n  open: false,\n  setOpen: () => null,\n  toggleOpen: () => null,\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  arrowRef: { current: null },\n  openOnContext: false,\n  openOnHover: false,\n  size: 'medium' as const,\n  trapFocus: false,\n  inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n  PopoverState,\n  | 'open'\n  | 'toggleOpen'\n  | 'setOpen'\n  | 'triggerRef'\n  | 'contentRef'\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'mountNode'\n  | 'withArrow'\n  | 'arrowRef'\n  | 'size'\n  | 'appearance'\n  | 'trapFocus'\n  | 'inertTrapFocus'\n  | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n  useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,iBAA+CF,cAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEA,OAAO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n  undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n  open: false,\n  setOpen: () => null,\n  toggleOpen: () => null,\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  arrowRef: { current: null },\n  openOnContext: false,\n  openOnHover: false,\n  size: 'medium' as const,\n  trapFocus: false,\n  inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n  PopoverState,\n  | 'open'\n  | 'toggleOpen'\n  | 'setOpen'\n  | 'triggerRef'\n  | 'contentRef'\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'mountNode'\n  | 'withArrow'\n  | 'arrowRef'\n  | 'size'\n  | 'appearance'\n  | 'trapFocus'\n  | 'inertTrapFocus'\n  | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n  useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,iBAA+CF,cAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEA,OAAO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBvD,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CnB,mBAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n\n  return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;AAMlD,MAAMG,UAAkCC,CAAAA;IAC7C,MAAMC,YAAQJ,+BAAAA,EAAoBG;IAElC,WAAOF,qCAAAA,EAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n\n  return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["React","usePopover_unstable","renderPopover_unstable","Popover","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;AAMlD,MAAMG,UAAkCC,CAAAA;IAC7C,MAAMC,YAAQJ,+BAAAA,EAAoBG;IAElC,WAAOF,qCAAAA,EAAuBG;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

package/lib-commonjs/components/Popover/usePopover.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\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 [open, setOpenState] = useOpenState(initialState);\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    (e: OpenPopoverEvents) => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n    disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n  const activateModal = useActivateModal();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    const contentElement = positioningRefs.contentRef.current;\n\n    if (open && contentElement) {\n      const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n      const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n      firstFocusable?.focus();\n\n      if (shouldFocusContainer) {\n        // Modal activation happens automatically when something inside the modal is focused programmatically.\n        // When the container is focused, we need to activate the modal manually.\n        activateModal(contentElement);\n      }\n    }\n  }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  'use no memo';\n\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  'use no memo';\n\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","findFirstFocusable","activateModal","useEffect","unstable_disableAutoFocus","contentElement","current","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Popover/usePopover.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n  elementContains,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\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 [open, setOpenState] = useOpenState(initialState);\n\n  const [setOpenTimeout, clearOpenTimeout] = useTimeout();\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearOpenTimeout();\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    (e: OpenPopoverEvents) => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n    disabledFocusOnIframe: !(props.closeOnIframeFocus ?? true),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n  const activateModal = useActivateModal();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    const contentElement = positioningRefs.contentRef.current;\n\n    if (open && contentElement) {\n      const shouldFocusContainer = !isNaN(contentElement.getAttribute('tabIndex') ?? undefined);\n      const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);\n\n      firstFocusable?.focus();\n\n      if (shouldFocusContainer) {\n        // Modal activation happens automatically when something inside the modal is focused programmatically.\n        // When the container is focused, we need to activate the modal manually.\n        activateModal(contentElement);\n      }\n    }\n  }, [findFirstFocusable, activateModal, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus),\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  'use no memo';\n\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  'use no memo';\n\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"],"names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","elementContains","useTimeout","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","useFocusFinders","useActivateModal","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeout","clearOpenTimeout","setOpen","e","shouldOpen","Event","persist","type","mouseLeaveDelay","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","disabledFocusOnIframe","closeOnIframeFocus","closeOnScroll","openOnContext","findFirstFocusable","activateModal","useEffect","unstable_disableAutoFocus","contentElement","current","shouldFocusContainer","isNaN","getAttribute","firstFocusable","focus","inertTrapFocus","legacyTrapFocus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n  return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAKvE,uBAAMA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,iDAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n  return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n  assertSlots<PopoverSurfaceSlots>(state);\n\n  const surface = (\n    <state.root>\n      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n      {state.root.children}\n    </state.root>\n  );\n\n  if (state.inline) {\n    return surface;\n  }\n\n  return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":";;;;+BASaE;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;6BACjC,yBAAyB;AAMzC,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,MAAMC,UAAAA,WAAAA,OACJ,gBAAA,EAACD,MAAME,IAAI,EAAA;;YACRF,MAAMG,SAAS,IAAA,WAAA,OAAI,eAAA,EAACC,OAAAA;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,OAAA,WAAA,OAAO,eAAA,EAACH,mBAAAA,EAAAA;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n  assertSlots<PopoverSurfaceSlots>(state);\n\n  const surface = (\n    <state.root>\n      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n      {state.root.children}\n    </state.root>\n  );\n\n  if (state.inline) {\n    return surface;\n  }\n\n  return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAEjC,yBAAyB;AAMzC,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,MAAMC,UAAAA,WAAAA,OACJ,gBAAA,EAACD,MAAME,IAAI,EAAA;;YACRF,MAAMG,SAAS,IAAA,WAAA,OAAI,eAAA,EAACC,OAAAA;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,OAAA,WAAA,OAAO,eAAA,EAACH,mBAAAA,EAAAA;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const { modalAttributes } = useModalAttributes({\n    trapFocus,\n    legacyTrapFocus: !inertTrapFocus,\n    alwaysFocusable: !trapFocus,\n  });\n\n  const state: PopoverSurfaceState = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n        role: trapFocus ? 'dialog' : 'group',\n        'aria-modal': trapFocus ? true : undefined,\n        ...modalAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      e.preventDefault();\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":";;;;+BAeaM;;;;;;;iEAfU,QAAQ;gCAC+B,4BAA4B;8BACvD,0BAA0B;gCAClB,uBAAuB;AAY3D,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,iBAAaJ,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,kBAAcN,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,cAAUP,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,gBAAYR,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWT,8CAAAA,EAA2BK,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,WAAOV,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,gBAAYX,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,iBAAaZ,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,gBAAYb,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,qBAAiBd,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,aAASf,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,OAAGjB,gCAAAA,EAAmB;QAC7Cc;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMM,QAA6B;QACjCJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,oBAAAA,CAAKwB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FO,SAAKN,6BAAAA,EAAcM,KAAKC;YACxBmB,MAAMV,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOW;YACjC,GAAGR,eAAe;YAClB,GAAGd,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAL,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAH,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI5B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI4B,EAAEC,GAAG,KAAK,YAAA,CAAA,CAAY7B,sBAAAA,WAAW8B,OAAAA,AAAO,MAAA,QAAlB9B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoB+B,QAAQ,CAACH,EAAEI,OAAM,GAAqB;YAClFJ,EAAEK,cAAc;YAChB9B,QAAQyB,GAAG;QACb;QAEAD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const inertTrapFocus = usePopoverContext_unstable(context => context.inertTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const { modalAttributes } = useModalAttributes({\n    trapFocus,\n    legacyTrapFocus: !inertTrapFocus,\n    alwaysFocusable: !trapFocus,\n  });\n\n  const state: PopoverSurfaceState = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `contentRef` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,\n        role: trapFocus ? 'dialog' : 'group',\n        'aria-modal': trapFocus ? true : undefined,\n        ...modalAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      e.preventDefault();\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useModalAttributes","usePopoverContext_unstable","usePopoverSurface_unstable","props","ref","contentRef","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","inertTrapFocus","inline","modalAttributes","legacyTrapFocus","alwaysFocusable","state","components","root","always","role","undefined","elementType","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","preventDefault"],"mappings":"AAAA;;;;;+BAiBaM;;;;;;;iEAfU,QAAQ;gCAC+B,4BAA4B;8BACvD,0BAA0B;gCAClB,uBAAuB;AAY3D,mCAAmC,CACxCC,OACAC;IAEA,MAAMC,iBAAaJ,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,kBAAcN,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,cAAUP,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,gBAAYR,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,eAAWT,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,WAAOV,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,gBAAYX,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,iBAAaZ,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYb,8CAAAA,EAA2BK,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,qBAAiBd,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQS,cAAc;IACnF,MAAMC,aAASf,0CAAAA,EAA2BK,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EAAEC,eAAe,EAAE,OAAGjB,gCAAAA,EAAmB;QAC7Cc;QACAI,iBAAiB,CAACH;QAClBI,iBAAiB,CAACL;IACpB;IAEA,MAAMM,QAA6B;QACjCJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,oBAAAA,CAAKwB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,mFAAmF;YACnF,4FAA4F;YAC5FO,SAAKN,6BAAAA,EAAcM,KAAKC;YACxBmB,MAAMV,YAAY,WAAW;YAC7B,cAAcA,YAAY,OAAOW;YACjC,GAAGR,eAAe;YAClB,GAAGd,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;IAEzB;IAEA,MAAM,EACJC,cAAcC,oBAAoB,EAClCC,cAAcC,oBAAoB,EAClCC,WAAWC,iBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAG,CAACM;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAL,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBK;IACzB;IAEAb,MAAME,IAAI,CAACO,YAAY,GAAG,CAACI;QACzB,IAAI1B,aAAa;YACfC,QAAQyB,GAAG;QACb;QAEAH,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBG;IACzB;IAEAb,MAAME,IAAI,CAACS,SAAS,GAAG,CAACE;YAGI5B;QAF1B,8DAA8D;QAC9D,mHAAmH;QACnH,IAAI4B,EAAEC,GAAG,KAAK,YAAA,CAAA,CAAY7B,sBAAAA,WAAW8B,OAAAA,AAAO,MAAA,QAAlB9B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoB+B,QAAQ,CAACH,EAAEI,OAAM,GAAqB;YAClFJ,EAAEK,cAAc;YAChB9B,QAAQyB,GAAG;QACb;QAEAD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBC;IACtB;IAEA,OAAOb;AACT,EAAE"}

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n    root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n    small: 6,\n    medium: 8,\n    large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusMedium,\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1,\n        ...createSlideStyles(10),\n        // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n        filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n    },\n    inline: {\n        // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n        // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n        zIndex: 1\n    },\n    inverted: {\n        backgroundColor: tokens.colorNeutralBackgroundStatic,\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    smallPadding: {\n        padding: '12px'\n    },\n    mediumPadding: {\n        padding: '16px'\n    },\n    largePadding: {\n        padding: '20px'\n    },\n    smallArrow: createArrowHeightStyles(arrowHeights.small),\n    mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n    arrow: createArrowStyles({\n        arrowHeight: undefined\n    })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n    state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n    return state;\n};\n"],"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","k","m","t","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"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"}
+{"version":3,"sources":["usePopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n    root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n    small: 6,\n    medium: 8,\n    large: 8\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusMedium,\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        ...typographyStyles.body1,\n        ...createSlideStyles(10),\n        // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n        filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`\n    },\n    inline: {\n        // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n        // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n        zIndex: 1\n    },\n    inverted: {\n        backgroundColor: tokens.colorNeutralBackgroundStatic,\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    smallPadding: {\n        padding: '12px'\n    },\n    mediumPadding: {\n        padding: '16px'\n    },\n    largePadding: {\n        padding: '20px'\n    },\n    smallArrow: createArrowHeightStyles(arrowHeights.small),\n    mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n    arrow: createArrowStyles({\n        arrowHeight: undefined\n    })\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */ export const usePopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n    state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n    return state;\n};\n"],"names":["__styles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","sj55zd","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","B93otf3","vin17d","Ezkn3b","nyiy2g","swvrvq","Bkovbt3","hgjdhn","fsy9dk","B3ogreh","jv49x5","Bk7o48c","Bv12yb3","z0t1cu","Bks05zx","Bvtglag","Bhu2qc9","inline","Bj3rh1h","inverted","brand","smallPadding","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mediumPadding","largePadding","smallArrow","rhnwrx","Bdy53xb","mediumLargeArrow","arrow","B7ck84d","qhf8xq","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","k","m","t","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"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"}

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n  root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n\n    // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  inline: {\n    // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    zIndex: 1,\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  smallPadding: { padding: '12px' },\n\n  mediumPadding: { padding: '16px' },\n\n  largePadding: { padding: '20px' },\n\n  smallArrow: createArrowHeightStyles(arrowHeights.small),\n  mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n  arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    popoverSurfaceClassNames.root,\n    styles.root,\n    state.inline && styles.inline,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.appearance === 'inverted' && styles.inverted,\n    state.appearance === 'brand' && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":";;;;;;;;;;;IAWaS,YAAAA;;;IAJAF,wBAAAA;;;IA0DAoC,gCAAAA;;;;uBAjE4B,iBAAiB;kCACoB,8BAA8B;4BACnE,wBAAwB;AAK1D,iCAAsE;IAC3EnC,MAAM;AACR,EAAE;AAEK,qBAAkD;IACvDE,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYb,iBAAAA,EAAW;IAC3BQ,MAAM;QACJM,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,iBAAiBX,kBAAAA,CAAOY,uBAAuB;QAC/CC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,sBAAsB,EAAE;QACpD,GAAGf,4BAAAA,CAAiBgB,KAAK;QACzB,OAAGlB,mCAAAA,EAAkB,GAAG;QAExB,wFAAwF;QACxFmB,QACE,CAAC,oBAAoB,EAAElB,kBAAAA,CAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,kBAAAA,CAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,kBAAAA,CAAOwB,4BAA4B;QACpDf,OAAOT,kBAAAA,CAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,kBAAAA,CAAO2B,oBAAoB;QAC5ClB,OAAOT,kBAAAA,CAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,gBAAYpC,yCAAAA,EAAwBO,aAAaC,KAAK;IACtD6B,sBAAkBrC,yCAAAA,EAAwBO,aAAaE,MAAM;IAC7D6B,WAAOrC,mCAAAA,EAAkB;QAAEsC,aAAaC;IAAU;AACpD;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,OAAG7C,mBAAAA,EACrBM,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,OAAGhD,mBAAAA,EACrB4C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}
+{"version":3,"sources":["../src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n  root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    ...typographyStyles.body1,\n    ...createSlideStyles(10),\n\n    // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 8px 16px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  inline: {\n    // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    zIndex: 1,\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  smallPadding: { padding: '12px' },\n\n  mediumPadding: { padding: '16px' },\n\n  largePadding: { padding: '20px' },\n\n  smallArrow: createArrowHeightStyles(arrowHeights.small),\n  mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n  arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    popoverSurfaceClassNames.root,\n    styles.root,\n    state.inline && styles.inline,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.appearance === 'inverted' && styles.inverted,\n    state.appearance === 'brand' && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowHeightStyles","createArrowStyles","createSlideStyles","tokens","typographyStyles","popoverSurfaceClassNames","root","arrowHeights","small","medium","large","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusMedium","border","colorTransparentStroke","body1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","inline","zIndex","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","brand","colorBrandBackground","colorNeutralForegroundOnBrand","smallPadding","padding","mediumPadding","largePadding","smallArrow","mediumLargeArrow","arrow","arrowHeight","undefined","usePopoverSurfaceStyles_unstable","state","styles","className","size","appearance","arrowClassName"],"mappings":"AAAA;;;;;;;;;;;;IAaaS,YAAAA;;;4BAJAF;;;IA0DAoC,gCAAAA;;;;uBAjE4B,iBAAiB;kCACoB,8BAA8B;4BACnE,wBAAwB;AAK1D,MAAMpC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEK,qBAAkD;IACvDE,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYb,iBAAAA,EAAW;IAC3BQ,MAAM;QACJM,OAAOT,kBAAAA,CAAOU,uBAAuB;QACrCC,iBAAiBX,kBAAAA,CAAOY,uBAAuB;QAC/CC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,sBAAsB,EAAE;QACpD,GAAGf,4BAAAA,CAAiBgB,KAAK;QACzB,OAAGlB,mCAAAA,EAAkB,GAAG;QAExB,wFAAwF;QACxFmB,QACE,CAAC,oBAAoB,EAAElB,kBAAAA,CAAOmB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,uBAAuB,EAAEnB,kBAAAA,CAAOoB,qBAAqB,CAAC,CAAC,CAAC;IAC7D;IAEAC,QAAQ;QACN,iHAAiH;QACjH,0GAA0G;QAC1GC,QAAQ;IACV;IAEAC,UAAU;QACRZ,iBAAiBX,kBAAAA,CAAOwB,4BAA4B;QACpDf,OAAOT,kBAAAA,CAAOyB,oCAAoC;IACpD;IAEAC,OAAO;QACLf,iBAAiBX,kBAAAA,CAAO2B,oBAAoB;QAC5ClB,OAAOT,kBAAAA,CAAO4B,6BAA6B;IAC7C;IAEAC,cAAc;QAAEC,SAAS;IAAO;IAEhCC,eAAe;QAAED,SAAS;IAAO;IAEjCE,cAAc;QAAEF,SAAS;IAAO;IAEhCG,gBAAYpC,yCAAAA,EAAwBO,aAAaC,KAAK;IACtD6B,sBAAkBrC,yCAAAA,EAAwBO,aAAaE,MAAM;IAC7D6B,WAAOrC,mCAAAA,EAAkB;QAAEsC,aAAaC;IAAU;AACpD;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAAShC;IACf+B,MAAMpC,IAAI,CAACsC,SAAS,OAAG7C,mBAAAA,EACrBM,yBAAyBC,IAAI,EAC7BqC,OAAOrC,IAAI,EACXoC,MAAMlB,MAAM,IAAImB,OAAOnB,MAAM,EAC7BkB,MAAMG,IAAI,KAAK,WAAWF,OAAOX,YAAY,EAC7CU,MAAMG,IAAI,KAAK,YAAYF,OAAOT,aAAa,EAC/CQ,MAAMG,IAAI,KAAK,WAAWF,OAAOR,YAAY,EAC7CO,MAAMI,UAAU,KAAK,cAAcH,OAAOjB,QAAQ,EAClDgB,MAAMI,UAAU,KAAK,WAAWH,OAAOd,KAAK,EAC5Ca,MAAMpC,IAAI,CAACsC,SAAS;IAGtBF,MAAMK,cAAc,OAAGhD,mBAAAA,EACrB4C,OAAOL,KAAK,EACZI,MAAMG,IAAI,KAAK,UAAUF,OAAOP,UAAU,GAAGO,OAAON,gBAAgB;IAGtE,OAAOK;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n  const state = usePopoverTrigger_unstable(props);\n\n  return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;AAOhE,MAAMG,iBAAgDC,CAAAA;IAC3D,MAAMC,YAAQJ,6CAAAA,EAA2BG;IAEzC,WAAOF,mDAAAA,EAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}
+{"version":3,"sources":["../src/components/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverTrigger_unstable } from './usePopoverTrigger';\nimport { renderPopoverTrigger_unstable } from './renderPopoverTrigger';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\nimport type { PopoverTriggerProps } from './PopoverTrigger.types';\n\n/**\n * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.\n */\nexport const PopoverTrigger: React.FC<PopoverTriggerProps> = props => {\n  const state = usePopoverTrigger_unstable(props);\n\n  return renderPopoverTrigger_unstable(state);\n};\n\nPopoverTrigger.displayName = 'PopoverTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(PopoverTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","usePopoverTrigger_unstable","renderPopoverTrigger_unstable","PopoverTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;AAOhE,MAAMG,iBAAgDC,CAAAA;IAC3D,MAAMC,YAAQJ,6CAAAA,EAA2BG;IAEzC,WAAOF,mDAAAA,EAA8BG;AACvC,EAAE;AAEFF,eAAeG,WAAW,GAAG;AAC7B,6FAA6F;AAC5FH,eAA0CI,wBAAwB,GAAG"}

package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"sourcesContent":["import type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState) => {\n  return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAEA;;CAEC,GACD;;;;;;;;;;AAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/PopoverTrigger/renderPopoverTrigger.tsx"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Render the final JSX of PopoverTrigger\n */\nexport const renderPopoverTrigger_unstable = (state: PopoverTriggerState): JSXElement | null => {\n  return state.children;\n};\n"],"names":["renderPopoverTrigger_unstable","state","children"],"mappings":"AAGA;;CAEC,GACD;;;;;;;;;;AAAO,MAAMA,gCAAgC,CAACC;IAC5C,OAAOA,MAAMC,QAAQ;AACvB,EAAE"}

package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PopoverTrigger/usePopoverTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  mergeCallbacks,\n  useMergedRefs,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n  const child = getTriggerChild(children);\n\n  const open = usePopoverContext_unstable(context => context.open);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      toggleOpen(e);\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === Escape && open && !e.isDefaultPrevented()) {\n      setOpen(e, false);\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: Dialog, Popover, Menu and Tooltip\n      e.preventDefault();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n  };\n\n  const contextMenuProps = {\n    ...triggerAttributes,\n    'aria-expanded': `${open}`,\n    ...child?.props,\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    ref: useMergedRefs(triggerRef, getReactElementRef(child)),\n  } as const;\n\n  const triggerChildProps = {\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  };\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      props.children,\n      useARIAButtonProps(\n        child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n        openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n      ),\n    ),\n  };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","isDefaultPrevented","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"mappings":";;;;+BAuBaW;;;;;;;iEAvBU,QAAQ;gCAQxB,4BAA4B;8BACA,0BAA0B;gCAClB,uBAAuB;2BAE/B,uBAAuB;8BACnC,0BAA0B;AAU1C,mCAAmC,CAACC;IACzC,MAAM,EAAEC,QAAQ,EAAEC,2BAA2B,KAAK,EAAE,GAAGF;IACvD,MAAMG,YAAQb,+BAAAA,EAAgBW;IAE9B,MAAMG,WAAOR,0CAAAA,EAA2BS,CAAAA,UAAWA,QAAQD,IAAI;IAC/D,MAAME,cAAUV,0CAAAA,EAA2BS,CAAAA,UAAWA,QAAQC,OAAO;IACrE,MAAMC,iBAAaX,0CAAAA,EAA2BS,CAAAA,UAAWA,QAAQE,UAAU;IAC3E,MAAMC,iBAAaZ,0CAAAA,EAA2BS,CAAAA,UAAWA,QAAQG,UAAU;IAC3E,MAAMC,cAAcb,8CAAAA,EAA2BS,CAAAA,UAAWA,QAAQI,WAAW;IAC7E,MAAMC,oBAAgBd,0CAAAA,EAA2BS,CAAAA,UAAWA,QAAQK,aAAa;IACjF,MAAM,EAAEC,iBAAiB,EAAE,OAAGhB,gCAAAA;IAE9B,MAAMiB,gBAAgB,CAACC;QACrB,IAAIH,eAAe;YACjBG,EAAEC,cAAc;YAChBR,QAAQO,GAAG;QACb;IACF;IAEA,MAAME,UAAU,CAACF;QACf,IAAI,CAACH,eAAe;YAClBH,WAAWM;QACb;IACF;IAEA,MAAMG,YAAY,CAACH;QACjB,IAAIA,EAAEI,GAAG,KAAKnB,oBAAAA,IAAUM,QAAQ,CAACS,EAAEK,kBAAkB,IAAI;YACvDZ,QAAQO,GAAG;YACX,qFAAqF;YACrF,yCAAyC;YACzCA,EAAEC,cAAc;QAClB;IACF;IAEA,MAAMK,eAAe,CAACN;QACpB,IAAIJ,aAAa;YACfH,QAAQO,GAAG;QACb;IACF;IAEA,MAAMO,eAAe,CAACP;QACpB,IAAIJ,aAAa;YACfH,QAAQO,GAAG;QACb;IACF;IAEA,MAAMQ,mBAAmB;QACvB,GAAGV,iBAAiB;QACpB,iBAAiB,GAAGP,MAAM;WACvBD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAV;QACAmB,kBAAczB,gCAAAA,MAAiBF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAK,CAACmB,YAAY,EAAEA;QACzEC,kBAAc1B,gCAAAA,MAAiBF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAK,CAACoB,YAAY,EAAEA;QACzER,mBAAelB,gCAAAA,MAAiBF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAK,CAACY,aAAa,EAAEA;QAC3EU,SAAK7B,6BAAAA,EAAce,gBAAYjB,kCAAAA,EAAmBY;IACpD;IAEA,MAAMoB,oBAAoB;QACxB,GAAGF,gBAAgB;QACnBN,aAASrB,gCAAAA,MAAiBF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAK,CAACe,OAAO,EAAEA;QAC/DC,eAAWtB,gCAAAA,MAAiBF,8BAAAA,EAAeW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,KAAK,CAACgB,SAAS,EAAEA;IACrE;IAEA,MAAMQ,kCAA8B3B,6BAAAA,EAClCM,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOsB,IAAAA,AAAI,MAAK,YAAYtB,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOsB,IAAI,AAAJA,MAAS,MAAMtB,MAAMsB,IAAI,GAAG,OAC/DF;IAGF,OAAO;QACLtB,cAAUZ,2CAAAA,EACRW,MAAMC,QAAQ,MACdJ,6BAAAA,EACEM,WAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOsB,IAAAA,AAAI,MAAK,YAAYtB,CAAAA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOsB,IAAAA,AAAI,MAAK,MAAMtB,MAAMsB,IAAI,GAAG,OAC/Df,gBAAgBW,mBAAmBnB,2BAA2BqB,oBAAoBC;IAGxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/PopoverTrigger/usePopoverTrigger.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  mergeCallbacks,\n  useMergedRefs,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger_unstable.\n *\n * @param props - props from this instance of PopoverTrigger\n */\nexport const usePopoverTrigger_unstable = (props: PopoverTriggerProps): PopoverTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n  const child = getTriggerChild(children);\n\n  const open = usePopoverContext_unstable(context => context.open);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const openOnContext = usePopoverContext_unstable(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      toggleOpen(e);\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === Escape && open && !e.isDefaultPrevented()) {\n      setOpen(e, false);\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: Dialog, Popover, Menu and Tooltip\n      e.preventDefault();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n  };\n\n  const contextMenuProps = {\n    ...triggerAttributes,\n    'aria-expanded': `${open}`,\n    ...child?.props,\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    ref: useMergedRefs(triggerRef, getReactElementRef(child)),\n  } as const;\n\n  const triggerChildProps = {\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  };\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      props.children,\n      useARIAButtonProps(\n        child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n        openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n      ),\n    ),\n  };\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","mergeCallbacks","useMergedRefs","useEventCallback","useModalAttributes","usePopoverContext_unstable","useARIAButtonProps","Escape","usePopoverTrigger_unstable","props","children","disableButtonEnhancement","child","open","context","setOpen","toggleOpen","triggerRef","openOnHover","openOnContext","triggerAttributes","onContextMenu","e","preventDefault","onClick","onKeyDown","key","isDefaultPrevented","onMouseEnter","onMouseLeave","contextMenuProps","ref","triggerChildProps","ariaButtonTriggerChildProps","type"],"mappings":"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"}

package/lib-commonjs/popoverContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/popoverContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n  undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n  open: false,\n  setOpen: () => null,\n  toggleOpen: () => null,\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  arrowRef: { current: null },\n  openOnContext: false,\n  openOnHover: false,\n  size: 'medium' as const,\n  trapFocus: false,\n  inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n  PopoverState,\n  | 'open'\n  | 'toggleOpen'\n  | 'setOpen'\n  | 'triggerRef'\n  | 'contentRef'\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'mountNode'\n  | 'withArrow'\n  | 'arrowRef'\n  | 'size'\n  | 'appearance'\n  | 'trapFocus'\n  | 'inertTrapFocus'\n  | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n  useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":";;;;;;;;;;;kBAIaE;;;mBAiBAe;;;8BAwBAE;;;;sCA7CqC,mCAAmC;AAI9E,MAAMjB,qBAA+CF,mCAAAA,EAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBhD,MAAMC,6BAA6B,CAAIC,eAC5CnB,wCAAAA,EAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["../src/popoverContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { PopoverState } from './components/Popover/index';\n\nexport const PopoverContext: Context<PopoverContextValue> = createContext<PopoverContextValue | undefined>(\n  undefined,\n) as Context<PopoverContextValue>;\nconst popoverContextDefaultValue: PopoverContextValue = {\n  open: false,\n  setOpen: () => null,\n  toggleOpen: () => null,\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  arrowRef: { current: null },\n  openOnContext: false,\n  openOnHover: false,\n  size: 'medium' as const,\n  trapFocus: false,\n  inline: false,\n};\n\nexport const PopoverProvider = PopoverContext.Provider;\n\n/**\n * Context shared between Popover and its children components\n */\nexport type PopoverContextValue = Pick<\n  PopoverState,\n  | 'open'\n  | 'toggleOpen'\n  | 'setOpen'\n  | 'triggerRef'\n  | 'contentRef'\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'mountNode'\n  | 'withArrow'\n  | 'arrowRef'\n  | 'size'\n  | 'appearance'\n  | 'trapFocus'\n  | 'inertTrapFocus'\n  | 'inline'\n>;\n\nexport const usePopoverContext_unstable = <T>(selector: ContextSelector<PopoverContextValue, T>): T =>\n  useContextSelector(PopoverContext, (ctx = popoverContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","PopoverContext","undefined","popoverContextDefaultValue","open","setOpen","toggleOpen","triggerRef","current","contentRef","arrowRef","openOnContext","openOnHover","size","trapFocus","inline","PopoverProvider","Provider","usePopoverContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,cAAAA;;;mBAiBAe;;;8BAwBAE;;;;sCA7CqC,mCAAmC;AAI9E,2BAAqDnB,mCAAAA,EAC1DG,WACgC;AAClC,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,SAAS,IAAM;IACfC,YAAY,IAAM;IAClBC,YAAY;QAAEC,SAAS;IAAK;IAC5BC,YAAY;QAAED,SAAS;IAAK;IAC5BE,UAAU;QAAEF,SAAS;IAAK;IAC1BG,eAAe;IACfC,aAAa;IACbC,MAAM;IACNC,WAAW;IACXC,QAAQ;AACV;AAEO,MAAMC,kBAAkBf,eAAegB,QAAQ,CAAC;AAwBhD,MAAMC,6BAA6B,CAAIC,eAC5CnB,wCAAAA,EAAmBC,gBAAgB,CAACmB,MAAMjB,0BAA0B,GAAKgB,SAASC,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "9.12.5",
+  "version": "9.12.7",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,23 +22,23 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.16.4",
-    "@fluentui/react-context-selector": "^9.2.6",
-    "@fluentui/react-portal": "^9.8.1",
-    "@fluentui/react-positioning": "^9.20.4",
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-tabster": "^9.26.4",
+    "@fluentui/react-aria": "^9.17.1",
+    "@fluentui/react-context-selector": "^9.2.8",
+    "@fluentui/react-portal": "^9.8.3",
+    "@fluentui/react-positioning": "^9.20.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
+    "@fluentui/react-utilities": "^9.25.0",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [