simple-table-core 3.4.2 → 3.5.2

package/dist/src/core/SimpleTableVanilla.d.ts

@@ -54,6 +54,26 @@ export declare class SimpleTableVanilla {
     private scrollEndTimeoutId;
     private lastScrollTop;
     private isUpdating;
+    /**
+     * Active accordion axis for the next render. Set by row/column collapse-
+     * expand mutators (see {@link beginAccordionAnimation}) and consumed by the
+     * cell renderers via the render context. Cleared in {@link render} after
+     * each render so subsequent non-accordion renders (sort, scroll, etc.)
+     * don't re-trigger the size transitions.
+     */
+    private pendingAccordionAxis;
+    /** Pending timeout id used to remove the accordion CSS class. */
+    private accordionCleanupTimerId;
+    /**
+     * Visible-leaf-headers key as of the last render that committed to the DOM.
+     * Used by `setHeaders` to detect hide/show/pin/unpin and trigger the
+     * accordion-horizontal animation. Comparing against `this.headers` directly
+     * doesn't work because the column editor mutates header objects in place
+     * (e.g. `header.hide = true`) BEFORE invoking setHeaders, so by the time
+     * setHeaders runs, the prev and next trees already point to the same
+     * mutated header instances.
+     */
+    private lastRenderedVisibilityKey;
     constructor(container: HTMLElement, config: SimpleTableConfig);
     private applyAnimationsConfig;
     private rebuildRowIndexMap;
@@ -79,7 +99,42 @@ export declare class SimpleTableVanilla {
      * displaced columns slide smoothly out of the dragged column's way rather
      * than snapping into place.
      */
+    /**
+     * Build a key summarizing the leaf columns that will paint (accessor +
+     * pinned section). Hidden leaves and excluded subtrees drop out; nested
+     * children are flattened so a parent collapse/expand counts as a
+     * visibility change at the leaf level too.
+     */
+    private buildVisibilityKey;
+    /**
+     * True when the visible-leaf-set (or its pinned-section assignment) for
+     * `nextHeaders` differs from the last render that committed to the DOM.
+     *
+     * We deliberately compare against {@link lastRenderedVisibilityKey} rather
+     * than `this.headers`: the column editor mutates header objects in place
+     * before invoking setHeaders (e.g. `header.hide = true`, then
+     * `setHeaders(deepClone(headers))`), and `this.headers` shares those
+     * mutated references — so a prev-vs-next compare always reads the same
+     * state and reports no change. Comparing to the last-rendered key sees
+     * the user's actually-painted state and correctly detects hide/show and
+     * pin/unpin changes.
+     */
+    private didColumnVisibilityChange;
     private captureAnimationSnapshot;
+    /**
+     * Open the accordion animation window for the next render: capture a FLIP
+     * snapshot, mark the active axis so cell renderers initialize incoming
+     * cells at zero size, and add the CSS class that enables the size
+     * transitions on `.st-cell` / `.st-header-cell`.
+     *
+     * The CSS class is removed after `duration + ACCORDION_CLEANUP_BUFFER_MS`
+     * so non-accordion renders don't keep transitioning size on subsequent
+     * inline-style writes.
+     *
+     * No-op when animations are disabled (which already includes the
+     * prefers-reduced-motion check via {@link AnimationCoordinator.isEnabled}).
+     */
+    private beginAccordionAnimation;
     private initializeManagers;
     mount(): void;
     private setupManagers;

package/dist/src/core/rendering/RenderOrchestrator.d.ts

@@ -11,10 +11,19 @@ import { FilterManager } from "../../managers/FilterManager";
 import { SelectionManager } from "../../managers/SelectionManager";
 import { RowSelectionManager } from "../../managers/RowSelectionManager";
 import type { AnimationCoordinator, CellPosition } from "../../managers/AnimationCoordinator";
+import type { AccordionAxis } from "../../utils/accordionAnimation";
 import { FlattenRowsResult } from "../../utils/rowFlattening";
 import { ProcessRowsResult } from "../../utils/rowProcessing";
 import { MergedColumnEditorConfig, ResolvedIcons } from "../initialization/TableInitializer";
 export interface RenderContext {
+    /**
+     * Active accordion animation axis for this render. Set on row-grouping or
+     * nested-column collapse/expand toggles (see
+     * {@link SimpleTableVanilla.beginAccordionAnimation}). Cell renderers use it
+     * to initialize incoming cells at zero size in the named axis so the CSS
+     * size transition can grow them while sibling cells FLIP into place.
+     */
+    accordionAxis?: AccordionAxis;
     animationCoordinator?: AnimationCoordinator;
     cellRegistry: Map<string, any>;
     collapsedHeaders: Set<Accessor>;

package/dist/src/core/rendering/TableRenderer.d.ts

@@ -8,7 +8,10 @@ import { FilterManager } from "../../managers/FilterManager";
 import { SelectionManager } from "../../managers/SelectionManager";
 import { RowSelectionManager } from "../../managers/RowSelectionManager";
 import type { AnimationCoordinator, CellPosition } from "../../managers/AnimationCoordinator";
+import type { AccordionAxis } from "../../utils/accordionAnimation";
 export interface TableRendererDeps {
+    /** Accordion animation axis for the in-flight collapse/expand. See {@link RenderContext.accordionAxis}. */
+    accordionAxis?: AccordionAxis;
     animationCoordinator?: AnimationCoordinator;
     cellRegistry: Map<string, any>;
     collapsedHeaders: Set<Accessor>;
@@ -56,7 +59,7 @@ export interface TableRendererDeps {
     pinnedRightRef: {
         current: HTMLDivElement | null;
     };
-    positionOnlyBody?: boolean; /** When true, body sections use position-only updates for existing cells (scroll performance). */
+    positionOnlyBody?: boolean; /** When true, scroll path updates cell geometry only (no full content/selection refresh); row separators still sync. */
     resolvedIcons: any;
     rowSelectionManager: RowSelectionManager | null;
     rowStateMap: Map<string | number, any>;

package/dist/src/managers/AnimationCoordinator.d.ts

@@ -33,6 +33,14 @@ export declare class AnimationCoordinator {
     private easing;
     /** Pre-change positions for any cell we want to consider for animation. */
     private snapshot;
+    /**
+     * One-shot synthetic origins for incoming cells that have no entry in the
+     * captured snapshot (e.g. rows/columns that did not exist in the pre-render
+     * state because they were inside a collapsed group). Used by accordion
+     * animations so a newly-visible cell unfolds from its parent's position
+     * rather than appearing in place. Cleared at the end of {@link play}.
+     */
+    private incomingOrigins;
     private inFlight;
     /** Outgoing cells the renderer handed off; keyed per container so play() finds them. */
     private retainedCells;
@@ -55,6 +63,19 @@ export declare class AnimationCoordinator {
     setEasing(easing: string): void;
     isEnabled(): boolean;
     isInFlight(cellId: string): boolean;
+    getDuration(): number;
+    getEasing(): string;
+    /**
+     * Register synthetic pre-change origins for incoming cells that did not
+     * exist in the captured snapshot. {@link play} consults this map before
+     * giving up on a cell that has no `before` snapshot entry; matching cells
+     * FLIP from the override origin to their final position.
+     *
+     * The map is consumed by the next `play()` call and cleared, so callers
+     * must set it after `captureSnapshot` and before the render that creates
+     * the corresponding cells.
+     */
+    setIncomingOrigins(origins: Map<string, CellPosition> | null): void;
     /**
      * Read scroller layout metrics for `container`, caching the result for the
      * remainder of the current render cycle. Subsequent calls in the same
@@ -82,6 +103,27 @@ export declare class AnimationCoordinator {
      * keep it for an out-animation.
      */
     shouldRetain(cellId: string): boolean;
+    /**
+     * Whether the captured snapshot has an entry for the given cellId. The
+     * accordion expand path uses this to detect "newly visible" cells (no
+     * pre-change layout) so it can initialize them at zero size and let the
+     * CSS transition grow them to full size.
+     */
+    hasSnapshotEntry(cellId: string): boolean;
+    /**
+     * True when the snapshot has an entry for `cellId` AND the cell was
+     * rendered in `currentContainer` at snapshot time. Returns false when the
+     * cell came from a different container (cross-section pin/unpin) — its
+     * snapshot position is in another container's coordinate frame, so a
+     * FLIP applied locally would slide from a wrong visual origin and the
+     * destination renderer should treat the cell as fresh (accordion grow
+     * from 0 instead).
+     *
+     * Snapshot entries with `sourceContainer === null` (preLayouts /
+     * conceptual positions) are treated as same-container so the existing
+     * sort/reorder FLIP-from-off-screen behavior is preserved.
+     */
+    hasSnapshotEntryInContainer(cellId: string, currentContainer: HTMLElement): boolean;
     /**
      * Hand a cell that the renderer would otherwise remove to the coordinator.
      * The coordinator updates its absolute positioning to the post-change layout
@@ -112,6 +154,28 @@ export declare class AnimationCoordinator {
      * doesn't pop into existence at a clipped FLIP entry point.
      */
     claimRetainedForReuse(cellId: string, container: HTMLElement): HTMLElement | null;
+    /**
+     * Hand off a cell that the renderer would otherwise remove for an accordion
+     * shrink-out (column hide / pin-out from this section): the cell stays in
+     * place and its size in the named axis is animated to zero by the
+     * `.st-accordion-animating` CSS transition (width/height). Removed from the
+     * DOM after the transition completes.
+     *
+     * Used when there is no destination position for the cell in the current
+     * section's post-render layout — either because the column was hidden or
+     * because it moved to a different pinned section. In the moved-section
+     * case, the destination section creates a fresh cell that grows from zero
+     * width via the existing accordion incoming-cell path, so the visual
+     * effect is a synchronized shrink-here / grow-there pair rather than a
+     * cross-container slide (which would require translating coordinates
+     * between two different container coordinate frames).
+     */
+    shrinkOutCell(args: {
+        cellId: string;
+        element: HTMLElement;
+        container: HTMLElement;
+        axis: "horizontal" | "vertical";
+    }): void;
     /**
      * Discard any retained cell with this id in the given container. Called by
      * the renderer when it's about to create a fresh cell with the same id, so

package/dist/src/types/TableRow.d.ts

@@ -11,11 +11,12 @@ type TableRow = {
     rowId: (string | number)[];
     /**
      * Position-independent identity for the row, used as the basis for the
-     * cell DOM `id` and the animation coordinator's snapshot key. When
-     * `getRowId` is provided, this is `String(customId)` (optionally prefixed
-     * by grouping keys for nested rows). Lets the same DOM cell survive a
-     * sort, so FLIP can animate the row to its new position. Falls back to
-     * the positional rowId string when `getRowId` is absent.
+     * cell DOM `id`, the animation coordinator's snapshot key, and **expand /
+     * collapse / row-loading state maps** ({@link expandStateKey}).
+     *
+     * Sort/filter reorder leaves this unchanged while positional `rowId` changes,
+     * so nested rows stay expanded after sort when this is supplied (via `getRowId`
+     * or WeakMap-backed fallback identities).
      */
     stableRowKey?: string;
     rowPath?: (string | number)[];

package/dist/src/utils/accordionAnimation.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Active axis for the in-flight accordion animation. Set on the render
+ * context for one render after a collapse/expand toggle so cell renderers
+ * know which dimension to fold/unfold.
+ *
+ *  - `"vertical"`   — row group expand/collapse: incoming cells start at
+ *                     `height: 0` and CSS-transition to `rowHeight`.
+ *  - `"horizontal"` — nested column expand/collapse: incoming cells start at
+ *                     `width: 0` and CSS-transition to their final width.
+ *  - `null`         — no accordion animation in progress (sort, reorder,
+ *                     scroll, etc.).
+ */
+export type AccordionAxis = "vertical" | "horizontal" | null;
+/** CSS class applied to the table root during the animation window. */
+export declare const ACCORDION_ANIMATION_CLASS = "st-accordion-animating";
+/** Custom property names consumed by the accordion CSS transitions. */
+export declare const ACCORDION_DURATION_VAR = "--st-accordion-duration";
+export declare const ACCORDION_EASING_VAR = "--st-accordion-easing";
+/** Window after which the accordion CSS class is removed (ms past duration). */
+export declare const ACCORDION_CLEANUP_BUFFER_MS = 80;
+/**
+ * Detect `prefers-reduced-motion: reduce`. Returns `false` outside the
+ * browser (SSR) so the call site doesn't have to guard.
+ */
+export declare const accordionPrefersReducedMotion: () => boolean;

package/dist/src/utils/bodyCell/styling.d.ts

@@ -1,4 +1,11 @@
+import type Row from "../../types/Row";
+import type TableRow from "../../types/TableRow";
 import { AbsoluteBodyCell, CellRenderContext } from "./types";
+export interface CellLiveRef {
+    row: Row;
+    tableRow: TableRow;
+}
+export declare const cellLiveRefMap: WeakMap<HTMLElement, CellLiveRef>;
 export declare const untrackCellByRow: (rowId: string, cellElement: HTMLElement) => void;
 export declare const createBodyCellElement: (cell: AbsoluteBodyCell, context: CellRenderContext) => HTMLElement;
 export declare const updateBodyCellPosition: (cellElement: HTMLElement, cell: AbsoluteBodyCell) => void;

package/dist/src/utils/bodyCell/types.d.ts

@@ -8,6 +8,7 @@ import type RowState from "../../types/RowState";
 import type { RowButton } from "../../types/RowButton";
 import type { CustomTheme } from "../../types/CustomTheme";
 import type { HeightOffsets } from "../infiniteScrollUtils";
+import type { AccordionAxis } from "../accordionAnimation";
 import type { VanillaEmptyStateRenderer, VanillaErrorStateRenderer, VanillaLoadingStateRenderer } from "../../types/RowStateRendererProps";
 type SetStateAction<T> = T | ((prevState: T) => T);
 type Dispatch<A> = (value: A) => void;
@@ -105,5 +106,15 @@ export interface CellRenderContext {
     canExpandRowGroup?: (row: Row) => boolean;
     isLoading?: boolean;
     pinned?: "left" | "right";
+    /** Pinned section viewport width (px); used for row separators so they match the section, not the full table. */
+    pinnedSectionWidthPx?: number;
+    /**
+     * When set, this render is the post-state pass of a row-grouping (vertical)
+     * or nested-column (horizontal) expand/collapse. Newly-created cells whose
+     * cellId has no entry in the animation snapshot start at zero size in the
+     * named axis so the CSS transition can grow them to their final size while
+     * sibling rows/cells FLIP into their new positions.
+     */
+    accordionAxis?: AccordionAxis;
 }
 export {};

package/dist/src/utils/headerCell/types.d.ts

@@ -3,6 +3,8 @@ import SortColumn from "../../types/SortColumn";
 import { TableFilterState, FilterCondition } from "../../types/FilterTypes";
 import { IconsConfig } from "../../types/IconsConfig";
 import Row from "../../types/Row";
+import type { AccordionAxis } from "../accordionAnimation";
+import type { AnimationCoordinator } from "../../managers/AnimationCoordinator";
 type SetStateAction<T> = T | ((prevState: T) => T);
 type Dispatch<A> = (value: A) => void;
 type MutableRefObject<T> = {
@@ -58,6 +60,8 @@ export interface HeaderRenderContext {
     onSort: (accessor: Accessor) => void;
     onTableHeaderDragEnd: (headers: HeaderObject[]) => void;
     pinned?: "left" | "right";
+    /** Mirrors body context: pinned strip width for cache invalidation when only section width changes. */
+    pinnedSectionWidthPx?: number;
     pinnedLeftRef: RefObject<HTMLDivElement>;
     pinnedRightRef: RefObject<HTMLDivElement>;
     reverse: boolean;
@@ -73,5 +77,19 @@ export interface HeaderRenderContext {
     setSelectedCells: Dispatch<SetStateAction<Set<string>>>;
     setSelectedColumns: Dispatch<SetStateAction<Set<number>>>;
     sort: SortColumn | null;
+    /**
+     * Active accordion animation axis (parallel to {@link CellRenderContext.accordionAxis}).
+     * Used so newly-visible header cells (e.g. children of a just-expanded
+     * collapsible header) start at zero width and CSS-transition to their
+     * final width.
+     */
+    accordionAxis?: AccordionAxis;
+    /**
+     * Animation coordinator (when enabled). The header renderer uses
+     * {@link AnimationCoordinator.hasSnapshotEntry} to detect cells that did
+     * not exist in the pre-render layout — those are the incoming cells
+     * driving the unfold animation.
+     */
+    animationCoordinator?: AnimationCoordinator;
 }
 export {};

package/dist/src/utils/rowUtils.d.ts

@@ -117,6 +117,24 @@ export declare const generateStableRowKey: (params: {
     groupingKey?: string;
     parentStableKey?: string | null;
 }) => string;
+/**
+ * Canonical string key for per-row expandable UI state: {@link expandedRows},
+ * {@link collapsedRows}, and entries in {@link rowStateMap} (loading/error/empty).
+ *
+ * Mirrors {@link TableRow.stableRowKey} whenever it is defined so expand state survives
+ * sort/filter reorder while positional `rowId` indices change.
+ * Falls back to {@link rowIdToString}(rowId) for synthetic rows without a stable key.
+ */
+export declare const expandStateKey: (tableRow: {
+    stableRowKey?: string;
+    rowId: (string | number)[];
+}) => string;
+/**
+ * Stable identity for full-width chrome rows (nested grid, loading/error state)
+ * under an expanded parent. Parent {@link expandStateKey} survives sort; path-based
+ * `rowId` does not, so SectionRenderer must key DOM maps on this instead.
+ */
+export declare const nestedChromeRowKey: (parentExpandStateKey: string | number, groupingKey: string | undefined) => string;
 /**
  * Get nested rows from a row based on the grouping path
  */
@@ -127,14 +145,15 @@ export declare const getNestedRows: (row: Row, groupingKey: string) => Row[];
 export declare const hasNestedRows: (row: Row, groupingKey?: string) => boolean;
 /**
  * Determine if a row is expanded based on expandedDepths and manual row overrides
- * @param rowId - The ID of the row to check
+ * @param expandStateRowId - Canonical key for expandable row state ({@link expandStateKey}).
+ * Matches keys in expandedRows/collapsedRows (stable across sort/filter when stableRowKey is used).
  * @param depth - The depth level of the row (0-indexed)
  * @param expandedDepths - Set of depth levels that are expanded
  * @param expandedRows - Map of row IDs to their depths for rows that user wants expanded
  * @param collapsedRows - Map of row IDs to their depths for rows that user wants collapsed
  * @returns true if the row is expanded, false otherwise
  */
-export declare const isRowExpanded: (rowId: string | number, depth: number, expandedDepths: Set<number>, expandedRows: Map<string, number>, collapsedRows: Map<string, number>) => boolean;
+export declare const isRowExpanded: (expandStateRowId: string | number, depth: number, expandedDepths: Set<number>, expandedRows: Map<string, number>, collapsedRows: Map<string, number>) => boolean;
 /**
  * Flatten rows recursively based on row grouping configuration
  * Now calculates ALL properties including position and isLastGroupRow

package/dist/src/utils/stickyParentsRenderer.d.ts

@@ -15,6 +15,20 @@ export interface StickyParentsContainerProps {
     scrollTop: number;
     scrollbarWidth: number;
     stickyParents: TableRow[];
+    /**
+     * Global `colIndex` of the first leaf column in each sticky strip section,
+     * matching {@link SectionRenderer} body sections (pinned left, main, right).
+     */
+    stickySectionColStart: {
+        left: number;
+        main: number;
+        right: number;
+    };
+    /**
+     * Row key (`stableRowKey` ?? `rowIdToString(rowId)`) → body slice `rowIndex`
+     * for the current `rowsToRender` band, so selection matches virtualized body cells.
+     */
+    stickyBodyRowIndexByRowKey: Map<string, number>;
 }
 export interface StickyParentsRenderContext {
     collapsedHeaders: Set<string>;

package/dist/stories/examples/BasicRowGrouping.d.ts

@@ -3,5 +3,9 @@ export declare const basicRowGroupingExampleDefaults: {
     rowGrouping: readonly ["divisions", "departments"];
     enableStickyParents: boolean;
     height: string;
+    animations: {
+        enabled: boolean;
+        duration: number;
+    };
 };
 export declare function renderBasicRowGroupingExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/stories/examples/CollapsibleColumnsExample.d.ts

@@ -5,5 +5,9 @@ export declare const collapsibleColumnsExampleDefaults: {
     selectableCells: boolean;
     columnReordering: boolean;
     height: string;
+    animations: {
+        enabled: boolean;
+        duration: number;
+    };
 };
 export declare function renderCollapsibleColumnsExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/stories/examples/DynamicNestedTableExample.d.ts

@@ -1,5 +1,7 @@
 import { type UniversalVanillaArgs } from "../vanillaStoryConfig";
 export declare const dynamicNestedTableExampleDefaults: {
     height: string;
+    expandAll: boolean;
+    autoExpandColumns: boolean;
 };
 export declare function renderDynamicNestedTableExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/stories/examples/pinned-columns/PinnedColumns.d.ts

@@ -1,4 +1,5 @@
 import { type UniversalVanillaArgs } from "../../vanillaStoryConfig";
+import type { Theme } from "../../../src/index";
 export declare const pinnedColumnsExampleDefaults: {
     rowGrouping: readonly ["stores"];
     columnReordering: boolean;
@@ -7,5 +8,6 @@ export declare const pinnedColumnsExampleDefaults: {
     editColumns: boolean;
     height: string;
     enableStickyParents: boolean;
+    theme: Theme;
 };
 export declare function renderPinnedColumnsExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/stories/tests/17-NestedTablesTests.stories.d.ts

@@ -1,13 +1,15 @@
 /**
  * NESTED TABLES TESTS
- * Ported from React - same tests, vanilla table only.
+ * Rich deterministic data (marketing-style companies → divisions → teams), content assertions,
+ * and coverage for lazy load, multi-level nesting, sort, selection, filtering, pagination, collapse, and empty nested rows.
  */
 import type { Meta } from "@storybook/html";
+import { SimpleTableVanilla } from "../../src/index";
 declare const meta: Meta;
 export default meta;
 export declare const BasicNestedTable: {
     render: () => HTMLDivElement & {
-        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+        _table?: SimpleTableVanilla | undefined;
     };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;
@@ -15,7 +17,7 @@ export declare const BasicNestedTable: {
 };
 export declare const NestedTableWithIndependentColumns: {
     render: () => HTMLDivElement & {
-        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+        _table?: SimpleTableVanilla | undefined;
     };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;
@@ -23,7 +25,7 @@ export declare const NestedTableWithIndependentColumns: {
 };
 export declare const NestedTableWithColumnResizing: {
     render: () => HTMLDivElement & {
-        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+        _table?: SimpleTableVanilla | undefined;
     };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;
@@ -31,7 +33,7 @@ export declare const NestedTableWithColumnResizing: {
 };
 export declare const NestedTableWithPagination: {
     render: () => HTMLDivElement & {
-        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+        _table?: SimpleTableVanilla | undefined;
     };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;
@@ -39,7 +41,63 @@ export declare const NestedTableWithPagination: {
 };
 export declare const NestedTableWithFiltering: {
     render: () => HTMLDivElement & {
-        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableLazyLoadDivisions: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableThreeLevels: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableExpandCollapse: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableNestedSort: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableRowSelection: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableEmptyDivisions: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const NestedTableAutoExpandNested: {
+    render: () => HTMLDivElement & {
+        _table?: SimpleTableVanilla | undefined;
     };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;

package/dist/stories/tests/43-CollapseExpandAnimationsTests.stories.d.ts

@@ -0,0 +1,63 @@
+/**
+ * COLLAPSE / EXPAND ACCORDION ANIMATION TESTS
+ *
+ * Verifies the accordion-style animations on:
+ *   - Nested column collapse / expand: incoming columns start at width 0 and
+ *     CSS-transition to their final width while surviving columns FLIP-shift.
+ *   - Row group collapse / expand: incoming rows start at height 0 and
+ *     CSS-transition to rowHeight while surviving rows FLIP-shift.
+ *
+ * The mechanism reuses the existing FLIP `AnimationCoordinator` (no extra
+ * config) and is gated by `animations.enabled`. This file exercises the
+ * one-render window where:
+ *   - Root has `.st-accordion-animating`.
+ *   - Newly-visible cells carry inline `width: 0px` or `height: 0px`.
+ */
+import type { Meta } from "@storybook/html";
+declare const meta: Meta;
+export default meta;
+export declare const ColumnExpand_AddsAccordionClass: {
+    tags: string[];
+    render: () => HTMLDivElement & {
+        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const ColumnExpand_IncomingCellsStartAtZeroWidth: {
+    tags: string[];
+    render: () => HTMLDivElement & {
+        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const RowExpand_AddsAccordionClass: {
+    tags: string[];
+    render: () => HTMLDivElement & {
+        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const RowExpand_IncomingCellsStartAtZeroHeight: {
+    tags: string[];
+    render: () => HTMLDivElement & {
+        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};
+export declare const Disabled_NoAccordionClass: {
+    tags: string[];
+    render: () => HTMLDivElement & {
+        _table?: import("../../src/index").SimpleTableVanilla | undefined;
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};

package/dist/stories/tests/testUtils.d.ts

@@ -25,6 +25,11 @@ export declare const rowExists: (container: HTMLElement, rowIndex: string) => bo
  */
 export declare const getVirtualRows: (container: HTMLElement) => HTMLElement[][];
 export declare const waitForTable: (timeout?: number) => Promise<void>;
+/** Poll until predicate returns true or timeout (reduces flake vs fixed setTimeout). */
+export declare function waitUntil(predicate: () => boolean, options?: {
+    timeoutMs?: number;
+    intervalMs?: number;
+}): Promise<void>;
 export declare const validateBasicTableStructure: (canvasElement: HTMLElement) => Promise<void>;
 export declare const validateColumnCount: (canvasElement: HTMLElement, expectedCount: number) => void;
 export declare const validateRowCount: (canvasElement: HTMLElement, expectedCount: number) => void;