@fluentui/react-positioning 9.0.0-rc.9 → 9.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. package/CHANGELOG.json +141 -1
  2. package/CHANGELOG.md +54 -2
  3. package/dist/index.d.ts +78 -46
  4. package/lib/createArrowStyles.js +3 -1
  5. package/lib/createArrowStyles.js.map +1 -1
  6. package/lib/createVirtualElementFromClick.js +2 -0
  7. package/lib/createVirtualElementFromClick.js.map +1 -1
  8. package/lib/index.js +2 -2
  9. package/lib/index.js.map +1 -1
  10. package/lib/isIntersectingModifier.js.map +1 -1
  11. package/lib/types.js.map +1 -1
  12. package/lib/{usePopper.js → usePositioning.js} +10 -8
  13. package/lib/usePositioning.js.map +1 -0
  14. package/lib/{usePopperMouseTarget.js → usePositioningMouseTarget.js} +4 -3
  15. package/lib/usePositioningMouseTarget.js.map +1 -0
  16. package/lib/utils/fromPopperPlacement.js +40 -0
  17. package/lib/utils/fromPopperPlacement.js.map +1 -0
  18. package/lib/utils/getBoundary.js.map +1 -1
  19. package/lib/utils/getPopperOffset.js +44 -0
  20. package/lib/utils/getPopperOffset.js.map +1 -0
  21. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  22. package/lib/utils/getScrollParent.js.map +1 -1
  23. package/lib/utils/index.js +1 -1
  24. package/lib/utils/index.js.map +1 -1
  25. package/lib/utils/mergeArrowOffset.js +24 -22
  26. package/lib/utils/mergeArrowOffset.js.map +1 -1
  27. package/lib/utils/parsePopperPlacement.js +14 -0
  28. package/lib/utils/parsePopperPlacement.js.map +1 -0
  29. package/lib/utils/positioningHelper.js.map +1 -1
  30. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  31. package/lib/utils/useCallbackRef.js.map +1 -1
  32. package/lib-commonjs/createArrowStyles.js +3 -1
  33. package/lib-commonjs/createArrowStyles.js.map +1 -1
  34. package/lib-commonjs/createVirtualElementFromClick.js +2 -0
  35. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  36. package/lib-commonjs/index.js +7 -7
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/lib-commonjs/isIntersectingModifier.js.map +1 -1
  39. package/lib-commonjs/{usePopper.js → usePositioning.js} +13 -10
  40. package/lib-commonjs/usePositioning.js.map +1 -0
  41. package/lib-commonjs/{usePopperMouseTarget.js → usePositioningMouseTarget.js} +6 -5
  42. package/lib-commonjs/usePositioningMouseTarget.js.map +1 -0
  43. package/lib-commonjs/utils/fromPopperPlacement.js +50 -0
  44. package/lib-commonjs/utils/fromPopperPlacement.js.map +1 -0
  45. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  46. package/lib-commonjs/utils/getPopperOffset.js +54 -0
  47. package/lib-commonjs/utils/getPopperOffset.js.map +1 -0
  48. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  49. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  50. package/lib-commonjs/utils/index.js +2 -2
  51. package/lib-commonjs/utils/index.js.map +1 -1
  52. package/lib-commonjs/utils/mergeArrowOffset.js +24 -22
  53. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  54. package/lib-commonjs/utils/parsePopperPlacement.js +23 -0
  55. package/lib-commonjs/utils/parsePopperPlacement.js.map +1 -0
  56. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  57. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  58. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  59. package/package.json +6 -8
  60. package/lib/usePopper.js.map +0 -1
  61. package/lib/usePopperMouseTarget.js.map +0 -1
  62. package/lib/utils/getBasePlacement.js +0 -10
  63. package/lib/utils/getBasePlacement.js.map +0 -1
  64. package/lib-commonjs/usePopper.js.map +0 -1
  65. package/lib-commonjs/usePopperMouseTarget.js.map +0 -1
  66. package/lib-commonjs/utils/getBasePlacement.js +0 -19
  67. package/lib-commonjs/utils/getBasePlacement.js.map +0 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,147 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 12:09:59 GMT",
