@stackoverflow/stacks 1.1.0 → 1.3.1

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

@@ -10,10 +10,12 @@ export class TooltipController extends BasePopoverController {
 
     protected popoverSelectorAttribute = "aria-describedby";
 
-    private boundScheduleShow!: any;
-    private boundHide!: any;
-    private boundHideIfWithin!: any;
-    private activeTimeout!: any;
+    private boundScheduleShow!: () => void;
+    private boundHide!: () => void;
+    private boundHideIfWithin!: () => void;
+    private boundHideOnEscapeKeyEvent!: () => void;
+    private boundClearActiveTimeout!: () => void;
+    private activeTimeout!: number;
 
     /**
      * Binds mouseover and mouseout events in addition to BasePopoverController.connect
@@ -27,12 +29,14 @@ export class TooltipController extends BasePopoverController {
         if (window.matchMedia("(hover: hover)").matches) {
             this.bindMouseEvents();
         }
+        this.bindKeyboardEvents();
     }
 
     /**
      * Unbinds mouse events in addition to BasePopoverController.disconnect
      */
     disconnect() {
+        this.unbindKeyboardEvents();
         this.unbindMouseEvents();
         super.disconnect();
     }
@@ -43,7 +47,7 @@ export class TooltipController extends BasePopoverController {
      */
     show(dispatcher: Event|Element|null = null) {
         // check and see if this controller coexists with a popover
-        var controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
+        const controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
 
         // if the controller exists and already has a visible popover, don't show the tooltip
         if (controller && (<PopoverController>controller).isVisible) {
@@ -64,11 +68,16 @@ export class TooltipController extends BasePopoverController {
     /**
      * Cancels the scheduled tooltip popover display and hides it if already displayed
      */
-    hide(dispatcher: Event | Element | null = null) {
+    scheduleHide(dispatcher: Event | Element | null = null) {
         window.clearTimeout(this.activeTimeout);
-        this.activeTimeout = null;
+        this.activeTimeout = window.setTimeout(() => super.hide(dispatcher), 100);
+    }
 
-        super.hide(dispatcher);
+    /**
+     * Cancels the activeTimeout
+     */
+     clearActiveTimeout() {
+        clearTimeout(this.activeTimeout);
     }
 
     /**
@@ -76,13 +85,14 @@ export class TooltipController extends BasePopoverController {
      */
     applyTitleAttributes() {
 
-        var content: Node;
+        let content: Node;
 
-        var htmlTitle = this.data.get("html-title");
+        const htmlTitle = this.data.get("html-title");
         if (htmlTitle) {
+            // eslint-disable-next-line no-unsanitized/method
             content = document.createRange().createContextualFragment(htmlTitle);
         } else {
-            var plainTitle = this.element.getAttribute("title");
+            const plainTitle = this.element.getAttribute("title");
             if (plainTitle) {
                 content = document.createTextNode(plainTitle);
             } else {
@@ -93,21 +103,20 @@ export class TooltipController extends BasePopoverController {
         this.data.delete("html-title");
         this.element.removeAttribute("title");
 
-        var popoverId = this.element.getAttribute("aria-describedby");
+        let popoverId = this.element.getAttribute("aria-describedby");
         if (!popoverId) {
             popoverId = TooltipController.generateId();
             this.element.setAttribute("aria-describedby", popoverId);
         }
 
-        var popover = document.getElementById(popoverId);
+        let popover = document.getElementById(popoverId);
         if (!popover) {
             popover = document.createElement("div");
             popover.id = popoverId;
-            popover.className = "s-popover s-popover__tooltip pe-none";
-            popover.setAttribute("aria-hidden", "true");
+            popover.className = "s-popover s-popover__tooltip";
             popover.setAttribute("role", "tooltip");
 
-            var parentNode = this.element.parentNode;
+            const parentNode = this.element.parentNode;
             if (parentNode) {
                 // insertBefore inserts at end if element.nextSibling is null.
                 parentNode.insertBefore(popover, this.element.nextSibling);
@@ -165,21 +174,49 @@ export class TooltipController extends BasePopoverController {
      */
     private hideIfWithin(event: Event) {
         if ((<Element>event.target!).contains(this.referenceElement)) {
-            this.hide();
+            this.scheduleHide();
+        }
+    }
+
+    private hideOnEscapeKeyEvent(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            this.scheduleHide();
         }
     }
+    /**
+     * Binds mouse events to show/hide on reference element hover
+     */
+     private bindKeyboardEvents() {
+        this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
+        this.boundHide = this.boundHide || this.scheduleHide.bind(this);
+        this.boundHideOnEscapeKeyEvent = this.boundHideOnEscapeKeyEvent || this.hideOnEscapeKeyEvent.bind(this);
+
+        this.referenceElement.addEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.addEventListener("blur", this.boundHide);
+        document.addEventListener("keyup", this.boundHideOnEscapeKeyEvent);
+    }
+    /**
+     * Unbinds all mouse events
+     */
+     private unbindKeyboardEvents() {
+        this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.removeEventListener("blur", this.boundHide);
+        document.removeEventListener("keyup", this.boundHideOnEscapeKeyEvent);
+    }
+
 
     /**
      * Binds mouse events to show/hide on reference element hover
      */
     private bindMouseEvents() {
         this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
-        this.boundHide = this.boundHide || this.hide.bind(this);
+        this.boundHide = this.boundHide || this.scheduleHide.bind(this);
+        this.boundClearActiveTimeout = this.boundClearActiveTimeout || this.clearActiveTimeout.bind(this);
 
         this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
         this.referenceElement.addEventListener("mouseout", this.boundHide);
-        this.referenceElement.addEventListener("focus", this.boundScheduleShow);
-        this.referenceElement.addEventListener("blur", this.boundHide);
+        this.popoverElement.addEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.addEventListener("mouseout", this.boundHide);
     }
 
     /**
@@ -190,6 +227,8 @@ export class TooltipController extends BasePopoverController {
         this.referenceElement.removeEventListener("mouseout", this.boundHide);
         this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
         this.referenceElement.removeEventListener("blur", this.boundHide);
+        this.popoverElement.removeEventListener("mouseover", this.boundClearActiveTimeout);
+        this.popoverElement.removeEventListener("mouseout", this.boundHide);
     }
 
     /**
@@ -231,16 +270,16 @@ export function setTooltipText(element: Element, text: string, options?: Tooltip
  * @param options Options for rendering the tooltip.
  */
 function applyOptionsAndTitleAttributes(element: Element, options?: TooltipOptions) {
-
     if (options && options.placement) {
         element.setAttribute("data-s-tooltip-placement", options.placement);
     }
 
-    var controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
+    const controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
 
     if (controller) {
         controller.applyTitleAttributes();
     } else {
-        element.setAttribute("data-controller", element.getAttribute("data-controller") + " s-tooltip");
+        const dataController = element.getAttribute("data-controller");
+        element.setAttribute("data-controller", `${dataController ? dataController : ""} s-tooltip`);
     }
 }

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

@@ -12,8 +12,8 @@ export class UploaderController extends Stacks.StacksController {
     private previewsTarget!: HTMLElement;
     private uploaderTarget!: HTMLElement;
 
-    private boundDragEnter!: any;
-    private boundDragLeave!: any;
+    private boundDragEnter!: () => void;
+    private boundDragLeave!: () => void;
 
     private static readonly FILE_DISPLAY_LIMIT = 10;
     private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
@@ -50,7 +50,7 @@ export class UploaderController extends Stacks.StacksController {
                     const hasMultipleFiles = res.length > 1;
 
                     if (hasMultipleFiles) {
-                        let headingElement = document.createElement("div");
+                        const headingElement = document.createElement("div");
                         headingElement.classList.add("s-uploader--previews-heading");
                         headingElement.innerText = res.length < count ?
                             `Showing ${res.length} of ${count} files` : `${count} items`;
@@ -61,7 +61,9 @@ export class UploaderController extends Stacks.StacksController {
                     }
                     res.forEach((file) => this.addFilePreview(file));
                     this.handleUploaderActive(true);
-                });
+                })
+                // TODO consider rendering an error message
+                .catch(() => null);
     }
 
     /**
@@ -84,13 +86,25 @@ export class UploaderController extends Stacks.StacksController {
         const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
 
         if (shouldPreview) {
-            hideElements.map(el => el.classList.add("d-none"));
-            showElements.map(el => el.classList.remove("d-none"));
-            enableElements.map(el => el.removeAttribute("disabled"));
+            hideElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            enableElements.forEach(el => {
+                el.removeAttribute("disabled");
+            });
         } else {
-            hideElements.map(el => el.classList.remove("d-none"));
-            showElements.map(el => el.classList.add("d-none"));
-            enableElements.map(el => el.setAttribute("disabled", "true"))
+            hideElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            enableElements.forEach(el => {
+                el.setAttribute("disabled", "true");
+            });
             this.handleUploaderActive(false);
         }
     }
@@ -104,7 +118,7 @@ export class UploaderController extends Stacks.StacksController {
             return;
         }
 
-        let previewElement = document.createElement("div");
+        const previewElement = document.createElement("div");
         let thumbElement;
 
         if (file.type.match('image/*') && file.data) {
@@ -137,7 +151,7 @@ export class UploaderController extends Stacks.StacksController {
      * @returns an object containing a FilePreview object
      */
     private fileToDataURL(file: File): Promise<FilePreview> {
-        var reader = new FileReader();
+        const reader = new FileReader();
         const { name, size, type } = file;
 
         if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {

package/lib/ts/stacks.ts

@@ -9,7 +9,7 @@ export class StacksApplication extends Stimulus.Application {
         const definitions = Array.isArray(head) ? head : [head, ...rest];
 
         for (const definition of definitions) {
-            var hasPrefix = /^s-/.test(definition.identifier);
+            const hasPrefix = /^s-/.test(definition.identifier);
             if (StacksApplication._initializing && !hasPrefix) {
                 throw "Stacks-created Stimulus controller names must start with \"s-\".";
             }
@@ -23,6 +23,7 @@ export class StacksApplication extends Stimulus.Application {
 
     static start(element?: Element, schema?: Stimulus.Schema): StacksApplication {
         const application = new StacksApplication(element, schema);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         application.start();
         return application;
     }
@@ -46,13 +47,14 @@ export class StacksController extends Stimulus.Controller {
     };
     protected triggerEvent<T>(eventName: string, detail?: T, optionalElement?: Element) {
         const namespacedName = this.identifier + ":" + eventName;
-        var event : CustomEvent<T>;
+        let event : CustomEvent<T>;
         try {
             event = new CustomEvent(namespacedName, {bubbles: true, cancelable: true, detail: detail});
         } catch (ex) {
             // Internet Explorer
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             event = document.createEvent("CustomEvent");
-            event.initCustomEvent(namespacedName, true, true, detail!);
+            event.initCustomEvent(namespacedName, true, true, detail);
         }
         (optionalElement || this.element).dispatchEvent(event);
         return event;
@@ -66,11 +68,13 @@ export interface ControllerDefinition {
     targets?: string[];
 }
 export function createController(controllerDefinition: ControllerDefinition): typeof StacksController {
+    // eslint-disable-next-line no-prototype-builtins
     const Controller = controllerDefinition.hasOwnProperty("targets")
         ? class Controller extends StacksController { static targets = controllerDefinition.targets! }
         : class Controller extends StacksController {};
 
-    for (var prop in controllerDefinition) {
+    for (const prop in controllerDefinition) {
+        // eslint-disable-next-line no-prototype-builtins
         if (prop !== "targets" && controllerDefinition.hasOwnProperty(prop)) {
             Object.defineProperty(
                 Controller.prototype,

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.1.0",
+  "version": "1.3.1",
   "files": [
     "dist",
     "lib"
@@ -30,42 +30,42 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@popperjs/core": "^2.11.6",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^1.0.1",
-    "@highlightjs/cdn-assets": "^11.5.1",
-    "@stackoverflow/stacks-editor": "^0.4.2",
-    "@stackoverflow/stacks-icons": "^2.27.0",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
-    "backstopjs": "^6.0.4",
-    "concurrently": "^7.1.0",
+    "@11ty/eleventy": "^1.0.2",
+    "@highlightjs/cdn-assets": "^11.6.0",
+    "@stackoverflow/stacks-editor": "^0.7.0",
+    "@stackoverflow/stacks-icons": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "backstopjs": "^6.1.1",
+    "concurrently": "^7.3.0",
     "css-loader": "^6.7.1",
-    "cssnano": "^5.1.7",
+    "cssnano": "^5.1.13",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.15.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
-    "jquery": "^3.6.0",
-    "less-loader": "^10.2.0",
+    "jquery": "^3.6.1",
+    "less-loader": "^11.0.0",
     "list.js": "^2.3.1",
     "markdown-it": "^13.0.1",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.2",
-    "stylelint": "^14.8.2",
-    "stylelint-config-recommended": "^7.0.0",
-    "stylelint-config-standard": "^25.0.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.3.0",
-    "typescript": "^4.6.4",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
+    "postcss-loader": "^7.0.1",
+    "prettier": "^2.7.1",
+    "stylelint": "^14.11.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-standard": "^28.0.0",
+    "terser-webpack-plugin": "^5.3.5",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
   },
   "browserslist": [

package/lib/css/components/banners.less

@@ -1,80 +0,0 @@
-//
-//  STACK OVERFLOW
-//  BANNERS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • SYSTEM BANNERS
-//
-//  ============================================================================
-//      When we use .s-banner, we need to adjust the padding-top on
-//      the body tag. This class correctly adjusts the body padding ONLY if
-//      the notice is one line. If it wraps to multiple lines, more classes or
-//      (ideally) JS will need to be used to determine the notice's height
-//      at the time of render. The padding value is determined like so:
-//
-//      50px (top bar) + 44px (notice height) - 1px (bottom border)
-//
-//      The borders subtraction are necessary to neatly tuck everything together.
-//  ----------------------------------------------------------------------------
-.s-banner__body-pt {
-    padding-top: 93px;
-}
-
-//  ============================================================================
-//  $   SYSTEM BANNERS
-//  ----------------------------------------------------------------------------
-.s-banner {
-    position: fixed;
-    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-    top: 0;
-    right: 0;
-    left: 0;
-    width: 100%;
-    padding: var(--su12);
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
-    border-radius: 0;
-    box-shadow: none;
-    color: var(--fc-medium);
-    font-size: var(--fs-body1);
-
-    // If you want to hide and reveal the banner
-    &[aria-hidden="true"] {
-        visibility: hidden;
-        opacity: 0;
-        -webkit-transform: translate3d(0, -50px, 0);
-        transform: translate3d(0, -50px, 0);
-    }
-
-    &[aria-hidden="false"] {
-        visibility: visible;
-        opacity: 1;
-        -webkit-transform: translate3d(0, 49px, 0);
-        transform: translate3d(0, 49px, 0);
-    }
-
-    //  If you want to put the banner above the topbar
-    &.is-pinned {
-        z-index: calc(var(--zi-navigation-fixed) + 1);
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-
-    //  If it's a really important banner
-    &.s-banner__important {
-        border-color: transparent;
-        color: var(--white);
-    }
-}
-
-//  --  When we want to keep hero content capped
-.s-banner--container {
-    position: relative;
-    width: 100%;
-    max-width: calc(var(--s-step) * 10);
-    margin: 0 auto;
-}

package/lib/css/components/blank-states.less

@@ -1,26 +0,0 @@
-//
-//  STACK OVERFLOW
-//  EMPTY STATES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.s-empty-state {
-    color: var(--fc-light);
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-
-    p {
-        font-size: var(--fs-body1);
-        margin-bottom: var(--su12);
-
-        strong {
-            color: var(--fc-dark);
-        }
-    }
-}