sibujs 4.12.0 → 4.13.1

package/dist/widgets.js

@@ -6,25 +6,334 @@ import {
   fileUpload,
   popover,
   select,
+  snapshotAttributes,
   tabs,
   tooltip
-} from "./chunk-LYTUTXQP.js";
-import "./chunk-HXT2RNH5.js";
-import "./chunk-WFRQ6D7H.js";
-import "./chunk-RK7EPQPG.js";
+} from "./chunk-PBJYCE2Z.js";
+import {
+  claimWidgetKey,
+  isWidgetKeyEvent,
+  widgetKeyOwner
+} from "./chunk-N5TBYXHW.js";
+import "./chunk-ADZHPN2B.js";
+import {
+  createId,
+  domBinding
+} from "./chunk-22OPSWMF.js";
+import "./chunk-YFTBCCVH.js";
 import "./chunk-EXXSN3BW.js";
 import "./chunk-7XHATCIH.js";
-import "./chunk-IHA62NGJ.js";
-import "./chunk-B2Y5BJSP.js";
+import {
+  batch,
+  signal
+} from "./chunk-QKFVMIAV.js";
+import {
+  untracked
+} from "./chunk-4UTGDVSA.js";
 import "./chunk-NYNYSPK7.js";
+
+// src/widgets/selectMenu.ts
+var boundMenus = /* @__PURE__ */ new WeakMap();
+var OPTION_ATTRS = ["id", "role", "aria-selected", "aria-disabled"];
+function selectMenu(options) {
+  const getItems = typeof options.items === "function" ? options.items : () => options.items;
+  const toStr = options.itemToString ?? ((item) => String(item));
+  const isDisabled = options.isDisabled ?? (() => false);
+  const isEqual = options.isEqual ?? Object.is;
+  const pageSize = Math.max(1, options.pageSize ?? 10);
+  const [ownValue, setOwnValue] = signal(options.defaultValue ?? null);
+  const readValue = options.value;
+  const value = () => readValue ? readValue() ?? null : ownValue();
+  const [isOpen, setIsOpen] = signal(false);
+  const [active, setActiveIndex] = signal(-1);
+  const enabledAt = (items, i) => i >= 0 && i < items.length && !isDisabled(items[i]);
+  function enabledFrom(items, from, dir) {
+    for (let i = from; i >= 0 && i < items.length; i += dir) if (!isDisabled(items[i])) return i;
+    return -1;
+  }
+  function selectedIndex(items) {
+    const v = value();
+    if (v === null) return -1;
+    return items.findIndex((it) => isEqual(it, v));
+  }
+  function open(activeAt = "selected") {
+    untracked(() => {
+      const items = getItems();
+      let idx = -1;
+      if (activeAt === "last") idx = enabledFrom(items, items.length - 1, -1);
+      else if (activeAt === "first") idx = enabledFrom(items, 0, 1);
+      else {
+        const sel = selectedIndex(items);
+        idx = enabledAt(items, sel) ? sel : enabledFrom(items, 0, 1);
+      }
+      batch(() => {
+        setActiveIndex(idx);
+        setIsOpen(true);
+      });
+    });
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function toggle() {
+    if (untracked(isOpen)) close();
+    else open();
+  }
+  function setActive(index) {
+    if (enabledAt(untracked(getItems), index)) setActiveIndex(index);
+  }
+  function select2(item) {
+    if (isDisabled(item)) return;
+    batch(() => {
+      if (!readValue) setOwnValue(() => item);
+      setIsOpen(false);
+    });
+    options.onChange?.(item);
+  }
+  function activeItem() {
+    const items = getItems();
+    const i = active();
+    return i >= 0 && i < items.length ? items[i] : null;
+  }
+  function bind(els) {
+    const existing = boundMenus.get(els.trigger);
+    if (existing) return existing;
+    const { trigger, listbox } = els;
+    const restoreTrigger = snapshotAttributes(trigger, [
+      "role",
+      "aria-haspopup",
+      "aria-expanded",
+      "aria-controls",
+      "aria-activedescendant",
+      "tabindex"
+    ]);
+    const restoreListbox = snapshotAttributes(listbox, ["id", "role", "tabindex"]);
+    const prevHidden = listbox.hidden;
+    const optionRestores = /* @__PURE__ */ new Map();
+    const generatedIds = /* @__PURE__ */ new WeakMap();
+    let optionIndex = /* @__PURE__ */ new Map();
+    const listboxId = listbox.id || createId("sibu-select-menu");
+    listbox.id = listboxId;
+    listbox.setAttribute("role", "listbox");
+    listbox.tabIndex = -1;
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-controls", listboxId);
+    if (trigger.tabIndex < 0) trigger.tabIndex = 0;
+    const generatedIdFor = (el, taken) => {
+      let id = generatedIds.get(el);
+      while (id === void 0 || taken.has(id) || el.ownerDocument.getElementById(id) !== null) {
+        id = createId(`${listboxId}-opt`);
+      }
+      generatedIds.set(el, id);
+      return id;
+    };
+    let lastScrolled = null;
+    const stopBinding = domBinding(() => {
+      const items = getItems();
+      const openNow = isOpen();
+      const idx = active();
+      const sel = value();
+      trigger.setAttribute("aria-expanded", openNow ? "true" : "false");
+      listbox.hidden = !openNow;
+      const nextIndex = /* @__PURE__ */ new Map();
+      let activeEl = null;
+      const optionEls = [];
+      const taken = /* @__PURE__ */ new Set();
+      for (let i = 0; i < items.length; i++) {
+        const el = els.option(items[i], i);
+        optionEls.push(el);
+        if (el?.id) taken.add(el.id);
+      }
+      for (let i = 0; i < items.length; i++) {
+        const el = optionEls[i];
+        if (!el) continue;
+        if (!optionRestores.has(el)) optionRestores.set(el, snapshotAttributes(el, OPTION_ATTRS));
+        nextIndex.set(el, i);
+        if (!el.id) {
+          el.id = generatedIdFor(el, taken);
+          taken.add(el.id);
+        }
+        el.setAttribute("role", "option");
+        el.setAttribute("aria-selected", sel !== null && isEqual(items[i], sel) ? "true" : "false");
+        const disabled = isDisabled(items[i]);
+        if (disabled) el.setAttribute("aria-disabled", "true");
+        else el.removeAttribute("aria-disabled");
+        if (i === idx && !disabled) activeEl = el;
+      }
+      for (const [el, restore] of optionRestores) {
+        if (nextIndex.has(el)) continue;
+        restore();
+        optionRestores.delete(el);
+        if (lastScrolled === el) lastScrolled = null;
+      }
+      optionIndex = nextIndex;
+      if (openNow && activeEl) {
+        trigger.setAttribute("aria-activedescendant", activeEl.id);
+        if (activeEl !== lastScrolled) {
+          activeEl.scrollIntoView?.({
+            block: "nearest"
+          });
+          lastScrolled = activeEl;
+        }
+      } else {
+        trigger.removeAttribute("aria-activedescendant");
+        if (!openNow) lastScrolled = null;
+      }
+    }, trigger);
+    let typeBuffer = "";
+    let typeTimer = null;
+    const typeahead = (char) => {
+      typeBuffer += char.toLowerCase();
+      if (typeTimer !== null) clearTimeout(typeTimer);
+      typeTimer = setTimeout(() => {
+        typeBuffer = "";
+        typeTimer = null;
+      }, 500);
+      const items = getItems();
+      const n = items.length;
+      if (n === 0) return;
+      const start = untracked(active);
+      const repeated = typeBuffer.length > 1 && [...typeBuffer].every((c) => c === typeBuffer[0]);
+      const needle = repeated ? typeBuffer[0] : typeBuffer;
+      const offset = typeBuffer.length === 1 || repeated ? 1 : 0;
+      for (let k = 0; k < n; k++) {
+        const i = (Math.max(start, 0) + offset + k) % n;
+        if (!isDisabled(items[i]) && toStr(items[i]).toLowerCase().startsWith(needle)) {
+          setActiveIndex(i);
+          return;
+        }
+      }
+    };
+    const commitActive = () => {
+      const item = untracked(activeItem);
+      if (item !== null && !isDisabled(item)) select2(item);
+      else close();
+    };
+    const move = (delta) => {
+      const items = getItems();
+      const cur = untracked(active);
+      const dir = delta > 0 ? 1 : -1;
+      const target = Math.min(items.length - 1, Math.max(0, cur + delta));
+      let next = enabledFrom(items, target, dir);
+      if (next === -1) next = enabledFrom(items, target, dir === 1 ? -1 : 1);
+      if (next !== -1) setActiveIndex(next);
+    };
+    const onKey = (e) => {
+      if (isWidgetKeyEvent(e) || e.ctrlKey || e.metaKey) return;
+      const openNow = untracked(isOpen);
+      const key = e.key;
+      let handled = true;
+      if (!openNow) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") open();
+        else if (key === "Home") open("first");
+        else if (key === "End") open("last");
+        else if (key.length === 1 && !e.altKey) {
+          open();
+          typeahead(key);
+        } else handled = false;
+      } else if (key === "ArrowDown" && !e.altKey) move(1);
+      else if (key === "ArrowUp" && e.altKey) commitActive();
+      else if (key === "ArrowUp") move(-1);
+      else if (key === "Home") setActive(enabledFrom(getItems(), 0, 1));
+      else if (key === "End") {
+        const items = getItems();
+        setActive(enabledFrom(items, items.length - 1, -1));
+      } else if (key === "PageDown") move(pageSize);
+      else if (key === "PageUp") move(-pageSize);
+      else if (key === "Escape") close();
+      else if (key === " " && typeBuffer !== "") typeahead(key);
+      else if (key === "Enter" || key === " ") commitActive();
+      else if (key === "Tab") {
+        commitActive();
+        handled = false;
+      } else if (key.length === 1 && !e.altKey) typeahead(key);
+      else handled = false;
+      if (handled) {
+        e.preventDefault();
+        claimWidgetKey(e, "selectMenu");
+      }
+    };
+    const onTriggerClick = () => toggle();
+    const onListboxPointerDown = (e) => e.preventDefault();
+    const optionFromEvent = (e) => {
+      let node = e.target;
+      while (node && node !== listbox) {
+        const i = optionIndex.get(node);
+        if (i !== void 0) return i;
+        node = node.parentNode;
+      }
+      return -1;
+    };
+    const onListboxClick = (e) => {
+      const i = optionFromEvent(e);
+      if (i === -1) return;
+      const item = getItems()[i];
+      if (isDisabled(item)) return;
+      select2(item);
+      trigger.focus();
+    };
+    const onListboxPointerMove = (e) => {
+      const i = optionFromEvent(e);
+      if (i !== -1 && i !== untracked(active)) setActive(i);
+    };
+    const onDocPointerDown = (e) => {
+      if (!untracked(isOpen)) return;
+      const target = e.target;
+      if (target && (trigger.contains(target) || listbox.contains(target))) return;
+      close();
+    };
+    const onTriggerBlur = (e) => {
+      if (!untracked(isOpen)) return;
+      const next = e.relatedTarget;
+      if (next && listbox.contains(next)) return;
+      close();
+    };
+    trigger.addEventListener("keydown", onKey);
+    trigger.addEventListener("click", onTriggerClick);
+    trigger.addEventListener("blur", onTriggerBlur);
+    listbox.addEventListener("mousedown", onListboxPointerDown);
+    listbox.addEventListener("click", onListboxClick);
+    listbox.addEventListener("pointermove", onListboxPointerMove);
+    const doc = trigger.ownerDocument;
+    doc.addEventListener("pointerdown", onDocPointerDown, true);
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      if (boundMenus.get(trigger) === teardown) boundMenus.delete(trigger);
+      stopBinding();
+      trigger.removeEventListener("keydown", onKey);
+      trigger.removeEventListener("click", onTriggerClick);
+      trigger.removeEventListener("blur", onTriggerBlur);
+      listbox.removeEventListener("mousedown", onListboxPointerDown);
+      listbox.removeEventListener("click", onListboxClick);
+      listbox.removeEventListener("pointermove", onListboxPointerMove);
+      doc.removeEventListener("pointerdown", onDocPointerDown, true);
+      if (typeTimer !== null) clearTimeout(typeTimer);
+      for (const restore of optionRestores.values()) restore();
+      optionRestores.clear();
+      optionIndex.clear();
+      restoreTrigger();
+      restoreListbox();
+      listbox.hidden = prevHidden;
+    };
+    boundMenus.set(trigger, teardown);
+    return teardown;
+  }
+  return { value, isOpen, open, close, toggle, active, activeItem, setActive, select: select2, bind };
+}
 export {
   accordion,
   combobox,
   contentEditable,
   datePicker,
   fileUpload,
+  isWidgetKeyEvent,
   popover,
   select,
+  selectMenu,
   tabs,
-  tooltip
+  tooltip,
+  widgetKeyOwner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "4.12.0",
+  "version": "4.13.1",
   "description": "A function-based frontend framework with fine-grained reactivity and no virtual DOM. Tag factories return live DOM nodes you can hold and mutate, signals update only what changed, and nothing needs a compiler — it runs from a script tag or a bundler.",
   "keywords": [
     "frontend",
@@ -155,6 +155,14 @@
   "engines": {
     "node": ">=22.3.0"
   },
+  "peerDependencies": {
+    "jsdom": ">=22"
+  },
+  "peerDependenciesMeta": {
+    "jsdom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@biomejs/biome": "2.4.7",
     "@playwright/test": "^1.61.1",