@elliemae/ds-popper 2.3.1 → 3.0.0-alpha.3
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/cjs/DSPopper.js +117 -0
- package/dist/cjs/DSPopper.js.map +7 -0
- package/dist/cjs/PopperContent.js +158 -0
- package/dist/cjs/PopperContent.js.map +7 -0
- package/dist/cjs/PopperImpl.js +281 -0
- package/dist/cjs/PopperImpl.js.map +7 -0
- package/dist/cjs/getArrowStylesBySize.js +73 -0
- package/dist/cjs/getArrowStylesBySize.js.map +7 -0
- package/dist/cjs/index.js +37 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/interaction.js +40 -0
- package/dist/cjs/interaction.js.map +7 -0
- package/dist/cjs/positions.js +69 -0
- package/dist/cjs/positions.js.map +7 -0
- package/dist/cjs/props.js +89 -0
- package/dist/cjs/props.js.map +7 -0
- package/dist/esm/DSPopper.js +88 -0
- package/dist/esm/DSPopper.js.map +7 -0
- package/dist/esm/PopperContent.js +131 -0
- package/dist/esm/PopperContent.js.map +7 -0
- package/{esm → dist/esm}/PopperImpl.js +75 -143
- package/dist/esm/PopperImpl.js.map +7 -0
- package/dist/esm/getArrowStylesBySize.js +46 -0
- package/dist/esm/getArrowStylesBySize.js.map +7 -0
- package/dist/esm/index.js +8 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/interaction.js +11 -0
- package/dist/esm/interaction.js.map +7 -0
- package/dist/esm/positions.js +40 -0
- package/dist/esm/positions.js.map +7 -0
- package/dist/esm/props.js +60 -0
- package/dist/esm/props.js.map +7 -0
- package/package.json +41 -32
- package/cjs/DSPopper.js +0 -97
- package/cjs/PopperContent.js +0 -156
- package/cjs/PopperImpl.js +0 -335
- package/cjs/getArrowStylesBySize.js +0 -46
- package/cjs/index.js +0 -19
- package/cjs/interaction.js +0 -12
- package/cjs/positions.js +0 -25
- package/cjs/props.js +0 -88
- package/esm/DSPopper.js +0 -83
- package/esm/PopperContent.js +0 -147
- package/esm/getArrowStylesBySize.js +0 -37
- package/esm/index.js +0 -4
- package/esm/interaction.js +0 -7
- package/esm/positions.js +0 -20
- package/esm/props.js +0 -83
- package/types/DSPopper.d.ts +0 -156
- package/types/PopperContent.d.ts +0 -21
- package/types/PopperImpl.d.ts +0 -52
- package/types/getArrowStylesBySize.d.ts +0 -2
- package/types/index.d.ts +0 -3
- package/types/interaction.d.ts +0 -5
- package/types/positions.d.ts +0 -18
- package/types/props.d.ts +0 -119
|
@@ -0,0 +1,117 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __export = (target, all) => {
|
|
26
|
+
for (var name in all)
|
|
27
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
+
};
|
|
29
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
30
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
31
|
+
for (let key of __getOwnPropNames(module2))
|
|
32
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
33
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __toESM = (module2, isNodeMode) => {
|
|
38
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
39
|
+
};
|
|
40
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
41
|
+
return (module2, temp) => {
|
|
42
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
43
|
+
};
|
|
44
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
45
|
+
var PopperContent_exports = {};
|
|
46
|
+
__export(PopperContent_exports, {
|
|
47
|
+
default: () => PopperContent
|
|
48
|
+
});
|
|
49
|
+
var React = __toESM(require("react"));
|
|
50
|
+
var import_react = __toESM(require("react"));
|
|
51
|
+
var import_react_popper = require("@elliemae/react-popper");
|
|
52
|
+
var import_renderprops = require("react-spring/renderprops");
|
|
53
|
+
var import_getComponentFromProps = __toESM(require("@elliemae/ds-utilities/getComponentFromProps"));
|
|
54
|
+
var import_ds_overlay = __toESM(require("@elliemae/ds-overlay"));
|
|
55
|
+
var import_getArrowStylesBySize = require("./getArrowStylesBySize");
|
|
56
|
+
const Content = import_renderprops.Keyframes.Spring({});
|
|
57
|
+
class PopperContent extends import_react.PureComponent {
|
|
58
|
+
constructor(props) {
|
|
59
|
+
super(props);
|
|
60
|
+
this.renderContent = this.renderContent.bind(this);
|
|
61
|
+
this.renderArrow = this.renderArrow.bind(this);
|
|
62
|
+
this.handleRestAnimation = this.handleRestAnimation.bind(this);
|
|
63
|
+
}
|
|
64
|
+
handleRestAnimation() {
|
|
65
|
+
const { isOpen, onContentDestroyed } = this.props;
|
|
66
|
+
if (!isOpen) {
|
|
67
|
+
onContentDestroyed();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
renderArrow({ ref, style }, placement) {
|
|
71
|
+
const { blockName, showArrow } = this.props;
|
|
72
|
+
if (!showArrow)
|
|
73
|
+
return null;
|
|
74
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
75
|
+
key: "popper-arrow",
|
|
76
|
+
ref,
|
|
77
|
+
className: `${blockName || "popper"}__arrow`,
|
|
78
|
+
"data-placement": placement,
|
|
79
|
+
style: __spreadValues(__spreadValues({}, style), (0, import_getArrowStylesBySize.getArrowStylesBySize)(placement, 25))
|
|
80
|
+
}, /* @__PURE__ */ import_react.default.createElement("svg", {
|
|
81
|
+
viewBox: "0 0 30 30"
|
|
82
|
+
}, /* @__PURE__ */ import_react.default.createElement("path", {
|
|
83
|
+
className: "stroke",
|
|
84
|
+
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"
|
|
85
|
+
}), /* @__PURE__ */ import_react.default.createElement("path", {
|
|
86
|
+
className: "fill",
|
|
87
|
+
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"
|
|
88
|
+
})));
|
|
89
|
+
}
|
|
90
|
+
renderContent({
|
|
91
|
+
ref,
|
|
92
|
+
style,
|
|
93
|
+
placement,
|
|
94
|
+
arrowProps,
|
|
95
|
+
scheduleUpdate,
|
|
96
|
+
outOfBoundaries
|
|
97
|
+
}) {
|
|
98
|
+
const {
|
|
99
|
+
contentComponent,
|
|
100
|
+
contentStyle,
|
|
101
|
+
isOpen,
|
|
102
|
+
closeAnimationConfig,
|
|
103
|
+
openAnimationConfig,
|
|
104
|
+
onMouseEnter,
|
|
105
|
+
onMouseLeave,
|
|
106
|
+
containerProps,
|
|
107
|
+
zIndex,
|
|
108
|
+
hideIfNotVisible
|
|
109
|
+
} = this.props;
|
|
110
|
+
const computedStyle = __spreadProps(__spreadValues(__spreadValues({}, style), contentStyle), {
|
|
111
|
+
zIndex
|
|
112
|
+
});
|
|
113
|
+
return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
|
|
114
|
+
"data-placement": placement,
|
|
115
|
+
onMouseEnter,
|
|
116
|
+
onMouseLeave,
|
|
117
|
+
style: computedStyle,
|
|
118
|
+
"data-testid": "popper-container"
|
|
119
|
+
}), /* @__PURE__ */ import_react.default.createElement(Content, {
|
|
120
|
+
native: true,
|
|
121
|
+
onRest: this.handleRestAnimation,
|
|
122
|
+
state: isOpen && (!outOfBoundaries || !hideIfNotVisible) ? "open" : "close",
|
|
123
|
+
states: {
|
|
124
|
+
open: __spreadProps(__spreadValues({}, openAnimationConfig), {
|
|
125
|
+
from: closeAnimationConfig.to
|
|
126
|
+
}),
|
|
127
|
+
close: closeAnimationConfig
|
|
128
|
+
}
|
|
129
|
+
}, (animationStyle) => /* @__PURE__ */ import_react.default.createElement(import_renderprops.animated.div, {
|
|
130
|
+
ref,
|
|
131
|
+
style: animationStyle
|
|
132
|
+
}, (0, import_getComponentFromProps.default)(contentComponent, { scheduleUpdate }, [
|
|
133
|
+
this.renderArrow(arrowProps, placement)
|
|
134
|
+
]))));
|
|
135
|
+
}
|
|
136
|
+
render() {
|
|
137
|
+
const {
|
|
138
|
+
destroyed = false,
|
|
139
|
+
onClickOutside = () => null,
|
|
140
|
+
placement = "bottom-start",
|
|
141
|
+
modifiers = {},
|
|
142
|
+
referenceNode,
|
|
143
|
+
usePortal = true
|
|
144
|
+
} = this.props;
|
|
145
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_overlay.default, {
|
|
146
|
+
isOpen: !destroyed,
|
|
147
|
+
onClickOutside,
|
|
148
|
+
usePortal
|
|
149
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_react_popper.Popper, {
|
|
150
|
+
modifiers,
|
|
151
|
+
placement,
|
|
152
|
+
referenceElement: referenceNode
|
|
153
|
+
}, this.renderContent));
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
PopperContent.defaultProps = { onContentDestroyed: () => null };
|
|
157
|
+
module.exports = __toCommonJS(PopperContent_exports);
|
|
158
|
+
//# 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 '@elliemae/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,kCACF,QACA,sDAAqB,WAAW;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,gDACjB,QACA,eAFiB;AAAA,MAGpB;AAAA;AAEF,WACE,mDAAC,OAAD,iCACM,iBADN;AAAA,MAEE,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,QAEZ,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,iCACD,sBADC;AAAA,UAEJ,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
|
+
}
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __export = (target, all) => {
|
|
26
|
+
for (var name in all)
|
|
27
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
+
};
|
|
29
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
30
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
31
|
+
for (let key of __getOwnPropNames(module2))
|
|
32
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
33
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __toESM = (module2, isNodeMode) => {
|
|
38
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
39
|
+
};
|
|
40
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
41
|
+
return (module2, temp) => {
|
|
42
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
43
|
+
};
|
|
44
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
45
|
+
var PopperImpl_exports = {};
|
|
46
|
+
__export(PopperImpl_exports, {
|
|
47
|
+
PopperContent: () => import_PopperContent.default,
|
|
48
|
+
Reference: () => import_react_popper.Reference,
|
|
49
|
+
default: () => PopperImpl
|
|
50
|
+
});
|
|
51
|
+
var React = __toESM(require("react"));
|
|
52
|
+
var import_react = __toESM(require("react"));
|
|
53
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
54
|
+
var import_react_popper = require("@elliemae/react-popper");
|
|
55
|
+
var import_memoize_one = __toESM(require("memoize-one"));
|
|
56
|
+
var import_PopperContent = __toESM(require("./PopperContent"));
|
|
57
|
+
var import_interaction = require("./interaction");
|
|
58
|
+
class PopperImpl extends import_react.Component {
|
|
59
|
+
constructor(props) {
|
|
60
|
+
super(props);
|
|
61
|
+
this.safeIsMounted = false;
|
|
62
|
+
this.handlePopperPlacementChange = (0, import_memoize_one.default)((placement) => {
|
|
63
|
+
const { onPlacementChange } = this.props;
|
|
64
|
+
onPlacementChange(placement);
|
|
65
|
+
});
|
|
66
|
+
this.state = {
|
|
67
|
+
isOpen: false,
|
|
68
|
+
destroyed: true
|
|
69
|
+
};
|
|
70
|
+
this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
|
71
|
+
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
|
72
|
+
this.handleTriggerClick = this.handleTriggerClick.bind(this);
|
|
73
|
+
this.renderTarget = this.renderTarget.bind(this);
|
|
74
|
+
this.updatePopoverState = this.updatePopoverState.bind(this);
|
|
75
|
+
this.handlePopperPlacementChange = this.handlePopperPlacementChange.bind(this);
|
|
76
|
+
this.handleDestroyContent = this.handleDestroyContent.bind(this);
|
|
77
|
+
this.handleContentMouseEnter = this.handleContentMouseEnter.bind(this);
|
|
78
|
+
this.handleContentMouseLeave = this.handleContentMouseLeave.bind(this);
|
|
79
|
+
}
|
|
80
|
+
componentDidMount() {
|
|
81
|
+
this.safeIsMounted = true;
|
|
82
|
+
}
|
|
83
|
+
componentDidUpdate() {
|
|
84
|
+
const { isOpen, destroyed } = this.state;
|
|
85
|
+
if (isOpen === true && destroyed === true) {
|
|
86
|
+
this.setState({ destroyed: false });
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
componentWillUnmount() {
|
|
90
|
+
this.safeIsMounted = false;
|
|
91
|
+
}
|
|
92
|
+
static getDerivedStateFromProps(nextProps, prevState) {
|
|
93
|
+
const { isOpen } = nextProps;
|
|
94
|
+
const { prevPropIsOpen } = prevState;
|
|
95
|
+
if (isOpen !== prevPropIsOpen) {
|
|
96
|
+
return {
|
|
97
|
+
isOpen,
|
|
98
|
+
prevPropIsOpen: isOpen
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
return null;
|
|
102
|
+
}
|
|
103
|
+
getInteractionObject(interaction, referenceProps = {}) {
|
|
104
|
+
const { isOpen } = this.props;
|
|
105
|
+
if (isOpen !== void 0)
|
|
106
|
+
return {};
|
|
107
|
+
return {
|
|
108
|
+
[import_interaction.Interaction.CLICK]: {
|
|
109
|
+
handlers: {
|
|
110
|
+
onClick: this.handleTriggerClick
|
|
111
|
+
},
|
|
112
|
+
canClose: () => true
|
|
113
|
+
},
|
|
114
|
+
[import_interaction.Interaction.HOVER]: {
|
|
115
|
+
handlers: {
|
|
116
|
+
onMouseEnter: referenceProps.onMouseEnter || this.handleMouseEnter,
|
|
117
|
+
onPointerEnter: referenceProps.onMouseEnter || this.handleMouseEnter,
|
|
118
|
+
onMouseLeave: referenceProps.onMouseLeave || this.handleMouseLeave,
|
|
119
|
+
onPointerLeave: referenceProps.onMouseLeave || this.handleMouseLeave,
|
|
120
|
+
onClick: this.handleTriggerClick
|
|
121
|
+
},
|
|
122
|
+
canClose: (isOnTrigger, isOnPopper) => !isOnTrigger && !isOnPopper
|
|
123
|
+
}
|
|
124
|
+
}[interaction] || {
|
|
125
|
+
handlers: {},
|
|
126
|
+
canClose: () => true
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
setOpen(opening) {
|
|
130
|
+
const { onOpen } = this.props;
|
|
131
|
+
const { prevPropIsOpen } = this.state;
|
|
132
|
+
if (!this.safeIsMounted)
|
|
133
|
+
return;
|
|
134
|
+
if (prevPropIsOpen === void 0) {
|
|
135
|
+
this.setState({
|
|
136
|
+
isOpen: opening,
|
|
137
|
+
destroyed: false
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
onOpen(opening);
|
|
141
|
+
}
|
|
142
|
+
open() {
|
|
143
|
+
clearTimeout(this.closeTimer);
|
|
144
|
+
const { delayOpen } = this.props;
|
|
145
|
+
this.openTimer = setTimeout(() => this.setOpen(true), delayOpen);
|
|
146
|
+
}
|
|
147
|
+
close() {
|
|
148
|
+
clearTimeout(this.openTimer);
|
|
149
|
+
const { delayClose, onClose = () => null } = this.props;
|
|
150
|
+
this.closeTimer = setTimeout(() => {
|
|
151
|
+
this.setOpen(false);
|
|
152
|
+
onClose();
|
|
153
|
+
}, delayClose);
|
|
154
|
+
}
|
|
155
|
+
handleTriggerClick(e) {
|
|
156
|
+
const { triggerComponent } = this.props;
|
|
157
|
+
const { onClick } = (0, import_ds_utilities.get)(triggerComponent, "props") || {};
|
|
158
|
+
this.open();
|
|
159
|
+
if ((0, import_ds_utilities.isFunction)(onClick))
|
|
160
|
+
onClick(e);
|
|
161
|
+
}
|
|
162
|
+
handleContentMouseEnter() {
|
|
163
|
+
this.isMouseOverContent = true;
|
|
164
|
+
}
|
|
165
|
+
handleContentMouseLeave() {
|
|
166
|
+
this.isMouseOverContent = false;
|
|
167
|
+
const { onClose = () => null } = this.props;
|
|
168
|
+
setTimeout(() => {
|
|
169
|
+
if (!this.isMouseOverTarget) {
|
|
170
|
+
this.setOpen(false);
|
|
171
|
+
onClose();
|
|
172
|
+
}
|
|
173
|
+
}, 10);
|
|
174
|
+
}
|
|
175
|
+
handleMouseEnter() {
|
|
176
|
+
this.isMouseOverTarget = true;
|
|
177
|
+
this.open();
|
|
178
|
+
}
|
|
179
|
+
handleMouseLeave() {
|
|
180
|
+
this.isMouseOverTarget = false;
|
|
181
|
+
setTimeout(() => {
|
|
182
|
+
if (!this.isMouseOverContent) {
|
|
183
|
+
this.close();
|
|
184
|
+
}
|
|
185
|
+
}, 10);
|
|
186
|
+
}
|
|
187
|
+
updatePopoverState(popperData) {
|
|
188
|
+
this.handlePopperPlacementChange(popperData.placement);
|
|
189
|
+
return popperData;
|
|
190
|
+
}
|
|
191
|
+
handleDestroyContent() {
|
|
192
|
+
this.setState({ destroyed: true });
|
|
193
|
+
}
|
|
194
|
+
renderTarget({ ref }) {
|
|
195
|
+
const { isOpen } = this.state;
|
|
196
|
+
const { triggerComponent, interactionType, renderReference } = this.props;
|
|
197
|
+
const componentInnerRef = (0, import_ds_utilities.get)(triggerComponent, ["props", "innerRef"], () => null);
|
|
198
|
+
const compRef = (0, import_ds_utilities.isDOMTypeElement)(triggerComponent) ? { ref } : { innerRef: (0, import_ds_utilities.mergeRefs)(ref, componentInnerRef) };
|
|
199
|
+
const triggerHandler = this.getInteractionObject(interactionType, triggerComponent.props).handlers;
|
|
200
|
+
const targetProps = __spreadProps(__spreadValues(__spreadValues({}, triggerHandler), compRef), {
|
|
201
|
+
"aria-haspopup": true,
|
|
202
|
+
"aria-expanded": isOpen
|
|
203
|
+
});
|
|
204
|
+
if (renderReference) {
|
|
205
|
+
return renderReference(__spreadValues({
|
|
206
|
+
ref
|
|
207
|
+
}, targetProps));
|
|
208
|
+
}
|
|
209
|
+
return (0, import_ds_utilities.getComponentFromProps)(triggerComponent, targetProps);
|
|
210
|
+
}
|
|
211
|
+
render() {
|
|
212
|
+
const { isOpen, destroyed } = this.state;
|
|
213
|
+
const {
|
|
214
|
+
placement,
|
|
215
|
+
interactionType,
|
|
216
|
+
showArrow,
|
|
217
|
+
arrowSize,
|
|
218
|
+
arrowGap,
|
|
219
|
+
preventOverflow,
|
|
220
|
+
children: customPopper,
|
|
221
|
+
usePortal,
|
|
222
|
+
blockName,
|
|
223
|
+
contentComponent,
|
|
224
|
+
openAnimationConfig,
|
|
225
|
+
closeAnimationConfig,
|
|
226
|
+
modifiers,
|
|
227
|
+
referenceNode,
|
|
228
|
+
containerProps,
|
|
229
|
+
zIndex,
|
|
230
|
+
hideIfNotVisible
|
|
231
|
+
} = this.props;
|
|
232
|
+
const allModifiers = __spreadValues({
|
|
233
|
+
offset: {
|
|
234
|
+
enabled: showArrow,
|
|
235
|
+
offset: `0, ${arrowSize + arrowGap}`
|
|
236
|
+
},
|
|
237
|
+
preventOverflow: {
|
|
238
|
+
enabled: true,
|
|
239
|
+
padding: 0,
|
|
240
|
+
boundariesElement: preventOverflow
|
|
241
|
+
},
|
|
242
|
+
updatePopoverState: {
|
|
243
|
+
enabled: true,
|
|
244
|
+
fn: this.updatePopoverState,
|
|
245
|
+
order: 900
|
|
246
|
+
}
|
|
247
|
+
}, modifiers);
|
|
248
|
+
const triggerHandler = this.getInteractionObject(interactionType).handlers;
|
|
249
|
+
const popperContentProps = {
|
|
250
|
+
hideIfNotVisible,
|
|
251
|
+
containerProps,
|
|
252
|
+
isOpen,
|
|
253
|
+
destroyed: isOpen ? false : destroyed,
|
|
254
|
+
arrowSize,
|
|
255
|
+
blockName,
|
|
256
|
+
showArrow,
|
|
257
|
+
modifiers: allModifiers,
|
|
258
|
+
contentComponent,
|
|
259
|
+
onContentDestroyed: this.handleDestroyContent,
|
|
260
|
+
onClickOutside: () => this.close(),
|
|
261
|
+
placement,
|
|
262
|
+
usePortal,
|
|
263
|
+
openAnimationConfig,
|
|
264
|
+
closeAnimationConfig,
|
|
265
|
+
onMouseEnter: interactionType === import_interaction.Interaction.HOVER ? this.handleContentMouseEnter : void 0,
|
|
266
|
+
onMouseLeave: interactionType === import_interaction.Interaction.HOVER ? this.handleContentMouseLeave : void 0,
|
|
267
|
+
referenceNode,
|
|
268
|
+
zIndex
|
|
269
|
+
};
|
|
270
|
+
if (customPopper && typeof customPopper === "function") {
|
|
271
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_popper.Manager, null, customPopper({
|
|
272
|
+
Reference: import_react_popper.Reference,
|
|
273
|
+
triggerHandler,
|
|
274
|
+
content: /* @__PURE__ */ import_react.default.createElement(import_PopperContent.default, __spreadValues({}, popperContentProps))
|
|
275
|
+
}));
|
|
276
|
+
}
|
|
277
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_popper.Manager, null, /* @__PURE__ */ import_react.default.createElement(import_react_popper.Reference, null, this.renderTarget), /* @__PURE__ */ import_react.default.createElement(import_PopperContent.default, __spreadValues({}, popperContentProps)));
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
module.exports = __toCommonJS(PopperImpl_exports);
|
|
281
|
+
//# sourceMappingURL=PopperImpl.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/PopperImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { isFunction, get, isDOMTypeElement, getComponentFromProps, mergeRefs } from '@elliemae/ds-utilities';\nimport { Manager, Reference } from '@elliemae/react-popper';\nimport memoizeOne from 'memoize-one';\nimport PopperContent from './PopperContent';\nimport { Interaction } from './interaction';\n\nexport default class PopperImpl extends Component<any, any> {\n // we use safeIsMounted because isMounted is not allowed by React.\n safeIsMounted = false;\n\n handlePopperPlacementChange = memoizeOne((placement) => {\n const { onPlacementChange } = this.props;\n onPlacementChange(placement);\n });\n\n constructor(props) {\n super(props);\n this.state = {\n isOpen: false,\n destroyed: true,\n };\n // TODO: Fix the autobinding to remove this!!\n this.handleMouseEnter = this.handleMouseEnter.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleTriggerClick = this.handleTriggerClick.bind(this);\n this.renderTarget = this.renderTarget.bind(this);\n this.updatePopoverState = this.updatePopoverState.bind(this);\n this.handlePopperPlacementChange = this.handlePopperPlacementChange.bind(\n this,\n );\n this.handleDestroyContent = this.handleDestroyContent.bind(this);\n this.handleContentMouseEnter = this.handleContentMouseEnter.bind(this);\n this.handleContentMouseLeave = this.handleContentMouseLeave.bind(this);\n }\n\n // this is needed to prevent setState on unmounted components\n componentDidMount() {\n this.safeIsMounted = true;\n }\n\n componentDidUpdate() {\n const { isOpen, destroyed } = this.state;\n if (isOpen === true && destroyed === true) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ destroyed: false });\n }\n }\n\n componentWillUnmount() {\n this.safeIsMounted = false;\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const { isOpen } = nextProps;\n const { prevPropIsOpen } = prevState;\n // todo: this causes multiple rerenders\n if (isOpen !== prevPropIsOpen) {\n return {\n isOpen,\n prevPropIsOpen: isOpen,\n };\n }\n return null;\n }\n\n getInteractionObject(interaction, referenceProps = {}) {\n const { isOpen } = this.props;\n if (isOpen !== undefined) return {};\n return (\n {\n [Interaction.CLICK]: {\n handlers: {\n onClick: this.handleTriggerClick,\n },\n canClose: () => true,\n },\n [Interaction.HOVER]: {\n handlers: {\n onMouseEnter: referenceProps.onMouseEnter || this.handleMouseEnter,\n onPointerEnter: referenceProps.onMouseEnter || this.handleMouseEnter,\n onMouseLeave: referenceProps.onMouseLeave || this.handleMouseLeave,\n onPointerLeave: referenceProps.onMouseLeave || this.handleMouseLeave,\n onClick: this.handleTriggerClick,\n },\n canClose: (isOnTrigger, isOnPopper) => !isOnTrigger && !isOnPopper,\n },\n }[interaction] || {\n handlers: {},\n canClose: () => true,\n }\n );\n }\n\n setOpen(opening) {\n const { onOpen } = this.props;\n const { prevPropIsOpen } = this.state;\n if (!this.safeIsMounted) return;\n\n if (prevPropIsOpen === undefined) {\n this.setState({\n isOpen: opening,\n destroyed: false,\n });\n }\n onOpen(opening);\n }\n\n open() {\n clearTimeout(this.closeTimer);\n const { delayOpen } = this.props;\n this.openTimer = setTimeout(() => this.setOpen(true), delayOpen);\n }\n\n close() {\n clearTimeout(this.openTimer);\n const { delayClose, onClose = () => null } = this.props;\n this.closeTimer = setTimeout(() => {\n this.setOpen(false);\n onClose();\n }, delayClose);\n }\n\n handleTriggerClick(e) {\n const { triggerComponent } = this.props;\n const { onClick } = get(triggerComponent, 'props') || {};\n\n this.open();\n\n if (isFunction(onClick)) onClick(e);\n }\n\n handleContentMouseEnter() {\n this.isMouseOverContent = true;\n }\n\n handleContentMouseLeave() {\n this.isMouseOverContent = false;\n const { onClose = () => null } = this.props;\n setTimeout(() => {\n if (!this.isMouseOverTarget) {\n this.setOpen(false);\n onClose();\n }\n }, 10);\n }\n\n handleMouseEnter() {\n this.isMouseOverTarget = true;\n this.open();\n }\n\n handleMouseLeave() {\n this.isMouseOverTarget = false;\n setTimeout(() => {\n if (!this.isMouseOverContent) {\n this.close();\n }\n }, 10);\n }\n\n updatePopoverState(popperData) {\n this.handlePopperPlacementChange(popperData.placement);\n return popperData;\n }\n\n handleDestroyContent() {\n this.setState({ destroyed: true });\n }\n\n renderTarget({ ref }) {\n const { isOpen } = this.state;\n const { triggerComponent, interactionType, renderReference } = this.props;\n\n const componentInnerRef = get(\n triggerComponent,\n ['props', 'innerRef'],\n () => null,\n );\n const compRef = isDOMTypeElement(triggerComponent)\n ? { ref }\n : { innerRef: mergeRefs(ref, componentInnerRef) };\n\n const triggerHandler = this.getInteractionObject(\n interactionType,\n triggerComponent.props,\n ).handlers;\n\n const targetProps = {\n ...triggerHandler,\n ...compRef,\n 'aria-haspopup': true,\n 'aria-expanded': isOpen,\n };\n\n if (renderReference) {\n return renderReference({\n ref,\n ...targetProps,\n });\n }\n\n return getComponentFromProps(triggerComponent, targetProps);\n }\n\n render() {\n const { isOpen, destroyed } = this.state;\n\n const {\n placement,\n interactionType,\n showArrow,\n arrowSize,\n arrowGap,\n preventOverflow,\n children: customPopper,\n usePortal,\n blockName,\n contentComponent,\n openAnimationConfig,\n closeAnimationConfig,\n modifiers,\n referenceNode,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const allModifiers = {\n offset: {\n enabled: showArrow,\n offset: `0, ${arrowSize + arrowGap}`,\n },\n preventOverflow: {\n enabled: true,\n padding: 0,\n boundariesElement: preventOverflow,\n },\n updatePopoverState: {\n enabled: true,\n fn: this.updatePopoverState,\n order: 900,\n },\n ...modifiers,\n };\n const triggerHandler = this.getInteractionObject(interactionType).handlers;\n\n const popperContentProps = {\n hideIfNotVisible,\n containerProps,\n isOpen,\n destroyed: isOpen ? false : destroyed,\n arrowSize,\n blockName,\n showArrow,\n modifiers: allModifiers,\n contentComponent,\n onContentDestroyed: this.handleDestroyContent,\n onClickOutside: () => this.close(),\n placement,\n usePortal,\n openAnimationConfig,\n closeAnimationConfig,\n onMouseEnter:\n interactionType === Interaction.HOVER\n ? this.handleContentMouseEnter\n : undefined,\n onMouseLeave:\n interactionType === Interaction.HOVER\n ? this.handleContentMouseLeave\n : undefined,\n referenceNode,\n zIndex,\n };\n\n if (customPopper && typeof customPopper === 'function') {\n return (\n <Manager>\n {customPopper({\n Reference,\n triggerHandler,\n content: <PopperContent {...popperContentProps} />,\n })}\n </Manager>\n );\n }\n\n return (\n <Manager>\n <Reference>{this.renderTarget}</Reference>\n <PopperContent {...popperContentProps} />\n </Manager>\n );\n }\n}\n\nexport { Reference, PopperContent };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|