@fluentui/react-positioning 9.0.0-rc.6 → 9.0.0-rc.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/CHANGELOG.json +117 -4
  2. package/CHANGELOG.md +113 -76
  3. package/dist/{react-positioning.d.ts → index.d.ts} +0 -0
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/index.js +4 -5
  6. package/lib/index.js.map +1 -1
  7. package/lib-commonjs/index.js +38 -8
  8. package/lib-commonjs/index.js.map +1 -1
  9. package/package.json +7 -7
  10. package/lib/createArrowStyles.d.ts +0 -64
  11. package/lib/createVirtualElementFromClick.d.ts +0 -6
  12. package/lib/index.d.ts +0 -6
  13. package/lib/isIntersectingModifier.d.ts +0 -4
  14. package/lib/types.d.ts +0 -89
  15. package/lib/usePopper.d.ts +0 -23
  16. package/lib/usePopperMouseTarget.d.ts +0 -11
  17. package/lib/utils/getBasePlacement.d.ts +0 -8
  18. package/lib/utils/getBoundary.d.ts +0 -6
  19. package/lib/utils/getReactFiberFromNode.d.ts +0 -108
  20. package/lib/utils/getScrollParent.d.ts +0 -12
  21. package/lib/utils/index.d.ts +0 -8
  22. package/lib/utils/mergeArrowOffset.d.ts +0 -10
  23. package/lib/utils/positioningHelper.d.ts +0 -7
  24. package/lib/utils/resolvePositioningShorthand.d.ts +0 -2
  25. package/lib/utils/useCallbackRef.d.ts +0 -19
  26. package/lib-commonjs/createArrowStyles.d.ts +0 -64
  27. package/lib-commonjs/createVirtualElementFromClick.d.ts +0 -6
  28. package/lib-commonjs/index.d.ts +0 -6
  29. package/lib-commonjs/isIntersectingModifier.d.ts +0 -4
  30. package/lib-commonjs/types.d.ts +0 -89
  31. package/lib-commonjs/usePopper.d.ts +0 -23
  32. package/lib-commonjs/usePopperMouseTarget.d.ts +0 -11
  33. package/lib-commonjs/utils/getBasePlacement.d.ts +0 -8
  34. package/lib-commonjs/utils/getBoundary.d.ts +0 -6
  35. package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -108
  36. package/lib-commonjs/utils/getScrollParent.d.ts +0 -12
  37. package/lib-commonjs/utils/index.d.ts +0 -8
  38. package/lib-commonjs/utils/mergeArrowOffset.d.ts +0 -10
  39. package/lib-commonjs/utils/positioningHelper.d.ts +0 -7
  40. package/lib-commonjs/utils/resolvePositioningShorthand.d.ts +0 -2
  41. package/lib-commonjs/utils/useCallbackRef.d.ts +0 -19
