@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.
- package/CHANGELOG.json +117 -4
- package/CHANGELOG.md +113 -76
- package/dist/{react-positioning.d.ts → index.d.ts} +0 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/index.js +4 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/index.js +38 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
- package/lib/createArrowStyles.d.ts +0 -64
- package/lib/createVirtualElementFromClick.d.ts +0 -6
- package/lib/index.d.ts +0 -6
- package/lib/isIntersectingModifier.d.ts +0 -4
- package/lib/types.d.ts +0 -89
- package/lib/usePopper.d.ts +0 -23
- package/lib/usePopperMouseTarget.d.ts +0 -11
- package/lib/utils/getBasePlacement.d.ts +0 -8
- package/lib/utils/getBoundary.d.ts +0 -6
- package/lib/utils/getReactFiberFromNode.d.ts +0 -108
- package/lib/utils/getScrollParent.d.ts +0 -12
- package/lib/utils/index.d.ts +0 -8
- package/lib/utils/mergeArrowOffset.d.ts +0 -10
- package/lib/utils/positioningHelper.d.ts +0 -7
- package/lib/utils/resolvePositioningShorthand.d.ts +0 -2
- package/lib/utils/useCallbackRef.d.ts +0 -19
- package/lib-commonjs/createArrowStyles.d.ts +0 -64
- package/lib-commonjs/createVirtualElementFromClick.d.ts +0 -6
- package/lib-commonjs/index.d.ts +0 -6
- package/lib-commonjs/isIntersectingModifier.d.ts +0 -4
- package/lib-commonjs/types.d.ts +0 -89
- package/lib-commonjs/usePopper.d.ts +0 -23
- package/lib-commonjs/usePopperMouseTarget.d.ts +0 -11
- package/lib-commonjs/utils/getBasePlacement.d.ts +0 -8
- package/lib-commonjs/utils/getBoundary.d.ts +0 -6
- package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -108
- package/lib-commonjs/utils/getScrollParent.d.ts +0 -12
- package/lib-commonjs/utils/index.d.ts +0 -8
- package/lib-commonjs/utils/mergeArrowOffset.d.ts +0 -10
- package/lib-commonjs/utils/positioningHelper.d.ts +0 -7
- package/lib-commonjs/utils/resolvePositioningShorthand.d.ts +0 -2
- package/lib-commonjs/utils/useCallbackRef.d.ts +0 -19
File without changes
|
File without changes
|
package/lib/index.js
CHANGED
@@ -1,7 +1,6 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export
|
4
|
-
export
|
1
|
+
export { createVirtualElementFromClick } from './createVirtualElementFromClick';
|
2
|
+
export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
|
3
|
+
export { usePopper } from './usePopper';
|
4
|
+
export { usePopperMouseTarget } from './usePopperMouseTarget';
|
5
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
6
|
-
export * from './types';
|
7
6
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePopper } from './usePopper';\nexport { usePopperMouseTarget } from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n PopperOptions,\n PopperRefHandle,\n PopperVirtualElement,\n Position,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n} from './types';\n"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,17 +3,49 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
|
6
|
+
exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePopperMouseTarget = exports.usePopper = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
var createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
|
9
9
|
|
10
|
-
|
10
|
+
Object.defineProperty(exports, "createVirtualElementFromClick", {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return createVirtualElementFromClick_1.createVirtualElementFromClick;
|
14
|
+
}
|
15
|
+
});
|
16
|
+
|
17
|
+
var createArrowStyles_1 = /*#__PURE__*/require("./createArrowStyles");
|
18
|
+
|
19
|
+
Object.defineProperty(exports, "createArrowHeightStyles", {
|
20
|
+
enumerable: true,
|
21
|
+
get: function () {
|
22
|
+
return createArrowStyles_1.createArrowHeightStyles;
|
23
|
+
}
|
24
|
+
});
|
25
|
+
Object.defineProperty(exports, "createArrowStyles", {
|
26
|
+
enumerable: true,
|
27
|
+
get: function () {
|
28
|
+
return createArrowStyles_1.createArrowStyles;
|
29
|
+
}
|
30
|
+
});
|
31
|
+
|
32
|
+
var usePopper_1 = /*#__PURE__*/require("./usePopper");
|
11
33
|
|
12
|
-
|
34
|
+
Object.defineProperty(exports, "usePopper", {
|
35
|
+
enumerable: true,
|
36
|
+
get: function () {
|
37
|
+
return usePopper_1.usePopper;
|
38
|
+
}
|
39
|
+
});
|
13
40
|
|
14
|
-
|
41
|
+
var usePopperMouseTarget_1 = /*#__PURE__*/require("./usePopperMouseTarget");
|
15
42
|
|
16
|
-
|
43
|
+
Object.defineProperty(exports, "usePopperMouseTarget", {
|
44
|
+
enumerable: true,
|
45
|
+
get: function () {
|
46
|
+
return usePopperMouseTarget_1.usePopperMouseTarget;
|
47
|
+
}
|
48
|
+
});
|
17
49
|
|
18
50
|
var index_1 = /*#__PURE__*/require("./utils/index");
|
19
51
|
|
@@ -29,6 +61,4 @@ Object.defineProperty(exports, "mergeArrowOffset", {
|
|
29
61
|
return index_1.mergeArrowOffset;
|
30
62
|
}
|
31
63
|
});
|
32
|
-
|
33
|
-
tslib_1.__exportStar(require("./types"), exports);
|
34
64
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,+BAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,+BAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;;AACT,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,mBAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAElC,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,WAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,WAAA,CAAA,SAAA;AAAS;AAAT,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;;AACT,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,2BAAA;AAA2B;AAA3B,CAAA;AAA6B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePopper } from './usePopper';\nexport { usePopperMouseTarget } from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n PopperOptions,\n PopperRefHandle,\n PopperVirtualElement,\n Position,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n} from './types';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.0.0-rc.
|
3
|
+
"version": "9.0.0-rc.9",
|
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",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -20,7 +20,7 @@
|
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"test": "jest --passWithNoTests",
|
22
22
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
23
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
23
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-positioning/src && yarn docs",
|
24
24
|
"type-check": "tsc -b tsconfig.json"
|
25
25
|
},
|
26
26
|
"devDependencies": {
|
@@ -28,10 +28,10 @@
|
|
28
28
|
"@fluentui/scripts": "^1.0.0"
|
29
29
|
},
|
30
30
|
"dependencies": {
|
31
|
-
"@griffel/react": "1.0.
|
32
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
33
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
34
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
31
|
+
"@griffel/react": "1.0.5",
|
32
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.8",
|
33
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
34
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
35
35
|
"@popperjs/core": "~2.4.3",
|
36
36
|
"tslib": "^2.1.0"
|
37
37
|
},
|
@@ -1,64 +0,0 @@
|
|
1
|
-
import type { GriffelStyle } from '@griffel/react';
|
2
|
-
/**
|
3
|
-
* Options parameter for the createArrowStyles function
|
4
|
-
*/
|
5
|
-
export declare type CreateArrowStylesOptions = {
|
6
|
-
/**
|
7
|
-
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
|
8
|
-
*
|
9
|
-
* This can be undefined to leave out the arrow size styles. You must then add styles created by
|
10
|
-
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
|
11
|
-
*/
|
12
|
-
arrowHeight: number | undefined;
|
13
|
-
/**
|
14
|
-
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
|
15
|
-
*
|
16
|
-
* @defaultvalue 1px
|
17
|
-
*/
|
18
|
-
borderWidth?: GriffelStyle['borderBottomWidth'];
|
19
|
-
/**
|
20
|
-
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
21
|
-
*
|
22
|
-
* @defaultvalue solid
|
23
|
-
*/
|
24
|
-
borderStyle?: GriffelStyle['borderBottomStyle'];
|
25
|
-
/**
|
26
|
-
* The borderColor of the arrow. Should be the same borderColor as the parent element.
|
27
|
-
*
|
28
|
-
* @defaultvalue tokens.colorTransparentStroke
|
29
|
-
*/
|
30
|
-
borderColor?: GriffelStyle['borderBottomColor'];
|
31
|
-
};
|
32
|
-
/**
|
33
|
-
* Helper that creates a makeStyles rule for an arrow element.
|
34
|
-
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
35
|
-
*
|
36
|
-
* ```ts
|
37
|
-
* makeStyles({
|
38
|
-
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
39
|
-
*
|
40
|
-
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
41
|
-
* mediumArrow: createArrowHeightStyles(4),
|
42
|
-
* smallArrow: createArrowHeightStyles(2),
|
43
|
-
* })
|
44
|
-
* ...
|
45
|
-
*
|
46
|
-
* state.arrowWithSize.className = styles.arrowWithSize;
|
47
|
-
* state.arrowWithoutSize.className = mergeClasses(
|
48
|
-
* styles.arrowWithoutSize,
|
49
|
-
* state.smallArrow && styles.smallArrow,
|
50
|
-
* state.mediumArrow && styles.mediumArrow,
|
51
|
-
* )
|
52
|
-
* ```
|
53
|
-
*/
|
54
|
-
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
|
55
|
-
/**
|
56
|
-
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
57
|
-
*
|
58
|
-
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
59
|
-
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
60
|
-
*/
|
61
|
-
export declare function createArrowHeightStyles(arrowHeight: number): {
|
62
|
-
width: string;
|
63
|
-
height: string;
|
64
|
-
};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { PopperVirtualElement } from './types';
|
2
|
-
/**
|
3
|
-
* Creates a virtual element based on the position of a click event
|
4
|
-
* Can be used as a target for popper in scenarios such as context menus
|
5
|
-
*/
|
6
|
-
export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
|
package/lib/index.d.ts
DELETED
package/lib/types.d.ts
DELETED
@@ -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;
|
package/lib/usePopper.d.ts
DELETED
@@ -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;
|
package/lib/utils/index.d.ts
DELETED
@@ -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,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>;
|
@@ -1,64 +0,0 @@
|
|
1
|
-
import type { GriffelStyle } from '@griffel/react';
|
2
|
-
/**
|
3
|
-
* Options parameter for the createArrowStyles function
|
4
|
-
*/
|
5
|
-
export declare type CreateArrowStylesOptions = {
|
6
|
-
/**
|
7
|
-
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
|
8
|
-
*
|
9
|
-
* This can be undefined to leave out the arrow size styles. You must then add styles created by
|
10
|
-
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
|
11
|
-
*/
|
12
|
-
arrowHeight: number | undefined;
|
13
|
-
/**
|
14
|
-
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
|
15
|
-
*
|
16
|
-
* @defaultvalue 1px
|
17
|
-
*/
|
18
|
-
borderWidth?: GriffelStyle['borderBottomWidth'];
|
19
|
-
/**
|
20
|
-
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
21
|
-
*
|
22
|
-
* @defaultvalue solid
|
23
|
-
*/
|
24
|
-
borderStyle?: GriffelStyle['borderBottomStyle'];
|
25
|
-
/**
|
26
|
-
* The borderColor of the arrow. Should be the same borderColor as the parent element.
|
27
|
-
*
|
28
|
-
* @defaultvalue tokens.colorTransparentStroke
|
29
|
-
*/
|
30
|
-
borderColor?: GriffelStyle['borderBottomColor'];
|
31
|
-
};
|
32
|
-
/**
|
33
|
-
* Helper that creates a makeStyles rule for an arrow element.
|
34
|
-
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
35
|
-
*
|
36
|
-
* ```ts
|
37
|
-
* makeStyles({
|
38
|
-
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
39
|
-
*
|
40
|
-
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
41
|
-
* mediumArrow: createArrowHeightStyles(4),
|
42
|
-
* smallArrow: createArrowHeightStyles(2),
|
43
|
-
* })
|
44
|
-
* ...
|
45
|
-
*
|
46
|
-
* state.arrowWithSize.className = styles.arrowWithSize;
|
47
|
-
* state.arrowWithoutSize.className = mergeClasses(
|
48
|
-
* styles.arrowWithoutSize,
|
49
|
-
* state.smallArrow && styles.smallArrow,
|
50
|
-
* state.mediumArrow && styles.mediumArrow,
|
51
|
-
* )
|
52
|
-
* ```
|
53
|
-
*/
|
54
|
-
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
|
55
|
-
/**
|
56
|
-
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
57
|
-
*
|
58
|
-
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
59
|
-
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
60
|
-
*/
|
61
|
-
export declare function createArrowHeightStyles(arrowHeight: number): {
|
62
|
-
width: string;
|
63
|
-
height: string;
|
64
|
-
};
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { PopperVirtualElement } from './types';
|
2
|
-
/**
|
3
|
-
* Creates a virtual element based on the position of a click event
|
4
|
-
* Can be used as a target for popper in scenarios such as context menus
|
5
|
-
*/
|
6
|
-
export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
|
package/lib-commonjs/index.d.ts
DELETED