@fluentui/react-positioning 0.0.0-nightly8faa94d11420211118.1 → 0.0.0-nightly946f57cad420220203.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 +101 -10
  2. package/CHANGELOG.md +26 -8
  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 +7 -8
package/CHANGELOG.json CHANGED
@@ -2,17 +2,102 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 18 Nov 2021 04:18:43 GMT",
6
- "tag": "@fluentui/react-positioning_v0.0.0-nightly8faa94d11420211118.1",
7
- "version": "0.0.0-nightly8faa94d11420211118.1",
5
+ "date": "Thu, 03 Feb 2022 04:16:54 GMT",
6
+ "tag": "@fluentui/react-positioning_v0.0.0-nightly946f57cad420220203.1",
7
+ "version": "0.0.0-nightly946f57cad420220203.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
11
  "author": "email not defined",
12
12
  "package": "@fluentui/react-positioning",
13
- "commit": "a449bd93de8007bbeb4346e285638fdfd0f25f4d",
13
+ "commit": "1d230926e10b3b722bd932be1ec39faaf340671c",
14
14
  "comment": "Release nightly v9"
15
15
  },
16
+ {
17
+ "author": "olfedias@microsoft.com",
18
+ "package": "@fluentui/react-positioning",
19
+ "commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
20
+ "comment": "use new types from makeStyles core"
21
+ },
22
+ {
23
+ "author": "Humberto.Morimoto@microsoft.com",
24
+ "package": "@fluentui/react-positioning",
25
+ "commit": "db6526ee2d04991e4473174969e3795299b52f9e",
26
+ "comment": "Replacing use of functions in makeStyles with direct use of tokens."
27
+ },
28
+ {
29
+ "author": "behowell@microsoft.com",
30
+ "package": "@fluentui/react-positioning",
31
+ "commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
32
+ "comment": "Fix tooltip arrow's high contrast border in RTL"
33
+ },
34
+ {
35
+ "author": "olfedias@microsoft.com",
36
+ "package": "@fluentui/react-positioning",
37
+ "commit": "523b5785eafd28cf56b677af40274cefe5d42dcb",
38
+ "comment": "use Griffel packages"
39
+ },
40
+ {
41
+ "author": "bsunderhus@microsoft.com",
42
+ "package": "@fluentui/react-positioning",
43
+ "commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
44
+ "comment": "Adds @noflip annotation to data-popper-placement styles"
45
+ },
46
+ {
47
+ "author": "olfedias@microsoft.com",
48
+ "package": "@fluentui/react-positioning",
49
+ "commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
50
+ "comment": "update styles to not use CSS shorthands"
51
+ },
52
+ {
53
+ "author": "behowell@microsoft.com",
54
+ "package": "@fluentui/react-positioning",
55
+ "commit": "09804275c7f346db54c33d4ff347bffc33676014",
56
+ "comment": "Fix popover arrow styling"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-positioning",
61
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly946f57cad420220203.1",
62
+ "commit": "1d230926e10b3b722bd932be1ec39faaf340671c"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-positioning",
67
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly946f57cad420220203.1",
68
+ "commit": "1d230926e10b3b722bd932be1ec39faaf340671c"
69
+ }
70
+ ],
71
+ "none": [
72
+ {
73
+ "author": "olfedias@microsoft.com",
74
+ "package": "@fluentui/react-positioning",
75
+ "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
76
+ "comment": "remove inline-style-expand-shorthand from tsconfigs"
77
+ },
78
+ {
79
+ "author": "martinhochel@microsoft.com",
80
+ "package": "@fluentui/react-positioning",
81
+ "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
82
+ "comment": "chore: use storybook runner for all vNext packages"
83
+ }
84
+ ]
85
+ }
86
+ },
87
+ {
88
+ "date": "Thu, 25 Nov 2021 08:34:15 GMT",
89
+ "tag": "@fluentui/react-positioning_v9.0.0-beta.4",
90
+ "version": "9.0.0-beta.4",
91
+ "comments": {
92
+ "none": [
93
+ {
94
+ "author": "lingfangao@hotmail.com",
95
+ "package": "@fluentui/react-positioning",
96
+ "commit": "718e63006d8d07d24efab9c32942041963d78dc7",
97
+ "comment": "Migrate package to use solution style ts-configs"
98
+ }
99
+ ],
100
+ "prerelease": [
16
101
  {
17
102
  "author": "lingfangao@hotmail.com",
18
103
  "package": "@fluentui/react-positioning",
@@ -22,20 +107,26 @@
22
107
  {
23
108
  "author": "beachball",
24
109
  "package": "@fluentui/react-positioning",
25
- "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly8faa94d11420211118.1",
26
- "commit": "a449bd93de8007bbeb4346e285638fdfd0f25f4d"
110
+ "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
111
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
112
+ },
113
+ {
114
+ "author": "beachball",
115
+ "package": "@fluentui/react-positioning",
116
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
117
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
27
118
  },
28
119
  {
29
120
  "author": "beachball",
30
121
  "package": "@fluentui/react-positioning",
31
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly8faa94d11420211118.1",
32
- "commit": "a449bd93de8007bbeb4346e285638fdfd0f25f4d"
122
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
123
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
33
124
  },
34
125
  {
35
126
  "author": "beachball",
36
127
  "package": "@fluentui/react-positioning",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly8faa94d11420211118.1",
38
- "commit": "a449bd93de8007bbeb4346e285638fdfd0f25f4d"
128
+ "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
129
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
39
130
  }
40
131
  ]
41
132
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,39 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Thu, 18 Nov 2021 04:18:43 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 03 Feb 2022 04:16:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly8faa94d11420211118.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly8faa94d11420211118.1)
7
+ ## [0.0.0-nightly946f57cad420220203.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly946f57cad420220203.1)
8
8
 
9
- Thu, 18 Nov 2021 04:18:43 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v0.0.0-nightly8faa94d11420211118.1)
9
+ Thu, 03 Feb 2022 04:16:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightly946f57cad420220203.1)
11
+
12
+ ### Changes
13
+
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/1d230926e10b3b722bd932be1ec39faaf340671c) by email not defined)
15
+ - use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
16
+ - Replacing use of functions in makeStyles with direct use of tokens. ([PR #21051](https://github.com/microsoft/fluentui/pull/21051) by Humberto.Morimoto@microsoft.com)
17
+ - Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
18
+ - use Griffel packages ([PR #21421](https://github.com/microsoft/fluentui/pull/21421) by olfedias@microsoft.com)
19
+ - Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
20
+ - update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
21
+ - Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
22
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly946f57cad420220203.1 ([commit](https://github.com/microsoft/fluentui/commit/1d230926e10b3b722bd932be1ec39faaf340671c) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly946f57cad420220203.1 ([commit](https://github.com/microsoft/fluentui/commit/1d230926e10b3b722bd932be1ec39faaf340671c) by beachball)
24
+
25
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
26
+
27
+ Thu, 25 Nov 2021 08:34:15 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)
11
29
 
12
30
  ### Changes
13
31
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/a449bd93de8007bbeb4346e285638fdfd0f25f4d) by email not defined)
15
32
  - Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
16
- - Bump @fluentui/react-make-styles to v0.0.0-nightly8faa94d11420211118.1 ([commit](https://github.com/microsoft/fluentui/commit/a449bd93de8007bbeb4346e285638fdfd0f25f4d) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly8faa94d11420211118.1 ([commit](https://github.com/microsoft/fluentui/commit/a449bd93de8007bbeb4346e285638fdfd0f25f4d) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly8faa94d11420211118.1 ([commit](https://github.com/microsoft/fluentui/commit/a449bd93de8007bbeb4346e285638fdfd0f25f4d) by beachball)
33
+ - Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
34
+ - Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
35
+ - Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
36
+ - Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
19
37
 
20
38
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)
21
39
 
@@ -1,7 +1,6 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
1
+ import type { GriffelStyle } from '@griffel/react';
2
2
  import * as PopperJs from '@popperjs/core';
3
3
  import * as React_2 from 'react';
4
- import type { Theme } from '@fluentui/react-theme';
5
4
 
6
5
  export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
7
6
 
@@ -9,31 +8,71 @@ export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-alw
9
8
 
10
9
  export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
11
10
 
11
+ /**
12
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
13
+ *
14
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
15
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
16
+ */
17
+ export declare function createArrowHeightStyles(arrowHeight: number): {
18
+ width: string;
19
+ height: string;
20
+ };
21
+
12
22
  /**
13
23
  * Helper that creates a makeStyles rule for an arrow element.
14
24
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
15
25
  *
16
26
  * ```ts
17
27
  * makeStyles({
18
- * arrowWithSize: createArrowStyles(5),
28
+ * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
19
29
  *
20
- * arrowWithoutSize: createArrowStyles(),
21
- * mediumArrow: { aspectRatio: 1, width: '4px' }
22
- * smallArrow: { aspectRatio: 1, width: '2px' }
30
+ * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
31
+ * mediumArrow: createArrowHeightStyles(4),
32
+ * smallArrow: createArrowHeightStyles(2),
23
33
  * })
24
34
  * ...
25
35
  *
26
- * state.arrowWithSize.clasName = styles.arrowWithSize
27
- * state.arrowWithoutSize.className = mergeClases(
36
+ * state.arrowWithSize.className = styles.arrowWithSize;
37
+ * state.arrowWithoutSize.className = mergeClasses(
28
38
  * styles.arrowWithoutSize,
29
39
  * state.smallArrow && styles.smallArrow,
30
40
  * state.mediumArrow && styles.mediumArrow,
31
41
  * )
32
42
  * ```
33
- *
34
- * @param size - dimensions of the square arrow element in pixels.
35
43
  */
36
- export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
44
+ export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
45
+
46
+ /**
47
+ * Options parameter for the createArrowStyles function
48
+ */
49
+ export declare type CreateArrowStylesOptions = {
50
+ /**
51
+ * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
52
+ *
53
+ * This can be undefined to leave out the arrow size styles. You must then add styles created by
54
+ * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
55
+ */
56
+ arrowHeight: number | undefined;
57
+ /**
58
+ * The borderWidth of the arrow. Should be the same borderWidth as the parent element.
59
+ *
60
+ * @defaultvalue 1px
61
+ */
62
+ borderWidth?: GriffelStyle['borderBottomWidth'];
63
+ /**
64
+ * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
65
+ *
66
+ * @defaultvalue solid
67
+ */
68
+ borderStyle?: GriffelStyle['borderBottomStyle'];
69
+ /**
70
+ * The borderColor of the arrow. Should be the same borderColor as the parent element.
71
+ *
72
+ * @defaultvalue tokens.colorTransparentStroke
73
+ */
74
+ borderColor?: GriffelStyle['borderBottomColor'];
75
+ };
37
76
 
38
77
  /**
39
78
  * Creates a virtual element based on the position of a click event
@@ -1,27 +1,64 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
2
- import type { Theme } from '@fluentui/react-theme';
1
+ import type { GriffelStyle } from '@griffel/react';
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?: GriffelStyle['borderBottomWidth'];
19
+ /**
20
+ * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
21
+ *
22
+ * @defaultvalue solid
23
+ */
24
+ borderStyle?: GriffelStyle['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?: GriffelStyle['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): GriffelStyle;
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,75 +1,87 @@
1
+ import { shorthands } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
1
3
  /**
2
4
  * Helper that creates a makeStyles rule for an arrow element.
3
5
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
4
6
  *
5
7
  * ```ts
6
8
  * makeStyles({
7
- * arrowWithSize: createArrowStyles(5),
9
+ * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
8
10
  *
9
- * arrowWithoutSize: createArrowStyles(),
10
- * mediumArrow: { aspectRatio: 1, width: '4px' }
11
- * smallArrow: { aspectRatio: 1, width: '2px' }
11
+ * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
12
+ * mediumArrow: createArrowHeightStyles(4),
13
+ * smallArrow: createArrowHeightStyles(2),
12
14
  * })
13
15
  * ...
14
16
  *
15
- * state.arrowWithSize.clasName = styles.arrowWithSize
16
- * state.arrowWithoutSize.className = mergeClases(
17
+ * state.arrowWithSize.className = styles.arrowWithSize;
18
+ * state.arrowWithoutSize.className = mergeClasses(
17
19
  * styles.arrowWithoutSize,
18
20
  * state.smallArrow && styles.smallArrow,
19
21
  * state.mediumArrow && styles.mediumArrow,
20
22
  * )
21
23
  * ```
24
+ */
25
+
26
+ export function createArrowStyles(options) {
27
+ const {
28
+ arrowHeight,
29
+ borderWidth = '1px',
30
+ borderStyle = 'solid',
31
+ borderColor = tokens.colorTransparentStroke
32
+ } = options;
33
+ return {
34
+ position: 'absolute',
35
+ backgroundColor: 'inherit',
36
+ visibility: 'hidden',
37
+ zIndex: -1,
38
+ ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
39
+ ':before': {
40
+ content: '""',
41
+ visibility: 'visible',
42
+ position: 'absolute',
43
+ boxSizing: 'border-box',
44
+ width: 'inherit',
45
+ height: 'inherit',
46
+ backgroundColor: 'inherit',
47
+ ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
48
+ ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
49
+ borderBottomRightRadius: tokens.borderRadiusSmall,
50
+ transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
51
+ },
52
+ // Popper sets data-popper-placement on the root element, which is used to align the arrow
53
+ ':global([data-popper-placement^="top"])': {
54
+ bottom: `-${borderWidth}`,
55
+ '--angle': '0'
56
+ },
57
+ ':global([data-popper-placement^="right"])': {
58
+ left: `-${borderWidth} /* @noflip */`,
59
+ '--angle': '90deg'
60
+ },
61
+ ':global([data-popper-placement^="bottom"])': {
62
+ top: `-${borderWidth}`,
63
+ '--angle': '180deg'
64
+ },
65
+ ':global([data-popper-placement^="left"])': {
66
+ right: `-${borderWidth} /* @noflip */`,
67
+ '--angle': '270deg'
68
+ }
69
+ };
70
+ }
71
+ /**
72
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
22
73
  *
23
- * @param size - dimensions of the square arrow element in pixels.
74
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
75
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
24
76
  */
25
- export function createArrowStyles(size) {
26
- return theme => {
27
- const arrowHCBorderStyle = `1px solid transparent`;
28
- const arrowHCBorder = {
29
- borderRight: arrowHCBorderStyle,
30
- borderBottom: arrowHCBorderStyle,
31
- };
32
- return {
33
- position: 'absolute',
34
- background: 'inherit',
35
- visibility: 'hidden',
36
- zIndex: -1,
37
- ...(size && {
38
- aspectRatio: 1,
39
- width: `${size}px`,
40
- }),
41
- ':before': {
42
- content: '""',
43
- borderRadius: '4px',
44
- position: 'absolute',
45
- width: 'inherit',
46
- height: 'inherit',
47
- background: 'inherit',
48
- visibility: 'visible',
49
- borderBottomRightRadius: theme.borderRadiusSmall,
50
- transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
51
- },
52
- ':global([data-popper-placement])': {
53
- ':before': arrowHCBorder,
54
- },
55
- // Popper sets data-popper-placement on the root element, which is used to align the arrow
56
- ':global([data-popper-placement^="top"])': {
57
- bottom: 0,
58
- '--angle': '0',
59
- },
60
- ':global([data-popper-placement^="right"])': {
61
- left: 0,
62
- '--angle': '90deg',
63
- },
64
- ':global([data-popper-placement^="bottom"])': {
65
- top: 0,
66
- '--angle': '180deg',
67
- },
68
- ':global([data-popper-placement^="left"])': {
69
- right: 0,
70
- '--angle': '270deg',
71
- },
72
- };
73
- };
77
+
78
+ export function createArrowHeightStyles(arrowHeight) {
79
+ // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
80
+ // Multiply the triangle's height by sqrt(2) to get length of its edges.
81
+ const edgeLength = `${1.414 * arrowHeight}px`;
82
+ return {
83
+ width: edgeLength,
84
+ height: edgeLength
85
+ };
74
86
  }
75
87
  //# sourceMappingURL=createArrowStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createArrowStyles.js","sourceRoot":"","sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,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"}
1
+ {"version":3,"sources":["../src/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","sourceRoot":""}
@@ -3,22 +3,24 @@
3
3
  * Can be used as a target for popper in scenarios such as context menus
4
4
  */
5
5
  export function createVirtualElementFromClick(nativeEvent) {
6
- const left = nativeEvent.clientX;
7
- const top = nativeEvent.clientY;
8
- const right = left + 1;
9
- const bottom = top + 1;
10
- function getBoundingClientRect() {
11
- return {
12
- left,
13
- top,
14
- right,
15
- bottom,
16
- height: 1,
17
- width: 1,
18
- };
19
- }
6
+ const left = nativeEvent.clientX;
7
+ const top = nativeEvent.clientY;
8
+ const right = left + 1;
9
+ const bottom = top + 1;
10
+
11
+ function getBoundingClientRect() {
20
12
  return {
21
- getBoundingClientRect,
13
+ left,
14
+ top,
15
+ right,
16
+ bottom,
17
+ height: 1,
18
+ width: 1
22
19
  };
20
+ }
21
+
22
+ return {
23
+ getBoundingClientRect
24
+ };
23
25
  }
24
26
  //# sourceMappingURL=createVirtualElementFromClick.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,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"}
1
+ {"version":3,"sources":["../src/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","sourceRoot":""}