@fluentui/react-positioning 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +457 -12
- package/CHANGELOG.md +209 -72
- package/dist/index.d.ts +247 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/createArrowStyles.js +87 -0
- package/lib/createArrowStyles.js.map +1 -0
- package/lib/createVirtualElementFromClick.js +19 -15
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib/isIntersectingModifier.js +26 -0
- package/lib/isIntersectingModifier.js.map +1 -0
- package/lib/types.js.map +1 -1
- package/lib/usePositioning.js +408 -0
- package/lib/usePositioning.js.map +1 -0
- package/lib/usePositioningMouseTarget.js +40 -0
- package/lib/usePositioningMouseTarget.js.map +1 -0
- package/lib/utils/fromPopperPlacement.js +40 -0
- package/lib/utils/fromPopperPlacement.js.map +1 -0
- package/lib/utils/getBoundary.js +15 -10
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getPopperOffset.js +44 -0
- package/lib/utils/getPopperOffset.js.map +1 -0
- package/lib/utils/getReactFiberFromNode.js +39 -35
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +46 -32
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/index.js +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +31 -25
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parsePopperPlacement.js +14 -0
- package/lib/utils/parsePopperPlacement.js.map +1 -0
- package/lib/utils/positioningHelper.js +42 -34
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +58 -20
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/useCallbackRef.js +35 -29
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +100 -0
- package/lib-commonjs/createArrowStyles.js.map +1 -0
- package/lib-commonjs/createVirtualElementFromClick.js +25 -16
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js +62 -10
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/isIntersectingModifier.js +34 -0
- package/lib-commonjs/isIntersectingModifier.js.map +1 -0
- package/lib-commonjs/types.js +4 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePositioning.js +424 -0
- package/lib-commonjs/usePositioning.js.map +1 -0
- package/lib-commonjs/usePositioningMouseTarget.js +51 -0
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -0
- package/lib-commonjs/utils/fromPopperPlacement.js +50 -0
- package/lib-commonjs/utils/fromPopperPlacement.js.map +1 -0
- package/lib-commonjs/utils/getBoundary.js +23 -12
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getPopperOffset.js +54 -0
- package/lib-commonjs/utils/getPopperOffset.js.map +1 -0
- package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +53 -33
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/index.js +15 -3
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +37 -26
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parsePopperPlacement.js +23 -0
- package/lib-commonjs/utils/parsePopperPlacement.js.map +1 -0
- package/lib-commonjs/utils/positioningHelper.js +50 -35
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +66 -23
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +45 -32
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/package.json +17 -14
- package/dist/react-positioning.d.ts +0 -143
- package/lib/createVirtualElementFromClick.d.ts +0 -6
- package/lib/index.d.ts +0 -5
- package/lib/types.d.ts +0 -68
- package/lib/usePopper.d.ts +0 -35
- package/lib/usePopper.js +0 -357
- package/lib/usePopper.js.map +0 -1
- package/lib/usePopperMouseTarget.d.ts +0 -11
- package/lib/usePopperMouseTarget.js +0 -34
- package/lib/usePopperMouseTarget.js.map +0 -1
- package/lib/utils/getBasePlacement.d.ts +0 -8
- package/lib/utils/getBasePlacement.js +0 -10
- package/lib/utils/getBasePlacement.js.map +0 -1
- package/lib/utils/getBoundary.d.ts +0 -6
- package/lib/utils/getReactFiberFromNode.d.ts +0 -109
- 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/createVirtualElementFromClick.d.ts +0 -6
- package/lib-commonjs/index.d.ts +0 -5
- package/lib-commonjs/types.d.ts +0 -68
- package/lib-commonjs/usePopper.d.ts +0 -35
- package/lib-commonjs/usePopper.js +0 -361
- package/lib-commonjs/usePopper.js.map +0 -1
- package/lib-commonjs/usePopperMouseTarget.d.ts +0 -11
- package/lib-commonjs/usePopperMouseTarget.js +0 -38
- package/lib-commonjs/usePopperMouseTarget.js.map +0 -1
- package/lib-commonjs/utils/getBasePlacement.d.ts +0 -8
- package/lib-commonjs/utils/getBasePlacement.js +0 -14
- package/lib-commonjs/utils/getBasePlacement.js.map +0 -1
- package/lib-commonjs/utils/getBoundary.d.ts +0 -6
- package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -109
- 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
@@ -1,29 +1,72 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
exports
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.resolvePositioningShorthand = void 0; // Look up table for shorthand to avoid parsing strings
|
7
|
+
|
8
|
+
const shorthandLookup = {
|
9
|
+
above: {
|
10
|
+
position: 'above',
|
11
|
+
align: 'center'
|
12
|
+
},
|
13
|
+
'above-start': {
|
14
|
+
position: 'above',
|
15
|
+
align: 'start'
|
16
|
+
},
|
17
|
+
'above-end': {
|
18
|
+
position: 'above',
|
19
|
+
align: 'end'
|
20
|
+
},
|
21
|
+
below: {
|
22
|
+
position: 'below',
|
23
|
+
align: 'center'
|
24
|
+
},
|
25
|
+
'below-start': {
|
26
|
+
position: 'below',
|
27
|
+
align: 'start'
|
28
|
+
},
|
29
|
+
'below-end': {
|
30
|
+
position: 'below',
|
31
|
+
align: 'end'
|
32
|
+
},
|
33
|
+
before: {
|
34
|
+
position: 'before',
|
35
|
+
align: 'center'
|
36
|
+
},
|
37
|
+
'before-top': {
|
38
|
+
position: 'before',
|
39
|
+
align: 'top'
|
40
|
+
},
|
41
|
+
'before-bottom': {
|
42
|
+
position: 'before',
|
43
|
+
align: 'bottom'
|
44
|
+
},
|
45
|
+
after: {
|
46
|
+
position: 'after',
|
47
|
+
align: 'center'
|
48
|
+
},
|
49
|
+
'after-top': {
|
50
|
+
position: 'after',
|
51
|
+
align: 'top'
|
52
|
+
},
|
53
|
+
'after-bottom': {
|
54
|
+
position: 'after',
|
55
|
+
align: 'bottom'
|
56
|
+
}
|
18
57
|
};
|
58
|
+
|
19
59
|
function resolvePositioningShorthand(shorthand) {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
60
|
+
if (shorthand === undefined || shorthand === null) {
|
61
|
+
return {};
|
62
|
+
}
|
63
|
+
|
64
|
+
if (typeof shorthand === 'string') {
|
65
|
+
return shorthandLookup[shorthand];
|
66
|
+
}
|
67
|
+
|
68
|
+
return shorthand;
|
27
69
|
}
|
70
|
+
|
28
71
|
exports.resolvePositioningShorthand = resolvePositioningShorthand;
|
29
72
|
//# sourceMappingURL=resolvePositioningShorthand.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/resolvePositioningShorthand.ts"],"names":[],"mappings":";;;;;8CAEA;;AACA,MAAM,eAAe,GAAoF;AACvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GADgG;AAEvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAFwF;AAGvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAH0F;AAIvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAJgG;AAKvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GALwF;AAMvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAN0F;AAOvG,EAAA,MAAM,EAAE;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GAP+F;AAQvG,gBAAc;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GARyF;AASvG,mBAAiB;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GATsF;AAUvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAVgG;AAWvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAX0F;AAYvG,kBAAgB;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B;AAZuF,CAAzG;;AAeA,SAAgB,2BAAhB,CACE,SADF,EACoD;AAElD,MAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;AACjD,WAAO,EAAP;AACD;;AAED,MAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;AACjC,WAAO,eAAe,CAAC,SAAD,CAAtB;AACD;;AAED,SAAO,SAAP;AACD;;AAZD,OAAA,CAAA,2BAAA,GAAA,2BAAA","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}
|
@@ -1,8 +1,13 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.useCallbackRef = void 0;
|
4
|
-
|
5
|
-
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
6
11
|
/**
|
7
12
|
* Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
|
8
13
|
* changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
|
@@ -20,36 +25,44 @@ var react_utilities_1 = require("@fluentui/react-utilities");
|
|
20
25
|
* ref.current = 1;
|
21
26
|
* // prints 0 -> 1
|
22
27
|
*/
|
28
|
+
|
29
|
+
|
23
30
|
function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
31
|
+
const isFirst = React.useRef(true);
|
32
|
+
const [ref] = React.useState(() => ({
|
33
|
+
// value
|
34
|
+
value: initialValue,
|
35
|
+
// last callback
|
36
|
+
callback,
|
37
|
+
// "memoized" public interface
|
38
|
+
facade: {
|
39
|
+
get current() {
|
40
|
+
return ref.value;
|
41
|
+
},
|
42
|
+
|
43
|
+
set current(value) {
|
44
|
+
const last = ref.value;
|
45
|
+
|
46
|
+
if (last !== value) {
|
47
|
+
ref.value = value;
|
48
|
+
|
49
|
+
if (skipInitialResolve && isFirst.current) {
|
50
|
+
return;
|
51
|
+
}
|
52
|
+
|
53
|
+
ref.callback(value, last);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
}
|
58
|
+
}));
|
59
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
60
|
+
isFirst.current = false;
|
61
|
+
}, []); // update callback
|
62
|
+
|
63
|
+
ref.callback = callback;
|
64
|
+
return ref.facade;
|
53
65
|
}
|
66
|
+
|
54
67
|
exports.useCallbackRef = useCallbackRef;
|
55
68
|
//# sourceMappingURL=useCallbackRef.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;;AACH,SAAgB,cAAhB,CACE,YADF,EAEE,QAFF,EAGE,kBAHF,EAG8B;AAE5B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;AACA,QAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;AAClC;AACA,IAAA,KAAK,EAAE,YAF2B;AAGlC;AACA,IAAA,QAJkC;AAKlC;AACA,IAAA,MAAM,EAAE;AACN,UAAI,OAAJ,GAAW;AACT,eAAO,GAAG,CAAC,KAAX;AACD,OAHK;;AAIN,UAAI,OAAJ,CAAY,KAAZ,EAAiB;AACf,cAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;AAEA,YAAI,IAAI,KAAK,KAAb,EAAoB;AAClB,UAAA,GAAG,CAAC,KAAJ,GAAY,KAAZ;;AAEA,cAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;AACzC;AACD;;AAED,UAAA,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;AACD;AACF;;AAhBK;AAN0B,GAAP,CAAf,CAAd;AA0BA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFD,EAEG,EAFH,EA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD;;AAxCD,OAAA,CAAA,cAAA,GAAA,cAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
|
-
"version": "9.0.0-
|
3
|
+
"version": "9.0.0-rc.10",
|
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",
|
@@ -18,23 +18,20 @@
|
|
18
18
|
"code-style": "just-scripts code-style",
|
19
19
|
"just": "just-scripts",
|
20
20
|
"lint": "just-scripts lint",
|
21
|
-
"test": "jest",
|
21
|
+
"test": "jest --passWithNoTests",
|
22
22
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
23
|
-
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node
|
24
|
-
"
|
25
|
-
"start": "yarn storybook"
|
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
|
+
"type-check": "tsc -b tsconfig.json"
|
26
25
|
},
|
27
26
|
"devDependencies": {
|
28
27
|
"@fluentui/eslint-plugin": "*",
|
29
|
-
"@fluentui/scripts": "^1.0.0"
|
30
|
-
"@types/react": "16.9.42",
|
31
|
-
"@types/react-dom": "16.9.10",
|
32
|
-
"react": "16.8.6",
|
33
|
-
"react-dom": "16.8.6"
|
28
|
+
"@fluentui/scripts": "^1.0.0"
|
34
29
|
},
|
35
30
|
"dependencies": {
|
36
|
-
"@
|
37
|
-
"@fluentui/react-
|
31
|
+
"@griffel/react": "1.0.5",
|
32
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.9",
|
33
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
34
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
38
35
|
"@popperjs/core": "~2.4.3",
|
39
36
|
"tslib": "^2.1.0"
|
40
37
|
},
|
@@ -45,11 +42,17 @@
|
|
45
42
|
"react-dom": ">=16.8.0 <18.0.0"
|
46
43
|
},
|
47
44
|
"beachball": {
|
48
|
-
"tag": "beta",
|
49
45
|
"disallowedChangeTypes": [
|
50
46
|
"major",
|
51
47
|
"minor",
|
52
48
|
"patch"
|
53
49
|
]
|
50
|
+
},
|
51
|
+
"exports": {
|
52
|
+
".": {
|
53
|
+
"types": "./lib/index.d.ts",
|
54
|
+
"import": "./lib/index.js",
|
55
|
+
"require": "./lib-commonjs/index.js"
|
56
|
+
}
|
54
57
|
}
|
55
58
|
}
|
@@ -1,143 +0,0 @@
|
|
1
|
-
import * as PopperJs from '@popperjs/core';
|
2
|
-
import * as React_2 from 'react';
|
3
|
-
|
4
|
-
export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
|
5
|
-
|
6
|
-
export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
|
7
|
-
|
8
|
-
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
9
|
-
|
10
|
-
/**
|
11
|
-
* Creates a virtual element based on the position of a click event
|
12
|
-
* Can be used as a target for popper in scenarios such as context menus
|
13
|
-
*/
|
14
|
-
export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
|
15
|
-
|
16
|
-
/**
|
17
|
-
* Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
|
18
|
-
* height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
|
19
|
-
*
|
20
|
-
* @param userOffset - The offset provided by the user
|
21
|
-
* @param arrowHeight - The height of the arrow in px
|
22
|
-
* @returns User offset augmented with arrow height
|
23
|
-
*/
|
24
|
-
export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
|
25
|
-
|
26
|
-
export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
|
27
|
-
|
28
|
-
export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
|
29
|
-
|
30
|
-
export declare type OffsetFunctionParam = {
|
31
|
-
popper: PopperJs.Rect;
|
32
|
-
reference: PopperJs.Rect;
|
33
|
-
placement: PopperJs.Placement;
|
34
|
-
};
|
35
|
-
|
36
|
-
declare interface PopperOptions extends PositioningProps {
|
37
|
-
/**
|
38
|
-
* If false, delays Popper's creation.
|
39
|
-
* @default true
|
40
|
-
*/
|
41
|
-
enabled?: boolean;
|
42
|
-
onStateUpdate?: (state: Partial<PopperJs.State>) => void;
|
43
|
-
/**
|
44
|
-
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
positionFixed?: boolean;
|
48
|
-
/**
|
49
|
-
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
50
|
-
* "all" enables this behavior for all axis.
|
51
|
-
*/
|
52
|
-
unstable_disableTether?: boolean | 'all';
|
53
|
-
}
|
54
|
-
|
55
|
-
export declare type PopperRefHandle = {
|
56
|
-
updatePosition: () => void;
|
57
|
-
};
|
58
|
-
|
59
|
-
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
60
|
-
|
61
|
-
export declare type Position = 'above' | 'below' | 'before' | 'after';
|
62
|
-
|
63
|
-
export declare interface PositioningProps {
|
64
|
-
/** Alignment for the component. Only has an effect if used with the @see position option */
|
65
|
-
align?: Alignment;
|
66
|
-
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
67
|
-
flipBoundary?: Boundary;
|
68
|
-
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
69
|
-
overflowBoundary?: Boundary;
|
70
|
-
/** An imperative handle to Popper methods. */
|
71
|
-
popperRef?: React_2.Ref<PopperRefHandle>;
|
72
|
-
/**
|
73
|
-
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
74
|
-
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
75
|
-
* and 'start' | 'end' respectively),
|
76
|
-
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
77
|
-
*/
|
78
|
-
position?: Position;
|
79
|
-
/**
|
80
|
-
* Lets you displace a popper element from its reference element.
|
81
|
-
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
82
|
-
* position according to some custom logic.
|
83
|
-
*/
|
84
|
-
offset?: Offset;
|
85
|
-
/**
|
86
|
-
* Defines padding between the corner of the popup element and the arrow.
|
87
|
-
* Use to prevent the arrow from overlapping a rounded corner, for example.
|
88
|
-
*/
|
89
|
-
arrowPadding?: number;
|
90
|
-
/**
|
91
|
-
* Applies max-height and max-width on popper to fit it within the available space in viewport.
|
92
|
-
* true enables this for both width and height when overflow happens.
|
93
|
-
* 'always' applies `max-height`/`max-width` regardless of overflow.
|
94
|
-
* 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
|
95
|
-
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
96
|
-
*/
|
97
|
-
autoSize?: AutoSize;
|
98
|
-
/**
|
99
|
-
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
100
|
-
*/
|
101
|
-
target?: HTMLElement | PopperVirtualElement | null;
|
102
|
-
/**
|
103
|
-
* Modifies position and alignment to cover the target
|
104
|
-
*/
|
105
|
-
coverTarget?: boolean;
|
106
|
-
/**
|
107
|
-
* Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
|
108
|
-
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
109
|
-
*/
|
110
|
-
pinned?: boolean;
|
111
|
-
}
|
112
|
-
|
113
|
-
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
114
|
-
|
115
|
-
export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
|
116
|
-
|
117
|
-
export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
|
118
|
-
|
119
|
-
/**
|
120
|
-
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
121
|
-
* package:
|
122
|
-
* - style attributes are applied directly on DOM to avoid re-renders
|
123
|
-
* - refs changes and resolution is handled properly without re-renders
|
124
|
-
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
125
|
-
* to avoid focus jumps
|
126
|
-
*/
|
127
|
-
export declare function usePopper(options?: PopperOptions): {
|
128
|
-
targetRef: React_2.MutableRefObject<any>;
|
129
|
-
containerRef: React_2.MutableRefObject<any>;
|
130
|
-
arrowRef: React_2.MutableRefObject<any>;
|
131
|
-
};
|
132
|
-
|
133
|
-
/**
|
134
|
-
* A state hook that manages a popper virtual element from mouseevents.
|
135
|
-
* Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
|
136
|
-
* React synthetic events are not persisted by this hook
|
137
|
-
*
|
138
|
-
* @param initialState - initializes a user provided state similare to useState
|
139
|
-
* @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
|
140
|
-
*/
|
141
|
-
export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
|
142
|
-
|
143
|
-
export { }
|
@@ -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,68 +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
|
-
updatePosition: () => void;
|
16
|
-
};
|
17
|
-
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
18
|
-
export interface PositioningProps {
|
19
|
-
/** Alignment for the component. Only has an effect if used with the @see position option */
|
20
|
-
align?: Alignment;
|
21
|
-
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
22
|
-
flipBoundary?: Boundary;
|
23
|
-
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
24
|
-
overflowBoundary?: Boundary;
|
25
|
-
/** An imperative handle to Popper methods. */
|
26
|
-
popperRef?: React.Ref<PopperRefHandle>;
|
27
|
-
/**
|
28
|
-
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
29
|
-
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
30
|
-
* and 'start' | 'end' respectively),
|
31
|
-
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
32
|
-
*/
|
33
|
-
position?: Position;
|
34
|
-
/**
|
35
|
-
* Lets you displace a popper element from its reference element.
|
36
|
-
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
37
|
-
* position according to some custom logic.
|
38
|
-
*/
|
39
|
-
offset?: Offset;
|
40
|
-
/**
|
41
|
-
* Defines padding between the corner of the popup element and the arrow.
|
42
|
-
* Use to prevent the arrow from overlapping a rounded corner, for example.
|
43
|
-
*/
|
44
|
-
arrowPadding?: number;
|
45
|
-
/**
|
46
|
-
* Applies max-height and max-width on popper to fit it within the available space in viewport.
|
47
|
-
* true enables this for both width and height when overflow happens.
|
48
|
-
* 'always' applies `max-height`/`max-width` regardless of overflow.
|
49
|
-
* 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
|
50
|
-
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
51
|
-
*/
|
52
|
-
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
|
-
/**
|
58
|
-
* Modifies position and alignment to cover the target
|
59
|
-
*/
|
60
|
-
coverTarget?: boolean;
|
61
|
-
/**
|
62
|
-
* Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
|
63
|
-
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
64
|
-
*/
|
65
|
-
pinned?: boolean;
|
66
|
-
}
|
67
|
-
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
|
-
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
package/lib/usePopper.d.ts
DELETED
@@ -1,35 +0,0 @@
|
|
1
|
-
import * as PopperJs from '@popperjs/core';
|
2
|
-
import * as React from 'react';
|
3
|
-
import type { PositioningProps } from './types';
|
4
|
-
interface PopperOptions extends PositioningProps {
|
5
|
-
/**
|
6
|
-
* If false, delays Popper's creation.
|
7
|
-
* @default true
|
8
|
-
*/
|
9
|
-
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
|
-
}
|
22
|
-
/**
|
23
|
-
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
24
|
-
* package:
|
25
|
-
* - style attributes are applied directly on DOM to avoid re-renders
|
26
|
-
* - refs changes and resolution is handled properly without re-renders
|
27
|
-
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
28
|
-
* to avoid focus jumps
|
29
|
-
*/
|
30
|
-
export declare function usePopper(options?: PopperOptions): {
|
31
|
-
targetRef: React.MutableRefObject<any>;
|
32
|
-
containerRef: React.MutableRefObject<any>;
|
33
|
-
arrowRef: React.MutableRefObject<any>;
|
34
|
-
};
|
35
|
-
export {};
|