@elliemae/ds-popper 2.2.0-alpha.2 → 2.2.0-beta.0
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/cjs/DSPopper.js +97 -117
- package/cjs/PopperContent.js +114 -106
- package/cjs/PopperImpl.js +167 -104
- package/cjs/getArrowStylesBySize.js +45 -59
- package/cjs/index.js +19 -37
- package/cjs/interaction.js +9 -37
- package/cjs/positions.js +23 -67
- package/cjs/props.js +61 -62
- package/esm/DSPopper.js +80 -85
- package/esm/PopperContent.js +102 -74
- package/esm/PopperImpl.js +148 -69
- package/esm/getArrowStylesBySize.js +36 -30
- package/esm/index.js +4 -8
- package/esm/interaction.js +4 -8
- package/esm/positions.js +18 -38
- package/esm/props.js +54 -31
- package/package.json +3 -3
- package/types/DSPopper.d.ts +1 -33
- package/cjs/DSPopper.js.map +0 -7
- package/cjs/PopperContent.js.map +0 -7
- package/cjs/PopperImpl.js.map +0 -7
- package/cjs/getArrowStylesBySize.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/interaction.js.map +0 -7
- package/cjs/positions.js.map +0 -7
- package/cjs/props.js.map +0 -7
- package/esm/DSPopper.js.map +0 -7
- package/esm/PopperContent.js.map +0 -7
- package/esm/PopperImpl.js.map +0 -7
- package/esm/getArrowStylesBySize.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/interaction.js.map +0 -7
- package/esm/positions.js.map +0 -7
- package/esm/props.js.map +0 -7
package/cjs/positions.js
CHANGED
|
@@ -1,69 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var positions_exports = {};
|
|
29
|
-
__export(positions_exports, {
|
|
30
|
-
Position: () => Position,
|
|
31
|
-
positions: () => positions
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
34
5
|
const Position = {
|
|
35
|
-
AUTO:
|
|
36
|
-
AUTO_START:
|
|
37
|
-
AUTO_END:
|
|
38
|
-
BOTTOM:
|
|
39
|
-
BOTTOM_START:
|
|
40
|
-
BOTTOM_END:
|
|
41
|
-
LEFT:
|
|
42
|
-
LEFT_END:
|
|
43
|
-
LEFT_START:
|
|
44
|
-
RIGHT:
|
|
45
|
-
RIGHT_END:
|
|
46
|
-
RIGHT_START:
|
|
47
|
-
TOP:
|
|
48
|
-
TOP_START:
|
|
49
|
-
TOP_END:
|
|
6
|
+
AUTO: 'auto',
|
|
7
|
+
AUTO_START: 'auto-start',
|
|
8
|
+
AUTO_END: 'auto-end',
|
|
9
|
+
BOTTOM: 'bottom',
|
|
10
|
+
BOTTOM_START: 'bottom-start',
|
|
11
|
+
BOTTOM_END: 'bottom-end',
|
|
12
|
+
LEFT: 'left',
|
|
13
|
+
LEFT_END: 'left-end',
|
|
14
|
+
LEFT_START: 'left-start',
|
|
15
|
+
RIGHT: 'right',
|
|
16
|
+
RIGHT_END: 'right-end',
|
|
17
|
+
RIGHT_START: 'right-start',
|
|
18
|
+
TOP: 'top',
|
|
19
|
+
TOP_START: 'top-start',
|
|
20
|
+
TOP_END: 'top-end'
|
|
50
21
|
};
|
|
51
|
-
const positions = [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
Position.TOP_START,
|
|
56
|
-
Position.TOP,
|
|
57
|
-
Position.TOP_END,
|
|
58
|
-
Position.RIGHT_START,
|
|
59
|
-
Position.RIGHT,
|
|
60
|
-
Position.RIGHT_END,
|
|
61
|
-
Position.BOTTOM_START,
|
|
62
|
-
Position.BOTTOM,
|
|
63
|
-
Position.BOTTOM_END,
|
|
64
|
-
Position.LEFT_START,
|
|
65
|
-
Position.LEFT,
|
|
66
|
-
Position.LEFT_END
|
|
67
|
-
];
|
|
68
|
-
module.exports = __toCommonJS(positions_exports);
|
|
69
|
-
//# sourceMappingURL=positions.js.map
|
|
22
|
+
const positions = [Position.AUTO_START, Position.AUTO_END, Position.AUTO, Position.TOP_START, Position.TOP, Position.TOP_END, Position.RIGHT_START, Position.RIGHT, Position.RIGHT_END, Position.BOTTOM_START, Position.BOTTOM, Position.BOTTOM_END, Position.LEFT_START, Position.LEFT, Position.LEFT_END];
|
|
23
|
+
|
|
24
|
+
exports.Position = Position;
|
|
25
|
+
exports.positions = positions;
|
package/cjs/props.js
CHANGED
|
@@ -1,81 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var props_exports = {};
|
|
29
|
-
__export(props_exports, {
|
|
30
|
-
defaultProps: () => defaultProps,
|
|
31
|
-
popperProps: () => popperProps
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react_desc = __toESM(require("react-desc"));
|
|
35
|
-
var import_positions = __toESM(require("./positions"));
|
|
36
|
-
var import_interaction = __toESM(require("./interaction"));
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var reactDesc = require('react-desc');
|
|
6
|
+
var positions = require('./positions.js');
|
|
7
|
+
var interaction = require('./interaction.js');
|
|
8
|
+
|
|
37
9
|
const popperProps = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
10
|
+
/** Hide menu component if trigger component is not visible/scrolled away */
|
|
11
|
+
hideIfNotVisible: reactDesc.PropTypes.bool.description('Hide menu component if trigger component is not visible/scrolled away'),
|
|
12
|
+
|
|
13
|
+
/** props to inject to popper wrapper */
|
|
14
|
+
containerProps: reactDesc.PropTypes.object.description('props to inject to popper wrapper'),
|
|
15
|
+
|
|
16
|
+
/** Space between the arrow and the popup */
|
|
17
|
+
arrowGap: reactDesc.PropTypes.number.description('Space between the arrow and the popup'),
|
|
18
|
+
|
|
19
|
+
/** callback for when menu changes from close to open */
|
|
20
|
+
onOpen: reactDesc.PropTypes.func.description('callback for when menu changes from close to open'),
|
|
21
|
+
|
|
22
|
+
/** callback for when menu changes from open to close */
|
|
23
|
+
onClose: reactDesc.PropTypes.func.description('callback for when menu changes from open to close'),
|
|
24
|
+
|
|
25
|
+
/** Time in ms to delay close of menu */
|
|
26
|
+
delayClose: reactDesc.PropTypes.number.description('Time in ms to delay close of menu'),
|
|
27
|
+
|
|
28
|
+
/** Time in ms to delay open of menu */
|
|
29
|
+
delayOpen: reactDesc.PropTypes.number.description('Time in ms to delay open of menu'),
|
|
30
|
+
|
|
31
|
+
/** callback for when menu changes placement */
|
|
32
|
+
onPlacementChange: reactDesc.PropTypes.func.description('callback for when menu changes placement'),
|
|
33
|
+
|
|
34
|
+
/** Arrow size */
|
|
35
|
+
arrowSize: reactDesc.PropTypes.number.description('Arrow size'),
|
|
36
|
+
|
|
37
|
+
/** Bem blockname for the popper */
|
|
38
|
+
blockName: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.object]).description('Bem blockname for the popper'),
|
|
39
|
+
triggerComponent: reactDesc.PropTypes.element.description("The component that will open/close the tooltip. \n Cannot be used with disabled elements. \n https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired
|
|
54
40
|
};
|
|
55
41
|
const defaultProps = {
|
|
56
42
|
containerProps: {},
|
|
57
43
|
arrowGap: 8,
|
|
58
44
|
arrowSize: 6,
|
|
59
|
-
blockName:
|
|
45
|
+
blockName: '',
|
|
60
46
|
contentOffset: null,
|
|
61
47
|
contentStyle: null,
|
|
62
48
|
contentComponent: () => null,
|
|
63
49
|
delayClose: 300,
|
|
64
50
|
delayOpen: 200,
|
|
65
|
-
interactionType:
|
|
51
|
+
interactionType: interaction.Interaction.CLICK,
|
|
66
52
|
onOpen: () => null,
|
|
67
53
|
onClose: () => null,
|
|
68
54
|
onPlacementChange: () => null,
|
|
69
|
-
placement:
|
|
70
|
-
preventOverflow:
|
|
55
|
+
placement: positions.Position.BOTTOM,
|
|
56
|
+
preventOverflow: 'window',
|
|
71
57
|
showArrow: true,
|
|
72
58
|
closeAnimationConfig: {
|
|
73
|
-
to: {
|
|
74
|
-
|
|
59
|
+
to: {
|
|
60
|
+
transform: 'scale(0.8)',
|
|
61
|
+
opacity: '0'
|
|
62
|
+
},
|
|
63
|
+
config: {
|
|
64
|
+
delay: 80,
|
|
65
|
+
duration: 80
|
|
66
|
+
}
|
|
75
67
|
},
|
|
76
68
|
openAnimationConfig: {
|
|
77
|
-
to: {
|
|
78
|
-
|
|
69
|
+
to: {
|
|
70
|
+
transform: 'scale(1)',
|
|
71
|
+
opacity: '1'
|
|
72
|
+
},
|
|
73
|
+
config: {
|
|
74
|
+
delay: 80,
|
|
75
|
+
duration: 80
|
|
76
|
+
}
|
|
79
77
|
},
|
|
80
78
|
usePortal: true,
|
|
81
79
|
triggerComponent: () => null,
|
|
@@ -85,5 +83,6 @@ const defaultProps = {
|
|
|
85
83
|
triggerRef: () => null,
|
|
86
84
|
hideIfNotVisible: false
|
|
87
85
|
};
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
|
|
87
|
+
exports.defaultProps = defaultProps;
|
|
88
|
+
exports.popperProps = popperProps;
|
package/esm/DSPopper.js
CHANGED
|
@@ -1,88 +1,83 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { describe } from
|
|
4
|
-
import PopperImpl from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import { popperProps, defaultProps } from
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'react';
|
|
3
|
+
import { describe } from 'react-desc';
|
|
4
|
+
import PopperImpl from './PopperImpl.js';
|
|
5
|
+
export { Position as PopperPositions, positions } from './positions.js';
|
|
6
|
+
export { Interaction as PopperInteractions, interactions } from './interaction.js';
|
|
7
|
+
import { popperProps, defaultProps } from './props.js';
|
|
8
|
+
|
|
9
|
+
const DSPopper = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
containerProps,
|
|
12
|
+
arrowGap,
|
|
13
|
+
arrowSize,
|
|
14
|
+
blockName,
|
|
15
|
+
contentOffset,
|
|
16
|
+
contentStyle,
|
|
17
|
+
contentComponent,
|
|
18
|
+
delayClose,
|
|
19
|
+
delayOpen,
|
|
20
|
+
interactionType,
|
|
21
|
+
isOpen,
|
|
22
|
+
// if this is set DSPopper would be a controlled component if not, an uncontrolled one
|
|
23
|
+
onOpen,
|
|
24
|
+
onClose,
|
|
25
|
+
onPlacementChange,
|
|
26
|
+
placement,
|
|
27
|
+
preventOverflow,
|
|
28
|
+
showArrow,
|
|
29
|
+
closeAnimationConfig,
|
|
30
|
+
openAnimationConfig,
|
|
31
|
+
usePortal,
|
|
32
|
+
triggerComponent,
|
|
33
|
+
wrapExtraComponent,
|
|
34
|
+
getTargetFromChildren,
|
|
35
|
+
getContentFromChildren,
|
|
36
|
+
modifiers,
|
|
37
|
+
triggerRef,
|
|
38
|
+
children: customPopper,
|
|
39
|
+
renderReference,
|
|
40
|
+
referenceNode,
|
|
41
|
+
zIndex,
|
|
42
|
+
hideIfNotVisible
|
|
43
|
+
} = _ref;
|
|
44
|
+
return /*#__PURE__*/_jsx(PopperImpl, {
|
|
45
|
+
arrowGap: arrowGap,
|
|
46
|
+
arrowSize: arrowSize,
|
|
47
|
+
blockName: blockName,
|
|
48
|
+
closeAnimationConfig: closeAnimationConfig,
|
|
49
|
+
containerProps: containerProps,
|
|
50
|
+
contentComponent: contentComponent,
|
|
51
|
+
contentOffset: contentOffset,
|
|
52
|
+
contentStyle: contentStyle,
|
|
53
|
+
delayClose: delayClose,
|
|
54
|
+
delayOpen: delayOpen,
|
|
55
|
+
getContentFromChildren: getContentFromChildren,
|
|
56
|
+
getTargetFromChildren: getTargetFromChildren,
|
|
57
|
+
interactionType: interactionType,
|
|
58
|
+
isOpen: isOpen,
|
|
59
|
+
modifiers: modifiers,
|
|
60
|
+
onOpen: onOpen,
|
|
61
|
+
onClose: onClose,
|
|
62
|
+
onPlacementChange: onPlacementChange,
|
|
63
|
+
openAnimationConfig: openAnimationConfig,
|
|
64
|
+
placement: placement,
|
|
65
|
+
preventOverflow: preventOverflow,
|
|
66
|
+
referenceNode: referenceNode,
|
|
67
|
+
renderReference: renderReference,
|
|
68
|
+
showArrow: showArrow,
|
|
69
|
+
triggerComponent: triggerComponent,
|
|
70
|
+
triggerRef: triggerRef,
|
|
71
|
+
usePortal: usePortal,
|
|
72
|
+
wrapExtraComponent: wrapExtraComponent,
|
|
73
|
+
zIndex: zIndex,
|
|
74
|
+
hideIfNotVisible: hideIfNotVisible
|
|
75
|
+
}, void 0, customPopper);
|
|
76
|
+
}; // @deprecated: There's the NEW (not finished) popover that uses its own popper implementation.
|
|
77
|
+
|
|
78
|
+
|
|
73
79
|
DSPopper.defaultProps = defaultProps;
|
|
74
80
|
const DSPopperWithSchema = describe(DSPopper);
|
|
75
81
|
DSPopperWithSchema.propTypes = popperProps;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
var DSPopper_default = DSPopper;
|
|
79
|
-
export {
|
|
80
|
-
DSPopper,
|
|
81
|
-
DSPopperWithSchema,
|
|
82
|
-
Interaction as PopperInteractions,
|
|
83
|
-
Position as PopperPositions,
|
|
84
|
-
DSPopper_default as default,
|
|
85
|
-
interactions,
|
|
86
|
-
positions
|
|
87
|
-
};
|
|
88
|
-
//# sourceMappingURL=DSPopper.js.map
|
|
82
|
+
|
|
83
|
+
export { DSPopper, DSPopperWithSchema, DSPopper as default };
|
package/esm/PopperContent.js
CHANGED
|
@@ -1,55 +1,81 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
7
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
+
import { PureComponent } from 'react';
|
|
9
|
+
import { Popper } from 'react-popper';
|
|
10
|
+
import { Keyframes, animated } from 'react-spring/renderprops';
|
|
11
|
+
import getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';
|
|
12
|
+
import DSOverlay from '@elliemae/ds-overlay';
|
|
13
|
+
import { getArrowStylesBySize } from './getArrowStylesBySize.js';
|
|
14
|
+
import { jsx } from 'react/jsx-runtime';
|
|
15
|
+
|
|
16
|
+
var _svg;
|
|
17
|
+
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
+
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
21
|
const Content = Keyframes.Spring({});
|
|
9
22
|
class PopperContent extends PureComponent {
|
|
23
|
+
// eslint-disable-next-line react/static-property-placement
|
|
10
24
|
constructor(props) {
|
|
11
25
|
super(props);
|
|
12
26
|
this.renderContent = this.renderContent.bind(this);
|
|
13
27
|
this.renderArrow = this.renderArrow.bind(this);
|
|
14
28
|
this.handleRestAnimation = this.handleRestAnimation.bind(this);
|
|
29
|
+
this.handleRestAnimation = this.handleRestAnimation.bind(this);
|
|
15
30
|
}
|
|
31
|
+
|
|
16
32
|
handleRestAnimation() {
|
|
17
|
-
const {
|
|
33
|
+
const {
|
|
34
|
+
isOpen,
|
|
35
|
+
onContentDestroyed
|
|
36
|
+
} = this.props;
|
|
37
|
+
|
|
18
38
|
if (!isOpen) {
|
|
19
39
|
onContentDestroyed();
|
|
20
40
|
}
|
|
21
41
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return null;
|
|
26
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
27
|
-
key: "popper-arrow",
|
|
42
|
+
|
|
43
|
+
renderArrow(_ref, placement) {
|
|
44
|
+
let {
|
|
28
45
|
ref,
|
|
29
|
-
|
|
46
|
+
style
|
|
47
|
+
} = _ref;
|
|
48
|
+
const {
|
|
49
|
+
blockName,
|
|
50
|
+
showArrow
|
|
51
|
+
} = this.props;
|
|
52
|
+
if (!showArrow) return null;
|
|
53
|
+
return /*#__PURE__*/jsx("div", {
|
|
54
|
+
ref: ref,
|
|
55
|
+
className: "".concat(blockName || 'popper', "__arrow"),
|
|
30
56
|
"data-placement": placement,
|
|
31
|
-
style: {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
|
|
43
|
-
})));
|
|
57
|
+
style: _objectSpread(_objectSpread({}, style), getArrowStylesBySize(placement, 25)),
|
|
58
|
+
children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
|
|
59
|
+
viewBox: "0 0 30 30"
|
|
60
|
+
}, void 0, /*#__PURE__*/_jsx("path", {
|
|
61
|
+
className: "stroke",
|
|
62
|
+
d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
|
|
63
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
64
|
+
className: "fill",
|
|
65
|
+
d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
|
|
66
|
+
})))
|
|
67
|
+
}, "popper-arrow");
|
|
44
68
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
69
|
+
|
|
70
|
+
renderContent(_ref2) {
|
|
71
|
+
let {
|
|
72
|
+
ref,
|
|
73
|
+
style,
|
|
74
|
+
placement,
|
|
75
|
+
arrowProps,
|
|
76
|
+
scheduleUpdate,
|
|
77
|
+
outOfBoundaries
|
|
78
|
+
} = _ref2;
|
|
53
79
|
const {
|
|
54
80
|
contentComponent,
|
|
55
81
|
contentStyle,
|
|
@@ -62,58 +88,60 @@ class PopperContent extends PureComponent {
|
|
|
62
88
|
zIndex,
|
|
63
89
|
hideIfNotVisible
|
|
64
90
|
} = this.props;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
...contentStyle,
|
|
91
|
+
|
|
92
|
+
const computedStyle = _objectSpread(_objectSpread(_objectSpread({}, style), contentStyle), {}, {
|
|
68
93
|
zIndex
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
|
|
72
97
|
"data-placement": placement,
|
|
73
|
-
onMouseEnter,
|
|
74
|
-
onMouseLeave,
|
|
98
|
+
onMouseEnter: onMouseEnter,
|
|
99
|
+
onMouseLeave: onMouseLeave,
|
|
75
100
|
style: computedStyle,
|
|
76
|
-
"data-testid": "popper-container"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
101
|
+
"data-testid": "popper-container",
|
|
102
|
+
children: /*#__PURE__*/_jsx(Content, {
|
|
103
|
+
native: true,
|
|
104
|
+
onRest: this.handleRestAnimation,
|
|
105
|
+
state: isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close',
|
|
106
|
+
states: {
|
|
107
|
+
open: _objectSpread(_objectSpread({}, openAnimationConfig), {}, {
|
|
108
|
+
from: closeAnimationConfig.to
|
|
109
|
+
}),
|
|
110
|
+
close: closeAnimationConfig
|
|
111
|
+
}
|
|
112
|
+
}, void 0, animationStyle => /*#__PURE__*/jsx(animated.div, {
|
|
113
|
+
ref: ref,
|
|
114
|
+
style: animationStyle,
|
|
115
|
+
children: getComponentFromProps(contentComponent, {
|
|
116
|
+
scheduleUpdate
|
|
117
|
+
}, [this.renderArrow(arrowProps, placement)])
|
|
118
|
+
}))
|
|
119
|
+
}));
|
|
94
120
|
}
|
|
121
|
+
|
|
95
122
|
render() {
|
|
96
123
|
const {
|
|
97
124
|
destroyed = false,
|
|
98
125
|
onClickOutside = () => null,
|
|
99
|
-
placement =
|
|
126
|
+
placement = 'bottom-start',
|
|
100
127
|
modifiers = {},
|
|
101
128
|
referenceNode,
|
|
102
129
|
usePortal = true
|
|
103
130
|
} = this.props;
|
|
104
|
-
return
|
|
131
|
+
return /*#__PURE__*/_jsx(DSOverlay, {
|
|
105
132
|
isOpen: !destroyed,
|
|
106
|
-
onClickOutside,
|
|
107
|
-
usePortal
|
|
108
|
-
},
|
|
109
|
-
modifiers,
|
|
110
|
-
placement,
|
|
133
|
+
onClickOutside: onClickOutside,
|
|
134
|
+
usePortal: usePortal
|
|
135
|
+
}, void 0, /*#__PURE__*/_jsx(Popper, {
|
|
136
|
+
modifiers: modifiers,
|
|
137
|
+
placement: placement,
|
|
111
138
|
referenceElement: referenceNode
|
|
112
|
-
}, this.renderContent));
|
|
139
|
+
}, void 0, this.renderContent));
|
|
113
140
|
}
|
|
141
|
+
|
|
114
142
|
}
|
|
115
|
-
PopperContent.defaultProps = {
|
|
116
|
-
|
|
117
|
-
PopperContent as default
|
|
143
|
+
PopperContent.defaultProps = {
|
|
144
|
+
onContentDestroyed: () => null
|
|
118
145
|
};
|
|
119
|
-
|
|
146
|
+
|
|
147
|
+
export { PopperContent as default };
|