@kouji-ui/core 0.10.0 → 0.11.1

package/fesm2022/kouji-ui-core.mjs

@@ -8807,6 +8807,10 @@ function bindPresets(configToken) {
             provide: KJ_VARIANT_PRESET,
             useFactory: () => {
                 const c = inject(configToken);
+                // A config without a variant list (e.g. one that only sizes) keeps the
+                // enclosing preset, so it never hands descendants `values: undefined`.
+                if (!c.variants)
+                    return inject(KJ_VARIANT_PRESET, { skipSelf: true });
                 return { values: c.variants, default: c.defaults.variant };
             },
         },
@@ -8814,6 +8818,10 @@ function bindPresets(configToken) {
             provide: KJ_SIZE_PRESET,
             useFactory: () => {
                 const c = inject(configToken);
+                // Same for sizes: `KjTabs` binds a variant-only config, and a `KjSize`
+                // descendant (a `kj-kbd` in a tab panel) must see the enclosing preset.
+                if (!c.sizes)
+                    return inject(KJ_SIZE_PRESET, { skipSelf: true });
                 return { values: c.sizes, default: c.defaults.size };
             },
         },
@@ -22122,6 +22130,26 @@ class KjTable {
      */
     kjGetRowId = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjGetRowId" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree rows: returns a row's children (TanStack `getSubRows`). Children are
+     * real table rows with the same columns, shown under their parent while it
+     * is expanded. `undefined` (default) keeps the table flat.
+     */
+    kjGetSubRows = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjGetSubRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree rows: whether selecting a parent also selects its children
+     * (TanStack `enableSubRowSelection`). Defaults to `false` — every row is
+     * selected on its own.
+     */
+    kjSelectSubRows = input(false, { ...(ngDevMode ? { debugName: "kjSelectSubRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Tree rows: whether parents start expanded. Applies to every parent with
+     * no explicit expanded state — on first render, to rows loaded later, and
+     * again after {@link resetExpansion} (an infinite table's request change).
+     * Defaults to `false`.
+     */
+    kjDefaultExpanded = input(false, { ...(ngDevMode ? { debugName: "kjDefaultExpanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _state = signal(DEFAULT_STATE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
     /**
@@ -22176,6 +22204,37 @@ class KjTable {
     setInfinite(on) {
         this._infinite.set(on);
     }
+    /**
+     * Whether a tree parent with no explicit entry in `state.expanded` is open.
+     * Starts at `kjDefaultExpanded`; {@link expandAll} / {@link collapseAll}
+     * flip it so rows loaded later follow the last bulk action.
+     */
+    _expandDefault = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandDefault" }] : /* istanbul ignore next */ []));
+    /**
+     * `state.expanded` as TanStack sees it. Open-by-default with no exceptions
+     * is handed over as `true`: TanStack skips expansion altogether for an
+     * empty record, and `getIsRowExpanded` still keeps leaf rows closed.
+     */
+    tanstackExpanded = computed(() => {
+        const expanded = this._state().expanded;
+        if (expanded === true)
+            return true;
+        if (this._expandDefault() && Object.keys(expanded).length === 0)
+            return true;
+        return expanded;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tanstackExpanded" }] : /* istanbul ignore next */ []));
+    /** Whether a row is expanded: its explicit state, else the tree default for parents. */
+    isRowExpanded(row) {
+        const expanded = this._state().expanded;
+        if (expanded === true)
+            return true;
+        const own = expanded[row.id];
+        if (own !== undefined)
+            return own;
+        return this._expandDefault() && (row.subRows?.length ?? 0) > 0;
+    }
     /** Rows handed to TanStack plus, in infinite mode, their positions in the full result set. */
     compacted = computed(() => {
         const data = this.kjTableData();
@@ -22268,7 +22327,17 @@ class KjTable {
         manualSorting: this._infinite(),
         manualFiltering: this._infinite(),
         rowCount: this._rowCount() ?? undefined,
-        state: { ...this._state(), columnSizingInfo: this._columnSizingInfo() },
+        getSubRows: this.kjGetSubRows(),
+        getIsRowExpanded: row => this.isRowExpanded(row),
+        enableSubRowSelection: this.kjSelectSubRows(),
+        // Expansion is reset by the directive itself (see the constructor): an
+        // infinite table's page loads must not wipe it.
+        autoResetExpanded: false,
+        state: {
+            ...this._state(),
+            expanded: this.tanstackExpanded(),
+            columnSizingInfo: this._columnSizingInfo(),
+        },
         onSortingChange: u => this.patch('sorting', u),
         onColumnFiltersChange: u => this.patch('columnFilters', u),
         onGlobalFilterChange: u => this.patch('globalFilter', u),
@@ -22293,6 +22362,91 @@ class KjTable {
         enableRowSelection: true,
         enableMultiRowSelection: true,
     }));
+    constructor() {
+        // New rows reset the expansion to `kjDefaultExpanded` (TanStack's own
+        // auto-reset, kept), except in infinite mode where data changes are page
+        // loads — the infinite wrapper calls `resetExpansion()` on a real reset.
+        let seeded = false;
+        effect(() => {
+            this.kjTableData();
+            if (!seeded) {
+                seeded = true;
+                return;
+            }
+            untracked(() => {
+                if (!this._infinite())
+                    this.resetExpansion();
+            });
+        });
+        // A new `kjDefaultExpanded` restarts the tree from that default.
+        effect(() => {
+            const open = this.kjDefaultExpanded();
+            untracked(() => {
+                if (this._expandDefault() === open)
+                    return;
+                this._expandDefault.set(open);
+                this.patch('expanded', {});
+            });
+        });
+    }
+    // ── Tree rows ───────────────────────────────────────────────────────────
+    /**
+     * Whether every loaded parent row is expanded (`false` when no row has
+     * children). Rows of an infinite table that are not loaded yet do not count.
+     */
+    isAllExpanded = computed(() => {
+        this._state();
+        this._expandDefault();
+        let parents = 0;
+        for (const row of this.table().getCoreRowModel().flatRows) {
+            if (!row.subRows?.length)
+                continue;
+            parents++;
+            if (!this.isRowExpanded(row))
+                return false;
+        }
+        return parents > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllExpanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a row is expanded — its own choice, else `kjDefaultExpanded`
+     * (or the last expand-all / collapse-all) for parents.
+     * @param row The row.
+     */
+    getRowExpanded(row) {
+        return this.isRowExpanded(row);
+    }
+    /**
+     * Expand or collapse one row. Unlike TanStack's `row.toggleExpanded()`, the
+     * choice is stored explicitly, so it holds against `kjDefaultExpanded`.
+     * @param row The row.
+     * @param expanded The new state; omitted, the current one flips.
+     * @returns The row's new expanded state.
+     */
+    setRowExpanded(row, expanded) {
+        const next = expanded ?? !this.isRowExpanded(row);
+        const prev = this._state().expanded;
+        // `true` ("every row") becomes "open by default" plus this exception.
+        if (prev === true)
+            this._expandDefault.set(true);
+        this.patch('expanded', { ...(prev === true ? {} : prev), [row.id]: next });
+        return next;
+    }
+    /** Expand every parent row, including the ones loaded later. */
+    expandAll() {
+        this._expandDefault.set(true);
+        this.patch('expanded', {});
+    }
+    /** Collapse every parent row, including the ones loaded later. */
+    collapseAll() {
+        this._expandDefault.set(false);
+        this.patch('expanded', {});
+    }
+    /** Forget per-row expansion and go back to `kjDefaultExpanded` — e.g. when the rows are replaced. */
+    resetExpansion() {
+        this._expandDefault.set(untracked(this.kjDefaultExpanded));
+        this.patch('expanded', {});
+    }
     /** Merge a partial state. Unspecified slices are left untouched. */
     setState(partial) {
         this._state.update(s => ({ ...s, ...partial }));
@@ -22327,7 +22481,7 @@ class KjTable {
      */
     get columnApi() { return this.buildApi().columnApi; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTable, isStandalone: true, selector: "[kjTable]", inputs: { kjTable: { classPropertyName: "kjTable", publicName: "kjTable", isSignal: true, isRequired: true, transformFunction: null }, kjTableData: { classPropertyName: "kjTableData", publicName: "kjTableData", isSignal: true, isRequired: false, transformFunction: null }, kjGetRowId: { classPropertyName: "kjGetRowId", publicName: "kjGetRowId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjTableData: "kjTableDataChange" }, providers: [{ provide: KJ_TABLE, useExisting: KjTable }], exportAs: ["kjTable"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTable, isStandalone: true, selector: "[kjTable]", inputs: { kjTable: { classPropertyName: "kjTable", publicName: "kjTable", isSignal: true, isRequired: true, transformFunction: null }, kjTableData: { classPropertyName: "kjTableData", publicName: "kjTableData", isSignal: true, isRequired: false, transformFunction: null }, kjGetRowId: { classPropertyName: "kjGetRowId", publicName: "kjGetRowId", isSignal: true, isRequired: false, transformFunction: null }, kjGetSubRows: { classPropertyName: "kjGetSubRows", publicName: "kjGetSubRows", isSignal: true, isRequired: false, transformFunction: null }, kjSelectSubRows: { classPropertyName: "kjSelectSubRows", publicName: "kjSelectSubRows", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultExpanded: { classPropertyName: "kjDefaultExpanded", publicName: "kjDefaultExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjTableData: "kjTableDataChange" }, providers: [{ provide: KJ_TABLE, useExisting: KjTable }], exportAs: ["kjTable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTable, decorators: [{
             type: Directive,
@@ -22337,7 +22491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     exportAs: 'kjTable',
                     providers: [{ provide: KJ_TABLE, useExisting: KjTable }],
                 }]
-        }], propDecorators: { kjTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTable", required: true }] }], kjTableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTableData", required: false }] }, { type: i0.Output, args: ["kjTableDataChange"] }], kjGetRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetRowId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTable", required: true }] }], kjTableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTableData", required: false }] }, { type: i0.Output, args: ["kjTableDataChange"] }], kjGetRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetRowId", required: false }] }], kjGetSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjGetSubRows", required: false }] }], kjSelectSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectSubRows", required: false }] }], kjDefaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDefaultExpanded", required: false }] }] } });
 /** Angular's NG0950 — a required input read before its first binding. */
 function isUnsetRequiredInput(error) {
     return typeof error === 'object' && error !== null && error.code === -950;
@@ -22566,9 +22720,19 @@ class KjTableRow {
     /** TanStack row instance — pass from getRowModel().rows. */
     kjRow = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjRow" }] : /* istanbul ignore next */ []));
+    /**
+     * Overrides the 1-based `aria-rowindex` — for rows whose place in the grid
+     * is not their `row.index`, like the children of a tree row. `null`
+     * (default) derives it from the row.
+     */
+    kjAriaRowIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaRowIndex" }] : /* istanbul ignore next */ []));
     table = injectParent(KJ_TABLE, { child: 'KjTableRow', parent: '[kjTable]' });
     /** 1-based ARIA index — accounts for header row(s). */
     ariaRowIndex = computed(() => {
+        const override = this.kjAriaRowIndex();
+        if (override != null)
+            return override;
         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;
@@ -22584,7 +22748,7 @@ class KjTableRow {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTableRow, isStandalone: true, selector: "[kjTableRow]", inputs: { kjRow: { classPropertyName: "kjRow", publicName: "kjRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "ariaRowIndex()", "attr.aria-selected": "isSelectable() ? isSelected() : null", "attr.data-selected": "isSelected() ? \"\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTableRow, isStandalone: true, selector: "[kjTableRow]", inputs: { kjRow: { classPropertyName: "kjRow", publicName: "kjRow", isSignal: true, isRequired: true, transformFunction: null }, kjAriaRowIndex: { classPropertyName: "kjAriaRowIndex", publicName: "kjAriaRowIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "ariaRowIndex()", "attr.aria-selected": "isSelectable() ? isSelected() : null", "attr.data-selected": "isSelected() ? \"\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableRow, decorators: [{
             type: Directive,
@@ -22598,7 +22762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.data-selected]': 'isSelected() ? "" : null',
                     },
                 }]
-        }], propDecorators: { kjRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRow", required: true }] }] } });
+        }], propDecorators: { kjRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRow", required: true }] }], kjAriaRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaRowIndex", required: false }] }] } });
 
 /** Context token provided by `KjTableKeyboardNav` and injected by `KjTableCell`. */
 const KJ_TABLE_KEYBOARD_NAV = new InjectionToken('KjTableKeyboardNav');