@stackoverflow/stacks 1.2.0 → 1.3.2

package/lib/ts/controllers/s-expandable-control.ts

@@ -1,7 +1,7 @@
 import * as Stacks from '../stacks';
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
-// they're *unchecked*. Therefore, if we have an active `s-collapsible-control` in
+// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
 // the document, we listen for change events on *all* radio buttons and find any
 // other radio buttons in the same `name` group, triggering a custom event on all
 // of them so the controller can re-evaluate.
@@ -20,7 +20,7 @@ function globalChangeListener(e: UIEvent) {
             if (other === e.target) {
                 return;
             }
-            var customEvent;
+            let customEvent;
             try {
                 customEvent = new Event(RADIO_OFF_EVENT);
             } catch (ex) {
@@ -32,7 +32,7 @@ function globalChangeListener(e: UIEvent) {
         });
 }
 
-var refCount = 0;
+let refCount = 0;
 function globalChangeListenerRequired(required: boolean) {
     if (required) {
         refCount++;
@@ -52,16 +52,16 @@ export class ExpandableController extends Stacks.StacksController {
     private events!: string[];
     private isCheckable!: boolean;
     private isRadio!: boolean;
-    private lastKeydownClickTimestamp: number = 0;
+    private lastKeydownClickTimestamp = 0;
 
     initialize() {
         if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
-            this.isCollapsed = this._isCollapsedForCheckable;
+            this.isCollapsed = this._isCollapsedForCheckable.bind(this);
             this.events = ["change", RADIO_OFF_EVENT];
             this.isCheckable = true;
             this.isRadio = (<HTMLInputElement>this.element).type === "radio";
         } else {
-            this.isCollapsed = this._isCollapsedForClickable;
+            this.isCollapsed = this._isCollapsedForClickable.bind(this);
             this.events = ["click", "keydown"];
         }
         this.listener = this.listener.bind(this);
@@ -71,7 +71,7 @@ export class ExpandableController extends Stacks.StacksController {
     // for non-checkable elements, the initial source of truth is the collapsed/expanded
     // state of the controlled element (unless the element doesn't exist)
     _isCollapsedForClickable() {
-        var cc = this.controlledCollapsibles;
+        const cc = this.controlledExpandables;
         // the element is considered collapsed if *any* target element is collapsed
         return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
     };
@@ -82,7 +82,7 @@ export class ExpandableController extends Stacks.StacksController {
     };
 
 
-    get controlledCollapsibles() {
+    get controlledExpandables() {
         const attr = this.element.getAttribute("aria-controls");
         if (!attr) {
             throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
@@ -104,8 +104,8 @@ export class ExpandableController extends Stacks.StacksController {
         if (!this.data.has("toggle-class")) {
             return;
         }
-        var cl = this.element.classList;
-        var toggleClass = this.data.get("toggle-class");
+        const cl = this.element.classList;
+        const toggleClass = this.data.get("toggle-class");
         if (!toggleClass) {
             throw "couldn't find toggle class"
         }
@@ -115,7 +115,7 @@ export class ExpandableController extends Stacks.StacksController {
     };
 
     listener(e: Event) {
-        var newCollapsed;
+        let newCollapsed;
         if (this.isCheckable) {
             newCollapsed = !(<HTMLInputElement>this.element).checked;
         } else {
@@ -142,7 +142,7 @@ export class ExpandableController extends Stacks.StacksController {
             }
         }
         this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
-        for (let controlledElement of this.controlledCollapsibles) {
+        for (const controlledElement of this.controlledExpandables) {
             controlledElement.classList.toggle("is-expanded", !newCollapsed);
         }
         this._dispatchShowHideEvent(!newCollapsed);
@@ -151,7 +151,7 @@ export class ExpandableController extends Stacks.StacksController {
 
     connect() {
         this.events.forEach(e => {
-            this.element.addEventListener(e, this.listener);
+            this.element.addEventListener(e, this.listener.bind(this));
         }, this);
 
         if (this.isRadio) {
@@ -159,15 +159,19 @@ export class ExpandableController extends Stacks.StacksController {
         }
 
         // synchronize state -- in all cases, this means setting the correct `aria-expanded`
-        // attribute; for checkable controls this also means setting the `is-collapsed` class
-        this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+        // attribute; for checkable controls this also means setting the `is-collapsed` class.
+        // Note: aria-expanded is currently an invalid attribute on radio elements
+        // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
+        if (!this.isRadio) {
+            this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+        }
         if (this.isCheckable) {
-            var cc = this.controlledCollapsibles;
+            const cc = this.controlledExpandables;
             if (cc.length) {
-                var expected = !this.isCollapsed();
+                const expected = !this.isCollapsed();
                 // if any element does not match the expected state, set them all to the expected state
                 if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
-                    for (let controlledElement of this.controlledCollapsibles) {
+                    for (const controlledElement of this.controlledExpandables) {
                         controlledElement.classList.toggle("is-expanded", expected);
                     }
                     this._dispatchShowHideEvent(expected);
@@ -179,7 +183,7 @@ export class ExpandableController extends Stacks.StacksController {
 
     disconnect() {
         this.events.forEach(e => {
-            this.element.removeEventListener(e, this.listener);
+            this.element.removeEventListener(e, this.listener.bind(this));
         }, this);
 
         if (this.isRadio) {

package/lib/ts/controllers/s-modal.ts

@@ -6,12 +6,12 @@ export class ModalController extends Stacks.StacksController {
     private modalTarget!: HTMLElement;
     private initialFocusTargets!: HTMLElement[];
 
-    private _boundClickFn!: any;
-    private _boundKeypressFn!: any;
+    private _boundClickFn!: (event: MouseEvent) => void;
+    private _boundKeypressFn!: (event: KeyboardEvent) => void;
 
     private returnElement!: HTMLElement;
 
-    private _boundTabTrap!: any;
+    private _boundTabTrap!: (event: KeyboardEvent) => void;
 
     connect () {
         this.validate();
@@ -50,7 +50,7 @@ export class ModalController extends Stacks.StacksController {
      */
     private validate() {
         // check for returnElement support
-        var returnElementSelector = this.data.get("return-element");
+        const returnElementSelector = this.data.get("return-element");
         if (returnElementSelector) {
             this.returnElement = <HTMLElement>document.querySelector(returnElementSelector);
 
@@ -65,8 +65,8 @@ export class ModalController extends Stacks.StacksController {
      * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
      */
     private _toggle (show?: boolean | undefined, dispatcher: Event|Element|null = null) {
-        var toShow = show;
-        var isVisible = this.modalTarget.getAttribute("aria-hidden") === "false";
+        let toShow = show;
+        const isVisible = this.modalTarget.getAttribute("aria-hidden") === "false";
 
         // if we're letting the class toggle, we need to figure out if the popover is visible manually
         if (typeof toShow === "undefined") {
@@ -78,10 +78,10 @@ export class ModalController extends Stacks.StacksController {
             return;
         }
 
-        let dispatchingElement = this.getDispatcher(dispatcher);
+        const dispatchingElement = this.getDispatcher(dispatcher);
 
         // show/hide events trigger before toggling the class
-        var triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
+        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
             returnElement: this.returnElement,
             dispatcher: this.getDispatcher(dispatchingElement)
         }, this.modalTarget);
@@ -105,7 +105,7 @@ export class ModalController extends Stacks.StacksController {
         }
 
         // check for transitionend support
-        var supportsTransitionEnd = (<HTMLElement>this.modalTarget).ontransitionend !== undefined;
+        const supportsTransitionEnd = (this.modalTarget).ontransitionend !== undefined;
 
         // shown/hidden events trigger after toggling the class
         if (supportsTransitionEnd) {
@@ -182,7 +182,7 @@ export class ModalController extends Stacks.StacksController {
      */
     private focusInsideModal() {
         this.modalTarget.addEventListener("s-modal:shown", () => {
-            var initialFocus = this.firstVisible(this.initialFocusTargets) ?? this.firstVisible(this.getAllTabbables());
+            const initialFocus = this.firstVisible(this.initialFocusTargets) ?? this.firstVisible(this.getAllTabbables());
             initialFocus?.focus();
         }, {once: true });
     }
@@ -194,7 +194,7 @@ export class ModalController extends Stacks.StacksController {
 
         // If somehow the user has tabbed out of the modal or if focus started outside the modal, push them to the first item.
         if (!this.modalTarget.contains(<Element>e.target)) {
-            var focusTarget = this.firstVisible(this.getAllTabbables());
+            const focusTarget = this.firstVisible(this.getAllTabbables());
             if (focusTarget) {
                 e.preventDefault();
                 focusTarget.focus();
@@ -205,10 +205,10 @@ export class ModalController extends Stacks.StacksController {
 
         // If we observe a tab keydown and we're on an edge, cycle the focus to the other side.
         if (e.key === "Tab") {
-            var tabbables = this.getAllTabbables();
+            const tabbables = this.getAllTabbables();
 
-            var firstTabbable = this.firstVisible(tabbables);
-            var lastTabbable = this.lastVisible(tabbables);
+            const firstTabbable = this.firstVisible(tabbables);
+            const lastTabbable = this.lastVisible(tabbables);
 
             if (firstTabbable && lastTabbable) {
                 if (firstTabbable === lastTabbable) {
@@ -252,7 +252,7 @@ export class ModalController extends Stacks.StacksController {
      * Forces the popover to hide if a user clicks outside of it or its reference element
      */
     private hideOnOutsideClick (e: Event) {
-        var target = <Node>e.target;
+        const target = <Node>e.target;
         // check if the document was clicked inside either the toggle element or the modal itself
         // note: .contains also returns true if the node itself matches the target element
         if (!this.modalTarget.querySelector(".s-modal--dialog")!.contains(target) && document.body.contains(target)) {
@@ -311,7 +311,7 @@ export function hideModal(element: HTMLElement) {
  * @param show whether to force show/hide the modal; toggles the modal if left undefined
  */
 function toggleModal(element: HTMLElement, show?: boolean | undefined) {
-    var controller = Stacks.application.getControllerForElementAndIdentifier(element, "s-modal") as ModalController;
+    const controller = Stacks.application.getControllerForElementAndIdentifier(element, "s-modal") as ModalController;
 
     if (!controller) {
         throw "Unable to get s-modal controller from element";

package/lib/ts/controllers/s-navigation-tablist.ts

@@ -2,8 +2,8 @@ import * as Stacks from "../stacks";
 
 export class TabListController extends Stacks.StacksController {
 
-    private boundSelectTab: any; // (event: MouseEvent) => void;
-    private boundHandleKeydown: any // (event: KeyboardEvent) => void;
+    private boundSelectTab!: (event: MouseEvent) => void;
+    private boundHandleKeydown!: (event: KeyboardEvent) => void;
 
     connect() {
         super.connect();
@@ -11,7 +11,7 @@ export class TabListController extends Stacks.StacksController {
         this.boundSelectTab = this.selectTab.bind(this);
         this.boundHandleKeydown = this.handleKeydown.bind(this);
 
-        for (let tab of this.tabTargets) {
+        for (const tab of this.tabTargets) {
             tab.addEventListener("click", this.boundSelectTab);
             tab.addEventListener("keydown", this.boundHandleKeydown);
         }
@@ -20,7 +20,7 @@ export class TabListController extends Stacks.StacksController {
     disconnect() {
         super.disconnect();
 
-        for (let tab of this.tabTargets) {
+        for (const tab of this.tabTargets) {
             tab.removeEventListener("click", this.boundSelectTab);
             tab.removeEventListener("keydown", this.boundHandleKeydown);
         }
@@ -29,8 +29,8 @@ export class TabListController extends Stacks.StacksController {
     /**
      * Gets all tabs within the controller.
      */
-    get tabTargets() {
-        return <HTMLElement[]>Array.from(this.element.querySelectorAll("[role=tab]"));
+    get tabTargets(): HTMLElement[] {
+        return Array.from(this.element.querySelectorAll("[role=tab]"));
     }
 
     /**
@@ -47,8 +47,8 @@ export class TabListController extends Stacks.StacksController {
     handleKeydown(event: KeyboardEvent) {
         let tabElement = <HTMLElement>event.currentTarget;
 
-        var tabs = this.tabTargets;
-        var tabIndex = tabs.indexOf(tabElement);
+        const tabs = this.tabTargets;
+        let tabIndex = tabs.indexOf(tabElement);
 
         if (event.key === "ArrowRight") {
             tabIndex++;
@@ -62,7 +62,7 @@ export class TabListController extends Stacks.StacksController {
         if (tabIndex < 0) { tabIndex = tabs.length - 1; }
         if (tabIndex >= tabs.length) { tabIndex = 0; }
 
-        tabElement = <HTMLElement>tabs[tabIndex];
+        tabElement = tabs[tabIndex];
         this.switchToTab(tabElement);
 
         // Focus the newly selected tab so it can receive keyboard events.
@@ -75,7 +75,7 @@ export class TabListController extends Stacks.StacksController {
      */
     private switchToTab(newTab: HTMLElement) {
 
-        var oldTab = this.selectedTab;
+        const oldTab = this.selectedTab;
         if (oldTab === newTab) { return; }
 
         if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) { return; }
@@ -98,9 +98,9 @@ export class TabListController extends Stacks.StacksController {
      * is not a valid tab, all tabs will be unselected.
      */
     public set selectedTab(selectedTab: HTMLElement | null) {
-        for (let tab of this.tabTargets) {
-            let panelId = tab.getAttribute('aria-controls');
-            let panel = panelId ? document.getElementById(panelId) : null;
+        for (const tab of this.tabTargets) {
+            const panelId = tab.getAttribute('aria-controls');
+            const panel = panelId ? document.getElementById(panelId) : null;
 
             if (tab === selectedTab) {
                 tab.classList.add('is-selected');

package/lib/ts/controllers/s-popover.ts

@@ -1,11 +1,11 @@
 import { createPopper, Placement } from '@popperjs/core';
+import type * as Popper from '@popperjs/core';
 import * as Stacks from "../stacks";
 
 type OutsideClickBehavior = "always" | "never" | "if-in-viewport" | "after-dismissal";
 
 export abstract class BasePopoverController extends Stacks.StacksController {
-    // @ts-ignore
-    private popper!: Popper;
+    private popper!: Popper.Instance;
 
     protected popoverElement!: HTMLElement;
 
@@ -87,6 +87,8 @@ export abstract class BasePopoverController extends Stacks.StacksController {
         this.hide();
         if (this.popper) {
             this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
             delete this.popper;
         }
         super.disconnect();
@@ -105,7 +107,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
     show(dispatcher: Event|Element|null = null) {
         if (this.isVisible) { return; }
 
-        let dispatcherElement = this.getDispatcher(dispatcher);
+        const dispatcherElement = this.getDispatcher(dispatcher);
 
         if (this.triggerEvent("show", {
             dispatcher: dispatcherElement
@@ -115,7 +117,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
             this.initializePopper();
         }
 
-        this.popoverElement!.classList.add("is-visible");
+        this.popoverElement.classList.add("is-visible");
 
         // ensure the popper has been positioned correctly
         this.scheduleUpdate();
@@ -129,7 +131,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
     hide(dispatcher: Event|Element|null = null) {
         if (!this.isVisible) { return; }
 
-        let dispatcherElement = this.getDispatcher(dispatcher);
+        const dispatcherElement = this.getDispatcher(dispatcher);
 
         if (this.triggerEvent("hide", {
             dispatcher: dispatcherElement
@@ -140,6 +142,8 @@ export abstract class BasePopoverController extends Stacks.StacksController {
         if (this.popper) {
             // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
             this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
             delete this.popper;
         }
 
@@ -182,7 +186,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      * Initializes the Popper for this instance
      */
     private initializePopper() {
-        // @ts-ignore
         this.popper = createPopper(this.referenceElement, this.popoverElement, {
             placement: this.data.get("placement") as Placement || "bottom",
             modifiers: [
@@ -206,7 +209,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      * Validates the popover settings and attempts to set necessary internal variables
      */
     private validate() {
-        var referenceSelector = this.data.get("reference-selector");
+        const referenceSelector = this.data.get("reference-selector");
 
         this.referenceElement = <HTMLElement>this.element;
 
@@ -221,7 +224,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
 
         const popoverId = this.referenceElement.getAttribute(this.popoverSelectorAttribute);
 
-        var popoverElement = null;
+        let popoverElement: HTMLElement | null = null;
 
         // if the popover is named, attempt to fetch it (and throw an error if it doesn't exist)
         if (popoverId) {
@@ -264,7 +267,7 @@ export abstract class BasePopoverController extends Stacks.StacksController {
      */
     protected scheduleUpdate() {
         if (this.popper && this.isVisible) {
-            this.popper.update();
+            void this.popper.update();
         }
     }
 }
@@ -274,8 +277,8 @@ export class PopoverController extends BasePopoverController {
 
     protected popoverSelectorAttribute = "aria-controls";
 
-    private boundHideOnOutsideClick!: any;
-    private boundHideOnEscapePress!: any;
+    private boundHideOnOutsideClick!: (event: MouseEvent) => void;
+    private boundHideOnEscapePress!:  (event: KeyboardEvent) => void;
 
     /**
      * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
@@ -332,7 +335,7 @@ export class PopoverController extends BasePopoverController {
         const target = <Node>e.target;
         // check if the document was clicked inside either the reference element or the popover itself
         // note: .contains also returns true if the node itself matches the target element
-        if (this.shouldHideOnOutsideClick && !this.referenceElement.contains(target) && !this.popoverElement!.contains(target) && document.body.contains(target)) {
+        if (this.shouldHideOnOutsideClick && !this.referenceElement.contains(target) && !this.popoverElement.contains(target) && document.body.contains(target)) {
             this.hide(e);
         }
     };
@@ -349,7 +352,7 @@ export class PopoverController extends BasePopoverController {
 
         // check if the target was inside the popover element and refocus the triggering element
         // note: .contains also returns true if the node itself matches the target element
-        if (this.popoverElement!.contains(<Node>e.target)) {
+        if (this.popoverElement.contains(<Node>e.target)) {
             this.referenceElement.focus();
         }
 
@@ -364,8 +367,10 @@ export class PopoverController extends BasePopoverController {
         if (!this.data.has("toggle-class")) {
             return;
         }
-        var cl = this.referenceElement.classList;
-        this.data.get("toggle-class")!.split(/\s+/).forEach(function (cls: string) {
+
+        const toggleClass = this.data.get("toggle-class") || "";
+        const cl = this.referenceElement.classList;
+        toggleClass.split(/\s+/).forEach(function (cls: string) {
             cl.toggle(cls, show);
         });
     }
@@ -375,7 +380,9 @@ export class PopoverController extends BasePopoverController {
      * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
      */
     private toggleAccessibilityAttributes(show?: boolean) {
-        this.referenceElement.ariaExpanded = show?.toString() || this.referenceElement.ariaExpanded || 'false';
+        const expandedValue = show?.toString() || this.referenceElement.ariaExpanded || "false";
+        this.referenceElement.ariaExpanded = expandedValue;
+        this.referenceElement.setAttribute("aria-expanded", expandedValue);
     }
 }
 
@@ -453,6 +460,7 @@ export function attachPopover(element: Element, popover: Element | string, optio
     }
 
     if (typeof popover === 'string') {
+        // eslint-disable-next-line no-unsanitized/method
         const elements = document.createRange().createContextualFragment(popover).children;
         if (elements.length !== 1) {
             throw "popover should contain a single element";
@@ -461,7 +469,7 @@ export function attachPopover(element: Element, popover: Element | string, optio
     }
 
     const existingId = referenceElement.getAttribute("aria-controls");
-    var popoverId = popover.id;
+    let popoverId = popover.id;
 
     if (!popover.classList.contains('s-popover')) {
         throw `popover should have the "s-popover" class but had class="${popover.className}"`;
@@ -557,7 +565,7 @@ function getPopover(element: Element): GetPopoverResult {
  * @param include Whether to add the controllerName value
  */
 function toggleController(el: Element, controllerName: string, include: boolean) {
-    var controllers = new Set(el.getAttribute('data-controller')?.split(/\s+/));
+    const controllers = new Set(el.getAttribute('data-controller')?.split(/\s+/));
     if (include) {
         controllers.add(controllerName);
     } else {

package/lib/ts/controllers/s-table.ts

@@ -9,14 +9,15 @@ export class TableController extends Stacks.StacksController {
         if (["asc", "desc", "none"].indexOf(direction) < 0) {
             throw "direction must be one of asc, desc, or none"
         }
-        var controller = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const controller = this;
         this.columnTargets.forEach(function (target) {
-            var isCurrrent = target === headElem;
+            const isCurrrent = target === headElem;
 
             target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
 
             target.querySelectorAll(".js-sorting-indicator").forEach(function (icon) {
-                var visible = isCurrrent ? direction : "none";
+                const visible = isCurrrent ? direction : "none";
                 icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
             });
 
@@ -29,16 +30,17 @@ export class TableController extends Stacks.StacksController {
     };
 
     sort(evt: Event) {
-        var controller = this;
-        var colHead = evt.currentTarget;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const controller = this;
+        const colHead = evt.currentTarget;
         if (!(colHead instanceof HTMLTableCellElement)) {
             throw "invalid event target";
         }
-        var table = this.element as HTMLTableElement;
-        var tbody = table.tBodies[0];
+        const table = this.element as HTMLTableElement;
+        const tbody = table.tBodies[0];
 
         // the column slot number of the clicked header
-        var colno = getCellSlot(colHead);
+        const colno = getCellSlot(colHead);
 
         if (colno < 0) { // this shouldn't happen if the clicked element is actually a column head
             return;
@@ -46,23 +48,23 @@ export class TableController extends Stacks.StacksController {
 
         // an index of the <tbody>, so we can find out for each row which <td> element is
         // in the same column slot as the header
-        var slotIndex = buildIndex(tbody);
+        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
-        var direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
+        const direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
 
-        var rows = Array.from(table.tBodies[0].rows);
+        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.
-        var anyNonInt = false;
+        let anyNonInt = false;
 
         // data will be a list of tuples [value, rowNum], where value is what we're sorting by
-        var data: [string | number, number][] = [];
-        var firstBottomRow: HTMLTableRowElement;
+        const data: [string | number, number][] = [];
+        let firstBottomRow: HTMLTableRowElement;
         rows.forEach(function (row, index) {
-            var force = controller.getElementData(row, "sort-to");
+            const force = controller.getElementData(row, "sort-to");
             if (force === "top") {
                 return; // rows not added to the list will automatically end up at the top
             } else if (force === "bottom") {
@@ -71,7 +73,7 @@ export class TableController extends Stacks.StacksController {
                 }
                 return;
             }
-            var cell = slotIndex[index][colno];
+            const cell = slotIndex[index][colno];
             if (!cell) {
                 data.push(["", index]);
                 return;
@@ -79,10 +81,10 @@ export class TableController extends Stacks.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
-            var explicit = controller.getElementData(cell, "sort-val");
-            var d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
+            const explicit = controller.getElementData(cell, "sort-val");
+            const d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
 
-            if ((d !== "") && (parseInt(d, 10) + "" !== d)) {
+            if ((d !== "") && (`${parseInt(d, 10)}` !== d)) {
                 anyNonInt = true;
             }
             data.push([d, index]);
@@ -114,7 +116,7 @@ export class TableController extends Stacks.StacksController {
 
         // this is the actual reordering of the table rows
         data.forEach(function (tup) {
-            var row = rows[tup[1]];
+            const row = rows[tup[1]];
             row.parentElement!.removeChild(row);
             if (firstBottomRow) {
                 tbody.insertBefore(row, firstBottomRow);
@@ -165,29 +167,29 @@ function getCellSlot(cell: HTMLTableCellElement): number {
 // 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: HTMLTableSectionElement, findCell?: HTMLTableCellElement) {
-    var index = [];
-    var curRow = section.children[0];
+    const index = [];
+    let curRow = section.children[0];
 
     // the elements of these two arrays are synchronized; the first array contains table cell elements,
     // the second one contains a number that indicates for how many more rows this elements will
     // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
-    var growing: HTMLTableCellElement[] = [];
-    var growingRowsLeft: number[] = [];
+    const growing: HTMLTableCellElement[] = [];
+    const growingRowsLeft: number[] = [];
 
     // 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; })) {
-        var curIndexRow: HTMLTableCellElement[] = [];
+        const curIndexRow: HTMLTableCellElement[] = [];
         index.push(curIndexRow);
 
-        var curSlot = 0;
+        let curSlot = 0;
         if (curRow) {
-            for (var curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
+            for (let curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
                 while (growingRowsLeft[curSlot]) {
                     growingRowsLeft[curSlot]--;
                     curIndexRow[curSlot] = growing[curSlot];
                     curSlot++;
                 }
-                var cell = curRow.children[curCellInd];
+                const cell = curRow.children[curCellInd];
                 if (!(cell instanceof HTMLTableCellElement)) {
                     throw "invalid table"
                 }
@@ -197,7 +199,7 @@ function buildIndexOrGetCellSlot(section: HTMLTableSectionElement, findCell?: HT
                 if (cell === findCell) {
                     return curSlot;
                 }
-                var nextFreeSlot = curSlot + cell.colSpan;
+                const nextFreeSlot = curSlot + cell.colSpan;
                 for (; curSlot < nextFreeSlot; curSlot++) {
                     growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
                     growing[curSlot] = cell;