@fluentui/react-positioning 0.0.0-nightly906d31cfa320211115.1 → 0.0.0-nightly96d9c9354420220210.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/CHANGELOG.json +123 -8
  2. package/CHANGELOG.md +29 -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/usePopper.d.ts +2 -14
  14. package/lib/usePopper.js +367 -311
  15. package/lib/usePopper.js.map +1 -1
  16. package/lib/usePopperMouseTarget.js +28 -22
  17. package/lib/usePopperMouseTarget.js.map +1 -1
  18. package/lib/utils/getBasePlacement.js +1 -1
  19. package/lib/utils/getBasePlacement.js.map +1 -1
  20. package/lib/utils/getBoundary.js +15 -10
  21. package/lib/utils/getBoundary.js.map +1 -1
  22. package/lib/utils/getReactFiberFromNode.js +39 -35
  23. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  24. package/lib/utils/getScrollParent.js +46 -32
  25. package/lib/utils/getScrollParent.js.map +1 -1
  26. package/lib/utils/mergeArrowOffset.js +29 -24
  27. package/lib/utils/mergeArrowOffset.js.map +1 -1
  28. package/lib/utils/positioningHelper.d.ts +2 -2
  29. package/lib/utils/positioningHelper.js +38 -30
  30. package/lib/utils/positioningHelper.js.map +1 -1
  31. package/lib/utils/resolvePositioningShorthand.js +57 -19
  32. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  33. package/lib/utils/useCallbackRef.js +35 -29
  34. package/lib/utils/useCallbackRef.js.map +1 -1
  35. package/lib-commonjs/createArrowStyles.d.ts +64 -0
  36. package/lib-commonjs/createArrowStyles.js +100 -0
  37. package/lib-commonjs/createArrowStyles.js.map +1 -0
  38. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  39. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  40. package/lib-commonjs/index.d.ts +2 -1
  41. package/lib-commonjs/index.js +28 -6
  42. package/lib-commonjs/index.js.map +1 -1
  43. package/lib-commonjs/types.d.ts +28 -7
  44. package/lib-commonjs/types.js +4 -1
  45. package/lib-commonjs/types.js.map +1 -1
  46. package/lib-commonjs/usePopper.d.ts +2 -14
  47. package/lib-commonjs/usePopper.js +382 -316
  48. package/lib-commonjs/usePopper.js.map +1 -1
  49. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  50. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  51. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  52. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  53. package/lib-commonjs/utils/getBoundary.js +23 -12
  54. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  55. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  56. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  57. package/lib-commonjs/utils/getScrollParent.js +53 -33
  58. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  59. package/lib-commonjs/utils/index.js +14 -2
  60. package/lib-commonjs/utils/index.js.map +1 -1
  61. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  62. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  63. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  64. package/lib-commonjs/utils/positioningHelper.js +46 -31
  65. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  66. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  67. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  68. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  69. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  70. package/package.json +7 -7
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>;