nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/javascript/controllers/nk/dialog_controller.js

@@ -1,19 +1,23 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["trigger", "dialog"];
+  static targets = ["panel"];
+  static values = { dismissible: Boolean };
 
-  open() {
-    this.dialogTarget.showModal();
-  }
+  dismiss(event) {
+    if (!this.dismissibleValue || event.target !== this.panelTarget) return;
+
+    const rect = this.panelTarget.getBoundingClientRect();
+    const inside =
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom;
 
-  close() {
-    this.dialogTarget.close();
+    if (!inside) this.panelTarget.close();
   }
 
-  clickOutside(event) {
-    if (event.target === this.dialogTarget) {
-      this.close();
-    }
+  cancel(event) {
+    if (!this.dismissibleValue) event.preventDefault();
   }
 }

data/app/javascript/controllers/nk/dropdown_controller.js

@@ -1,78 +1,126 @@
 import { Controller } from "@hotwired/stimulus";
 import {
-  computePosition,
-  offset,
-  flip,
-  shift,
-  autoUpdate,
-} from "@floating-ui/dom";
+  observeOverlayPosition,
+  positionOverlay,
+} from "controllers/nk/overlay_position";
 
 export default class extends Controller {
-  static targets = ["trigger", "content"];
-  static values = {
-    placement: { type: String, default: "bottom" },
-  };
+  static targets = ["trigger", "content", "item"];
 
-  connect() {
-    this.updatePosition();
+  disconnect() {
+    this.stopPositioning?.();
   }
 
-  disconnect() {
-    this.close();
+  openFromKeyboard(event) {
+    if (!["ArrowDown", "ArrowUp"].includes(event.key)) return;
+    if (this.triggerTarget.disabled) return;
+
+    event.preventDefault();
+    this.focusLast = event.key === "ArrowUp";
+
+    if (this.contentTarget.matches(":popover-open")) {
+      this.focusInitialItem();
+    } else {
+      this.contentTarget.showPopover();
+    }
   }
 
-  get isExpanded() {
-    return this.triggerTarget.getAttribute("aria-expanded") === "true";
+  rememberFocus(event) {
+    if (event.newState === "open") return;
+
+    this.hadFocus =
+      this.restoreOnClose !== false &&
+      this.contentTarget.contains(document.activeElement);
   }
 
-  updatePosition = () => {
-    computePosition(this.triggerTarget, this.contentTarget, {
-      placement: this.placementValue,
-      middleware: [offset(5), flip(), shift({ padding: 5 })],
-    }).then(({ x, y }) => {
-      this.contentTarget.style.left = `${x}px`;
-      this.contentTarget.style.top = `${y}px`;
-    });
-  };
-
-  open = () => {
-    this.triggerTarget.setAttribute("aria-expanded", "true");
-    this.contentTarget.setAttribute("aria-hidden", "false");
-
-    document.addEventListener("click", this.clickOutside);
-
-    this.clearAutoUpdate = autoUpdate(
-      this.triggerTarget,
-      this.contentTarget,
-      this.updatePosition,
-    );
-  };
+  focusOpened(event) {
+    if (event.newState === "open") {
+      this.startPositioning();
+      this.focusInitialItem();
+    } else {
+      this.stopPositioning?.();
+      this.stopPositioning = null;
+      this.focusLast = false;
+      this.restoreFocus();
+    }
+  }
 
-  close = () => {
-    this.triggerTarget.setAttribute("aria-expanded", "false");
-    this.contentTarget.setAttribute("aria-hidden", "true");
+  restoreFocus() {
+    if (!this.hadFocus) return;
 
-    document.removeEventListener("click", this.clickOutside);
+    this.hadFocus = false;
+    this.triggerTarget.focus();
+  }
+
+  startPositioning() {
+    this.stopPositioning?.();
+    const update = () =>
+      positionOverlay(
+        this.triggerTarget,
+        this.contentTarget,
+        this.element.dataset.placement,
+      );
+
+    update();
+    this.stopPositioning = observeOverlayPosition(update);
+  }
 
-    if (this.clearAutoUpdate) {
-      this.clearAutoUpdate();
+  navigate(event) {
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        this.hide();
+        return;
+      case "Tab":
+        this.hide({ restoreFocus: false });
+        return;
     }
-  };
 
-  toggle = () => {
-    if (this.isExpanded) {
-      this.close();
+    const items = this.enabledItems;
+    if (items.length === 0) return;
+
+    const currentIndex = items.indexOf(document.activeElement);
+    const nextIndex = {
+      ArrowDown: (currentIndex + 1) % items.length,
+      ArrowUp: (currentIndex - 1 + items.length) % items.length,
+      Home: 0,
+      End: items.length - 1,
+    }[event.key];
+
+    if (nextIndex === undefined) return;
+
+    event.preventDefault();
+    items[nextIndex].focus();
+  }
+
+  select() {
+    this.hide();
+  }
+
+  focusInitialItem() {
+    const item = this.focusLast
+      ? this.enabledItems.at(-1)
+      : this.enabledItems[0];
+
+    this.focusLast = false;
+    if (item) {
+      item.focus();
     } else {
-      this.open();
+      this.contentTarget.focus();
     }
-  };
-
-  clickOutside = (event) => {
-    if (
-      !this.contentTarget.contains(event.target) &&
-      !this.triggerTarget.contains(event.target)
-    ) {
-      this.close();
+  }
+
+  hide({ restoreFocus = true } = {}) {
+    this.restoreOnClose = restoreFocus;
+    if (this.contentTarget.matches(":popover-open")) {
+      this.contentTarget.hidePopover();
     }
-  };
+    this.restoreOnClose = true;
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter(
+      (item) => !item.disabled && item.getAttribute("aria-disabled") !== "true",
+    );
+  }
 }

data/app/javascript/controllers/nk/dropzone/direct_upload.js

@@ -0,0 +1,61 @@
+import { DirectUpload } from "@rails/activestorage";
+
+export default class DirectUploadSession {
+  constructor(file, url, { onProgress, onComplete }) {
+    this.file = file;
+    this.url = url;
+    this.onProgress = onProgress;
+    this.onComplete = onComplete;
+  }
+
+  start() {
+    this.upload = new DirectUpload(this.file, this.url, {
+      directUploadWillCreateBlobWithXHR: (request) => {
+        this.bindRequest(request);
+      },
+      directUploadWillStoreFileWithXHR: (request) => {
+        this.bindRequest(request, { tracksProgress: true });
+      },
+    });
+
+    this.upload.create((error, attributes) => {
+      if (this.cancelled) return;
+
+      this.releaseRequest();
+      this.onComplete(error, attributes);
+    });
+  }
+
+  cancel() {
+    this.cancelled = true;
+    this.request?.abort();
+    this.releaseRequest();
+  }
+
+  bindRequest(request, { tracksProgress = false } = {}) {
+    if (this.cancelled) {
+      queueMicrotask(() => request.abort());
+      return;
+    }
+
+    this.releaseRequest();
+    this.request = request;
+
+    if (tracksProgress) {
+      this.progressListener = (event) => this.onProgress(event);
+      request.upload.addEventListener("progress", this.progressListener);
+    }
+  }
+
+  releaseRequest() {
+    if (this.request && this.progressListener) {
+      this.request.upload.removeEventListener(
+        "progress",
+        this.progressListener,
+      );
+    }
+
+    this.request = null;
+    this.progressListener = null;
+  }
+}

data/app/javascript/controllers/nk/dropzone/file_rules.js

@@ -0,0 +1,77 @@
+// Every reason is a caller-supplied template so the locale layer, not this
+// module, owns user-facing text.
+export function interpolate(template, replacements = {}) {
+  return template.replace(/%\{(\w+)\}/g, (match, name) =>
+    Object.hasOwn(replacements, name) ? String(replacements[name]) : match,
+  );
+}
+
+export function validateFiles(files, { maxFiles, maxBytes, accept, messages }) {
+  let acceptedCount = 0;
+  const selections = files.map((file) => {
+    const rejection = fileRejection(file, { maxBytes, accept, messages });
+    if (rejection) return rejection;
+
+    if (acceptedCount >= maxFiles) {
+      return {
+        file,
+        reason: interpolate(
+          maxFiles === 1 ? messages.maxFilesOne : messages.maxFilesOther,
+          { count: maxFiles },
+        ),
+      };
+    }
+
+    acceptedCount += 1;
+    return { file, reason: null };
+  });
+
+  return {
+    accepted: selections
+      .filter(({ reason }) => !reason)
+      .map(({ file }) => file),
+    rejected: selections.filter(({ reason }) => reason),
+  };
+}
+
+export function rejectionMessage(rejected) {
+  return Array.from(new Set(rejected.map(({ reason }) => reason))).join(" ");
+}
+
+export function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function fileRejection(file, { maxBytes, accept, messages }) {
+  if (maxBytes && file.size > maxBytes) {
+    return {
+      file,
+      reason: interpolate(messages.tooLarge, {
+        name: file.name,
+        size: formatBytes(maxBytes),
+      }),
+    };
+  }
+  if (accept && !accepts(file, accept)) {
+    return {
+      file,
+      reason: interpolate(messages.notAccepted, { name: file.name }),
+    };
+  }
+
+  return null;
+}
+
+function accepts(file, accept) {
+  return accept.split(",").some((rawRule) => {
+    const rule = rawRule.trim().toLowerCase();
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}

data/app/javascript/controllers/nk/dropzone/form_submit_lock.js

@@ -0,0 +1,30 @@
+const submitControlSelector = "button[type='submit'], input[type='submit']";
+const locks = new WeakMap();
+
+export function acquireFormSubmitLock(form, owner) {
+  if (!form) return;
+
+  let lock = locks.get(form);
+  if (!lock) {
+    lock = { owners: new Set(), controls: new Map() };
+    locks.set(form, lock);
+  }
+
+  form.querySelectorAll(submitControlSelector).forEach((control) => {
+    if (!lock.controls.has(control)) {
+      lock.controls.set(control, control.disabled);
+    }
+    control.disabled = true;
+  });
+  lock.owners.add(owner);
+}
+
+export function releaseFormSubmitLock(form, owner) {
+  const lock = form && locks.get(form);
+  if (!lock || !lock.owners.delete(owner) || lock.owners.size > 0) return;
+
+  lock.controls.forEach((initiallyDisabled, control) => {
+    if (control.isConnected) control.disabled = initiallyDisabled;
+  });
+  locks.delete(form);
+}