@fluentui/react-positioning 0.0.0-nightlybd3e92b51920211126.1 → 0.0.0-nightlyebf02572f720211207.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/CHANGELOG.json +43 -7
  2. package/CHANGELOG.md +12 -6
  3. package/dist/react-positioning.d.ts +3 -3
  4. package/lib/createArrowStyles.d.ts +3 -3
  5. package/lib/createArrowStyles.js +46 -48
  6. package/lib/createArrowStyles.js.map +1 -1
  7. package/lib/utils/positioningHelper.d.ts +1 -1
  8. package/lib-commonjs/createArrowStyles.d.ts +3 -3
  9. package/lib-commonjs/createArrowStyles.js +47 -48
  10. package/lib-commonjs/createArrowStyles.js.map +1 -1
  11. package/lib-commonjs/utils/positioningHelper.d.ts +1 -1
  12. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,22 +2,58 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 26 Nov 2021 04:15:39 GMT",
6
- "tag": "@fluentui/react-positioning_v0.0.0-nightlybd3e92b51920211126.1",
7
- "version": "0.0.0-nightlybd3e92b51920211126.1",
5
+ "date": "Tue, 07 Dec 2021 04:14:28 GMT",
6
+ "tag": "@fluentui/react-positioning_v0.0.0-nightlyebf02572f720211207.1",
7
+ "version": "0.0.0-nightlyebf02572f720211207.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
+ {
11
+ "author": "email not defined",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "2523b8c9da23ec860780244563814b63ba963043",
14
+ "comment": "Release nightly v9"
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": "bsunderhus@microsoft.com",
24
+ "package": "@fluentui/react-positioning",
25
+ "commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
26
+ "comment": "Adds @noflip annotation to data-popper-placement styles"
27
+ },
28
+ {
29
+ "author": "olfedias@microsoft.com",
30
+ "package": "@fluentui/react-positioning",
31
+ "commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
32
+ "comment": "update styles to not use CSS shorthands"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-positioning",
37
+ "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightlyebf02572f720211207.1",
38
+ "commit": "2523b8c9da23ec860780244563814b63ba963043"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-positioning",
43
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlyebf02572f720211207.1",
44
+ "commit": "2523b8c9da23ec860780244563814b63ba963043"
45
+ },
10
46
  {
11
47
  "author": "beachball",
12
48
  "package": "@fluentui/react-positioning",
13
- "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightlybd3e92b51920211126.1",
14
- "commit": "88b4f0133881c8a1f21d12c544960e291be12a3d"
49
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightlyebf02572f720211207.1",
50
+ "commit": "2523b8c9da23ec860780244563814b63ba963043"
15
51
  },
16
52
  {
17
53
  "author": "beachball",
18
54
  "package": "@fluentui/react-positioning",
19
- "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightlybd3e92b51920211126.1",
20
- "commit": "88b4f0133881c8a1f21d12c544960e291be12a3d"
55
+ "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightlyebf02572f720211207.1",
56
+ "commit": "2523b8c9da23ec860780244563814b63ba963043"
21
57
  }
22
58
  ]
23
59
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,24 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Fri, 26 Nov 2021 04:15:39 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 07 Dec 2021 04:14:28 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightlybd3e92b51920211126.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightlybd3e92b51920211126.1)
7
+ ## [0.0.0-nightlyebf02572f720211207.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightlyebf02572f720211207.1)
8
8
 
