@fluentui/react-positioning 0.0.0-nightlya54302c0b220211124.1 → 0.0.0-nightlya9c3d10d9520220113.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. package/CHANGELOG.json +96 -7
  2. package/CHANGELOG.md +26 -6
  3. package/dist/react-positioning.d.ts +50 -11
  4. package/lib/createArrowStyles.d.ts +47 -10
  5. package/lib/createArrowStyles.js +68 -56
  6. package/lib/createArrowStyles.js.map +1 -1
  7. package/lib/createVirtualElementFromClick.js +17 -15
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/usePopper.js +362 -312
  10. package/lib/usePopper.js.map +1 -1
  11. package/lib/usePopperMouseTarget.js +28 -22
  12. package/lib/usePopperMouseTarget.js.map +1 -1
  13. package/lib/utils/getBasePlacement.js +1 -1
  14. package/lib/utils/getBasePlacement.js.map +1 -1
  15. package/lib/utils/getBoundary.js +15 -10
  16. package/lib/utils/getBoundary.js.map +1 -1
  17. package/lib/utils/getReactFiberFromNode.js +39 -35
  18. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  19. package/lib/utils/getScrollParent.js +46 -32
  20. package/lib/utils/getScrollParent.js.map +1 -1
  21. package/lib/utils/mergeArrowOffset.js +29 -24
  22. package/lib/utils/mergeArrowOffset.js.map +1 -1
  23. package/lib/utils/positioningHelper.d.ts +2 -2
  24. package/lib/utils/positioningHelper.js +38 -30
  25. package/lib/utils/positioningHelper.js.map +1 -1
  26. package/lib/utils/resolvePositioningShorthand.js +57 -19
  27. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  28. package/lib/utils/useCallbackRef.js +35 -29
  29. package/lib/utils/useCallbackRef.js.map +1 -1
  30. package/lib-commonjs/createArrowStyles.d.ts +47 -10
  31. package/lib-commonjs/createArrowStyles.js +80 -59
  32. package/lib-commonjs/createArrowStyles.js.map +1 -1
  33. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  34. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  35. package/lib-commonjs/index.js +26 -5
  36. package/lib-commonjs/index.js.map +1 -1
  37. package/lib-commonjs/types.js +4 -1
  38. package/lib-commonjs/types.js.map +1 -1
  39. package/lib-commonjs/usePopper.js +376 -316
  40. package/lib-commonjs/usePopper.js.map +1 -1
  41. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  42. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  43. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  44. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  45. package/lib-commonjs/utils/getBoundary.js +23 -12
  46. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  47. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  48. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  49. package/lib-commonjs/utils/getScrollParent.js +53 -33
  50. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  51. package/lib-commonjs/utils/index.js +14 -2
  52. package/lib-commonjs/utils/index.js.map +1 -1
  53. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  54. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  55. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  56. package/lib-commonjs/utils/positioningHelper.js +46 -31
  57. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  58. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  59. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  60. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  61. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  62. package/package.json +8 -8
@@ -1,25 +1,63 @@
1
1
  // Look up table for shorthand to avoid parsing strings
