@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
@@ -17,35 +17,41 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
17
17
|
* ref.current = 1;
|
18
18
|
* // prints 0 -> 1
|
19
19
|
*/
|
20
|
+
|
20
21
|
export function useCallbackRef(initialValue, callback, skipInitialResolve) {
|
21
|
-
|
22
|
-
|
23
|
-
|
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
|
-
|
22
|
+
const isFirst = React.useRef(true);
|
23
|
+
const [ref] = React.useState(() => ({
|
24
|
+
// value
|
25
|
+
value: initialValue,
|
26
|
+
// last callback
|
27
|
+
callback,
|
28
|
+
// "memoized" public interface
|
29
|
+
facade: {
|
30
|
+
get current() {
|
31
|
+
return ref.value;
|
32
|
+
},
|
33
|
+
|
34
|
+
set current(value) {
|
35
|
+
const last = ref.value;
|
36
|
+
|
37
|
+
if (last !== value) {
|
38
|
+
ref.value = value;
|
39
|
+
|
40
|
+
if (skipInitialResolve && isFirst.current) {
|
41
|
+
return;
|
42
|
+
}
|
43
|
+
|
44
|
+
ref.callback(value, last);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
}
|
49
|
+
}));
|
50
|
+
useIsomorphicLayoutEffect(() => {
|
51
|
+
isFirst.current = false;
|
52
|
+
}, []); // update callback
|
53
|
+
|
54
|
+
ref.callback = callback;
|
55
|
+
return ref.facade;
|
50
56
|
}
|
51
57
|
//# sourceMappingURL=useCallbackRef.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;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,yBAAyB,CAAC,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD","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/"}
|
@@ -0,0 +1,100 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
7
|
+
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
+
/**
|
12
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
13
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
14
|
+
*
|
15
|
+
* ```ts
|
16
|
+
* makeStyles({
|
17
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
18
|
+
*
|
19
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
20
|
+
* mediumArrow: createArrowHeightStyles(4),
|
21
|
+
* smallArrow: createArrowHeightStyles(2),
|
22
|
+
* })
|
23
|
+
* ...
|
24
|
+
*
|
25
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
26
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
27
|
+
* styles.arrowWithoutSize,
|
28
|
+
* state.smallArrow && styles.smallArrow,
|
29
|
+
* state.mediumArrow && styles.mediumArrow,
|
30
|
+
* )
|
31
|
+
* ```
|
32
|
+
*/
|
33
|
+
|
34
|
+
|
35
|
+
function createArrowStyles(options) {
|
36
|
+
const {
|
37
|
+
arrowHeight,
|
38
|
+
borderWidth = '1px',
|
39
|
+
borderStyle = 'solid',
|
40
|
+
borderColor = react_theme_1.tokens.colorTransparentStroke
|
41
|
+
} = options;
|
42
|
+
return {
|
43
|
+
position: 'absolute',
|
44
|
+
backgroundColor: 'inherit',
|
45
|
+
visibility: 'hidden',
|
46
|
+
zIndex: -1,
|
47
|
+
...(arrowHeight && createArrowHeightStyles(arrowHeight)),
|
48
|
+
':before': {
|
49
|
+
content: '""',
|
50
|
+
visibility: 'visible',
|
51
|
+
position: 'absolute',
|
52
|
+
boxSizing: 'border-box',
|
53
|
+
width: 'inherit',
|
54
|
+
height: 'inherit',
|
55
|
+
backgroundColor: 'inherit',
|
56
|
+
...react_1.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
57
|
+
...react_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
58
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall,
|
59
|
+
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
60
|
+
},
|
61
|
+
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
62
|
+
':global([data-popper-placement^="top"])': {
|
63
|
+
bottom: `-${borderWidth}`,
|
64
|
+
'--angle': '0'
|
65
|
+
},
|
66
|
+
':global([data-popper-placement^="right"])': {
|
67
|
+
left: `-${borderWidth} /* @noflip */`,
|
68
|
+
'--angle': '90deg'
|
69
|
+
},
|
70
|
+
':global([data-popper-placement^="bottom"])': {
|
71
|
+
top: `-${borderWidth}`,
|
72
|
+
'--angle': '180deg'
|
73
|
+
},
|
74
|
+
':global([data-popper-placement^="left"])': {
|
75
|
+
right: `-${borderWidth} /* @noflip */`,
|
76
|
+
'--angle': '270deg'
|
77
|
+
}
|
78
|
+
};
|
79
|
+
}
|
80
|
+
|
81
|
+
exports.createArrowStyles = createArrowStyles;
|
82
|
+
/**
|
83
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
84
|
+
*
|
85
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
86
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
87
|
+
*/
|
88
|
+
|
89
|
+
function createArrowHeightStyles(arrowHeight) {
|
90
|
+
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
91
|
+
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
92
|
+
const edgeLength = `${1.414 * arrowHeight}px`;
|
93
|
+
return {
|
94
|
+
width: edgeLength,
|
95
|
+
height: edgeLength
|
96
|
+
};
|
97
|
+
}
|
98
|
+
|
99
|
+
exports.createArrowHeightStyles = createArrowHeightStyles;
|
100
|
+
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;AACH,SAAgB,iBAAhB,CAAkC,OAAlC,EAAmE;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,aAAA,CAAA,MAAA,CAAO;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,OAAA,CAAA,UAAA,CAAW,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,OAAA,CAAA,UAAA,CAAW,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,aAAA,CAAA,MAAA,CAAO,iBAdvB;AAeT,MAAA,SAAS,EAAE;AAfF,KARN;AA0BL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KA3BtC;AA+BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA/BxC;AAmCL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KAnCzC;AAuCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAvCvC,GAAP;AA4CD;;AApDD,OAAA,CAAA,iBAAA,GAAA,iBAAA;AAsDA;;;;;AAKG;;AACH,SAAgB,uBAAhB,CAAwC,WAAxC,EAA2D;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD;;AALD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n ':before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"sourceRoot":"../src/"}
|
@@ -1,28 +1,37 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.createVirtualElementFromClick = void 0;
|
4
7
|
/**
|
5
8
|
* Creates a virtual element based on the position of a click event
|
6
9
|
* Can be used as a target for popper in scenarios such as context menus
|
7
10
|
*/
|
11
|
+
|
8
12
|
function createVirtualElementFromClick(nativeEvent) {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
left: left,
|
16
|
-
top: top,
|
17
|
-
right: right,
|
18
|
-
bottom: bottom,
|
19
|
-
height: 1,
|
20
|
-
width: 1,
|
21
|
-
};
|
22
|
-
}
|
13
|
+
const left = nativeEvent.clientX;
|
14
|
+
const top = nativeEvent.clientY;
|
15
|
+
const right = left + 1;
|
16
|
+
const bottom = top + 1;
|
17
|
+
|
18
|
+
function getBoundingClientRect() {
|
23
19
|
return {
|
24
|
-
|
20
|
+
left,
|
21
|
+
top,
|
22
|
+
right,
|
23
|
+
bottom,
|
24
|
+
x: left,
|
25
|
+
y: top,
|
26
|
+
height: 1,
|
27
|
+
width: 1
|
25
28
|
};
|
29
|
+
}
|
30
|
+
|
31
|
+
return {
|
32
|
+
getBoundingClientRect
|
33
|
+
};
|
26
34
|
}
|
35
|
+
|
27
36
|
exports.createVirtualElementFromClick = createVirtualElementFromClick;
|
28
37
|
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;;AACH,SAAgB,6BAAhB,CAA8C,WAA9C,EAAqE;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAKL,MAAA,CAAC,EAAE,IALE;AAML,MAAA,CAAC,EAAE,GANE;AAOL,MAAA,MAAM,EAAE,CAPH;AAQL,MAAA,KAAK,EAAE;AARF,KAAP;AAUD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AAtBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
@@ -1,12 +1,64 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
var
|
9
|
-
|
10
|
-
Object.defineProperty(exports, "
|
11
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePositioningMouseTarget = exports.usePositioning = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
|
7
|
+
|
8
|
+
var createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
|
9
|
+
|
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 usePositioning_1 = /*#__PURE__*/require("./usePositioning");
|
33
|
+
|
34
|
+
Object.defineProperty(exports, "usePositioning", {
|
35
|
+
enumerable: true,
|
36
|
+
get: function () {
|
37
|
+
return usePositioning_1.usePositioning;
|
38
|
+
}
|
39
|
+
});
|
40
|
+
|
41
|
+
var usePositioningMouseTarget_1 = /*#__PURE__*/require("./usePositioningMouseTarget");
|
42
|
+
|
43
|
+
Object.defineProperty(exports, "usePositioningMouseTarget", {
|
44
|
+
enumerable: true,
|
45
|
+
get: function () {
|
46
|
+
return usePositioningMouseTarget_1.usePositioningMouseTarget;
|
47
|
+
}
|
48
|
+
});
|
49
|
+
|
50
|
+
var index_1 = /*#__PURE__*/require("./utils/index");
|
51
|
+
|
52
|
+
Object.defineProperty(exports, "resolvePositioningShorthand", {
|
53
|
+
enumerable: true,
|
54
|
+
get: function () {
|
55
|
+
return index_1.resolvePositioningShorthand;
|
56
|
+
}
|
57
|
+
});
|
58
|
+
Object.defineProperty(exports, "mergeArrowOffset", {
|
59
|
+
enumerable: true,
|
60
|
+
get: function () {
|
61
|
+
return index_1.mergeArrowOffset;
|
62
|
+
}
|
63
|
+
});
|
12
64
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,cAAA;AAAc;AAAd,CAAA;;AACT,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,2BAAA,CAAA,yBAAA;AAAyB;AAAzB,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 { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n} from './types';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.isIntersectingModifier = void 0;
|
7
|
+
|
8
|
+
const core_1 = /*#__PURE__*/require("@popperjs/core");
|
9
|
+
|
10
|
+
exports.isIntersectingModifier = {
|
11
|
+
name: 'is-intersecting-modifier',
|
12
|
+
enabled: true,
|
13
|
+
phase: 'main',
|
14
|
+
requires: ['preventOverflow'],
|
15
|
+
fn: ({
|
16
|
+
state,
|
17
|
+
name
|
18
|
+
}) => {
|
19
|
+
const popperRect = state.rects.popper;
|
20
|
+
const popperAltOverflow = core_1.detectOverflow(state, {
|
21
|
+
altBoundary: true
|
22
|
+
});
|
23
|
+
const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;
|
24
|
+
const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;
|
25
|
+
const isIntersecting = isIntersectingTop || isIntersectingBottom;
|
26
|
+
state.modifiersData[name] = {
|
27
|
+
isIntersecting
|
28
|
+
};
|
29
|
+
state.attributes.popper = { ...state.attributes.popper,
|
30
|
+
'data-popper-is-intersecting': isIntersecting
|
31
|
+
};
|
32
|
+
}
|
33
|
+
};
|
34
|
+
//# sourceMappingURL=isIntersectingModifier.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEa,OAAA,CAAA,sBAAA,GAAiD;AAC5D,EAAA,IAAI,EAAE,0BADsD;AAE5D,EAAA,OAAO,EAAE,IAFmD;AAG5D,EAAA,KAAK,EAAE,MAHqD;AAI5D,EAAA,QAAQ,EAAE,CAAC,iBAAD,CAJkD;AAK5D,EAAA,EAAE,EAAE,CAAC;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAD,KAAoB;AACtB,UAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;AACA,UAAM,iBAAiB,GAAG,MAAA,CAAA,cAAA,CAAe,KAAf,EAAsB;AAAE,MAAA,WAAW,EAAE;AAAf,KAAtB,CAA1B;AAEA,UAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;AACA,UAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;AAEA,UAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;AAEA,IAAA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;AAC1B,MAAA;AAD0B,KAA5B;AAGA,IAAA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;AAExB,qCAA+B;AAFP,KAA1B;AAID;AArB2D,CAAjD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n name: 'is-intersecting-modifier',\n enabled: true,\n phase: 'main',\n requires: ['preventOverflow'],\n fn: ({ state, name }) => {\n const popperRect = state.rects.popper;\n const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n state.modifiersData[name] = {\n isIntersecting,\n };\n state.attributes.popper = {\n ...state.attributes.popper,\n 'data-popper-is-intersecting': isIntersecting,\n };\n },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/types.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|