stimeo-ui 0.16.0 → 0.18.0

data/dist/controllers/accordion_controller.js

@@ -1,14 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/accordion_controller.ts
-
-// src/utils/arrow_step.ts
-function isReservedArrowChord(event, allow = []) {
-  if (!event.key.startsWith("Arrow")) return false;
-  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
-}
-
-// src/utils/state_reason.ts
 var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
 var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
 function stateReasonFor(event) {
@@ -18,16 +9,58 @@ function stateReasonFor(event) {
   return "user";
 }
 
-// src/utils/state_regions.ts
-var StateRegions = class {
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
+
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
+
+var StateRegions = class _StateRegions {
+  static #registry = sharedRegistry(
+    "stimeo-ui.state-regions.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #whenTrue;
   #whenFalse;
-  #taken = /* @__PURE__ */ new WeakSet();
-  constructor(options) {
+  #record;
+  constructor(options, owner) {
     this.#whenTrue = options.whenTrue;
     this.#whenFalse = options.whenFalse ?? null;
+    this.#record = `data-${owner}-hidden-region`;
+    _StateRegions.#registry.names.add(this.#record);
   }
-  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
   reflect(host, isTrue) {
     const shown = this.#inside(host, this.#whenTrue());
     if (!this.#whenFalse) {
@@ -43,77 +76,172 @@ var StateRegions = class {
     for (const region of shown) this.#write(region, !isTrue);
     for (const region of hiddenSide) this.#write(region, isTrue);
   }
-  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  release(host) {
+    for (const region of [host, ...host.querySelectorAll("*")]) {
+      if (!(region instanceof HTMLElement)) continue;
+      const stack = this.#held(region);
+      const hold = stack && this.#take(stack);
+      if (!stack || !hold) continue;
+      const owns = region.hidden === hold.written && !this.#covered(region, stack, hold);
+      const index = stack.indexOf(hold);
+      stack.splice(index, 1);
+      const above = stack[index];
+      if (above) above.linked &&= hold.linked;
+      if (owns) {
+        const below = hold.linked ? stack[index - 1] : void 0;
+        if (below) {
+          if (region.hidden !== below.written) region.hidden = below.written;
+        } else {
+          setAttributeIfChanged(region, "hidden", hold.authored);
+        }
+      }
+      this.#mark(region, stack);
+    }
+  }
   #write(region, hidden) {
-    if (hidden) this.#taken.add(region);
-    else this.#taken.delete(region);
-    if (region.hidden !== hidden) region.hidden = hidden;
+    const stack = this.#stack(region);
+    const hold = this.#take(stack) ?? this.#acquire(region, stack);
+    const shows = !this.#covered(region, stack, hold);
+    hold.written = hidden;
+    if (shows && region.hidden !== hidden) region.hidden = hidden;
+    this.#mark(region, stack);
   }
-  /** Returns a region this instance hid; one it never hid keeps what it carries. */
   #give(region) {
-    if (this.#taken.delete(region)) region.hidden = false;
+    const stack = this.#held(region);
+    if (stack && this.#take(stack)?.written) this.#write(region, false);
+  }
+  #held(region) {
+    return _StateRegions.#registry.stacks.has(region) || region.hasAttribute(this.#record) ? this.#stack(region) : void 0;
+  }
+  #stack(region) {
+    const stacks = _StateRegions.#registry.stacks;
+    const stack = stacks.get(region) ?? this.#seed(region);
+    stacks.set(region, stack);
+    return stack;
+  }
+  #seed(region) {
+    const found = [];
+    for (const record of _StateRegions.#registry.names) {
+      const read = this.#recorded(region, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, authored, written, linked }, index) => ({
+      instance: null,
+      record,
+      authored,
+      written,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.instance === this) ?? stack.find((held) => held.instance === null && held.record === this.#record);
+    if (hold) hold.instance = this;
+    return hold;
+  }
+  #covered(region, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === region.hidden);
+  }
+  #acquire(region, stack) {
+    const top = stack.at(-1);
+    const over = top && region.hidden === top.written ? top : void 0;
+    const hold = {
+      instance: this,
+      record: this.#record,
+      authored: over ? over.authored : region.getAttribute("hidden"),
+      written: false,
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #mark(region, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        region.getAttribute("hidden") === hold.authored && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.authored, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      setAttributeIfChanged(region, name, recorded);
+    }
+  }
+  #recorded(region, name) {
+    try {
+      const parsed = JSON.parse(region.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [authored, written, ...rest] = parsed;
+      if (authored !== null && typeof authored !== "string") return null;
+      const linked = rest[0] !== false;
+      const beneath = linked ? rest : rest.slice(1);
+      if (!beneath.every((under) => typeof under === "string")) return null;
+      return typeof written === "boolean" ? { authored, written, linked, beneath } : null;
+    } catch {
+      return null;
+    }
   }
-  /** The declared regions that sit within `host`, which may be the host itself. */
   #inside(host, regions) {
     return regions.filter((region) => host.contains(region));
   }
 };
 