2
2
  const shorthandLookup = {
3
- above: { position: 'above', align: 'center' },
4
- 'above-start': { position: 'above', align: 'start' },
5
- 'above-end': { position: 'above', align: 'end' },
6
- below: { position: 'below', align: 'center' },
7
- 'below-start': { position: 'below', align: 'start' },
8
- 'below-end': { position: 'below', align: 'end' },
9
- before: { position: 'before', align: 'center' },
10
- 'before-top': { position: 'before', align: 'top' },
11
- 'before-bottom': { position: 'before', align: 'bottom' },
12
- after: { position: 'after', align: 'center' },
13
- 'after-top': { position: 'after', align: 'top' },
14
- 'after-bottom': { position: 'after', align: 'bottom' },
3
+ above: {
4
+ position: 'above',
5
+ align: 'center'
6
+ },
7
+ 'above-start': {
8
+ position: 'above',
9
+ align: 'start'
10
+ },
11
+ 'above-end': {
12
+ position: 'above',
13
+ align: 'end'
14
+ },
15
+ below: {
16
+ position: 'below',
17
+ align: 'center'
18
+ },
19
+ 'below-start': {
20
+ position: 'below',
21
+ align: 'start'
22
+ },
23
+ 'below-end': {
24
+ position: 'below',
25
+ align: 'end'
26
+ },
27
+ before: {
28
+ position: 'before',
29
+ align: 'center'
30
+ },
31
+ 'before-top': {
32
+ position: 'before',
33
+ align: 'top'
34
+ },
35
+ 'before-bottom': {
36
+ position: 'before',
37
+ align: 'bottom'
38
+ },
39
+ after: {
40
+ position: 'after',
41
+ align: 'center'
42
+ },
43
+ 'after-top': {
44
+ position: 'after',
45
+ align: 'top'
46
+ },
47
+ 'after-bottom': {
48
+ position: 'after',
49
+ align: 'bottom'
50
+ }
15
51
  };
16
52
  export function resolvePositioningShorthand(shorthand) {
17
- if (shorthand === undefined || shorthand === null) {
18
- return {};
19
- }
20
- if (typeof shorthand === 'string') {
21
- return shorthandLookup[shorthand];
22
- }
23
- return shorthand;
53
+ if (shorthand === undefined || shorthand === null) {
54
+ return {};
55
+ }
56
+
57
+ if (typeof shorthand === 'string') {
58
+ return shorthandLookup[shorthand];
59
+ }
60
+
61
+ return shorthand;
24
62
  }
25
63
  //# sourceMappingURL=resolvePositioningShorthand.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"resolvePositioningShorthand.js","sourceRoot":"","sources":["../../src/utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA,uDAAuD;AACvD,MAAM,eAAe,GAAoF;IACvG,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,aAAa,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACpD,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,aAAa,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACpD,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC/C,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;IAClD,eAAe,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACxD,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,cAAc,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvD,CAAC;AAEF,MAAM,UAAU,2BAA2B,CACzC,SAAkD;IAElD,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACjD,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QACjC,OAAO,eAAe,CAAC,SAAS,CAAC,CAAC;KACnC;IAED,OAAO,SAAuC,CAAC;AACjD,CAAC"}
