@elliemae/ds-popper 1.60.0 → 2.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSPopper.js +42 -55
- package/cjs/PopperContent.js +116 -146
- package/cjs/PopperImpl.js +273 -322
- package/cjs/getArrowStylesBySize.js +10 -6
- package/cjs/index.js +1 -20
- package/cjs/interaction.js +2 -3
- package/cjs/positions.js +2 -3
- package/cjs/props.js +10 -27
- package/esm/DSPopper.js +40 -53
- package/esm/PopperContent.js +113 -137
- package/esm/PopperImpl.js +273 -314
- package/esm/getArrowStylesBySize.js +8 -4
- package/esm/index.js +0 -19
- package/esm/interaction.js +2 -3
- package/esm/positions.js +2 -3
- package/esm/props.js +10 -27
- package/package.json +56 -11
- package/types/DSPopper.d.ts +188 -0
- package/types/PopperContent.d.ts +21 -0
- package/types/PopperImpl.d.ts +52 -0
- package/types/getArrowStylesBySize.d.ts +2 -0
- package/types/index.d.ts +3 -0
- package/types/interaction.d.ts +5 -0
- package/types/positions.d.ts +18 -0
- package/types/props.d.ts +119 -0
- package/DSPopper/package.json +0 -10
- package/PopperContent/package.json +0 -10
- package/PopperImpl/package.json +0 -10
- package/cjs/DSPopper.js.map +0 -1
- package/cjs/PopperContent.js.map +0 -1
- package/cjs/PopperImpl.js.map +0 -1
- package/cjs/getArrowStylesBySize.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/interaction.js.map +0 -1
- package/cjs/positions.js.map +0 -1
- package/cjs/props.js.map +0 -1
- package/esm/DSPopper.js.map +0 -1
- package/esm/PopperContent.js.map +0 -1
- package/esm/PopperImpl.js.map +0 -1
- package/esm/getArrowStylesBySize.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/esm/interaction.js.map +0 -1
- package/esm/positions.js.map +0 -1
- package/esm/props.js.map +0 -1
- package/getArrowStylesBySize/package.json +0 -10
- package/interaction/package.json +0 -10
- package/positions/package.json +0 -10
- package/props/package.json +0 -10
package/cjs/PopperImpl.js
CHANGED
|
@@ -2,119 +2,112 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
-
var
|
|
7
|
-
var _createClass = require('@babel/runtime/helpers/createClass');
|
|
8
|
-
var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
|
|
9
|
-
var _inherits = require('@babel/runtime/helpers/inherits');
|
|
10
|
-
var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
|
|
11
|
-
var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
|
|
12
|
-
var React = require('react');
|
|
12
|
+
var react = require('react');
|
|
13
13
|
var dsUtilities = require('@elliemae/ds-utilities');
|
|
14
14
|
var reactPopper = require('react-popper');
|
|
15
15
|
var memoizeOne = require('memoize-one');
|
|
16
16
|
var PopperContent = require('./PopperContent.js');
|
|
17
17
|
var interaction = require('./interaction.js');
|
|
18
|
-
require('
|
|
19
|
-
require('react-spring/renderprops.cjs');
|
|
20
|
-
require('@elliemae/ds-overlay');
|
|
21
|
-
require('./getArrowStylesBySize.js');
|
|
18
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
22
19
|
|
|
23
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
24
21
|
|
|
22
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
25
23
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
26
|
-
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
|
|
27
|
-
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
|
|
28
|
-
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
|
|
29
|
-
var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
|
|
30
|
-
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
|
|
31
|
-
var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
24
|
var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
|
|
34
25
|
|
|
35
26
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
36
27
|
|
|
37
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default[
|
|
38
|
-
|
|
39
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
|
|
40
|
-
|
|
41
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
42
|
-
|
|
43
|
-
var PopperImpl = /*#__PURE__*/function (_Component) {
|
|
44
|
-
_inherits__default['default'](PopperImpl, _Component);
|
|
45
|
-
|
|
46
|
-
var _super = _createSuper(PopperImpl);
|
|
47
|
-
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
|
+
class PopperImpl extends react.Component {
|
|
48
30
|
// we use safeIsMounted because isMounted is not allowed by React.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
_this.handlePopperPlacementChange = memoizeOne__default['default'](function (placement) {
|
|
57
|
-
var onPlacementChange = _this.props.onPlacementChange;
|
|
31
|
+
constructor(props) {
|
|
32
|
+
super(props);
|
|
33
|
+
this.safeIsMounted = false;
|
|
34
|
+
this.handlePopperPlacementChange = memoizeOne__default["default"](placement => {
|
|
35
|
+
const {
|
|
36
|
+
onPlacementChange
|
|
37
|
+
} = this.props;
|
|
58
38
|
onPlacementChange(placement);
|
|
59
39
|
});
|
|
60
|
-
|
|
40
|
+
this.state = {
|
|
61
41
|
isOpen: false,
|
|
62
42
|
destroyed: true
|
|
63
43
|
}; // TODO: Fix the autobinding to remove this!!
|
|
64
44
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return _this;
|
|
45
|
+
this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
|
46
|
+
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
|
47
|
+
this.handleTriggerClick = this.handleTriggerClick.bind(this);
|
|
48
|
+
this.renderTarget = this.renderTarget.bind(this);
|
|
49
|
+
this.updatePopoverState = this.updatePopoverState.bind(this);
|
|
50
|
+
this.handlePopperPlacementChange = this.handlePopperPlacementChange.bind(this);
|
|
51
|
+
this.handleDestroyContent = this.handleDestroyContent.bind(this);
|
|
52
|
+
this.handleContentMouseEnter = this.handleContentMouseEnter.bind(this);
|
|
53
|
+
this.handleContentMouseLeave = this.handleContentMouseLeave.bind(this);
|
|
75
54
|
} // this is needed to prevent setState on unmounted components
|
|
76
55
|
|
|
77
56
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
destroyed: false
|
|
94
|
-
});
|
|
95
|
-
}
|
|
57
|
+
componentDidMount() {
|
|
58
|
+
this.safeIsMounted = true;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
componentDidUpdate() {
|
|
62
|
+
const {
|
|
63
|
+
isOpen,
|
|
64
|
+
destroyed
|
|
65
|
+
} = this.state;
|
|
66
|
+
|
|
67
|
+
if (isOpen === true && destroyed === true) {
|
|
68
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
69
|
+
this.setState({
|
|
70
|
+
destroyed: false
|
|
71
|
+
});
|
|
96
72
|
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
componentWillUnmount() {
|
|
76
|
+
this.safeIsMounted = false;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
static getDerivedStateFromProps(nextProps, prevState) {
|
|
80
|
+
const {
|
|
81
|
+
isOpen
|
|
82
|
+
} = nextProps;
|
|
83
|
+
const {
|
|
84
|
+
prevPropIsOpen
|
|
85
|
+
} = prevState; // todo: this causes multiple rerenders
|
|
86
|
+
|
|
87
|
+
if (isOpen !== prevPropIsOpen) {
|
|
88
|
+
return {
|
|
89
|
+
isOpen,
|
|
90
|
+
prevPropIsOpen: isOpen
|
|
91
|
+
};
|
|
101
92
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
93
|
+
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
getInteractionObject(interaction$1) {
|
|
98
|
+
let referenceProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
99
|
+
const {
|
|
100
|
+
isOpen
|
|
101
|
+
} = this.props;
|
|
102
|
+
if (isOpen !== undefined) return {};
|
|
103
|
+
return {
|
|
104
|
+
[interaction.Interaction.CLICK]: {
|
|
111
105
|
handlers: {
|
|
112
106
|
onClick: this.handleTriggerClick
|
|
113
107
|
},
|
|
114
|
-
canClose:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}), _defineProperty__default['default'](_Interaction$CLICK$In, interaction.Interaction.HOVER, {
|
|
108
|
+
canClose: () => true
|
|
109
|
+
},
|
|
110
|
+
[interaction.Interaction.HOVER]: {
|
|
118
111
|
handlers: {
|
|
119
112
|
onMouseEnter: referenceProps.onMouseEnter || this.handleMouseEnter,
|
|
120
113
|
onPointerEnter: referenceProps.onMouseEnter || this.handleMouseEnter,
|
|
@@ -122,263 +115,221 @@ var PopperImpl = /*#__PURE__*/function (_Component) {
|
|
|
122
115
|
onPointerLeave: referenceProps.onMouseLeave || this.handleMouseLeave,
|
|
123
116
|
onClick: this.handleTriggerClick
|
|
124
117
|
},
|
|
125
|
-
canClose:
|
|
126
|
-
return !isOnTrigger && !isOnPopper;
|
|
127
|
-
}
|
|
128
|
-
}), _Interaction$CLICK$In)[interaction$1] || {
|
|
129
|
-
handlers: {},
|
|
130
|
-
canClose: function canClose() {
|
|
131
|
-
return true;
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
}, {
|
|
136
|
-
key: "setOpen",
|
|
137
|
-
value: function setOpen(opening) {
|
|
138
|
-
var onOpen = this.props.onOpen;
|
|
139
|
-
var prevPropIsOpen = this.state.prevPropIsOpen;
|
|
140
|
-
if (!this.safeIsMounted) return;
|
|
141
|
-
|
|
142
|
-
if (prevPropIsOpen === undefined) {
|
|
143
|
-
this.setState({
|
|
144
|
-
isOpen: opening,
|
|
145
|
-
destroyed: false
|
|
146
|
-
});
|
|
118
|
+
canClose: (isOnTrigger, isOnPopper) => !isOnTrigger && !isOnPopper
|
|
147
119
|
}
|
|
120
|
+
}[interaction$1] || {
|
|
121
|
+
handlers: {},
|
|
122
|
+
canClose: () => true
|
|
123
|
+
};
|
|
124
|
+
}
|
|
148
125
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var delayOpen = this.props.delayOpen;
|
|
158
|
-
this.openTimer = setTimeout(function () {
|
|
159
|
-
return _this2.setOpen(true);
|
|
160
|
-
}, delayOpen);
|
|
161
|
-
}
|
|
162
|
-
}, {
|
|
163
|
-
key: "close",
|
|
164
|
-
value: function close() {
|
|
165
|
-
var _this3 = this;
|
|
166
|
-
|
|
167
|
-
clearTimeout(this.openTimer);
|
|
168
|
-
var _this$props = this.props,
|
|
169
|
-
delayClose = _this$props.delayClose,
|
|
170
|
-
_this$props$onClose = _this$props.onClose,
|
|
171
|
-
onClose = _this$props$onClose === void 0 ? function () {
|
|
172
|
-
return null;
|
|
173
|
-
} : _this$props$onClose;
|
|
174
|
-
this.closeTimer = setTimeout(function () {
|
|
175
|
-
_this3.setOpen(false);
|
|
176
|
-
|
|
177
|
-
onClose();
|
|
178
|
-
}, delayClose);
|
|
179
|
-
}
|
|
180
|
-
}, {
|
|
181
|
-
key: "handleTriggerClick",
|
|
182
|
-
value: function handleTriggerClick(e) {
|
|
183
|
-
var triggerComponent = this.props.triggerComponent;
|
|
184
|
-
|
|
185
|
-
var _ref = dsUtilities.get(triggerComponent, 'props') || {},
|
|
186
|
-
onClick = _ref.onClick;
|
|
126
|
+
setOpen(opening) {
|
|
127
|
+
const {
|
|
128
|
+
onOpen
|
|
129
|
+
} = this.props;
|
|
130
|
+
const {
|
|
131
|
+
prevPropIsOpen
|
|
132
|
+
} = this.state;
|
|
133
|
+
if (!this.safeIsMounted) return;
|
|
187
134
|
|
|
188
|
-
|
|
189
|
-
if (dsUtilities.isFunction(onClick)) onClick(e);
|
|
190
|
-
}
|
|
191
|
-
}, {
|
|
192
|
-
key: "handleContentMouseEnter",
|
|
193
|
-
value: function handleContentMouseEnter() {
|
|
194
|
-
this.isMouseOverContent = true;
|
|
195
|
-
}
|
|
196
|
-
}, {
|
|
197
|
-
key: "handleContentMouseLeave",
|
|
198
|
-
value: function handleContentMouseLeave() {
|
|
199
|
-
var _this4 = this;
|
|
200
|
-
|
|
201
|
-
this.isMouseOverContent = false;
|
|
202
|
-
var _this$props$onClose2 = this.props.onClose,
|
|
203
|
-
onClose = _this$props$onClose2 === void 0 ? function () {
|
|
204
|
-
return null;
|
|
205
|
-
} : _this$props$onClose2;
|
|
206
|
-
setTimeout(function () {
|
|
207
|
-
if (!_this4.isMouseOverTarget) {
|
|
208
|
-
_this4.setOpen(false);
|
|
209
|
-
|
|
210
|
-
onClose();
|
|
211
|
-
}
|
|
212
|
-
}, 10);
|
|
213
|
-
}
|
|
214
|
-
}, {
|
|
215
|
-
key: "handleMouseEnter",
|
|
216
|
-
value: function handleMouseEnter() {
|
|
217
|
-
this.isMouseOverTarget = true;
|
|
218
|
-
this.open();
|
|
219
|
-
}
|
|
220
|
-
}, {
|
|
221
|
-
key: "handleMouseLeave",
|
|
222
|
-
value: function handleMouseLeave() {
|
|
223
|
-
var _this5 = this;
|
|
224
|
-
|
|
225
|
-
this.isMouseOverTarget = false;
|
|
226
|
-
setTimeout(function () {
|
|
227
|
-
if (!_this5.isMouseOverContent) {
|
|
228
|
-
_this5.close();
|
|
229
|
-
}
|
|
230
|
-
}, 10);
|
|
231
|
-
}
|
|
232
|
-
}, {
|
|
233
|
-
key: "updatePopoverState",
|
|
234
|
-
value: function updatePopoverState(popperData) {
|
|
235
|
-
this.handlePopperPlacementChange(popperData.placement);
|
|
236
|
-
return popperData;
|
|
237
|
-
}
|
|
238
|
-
}, {
|
|
239
|
-
key: "handleDestroyContent",
|
|
240
|
-
value: function handleDestroyContent() {
|
|
135
|
+
if (prevPropIsOpen === undefined) {
|
|
241
136
|
this.setState({
|
|
242
|
-
|
|
137
|
+
isOpen: opening,
|
|
138
|
+
destroyed: false
|
|
243
139
|
});
|
|
244
140
|
}
|
|
245
|
-
}, {
|
|
246
|
-
key: "renderTarget",
|
|
247
|
-
value: function renderTarget(_ref2) {
|
|
248
|
-
var ref = _ref2.ref;
|
|
249
|
-
var isOpen = this.state.isOpen;
|
|
250
|
-
var _this$props2 = this.props,
|
|
251
|
-
triggerComponent = _this$props2.triggerComponent,
|
|
252
|
-
interactionType = _this$props2.interactionType,
|
|
253
|
-
renderReference = _this$props2.renderReference;
|
|
254
|
-
var componentInnerRef = dsUtilities.get(triggerComponent, ['props', 'innerRef'], function () {
|
|
255
|
-
return null;
|
|
256
|
-
});
|
|
257
|
-
var compRef = dsUtilities.isDOMTypeElement(triggerComponent) ? {
|
|
258
|
-
ref: ref
|
|
259
|
-
} : {
|
|
260
|
-
innerRef: dsUtilities.mergeRefs(ref, componentInnerRef)
|
|
261
|
-
};
|
|
262
|
-
var triggerHandler = this.getInteractionObject(interactionType, triggerComponent.props).handlers;
|
|
263
141
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
142
|
+
onOpen(opening);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
open() {
|
|
146
|
+
clearTimeout(this.closeTimer);
|
|
147
|
+
const {
|
|
148
|
+
delayOpen
|
|
149
|
+
} = this.props;
|
|
150
|
+
this.openTimer = setTimeout(() => this.setOpen(true), delayOpen);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
close() {
|
|
154
|
+
clearTimeout(this.openTimer);
|
|
155
|
+
const {
|
|
156
|
+
delayClose,
|
|
157
|
+
onClose = () => null
|
|
158
|
+
} = this.props;
|
|
159
|
+
this.closeTimer = setTimeout(() => {
|
|
160
|
+
this.setOpen(false);
|
|
161
|
+
onClose();
|
|
162
|
+
}, delayClose);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
handleTriggerClick(e) {
|
|
166
|
+
const {
|
|
167
|
+
triggerComponent
|
|
168
|
+
} = this.props;
|
|
169
|
+
const {
|
|
170
|
+
onClick
|
|
171
|
+
} = dsUtilities.get(triggerComponent, 'props') || {};
|
|
172
|
+
this.open();
|
|
173
|
+
if (dsUtilities.isFunction(onClick)) onClick(e);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
handleContentMouseEnter() {
|
|
177
|
+
this.isMouseOverContent = true;
|
|
178
|
+
}
|
|
268
179
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
180
|
+
handleContentMouseLeave() {
|
|
181
|
+
this.isMouseOverContent = false;
|
|
182
|
+
const {
|
|
183
|
+
onClose = () => null
|
|
184
|
+
} = this.props;
|
|
185
|
+
setTimeout(() => {
|
|
186
|
+
if (!this.isMouseOverTarget) {
|
|
187
|
+
this.setOpen(false);
|
|
188
|
+
onClose();
|
|
273
189
|
}
|
|
190
|
+
}, 10);
|
|
191
|
+
}
|
|
274
192
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
value: function render() {
|
|
280
|
-
var _this6 = this;
|
|
281
|
-
|
|
282
|
-
var _this$state2 = this.state,
|
|
283
|
-
isOpen = _this$state2.isOpen,
|
|
284
|
-
destroyed = _this$state2.destroyed;
|
|
285
|
-
var _this$props3 = this.props,
|
|
286
|
-
placement = _this$props3.placement,
|
|
287
|
-
interactionType = _this$props3.interactionType,
|
|
288
|
-
showArrow = _this$props3.showArrow,
|
|
289
|
-
arrowSize = _this$props3.arrowSize,
|
|
290
|
-
arrowGap = _this$props3.arrowGap,
|
|
291
|
-
preventOverflow = _this$props3.preventOverflow,
|
|
292
|
-
customPopper = _this$props3.children,
|
|
293
|
-
usePortal = _this$props3.usePortal,
|
|
294
|
-
blockName = _this$props3.blockName,
|
|
295
|
-
contentComponent = _this$props3.contentComponent,
|
|
296
|
-
openAnimationConfig = _this$props3.openAnimationConfig,
|
|
297
|
-
closeAnimationConfig = _this$props3.closeAnimationConfig,
|
|
298
|
-
modifiers = _this$props3.modifiers,
|
|
299
|
-
referenceNode = _this$props3.referenceNode,
|
|
300
|
-
containerProps = _this$props3.containerProps,
|
|
301
|
-
zIndex = _this$props3.zIndex,
|
|
302
|
-
hideIfNotVisible = _this$props3.hideIfNotVisible;
|
|
303
|
-
|
|
304
|
-
var allModifiers = _objectSpread({
|
|
305
|
-
offset: {
|
|
306
|
-
enabled: showArrow,
|
|
307
|
-
offset: "0, ".concat(arrowSize + arrowGap)
|
|
308
|
-
},
|
|
309
|
-
preventOverflow: {
|
|
310
|
-
enabled: true,
|
|
311
|
-
padding: 0,
|
|
312
|
-
boundariesElement: preventOverflow
|
|
313
|
-
},
|
|
314
|
-
updatePopoverState: {
|
|
315
|
-
enabled: true,
|
|
316
|
-
fn: this.updatePopoverState,
|
|
317
|
-
order: 900
|
|
318
|
-
}
|
|
319
|
-
}, modifiers);
|
|
320
|
-
|
|
321
|
-
var triggerHandler = this.getInteractionObject(interactionType).handlers;
|
|
322
|
-
var popperContentProps = {
|
|
323
|
-
hideIfNotVisible: hideIfNotVisible,
|
|
324
|
-
containerProps: containerProps,
|
|
325
|
-
isOpen: isOpen,
|
|
326
|
-
destroyed: isOpen ? false : destroyed,
|
|
327
|
-
arrowSize: arrowSize,
|
|
328
|
-
blockName: blockName,
|
|
329
|
-
showArrow: showArrow,
|
|
330
|
-
modifiers: allModifiers,
|
|
331
|
-
contentComponent: contentComponent,
|
|
332
|
-
onContentDestroyed: this.handleDestroyContent,
|
|
333
|
-
onClickOutside: function onClickOutside() {
|
|
334
|
-
return _this6.close();
|
|
335
|
-
},
|
|
336
|
-
placement: placement,
|
|
337
|
-
usePortal: usePortal,
|
|
338
|
-
openAnimationConfig: openAnimationConfig,
|
|
339
|
-
closeAnimationConfig: closeAnimationConfig,
|
|
340
|
-
onMouseEnter: interactionType === interaction.Interaction.HOVER ? this.handleContentMouseEnter : undefined,
|
|
341
|
-
onMouseLeave: interactionType === interaction.Interaction.HOVER ? this.handleContentMouseLeave : undefined,
|
|
342
|
-
referenceNode: referenceNode,
|
|
343
|
-
zIndex: zIndex
|
|
344
|
-
};
|
|
193
|
+
handleMouseEnter() {
|
|
194
|
+
this.isMouseOverTarget = true;
|
|
195
|
+
this.open();
|
|
196
|
+
}
|
|
345
197
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
}));
|
|
198
|
+
handleMouseLeave() {
|
|
199
|
+
this.isMouseOverTarget = false;
|
|
200
|
+
setTimeout(() => {
|
|
201
|
+
if (!this.isMouseOverContent) {
|
|
202
|
+
this.close();
|
|
352
203
|
}
|
|
204
|
+
}, 10);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
updatePopoverState(popperData) {
|
|
208
|
+
this.handlePopperPlacementChange(popperData.placement);
|
|
209
|
+
return popperData;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
handleDestroyContent() {
|
|
213
|
+
this.setState({
|
|
214
|
+
destroyed: true
|
|
215
|
+
});
|
|
216
|
+
}
|
|
353
217
|
|
|
354
|
-
|
|
218
|
+
renderTarget(_ref) {
|
|
219
|
+
let {
|
|
220
|
+
ref
|
|
221
|
+
} = _ref;
|
|
222
|
+
const {
|
|
223
|
+
isOpen
|
|
224
|
+
} = this.state;
|
|
225
|
+
const {
|
|
226
|
+
triggerComponent,
|
|
227
|
+
interactionType,
|
|
228
|
+
renderReference
|
|
229
|
+
} = this.props;
|
|
230
|
+
const componentInnerRef = dsUtilities.get(triggerComponent, ['props', 'innerRef'], () => null);
|
|
231
|
+
const compRef = dsUtilities.isDOMTypeElement(triggerComponent) ? {
|
|
232
|
+
ref
|
|
233
|
+
} : {
|
|
234
|
+
innerRef: dsUtilities.mergeRefs(ref, componentInnerRef)
|
|
235
|
+
};
|
|
236
|
+
const triggerHandler = this.getInteractionObject(interactionType, triggerComponent.props).handlers;
|
|
237
|
+
|
|
238
|
+
const targetProps = _objectSpread(_objectSpread(_objectSpread({}, triggerHandler), compRef), {}, {
|
|
239
|
+
'aria-haspopup': true,
|
|
240
|
+
'aria-expanded': isOpen
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
if (renderReference) {
|
|
244
|
+
return renderReference(_objectSpread({
|
|
245
|
+
ref
|
|
246
|
+
}, targetProps));
|
|
355
247
|
}
|
|
356
|
-
}], [{
|
|
357
|
-
key: "getDerivedStateFromProps",
|
|
358
|
-
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
359
|
-
var isOpen = nextProps.isOpen;
|
|
360
|
-
var prevPropIsOpen = prevState.prevPropIsOpen; // todo: this causes multiple rerenders
|
|
361
|
-
|
|
362
|
-
if (isOpen !== prevPropIsOpen) {
|
|
363
|
-
return {
|
|
364
|
-
isOpen: isOpen,
|
|
365
|
-
prevPropIsOpen: isOpen
|
|
366
|
-
};
|
|
367
|
-
}
|
|
368
248
|
|
|
369
|
-
|
|
249
|
+
return dsUtilities.getComponentFromProps(triggerComponent, targetProps);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
render() {
|
|
253
|
+
const {
|
|
254
|
+
isOpen,
|
|
255
|
+
destroyed
|
|
256
|
+
} = this.state;
|
|
257
|
+
const {
|
|
258
|
+
placement,
|
|
259
|
+
interactionType,
|
|
260
|
+
showArrow,
|
|
261
|
+
arrowSize,
|
|
262
|
+
arrowGap,
|
|
263
|
+
preventOverflow,
|
|
264
|
+
children: customPopper,
|
|
265
|
+
usePortal,
|
|
266
|
+
blockName,
|
|
267
|
+
contentComponent,
|
|
268
|
+
openAnimationConfig,
|
|
269
|
+
closeAnimationConfig,
|
|
270
|
+
modifiers,
|
|
271
|
+
referenceNode,
|
|
272
|
+
containerProps,
|
|
273
|
+
zIndex,
|
|
274
|
+
hideIfNotVisible
|
|
275
|
+
} = this.props;
|
|
276
|
+
|
|
277
|
+
const allModifiers = _objectSpread({
|
|
278
|
+
offset: {
|
|
279
|
+
enabled: showArrow,
|
|
280
|
+
offset: "0, ".concat(arrowSize + arrowGap)
|
|
281
|
+
},
|
|
282
|
+
preventOverflow: {
|
|
283
|
+
enabled: true,
|
|
284
|
+
padding: 0,
|
|
285
|
+
boundariesElement: preventOverflow
|
|
286
|
+
},
|
|
287
|
+
updatePopoverState: {
|
|
288
|
+
enabled: true,
|
|
289
|
+
fn: this.updatePopoverState,
|
|
290
|
+
order: 900
|
|
291
|
+
}
|
|
292
|
+
}, modifiers);
|
|
293
|
+
|
|
294
|
+
const triggerHandler = this.getInteractionObject(interactionType).handlers;
|
|
295
|
+
const popperContentProps = {
|
|
296
|
+
hideIfNotVisible,
|
|
297
|
+
containerProps,
|
|
298
|
+
isOpen,
|
|
299
|
+
destroyed: isOpen ? false : destroyed,
|
|
300
|
+
arrowSize,
|
|
301
|
+
blockName,
|
|
302
|
+
showArrow,
|
|
303
|
+
modifiers: allModifiers,
|
|
304
|
+
contentComponent,
|
|
305
|
+
onContentDestroyed: this.handleDestroyContent,
|
|
306
|
+
onClickOutside: () => this.close(),
|
|
307
|
+
placement,
|
|
308
|
+
usePortal,
|
|
309
|
+
openAnimationConfig,
|
|
310
|
+
closeAnimationConfig,
|
|
311
|
+
onMouseEnter: interactionType === interaction.Interaction.HOVER ? this.handleContentMouseEnter : undefined,
|
|
312
|
+
onMouseLeave: interactionType === interaction.Interaction.HOVER ? this.handleContentMouseLeave : undefined,
|
|
313
|
+
referenceNode,
|
|
314
|
+
zIndex
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
if (customPopper && typeof customPopper === 'function') {
|
|
318
|
+
return /*#__PURE__*/_jsx__default["default"](reactPopper.Manager, {}, void 0, customPopper({
|
|
319
|
+
Reference: reactPopper.Reference,
|
|
320
|
+
triggerHandler,
|
|
321
|
+
content: /*#__PURE__*/jsxRuntime.jsx(PopperContent, _objectSpread({}, popperContentProps))
|
|
322
|
+
}));
|
|
370
323
|
}
|
|
371
|
-
}]);
|
|
372
324
|
|
|
373
|
-
|
|
374
|
-
}
|
|
325
|
+
return /*#__PURE__*/_jsx__default["default"](reactPopper.Manager, {}, void 0, /*#__PURE__*/_jsx__default["default"](reactPopper.Reference, {}, void 0, this.renderTarget), /*#__PURE__*/jsxRuntime.jsx(PopperContent, _objectSpread({}, popperContentProps)));
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
}
|
|
375
329
|
|
|
376
330
|
Object.defineProperty(exports, 'Reference', {
|
|
377
331
|
enumerable: true,
|
|
378
|
-
get: function () {
|
|
379
|
-
return reactPopper.Reference;
|
|
380
|
-
}
|
|
332
|
+
get: function () { return reactPopper.Reference; }
|
|
381
333
|
});
|
|
382
334
|
exports.PopperContent = PopperContent;
|
|
383
|
-
exports[
|
|
384
|
-
//# sourceMappingURL=PopperImpl.js.map
|
|
335
|
+
exports["default"] = PopperImpl;
|