@stackoverflow/stacks 0.69.0 → 0.72.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.
Files changed (44) hide show
  1. package/dist/css/stacks.css +1895 -730
  2. package/dist/css/stacks.min.css +1 -1
  3. package/dist/js/stacks.js +80 -31
  4. package/dist/js/stacks.min.js +1 -1
  5. package/lib/css/atomic/_stacks-borders.less +18 -0
  6. package/lib/css/atomic/_stacks-flex.less +2 -2
  7. package/lib/css/atomic/_stacks-grid.less +1 -0
  8. package/lib/css/atomic/_stacks-misc.less +8 -4
  9. package/lib/css/atomic/_stacks-typography.less +1 -1
  10. package/lib/css/base/_stacks-configuration-dynamic.less +10 -43
  11. package/lib/css/components/_stacks-activity-indicator.less +26 -2
  12. package/lib/css/components/_stacks-avatars.less +9 -0
  13. package/lib/css/components/_stacks-badges.less +20 -9
  14. package/lib/css/components/_stacks-breadcrumbs.less +2 -0
  15. package/lib/css/components/_stacks-button-groups.less +11 -0
  16. package/lib/css/components/_stacks-buttons.less +143 -42
  17. package/lib/css/components/_stacks-cards.less +9 -13
  18. package/lib/css/components/_stacks-code-blocks.less +1 -1
  19. package/lib/css/components/_stacks-inputs.less +73 -9
  20. package/lib/css/components/_stacks-link-previews.less +10 -7
  21. package/lib/css/components/_stacks-links.less +29 -9
  22. package/lib/css/components/_stacks-menu.less +4 -4
  23. package/lib/css/components/_stacks-modals.less +1 -1
  24. package/lib/css/components/_stacks-navigation.less +43 -0
  25. package/lib/css/components/_stacks-notices.less +40 -3
  26. package/lib/css/components/_stacks-page-titles.less +1 -1
  27. package/lib/css/components/_stacks-pagination.less +4 -2
  28. package/lib/css/components/_stacks-popovers.less +22 -6
  29. package/lib/css/components/_stacks-post-summary.less +45 -1
  30. package/lib/css/components/_stacks-progress-bars.less +11 -3
  31. package/lib/css/components/_stacks-prose.less +18 -4
  32. package/lib/css/components/_stacks-tables.less +10 -6
  33. package/lib/css/components/_stacks-tags.less +18 -0
  34. package/lib/css/components/_stacks-toggle-switches.less +12 -0
  35. package/lib/css/components/_stacks-topbar.less +440 -0
  36. package/lib/css/components/_stacks-uploader.less +22 -0
  37. package/lib/css/components/_stacks-widget-static.less +15 -3
  38. package/lib/css/exports/_stacks-constants-colors.less +692 -220
  39. package/lib/css/exports/_stacks-constants-helpers.less +0 -2
  40. package/lib/css/exports/_stacks-mixins.less +26 -0
  41. package/lib/css/stacks-dynamic.less +0 -1
  42. package/lib/css/stacks-static.less +15 -0
  43. package/lib/ts/controllers/s-tooltip.ts +4 -0
  44. package/package.json +10 -10
package/dist/js/stacks.js CHANGED
@@ -2296,7 +2296,7 @@ Copyright © 2020 Basecamp, LLC
2296
2296
  ;
2297
2297
 
2298
2298
  /**
2299
- * @popperjs/core v2.9.2 - MIT License
2299
+ * @popperjs/core v2.10.2 - MIT License
2300
2300
  */
2301
2301
 
