@fluentui/react-positioning 0.0.0-nightlyc0273fdc6920211123.1 → 0.0.0-nightlyc0e3a0a1f320220217.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/CHANGELOG.json +134 -10
  2. package/CHANGELOG.md +38 -8
  3. package/dist/react-positioning.d.ts +96 -46
  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/types.d.ts +28 -7
  10. package/lib/usePopper.d.ts +2 -14
  11. package/lib/usePopper.js +367 -311
  12. package/lib/usePopper.js.map +1 -1
  13. package/lib/usePopperMouseTarget.js +28 -22
  14. package/lib/usePopperMouseTarget.js.map +1 -1
  15. package/lib/utils/getBasePlacement.js +1 -1
  16. package/lib/utils/getBasePlacement.js.map +1 -1
  17. package/lib/utils/getBoundary.js +15 -10
  18. package/lib/utils/getBoundary.js.map +1 -1
  19. package/lib/utils/getReactFiberFromNode.js +39 -35
  20. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  21. package/lib/utils/getScrollParent.js +46 -32
  22. package/lib/utils/getScrollParent.js.map +1 -1
  23. package/lib/utils/mergeArrowOffset.js +29 -24
  24. package/lib/utils/mergeArrowOffset.js.map +1 -1
  25. package/lib/utils/positioningHelper.d.ts +2 -2
  26. package/lib/utils/positioningHelper.js +38 -30
  27. package/lib/utils/positioningHelper.js.map +1 -1
  28. package/lib/utils/resolvePositioningShorthand.js +57 -19
  29. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  30. package/lib/utils/useCallbackRef.js +35 -29
  31. package/lib/utils/useCallbackRef.js.map +1 -1
  32. package/lib-commonjs/createArrowStyles.d.ts +47 -10
  33. package/lib-commonjs/createArrowStyles.js +80 -59
  34. package/lib-commonjs/createArrowStyles.js.map +1 -1
  35. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  36. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  37. package/lib-commonjs/index.js +26 -5
  38. package/lib-commonjs/index.js.map +1 -1
  39. package/lib-commonjs/types.d.ts +28 -7
  40. package/lib-commonjs/types.js +4 -1
  41. package/lib-commonjs/types.js.map +1 -1
  42. package/lib-commonjs/usePopper.d.ts +2 -14
  43. package/lib-commonjs/usePopper.js +382 -316
  44. package/lib-commonjs/usePopper.js.map +1 -1
  45. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  46. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  47. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  48. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  49. package/lib-commonjs/utils/getBoundary.js +23 -12
  50. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  51. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  52. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  53. package/lib-commonjs/utils/getScrollParent.js +53 -33
  54. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  55. package/lib-commonjs/utils/index.js +14 -2
  56. package/lib-commonjs/utils/index.js.map +1 -1
  57. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  58. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  59. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  60. package/lib-commonjs/utils/positioningHelper.js +46 -31
  61. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  62. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  63. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  64. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  65. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  66. package/package.json +7 -8
@@ -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":""}
package/lib/types.d.ts CHANGED
@@ -12,18 +12,25 @@ export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
12
12
  export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
13
13
  export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
14
14
  export declare type PopperRefHandle = {
15
+ /**
16
+ * Updates the position of the popper imperatively.
17
+ * Useful when the position of the target changes from other factors than scrolling of window resize.
18
+ */
15
19
  updatePosition: () => void;
20
+ /**
21
+ * Sets the target and updates positioning imperatively.
22
+ * Useful for avoiding double renders with the target option.
23
+ */
24
+ setTarget: (target: HTMLElement) => void;
16
25
  };
17
26
  export declare type PopperVirtualElement = PopperJs.VirtualElement;
18
- export interface PositioningProps {
27
+ export interface PopperOptions {
19
28
  /** Alignment for the component. Only has an effect if used with the @see position option */
20
29
  align?: Alignment;
21
30
  /** The element which will define the boundaries of the popper position for the flip behavior. */
22
31
  flipBoundary?: Boundary;
23
32
  /** The element which will define the boundaries of the popper position for the overflow behavior. */
24
33
  overflowBoundary?: Boundary;
25
- /** An imperative handle to Popper methods. */
26
- popperRef?: React.Ref<PopperRefHandle>;
27
34
  /**
28
35
  * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
29
36
  * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -31,6 +38,11 @@ export interface PositioningProps {
31
38
  * then provided value for 'align' will be ignored and 'center' will be used instead.
32
39
  */
33
40
  position?: Position;
41
+ /**
42
+ * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
43
+ * @default false
44
+ */
45
+ positionFixed?: boolean;
34
46
  /**
35
47
  * Lets you displace a popper element from its reference element.
36
48
  * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -50,10 +62,6 @@ export interface PositioningProps {
50
62
  * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
51
63
  */
52
64
  autoSize?: AutoSize;
53
- /**
54
- * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
55
- */
56
- target?: HTMLElement | PopperVirtualElement | null;
57
65
  /**
58
66
  * Modifies position and alignment to cover the target
59
67
  */
@@ -63,6 +71,19 @@ export interface PositioningProps {
63
71
  * `position` props, regardless of the size of the component, the reference element or the viewport.
64
72
  */
65
73
  pinned?: boolean;
74
+ /**
75
+ * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
76
+ * "all" enables this behavior for all axis.
77
+ */
78
+ unstable_disableTether?: boolean | 'all';
79
+ }
80
+ export interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
81
+ /** An imperative handle to Popper methods. */
82
+ popperRef?: React.Ref<PopperRefHandle>;
83
+ /**
84
+ * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
85
+ */
86
+ target?: HTMLElement | PopperVirtualElement | null;
66
87
  }
67
88
  export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
68
89
  export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
@@ -1,23 +1,11 @@
1
- import * as PopperJs from '@popperjs/core';
2
1
  import * as React from 'react';
3
2
  import type { PositioningProps } from './types';
4
- interface PopperOptions extends PositioningProps {
3
+ interface UsePopperOptions extends PositioningProps {
5
4
  /**
6
5
  * If false, delays Popper's creation.
7
6
  * @default true
8
7
  */
9
8
  enabled?: boolean;
10
- onStateUpdate?: (state: Partial<PopperJs.State>) => void;
11
- /**
12
- * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
13
- * @default false
14
- */
15
- positionFixed?: boolean;
16
- /**
17
- * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
18
- * "all" enables this behavior for all axis.
19
- */
20
- unstable_disableTether?: boolean | 'all';
21
9
  }
22
10
  /**
23
11
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
@@ -27,7 +15,7 @@ interface PopperOptions extends PositioningProps {
27
15
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
28
16
  * to avoid focus jumps
29
17
  */
30
- export declare function usePopper(options?: PopperOptions): {
18
+ export declare function usePopper(options?: UsePopperOptions): {
31
19
  targetRef: React.MutableRefObject<any>;
32
20
  containerRef: React.MutableRefObject<any>;
33
21
  arrowRef: React.MutableRefObject<any>;