@fluentui/react-positioning 0.0.0-nightlya0ab3454ed20211208.1 → 0.0.0-nightlya0aef7969220220228.1

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 { 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(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): GriffelStyle;
+/**
+ * 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_1 = /*#__PURE__*/require("@griffel/react");
+
+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_1.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
+      ...react_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":["createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,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,OAAA,CAAA,UAAA,CAAW,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,OAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,aAAA,CAAA,MAAA,CAAO,iBAdvB;AAeT,MAAA,SAAS,EAAE;AAfF,KARN;AA0BL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KA3BtC;AA+BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA/BxC;AAmCL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KAnCzC;AAuCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAvCvC,GAAP;AA4CD;;AApDD,OAAA,CAAA,iBAAA,GAAA,iBAAA;AAsDA;;;;;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","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\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 * 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 * 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"],"sourceRoot":"../src/"}

package/lib-commonjs/createVirtualElementFromClick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;;AACH,SAAgB,6BAAhB,CAA8C,WAA9C,EAAqE;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AArBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourceRoot":""}
+{"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;;AACH,SAAgB,6BAAhB,CAA8C,WAA9C,EAAqE;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AArBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourcesContent":["import type { PopperVirtualElement } 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): PopperVirtualElement {\n  const left = nativeEvent.clientX;\n  const top = nativeEvent.clientY;\n  const right = left + 1;\n  const bottom = top + 1;\n\n  function getBoundingClientRect(): ClientRect {\n    return {\n      left,\n      top,\n      right,\n      bottom,\n\n      height: 1,\n      width: 1,\n    };\n  }\n\n  return {\n    getBoundingClientRect,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,2BAAA;AAA2B;AAA3B,CAAA;AAA6B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AACtC,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,2BAAA;AAA2B;AAA3B,CAAA;AAA6B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AACtC,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createVirtualElementFromClick';\nexport * from './createArrowStyles';\nexport * from './usePopper';\nexport * from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport * from './types';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/isIntersectingModifier.d.ts

@@ -0,0 +1,4 @@
+import { Modifier } from '@popperjs/core';
+export declare const isIntersectingModifier: IsIntersectingModifier;
+declare type IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;
+export {};

package/lib-commonjs/isIntersectingModifier.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIntersectingModifier = void 0;
+
+const core_1 = /*#__PURE__*/require("@popperjs/core");
+
+exports.isIntersectingModifier = {
+  name: 'is-intersecting-modifier',
+  enabled: true,
+  phase: 'main',
+  requires: ['preventOverflow'],
+  fn: ({
+    state,
+    name
+  }) => {
+    const popperRect = state.rects.popper;
+    const popperAltOverflow = core_1.detectOverflow(state, {
+      altBoundary: true
+    });
+    const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;
+    const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;
+    const isIntersecting = isIntersectingTop || isIntersectingBottom;
+    state.modifiersData[name] = {
+      isIntersecting
+    };
+    state.attributes.popper = { ...state.attributes.popper,
+      'data-popper-is-intersecting': isIntersecting
+    };
+  }
+};
+//# sourceMappingURL=isIntersectingModifier.js.map

package/lib-commonjs/isIntersectingModifier.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEa,OAAA,CAAA,sBAAA,GAAiD;AAC5D,EAAA,IAAI,EAAE,0BADsD;AAE5D,EAAA,OAAO,EAAE,IAFmD;AAG5D,EAAA,KAAK,EAAE,MAHqD;AAI5D,EAAA,QAAQ,EAAE,CAAC,iBAAD,CAJkD;AAK5D,EAAA,EAAE,EAAE,CAAC;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAD,KAAoB;AACtB,UAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;AACA,UAAM,iBAAiB,GAAG,MAAA,CAAA,cAAA,CAAe,KAAf,EAAsB;AAAE,MAAA,WAAW,EAAE;AAAf,KAAtB,CAA1B;AAEA,UAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;AACA,UAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;AAEA,UAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;AAEA,IAAA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;AAC1B,MAAA;AAD0B,KAA5B;AAGA,IAAA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;AAExB,qCAA+B;AAFP,KAA1B;AAID;AArB2D,CAAjD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n  name: 'is-intersecting-modifier',\n  enabled: true,\n  phase: 'main',\n  requires: ['preventOverflow'],\n  fn: ({ state, name }) => {\n    const popperRect = state.rects.popper;\n    const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n    const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n    const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n    const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n    state.modifiersData[name] = {\n      isIntersecting,\n    };\n    state.attributes.popper = {\n      ...state.attributes.popper,\n      'data-popper-is-intersecting': isIntersecting,\n    };\n  },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/types.d.ts

@@ -12,18 +12,25 @@ 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 = PopperJs.Boundary | 'scrollParent' | 'window';
 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 interface PositioningProps {
+export 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.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'
@@ -31,6 +38,11 @@ export 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
@@ -50,10 +62,6 @@ export 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
      */
@@ -63,6 +71,19 @@ export 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 interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
+    /** An imperative handle to Popper methods. */
+    popperRef?: React.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 PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
 export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;

package/lib-commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/usePopper.d.ts

@@ -1,23 +1,11 @@
-import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 import type { PositioningProps } from './types';
-interface PopperOptions extends PositioningProps {
+interface UsePopperOptions 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';
 }
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
@@ -27,7 +15,7 @@ interface PopperOptions extends PositioningProps {
  * - 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.MutableRefObject<any>;
     containerRef: React.MutableRefObject<any>;
     arrowRef: React.MutableRefObject<any>;

package/lib-commonjs/usePopper.js

@@ -9,11 +9,13 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-const index_1 = /*#__PURE__*/require("./utils/index");
-
 const PopperJs = /*#__PURE__*/require("@popperjs/core");
 
-const React = /*#__PURE__*/require("react"); //
+const React = /*#__PURE__*/require("react");
+
+const isIntersectingModifier_1 = /*#__PURE__*/require("./isIntersectingModifier");
+
+const index_1 = /*#__PURE__*/require("./utils/index"); //
 // Dev utils to detect if nodes have "autoFocus" props.
 //
 
@@ -50,27 +52,22 @@ function hasAutofocusFilter(node) {
 
 function usePopperOptions(options, popperOriginalPositionRef) {
   const {
+    align,
     arrowPadding,
     autoSize,
     coverTarget,
     flipBoundary,
     offset,
-    onStateUpdate,
     overflowBoundary,
+    pinned,
+    position,
+    positionFixed,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_disableTether,
-    pinned
+    unstable_disableTether
   } = options;
   const isRtl = react_shared_contexts_1.useFluent().dir === 'rtl';
-  const placement = index_1.getPlacement(options.align, options.position, isRtl);
-  const strategy = options.positionFixed ? 'fixed' : 'absolute';
-  const handleStateUpdate = react_utilities_1.useEventCallback(({
-    state
-  }) => {
-    if (onStateUpdate) {
-      onStateUpdate(state);
-    }
-  });
+  const placement = index_1.getPlacement(align, position, isRtl);
+  const strategy = positionFixed ? 'fixed' : 'absolute';
   const offsetModifier = React.useMemo(() => offset ? {
     name: 'offset',
     options: {
@@ -82,7 +79,7 @@ function usePopperOptions(options, popperOriginalPositionRef) {
 
     const scrollParentElement = index_1.getScrollParent(container);
     const hasScrollableElement = scrollParentElement ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body) : false;
-    const modifiers = [
+    const modifiers = [isIntersectingModifier_1.isIntersectingModifier,
     /**
      * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
      * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
@@ -162,11 +159,6 @@ function usePopperOptions(options, popperOriginalPositionRef) {
         altBoundary: true,
         boundary: index_1.getBoundary(container, overflowBoundary)
       }
-    }, {
-      name: 'onUpdate',
-      enabled: true,
-      phase: 'afterWrite',
-      fn: handleStateUpdate
     }, {
       // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
       // popper-maxsize-modifier only calculates the max sizes.
@@ -262,14 +254,11 @@ function usePopperOptions(options, popperOriginalPositionRef) {
     const popperOptions = {
       modifiers,
       placement,
-      strategy,
-      onFirstUpdate: state => handleStateUpdate({
-        state
-      })
+      strategy
     };
     return popperOptions;
   }, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
-  handleStateUpdate, popperOriginalPositionRef]);
+  popperOriginalPositionRef]);
 }
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
@@ -290,13 +279,11 @@ function usePopper(options = {}) {
   const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
   const popperInstanceRef = React.useRef(null);
   const handlePopperUpdate = react_utilities_1.useEventCallback(() => {
-    var _a;
+    var _a, _b;
 
     (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
     popperInstanceRef.current = null;
-    const {
-      target = targetRef.current
-    } = options;
+    const target = (_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current;
     let popperInstance = null;
 
     if (react_utilities_1.canUseDOM() && enabled) {
@@ -347,14 +334,36 @@ function usePopper(options = {}) {
 
   const targetRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
   const containerRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
-  const arrowRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
+  const arrowRef = index_1.useCallbackRef(null, handlePopperUpdate, true); // Stores external target from options.target or setTarget
+
+  const overrideTargetRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
   React.useImperativeHandle(options.popperRef, () => ({
     updatePosition: () => {
       var _a;
 
       (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
+    },
+    setTarget: target => {
+      if (options.target && process.env.NODE_ENV !== 'production') {
+        const err = new Error(); // eslint-disable-next-line no-console
+
+        console.warn('Imperative setTarget should not be used at the same time as target option'); // eslint-disable-next-line no-console
+
+        console.warn(err.stack);
+      }
+
+      overrideTargetRef.current = target;
     }
-  }), []);
+  }), // Missing deps:
+  // options.target - only used for a runtime warning
+  // targetRef - Stable between renders
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    if (options.target) {
+      overrideTargetRef.current = options.target;
+    }
+  }, [options.target, overrideTargetRef]);
   react_utilities_1.useIsomorphicLayoutEffect(() => {
     handlePopperUpdate();
     return () => {
@@ -363,15 +372,14 @@ function usePopper(options = {}) {
       (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
       popperInstanceRef.current = null;
     };
-  }, [handlePopperUpdate, options.enabled, options.target]);
+  }, [handlePopperUpdate, options.enabled]);
   react_utilities_1.useIsomorphicLayoutEffect(() => {
-    var _a;
+    var _a, _b;
 
     if (!isFirstMount) {
-      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions((_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current, containerRef.current, arrowRef.current));
     }
   }, // Missing deps:
-  // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
   // isFirstMount - Should never change after mount
   // arrowRef, containerRef, targetRef - Stable between renders
   // eslint-disable-next-line react-hooks/exhaustive-deps