feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-popover/lib/components/Popover/Popover.js

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import { usePopover_unstable } from './usePopover';
+import { renderPopover_unstable } from './renderPopover';
+/**
+ * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
+ */ export const Popover = (props)=>{
+    const state = usePopover_unstable(props);
+    return renderPopover_unstable(state);
+};
+Popover.displayName = 'Popover';

node_modules/@fluentui/react-popover/lib/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"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"}

node_modules/@fluentui/react-popover/lib/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-popover/lib/components/Popover/PopoverSurfaceMotion.js

@@ -0,0 +1,40 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
+import { POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX, POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY } from '@fluentui/react-positioning';
+// Shared timing constants for the enter animation.
+const duration = motionTokens.durationSlower;
+const easing = motionTokens.curveDecelerateMid;
+/**
+ * Default `surfaceMotion` slot for `<Popover>`.
+ *
+ * Enter-only animation combining a fade and a direction-aware slide.
+ * The slide reads CSS variables set by `usePositioningSlideDirection` and scales
+ * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.
+ *
+ * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.
+ */ export const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 })=>({
+        enter: [
+            fadeAtom({
+                duration,
+                easing,
+                direction: 'enter'
+            }),
+            {
+                // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.
+                // The `outX`/`outY` values read the positioning-provided CSS variables and scale
+                // them by `distance` so the surface slides in from the correct direction.
+                ...slideAtom({
+                    duration,
+                    easing,
+                    direction: 'enter',
+                    outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,
+                    outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`
+                }),
+                // 'accumulate' compositing adds this effect's transform on top of the element's
+                // existing transform, preserving any transform applied by the positioning engine.
+                composite: 'accumulate'
+            }
+        ],
+        // No exit animation — the surface unmounts immediately on close.
+        exit: []
+    }));

node_modules/@fluentui/react-popover/lib/components/Popover/PopoverSurfaceMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Popover/PopoverSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport {\n  POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX,\n  POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY,\n} from '@fluentui/react-positioning';\n\n// Shared timing constants for the enter animation.\nconst duration = motionTokens.durationSlower;\nconst easing = motionTokens.curveDecelerateMid;\n\n/**\n * Default `surfaceMotion` slot for `<Popover>`.\n *\n * Enter-only animation combining a fade and a direction-aware slide.\n * The slide reads CSS variables set by `usePositioningSlideDirection` and scales\n * them by `distance` pixels. There is no exit animation; the surface unmounts immediately.\n *\n * @param distance - Travel distance (px) for the enter slide. Defaults to `10`.\n */\nexport const PopoverSurfaceMotion = createPresenceComponent(({ distance = 10 }: { distance?: number }) => ({\n  enter: [\n    fadeAtom({ duration, easing, direction: 'enter' }),\n    {\n      // slideAtom produces translate keyframes from `outX`/`outY` → `0px`.\n      // The `outX`/`outY` values read the positioning-provided CSS variables and scale\n      // them by `distance` so the surface slides in from the correct direction.\n      ...slideAtom({\n        duration,\n        easing,\n        direction: 'enter',\n        outX: `calc(var(${slideDirectionVarX}, 0px) * ${distance})`,\n        outY: `calc(var(${slideDirectionVarY}, 0px) * ${distance})`,\n      }),\n      // 'accumulate' compositing adds this effect's transform on top of the element's\n      // existing transform, preserving any transform applied by the positioning engine.\n      composite: 'accumulate',\n    },\n  ],\n  // No exit animation — the surface unmounts immediately on close.\n  exit: [],\n}));\n"],"names":["createPresenceComponent","motionTokens","fadeAtom","slideAtom","POSITIONING_SLIDE_DIRECTION_VAR_X","slideDirectionVarX","POSITIONING_SLIDE_DIRECTION_VAR_Y","slideDirectionVarY","duration","durationSlower","easing","curveDecelerateMid","PopoverSurfaceMotion","distance","enter","direction","outX","outY","composite","exit"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,QAAQ,EAAEC,SAAS,QAAQ,4CAA4C;AAChF,SACEC,qCAAqCC,kBAAkB,EACvDC,qCAAqCC,kBAAkB,QAClD,8BAA8B;AAErC,mDAAmD;AACnD,MAAMC,WAAWP,aAAaQ,cAAc;AAC5C,MAAMC,SAAST,aAAaU,kBAAkB;AAE9C;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuBZ,wBAAwB,CAAC,EAAEa,WAAW,EAAE,EAAyB,GAAM,CAAA;QACzGC,OAAO;YACLZ,SAAS;gBAAEM;gBAAUE;gBAAQK,WAAW;YAAQ;YAChD;gBACE,qEAAqE;gBACrE,iFAAiF;gBACjF,0EAA0E;gBAC1E,GAAGZ,UAAU;oBACXK;oBACAE;oBACAK,WAAW;oBACXC,MAAM,CAAC,SAAS,EAAEX,mBAAmB,SAAS,EAAEQ,SAAS,CAAC,CAAC;oBAC3DI,MAAM,CAAC,SAAS,EAAEV,mBAAmB,SAAS,EAAEM,SAAS,CAAC,CAAC;gBAC7D,EAAE;gBACF,gFAAgF;gBAChF,kFAAkF;gBAClFK,WAAW;YACb;SACD;QACD,iEAAiE;QACjEC,MAAM,EAAE;IACV,CAAA,GAAI"}

node_modules/@fluentui/react-popover/lib/components/Popover/constants.js

@@ -0,0 +1,9 @@
+/**
+ * The default value of the tooltip's border radius (borderRadiusMedium).
+ *
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
+ * While we could use getComputedStyle, that adds a performance penalty for something that
+ * will likely never change.
+ *
+ * @internal
+ */ export const popoverSurfaceBorderRadius = 4;

node_modules/@fluentui/react-popover/lib/components/Popover/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Popover/constants.ts"],"sourcesContent":["/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n *\n * @internal\n */\nexport const popoverSurfaceBorderRadius = 4;\n"],"names":["popoverSurfaceBorderRadius"],"mappings":"AAAA;;;;;;;;CAQC,GACD,OAAO,MAAMA,6BAA6B,EAAE"}

node_modules/@fluentui/react-popover/lib/components/Popover/index.js

@@ -0,0 +1,3 @@
+export { Popover } from './Popover';
+export { renderPopover_unstable } from './renderPopover';
+export { usePopover_unstable, usePopoverBase_unstable } from './usePopover';

node_modules/@fluentui/react-popover/lib/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  PopoverBaseProps,\n  PopoverProps,\n  PopoverSize,\n  PopoverBaseState,\n  PopoverState,\n} from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable, usePopoverBase_unstable } from './usePopover';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverBase_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAUpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe"}

node_modules/@fluentui/react-popover/lib/components/Popover/renderPopover.js

@@ -0,0 +1,38 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import * as React from 'react';
+import { assertSlots } from '@fluentui/react-utilities';
+import { MotionRefForwarder } from '@fluentui/react-motion';
+import { PopoverContext } from '../../popoverContext';
+/**
+ * Render the final JSX of Popover
+ */ export const renderPopover_unstable = (state)=>{
+    assertSlots(state);
+    const { appearance, arrowRef, contentRef, inline, mountNode, open, openOnContext, openOnHover, setOpen, size, toggleOpen, trapFocus, triggerRef, withArrow, inertTrapFocus } = state;
+    return /*#__PURE__*/ _jsxs(PopoverContext.Provider, {
+        value: {
+            appearance,
+            arrowRef,
+            contentRef,
+            inline,
+            mountNode,
+            open,
+            openOnContext,
+            openOnHover,
+            setOpen,
+            toggleOpen,
+            triggerRef,
+            size,
+            trapFocus,
+            inertTrapFocus,
+            withArrow
+        },
+        children: [
+            state.popoverTrigger,
+            state.popoverSurface && /*#__PURE__*/ _jsx(state.surfaceMotion, {
+                children: /*#__PURE__*/ _jsx(MotionRefForwarder, {
+                    children: state.popoverSurface
+                })
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-popover/lib/components/Popover/renderPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState): JSXElement => {\n  assertSlots<InternalPopoverSlots>(state);\n\n  const {\n    appearance,\n    arrowRef,\n    contentRef,\n    inline,\n    mountNode,\n    open,\n    openOnContext,\n    openOnHover,\n    setOpen,\n    size,\n    toggleOpen,\n    trapFocus,\n    triggerRef,\n    withArrow,\n    inertTrapFocus,\n  } = state;\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        appearance,\n        arrowRef,\n        contentRef,\n        inline,\n        mountNode,\n        open,\n        openOnContext,\n        openOnHover,\n        setOpen,\n        toggleOpen,\n        triggerRef,\n        size,\n        trapFocus,\n        inertTrapFocus,\n        withArrow,\n      }}\n    >\n      {state.popoverTrigger}\n      {state.popoverSurface && (\n        <state.surfaceMotion>\n          <MotionRefForwarder>\n            {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n            {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n            {state.popoverSurface as React.ReactElement}\n          </MotionRefForwarder>\n        </state.surfaceMotion>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","renderPopover_unstable","state","appearance","arrowRef","contentRef","inline","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","inertTrapFocus","Provider","value","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,QAAQ,uBAAuB;AAGtD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCJ,YAAkCI;IAElC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACf,GAAGf;IAEJ,qBACE,MAACF,eAAekB,QAAQ;QACtBC,OAAO;YACLhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAE;YACAH;YACAE;YACAG;YACAD;QACF;;YAECd,MAAMkB,cAAc;YACpBlB,MAAMmB,cAAc,kBACnB,KAACnB,MAAMoB,aAAa;0BAClB,cAAA,KAACvB;8BAGEG,MAAMmB,cAAc;;;;;AAMjC,EAAE"}

node_modules/@fluentui/react-popover/lib/components/Popover/usePopover.js

@@ -0,0 +1,238 @@
+'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';
+import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget, usePositioningSlideDirection } from '@fluentui/react-positioning';
+import { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';
+import { arrowHeights } from '../PopoverSurface/index';
+import { popoverSurfaceBorderRadius } from './constants';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
+/**
+ * Create the state required to render Popover.
+ *
+ * The returned state can be modified with hooks such as usePopoverStyles,
+ * before being passed to renderPopover_unstable.
+ *
+ * @param props - props from this instance of Popover
+ */ export const usePopover_unstable = (props)=>{
+    const { appearance, size = 'medium' } = props;
+    const positioning = resolvePositioningShorthand(props.positioning);
+    const withArrow = props.withArrow && !positioning.coverTarget;
+    const { targetDocument } = useFluent();
+    const handlePositionEnd = usePositioningSlideDirection({
+        targetDocument,
+        onPositioningEnd: positioning.onPositioningEnd
+    });
+    const state = usePopoverBase_unstable({
+        ...props,
+        positioning: {
+            ...positioning,
+            onPositioningEnd: handlePositionEnd,
+            // Update the offset with the arrow size only when it's available
+            ...withArrow ? {
+                offset: mergeArrowOffset(positioning.offset, arrowHeights[size])
+            } : {}
+        }
+    });
+    return {
+        components: {
+            surfaceMotion: PopoverSurfaceMotion
+        },
+        appearance,
+        size,
+        ...state,
+        surfaceMotion: presenceMotionSlot(props.surfaceMotion, {
+            elementType: PopoverSurfaceMotion,
+            defaultProps: {
+                visible: state.open,
+                appear: true,
+                unmountOnExit: true
+            }
+        })
+    };
+};
+/**
+ * Base hook that builds Popover state for behavior and structure only.
+ * Does not add design-related defaults such as appearance or size.
+ * Does not manage focus behavior, it's handled by `usePopoverFocusManagement_unstable`.
+ *
+ * @internal
+ * @param props - props from this instance of Popover
+ */ export const usePopoverBase_unstable = (props)=>{
+    const [contextTarget, setContextTarget] = usePositioningMouseTarget();
+    const initialState = {
+        contextTarget,
+        setContextTarget,
+        ...props
+    };
+    const children = React.Children.toArray(props.children);
+    if (process.env.NODE_ENV !== 'production') {
+        if (children.length === 0) {
+            // eslint-disable-next-line no-console
+            console.warn('Popover must contain at least one child');
+        }
+        if (children.length > 2) {
+            // eslint-disable-next-line no-console
+            console.warn('Popover must contain at most two children');
+        }
+    }
+    let popoverTrigger = undefined;
+    let popoverSurface = undefined;
+    if (children.length === 2) {
+        popoverTrigger = children[0];
+        popoverSurface = children[1];
+    } else if (children.length === 1) {
+        popoverSurface = children[0];
+    }
+    const [open, setOpenState] = useOpenState(initialState);
+    const [setOpenTimeout, clearOpenTimeout] = useTimeout();
+    const setOpen = useEventCallback((e, shouldOpen)=>{
+        clearOpenTimeout();
+        if (!(e instanceof Event) && e.persist) {
+            // < React 17 still uses pooled synthetic events
+            e.persist();
+        }
+        if (e.type === 'mouseleave') {
+            var _props_mouseLeaveDelay;
+            // FIXME leaking Node timeout type
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            setOpenTimeout(()=>{
+                setOpenState(e, shouldOpen);
+            }, (_props_mouseLeaveDelay = props.mouseLeaveDelay) !== null && _props_mouseLeaveDelay !== void 0 ? _props_mouseLeaveDelay : 500);
+        } else {
+            setOpenState(e, shouldOpen);
+        }
+    });
+    const toggleOpen = React.useCallback((e)=>{
+        setOpen(e, !open);
+    }, [
+        setOpen,
+        open
+    ]);
+    const positioningRefs = usePopoverRefs(initialState);
+    const { targetDocument } = useFluent();
+    var _props_closeOnIframeFocus;
+    useOnClickOutside({
+        contains: elementContains,
+        element: targetDocument,
+        callback: (ev)=>setOpen(ev, false),
+        refs: [
+            positioningRefs.triggerRef,
+            positioningRefs.contentRef
+        ],
+        disabled: !open,
+        disabledFocusOnIframe: !((_props_closeOnIframeFocus = props.closeOnIframeFocus) !== null && _props_closeOnIframeFocus !== void 0 ? _props_closeOnIframeFocus : true)
+    });
+    // only close on scroll for context, or when closeOnScroll is specified
+    const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;
+    useOnScrollOutside({
+        contains: elementContains,
+        element: targetDocument,
+        callback: (ev)=>setOpen(ev, false),
+        refs: [
+            positioningRefs.triggerRef,
+            positioningRefs.contentRef
+        ],
+        disabled: !open || !closeOnScroll
+    });
+    const { findFirstFocusable } = useFocusFinders();
+    const activateModal = useActivateModal();
+    React.useEffect(()=>{
+        if (props.unstable_disableAutoFocus) {
+            return;
+        }
+        const contentElement = positioningRefs.contentRef.current;
+        if (open && contentElement) {
+            var _contentElement_getAttribute;
+            const shouldFocusContainer = !isNaN((_contentElement_getAttribute = contentElement.getAttribute('tabIndex')) !== null && _contentElement_getAttribute !== void 0 ? _contentElement_getAttribute : undefined);
+            const firstFocusable = shouldFocusContainer ? contentElement : findFirstFocusable(contentElement);
+            firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+            if (shouldFocusContainer) {
+                // Modal activation happens automatically when something inside the modal is focused programmatically.
+                // When the container is focused, we need to activate the modal manually.
+                activateModal(contentElement);
+            }
+        }
+    }, [
+        findFirstFocusable,
+        activateModal,
+        open,
+        positioningRefs.contentRef,
+        props.unstable_disableAutoFocus
+    ]);
+    var _props_inertTrapFocus, _props_inline;
+    return {
+        ...initialState,
+        ...positioningRefs,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        inertTrapFocus: (_props_inertTrapFocus = props.inertTrapFocus) !== null && _props_inertTrapFocus !== void 0 ? _props_inertTrapFocus : props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus,
+        popoverTrigger,
+        popoverSurface,
+        open,
+        setOpen,
+        toggleOpen,
+        setContextTarget,
+        contextTarget,
+        inline: (_props_inline = props.inline) !== null && _props_inline !== void 0 ? _props_inline : false
+    };
+};
+/**
+ * Creates and manages the Popover open state
+ */ function useOpenState(state) {
+    'use no memo';
+    const onOpenChange = useEventCallback((e, data)=>{
+        var _state_onOpenChange;
+        return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
+    });
+    const [open, setOpenState] = useControllableState({
+        state: state.open,
+        defaultState: state.defaultOpen,
+        initialState: false
+    });
+    state.open = open !== undefined ? open : state.open;
+    const setContextTarget = state.setContextTarget;
+    const setOpen = React.useCallback((e, shouldOpen)=>{
+        if (shouldOpen && e.type === 'contextmenu') {
+            setContextTarget(e);
+        }
+        if (!shouldOpen) {
+            setContextTarget(undefined);
+        }
+        setOpenState(shouldOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+            open: shouldOpen
+        });
+    }, [
+        setOpenState,
+        onOpenChange,
+        setContextTarget
+    ]);
+    return [
+        open,
+        setOpen
+    ];
+}
+/**
+ * Creates and sets the necessary trigger, target and content refs used by Popover
+ */ function usePopoverRefs(state) {
+    'use no memo';
+    const positioningOptions = {
+        position: 'above',
+        align: 'center',
+        arrowPadding: 2 * popoverSurfaceBorderRadius,
+        target: state.openOnContext ? state.contextTarget : undefined,
+        ...resolvePositioningShorthand(state.positioning)
+    };
+    // no reason to render arrow when covering the target
+    if (positioningOptions.coverTarget) {
+        state.withArrow = false;
+    }
+    const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);
+    return {
+        triggerRef,
+        contentRef,
+        arrowRef
+    };
+}