@fluentui/react-positioning 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (117) hide show
  1. package/CHANGELOG.json +457 -12
  2. package/CHANGELOG.md +209 -72
  3. package/dist/index.d.ts +247 -0
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/createArrowStyles.js +87 -0
  6. package/lib/createArrowStyles.js.map +1 -0
  7. package/lib/createVirtualElementFromClick.js +19 -15
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/index.js +4 -4
  10. package/lib/index.js.map +1 -1
  11. package/lib/isIntersectingModifier.js +26 -0
  12. package/lib/isIntersectingModifier.js.map +1 -0
  13. package/lib/types.js.map +1 -1
  14. package/lib/usePositioning.js +408 -0
  15. package/lib/usePositioning.js.map +1 -0
  16. package/lib/usePositioningMouseTarget.js +40 -0
  17. package/lib/usePositioningMouseTarget.js.map +1 -0
  18. package/lib/utils/fromPopperPlacement.js +40 -0
  19. package/lib/utils/fromPopperPlacement.js.map +1 -0
  20. package/lib/utils/getBoundary.js +15 -10
  21. package/lib/utils/getBoundary.js.map +1 -1
  22. package/lib/utils/getPopperOffset.js +44 -0
  23. package/lib/utils/getPopperOffset.js.map +1 -0
  24. package/lib/utils/getReactFiberFromNode.js +39 -35
  25. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  26. package/lib/utils/getScrollParent.js +46 -32
  27. package/lib/utils/getScrollParent.js.map +1 -1
  28. package/lib/utils/index.js +1 -1
  29. package/lib/utils/index.js.map +1 -1
  30. package/lib/utils/mergeArrowOffset.js +31 -25
  31. package/lib/utils/mergeArrowOffset.js.map +1 -1
  32. package/lib/utils/parsePopperPlacement.js +14 -0
  33. package/lib/utils/parsePopperPlacement.js.map +1 -0
  34. package/lib/utils/positioningHelper.js +42 -34
  35. package/lib/utils/positioningHelper.js.map +1 -1
  36. package/lib/utils/resolvePositioningShorthand.js +58 -20
  37. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  38. package/lib/utils/useCallbackRef.js +35 -29
  39. package/lib/utils/useCallbackRef.js.map +1 -1
  40. package/lib-commonjs/createArrowStyles.js +100 -0
  41. package/lib-commonjs/createArrowStyles.js.map +1 -0
  42. package/lib-commonjs/createVirtualElementFromClick.js +25 -16
  43. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  44. package/lib-commonjs/index.js +62 -10
  45. package/lib-commonjs/index.js.map +1 -1
  46. package/lib-commonjs/isIntersectingModifier.js +34 -0
  47. package/lib-commonjs/isIntersectingModifier.js.map +1 -0
  48. package/lib-commonjs/types.js +4 -1
  49. package/lib-commonjs/types.js.map +1 -1
  50. package/lib-commonjs/usePositioning.js +424 -0
  51. package/lib-commonjs/usePositioning.js.map +1 -0
  52. package/lib-commonjs/usePositioningMouseTarget.js +51 -0
  53. package/lib-commonjs/usePositioningMouseTarget.js.map +1 -0
  54. package/lib-commonjs/utils/fromPopperPlacement.js +50 -0
  55. package/lib-commonjs/utils/fromPopperPlacement.js.map +1 -0
  56. package/lib-commonjs/utils/getBoundary.js +23 -12
  57. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  58. package/lib-commonjs/utils/getPopperOffset.js +54 -0
  59. package/lib-commonjs/utils/getPopperOffset.js.map +1 -0
  60. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  61. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  62. package/lib-commonjs/utils/getScrollParent.js +53 -33
  63. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  64. package/lib-commonjs/utils/index.js +15 -3
  65. package/lib-commonjs/utils/index.js.map +1 -1
  66. package/lib-commonjs/utils/mergeArrowOffset.js +37 -26
  67. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  68. package/lib-commonjs/utils/parsePopperPlacement.js +23 -0
  69. package/lib-commonjs/utils/parsePopperPlacement.js.map +1 -0
  70. package/lib-commonjs/utils/positioningHelper.js +50 -35
  71. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  72. package/lib-commonjs/utils/resolvePositioningShorthand.js +66 -23
  73. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  74. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  75. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  76. package/package.json +17 -14
  77. package/dist/react-positioning.d.ts +0 -143
  78. package/lib/createVirtualElementFromClick.d.ts +0 -6
  79. package/lib/index.d.ts +0 -5
  80. package/lib/types.d.ts +0 -68
  81. package/lib/usePopper.d.ts +0 -35
  82. package/lib/usePopper.js +0 -357
  83. package/lib/usePopper.js.map +0 -1
  84. package/lib/usePopperMouseTarget.d.ts +0 -11
  85. package/lib/usePopperMouseTarget.js +0 -34
  86. package/lib/usePopperMouseTarget.js.map +0 -1
  87. package/lib/utils/getBasePlacement.d.ts +0 -8
  88. package/lib/utils/getBasePlacement.js +0 -10
  89. package/lib/utils/getBasePlacement.js.map +0 -1
  90. package/lib/utils/getBoundary.d.ts +0 -6
  91. package/lib/utils/getReactFiberFromNode.d.ts +0 -109
  92. package/lib/utils/getScrollParent.d.ts +0 -12
  93. package/lib/utils/index.d.ts +0 -8
  94. package/lib/utils/mergeArrowOffset.d.ts +0 -10
  95. package/lib/utils/positioningHelper.d.ts +0 -7
  96. package/lib/utils/resolvePositioningShorthand.d.ts +0 -2
  97. package/lib/utils/useCallbackRef.d.ts +0 -19
  98. package/lib-commonjs/createVirtualElementFromClick.d.ts +0 -6
  99. package/lib-commonjs/index.d.ts +0 -5
  100. package/lib-commonjs/types.d.ts +0 -68
  101. package/lib-commonjs/usePopper.d.ts +0 -35
  102. package/lib-commonjs/usePopper.js +0 -361
  103. package/lib-commonjs/usePopper.js.map +0 -1
  104. package/lib-commonjs/usePopperMouseTarget.d.ts +0 -11
  105. package/lib-commonjs/usePopperMouseTarget.js +0 -38
  106. package/lib-commonjs/usePopperMouseTarget.js.map +0 -1
  107. package/lib-commonjs/utils/getBasePlacement.d.ts +0 -8
  108. package/lib-commonjs/utils/getBasePlacement.js +0 -14
  109. package/lib-commonjs/utils/getBasePlacement.js.map +0 -1
  110. package/lib-commonjs/utils/getBoundary.d.ts +0 -6
  111. package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -109
  112. package/lib-commonjs/utils/getScrollParent.d.ts +0 -12
  113. package/lib-commonjs/utils/index.d.ts +0 -8
  114. package/lib-commonjs/utils/mergeArrowOffset.d.ts +0 -10
  115. package/lib-commonjs/utils/positioningHelper.d.ts +0 -7
  116. package/lib-commonjs/utils/resolvePositioningShorthand.d.ts +0 -2
  117. package/lib-commonjs/utils/useCallbackRef.d.ts +0 -19
