@fluentui/react-positioning 0.0.0-nightly58c310891320211216.1 → 0.0.0-nightly5ab766c40f20220114.1

package/CHANGELOG.json

@@ -2,15 +2,15 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Thu, 16 Dec 2021 04:14:56 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly58c310891320211216.1",
-      "version": "0.0.0-nightly58c310891320211216.1",
+      "date": "Fri, 14 Jan 2022 04:15:09 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly5ab766c40f20220114.1",
+      "version": "0.0.0-nightly5ab766c40f20220114.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-positioning",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd",
             "comment": "Release nightly v9"
           },
           {
@@ -19,6 +19,12 @@
             "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": "bsunderhus@microsoft.com",
             "package": "@fluentui/react-positioning",
@@ -31,29 +37,35 @@
             "commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
             "comment": "update styles to not use CSS shorthands"
           },
+          {
+            "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-make-styles to v0.0.0-nightly58c310891320211216.1",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc"
+            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly5ab766c40f20220114.1",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly58c310891320211216.1",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly5ab766c40f20220114.1",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly58c310891320211216.1",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly5ab766c40f20220114.1",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly58c310891320211216.1",
-            "commit": "919f08a1b25cd5045dc729d44a65f64f7838f4dc"
+            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly5ab766c40f20220114.1",
+            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,24 +1,26 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Thu, 16 Dec 2021 04:14:56 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jan 2022 04:15:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly58c310891320211216.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly58c310891320211216.1)
+## [0.0.0-nightly5ab766c40f20220114.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly5ab766c40f20220114.1)
 
-Thu, 16 Dec 2021 04:14:56 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightly58c310891320211216.1)
+Fri, 14 Jan 2022 04:15:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightly5ab766c40f20220114.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by email not defined)
 - 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)
 - 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 @fluentui/react-make-styles to v0.0.0-nightly58c310891320211216.1 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly58c310891320211216.1 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly58c310891320211216.1 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly58c310891320211216.1 ([commit](https://github.com/microsoft/fluentui/commit/919f08a1b25cd5045dc729d44a65f64f7838f4dc) by beachball)
+- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
+- Bump @fluentui/react-make-styles to v0.0.0-nightly5ab766c40f20220114.1 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly5ab766c40f20220114.1 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly5ab766c40f20220114.1 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by beachball)
+- Bump @fluentui/babel-make-styles to v0.0.0-nightly5ab766c40f20220114.1 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
 

package/dist/react-positioning.d.ts

@@ -1,7 +1,6 @@
-import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
+import type { MakeStylesStyle } from '@fluentui/react-make-styles';
 import * as PopperJs from '@popperjs/core';
 import * as React_2 from 'react';
-import type { Theme } from '@fluentui/react-theme';
 
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
@@ -9,31 +8,71 @@ 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(5),
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
  *
- *     arrowWithoutSize: createArrowStyles(),
- *     mediumArrow: { aspectRatio: 1, width: '4px' }
- *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
  *   })
  *   ...
  *
- *   state.arrowWithSize.className = styles.arrowWithSize
+ *   state.arrowWithSize.className = styles.arrowWithSize;
  *   state.arrowWithoutSize.className = mergeClasses(
  *     styles.arrowWithoutSize,
  *     state.smallArrow && styles.smallArrow,
  *     state.mediumArrow && styles.mediumArrow,
  *   )
  * ```
- *
- * @param size - dimensions of the square arrow element in pixels.
  */
-export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
+export declare function createArrowStyles(options: CreateArrowStylesOptions): MakeStylesStyle;
+
+/**
+ * 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?: MakeStylesStyle['borderBottomWidth'];
+    /**
+     * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
+     *
+     * @defaultvalue solid
+     */
+    borderStyle?: MakeStylesStyle['borderBottomStyle'];
+    /**
+     * The borderColor of the arrow. Should be the same borderColor as the parent element.
+     *
+     * @defaultvalue tokens.colorTransparentStroke
+     */
+    borderColor?: MakeStylesStyle['borderBottomColor'];
+};
 
 /**
  * Creates a virtual element based on the position of a click event

package/lib/createArrowStyles.d.ts

@@ -1,27 +1,64 @@
-import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
-import type { Theme } from '@fluentui/react-theme';
+import type { MakeStylesStyle } from '@fluentui/react-make-styles';
+/**
+ * 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?: MakeStylesStyle['borderBottomWidth'];
+    /**
+     * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
+     *
+     * @defaultvalue solid
+     */
+    borderStyle?: MakeStylesStyle['borderBottomStyle'];
+    /**
+     * The borderColor of the arrow. Should be the same borderColor as the parent element.
+     *
+     * @defaultvalue tokens.colorTransparentStroke
+     */
+    borderColor?: MakeStylesStyle['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(5),
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
  *
- *     arrowWithoutSize: createArrowStyles(),
- *     mediumArrow: { aspectRatio: 1, width: '4px' }
- *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
  *   })
  *   ...
  *
- *   state.arrowWithSize.className = styles.arrowWithSize
+ *   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): MakeStylesStyle;
+/**
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
  *
- * @param size - dimensions of the square arrow element in pixels.
+ * 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 createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
+export declare function createArrowHeightStyles(arrowHeight: number): {
+    width: string;
+    height: string;
+};

package/lib/createArrowStyles.js

@@ -1,73 +1,87 @@
 import { shorthands } from '@fluentui/react-make-styles';
+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(5),
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
  *
- *     arrowWithoutSize: createArrowStyles(),
- *     mediumArrow: { aspectRatio: 1, width: '4px' }
- *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
  *   })
  *   ...
  *
- *   state.arrowWithSize.className = styles.arrowWithSize
+ *   state.arrowWithSize.className = styles.arrowWithSize;
  *   state.arrowWithoutSize.className = mergeClasses(
  *     styles.arrowWithoutSize,
  *     state.smallArrow && styles.smallArrow,
  *     state.mediumArrow && styles.mediumArrow,
  *   )
  * ```
