@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.
Files changed (48) hide show
  1. package/cjs/DSPopper.js +42 -55
  2. package/cjs/PopperContent.js +116 -146
  3. package/cjs/PopperImpl.js +273 -322
  4. package/cjs/getArrowStylesBySize.js +10 -6
  5. package/cjs/index.js +1 -20
  6. package/cjs/interaction.js +2 -3
  7. package/cjs/positions.js +2 -3
  8. package/cjs/props.js +10 -27
  9. package/esm/DSPopper.js +40 -53
  10. package/esm/PopperContent.js +113 -137
  11. package/esm/PopperImpl.js +273 -314
  12. package/esm/getArrowStylesBySize.js +8 -4
  13. package/esm/index.js +0 -19
  14. package/esm/interaction.js +2 -3
  15. package/esm/positions.js +2 -3
  16. package/esm/props.js +10 -27
  17. package/package.json +56 -11
  18. package/types/DSPopper.d.ts +188 -0
  19. package/types/PopperContent.d.ts +21 -0
  20. package/types/PopperImpl.d.ts +52 -0
  21. package/types/getArrowStylesBySize.d.ts +2 -0
  22. package/types/index.d.ts +3 -0
  23. package/types/interaction.d.ts +5 -0
  24. package/types/positions.d.ts +18 -0
  25. package/types/props.d.ts +119 -0
  26. package/DSPopper/package.json +0 -10
  27. package/PopperContent/package.json +0 -10
  28. package/PopperImpl/package.json +0 -10
  29. package/cjs/DSPopper.js.map +0 -1
  30. package/cjs/PopperContent.js.map +0 -1
  31. package/cjs/PopperImpl.js.map +0 -1
  32. package/cjs/getArrowStylesBySize.js.map +0 -1
  33. package/cjs/index.js.map +0 -1
  34. package/cjs/interaction.js.map +0 -1
  35. package/cjs/positions.js.map +0 -1
  36. package/cjs/props.js.map +0 -1
  37. package/esm/DSPopper.js.map +0 -1
  38. package/esm/PopperContent.js.map +0 -1
  39. package/esm/PopperImpl.js.map +0 -1
  40. package/esm/getArrowStylesBySize.js.map +0 -1
  41. package/esm/index.js.map +0 -1
  42. package/esm/interaction.js.map +0 -1
  43. package/esm/positions.js.map +0 -1
  44. package/esm/props.js.map +0 -1
  45. package/getArrowStylesBySize/package.json +0 -10
  46. package/interaction/package.json +0 -10
  47. package/positions/package.json +0 -10
  48. 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 _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
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('@babel/runtime/helpers/extends');
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['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; }
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
- function PopperImpl(props) {
50
- var _this;
51
-
52
- _classCallCheck__default['default'](this, PopperImpl);
53
-
54
- _this = _super.call(this, props);
55
- _this.safeIsMounted = false;
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
- _this.state = {
40
+ this.state = {
61
41
  isOpen: false,
62
42
  destroyed: true
63
43
  }; // TODO: Fix the autobinding to remove this!!
64
44
 
65
- _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized__default['default'](_this));
66
- _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized__default['default'](_this));
67
- _this.handleTriggerClick = _this.handleTriggerClick.bind(_assertThisInitialized__default['default'](_this));
68
- _this.renderTarget = _this.renderTarget.bind(_assertThisInitialized__default['default'](_this));
69
- _this.updatePopoverState = _this.updatePopoverState.bind(_assertThisInitialized__default['default'](_this));
70
- _this.handlePopperPlacementChange = _this.handlePopperPlacementChange.bind(_assertThisInitialized__default['default'](_this));
71
- _this.handleDestroyContent = _this.handleDestroyContent.bind(_assertThisInitialized__default['default'](_this));
72
- _this.handleContentMouseEnter = _this.handleContentMouseEnter.bind(_assertThisInitialized__default['default'](_this));
73
- _this.handleContentMouseLeave = _this.handleContentMouseLeave.bind(_assertThisInitialized__default['default'](_this));
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
- _createClass__default['default'](PopperImpl, [{
79
- key: "componentDidMount",
80
- value: function componentDidMount() {
81
- this.safeIsMounted = true;
82
- }
83
- }, {
84
- key: "componentDidUpdate",
85
- value: function componentDidUpdate() {
86
- var _this$state = this.state,
87
- isOpen = _this$state.isOpen,
88
- destroyed = _this$state.destroyed;
89
-
90
- if (isOpen === true && destroyed === true) {
91
- // eslint-disable-next-line react/no-did-update-set-state
92
- this.setState({
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
- key: "componentWillUnmount",
99
- value: function componentWillUnmount() {
100
- this.safeIsMounted = false;
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
- key: "getInteractionObject",
104
- value: function getInteractionObject(interaction$1) {
105
- var _Interaction$CLICK$In;
106
-
107
- var referenceProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
108
- var isOpen = this.props.isOpen;
109
- if (isOpen !== undefined) return {};
110
- return (_Interaction$CLICK$In = {}, _defineProperty__default['default'](_Interaction$CLICK$In, interaction.Interaction.CLICK, {
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: function canClose() {
115
- return true;
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: function canClose(isOnTrigger, isOnPopper) {
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
- onOpen(opening);
150
- }
151
- }, {
152
- key: "open",
153
- value: function open() {
154
- var _this2 = this;
155
-
156
- clearTimeout(this.closeTimer);
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
- this.open();
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
- destroyed: true
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
- var targetProps = _objectSpread(_objectSpread(_objectSpread({}, triggerHandler), compRef), {}, {
265
- 'aria-haspopup': true,
266
- 'aria-expanded': isOpen
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
- if (renderReference) {
270
- return renderReference(_objectSpread({
271
- ref: ref
272
- }, targetProps));
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
- return dsUtilities.getComponentFromProps(triggerComponent, targetProps);
276
- }
277
- }, {
278
- key: "render",
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
- if (customPopper && typeof customPopper === 'function') {
347
- return /*#__PURE__*/React__default['default'].createElement(reactPopper.Manager, null, customPopper({
348
- Reference: reactPopper.Reference,
349
- triggerHandler: triggerHandler,
350
- content: /*#__PURE__*/React__default['default'].createElement(PopperContent, popperContentProps)
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
- return /*#__PURE__*/React__default['default'].createElement(reactPopper.Manager, null, /*#__PURE__*/React__default['default'].createElement(reactPopper.Reference, null, this.renderTarget), /*#__PURE__*/React__default['default'].createElement(PopperContent, popperContentProps));
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
- return null;
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
- return PopperImpl;
374
- }(React.Component);
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['default'] = PopperImpl;
384
- //# sourceMappingURL=PopperImpl.js.map
335
+ exports["default"] = PopperImpl;