@kouji-ui/core 0.9.1 → 0.10.0

package/fesm2022/kouji-ui-core.mjs

@@ -1974,6 +1974,21 @@ function longestRunMs(durations, delays) {
 }
 /** The strategy slots of a bundle, in attach order. */
 const STRATEGY_SLOTS = ['mount', 'position', 'backdrop', 'scrollLock', 'focusTrap', 'liveAnnouncer', 'trigger'];
+/**
+ * The controller each attached strategy instance serves. A strategy is
+ * stateful (it holds one overlay's context and its inert / scroll-lock
+ * release handles), so one instance must never run two overlays at once.
+ */
+const strategyOwners = new WeakMap();
+/**
+ * @internal The controller `strategy` is attached to, if any. `KjOverlayPanel`
+ * uses it to drop strategies it inherited from an enclosing overlay (a
+ * select inside a modal dialog must not run the dialog's scrim, inert and
+ * focus trap as its own).
+ */
+function overlayStrategyOwner(strategy) {
+    return strategyOwners.get(strategy);
+}
 /**
  * Owns the overlay's open/closed state machine plus the rAF/transition
  * orchestration. Strategies (mount/position/backdrop/focus-trap/scroll-lock/
@@ -2125,13 +2140,21 @@ class KjOverlayController {
             }
             for (const slot of STRATEGY_SLOTS) {
                 const old = prev[slot];
-                if (old && old !== next[slot])
+                if (old && old !== next[slot]) {
                     old.detach();
+                    if (strategyOwners.get(old) === this)
+                        strategyOwners.delete(old);
+                }
             }
         }
         this.strategies = next;
-        for (const slot of STRATEGY_SLOTS)
-            next[slot]?.attach(this.context);
+        for (const slot of STRATEGY_SLOTS) {
+            const strategy = next[slot];
+            if (!strategy)
+                continue;
+            strategyOwners.set(strategy, this);
+            strategy.attach(this.context);
+        }
     }
     open() {
         const cur = this._state();
@@ -2198,7 +2221,12 @@ class KjOverlayController {
             return;
         const s = this.strategies;
         for (const slot of [...STRATEGY_SLOTS].reverse()) {
-            s[slot]?.detach();
+            const strategy = s[slot];
+            if (!strategy)
+                continue;
+            strategy.detach();
+            if (strategyOwners.get(strategy) === this)
+                strategyOwners.delete(strategy);
         }
         this.strategies = null;
     }
@@ -2911,6 +2939,36 @@ function resolveTokens(self) {
         role: inject(KJ_OVERLAY_PANEL_ROLE, opts),
     };
 }
+/**
+ * `tokens` minus every strategy already attached to a controller other than
+ * `controller`. Strategies are resolved through the injector chain, so an
+ * overlay rendered inside another one (a select, combobox or date picker in
+ * a service-launched dialog) would otherwise find the enclosing overlay's
+ * own instances for every slot it does not provide itself — and run the
+ * dialog's scrim, `inert` and focus trap as if the dropdown were a second
+ * modal, freezing the dialog it belongs to. Those instances belong to the
+ * enclosing overlay; the nested one falls back to "none" for that slot.
+ */
+function withoutForeign(tokens, controller) {
+    if (!controller)
+        return tokens;
+    const mine = (s) => {
+        if (!s)
+            return s;
+        const owner = overlayStrategyOwner(s);
+        return owner && owner !== controller ? null : s;
+    };
+    return {
+        ...tokens,
+        mount: mine(tokens.mount),
+        position: mine(tokens.position),
+        backdrop: mine(tokens.backdrop),
+        focusTrap: mine(tokens.focusTrap),
+        scrollLock: mine(tokens.scrollLock),
+        liveAnnouncer: mine(tokens.liveAnnouncer),
+        trigger: mine(tokens.trigger),
+    };
+}
 /**
  * Marks an element as the overlay's panel — wires it to the controller,
  * resolves the panel role/aria-modal, and binds DOM state attributes
@@ -2925,7 +2983,10 @@ function resolveTokens(self) {
  * must not inherit the dialog's scroll lock, scrim or `alertdialog` role.
  * A panel whose controller is on its host chain (a builder-launched body,
  * or the root pattern where one directive provides controller and
- * strategies for the whole subtree) reads them from that chain as before.
+ * strategies for the whole subtree) reads them from that chain, minus any
+ * strategy instance an enclosing overlay is already running: a select inside
+ * a service-launched dialog finds the dialog's scrim, focus trap and scroll
+ * lock up the chain, and must not adopt them.
  *
  * A portalled panel whose scope provides a backdrop strategy also gets a
  * real `<kj-backdrop>` scrim (created next to the panel, moved into the
@@ -2980,8 +3041,11 @@ class KjOverlayPanel {
         return !!t && t.controller !== this.hostController;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scoped" }] : /* istanbul ignore next */ []));