- *
- * @param size - dimensions of the square arrow element in pixels.
  */
 
-export function createArrowStyles(size) {
-  return theme => ({
+export function createArrowStyles(options) {
+  const {
+    arrowHeight,
+    borderWidth = '1px',
+    borderStyle = 'solid',
+    borderColor = tokens.colorTransparentStroke
+  } = options;
+  return {
     position: 'absolute',
     backgroundColor: 'inherit',
     visibility: 'hidden',
     zIndex: -1,
-    ...(size && {
-      aspectRatio: '1',
-      width: `${size}px`
-    }),
+    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
     ':before': {
       content: '""',
-      ...shorthands.borderRadius('4px'),
+      visibility: 'visible',
       position: 'absolute',
+      boxSizing: 'border-box',
       width: 'inherit',
       height: 'inherit',
       backgroundColor: 'inherit',
-      visibility: 'visible',
-      borderBottomRightRadius: theme.borderRadiusSmall,
+      ...shorthands.borderRight(borderWidth, borderStyle, borderColor),
+      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+      borderBottomRightRadius: tokens.borderRadiusSmall,
       transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
     },
-    ':global([data-popper-placement])': {
-      ':before': { // Special border for High Contrast mode
-        ...shorthands.borderRight('1px', 'solid', 'transparent'),
-        ...shorthands.borderBottom('1px', 'solid', 'transparent')
-      }
-    },
     // Popper sets data-popper-placement on the root element, which is used to align the arrow
     ':global([data-popper-placement^="top"])': {
-      bottom: 0,
+      bottom: `-${borderWidth}`,
       '--angle': '0'
     },
     ':global([data-popper-placement^="right"])': {
-      left: '0 /* @noflip */',
+      left: `-${borderWidth} /* @noflip */`,
       '--angle': '90deg'
     },
     ':global([data-popper-placement^="bottom"])': {
-      top: 0,
+      top: `-${borderWidth}`,
       '--angle': '180deg'
     },
     ':global([data-popper-placement^="left"])': {
-      right: '0 /* @noflip */',
+      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

package/lib/createArrowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,6BAA3B;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,IAA5B,EAAyC;AAC7C,SAAO,KAAK,KAAK;AACf,IAAA,QAAQ,EAAE,UADK;AAEf,IAAA,eAAe,EAAE,SAFF;AAGf,IAAA,UAAU,EAAE,QAHG;AAIf,IAAA,MAAM,EAAE,CAAC,CAJM;AAMf,QAAI,IAAI,IAAI;AACV,MAAA,WAAW,EAAE,GADH;AAEV,MAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,KAAZ,CANe;AAWf,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,SAAG,UAAU,CAAC,YAAX,CAAwB,KAAxB,CAFM;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,KAAK,EAAE,SAJE;AAKT,MAAA,MAAM,EAAE,SALC;AAMT,MAAA,eAAe,EAAE,SANR;AAOT,MAAA,UAAU,EAAE,SAPH;AAQT,MAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,MAAA,SAAS,EAAE;AATF,KAXI;AAuBf,wCAAoC;AAClC,iBAAW,EACT;AACA,WAAG,UAAU,CAAC,WAAX,CAAuB,KAAvB,EAA8B,OAA9B,EAAuC,aAAvC,CAFM;AAGT,WAAG,UAAU,CAAC,YAAX,CAAwB,KAAxB,EAA+B,OAA/B,EAAwC,aAAxC;AAHM;AADuB,KAvBrB;AA+Bf;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,CADiC;AAEzC,iBAAW;AAF8B,KAhC5B;AAqCf,iDAA6C;AAC3C,MAAA,IAAI,EAAE,iBADqC;AAE3C,iBAAW;AAFgC,KArC9B;AAyCf,kDAA8C;AAC5C,MAAA,GAAG,EAAE,CADuC;AAE5C,iBAAW;AAFiC,KAzC/B;AA6Cf,gDAA4C;AAC1C,MAAA,KAAK,EAAE,iBADmC;AAE1C,iBAAW;AAF+B;AA7C7B,GAAL,CAAZ;AAkDD","sourceRoot":""}
+{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,6BAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,MAAM,CAAC;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,UAAU,CAAC,WAAX,CAAuB,WAAvB,EAAoC,WAApC,EAAiD,WAAjD,CARM;AAST,SAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CATM;AAUT,MAAA,uBAAuB,EAAE,MAAM,CAAC,iBAVvB;AAWT,MAAA,SAAS,EAAE;AAXF,KARN;AAsBL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KAvBtC;AA2BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA3BxC;AA+BL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KA/BzC;AAmCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAnCvC,GAAP;AAwCD;AAED;;;;;AAKG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD","sourceRoot":""}

package/lib-commonjs/createArrowStyles.d.ts

@@ -1,27 +1,64 @@
-import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
-import type { Theme } from '@fluentui/react-theme';
+import type { MakeStylesStyle } from '@fluentui/react-make-styles';
+/**
+ * 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?: MakeStylesStyle['borderBottomWidth'];
+    /**
+     * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
+     *
+     * @defaultvalue solid
+     */
+    borderStyle?: MakeStylesStyle['borderBottomStyle'];
+    /**
+     * The borderColor of the arrow. Should be the same borderColor as the parent element.
+     *
+     * @defaultvalue tokens.colorTransparentStroke
+     */
+    borderColor?: MakeStylesStyle['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(5),
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
  *
- *     arrowWithoutSize: createArrowStyles(),
- *     mediumArrow: { aspectRatio: 1, width: '4px' }
- *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
  *   })
  *   ...
  *
- *   state.arrowWithSize.className = styles.arrowWithSize
+ *   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): MakeStylesStyle;
+/**
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
  *
- * @param size - dimensions of the square arrow element in pixels.
+ * 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 createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
+export declare function createArrowHeightStyles(arrowHeight: number): {
+    width: string;
+    height: string;
+};

package/lib-commonjs/createArrowStyles.js

@@ -3,81 +3,98 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createArrowStyles = void 0;
+exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
 
 const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+const react_theme_1 = /*#__PURE__*/require("@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(5),
+ *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
  *
- *     arrowWithoutSize: createArrowStyles(),
- *     mediumArrow: { aspectRatio: 1, width: '4px' }
- *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
  *   })
  *   ...
  *
- *   state.arrowWithSize.className = styles.arrowWithSize
+ *   state.arrowWithSize.className = styles.arrowWithSize;
  *   state.arrowWithoutSize.className = mergeClasses(
  *     styles.arrowWithoutSize,
  *     state.smallArrow && styles.smallArrow,
  *     state.mediumArrow && styles.mediumArrow,
  *   )
  * ```
- *
- * @param size - dimensions of the square arrow element in pixels.
  */
 
 
-function createArrowStyles(size) {
-  return theme => ({
+function createArrowStyles(options) {
+  const {
+    arrowHeight,
+    borderWidth = '1px',
+    borderStyle = 'solid',
+    borderColor = react_theme_1.tokens.colorTransparentStroke
+  } = options;
+  return {
     position: 'absolute',
     backgroundColor: 'inherit',
     visibility: 'hidden',
     zIndex: -1,
-    ...(size && {
-      aspectRatio: '1',
-      width: `${size}px`
-    }),
+    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
     ':before': {
       content: '""',
-      ...react_make_styles_1.shorthands.borderRadius('4px'),
+      visibility: 'visible',
       position: 'absolute',
+      boxSizing: 'border-box',
       width: 'inherit',
       height: 'inherit',
       backgroundColor: 'inherit',
-      visibility: 'visible',
-      borderBottomRightRadius: theme.borderRadiusSmall,
+      ...react_make_styles_1.shorthands.borderRight(borderWidth, borderStyle, borderColor),
+      ...react_make_styles_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+      borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall,
       transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
     },
-    ':global([data-popper-placement])': {
-      ':before': { // Special border for High Contrast mode
-        ...react_make_styles_1.shorthands.borderRight('1px', 'solid', 'transparent'),
-        ...react_make_styles_1.shorthands.borderBottom('1px', 'solid', 'transparent')
-      }
-    },
     // Popper sets data-popper-placement on the root element, which is used to align the arrow
     ':global([data-popper-placement^="top"])': {
-      bottom: 0,
+      bottom: `-${borderWidth}`,
       '--angle': '0'
     },
     ':global([data-popper-placement^="right"])': {
-      left: '0 /* @noflip */',
+      left: `-${borderWidth} /* @noflip */`,
       '--angle': '90deg'
     },
     ':global([data-popper-placement^="bottom"])': {
-      top: 0,
+      top: `-${borderWidth}`,
       '--angle': '180deg'
     },
     ':global([data-popper-placement^="left"])': {
-      right: '0 /* @noflip */',
+      right: `-${borderWidth} /* @noflip */`,
       '--angle': '270deg'
     }
-  });
+  };
 }
 
 exports.createArrowStyles = createArrowStyles;
+/**
+ * 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.
+ */
+
+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
+  };
+}
+
+exports.createArrowHeightStyles = createArrowHeightStyles;
 //# sourceMappingURL=createArrowStyles.js.map

package/lib-commonjs/createArrowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;;AACH,SAAgB,iBAAhB,CAAkC,IAAlC,EAA+C;AAC7C,SAAO,KAAK,KAAK;AACf,IAAA,QAAQ,EAAE,UADK;AAEf,IAAA,eAAe,EAAE,SAFF;AAGf,IAAA,UAAU,EAAE,QAHG;AAIf,IAAA,MAAM,EAAE,CAAC,CAJM;AAMf,QAAI,IAAI,IAAI;AACV,MAAA,WAAW,EAAE,GADH;AAEV,MAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,KAAZ,CANe;AAWf,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,SAAG,mBAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,KAAxB,CAFM;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,KAAK,EAAE,SAJE;AAKT,MAAA,MAAM,EAAE,SALC;AAMT,MAAA,eAAe,EAAE,SANR;AAOT,MAAA,UAAU,EAAE,SAPH;AAQT,MAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,MAAA,SAAS,EAAE;AATF,KAXI;AAuBf,wCAAoC;AAClC,iBAAW,EACT;AACA,WAAG,mBAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,KAAvB,EAA8B,OAA9B,EAAuC,aAAvC,CAFM;AAGT,WAAG,mBAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,KAAxB,EAA+B,OAA/B,EAAwC,aAAxC;AAHM;AADuB,KAvBrB;AA+Bf;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,CADiC;AAEzC,iBAAW;AAF8B,KAhC5B;AAqCf,iDAA6C;AAC3C,MAAA,IAAI,EAAE,iBADqC;AAE3C,iBAAW;AAFgC,KArC9B;AAyCf,kDAA8C;AAC5C,MAAA,GAAG,EAAE,CADuC;AAE5C,iBAAW;AAFiC,KAzC/B;AA6Cf,gDAA4C;AAC1C,MAAA,KAAK,EAAE,iBADmC;AAE1C,iBAAW;AAF+B;AA7C7B,GAAL,CAAZ;AAkDD;;AAnDD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourceRoot":""}
+{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AACH,SAAgB,iBAAhB,CAAkC,OAAlC,EAAmE;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,aAAA,CAAA,MAAA,CAAO;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,mBAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,WAAvB,EAAoC,WAApC,EAAiD,WAAjD,CARM;AAST,SAAG,mBAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CATM;AAUT,MAAA,uBAAuB,EAAE,aAAA,CAAA,MAAA,CAAO,iBAVvB;AAWT,MAAA,SAAS,EAAE;AAXF,KARN;AAsBL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KAvBtC;AA2BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA3BxC;AA+BL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KA/BzC;AAmCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAnCvC,GAAP;AAwCD;;AAhDD,OAAA,CAAA,iBAAA,GAAA,iBAAA;AAkDA;;;;;AAKG;;AACH,SAAgB,uBAAhB,CAAwC,WAAxC,EAA2D;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD;;AALD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "0.0.0-nightly58c310891320211216.1",
+  "version": "0.0.0-nightly5ab766c40f20220114.1",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,12 +30,12 @@
     "@types/react-dom": "16.9.10",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "@fluentui/babel-make-styles": "0.0.0-nightly58c310891320211216.1"
+    "@fluentui/babel-make-styles": "0.0.0-nightly5ab766c40f20220114.1"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly58c310891320211216.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly58c310891320211216.1",
-    "@fluentui/react-utilities": "0.0.0-nightly58c310891320211216.1",
+    "@fluentui/react-make-styles": "0.0.0-nightly5ab766c40f20220114.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly5ab766c40f20220114.1",
+    "@fluentui/react-utilities": "0.0.0-nightly5ab766c40f20220114.1",
     "@popperjs/core": "~2.4.3",
     "tslib": "^2.1.0"
   },