@workday/canvas-kit-react 8.6.11 → 8.6.12
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/dist/commonjs/popup/lib/Popper.d.ts +4 -4
- package/dist/commonjs/popup/lib/Popper.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/Popper.js +2 -2
- package/dist/commonjs/popup/lib/fallbackPlacements.d.ts +3 -3
- package/dist/commonjs/popup/lib/fallbackPlacements.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/fallbackPlacements.js +3 -22
- package/dist/es6/popup/lib/Popper.d.ts +4 -4
- package/dist/es6/popup/lib/Popper.d.ts.map +1 -1
- package/dist/es6/popup/lib/Popper.js +2 -2
- package/dist/es6/popup/lib/fallbackPlacements.d.ts +3 -3
- package/dist/es6/popup/lib/fallbackPlacements.d.ts.map +1 -1
- package/dist/es6/popup/lib/fallbackPlacements.js +3 -3
- package/package.json +3 -3
- package/popup/lib/Popper.tsx +6 -6
- package/popup/lib/fallbackPlacements.ts +16 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
3
|
-
export declare type Placement = `${
|
|
4
|
-
export declare type PopperOptions =
|
|
2
|
+
import { Placement as PopperJSPlacement, Options, Instance } from '@popperjs/core';
|
|
3
|
+
export declare type Placement = `${PopperJSPlacement}`;
|
|
4
|
+
export declare type PopperOptions = Options;
|
|
5
5
|
export declare const defaultFallbackPlacements: Placement[];
|
|
6
6
|
export interface PopperProps {
|
|
7
7
|
/**
|
|
@@ -69,7 +69,7 @@ export interface PopperProps {
|
|
|
69
69
|
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
70
70
|
* instance like `update`.
|
|
71
71
|
*/
|
|
72
|
-
popperInstanceRef?: React.Ref<
|
|
72
|
+
popperInstanceRef?: React.Ref<Instance>;
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
75
|
* A thin wrapper component around the Popper.js positioning engine. For reference:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAA0B,MAAM,gBAAgB,CAAC;AAE3G,oBAAY,SAAS,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAC/C,oBAAY,aAAa,GAAG,OAAO,CAAC;AACpC,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
|
|
@@ -49,7 +49,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
49
49
|
exports.Popper = exports.defaultFallbackPlacements = void 0;
|
|
50
50
|
var React = __importStar(require("react"));
|
|
51
51
|
var ReactDOM = __importStar(require("react-dom"));
|
|
52
|
-
var
|
|
52
|
+
var core_1 = require("@popperjs/core");
|
|
53
53
|
exports.defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
|
|
54
54
|
var hooks_1 = require("./hooks");
|
|
55
55
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
@@ -123,7 +123,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
|
|
|
123
123
|
return undefined;
|
|
124
124
|
}
|
|
125
125
|
if (stackRef.current) {
|
|
126
|
-
var instance_1 =
|
|
126
|
+
var instance_1 = core_1.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
|
|
127
127
|
placementModifier,
|
|
128
128
|
__assign(__assign({}, fallbackPlacements_1.fallbackPlacementsModifier), { options: {
|
|
129
129
|
fallbackPlacements: fallbackPlacements,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare type Placement =
|
|
1
|
+
import { Placement as PopperJSPlacement, Modifier } from '@popperjs/core';
|
|
2
|
+
export declare type Placement = PopperJSPlacement;
|
|
3
3
|
export declare type Options = {
|
|
4
4
|
fallbackPlacements: Placement[];
|
|
5
5
|
};
|
|
6
6
|
declare const name = "fallbackModifier";
|
|
7
|
-
export declare const fallbackPlacementsModifier:
|
|
7
|
+
export declare const fallbackPlacementsModifier: Modifier<typeof name, Options>;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=fallbackPlacements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,iBAAiB,EAK9B,QAAQ,EAET,MAAM,gBAAgB,CAAC;AAExB,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAyD1C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwBrE,CAAC"}
|
|
@@ -10,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
-
}) : (function(o, m, k, k2) {
|
|
17
|
-
if (k2 === undefined) k2 = k;
|
|
18
|
-
o[k2] = m[k];
|
|
19
|
-
}));
|
|
20
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
-
}) : function(o, v) {
|
|
23
|
-
o["default"] = v;
|
|
24
|
-
});
|
|
25
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
-
if (mod && mod.__esModule) return mod;
|
|
27
|
-
var result = {};
|
|
28
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
-
__setModuleDefault(result, mod);
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
13
|
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
33
14
|
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
|
|
34
15
|
to[j] = from[i];
|
|
@@ -36,7 +17,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
36
17
|
};
|
|
37
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
19
|
exports.fallbackPlacementsModifier = void 0;
|
|
39
|
-
var
|
|
20
|
+
var core_1 = require("@popperjs/core");
|
|
40
21
|
var getOppositePlacement = function (popperPlacement) {
|
|
41
22
|
var _a;
|
|
42
23
|
var _b = popperPlacement.split('-'), first = _b[0], second = _b[1];
|
|
@@ -59,7 +40,7 @@ var getOppositePlacement = function (popperPlacement) {
|
|
|
59
40
|
}
|
|
60
41
|
if (second) {
|
|
61
42
|
oppositePlacement =
|
|
62
|
-
(_a =
|
|
43
|
+
(_a = core_1.placements.find(function (placement) { return placement.includes(oppositePlacement + "-" + second); })) !== null && _a !== void 0 ? _a : oppositePlacement;
|
|
63
44
|
}
|
|
64
45
|
return oppositePlacement;
|
|
65
46
|
};
|
|
@@ -68,7 +49,7 @@ var choseAvailablePlacement = function (placements, state, preferredPlacement) {
|
|
|
68
49
|
return preferredPlacement;
|
|
69
50
|
}
|
|
70
51
|
var _a = state.rects, reference = _a.reference, popper = _a.popper;
|
|
71
|
-
var overflow =
|
|
52
|
+
var overflow = core_1.detectOverflow(__assign(__assign({}, state), { placement: placements[0] }));
|
|
72
53
|
var direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
|
|
73
54
|
var isOverflowed = (overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
|
|
74
55
|
(direction === 'horizontal'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
3
|
-
export declare type Placement = `${
|
|
4
|
-
export declare type PopperOptions =
|
|
2
|
+
import { Placement as PopperJSPlacement, Options, Instance } from '@popperjs/core';
|
|
3
|
+
export declare type Placement = `${PopperJSPlacement}`;
|
|
4
|
+
export declare type PopperOptions = Options;
|
|
5
5
|
export declare const defaultFallbackPlacements: Placement[];
|
|
6
6
|
export interface PopperProps {
|
|
7
7
|
/**
|
|
@@ -69,7 +69,7 @@ export interface PopperProps {
|
|
|
69
69
|
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
70
70
|
* instance like `update`.
|
|
71
71
|
*/
|
|
72
|
-
popperInstanceRef?: React.Ref<
|
|
72
|
+
popperInstanceRef?: React.Ref<Instance>;
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
75
|
* A thin wrapper component around the Popper.js positioning engine. For reference:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,OAAO,EAAE,QAAQ,EAA0B,MAAM,gBAAgB,CAAC;AAE3G,oBAAY,SAAS,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAC/C,oBAAY,aAAa,GAAG,OAAO,CAAC;AACpC,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
|
|
@@ -27,7 +27,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
27
27
|
};
|
|
28
28
|
import * as React from 'react';
|
|
29
29
|
import * as ReactDOM from 'react-dom';
|
|
30
|
-
import
|
|
30
|
+
import { createPopper } from '@popperjs/core';
|
|
31
31
|
export var defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
|
|
32
32
|
import { usePopupStack } from './hooks';
|
|
33
33
|
import { useLocalRef } from '@workday/canvas-kit-react/common';
|
|
@@ -101,7 +101,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
|
|
|
101
101
|
return undefined;
|
|
102
102
|
}
|
|
103
103
|
if (stackRef.current) {
|
|
104
|
-
var instance_1 =
|
|
104
|
+
var instance_1 = createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray([
|
|
105
105
|
placementModifier,
|
|
106
106
|
__assign(__assign({}, fallbackPlacementsModifier), { options: {
|
|
107
107
|
fallbackPlacements: fallbackPlacements,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare type Placement =
|
|
1
|
+
import { Placement as PopperJSPlacement, Modifier } from '@popperjs/core';
|
|
2
|
+
export declare type Placement = PopperJSPlacement;
|
|
3
3
|
export declare type Options = {
|
|
4
4
|
fallbackPlacements: Placement[];
|
|
5
5
|
};
|
|
6
6
|
declare const name = "fallbackModifier";
|
|
7
|
-
export declare const fallbackPlacementsModifier:
|
|
7
|
+
export declare const fallbackPlacementsModifier: Modifier<typeof name, Options>;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=fallbackPlacements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,iBAAiB,EAK9B,QAAQ,EAET,MAAM,gBAAgB,CAAC;AAExB,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAyD1C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwBrE,CAAC"}
|
|
@@ -14,7 +14,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
14
14
|
to[j] = from[i];
|
|
15
15
|
return to;
|
|
16
16
|
};
|
|
17
|
-
import
|
|
17
|
+
import { placements, detectOverflow, } from '@popperjs/core';
|
|
18
18
|
var getOppositePlacement = function (popperPlacement) {
|
|
19
19
|
var _a;
|
|
20
20
|
var _b = popperPlacement.split('-'), first = _b[0], second = _b[1];
|
|
@@ -37,7 +37,7 @@ var getOppositePlacement = function (popperPlacement) {
|
|
|
37
37
|
}
|
|
38
38
|
if (second) {
|
|
39
39
|
oppositePlacement =
|
|
40
|
-
(_a =
|
|
40
|
+
(_a = placements.find(function (placement) { return placement.includes(oppositePlacement + "-" + second); })) !== null && _a !== void 0 ? _a : oppositePlacement;
|
|
41
41
|
}
|
|
42
42
|
return oppositePlacement;
|
|
43
43
|
};
|
|
@@ -46,7 +46,7 @@ var choseAvailablePlacement = function (placements, state, preferredPlacement) {
|
|
|
46
46
|
return preferredPlacement;
|
|
47
47
|
}
|
|
48
48
|
var _a = state.rects, reference = _a.reference, popper = _a.popper;
|
|
49
|
-
var overflow =
|
|
49
|
+
var overflow = detectOverflow(__assign(__assign({}, state), { placement: placements[0] }));
|
|
50
50
|
var direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
|
|
51
51
|
var isOverflowed = (overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
|
|
52
52
|
(direction === 'horizontal'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "8.6.
|
|
3
|
+
"version": "8.6.12",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^8.6.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^8.6.12",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
54
54
|
"@workday/design-assets-types": "^0.2.8",
|
|
55
55
|
"chroma-js": "^2.1.0",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "1921673512f69968238d3e4aab543810ce80b2d6"
|
|
71
71
|
}
|
package/popup/lib/Popper.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as ReactDOM from 'react-dom';
|
|
3
|
-
import
|
|
3
|
+
import { Placement as PopperJSPlacement, Options, Instance, Modifier, createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
5
|
-
export type Placement = `${
|
|
6
|
-
export type PopperOptions =
|
|
5
|
+
export type Placement = `${PopperJSPlacement}`; // Use template literals to make documentation list them out
|
|
6
|
+
export type PopperOptions = Options;
|
|
7
7
|
export const defaultFallbackPlacements: Placement[] = ['top', 'right', 'bottom', 'left'];
|
|
8
8
|
|
|
9
9
|
import {usePopupStack} from './hooks';
|
|
@@ -74,7 +74,7 @@ export interface PopperProps {
|
|
|
74
74
|
* Reference to the PopperJS instance. Useful for making direct method calls on the popper
|
|
75
75
|
* instance like `update`.
|
|
76
76
|
*/
|
|
77
|
-
popperInstanceRef?: React.Ref<
|
|
77
|
+
popperInstanceRef?: React.Ref<Instance>;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
/**
|
|
@@ -142,7 +142,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
|
142
142
|
const placementRef = React.useRef(popperPlacement);
|
|
143
143
|
placementRef.current = placement;
|
|
144
144
|
|
|
145
|
-
const placementModifier = React.useMemo(():
|
|
145
|
+
const placementModifier = React.useMemo((): Modifier<any, any> => {
|
|
146
146
|
return {
|
|
147
147
|
name: 'setPlacement',
|
|
148
148
|
enabled: true,
|
|
@@ -169,7 +169,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
if (stackRef.current) {
|
|
172
|
-
const instance =
|
|
172
|
+
const instance = createPopper(anchorEl, stackRef.current, {
|
|
173
173
|
placement: popperPlacement,
|
|
174
174
|
...popperOptions,
|
|
175
175
|
modifiers: [
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
Placement as PopperJSPlacement,
|
|
3
|
+
placements,
|
|
4
|
+
State,
|
|
5
|
+
detectOverflow,
|
|
6
|
+
SideObject,
|
|
7
|
+
Modifier,
|
|
8
|
+
ModifierArguments,
|
|
9
|
+
} from '@popperjs/core';
|
|
2
10
|
|
|
3
|
-
export type Placement =
|
|
11
|
+
export type Placement = PopperJSPlacement; // Use template literals to make documentation list them out
|
|
4
12
|
|
|
5
13
|
const getOppositePlacement = (popperPlacement: Placement): Placement => {
|
|
6
14
|
const [first, second] = popperPlacement.split('-');
|
|
@@ -23,7 +31,7 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
|
|
|
23
31
|
}
|
|
24
32
|
if (second) {
|
|
25
33
|
oppositePlacement =
|
|
26
|
-
|
|
34
|
+
placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
|
|
27
35
|
oppositePlacement;
|
|
28
36
|
}
|
|
29
37
|
return oppositePlacement;
|
|
@@ -31,7 +39,7 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
|
|
|
31
39
|
|
|
32
40
|
const choseAvailablePlacement = (
|
|
33
41
|
placements: Placement[],
|
|
34
|
-
state:
|
|
42
|
+
state: State,
|
|
35
43
|
preferredPlacement: Placement
|
|
36
44
|
): Placement => {
|
|
37
45
|
if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
|
|
@@ -39,7 +47,7 @@ const choseAvailablePlacement = (
|
|
|
39
47
|
}
|
|
40
48
|
|
|
41
49
|
const {reference, popper} = state.rects;
|
|
42
|
-
const overflow =
|
|
50
|
+
const overflow = detectOverflow({...state, placement: placements[0]});
|
|
43
51
|
const direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
|
|
44
52
|
const isOverflowed =
|
|
45
53
|
(overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
|
|
@@ -48,7 +56,7 @@ const choseAvailablePlacement = (
|
|
|
48
56
|
popper.height / 2 - overflow.bottom < reference.height
|
|
49
57
|
: popper.width - overflow.left < reference.width ||
|
|
50
58
|
popper.width - overflow.right < reference.width);
|
|
51
|
-
const key = placements[0].split('-')[0] as keyof
|
|
59
|
+
const key = placements[0].split('-')[0] as keyof SideObject;
|
|
52
60
|
|
|
53
61
|
if (!isOverflowed && overflow[key] <= 0) {
|
|
54
62
|
return placements[0];
|
|
@@ -63,14 +71,14 @@ export type Options = {
|
|
|
63
71
|
|
|
64
72
|
const name = 'fallbackModifier';
|
|
65
73
|
|
|
66
|
-
export const fallbackPlacementsModifier:
|
|
74
|
+
export const fallbackPlacementsModifier: Modifier<typeof name, Options> = {
|
|
67
75
|
name: name,
|
|
68
76
|
enabled: true,
|
|
69
77
|
phase: 'main',
|
|
70
78
|
data: {
|
|
71
79
|
_skip: false,
|
|
72
80
|
},
|
|
73
|
-
fn({state, options}:
|
|
81
|
+
fn({state, options}: ModifierArguments<Options>) {
|
|
74
82
|
const preferredPlacement = state.options.placement;
|
|
75
83
|
const {fallbackPlacements} = options;
|
|
76
84
|
|