@elliemae/ds-popper 2.2.1 → 2.3.0-alpha.4
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 +117 -97
- package/cjs/DSPopper.js.map +7 -0
- package/cjs/PopperContent.js +106 -114
- package/cjs/PopperContent.js.map +7 -0
- package/cjs/PopperImpl.js +104 -167
- package/cjs/PopperImpl.js.map +7 -0
- package/cjs/getArrowStylesBySize.js +59 -45
- package/cjs/getArrowStylesBySize.js.map +7 -0
- package/cjs/index.js +37 -19
- package/cjs/index.js.map +7 -0
- package/cjs/interaction.js +37 -9
- package/cjs/interaction.js.map +7 -0
- package/cjs/positions.js +67 -23
- package/cjs/positions.js.map +7 -0
- package/cjs/props.js +62 -61
- package/cjs/props.js.map +7 -0
- package/esm/DSPopper.js +85 -80
- package/esm/DSPopper.js.map +7 -0
- package/esm/PopperContent.js +74 -102
- package/esm/PopperContent.js.map +7 -0
- package/esm/PopperImpl.js +69 -148
- package/esm/PopperImpl.js.map +7 -0
- package/esm/getArrowStylesBySize.js +30 -36
- package/esm/getArrowStylesBySize.js.map +7 -0
- package/esm/index.js +8 -4
- package/esm/index.js.map +7 -0
- package/esm/interaction.js +8 -4
- package/esm/interaction.js.map +7 -0
- package/esm/positions.js +38 -18
- package/esm/positions.js.map +7 -0
- package/esm/props.js +31 -54
- package/esm/props.js.map +7 -0
- package/package.json +3 -3
package/cjs/DSPopper.js
CHANGED
|
@@ -1,97 +1,117 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
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 DSPopper_exports = {};
|
|
29
|
+
__export(DSPopper_exports, {
|
|
30
|
+
DSPopper: () => DSPopper,
|
|
31
|
+
DSPopperWithSchema: () => DSPopperWithSchema,
|
|
32
|
+
PopperInteractions: () => import_interaction.Interaction,
|
|
33
|
+
PopperPositions: () => import_positions.Position,
|
|
34
|
+
default: () => DSPopper_default,
|
|
35
|
+
interactions: () => import_interaction2.interactions,
|
|
36
|
+
positions: () => import_positions2.positions
|
|
37
|
+
});
|
|
38
|
+
var React = __toESM(require("react"));
|
|
39
|
+
var import_react = __toESM(require("react"));
|
|
40
|
+
var import_react_desc = require("react-desc");
|
|
41
|
+
var import_PopperImpl = __toESM(require("./PopperImpl"));
|
|
42
|
+
var import_positions = require("./positions");
|
|
43
|
+
var import_interaction = require("./interaction");
|
|
44
|
+
var import_props = require("./props");
|
|
45
|
+
var import_interaction2 = require("./interaction");
|
|
46
|
+
var import_positions2 = require("./positions");
|
|
47
|
+
const DSPopper = ({
|
|
48
|
+
containerProps,
|
|
49
|
+
arrowGap,
|
|
50
|
+
arrowSize,
|
|
51
|
+
blockName,
|
|
52
|
+
contentOffset,
|
|
53
|
+
contentStyle,
|
|
54
|
+
contentComponent,
|
|
55
|
+
delayClose,
|
|
56
|
+
delayOpen,
|
|
57
|
+
interactionType,
|
|
58
|
+
isOpen,
|
|
59
|
+
onOpen,
|
|
60
|
+
onClose,
|
|
61
|
+
onPlacementChange,
|
|
62
|
+
placement,
|
|
63
|
+
preventOverflow,
|
|
64
|
+
showArrow,
|
|
65
|
+
closeAnimationConfig,
|
|
66
|
+
openAnimationConfig,
|
|
67
|
+
usePortal,
|
|
68
|
+
triggerComponent,
|
|
69
|
+
wrapExtraComponent,
|
|
70
|
+
getTargetFromChildren,
|
|
71
|
+
getContentFromChildren,
|
|
72
|
+
modifiers,
|
|
73
|
+
triggerRef,
|
|
74
|
+
children: customPopper,
|
|
75
|
+
renderReference,
|
|
76
|
+
referenceNode,
|
|
77
|
+
zIndex,
|
|
78
|
+
hideIfNotVisible
|
|
79
|
+
}) => /* @__PURE__ */ import_react.default.createElement(import_PopperImpl.default, {
|
|
80
|
+
arrowGap,
|
|
81
|
+
arrowSize,
|
|
82
|
+
blockName,
|
|
83
|
+
closeAnimationConfig,
|
|
84
|
+
containerProps,
|
|
85
|
+
contentComponent,
|
|
86
|
+
contentOffset,
|
|
87
|
+
contentStyle,
|
|
88
|
+
delayClose,
|
|
89
|
+
delayOpen,
|
|
90
|
+
getContentFromChildren,
|
|
91
|
+
getTargetFromChildren,
|
|
92
|
+
interactionType,
|
|
93
|
+
isOpen,
|
|
94
|
+
modifiers,
|
|
95
|
+
onOpen,
|
|
96
|
+
onClose,
|
|
97
|
+
onPlacementChange,
|
|
98
|
+
openAnimationConfig,
|
|
99
|
+
placement,
|
|
100
|
+
preventOverflow,
|
|
101
|
+
referenceNode,
|
|
102
|
+
renderReference,
|
|
103
|
+
showArrow,
|
|
104
|
+
triggerComponent,
|
|
105
|
+
triggerRef,
|
|
106
|
+
usePortal,
|
|
107
|
+
wrapExtraComponent,
|
|
108
|
+
zIndex,
|
|
109
|
+
hideIfNotVisible
|
|
110
|
+
}, customPopper);
|
|
111
|
+
DSPopper.propTypes = import_props.popperProps;
|
|
112
|
+
DSPopper.defaultProps = import_props.defaultProps;
|
|
113
|
+
const DSPopperWithSchema = (0, import_react_desc.describe)(DSPopper);
|
|
114
|
+
DSPopperWithSchema.propTypes = import_props.popperProps;
|
|
115
|
+
var DSPopper_default = DSPopper;
|
|
116
|
+
module.exports = __toCommonJS(DSPopper_exports);
|
|
117
|
+
//# sourceMappingURL=DSPopper.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/DSPopper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from 'react-desc';\nimport PopperImpl from './PopperImpl';\nimport { Position } from './positions';\nimport { Interaction } from './interaction';\nimport { popperProps, defaultProps } from './props';\n\nconst DSPopper = ({\n containerProps,\n arrowGap,\n arrowSize,\n blockName,\n contentOffset,\n contentStyle,\n contentComponent,\n delayClose,\n delayOpen,\n interactionType,\n isOpen, // if this is set DSPopper would be a controlled component if not, an uncontrolled one\n onOpen,\n onClose,\n onPlacementChange,\n placement,\n preventOverflow,\n showArrow,\n closeAnimationConfig,\n openAnimationConfig,\n usePortal,\n triggerComponent,\n wrapExtraComponent,\n getTargetFromChildren,\n getContentFromChildren,\n modifiers,\n triggerRef,\n children: customPopper,\n renderReference,\n referenceNode,\n zIndex,\n hideIfNotVisible,\n}): JSX.Element => (\n <PopperImpl\n arrowGap={arrowGap}\n arrowSize={arrowSize}\n blockName={blockName}\n closeAnimationConfig={closeAnimationConfig}\n containerProps={containerProps}\n contentComponent={contentComponent}\n contentOffset={contentOffset}\n contentStyle={contentStyle}\n delayClose={delayClose}\n delayOpen={delayOpen}\n getContentFromChildren={getContentFromChildren}\n getTargetFromChildren={getTargetFromChildren}\n interactionType={interactionType}\n isOpen={isOpen}\n modifiers={modifiers}\n onOpen={onOpen}\n onClose={onClose}\n onPlacementChange={onPlacementChange}\n openAnimationConfig={openAnimationConfig}\n placement={placement}\n preventOverflow={preventOverflow}\n referenceNode={referenceNode}\n renderReference={renderReference}\n showArrow={showArrow}\n triggerComponent={triggerComponent}\n triggerRef={triggerRef}\n usePortal={usePortal}\n wrapExtraComponent={wrapExtraComponent}\n zIndex={zIndex}\n hideIfNotVisible={hideIfNotVisible}\n >\n {customPopper}\n </PopperImpl>\n);\n\n// @deprecated: There's the NEW (not finished) popover that uses its own popper implementation.\nDSPopper.propTypes = popperProps;\nDSPopper.defaultProps = defaultProps;\n\nconst DSPopperWithSchema = describe(DSPopper);\nDSPopperWithSchema.propTypes = popperProps;\n\nexport { Interaction as PopperInteractions, Position as PopperPositions, DSPopperWithSchema, DSPopper };\n\nexport { interactions } from './interaction';\nexport { positions } from './positions';\n\nexport default DSPopper;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,wBAAuB;AACvB,uBAAyB;AACzB,yBAA4B;AAC5B,mBAA0C;AAgF1C,0BAA6B;AAC7B,wBAA0B;AA/E1B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,2BAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEC;AAKL,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,MAAM,qBAAqB,gCAAS;AACpC,mBAAmB,YAAY;AAO/B,IAAO,mBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/PopperContent.js
CHANGED
|
@@ -1,90 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
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 PopperContent_exports = {};
|
|
29
|
+
__export(PopperContent_exports, {
|
|
30
|
+
default: () => PopperContent
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_react_popper = require("react-popper");
|
|
35
|
+
var import_renderprops = require("react-spring/renderprops");
|
|
36
|
+
var import_getComponentFromProps = __toESM(require("@elliemae/ds-utilities/getComponentFromProps"));
|
|
37
|
+
var import_ds_overlay = __toESM(require("@elliemae/ds-overlay"));
|
|
38
|
+
var import_getArrowStylesBySize = require("./getArrowStylesBySize");
|
|
39
|
+
const Content = import_renderprops.Keyframes.Spring({});
|
|
40
|
+
class PopperContent extends import_react.PureComponent {
|
|
33
41
|
constructor(props) {
|
|
34
42
|
super(props);
|
|
35
43
|
this.renderContent = this.renderContent.bind(this);
|
|
36
44
|
this.renderArrow = this.renderArrow.bind(this);
|
|
37
45
|
this.handleRestAnimation = this.handleRestAnimation.bind(this);
|
|
38
|
-
this.handleRestAnimation = this.handleRestAnimation.bind(this);
|
|
39
46
|
}
|
|
40
|
-
|
|
41
47
|
handleRestAnimation() {
|
|
42
|
-
const {
|
|
43
|
-
isOpen,
|
|
44
|
-
onContentDestroyed
|
|
45
|
-
} = this.props;
|
|
46
|
-
|
|
48
|
+
const { isOpen, onContentDestroyed } = this.props;
|
|
47
49
|
if (!isOpen) {
|
|
48
50
|
onContentDestroyed();
|
|
49
51
|
}
|
|
50
52
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
renderArrow({ ref, style }, placement) {
|
|
54
|
+
const { blockName, showArrow } = this.props;
|
|
55
|
+
if (!showArrow)
|
|
56
|
+
return null;
|
|
57
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
58
|
+
key: "popper-arrow",
|
|
54
59
|
ref,
|
|
55
|
-
|
|
56
|
-
} = _ref;
|
|
57
|
-
const {
|
|
58
|
-
blockName,
|
|
59
|
-
showArrow
|
|
60
|
-
} = this.props;
|
|
61
|
-
if (!showArrow) return null;
|
|
62
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
63
|
-
ref: ref,
|
|
64
|
-
className: "".concat(blockName || 'popper', "__arrow"),
|
|
60
|
+
className: `${blockName || "popper"}__arrow`,
|
|
65
61
|
"data-placement": placement,
|
|
66
|
-
style:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
62
|
+
style: {
|
|
63
|
+
...style,
|
|
64
|
+
...(0, import_getArrowStylesBySize.getArrowStylesBySize)(placement, 25)
|
|
65
|
+
}
|
|
66
|
+
}, /* @__PURE__ */ import_react.default.createElement("svg", {
|
|
67
|
+
viewBox: "0 0 30 30"
|
|
68
|
+
}, /* @__PURE__ */ import_react.default.createElement("path", {
|
|
69
|
+
className: "stroke",
|
|
70
|
+
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\n C26.7,29,24.6,28.1,23.7,27.1z"
|
|
71
|
+
}), /* @__PURE__ */ import_react.default.createElement("path", {
|
|
72
|
+
className: "fill",
|
|
73
|
+
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"
|
|
74
|
+
})));
|
|
77
75
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
outOfBoundaries
|
|
87
|
-
} = _ref2;
|
|
76
|
+
renderContent({
|
|
77
|
+
ref,
|
|
78
|
+
style,
|
|
79
|
+
placement,
|
|
80
|
+
arrowProps,
|
|
81
|
+
scheduleUpdate,
|
|
82
|
+
outOfBoundaries
|
|
83
|
+
}) {
|
|
88
84
|
const {
|
|
89
85
|
contentComponent,
|
|
90
86
|
contentStyle,
|
|
@@ -97,60 +93,56 @@ class PopperContent extends react.PureComponent {
|
|
|
97
93
|
zIndex,
|
|
98
94
|
hideIfNotVisible
|
|
99
95
|
} = this.props;
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
const computedStyle = {
|
|
97
|
+
...style,
|
|
98
|
+
...contentStyle,
|
|
102
99
|
zIndex
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
100
|
+
};
|
|
101
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
102
|
+
...containerProps,
|
|
106
103
|
"data-placement": placement,
|
|
107
|
-
onMouseEnter
|
|
108
|
-
onMouseLeave
|
|
104
|
+
onMouseEnter,
|
|
105
|
+
onMouseLeave,
|
|
109
106
|
style: computedStyle,
|
|
110
|
-
"data-testid": "popper-container"
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}));
|
|
107
|
+
"data-testid": "popper-container"
|
|
108
|
+
}, /* @__PURE__ */ import_react.default.createElement(Content, {
|
|
109
|
+
native: true,
|
|
110
|
+
onRest: this.handleRestAnimation,
|
|
111
|
+
state: isOpen && (!outOfBoundaries || !hideIfNotVisible) ? "open" : "close",
|
|
112
|
+
states: {
|
|
113
|
+
open: {
|
|
114
|
+
...openAnimationConfig,
|
|
115
|
+
from: closeAnimationConfig.to
|
|
116
|
+
},
|
|
117
|
+
close: closeAnimationConfig
|
|
118
|
+
}
|
|
119
|
+
}, (animationStyle) => /* @__PURE__ */ import_react.default.createElement(import_renderprops.animated.div, {
|
|
120
|
+
ref,
|
|
121
|
+
style: animationStyle
|
|
122
|
+
}, (0, import_getComponentFromProps.default)(contentComponent, { scheduleUpdate }, [
|
|
123
|
+
this.renderArrow(arrowProps, placement)
|
|
124
|
+
]))));
|
|
129
125
|
}
|
|
130
|
-
|
|
131
126
|
render() {
|
|
132
127
|
const {
|
|
133
128
|
destroyed = false,
|
|
134
129
|
onClickOutside = () => null,
|
|
135
|
-
placement =
|
|
130
|
+
placement = "bottom-start",
|
|
136
131
|
modifiers = {},
|
|
137
132
|
referenceNode,
|
|
138
133
|
usePortal = true
|
|
139
134
|
} = this.props;
|
|
140
|
-
return
|
|
135
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_overlay.default, {
|
|
141
136
|
isOpen: !destroyed,
|
|
142
|
-
onClickOutside
|
|
143
|
-
usePortal
|
|
144
|
-
},
|
|
145
|
-
modifiers
|
|
146
|
-
placement
|
|
137
|
+
onClickOutside,
|
|
138
|
+
usePortal
|
|
139
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_react_popper.Popper, {
|
|
140
|
+
modifiers,
|
|
141
|
+
placement,
|
|
147
142
|
referenceElement: referenceNode
|
|
148
|
-
},
|
|
143
|
+
}, this.renderContent));
|
|
149
144
|
}
|
|
150
|
-
|
|
151
145
|
}
|
|
152
|
-
PopperContent.defaultProps = {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
module.exports = PopperContent;
|
|
146
|
+
PopperContent.defaultProps = { onContentDestroyed: () => null };
|
|
147
|
+
module.exports = __toCommonJS(PopperContent_exports);
|
|
148
|
+
//# sourceMappingURL=PopperContent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/PopperContent.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport { Popper } from 'react-popper';\nimport { Keyframes, animated } from 'react-spring/renderprops';\nimport getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';\nimport DSOverlay from '@elliemae/ds-overlay';\nimport { getArrowStylesBySize } from './getArrowStylesBySize';\n\nconst Content = Keyframes.Spring({});\n\nexport default class PopperContent extends PureComponent {\n // eslint-disable-next-line react/static-property-placement\n static defaultProps = { onContentDestroyed: () => null };\n\n constructor(props) {\n super(props);\n this.renderContent = this.renderContent.bind(this);\n this.renderArrow = this.renderArrow.bind(this);\n this.handleRestAnimation = this.handleRestAnimation.bind(this);\n }\n\n handleRestAnimation() {\n const { isOpen, onContentDestroyed } = this.props;\n if (!isOpen) {\n onContentDestroyed();\n }\n }\n\n renderArrow({ ref, style }, placement) {\n const { blockName, showArrow } = this.props;\n if (!showArrow) return null;\n return (\n <div\n key=\"popper-arrow\"\n ref={ref}\n className={`${blockName || 'popper'}__arrow`}\n data-placement={placement}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </div>\n );\n }\n\n renderContent({\n ref,\n style,\n placement,\n arrowProps,\n scheduleUpdate,\n outOfBoundaries,\n }) {\n const {\n contentComponent,\n contentStyle,\n isOpen,\n closeAnimationConfig,\n openAnimationConfig,\n onMouseEnter,\n onMouseLeave,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const computedStyle = {\n ...style,\n ...contentStyle,\n zIndex,\n };\n return (\n <div\n {...containerProps}\n data-placement={placement}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={computedStyle}\n data-testid=\"popper-container\"\n >\n <Content\n native\n onRest={this.handleRestAnimation}\n state={\n isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close'\n }\n states={{\n open: {\n ...openAnimationConfig,\n from: closeAnimationConfig.to,\n },\n close: closeAnimationConfig,\n }}\n >\n {(animationStyle) => (\n <animated.div ref={ref} style={animationStyle}>\n {getComponentFromProps(contentComponent, { scheduleUpdate }, [\n this.renderArrow(arrowProps, placement),\n ])}\n </animated.div>\n )}\n </Content>\n </div>\n );\n }\n\n render() {\n const {\n destroyed = false,\n onClickOutside = () => null,\n placement = 'bottom-start',\n modifiers = {},\n referenceNode,\n usePortal = true,\n } = this.props;\n return (\n <DSOverlay\n isOpen={!destroyed}\n onClickOutside={onClickOutside}\n usePortal={usePortal}\n >\n <Popper\n modifiers={modifiers}\n placement={placement}\n referenceElement={referenceNode}\n >\n {this.renderContent}\n </Popper>\n </DSOverlay>\n );\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqC;AACrC,0BAAuB;AACvB,yBAAoC;AACpC,mCAAkC;AAClC,wBAAsB;AACtB,kCAAqC;AAErC,MAAM,UAAU,6BAAU,OAAO;AAEjC,4BAA2C,2BAAc;AAAA,EAIvD,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,gBAAgB,KAAK,cAAc,KAAK;AAC7C,SAAK,cAAc,KAAK,YAAY,KAAK;AACzC,SAAK,sBAAsB,KAAK,oBAAoB,KAAK;AAAA;AAAA,EAG3D,sBAAsB;AACpB,UAAM,EAAE,QAAQ,uBAAuB,KAAK;AAC5C,QAAI,CAAC,QAAQ;AACX;AAAA;AAAA;AAAA,EAIJ,YAAY,EAAE,KAAK,SAAS,WAAW;AACrC,UAAM,EAAE,WAAW,cAAc,KAAK;AACtC,QAAI,CAAC;AAAW,aAAO;AACvB,WACE,mDAAC,OAAD;AAAA,MACE,KAAI;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,aAAa;AAAA,MAC3B,kBAAgB;AAAA,MAChB,OAAO;AAAA,WACF;AAAA,WACA,sDAAqB,WAAW;AAAA;AAAA,OAGrC,mDAAC,OAAD;AAAA,MAAK,SAAQ;AAAA,OACX,mDAAC,QAAD;AAAA,MACE,WAAU;AAAA,MACV,GAAE;AAAA,QAGJ,mDAAC,QAAD;AAAA,MACE,WAAU;AAAA,MACV,GAAE;AAAA;AAAA;AAAA,EAOZ,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,gBAAgB;AAAA,SACjB;AAAA,SACA;AAAA,MACH;AAAA;AAEF,WACE,mDAAC,OAAD;AAAA,SACM;AAAA,MACJ,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,OAEZ,mDAAC,SAAD;AAAA,MACE,QAAM;AAAA,MACN,QAAQ,KAAK;AAAA,MACb,OACE,UAAW,EAAC,mBAAmB,CAAC,oBAAoB,SAAS;AAAA,MAE/D,QAAQ;AAAA,QACN,MAAM;AAAA,aACD;AAAA,UACH,MAAM,qBAAqB;AAAA;AAAA,QAE7B,OAAO;AAAA;AAAA,OAGR,CAAC,mBACA,mDAAC,4BAAS,KAAV;AAAA,MAAc;AAAA,MAAU,OAAO;AAAA,OAC5B,0CAAsB,kBAAkB,EAAE,kBAAkB;AAAA,MAC3D,KAAK,YAAY,YAAY;AAAA;AAAA;AAAA,EAS3C,SAAS;AACP,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,iBAAiB,MAAM;AAAA,MACvB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AACT,WACE,mDAAC,2BAAD;AAAA,MACE,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,OAEA,mDAAC,4BAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,OAEjB,KAAK;AAAA;AAAA;AA9HP,AAFT,cAES,eAAe,EAAE,oBAAoB,MAAM;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|