@fluentui/react-positioning 0.0.0-nightly-20230501-0418.1 → 0.0.0-nightly-20230503-0419.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Mon, 01 May 2023 04:24:02 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20230501-0418.1",
-      "version": "0.0.0-nightly-20230501-0418.1",
+      "date": "Wed, 03 May 2023 04:25:41 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20230503-0419.1",
+      "version": "0.0.0-nightly-20230503-0419.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,20 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Mon, 01 May 2023 04:24:02 GMT and should not be manually modified.
+This log was last generated on Wed, 03 May 2023 04:25:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230501-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20230501-0418.1)
+## [0.0.0-nightly-20230503-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20230503-0419.1)
 
-Mon, 01 May 2023 04:24:02 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.10..@fluentui/react-positioning_v0.0.0-nightly-20230501-0418.1)
+Wed, 03 May 2023 04:25:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.10..@fluentui/react-positioning_v0.0.0-nightly-20230503-0419.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
 
 ## [9.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.10)
 

package/dist/index.d.ts

@@ -0,0 +1,267 @@
+import type { GriffelStyle } from '@griffel/react';
+import * as React_2 from 'react';
+
+export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
+
+export declare type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
+
+/**
+ * @internal
+ * 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.
+ */
+export declare function createArrowHeightStyles(arrowHeight: number): {
+    width: string;
+    height: string;
+};
+
+/**
+ * @internal
+ * 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,
+ *   )
+ * ```
+ */
+export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
+
+/**
+ * @internal
+ * Options parameter for the createArrowStyles function
+ */
+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 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: Rect;
+    targetRect: Rect;
+    position: Position;
+    alignment?: Alignment;
+};
+
+export declare type OffsetObject = {
+    crossAxis?: number;
+    mainAxis: number;
+};
+
+export declare type OffsetShorthand = number;
+
+export declare type Position = 'above' | 'below' | 'before' | 'after';
+
+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) => void;
+};
+
+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?: Boundary | null;
+    /** The element which will define the boundaries of the positioned element for the overflow behavior. */
+    overflowBoundary?: Boundary | 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
+     */
+    positionFixed?: boolean;
+    /**
+     * 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 max-height and max-width on the positioned element to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-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[];
+}
+
+export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned'> {
+    /** 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 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;
+};
+
+declare type Rect = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+
+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: UsePositioningOptions): UsePositioningReturn;
+
+/**
+ * @internal
+ * 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
+ *
+ * @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) | undefined) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
+
+declare interface UsePositioningOptions extends PositioningProps, Pick<PositioningOptions, 'fallbackPositions' | 'pinned'> {
+    /**
+     * If false, does not position anything
+     */
+    enabled?: boolean;
+}
+
+declare interface UsePositioningReturn {
+    targetRef: React_2.MutableRefObject<any>;
+    containerRef: React_2.MutableRefObject<any>;
+    arrowRef: React_2.MutableRefObject<any>;
+}
+
+export { }

package/lib/constants.js

@@ -0,0 +1,5 @@
+export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
+export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
+export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
+export const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
+//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"],"mappings":"AAAA,OAAO,MAAMA,6BAAA,GAAgC;AAC7C,OAAO,MAAMC,wBAAA,GAA2B;AACxC,OAAO,MAAMC,uBAAA,GAA0B;AACvC,OAAO,MAAMC,0BAAA,GAA6B"}

package/lib/createArrowStyles.js

