@fluentui/react-positioning 0.0.0-nightly627ad67f1120211109.1 → 0.0.0-nightly6faffd280a20220221.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. package/CHANGELOG.json +200 -8
  2. package/CHANGELOG.md +60 -7
  3. package/dist/react-positioning.d.ts +113 -35
  4. package/lib/createArrowStyles.d.ts +64 -0
  5. package/lib/createArrowStyles.js +87 -0
  6. package/lib/createArrowStyles.js.map +1 -0
  7. package/lib/createVirtualElementFromClick.js +17 -15
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/index.d.ts +2 -1
  10. package/lib/index.js +2 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib/types.d.ts +28 -7
  13. package/lib/types.js.map +1 -1
  14. package/lib/usePopper.d.ts +2 -14
  15. package/lib/usePopper.js +367 -311
  16. package/lib/usePopper.js.map +1 -1
  17. package/lib/usePopperMouseTarget.js +28 -22
  18. package/lib/usePopperMouseTarget.js.map +1 -1
  19. package/lib/utils/getBasePlacement.js +1 -1
  20. package/lib/utils/getBasePlacement.js.map +1 -1
  21. package/lib/utils/getBoundary.js +15 -10
  22. package/lib/utils/getBoundary.js.map +1 -1
  23. package/lib/utils/getReactFiberFromNode.js +39 -35
  24. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  25. package/lib/utils/getScrollParent.js +46 -32
  26. package/lib/utils/getScrollParent.js.map +1 -1
  27. package/lib/utils/index.js.map +1 -1
  28. package/lib/utils/mergeArrowOffset.js +29 -24
  29. package/lib/utils/mergeArrowOffset.js.map +1 -1
  30. package/lib/utils/positioningHelper.d.ts +2 -2
  31. package/lib/utils/positioningHelper.js +38 -30
  32. package/lib/utils/positioningHelper.js.map +1 -1
  33. package/lib/utils/resolvePositioningShorthand.js +57 -19
  34. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  35. package/lib/utils/useCallbackRef.js +35 -29
  36. package/lib/utils/useCallbackRef.js.map +1 -1
  37. package/lib-commonjs/createArrowStyles.d.ts +64 -0
  38. package/lib-commonjs/createArrowStyles.js +100 -0
  39. package/lib-commonjs/createArrowStyles.js.map +1 -0
  40. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  41. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  42. package/lib-commonjs/index.d.ts +2 -1
  43. package/lib-commonjs/index.js +28 -6
  44. package/lib-commonjs/index.js.map +1 -1
  45. package/lib-commonjs/types.d.ts +28 -7
  46. package/lib-commonjs/types.js +4 -1
  47. package/lib-commonjs/types.js.map +1 -1
  48. package/lib-commonjs/usePopper.d.ts +2 -14
  49. package/lib-commonjs/usePopper.js +382 -316
  50. package/lib-commonjs/usePopper.js.map +1 -1
  51. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  52. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  53. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  54. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  55. package/lib-commonjs/utils/getBoundary.js +23 -12
  56. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  57. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  58. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  59. package/lib-commonjs/utils/getScrollParent.js +53 -33
  60. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  61. package/lib-commonjs/utils/index.js +14 -2
  62. package/lib-commonjs/utils/index.js.map +1 -1
  63. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  64. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  65. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  66. package/lib-commonjs/utils/positioningHelper.js +46 -31
  67. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  68. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  69. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  70. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  71. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  72. package/package.json +7 -8
@@ -1,5 +1,8 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.mergeArrowOffset = void 0;
4
7
  /**
5
8
  * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
@@ -9,33 +12,40 @@ exports.mergeArrowOffset = void 0;
9
12
  * @param arrowHeight - The height of the arrow in px
10
13
  * @returns User offset augmented with arrow height
11
14
  */