9
- Fri, 26 Nov 2021 04:15:39 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightlybd3e92b51920211126.1)
9
+ Tue, 07 Dec 2021 04:14:28 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightlyebf02572f720211207.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Bump @fluentui/react-make-styles to v0.0.0-nightlybd3e92b51920211126.1 ([commit](https://github.com/microsoft/fluentui/commit/88b4f0133881c8a1f21d12c544960e291be12a3d) by beachball)
15
- - Bump @fluentui/babel-make-styles to v0.0.0-nightlybd3e92b51920211126.1 ([commit](https://github.com/microsoft/fluentui/commit/88b4f0133881c8a1f21d12c544960e291be12a3d) by beachball)
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) 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
+ - Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
17
+ - update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
18
+ - Bump @fluentui/react-make-styles to v0.0.0-nightlyebf02572f720211207.1 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightlyebf02572f720211207.1 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightlyebf02572f720211207.1 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by beachball)
21
+ - Bump @fluentui/babel-make-styles to v0.0.0-nightlyebf02572f720211207.1 ([commit](https://github.com/microsoft/fluentui/commit/2523b8c9da23ec860780244563814b63ba963043) by beachball)
16
22
 
17
23
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
18
24
 
package/dist/react-positioning.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
1
+ import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
2
2
  import * as PopperJs from '@popperjs/core';
3
3
  import * as React_2 from 'react';
4
4
  import type { Theme } from '@fluentui/react-theme';
@@ -23,8 +23,8 @@ export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
23
23
  * })
24
24
  * ...
25
25
  *
26
- * state.arrowWithSize.clasName = styles.arrowWithSize
27
- * state.arrowWithoutSize.className = mergeClases(
26
+ * state.arrowWithSize.className = styles.arrowWithSize
27
+ * state.arrowWithoutSize.className = mergeClasses(
28
28
  * styles.arrowWithoutSize,
29
29
  * state.smallArrow && styles.smallArrow,
30
30
  * state.mediumArrow && styles.mediumArrow,
package/lib/createArrowStyles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
1
+ import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
2
2
  import type { Theme } from '@fluentui/react-theme';
3
3
  /**
4
4
  * Helper that creates a makeStyles rule for an arrow element.
@@ -14,8 +14,8 @@ import type { Theme } from '@fluentui/react-theme';
14
14
  * })
15
15
  * ...
16
16
  *
17
- * state.arrowWithSize.clasName = styles.arrowWithSize
18
- * state.arrowWithoutSize.className = mergeClases(
17
+ * state.arrowWithSize.className = styles.arrowWithSize
18
+ * state.arrowWithoutSize.className = mergeClasses(
19
19
  * styles.arrowWithoutSize,
20
20
  * state.smallArrow && styles.smallArrow,
21
21
  * state.mediumArrow && styles.mediumArrow,
package/lib/createArrowStyles.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { shorthands } from '@fluentui/react-make-styles';
1
2
  /**
2
3
  * Helper that creates a makeStyles rule for an arrow element.
3
4
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
@@ -12,8 +13,8 @@
12
13
  * })
13
14
  * ...
14
15
  *
15
- * state.arrowWithSize.clasName = styles.arrowWithSize
16
- * state.arrowWithoutSize.className = mergeClases(
16
+ * state.arrowWithSize.className = styles.arrowWithSize
17
+ * state.arrowWithoutSize.className = mergeClasses(
17
18
  * styles.arrowWithoutSize,
18
19
  * state.smallArrow && styles.smallArrow,
19
20
  * state.mediumArrow && styles.mediumArrow,
@@ -22,54 +23,51 @@
22
23
  *
23
24
  * @param size - dimensions of the square arrow element in pixels.
24
25
  */
26
+
25
27
  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 {
28
+ return theme => ({
29
+ position: 'absolute',
30
+ backgroundColor: 'inherit',
31
+ visibility: 'hidden',
32
+ zIndex: -1,
33
+ ...(size && {
34
+ aspectRatio: '1',
35
+ width: `${size}px`
36
+ }),
37
+ ':before': {
38
+ content: '""',
39
+ ...shorthands.borderRadius('4px'),
33
40
  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'
41
+ width: 'inherit',
42
+ height: 'inherit',
43
+ backgroundColor: 'inherit',
44
+ visibility: 'visible',
45
+ borderBottomRightRadius: theme.borderRadiusSmall,
46
+ transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
47
+ },
48
+ ':global([data-popper-placement])': {
49
+ ':before': { // Special border for High Contrast mode
50
+ ...shorthands.borderRight('1px', 'solid', 'transparent'),
51
+ ...shorthands.borderBottom('1px', 'solid', 'transparent')
71
52
  }
72
- };
73
- };
53
+ },
54
+ // Popper sets data-popper-placement on the root element, which is used to align the arrow
55
+ ':global([data-popper-placement^="top"])': {
56
+ bottom: 0,
57
+ '--angle': '0'
58
+ },
59
+ ':global([data-popper-placement^="right"])': {
60
+ left: '0 /* @noflip */',
61
+ '--angle': '90deg'
62
+ },
63
+ ':global([data-popper-placement^="bottom"])': {
64
+ top: 0,
65
+ '--angle': '180deg'
66
+ },
67
+ ':global([data-popper-placement^="left"])': {
68
+ right: '0 /* @noflip */',
69
+ '--angle': '270deg'
70
+ }
71
+ });
74
72
  }
75
73
  //# sourceMappingURL=createArrowStyles.js.map
package/lib/createArrowStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH,OAAM,SAAU,iBAAV,CAA4B,IAA5B,EAAyC;AAC7C,SAAO,KAAK,IAAG;AACb,UAAM,kBAAkB,GAAG,uBAA3B;AACA,UAAM,aAAa,GAAG;AACpB,MAAA,WAAW,EAAE,kBADO;AAEpB,MAAA,YAAY,EAAE;AAFM,KAAtB;AAKA,WAAO;AACL,MAAA,QAAQ,EAAE,UADL;AAEL,MAAA,UAAU,EAAE,SAFP;AAGL,MAAA,UAAU,EAAE,QAHP;AAIL,MAAA,MAAM,EAAE,CAAC,CAJJ;AAML,UAAI,IAAI,IAAI;AACV,QAAA,WAAW,EAAE,CADH;AAEV,QAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,OAAZ,CANK;AAWL,iBAAW;AACT,QAAA,OAAO,EAAE,IADA;AAET,QAAA,YAAY,EAAE,KAFL;AAGT,QAAA,QAAQ,EAAE,UAHD;AAIT,QAAA,KAAK,EAAE,SAJE;AAKT,QAAA,MAAM,EAAE,SALC;AAMT,QAAA,UAAU,EAAE,SANH;AAOT,QAAA,UAAU,EAAE,SAPH;AAQT,QAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,QAAA,SAAS,EAAE;AATF,OAXN;AAuBL,0CAAoC;AAClC,mBAAW;AADuB,OAvB/B;AA2BL;AACA,iDAA2C;AACzC,QAAA,MAAM,EAAE,CADiC;AAEzC,mBAAW;AAF8B,OA5BtC;AAiCL,mDAA6C;AAC3C,QAAA,IAAI,EAAE,CADqC;AAE3C,mBAAW;AAFgC,OAjCxC;AAqCL,oDAA8C;AAC5C,QAAA,GAAG,EAAE,CADuC;AAE5C,mBAAW;AAFiC,OArCzC;AAyCL,kDAA4C;AAC1C,QAAA,KAAK,EAAE,CADmC;AAE1C,mBAAW;AAF+B;AAzCvC,KAAP;AA8CD,GArDD;AAsDD","sourceRoot":""}
1
+ {"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,6BAA3B;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,IAA5B,EAAyC;AAC7C,SAAO,KAAK,KAAK;AACf,IAAA,QAAQ,EAAE,UADK;AAEf,IAAA,eAAe,EAAE,SAFF;AAGf,IAAA,UAAU,EAAE,QAHG;AAIf,IAAA,MAAM,EAAE,CAAC,CAJM;AAMf,QAAI,IAAI,IAAI;AACV,MAAA,WAAW,EAAE,GADH;AAEV,MAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,KAAZ,CANe;AAWf,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,SAAG,UAAU,CAAC,YAAX,CAAwB,KAAxB,CAFM;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,KAAK,EAAE,SAJE;AAKT,MAAA,MAAM,EAAE,SALC;AAMT,MAAA,eAAe,EAAE,SANR;AAOT,MAAA,UAAU,EAAE,SAPH;AAQT,MAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,MAAA,SAAS,EAAE;AATF,KAXI;AAuBf,wCAAoC;AAClC,iBAAW,EACT;AACA,WAAG,UAAU,CAAC,WAAX,CAAuB,KAAvB,EAA8B,OAA9B,EAAuC,aAAvC,CAFM;AAGT,WAAG,UAAU,CAAC,YAAX,CAAwB,KAAxB,EAA+B,OAA/B,EAAwC,aAAxC;AAHM;AADuB,KAvBrB;AA+Bf;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,CADiC;AAEzC,iBAAW;AAF8B,KAhC5B;AAqCf,iDAA6C;AAC3C,MAAA,IAAI,EAAE,iBADqC;AAE3C,iBAAW;AAFgC,KArC9B;AAyCf,kDAA8C;AAC5C,MAAA,GAAG,EAAE,CADuC;AAE5C,iBAAW;AAFiC,KAzC/B;AA6Cf,gDAA4C;AAC1C,MAAA,KAAK,EAAE,iBADmC;AAE1C,iBAAW;AAF+B;AA7C7B,GAAL,CAAZ;AAkDD","sourceRoot":""}
package/lib/utils/positioningHelper.d.ts CHANGED
@@ -3,5 +3,5 @@ import type { Offset } from '../types';
3
3
  /**
4
4
  * @see positioninHelper.test.ts for expected placement values
5
5
  */
6
- export declare const getPlacement: (align?: "bottom" | "top" | "center" | "start" | "end" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
6
+ export declare const getPlacement: (align?: "bottom" | "top" | "center" | "end" | "start" | undefined, position?: "after" | "above" | "below" | "before" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
7
7
  export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;
package/lib-commonjs/createArrowStyles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { MakeStylesStyleRule } from '@fluentui/make-styles';
1
+ import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
2
2
  import type { Theme } from '@fluentui/react-theme';
3
3
  /**
4
4
  * Helper that creates a makeStyles rule for an arrow element.
@@ -14,8 +14,8 @@ import type { Theme } from '@fluentui/react-theme';
14
14
  * })
15
15
  * ...
16
16
  *
17
- * state.arrowWithSize.clasName = styles.arrowWithSize
18
- * state.arrowWithoutSize.className = mergeClases(
17
+ * state.arrowWithSize.className = styles.arrowWithSize
18
+ * state.arrowWithoutSize.className = mergeClasses(
19
19
  * styles.arrowWithoutSize,
20
20
  * state.smallArrow && styles.smallArrow,
21
21
  * state.mediumArrow && styles.mediumArrow,
package/lib-commonjs/createArrowStyles.js CHANGED
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.createArrowStyles = void 0;
7
+
8
+ const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
7
9
  /**
8
10
  * Helper that creates a makeStyles rule for an arrow element.
9
11
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
@@ -18,8 +20,8 @@ exports.createArrowStyles = void 0;
18
20
  * })
19
21
  * ...
20
22
  *
21
- * state.arrowWithSize.clasName = styles.arrowWithSize
22
- * state.arrowWithoutSize.className = mergeClases(
23
+ * state.arrowWithSize.className = styles.arrowWithSize
24
+ * state.arrowWithoutSize.className = mergeClasses(
23
25
  * styles.arrowWithoutSize,
24
26
  * state.smallArrow && styles.smallArrow,
25
27
  * state.mediumArrow && styles.mediumArrow,
@@ -29,55 +31,52 @@ exports.createArrowStyles = void 0;
29
31
  * @param size - dimensions of the square arrow element in pixels.
30
32
  */
31
33
 
34
+
32
35
  function createArrowStyles(size) {
33
- return theme => {
34
- const arrowHCBorderStyle = `1px solid transparent`;
35
- const arrowHCBorder = {
36
- borderRight: arrowHCBorderStyle,
37
- borderBottom: arrowHCBorderStyle
38
- };
39
- return {
36
+ return theme => ({
37
+ position: 'absolute',
38
+ backgroundColor: 'inherit',
39
+ visibility: 'hidden',
40
+ zIndex: -1,
41
+ ...(size && {
42
+ aspectRatio: '1',
43
+ width: `${size}px`
44
+ }),
45
+ ':before': {
46
+ content: '""',
47
+ ...react_make_styles_1.shorthands.borderRadius('4px'),
40
48
  position: 'absolute',
41
- background: 'inherit',
42
- visibility: 'hidden',
43
- zIndex: -1,
44
- ...(size && {
45
- aspectRatio: 1,
46
- width: `${size}px`
47
- }),
48
- ':before': {
49
- content: '""',
50
- borderRadius: '4px',
51
- position: 'absolute',
52
- width: 'inherit',
53
- height: 'inherit',
54
- background: 'inherit',
55
- visibility: 'visible',
56
- borderBottomRightRadius: theme.borderRadiusSmall,
57
- transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
58
- },
59
- ':global([data-popper-placement])': {
60
- ':before': arrowHCBorder
61
- },
62
- // Popper sets data-popper-placement on the root element, which is used to align the arrow
63
- ':global([data-popper-placement^="top"])': {
64
- bottom: 0,
65
- '--angle': '0'
66
- },
67
- ':global([data-popper-placement^="right"])': {
68
- left: 0,
69
- '--angle': '90deg'
70
- },
71
- ':global([data-popper-placement^="bottom"])': {
72
- top: 0,
73
- '--angle': '180deg'
74
- },
75
- ':global([data-popper-placement^="left"])': {
76
- right: 0,
77
- '--angle': '270deg'
49
+ width: 'inherit',
50
+ height: 'inherit',
51
+ backgroundColor: 'inherit',
52
+ visibility: 'visible',
53
+ borderBottomRightRadius: theme.borderRadiusSmall,
54
+ transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
55
+ },
56
+ ':global([data-popper-placement])': {
57
+ ':before': { // Special border for High Contrast mode
58
+ ...react_make_styles_1.shorthands.borderRight('1px', 'solid', 'transparent'),
59
+ ...react_make_styles_1.shorthands.borderBottom('1px', 'solid', 'transparent')
78
60
  }
79
- };
80
- };
61
+ },
62
+ // Popper sets data-popper-placement on the root element, which is used to align the arrow
63
+ ':global([data-popper-placement^="top"])': {
64
+ bottom: 0,
65
+ '--angle': '0'
66
+ },
67
+ ':global([data-popper-placement^="right"])': {
68
+ left: '0 /* @noflip */',
69
+ '--angle': '90deg'
70
+ },
71
+ ':global([data-popper-placement^="bottom"])': {
72
+ top: 0,
73
+ '--angle': '180deg'
74
+ },
75
+ ':global([data-popper-placement^="left"])': {
76
+ right: '0 /* @noflip */',
77
+ '--angle': '270deg'
78
+ }
79
+ });
81
80
  }
82
81
 
83
82
  exports.createArrowStyles = createArrowStyles;
package/lib-commonjs/createArrowStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;AACH,SAAgB,iBAAhB,CAAkC,IAAlC,EAA+C;AAC7C,SAAO,KAAK,IAAG;AACb,UAAM,kBAAkB,GAAG,uBAA3B;AACA,UAAM,aAAa,GAAG;AACpB,MAAA,WAAW,EAAE,kBADO;AAEpB,MAAA,YAAY,EAAE;AAFM,KAAtB;AAKA,WAAO;AACL,MAAA,QAAQ,EAAE,UADL;AAEL,MAAA,UAAU,EAAE,SAFP;AAGL,MAAA,UAAU,EAAE,QAHP;AAIL,MAAA,MAAM,EAAE,CAAC,CAJJ;AAML,UAAI,IAAI,IAAI;AACV,QAAA,WAAW,EAAE,CADH;AAEV,QAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,OAAZ,CANK;AAWL,iBAAW;AACT,QAAA,OAAO,EAAE,IADA;AAET,QAAA,YAAY,EAAE,KAFL;AAGT,QAAA,QAAQ,EAAE,UAHD;AAIT,QAAA,KAAK,EAAE,SAJE;AAKT,QAAA,MAAM,EAAE,SALC;AAMT,QAAA,UAAU,EAAE,SANH;AAOT,QAAA,UAAU,EAAE,SAPH;AAQT,QAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,QAAA,SAAS,EAAE;AATF,OAXN;AAuBL,0CAAoC;AAClC,mBAAW;AADuB,OAvB/B;AA2BL;AACA,iDAA2C;AACzC,QAAA,MAAM,EAAE,CADiC;AAEzC,mBAAW;AAF8B,OA5BtC;AAiCL,mDAA6C;AAC3C,QAAA,IAAI,EAAE,CADqC;AAE3C,mBAAW;AAFgC,OAjCxC;AAqCL,oDAA8C;AAC5C,QAAA,GAAG,EAAE,CADuC;AAE5C,mBAAW;AAFiC,OArCzC;AAyCL,kDAA4C;AAC1C,QAAA,KAAK,EAAE,CADmC;AAE1C,mBAAW;AAF+B;AAzCvC,KAAP;AA8CD,GArDD;AAsDD;;AAvDD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourceRoot":""}
1
+ {"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;;AACH,SAAgB,iBAAhB,CAAkC,IAAlC,EAA+C;AAC7C,SAAO,KAAK,KAAK;AACf,IAAA,QAAQ,EAAE,UADK;AAEf,IAAA,eAAe,EAAE,SAFF;AAGf,IAAA,UAAU,EAAE,QAHG;AAIf,IAAA,MAAM,EAAE,CAAC,CAJM;AAMf,QAAI,IAAI,IAAI;AACV,MAAA,WAAW,EAAE,GADH;AAEV,MAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,KAAZ,CANe;AAWf,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,SAAG,mBAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,KAAxB,CAFM;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,KAAK,EAAE,SAJE;AAKT,MAAA,MAAM,EAAE,SALC;AAMT,MAAA,eAAe,EAAE,SANR;AAOT,MAAA,UAAU,EAAE,SAPH;AAQT,MAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,MAAA,SAAS,EAAE;AATF,KAXI;AAuBf,wCAAoC;AAClC,iBAAW,EACT;AACA,WAAG,mBAAA,CAAA,UAAA,CAAW,WAAX,CAAuB,KAAvB,EAA8B,OAA9B,EAAuC,aAAvC,CAFM;AAGT,WAAG,mBAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,KAAxB,EAA+B,OAA/B,EAAwC,aAAxC;AAHM;AADuB,KAvBrB;AA+Bf;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,CADiC;AAEzC,iBAAW;AAF8B,KAhC5B;AAqCf,iDAA6C;AAC3C,MAAA,IAAI,EAAE,iBADqC;AAE3C,iBAAW;AAFgC,KArC9B;AAyCf,kDAA8C;AAC5C,MAAA,GAAG,EAAE,CADuC;AAE5C,iBAAW;AAFiC,KAzC/B;AA6Cf,gDAA4C;AAC1C,MAAA,KAAK,EAAE,iBADmC;AAE1C,iBAAW;AAF+B;AA7C7B,GAAL,CAAZ;AAkDD;;AAnDD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourceRoot":""}
package/lib-commonjs/utils/positioningHelper.d.ts CHANGED
@@ -3,5 +3,5 @@ import type { Offset } from '../types';
3
3
  /**
4
4
  * @see positioninHelper.test.ts for expected placement values
5
5
  */
6
- export declare const getPlacement: (align?: "bottom" | "top" | "center" | "start" | "end" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
6
+ export declare const getPlacement: (align?: "bottom" | "top" | "center" | "end" | "start" | undefined, position?: "after" | "above" | "below" | "before" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
7
7
  export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-positioning",
3
- "version": "0.0.0-nightlybd3e92b51920211126.1",
3
+ "version": "0.0.0-nightlyebf02572f720211207.1",
4
4
  "description": "A react wrapper around Popper.js for Fluent UI",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -30,12 +30,12 @@
30
30
  "@types/react-dom": "16.9.10",
31
31
  "react": "16.8.6",
32
32
  "react-dom": "16.8.6",
33
- "@fluentui/babel-make-styles": "0.0.0-nightlybd3e92b51920211126.1"
33
+ "@fluentui/babel-make-styles": "0.0.0-nightlyebf02572f720211207.1"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-make-styles": "0.0.0-nightlybd3e92b51920211126.1",
37
- "@fluentui/react-shared-contexts": "0.0.0-nightlybd3e92b51920211126.0",
38
- "@fluentui/react-utilities": "0.0.0-nightlybd3e92b51920211126.0",
36
+ "@fluentui/react-make-styles": "0.0.0-nightlyebf02572f720211207.1",
37
+ "@fluentui/react-shared-contexts": "0.0.0-nightlyebf02572f720211207.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightlyebf02572f720211207.1",
39
39
  "@popperjs/core": "~2.4.3",
40
40
  "tslib": "^2.1.0"
41
41
  },