@enigmax/primitives 0.22.0 → 0.23.0

package/dist/{chunk-FWVWX67R.js → chunk-FGBIZDV2.js}

@@ -1,6 +1,6 @@
-import { createRecentStore, shortcutLabel, moveActive, groupRows, isPaletteShortcut } from './chunk-DTWZDONY.js';
-import { subsequenceMatcher, createSearch } from './chunk-D5A2ZMAG.js';
 import { Slot } from './chunk-HS3X3XCW.js';
+import { createRecentStore, shortcutLabel, moveActive, groupRows, isPaletteShortcut } from './chunk-DTWZDONY.js';
+import { subsequenceMatcher, createSearch, shortenQuery } from './chunk-4ZPMP47J.js';
 import { createPortal } from 'react-dom';
 import { createContext, useContext, useState, useRef, useId, useMemo, useCallback, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -373,7 +373,7 @@ function PaletteList({ children, empty, heading, ...props }) {
       role: "listbox",
       "aria-label": "Results",
       "data-enigma-palette-list": "",
-      children: palette.rows.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-palette-empty": "", children: palette.query.trim() ? `Nothing matches "${palette.query.trim()}".` : "Type to search." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, "data-enigma-palette-group": "", children: [
+      children: palette.rows.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-palette-empty": "", children: palette.query.trim() ? `Nothing matches "${shortenQuery(palette.query)}".` : "Type to search." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, "data-enigma-palette-group": "", children: [
         heading !== null && (heading?.(group.label) ?? // The group carries the name already, so announcing the
         // heading again would only repeat it.
         /* @__PURE__ */ jsx("p", { "data-enigma-palette-group-label": "", "aria-hidden": "true", children: group.label })),

package/dist/{chunk-R4ZAEE7V.js → chunk-KEVZ5XQV.js}

@@ -25,7 +25,7 @@ function writeValue(input, next) {
   input.dispatchEvent(new Event("input", { bubbles: true }));
 }
 var PasswordExtras = lazy(() => import('./password-3DRQYAYQ.js').then((module) => ({ default: module.PasswordExtras })));
-var SearchExtras = lazy(() => import('./search-UQEXAPQB.js').then((module) => ({ default: module.SearchExtras })));
+var SearchExtras = lazy(() => import('./search-PBZORZ7P.js').then((module) => ({ default: module.SearchExtras })));
 var Input = forwardRef(function Input2(props, forwardedRef) {
   const {
     reveal,

package/dist/chunk-N6PDHMAX.js

@@ -0,0 +1,213 @@
+import { createSelection } from './chunk-WSQC3PCC.js';
+import { useId, useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MARQUEE_SLOP = 4;
+function useSelection(options) {
+  const { items, scrollIntoView = true, ...rest } = options;
+  const id = useId();
+  const listRef = useRef(null);
+  const latest = useRef(options);
+  latest.current = options;
+  const instance = useMemo(() => createSelection({
+    items,
+    getId: (item, index) => (latest.current.getId ?? ((_, position) => String(position)))(item, index),
+    disabled: (item, index) => Boolean(latest.current.disabled?.(item, index)),
+    onCommand: (event) => latest.current.onCommand?.(event),
+    onSelectionChange: (ids, chosen) => latest.current.onSelectionChange?.(ids, chosen)
+    // Built once: rebuilding it would drop the selection and the cursor on every render.
+    // Everything below is pushed in through update().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  const [state, setState] = useState(() => instance.state);
+  useEffect(() => {
+    const unsubscribe = instance.subscribe(setState);
+    setState(instance.state);
+    return () => {
+      unsubscribe();
+      instance.destroy();
+    };
+  }, [instance]);
+  const { multiple, columns, page, shortcuts } = rest;
+  const shortcutSignature = JSON.stringify(shortcuts ?? null);
+  useEffect(() => {
+    instance.update({ items, multiple, columns, page, shortcuts: latest.current.shortcuts });
+  }, [instance, items, multiple, columns, page, shortcutSignature]);
+  const cursor = state.cursor;
+  useEffect(() => {
+    if (!scrollIntoView || cursor < 0) return;
+    const row = listRef.current?.querySelector(`[data-enigma-selection-index="${cursor}"]`);
+    row?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [cursor, scrollIntoView]);
+  const isSelected = useCallback((rowId) => state.selectedSet.has(rowId), [state.selectedSet]);
+  const itemId = useCallback((index) => `${id}-item-${index}`, [id]);
+  const getListProps = useCallback((props = {}) => ({
+    ...props,
+    ref: (node) => {
+      listRef.current = node;
+    },
+    id: `${id}-list`,
+    role: props.role ?? "listbox",
+    "aria-multiselectable": (latest.current.multiple ?? true) || void 0,
+    // A single tab stop, with the arrows moving a cursor INSIDE it: a list of two hundred
+    // rows that are each tabbable is a list nobody can tab past.
+    tabIndex: props.tabIndex ?? 0,
+    "aria-activedescendant": state.cursor >= 0 ? itemId(state.cursor) : void 0,
+    "data-enigma-selection-list": "",
+    "data-selected-count": String(state.count),
+    onKeyDown: (event) => {
+      props.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (instance.keyDown(event)) event.preventDefault();
+    }
+  }), [id, instance, itemId, state.cursor, state.count]);
+  const getItemProps = useCallback((index, props = {}) => {
+    const item = latest.current.items[index];
+    const rowId = item === void 0 ? null : (latest.current.getId ?? ((_, position) => String(position)))(item, index);
+    const disabled = item !== void 0 && Boolean(latest.current.disabled?.(item, index));
+    const chosen = rowId !== null && state.selectedSet.has(rowId);
+    return {
+      ...props,
+      id: itemId(index),
+      role: props.role ?? "option",
+      "aria-selected": chosen,
+      "aria-disabled": disabled || void 0,
+      "data-enigma-selection-item": "",
+      "data-enigma-selection-index": String(index),
+      "data-selected": chosen ? "" : void 0,
+      "data-cursor": state.cursor === index ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onPointerDown: (event) => {
+        props.onPointerDown?.(event);
+        if (event.defaultPrevented || disabled || event.button !== 0) return;
+        instance.click(index, event);
+      },
+      onContextMenu: (event) => {
+        props.onContextMenu?.(event);
+        if (event.defaultPrevented || disabled) return;
+        if (rowId !== null && !state.selectedSet.has(rowId)) instance.click(index);
+      }
+    };
+  }, [instance, itemId, state.selectedSet, state.cursor]);
+  const [marquee, setMarquee] = useState(null);
+  const drag = useRef(null);
+  const getMarqueeProps = useCallback((props = {}) => ({
+    ...props,
+    onPointerDown: (event) => {
+      props.onPointerDown?.(event);
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.target.closest("[data-enigma-selection-item]")) return;
+      drag.current = { x: event.clientX, y: event.clientY, pointer: event.pointerId };
+    }
+  }), []);
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const move = (event) => {
+      const start = drag.current;
+      if (!start || event.pointerId !== start.pointer) return;
+      if (!marquee && Math.abs(event.clientX - start.x) < MARQUEE_SLOP && Math.abs(event.clientY - start.y) < MARQUEE_SLOP) return;
+      if (!marquee) instance.beginMarquee(event.ctrlKey || event.metaKey);
+      const bounds = list.getBoundingClientRect();
+      const left = Math.min(start.x, event.clientX);
+      const top = Math.min(start.y, event.clientY);
+      const rect = {
+        left: left - bounds.left + list.scrollLeft,
+        top: top - bounds.top + list.scrollTop,
+        width: Math.abs(event.clientX - start.x),
+        height: Math.abs(event.clientY - start.y)
+      };
+      setMarquee(rect);
+      const covered = [];
+      for (const row of list.querySelectorAll("[data-enigma-selection-item]")) {
+        const box = row.getBoundingClientRect();
+        const hits = box.right >= Math.min(start.x, event.clientX) && box.left <= Math.max(start.x, event.clientX) && box.bottom >= Math.min(start.y, event.clientY) && box.top <= Math.max(start.y, event.clientY);
+        if (hits) covered.push(Number(row.dataset.enigmaSelectionIndex));
+      }
+      instance.marqueeTo(covered);
+    };
+    const up = () => {
+      if (!drag.current) return;
+      drag.current = null;
+      setMarquee(null);
+      instance.endMarquee();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+  }, [instance, marquee]);
+  return {
+    instance,
+    state,
+    isSelected,
+    getListProps,
+    getItemProps,
+    getMarqueeProps,
+    marquee,
+    ids: { list: `${id}-list` },
+    itemId
+  };
+}
+function SelectionList(props) {
+  const {
+    items,
+    getId,
+    disabled,
+    multiple,
+    columns,
+    page,
+    shortcuts,
+    onCommand,
+    onSelectionChange,
+    scrollIntoView,
+    children,
+    empty,
+    marquee = true,
+    ...rest
+  } = props;
+  const selection = useSelection({
+    items,
+    getId,
+    disabled,
+    multiple,
+    columns,
+    page,
+    shortcuts,
+    onCommand,
+    onSelectionChange,
+    scrollIntoView
+  });
+  const listProps = selection.getListProps(rest);
+  const containerProps = marquee ? selection.getMarqueeProps(listProps) : listProps;
+  return (
+    // `position: relative` is the one style this component sets, and it is not a look: the
+    // rubber band is absolutely positioned inside, and without a positioned ancestor it
+    // would be drawn against the page instead of against the list.
+    /* @__PURE__ */ jsxs("div", { ...containerProps, style: { position: "relative", ...rest.style }, children: [
+      items.length === 0 && empty !== void 0 ? /* @__PURE__ */ jsx("div", { "data-enigma-selection-empty": "", children: empty }) : items.map((item, index) => /* @__PURE__ */ jsx("div", { ...selection.getItemProps(index), children: children({
+        item,
+        index,
+        selected: selection.state.selectedSet.has(getId ? getId(item, index) : String(index)),
+        cursor: selection.state.cursor === index,
+        disabled: Boolean(disabled?.(item, index))
+      }) }, getId ? getId(item, index) : index)),
+      selection.marquee && // The band is drawn, not just computed: without something on screen a drag over
+      // empty space looks like the list selecting rows at random.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-enigma-selection-marquee": "",
+          style: { position: "absolute", pointerEvents: "none", ...selection.marquee }
+        }
+      )
+    ] })
+  );
+}
+
+export { SelectionList, useSelection };

package/dist/chunk-NONGREXC.js

@@ -0,0 +1,248 @@
+import { typeaheadStep } from './chunk-4VUHQFAT.js';
+import { createSearch } from './chunk-4ZPMP47J.js';
+
+// src/core/select.ts
+var SELECT_SEARCH_KEYS = ["label", "description", "group", "keywords"];
+var PAGE = 5;
+function fold(value) {
+  return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
+function toList(value) {
+  if (value == null) return [];
+  const list = Array.isArray(value) ? [...value] : [value];
+  return list.filter((entry) => entry !== "");
+}
+function sameValues(left, right) {
+  return left.length === right.length && left.every((entry, index) => entry === right[index]);
+}
+function sameRows(left, right) {
+  return left.length === right.length && left.every((option, index) => option === right[index]);
+}
+function sameState(left, right) {
+  return left.open === right.open && left.query === right.query && left.active === right.active && left.multiple === right.multiple && left.empty === right.empty && sameValues(left.value, right.value) && sameRows(left.visible, right.visible) && sameRows(left.selected, right.selected);
+}
+function createSelect(options = {}) {
+  let opts = { ...options };
+  let all = opts.options ?? [];
+  let value = toList(opts.value);
+  let open = false;
+  let query = "";
+  let active = -1;
+  let visible = [...all];
+  let typed = "";
+  let typedAt = 0;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const engine = createSearch({
+    items: all,
+    keys: opts.searchKeys ?? SELECT_SEARCH_KEYS,
+    fuse: opts.fuse,
+    fuseOptions: opts.fuseOptions,
+    matcher: opts.matcher,
+    // A select filters as you type. There is nothing to debounce: the data is already
+    // in memory, and a delay here is felt as the list lagging behind the field.
+    debounce: 0,
+    // An empty query in a select means "everything", not "nothing" - the opposite of a
+    // search field, where an empty query has nothing to show.
+    empty: "all"
+  });
+  function optionOf(candidate) {
+    return all.find((option) => option.value === candidate);
+  }
+  function selectedOptions() {
+    return value.map(optionOf).filter((option) => Boolean(option));
+  }
+  function snapshot() {
+    return {
+      open,
+      query,
+      active,
+      visible,
+      selected: selectedOptions(),
+      value: [...value],
+      multiple: Boolean(opts.multiple),
+      empty: visible.length === 0
+    };
+  }
+  function emit() {
+    const state = snapshot();
+    opts.onChange?.(state);
+    for (const listener of listeners) listener(state);
+  }
+  function wrap(index) {
+    const length = visible.length;
+    return (index % length + length) % length;
+  }
+  function enabledIndex(from, step) {
+    if (visible.length === 0) return -1;
+    for (let attempt = 0; attempt < visible.length; attempt++) {
+      const index = wrap(from + step * attempt);
+      if (!visible[index]?.disabled) return index;
+    }
+    return -1;
+  }
+  let lastActive;
+  function refilter() {
+    visible = opts.searchable && query.trim() ? engine.searchNow(query).map((match) => match.item) : [...all];
+    const current = active >= 0 ? visible.findIndex((option) => option === lastActive) : -1;
+    active = current >= 0 && !visible[current]?.disabled ? current : enabledIndex(0, 1);
+    lastActive = visible[active];
+  }
+  function reportValue() {
+    const chosen = selectedOptions();
+    opts.onValueChange?.(opts.multiple ? [...value] : value[0] ?? "", chosen);
+  }
+  function closesOnSelect() {
+    return opts.closeOnSelect ?? !opts.multiple;
+  }
+  refilter();
+  return {
+    get state() {
+      return snapshot();
+    },
+    setOpen(next) {
+      if (destroyed || open === next) return;
+      open = next;
+      if (open) {
+        query = "";
+        refilter();
+        const chosen = value[0] ? visible.findIndex((option) => option.value === value[0]) : -1;
+        active = chosen >= 0 && !visible[chosen]?.disabled ? chosen : enabledIndex(0, 1);
+        lastActive = visible[active];
+      } else {
+        query = "";
+        typed = "";
+        refilter();
+      }
+      emit();
+    },
+    toggleOpen() {
+      this.setOpen(!open);
+    },
+    setQuery(next) {
+      if (destroyed) return;
+      query = next;
+      refilter();
+      emit();
+    },
+    move(key) {
+      if (destroyed || visible.length === 0) return;
+      const from = active < 0 ? -1 : active;
+      switch (key) {
+        // Wrapping, because a select is a short list and the row after the last one
+        // is the first: clamping leaves the arrow key doing nothing, which reads as
+        // the panel having frozen.
+        case "ArrowDown":
+          active = enabledIndex(from + 1, 1);
+          break;
+        case "ArrowUp":
+          active = enabledIndex(from - 1 + visible.length, -1);
+          break;
+        case "Home":
+          active = enabledIndex(0, 1);
+          break;
+        case "End":
+          active = enabledIndex(visible.length - 1, -1);
+          break;
+        case "PageDown":
+          active = enabledIndex(Math.min(visible.length - 1, from + PAGE), 1);
+          break;
+        case "PageUp":
+          active = enabledIndex(Math.max(0, from - PAGE), -1);
+          break;
+      }
+      lastActive = visible[active];
+      emit();
+    },
+    setActive(index) {
+      if (destroyed || index === active || index < 0 || index >= visible.length || visible[index]?.disabled) return;
+      active = index;
+      lastActive = visible[active];
+      emit();
+    },
+    select(next) {
+      if (destroyed) return;
+      const option = optionOf(next);
+      if (!option || option.disabled) return;
+      if (opts.multiple) {
+        value = value.includes(next) ? value.filter((entry) => entry !== next) : [...value, next];
+      } else {
+        value = [next];
+      }
+      reportValue();
+      if (closesOnSelect()) {
+        open = false;
+        query = "";
+        refilter();
+      }
+      emit();
+    },
+    selectActive() {
+      const option = visible[active];
+      if (option) this.select(option.value);
+    },
+    remove(next) {
+      if (destroyed || !value.includes(next)) return;
+      value = value.filter((entry) => entry !== next);
+      reportValue();
+      emit();
+    },
+    clear() {
+      if (destroyed || value.length === 0) return;
+      value = [];
+      reportValue();
+      emit();
+    },
+    typeahead(character) {
+      if (destroyed || character.length !== 1) return;
+      const step = typeaheadStep({ typed, at: typedAt }, character);
+      typed = step.typed;
+      typedAt = step.at;
+      const needle = fold(step.needle);
+      const from = step.cycle ? 1 : 0;
+      for (let step2 = from; step2 < visible.length + from; step2++) {
+        const index = wrap(Math.max(active, 0) + step2);
+        const option = visible[index];
+        if (!option || option.disabled) continue;
+        if (fold(option.label).startsWith(needle)) {
+          active = index;
+          lastActive = option;
+          emit();
+          return;
+        }
+      }
+    },
+    update(next) {
+      if (destroyed) return;
+      const before = snapshot();
+      const hadOptions = next.options !== void 0;
+      opts = { ...opts, ...next };
+      if (hadOptions) all = next.options ?? [];
+      if (next.value !== void 0) value = toList(next.value);
+      if (hadOptions || next.searchKeys || next.fuse || next.fuseOptions || next.matcher) {
+        engine.update({
+          items: all,
+          keys: opts.searchKeys ?? SELECT_SEARCH_KEYS,
+          fuse: opts.fuse,
+          fuseOptions: opts.fuseOptions,
+          matcher: opts.matcher
+        });
+      }
+      refilter();
+      if (!sameState(before, snapshot())) emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    destroy() {
+      destroyed = true;
+      listeners.clear();
+      engine.destroy();
+    }
+  };
+}
+
+export { SELECT_SEARCH_KEYS, createSelect };