@@ -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
- var isFirst = React.useRef(true);
22
- var ref = React.useState(function () { return ({
23
- // value
24
- value: initialValue,
25
- // last callback
26
- callback: callback,
27
- // "memoized" public interface
28
- facade: {
29
- get current() {
30
- return ref.value;
31
- },
32
- set current(value) {
33
- var 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
- }); })[0];
44
- useIsomorphicLayoutEffect(function () {
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,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAA,GAAG,GAAI,KAAK,CAAC,QAAQ,CAAC,cAAM,OAAA,CAAC;QAClC,QAAQ;QACR,KAAK,EAAE,YAAY;QACnB,gBAAgB;QAChB,QAAQ,UAAA;QACR,8BAA8B;QAC9B,MAAM,EAAE;YACN,IAAI,OAAO;gBACT,OAAO,GAAG,CAAC,KAAK,CAAC;YACnB,CAAC;YACD,IAAI,OAAO,CAAC,KAAK;gBACf,IAAM,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,EAxBiC,CAwBjC,CAAC,GAxBO,CAwBN;IAEJ,yBAAyB,CAAC;QACxB,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":["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","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
7
+
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+ /**
12
+ * Helper that creates a makeStyles rule for an arrow element.
13
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
14
+ *
15
+ * ```ts
16
+ * makeStyles({
17
+ * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
18
+ *
19
+ * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
20
+ * mediumArrow: createArrowHeightStyles(4),
21
+ * smallArrow: createArrowHeightStyles(2),
22
+ * })
23
+ * ...
24
+ *
25
+ * state.arrowWithSize.className = styles.arrowWithSize;
26
+ * state.arrowWithoutSize.className = mergeClasses(
27
+ * styles.arrowWithoutSize,
28
+ * state.smallArrow && styles.smallArrow,
29
+ * state.mediumArrow && styles.mediumArrow,
30
+ * )
31
+ * ```
32
+ */
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_1.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
57
+ ...react_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
+ };
79
+ }
80
+
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;
100
+ //# sourceMappingURL=createArrowStyles.js.map
@@ -0,0 +1 @@
1
+ {"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/"}
@@ -1,28 +1,37 @@
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
- var left = nativeEvent.clientX;
10
- var top = nativeEvent.clientY;
11
- var right = left + 1;
12
- var bottom = top + 1;
13
- function getBoundingClientRect() {
14
- return {
15
- left: left,
16
- top: top,
17
- right: right,
18
- bottom: 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: getBoundingClientRect,
20
+ left,
21
+ top,
22
+ right,
23
+ bottom,
24
+ x: left,
25
+ y: top,
26
+ height: 1,
27
+ width: 1
25
28
  };
29
+ }
30
+
31
+ return {
32
+ getBoundingClientRect
33
+ };
26
34
  }
35
+
27
36
  exports.createVirtualElementFromClick = createVirtualElementFromClick;
28
37
  //# 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,IAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,IAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,IAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,IAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI,MAAA;YACJ,GAAG,KAAA;YACH,KAAK,OAAA;YACL,MAAM,QAAA;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB,uBAAA;KACtB,CAAC;AACJ,CAAC;AArBD,sEAqBC"}
1
+ {"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;AAKL,MAAA,CAAC,EAAE,IALE;AAML,MAAA,CAAC,EAAE,GANE;AAOL,MAAA,MAAM,EAAE,CAPH;AAQL,MAAA,KAAK,EAAE;AARF,KAAP;AAUD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AAtBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
@@ -1,12 +1,64 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
4
- var tslib_1 = require("tslib");
5
- tslib_1.__exportStar(require("./usePopper"), exports);
6
- tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
7
- tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
8
- var index_1 = require("./utils/index");
9
- Object.defineProperty(exports, "resolvePositioningShorthand", { enumerable: true, get: function () { return index_1.resolvePositioningShorthand; } });
10
- Object.defineProperty(exports, "mergeArrowOffset", { enumerable: true, get: function () { return index_1.mergeArrowOffset; } });
11
- tslib_1.__exportStar(require("./types"), exports);
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePositioningMouseTarget = exports.usePositioning = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
7
+
8
+ var createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
9
+
10
+ Object.defineProperty(exports, "createVirtualElementFromClick", {
11
+ enumerable: true,
12
+ get: function () {
13
+ return createVirtualElementFromClick_1.createVirtualElementFromClick;
14
+ }
15
+ });
16
+
17
+ var createArrowStyles_1 = /*#__PURE__*/require("./createArrowStyles");
18
+
19
+ Object.defineProperty(exports, "createArrowHeightStyles", {
20
+ enumerable: true,
21
+ get: function () {
22
+ return createArrowStyles_1.createArrowHeightStyles;
23
+ }
24
+ });
25
+ Object.defineProperty(exports, "createArrowStyles", {
26
+ enumerable: true,
27
+ get: function () {
28
+ return createArrowStyles_1.createArrowStyles;
29
+ }
30
+ });
31
+
32
+ var usePositioning_1 = /*#__PURE__*/require("./usePositioning");
33
+
34
+ Object.defineProperty(exports, "usePositioning", {
35
+ enumerable: true,
36
+ get: function () {
37
+ return usePositioning_1.usePositioning;
38
+ }
39
+ });
40
+
41
+ var usePositioningMouseTarget_1 = /*#__PURE__*/require("./usePositioningMouseTarget");
42
+
43
+ Object.defineProperty(exports, "usePositioningMouseTarget", {
44
+ enumerable: true,
45
+ get: function () {
46
+ return usePositioningMouseTarget_1.usePositioningMouseTarget;
47
+ }
48
+ });
49
+
50
+ var index_1 = /*#__PURE__*/require("./utils/index");
51
+
52
+ Object.defineProperty(exports, "resolvePositioningShorthand", {
53
+ enumerable: true,
54
+ get: function () {
55
+ return index_1.resolvePositioningShorthand;
56
+ }
57
+ });
58
+ Object.defineProperty(exports, "mergeArrowOffset", {
59
+ enumerable: true,
60
+ get: function () {
61
+ return index_1.mergeArrowOffset;
62
+ }
63
+ });
12
64
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,sDAA4B;AAC5B,0EAAgD;AAChD,iEAAuC;AACvC,uCAA8E;AAArE,oHAAA,2BAA2B,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AACtD,kDAAwB"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,+BAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,+BAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;;AACT,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAElC,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,cAAA;AAAc;AAAd,CAAA;;AACT,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,2BAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;;AACT,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","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n} from './types';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isIntersectingModifier = void 0;
7
+
8
+ const core_1 = /*#__PURE__*/require("@popperjs/core");
9
+
10
+ exports.isIntersectingModifier = {
11
+ name: 'is-intersecting-modifier',
12
+ enabled: true,
13
+ phase: 'main',
14
+ requires: ['preventOverflow'],
15
+ fn: ({
16
+ state,
17
+ name
18
+ }) => {
19
+ const popperRect = state.rects.popper;
20
+ const popperAltOverflow = core_1.detectOverflow(state, {
21
+ altBoundary: true
22
+ });
23
+ const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;
24
+ const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;
25
+ const isIntersecting = isIntersectingTop || isIntersectingBottom;
26
+ state.modifiersData[name] = {
27
+ isIntersecting
28
+ };
29
+ state.attributes.popper = { ...state.attributes.popper,
30
+ 'data-popper-is-intersecting': isIntersecting
31
+ };
32
+ }
33
+ };
34
+ //# sourceMappingURL=isIntersectingModifier.js.map
@@ -0,0 +1 @@
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/"}
@@ -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":"../src/"}