@instructure/ui-popover 8.18.0 → 8.18.1-snapshot.0
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/LICENSE.md +27 -0
- package/es/Popover/index.js +23 -15
- package/lib/Popover/index.js +23 -15
- package/package.json +21 -20
package/LICENSE.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: The MIT License (MIT)
|
|
3
|
+
category: Getting Started
|
|
4
|
+
order: 9
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# The MIT License (MIT)
|
|
8
|
+
|
|
9
|
+
Copyright (c) 2015 Instructure, Inc.
|
|
10
|
+
|
|
11
|
+
**Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
12
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
13
|
+
in the Software without restriction, including without limitation the rights
|
|
14
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
15
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
16
|
+
furnished to do so, subject to the following conditions.**
|
|
17
|
+
|
|
18
|
+
The above copyright notice and this permission notice shall be included in all
|
|
19
|
+
copies or substantial portions of the Software.
|
|
20
|
+
|
|
21
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
22
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
23
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
24
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
25
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
26
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
|
+
SOFTWARE.
|
package/es/Popover/index.js
CHANGED
|
@@ -72,20 +72,22 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
this.show = event => {
|
|
75
|
+
var _this$props$onShowCon, _this$props;
|
|
76
|
+
|
|
75
77
|
if (typeof this.props.isShowingContent === 'undefined') {
|
|
76
78
|
this.setState({
|
|
77
79
|
isShowingContent: true
|
|
78
80
|
});
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
this.props.onShowContent
|
|
83
|
+
(_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
|
|
82
84
|
};
|
|
83
85
|
|
|
84
86
|
this.hide = function (event) {
|
|
85
87
|
let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
86
|
-
const _this$
|
|
87
|
-
onHideContent = _this$
|
|
88
|
-
isShowingContent = _this$
|
|
88
|
+
const _this$props2 = _this.props,
|
|
89
|
+
onHideContent = _this$props2.onHideContent,
|
|
90
|
+
isShowingContent = _this$props2.isShowingContent;
|
|
89
91
|
|
|
90
92
|
if (typeof isShowingContent === 'undefined') {
|
|
91
93
|
// uncontrolled, set state, fire callbacks
|
|
@@ -93,7 +95,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
93
95
|
let isShowingContent = _ref.isShowingContent;
|
|
94
96
|
|
|
95
97
|
if (isShowingContent) {
|
|
96
|
-
onHideContent
|
|
98
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
97
99
|
documentClick
|
|
98
100
|
});
|
|
99
101
|
}
|
|
@@ -104,7 +106,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
104
106
|
});
|
|
105
107
|
} else if (isShowingContent) {
|
|
106
108
|
// controlled, fire callback
|
|
107
|
-
onHideContent
|
|
109
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
108
110
|
documentClick
|
|
109
111
|
});
|
|
110
112
|
}
|
|
@@ -175,21 +177,25 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
175
177
|
};
|
|
176
178
|
|
|
177
179
|
this.handlePositioned = position => {
|
|
180
|
+
var _this$props$onPositio, _this$props3;
|
|
181
|
+
|
|
178
182
|
const placement = position.placement;
|
|
179
183
|
this.setState({
|
|
180
184
|
placement,
|
|
181
185
|
...this.computeOffsets(placement)
|
|
182
186
|
});
|
|
183
|
-
this.props.onPositioned
|
|
187
|
+
(_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
|
|
184
188
|
};
|
|
185
189
|
|
|
186
190
|
this.handlePositionChanged = position => {
|
|
191
|
+
var _this$props$onPositio2, _this$props4;
|
|
192
|
+
|
|
187
193
|
const placement = position.placement;
|
|
188
194
|
this.setState({
|
|
189
195
|
placement,
|
|
190
196
|
...this.computeOffsets(placement)
|
|
191
197
|
});
|
|
192
|
-
this.props.onPositionChanged
|
|
198
|
+
(_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
|
|
193
199
|
};
|
|
194
200
|
|
|
195
201
|
this.state = {
|
|
@@ -276,9 +282,9 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
276
282
|
}
|
|
277
283
|
|
|
278
284
|
computeOffsets(placement) {
|
|
279
|
-
let _this$
|
|
280
|
-
offsetX = _this$
|
|
281
|
-
offsetY = _this$
|
|
285
|
+
let _this$props5 = this.props,
|
|
286
|
+
offsetX = _this$props5.offsetX,
|
|
287
|
+
offsetY = _this$props5.offsetY;
|
|
282
288
|
|
|
283
289
|
if (this.props.shouldAlignArrow && this._view) {
|
|
284
290
|
const secondaryPlacement = parsePlacement(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
|
|
@@ -348,9 +354,9 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
348
354
|
let trigger = callRenderProp(this.props.renderTrigger);
|
|
349
355
|
|
|
350
356
|
if (trigger) {
|
|
351
|
-
const _this$
|
|
352
|
-
on = _this$
|
|
353
|
-
shouldContainFocus = _this$
|
|
357
|
+
const _this$props6 = this.props,
|
|
358
|
+
on = _this$props6.on,
|
|
359
|
+
shouldContainFocus = _this$props6.shouldContainFocus;
|
|
354
360
|
let onClick = void 0;
|
|
355
361
|
let onFocus = void 0;
|
|
356
362
|
let onMouseOut = void 0;
|
|
@@ -430,8 +436,10 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
|
|
|
430
436
|
// TODO: try to type `ref` better, LegacyRef<T> was not compatible
|
|
431
437
|
ref: c => this._view = c,
|
|
432
438
|
elementRef: el => {
|
|
439
|
+
var _this$props$contentRe, _this$props7;
|
|
440
|
+
|
|
433
441
|
this._contentElement = el;
|
|
434
|
-
this.props.contentRef
|
|
442
|
+
(_this$props$contentRe = (_this$props7 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props7, el);
|
|
435
443
|
},
|
|
436
444
|
background: color,
|
|
437
445
|
stacking: this.props.stacking,
|
package/lib/Popover/index.js
CHANGED
|
@@ -92,20 +92,22 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
92
92
|
};
|
|
93
93
|
|
|
94
94
|
this.show = event => {
|
|
95
|
+
var _this$props$onShowCon, _this$props;
|
|
96
|
+
|
|
95
97
|
if (typeof this.props.isShowingContent === 'undefined') {
|
|
96
98
|
this.setState({
|
|
97
99
|
isShowingContent: true
|
|
98
100
|
});
|
|
99
101
|
}
|
|
100
102
|
|
|
101
|
-
this.props.onShowContent
|
|
103
|
+
(_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
|
|
102
104
|
};
|
|
103
105
|
|
|
104
106
|
this.hide = function (event) {
|
|
105
107
|
let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
106
|
-
const _this$
|
|
107
|
-
onHideContent = _this$
|
|
108
|
-
isShowingContent = _this$
|
|
108
|
+
const _this$props2 = _this.props,
|
|
109
|
+
onHideContent = _this$props2.onHideContent,
|
|
110
|
+
isShowingContent = _this$props2.isShowingContent;
|
|
109
111
|
|
|
110
112
|
if (typeof isShowingContent === 'undefined') {
|
|
111
113
|
// uncontrolled, set state, fire callbacks
|
|
@@ -113,7 +115,7 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
113
115
|
let isShowingContent = _ref.isShowingContent;
|
|
114
116
|
|
|
115
117
|
if (isShowingContent) {
|
|
116
|
-
onHideContent
|
|
118
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
117
119
|
documentClick
|
|
118
120
|
});
|
|
119
121
|
}
|
|
@@ -124,7 +126,7 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
124
126
|
});
|
|
125
127
|
} else if (isShowingContent) {
|
|
126
128
|
// controlled, fire callback
|
|
127
|
-
onHideContent
|
|
129
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
128
130
|
documentClick
|
|
129
131
|
});
|
|
130
132
|
}
|
|
@@ -195,21 +197,25 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
195
197
|
};
|
|
196
198
|
|
|
197
199
|
this.handlePositioned = position => {
|
|
200
|
+
var _this$props$onPositio, _this$props3;
|
|
201
|
+
|
|
198
202
|
const placement = position.placement;
|
|
199
203
|
this.setState({
|
|
200
204
|
placement,
|
|
201
205
|
...this.computeOffsets(placement)
|
|
202
206
|
});
|
|
203
|
-
this.props.onPositioned
|
|
207
|
+
(_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
|
|
204
208
|
};
|
|
205
209
|
|
|
206
210
|
this.handlePositionChanged = position => {
|
|
211
|
+
var _this$props$onPositio2, _this$props4;
|
|
212
|
+
|
|
207
213
|
const placement = position.placement;
|
|
208
214
|
this.setState({
|
|
209
215
|
placement,
|
|
210
216
|
...this.computeOffsets(placement)
|
|
211
217
|
});
|
|
212
|
-
this.props.onPositionChanged
|
|
218
|
+
(_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
|
|
213
219
|
};
|
|
214
220
|
|
|
215
221
|
this.state = {
|
|
@@ -296,9 +302,9 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
296
302
|
}
|
|
297
303
|
|
|
298
304
|
computeOffsets(placement) {
|
|
299
|
-
let _this$
|
|
300
|
-
offsetX = _this$
|
|
301
|
-
offsetY = _this$
|
|
305
|
+
let _this$props5 = this.props,
|
|
306
|
+
offsetX = _this$props5.offsetX,
|
|
307
|
+
offsetY = _this$props5.offsetY;
|
|
302
308
|
|
|
303
309
|
if (this.props.shouldAlignArrow && this._view) {
|
|
304
310
|
const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
|
|
@@ -368,9 +374,9 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
368
374
|
let trigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
|
|
369
375
|
|
|
370
376
|
if (trigger) {
|
|
371
|
-
const _this$
|
|
372
|
-
on = _this$
|
|
373
|
-
shouldContainFocus = _this$
|
|
377
|
+
const _this$props6 = this.props,
|
|
378
|
+
on = _this$props6.on,
|
|
379
|
+
shouldContainFocus = _this$props6.shouldContainFocus;
|
|
374
380
|
let onClick = void 0;
|
|
375
381
|
let onFocus = void 0;
|
|
376
382
|
let onMouseOut = void 0;
|
|
@@ -450,8 +456,10 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
|
|
|
450
456
|
// TODO: try to type `ref` better, LegacyRef<T> was not compatible
|
|
451
457
|
ref: c => this._view = c,
|
|
452
458
|
elementRef: el => {
|
|
459
|
+
var _this$props$contentRe, _this$props7;
|
|
460
|
+
|
|
453
461
|
this._contentElement = el;
|
|
454
|
-
this.props.contentRef
|
|
462
|
+
(_this$props$contentRe = (_this$props7 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props7, el);
|
|
455
463
|
},
|
|
456
464
|
background: color,
|
|
457
465
|
stacking: this.props.stacking,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-popover",
|
|
3
|
-
"version": "8.18.0",
|
|
3
|
+
"version": "8.18.1-snapshot.0+435c9ae79",
|
|
4
4
|
"description": "A component for hiding or showing content based on user interaction.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.13.10",
|
|
27
|
-
"@instructure/console": "8.18.0",
|
|
28
|
-
"@instructure/emotion": "8.18.0",
|
|
29
|
-
"@instructure/ui-a11y-utils": "8.18.0",
|
|
30
|
-
"@instructure/ui-dialog": "8.18.0",
|
|
31
|
-
"@instructure/ui-dom-utils": "8.18.0",
|
|
32
|
-
"@instructure/ui-i18n": "8.18.0",
|
|
33
|
-
"@instructure/ui-position": "8.18.0",
|
|
34
|
-
"@instructure/ui-prop-types": "8.18.0",
|
|
35
|
-
"@instructure/ui-react-utils": "8.18.0",
|
|
36
|
-
"@instructure/ui-testable": "8.18.0",
|
|
37
|
-
"@instructure/ui-utils": "8.18.0",
|
|
38
|
-
"@instructure/ui-view": "8.18.0",
|
|
39
|
-
"@instructure/uid": "8.18.0",
|
|
27
|
+
"@instructure/console": "8.18.1-snapshot.0+435c9ae79",
|
|
28
|
+
"@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
|
|
29
|
+
"@instructure/ui-a11y-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
30
|
+
"@instructure/ui-dialog": "8.18.1-snapshot.0+435c9ae79",
|
|
31
|
+
"@instructure/ui-dom-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
32
|
+
"@instructure/ui-i18n": "8.18.1-snapshot.0+435c9ae79",
|
|
33
|
+
"@instructure/ui-position": "8.18.1-snapshot.0+435c9ae79",
|
|
34
|
+
"@instructure/ui-prop-types": "8.18.1-snapshot.0+435c9ae79",
|
|
35
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
36
|
+
"@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
|
|
37
|
+
"@instructure/ui-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
38
|
+
"@instructure/ui-view": "8.18.1-snapshot.0+435c9ae79",
|
|
39
|
+
"@instructure/uid": "8.18.1-snapshot.0+435c9ae79",
|
|
40
40
|
"keycode": "^2",
|
|
41
41
|
"prop-types": "^15"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@instructure/ui-babel-preset": "8.18.0",
|
|
45
|
-
"@instructure/ui-color-utils": "8.18.0",
|
|
46
|
-
"@instructure/ui-test-locator": "8.18.0",
|
|
47
|
-
"@instructure/ui-test-queries": "8.18.0",
|
|
48
|
-
"@instructure/ui-test-utils": "8.18.0"
|
|
44
|
+
"@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
|
|
45
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
46
|
+
"@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
|
|
47
|
+
"@instructure/ui-test-queries": "8.18.1-snapshot.0+435c9ae79",
|
|
48
|
+
"@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=16.8 <=17"
|
|
@@ -53,5 +53,6 @@
|
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
|
-
"sideEffects": false
|
|
56
|
+
"sideEffects": false,
|
|
57
|
+
"gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
|
|
57
58
|
}
|