@@ -1,89 +0,0 @@
1
- import * as PopperJs from '@popperjs/core';
2
- import * as React from 'react';
3
- export declare type OffsetFunctionParam = {
4
- popper: PopperJs.Rect;
5
- reference: PopperJs.Rect;
6
- placement: PopperJs.Placement;
7
- };
8
- export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
9
- export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
10
- export declare type Position = 'above' | 'below' | 'before' | 'after';
11
- export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
12
- export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
13
- export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
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
- */
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 | PopperVirtualElement) => void;
25
- };
26
- export declare type PopperVirtualElement = PopperJs.VirtualElement;
27
- export interface PopperOptions {
28
- /** Alignment for the component. Only has an effect if used with the @see position option */
29
- align?: Alignment;
30
- /** The element which will define the boundaries of the popper position for the flip behavior. */
31
- flipBoundary?: Boundary;
32
- /** The element which will define the boundaries of the popper position for the overflow behavior. */
33
- overflowBoundary?: Boundary;
34
- /**
35
- * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
36
- * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
37
- * and 'start' | 'end' respectively),
38
- * then provided value for 'align' will be ignored and 'center' will be used instead.
39
- */
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;
46
- /**
47
- * Lets you displace a popper element from its reference element.
48
- * This can be useful if you need to apply some margin between them or if you need to fine tune the
49
- * position according to some custom logic.
50
- */
51
- offset?: Offset;
52
- /**
53
- * Defines padding between the corner of the popup element and the arrow.
54
- * Use to prevent the arrow from overlapping a rounded corner, for example.
55
- */
56
- arrowPadding?: number;
57
- /**
58
- * Applies max-height and max-width on popper to fit it within the available space in viewport.
59
- * true enables this for both width and height when overflow happens.
60
- * 'always' applies `max-height`/`max-width` regardless of overflow.
61
- * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
62
- * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
63
- */
64
- autoSize?: AutoSize;
65
- /**
66
- * Modifies position and alignment to cover the target
67
- */
68
- coverTarget?: boolean;
69
- /**
70
- * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
71
- * `position` props, regardless of the size of the component, the reference element or the viewport.
72
- */
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;
87
- }
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';
89
- export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import type { PositioningProps } from './types';
3
- interface UsePopperOptions extends PositioningProps {
4
- /**
5
- * If false, delays Popper's creation.
6
- * @default true
7
- */
8
- enabled?: boolean;
9
- }
10
- /**
11
- * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
12
- * package:
13
- * - style attributes are applied directly on DOM to avoid re-renders
14
- * - refs changes and resolution is handled properly without re-renders
15
- * - contains a specific to React fix related to initial positioning when containers have components with managed focus
16
- * to avoid focus jumps
17
- */
18
- export declare function usePopper(options?: UsePopperOptions): {
19
- targetRef: React.MutableRefObject<any>;
20
- containerRef: React.MutableRefObject<any>;
21
- arrowRef: React.MutableRefObject<any>;
22
- };
23
- export {};
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import * as PopperJs from '@popperjs/core';
3
- /**
4
- * A state hook that manages a popper virtual element from mouseevents.
5
- * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
6
- * React synthetic events are not persisted by this hook
7
- *
8
- * @param initialState - initializes a user provided state similare to useState
9
- * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
10
- */
11
- export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React.MouseEvent | MouseEvent | undefined | null) => void];
@@ -1,8 +0,0 @@
1
- import * as PopperJs from '@popperjs/core';
2
- /**
3
- * Returns the base placement value
4
- * @param placement - the popper placement (i.e. bottom-start)
5
- *
6
- * @returns bottom-start -> bottom
7
- */
8
- export declare function getBasePlacement(placement: PopperJs.Placement): PopperJs.BasePlacement;
@@ -1,6 +0,0 @@
1
- import * as PopperJs from '@popperjs/core';
2
- import type { Boundary } from '../types';
3
- /**
4
- * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.
5
- */
6
- export declare function getBoundary(element: HTMLElement | null, boundary?: Boundary): PopperJs.Boundary | undefined;
@@ -1,108 +0,0 @@
1
- import * as React from 'react';
2
- declare type ReactEventResponder<E, C> = {
3
- $$typeof: Symbol | number;
4
- displayName: string;
5
- targetEventTypes: null | string[];
6
- rootEventTypes: null | string[];
7
- getInitialState: null | ((props: Object) => Object);
8
- onEvent: null | ((event: E, context: C, props: Object, state: Object) => void);
9
- onRootEvent: null | ((event: E, context: C, props: Object, state: Object) => void);
10
- onMount: null | ((context: C, props: Object, state: Object) => void);
11
- onUnmount: null | ((context: C, props: Object, state: Object) => void);
12
- };
13
- declare type ReactEventResponderInstance<E, C> = {
14
- fiber: Object;
15
- props: Object;
16
- responder: ReactEventResponder<E, C>;
17
- rootEventTypes: null | Set<string>;
18
- state: Object;
19
- };
20
- export declare type HookType = 'useState' | 'useReducer' | 'useContext' | 'useRef' | 'useEffect' | 'useLayoutEffect' | 'useCallback' | 'useMemo' | 'useImperativeHandle' | 'useDebugValue' | 'useResponder';
21
- declare type ReactProviderType<T> = {
22
- $$typeof: Symbol | number;
23
- _context: ReactContext<T>;
24
- };
25
- declare type ReactContext<T> = {
26
- $$typeof: Symbol | number;
27
- Consumer: ReactContext<T>;
28
- Provider: ReactProviderType<T>;
29
- _calculateChangedBits: ((a: T, b: T) => number) | null;
30
- _currentValue: T;
31
- _currentValue2: T;
32
- _threadCount: number;
33
- _currentRenderer?: Object | null;
34
- _currentRenderer2?: Object | null;
35
- };
36
- declare type ContextDependency<T> = {
37
- context: ReactContext<T>;
38
- observedBits: number;
39
- next: ContextDependency<any> | null;
40
- };
41
- declare enum WorkTag {
42
- FunctionComponent = 0,
43
- ClassComponent = 1,
44
- IndeterminateComponent = 2,
45
- HostRoot = 3,
46
- HostPortal = 4,
47
- HostComponent = 5,
48
- HostText = 6,
49
- Fragment = 7,
50
- Mode = 8,
51
- ContextConsumer = 9,
52
- ContextProvider = 10,
53
- ForwardRef = 11,
54
- Profiler = 12,
55
- SuspenseComponent = 13,
56
- MemoComponent = 14,
57
- SimpleMemoComponent = 15,
58
- LazyComponent = 16,
59
- IncompleteClassComponent = 17,
60
- DehydratedFragment = 18,
61
- SuspenseListComponent = 19,
62
- FundamentalComponent = 20,
63
- ScopeComponent = 21
64
- }
65
- declare type Source = {
66
- fileName: string;
67
- lineNumber: number;
68
- };
69
- declare type ExpirationTime = number;
70
- declare type Dependencies = {
71
- expirationTime: ExpirationTime;
72
- firstContext: ContextDependency<any> | null;
73
- responders: Map<ReactEventResponder<any, any>, ReactEventResponderInstance<any, any>> | null;
74
- };
75
- export declare type Fiber = {
76
- tag: WorkTag;
77
- key: null | string;
78
- elementType: any;
79
- type: any;
80
- stateNode: any;
81
- return: Fiber | null;
82
- child: Fiber | null;
83
- sibling: Fiber | null;
84
- index: number;
85
- ref: React.Ref<any>;
86
- pendingProps: any;
87
- memoizedProps: any;
88
- memoizedState: any;
89
- dependencies: Dependencies | null;
90
- nextEffect: Fiber | null;
91
- firstEffect: Fiber | null;
92
- lastEffect: Fiber | null;
93
- expirationTime: ExpirationTime;
94
- childExpirationTime: ExpirationTime;
95
- alternate: Fiber | null;
96
- actualDuration?: number;
97
- actualStartTime?: number;
98
- selfBaseDuration?: number;
99
- treeBaseDuration?: number;
100
- _debugID?: number;
101
- _debugSource?: Source | null;
102
- _debugOwner?: Fiber | null;
103
- _debugIsCurrentlyTiming?: boolean;
104
- _debugNeedsRemount?: boolean;
105
- _debugHookTypes?: HookType[] | null;
106
- };
107
- export declare function getReactFiberFromNode(elm: Node | undefined): Fiber | null;
108
- export {};
@@ -1,12 +0,0 @@
1
- /**
2
- * Returns the parent node or the host of the node argument.
3
- * @param node - DOM node.
4
- * @returns - parent DOM node.
5
- */
6
- export declare const getParentNode: (node: HTMLElement) => HTMLElement;
7
- /**
8
- * Returns the first scrollable parent of the given element.
9
- * @param node - DOM node.
10
- * @returns - the first scrollable parent.
11
- */
12
- export declare const getScrollParent: (node: Document | HTMLElement | null) => HTMLElement;
@@ -1,8 +0,0 @@
1
- export * from './getBasePlacement';
2
- export * from './getBoundary';
3
- export * from './getReactFiberFromNode';
4
- export * from './getScrollParent';
5
- export * from './mergeArrowOffset';
6
- export * from './positioningHelper';
7
- export * from './resolvePositioningShorthand';
8
- export * from './useCallbackRef';
@@ -1,10 +0,0 @@
1
- import type { Offset } from '../types';
2
- /**
3
- * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
4
- * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
5
- *
6
- * @param userOffset - The offset provided by the user
7
- * @param arrowHeight - The height of the arrow in px
8
- * @returns User offset augmented with arrow height
9
- */
10
- export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
@@ -1,7 +0,0 @@
1
- import * as PopperJs from '@popperjs/core';
2
- import type { Alignment, Offset, Position } from '../types';
3
- /**
4
- * @see positioninHelper.test.ts for expected placement values
5
- */
6
- export declare const getPlacement: (align?: Alignment | undefined, position?: Position | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
7
- export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;
@@ -1,2 +0,0 @@
1
- import type { PositioningShorthand, PositioningProps } from '../types';
2
- export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
@@ -1,19 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
4
- * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
5
- * React.useState(), but it will cause re-renders always.
6
- *
7
- * https://reactjs.org/docs/hooks-reference.html#useref
8
- * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
9
- *
10
- * @param initialValue - initial ref value
11
- * @param callback - a callback to run when value changes
12
- * @param skipInitialResolve - a flag to skip an initial ref report
13
- *
14
- * @example
15
- * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
16
- * ref.current = 1;
17
- * // prints 0 -> 1
18
- */
19
- export declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void, skipInitialResolve?: boolean): React.MutableRefObject<T | null>;