@@ -0,0 +1,87 @@
+import { shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * @internal
+ * 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,
+ *   )
+ * ```
+ */
+export function createArrowStyles(options) {
+  const {
+    arrowHeight,
+    borderWidth = '1px',
+    borderStyle = 'solid',
+    borderColor = tokens.colorTransparentStroke
+  } = options;
+  return {
+    position: 'absolute',
+    backgroundColor: 'inherit',
+    visibility: 'hidden',
+    zIndex: -1,
+    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
+    '::before': {
+      content: '""',
+      visibility: 'visible',
+      position: 'absolute',
+      boxSizing: 'border-box',
+      width: 'inherit',
+      height: 'inherit',
+      backgroundColor: 'inherit',
+      ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
+      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+      borderBottomRightRadius: tokens.borderRadiusSmall,
+      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+    },
+    // Popper sets data-popper-placement on the root element, which is used to align the arrow
+    ':global([data-popper-placement^="top"])': {
+      bottom: `-${borderWidth}`,
+      '--angle': '0'
+    },
+    ':global([data-popper-placement^="right"])': {
+      left: `-${borderWidth} /* @noflip */`,
+      '--angle': '90deg'
+    },
+    ':global([data-popper-placement^="bottom"])': {
+      top: `-${borderWidth}`,
+      '--angle': '180deg'
+    },
+    ':global([data-popper-placement^="left"])': {
+      right: `-${borderWidth} /* @noflip */`,
+      '--angle': '270deg'
+    }
+  };
+}
+/**
+ * @internal
+ * 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.
+ */
+export function createArrowHeightStyles(arrowHeight) {
+  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
+  // Multiply the triangle's height by sqrt(2) to get length of its edges.
+  const edgeLength = `${1.414 * arrowHeight}px`;
+  return {
+    width: edgeLength,
+    height: edgeLength
+  };
+}
+//# sourceMappingURL=createArrowStyles.js.map

package/lib/createArrowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"sources":["../src/createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n  /**\n   * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n   *\n   * This can be undefined to leave out the arrow size styles. You must then add styles created by\n   * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n   */\n  arrowHeight: number | undefined;\n\n  /**\n   * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n   *\n   * @defaultvalue 1px\n   */\n  borderWidth?: GriffelStyle['borderBottomWidth'];\n\n  /**\n   * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n   *\n   * @defaultvalue solid\n   */\n  borderStyle?: GriffelStyle['borderBottomStyle'];\n\n  /**\n   * The borderColor of the arrow. Should be the same borderColor as the parent element.\n   *\n   * @defaultvalue tokens.colorTransparentStroke\n   */\n  borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n *   makeStyles({\n *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n *     mediumArrow: createArrowHeightStyles(4),\n *     smallArrow: createArrowHeightStyles(2),\n *   })\n *   ...\n *\n *   state.arrowWithSize.className = styles.arrowWithSize;\n *   state.arrowWithoutSize.className = mergeClasses(\n *     styles.arrowWithoutSize,\n *     state.smallArrow && styles.smallArrow,\n *     state.mediumArrow && styles.mediumArrow,\n *   )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n  const {\n    arrowHeight,\n    borderWidth = '1px',\n    borderStyle = 'solid',\n    borderColor = tokens.colorTransparentStroke,\n  } = options;\n\n  return {\n    position: 'absolute',\n    backgroundColor: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n    '::before': {\n      content: '\"\"',\n      visibility: 'visible',\n      position: 'absolute',\n      boxSizing: 'border-box',\n      width: 'inherit',\n      height: 'inherit',\n      backgroundColor: 'inherit',\n      ...shorthands.borderRight(\n        `${borderWidth} /* @noflip */`,\n        `${borderStyle} /* @noflip */`,\n        `${borderColor} /* @noflip */`,\n      ),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': {\n      bottom: `-${borderWidth}`,\n      '--angle': '0',\n    },\n    ':global([data-popper-placement^=\"right\"])': {\n      left: `-${borderWidth} /* @noflip */`,\n      '--angle': '90deg',\n    },\n    ':global([data-popper-placement^=\"bottom\"])': {\n      top: `-${borderWidth}`,\n      '--angle': '180deg',\n    },\n    ':global([data-popper-placement^=\"left\"])': {\n      right: `-${borderWidth} /* @noflip */`,\n      '--angle': '270deg',\n    },\n  };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n  // Multiply the triangle's height by sqrt(2) to get length of its edges.\n  const edgeLength = `${1.414 * arrowHeight}px`;\n  return { width: edgeLength, height: edgeLength };\n}\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ;AAC3B,SAASC,MAAM,QAAQ;AAsCvB;;;;;;;;;;;;;;;;;;;;;;;AAuBA,OAAO,SAASC,kBAAkBC,OAAiC,EAAgB;EACjF,MAAM;IACJC,WAAA;IACAC,WAAA,GAAc;IACdC,WAAA,GAAc;IACdC,WAAA,GAAcN,MAAA,CAAOO;EAAsB,CAC5C,GAAGL,OAAA;EAEJ,OAAO;IACLM,QAAA,EAAU;IACVC,eAAA,EAAiB;IACjBC,UAAA,EAAY;IACZC,MAAA,EAAQ,CAAC;IAET,IAAIR,WAAA,IAAeS,uBAAA,CAAwBT,WAAA,CAAY;IAEvD,YAAY;MACVU,OAAA,EAAS;MACTH,UAAA,EAAY;MACZF,QAAA,EAAU;MACVM,SAAA,EAAW;MACXC,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRP,eAAA,EAAiB;MACjB,GAAGV,UAAA,CAAWkB,WAAW,CACtB,GAAEb,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,CAC/B;MACD,GAAGP,UAAA,CAAWmB,YAAY,CAACd,WAAA,EAAaC,WAAA,EAAaC,WAAA,CAAY;MACjEa,uBAAA,EAAyBnB,MAAA,CAAOoB,iBAAiB;MACjDC,SAAA,EAAW;IACb;IAEA;IACA,2CAA2C;MACzCC,MAAA,EAAS,IAAGlB,WAAY,EAAC;MACzB,WAAW;IACb;IACA,6CAA6C;MAC3CmB,IAAA,EAAO,IAAGnB,WAAY,gBAAe;MACrC,WAAW;IACb;IACA,8CAA8C;MAC5CoB,GAAA,EAAM,IAAGpB,WAAY,EAAC;MACtB,WAAW;IACb;IACA,4CAA4C;MAC1CqB,KAAA,EAAQ,IAAGrB,WAAY,gBAAe;MACtC,WAAW;IACb;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,SAASQ,wBAAwBT,WAAmB,EAAE;EAC3D;EACA;EACA,MAAMuB,UAAA,GAAc,GAAE,QAAQvB,WAAY,IAAG;EAC7C,OAAO;IAAEY,KAAA,EAAOW,UAAA;IAAYV,MAAA,EAAQU;EAAW;AACjD"}

package/lib/createPositionManager.js

@@ -0,0 +1,120 @@
+import { computePosition } from '@floating-ui/dom';
+import { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';
+import { isHTMLElement } from '@fluentui/react-utilities';
+/**
+ * @internal
+ * @returns manager that handles positioning out of the react lifecycle
+ */
+export function createPositionManager(options) {
+  const {
+    container,
+    target,
+    arrow,
+    strategy,
+    middleware,
+    placement
+  } = options;
+  let isDestroyed = false;
+  if (!target || !container) {
+    return {
+      updatePosition: () => undefined,
+      dispose: () => undefined
+    };
+  }
+  let isFirstUpdate = true;
+  const scrollParents = new Set();
+  const targetWindow = container.ownerDocument.defaultView;
+  // When the container is first resolved, set position `fixed` to avoid scroll jumps.
+  // Without this scroll jumps can occur when the element is rendered initially and receives focus
+  Object.assign(container.style, {
+    position: 'fixed',
+    left: 0,
+    top: 0,
+    margin: 0
+  });
+  const forceUpdate = () => {
+    // debounced update can still occur afterwards
+    // early return to avoid memory leaks
+    if (isDestroyed) {
+      return;
+    }
+    if (isFirstUpdate) {
+      scrollParents.add(getScrollParent(container));
+      if (isHTMLElement(target)) {
+        scrollParents.add(getScrollParent(target));
+      }
+      scrollParents.forEach(scrollParent => {
+        scrollParent.addEventListener('scroll', updatePosition);
+      });
+      isFirstUpdate = false;
+    }
+    Object.assign(container.style, {
+      position: strategy
+    });
+    computePosition(target, container, {
+      placement,
+      middleware,
+      strategy
+    }).then(({
+      x,
+      y,
+      middlewareData,
+      placement: computedPlacement
+    }) => {
+      // Promise can still resolve after destruction
+      // early return to avoid applying outdated position
+      if (isDestroyed) {
+        return;
+      }
+      writeArrowUpdates({
+        arrow,
+        middlewareData
+      });
+      writeContainerUpdates({
+        container,
+        middlewareData,
+        placement: computedPlacement,
+        coordinates: {
+          x,
+          y
+        },
+        lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
+        strategy
+      });
+    }).catch(err => {
+      // https://github.com/floating-ui/floating-ui/issues/1845
+      // FIXME for node > 14
+      // node 15 introduces promise rejection which means that any components
+      // tests need to be `it('', async () => {})` otherwise there can be race conditions with
+      // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
+      // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
+      // will actually be counter productive
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error('[usePositioning]: Failed to calculate position', err);
+      }
+    });
+  };
+  const updatePosition = debounce(() => forceUpdate());
+  const dispose = () => {
+    isDestroyed = true;
+    if (targetWindow) {
+      targetWindow.removeEventListener('scroll', updatePosition);
+      targetWindow.removeEventListener('resize', updatePosition);
+    }
+    scrollParents.forEach(scrollParent => {
+      scrollParent.removeEventListener('scroll', updatePosition);
+    });
+  };
+  if (targetWindow) {
+    targetWindow.addEventListener('scroll', updatePosition);
+    targetWindow.addEventListener('resize', updatePosition);
+  }
+  // Update the position on initialization
+  updatePosition();
+  return {
+    updatePosition,
+    dispose
+  };
+}
+//# sourceMappingURL=createPositionManager.js.map

package/lib/createPositionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\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\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  const { container, target, arrow, strategy, middleware, placement } = options;\n  let isDestroyed = false;\n  if (!target || !container) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n  const targetWindow = container.ownerDocument.defaultView;\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      scrollParents.add(getScrollParent(container));\n      if (isHTMLElement(target)) {\n        scrollParents.add(getScrollParent(target));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition);\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        });\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  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition);\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"],"mappings":"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"}

package/lib/createVirtualElementFromClick.js

@@ -0,0 +1,25 @@
+/**
+ * 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 function createVirtualElementFromClick(nativeEvent) {
+  const left = nativeEvent.clientX;
+  const top = nativeEvent.clientY;
+  const right = left + 1;
+  const bottom = top + 1;
+  function getBoundingClientRect() {
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      x: left,
+      y: top,
+      height: 1,
+      width: 1
+    };
+  }
+  return {
+    getBoundingClientRect
+  };
+}
+//# sourceMappingURL=createVirtualElementFromClick.js.map

package/lib/createVirtualElementFromClick.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"sources":["../src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n  const left = nativeEvent.clientX;\n  const top = nativeEvent.clientY;\n  const right = left + 1;\n  const bottom = top + 1;\n\n  function getBoundingClientRect() {\n    return {\n      left,\n      top,\n      right,\n      bottom,\n      x: left,\n      y: top,\n      height: 1,\n      width: 1,\n    };\n  }\n\n  return {\n    getBoundingClientRect,\n  };\n}\n"],"mappings":"AAEA;;;GAIA,OAAO,SAASA,8BAA8BC,WAAuB,EAA6B;EAChG,MAAMC,IAAA,GAAOD,WAAA,CAAYE,OAAO;EAChC,MAAMC,GAAA,GAAMH,WAAA,CAAYI,OAAO;EAC/B,MAAMC,KAAA,GAAQJ,IAAA,GAAO;EACrB,MAAMK,MAAA,GAASH,GAAA,GAAM;EAErB,SAASI,sBAAA,EAAwB;IAC/B,OAAO;MACLN,IAAA;MACAE,GAAA;MACAE,KAAA;MACAC,MAAA;MACAE,CAAA,EAAGP,IAAA;MACHQ,CAAA,EAAGN,GAAA;MACHO,MAAA,EAAQ;MACRC,KAAA,EAAO;IACT;EACF;EAEA,OAAO;IACLJ;EACF;AACF"}

package/lib/index.js

@@ -0,0 +1,6 @@
+export { createVirtualElementFromClick } from './createVirtualElementFromClick';
+export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
+export { usePositioning } from './usePositioning';
+export { usePositioningMouseTarget } from './usePositioningMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","usePositioning","usePositioningMouseTarget","resolvePositioningShorthand","mergeArrowOffset"],"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n  Alignment,\n  AutoSize,\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n  SetVirtualMouseTarget,\n} from './types';\n"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ;AAC9C,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAE3D,SAASC,cAAc,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ"}