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