@splunk/react-ui 5.0.0-rc.1 → 5.0.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 +361 -0
- package/Calendar.js +148 -151
- package/Code.js +197 -167
- package/ComboBox.js +51 -51
- package/ControlGroup.js +1 -1
- package/Date.js +145 -147
- package/Dropdown.js +28 -25
- package/DualListbox.js +468 -469
- package/FetchOptions.d.ts +2 -2
- package/{MIGRATION.mdx → MIGRATION.md} +563 -44
- package/Markdown.js +3 -4
- package/Message.js +47 -43
- package/Modal.js +18 -18
- package/ModalLayer.js +15 -11
- package/Multiselect.js +768 -755
- package/Popover.js +156 -152
- package/README.md +6 -6
- package/Resize.js +149 -151
- package/ResultsMenu.js +116 -115
- package/Select.js +461 -461
- package/Slider.js +337 -339
- package/Table.js +856 -806
- package/Tooltip.js +192 -189
- package/TransitionOpen.js +4 -1
- package/package.json +15 -14
- package/types/src/Code/Code.d.ts +1 -1
- package/types/src/ControlGroup/ControlGroup.d.ts +1 -2
- package/types/src/Dropdown/Dropdown.d.ts +6 -2
- package/types/src/Number/Number.d.ts +1 -1
- package/types/src/Popover/Popover.d.ts +8 -1
- package/types/src/ResultsMenu/ResultsMenu.d.ts +2 -1
- package/types/src/Table/HeadCell.d.ts +6 -1
- package/types/src/Table/HeadInner.d.ts +3 -1
- package/types/src/Tooltip/Tooltip.d.ts +7 -7
- package/types/src/fixtures/useFetchOptions.d.ts +33 -0
- package/CHANGELOG.v5.mdx +0 -335
- package/MIGRATION.v5.mdx +0 -537
- package/types/src/Button/docs/examples/Truncated.d.ts +0 -3
- package/types/src/fixtures/FetchOptions.d.ts +0 -76
package/Popover.js
CHANGED
|
@@ -82,8 +82,8 @@
|
|
|
82
82
|
const f = require("lodash/every");
|
|
83
83
|
var s = e.n(f);
|
|
84
84
|
// CONCATENATED MODULE: external "lodash/has"
|
|
85
|
-
const
|
|
86
|
-
var
|
|
85
|
+
const p = require("lodash/has");
|
|
86
|
+
var v = e.n(p);
|
|
87
87
|
// CONCATENATED MODULE: external "lodash/intersection"
|
|
88
88
|
const d = require("lodash/intersection");
|
|
89
89
|
var h = e.n(d);
|
|
@@ -209,8 +209,8 @@
|
|
|
209
209
|
function _(e) {
|
|
210
210
|
var t = e.align, r = e.anchorPos, n = e.scrollContainerPos, o = e.canCoverAnchor, a = e.defaultPlacement, i = e.outerContainerEl, l = e.padding, c = e.repositionMode, u = e.windowHeight, f = e.windowWidth;
|
|
211
211
|
var s = c === "flip";
|
|
212
|
-
var
|
|
213
|
-
var
|
|
212
|
+
var p = c === "any";
|
|
213
|
+
var v = s || p;
|
|
214
214
|
var d = e.placement || a;
|
|
215
215
|
// Translate vertical/horizontal to above/below/left/right
|
|
216
216
|
if (a === "vertical") {
|
|
@@ -243,18 +243,18 @@
|
|
|
243
243
|
var R = (t === "edge" ? r.top + i.offsetHeight - l : r.bottom + i.offsetHeight / 2) > u;
|
|
244
244
|
// Handle each of the four placement options individually.
|
|
245
245
|
if (O === "above") {
|
|
246
|
-
if (!P &&
|
|
246
|
+
if (!P && v) {
|
|
247
247
|
if (j) {
|
|
248
248
|
return _(I(I({}, e), {}, {
|
|
249
249
|
placement: "below"
|
|
250
250
|
}));
|
|
251
251
|
}
|
|
252
|
-
if (
|
|
252
|
+
if (p && E) {
|
|
253
253
|
return _(I(I({}, e), {}, {
|
|
254
254
|
placement: "right"
|
|
255
255
|
}));
|
|
256
256
|
}
|
|
257
|
-
if (
|
|
257
|
+
if (p && C) {
|
|
258
258
|
return _(I(I({}, e), {}, {
|
|
259
259
|
placement: "left"
|
|
260
260
|
}));
|
|
@@ -281,18 +281,18 @@
|
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
283
|
if (O === "below") {
|
|
284
|
-
if (!j &&
|
|
284
|
+
if (!j && v) {
|
|
285
285
|
if (P && x) {
|
|
286
286
|
return _(I(I({}, e), {}, {
|
|
287
287
|
placement: "above"
|
|
288
288
|
}));
|
|
289
289
|
}
|
|
290
|
-
if (
|
|
290
|
+
if (p && E) {
|
|
291
291
|
return _(I(I({}, e), {}, {
|
|
292
292
|
placement: "right"
|
|
293
293
|
}));
|
|
294
294
|
}
|
|
295
|
-
if (
|
|
295
|
+
if (p && C) {
|
|
296
296
|
return _(I(I({}, e), {}, {
|
|
297
297
|
placement: "left"
|
|
298
298
|
}));
|
|
@@ -315,18 +315,18 @@
|
|
|
315
315
|
}
|
|
316
316
|
}
|
|
317
317
|
if (O === "left") {
|
|
318
|
-
if (!C &&
|
|
318
|
+
if (!C && v) {
|
|
319
319
|
if (E) {
|
|
320
320
|
return _(I(I({}, e), {}, {
|
|
321
321
|
placement: "right"
|
|
322
322
|
}));
|
|
323
323
|
}
|
|
324
|
-
if (
|
|
324
|
+
if (p && j) {
|
|
325
325
|
return _(I(I({}, e), {}, {
|
|
326
326
|
placement: "below"
|
|
327
327
|
}));
|
|
328
328
|
}
|
|
329
|
-
if (
|
|
329
|
+
if (p && P) {
|
|
330
330
|
return _(I(I({}, e), {}, {
|
|
331
331
|
placement: "above"
|
|
332
332
|
}));
|
|
@@ -346,18 +346,18 @@
|
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
if (O === "right") {
|
|
349
|
-
if (!E &&
|
|
349
|
+
if (!E && v) {
|
|
350
350
|
if (C) {
|
|
351
351
|
return _(I(I({}, e), {}, {
|
|
352
352
|
placement: "left"
|
|
353
353
|
}));
|
|
354
354
|
}
|
|
355
|
-
if (
|
|
355
|
+
if (p && j) {
|
|
356
356
|
return _(I(I({}, e), {}, {
|
|
357
357
|
placement: "below"
|
|
358
358
|
}));
|
|
359
359
|
}
|
|
360
|
-
if (
|
|
360
|
+
if (p && P) {
|
|
361
361
|
return _(I(I({}, e), {}, {
|
|
362
362
|
placement: "above"
|
|
363
363
|
}));
|
|
@@ -508,10 +508,10 @@
|
|
|
508
508
|
var u = "0 ".concat(l);
|
|
509
509
|
var f = "".concat(a.width, " ").concat(l);
|
|
510
510
|
var s = "".concat(i, " ").concat(l);
|
|
511
|
-
var
|
|
512
|
-
var
|
|
511
|
+
var p = "".concat(i, " ").concat(c);
|
|
512
|
+
var v = "".concat(i + r.width, " ").concat(l);
|
|
513
513
|
var d = "".concat(i + r.width, " ").concat(c);
|
|
514
|
-
var h = "\n M ".concat(u, "\n S ").concat(s, " , ").concat(
|
|
514
|
+
var h = "\n M ".concat(u, "\n S ").concat(s, " , ").concat(p, "\n L ").concat(s, "\n L ").concat(v, "\n L ").concat(d, "\n S ").concat(v, " , ").concat(f, "\n ");
|
|
515
515
|
return {
|
|
516
516
|
hitAreaPath: h,
|
|
517
517
|
hitAreaStyle: {
|
|
@@ -556,7 +556,7 @@
|
|
|
556
556
|
var le = n().forwardRef((function(e, t) {
|
|
557
557
|
var o = e.anchorRect, a = e.popoverEl, i = e.popoverPlacement;
|
|
558
558
|
var l = (0, r.useState)(null), c = Z(l, 2), u = c[0], f = c[1];
|
|
559
|
-
var s = (0, r.useState)({}),
|
|
559
|
+
var s = (0, r.useState)({}), p = Z(s, 2), v = p[0], d = p[1];
|
|
560
560
|
(0, r.useEffect)((function() {
|
|
561
561
|
var e = ie({
|
|
562
562
|
anchorRect: o,
|
|
@@ -570,7 +570,7 @@
|
|
|
570
570
|
|
|
571
571
|
return n().createElement(Q, {
|
|
572
572
|
"data-test": "popover-hit-area",
|
|
573
|
-
style:
|
|
573
|
+
style: v
|
|
574
574
|
}, n().createElement("path", {
|
|
575
575
|
d: u,
|
|
576
576
|
ref: t
|
|
@@ -603,7 +603,7 @@
|
|
|
603
603
|
se.propTypes = fe;
|
|
604
604
|
// CONCATENATED MODULE: ./src/utils/ssrDocument.ts
|
|
605
605
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
606
|
-
var
|
|
606
|
+
var pe = {
|
|
607
607
|
body: {
|
|
608
608
|
appendChild: function e() {
|
|
609
609
|
return [];
|
|
@@ -657,16 +657,16 @@
|
|
|
657
657
|
search: ""
|
|
658
658
|
}
|
|
659
659
|
};
|
|
660
|
-
function
|
|
661
|
-
var e = typeof document !== "undefined" ? document :
|
|
660
|
+
function ve() {
|
|
661
|
+
var e = typeof document !== "undefined" ? document : pe;
|
|
662
662
|
return e;
|
|
663
663
|
}
|
|
664
|
-
var de =
|
|
664
|
+
var de = ve();
|
|
665
665
|
/* harmony default export */ const he = /* unused pure expression or super */ null && de;
|
|
666
666
|
// CONCATENATED MODULE: ./src/utils/ssrWindow.ts
|
|
667
667
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
668
668
|
var me = {
|
|
669
|
-
document:
|
|
669
|
+
document: pe,
|
|
670
670
|
navigator: {
|
|
671
671
|
userAgent: ""
|
|
672
672
|
},
|
|
@@ -1026,22 +1026,22 @@
|
|
|
1026
1026
|
// top edge
|
|
1027
1027
|
var f = -(a.offsetHeight / 2 - (X + r + X / 2));
|
|
1028
1028
|
var s = t.center - (o.top + a.offsetHeight / 2) - X / 2;
|
|
1029
|
-
var
|
|
1029
|
+
var p = l()(s, f, u);
|
|
1030
1030
|
// right edge
|
|
1031
|
-
var
|
|
1031
|
+
var v = a.offsetWidth / 2 - (c + X + r);
|
|
1032
1032
|
// left edge
|
|
1033
1033
|
var d = -(a.offsetWidth / 2 - (X + r));
|
|
1034
1034
|
var h = t.middle - (o.left + a.offsetWidth / 2) - X;
|
|
1035
|
-
var m = l()(h, d,
|
|
1035
|
+
var m = l()(h, d, v);
|
|
1036
1036
|
var b = {
|
|
1037
1037
|
left: {
|
|
1038
1038
|
translateX: X / 2,
|
|
1039
|
-
translateY:
|
|
1039
|
+
translateY: p,
|
|
1040
1040
|
rotate: 90
|
|
1041
1041
|
},
|
|
1042
1042
|
right: {
|
|
1043
1043
|
translateX: -X / 2,
|
|
1044
|
-
translateY:
|
|
1044
|
+
translateY: p,
|
|
1045
1045
|
rotate: -90
|
|
1046
1046
|
},
|
|
1047
1047
|
above: {
|
|
@@ -1083,8 +1083,8 @@
|
|
|
1083
1083
|
width: Math.round(a.width),
|
|
1084
1084
|
height: Math.round(a.height)
|
|
1085
1085
|
};
|
|
1086
|
-
var l = o &&
|
|
1087
|
-
var c = o &&
|
|
1086
|
+
var l = o && v()(o, "x");
|
|
1087
|
+
var c = o && v()(o, "y");
|
|
1088
1088
|
i.left = l ? a.left + ((o === null || o === void 0 ? void 0 : o.x) || 0) : a.left;
|
|
1089
1089
|
i.top = c ? a.top + ((o === null || o === void 0 ? void 0 : o.y) || 0) : a.top;
|
|
1090
1090
|
i.right = l ? i.left + i.width : a.left + i.width || a.right;
|
|
@@ -1125,76 +1125,77 @@
|
|
|
1125
1125
|
* `Dropdown` covers use cases where you might consider using `Popover` directly.
|
|
1126
1126
|
*/ function tt(e) {
|
|
1127
1127
|
var t, o;
|
|
1128
|
-
var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig,
|
|
1128
|
+
var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig, p = s === void 0 ? et : s, v = e.appearance, d = v === void 0 ? "normal" : v, m = e.autoCloseWhenOffScreen, b = m === void 0 ? true : m, y = e.canCoverAnchor, w = e.children, O = e.closeReasons, C = O === void 0 ? Ke : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, N = e.repositionMode, V = N === void 0 ? "flip" : N, z = e.retainFocus, K = z === void 0 ? true : z, Y = e.takeFocus, Q = e.toggleId, Z = Ve(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus", "toggleId" ]);
|
|
1129
1129
|
// @docs-props-type PopoverPropsBase
|
|
1130
1130
|
if (false) {}
|
|
1131
|
-
var
|
|
1132
|
-
var
|
|
1133
|
-
if (D !==
|
|
1131
|
+
var ee = (0, r.useState)(D), te = Le(ee, 2), re = te[0], ne = te[1];
|
|
1132
|
+
var oe = (0, r.useState)(false), ae = Le(oe, 2), ie = ae[0], le = ae[1];
|
|
1133
|
+
if (D !== ie) {
|
|
1134
1134
|
// formerly implemented by componentWillReceiveProps
|
|
1135
1135
|
// we can't use prevOpen here since that's a ref behind the scenes
|
|
1136
1136
|
// and won't get updated until the component re-renders successfully
|
|
1137
1137
|
// whereas setAnimating will interrupt the re-render and we'll end up in an infinite loop
|
|
1138
1138
|
// so we need to update the value of wasOpen at the same time
|
|
1139
|
-
|
|
1140
|
-
|
|
1139
|
+
ne(f);
|
|
1140
|
+
le(D);
|
|
1141
1141
|
}
|
|
1142
1142
|
// this is a single state object because all these properties
|
|
1143
1143
|
// are updated at the same time by setPlacement
|
|
1144
|
-
var
|
|
1145
|
-
var
|
|
1146
|
-
var
|
|
1147
|
-
var he = (0, r.useRef)(null);
|
|
1144
|
+
var fe = (0, r.useState)({}), se = Le(fe, 2), pe = se[0], ve = se[1];
|
|
1145
|
+
var de = (0, r.useRef)(true);
|
|
1146
|
+
var he = (0, r.useRef)(false);
|
|
1148
1147
|
var me = (0, r.useRef)(null);
|
|
1149
1148
|
var ye = (0, r.useRef)(null);
|
|
1150
|
-
var ge =
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1149
|
+
var ge = (0, r.useRef)(null);
|
|
1150
|
+
var we = {
|
|
1151
|
+
anchorHeight: ((t = pe.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
|
|
1152
|
+
anchorWidth: ((o = pe.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
|
|
1153
|
+
placement: pe.placement || null,
|
|
1154
|
+
maxHeight: Ze(pe.maxHeight, d),
|
|
1155
|
+
maxWidth: Ze(pe.maxWidth, d),
|
|
1156
|
+
toggleId: Q
|
|
1156
1157
|
};
|
|
1157
|
-
var
|
|
1158
|
+
var Se = (0, r.useMemo)((function() {
|
|
1158
1159
|
return f ? {
|
|
1159
1160
|
opacity: D ? 1 : 0
|
|
1160
1161
|
} : {
|
|
1161
1162
|
opacity: 1
|
|
1162
1163
|
};
|
|
1163
1164
|
}), [ f, D ]);
|
|
1164
|
-
var
|
|
1165
|
-
var
|
|
1166
|
-
var
|
|
1167
|
-
var
|
|
1168
|
-
var
|
|
1169
|
-
var
|
|
1165
|
+
var Oe = be();
|
|
1166
|
+
var Pe = D || re;
|
|
1167
|
+
var je = (0, r.useContext)(T()) || Oe;
|
|
1168
|
+
var Ce = je !== Oe;
|
|
1169
|
+
var Ee = (0, r.useContext)(ue), xe = Ee.hideArrow;
|
|
1170
|
+
var Ae = q !== null && q !== void 0 ? q : xe;
|
|
1170
1171
|
(0, r.useEffect)((function() {
|
|
1171
1172
|
if (false) {}
|
|
1172
1173
|
}), [ l ]);
|
|
1173
|
-
var
|
|
1174
|
+
var Te = (0, r.useCallback)((function(e) {
|
|
1174
1175
|
if (D && (C === null || C === void 0 ? void 0 : C.includes(e.reason))) {
|
|
1175
1176
|
L === null || L === void 0 ? void 0 : L(e);
|
|
1176
1177
|
}
|
|
1177
1178
|
}), [ C, D, L ]);
|
|
1178
|
-
var
|
|
1179
|
+
var Me = (0, r.useCallback)((function(e, t) {
|
|
1179
1180
|
var r = Qe(e, t);
|
|
1180
1181
|
if (r) {
|
|
1181
|
-
|
|
1182
|
+
Te({
|
|
1182
1183
|
reason: "offScreen"
|
|
1183
1184
|
});
|
|
1184
1185
|
}
|
|
1185
1186
|
return r;
|
|
1186
|
-
}), [
|
|
1187
|
-
var
|
|
1188
|
-
var Ie = parseInt(qe, 10);
|
|
1187
|
+
}), [ Te ]);
|
|
1188
|
+
var qe = M()(), He = qe.borderRadius, Ie = qe.spacingXSmall;
|
|
1189
1189
|
var De = parseInt(He, 10);
|
|
1190
|
+
var Fe = parseInt(Ie, 10);
|
|
1190
1191
|
// this is intentionally smaller when the arrow is hidden to address SUI-5452
|
|
1191
|
-
var
|
|
1192
|
+
var $e = Ae ? Fe : X;
|
|
1192
1193
|
// do not call this directly - use setPlacement (the throttled version) instead
|
|
1193
|
-
var
|
|
1194
|
+
var _e = (0, r.useCallback)((function(e) {
|
|
1194
1195
|
ve((function(t) {
|
|
1195
1196
|
var r, n;
|
|
1196
1197
|
// If these conditions are not met, we cannot set the popover.
|
|
1197
|
-
if (!D || !
|
|
1198
|
+
if (!D || !ge.current || !l) {
|
|
1198
1199
|
// if (__DEV__ && !anchor && open) {
|
|
1199
1200
|
// throw new Error(`Invalid anchor ${anchor} provided to Popover.`);
|
|
1200
1201
|
// }
|
|
@@ -1209,12 +1210,12 @@
|
|
|
1209
1210
|
offsets: true,
|
|
1210
1211
|
pointTo: $
|
|
1211
1212
|
});
|
|
1212
|
-
var c = Je(
|
|
1213
|
-
anchorEl:
|
|
1213
|
+
var c = Je(je) ? Ge({
|
|
1214
|
+
anchorEl: je,
|
|
1214
1215
|
pointTo: $
|
|
1215
1216
|
}) : undefined;
|
|
1216
1217
|
if (e && b) {
|
|
1217
|
-
if (
|
|
1218
|
+
if (Me(o, c)) {
|
|
1218
1219
|
return t;
|
|
1219
1220
|
}
|
|
1220
1221
|
}
|
|
@@ -1225,22 +1226,22 @@
|
|
|
1225
1226
|
canCoverAnchor: y,
|
|
1226
1227
|
defaultPlacement: k,
|
|
1227
1228
|
repositionMode: V,
|
|
1228
|
-
outerContainerEl:
|
|
1229
|
-
padding:
|
|
1230
|
-
windowWidth:
|
|
1231
|
-
windowHeight:
|
|
1232
|
-
}), f = u.placement, s = u.outerContainerStyle,
|
|
1233
|
-
var d = Ye(a, t.anchorPos) && Ye(s, t.outerContainerStyle) && f === t.placement &&
|
|
1229
|
+
outerContainerEl: ge.current,
|
|
1230
|
+
padding: $e,
|
|
1231
|
+
windowWidth: Oe.innerWidth,
|
|
1232
|
+
windowHeight: Oe.innerHeight
|
|
1233
|
+
}), f = u.placement, s = u.outerContainerStyle, p = u.maxHeight, v = u.maxWidth;
|
|
1234
|
+
var d = Ye(a, t.anchorPos) && Ye(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
|
|
1234
1235
|
var h = true;
|
|
1235
1236
|
var m = {};
|
|
1236
1237
|
var g;
|
|
1237
|
-
if (
|
|
1238
|
+
if (me.current) {
|
|
1238
1239
|
var w = Ue({
|
|
1239
1240
|
anchorPos: a,
|
|
1240
|
-
borderRadius:
|
|
1241
|
+
borderRadius: De,
|
|
1241
1242
|
outerContainerStyle: s,
|
|
1242
1243
|
placement: f,
|
|
1243
|
-
outerContainerEl:
|
|
1244
|
+
outerContainerEl: ge.current
|
|
1244
1245
|
});
|
|
1245
1246
|
var O = Le(w, 2);
|
|
1246
1247
|
m = O[0];
|
|
@@ -1257,97 +1258,99 @@
|
|
|
1257
1258
|
arrowStyleTransformMeta: g,
|
|
1258
1259
|
outerContainerStyle: s,
|
|
1259
1260
|
placement: f,
|
|
1260
|
-
maxHeight:
|
|
1261
|
-
maxWidth:
|
|
1261
|
+
maxHeight: p,
|
|
1262
|
+
maxWidth: v
|
|
1262
1263
|
};
|
|
1263
1264
|
}));
|
|
1264
|
-
}), [ i, l, b,
|
|
1265
|
+
}), [ i, l, b, De, $e, y, Me, k, D, $, V, je, Oe.innerHeight, Oe.innerWidth ]);
|
|
1265
1266
|
// these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
|
|
1266
1267
|
// see https://github.com/facebook/react/issues/19240#issuecomment-652945246
|
|
1267
|
-
var
|
|
1268
|
-
return P()(
|
|
1269
|
-
}), [
|
|
1270
|
-
var Ne = (0, r.useMemo)((function() {
|
|
1271
|
-
return P()($e.bind(null, true), 0);
|
|
1272
|
-
}), [ $e ]);
|
|
1268
|
+
var Ne = (0, r.useMemo)((function() {
|
|
1269
|
+
return P()(_e.bind(null, true), 0);
|
|
1270
|
+
}), [ _e ]);
|
|
1273
1271
|
var ze = (0, r.useMemo)((function() {
|
|
1274
|
-
return P()(
|
|
1272
|
+
return P()(_e.bind(null, true), 0);
|
|
1273
|
+
}), [ _e ]);
|
|
1274
|
+
var Xe = (0, r.useMemo)((function() {
|
|
1275
|
+
return P()(_e, 0, {
|
|
1275
1276
|
leading: false
|
|
1276
1277
|
});
|
|
1277
|
-
}), [
|
|
1278
|
+
}), [ _e ]);
|
|
1278
1279
|
// this needs to run on every render - equivalent to componentDidUpdate
|
|
1279
1280
|
(0, r.useEffect)((function() {
|
|
1280
|
-
if (!
|
|
1281
|
+
if (!ye.current) {
|
|
1281
1282
|
return;
|
|
1282
1283
|
}
|
|
1283
|
-
if (D ||
|
|
1284
|
-
|
|
1284
|
+
if (D || re) {
|
|
1285
|
+
Xe();
|
|
1285
1286
|
}
|
|
1286
1287
|
}));
|
|
1287
1288
|
(0, r.useEffect)((function() {
|
|
1288
|
-
if (Y && D &&
|
|
1289
|
-
|
|
1290
|
-
(0, W.takeFocus)(
|
|
1289
|
+
if (Y && D && ye.current && pe.placement != null && !he.current) {
|
|
1290
|
+
he.current = true;
|
|
1291
|
+
(0, W.takeFocus)(ye.current);
|
|
1291
1292
|
}
|
|
1292
|
-
}), [ D,
|
|
1293
|
-
|
|
1294
|
-
|
|
1293
|
+
}), [ D, pe.placement, Y ]);
|
|
1294
|
+
(0, r.useEffect)((function() {
|
|
1295
|
+
// we need to set this to true on every mount because React.StrictMode will call the effect twice
|
|
1296
|
+
// and we need to ensure that allowAnimationUpdates is true while the component is mounted
|
|
1297
|
+
de.current = true;
|
|
1295
1298
|
return function() {
|
|
1296
|
-
|
|
1297
|
-
_e.cancel();
|
|
1299
|
+
Xe.cancel();
|
|
1298
1300
|
Ne.cancel();
|
|
1299
|
-
|
|
1301
|
+
ze.cancel();
|
|
1302
|
+
de.current = false;
|
|
1300
1303
|
};
|
|
1301
|
-
// no dependencies here since this
|
|
1304
|
+
// no dependencies here since this is equivalent to componentDidMount and componentWillUnmount
|
|
1302
1305
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1303
1306
|
}), []);
|
|
1304
1307
|
// EventListeners only need to be rendered when open,
|
|
1305
1308
|
// otherwise leads to negative performance impacts
|
|
1306
|
-
var
|
|
1307
|
-
target:
|
|
1309
|
+
var tt = Pe ? n().createElement(n().Fragment, null, Ce && n().createElement(E(), {
|
|
1310
|
+
target: je,
|
|
1308
1311
|
eventType: "scroll",
|
|
1309
|
-
listener:
|
|
1312
|
+
listener: Ne,
|
|
1310
1313
|
options: Be,
|
|
1311
1314
|
key: "eventListener"
|
|
1312
1315
|
}), n().createElement(E(), {
|
|
1313
|
-
target:
|
|
1316
|
+
target: Oe,
|
|
1314
1317
|
eventType: "resize",
|
|
1315
|
-
listener:
|
|
1318
|
+
listener: Xe,
|
|
1316
1319
|
key: "eventListenerOnWindowResize"
|
|
1317
1320
|
}), n().createElement(E(), {
|
|
1318
|
-
target:
|
|
1321
|
+
target: Oe,
|
|
1319
1322
|
eventType: "scroll",
|
|
1320
|
-
listener:
|
|
1323
|
+
listener: ze,
|
|
1321
1324
|
options: Be,
|
|
1322
1325
|
key: "eventListenerOnWindowScroll"
|
|
1323
1326
|
})) : null;
|
|
1324
|
-
var
|
|
1327
|
+
var rt = (0, r.useCallback)((function() {
|
|
1325
1328
|
// checking allowAnimationUpdates avoids trying to update state after the component has been unmounted - see SUI-3666
|
|
1326
|
-
if (
|
|
1327
|
-
|
|
1329
|
+
if (de.current) {
|
|
1330
|
+
ne(false);
|
|
1328
1331
|
}
|
|
1329
1332
|
}), []);
|
|
1330
|
-
var
|
|
1331
|
-
|
|
1333
|
+
var nt = (0, r.useCallback)((function(e) {
|
|
1334
|
+
ye.current = e;
|
|
1332
1335
|
if (e && Y) {
|
|
1333
1336
|
u()(W.takeFocus, e);
|
|
1334
1337
|
}
|
|
1335
1338
|
ke(R, e);
|
|
1336
1339
|
}), [ R, Y ]);
|
|
1337
|
-
var
|
|
1338
|
-
|
|
1340
|
+
var ot = (0, r.useCallback)((function(e) {
|
|
1341
|
+
ge.current = e;
|
|
1339
1342
|
ke(F, e);
|
|
1340
1343
|
}), [ F ]);
|
|
1341
|
-
var
|
|
1342
|
-
if (
|
|
1344
|
+
var at = (0, r.useCallback)((function(e) {
|
|
1345
|
+
if (ye.current) {
|
|
1343
1346
|
if (K) {
|
|
1344
|
-
(0, W.handleTab)(
|
|
1347
|
+
(0, W.handleTab)(ye.current, e);
|
|
1345
1348
|
} else if ((0, W.isTabKey)(e)) {
|
|
1346
|
-
var t = (0, W.getSortedTabbableElements)(
|
|
1349
|
+
var t = (0, W.getSortedTabbableElements)(ye.current);
|
|
1347
1350
|
if (t.length > 0) {
|
|
1348
1351
|
var r = e.shiftKey ? t[0] : t[t.length - 1];
|
|
1349
1352
|
if (r === e.target) {
|
|
1350
|
-
|
|
1353
|
+
Te({
|
|
1351
1354
|
event: e,
|
|
1352
1355
|
reason: "tabKey"
|
|
1353
1356
|
});
|
|
@@ -1355,69 +1358,70 @@
|
|
|
1355
1358
|
}
|
|
1356
1359
|
}
|
|
1357
1360
|
}
|
|
1358
|
-
}), [
|
|
1359
|
-
var
|
|
1361
|
+
}), [ Te, K ]);
|
|
1362
|
+
var it = (0, r.useMemo)((function() {
|
|
1360
1363
|
return {
|
|
1361
1364
|
opacity: f ? 0 : 1
|
|
1362
1365
|
};
|
|
1363
1366
|
}), [ f ]);
|
|
1364
|
-
var
|
|
1367
|
+
var lt = (0, r.useMemo)((function() {
|
|
1365
1368
|
return We({
|
|
1366
1369
|
tension: 300,
|
|
1367
1370
|
friction: 20,
|
|
1368
1371
|
clamp: true
|
|
1369
|
-
},
|
|
1370
|
-
}), [
|
|
1371
|
-
var
|
|
1372
|
-
from:
|
|
1373
|
-
to:
|
|
1372
|
+
}, p);
|
|
1373
|
+
}), [ p ]);
|
|
1374
|
+
var ct = (0, j.useAnimation)({
|
|
1375
|
+
from: it,
|
|
1376
|
+
to: Se,
|
|
1374
1377
|
// Setting clamp to true will stop animating at the point it hit's it's goal value.
|
|
1375
1378
|
// This will prevent click through while animating out (SUI-6618).
|
|
1376
|
-
config:
|
|
1377
|
-
onRest:
|
|
1379
|
+
config: lt,
|
|
1380
|
+
onRest: rt
|
|
1378
1381
|
});
|
|
1379
|
-
var ct = (0, r.useMemo)((function() {
|
|
1380
|
-
return We(We({}, se.outerContainerStyle), lt);
|
|
1381
|
-
}), [ se.outerContainerStyle, lt ]);
|
|
1382
1382
|
var ut = (0, r.useMemo)((function() {
|
|
1383
|
+
return We(We({}, pe.outerContainerStyle), ct);
|
|
1384
|
+
}), [ pe.outerContainerStyle, ct ]);
|
|
1385
|
+
var ft = (0, r.useMemo)((function() {
|
|
1383
1386
|
return h()(C === null || C === void 0 ? void 0 : C.filter((function(e) {
|
|
1384
1387
|
return e !== "offScreen";
|
|
1385
1388
|
})), A().possibleCloseReasons);
|
|
1386
1389
|
}), [ C ]);
|
|
1387
|
-
var
|
|
1390
|
+
var st = g()(w) ? w(we) : w;
|
|
1388
1391
|
|
|
1389
|
-
return n().createElement(n().Fragment, null,
|
|
1390
|
-
closeReasons:
|
|
1391
|
-
open:
|
|
1392
|
-
onRequestClose:
|
|
1392
|
+
return n().createElement(n().Fragment, null, tt, n().createElement(A(), {
|
|
1393
|
+
closeReasons: ft,
|
|
1394
|
+
open: Pe,
|
|
1395
|
+
onRequestClose: Te,
|
|
1393
1396
|
key: "Layer"
|
|
1394
|
-
},
|
|
1395
|
-
anchorRect:
|
|
1396
|
-
popoverEl:
|
|
1397
|
-
popoverPlacement:
|
|
1397
|
+
}, Pe && ye.current && H && n().createElement(ce, {
|
|
1398
|
+
anchorRect: pe.anchorPos,
|
|
1399
|
+
popoverEl: ye.current,
|
|
1400
|
+
popoverPlacement: pe.placement,
|
|
1398
1401
|
ref: H
|
|
1399
|
-
}),
|
|
1402
|
+
}), Pe && n().createElement(B, {
|
|
1400
1403
|
"data-test": "outer-popover",
|
|
1401
|
-
style:
|
|
1402
|
-
ref:
|
|
1404
|
+
style: ut,
|
|
1405
|
+
ref: ot
|
|
1403
1406
|
}, n().createElement(U, Re({
|
|
1404
1407
|
$appearance: d,
|
|
1405
|
-
$boxPadding:
|
|
1408
|
+
$boxPadding: $e,
|
|
1406
1409
|
$open: D,
|
|
1407
1410
|
"data-test": "popover",
|
|
1408
|
-
ref:
|
|
1411
|
+
ref: nt,
|
|
1409
1412
|
id: I,
|
|
1410
|
-
onKeyDown:
|
|
1411
|
-
},
|
|
1413
|
+
onKeyDown: at
|
|
1414
|
+
}, Z), n().createElement(n().Fragment, null, d === "none" && st, d !== "none" && !Ae && n().createElement(J, {
|
|
1412
1415
|
"data-test": "popover-arrow",
|
|
1413
1416
|
$appearance: d,
|
|
1414
|
-
ref:
|
|
1415
|
-
style:
|
|
1417
|
+
ref: me,
|
|
1418
|
+
style: pe.arrowStyle
|
|
1416
1419
|
}), d !== "none" && n().createElement(G, {
|
|
1417
1420
|
$appearance: d
|
|
1418
|
-
},
|
|
1421
|
+
}, st))))));
|
|
1419
1422
|
}
|
|
1420
1423
|
tt.propTypes = Xe;
|
|
1424
|
+
tt.possibleCloseReasons = Ke;
|
|
1421
1425
|
/* harmony default export */ const rt = tt;
|
|
1422
1426
|
// CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
|
|
1423
1427
|
var nt = (0, r.createContext)({});
|