@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
File without changes
File without changes
package/lib/index.js CHANGED
@@ -1,7 +1,6 @@
1
- export * from './createVirtualElementFromClick';
2
- export * from './createArrowStyles';
3
- export * from './usePopper';
4
- export * from './usePopperMouseTarget';
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,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC","sourcesContent":["export * from './createVirtualElementFromClick';\nexport * from './createArrowStyles';\nexport * from './usePopper';\nexport * from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport * from './types';\n"]}
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"]}
@@ -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
- const tslib_1 = /*#__PURE__*/require("tslib");
8
+ var createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
9
9
 
10
- tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
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
- tslib_1.__exportStar(require("./createArrowStyles"), exports);
34
+ Object.defineProperty(exports, "usePopper", {
35
+ enumerable: true,
36
+ get: function () {
37
+ return usePopper_1.usePopper;
38
+ }
39
+ });
13
40
 
14
- tslib_1.__exportStar(require("./usePopper"), exports);
41
+ var usePopperMouseTarget_1 = /*#__PURE__*/require("./usePopperMouseTarget");
15
42
 
16
- tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
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":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,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;;AACtC,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './createVirtualElementFromClick';\nexport * from './createArrowStyles';\nexport * from './usePopper';\nexport * from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport * from './types';\n"],"sourceRoot":"../src/"}
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.6",
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": "lib/index.d.ts",
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 ../../scripts/typescript/normalize-import --output ./dist/packages/react-positioning/src && yarn docs",
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.3",
32
- "@fluentui/react-shared-contexts": "9.0.0-rc.5",
33
- "@fluentui/react-theme": "9.0.0-rc.5",
34
- "@fluentui/react-utilities": "9.0.0-rc.6",
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
@@ -1,6 +0,0 @@
1
- export * from './createVirtualElementFromClick';
2
- export * from './createArrowStyles';
3
- export * from './usePopper';
4
- export * from './usePopperMouseTarget';
5
- export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
- export * from './types';
@@ -1,4 +0,0 @@
1
- import { Modifier } from '@popperjs/core';
2
- export declare const isIntersectingModifier: IsIntersectingModifier;
3
- declare type IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;
4
- export {};
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;
@@ -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>;
@@ -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;
@@ -1,6 +0,0 @@
1
- export * from './createVirtualElementFromClick';
2
- export * from './createArrowStyles';
3
- export * from './usePopper';
4
- export * from './usePopperMouseTarget';
5
- export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
- export * from './types';
@@ -1,4 +0,0 @@
1
- import { Modifier } from '@popperjs/core';
2
- export declare const isIntersectingModifier: IsIntersectingModifier;
3
- declare type IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;
4
- export {};