15
+
12
16
  function mergeArrowOffset(userOffset, arrowHeight) {
13
- let offsetWithArrow = userOffset;
14
- if (!userOffset) {
15
- return [0, arrowHeight];
16
- }
17
- if (Array.isArray(offsetWithArrow)) {
18
- setArrowOffset(offsetWithArrow, arrowHeight);
19
- return offsetWithArrow;
20
- }
21
- if (typeof offsetWithArrow === 'function') {
22
- const userOffsetFn = offsetWithArrow;
23
- offsetWithArrow = offsetParams => {
24
- const offset = userOffsetFn(offsetParams);
25
- setArrowOffset(offset, arrowHeight);
26
- return offset;
27
- };
28
- }
29
- // This should never happen
30
- return [0, 0];
17
+ let offsetWithArrow = userOffset;
18
+
19
+ if (!userOffset) {
20
+ return [0, arrowHeight];
21
+ }
22
+
23
+ if (Array.isArray(offsetWithArrow)) {
24
+ setArrowOffset(offsetWithArrow, arrowHeight);
25
+ return offsetWithArrow;
26
+ }
27
+
28
+ if (typeof offsetWithArrow === 'function') {
29
+ const userOffsetFn = offsetWithArrow;
30
+
31
+ offsetWithArrow = offsetParams => {
32
+ const offset = userOffsetFn(offsetParams);
33
+ setArrowOffset(offset, arrowHeight);
34
+ return offset;
35
+ };
36
+ } // This should never happen
37
+
38
+
39
+ return [0, 0];
31
40
  }
41
+
32
42
  exports.mergeArrowOffset = mergeArrowOffset;
43
+
33
44
  const setArrowOffset = (offset, arrowHeight) => {
34
- if (offset[1] !== null && offset[1] !== undefined) {
35
- offset[1] += arrowHeight;
36
- }
37
- else {
38
- offset[1] = arrowHeight;
39
- }
45
+ if (offset[1] !== null && offset[1] !== undefined) {
46
+ offset[1] += arrowHeight;
47
+ } else {
48
+ offset[1] = arrowHeight;
49
+ }
40
50
  };
41
51
  //# sourceMappingURL=mergeArrowOffset.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mergeArrowOffset.js","sourceRoot":"","sources":["../../src/utils/mergeArrowOffset.ts"],"names":[],"mappings":";;;AAEA;;;;;;;GAOG;AACH,SAAgB,gBAAgB,CAAC,UAAqC,EAAE,WAAmB;IACzF,IAAI,eAAe,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;KACzB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;QAClC,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;QAC7C,OAAO,eAAe,CAAC;KACxB;IAED,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE;QACzC,MAAM,YAAY,GAAG,eAAe,CAAC;QACrC,eAAe,GAAG,YAAY,CAAC,EAAE;YAC/B,MAAM,MAAM,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;YAC1C,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;YACpC,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC;KACH;IAED,2BAA2B;IAC3B,OAAO,CAAC,CAAC,EAAE,CAAC,CAAU,CAAC;AACzB,CAAC;AAtBD,4CAsBC;AAED,MAAM,cAAc,GAAG,CAAC,MAA8D,EAAE,WAAmB,EAAE,EAAE;IAC7G,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE;QACjD,MAAM,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC;KAC1B;SAAM;QACL,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;KACzB;AACH,CAAC,CAAC"}
