@stackoverflow/stacks 1.2.0 → 1.3.2

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.
Files changed (42) hide show
  1. package/dist/controllers/s-expandable-control.d.ts +1 -1
  2. package/dist/controllers/s-tooltip.d.ts +16 -1
  3. package/dist/css/stacks.css +974 -731
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +174 -91
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/css/atomic/borders.less +1 -0
  8. package/lib/css/atomic/colors.less +1 -0
  9. package/lib/css/atomic/misc.less +1 -1
  10. package/lib/css/atomic/typography.less +0 -6
  11. package/lib/css/atomic/width-height.less +1 -1
  12. package/lib/css/components/activity-indicator.less +18 -17
  13. package/lib/css/components/avatars.less +51 -131
  14. package/lib/css/components/badges.less +2 -0
  15. package/lib/css/components/breadcrumbs.less +4 -4
  16. package/lib/css/components/buttons.less +38 -54
  17. package/lib/css/components/empty-states.less +15 -0
  18. package/lib/css/components/{collapsible.less → expandable.less} +0 -0
  19. package/lib/css/components/inputs.less +44 -110
  20. package/lib/css/components/labels.less +98 -0
  21. package/lib/css/components/notices.less +190 -163
  22. package/lib/css/components/post-summary.less +117 -114
  23. package/lib/css/components/progress-bars.less +1 -1
  24. package/lib/css/components/prose.less +4 -4
  25. package/lib/css/components/spinner.less +39 -1
  26. package/lib/css/components/tables.less +1 -5
  27. package/lib/css/components/topbar.less +4 -1
  28. package/lib/css/components/uploader.less +70 -84
  29. package/lib/css/exports/constants-colors.less +68 -49
  30. package/lib/css/stacks-dynamic.less +0 -1
  31. package/lib/css/stacks-static.less +3 -2
  32. package/lib/ts/controllers/s-expandable-control.ts +23 -19
  33. package/lib/ts/controllers/s-modal.ts +16 -16
  34. package/lib/ts/controllers/s-navigation-tablist.ts +13 -13
  35. package/lib/ts/controllers/s-popover.ts +26 -18
  36. package/lib/ts/controllers/s-table.ts +31 -29
  37. package/lib/ts/controllers/s-tooltip.ts +62 -23
  38. package/lib/ts/controllers/s-uploader.ts +26 -12
  39. package/lib/ts/stacks.ts +8 -4
  40. package/package.json +23 -23
  41. package/lib/css/components/banners.less +0 -80
  42. package/lib/css/components/blank-states.less +0 -26