-// src/controllers/accordion_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var AccordionController = class extends Controller {
   static targets = ["trigger", "panel", "expandedLabel", "collapsedLabel"];
   static actions = ["collapseAll", "expandAll", "onKeydown", "toggle"];
   static events = ["close", "open"];
-  /** Owns `hidden` on the label pair a header declares, narrowed to that header. */
-  #labels = new StateRegions({
-    whenTrue: () => this.expandedLabelTargets,
-    whenFalse: () => this.collapsedLabelTargets
-  });
-  /** Settles the label pair of a header as it joins the group. */
+  #labels = new StateRegions(
+    {
+      whenTrue: () => this.expandedLabelTargets,
+      whenFalse: () => this.collapsedLabelTargets
+    },
+    this.identifier
+  );
   triggerTargetConnected(trigger) {
     this.#reflectLabels(trigger);
   }
-  /** Settles the pair of the header an arriving expanded half belongs to. */
+  triggerTargetDisconnected(trigger) {
+    if (!this.triggerTargets.includes(trigger)) this.#labels.release(trigger);
+  }
   expandedLabelTargetConnected(label) {
     this.#settleLabelHost(label);
   }
-  /** Settles the pair of the header an arriving collapsed half belongs to. */
   collapsedLabelTargetConnected(label) {
     this.#settleLabelHost(label);
   }
-  /** Reflects the pair of the header a label half sits in, where a header holds it. */
   #settleLabelHost(label) {
     const trigger = this.triggerTargets.find((candidate) => candidate.contains(label));
     if (trigger) this.#reflectLabels(trigger);
   }
-  /** Toggles the panel controlled by the activated header. */
-  toggle(event) {
-    const trigger = event.currentTarget;
+  toggle(source) {
+    const { host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const trigger = host?.closest(targetSelector(this.identifier, "trigger"));
+    if (!trigger || !this.triggerTargets.includes(trigger)) return;
     const panel = this.#panelFor(trigger);
     if (!panel) return;
-    this.#setExpanded(
-      trigger,
-      panel,
-      trigger.getAttribute("aria-expanded") !== "true",
-      stateReasonFor(event)
-    );
-  }
-  /** Opens every panel. Bound via `data-action` on an "expand all" control. */
+    this.#setExpanded(trigger, panel, trigger.getAttribute("aria-expanded") !== "true", reason);
+  }
   expandAll(event) {
     this.#setAll(true, stateReasonFor(event));
   }
-  /** Closes every panel. Bound via `data-action` on a "collapse all" control. */
   collapseAll(event) {
     this.#setAll(false, stateReasonFor(event));
   }
-  /** Drives every header/panel pair to the same expanded state. */
   #setAll(open, reason) {
     for (const trigger of this.triggerTargets) {
       const panel = this.#panelFor(trigger);
       if (panel) this.#setExpanded(trigger, panel, open, reason);
     }
   }
-  /** Reflects one header/panel pair's state through `aria-expanded` + `hidden`. */
   #setExpanded(trigger, panel, open, reason) {
     const was = trigger.getAttribute("aria-expanded") === "true";
     trigger.setAttribute("aria-expanded", open ? "true" : "false");
@@ -124,20 +252,13 @@ var AccordionController = class extends Controller {
     if (open) this.dispatch("open", { detail, cancelable: false });
     else this.dispatch("close", { detail, cancelable: false });
   }
-  /** Shows the half of a header's label pair that belongs to its `aria-expanded`. */
   #reflectLabels(trigger) {
     this.#labels.reflect(trigger, trigger.getAttribute("aria-expanded") === "true");
   }
-  /**
-   * Moves focus between headers per the APG keyboard model, skipping any header
-   * that is hidden or nested in a hidden subtree. A consumer may hide whole
-   * sections (e.g. an `stimeo--filter` that collapses empty groups), and an
-   * unperceivable header must never become an arrow-key target — otherwise
-   * `.focus()` lands on nothing and navigation appears to stall.
-   */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     const current = event.currentTarget;
     if (this.triggerTargets.indexOf(current) === -1) return;
     const navigable = this.triggerTargets.filter((trigger) => trigger.closest("[hidden]") === null);
@@ -163,7 +284,6 @@ var AccordionController = class extends Controller {
     event.preventDefault();
     next?.focus();
   }
-  /** Resolves the panel a header controls via its `aria-controls` reference. */
   #panelFor(trigger) {
     const id = trigger.getAttribute("aria-controls");
     return id ? this.panelTargets.find((panel) => panel.id === id) ?? null : null;
@@ -171,5 +291,4 @@ var AccordionController = class extends Controller {
 };
 
 export { AccordionController };
-//# sourceMappingURL=accordion_controller.js.map
 //# sourceMappingURL=accordion_controller.js.map