1
+ {"version":3,"sources":["../../src/utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA;AACA,MAAM,eAAe,GAAoF;AACvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GADgG;AAEvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAFwF;AAGvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAH0F;AAIvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAJgG;AAKvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GALwF;AAMvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAN0F;AAOvG,EAAA,MAAM,EAAE;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GAP+F;AAQvG,gBAAc;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GARyF;AASvG,mBAAiB;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GATsF;AAUvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAVgG;AAWvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAX0F;AAYvG,kBAAgB;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B;AAZuF,CAAzG;AAeA,OAAM,SAAU,2BAAV,CACJ,SADI,EAC8C;AAElD,MAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;AACjD,WAAO,EAAP;AACD;;AAED,MAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;AACjC,WAAO,eAAe,CAAC,SAAD,CAAtB;AACD;;AAED,SAAO,SAAP;AACD","sourceRoot":""}
@@ -17,35 +17,41 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
17
17
  * ref.current = 1;
18
18
  * // prints 0 -> 1
19
19
  */
20
+
20
21
  export function useCallbackRef(initialValue, callback, skipInitialResolve) {
21
- const isFirst = React.useRef(true);
22
- const [ref] = React.useState(() => ({
23
- // value
24
- value: initialValue,
25
- // last callback
26
- callback,
27
- // "memoized" public interface
28
- facade: {
29
- get current() {
30
- return ref.value;
31
- },
32
- set current(value) {
33
- const last = ref.value;
34
- if (last !== value) {
35
- ref.value = value;
36
- if (skipInitialResolve && isFirst.current) {
37
- return;
38
- }
39
- ref.callback(value, last);
40
- }
41
- },
42
- },
43
- }));
44
- useIsomorphicLayoutEffect(() => {
45
- isFirst.current = false;
46
- }, []);
47
- // update callback
48
- ref.callback = callback;
49
- return ref.facade;
22
+ const isFirst = React.useRef(true);
23
+ const [ref] = React.useState(() => ({
24
+ // value
25
+ value: initialValue,
26
+ // last callback
27
+ callback,
28
+ // "memoized" public interface
29
+ facade: {
30
+ get current() {
31
+ return ref.value;
32
+ },
33
+
34
+ set current(value) {
35
+ const last = ref.value;
36
+
37
+ if (last !== value) {
38
+ ref.value = value;
39
+
40
+ if (skipInitialResolve && isFirst.current) {
41
+ return;
42
+ }
43
+
44
+ ref.callback(value, last);
45
+ }
46
+ }
47
+
48
+ }
49
+ }));
50
+ useIsomorphicLayoutEffect(() => {
51
+ isFirst.current = false;
52
+ }, []); // update callback
53
+
54
+ ref.callback = callback;
55
+ return ref.facade;
50
56
  }
51
57
  //# sourceMappingURL=useCallbackRef.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCallbackRef.js","sourceRoot":"","sources":["../../src/utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,cAAc,CAC5B,YAAsB,EACtB,QAA2D,EAC3D,kBAA4B;IAE5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAClC,QAAQ;QACR,KAAK,EAAE,YAAY;QACnB,gBAAgB;QAChB,QAAQ;QACR,8BAA8B;QAC9B,MAAM,EAAE;YACN,IAAI,OAAO;gBACT,OAAO,GAAG,CAAC,KAAK,CAAC;YACnB,CAAC;YACD,IAAI,OAAO,CAAC,KAAK;gBACf,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC;gBAEvB,IAAI,IAAI,KAAK,KAAK,EAAE;oBAClB,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;oBAElB,IAAI,kBAAkB,IAAI,OAAO,CAAC,OAAO,EAAE;wBACzC,OAAO;qBACR;oBAED,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC;SACF;KACF,CAAC,CAAC,CAAC;IAEJ,yBAAyB,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kBAAkB;IAClB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAExB,OAAO,GAAG,CAAC,MAAM,CAAC;AACpB,CAAC"}
1
+ {"version":3,"sources":["../../src/utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;AAE5B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;AACA,QAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;AAClC;AACA,IAAA,KAAK,EAAE,YAF2B;AAGlC;AACA,IAAA,QAJkC;AAKlC;AACA,IAAA,MAAM,EAAE;AACN,UAAI,OAAJ,GAAW;AACT,eAAO,GAAG,CAAC,KAAX;AACD,OAHK;;AAIN,UAAI,OAAJ,CAAY,KAAZ,EAAiB;AACf,cAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;AAEA,YAAI,IAAI,KAAK,KAAb,EAAoB;AAClB,UAAA,GAAG,CAAC,KAAJ,GAAY,KAAZ;;AAEA,cAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;AACzC;AACD;;AAED,UAAA,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;AACD;AACF;;AAhBK;AAN0B,GAAP,CAAf,CAAd;AA0BA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD","sourceRoot":""}
@@ -1,27 +1,64 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
2
- import type { Theme } from '@fluentui/react-theme';
1
+ import type { MakeStylesStyle } from '@fluentui/react-make-styles';
2
+ /**
3
+ * Options parameter for the createArrowStyles function
4
+ */
5
+ export declare type CreateArrowStylesOptions = {
6
+ /**
7
+ * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
8
+ *
9
+ * This can be undefined to leave out the arrow size styles. You must then add styles created by
10
+ * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
11
+ */
12
+ arrowHeight: number | undefined;
13
+ /**
14
+ * The borderWidth of the arrow. Should be the same borderWidth as the parent element.
15
+ *
16
+ * @defaultvalue 1px
17
+ */
18
+ borderWidth?: MakeStylesStyle['borderBottomWidth'];
19
+ /**
20
+ * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
21
+ *
22
+ * @defaultvalue solid
23
+ */
24
+ borderStyle?: MakeStylesStyle['borderBottomStyle'];
25
+ /**
26
+ * The borderColor of the arrow. Should be the same borderColor as the parent element.
27
+ *
28
+ * @defaultvalue tokens.colorTransparentStroke
29
+ */
30
+ borderColor?: MakeStylesStyle['borderBottomColor'];
31
+ };
3
32
  /**
4
33
  * Helper that creates a makeStyles rule for an arrow element.
5
34
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
6
35
  *
7
36
  * ```ts
8
37
  * makeStyles({
9
- * arrowWithSize: createArrowStyles(5),
38
+ * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
10
39
  *
11
- * arrowWithoutSize: createArrowStyles(),
12
- * mediumArrow: { aspectRatio: 1, width: '4px' }
13
- * smallArrow: { aspectRatio: 1, width: '2px' }
40
+ * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
41
+ * mediumArrow: createArrowHeightStyles(4),
42
+ * smallArrow: createArrowHeightStyles(2),
14
43
  * })
15
44
  * ...
16
45
  *
17
- * state.arrowWithSize.clasName = styles.arrowWithSize
18
- * state.arrowWithoutSize.className = mergeClases(
46
+ * state.arrowWithSize.className = styles.arrowWithSize;
47
+ * state.arrowWithoutSize.className = mergeClasses(
19
48
  * styles.arrowWithoutSize,
20
49
  * state.smallArrow && styles.smallArrow,
21
50
  * state.mediumArrow && styles.mediumArrow,
22
51
  * )
23
52
  * ```
53
+ */
54
+ export declare function createArrowStyles(options: CreateArrowStylesOptions): MakeStylesStyle;
55
+ /**
56
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
24
57
  *
25
- * @param size - dimensions of the square arrow element in pixels.
58
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
59
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
26
60
  */
27
- export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
61
+ export declare function createArrowHeightStyles(arrowHeight: number): {
62
+ width: string;
63
+ height: string;
64
+ };
@@ -1,79 +1,100 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createArrowStyles = void 0;
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
7
+
8
+ const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
4
11
  /**
5
12
  * Helper that creates a makeStyles rule for an arrow element.
6
13
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
7
14
  *
8
15
  * ```ts
9
16
  * makeStyles({
10
- * arrowWithSize: createArrowStyles(5),
17
+ * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
11
18
  *
12
- * arrowWithoutSize: createArrowStyles(),
13
- * mediumArrow: { aspectRatio: 1, width: '4px' }
14
- * smallArrow: { aspectRatio: 1, width: '2px' }
19
+ * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
20
+ * mediumArrow: createArrowHeightStyles(4),
21
+ * smallArrow: createArrowHeightStyles(2),
15
22
  * })
16
23
  * ...
17
24
  *
18
- * state.arrowWithSize.clasName = styles.arrowWithSize
19
- * state.arrowWithoutSize.className = mergeClases(
25
+ * state.arrowWithSize.className = styles.arrowWithSize;
26
+ * state.arrowWithoutSize.className = mergeClasses(
20
27
  * styles.arrowWithoutSize,
21
28
  * state.smallArrow && styles.smallArrow,
22
29
  * state.mediumArrow && styles.mediumArrow,
23
30
  * )
24
31
  * ```
25
- *
26
- * @param size - dimensions of the square arrow element in pixels.
27
32
  */
28
- function createArrowStyles(size) {
29
- return theme => {
30
- const arrowHCBorderStyle = `1px solid transparent`;
31
- const arrowHCBorder = {
32
- borderRight: arrowHCBorderStyle,
33
- borderBottom: arrowHCBorderStyle,
34
- };
35
- return {
36
- position: 'absolute',
37
- background: 'inherit',
38
- visibility: 'hidden',
39
- zIndex: -1,
40
- ...(size && {
41
- aspectRatio: 1,
42
- width: `${size}px`,
43
- }),
44
- ':before': {
45
- content: '""',
46
- borderRadius: '4px',
47
- position: 'absolute',
48
- width: 'inherit',
49
- height: 'inherit',
50
- background: 'inherit',
51
- visibility: 'visible',
52
- borderBottomRightRadius: theme.borderRadiusSmall,
53
- transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
54
- },
55
- ':global([data-popper-placement])': {
56
- ':before': arrowHCBorder,
57
- },
58
- // Popper sets data-popper-placement on the root element, which is used to align the arrow
59
- ':global([data-popper-placement^="top"])': {
60
- bottom: 0,
61
- '--angle': '0',
62
- },
63
- ':global([data-popper-placement^="right"])': {
64
- left: 0,
65
- '--angle': '90deg',
66
- },
67
- ':global([data-popper-placement^="bottom"])': {
68
- top: 0,
69
- '--angle': '180deg',
70
- },
71
- ':global([data-popper-placement^="left"])': {
72
- right: 0,
73
- '--angle': '270deg',
74
- },
75
- };
76
- };
33
+
34
+
35
+ function createArrowStyles(options) {
36
+ const {
37
+ arrowHeight,
38
+ borderWidth = '1px',
39
+ borderStyle = 'solid',
40
+ borderColor = react_theme_1.tokens.colorTransparentStroke
41
+ } = options;
42
+ return {
43
+ position: 'absolute',
44
+ backgroundColor: 'inherit',
45
+ visibility: 'hidden',
46
+ zIndex: -1,
47
+ ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
48
+ ':before': {
49
+ content: '""',
50
+ visibility: 'visible',
51
+ position: 'absolute',
52
+ boxSizing: 'border-box',
53
+ width: 'inherit',
54
+ height: 'inherit',
55
+ backgroundColor: 'inherit',
56
+ ...react_make_styles_1.shorthands.borderRight(borderWidth, borderStyle, borderColor),
57
+ ...react_make_styles_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
58
+ borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall,
59
+ transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
60
+ },
61
+ // Popper sets data-popper-placement on the root element, which is used to align the arrow
62
+ ':global([data-popper-placement^="top"])': {
63
+ bottom: `-${borderWidth}`,
64
+ '--angle': '0'
65
+ },
66
+ ':global([data-popper-placement^="right"])': {
67
+ left: `-${borderWidth} /* @noflip */`,
68
+ '--angle': '90deg'
69
+ },
70
+ ':global([data-popper-placement^="bottom"])': {
71
+ top: `-${borderWidth}`,
72
+ '--angle': '180deg'
73
+ },
74
+ ':global([data-popper-placement^="left"])': {
75
+ right: `-${borderWidth} /* @noflip */`,
76
+ '--angle': '270deg'
77
+ }
78
+ };
77
79
  }
80
+
78
81
  exports.createArrowStyles = createArrowStyles;
82
+ /**
83
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
84
+ *
85
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
86
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
87
+ */
88
+
89
+ function createArrowHeightStyles(arrowHeight) {
90
+ // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
91
+ // Multiply the triangle's height by sqrt(2) to get length of its edges.
92
+ const edgeLength = `${1.414 * arrowHeight}px`;
93
+ return {
94
+ width: edgeLength,
95
+ height: edgeLength
96
+ };
97
+ }
98
+
99
+ exports.createArrowHeightStyles = createArrowHeightStyles;
79
100
  //# sourceMappingURL=createArrowStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createArrowStyles.js","sourceRoot":"","sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,iBAAiB,CAAC,IAAa;IAC7C,OAAO,KAAK,CAAC,EAAE;QACb,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;QACnD,MAAM,aAAa,GAAG;YACpB,WAAW,EAAE,kBAAkB;YAC/B,YAAY,EAAE,kBAAkB;SACjC,CAAC;QAEF,OAAO;YACL,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,CAAC,CAAC;YAEV,GAAG,CAAC,IAAI,IAAI;gBACV,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,GAAG,IAAI,IAAI;aACnB,CAAC;YAEF,SAAS,EAAE;gBACT,OAAO,EAAE,IAAI;gBACb,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,SAAS;gBACrB,UAAU,EAAE,SAAS;gBACrB,uBAAuB,EAAE,KAAK,CAAC,iBAAiB;gBAChD,SAAS,EAAE,sDAAsD;aAClE;YAED,kCAAkC,EAAE;gBAClC,SAAS,EAAE,aAAa;aACzB;YAED,0FAA0F;YAC1F,yCAAyC,EAAE;gBACzC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,GAAG;aACf;YAED,2CAA2C,EAAE;gBAC3C,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,OAAO;aACnB;YACD,4CAA4C,EAAE;gBAC5C,GAAG,EAAE,CAAC;gBACN,SAAS,EAAE,QAAQ;aACpB;YACD,0CAA0C,EAAE;gBAC1C,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAvDD,8CAuDC"}
1
+ {"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":""}
@@ -1,28 +1,35 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.createVirtualElementFromClick = void 0;
4
7
  /**
5
8
  * Creates a virtual element based on the position of a click event
6
9
  * Can be used as a target for popper in scenarios such as context menus
7
10
  */
11
+
8
12
  function createVirtualElementFromClick(nativeEvent) {
9
- const left = nativeEvent.clientX;
10
- const top = nativeEvent.clientY;
11
- const right = left + 1;
12
- const bottom = top + 1;
13
- function getBoundingClientRect() {
14
- return {
15
- left,
16
- top,
17
- right,
18
- bottom,
19
- height: 1,
20
- width: 1,
21
- };
22
- }
13
+ const left = nativeEvent.clientX;
14
+ const top = nativeEvent.clientY;
15
+ const right = left + 1;
16
+ const bottom = top + 1;
17
+
18
+ function getBoundingClientRect() {
23
19
  return {
24
- getBoundingClientRect,
20
+ left,
21
+ top,
22
+ right,
23
+ bottom,
24
+ height: 1,
25
+ width: 1
25
26
  };
27
+ }
28
+
29
+ return {
30
+ getBoundingClientRect
31
+ };
26
32
  }
33
+
27
34
  exports.createVirtualElementFromClick = createVirtualElementFromClick;
28
35
  //# sourceMappingURL=createVirtualElementFromClick.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":";;;AAEA;;;GAGG;AACH,SAAgB,6BAA6B,CAAC,WAAuB;IACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI;YACJ,GAAG;YACH,KAAK;YACL,MAAM;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB;KACtB,CAAC;AACJ,CAAC;AArBD,sEAqBC"}
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":""}
@@ -1,13 +1,34 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
4
- const tslib_1 = require("tslib");
7
+
8
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
+
5
10
  tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
11
+
6
12
  tslib_1.__exportStar(require("./createArrowStyles"), exports);
13
+
7
14
  tslib_1.__exportStar(require("./usePopper"), exports);
15
+
8
16
  tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
9
- var index_1 = require("./utils/index");
10
- Object.defineProperty(exports, "resolvePositioningShorthand", { enumerable: true, get: function () { return index_1.resolvePositioningShorthand; } });
11
- Object.defineProperty(exports, "mergeArrowOffset", { enumerable: true, get: function () { return index_1.mergeArrowOffset; } });
17
+
18
+ var index_1 = /*#__PURE__*/require("./utils/index");
19
+
20
+ Object.defineProperty(exports, "resolvePositioningShorthand", {
21
+ enumerable: true,
22
+ get: function () {
23
+ return index_1.resolvePositioningShorthand;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "mergeArrowOffset", {
27
+ enumerable: true,
28
+ get: function () {
29
+ return index_1.mergeArrowOffset;
30
+ }
31
+ });
32
+
12
33
  tslib_1.__exportStar(require("./types"), exports);
13
34
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,0EAAgD;AAChD,8DAAoC;AACpC,sDAA4B;AAC5B,iEAAuC;AACvC,uCAA8E;AAArE,oHAAA,2BAA2B,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AACtD,kDAAwB"}
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":""}
@@ -1,3 +1,6 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  //# sourceMappingURL=types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}