-    /** The tokens that apply to this panel. */
-    tokens = computed(() => (this.scoped() ? this.own : this.inherited), /* @ts-ignore */
+    /**
+     * The tokens that apply to this panel. Inherited ones exclude strategies an
+     * enclosing overlay already runs (see {@link withoutForeign}).
+     */
+    tokens = computed(() => this.scoped() ? this.own : withoutForeign(this.inherited, this.hostController), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
     role = computed(() => this.tokens().role ?? 'dialog', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
@@ -22092,6 +22156,54 @@ class KjTable {
     setRowCount(n) {
         this._rowCount.set(n);
     }
+    /**
+     * Server-side infinite mode. When on, `kjTableData` is index-aligned with
+     * the server's result set and may hold holes (`undefined` / `null`) for
+     * rows that are not loaded yet: the holes are dropped before the rows reach
+     * TanStack, and {@link sourceIndex} maps each loaded row back to its
+     * position in the full result set. Sorting, filtering and pagination are
+     * left to the server (TanStack's `manual*` flags), so a header click only
+     * changes `state.sorting()` — feed it into your loader's request.
+     */
+    _infinite = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_infinite" }] : /* istanbul ignore next */ []));
+    /** Whether server-side infinite mode is on — see {@link setInfinite}. */
+    infinite = this._infinite.asReadonly();
+    /**
+     * Turn server-side infinite mode on or off.
+     * @param on `true` while the data is a sparse window of a server result set.
+     */
+    setInfinite(on) {
+        this._infinite.set(on);
+    }
+    /** Rows handed to TanStack plus, in infinite mode, their positions in the full result set. */
+    compacted = computed(() => {
+        const data = this.kjTableData();
+        if (!this._infinite())
+            return { rows: data, sourceIndex: null };
+        const rows = [];
+        const sourceIndex = [];
+        // `forEach` skips true holes, so a `new Array(total)` window costs only
+        // its loaded entries.
+        data.forEach((row, i) => {
+            if (row == null)
+                return;
+            rows.push(row);
+            sourceIndex.push(i);
+        });
+        return { rows, sourceIndex };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compacted" }] : /* istanbul ignore next */ []));
+    /**
+     * In infinite mode, the result-set position of each loaded top-level row,
+     * indexed by its TanStack `row.index`; `null` otherwise.
+     */
+    sourceIndex = computed(() => this.compacted().sourceIndex, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceIndex" }] : /* istanbul ignore next */ []));
+    /** Position of a top-level row in the full result set (its `row.index` outside infinite mode). */
+    sourceIndexOf(index) {
+        return this.compacted().sourceIndex?.[index] ?? index;
+    }
     /**
      * Apply a TanStack updater (value or function) to a single state slice.
      *
@@ -22134,11 +22246,15 @@ class KjTable {
     ...(ngDevMode ? [{ debugName: "boundColumns" }] : /* istanbul ignore next */ []));
     /** The TanStack table instance. Access rows, headers, and state here. */
     table = createAngularTable(() => ({
-        data: this.kjTableData(),
+        data: this.compacted().rows,
         columns: this.boundColumns(),
+        // In infinite mode a top-level row's index is its result-set position,
+        // so default ids stay stable while pages load around them.
         getRowId: this.kjGetRowId()
-            ? (row, index) => this.kjGetRowId()(row, index)
-            : undefined,
+            ? (row, index, parent) => this.kjGetRowId()(row, parent ? index : this.sourceIndexOf(index))
+            : this._infinite()
+                ? (_row, index, parent) => (parent ? `${parent.id}.${index}` : String(this.sourceIndexOf(index)))
+                : undefined,
         // `columnResizeMode: 'onEnd'` defers the actual column width write until
         // the user releases the resize handle. While dragging, the wrapper reads
         // `state.columnSizingInfo().deltaOffset` to render a vertical preview
@@ -22148,7 +22264,9 @@ class KjTable {
         // TanStack to manual pagination so the loader-page becomes the
         // visible page (no client-side slicing) and pagination controls
         // derive their totals from the remote count.
-        manualPagination: this._rowCount() !== null,
+        manualPagination: this._rowCount() !== null || this._infinite(),
+        manualSorting: this._infinite(),
+        manualFiltering: this._infinite(),
         rowCount: this._rowCount() ?? undefined,
         state: { ...this._state(), columnSizingInfo: this._columnSizingInfo() },
         onSortingChange: u => this.patch('sorting', u),
@@ -22450,7 +22568,12 @@ class KjTableRow {
     ...(ngDevMode ? [{ debugName: "kjRow" }] : /* istanbul ignore next */ []));
     table = injectParent(KJ_TABLE, { child: 'KjTableRow', parent: '[kjTable]' });
     /** 1-based ARIA index — accounts for header row(s). */
-    ariaRowIndex = computed(() => this.kjRow().index + 2, /* @ts-ignore */
+    ariaRowIndex = computed(() => {
+        const row = this.kjRow();
+        // Infinite mode: the row's place in the whole result set, not in the loaded window.
+        const source = row.depth === 0 ? this.table.sourceIndex()?.[row.index] : undefined;
+        return (source ?? row.index) + 2;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
     isSelectable = computed(() => Object.keys(this.table.state.rowSelection()).length >= 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSelectable" }] : /* istanbul ignore next */ [])); // always true if selection enabled