2302
2302
  (function (global, factory) {
@@ -2305,17 +2305,39 @@ Copyright © 2020 Basecamp, LLC
2305
2305
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Popper = {}));
2306
2306
  }(this, (function (exports) { 'use strict';
2307
2307
 
2308
- function getBoundingClientRect(element) {
2308
+ // import { isHTMLElement } from './instanceOf';
2309
+ function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
2310
+ includeScale) {
2311
+
2309
2312
  var rect = element.getBoundingClientRect();
2313
+ var scaleX = 1;
2314
+ var scaleY = 1; // FIXME:
2315
+ // `offsetWidth` returns an integer while `getBoundingClientRect`
2316
+ // returns a float. This results in `scaleX` or `scaleY` being
2317
+ // non-1 when it should be for elements that aren't a full pixel in
2318
+ // width or height.
2319
+ // if (isHTMLElement(element) && includeScale) {
2320
+ // const offsetHeight = element.offsetHeight;
2321
+ // const offsetWidth = element.offsetWidth;
2322
+ // // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
2323
+ // // Fallback to 1 in case both values are `0`
2324
+ // if (offsetWidth > 0) {
2325
+ // scaleX = rect.width / offsetWidth || 1;
2326
+ // }
2327
+ // if (offsetHeight > 0) {
2328
+ // scaleY = rect.height / offsetHeight || 1;
2329
+ // }
2330
+ // }
2331
+
2310
2332
  return {
2311
- width: rect.width,
2312
- height: rect.height,
2313
- top: rect.top,
2314
- right: rect.right,
2315
- bottom: rect.bottom,
2316
- left: rect.left,
2317
- x: rect.left,
2318
- y: rect.top
2333
+ width: rect.width / scaleX,
2334
+ height: rect.height / scaleY,
2335
+ top: rect.top / scaleY,
2336
+ right: rect.right / scaleX,
2337
+ bottom: rect.bottom / scaleY,
2338
+ left: rect.left / scaleX,
2339
+ x: rect.left / scaleX,
2340
+ y: rect.top / scaleY
2319
2341
  };
2320
2342
  }
2321
2343
 
@@ -2412,16 +2434,24 @@ Copyright © 2020 Basecamp, LLC
2412
2434
  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
2413
2435
  }
2414
2436
 
2437
+ function isElementScaled(element) {
2438
+ var rect = element.getBoundingClientRect();
2439
+ var scaleX = rect.width / element.offsetWidth || 1;
2440
+ var scaleY = rect.height / element.offsetHeight || 1;
2441
+ return scaleX !== 1 || scaleY !== 1;
2442
+ } // Returns the composite rect of an element relative to its offsetParent.
2415
2443
  // Composite means it takes into account transforms as well as layout.
2416
2444
 
2445
+
2417
2446
  function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
2418
2447
  if (isFixed === void 0) {
2419
2448
  isFixed = false;
2420
2449
  }
2421
2450
 
2451
+ var isOffsetParentAnElement = isHTMLElement(offsetParent);
2452
+ isHTMLElement(offsetParent) && isElementScaled(offsetParent);
2422
2453
  var documentElement = getDocumentElement(offsetParent);
2423
2454
  var rect = getBoundingClientRect(elementOrVirtualElement);
2424
- var isOffsetParentAnElement = isHTMLElement(offsetParent);
2425
2455
  var scroll = {
2426
2456
  scrollLeft: 0,
2427
2457
  scrollTop: 0
@@ -2700,7 +2730,10 @@ Copyright © 2020 Basecamp, LLC
2700
2730
  var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
2701
2731
  function validateModifiers(modifiers) {
2702
2732
  modifiers.forEach(function (modifier) {
2703
- Object.keys(modifier).forEach(function (key) {
2733
+ [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
2734
+ .filter(function (value, index, self) {
2735
+ return self.indexOf(value) === index;
2736
+ }).forEach(function (key) {
2704
2737
  switch (key) {
2705
2738
  case 'name':
2706
2739
  if (typeof modifier.name !== 'string') {
@@ -2714,6 +2747,8 @@ Copyright © 2020 Basecamp, LLC
2714
2747
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
2715
2748
  }
2716
2749
 
2750
+ break;
2751
+
2717
2752
  case 'phase':
2718
2753
  if (modifierPhases.indexOf(modifier.phase) < 0) {
2719
2754
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
@@ -2729,14 +2764,14 @@ Copyright © 2020 Basecamp, LLC
2729
2764
  break;
2730
2765
 
2731
2766
  case 'effect':
2732
- if (typeof modifier.effect !== 'function') {
2767
+ if (modifier.effect != null && typeof modifier.effect !== 'function') {
2733
2768
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
2734
2769
  }
2735
2770
 
2736
2771
  break;
2737
2772
 
2738
2773
  case 'requires':
2739
- if (!Array.isArray(modifier.requires)) {
2774
+ if (modifier.requires != null && !Array.isArray(modifier.requires)) {
2740
2775
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
2741
2776
  }
2742
2777
 
@@ -3069,11 +3104,10 @@ Copyright © 2020 Basecamp, LLC
3069
3104
  padding = _options$padding === void 0 ? 0 : _options$padding;
3070
3105
  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
3071
3106
  var altContext = elementContext === popper ? reference : popper;
3072
- var referenceElement = state.elements.reference;
3073
3107
  var popperRect = state.rects.popper;
3074
3108
  var element = state.elements[altBoundary ? altContext : elementContext];
3075
3109
  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
3076
- var referenceClientRect = getBoundingClientRect(referenceElement);
3110
+ var referenceClientRect = getBoundingClientRect(state.elements.reference);
3077
3111
  var popperOffsets = computeOffsets({
3078
3112
  reference: referenceClientRect,
3079
3113
  element: popperRect,
@@ -3153,7 +3187,8 @@ Copyright © 2020 Basecamp, LLC
3153
3187
  var isDestroyed = false;
3154
3188
  var instance = {
3155
3189
  state: state,
3156
- setOptions: function setOptions(options) {
3190
+ setOptions: function setOptions(setOptionsAction) {
3191
+ var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
3157
3192
  cleanupModifierEffects();
3158
3193
  state.options = Object.assign({}, defaultOptions, state.options, options);
3159
3194
  state.scrollParents = {
@@ -3444,6 +3479,7 @@ Copyright © 2020 Basecamp, LLC
3444
3479
  var popper = _ref2.popper,
3445
3480
  popperRect = _ref2.popperRect,
3446
3481
  placement = _ref2.placement,
3482
+ variation = _ref2.variation,
3447
3483
  offsets = _ref2.offsets,
3448
3484
  position = _ref2.position,
3449
3485
  gpuAcceleration = _ref2.gpuAcceleration,
@@ -3470,7 +3506,7 @@ Copyright © 2020 Basecamp, LLC
3470
3506
  if (offsetParent === getWindow(popper)) {
3471
3507
  offsetParent = getDocumentElement(popper);
3472
3508
 
3473
- if (getComputedStyle(offsetParent).position !== 'static') {
3509
+ if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
3474
3510
  heightProp = 'scrollHeight';
3475
3511
  widthProp = 'scrollWidth';
3476
3512
  }
@@ -3479,14 +3515,14 @@ Copyright © 2020 Basecamp, LLC
3479
3515
 
3480
3516
  offsetParent = offsetParent;
3481
3517
 
3482
- if (placement === top) {
3518
+ if (placement === top || (placement === left || placement === right) && variation === end) {
3483
3519
  sideY = bottom; // $FlowFixMe[prop-missing]
3484
3520
 
3485
3521
  y -= offsetParent[heightProp] - popperRect.height;
3486
3522
  y *= gpuAcceleration ? 1 : -1;
3487
3523
  }
3488
3524
 
3489
- if (placement === left) {
3525
+ if (placement === left || (placement === top || placement === bottom) && variation === end) {
3490
3526
  sideX = right; // $FlowFixMe[prop-missing]
3491
3527
 
3492
3528
  x -= offsetParent[widthProp] - popperRect.width;
@@ -3501,7 +3537,7 @@ Copyright © 2020 Basecamp, LLC
3501
3537
  if (gpuAcceleration) {
3502
3538
  var _Object$assign;
3503
3539
 
3504
- return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
3540
+ return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
3505
3541
  }
3506
3542
 
3507
3543
  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
@@ -3529,6 +3565,7 @@ Copyright © 2020 Basecamp, LLC
3529
3565
 
3530
3566
  var commonStyles = {
3531
3567
  placement: getBasePlacement(state.placement),
3568
+ variation: getVariation(state.placement),
3532
3569
  popper: state.elements.popper,
3533
3570
  popperRect: state.rects.popper,
3534
3571
  gpuAcceleration: gpuAcceleration
@@ -4226,10 +4263,14 @@ var __extends = (this && this.__extends) || (function () {
4226
4263
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
4227
4264
  };
4228
4265
  })();
4229
- var __spreadArray = (this && this.__spreadArray) || function (to, from) {
4230
- for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
4231
- to[j] = from[i];
4232
- return to;
4266
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
4267
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4268
+ if (ar || !(i in from)) {
4269
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
4270
+ ar[i] = from[i];
4271
+ }
4272
+ }
4273
+ return to.concat(ar || Array.prototype.slice.call(from));
4233
4274
  };
4234
4275
  var Stacks;
4235
4276
  (function (Stacks) {
@@ -4243,7 +4284,7 @@ var Stacks;
4243
4284
  for (var _i = 1; _i < arguments.length; _i++) {
4244
4285
  rest[_i - 1] = arguments[_i];
4245
4286
  }
4246
- var definitions = Array.isArray(head) ? head : __spreadArray([head], rest);
4287
+ var definitions = Array.isArray(head) ? head : __spreadArray([head], rest, true);
4247
4288
  for (var _a = 0, definitions_1 = definitions; _a < definitions_1.length; _a++) {
4248
4289
  var definition = definitions_1[_a];
4249
4290
  var hasPrefix = /^s-/.test(definition.identifier);
@@ -4582,10 +4623,14 @@ var __extends = (this && this.__extends) || (function () {
4582
4623
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
4583
4624
  };
4584
4625
  })();
4585
- var __spreadArray = (this && this.__spreadArray) || function (to, from) {
4586
- for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
4587
- to[j] = from[i];
4588
- return to;
4626
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
4627
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4628
+ if (ar || !(i in from)) {
4629
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
4630
+ ar[i] = from[i];
4631
+ }
4632
+ }
4633
+ return to.concat(ar || Array.prototype.slice.call(from));
4589
4634
  };
4590
4635
  var Stacks;
4591
4636
  (function (Stacks) {
@@ -4694,7 +4739,7 @@ var Stacks;
4694
4739
  return elements.find(function (el) { return el.offsetParent !== null; });
4695
4740
  };
4696
4741
  ModalController.prototype.lastVisible = function (elements) {
4697
- return this.firstVisible(__spreadArray([], elements).reverse());
4742
+ return this.firstVisible(__spreadArray([], elements, true).reverse());
4698
4743
  };
4699
4744
  ModalController.prototype.focusInsideModal = function () {
4700
4745
  var _this = this;
@@ -5603,10 +5648,14 @@ var Stacks;
5603
5648
  this.boundHide = this.boundHide || this.hide.bind(this);
5604
5649
  this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
5605
5650
  this.referenceElement.addEventListener("mouseout", this.boundHide);
5651
+ this.referenceElement.addEventListener("focus", this.boundScheduleShow);
5652
+ this.referenceElement.addEventListener("blur", this.boundHide);
5606
5653
  };
5607
5654
  TooltipController.prototype.unbindMouseEvents = function () {
5608
5655
  this.referenceElement.removeEventListener("mouseover", this.boundScheduleShow);
5609
5656
  this.referenceElement.removeEventListener("mouseout", this.boundHide);
5657
+ this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
5658
+ this.referenceElement.removeEventListener("blur", this.boundHide);
5610
5659
  };
5611
5660
  TooltipController.generateId = function () {
5612
5661
  return "--stacks-s-tooltip-" + Math.random().toString(36).substring(2, 10);