@stackoverflow/stacks 1.9.0 → 1.9.1

package/dist/js/stacks.js

@@ -2515,6 +2515,7 @@ class StacksApplication extends Application {
     }
 }
 StacksApplication._initializing = true;
+
 const application = StacksApplication.start();
 class StacksController extends Controller {
     getElementData(element, key) {
@@ -2652,6 +2653,7 @@ class BannerController extends StacksController {
     }
 }
 BannerController.targets = ["banner"];
+
 /**
  * Helper to manually show an s-banner element via external JS
  * @param element the element the `data-controller="s-banner"` attribute is on
@@ -3127,6 +3129,7 @@ class ModalController extends StacksController {
     }
 }
 ModalController.targets = ["modal", "initialFocus"];
+
 /**
  * Helper to manually show an s-modal element via external JS
  * @param element the element the `data-controller="s-modal"` attribute is on
@@ -3307,7 +3310,7 @@ var round = Math.round;
 function getUAString() {
   var uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
     return uaData.brands.map(function (item) {
       return item.brand + "/" + item.version;
     }).join(' ');
@@ -4162,10 +4165,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
 
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -4248,7 +4250,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };
@@ -5591,6 +5593,7 @@ class PopoverController extends BasePopoverController {
     }
 }
 PopoverController.targets = [];
+
 /**
  * Helper to manually show an s-popover element via external JS
  * @param element the element the `data-controller="s-popover"` attribute is on
@@ -5742,37 +5745,52 @@ function toggleController(el, controllerName, include) {
 
 ;// CONCATENATED MODULE: ./lib/components/table/table.ts
 
+/**
+ * The string values of these enumerations should correspond with `aria-sort` valid values.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort#values
+ */
+var SortOrder;
+(function (SortOrder) {
+    SortOrder["Ascending"] = "ascending";
+    SortOrder["Descending"] = "descending";
+    SortOrder["None"] = "none";
+})(SortOrder || (SortOrder = {}));
 class TableController extends StacksController {
-    setCurrentSort(headElem, direction) {
-        if (["asc", "desc", "none"].indexOf(direction) < 0) {
-            throw "direction must be one of asc, desc, or none";
-        }
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const controller = this;
-        this.columnTargets.forEach(function (target) {
-            const isCurrrent = target === headElem;
-            target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
-            target
-                .querySelectorAll(".js-sorting-indicator")
-                .forEach(function (icon) {
-                const visible = isCurrrent ? direction : "none";
-                icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
+    constructor() {
+        super(...arguments);
+        this.updateSortedColumnStyles = (targetColumnHeader, direction) => {
+            // Loop through all sortable columns and remove their sorting direction
+            // (if any), and only leave/set a sorting on `targetColumnHeader`.
+            this.columnTargets.forEach((header) => {
+                const isCurrent = header === targetColumnHeader;
+                const classSuffix = isCurrent
+                    ? direction === SortOrder.Ascending
+                        ? "asc"
+                        : "desc"
+                    : SortOrder.None;
+                header.classList.toggle("is-sorted", isCurrent && direction !== SortOrder.None);
+                header.querySelectorAll(".js-sorting-indicator").forEach((icon) => {
+                    icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + classSuffix));
+                });
+                if (isCurrent) {
+                    header.setAttribute("aria-sort", direction);
+                }
+                else {
+                    header.removeAttribute("aria-sort");
+                }
             });
-            if (!isCurrrent || direction === "none") {
-                controller.removeElementData(target, "sort-direction");
-            }
-            else {
-                controller.setElementData(target, "sort-direction", direction);
-            }
-        });
+        };
     }
     sort(evt) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const controller = this;
-        const colHead = evt.currentTarget;
-        if (!(colHead instanceof HTMLTableCellElement)) {
-            throw "invalid event target";
-        }
+        const sortTriggerEl = evt.currentTarget;
+        // TODO: support *only* button as trigger in next major release
+        const triggerIsButton = sortTriggerEl instanceof HTMLButtonElement;
+        // the below conditional is here for backward compatibility with the old API
+        // where we did not advise buttons as sortable column head triggers
+        const colHead = (triggerIsButton ? sortTriggerEl.parentElement : sortTriggerEl);
         const table = this.element;
         const tbody = table.tBodies[0];
         // the column slot number of the clicked header
@@ -5786,7 +5804,7 @@ class TableController extends StacksController {
         const slotIndex = buildIndex(tbody);
         // the default behavior when clicking a header is to sort by this column in ascending
         // direction, *unless* it is already sorted that way
-        const direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
+        const direction = colHead.getAttribute("aria-sort") === SortOrder.Ascending ? -1 : 1;
         const rows = Array.from(table.tBodies[0].rows);
         // if this is still false after traversing the data, that means all values are integers (or empty)
         // and thus we'll sort numerically.
@@ -5814,9 +5832,7 @@ class TableController extends StacksController {
             // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
             // the value we're using is the cell's text, trimmed of any whitespace
             const explicit = controller.getElementData(cell, "sort-val");
-            const d = typeof explicit === "string"
-                ? explicit
-                : (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+            const d = (_b = explicit !== null && explicit !== void 0 ? explicit : (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
             if (d !== "" && `${parseInt(d, 10)}` !== d) {
                 anyNonInt = true;
             }
@@ -5850,9 +5866,9 @@ class TableController extends StacksController {
             }
         });
         // this is the actual reordering of the table rows
-        data.forEach(function (tup) {
+        data.forEach(([_, rowIndex]) => {
             var _a;
-            const row = rows[tup[1]];
+            const row = rows[rowIndex];
             (_a = row.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(row);
             if (firstBottomRow) {
                 tbody.insertBefore(row, firstBottomRow);
@@ -5863,43 +5879,57 @@ class TableController extends StacksController {
         });
         // update the UI and set the `data-sort-direction` attribute if appropriate, so that the next click
         // will cause sorting in descending direction
-        this.setCurrentSort(colHead, direction === 1 ? "asc" : "desc");
+        this.updateSortedColumnStyles(colHead, direction === 1 ? SortOrder.Ascending : SortOrder.Descending);
     }
 }
 TableController.targets = ["column"];
+
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param section
+ */
 function buildIndex(section) {
     const result = buildIndexOrGetCellSlot(section);
-    if (!(result instanceof Array)) {
+    if (!Array.isArray(result)) {
         throw "shouldn't happen";
     }
     return result;
 }
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param cell
+ */
 function getCellSlot(cell) {
-    if (!(cell.parentElement &&
-        cell.parentElement.parentElement instanceof HTMLTableSectionElement)) {
+    var _a;
+    const tableElement = (_a = cell.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!(tableElement instanceof HTMLTableSectionElement)) {
         throw "invalid table";
     }
-    const result = buildIndexOrGetCellSlot(cell.parentElement.parentElement, cell);
+    const result = buildIndexOrGetCellSlot(tableElement, cell);
     if (typeof result !== "number") {
         throw "shouldn't happen";
     }
     return result;
 }
-// Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
-// of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
-// Because we need to know which header cells and data cells belong together, we have to 1) find out
-// which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
-// out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
-//
-// That's what the following function does. If the second argument is not given, it returns an index
-// of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
-// indices of the sub-array correspond to column slots; the values are the actual table cell elements.
-// For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
-// Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
-// it may also be in a previous <tr>.
-//
-// If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
-// stops as soon as it has found it and the function returns its slot number.
+/**
+ * Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
+ * of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
+ * Because we need to know which header cells and data cells belong together, we have to 1) find out
+ * which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
+ * out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
+ *
+ * That's what the following function does. If the second argument is not given, it returns an index
+ * of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
+ * indices of the sub-array correspond to column slots; the values are the actual table cell elements.
+ * For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
+ * Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
+ * it may also be in a previous <tr>.
+ *
+ * If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
+ * stops as soon as it has found it and the function returns its slot number.
+ */
 function buildIndexOrGetCellSlot(section, findCell) {
     const index = [];
     let curRow = section.children[0];
@@ -5909,21 +5939,18 @@ function buildIndexOrGetCellSlot(section, findCell) {
     const growing = [];
     const growingRowsLeft = [];
     // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
-    while (curRow ||
-        growingRowsLeft.some(function (e) {
-            return e !== 0;
-        })) {
+    while (curRow || growingRowsLeft.some((e) => e !== 0)) {
         const curIndexRow = [];
         index.push(curIndexRow);
         let curSlot = 0;
         if (curRow) {
-            for (let curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
+            for (let curCellIdx = 0; curCellIdx < curRow.children.length; curCellIdx++) {
                 while (growingRowsLeft[curSlot]) {
                     growingRowsLeft[curSlot]--;
                     curIndexRow[curSlot] = growing[curSlot];
                     curSlot++;
                 }
-                const cell = curRow.children[curCellInd];
+                const cell = curRow.children[curCellIdx];
                 if (!(cell instanceof HTMLTableCellElement)) {
                     throw "invalid table";
                 }
@@ -5952,9 +5979,8 @@ function buildIndexOrGetCellSlot(section, findCell) {
             curRow = curRow.nextElementSibling;
         }
     }
-    return findCell
-        ? -1
-        : index; /* if findCell was given but we end up here, that means it isn't in this section */
+    // if findCell was given, but we end up here, that means it isn't in this section
+    return findCell ? -1 : index;
 }
 
 ;// CONCATENATED MODULE: ./lib/components/toast/toast.ts
@@ -6188,6 +6214,7 @@ class ToastController extends StacksController {
     }
 }
 ToastController.targets = ["toast", "initialFocus"];
+
 /**
  * Helper to manually show an s-toast element via external JS
  * @param element the element the `data-controller="s-toast"` attribute is on
@@ -6426,6 +6453,7 @@ class TooltipController extends BasePopoverController {
     }
 }
 TooltipController.targets = [];
+
 /**
  * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
  * @param element The element to add a tooltip to.
@@ -6631,6 +6659,7 @@ UploaderController.targets = ["input", "previews", "uploader"];
 UploaderController.FILE_DISPLAY_LIMIT = 10;
 UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
+
 ;// CONCATENATED MODULE: ./lib/controllers.ts
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point