@fluentui/react-positioning 0.0.0-nightly627ad67f1120211109.1 → 0.0.0-nightly6faffd280a20220221.1

package/CHANGELOG.json

@@ -2,17 +2,201 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Tue, 09 Nov 2021 04:20:26 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly627ad67f1120211109.1",
-      "version": "0.0.0-nightly627ad67f1120211109.1",
+      "date": "Mon, 21 Feb 2022 04:15:29 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly6faffd280a20220221.1",
+      "version": "0.0.0-nightly6faffd280a20220221.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-positioning",
-            "commit": "5e2f04f4741a9e3b98463480f9c1926ea2006337",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly6faffd280a20220221.1",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly6faffd280a20220221.1",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 18 Feb 2022 13:35:33 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-rc.3",
+      "version": "9.0.0-rc.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
+            "comment": "fix: Source maps contain original source code"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Feb 2022 08:50:40 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-rc.1",
+      "version": "9.0.0-rc.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
+            "comment": "use new types from makeStyles core"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "db6526ee2d04991e4473174969e3795299b52f9e",
+            "comment": "Replacing use of functions in makeStyles with direct use of tokens."
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
+            "comment": "Fix tooltip arrow's high contrast border in RTL"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "523b5785eafd28cf56b677af40274cefe5d42dcb",
+            "comment": "use Griffel packages"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "a548a59bd94f9c4b656da3bdd149db7ac2de726f",
+            "comment": "feat: Imperative `setTarget` for `usePopper` and `positioning`"
+          },
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
+            "comment": "Adds @noflip annotation to data-popper-placement styles"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
+            "comment": "update styles to not use CSS shorthands"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI packages to 9.0.0-rc"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "09804275c7f346db54c33d4ff347bffc33676014",
+            "comment": "Fix popover arrow styling"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          }
+        ],
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 Nov 2021 08:34:15 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-beta.4",
+      "version": "9.0.0-beta.4",
+      "comments": {
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "718e63006d8d07d24efab9c32942041963d78dc7",
+            "comment": "Migrate package to use solution style ts-configs"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
+            "comment": "Add utility function to create styles for an arrow element"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 12 Nov 2021 13:25:30 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-beta.3",
+      "version": "9.0.0-beta.3",
+      "comments": {
+        "prerelease": [
           {
             "author": "gcox@microsoft.com",
             "package": "@fluentui/react-positioning",
@@ -22,14 +206,22 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly627ad67f1120211109.1",
-            "commit": "5e2f04f4741a9e3b98463480f9c1926ea2006337"
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.3",
+            "commit": "742342e52c65066f779232e4e1302fedf0dd460d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly627ad67f1120211109.1",
-            "commit": "5e2f04f4741a9e3b98463480f9c1926ea2006337"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
+            "commit": "742342e52c65066f779232e4e1302fedf0dd460d"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "00f70581480b536e723fb69edf0ae617beac4807",
+            "comment": "Remove beta release tag"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,73 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Tue, 09 Nov 2021 04:20:26 GMT and should not be manually modified.
+This log was last generated on Mon, 21 Feb 2022 04:15:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly627ad67f1120211109.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly627ad67f1120211109.1)
+## [0.0.0-nightly6faffd280a20220221.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly6faffd280a20220221.1)
 
-Tue, 09 Nov 2021 04:20:26 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v0.0.0-nightly627ad67f1120211109.1)
+Mon, 21 Feb 2022 04:15:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.3..@fluentui/react-positioning_v0.0.0-nightly6faffd280a20220221.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) by email not defined)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly6faffd280a20220221.1 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly6faffd280a20220221.1 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) by beachball)
+
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.3)
+
+Fri, 18 Feb 2022 13:35:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.1..@fluentui/react-positioning_v9.0.0-rc.3)
+
+### Changes
+
+- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+
+## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.1)
+
+Thu, 10 Feb 2022 08:50:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v9.0.0-rc.1)
+
+### Changes
+
+- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
+- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21051](https://github.com/microsoft/fluentui/pull/21051) by Humberto.Morimoto@microsoft.com)
+- Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
+- use Griffel packages ([PR #21421](https://github.com/microsoft/fluentui/pull/21421) by olfedias@microsoft.com)
+- feat: Imperative `setTarget` for `usePopper` and `positioning` ([PR #21632](https://github.com/microsoft/fluentui/pull/21632) by lingfangao@hotmail.com)
+- Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
+- update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
+- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
+
+Thu, 25 Nov 2021 08:34:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)
+
+### Changes
+
+- Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+
+## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)
+
+Fri, 12 Nov 2021 13:25:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v9.0.0-beta.3)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/5e2f04f4741a9e3b98463480f9c1926ea2006337) by email not defined)
 - Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly627ad67f1120211109.1 ([commit](https://github.com/microsoft/fluentui/commit/5e2f04f4741a9e3b98463480f9c1926ea2006337) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly627ad67f1120211109.1 ([commit](https://github.com/microsoft/fluentui/commit/5e2f04f4741a9e3b98463480f9c1926ea2006337) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
 
 ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.2)
 

package/dist/react-positioning.d.ts

@@ -1,3 +1,4 @@
+import type { GriffelStyle } from '@griffel/react';
 import * as PopperJs from '@popperjs/core';
 import * as React_2 from 'react';
 
@@ -7,6 +8,72 @@ export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-alw
 
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 
+/**
+ * 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;
+};
+
+/**
+ * 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;
+
+/**
+ * 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
@@ -33,42 +100,13 @@ export declare type OffsetFunctionParam = {
     placement: PopperJs.Placement;
 };
 
-declare interface PopperOptions extends PositioningProps {
-    /**
-     * If false, delays Popper's creation.
-     * @default true
-     */
-    enabled?: boolean;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
-    /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
-     */
-    unstable_disableTether?: boolean | 'all';
-}
-
-export declare type PopperRefHandle = {
-    updatePosition: () => void;
-};
-
-export declare type PopperVirtualElement = PopperJs.VirtualElement;
-
-export declare type Position = 'above' | 'below' | 'before' | 'after';
-
-export declare interface PositioningProps {
+export declare interface PopperOptions {
     /** 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 popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
-    /** An imperative handle to Popper methods. */
-    popperRef?: React_2.Ref<PopperRefHandle>;
     /**
      * 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'
@@ -76,6 +114,11 @@ export declare interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
+    /**
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
+     */
+    positionFixed?: boolean;
     /**
      * Lets you displace a popper 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
@@ -95,10 +138,6 @@ export declare interface PositioningProps {
      * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
     autoSize?: AutoSize;
-    /**
-     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
-     */
-    target?: HTMLElement | PopperVirtualElement | null;
     /**
      * Modifies position and alignment to cover the target
      */
@@ -108,6 +147,37 @@ export declare interface PositioningProps {
      * `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 popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
+}
+
+export declare type PopperRefHandle = {
+    /**
+     * Updates the position of the popper 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: HTMLElement) => void;
+};
+
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
+
+export declare type Position = 'above' | 'below' | 'before' | 'after';
+
+export declare interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
+    /** An imperative handle to Popper methods. */
+    popperRef?: React_2.Ref<PopperRefHandle>;
+    /**
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
+     */
+    target?: HTMLElement | PopperVirtualElement | null;
 }
 
 export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
@@ -124,7 +194,7 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
  *   to avoid focus jumps
  */
-export declare function usePopper(options?: PopperOptions): {
+export declare function usePopper(options?: UsePopperOptions): {
     targetRef: React_2.MutableRefObject<any>;
     containerRef: React_2.MutableRefObject<any>;
     arrowRef: React_2.MutableRefObject<any>;
@@ -140,4 +210,12 @@ export declare function usePopper(options?: PopperOptions): {
  */
 export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
 
+declare interface UsePopperOptions extends PositioningProps {
+    /**
+     * If false, delays Popper's creation.
+     * @default true
+     */
+    enabled?: boolean;
+}
+
 export { }

package/lib/createArrowStyles.d.ts

@@ -0,0 +1,64 @@
+import type { GriffelStyle } from '@griffel/react';
+/**
+ * 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'];
+};
+/**
+ * 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;
+/**
+ * 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;
+};

package/lib/createArrowStyles.js

@@ -0,0 +1,87 @@
+import { shorthands } from '@griffel/react';
+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
+ *
+ * ```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'
+    }
+  };
+}
+/**
+ * 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