5
+ "date": "Tue, 28 Jun 2022 15:09:02 GMT",
6
+ "tag": "@fluentui/react-positioning_v9.0.0",
7
+ "version": "9.0.0",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
14
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
15
+ },
16
+ {
17
+ "author": "lingfangao@hotmail.com",
18
+ "package": "@fluentui/react-positioning",
19
+ "commit": "2da4428ae7d6e464c538b7ed10e425ce0e531144",
20
+ "comment": "chore: Mark teams-prg owned APIs with @internal"
21
+ },
22
+ {
23
+ "author": "Humberto.Morimoto@microsoft.com",
24
+ "package": "@fluentui/react-positioning",
25
+ "commit": "09f58dcbef2306875046261dc0b7821283ccc287",
26
+ "comment": "chore: Using ::before and ::after instead of :before and :after."
27
+ },
28
+ {
29
+ "author": "lingfangao@hotmail.com",
30
+ "package": "@fluentui/react-positioning",
31
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
32
+ "comment": "Bump Griffel dependencies"
33
+ }
34
+ ],
35
+ "patch": [
36
+ {
37
+ "author": "lingfangao@hotmail.com",
38
+ "package": "@fluentui/react-positioning",
39
+ "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
40
+ "comment": "feat: Initial 9.0.0 release"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-positioning",
45
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0",
46
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui/react-positioning",
51
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
52
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui/react-positioning",
57
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
58
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
59
+ }
60
+ ]
61
+ }
62
+ },
63
+ {
64
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
65
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.12",
66
+ "version": "9.0.0-rc.12",
67
+ "comments": {
68
+ "prerelease": [
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-positioning",
72
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.11",
73
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-positioning",
78
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
79
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
80
+ }
81
+ ]
82
+ }
83
+ },
84
+ {
85
+ "date": "Tue, 31 May 2022 21:28:42 GMT",
86
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.11",
87
+ "version": "9.0.0-rc.11",
88
+ "comments": {
89
+ "prerelease": [
90
+ {
91
+ "author": "bernardo.sunderhus@gmail.com",
92
+ "package": "@fluentui/react-positioning",
93
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
94
+ "comment": "updates import to react-shared-components"
95
+ },
96
+ {
97
+ "author": "olfedias@microsoft.com",
98
+ "package": "@fluentui/react-positioning",
99
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
100
+ "comment": "chore: Update Griffel to latest version"
101
+ },
102
+ {
103
+ "author": "beachball",
104
+ "package": "@fluentui/react-positioning",
105
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
106
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
107
+ },
108
+ {
109
+ "author": "beachball",
110
+ "package": "@fluentui/react-positioning",
111
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
112
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
113
+ }
114
+ ]
115
+ }
116
+ },
117
+ {
118
+ "date": "Mon, 23 May 2022 18:56:47 GMT",
119
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.10",
120
+ "version": "9.0.0-rc.10",
121
+ "comments": {
122
+ "prerelease": [
123
+ {
124
+ "author": "lingfangao@hotmail.com",
125
+ "package": "@fluentui/react-positioning",
126
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
127
+ "comment": "BREAKING CHANGE: Encapsulate Popper API"
128
+ },
129
+ {
130
+ "author": "beachball",
131
+ "package": "@fluentui/react-positioning",
132
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
133
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
134
+ },
135
+ {
136
+ "author": "beachball",
137
+ "package": "@fluentui/react-positioning",
138
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
139
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
140
+ }
141
+ ]
142
+ }
143
+ },
144
+ {
145
+ "date": "Mon, 23 May 2022 12:13:34 GMT",
6
146
  "tag": "@fluentui/react-positioning_v9.0.0-rc.9",
7
147
  "version": "9.0.0-rc.9",
8
148
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,64 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Mon, 23 May 2022 12:09:59 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 28 Jun 2022 15:09:02 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0)
8
+
9
+ Tue, 28 Jun 2022 15:09:02 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.12..@fluentui/react-positioning_v9.0.0)
11
+
12
+ ### Patches
13
+
14
+ - feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/react-shared-contexts to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
16
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
18
+
19
+ ### Changes
20
+
21
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
22
+ - chore: Mark teams-prg owned APIs with @internal ([PR #23689](https://github.com/microsoft/fluentui/pull/23689) by lingfangao@hotmail.com)
23
+ - chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
24
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
25
+
26
+ ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.12)
27
+
28
+ Thu, 23 Jun 2022 14:25:31 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.11..@fluentui/react-positioning_v9.0.0-rc.12)
30
+
31
+ ### Changes
32
+
33
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
34
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
35
+
36
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.11)
37
+
38
+ Tue, 31 May 2022 21:28:42 GMT
39
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.10..@fluentui/react-positioning_v9.0.0-rc.11)
40
+
41
+ ### Changes
42
+
43
+ - updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
44
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
45
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
46
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
47
+
48
+ ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.10)
49
+
50
+ Mon, 23 May 2022 18:56:47 GMT
51
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.9..@fluentui/react-positioning_v9.0.0-rc.10)
52
+
53
+ ### Changes
54
+
55
+ - BREAKING CHANGE: Encapsulate Popper API ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
56
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
57
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
58
+
7
59
  ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.9)
