@fluentui/react-positioning 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlyd80c90385320220216.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +73 -14
- package/CHANGELOG.md +23 -9
- package/dist/react-positioning.d.ts +95 -45
- package/lib/createArrowStyles.d.ts +46 -9
- package/lib/createArrowStyles.js +42 -28
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/types.d.ts +28 -7
- package/lib/usePopper.d.ts +2 -14
- package/lib/usePopper.js +40 -34
- package/lib/usePopper.js.map +1 -1
- package/lib-commonjs/createArrowStyles.d.ts +46 -9
- package/lib-commonjs/createArrowStyles.js +46 -29
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/types.d.ts +28 -7
- package/lib-commonjs/usePopper.d.ts +2 -14
- package/lib-commonjs/usePopper.js +41 -35
- package/lib-commonjs/usePopper.js.map +1 -1
- package/package.json +6 -7
package/lib/types.d.ts
CHANGED
@@ -12,18 +12,25 @@ export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
|
|
12
12
|
export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
|
13
13
|
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
14
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
|
+
*/
|
15
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) => void;
|
16
25
|
};
|
17
26
|
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
18
|
-
export interface
|
27
|
+
export interface PopperOptions {
|
19
28
|
/** Alignment for the component. Only has an effect if used with the @see position option */
|
20
29
|
align?: Alignment;
|
21
30
|
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
22
31
|
flipBoundary?: Boundary;
|
23
32
|
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
24
33
|
overflowBoundary?: Boundary;
|
25
|
-
/** An imperative handle to Popper methods. */
|
26
|
-
popperRef?: React.Ref<PopperRefHandle>;
|
27
34
|
/**
|
28
35
|
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
29
36
|
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
@@ -31,6 +38,11 @@ export interface PositioningProps {
|
|
31
38
|
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
32
39
|
*/
|
33
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;
|
34
46
|
/**
|
35
47
|
* Lets you displace a popper element from its reference element.
|
36
48
|
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
@@ -50,10 +62,6 @@ export interface PositioningProps {
|
|
50
62
|
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
51
63
|
*/
|
52
64
|
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
65
|
/**
|
58
66
|
* Modifies position and alignment to cover the target
|
59
67
|
*/
|
@@ -63,6 +71,19 @@ export interface PositioningProps {
|
|
63
71
|
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
64
72
|
*/
|
65
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;
|
66
87
|
}
|
67
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';
|
68
89
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
package/lib/usePopper.d.ts
CHANGED
@@ -1,23 +1,11 @@
|
|
1
|
-
import * as PopperJs from '@popperjs/core';
|
2
1
|
import * as React from 'react';
|
3
2
|
import type { PositioningProps } from './types';
|
4
|
-
interface
|
3
|
+
interface UsePopperOptions extends PositioningProps {
|
5
4
|
/**
|
6
5
|
* If false, delays Popper's creation.
|
7
6
|
* @default true
|
8
7
|
*/
|
9
8
|
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
9
|
}
|
22
10
|
/**
|
23
11
|
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
@@ -27,7 +15,7 @@ interface PopperOptions extends PositioningProps {
|
|
27
15
|
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
28
16
|
* to avoid focus jumps
|
29
17
|
*/
|
30
|
-
export declare function usePopper(options?:
|
18
|
+
export declare function usePopper(options?: UsePopperOptions): {
|
31
19
|
targetRef: React.MutableRefObject<any>;
|
32
20
|
containerRef: React.MutableRefObject<any>;
|
33
21
|
arrowRef: React.MutableRefObject<any>;
|
package/lib/usePopper.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
|
2
2
|
import { useFluent } from '@fluentui/react-shared-contexts';
|
3
|
-
import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement } from './utils/index';
|
4
3
|
import * as PopperJs from '@popperjs/core';
|
5
|
-
import * as React from 'react';
|
4
|
+
import * as React from 'react';
|
5
|
+
import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement } from './utils/index'; //
|
6
6
|
// Dev utils to detect if nodes have "autoFocus" props.
|
7
7
|
//
|
8
8
|
|
@@ -38,27 +38,22 @@ function hasAutofocusFilter(node) {
|
|
38
38
|
|
39
39
|
function usePopperOptions(options, popperOriginalPositionRef) {
|
40
40
|
const {
|
41
|
+
align,
|
41
42
|
arrowPadding,
|
42
43
|
autoSize,
|
43
44
|
coverTarget,
|
44
45
|
flipBoundary,
|
45
46
|
offset,
|
46
|
-
onStateUpdate,
|
47
47
|
overflowBoundary,
|
48
|
+
pinned,
|
49
|
+
position,
|
50
|
+
positionFixed,
|
48
51
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
49
|
-
unstable_disableTether
|
50
|
-
pinned
|
52
|
+
unstable_disableTether
|
51
53
|
} = options;
|
52
54
|
const isRtl = useFluent().dir === 'rtl';
|
53
|
-
const placement = getPlacement(
|
54
|
-
const strategy =
|
55
|
-
const handleStateUpdate = useEventCallback(({
|
56
|
-
state
|
57
|
-
}) => {
|
58
|
-
if (onStateUpdate) {
|
59
|
-
onStateUpdate(state);
|
60
|
-
}
|
61
|
-
});
|
55
|
+
const placement = getPlacement(align, position, isRtl);
|
56
|
+
const strategy = positionFixed ? 'fixed' : 'absolute';
|
62
57
|
const offsetModifier = React.useMemo(() => offset ? {
|
63
58
|
name: 'offset',
|
64
59
|
options: {
|
@@ -150,11 +145,6 @@ function usePopperOptions(options, popperOriginalPositionRef) {
|
|
150
145
|
altBoundary: true,
|
151
146
|
boundary: getBoundary(container, overflowBoundary)
|
152
147
|
}
|
153
|
-
}, {
|
154
|
-
name: 'onUpdate',
|
155
|
-
enabled: true,
|
156
|
-
phase: 'afterWrite',
|
157
|
-
fn: handleStateUpdate
|
158
148
|
}, {
|
159
149
|
// Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
|
160
150
|
// popper-maxsize-modifier only calculates the max sizes.
|
@@ -250,14 +240,11 @@ function usePopperOptions(options, popperOriginalPositionRef) {
|
|
250
240
|
const popperOptions = {
|
251
241
|
modifiers,
|
252
242
|
placement,
|
253
|
-
strategy
|
254
|
-
onFirstUpdate: state => handleStateUpdate({
|
255
|
-
state
|
256
|
-
})
|
243
|
+
strategy
|
257
244
|
};
|
258
245
|
return popperOptions;
|
259
246
|
}, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
|
260
|
-
|
247
|
+
popperOriginalPositionRef]);
|
261
248
|
}
|
262
249
|
/**
|
263
250
|
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
@@ -278,13 +265,11 @@ export function usePopper(options = {}) {
|
|
278
265
|
const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
|
279
266
|
const popperInstanceRef = React.useRef(null);
|
280
267
|
const handlePopperUpdate = useEventCallback(() => {
|
281
|
-
var _a;
|
268
|
+
var _a, _b;
|
282
269
|
|
283
270
|
(_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
284
271
|
popperInstanceRef.current = null;
|
285
|
-
const
|
286
|
-
target = targetRef.current
|
287
|
-
} = options;
|
272
|
+
const target = (_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current;
|
288
273
|
let popperInstance = null;
|
289
274
|
|
290
275
|
if (canUseDOM() && enabled) {
|
@@ -335,14 +320,36 @@ export function usePopper(options = {}) {
|
|
335
320
|
|
336
321
|
const targetRef = useCallbackRef(null, handlePopperUpdate, true);
|
337
322
|
const containerRef = useCallbackRef(null, handlePopperUpdate, true);
|
338
|
-
const arrowRef = useCallbackRef(null, handlePopperUpdate, true);
|
323
|
+
const arrowRef = useCallbackRef(null, handlePopperUpdate, true); // Stores external target from options.target or setTarget
|
324
|
+
|
325
|
+
const overrideTargetRef = useCallbackRef(null, handlePopperUpdate, true);
|
339
326
|
React.useImperativeHandle(options.popperRef, () => ({
|
340
327
|
updatePosition: () => {
|
341
328
|
var _a;
|
342
329
|
|
343
330
|
(_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
|
331
|
+
},
|
332
|
+
setTarget: target => {
|
333
|
+
if (options.target && process.env.NODE_ENV !== 'production') {
|
334
|
+
const err = new Error(); // eslint-disable-next-line no-console
|
335
|
+
|
336
|
+
console.warn('Imperative setTarget should not be used at the same time as target option'); // eslint-disable-next-line no-console
|
337
|
+
|
338
|
+
console.warn(err.stack);
|
339
|
+
}
|
340
|
+
|
341
|
+
overrideTargetRef.current = target;
|
344
342
|
}
|
345
|
-
}),
|
343
|
+
}), // Missing deps:
|
344
|
+
// options.target - only used for a runtime warning
|
345
|
+
// targetRef - Stable between renders
|
346
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
347
|
+
[]);
|
348
|
+
useIsomorphicLayoutEffect(() => {
|
349
|
+
if (options.target) {
|
350
|
+
overrideTargetRef.current = options.target;
|
351
|
+
}
|
352
|
+
}, [options.target, overrideTargetRef]);
|
346
353
|
useIsomorphicLayoutEffect(() => {
|
347
354
|
handlePopperUpdate();
|
348
355
|
return () => {
|
@@ -351,15 +358,14 @@ export function usePopper(options = {}) {
|
|
351
358
|
(_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
352
359
|
popperInstanceRef.current = null;
|
353
360
|
};
|
354
|
-
}, [handlePopperUpdate, options.enabled
|
361
|
+
}, [handlePopperUpdate, options.enabled]);
|
355
362
|
useIsomorphicLayoutEffect(() => {
|
356
|
-
var _a;
|
363
|
+
var _a, _b;
|
357
364
|
|
358
365
|
if (!isFirstMount) {
|
359
|
-
(_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(
|
366
|
+
(_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions((_b = overrideTargetRef.current) !== null && _b !== void 0 ? _b : targetRef.current, containerRef.current, arrowRef.current));
|
360
367
|
}
|
361
368
|
}, // Missing deps:
|
362
|
-
// options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
|
363
369
|
// isFirstMount - Should never change after mount
|
364
370
|
// arrowRef, containerRef, targetRef - Stable between renders
|
365
371
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
package/lib/usePopper.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/usePopper.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAT,EAA2B,yBAA3B,EAAsD,aAAtD,EAAqE,SAArE,QAAsF,2BAAtF;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,eADF,EAEE,gBAFF,EAGE,YAHF,EAIE,qBAJF,EAKE,WALF,EAME,cANF,EAOE,gBAPF,QAQO,eARP
|
1
|
+
{"version":3,"sources":["../src/usePopper.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -1,27 +1,64 @@
|
|
1
|
-
import type {
|
2
|
-
|
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
|
+
};
|
3
32
|
/**
|
4
33
|
* Helper that creates a makeStyles rule for an arrow element.
|
5
34
|
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
6
35
|
*
|
7
36
|
* ```ts
|
8
37
|
* makeStyles({
|
9
|
-
* arrowWithSize: createArrowStyles(
|
38
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
10
39
|
*
|
11
|
-
* arrowWithoutSize: createArrowStyles(),
|
12
|
-
* mediumArrow:
|
13
|
-
* smallArrow:
|
40
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
41
|
+
* mediumArrow: createArrowHeightStyles(4),
|
42
|
+
* smallArrow: createArrowHeightStyles(2),
|
14
43
|
* })
|
15
44
|
* ...
|
16
45
|
*
|
17
|
-
* state.arrowWithSize.className = styles.arrowWithSize
|
46
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
18
47
|
* state.arrowWithoutSize.className = mergeClasses(
|
19
48
|
* styles.arrowWithoutSize,
|
20
49
|
* state.smallArrow && styles.smallArrow,
|
21
50
|
* state.mediumArrow && styles.mediumArrow,
|
22
51
|
* )
|
23
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.
|
24
57
|
*
|
25
|
-
*
|
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.
|
26
60
|
*/
|
27
|
-
export declare function
|
61
|
+
export declare function createArrowHeightStyles(arrowHeight: number): {
|
62
|
+
width: string;
|
63
|
+
height: string;
|
64
|
+
};
|
@@ -3,81 +3,98 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.createArrowStyles = void 0;
|
6
|
+
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
7
7
|
|
8
|
-
const
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
9
11
|
/**
|
10
12
|
* Helper that creates a makeStyles rule for an arrow element.
|
11
13
|
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
12
14
|
*
|
13
15
|
* ```ts
|
14
16
|
* makeStyles({
|
15
|
-
* arrowWithSize: createArrowStyles(
|
17
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
16
18
|
*
|
17
|
-
* arrowWithoutSize: createArrowStyles(),
|
18
|
-
* mediumArrow:
|
19
|
-
* smallArrow:
|
19
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
20
|
+
* mediumArrow: createArrowHeightStyles(4),
|
21
|
+
* smallArrow: createArrowHeightStyles(2),
|
20
22
|
* })
|
21
23
|
* ...
|
22
24
|
*
|
23
|
-
* state.arrowWithSize.className = styles.arrowWithSize
|
25
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
24
26
|
* state.arrowWithoutSize.className = mergeClasses(
|
25
27
|
* styles.arrowWithoutSize,
|
26
28
|
* state.smallArrow && styles.smallArrow,
|
27
29
|
* state.mediumArrow && styles.mediumArrow,
|
28
30
|
* )
|
29
31
|
* ```
|
30
|
-
*
|
31
|
-
* @param size - dimensions of the square arrow element in pixels.
|
32
32
|
*/
|
33
33
|
|
34
34
|
|
35
|
-
function createArrowStyles(
|
36
|
-
|
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 {
|
37
43
|
position: 'absolute',
|
38
44
|
backgroundColor: 'inherit',
|
39
45
|
visibility: 'hidden',
|
40
46
|
zIndex: -1,
|
41
|
-
...(
|
42
|
-
aspectRatio: '1',
|
43
|
-
width: `${size}px`
|
44
|
-
}),
|
47
|
+
...(arrowHeight && createArrowHeightStyles(arrowHeight)),
|
45
48
|
':before': {
|
46
49
|
content: '""',
|
47
|
-
|
50
|
+
visibility: 'visible',
|
48
51
|
position: 'absolute',
|
52
|
+
boxSizing: 'border-box',
|
49
53
|
width: 'inherit',
|
50
54
|
height: 'inherit',
|
51
55
|
backgroundColor: 'inherit',
|
52
|
-
|
53
|
-
|
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,
|
54
59
|
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
55
60
|
},
|
56
|
-
':global([data-popper-placement])': {
|
57
|
-
':before': { // Special border for High Contrast mode
|
58
|
-
...react_make_styles_1.shorthands.borderRight('1px', 'solid', 'transparent'),
|
59
|
-
...react_make_styles_1.shorthands.borderBottom('1px', 'solid', 'transparent')
|
60
|
-
}
|
61
|
-
},
|
62
61
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
63
62
|
':global([data-popper-placement^="top"])': {
|
64
|
-
bottom:
|
63
|
+
bottom: `-${borderWidth}`,
|
65
64
|
'--angle': '0'
|
66
65
|
},
|
67
66
|
':global([data-popper-placement^="right"])': {
|
68
|
-
left:
|
67
|
+
left: `-${borderWidth} /* @noflip */`,
|
69
68
|
'--angle': '90deg'
|
70
69
|
},
|
71
70
|
':global([data-popper-placement^="bottom"])': {
|
72
|
-
top:
|
71
|
+
top: `-${borderWidth}`,
|
73
72
|
'--angle': '180deg'
|
74
73
|
},
|
75
74
|
':global([data-popper-placement^="left"])': {
|
76
|
-
right:
|
75
|
+
right: `-${borderWidth} /* @noflip */`,
|
77
76
|
'--angle': '270deg'
|
78
77
|
}
|
79
|
-
}
|
78
|
+
};
|
80
79
|
}
|
81
80
|
|
82
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;
|
83
100
|
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,
|
1
|
+
{"version":3,"sources":["../src/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","sourceRoot":""}
|
package/lib-commonjs/types.d.ts
CHANGED
@@ -12,18 +12,25 @@ export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
|
|
12
12
|
export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
|
13
13
|
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
14
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
|
+
*/
|
15
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) => void;
|
16
25
|
};
|
17
26
|
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
18
|
-
export interface
|
27
|
+
export interface PopperOptions {
|
19
28
|
/** Alignment for the component. Only has an effect if used with the @see position option */
|
20
29
|
align?: Alignment;
|
21
30
|
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
22
31
|
flipBoundary?: Boundary;
|
23
32
|
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
24
33
|
overflowBoundary?: Boundary;
|
25
|
-
/** An imperative handle to Popper methods. */
|
26
|
-
popperRef?: React.Ref<PopperRefHandle>;
|
27
34
|
/**
|
28
35
|
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
29
36
|
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
@@ -31,6 +38,11 @@ export interface PositioningProps {
|
|
31
38
|
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
32
39
|
*/
|
33
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;
|
34
46
|
/**
|
35
47
|
* Lets you displace a popper element from its reference element.
|
36
48
|
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
@@ -50,10 +62,6 @@ export interface PositioningProps {
|
|
50
62
|
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
51
63
|
*/
|
52
64
|
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
65
|
/**
|
58
66
|
* Modifies position and alignment to cover the target
|
59
67
|
*/
|
@@ -63,6 +71,19 @@ export interface PositioningProps {
|
|
63
71
|
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
64
72
|
*/
|
65
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;
|
66
87
|
}
|
67
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';
|
68
89
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
@@ -1,23 +1,11 @@
|
|
1
|
-
import * as PopperJs from '@popperjs/core';
|
2
1
|
import * as React from 'react';
|
3
2
|
import type { PositioningProps } from './types';
|
4
|
-
interface
|
3
|
+
interface UsePopperOptions extends PositioningProps {
|
5
4
|
/**
|
6
5
|
* If false, delays Popper's creation.
|
7
6
|
* @default true
|
8
7
|
*/
|
9
8
|
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
9
|
}
|
22
10
|
/**
|
23
11
|
* Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
|
@@ -27,7 +15,7 @@ interface PopperOptions extends PositioningProps {
|
|
27
15
|
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
28
16
|
* to avoid focus jumps
|
29
17
|
*/
|
30
|
-
export declare function usePopper(options?:
|
18
|
+
export declare function usePopper(options?: UsePopperOptions): {
|
31
19
|
targetRef: React.MutableRefObject<any>;
|
32
20
|
containerRef: React.MutableRefObject<any>;
|
33
21
|
arrowRef: React.MutableRefObject<any>;
|