@fluentui/react-positioning 9.22.3 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Wed, 24 Jun 2026 11:03:41 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+Thu, 09 Jul 2026 17:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.3..@fluentui/react-positioning_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+### Changes
+
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
 ## [9.22.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.3)
 
-Wed, 24 Jun 2026 11:03:41 GMT 
+Wed, 24 Jun 2026 11:09:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.2..@fluentui/react-positioning_v9.22.3)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,409 @@
+import type { GriffelStyle } from '@griffel/react';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { RefObjectFunction } from '@fluentui/react-utilities';
+
+export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
+
+/**
+ * @deprecated use PositioningBoundary instead
+ */
+export declare type Boundary = PositioningBoundary;
+
+/**
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
+ *
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
+ *
+ * @internal
+ */
+export declare function createArrowHeightStyles(arrowHeight: number): GriffelStyle;
+
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
+ *
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.className = styles.arrowWithSize;
+ *   state.arrowWithoutSize.className = mergeClasses(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @internal
+ */
+export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
+
+/**
+ * Options parameter for the createArrowStyles function
+ *
+ * @internal
+ */
+export declare type CreateArrowStylesOptions = {
+    /**
+     * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
+     *
+     * This can be undefined to leave out the arrow size styles. You must then add styles created by
+     * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
+     */
+    arrowHeight: number | undefined;
+    /**
+     * The borderWidth of the arrow. Should be the same borderWidth as the parent element.
+     *
+     * @defaultvalue 1px
+     */
+    borderWidth?: GriffelStyle['borderBottomWidth'];
+    /**
+     * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
+     *
+     * @defaultvalue solid
+     */
+    borderStyle?: GriffelStyle['borderBottomStyle'];
+    /**
+     * The borderColor of the arrow. Should be the same borderColor as the parent element.
+     *
+     * @defaultvalue tokens.colorTransparentStroke
+     */
+    borderColor?: GriffelStyle['borderBottomColor'];
+};
+
+/**
+ * Creates animation styles so that positioned elements slide in from the main axis
+ * @param mainAxis - distance than the element sides for
+ * @returns Griffel styles to spread to a slot
+ *
+ * @deprecated The popover-related components now use the Slide motion component,
+ * which they inject using the `surfaceMotion` slot.
+ */
+export declare function createSlideStyles(mainAxis: number): GriffelStyle;
+
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
+
+/**
+ * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
+ * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
+ *
+ * @internal
+ * @param userOffset - The offset provided by the user
+ * @param arrowHeight - The height of the arrow in px
+ * @returns User offset augmented with arrow height
+ */
+export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
+
+export declare type Offset = OffsetFunction | OffsetObject | OffsetShorthand;
+
+export declare type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
+
+export declare type OffsetFunctionParam = {
+    positionedRect: PositioningRect;
+    targetRect: PositioningRect;
+    position: Position;
+    alignment?: Alignment;
+};
+
+export declare type OffsetObject = {
+    crossAxis?: number;
+    mainAxis: number;
+};
+
+export declare type OffsetShorthand = number;
+
+/**
+ * Custom DOM event dispatched on the positioned container element when a
+ * positioning update completes. Carries placement information in `event.detail`.
+ */
+declare type OnPositioningEndEvent = CustomEvent<OnPositioningEndEventDetail>;
+
+/**
+ * Detail payload of the positioning end event, providing the final computed placement
+ * after all middleware (flip, shift, etc.) have run.
+ */
+declare type OnPositioningEndEventDetail = {
+    /**
+     * The computed placement of the positioned element. May differ from the requested
+     * placement if flip or other middleware adjusted it.
+     */
+    placement: PositioningPlacement;
+};
+
+export declare type Position = 'above' | 'below' | 'before' | 'after';
+
+/**
+ * CSS custom properties used to encode the slide direction for positioning-aware enter animations.
+ * Set at runtime by `usePositioningSlideDirection` and registered via the CSS
+ * `registerProperty()` API so browsers can interpolate them as `<length>` values.
+ */
+export declare const POSITIONING_SLIDE_DIRECTION_VAR_X = "--fui-positioning-slide-direction-x";
+
+export declare const POSITIONING_SLIDE_DIRECTION_VAR_Y = "--fui-positioning-slide-direction-y";
+
+export declare type PositioningBoundary = PositioningRect | HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
+
+export declare type PositioningConfigurationFn = (params: {
+    container: HTMLElement;
+    arrow: HTMLElement | null;
+    options: PositioningConfigurationFnOptions;
+}) => PositioningConfigurationFnOptions;
+
+export declare type PositioningConfigurationFnOptions = Omit<PositioningOptions, 'enabled' | 'onPositioningEnd' | 'positionFixed'>;
+
+/**
+ * A context provider for the positioning configuration.
+ *
+ * Accepts a function that takes the positioning options and returns them modified.
+ */
+export declare const PositioningConfigurationProvider: React_2.Provider<PositioningConfigurationFn | undefined>;
+
+export declare type PositioningImperativeRef = {
+    /**
+     * Updates the position imperatively.
+     * Useful when the position of the target changes from other factors than scrolling of window resize.
+     */
+    updatePosition: () => void;
+    /**
+     * Sets the target and updates positioning imperatively.
+     * Useful for avoiding double renders with the target option.
+     */
+    setTarget: (target: TargetElement | null) => void;
+};
+
+/**
+ * Internal options for positioning
+ */
+declare interface PositioningOptions {
+    /** Alignment for the component. Only has an effect if used with the @see position option */
+    align?: Alignment;
+    /** The element which will define the boundaries of the positioned element for the flip behavior. */
+    flipBoundary?: PositioningBoundary | null;
+    /** The element which will define the boundaries of the positioned element for the overflow behavior. */
+    overflowBoundary?: PositioningBoundary | null;
+    /**
+     * Applies a padding to the overflow bounadry, so that overflow is detected earlier before the
+     * positioned surface hits the overflow boundary.
+     */
+    overflowBoundaryPadding?: number | Partial<{
+        top: number;
+        end: number;
+        bottom: number;
+        start: number;
+    }>;
+    /**
+     * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
+     * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
+     * and 'start' | 'end' respectively),
+     * then provided value for 'align' will be ignored and 'center' will be used instead.
+     */
+    position?: Position;
+    /**
+     * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
+     * @default false
+     * @deprecated use `strategy` instead
+     */
+    positionFixed?: boolean;
+    /**
+     * Specifies the type of CSS position property to use.
+     * @default absolute
+     */
+    strategy?: 'absolute' | 'fixed';
+    /**
+     * Lets you displace a positioned element from its reference element.
+     * This can be useful if you need to apply some margin between them or if you need to fine tune the
+     * position according to some custom logic.
+     */
+    offset?: Offset;
+    /**
+     * Defines padding between the corner of the popup element and the arrow.
+     * Use to prevent the arrow from overlapping a rounded corner, for example.
+     */
+    arrowPadding?: number;
+    /**
+     * Applies styles on the positioned element to fit it within the available space in viewport.
+     * - true: set styles for max height/width.
+     * - 'height': set styles for max height.
+     * - 'width'': set styles for max width.
+     * Note that options 'always'/'height-always'/'width-always' are now obsolete, and equivalent to true/'height'/'width'.
+     */
+    autoSize?: AutoSize;
+    /**
+     * Modifies position and alignment to cover the target
+     */
+    coverTarget?: boolean;
+    /**
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     */
+    pinned?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
+    /**
+     * If flip fails to stop the positioned element from overflowing
+     * its boundaries, use a specified fallback positions.
+     */
+    fallbackPositions?: PositioningShorthandValue[];
+    /**
+     * Modifies whether popover is positioned using transform.
+     * @default true
+     */
+    useTransform?: boolean;
+    /**
+     * If false, does not position anything
+     */
+    enabled?: boolean;
+    /**
+     * When set, the positioned element matches the chosen dimension(s) of the target element
+     */
+    matchTargetSize?: 'width';
+    /**
+     * Called when a position update has finished. Multiple position updates can happen in a single render,
+     * since positioning happens outside of the React lifecycle.
+     * The event's `detail.placement` indicates the final computed placement after middleware adjustments.
+     *
+     * It's also possible to listen to the custom DOM event `fui-positioningend`
+     */
+    onPositioningEnd?: (e: OnPositioningEndEvent) => void;
+    /**
+     * Disables the resize observer that updates position on target or dimension change
+     */
+    disableUpdateOnResize?: boolean;
+    /**
+     * When true, the positioned element will shift to cover the target element when there's not enough space.
+     * @default false
+     */
+    shiftToCoverTarget?: boolean;
+}
+
+/**
+ * Physical placement of a positioned element relative to its target, as computed by Floating UI.
+ * This is a Fluent-owned equivalent of Floating UI's `Placement` type, avoiding a transitive
+ * dependency on `@floating-ui/dom` in the public API surface.
+ */
+declare type PositioningPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+
+/**
+ * Public api that allows components using react-positioning to specify positioning options
+ */
+export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'fallbackPositions' | 'flipBoundary' | 'offset' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'pinned' | 'position' | 'strategy' | 'useTransform' | 'matchTargetSize' | 'onPositioningEnd' | 'disableUpdateOnResize' | 'shiftToCoverTarget'> {
+    /** An imperative handle to Popper methods. */
+    positioningRef?: React_2.Ref<PositioningImperativeRef>;
+    /**
+     * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
+     */
+    target?: TargetElement | null;
+}
+
+export declare type PositioningRect = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
+
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+
+export declare type PositioningVirtualElement = {
+    getBoundingClientRect: () => {
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+    };
+    contextElement?: Element;
+};
+
+export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
+
+export declare type SetVirtualMouseTarget = (event: React_2.MouseEvent | MouseEvent | undefined | null) => void;
+
+declare type TargetElement = HTMLElement | PositioningVirtualElement;
+
+/**
+ * @internal
+ */
+export declare function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn;
+
+/**
+ * A state hook that manages a popper virtual element from mouseevents.
+ * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
+ * React synthetic events are not persisted by this hook
+ *
+ * @internal
+ * @param initialState - initializes a user provided state similare to useState
+ * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
+ */
+export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement)) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
+
+declare interface UsePositioningReturn {
+    targetRef: React_2.MutableRefObject<any>;
+    containerRef: React_2.MutableRefObject<any>;
+    arrowRef: React_2.MutableRefObject<any>;
+}
+
+/**
+ * A hook that manages CSS custom properties for slide direction based on positioning placement.
+ *
+ * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and
+ * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,
+ * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.
+ *
+ * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.
+ */
+export declare function usePositioningSlideDirection(options: UsePositioningSlideDirectionOptions): NonNullable<PositioningProps['onPositioningEnd']>;
+
+declare type UsePositioningSlideDirectionOptions = {
+    /** The target document for CSS.registerProperty. */
+    targetDocument: Document | undefined;
+    /** The user's original onPositioningEnd callback, if any. */
+    onPositioningEnd?: PositioningProps['onPositioningEnd'];
+};
+
+export declare function useSafeZoneArea({ debug, disabled, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout, }?: UseSafeZoneOptions): {
+    containerRef: RefObjectFunction<HTMLElement>;
+    targetRef: RefObjectFunction<HTMLElement>;
+    elementToRender: JSXElement | null;
+};
+
+export declare type UseSafeZoneOptions = {
+    /** Enables debug mode: makes drawn shapes visible. */
+    debug?: boolean;
+    /** Disables the safe zone area. */
+    disabled?: boolean;
+    /** The time in milliseconds to wait before clearing the safe zone. */
+    timeout?: number;
+    /** Called when the mouse enters the safe zone. */
+    onSafeZoneEnter?: (e: React_2.MouseEvent) => void;
+    /** Called when the mouse moves within the safe zone. */
+    onSafeZoneMove?: (e: React_2.MouseEvent) => void;
+    /** Called when the mouse leaves the safe zone. */
+    onSafeZoneLeave?: (e: React_2.MouseEvent) => void;
+    /** Called when the safe zone times out, even if a cursor is still over a safe zone. */
+    onSafeZoneTimeout?: () => void;
+};
+
+export { }

