@astronox/core 0.2.1 → 0.2.3

package/src/patterns/Table/tableClientController.ts

@@ -0,0 +1,253 @@
+export type ClientTableState = 'ready' | 'empty' | 'error';
+
+export type ClientTablePage<TItem> = {
+  items: readonly TItem[];
+  nextCursor?: string;
+};
+
+export type ClientTablePaginationController = {
+  destroy(): void;
+  remove(key: string): void;
+};
+
+type ClientTablePaginationOptions<TItem> = {
+  createRow(item: TItem): HTMLElement | null;
+  emptyMessage: string;
+  errorMessage: string;
+  getKey(item: TItem): string;
+  loadPage(cursor?: string): Promise<ClientTablePage<TItem>>;
+  root: HTMLElement;
+};
+
+export function replaceClientTableRows(
+  root: HTMLElement,
+  rows: readonly HTMLElement[],
+  {
+    message,
+    state = rows.length > 0 ? 'ready' : 'empty',
+  }: {
+    message?: string;
+    state?: ClientTableState;
+  } = {},
+): void {
+  const rowsRoot = root.querySelector<HTMLElement>('[data-table-rows]');
+  if (!rowsRoot) return;
+
+  rowsRoot
+    .querySelectorAll(
+      ':scope > [data-table-row], :scope > [data-table-skeleton-row]',
+    )
+    .forEach((row) => row.remove());
+
+  const stateRow = rowsRoot.querySelector<HTMLElement>(
+    ':scope > [data-table-state]',
+  );
+  if (stateRow) {
+    stateRow.hidden = state === 'ready';
+    stateRow.dataset.tableState = state === 'ready' ? 'empty' : state;
+    const content = stateRow.querySelector<HTMLElement>(
+      '[data-widget="text-block"]',
+    );
+    if (content && message !== undefined) content.textContent = message;
+    if (content) {
+      content.setAttribute('role', state === 'error' ? 'alert' : 'status');
+    }
+  }
+
+  if (state === 'ready') {
+    const fragment = document.createDocumentFragment();
+    rows.forEach((row) => {
+      row.hidden = false;
+      fragment.append(row);
+    });
+    rowsRoot.insertBefore(fragment, stateRow);
+    root.dispatchEvent(
+      new CustomEvent('table:rows-appended', {
+        bubbles: true,
+        detail: { rows },
+      }),
+    );
+  }
+
+  root.dataset.tableLoadingState = state;
+  root.removeAttribute('aria-busy');
+}
+
+export function createClientTablePagination<TItem>({
+  createRow,
+  emptyMessage,
+  errorMessage,
+  getKey,
+  loadPage,
+  root,
+}: ClientTablePaginationOptions<TItem>): ClientTablePaginationController {
+  const rowsRoot = root.querySelector<HTMLElement>('[data-table-rows]');
+  const pagination = root.querySelector<HTMLElement>('[data-table-pagination]');
+  const sentinel = root.querySelector<HTMLElement>(
+    '[data-table-pagination-sentinel]',
+  );
+  const skeletonTemplate = root.querySelector<HTMLTemplateElement>(
+    '[data-table-skeleton-template]',
+  );
+  const keys = new Set<string>();
+  let nextCursor: string | undefined;
+  let loading = false;
+  let disposed = false;
+
+  if (pagination) {
+    pagination.hidden = false;
+    pagination.dataset.tableProgressiveEnhanced = 'true';
+  }
+
+  const setPaginationState = (state: 'idle' | 'loading' | 'error'): void => {
+    if (!pagination) return;
+    pagination.dataset.tableProgressiveState = state;
+    const status = pagination.querySelector<HTMLElement>(
+      '[data-table-pagination-status]',
+    );
+    if (!status) return;
+    status.textContent =
+      state === 'loading'
+        ? (pagination.dataset.tableLoadingLabel ?? '')
+        : state === 'error'
+          ? (pagination.dataset.tableErrorLabel ?? '')
+          : '';
+    status.hidden = state === 'idle';
+  };
+
+  const appendSkeleton = (): HTMLElement[] => {
+    if (!rowsRoot || !skeletonTemplate) return [];
+    const skeletonRows = Array.from(
+      skeletonTemplate.content.querySelectorAll<HTMLElement>(
+        '[data-table-skeleton-row]',
+      ),
+    ).map((row) => row.cloneNode(true) as HTMLElement);
+    const stateRow = rowsRoot.querySelector<HTMLElement>(
+      ':scope > [data-table-state]',
+    );
+    const fragment = document.createDocumentFragment();
+    skeletonRows.forEach((row) => fragment.append(row));
+    rowsRoot.insertBefore(fragment, stateRow);
+    return skeletonRows;
+  };
+
+  const createPageRows = (page: ClientTablePage<TItem>): HTMLElement[] => {
+    const rows: HTMLElement[] = [];
+    for (const item of page.items) {
+      const key = getKey(item);
+      if (keys.has(key)) continue;
+      const row = createRow(item);
+      if (!row) continue;
+      keys.add(key);
+      rows.push(row);
+    }
+    nextCursor = page.nextCursor;
+    return rows;
+  };
+
+  const appendRows = (rows: readonly HTMLElement[]): void => {
+    if (!rowsRoot) return;
+    const stateRow = rowsRoot.querySelector<HTMLElement>(
+      ':scope > [data-table-state]',
+    );
+    const fragment = document.createDocumentFragment();
+    rows.forEach((row) => {
+      row.hidden = false;
+      fragment.append(row);
+    });
+    rowsRoot.insertBefore(fragment, stateRow);
+    root.dispatchEvent(
+      new CustomEvent('table:rows-appended', {
+        bubbles: true,
+        detail: { rows },
+      }),
+    );
+    root.dataset.tableLoadingState = 'ready';
+    root.removeAttribute('aria-busy');
+  };
+
+  const load = async (append: boolean): Promise<void> => {
+    if (loading || disposed || (append && !nextCursor)) return;
+    loading = true;
+    root.setAttribute('aria-busy', 'true');
+    root.dataset.tableLoadingState = append ? 'appending' : 'pending';
+    setPaginationState('loading');
+    const skeletonRows = append ? appendSkeleton() : [];
+    let shouldContinue = false;
+
+    try {
+      const page = await loadPage(append ? nextCursor : undefined);
+      if (disposed) return;
+      const rows = createPageRows(page);
+      if (append) {
+        skeletonRows.forEach((row) => row.remove());
+        appendRows(rows);
+      } else {
+        replaceClientTableRows(root, rows, { message: emptyMessage });
+      }
+      setPaginationState('idle');
+      if (!nextCursor) observer?.disconnect();
+      shouldContinue = Boolean(
+        nextCursor &&
+          sentinel &&
+          sentinel.getBoundingClientRect().top <= window.innerHeight + 512,
+      );
+    } catch (error) {
+      if (disposed) return;
+      console.error('[table] Failed to load client page', error);
+      if (append) {
+        skeletonRows.forEach((row) => row.remove());
+        root.removeAttribute('aria-busy');
+        root.dataset.tableLoadingState = 'ready';
+        setPaginationState('error');
+      } else {
+        replaceClientTableRows(root, [], {
+          message: errorMessage,
+          state: 'error',
+        });
+        setPaginationState('error');
+      }
+    } finally {
+      loading = false;
+      if (shouldContinue && !disposed) {
+        window.requestAnimationFrame(() => void load(true));
+      }
+    }
+  };
+
+  const observer =
+    sentinel && 'IntersectionObserver' in window
+      ? new IntersectionObserver(
+          (entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) void load(true);
+          },
+          { rootMargin: '512px 0px' },
+        )
+      : null;
+
+  const initialize = async (): Promise<void> => {
+    await load(false);
+    if (!disposed && nextCursor && sentinel && observer) {
+      observer.observe(sentinel);
+    }
+  };
+
+  void initialize();
+
+  return {
+    destroy() {
+      disposed = true;
+      observer?.disconnect();
+    },
+    remove(key) {
+      if (!keys.delete(key)) return;
+      const row = Array.from(
+        root.querySelectorAll<HTMLElement>('[data-table-row]'),
+      ).find((candidate) => candidate.dataset.tableRowKey === key);
+      row?.remove();
+      if (keys.size === 0) {
+        replaceClientTableRows(root, [], { message: emptyMessage });
+      }
+    },
+  };
+}

