@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/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
|
|
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 '
|
|
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
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
|
|
32
|
+
this.state = {
|
|
47
33
|
isOpen: false,
|
|
48
34
|
destroyed: true
|
|
49
35
|
}; // TODO: Fix the autobinding to remove this!!
|
|
50
36
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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:
|
|
101
|
-
|
|
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:
|
|
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
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
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
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
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
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
360
|
-
}
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|