package/lib/PositioningConfigurationContext.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 // ---
 const DEFAULT_CONFIGURATION = ({ options })=>{
     return options;

package/lib/createArrowStyles.js

@@ -1,4 +1,4 @@
-import { tokens } from '@fluentui/react-theme';
+import { tokens } from "@fluentui/react-theme";
 /**
  * Helper that creates a makeStyles rule for an arrow element.
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element

package/lib/createPositionManager.js

@@ -1,9 +1,9 @@
-import { computePosition } from '@floating-ui/dom';
-import { isHTMLElement } from '@fluentui/react-utilities';
-import { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';
-import { listScrollParents } from './utils/listScrollParents';
-import { POSITIONING_END_EVENT } from './constants';
-import { createResizeObserver } from './utils/createResizeObserver';
+import { computePosition } from "@floating-ui/dom";
+import { isHTMLElement } from "@fluentui/react-utilities";
+import { debounce, writeArrowUpdates, writeContainerUpdates } from "./utils/index.js";
+import { listScrollParents } from "./utils/listScrollParents.js";
+import { POSITIONING_END_EVENT } from "./constants.js";
+import { createResizeObserver } from "./utils/createResizeObserver.js";
 /**
  * @internal
  * @returns manager that handles positioning out of the react lifecycle

package/lib/createPositionManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport type { OnPositioningEndEventDetail, PositionManager, PositioningPlacement, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { listScrollParents } from './utils/listScrollParents';\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createResizeObserver } from './utils/createResizeObserver';\n\ninterface PositionManagerOptions {\n  /**\n   * The positioned element\n   */\n  container: HTMLElement;\n  /**\n   * Element that the container will be anchored to\n   */\n  target: TargetElement;\n  /**\n   * Arrow that points from the container to the target\n   */\n  arrow: HTMLElement | null;\n  /**\n   * The value of the css `position` property\n   * @default absolute\n   */\n  strategy: Strategy;\n  /**\n   * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n   */\n  middleware: Middleware[];\n  /**\n   * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n   */\n  placement?: Placement;\n  /**\n   * Modifies whether popover is positioned using transform.\n   * @default true\n   */\n  useTransform?: boolean;\n  /**\n   * Disables the resize observer that updates position on target or dimension change\n   */\n  disableUpdateOnResize?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  let isDestroyed = false;\n  const {\n    container,\n    target,\n    arrow,\n    strategy,\n    middleware,\n    placement,\n    useTransform = true,\n    disableUpdateOnResize = false,\n  } = options;\n  const targetWindow = container.ownerDocument.defaultView;\n  if (!target || !container || !targetWindow) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  // When the dimensions of the target or the container change - trigger a position update\n  const resizeObserver = disableUpdateOnResize\n    ? null\n    : createResizeObserver(targetWindow, entries => {\n        // If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element\n        // In this case don't update and let users update imperatively\n        const shouldUpdateOnResize = entries.every(entry => {\n          return entry.contentRect.width > 0 && entry.contentRect.height > 0;\n        });\n\n        if (shouldUpdateOnResize) {\n          updatePosition();\n        }\n      });\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n\n  // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n  // Without this scroll jumps can occur when the element is rendered initially and receives focus\n  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n  const forceUpdate = () => {\n    // debounced update can still occur afterwards\n    // early return to avoid memory leaks\n    if (isDestroyed) {\n      return;\n    }\n\n    if (isFirstUpdate) {\n      listScrollParents(container).forEach(scrollParent => scrollParents.add(scrollParent));\n      if (isHTMLElement(target)) {\n        listScrollParents(target).forEach(scrollParent => scrollParents.add(scrollParent));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition, { passive: true });\n      });\n\n      resizeObserver?.observe(container);\n      if (isHTMLElement(target)) {\n        resizeObserver?.observe(target);\n      }\n\n      isFirstUpdate = false;\n    }\n\n    Object.assign(container.style, { position: strategy });\n    computePosition(target, container, { placement, middleware, strategy })\n      .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n        // Promise can still resolve after destruction\n        // early return to avoid applying outdated position\n        if (isDestroyed) {\n          return;\n        }\n\n        writeArrowUpdates({ arrow, middlewareData });\n        writeContainerUpdates({\n          container,\n          middlewareData,\n          placement: computedPlacement,\n          coordinates: { x, y },\n          lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n          strategy,\n          useTransform,\n        });\n\n        container.dispatchEvent(\n          new CustomEvent<OnPositioningEndEventDetail>(POSITIONING_END_EVENT, {\n            detail: {\n              // Cast from Floating UI's Placement to the Fluent-owned PositioningPlacement.\n              // These are equivalent string unions; the cast avoids leaking @floating-ui/dom\n              // types into the public API surface.\n              placement: computedPlacement satisfies PositioningPlacement,\n            },\n          }),\n        );\n      })\n      .catch(err => {\n        // https://github.com/floating-ui/floating-ui/issues/1845\n        // FIXME for node > 14\n        // node 15 introduces promise rejection which means that any components\n        // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n        // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n        // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n        // will actually be counter productive\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error('[usePositioning]: Failed to calculate position', err);\n        }\n      });\n  };\n\n  const updatePosition = debounce(() => forceUpdate());\n\n  const dispose = () => {\n    isDestroyed = true;\n\n    if (targetWindow) {\n      targetWindow.removeEventListener('scroll', updatePosition);\n      targetWindow.removeEventListener('resize', updatePosition);\n    }\n\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener('scroll', updatePosition);\n    });\n    scrollParents.clear();\n\n    resizeObserver?.disconnect();\n  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition, { passive: true });\n    targetWindow.addEventListener('resize', updatePosition);\n  }\n\n  // Update the position on initialization\n  updatePosition();\n\n  return {\n    updatePosition,\n    dispose,\n  };\n}\n"],"names":["computePosition","isHTMLElement","debounce","writeArrowUpdates","writeContainerUpdates","listScrollParents","POSITIONING_END_EVENT","createResizeObserver","createPositionManager","options","isDestroyed","container","target","arrow","strategy","middleware","placement","useTransform","disableUpdateOnResize","targetWindow","ownerDocument","defaultView","updatePosition","undefined","dispose","resizeObserver","entries","shouldUpdateOnResize","every","entry","contentRect","width","height","isFirstUpdate","scrollParents","Set","Object","assign","style","position","left","top","margin","forceUpdate","forEach","scrollParent","add","addEventListener","passive","observe","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","dispatchEvent","CustomEvent","detail","catch","err","process","env","NODE_ENV","console","error","removeEventListener","clear","disconnect"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,EAAEC,iBAAiB,EAAEC,qBAAqB,QAAQ,UAAU;AAC7E,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,oBAAoB,QAAQ,+BAA+B;AAuCpE;;;CAGC,GACD,OAAO,SAASC,sBAAsBC,OAA+B;IACnE,IAAIC,cAAc;IAClB,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,SAAS,EACTC,eAAe,IAAI,EACnBC,wBAAwB,KAAK,EAC9B,GAAGT;IACJ,MAAMU,eAAeR,UAAUS,aAAa,CAACC,WAAW;IACxD,IAAI,CAACT,UAAU,CAACD,aAAa,CAACQ,cAAc;QAC1C,OAAO;YACLG,gBAAgB,IAAMC;YACtBC,SAAS,IAAMD;QACjB;IACF;IAEA,wFAAwF;IACxF,MAAME,iBAAiBP,wBACnB,OACAX,qBAAqBY,cAAcO,CAAAA;QACjC,2GAA2G;QAC3G,8DAA8D;QAC9D,MAAMC,uBAAuBD,QAAQE,KAAK,CAACC,CAAAA;YACzC,OAAOA,MAAMC,WAAW,CAACC,KAAK,GAAG,KAAKF,MAAMC,WAAW,CAACE,MAAM,GAAG;QACnE;QAEA,IAAIL,sBAAsB;YACxBL;QACF;IACF;IAEJ,IAAIW,gBAAgB;IACpB,MAAMC,gBAAkC,IAAIC;IAE5C,oFAAoF;IACpF,gGAAgG;IAChGC,OAAOC,MAAM,CAAC1B,UAAU2B,KAAK,EAAE;QAAEC,UAAU;QAASC,MAAM;QAAGC,KAAK;QAAGC,QAAQ;IAAE;IAE/E,MAAMC,cAAc;QAClB,8CAA8C;QAC9C,qCAAqC;QACrC,IAAIjC,aAAa;YACf;QACF;QAEA,IAAIuB,eAAe;YACjB5B,kBAAkBM,WAAWiC,OAAO,CAACC,CAAAA,eAAgBX,cAAcY,GAAG,CAACD;YACvE,IAAI5C,cAAcW,SAAS;gBACzBP,kBAAkBO,QAAQgC,OAAO,CAACC,CAAAA,eAAgBX,cAAcY,GAAG,CAACD;YACtE;YAEAX,cAAcU,OAAO,CAACC,CAAAA;gBACpBA,aAAaE,gBAAgB,CAAC,UAAUzB,gBAAgB;oBAAE0B,SAAS;gBAAK;YAC1E;YAEAvB,2BAAAA,qCAAAA,eAAgBwB,OAAO,CAACtC;YACxB,IAAIV,cAAcW,SAAS;gBACzBa,2BAAAA,qCAAAA,eAAgBwB,OAAO,CAACrC;YAC1B;YAEAqB,gBAAgB;QAClB;QAEAG,OAAOC,MAAM,CAAC1B,UAAU2B,KAAK,EAAE;YAAEC,UAAUzB;QAAS;QACpDd,gBAAgBY,QAAQD,WAAW;YAAEK;YAAWD;YAAYD;QAAS,GAClEoC,IAAI,CAAC,CAAC,EAAEC,CAAC,EAAEC,CAAC,EAAEC,cAAc,EAAErC,WAAWsC,iBAAiB,EAAE;YAC3D,8CAA8C;YAC9C,mDAAmD;YACnD,IAAI5C,aAAa;gBACf;YACF;YAEAP,kBAAkB;gBAAEU;gBAAOwC;YAAe;YAC1CjD,sBAAsB;gBACpBO;gBACA0C;gBACArC,WAAWsC;gBACXC,aAAa;oBAAEJ;oBAAGC;gBAAE;gBACpBI,QAAQ,AAACrC,CAAAA,CAAAA,yBAAAA,mCAAAA,aAAcsC,gBAAgB,KAAI,CAAA,KAAM;gBACjD3C;gBACAG;YACF;YAEAN,UAAU+C,aAAa,CACrB,IAAIC,YAAyCrD,uBAAuB;gBAClEsD,QAAQ;oBACN,8EAA8E;oBAC9E,+EAA+E;oBAC/E,qCAAqC;oBACrC5C,WAAWsC;gBACb;YACF;QAEJ,GACCO,KAAK,CAACC,CAAAA;YACL,yDAAyD;YACzD,sBAAsB;YACtB,uEAAuE;YACvE,wFAAwF;YACxF,4GAA4G;YAC5G,0GAA0G;YAC1G,sCAAsC;YACtC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC,kDAAkDL;YAClE;QACF;IACJ;IAEA,MAAMxC,iBAAiBpB,SAAS,IAAMyC;IAEtC,MAAMnB,UAAU;QACdd,cAAc;QAEd,IAAIS,cAAc;YAChBA,aAAaiD,mBAAmB,CAAC,UAAU9C;YAC3CH,aAAaiD,mBAAmB,CAAC,UAAU9C;QAC7C;QAEAY,cAAcU,OAAO,CAACC,CAAAA;YACpBA,aAAauB,mBAAmB,CAAC,UAAU9C;QAC7C;QACAY,cAAcmC,KAAK;QAEnB5C,2BAAAA,qCAAAA,eAAgB6C,UAAU;IAC5B;IAEA,IAAInD,cAAc;QAChBA,aAAa4B,gBAAgB,CAAC,UAAUzB,gBAAgB;YAAE0B,SAAS;QAAK;QACxE7B,aAAa4B,gBAAgB,CAAC,UAAUzB;IAC1C;IAEA,wCAAwC;IACxCA;IAEA,OAAO;QACLA;QACAE;IACF;AACF"}
+{"version":3,"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport type { OnPositioningEndEventDetail, PositionManager, PositioningPlacement, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';\nimport { listScrollParents } from './utils/listScrollParents';\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createResizeObserver } from './utils/createResizeObserver';\n\ninterface PositionManagerOptions {\n  /**\n   * The positioned element\n   */\n  container: HTMLElement;\n  /**\n   * Element that the container will be anchored to\n   */\n  target: TargetElement;\n  /**\n   * Arrow that points from the container to the target\n   */\n  arrow: HTMLElement | null;\n  /**\n   * The value of the css `position` property\n   * @default absolute\n   */\n  strategy: Strategy;\n  /**\n   * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n   */\n  middleware: Middleware[];\n  /**\n   * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n   */\n  placement?: Placement;\n  /**\n   * Modifies whether popover is positioned using transform.\n   * @default true\n   */\n  useTransform?: boolean;\n  /**\n   * Disables the resize observer that updates position on target or dimension change\n   */\n  disableUpdateOnResize?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  let isDestroyed = false;\n  const {\n    container,\n    target,\n    arrow,\n    strategy,\n    middleware,\n    placement,\n    useTransform = true,\n    disableUpdateOnResize = false,\n  } = options;\n  const targetWindow = container.ownerDocument.defaultView;\n  if (!target || !container || !targetWindow) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  // When the dimensions of the target or the container change - trigger a position update\n  const resizeObserver = disableUpdateOnResize\n    ? null\n    : createResizeObserver(targetWindow, entries => {\n        // If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element\n        // In this case don't update and let users update imperatively\n        const shouldUpdateOnResize = entries.every(entry => {\n          return entry.contentRect.width > 0 && entry.contentRect.height > 0;\n        });\n\n        if (shouldUpdateOnResize) {\n          updatePosition();\n        }\n      });\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n\n  // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n  // Without this scroll jumps can occur when the element is rendered initially and receives focus\n  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n  const forceUpdate = () => {\n    // debounced update can still occur afterwards\n    // early return to avoid memory leaks\n    if (isDestroyed) {\n      return;\n    }\n\n    if (isFirstUpdate) {\n      listScrollParents(container).forEach(scrollParent => scrollParents.add(scrollParent));\n      if (isHTMLElement(target)) {\n        listScrollParents(target).forEach(scrollParent => scrollParents.add(scrollParent));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition, { passive: true });\n      });\n\n      resizeObserver?.observe(container);\n      if (isHTMLElement(target)) {\n        resizeObserver?.observe(target);\n      }\n\n      isFirstUpdate = false;\n    }\n\n    Object.assign(container.style, { position: strategy });\n    computePosition(target, container, { placement, middleware, strategy })\n      .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n        // Promise can still resolve after destruction\n        // early return to avoid applying outdated position\n        if (isDestroyed) {\n          return;\n        }\n\n        writeArrowUpdates({ arrow, middlewareData });\n        writeContainerUpdates({\n          container,\n          middlewareData,\n          placement: computedPlacement,\n          coordinates: { x, y },\n          lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n          strategy,\n          useTransform,\n        });\n\n        container.dispatchEvent(\n          new CustomEvent<OnPositioningEndEventDetail>(POSITIONING_END_EVENT, {\n            detail: {\n              // Cast from Floating UI's Placement to the Fluent-owned PositioningPlacement.\n              // These are equivalent string unions; the cast avoids leaking @floating-ui/dom\n              // types into the public API surface.\n              placement: computedPlacement satisfies PositioningPlacement,\n            },\n          }),\n        );\n      })\n      .catch(err => {\n        // https://github.com/floating-ui/floating-ui/issues/1845\n        // FIXME for node > 14\n        // node 15 introduces promise rejection which means that any components\n        // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n        // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n        // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n        // will actually be counter productive\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error('[usePositioning]: Failed to calculate position', err);\n        }\n      });\n  };\n\n  const updatePosition = debounce(() => forceUpdate());\n\n  const dispose = () => {\n    isDestroyed = true;\n\n    if (targetWindow) {\n      targetWindow.removeEventListener('scroll', updatePosition);\n      targetWindow.removeEventListener('resize', updatePosition);\n    }\n\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener('scroll', updatePosition);\n    });\n    scrollParents.clear();\n\n    resizeObserver?.disconnect();\n  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition, { passive: true });\n    targetWindow.addEventListener('resize', updatePosition);\n  }\n\n  // Update the position on initialization\n  updatePosition();\n\n  return {\n    updatePosition,\n    dispose,\n  };\n}\n"],"names":["computePosition","isHTMLElement","debounce","writeArrowUpdates","writeContainerUpdates","listScrollParents","POSITIONING_END_EVENT","createResizeObserver","createPositionManager","options","isDestroyed","container","target","arrow","strategy","middleware","placement","useTransform","disableUpdateOnResize","targetWindow","ownerDocument","defaultView","updatePosition","undefined","dispose","resizeObserver","entries","shouldUpdateOnResize","every","entry","contentRect","width","height","isFirstUpdate","scrollParents","Set","Object","assign","style","position","left","top","margin","forceUpdate","forEach","scrollParent","add","addEventListener","passive","observe","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","dispatchEvent","CustomEvent","detail","catch","err","process","env","NODE_ENV","console","error","removeEventListener","clear","disconnect"],"mappings":"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"}