1
+ {"version":3,"sources":["utils/mergeArrowOffset.ts"],"names":[],"mappings":";;;;;;AAEA;;;;;;;AAOG;;AACH,SAAgB,gBAAhB,CAAiC,UAAjC,EAAwE,WAAxE,EAA2F;AACzF,MAAI,eAAe,GAAG,UAAtB;;AACA,MAAI,CAAC,UAAL,EAAiB;AACf,WAAO,CAAC,CAAD,EAAI,WAAJ,CAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,eAAd,CAAJ,EAAoC;AAClC,IAAA,cAAc,CAAC,eAAD,EAAkB,WAAlB,CAAd;AACA,WAAO,eAAP;AACD;;AAED,MAAI,OAAO,eAAP,KAA2B,UAA/B,EAA2C;AACzC,UAAM,YAAY,GAAG,eAArB;;AACA,IAAA,eAAe,GAAG,YAAY,IAAG;AAC/B,YAAM,MAAM,GAAG,YAAY,CAAC,YAAD,CAA3B;AACA,MAAA,cAAc,CAAC,MAAD,EAAS,WAAT,CAAd;AACA,aAAO,MAAP;AACD,KAJD;AAKD,GAlBwF,CAoBzF;;;AACA,SAAO,CAAC,CAAD,EAAI,CAAJ,CAAP;AACD;;AAtBD,OAAA,CAAA,gBAAA,GAAA,gBAAA;;AAwBA,MAAM,cAAc,GAAG,CAAC,MAAD,EAAiE,WAAjE,KAAwF;AAC7G,MAAI,MAAM,CAAC,CAAD,CAAN,KAAc,IAAd,IAAsB,MAAM,CAAC,CAAD,CAAN,KAAc,SAAxC,EAAmD;AACjD,IAAA,MAAM,CAAC,CAAD,CAAN,IAAa,WAAb;AACD,GAFD,MAEO;AACL,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,WAAZ;AACD;AACF,CAND","sourcesContent":["import type { Offset } from '../types';\n\n/**\n * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the\n * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset\n *\n * @param userOffset - The offset provided by the user\n * @param arrowHeight - The height of the arrow in px\n * @returns User offset augmented with arrow height\n */\nexport function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset {\n let offsetWithArrow = userOffset;\n if (!userOffset) {\n return [0, arrowHeight];\n }\n\n if (Array.isArray(offsetWithArrow)) {\n setArrowOffset(offsetWithArrow, arrowHeight);\n return offsetWithArrow;\n }\n\n if (typeof offsetWithArrow === 'function') {\n const userOffsetFn = offsetWithArrow;\n offsetWithArrow = offsetParams => {\n const offset = userOffsetFn(offsetParams);\n setArrowOffset(offset, arrowHeight);\n return offset;\n };\n }\n\n // This should never happen\n return [0, 0] as never;\n}\n\nconst setArrowOffset = (offset: [number | null | undefined, number | null | undefined], arrowHeight: number) => {\n if (offset[1] !== null && offset[1] !== undefined) {\n offset[1] += arrowHeight;\n } else {\n offset[1] = arrowHeight;\n }\n};\n"],"sourceRoot":"../src/"}
@@ -1,7 +1,7 @@
1
1
  import * as PopperJs from '@popperjs/core';
2
- import type { Offset } from '../types';
2
+ import type { Alignment, Offset, Position } from '../types';
3
3
  /**
4
4
  * @see positioninHelper.test.ts for expected placement values
5
5
  */
