@instructure/ui-popover 8.12.1-snapshot.51 → 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/index.js +72 -73
- package/es/Popover/props.js +1 -176
- package/lib/Popover/index.js +72 -73
- package/lib/Popover/props.js +1 -176
- 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
|
@@ -62,6 +62,7 @@ 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) {
|
|
@@ -71,7 +72,14 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
71
72
|
_this = this;
|
|
72
73
|
this._handleMouseOver = void 0;
|
|
73
74
|
this._handleMouseOut = void 0;
|
|
75
|
+
this._id = void 0;
|
|
74
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;
|
|
75
83
|
this.ref = null;
|
|
76
84
|
|
|
77
85
|
this.handleRef = el => {
|
|
@@ -84,20 +92,22 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
84
92
|
};
|
|
85
93
|
|
|
86
94
|
this.show = event => {
|
|
95
|
+
var _this$props$onShowCon, _this$props;
|
|
96
|
+
|
|
87
97
|
if (typeof this.props.isShowingContent === 'undefined') {
|
|
88
98
|
this.setState({
|
|
89
99
|
isShowingContent: true
|
|
90
100
|
});
|
|
91
101
|
}
|
|
92
102
|
|
|
93
|
-
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);
|
|
94
104
|
};
|
|
95
105
|
|
|
96
106
|
this.hide = function (event) {
|
|
97
107
|
let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
98
|
-
const _this$
|
|
99
|
-
onHideContent = _this$
|
|
100
|
-
isShowingContent = _this$
|
|
108
|
+
const _this$props2 = _this.props,
|
|
109
|
+
onHideContent = _this$props2.onHideContent,
|
|
110
|
+
isShowingContent = _this$props2.isShowingContent;
|
|
101
111
|
|
|
102
112
|
if (typeof isShowingContent === 'undefined') {
|
|
103
113
|
// uncontrolled, set state, fire callbacks
|
|
@@ -105,7 +115,7 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
105
115
|
let isShowingContent = _ref.isShowingContent;
|
|
106
116
|
|
|
107
117
|
if (isShowingContent) {
|
|
108
|
-
onHideContent(event, {
|
|
118
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
109
119
|
documentClick
|
|
110
120
|
});
|
|
111
121
|
}
|
|
@@ -116,7 +126,7 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
116
126
|
});
|
|
117
127
|
} else if (isShowingContent) {
|
|
118
128
|
// controlled, fire callback
|
|
119
|
-
onHideContent(event, {
|
|
129
|
+
onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
|
|
120
130
|
documentClick
|
|
121
131
|
});
|
|
122
132
|
}
|
|
@@ -130,16 +140,17 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
130
140
|
}
|
|
131
141
|
};
|
|
132
142
|
|
|
133
|
-
this.handleDialogDismiss =
|
|
134
|
-
if (!
|
|
135
|
-
const trigger = (0, _findDOMNode.findDOMNode)(
|
|
143
|
+
this.handleDialogDismiss = (event, documentClick) => {
|
|
144
|
+
if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
|
|
145
|
+
const trigger = (0, _findDOMNode.findDOMNode)(this._trigger);
|
|
136
146
|
|
|
137
147
|
if (trigger && typeof trigger.focus === 'function') {
|
|
148
|
+
;
|
|
138
149
|
trigger.focus();
|
|
139
150
|
}
|
|
140
151
|
}
|
|
141
152
|
|
|
142
|
-
|
|
153
|
+
this.hide(event, documentClick);
|
|
143
154
|
};
|
|
144
155
|
|
|
145
156
|
this.handleDialogBlur = event => {
|
|
@@ -174,7 +185,9 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
174
185
|
};
|
|
175
186
|
|
|
176
187
|
this.handleTriggerBlur = event => {
|
|
177
|
-
|
|
188
|
+
const on = this.props.on;
|
|
189
|
+
|
|
190
|
+
if (on && on.indexOf('focus') > -1) {
|
|
178
191
|
this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
|
|
179
192
|
if (!(0, _containsActiveElement.containsActiveElement)(this._view)) {
|
|
180
193
|
this.hide(event);
|
|
@@ -184,33 +197,33 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
184
197
|
};
|
|
185
198
|
|
|
186
199
|
this.handlePositioned = position => {
|
|
200
|
+
var _this$props$onPositio, _this$props3;
|
|
201
|
+
|
|
187
202
|
const placement = position.placement;
|
|
188
203
|
this.setState({
|
|
189
204
|
placement,
|
|
190
205
|
...this.computeOffsets(placement)
|
|
191
206
|
});
|
|
192
|
-
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);
|
|
193
208
|
};
|
|
194
209
|
|
|
195
210
|
this.handlePositionChanged = position => {
|
|
211
|
+
var _this$props$onPositio2, _this$props4;
|
|
212
|
+
|
|
196
213
|
const placement = position.placement;
|
|
197
214
|
this.setState({
|
|
198
215
|
placement,
|
|
199
216
|
...this.computeOffsets(placement)
|
|
200
217
|
});
|
|
201
|
-
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);
|
|
202
219
|
};
|
|
203
220
|
|
|
204
221
|
this.state = {
|
|
205
222
|
placement: props.placement,
|
|
206
223
|
offsetX: props.offsetX,
|
|
207
|
-
offsetY: props.offsetY
|
|
224
|
+
offsetY: props.offsetY,
|
|
225
|
+
isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : void 0
|
|
208
226
|
};
|
|
209
|
-
|
|
210
|
-
if (typeof props.isShowingContent === 'undefined') {
|
|
211
|
-
this.state.isShowingContent = props.defaultIsShowingContent;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
227
|
this._id = this.props.id || (0, _uid.uid)('Popover');
|
|
215
228
|
this._raf = [];
|
|
216
229
|
this._handleMouseOver = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
|
|
@@ -223,7 +236,6 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
223
236
|
this.hide(event);
|
|
224
237
|
}, 1);
|
|
225
238
|
});
|
|
226
|
-
this.mouseOutTimeout = void 0;
|
|
227
239
|
}
|
|
228
240
|
|
|
229
241
|
get isTooltip() {
|
|
@@ -259,11 +271,11 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
259
271
|
}
|
|
260
272
|
}
|
|
261
273
|
|
|
262
|
-
shouldComponentUpdate(nextProps, nextState
|
|
274
|
+
shouldComponentUpdate(nextProps, nextState) {
|
|
263
275
|
return !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.state, nextState);
|
|
264
276
|
}
|
|
265
277
|
|
|
266
|
-
componentDidUpdate(prevProps, prevState
|
|
278
|
+
componentDidUpdate(prevProps, prevState) {
|
|
267
279
|
if (this._focusRegion && this.isTooltip) {
|
|
268
280
|
// if focus region exists, popover is acting as a tooltip
|
|
269
281
|
// so we manually activate and deactivate the region when showing/hiding
|
|
@@ -290,19 +302,19 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
290
302
|
}
|
|
291
303
|
|
|
292
304
|
computeOffsets(placement) {
|
|
293
|
-
let _this$
|
|
294
|
-
offsetX = _this$
|
|
295
|
-
offsetY = _this$
|
|
305
|
+
let _this$props5 = this.props,
|
|
306
|
+
offsetX = _this$props5.offsetX,
|
|
307
|
+
offsetY = _this$props5.offsetY;
|
|
296
308
|
|
|
297
309
|
if (this.props.shouldAlignArrow && this._view) {
|
|
298
310
|
const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
|
|
299
311
|
// declared in ContextView's styles.js
|
|
300
312
|
|
|
301
|
-
const
|
|
302
|
-
|
|
303
|
-
arrowSize =
|
|
304
|
-
|
|
305
|
-
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;
|
|
306
318
|
const offsetAmount = ((0, _px.px)(arrowSize) + (0, _px.px)(arrowBorderWidth)) * 2;
|
|
307
319
|
|
|
308
320
|
if (secondaryPlacement === 'start') {
|
|
@@ -362,28 +374,28 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
362
374
|
let trigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
|
|
363
375
|
|
|
364
376
|
if (trigger) {
|
|
365
|
-
const _this$
|
|
366
|
-
on = _this$
|
|
367
|
-
shouldContainFocus = _this$
|
|
368
|
-
let onClick;
|
|
369
|
-
let onFocus;
|
|
370
|
-
let onMouseOut;
|
|
371
|
-
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;
|
|
372
384
|
let expanded;
|
|
373
385
|
|
|
374
|
-
if (on.indexOf('click') > -1) {
|
|
386
|
+
if (on && on.indexOf('click') > -1) {
|
|
375
387
|
onClick = event => {
|
|
376
388
|
this.toggle(event);
|
|
377
389
|
};
|
|
378
390
|
}
|
|
379
391
|
|
|
380
|
-
if (on.indexOf('hover') > -1) {
|
|
392
|
+
if (on && on.indexOf('hover') > -1) {
|
|
381
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.');
|
|
382
394
|
onMouseOver = this._handleMouseOver;
|
|
383
395
|
onMouseOut = this._handleMouseOut;
|
|
384
396
|
}
|
|
385
397
|
|
|
386
|
-
if (on.indexOf('focus') > -1) {
|
|
398
|
+
if (on && on.indexOf('focus') > -1) {
|
|
387
399
|
onFocus = event => {
|
|
388
400
|
this.show(event);
|
|
389
401
|
};
|
|
@@ -393,11 +405,13 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
393
405
|
// only set aria-expanded if popover can contain focus
|
|
394
406
|
expanded = this.shown ? 'true' : 'false';
|
|
395
407
|
} else {
|
|
396
|
-
expanded =
|
|
408
|
+
expanded = void 0;
|
|
397
409
|
}
|
|
398
410
|
|
|
399
411
|
trigger = (0, _safeCloneElement.safeCloneElement)(trigger, {
|
|
400
|
-
ref: el =>
|
|
412
|
+
ref: el => {
|
|
413
|
+
this._trigger = el;
|
|
414
|
+
},
|
|
401
415
|
'aria-expanded': expanded,
|
|
402
416
|
'data-popover-trigger': true,
|
|
403
417
|
onKeyDown: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
|
|
@@ -437,30 +451,40 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
437
451
|
}
|
|
438
452
|
|
|
439
453
|
if (this.shown || this.props.shouldRenderOffscreen) {
|
|
440
|
-
let ViewElement;
|
|
441
454
|
const color = this.props.color;
|
|
442
455
|
let viewProps = {
|
|
456
|
+
// TODO: try to type `ref` better, LegacyRef<T> was not compatible
|
|
443
457
|
ref: c => this._view = c,
|
|
444
458
|
elementRef: el => {
|
|
459
|
+
var _this$props$contentRe, _this$props7;
|
|
460
|
+
|
|
445
461
|
this._contentElement = el;
|
|
446
|
-
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);
|
|
447
463
|
},
|
|
448
464
|
background: color,
|
|
449
465
|
stacking: this.props.stacking,
|
|
450
466
|
shadow: this.props.shadow,
|
|
451
467
|
display: 'block'
|
|
452
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
|
+
|
|
453
478
|
const placement = this.state.placement;
|
|
454
479
|
|
|
455
480
|
if (this.props.withArrow) {
|
|
456
|
-
ViewElement = _ContextView.ContextView;
|
|
457
481
|
viewProps = { ...viewProps,
|
|
458
482
|
// TODO: remove background override after contextview is updated
|
|
459
483
|
background: color === 'primary' ? 'default' : 'inverse',
|
|
460
484
|
placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
|
|
461
485
|
};
|
|
486
|
+
return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
|
|
462
487
|
} else {
|
|
463
|
-
ViewElement = _View.View;
|
|
464
488
|
viewProps = { ...viewProps,
|
|
465
489
|
borderWidth: 'small',
|
|
466
490
|
borderRadius: 'medium',
|
|
@@ -468,17 +492,8 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
468
492
|
borderColor: 'transparent'
|
|
469
493
|
})
|
|
470
494
|
};
|
|
495
|
+
return /*#__PURE__*/_react.default.createElement(_View.View, viewProps, content);
|
|
471
496
|
}
|
|
472
|
-
|
|
473
|
-
if (this.isTooltip) {
|
|
474
|
-
viewProps = { ...viewProps,
|
|
475
|
-
// Because of a11y reasons popovers should not be hidden when hovered over
|
|
476
|
-
onMouseOver: this._handleMouseOver,
|
|
477
|
-
onMouseOut: this._handleMouseOut
|
|
478
|
-
};
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
return /*#__PURE__*/_react.default.createElement(ViewElement, viewProps, content);
|
|
482
497
|
} else {
|
|
483
498
|
return null;
|
|
484
499
|
}
|
|
@@ -508,7 +523,6 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
508
523
|
offsetY: 0,
|
|
509
524
|
color: 'primary',
|
|
510
525
|
on: ['hover', 'focus'],
|
|
511
|
-
contentRef: el => {},
|
|
512
526
|
withArrow: true,
|
|
513
527
|
constrain: 'window',
|
|
514
528
|
insertAt: 'bottom',
|
|
@@ -519,22 +533,7 @@ let Popover = (_dec = (0, _textDirectionContextConsumer.textDirectionContextCons
|
|
|
519
533
|
shouldReturnFocus: true,
|
|
520
534
|
shouldCloseOnDocumentClick: true,
|
|
521
535
|
shouldFocusContentOnTriggerBlur: false,
|
|
522
|
-
shouldCloseOnEscape: true
|
|
523
|
-
onShowContent: event => {},
|
|
524
|
-
onHideContent: (event, _ref2) => {
|
|
525
|
-
let documentClick = _ref2.documentClick;
|
|
526
|
-
},
|
|
527
|
-
onClick: event => {},
|
|
528
|
-
onFocus: event => {},
|
|
529
|
-
onBlur: event => {},
|
|
530
|
-
onMouseOver: event => {},
|
|
531
|
-
onMouseOut: event => {},
|
|
532
|
-
onKeyDown: event => {},
|
|
533
|
-
onKeyUp: event => {},
|
|
534
|
-
onPositioned: position => {},
|
|
535
|
-
onPositionChanged: position => {},
|
|
536
|
-
renderTrigger: null,
|
|
537
|
-
children: null
|
|
536
|
+
shouldCloseOnEscape: true
|
|
538
537
|
}, _temp)) || _class) || _class);
|
|
539
538
|
exports.Popover = Popover;
|
|
540
539
|
var _default = Popover;
|
package/lib/Popover/props.js
CHANGED
|
@@ -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": "4d369733414715a70bae0628378e8d82214eab3e"
|
|
57
|
+
"sideEffects": false
|
|
59
58
|
}
|