package/dist/js/stacks.js CHANGED
@@ -12,7 +12,7 @@ return /******/ (() => { // webpackBootstrap
12
12
  /******/ "use strict";
13
13
  /******/ var __webpack_modules__ = ({
14
14
 
15
- /***/ 750:
15
+ /***/ 492:
16
16
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
17
17
 
18
18
  // ESM COMPAT FLAG
@@ -227,41 +227,63 @@ function getBasePlacement(placement) {
227
227
  var math_max = Math.max;
228
228
  var math_min = Math.min;
229
229
  var round = Math.round;
230
+ ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js
231
+ function getUAString() {
232
+ var uaData = navigator.userAgentData;
233
+
234
+ if (uaData != null && uaData.brands) {
235
+ return uaData.brands.map(function (item) {
236
+ return item.brand + "/" + item.version;
237
+ }).join(' ');
238
+ }
239
+
240
+ return navigator.userAgent;
241
+ }
242
+ ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js
243
+
244
+ function isLayoutViewport() {
245
+ return !/^((?!chrome|android).)*safari/i.test(getUAString());
246
+ }
230
247
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
231
248
 
232
249
 
233
- function getBoundingClientRect(element, includeScale) {
250
+
251
+
252
+ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
234
253
  if (includeScale === void 0) {
235
254
  includeScale = false;
236
255
  }
237
256
 
238
- var rect = element.getBoundingClientRect();
257
+ if (isFixedStrategy === void 0) {
258
+ isFixedStrategy = false;
259
+ }
260
+
261
+ var clientRect = element.getBoundingClientRect();
239
262
  var scaleX = 1;
240
263
  var scaleY = 1;
241
264
 
242
- if (isHTMLElement(element) && includeScale) {
243
- var offsetHeight = element.offsetHeight;
244
- var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
245
- // Fallback to 1 in case both values are `0`
246
-
247
- if (offsetWidth > 0) {
248
- scaleX = round(rect.width) / offsetWidth || 1;
249
- }
250
-
251
- if (offsetHeight > 0) {
252
- scaleY = round(rect.height) / offsetHeight || 1;
253
- }
265
+ if (includeScale && isHTMLElement(element)) {
266
+ scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
267
+ scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
254
268
  }
255
269
 
270
+ var _ref = isElement(element) ? getWindow(element) : window,
271
+ visualViewport = _ref.visualViewport;
272
+
273
+ var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
274
+ var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
275
+ var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
276
+ var width = clientRect.width / scaleX;
277
+ var height = clientRect.height / scaleY;
256
278
  return {
257
- width: rect.width / scaleX,
258
- height: rect.height / scaleY,
259
- top: rect.top / scaleY,
260
- right: rect.right / scaleX,
261
- bottom: rect.bottom / scaleY,
262
- left: rect.left / scaleX,
263
- x: rect.left / scaleX,
264
- y: rect.top / scaleY
279
+ width: width,
280
+ height: height,
281
+ top: y,
282
+ right: x + width,
283
+ bottom: y + height,
284
+ left: x,
285
+ x: x,
286
+ y: y
265
287
  };
266
288
  }
267
289
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
@@ -359,6 +381,7 @@ function getParentNode(element) {
359
381
 
360
382
 
361
383
 
384
+
362
385
  function getTrueOffsetParent(element) {
363
386
  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
364
387
  getComputedStyle(element).position === 'fixed') {
@@ -371,8 +394,8 @@ function getTrueOffsetParent(element) {
371
394
 
372
395
 
373
396
  function getContainingBlock(element) {
374
- var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
375
- var isIE = navigator.userAgent.indexOf('Trident') !== -1;
397
+ var isFirefox = /firefox/i.test(getUAString());
398
+ var isIE = /Trident/i.test(getUAString());
376
399
 
377
400
  if (isIE && isHTMLElement(element)) {
378
401
  // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -829,31 +852,22 @@ function getWindowScrollBarX(element) {
829
852
 
830
853
 
831
854
 
832
- function getViewportRect(element) {
855
+
856
+ function getViewportRect(element, strategy) {
833
857
  var win = getWindow(element);
834
858
  var html = getDocumentElement(element);
835
859
  var visualViewport = win.visualViewport;
836
860
  var width = html.clientWidth;
837
861
  var height = html.clientHeight;
838
862
  var x = 0;
839
- var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
840
- // can be obscured underneath it.
841
- // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
842
- // if it isn't open, so if this isn't available, the popper will be detected
843
- // to overflow the bottom of the screen too early.
863
+ var y = 0;
844
864
 
845
865
  if (visualViewport) {
846
866
  width = visualViewport.width;
847
- height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
848
- // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
849
- // errors due to floating point numbers, so we need to check precision.
850
- // Safari returns a number <= 0, usually < -1 when pinch-zoomed
851
- // Feature detection fails in mobile emulation mode in Chrome.
852
- // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
853
- // 0.001
854
- // Fallback here: "Not Safari" userAgent
855
-
856
- if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
867
+ height = visualViewport.height;
868
+ var layoutViewport = isLayoutViewport();
869
+
870
+ if (layoutViewport || !layoutViewport && strategy === 'fixed') {
857
871
  x = visualViewport.offsetLeft;
858
872
  y = visualViewport.offsetTop;
859
873
  }
@@ -976,8 +990,8 @@ function rectToClientRect(rect) {
976
990
 
977
991
 
978
992
 
979
- function getInnerBoundingClientRect(element) {
980
- var rect = getBoundingClientRect(element);
993
+ function getInnerBoundingClientRect(element, strategy) {
994
+ var rect = getBoundingClientRect(element, false, strategy === 'fixed');
981
995
  rect.top = rect.top + element.clientTop;
982
996
  rect.left = rect.left + element.clientLeft;
983
997
  rect.bottom = rect.top + element.clientHeight;
@@ -989,8 +1003,8 @@ function getInnerBoundingClientRect(element) {
989
1003
  return rect;
990
1004
  }
991
1005
 
992
- function getClientRectFromMixedType(element, clippingParent) {
993
- return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
1006
+ function getClientRectFromMixedType(element, clippingParent, strategy) {
1007
+ return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
994
1008
  } // A "clipping parent" is an overflowable container with the characteristic of
995
1009
  // clipping (or hiding) overflowing elements with a position different from
996
1010
  // `initial`
@@ -1013,18 +1027,18 @@ function getClippingParents(element) {
1013
1027
  // clipping parents
1014
1028
 
1015
1029
 
1016
- function getClippingRect(element, boundary, rootBoundary) {
1030
+ function getClippingRect(element, boundary, rootBoundary, strategy) {
1017
1031
  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
1018
1032
  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
1019
1033
  var firstClippingParent = clippingParents[0];
1020
1034
  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
1021
- var rect = getClientRectFromMixedType(element, clippingParent);
1035
+ var rect = getClientRectFromMixedType(element, clippingParent, strategy);
1022
1036
  accRect.top = math_max(rect.top, accRect.top);
1023
1037
  accRect.right = math_min(rect.right, accRect.right);
1024
1038
  accRect.bottom = math_min(rect.bottom, accRect.bottom);
1025
1039
  accRect.left = math_max(rect.left, accRect.left);
1026
1040
  return accRect;
1027
- }, getClientRectFromMixedType(element, firstClippingParent));
1041
+ }, getClientRectFromMixedType(element, firstClippingParent, strategy));
1028
1042
  clippingRect.width = clippingRect.right - clippingRect.left;
1029
1043
  clippingRect.height = clippingRect.bottom - clippingRect.top;
1030
1044
  clippingRect.x = clippingRect.left;
@@ -1121,6 +1135,8 @@ function detectOverflow(state, options) {
1121
1135
  var _options = options,
1122
1136
  _options$placement = _options.placement,
1123
1137
  placement = _options$placement === void 0 ? state.placement : _options$placement,
1138
+ _options$strategy = _options.strategy,
1139
+ strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
1124
1140
  _options$boundary = _options.boundary,
1125
1141
  boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
1126
1142
  _options$rootBoundary = _options.rootBoundary,
@@ -1135,7 +1151,7 @@ function detectOverflow(state, options) {
1135
1151
  var altContext = elementContext === popper ? reference : popper;
1136
1152
  var popperRect = state.rects.popper;
1137
1153
  var element = state.elements[altBoundary ? altContext : elementContext];
1138
- var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
1154
+ var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
1139
1155
  var referenceClientRect = getBoundingClientRect(state.elements.reference);
1140
1156
  var popperOffsets = computeOffsets({
1141
1157
  reference: referenceClientRect,
@@ -1706,7 +1722,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
1706
1722
  var isOffsetParentAnElement = isHTMLElement(offsetParent);
1707
1723
  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
1708
1724
  var documentElement = getDocumentElement(offsetParent);
1709
- var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
1725
+ var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
1710
1726
  var scroll = {
1711
1727
  scrollLeft: 0,
1712
1728
  scrollTop: 0
@@ -4459,7 +4475,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
4459
4475
  exports.ExpandableController = void 0;
4460
4476
  var Stacks = __webpack_require__(36);
4461
4477
  // Radio buttons only trigger a change event when they're *checked*, but not when
4462
- // they're *unchecked*. Therefore, if we have an active `s-collapsible-control` in
4478
+ // they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
4463
4479
  // the document, we listen for change events on *all* radio buttons and find any
4464
4480
  // other radio buttons in the same `name` group, triggering a custom event on all
4465
4481
  // of them so the controller can re-evaluate.
@@ -4513,13 +4529,13 @@ var ExpandableController = /** @class */ (function (_super) {
4513
4529
  }
4514
4530
  ExpandableController.prototype.initialize = function () {
4515
4531
  if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf(this.element.type) >= 0) {
4516
- this.isCollapsed = this._isCollapsedForCheckable;
4532
+ this.isCollapsed = this._isCollapsedForCheckable.bind(this);
4517
4533
  this.events = ["change", RADIO_OFF_EVENT];
4518
4534
  this.isCheckable = true;
4519
4535
  this.isRadio = this.element.type === "radio";
4520
4536
  }
4521
4537
  else {
4522
- this.isCollapsed = this._isCollapsedForClickable;
4538
+ this.isCollapsed = this._isCollapsedForClickable.bind(this);
4523
4539
  this.events = ["click", "keydown"];
4524
4540
  }
4525
4541
  this.listener = this.listener.bind(this);
@@ -4528,7 +4544,7 @@ var ExpandableController = /** @class */ (function (_super) {
4528
4544
  // for non-checkable elements, the initial source of truth is the collapsed/expanded
4529
4545
  // state of the controlled element (unless the element doesn't exist)
4530
4546
  ExpandableController.prototype._isCollapsedForClickable = function () {
4531
- var cc = this.controlledCollapsibles;
4547
+ var cc = this.controlledExpandables;
4532
4548
  // the element is considered collapsed if *any* target element is collapsed
4533
4549
  return cc.length > 0 ? !cc.every(function (element) { return element.classList.contains("is-expanded"); }) : this.element.getAttribute("aria-expanded") === "false";
4534
4550
  };
@@ -4538,7 +4554,7 @@ var ExpandableController = /** @class */ (function (_super) {
4538
4554
  return !this.element.checked;
4539
4555
  };
4540
4556
  ;
4541
- Object.defineProperty(ExpandableController.prototype, "controlledCollapsibles", {
4557
+ Object.defineProperty(ExpandableController.prototype, "controlledExpandables", {
4542
4558
  get: function () {
4543
4559
  var attr = this.element.getAttribute("aria-controls");
4544
4560
  if (!attr) {
@@ -4602,7 +4618,7 @@ var ExpandableController = /** @class */ (function (_super) {
4602
4618
  }
4603
4619
  }
4604
4620
  this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
4605
- for (var _i = 0, _a = this.controlledCollapsibles; _i < _a.length; _i++) {
4621
+ for (var _i = 0, _a = this.controlledExpandables; _i < _a.length; _i++) {
4606
4622
  var controlledElement = _a[_i];
4607
4623
  controlledElement.classList.toggle("is-expanded", !newCollapsed);
4608
4624
  }
@@ -4613,26 +4629,30 @@ var ExpandableController = /** @class */ (function (_super) {
4613
4629
  ExpandableController.prototype.connect = function () {
4614
4630
  var _this = this;
4615
4631
  this.events.forEach(function (e) {
4616
- _this.element.addEventListener(e, _this.listener);
4632
+ _this.element.addEventListener(e, _this.listener.bind(_this));
4617
4633
  }, this);
4618
4634
  if (this.isRadio) {
4619
4635
  globalChangeListenerRequired(true);
4620
4636
  }
4621
4637
  // synchronize state -- in all cases, this means setting the correct `aria-expanded`
4622
- // attribute; for checkable controls this also means setting the `is-collapsed` class
4623
- this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
4638
+ // attribute; for checkable controls this also means setting the `is-collapsed` class.
4639
+ // Note: aria-expanded is currently an invalid attribute on radio elements
4640
+ // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
4641
+ if (!this.isRadio) {
4642
+ this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
4643
+ }
4624
4644
  if (this.isCheckable) {
4625
- var cc = this.controlledCollapsibles;
4645
+ var cc = this.controlledExpandables;
4626
4646
  if (cc.length) {
4627
- var expected = !this.isCollapsed();
4647
+ var expected_1 = !this.isCollapsed();
4628
4648
  // if any element does not match the expected state, set them all to the expected state
4629
- if (cc.some(function (element) { return element.classList.contains("is-expanded") !== expected; })) {
4630
- for (var _i = 0, _a = this.controlledCollapsibles; _i < _a.length; _i++) {
4649
+ if (cc.some(function (element) { return element.classList.contains("is-expanded") !== expected_1; })) {
4650
+ for (var _i = 0, _a = this.controlledExpandables; _i < _a.length; _i++) {
4631
4651
  var controlledElement = _a[_i];
4632
- controlledElement.classList.toggle("is-expanded", expected);
4652
+ controlledElement.classList.toggle("is-expanded", expected_1);
4633
4653
  }
4634
- this._dispatchShowHideEvent(expected);
4635
- this._toggleClass(expected);
4654
+ this._dispatchShowHideEvent(expected_1);
4655
+ this._toggleClass(expected_1);
4636
4656
  }
4637
4657
  }
4638
4658
  }
@@ -4641,7 +4661,7 @@ var ExpandableController = /** @class */ (function (_super) {
4641
4661
  ExpandableController.prototype.disconnect = function () {
4642
4662
  var _this = this;
4643
4663
  this.events.forEach(function (e) {
4644
- _this.element.removeEventListener(e, _this.listener);
4664
+ _this.element.removeEventListener(e, _this.listener.bind(_this));
4645
4665
  }, this);
4646
4666
  if (this.isRadio) {
4647
4667
  globalChangeListenerRequired(false);
@@ -4774,7 +4794,7 @@ var ModalController = /** @class */ (function (_super) {
4774
4794
  this.removeModalOnHide();
4775
4795
  }
4776
4796
  // check for transitionend support
4777
- var supportsTransitionEnd = this.modalTarget.ontransitionend !== undefined;
4797
+ var supportsTransitionEnd = (this.modalTarget).ontransitionend !== undefined;
4778
4798
  // shown/hidden events trigger after toggling the class
4779
4799
  if (supportsTransitionEnd) {
4780
4800
  // wait until after the modal finishes transitioning to fire the event
@@ -5147,7 +5167,7 @@ var __extends = (this && this.__extends) || (function () {
5147
5167
  })();
5148
5168
  Object.defineProperty(exports, "__esModule", ({ value: true }));
5149
5169
  exports.detachPopover = exports.attachPopover = exports.hidePopover = exports.showPopover = exports.PopoverController = exports.BasePopoverController = void 0;
5150
- var core_1 = __webpack_require__(750);
5170
+ var core_1 = __webpack_require__(492);
5151
5171
  var Stacks = __webpack_require__(36);
5152
5172
  var BasePopoverController = /** @class */ (function (_super) {
5153
5173
  __extends(BasePopoverController, _super);
@@ -5222,6 +5242,8 @@ var BasePopoverController = /** @class */ (function (_super) {
5222
5242
  this.hide();
5223
5243
  if (this.popper) {
5224
5244
  this.popper.destroy();
5245
+ // eslint-disable-next-line
5246
+ // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
5225
5247
  delete this.popper;
5226
5248
  }
5227
5249
  _super.prototype.disconnect.call(this);
@@ -5273,6 +5295,8 @@ var BasePopoverController = /** @class */ (function (_super) {
5273
5295
  if (this.popper) {
5274
5296
  // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
5275
5297
  this.popper.destroy();
5298
+ // eslint-disable-next-line
5299
+ // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
5276
5300
  delete this.popper;
5277
5301
  }
5278
5302
  // on first interaction, hide-on-outside-click with value "after-dismissal" reverts to the default behavior
@@ -5311,7 +5335,6 @@ var BasePopoverController = /** @class */ (function (_super) {
5311
5335
  * Initializes the Popper for this instance
5312
5336
  */
5313
5337
  BasePopoverController.prototype.initializePopper = function () {
5314
- // @ts-ignore
5315
5338
  this.popper = (0, core_1.createPopper)(this.referenceElement, this.popoverElement, {
5316
5339
  placement: this.data.get("placement") || "bottom",
5317
5340
  modifiers: [
@@ -5382,7 +5405,7 @@ var BasePopoverController = /** @class */ (function (_super) {
5382
5405
  */
5383
5406
  BasePopoverController.prototype.scheduleUpdate = function () {
5384
5407
  if (this.popper && this.isVisible) {
5385
- this.popper.update();
5408
+ void this.popper.update();
5386
5409
  }
5387
5410
  };
5388
5411
  return BasePopoverController;
@@ -5474,8 +5497,9 @@ var PopoverController = /** @class */ (function (_super) {
5474
5497
  if (!this.data.has("toggle-class")) {
5475
5498
  return;
5476
5499
  }
5500
+ var toggleClass = this.data.get("toggle-class") || "";
5477
5501
  var cl = this.referenceElement.classList;
5478
- this.data.get("toggle-class").split(/\s+/).forEach(function (cls) {
5502
+ toggleClass.split(/\s+/).forEach(function (cls) {
5479
5503
  cl.toggle(cls, show);
5480
5504
  });
5481
5505
  };
@@ -5484,7 +5508,9 @@ var PopoverController = /** @class */ (function (_super) {
5484
5508
  * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
5485
5509
  */
5486
5510
  PopoverController.prototype.toggleAccessibilityAttributes = function (show) {
5487
- this.referenceElement.ariaExpanded = (show === null || show === void 0 ? void 0 : show.toString()) || this.referenceElement.ariaExpanded || 'false';
5511
+ var expandedValue = (show === null || show === void 0 ? void 0 : show.toString()) || this.referenceElement.ariaExpanded || "false";
5512
+ this.referenceElement.ariaExpanded = expandedValue;
5513
+ this.referenceElement.setAttribute("aria-expanded", expandedValue);
5488
5514
  };
5489
5515
  PopoverController.targets = [];
5490
5516
  return PopoverController;
@@ -5543,6 +5569,7 @@ function attachPopover(element, popover, options) {
5543
5569
  throw "element has invalid data-s-popover-reference-selector attribute";
5544
5570
  }
5545
5571
  if (typeof popover === 'string') {
5572
+ // eslint-disable-next-line no-unsanitized/method
5546
5573
  var elements = document.createRange().createContextualFragment(popover).children;
5547
5574
  if (elements.length !== 1) {
5548
5575
  throw "popover should contain a single element";
@@ -5669,6 +5696,7 @@ var TableController = /** @class */ (function (_super) {
5669
5696
  if (["asc", "desc", "none"].indexOf(direction) < 0) {
5670
5697
  throw "direction must be one of asc, desc, or none";
5671
5698
  }
5699
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
5672
5700
  var controller = this;
5673
5701
  this.columnTargets.forEach(function (target) {
5674
5702
  var isCurrrent = target === headElem;
@@ -5687,6 +5715,7 @@ var TableController = /** @class */ (function (_super) {
5687
5715
  };
5688
5716
  ;
5689
5717
  TableController.prototype.sort = function (evt) {
5718
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
5690
5719
  var controller = this;
5691
5720
  var colHead = evt.currentTarget;
5692
5721
  if (!(colHead instanceof HTMLTableCellElement)) {
@@ -5732,7 +5761,7 @@ var TableController = /** @class */ (function (_super) {
5732
5761
  // the value we're using is the cell's text, trimmed of any whitespace
5733
5762
  var explicit = controller.getElementData(cell, "sort-val");
5734
5763
  var d = typeof explicit === "string" ? explicit : cell.textContent.trim();
5735
- if ((d !== "") && (parseInt(d, 10) + "" !== d)) {
5764
+ if ((d !== "") && ("".concat(parseInt(d, 10)) !== d)) {
5736
5765
  anyNonInt = true;
5737
5766
  }
5738
5767
  data.push([d, index]);
@@ -5908,11 +5937,13 @@ var TooltipController = /** @class */ (function (_super) {
5908
5937
  if (window.matchMedia("(hover: hover)").matches) {
5909
5938
  this.bindMouseEvents();
5910
5939
  }
5940
+ this.bindKeyboardEvents();
5911
5941
  };
5912
5942
  /**
5913
5943
  * Unbinds mouse events in addition to BasePopoverController.disconnect
5914
5944
  */
5915
5945
  TooltipController.prototype.disconnect = function () {
5946
+ this.unbindKeyboardEvents();
5916
5947
  this.unbindMouseEvents();
5917
5948
  _super.prototype.disconnect.call(this);
5918
5949
  };
@@ -5942,11 +5973,17 @@ var TooltipController = /** @class */ (function (_super) {
5942
5973
  /**
5943
5974
  * Cancels the scheduled tooltip popover display and hides it if already displayed
5944
5975
  */
5945
- TooltipController.prototype.hide = function (dispatcher) {
5976
+ TooltipController.prototype.scheduleHide = function (dispatcher) {
5977
+ var _this = this;
5946
5978
  if (dispatcher === void 0) { dispatcher = null; }
5947
5979
  window.clearTimeout(this.activeTimeout);
5948
- this.activeTimeout = null;
5949
- _super.prototype.hide.call(this, dispatcher);
5980
+ this.activeTimeout = window.setTimeout(function () { return _super.prototype.hide.call(_this, dispatcher); }, 100);
5981
+ };
5982
+ /**
5983
+ * Cancels the activeTimeout
5984
+ */
5985
+ TooltipController.prototype.clearActiveTimeout = function () {
5986
+ clearTimeout(this.activeTimeout);
5950
5987
  };
5951
5988
  /**
5952
5989
  * Applies data-s-tooltip-html-title and title attributes.
@@ -5955,6 +5992,7 @@ var TooltipController = /** @class */ (function (_super) {
5955
5992
  var content;
5956
5993
  var htmlTitle = this.data.get("html-title");
5957
5994
  if (htmlTitle) {
5995
+ // eslint-disable-next-line no-unsanitized/method
5958
5996
  content = document.createRange().createContextualFragment(htmlTitle);
5959
5997
  }
5960
5998
  else {
@@ -5977,8 +6015,7 @@ var TooltipController = /** @class */ (function (_super) {
5977
6015
  if (!popover) {
5978
6016
  popover = document.createElement("div");
5979
6017
  popover.id = popoverId;
5980
- popover.className = "s-popover s-popover__tooltip pe-none";
5981
- popover.setAttribute("aria-hidden", "true");
6018
+ popover.className = "s-popover s-popover__tooltip";
5982
6019
  popover.setAttribute("role", "tooltip");
5983
6020
  var parentNode = this.element.parentNode;
5984
6021
  if (parentNode) {
@@ -6030,19 +6067,44 @@ var TooltipController = /** @class */ (function (_super) {
6030
6067
  */
6031
6068
  TooltipController.prototype.hideIfWithin = function (event) {
6032
6069
  if (event.target.contains(this.referenceElement)) {
6033
- this.hide();
6070
+ this.scheduleHide();
6071
+ }
6072
+ };
6073
+ TooltipController.prototype.hideOnEscapeKeyEvent = function (event) {
6074
+ if (event.key === "Escape") {
6075
+ this.scheduleHide();
6034
6076
  }
6035
6077
  };
6078
+ /**
6079
+ * Binds mouse events to show/hide on reference element hover
6080
+ */
6081
+ TooltipController.prototype.bindKeyboardEvents = function () {
6082
+ this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
6083
+ this.boundHide = this.boundHide || this.scheduleHide.bind(this);
6084
+ this.boundHideOnEscapeKeyEvent = this.boundHideOnEscapeKeyEvent || this.hideOnEscapeKeyEvent.bind(this);
6085
+ this.referenceElement.addEventListener("focus", this.boundScheduleShow);
6086
+ this.referenceElement.addEventListener("blur", this.boundHide);
6087
+ document.addEventListener("keyup", this.boundHideOnEscapeKeyEvent);
6088
+ };
6089
+ /**
6090
+ * Unbinds all mouse events
6091
+ */
6092
+ TooltipController.prototype.unbindKeyboardEvents = function () {
6093
+ this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
6094
+ this.referenceElement.removeEventListener("blur", this.boundHide);
6095
+ document.removeEventListener("keyup", this.boundHideOnEscapeKeyEvent);
6096
+ };
6036
6097
  /**
6037
6098
  * Binds mouse events to show/hide on reference element hover
6038
6099
  */
6039
6100
  TooltipController.prototype.bindMouseEvents = function () {
6040
6101
  this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
6041
- this.boundHide = this.boundHide || this.hide.bind(this);
6102
+ this.boundHide = this.boundHide || this.scheduleHide.bind(this);
6103
+ this.boundClearActiveTimeout = this.boundClearActiveTimeout || this.clearActiveTimeout.bind(this);
6042
6104
  this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
6043
6105
  this.referenceElement.addEventListener("mouseout", this.boundHide);
6044
- this.referenceElement.addEventListener("focus", this.boundScheduleShow);
6045
- this.referenceElement.addEventListener("blur", this.boundHide);
6106
+ this.popoverElement.addEventListener("mouseover", this.boundClearActiveTimeout);
6107
+ this.popoverElement.addEventListener("mouseout", this.boundHide);
6046
6108
  };
6047
6109
  /**
6048
6110
  * Unbinds all mouse events
@@ -6052,6 +6114,8 @@ var TooltipController = /** @class */ (function (_super) {
6052
6114
  this.referenceElement.removeEventListener("mouseout", this.boundHide);
6053
6115
  this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
6054
6116
  this.referenceElement.removeEventListener("blur", this.boundHide);
6117
+ this.popoverElement.removeEventListener("mouseover", this.boundClearActiveTimeout);
6118
+ this.popoverElement.removeEventListener("mouseout", this.boundHide);
6055
6119
  };
6056
6120
  /**
6057
6121
  * Generates an ID for tooltips created with setTooltip.
@@ -6102,7 +6166,8 @@ function applyOptionsAndTitleAttributes(element, options) {
6102
6166
  controller.applyTitleAttributes();
6103
6167
  }
6104
6168
  else {
6105
- element.setAttribute("data-controller", element.getAttribute("data-controller") + " s-tooltip");
6169
+ var dataController = element.getAttribute("data-controller");
6170
+ element.setAttribute("data-controller", "".concat(dataController ? dataController : "", " s-tooltip"));
6106
6171
  }
6107
6172
  }
6108
6173
 
@@ -6176,7 +6241,9 @@ var UploaderController = /** @class */ (function (_super) {
6176
6241
  }
6177
6242
  res.forEach(function (file) { return _this.addFilePreview(file); });
6178
6243
  _this.handleUploaderActive(true);
6179
- });
6244
+ })
6245
+ // TODO consider rendering an error message
6246
+ .catch(function () { return null; });
6180
6247
  };
6181
6248
  /**
6182
6249
  * Resets the Uploader to initial state
@@ -6196,14 +6263,26 @@ var UploaderController = /** @class */ (function (_super) {
6196
6263
  var showElements = scope.findAllElements('[data-s-uploader-show-on-input]');
6197
6264
  var enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
6198
6265
  if (shouldPreview) {
6199
- hideElements.map(function (el) { return el.classList.add("d-none"); });
6200
- showElements.map(function (el) { return el.classList.remove("d-none"); });
6201
- enableElements.map(function (el) { return el.removeAttribute("disabled"); });
6266
+ hideElements.forEach(function (el) {
6267
+ el.classList.add("d-none");
6268
+ });
6269
+ showElements.forEach(function (el) {
6270
+ el.classList.remove("d-none");
6271
+ });
6272
+ enableElements.forEach(function (el) {
6273
+ el.removeAttribute("disabled");
6274
+ });
6202
6275
  }
6203
6276
  else {
6204
- hideElements.map(function (el) { return el.classList.remove("d-none"); });
6205
- showElements.map(function (el) { return el.classList.add("d-none"); });
6206
- enableElements.map(function (el) { return el.setAttribute("disabled", "true"); });
6277
+ hideElements.forEach(function (el) {
6278
+ el.classList.remove("d-none");
6279
+ });
6280
+ showElements.forEach(function (el) {
6281
+ el.classList.add("d-none");
6282
+ });
6283
+ enableElements.forEach(function (el) {
6284
+ el.setAttribute("disabled", "true");
6285
+ });
6207
6286
  this.handleUploaderActive(false);
6208
6287
  }
6209
6288
  };
@@ -6385,6 +6464,7 @@ var StacksApplication = /** @class */ (function (_super) {
6385
6464
  };
6386
6465
  StacksApplication.start = function (element, schema) {
6387
6466
  var application = new StacksApplication(element, schema);
6467
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
6388
6468
  application.start();
6389
6469
  return application;
6390
6470
  };
@@ -6421,6 +6501,7 @@ var StacksController = /** @class */ (function (_super) {
6421
6501
  }
6422
6502
  catch (ex) {
6423
6503
  // Internet Explorer
6504
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
6424
6505
  event = document.createEvent("CustomEvent");
6425
6506
  event.initCustomEvent(namespacedName, true, true, detail);
6426
6507
  }
@@ -6433,6 +6514,7 @@ var StacksController = /** @class */ (function (_super) {
6433
6514
  exports.StacksController = StacksController;
6434
6515
  function createController(controllerDefinition) {
6435
6516
  var _a;
6517
+ // eslint-disable-next-line no-prototype-builtins
6436
6518
  var Controller = controllerDefinition.hasOwnProperty("targets")
6437
6519
  ? (_a = /** @class */ (function (_super) {
6438
6520
  __extends(Controller, _super);
@@ -6450,6 +6532,7 @@ function createController(controllerDefinition) {
6450
6532
  return Controller;
6451
6533
  }(StacksController));
6452
6534
  for (var prop in controllerDefinition) {
6535
+ // eslint-disable-next-line no-prototype-builtins
6453
6536
  if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
6454
6537
  Object.defineProperty(Controller.prototype, prop, Object.getOwnPropertyDescriptor(controllerDefinition, prop));
6455
6538
  }