6
- export declare const getPlacement: (align?: "top" | "bottom" | "start" | "end" | "center" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
6
+ export declare const getPlacement: (align?: Alignment | undefined, position?: Position | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
7
7
  export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;
@@ -1,46 +1,61 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.applyRtlToOffset = exports.getPlacement = void 0;
4
- const getPositionMap = (rtl) => ({
5
- above: 'top',
6
- below: 'bottom',
7
- before: rtl ? 'right' : 'left',
8
- after: rtl ? 'left' : 'right',
7
+
8
+ const getPositionMap = rtl => ({
9
+ above: 'top',
10
+ below: 'bottom',
11
+ before: rtl ? 'right' : 'left',
12
+ after: rtl ? 'left' : 'right'
9
13
  });
10
- const getAlignmentMap = (rtl) => ({
11
- start: rtl ? 'end' : 'start',
12
- end: rtl ? 'start' : 'end',
13
- top: 'start',
14
- bottom: 'end',
15
- center: '',
14
+
15
+ const getAlignmentMap = rtl => ({
16
+ start: rtl ? 'end' : 'start',
17
+ end: rtl ? 'start' : 'end',
18
+ top: 'start',
19
+ bottom: 'end',
20
+ center: ''
16
21
  });
22
+
17
23
  const shouldAlignToCenter = (p, a) => {
18
- const positionedVertically = p === 'above' || p === 'below';
19
- const alignedVertically = a === 'top' || a === 'bottom';
20
- return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);
24
+ const positionedVertically = p === 'above' || p === 'below';
25
+ const alignedVertically = a === 'top' || a === 'bottom';
26
+ return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
21
27
  };
22
28
  /**
23
29
  * @see positioninHelper.test.ts for expected placement values
24
30
  */
31
+
32
+
25
33
  const getPlacement = (align, position, rtl) => {
26
- const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
27
- const computedPosition = position && getPositionMap(rtl)[position];
28
- const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
29
- if (computedPosition && computedAlignmnent) {
30
- return `${computedPosition}-${computedAlignmnent}`;
31
- }
32
- return computedPosition || 'auto';
34
+ const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
35
+ const computedPosition = position && getPositionMap(rtl)[position];
36
+ const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
37
+
38
+ if (computedPosition && computedAlignmnent) {
39
+ return `${computedPosition}-${computedAlignmnent}`;
40
+ }
41
+
42
+ return computedPosition || 'auto';
33
43
  };
44
+
34
45
  exports.getPlacement = getPlacement;
35
- const applyRtlToOffset = (offset) => {
36
- if (typeof offset === 'undefined') {
37
- return undefined;
38
- }
39
- if (Array.isArray(offset)) {
40
- offset[0] = offset[0] * -1;
41
- return offset;
42
- }
43
- return ((param) => exports.applyRtlToOffset(offset(param)));
46
+
47
+ const applyRtlToOffset = offset => {
48
+ if (typeof offset === 'undefined') {
49
+ return undefined;
50
+ }
51
+
52
+ if (Array.isArray(offset)) {
53
+ offset[0] = offset[0] * -1;
54
+ return offset;
55
+ }
56
+
57
+ return param => exports.applyRtlToOffset(offset(param));
44
58
  };
59
+
45
60
  exports.applyRtlToOffset = applyRtlToOffset;
46
61
  //# sourceMappingURL=positioningHelper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"positioningHelper.js","sourceRoot":"","sources":["../../src/utils/positioningHelper.ts"],"names":[],"mappings":";;;AAMA,MAAM,cAAc,GAAG,CAAC,GAAa,EAAuC,EAAE,CAAC,CAAC;IAC9E,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;IAC9B,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;CAC9B,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CAAC,GAAa,EAAqC,EAAE,CAAC,CAAC;IAC7E,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;IAC5B,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;IAC1B,GAAG,EAAE,OAAO;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,EAAE;CACX,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,CAAY,EAAE,CAAa,EAAW,EAAE;IACnE,MAAM,oBAAoB,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC;IAC5D,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,QAAQ,CAAC;IAExD,OAAO,CAAC,oBAAoB,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,oBAAoB,IAAI,CAAC,iBAAiB,CAAC,CAAC;AACtG,CAAC,CAAC;AAEF;;GAEG;AACI,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,QAAmB,EAAE,GAAa,EAAsB,EAAE;IACxG,MAAM,SAAS,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE1E,MAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnE,MAAM,kBAAkB,GAAG,SAAS,IAAI,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IAExE,IAAI,gBAAgB,IAAI,kBAAkB,EAAE;QAC1C,OAAO,GAAG,gBAAgB,IAAI,kBAAkB,EAAwB,CAAC;KAC1E;IAED,OAAO,gBAAgB,IAAK,MAA6B,CAAC;AAC5D,CAAC,CAAC;AAXW,QAAA,YAAY,gBAWvB;AAEK,MAAM,gBAAgB,GAAG,CAAC,MAA0B,EAAsB,EAAE;IACjF,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACzB,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAE,GAAG,CAAC,CAAC,CAAC;QAE5B,OAAO,MAAM,CAAC;KACf;IAED,OAAO,CAAC,CAAC,KAA0B,EAAE,EAAE,CAAC,wBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAmB,CAAC;AAC7F,CAAC,CAAC;AAZW,QAAA,gBAAgB,oBAY3B"}
1
+ {"version":3,"sources":["utils/positioningHelper.ts"],"names":[],"mappings":";;;;;;;AAMA,MAAM,cAAc,GAAI,GAAD,KAAyD;AAC9E,EAAA,KAAK,EAAE,KADuE;AAE9E,EAAA,KAAK,EAAE,QAFuE;AAG9E,EAAA,MAAM,EAAE,GAAG,GAAG,OAAH,GAAa,MAHsD;AAI9E,EAAA,KAAK,EAAE,GAAG,GAAG,MAAH,GAAY;AAJwD,CAAzD,CAAvB;;AAOA,MAAM,eAAe,GAAI,GAAD,KAAuD;AAC7E,EAAA,KAAK,EAAE,GAAG,GAAG,KAAH,GAAW,OADwD;AAE7E,EAAA,GAAG,EAAE,GAAG,GAAG,OAAH,GAAa,KAFwD;AAG7E,EAAA,GAAG,EAAE,OAHwE;AAI7E,EAAA,MAAM,EAAE,KAJqE;AAK7E,EAAA,MAAM,EAAE;AALqE,CAAvD,CAAxB;;AAQA,MAAM,mBAAmB,GAAG,CAAC,CAAD,EAAe,CAAf,KAAyC;AACnE,QAAM,oBAAoB,GAAG,CAAC,KAAK,OAAN,IAAiB,CAAC,KAAK,OAApD;AACA,QAAM,iBAAiB,GAAG,CAAC,KAAK,KAAN,IAAe,CAAC,KAAK,QAA/C;AAEA,SAAQ,oBAAoB,IAAI,iBAAzB,IAAgD,CAAC,oBAAD,IAAyB,CAAC,iBAAjF;AACD,CALD;AAOA;;AAEG;;;AACI,MAAM,YAAY,GAAG,CAAC,KAAD,EAAoB,QAApB,EAAyC,GAAzC,KAA8E;AACxG,QAAM,SAAS,GAAG,mBAAmB,CAAC,QAAD,EAAW,KAAX,CAAnB,GAAuC,QAAvC,GAAkD,KAApE;AAEA,QAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAD,CAAd,CAAoB,QAApB,CAArC;AACA,QAAM,kBAAkB,GAAG,SAAS,IAAI,eAAe,CAAC,GAAD,CAAf,CAAqB,SAArB,CAAxC;;AAEA,MAAI,gBAAgB,IAAI,kBAAxB,EAA4C;AAC1C,WAAO,GAAG,gBAAgB,IAAI,kBAAkB,EAAhD;AACD;;AAED,SAAO,gBAAgB,IAAK,MAA5B;AACD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ;;AAaN,MAAM,gBAAgB,GAAI,MAAD,IAAmD;AACjF,MAAI,OAAO,MAAP,KAAkB,WAAtB,EAAmC;AACjC,WAAO,SAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,MAAd,CAAJ,EAA2B;AACzB,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,MAAM,CAAC,CAAD,CAAN,GAAa,CAAC,CAA1B;AAEA,WAAO,MAAP;AACD;;AAED,SAAS,KAAD,IAAgC,OAAA,CAAA,gBAAA,CAAiB,MAAM,CAAC,KAAD,CAAvB,CAAxC;AACD,CAZM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport type { Alignment, Offset, OffsetFunction, OffsetFunctionParam, Position } from '../types';\n\ntype PlacementPosition = 'top' | 'bottom' | 'left' | 'right';\ntype PlacementAlign = 'start' | 'end' | ''; // '' represents center\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n above: 'top',\n below: 'bottom',\n before: rtl ? 'right' : 'left',\n after: rtl ? 'left' : 'right',\n});\n\nconst getAlignmentMap = (rtl?: boolean): Record<Alignment, PlacementAlign> => ({\n start: rtl ? 'end' : 'start',\n end: rtl ? 'start' : 'end',\n top: 'start',\n bottom: 'end',\n center: '',\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n const positionedVertically = p === 'above' || p === 'below';\n const alignedVertically = a === 'top' || a === 'bottom';\n\n return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * @see positioninHelper.test.ts for expected placement values\n */\nexport const getPlacement = (align?: Alignment, position?: Position, rtl?: boolean): PopperJs.Placement => {\n const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n const computedPosition = position && getPositionMap(rtl)[position];\n const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];\n\n if (computedPosition && computedAlignmnent) {\n return `${computedPosition}-${computedAlignmnent}` as PopperJs.Placement;\n }\n\n return computedPosition || ('auto' as PopperJs.Placement);\n};\n\nexport const applyRtlToOffset = (offset: Offset | undefined): Offset | undefined => {\n if (typeof offset === 'undefined') {\n return undefined;\n }\n\n if (Array.isArray(offset)) {\n offset[0] = offset[0]! * -1;\n\n return offset;\n }\n\n return ((param: OffsetFunctionParam) => applyRtlToOffset(offset(param))) as OffsetFunction;\n};\n"],"sourceRoot":"../src/"}
@@ -1,29 +1,72 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.resolvePositioningShorthand = void 0;
4
- // Look up table for shorthand to avoid parsing strings
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.resolvePositioningShorthand = void 0; // Look up table for shorthand to avoid parsing strings
7
+
5
8
  const shorthandLookup = {
6
- above: { position: 'above', align: 'center' },
7
- 'above-start': { position: 'above', align: 'start' },
8
- 'above-end': { position: 'above', align: 'end' },
9
- below: { position: 'below', align: 'center' },
10
- 'below-start': { position: 'below', align: 'start' },
11
- 'below-end': { position: 'below', align: 'end' },
12
- before: { position: 'before', align: 'center' },
13
- 'before-top': { position: 'before', align: 'top' },
14
- 'before-bottom': { position: 'before', align: 'bottom' },
15
- after: { position: 'after', align: 'center' },
16
- 'after-top': { position: 'after', align: 'top' },
17
- 'after-bottom': { position: 'after', align: 'bottom' },
9
+ above: {
10
+ position: 'above',
11
+ align: 'center'
12
+ },
13
+ 'above-start': {
14
+ position: 'above',
15
+ align: 'start'
16
+ },
17
+ 'above-end': {
18
+ position: 'above',
19
+ align: 'end'
20
+ },
21
+ below: {
22
+ position: 'below',
23
+ align: 'center'
24
+ },
25
+ 'below-start': {
26
+ position: 'below',
27
+ align: 'start'
28
+ },
29
+ 'below-end': {
30
+ position: 'below',
31
+ align: 'end'
32
+ },
33
+ before: {
34
+ position: 'before',
35
+ align: 'center'
36
+ },
37
+ 'before-top': {
38
+ position: 'before',
39
+ align: 'top'
40
+ },
41
+ 'before-bottom': {
42
+ position: 'before',
43
+ align: 'bottom'
44
+ },
45
+ after: {
46
+ position: 'after',
47
+ align: 'center'
48
+ },
49
+ 'after-top': {
50
+ position: 'after',
51
+ align: 'top'
52
+ },
53
+ 'after-bottom': {
54
+ position: 'after',
55
+ align: 'bottom'
56
+ }
18
57
  };
58
+
19
59
  function resolvePositioningShorthand(shorthand) {
20
- if (shorthand === undefined || shorthand === null) {
21
- return {};
22
- }
23
- if (typeof shorthand === 'string') {
24
- return shorthandLookup[shorthand];
25
- }
26
- return shorthand;
60
+ if (shorthand === undefined || shorthand === null) {
61
+ return {};
62
+ }
63
+
64
+ if (typeof shorthand === 'string') {
65
+ return shorthandLookup[shorthand];
66
+ }
67
+
68
+ return shorthand;
27
69
  }
70
+
28
71
  exports.resolvePositioningShorthand = resolvePositioningShorthand;
29
72
  //# sourceMappingURL=resolvePositioningShorthand.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"resolvePositioningShorthand.js","sourceRoot":"","sources":["../../src/utils/resolvePositioningShorthand.ts"],"names":[],"mappings":";;;AAEA,uDAAuD;AACvD,MAAM,eAAe,GAAoF;IACvG,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,aAAa,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACpD,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,aAAa,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACpD,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC/C,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;IAClD,eAAe,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACxD,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC7C,WAAW,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChD,cAAc,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvD,CAAC;AAEF,SAAgB,2BAA2B,CACzC,SAAkD;IAElD,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACjD,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QACjC,OAAO,eAAe,CAAC,SAAS,CAAC,CAAC;KACnC;IAED,OAAO,SAAuC,CAAC;AACjD,CAAC;AAZD,kEAYC"}
1
+ {"version":3,"sources":["utils/resolvePositioningShorthand.ts"],"names":[],"mappings":";;;;;8CAEA;;AACA,MAAM,eAAe,GAAoF;AACvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GADgG;AAEvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAFwF;AAGvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAH0F;AAIvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAJgG;AAKvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GALwF;AAMvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAN0F;AAOvG,EAAA,MAAM,EAAE;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GAP+F;AAQvG,gBAAc;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GARyF;AASvG,mBAAiB;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GATsF;AAUvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAVgG;AAWvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAX0F;AAYvG,kBAAgB;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B;AAZuF,CAAzG;;AAeA,SAAgB,2BAAhB,CACE,SADF,EACoD;AAElD,MAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;AACjD,WAAO,EAAP;AACD;;AAED,MAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;AACjC,WAAO,eAAe,CAAC,SAAD,CAAtB;AACD;;AAED,SAAO,SAAP;AACD;;AAZD,OAAA,CAAA,2BAAA,GAAA,2BAAA","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}
@@ -1,8 +1,13 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.useCallbackRef = void 0;
4
- const React = require("react");
5
- const react_utilities_1 = require("@fluentui/react-utilities");
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
6
11
  /**
7
12
  * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
8
13
  * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
@@ -20,36 +25,44 @@ const react_utilities_1 = require("@fluentui/react-utilities");
20
25
  * ref.current = 1;
21
26
  * // prints 0 -> 1
22
27
  */
28
+
29
+
23
30
  function useCallbackRef(initialValue, callback, skipInitialResolve) {
24
- const isFirst = React.useRef(true);
25
- const [ref] = React.useState(() => ({
26
- // value
27
- value: initialValue,
28
- // last callback
29
- callback,
30
- // "memoized" public interface
31
- facade: {
32
- get current() {
33
- return ref.value;
34
- },
35
- set current(value) {
36
- const last = ref.value;
37
- if (last !== value) {
38
- ref.value = value;
39
- if (skipInitialResolve && isFirst.current) {
40
- return;
41
- }
42
- ref.callback(value, last);
43
- }
44
- },
45
- },
46
- }));
47
- react_utilities_1.useIsomorphicLayoutEffect(() => {
48
- isFirst.current = false;
49
- }, []);
50
- // update callback
51
- ref.callback = callback;
52
- return ref.facade;
31
+ const isFirst = React.useRef(true);
32
+ const [ref] = React.useState(() => ({
33
+ // value
34
+ value: initialValue,
35
+ // last callback
36
+ callback,
37
+ // "memoized" public interface
38
+ facade: {
39
+ get current() {
40
+ return ref.value;
41
+ },
42
+
43
+ set current(value) {
44
+ const last = ref.value;
45
+
46
+ if (last !== value) {
47
+ ref.value = value;
48
+
49
+ if (skipInitialResolve && isFirst.current) {
50
+ return;
51
+ }
52
+
53
+ ref.callback(value, last);
54
+ }
55
+ }
56
+
57
+ }
58
+ }));
59
+ react_utilities_1.useIsomorphicLayoutEffect(() => {
60
+ isFirst.current = false;
61
+ }, []); // update callback
62
+
63
+ ref.callback = callback;
64
+ return ref.facade;
53
65
  }
66
+
54
67
  exports.useCallbackRef = useCallbackRef;
55
68
  //# sourceMappingURL=useCallbackRef.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCallbackRef.js","sourceRoot":"","sources":["../../src/utils/useCallbackRef.ts"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,+DAAsE;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,cAAc,CAC5B,YAAsB,EACtB,QAA2D,EAC3D,kBAA4B;IAE5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAClC,QAAQ;QACR,KAAK,EAAE,YAAY;QACnB,gBAAgB;QAChB,QAAQ;QACR,8BAA8B;QAC9B,MAAM,EAAE;YACN,IAAI,OAAO;gBACT,OAAO,GAAG,CAAC,KAAK,CAAC;YACnB,CAAC;YACD,IAAI,OAAO,CAAC,KAAK;gBACf,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC;gBAEvB,IAAI,IAAI,KAAK,KAAK,EAAE;oBAClB,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;oBAElB,IAAI,kBAAkB,IAAI,OAAO,CAAC,OAAO,EAAE;wBACzC,OAAO;qBACR;oBAED,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC;SACF;KACF,CAAC,CAAC,CAAC;IAEJ,2CAAyB,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kBAAkB;IAClB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAExB,OAAO,GAAG,CAAC,MAAM,CAAC;AACpB,CAAC;AAxCD,wCAwCC"}
1
+ {"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AACH,SAAgB,cAAhB,CACE,YADF,EAEE,QAFF,EAGE,kBAHF,EAG8B;AAE5B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;AACA,QAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;AAClC;AACA,IAAA,KAAK,EAAE,YAF2B;AAGlC;AACA,IAAA,QAJkC;AAKlC;AACA,IAAA,MAAM,EAAE;AACN,UAAI,OAAJ,GAAW;AACT,eAAO,GAAG,CAAC,KAAX;AACD,OAHK;;AAIN,UAAI,OAAJ,CAAY,KAAZ,EAAiB;AACf,cAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;AAEA,YAAI,IAAI,KAAK,KAAb,EAAoB;AAClB,UAAA,GAAG,CAAC,KAAJ,GAAY,KAAZ;;AAEA,cAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;AACzC;AACD;;AAED,UAAA,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;AACD;AACF;;AAhBK;AAN0B,GAAP,CAAf,CAAd;AA0BA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFD,EAEG,EAFH,EA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD;;AAxCD,OAAA,CAAA,cAAA,GAAA,cAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-positioning",
3
- "version": "0.0.0-nightly627ad67f1120211109.1",
3
+ "version": "0.0.0-nightly6faffd280a20220221.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",
@@ -18,11 +18,10 @@
18
18
  "code-style": "just-scripts code-style",
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
- "test": "jest",
21
+ "test": "jest --passWithNoTests",
22
22
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
- "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-positioning/src && yarn docs",
24
- "storybook": "start-storybook",
25
- "start": "yarn storybook"
23
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-positioning/src && yarn docs",
24
+ "type-check": "tsc -b tsconfig.json"
26
25
  },
27
26
  "devDependencies": {
28
27
  "@fluentui/eslint-plugin": "*",
@@ -33,8 +32,9 @@
33
32
  "react-dom": "16.8.6"
34
33
  },
35
34
  "dependencies": {
36
- "@fluentui/react-shared-contexts": "0.0.0-nightly627ad67f1120211109.1",
37
- "@fluentui/react-utilities": "0.0.0-nightly627ad67f1120211109.1",
35
+ "@griffel/react": "1.0.0",
36
+ "@fluentui/react-shared-contexts": "0.0.0-nightly6faffd280a20220221.1",
37
+ "@fluentui/react-utilities": "0.0.0-nightly6faffd280a20220221.1",
38
38
  "@popperjs/core": "~2.4.3",
39
39
  "tslib": "^2.1.0"
40
40
  },
@@ -45,7 +45,6 @@
45
45
  "react-dom": ">=16.8.0 <18.0.0"
46
46
  },
47
47
  "beachball": {
48
- "tag": "beta",
49
48
  "disallowedChangeTypes": [
50
49
  "major",
51
50
  "minor",