@astronox/core 0.2.1 → 0.2.2

package/src/patterns/Table/TablePagination.astro

@@ -1,70 +1,86 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import type {
-  TableColumn,
-  TablePaginationModel,
-} from '../../display/contracts';
+import type { TablePaginationModel } from '../../display/contracts';
 import TableFooter from './TableFooter.astro';
-import TableSkeleton from './TableSkeleton.astro';
 
 type Props = HTMLAttributes<'div'> & {
-  columns: readonly TableColumn[];
   errorLabel: string;
   loadingLabel: string;
   nextLabel: string;
-  pagination: TablePaginationModel;
-  skeletonRows?: number;
+  pagination?: TablePaginationModel;
+  progressive?: boolean;
 };
 
 const {
   class: className,
-  columns,
   errorLabel,
   loadingLabel,
   nextLabel,
   pagination,
-  skeletonRows = 3,
+  progressive = false,
   ...attrs
 }: Props = Astro.props;
 ---
 
 {
-  pagination.nextHref ? (
-    <TableFooter
-      {...attrs}
-      class:list={['table-pagination', className]}
-      padding="none"
-      data-table-pagination
-      data-table-page={pagination.page}
-      data-table-total-pages={pagination.totalPages}
-      data-table-loading-label={loadingLabel}
-      data-table-error-label={errorLabel}
-      data-table-progressive-state="idle"
-    >
-      <template data-table-skeleton-template>
-        <TableSkeleton columns={columns} rows={skeletonRows} />
-      </template>
-      <div class="table-pagination__content">
-        <a
-          class="table-pagination__link"
-          href={pagination.nextHref}
-          data-table-pagination-link
-        >
-          {nextLabel}
-        </a>
-        <span
-          class="table-pagination__status"
-          data-table-pagination-status
-          role="status"
-          aria-live="polite"
-          hidden
-        />
-        <span
-          class="table-pagination__sentinel"
-          data-table-pagination-sentinel
-          aria-hidden="true"
-        />
-      </div>
-    </TableFooter>
+  pagination?.nextHref || progressive ? (
+    <>
+      <TableFooter
+        {...attrs}
+        class:list={['table-pagination', className]}
+        padding="none"
+        surface={!progressive}
+        data-table-pagination
+        data-table-loading-label={loadingLabel}
+        data-table-error-label={errorLabel}
+        data-table-progressive-state="idle"
+        hidden={progressive || !pagination?.nextHref}
+      >
+        <div class="table-pagination__content">
+          {
+            pagination?.nextHref ? (
+              <a
+                class="table-pagination__link"
+                href={pagination.nextHref}
+                data-table-pagination-link
+              >
+                {nextLabel}
+              </a>
+            ) : null
+          }
+          <span
+            class="table-pagination__status"
+            data-table-pagination-status
+            role="status"
+            aria-live="polite"
+            hidden
+          />
+          <span
+            class="table-pagination__sentinel"
+            data-table-pagination-sentinel
+            aria-hidden="true"
+          />
+        </div>
+      </TableFooter>
+      {
+        progressive && pagination?.nextHref ? (
+          <noscript>
+            <TableFooter
+              class:list={['table-pagination', className]}
+              padding="none"
+            >
+              <div class="table-pagination__content">
+                <a
+                  class="table-pagination__link"
+                  href={pagination.nextHref}
+                >
+                  {nextLabel}
+                </a>
+              </div>
+            </TableFooter>
+          </noscript>
+        ) : null
+      }
+    </>
   ) : null
 }

package/src/patterns/Table/TableSkeleton.astro

@@ -11,26 +11,22 @@ const { columns, rows = 3 }: Props = Astro.props;
 const rowCount = Math.max(1, Math.floor(rows));
 ---
 
-<table class="table-skeleton" aria-hidden="true">
-  <tbody>
-    {
-      Array.from({ length: rowCount }, () => (
-        <tr
-          class="table-skeleton__row"
-          data-table-skeleton-row
-          aria-hidden="true"
+{
+  Array.from({ length: rowCount }, () => (
+    <tr
+      class="table-skeleton__row"
+      data-table-skeleton-row
+      aria-hidden="true"
+    >
+      {columns.map((column) => (
+        <td
+          class="table-skeleton__cell"
+          data-align={getTableColumnAlignment(column)}
+          data-table-column-role={column.role}
         >
-          {columns.map((column) => (
-            <td
-              class="table-skeleton__cell"
-              data-align={getTableColumnAlignment(column)}
-              data-table-column-role={column.role}
-            >
-              <span class="table-skeleton__placeholder" />
-            </td>
-          ))}
-        </tr>
-      ))
-    }
-  </tbody>
-</table>
+          <span class="table-skeleton__placeholder" />
+        </td>
+      ))}
+    </tr>
+  ))
+}

package/src/patterns/Table/TableSkeleton.css

@@ -1,16 +1,41 @@
-.table-skeleton {
-  display: none;
-}
-
 .table-skeleton__row {
-  display: grid;
+  display: none;
   min-width: 0;
   min-height: var(--table-row-min-block-size);
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
+  border-block-start: 0;
+}
+
+.table-skeleton__row + .table-skeleton__row,
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='appending']
+  .table-body__row:not([hidden])
+  + .table-skeleton__row {
   border-block-start: var(--nox-border-width) solid var(--nox-border);
 }
 
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='pending']
+  .table-body__row[data-table-row],
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='refreshing']
+  .table-body__row[data-table-row] {
+  display: none;
+}
+
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='pending']
+  .table-skeleton__row,
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='refreshing']
+  .table-skeleton__row,
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='appending']
+  .table-skeleton__row {
+  display: grid;
+}
+
 .table-skeleton__cell {
   display: grid;
   min-width: 0;

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);