package/src/patterns/Table/tableFilterController.ts

@@ -4,6 +4,10 @@ import {
   type ComboboxChangeDetail,
 } from '../Combobox/comboboxController';
 import { resetTableSort } from './tableSortController';
+import {
+  hasTableProgressive,
+  setTableProgressiveFilters,
+} from './tableProgressiveController';
 
 type FilterValues = Readonly<Record<string, readonly string[]>>;
 
@@ -104,23 +108,10 @@ export function initTableFilters(root: HTMLElement): () => void {
     }
   };
 
-  const isLoadingAllRows = (): boolean => {
-    const pagination = table.querySelector<HTMLElement>(
-      '[data-table-pagination]',
-    );
-    const state = pagination?.dataset.tableProgressiveState;
-    return Boolean(
-      pagination &&
-      !pagination.hidden &&
-      state !== 'complete' &&
-      state !== 'error',
-    );
-  };
-
   const updateEmptyState = (visibleRows: number, active: boolean): void => {
     const empty = table.querySelector<HTMLElement>('[data-table-filter-empty]');
     if (!empty) return;
-    empty.hidden = !active || visibleRows > 0 || isLoadingAllRows();
+    empty.hidden = !active || visibleRows > 0;
   };
 
   const applyFilters = (): void => {
@@ -133,6 +124,16 @@ export function initTableFilters(root: HTMLElement): () => void {
       rows.some((row) => row.hasAttribute(exclusionsAttribute));
     const active =
       query.length > 0 || activeSelections.length > 0 || hasExternalFilter;
+
+    if (
+      setTableProgressiveFilters(table, {
+        search: search?.value.trim() ?? '',
+        selections: Object.fromEntries(activeSelections),
+      })
+    ) {
+      return;
+    }
+
     let visibleRows = 0;
 
     for (const row of rows) {
@@ -153,14 +154,17 @@ export function initTableFilters(root: HTMLElement): () => void {
       if (row.hidden !== !visible) row.hidden = !visible;
       if (visible) visibleRows += 1;
     }
-
     updateEmptyState(visibleRows, active);
-    if (active && isLoadingAllRows()) {
-      table.dispatchEvent(new CustomEvent('table:load-all', { bubbles: true }));
-    }
   };
 
   const scheduleFilters = (): void => {
+    if (
+      table.dataset.tablePreparation === 'controlled' ||
+      hasTableProgressive(table)
+    ) {
+      applyFilters();
+      return;
+    }
     if (scheduledFrame !== null) return;
     scheduledFrame = window.requestAnimationFrame(() => {
       scheduledFrame = null;
@@ -192,11 +196,7 @@ export function initTableFilters(root: HTMLElement): () => void {
     const detail = (event as CustomEvent<{ rows?: readonly HTMLElement[] }>)
       .detail;
     registerRows(detail?.rows ?? []);
-    scheduleFilters();
-  };
-
-  const handleProgressiveComplete = (): void => {
-    scheduleFilters();
+    if (!hasTableProgressive(table)) scheduleFilters();
   };
 
   const handleReset = (): void => {
@@ -226,10 +226,6 @@ export function initTableFilters(root: HTMLElement): () => void {
   root.addEventListener('combobox:change', handleComboboxChange);
   root.addEventListener(refreshEvent, scheduleFilters);
   table.addEventListener('table:rows-appended', handleRowsAppended);
-  table.addEventListener(
-    'table:progressive-complete',
-    handleProgressiveComplete,
-  );
   reset?.addEventListener('click', handleReset);
 
   return () => {
@@ -241,10 +237,6 @@ export function initTableFilters(root: HTMLElement): () => void {
     root.removeEventListener('combobox:change', handleComboboxChange);
     root.removeEventListener(refreshEvent, scheduleFilters);
     table.removeEventListener('table:rows-appended', handleRowsAppended);
-    table.removeEventListener(
-      'table:progressive-complete',
-      handleProgressiveComplete,
-    );
     reset?.removeEventListener('click', handleReset);
     for (const row of rows) row.hidden = false;
     updateEmptyState(0, false);