@instructure/ui-popover 8.12.1-snapshot.7 → 8.13.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/CHANGELOG.md +6 -0
- package/es/Popover/PopoverLocator.js +9 -3
- package/es/Popover/index.js +78 -75
- package/es/Popover/props.js +1 -176
- package/lib/Popover/PopoverLocator.js +11 -4
- package/lib/Popover/index.js +79 -76
- package/lib/Popover/props.js +2 -177
- package/package.json +20 -21
- package/src/Popover/index.tsx +102 -170
- package/src/Popover/props.ts +168 -138
- package/types/Popover/index.d.ts +72 -87
- package/types/Popover/index.d.ts.map +1 -1
- package/types/Popover/props.d.ts +166 -20
- package/types/Popover/props.d.ts.map +1 -1
- package/LICENSE.md +0 -27
package/lib/Popover/index.js
CHANGED
|
@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.
|
|
10
|
+
exports.default = exports.Popover = void 0;
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
|
|
@@ -62,13 +62,24 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
62
62
|
category: components
|
|
63
63
|
tags: overlay, portal, dialog
|
|
64
64
|
---
|
|
65
|
+
@tsProps
|
|
65
66
|
**/
|
|
66
67
|
let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Popover extends _react.Component {
|
|
67
68
|
constructor(props) {
|
|
69
|
+
var _this;
|
|
70
|
+
|
|
68
71
|
super(props);
|
|
72
|
+
_this = this;
|
|
69
73
|
this._handleMouseOver = void 0;
|
|
70
74
|
this._handleMouseOut = void 0;
|
|
75
|
+
this._id = void 0;
|
|
71
76
|
this._raf = [];
|
|
77
|
+
this._trigger = void 0;
|
|
78
|
+
this._view = null;
|
|
79
|
+
this._dialog = null;
|
|
80
|
+
this._contentElement = null;
|
|
81
|
+
this._focusRegion = void 0;
|
|
82
|
+
this.mouseOutTimeout = void 0;
|
|
72
83
|
this.ref = null;
|
|
73
84
|
|
|
74
85
|
this.handleRef = el => {
|
|
@@ -81,27 +92,30 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
81
92
|
};
|
|
82
93
|
|
|
83
94
|
this.show = event => {
|
|
95
|
+
var _this$props$onShowCon, _this$props;
|
|
96
|
+
|
|
84
97
|
if (typeof this.props.isShowingContent === 'undefined') {
|
|
85
98
|
this.setState({
|
|
86
99
|
isShowingContent: true
|
|
87
100
|
});
|
|
88
101
|
}
|
|
89
102
|
|
|
90
|
-
this.props.onShowContent(event);
|
|
103
|
+
(_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
|
|
91
104
|
};
|
|
92
105
|
|
|
93
|
-
this.hide = (event
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
106
|
+
this.hide = function (event) {
|
|
107
|
+
let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
108
|
+
const _this$props2 = _this.props,
|
|
109
|
+
onHideContent = _this$props2.onHideContent,
|
|
110
|
+
isShowingContent = _this$props2.isShowingContent;
|
|
97
111
|
|
|
98
112
|
if (typeof isShowingContent === 'undefined') {
|
|
99
113
|
// uncontrolled, set state, fire callbacks
|
|
100
|
-
|
|
101
|
-
isShowingContent
|
|
102
|
-
|
|
114
|
+
_this.setState(_ref => {
|
|
115
|
+
let isShowingContent = _ref.isShowingContent;
|
|
116
|
+
|
|
103
117
|
if (isShowingContent) {
|
|
104
|
-
onHideContent(event, {
|
|
118
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
105
119
|
documentClick
|
|
106
120
|
});
|
|
107
121
|
}
|
|
@@ -112,7 +126,7 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
112
126
|
});
|
|
113
127
|
} else if (isShowingContent) {
|
|
114
128
|
// controlled, fire callback
|
|
115
|
-
onHideContent(event, {
|
|
129
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
116
130
|
documentClick
|
|
117
131
|
});
|
|
118
132
|
}
|
|
@@ -126,16 +140,17 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
126
140
|
}
|
|
127
141
|
};
|
|
128
142
|
|
|
129
|
-
this.handleDialogDismiss = (
|
|
143
|
+
this.handleDialogDismiss = (event, documentClick) => {
|
|
130
144
|
if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
|
|
131
145
|
const trigger = (0, _findDOMNode.findDOMNode)(this._trigger);
|
|
132
146
|
|
|
133
147
|
if (trigger && typeof trigger.focus === 'function') {
|
|
148
|
+
;
|
|
134
149
|
trigger.focus();
|
|
135
150
|
}
|
|
136
151
|
}
|
|
137
152
|
|
|
138
|
-
this.hide(
|
|
153
|
+
this.hide(event, documentClick);
|
|
139
154
|
};
|
|
140
155
|
|
|
141
156
|
this.handleDialogBlur = event => {
|
|
@@ -170,7 +185,9 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
170
185
|
};
|
|
171
186
|
|
|
172
187
|
this.handleTriggerBlur = event => {
|
|
173
|
-
|
|
188
|
+
const on = this.props.on;
|
|
189
|
+
|
|
190
|
+
if (on && on.indexOf('focus') > -1) {
|
|
174
191
|
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
|
|
175
192
|
if (!(0, _containsActiveElement.containsActiveElement)(this._view)) {
|
|
176
193
|
this.hide(event);
|
|
@@ -180,33 +197,33 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
180
197
|
};
|
|
181
198
|
|
|
182
199
|
this.handlePositioned = position => {
|
|
200
|
+
var _this$props$onPositio, _this$props3;
|
|
201
|
+
|
|
183
202
|
const placement = position.placement;
|
|
184
203
|
this.setState({
|
|
185
204
|
placement,
|
|
186
205
|
...this.computeOffsets(placement)
|
|
187
206
|
});
|
|
188
|
-
this.props.onPositioned(position);
|
|
207
|
+
(_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
|
|
189
208
|
};
|
|
190
209
|
|
|
191
210
|
this.handlePositionChanged = position => {
|
|
211
|
+
var _this$props$onPositio2, _this$props4;
|
|
212
|
+
|
|
192
213
|
const placement = position.placement;
|
|
193
214
|
this.setState({
|
|
194
215
|
placement,
|
|
195
216
|
...this.computeOffsets(placement)
|
|
196
217
|
});
|
|
197
|
-
this.props.onPositionChanged(position);
|
|
218
|
+
(_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
|
|
198
219
|
};
|
|
199
220
|
|
|
200
221
|
this.state = {
|
|
201
222
|
placement: props.placement,
|
|
202
223
|
offsetX: props.offsetX,
|
|
203
|
-
offsetY: props.offsetY
|
|
224
|
+
offsetY: props.offsetY,
|
|
225
|
+
isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : void 0
|
|
204
226
|
};
|
|
205
|
-
|
|
206
|
-
if (typeof props.isShowingContent === 'undefined') {
|
|
207
|
-
this.state.isShowingContent = props.defaultIsShowingContent;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
227
|
this._id = this.props.id || (0, _uid.uid)('Popover');
|
|
211
228
|
this._raf = [];
|
|
212
229
|
this._handleMouseOver = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
|
|
@@ -219,7 +236,6 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
219
236
|
this.hide(event);
|
|
220
237
|
}, 1);
|
|
221
238
|
});
|
|
222
|
-
this.mouseOutTimeout = void 0;
|
|
223
239
|
}
|
|
224
240
|
|
|
225
241
|
get isTooltip() {
|
|
@@ -255,11 +271,11 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
255
271
|
}
|
|
256
272
|
}
|
|
257
273
|
|
|
258
|
-
shouldComponentUpdate(nextProps, nextState
|
|
274
|
+
shouldComponentUpdate(nextProps, nextState) {
|
|
259
275
|
return !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.state, nextState);
|
|
260
276
|
}
|
|
261
277
|
|
|
262
|
-
componentDidUpdate(prevProps, prevState
|
|
278
|
+
componentDidUpdate(prevProps, prevState) {
|
|
263
279
|
if (this._focusRegion && this.isTooltip) {
|
|
264
280
|
// if focus region exists, popover is acting as a tooltip
|
|
265
281
|
// so we manually activate and deactivate the region when showing/hiding
|
|
@@ -286,19 +302,19 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
286
302
|
}
|
|
287
303
|
|
|
288
304
|
computeOffsets(placement) {
|
|
289
|
-
let _this$
|
|
290
|
-
offsetX = _this$
|
|
291
|
-
offsetY = _this$
|
|
305
|
+
let _this$props5 = this.props,
|
|
306
|
+
offsetX = _this$props5.offsetX,
|
|
307
|
+
offsetY = _this$props5.offsetY;
|
|
292
308
|
|
|
293
309
|
if (this.props.shouldAlignArrow && this._view) {
|
|
294
310
|
const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
|
|
295
311
|
// declared in ContextView's styles.js
|
|
296
312
|
|
|
297
|
-
const
|
|
298
|
-
|
|
299
|
-
arrowSize =
|
|
300
|
-
|
|
301
|
-
arrowBorderWidth =
|
|
313
|
+
const _ref2 = this._view.props.styles,
|
|
314
|
+
_ref2$arrowSize = _ref2.arrowSize,
|
|
315
|
+
arrowSize = _ref2$arrowSize === void 0 ? 0 : _ref2$arrowSize,
|
|
316
|
+
_ref2$arrowBorderWidt = _ref2.arrowBorderWidth,
|
|
317
|
+
arrowBorderWidth = _ref2$arrowBorderWidt === void 0 ? 0 : _ref2$arrowBorderWidt;
|
|
302
318
|
const offsetAmount = ((0, _px.px)(arrowSize) + (0, _px.px)(arrowBorderWidth)) * 2;
|
|
303
319
|
|
|
304
320
|
if (secondaryPlacement === 'start') {
|
|
@@ -358,28 +374,28 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
358
374
|
let trigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
|
|
359
375
|
|
|
360
376
|
if (trigger) {
|
|
361
|
-
const _this$
|
|
362
|
-
on = _this$
|
|
363
|
-
shouldContainFocus = _this$
|
|
364
|
-
let onClick;
|
|
365
|
-
let onFocus;
|
|
366
|
-
let onMouseOut;
|
|
367
|
-
let onMouseOver;
|
|
377
|
+
const _this$props6 = this.props,
|
|
378
|
+
on = _this$props6.on,
|
|
379
|
+
shouldContainFocus = _this$props6.shouldContainFocus;
|
|
380
|
+
let onClick = void 0;
|
|
381
|
+
let onFocus = void 0;
|
|
382
|
+
let onMouseOut = void 0;
|
|
383
|
+
let onMouseOver = void 0;
|
|
368
384
|
let expanded;
|
|
369
385
|
|
|
370
|
-
if (on.indexOf('click') > -1) {
|
|
386
|
+
if (on && on.indexOf('click') > -1) {
|
|
371
387
|
onClick = event => {
|
|
372
388
|
this.toggle(event);
|
|
373
389
|
};
|
|
374
390
|
}
|
|
375
391
|
|
|
376
|
-
if (on.indexOf('hover') > -1) {
|
|
392
|
+
if (on && on.indexOf('hover') > -1) {
|
|
377
393
|
(0, _console.logError)(!(on === 'hover'), '[Popover] Specifying only the `"hover"` trigger limits the visibility' + ' of the Popover to just mouse users. Consider also including the `"focus"` trigger ' + 'so that touch and keyboard only users can see the Popover content as well.');
|
|
378
394
|
onMouseOver = this._handleMouseOver;
|
|
379
395
|
onMouseOut = this._handleMouseOut;
|
|
380
396
|
}
|
|
381
397
|
|
|
382
|
-
if (on.indexOf('focus') > -1) {
|
|
398
|
+
if (on && on.indexOf('focus') > -1) {
|
|
383
399
|
onFocus = event => {
|
|
384
400
|
this.show(event);
|
|
385
401
|
};
|
|
@@ -389,11 +405,13 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
389
405
|
// only set aria-expanded if popover can contain focus
|
|
390
406
|
expanded = this.shown ? 'true' : 'false';
|
|
391
407
|
} else {
|
|
392
|
-
expanded =
|
|
408
|
+
expanded = void 0;
|
|
393
409
|
}
|
|
394
410
|
|
|
395
411
|
trigger = (0, _safeCloneElement.safeCloneElement)(trigger, {
|
|
396
|
-
ref: el =>
|
|
412
|
+
ref: el => {
|
|
413
|
+
this._trigger = el;
|
|
414
|
+
},
|
|
397
415
|
'aria-expanded': expanded,
|
|
398
416
|
'data-popover-trigger': true,
|
|
399
417
|
onKeyDown: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
|
|
@@ -433,30 +451,40 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
433
451
|
}
|
|
434
452
|
|
|
435
453
|
if (this.shown || this.props.shouldRenderOffscreen) {
|
|
436
|
-
let ViewElement;
|
|
437
454
|
const color = this.props.color;
|
|
438
455
|
let viewProps = {
|
|
456
|
+
// TODO: try to type `ref` better, LegacyRef<T> was not compatible
|
|
439
457
|
ref: c => this._view = c,
|
|
440
458
|
elementRef: el => {
|
|
459
|
+
var _this$props$contentRe, _this$props7;
|
|
460
|
+
|
|
441
461
|
this._contentElement = el;
|
|
442
|
-
this.props.contentRef(el);
|
|
462
|
+
(_this$props$contentRe = (_this$props7 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props7, el);
|
|
443
463
|
},
|
|
444
464
|
background: color,
|
|
445
465
|
stacking: this.props.stacking,
|
|
446
466
|
shadow: this.props.shadow,
|
|
447
467
|
display: 'block'
|
|
448
468
|
};
|
|
469
|
+
|
|
470
|
+
if (this.isTooltip) {
|
|
471
|
+
viewProps = { ...viewProps,
|
|
472
|
+
// Because of a11y reasons popovers should not be hidden when hovered over
|
|
473
|
+
onMouseOver: this._handleMouseOver,
|
|
474
|
+
onMouseOut: this._handleMouseOut
|
|
475
|
+
};
|
|
476
|
+
}
|
|
477
|
+
|
|
449
478
|
const placement = this.state.placement;
|
|
450
479
|
|
|
451
480
|
if (this.props.withArrow) {
|
|
452
|
-
ViewElement = _ContextView.ContextView;
|
|
453
481
|
viewProps = { ...viewProps,
|
|
454
482
|
// TODO: remove background override after contextview is updated
|
|
455
483
|
background: color === 'primary' ? 'default' : 'inverse',
|
|
456
484
|
placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
|
|
457
485
|
};
|
|
486
|
+
return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
|
|
458
487
|
} else {
|
|
459
|
-
ViewElement = _View.View;
|
|
460
488
|
viewProps = { ...viewProps,
|
|
461
489
|
borderWidth: 'small',
|
|
462
490
|
borderRadius: 'medium',
|
|
@@ -464,17 +492,8 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
464
492
|
borderColor: 'transparent'
|
|
465
493
|
})
|
|
466
494
|
};
|
|
495
|
+
return /*#__PURE__*/_react.default.createElement(_View.View, viewProps, content);
|
|
467
496
|
}
|
|
468
|
-
|
|
469
|
-
if (this.isTooltip) {
|
|
470
|
-
viewProps = { ...viewProps,
|
|
471
|
-
// Because of a11y reasons popovers should not be hidden when hovered over
|
|
472
|
-
onMouseOver: this._handleMouseOver,
|
|
473
|
-
onMouseOut: this._handleMouseOut
|
|
474
|
-
};
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
return /*#__PURE__*/_react.default.createElement(ViewElement, viewProps, content);
|
|
478
497
|
} else {
|
|
479
498
|
return null;
|
|
480
499
|
}
|
|
@@ -504,7 +523,6 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
504
523
|
offsetY: 0,
|
|
505
524
|
color: 'primary',
|
|
506
525
|
on: ['hover', 'focus'],
|
|
507
|
-
contentRef: el => {},
|
|
508
526
|
withArrow: true,
|
|
509
527
|
constrain: 'window',
|
|
510
528
|
insertAt: 'bottom',
|
|
@@ -515,22 +533,7 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
515
533
|
shouldReturnFocus: true,
|
|
516
534
|
shouldCloseOnDocumentClick: true,
|
|
517
535
|
shouldFocusContentOnTriggerBlur: false,
|
|
518
|
-
shouldCloseOnEscape: true
|
|
519
|
-
onShowContent: event => {},
|
|
520
|
-
onHideContent: (event, {
|
|
521
|
-
documentClick
|
|
522
|
-
}) => {},
|
|
523
|
-
onClick: event => {},
|
|
524
|
-
onFocus: event => {},
|
|
525
|
-
onBlur: event => {},
|
|
526
|
-
onMouseOver: event => {},
|
|
527
|
-
onMouseOut: event => {},
|
|
528
|
-
onKeyDown: event => {},
|
|
529
|
-
onKeyUp: event => {},
|
|
530
|
-
onPositioned: position => {},
|
|
531
|
-
onPositionChanged: position => {},
|
|
532
|
-
renderTrigger: null,
|
|
533
|
-
children: null
|
|
536
|
+
shouldCloseOnEscape: true
|
|
534
537
|
}, _temp)) || _class) || _class);
|
|
535
538
|
exports.Popover = Popover;
|
|
536
539
|
var _default = Popover;
|
package/lib/Popover/props.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -38,222 +38,47 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
|
|
|
38
38
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
39
39
|
* SOFTWARE.
|
|
40
40
|
*/
|
|
41
|
-
// Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
|
|
42
|
-
// TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
|
|
43
|
-
const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
|
|
44
41
|
const propTypes = {
|
|
45
|
-
/**
|
|
46
|
-
* Whether or not the `<Popover />` content is shown
|
|
47
|
-
*/
|
|
48
42
|
isShowingContent: _propTypes.default.bool,
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Whether or not to show the content by default, when uncontrolled
|
|
52
|
-
*/
|
|
53
43
|
defaultIsShowingContent: _propTypes.default.bool,
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* The action that causes the content to display (`click`, `hover`, `focus`)
|
|
57
|
-
*/
|
|
58
44
|
on: _propTypes.default.oneOfType([_propTypes.default.oneOf(['click', 'hover', 'focus']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['click', 'hover', 'focus']))]),
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Whether or not an arrow pointing to the trigger should be rendered
|
|
62
|
-
*/
|
|
63
45
|
withArrow: _propTypes.default.bool,
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Color variant of the popover content
|
|
67
|
-
*/
|
|
68
46
|
color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* The placement of the content in relation to the trigger
|
|
72
|
-
*/
|
|
73
|
-
placement: _propTypes.default.oneOf(placementPropValues),
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Controls the shadow depth for the `<Popover />`
|
|
77
|
-
*/
|
|
47
|
+
placement: _PositionPropTypes.PositionPropTypes.placement,
|
|
78
48
|
shadow: _emotion.ThemeablePropTypes.shadow,
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Controls the z-index depth for the `<Popover />` content
|
|
82
|
-
*/
|
|
83
49
|
stacking: _emotion.ThemeablePropTypes.stacking,
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* A function that returns a reference to the content element
|
|
87
|
-
*/
|
|
88
50
|
contentRef: _propTypes.default.func,
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* An element or a function returning an element to focus by default
|
|
92
|
-
*/
|
|
93
51
|
defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* An accessible label for the `<Popover />` content
|
|
97
|
-
*/
|
|
98
52
|
screenReaderLabel: _propTypes.default.string,
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* The horizontal offset for the positioned content
|
|
102
|
-
*/
|
|
103
53
|
offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* The vertical offset for the positioned content
|
|
107
|
-
*/
|
|
108
54
|
offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* The parent in which to constrain the popover.
|
|
112
|
-
* One of: 'window', 'scroll-parent', 'parent', 'none', an element,
|
|
113
|
-
* or a function returning an element
|
|
114
|
-
*/
|
|
115
55
|
constrain: _PositionPropTypes.PositionPropTypes.constrain,
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Target element for positioning the Popover (if it differs from the trigger)
|
|
119
|
-
*/
|
|
120
56
|
positionTarget: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* An element or a function returning an element to use as the mount node
|
|
124
|
-
* for the `<Popover />` (defaults to `document.body`)
|
|
125
|
-
*/
|
|
126
57
|
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* Insert the element at the 'top' of the mountNode or at the 'bottom'
|
|
130
|
-
*/
|
|
131
58
|
insertAt: _propTypes.default.oneOf(['bottom', 'top']),
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* An element, function returning an element, or array of elements that will
|
|
135
|
-
* not be hidden from the screen reader when the `<Popover />` is open
|
|
136
|
-
*/
|
|
137
59
|
liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
|
|
138
|
-
|
|
139
|
-
/**
|
|
140
|
-
* An id is generated if not supplied.
|
|
141
|
-
*/
|
|
142
60
|
id: _propTypes.default.string,
|
|
143
|
-
|
|
144
|
-
/**
|
|
145
|
-
* Whether or not the content should offset to align by its arrow
|
|
146
|
-
*/
|
|
147
61
|
shouldAlignArrow: _propTypes.default.bool,
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* Whether or not position should be tracked or just set on initial render
|
|
151
|
-
*/
|
|
152
62
|
shouldTrackPosition: _propTypes.default.bool,
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Should the `<Popover />` render offscreen when visually hidden
|
|
156
|
-
*/
|
|
157
63
|
shouldRenderOffscreen: _propTypes.default.bool,
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Whether focus should contained within the `<Popover/>` when it is open
|
|
161
|
-
*/
|
|
162
64
|
shouldContainFocus: _propTypes.default.bool,
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Whether focus should be returned to the trigger when the `<Popover/>` is closed
|
|
166
|
-
*/
|
|
167
65
|
shouldReturnFocus: _propTypes.default.bool,
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* Should the `<Popover />` hide when clicks occur outside the content
|
|
171
|
-
*/
|
|
172
66
|
shouldCloseOnDocumentClick: _propTypes.default.bool,
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* Should the `<Popover />` hide when the escape key is pressed
|
|
176
|
-
*/
|
|
177
67
|
shouldCloseOnEscape: _propTypes.default.bool,
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Should the content become focused when the trigger is blurred
|
|
181
|
-
*/
|
|
182
68
|
shouldFocusContentOnTriggerBlur: _propTypes.default.bool,
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
* Callback fired when content is shown. When controlled, this callback is
|
|
186
|
-
* fired when the Popover expects to be shown
|
|
187
|
-
*/
|
|
188
69
|
onShowContent: _propTypes.default.func,
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Callback fired when content is hidden. When controlled, this callback is
|
|
192
|
-
* fired when the Popover expects to be hidden
|
|
193
|
-
*/
|
|
194
70
|
onHideContent: _propTypes.default.func,
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Callback fired when content has been is initially positioned.
|
|
198
|
-
* If `shouldRenderOffscreen` is true, it will only fire once, the first
|
|
199
|
-
* time the content is shown
|
|
200
|
-
*/
|
|
201
71
|
onPositioned: _propTypes.default.func,
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Callback fired when the position changes
|
|
205
|
-
*/
|
|
206
72
|
onPositionChanged: _propTypes.default.func,
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Callback fired when component is clicked
|
|
210
|
-
*/
|
|
211
73
|
onClick: _propTypes.default.func,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Callback fired when trigger is focused
|
|
215
|
-
*/
|
|
216
74
|
onFocus: _propTypes.default.func,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Callback fired when component is blurred
|
|
220
|
-
*/
|
|
221
75
|
onBlur: _propTypes.default.func,
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Callback fired on keydown
|
|
225
|
-
*/
|
|
226
76
|
onKeyDown: _propTypes.default.func,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Callback fired on keyup
|
|
230
|
-
*/
|
|
231
77
|
onKeyUp: _propTypes.default.func,
|
|
232
|
-
|
|
233
|
-
/**
|
|
234
|
-
/**
|
|
235
|
-
* Callback fired when mouse is over trigger
|
|
236
|
-
*/
|
|
237
78
|
onMouseOver: _propTypes.default.func,
|
|
238
|
-
|
|
239
|
-
/**
|
|
240
|
-
* Callback fired when mouse leaves trigger
|
|
241
|
-
*/
|
|
242
79
|
onMouseOut: _propTypes.default.func,
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* The element that triggers the popover
|
|
246
|
-
*/
|
|
247
80
|
renderTrigger: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* The content to be shown by the popover
|
|
251
|
-
*/
|
|
252
81
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
253
|
-
|
|
254
|
-
/**
|
|
255
|
-
* Provides a reference to the underlying HTML root element
|
|
256
|
-
*/
|
|
257
82
|
elementRef: _propTypes.default.func
|
|
258
83
|
};
|
|
259
84
|
exports.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-popover",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.13.0",
|
|
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
|
"type": "commonjs",
|
|
@@ -25,28 +25,28 @@
|
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@babel/runtime": "^7.13.10",
|
|
28
|
-
"@instructure/console": "8.
|
|
29
|
-
"@instructure/emotion": "8.
|
|
30
|
-
"@instructure/ui-a11y-utils": "8.
|
|
31
|
-
"@instructure/ui-dialog": "8.
|
|
32
|
-
"@instructure/ui-dom-utils": "8.
|
|
33
|
-
"@instructure/ui-i18n": "8.
|
|
34
|
-
"@instructure/ui-position": "8.
|
|
35
|
-
"@instructure/ui-prop-types": "8.
|
|
36
|
-
"@instructure/ui-react-utils": "8.
|
|
37
|
-
"@instructure/ui-testable": "8.
|
|
38
|
-
"@instructure/ui-utils": "8.
|
|
39
|
-
"@instructure/ui-view": "8.
|
|
40
|
-
"@instructure/uid": "8.
|
|
28
|
+
"@instructure/console": "8.13.0",
|
|
29
|
+
"@instructure/emotion": "8.13.0",
|
|
30
|
+
"@instructure/ui-a11y-utils": "8.13.0",
|
|
31
|
+
"@instructure/ui-dialog": "8.13.0",
|
|
32
|
+
"@instructure/ui-dom-utils": "8.13.0",
|
|
33
|
+
"@instructure/ui-i18n": "8.13.0",
|
|
34
|
+
"@instructure/ui-position": "8.13.0",
|
|
35
|
+
"@instructure/ui-prop-types": "8.13.0",
|
|
36
|
+
"@instructure/ui-react-utils": "8.13.0",
|
|
37
|
+
"@instructure/ui-testable": "8.13.0",
|
|
38
|
+
"@instructure/ui-utils": "8.13.0",
|
|
39
|
+
"@instructure/ui-view": "8.13.0",
|
|
40
|
+
"@instructure/uid": "8.13.0",
|
|
41
41
|
"keycode": "^2",
|
|
42
42
|
"prop-types": "^15"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@instructure/ui-babel-preset": "8.
|
|
46
|
-
"@instructure/ui-color-utils": "8.
|
|
47
|
-
"@instructure/ui-test-locator": "8.
|
|
48
|
-
"@instructure/ui-test-queries": "8.
|
|
49
|
-
"@instructure/ui-test-utils": "8.
|
|
45
|
+
"@instructure/ui-babel-preset": "8.13.0",
|
|
46
|
+
"@instructure/ui-color-utils": "8.13.0",
|
|
47
|
+
"@instructure/ui-test-locator": "8.13.0",
|
|
48
|
+
"@instructure/ui-test-queries": "8.13.0",
|
|
49
|
+
"@instructure/ui-test-utils": "8.13.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=16.8 <=17"
|
|
@@ -54,6 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"sideEffects": false
|
|
58
|
-
"gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
|
|
57
|
+
"sideEffects": false
|
|
59
58
|
}
|