8
60
 
9
- Mon, 23 May 2022 12:09:59 GMT
61
+ Mon, 23 May 2022 12:13:34 GMT
10
62
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.8..@fluentui/react-positioning_v9.0.0-rc.9)
11
63
 
12
64
  ### Changes
package/dist/index.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import type { GriffelStyle } from '@griffel/react';
2
- import * as PopperJs from '@popperjs/core';
3
2
  import * as React_2 from 'react';
4
3
 
5
4
  export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
6
5
 
7
6
  export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
8
7
 
9
- export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
8
+ export declare type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
10
9
 
11
10
  /**
11
+ * @internal
12
12
  * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
13
13
  *
14
14
  * Use this when you need to create classes for several different arrow sizes. If you only need a
@@ -20,6 +20,7 @@ export declare function createArrowHeightStyles(arrowHeight: number): {
20
20
  };
21
21
 
22
22
  /**
23
+ * @internal
23
24
  * Helper that creates a makeStyles rule for an arrow element.
24
25
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
25
26
  *
@@ -44,6 +45,7 @@ export declare function createArrowHeightStyles(arrowHeight: number): {
44
45
  export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
45
46
 
46
47
  /**
48
+ * @internal
47
49
  * Options parameter for the createArrowStyles function
48
50
  */
49
51
  export declare type CreateArrowStylesOptions = {
@@ -78,9 +80,10 @@ export declare type CreateArrowStylesOptions = {
78
80
  * Creates a virtual element based on the position of a click event
79
81
  * Can be used as a target for popper in scenarios such as context menus
80
82
  */
81
- export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
83
+ export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
82
84
 
83
85
  /**
86
+ * @internal
84
87
  * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
85
88
  * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
86
89
  *
@@ -90,22 +93,45 @@ export declare function createVirtualElementFromClick(nativeEvent: MouseEvent):
90
93
  */
91
94
  export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
92
95
 
93
- export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
96
+ export declare type Offset = OffsetFunction | OffsetObject | OffsetShorthand;
94
97
 
95
- export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
98
+ export declare type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
96
99
 
97
100
  export declare type OffsetFunctionParam = {
98
- popper: PopperJs.Rect;
99
- reference: PopperJs.Rect;
100
- placement: PopperJs.Placement;
101
+ positionedRect: Rect;
102
+ targetRect: Rect;
103
+ position: Position;
104
+ alignment?: Alignment;
101
105
  };
102
106
 
103
- export declare interface PopperOptions {
107
+ export declare type OffsetObject = {
108
+ crossAxis?: number;
109
+ mainAxis: number;
110
+ };
111
+
112
+ export declare type OffsetShorthand = number;
113
+
114
+ export declare type Position = 'above' | 'below' | 'before' | 'after';
115
+
116
+ export declare type PositioningImperativeRef = {
117
+ /**
118
+ * Updates the position imperatively.
119
+ * Useful when the position of the target changes from other factors than scrolling of window resize.
120
+ */
121
+ updatePosition: () => void;
122
+ /**
123
+ * Sets the target and updates positioning imperatively.
124
+ * Useful for avoiding double renders with the target option.
125
+ */
126
+ setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
127
+ };
128
+
129
+ declare interface PositioningOptions {
104
130
  /** Alignment for the component. Only has an effect if used with the @see position option */
105
131
  align?: Alignment;
106
- /** The element which will define the boundaries of the popper position for the flip behavior. */
132
+ /** The element which will define the boundaries of the positioned element for the flip behavior. */
107
133
  flipBoundary?: Boundary;
108
- /** The element which will define the boundaries of the popper position for the overflow behavior. */
134
+ /** The element which will define the boundaries of the positioned element for the overflow behavior. */
109
135
  overflowBoundary?: Boundary;
110
136
  /**
111
137
  * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
@@ -115,12 +141,12 @@ export declare interface PopperOptions {
115
141
  */
116
142
  position?: Position;
117
143
  /**
118
- * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
144
+ * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
119
145
  * @default false
120
146
  */
121
147
  positionFixed?: boolean;
122
148
  /**
123
- * Lets you displace a popper element from its reference element.
149
+ * Lets you displace a positioned element from its reference element.
124
150
  * This can be useful if you need to apply some margin between them or if you need to fine tune the
125
151
  * position according to some custom logic.
126
152
  */
@@ -131,7 +157,7 @@ export declare interface PopperOptions {
131
157
  */
132
158
  arrowPadding?: number;
133
159
  /**
134
- * Applies max-height and max-width on popper to fit it within the available space in viewport.
160
+ * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.
135
161
  * true enables this for both width and height when overflow happens.
136
162
  * 'always' applies `max-height`/`max-width` regardless of overflow.
137
163
  * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
@@ -148,45 +174,58 @@ export declare interface PopperOptions {
148
174
  */
149
175
  pinned?: boolean;
150
176
  /**
151
- * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
177
+ * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
152
178
  * "all" enables this behavior for all axis.
153
179
  */
154
180
  unstable_disableTether?: boolean | 'all';
155
181
  }
156
182
 
157
- export declare type PopperRefHandle = {
158
- /**
159
- * Updates the position of the popper imperatively.
160
- * Useful when the position of the target changes from other factors than scrolling of window resize.
161
- */
162
- updatePosition: () => void;
163
- /**
164
- * Sets the target and updates positioning imperatively.
165
- * Useful for avoiding double renders with the target option.
166
- */
167
- setTarget: (target: HTMLElement | PopperVirtualElement) => void;
168
- };
169
-
170
- export declare type PopperVirtualElement = PopperJs.VirtualElement;
171
-
172
- export declare type Position = 'above' | 'below' | 'before' | 'after';
173
-
174
- export declare interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
183
+ export declare interface PositioningProps extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {
175
184
  /** An imperative handle to Popper methods. */
176
- popperRef?: React_2.Ref<PopperRefHandle>;
185
+ positioningRef?: React_2.Ref<PositioningImperativeRef>;
177
186
  /**
178
- * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
187
+ * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
179
188
  */
180
- target?: HTMLElement | PopperVirtualElement | null;
189
+ target?: HTMLElement | PositioningVirtualElement | null;
181
190
  }
182
191
 
183
192
  export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
184
193
 
185
194
  export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
186
195
 
196
+ export declare type PositioningVirtualElement = {
197
+ getBoundingClientRect: () => {
198
+ x: number;
199
+ y: number;
200
+ top: number;
201
+ left: number;
202
+ bottom: number;
203
+ right: number;
204
+ width: number;
205
+ height: number;
206
+ };
207
+ contextElement?: Element;
208
+ };
209
+
210
+ declare type Rect = {
211
+ width: number;
212
+ height: number;
213
+ x: number;
214
+ y: number;
215
+ };
216
+
187
217
  export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
188
218
 
219
+ declare interface UsePopperOptions extends PositioningProps {
220
+ /**
221
+ * If false, delays Popper's creation.
222
+ * @default true
223
+ */
224
+ enabled?: boolean;
225
+ }
226
+
189
227
  /**
228
+ * @internal
190
229
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
191
230
  * package:
192
231
  * - style attributes are applied directly on DOM to avoid re-renders
@@ -194,13 +233,14 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
194
233
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
195
234
  * to avoid focus jumps
196
235
  */
197
- export declare function usePopper(options?: UsePopperOptions): {
236
+ export declare function usePositioning(options?: UsePopperOptions): {
198
237
  targetRef: React_2.MutableRefObject<any>;
199
238
  containerRef: React_2.MutableRefObject<any>;
200
239
  arrowRef: React_2.MutableRefObject<any>;
201
240
  };
202
241
 
203
242
  /**
243
+ * @internal
204
244
  * A state hook that manages a popper virtual element from mouseevents.
205
245
  * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
206
246
  * React synthetic events are not persisted by this hook
@@ -208,14 +248,6 @@ export declare function usePopper(options?: UsePopperOptions): {
208
248
  * @param initialState - initializes a user provided state similare to useState
209
249
  * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
210
250
  */
211
- export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
212
-
213
- declare interface UsePopperOptions extends PositioningProps {
214
- /**
215
- * If false, delays Popper's creation.
216
- * @default true
217
- */
218
- enabled?: boolean;
219
- }
251
+ export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
220
252
 
221
253
  export { }
@@ -1,6 +1,7 @@
1
1
  import { shorthands } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  /**
4
+ * @internal
4
5
  * Helper that creates a makeStyles rule for an arrow element.
5
6
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
6
7
  *
@@ -36,7 +37,7 @@ export function createArrowStyles(options) {
36
37
  visibility: 'hidden',
37
38
  zIndex: -1,
38
39
  ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
39
- ':before': {
40
+ '::before': {
40
41
  content: '""',
41
42
  visibility: 'visible',
42
43
  position: 'absolute',
@@ -69,6 +70,7 @@ export function createArrowStyles(options) {
69
70
  };
70
71
  }
71
72
  /**
73
+ * @internal
72
74
  * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
73
75
  *
74
76
  * Use this when you need to create classes for several different arrow sizes. If you only need a
@@ -1 +1 @@
1
- {"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,MAAM,CAAC;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,MAAM,CAAC,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;AAED;;;;;AAKG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD","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
+ {"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAsCA;;;;;;;;;;;;;;;;;;;;;;AAsBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;EACjE,MAAM;IACJ,WADI;IAEJ,WAAW,GAAG,KAFV;IAGJ,WAAW,GAAG,OAHV;IAIJ,WAAW,GAAG,MAAM,CAAC;EAJjB,IAKF,OALJ;EAOA,OAAO;IACL,QAAQ,EAAE,UADL;IAEL,eAAe,EAAE,SAFZ;IAGL,UAAU,EAAE,QAHP;IAIL,MAAM,EAAE,CAAC,CAJJ;IAML,IAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;IAQL,YAAY;MACV,OAAO,EAAE,IADC;MAEV,UAAU,EAAE,SAFF;MAGV,QAAQ,EAAE,UAHA;MAIV,SAAS,EAAE,YAJD;MAKV,KAAK,EAAE,SALG;MAMV,MAAM,EAAE,SANE;MAOV,eAAe,EAAE,SAPP;MAQV,GAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARO;MAaV,GAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbO;MAcV,uBAAuB,EAAE,MAAM,CAAC,iBAdtB;MAeV,SAAS,EAAE;IAfD,CARP;IA0BL;IACA,2CAA2C;MACzC,MAAM,EAAE,IAAI,WAAW,EADkB;MAEzC,WAAW;IAF8B,CA3BtC;IA+BL,6CAA6C;MAC3C,IAAI,EAAE,IAAI,WAAW,gBADsB;MAE3C,WAAW;IAFgC,CA/BxC;IAmCL,8CAA8C;MAC5C,GAAG,EAAE,IAAI,WAAW,EADwB;MAE5C,WAAW;IAFiC,CAnCzC;IAuCL,4CAA4C;MAC1C,KAAK,EAAE,IAAI,WAAW,gBADoB;MAE1C,WAAW;IAF+B;EAvCvC,CAAP;AA4CD;AAED;;;;;;AAMG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;EACzD;EACA;EACA,MAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;EACA,OAAO;IAAE,KAAK,EAAE,UAAT;IAAqB,MAAM,EAAE;EAA7B,CAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\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 * @internal\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 * @internal\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/"}
@@ -14,6 +14,8 @@ export function createVirtualElementFromClick(nativeEvent) {
14
14
  top,
15
15
  right,
16
16
  bottom,
17
+ x: left,
18
+ y: top,
17
19
  height: 1,
18
20
  width: 1
19
21
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;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","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/"}
1
+ {"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;EACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;EACA,MAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;EACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAArB;EACA,MAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;EAEA,SAAS,qBAAT,GAA8B;IAC5B,OAAO;MACL,IADK;MAEL,GAFK;MAGL,KAHK;MAIL,MAJK;MAKL,CAAC,EAAE,IALE;MAML,CAAC,EAAE,GANE;MAOL,MAAM,EAAE,CAPH;MAQL,KAAK,EAAE;IARF,CAAP;EAUD;;EAED,OAAO;IACL;EADK,CAAP;AAGD","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/"}
package/lib/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export { createVirtualElementFromClick } from './createVirtualElementFromClick';
2
2
  export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
3
- export { usePopper } from './usePopper';
4
- export { usePopperMouseTarget } from './usePopperMouseTarget';
3
+ export { usePositioning } from './usePositioning';
4
+ export { usePositioningMouseTarget } from './usePositioningMouseTarget';
5
5
  export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
6
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePopper } from './usePopper';\nexport { usePopperMouseTarget } from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n PopperOptions,\n PopperRefHandle,\n PopperVirtualElement,\n Position,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n} from './types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","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"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;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,cAAc,CAAC,KAAD,EAAQ;AAAE,MAAA,WAAW,EAAE;AAAf,KAAR,CAAxC;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,CAAvD","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
+ {"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;EAC5D,IAAI,EAAE,0BADsD;EAE5D,OAAO,EAAE,IAFmD;EAG5D,KAAK,EAAE,MAHqD;EAI5D,QAAQ,EAAE,CAAC,iBAAD,CAJkD;EAK5D,EAAE,EAAE,CAAC;IAAE,KAAF;IAAS;EAAT,CAAD,KAAoB;IACtB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;IACA,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAD,EAAQ;MAAE,WAAW,EAAE;IAAf,CAAR,CAAxC;IAEA,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;IACA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;IAEA,MAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;IAEA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;MAC1B;IAD0B,CAA5B;IAGA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;MAExB,+BAA+B;IAFP,CAA1B;EAID;AArB2D,CAAvD","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/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport * as React from 'react';\n\nexport type OffsetFunctionParam = {\n popper: PopperJs.Rect;\n reference: PopperJs.Rect;\n placement: PopperJs.Placement;\n};\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];\n\nexport type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';\n\nexport type PopperRefHandle = {\n /**\n * Updates the position of the popper imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target: HTMLElement | PopperVirtualElement) => void;\n};\n\nexport type PopperVirtualElement = PopperJs.VirtualElement;\n\nexport interface PopperOptions {\n /** Alignment for the component. Only has an effect if used with the @see position option */\n align?: Alignment;\n\n /** The element which will define the boundaries of the popper position for the flip behavior. */\n flipBoundary?: Boundary;\n\n /** The element which will define the boundaries of the popper position for the overflow behavior. */\n overflowBoundary?: Boundary;\n\n /**\n * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n * and 'start' | 'end' respectively),\n * then provided value for 'align' will be ignored and 'center' will be used instead.\n */\n position?: Position;\n\n /**\n * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')\n * @default false\n */\n positionFixed?: boolean;\n\n /**\n * Lets you displace a popper element from its reference element.\n * This can be useful if you need to apply some margin between them or if you need to fine tune the\n * position according to some custom logic.\n */\n offset?: Offset;\n\n /**\n * Defines padding between the corner of the popup element and the arrow.\n * Use to prevent the arrow from overlapping a rounded corner, for example.\n */\n arrowPadding?: number;\n\n /**\n * Applies max-height and max-width on popper to fit it within the available space in viewport.\n * true enables this for both width and height when overflow happens.\n * 'always' applies `max-height`/`max-width` regardless of overflow.\n * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n */\n autoSize?: AutoSize;\n\n /**\n * Modifies position and alignment to cover the target\n */\n coverTarget?: boolean;\n\n /**\n * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n * `position` props, regardless of the size of the component, the reference element or the viewport.\n */\n pinned?: boolean;\n\n /**\n * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.\n * \"all\" enables this behavior for all axis.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {\n /** An imperative handle to Popper methods. */\n popperRef?: React.Ref<PopperRefHandle>;\n\n /**\n * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target\n */\n target?: HTMLElement | PopperVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n | 'above'\n | 'above-start'\n | 'above-end'\n | 'below'\n | 'below-start'\n | 'below-end'\n | 'before'\n | 'before-top'\n | 'before-bottom'\n | 'after'\n | 'after-top'\n | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n width: number;\n height: number;\n x: number;\n y: number;\n};\n\nexport type OffsetFunctionParam = {\n positionedRect: Rect;\n targetRect: Rect;\n position: Position;\n alignment?: Alignment;\n};\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n /**\n * Updates the position imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target: HTMLElement | PositioningVirtualElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n getBoundingClientRect: () => {\n x: number;\n y: number;\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n };\n contextElement?: Element;\n};\n\nexport interface PositioningOptions {\n /** Alignment for the component. Only has an effect if used with the @see position option */\n align?: Alignment;\n\n /** The element which will define the boundaries of the positioned element for the flip behavior. */\n flipBoundary?: Boundary;\n\n /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n overflowBoundary?: Boundary;\n\n /**\n * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n * and 'start' | 'end' respectively),\n * then provided value for 'align' will be ignored and 'center' will be used instead.\n */\n position?: Position;\n\n /**\n * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n * @default false\n */\n positionFixed?: boolean;\n\n /**\n * Lets you displace a positioned element from its reference element.\n * This can be useful if you need to apply some margin between them or if you need to fine tune the\n * position according to some custom logic.\n */\n offset?: Offset;\n\n /**\n * Defines padding between the corner of the popup element and the arrow.\n * Use to prevent the arrow from overlapping a rounded corner, for example.\n */\n arrowPadding?: number;\n\n /**\n * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n * true enables this for both width and height when overflow happens.\n * 'always' applies `max-height`/`max-width` regardless of overflow.\n * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n */\n autoSize?: AutoSize;\n\n /**\n * Modifies position and alignment to cover the target\n */\n coverTarget?: boolean;\n\n /**\n * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n * `position` props, regardless of the size of the component, the reference element or the viewport.\n */\n pinned?: boolean;\n\n /**\n * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n * \"all\" enables this behavior for all axis.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n /** An imperative handle to Popper methods. */\n positioningRef?: React.Ref<PositioningImperativeRef>;\n\n /**\n * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n */\n target?: HTMLElement | PositioningVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n | 'above'\n | 'above-start'\n | 'above-end'\n | 'below'\n | 'below-start'\n | 'below-end'\n | 'before'\n | 'before-top'\n | 'before-bottom'\n | 'after'\n | 'after-top'\n | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}