package/lib/createSlideStyles.js

@@ -1,5 +1,5 @@
-import { tokens } from '@fluentui/react-theme';
-import { DATA_POSITIONING_PLACEMENT } from './constants';
+import { tokens } from "@fluentui/react-theme";
+import { DATA_POSITIONING_PLACEMENT } from "./constants.js";
 /**
  * Creates animation styles so that positioned elements slide in from the main axis
  * @param mainAxis - distance than the element sides for

package/lib/createSlideStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes opacity: 1\n    },\n  };\n\n  const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n  const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n  return {\n    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\n    animationComposition: 'accumulate',\n    animationDuration: tokens.durationSlower,\n    animationTimingFunction: tokens.curveDecelerateMid,\n    [slideDistanceVarX]: `0px`,\n    [slideDistanceVarY]: `${mainAxis}px`,\n    [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n      [slideDistanceVarX]: `-${mainAxis}px`,\n      [slideDistanceVarY]: '0px',\n    },\n\n    [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n      [slideDistanceVarX]: '0px',\n      [slideDistanceVarY]: `-${mainAxis}px`,\n    },\n\n    [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n      [slideDistanceVarX]: `${mainAxis}px`,\n      [slideDistanceVarY]: '0px',\n    },\n\n    animationName: [\n      fadeIn,\n      {\n        from: {\n          transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n        },\n        to: {},\n      },\n    ],\n\n    // Note: at-rules have more specificity in Griffel\n    '@media(prefers-reduced-motion)': {\n      [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n        animationDuration: '1ms',\n        animationName: fadeIn,\n      },\n    },\n\n    // Tested in Firefox 79\n    '@supports not (animation-composition: accumulate)': {\n      [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n        animationName: fadeIn,\n      },\n    },\n  };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,cAAc;AAEzD;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,2BAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,2BAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,2BAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,GAAGL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes opacity: 1\n    },\n  };\n\n  const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n  const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n  return {\n    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\n    animationComposition: 'accumulate',\n    animationDuration: tokens.durationSlower,\n    animationTimingFunction: tokens.curveDecelerateMid,\n    [slideDistanceVarX]: `0px`,\n    [slideDistanceVarY]: `${mainAxis}px`,\n    [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n      [slideDistanceVarX]: `-${mainAxis}px`,\n      [slideDistanceVarY]: '0px',\n    },\n\n    [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n      [slideDistanceVarX]: '0px',\n      [slideDistanceVarY]: `-${mainAxis}px`,\n    },\n\n    [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n      [slideDistanceVarX]: `${mainAxis}px`,\n      [slideDistanceVarY]: '0px',\n    },\n\n    animationName: [\n      fadeIn,\n      {\n        from: {\n          transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n        },\n        to: {},\n      },\n    ],\n\n    // Note: at-rules have more specificity in Griffel\n    '@media(prefers-reduced-motion)': {\n      [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n        animationDuration: '1ms',\n        animationName: fadeIn,\n      },\n    },\n\n    // Tested in Firefox 79\n    '@supports not (animation-composition: accumulate)': {\n      [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n        animationName: fadeIn,\n      },\n    },\n  };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,iBAAc;AAEzD;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,2BAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,2BAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,2BAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,GAAGL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}

package/lib/hooks/useSafeZoneArea/SafeZoneArea.js

@@ -1,13 +1,13 @@
 'use client';
-import { mergeClasses } from '@griffel/react';
-import { useId } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { getRectCorners } from './getRectCorners';
-import { getMouseAnchor } from './getMouseAnchor';
-import { pointsToSvgPath } from './pointsToSvgPath';
-import { useStyles } from './SafeZoneArea.styles';
-import { computeOutsideClipPath } from './computeOutsideClipPath';
+import { mergeClasses } from "@griffel/react";
+import { useId } from "@fluentui/react-utilities";
+import * as React from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { getRectCorners } from "./getRectCorners.js";
+import { getMouseAnchor } from "./getMouseAnchor.js";
+import { pointsToSvgPath } from "./pointsToSvgPath.js";
+import { useStyles } from "./SafeZoneArea.styles.js";
+import { computeOutsideClipPath } from "./computeOutsideClipPath.js";
 // ---
 const EMPTY_RECT = {
     top: 0,

package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { getRectCorners } from './getRectCorners';\nimport { getMouseAnchor } from './getMouseAnchor';\nimport { pointsToSvgPath } from './pointsToSvgPath';\nimport { useStyles } from './SafeZoneArea.styles';\nimport type { Point } from './types';\nimport { computeOutsideClipPath } from './computeOutsideClipPath';\n\nexport type SafeZoneAreaImperativeHandle = {\n  updateSVG: (options: { containerRect: DOMRect; targetRect: DOMRect; mouseCoordinates: Point }) => void;\n};\n\nexport type SafeZoneAreaProps = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug: boolean;\n\n  /** A reference to the SafeZoneArea imperative handle. */\n  imperativeRef: React.Ref<SafeZoneAreaImperativeHandle>;\n\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseEnter: (e: React.MouseEvent) => void;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseMove: (e: React.MouseEvent) => void;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseLeave: (e: React.MouseEvent) => void;\n\n  stateStore: ReturnType<typeof createSafeZoneAreaStateStore>;\n};\n\n/**\n * @internal\n */\ntype SafeZoneAreaState = {\n  containerRect: DOMRect;\n  targetRect: DOMRect;\n  mouseCoordinates: Point;\n};\n\n// ---\n\nconst EMPTY_RECT: DOMRect = {\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n  x: 0,\n  y: 0,\n  toJSON() {\n    return '';\n  },\n};\n\nexport function isSameRect(a: DOMRect, b: DOMRect): boolean {\n  return (\n    a.top === b.top &&\n    a.right === b.right &&\n    a.bottom === b.bottom &&\n    a.left === b.left &&\n    a.width === b.width &&\n    a.height === b.height\n  );\n}\n\nexport function isSameCoordinates(a: Point, b: Point): boolean {\n  return a[0] === b[0] && a[1] === b[1];\n}\n\n// ---\n\n/**\n * A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state\n * to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.\n *\n * Draws two shapes:\n * - a triangle that points to the target element which is an actual safe zone\n * - a rectangle for a clip path that clips out the target element\n *\n * @internal\n */\nexport const SafeZoneArea = React.memo((props: SafeZoneAreaProps): JSXElement => {\n  const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;\n\n  const clipPathId = useId();\n  const styles = useStyles();\n\n  const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n\n  const [state, setState] = React.useState<SafeZoneAreaState>(() => ({\n    containerRect: EMPTY_RECT,\n    targetRect: EMPTY_RECT,\n    mouseCoordinates: [0, 0],\n  }));\n\n  React.useImperativeHandle(\n    props.imperativeRef,\n    () => ({\n      updateSVG(newState) {\n        setState(prevState => {\n          // Heads up!\n          // A small optimization to avoid unnecessary re-renders\n          if (\n            isSameRect(prevState.containerRect, newState.containerRect) &&\n            isSameRect(prevState.targetRect, newState.targetRect) &&\n            isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)\n          ) {\n            return prevState;\n          }\n\n          return newState;\n        });\n      },\n    }),\n    [],\n  );\n\n  const { containerRect, targetRect, mouseCoordinates } = state;\n\n  const topOffset = Math.min(targetRect.top, containerRect.top);\n  const leftOffset = Math.min(targetRect.left, containerRect.left);\n  const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);\n  const rightOffset = Math.max(targetRect.right, containerRect.right);\n\n  // ---\n\n  const containerCorners = getRectCorners(containerRect, [leftOffset, topOffset]);\n  const targetCorners = getRectCorners(targetRect, [leftOffset, topOffset]);\n\n  // Heads up!\n  // The SVG coordinate system starts at the top-left corner of the SVG element,\n  // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.\n  const relativeMouseCoordinates: Point = [mouseCoordinates[0] - leftOffset, mouseCoordinates[1] - topOffset];\n  const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);\n\n  const triangleA = [mouseAnchor, containerCorners.topLeft, containerCorners.topRight];\n  const triangleB = [mouseAnchor, containerCorners.topRight, containerCorners.bottomRight];\n  const triangleC = [mouseAnchor, containerCorners.bottomRight, containerCorners.bottomLeft];\n  const triangleD = [mouseAnchor, containerCorners.bottomLeft, containerCorners.topLeft];\n\n  const svgWidth = rightOffset - leftOffset;\n  const svgHeight = bottomOffset - topOffset;\n\n  const clipPath = computeOutsideClipPath(\n    svgWidth,\n    svgHeight,\n    {\n      x: targetCorners.topLeft[0],\n      y: targetCorners.topLeft[1],\n      width: targetRect.width,\n      height: targetRect.height,\n    },\n    {\n      x: containerCorners.topLeft[0],\n      y: containerCorners.topLeft[1],\n      width: containerRect.width,\n      height: containerRect.height,\n    },\n  );\n\n  return (\n    <div className={mergeClasses(styles.wrapper, active && styles.wrapperActive)} data-safe-zone=\"\">\n      {active ? (\n        <svg\n          aria-hidden\n          className={styles.svg}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          ref={svgRef}\n          style={{\n            width: `${svgWidth}px`,\n            height: `${svgHeight}px`,\n            transform: `translate(${leftOffset}px, ${topOffset}px)`,\n          }}\n        >\n          <g\n            className={mergeClasses(styles.triangle, debug && styles.triangleDebug)}\n            clipPath={`url(#${clipPathId})`}\n            onMouseEnter={onMouseEnter}\n            onMouseMove={onMouseMove}\n            onMouseLeave={onMouseLeave}\n          >\n            <path d={pointsToSvgPath(triangleA)} />\n            <path d={pointsToSvgPath(triangleB)} />\n            <path d={pointsToSvgPath(triangleC)} />\n            <path d={pointsToSvgPath(triangleD)} />\n          </g>\n\n          <clipPath id={clipPathId}>\n            <path d={clipPath} />\n          </clipPath>\n\n          {debug && <path className={styles.rectDebug} d={clipPath} />}\n        </svg>\n      ) : null}\n    </div>\n  );\n});\n"],"names":["mergeClasses","useId","React","useSyncExternalStore","getRectCorners","getMouseAnchor","pointsToSvgPath","useStyles","computeOutsideClipPath","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","isSameRect","a","b","isSameCoordinates","SafeZoneArea","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","styles","active","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","div","className","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","id","rectDebug"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { getRectCorners } from './getRectCorners';\nimport { getMouseAnchor } from './getMouseAnchor';\nimport { pointsToSvgPath } from './pointsToSvgPath';\nimport { useStyles } from './SafeZoneArea.styles';\nimport type { Point } from './types';\nimport { computeOutsideClipPath } from './computeOutsideClipPath';\n\nexport type SafeZoneAreaImperativeHandle = {\n  updateSVG: (options: { containerRect: DOMRect; targetRect: DOMRect; mouseCoordinates: Point }) => void;\n};\n\nexport type SafeZoneAreaProps = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug: boolean;\n\n  /** A reference to the SafeZoneArea imperative handle. */\n  imperativeRef: React.Ref<SafeZoneAreaImperativeHandle>;\n\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseEnter: (e: React.MouseEvent) => void;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseMove: (e: React.MouseEvent) => void;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onMouseLeave: (e: React.MouseEvent) => void;\n\n  stateStore: ReturnType<typeof createSafeZoneAreaStateStore>;\n};\n\n/**\n * @internal\n */\ntype SafeZoneAreaState = {\n  containerRect: DOMRect;\n  targetRect: DOMRect;\n  mouseCoordinates: Point;\n};\n\n// ---\n\nconst EMPTY_RECT: DOMRect = {\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n  x: 0,\n  y: 0,\n  toJSON() {\n    return '';\n  },\n};\n\nexport function isSameRect(a: DOMRect, b: DOMRect): boolean {\n  return (\n    a.top === b.top &&\n    a.right === b.right &&\n    a.bottom === b.bottom &&\n    a.left === b.left &&\n    a.width === b.width &&\n    a.height === b.height\n  );\n}\n\nexport function isSameCoordinates(a: Point, b: Point): boolean {\n  return a[0] === b[0] && a[1] === b[1];\n}\n\n// ---\n\n/**\n * A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state\n * to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.\n *\n * Draws two shapes:\n * - a triangle that points to the target element which is an actual safe zone\n * - a rectangle for a clip path that clips out the target element\n *\n * @internal\n */\nexport const SafeZoneArea = React.memo((props: SafeZoneAreaProps): JSXElement => {\n  const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;\n\n  const clipPathId = useId();\n  const styles = useStyles();\n\n  const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n\n  const [state, setState] = React.useState<SafeZoneAreaState>(() => ({\n    containerRect: EMPTY_RECT,\n    targetRect: EMPTY_RECT,\n    mouseCoordinates: [0, 0],\n  }));\n\n  React.useImperativeHandle(\n    props.imperativeRef,\n    () => ({\n      updateSVG(newState) {\n        setState(prevState => {\n          // Heads up!\n          // A small optimization to avoid unnecessary re-renders\n          if (\n            isSameRect(prevState.containerRect, newState.containerRect) &&\n            isSameRect(prevState.targetRect, newState.targetRect) &&\n            isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)\n          ) {\n            return prevState;\n          }\n\n          return newState;\n        });\n      },\n    }),\n    [],\n  );\n\n  const { containerRect, targetRect, mouseCoordinates } = state;\n\n  const topOffset = Math.min(targetRect.top, containerRect.top);\n  const leftOffset = Math.min(targetRect.left, containerRect.left);\n  const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);\n  const rightOffset = Math.max(targetRect.right, containerRect.right);\n\n  // ---\n\n  const containerCorners = getRectCorners(containerRect, [leftOffset, topOffset]);\n  const targetCorners = getRectCorners(targetRect, [leftOffset, topOffset]);\n\n  // Heads up!\n  // The SVG coordinate system starts at the top-left corner of the SVG element,\n  // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.\n  const relativeMouseCoordinates: Point = [mouseCoordinates[0] - leftOffset, mouseCoordinates[1] - topOffset];\n  const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);\n\n  const triangleA = [mouseAnchor, containerCorners.topLeft, containerCorners.topRight];\n  const triangleB = [mouseAnchor, containerCorners.topRight, containerCorners.bottomRight];\n  const triangleC = [mouseAnchor, containerCorners.bottomRight, containerCorners.bottomLeft];\n  const triangleD = [mouseAnchor, containerCorners.bottomLeft, containerCorners.topLeft];\n\n  const svgWidth = rightOffset - leftOffset;\n  const svgHeight = bottomOffset - topOffset;\n\n  const clipPath = computeOutsideClipPath(\n    svgWidth,\n    svgHeight,\n    {\n      x: targetCorners.topLeft[0],\n      y: targetCorners.topLeft[1],\n      width: targetRect.width,\n      height: targetRect.height,\n    },\n    {\n      x: containerCorners.topLeft[0],\n      y: containerCorners.topLeft[1],\n      width: containerRect.width,\n      height: containerRect.height,\n    },\n  );\n\n  return (\n    <div className={mergeClasses(styles.wrapper, active && styles.wrapperActive)} data-safe-zone=\"\">\n      {active ? (\n        <svg\n          aria-hidden\n          className={styles.svg}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          ref={svgRef}\n          style={{\n            width: `${svgWidth}px`,\n            height: `${svgHeight}px`,\n            transform: `translate(${leftOffset}px, ${topOffset}px)`,\n          }}\n        >\n          <g\n            className={mergeClasses(styles.triangle, debug && styles.triangleDebug)}\n            clipPath={`url(#${clipPathId})`}\n            onMouseEnter={onMouseEnter}\n            onMouseMove={onMouseMove}\n            onMouseLeave={onMouseLeave}\n          >\n            <path d={pointsToSvgPath(triangleA)} />\n            <path d={pointsToSvgPath(triangleB)} />\n            <path d={pointsToSvgPath(triangleC)} />\n            <path d={pointsToSvgPath(triangleD)} />\n          </g>\n\n          <clipPath id={clipPathId}>\n            <path d={clipPath} />\n          </clipPath>\n\n          {debug && <path className={styles.rectDebug} d={clipPath} />}\n        </svg>\n      ) : null}\n    </div>\n  );\n});\n"],"names":["mergeClasses","useId","React","useSyncExternalStore","getRectCorners","getMouseAnchor","pointsToSvgPath","useStyles","computeOutsideClipPath","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","isSameRect","a","b","isSameCoordinates","SafeZoneArea","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","styles","active","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","div","className","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","id","rectDebug"],"mappings":"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"}