@astronox/core 0.2.1 → 0.2.3

package/src/patterns/Table/Table.astro

@@ -3,14 +3,17 @@ import type { HTMLAttributes } from 'astro/types';
 import type {
   TableColumn,
   TablePaginationModel,
+  TableProgressiveModel,
   TableRow,
 } from '../../display/contracts';
+import { tableProgressiveBatchSize } from '../../display/tableProgressive';
 import type { Tone } from '../../theme/contracts';
 import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
 import TableBody from './TableBody.astro';
 import TableFooter from './TableFooter.astro';
 import TableHeader from './TableHeader.astro';
 import TablePagination from './TablePagination.astro';
+import TableSkeleton from './TableSkeleton.astro';
 import {
   getTableColumnDensity,
   getTableMinimumInlineSize,
@@ -33,6 +36,7 @@ type TablePaginationMessages = {
 
 type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
   caption: string;
+  clientProgressive?: boolean;
   columns: readonly TableColumn[];
   density?: 'regular' | 'compact';
   emptyMessage: string;
@@ -44,6 +48,8 @@ type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
   pagination?: TablePaginationModel;
   paginationKey?: string;
   paginationMessages?: TablePaginationMessages;
+  preparation?: 'automatic' | 'controlled';
+  progressive?: false | TableProgressiveModel;
   rowSizing?: 'content' | 'fill';
   rows: readonly TableRow[];
   skeletonRows?: number;
@@ -54,6 +60,7 @@ type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
 
 const {
   caption,
+  clientProgressive = false,
   class: className,
   columns,
   'data-tone': dataTone,
@@ -67,6 +74,8 @@ const {
   pagination,
   paginationKey,
   paginationMessages,
+  preparation = 'automatic',
+  progressive,
   rowSizing = 'content',
   rows,
   skeletonRows,
@@ -95,6 +104,62 @@ const columnDensity = getTableColumnDensity(columns);
 const resolvedTone = tone ?? dataTone;
 const hasSortableColumns = columns.some((column) => column.sort);
 const hasFooter = Astro.slots.has('footer');
+const configuredProgressive =
+  progressive && typeof progressive === 'object' ? progressive : undefined;
+const batchSize = Math.max(
+  1,
+  Math.floor(configuredProgressive?.batchSize ?? tableProgressiveBatchSize),
+);
+const resolvedRows = rows.map((row, index): TableRow => ({
+  ...row,
+  key: row.key ?? `${paginationKey ?? 'table'}-${index + 1}`,
+}));
+const inferredProgressive =
+  progressive === undefined && resolvedRows.length > batchSize
+    ? {
+        batchSize,
+        entries: resolvedRows.map((row) => ({
+          key: row.key!,
+          filters: row.filters,
+          sortValues: row.sortValues,
+        })),
+      }
+    : undefined;
+const progressiveModel =
+  progressive === false
+    ? undefined
+    : configuredProgressive ?? inferredProgressive;
+const hasProgressiveRows = Boolean(
+  progressiveModel && progressiveModel.entries.length > batchSize,
+);
+const hasProgressivePagination = hasProgressiveRows || clientProgressive;
+const initialSkeletonRows = Math.max(
+  1,
+  Math.floor(
+    skeletonRows ??
+      Math.min(
+        batchSize,
+        (progressiveModel?.entries.length ?? resolvedRows.length) || 1,
+      ),
+  ),
+);
+const preparesRows =
+  (resolvedRows.length > 0 || clientProgressive) && !errorMessage;
+const initialLoadingState = errorMessage
+  ? 'error'
+  : resolvedRows.length === 0 && !clientProgressive
+    ? 'empty'
+    : 'pending';
+const progressiveManifest = hasProgressiveRows
+  ? JSON.stringify({
+      ...progressiveModel,
+      batchSize,
+    }).replaceAll('<', '\\u003c')
+  : undefined;
+const rowKeys = new Set(resolvedRows.map((row) => row.key));
+const progressiveKeys = new Set(
+  progressiveModel?.entries.map((entry) => entry.key) ?? [],
+);
 
 if (header === 'visible' && hasSortableColumns && !sortMessages) {
   throw new Error('Sortable table columns require localized sort messages');
@@ -102,6 +167,21 @@ if (header === 'visible' && hasSortableColumns && !sortMessages) {
 if (pagination?.nextHref && !paginationMessages) {
   throw new Error('Paginated tables require localized pagination messages');
 }
+if (clientProgressive && !paginationMessages) {
+  throw new Error('Client-progressive tables require localized messages');
+}
+if (progressiveModel?.sources && !paginationKey) {
+  throw new Error('External progressive tables require a stable pagination key');
+}
+if (rowKeys.size !== resolvedRows.length) {
+  throw new Error('Table rows require unique keys');
+}
+if (
+  progressiveModel &&
+  progressiveKeys.size !== progressiveModel.entries.length
+) {
+  throw new Error('Progressive table entries require unique keys');
+}
 ---
 
 <div
@@ -110,18 +190,32 @@ if (pagination?.nextHref && !paginationMessages) {
   data-widget="table"
   data-composition="table"
   data-table-column-density={columnDensity}
+  data-table-client-progressive={clientProgressive ? true : undefined}
   data-table-density={density}
   data-table-inline-overflow={inlineOverflow}
   data-table-index-minimum-rem={
     minimumInlineSize ? Number.parseFloat(minimumInlineSize) : undefined
   }
   data-table-layout={layout}
+  data-table-loading-state={initialLoadingState}
+  data-table-preparation={preparation}
   data-table-key={paginationKey}
   data-table-scroll-root
   data-table-sticky-header={stickyHeader ? true : undefined}
   data-tone={resolvedTone}
   style={tableStyle}
 >
+  {
+    preparesRows ? (
+      <script is:inline>
+        document.documentElement.setAttribute('data-nox-table-enhanced', '');
+        document.currentScript?.parentElement?.setAttribute(
+          'aria-busy',
+          'true',
+        );
+      </script>
+    ) : null
+  }
   <SurfaceGroup>
     <slot name="heading" />
     {
@@ -137,17 +231,17 @@ if (pagination?.nextHref && !paginationMessages) {
       filterEmptyMessage={filterEmptyMessage}
       layout={layout}
       rowSizing={rowSizing}
-      rows={rows}
+      rows={resolvedRows}
+      skeletonRows={preparesRows ? initialSkeletonRows : 0}
     />
     {
-      pagination && paginationMessages ? (
+      hasProgressivePagination || (pagination && paginationMessages) ? (
         <TablePagination
-          columns={columns}
-          errorLabel={paginationMessages.error}
-          loadingLabel={paginationMessages.loading}
-          nextLabel={paginationMessages.nextPage}
+          errorLabel={paginationMessages?.error ?? ''}
+          loadingLabel={paginationMessages?.loading ?? ''}
+          nextLabel={paginationMessages?.nextPage ?? ''}
           pagination={pagination}
-          skeletonRows={skeletonRows}
+          progressive={hasProgressivePagination}
         />
       ) : null
     }
@@ -159,6 +253,27 @@ if (pagination?.nextHref && !paginationMessages) {
       ) : null
     }
   </SurfaceGroup>
+  {
+    progressiveManifest ? (
+      <script
+        is:inline
+        type="application/json"
+        data-table-progressive-manifest
+        set:html={progressiveManifest}
+      />
+    ) : null
+  }
+  {
+    preparesRows ? (
+      <template data-table-skeleton-template>
+        <table>
+          <tbody>
+            <TableSkeleton columns={columns} rows={initialSkeletonRows} />
+          </tbody>
+        </table>
+      </template>
+    ) : null
+  }
 </div>
 
 <script>

package/src/patterns/Table/TableBody.astro

@@ -5,6 +5,7 @@ import type { Tone } from '../../theme/contracts';
 import TableSortIcon from '../../components/icons/TableSortIcon.astro';
 import TextBlock from '../../primitives/text/TextBlock/TextBlock.astro';
 import TableCellContent from './TableCell.astro';
+import TableSkeleton from './TableSkeleton.astro';
 import {
   getTableColumnAlignment,
   type TableLayout,
@@ -20,6 +21,7 @@ type Props = HTMLAttributes<'div'> & {
   layout?: TableLayout;
   rowSizing?: 'content' | 'fill';
   rows: readonly TableRow[];
+  skeletonRows?: number;
 };
 
 const {
@@ -33,6 +35,7 @@ const {
   layout = 'default',
   rowSizing = 'content',
   rows,
+  skeletonRows = 0,
   ...attrs
 }: Props = Astro.props;
 
@@ -86,6 +89,11 @@ const stateMessage =
           ))
         }
       </tr>
+      {
+        skeletonRows > 0 ? (
+          <TableSkeleton columns={columns} rows={skeletonRows} />
+        ) : null
+      }
       {
         state && stateMessage ? (
           <tr class="table-body__row" data-table-state={state}>

package/src/patterns/Table/TableBody.css

@@ -130,7 +130,7 @@
 }
 
 .table-body__row {
-  --table-primary-link-color: var(--nox-text);
+  --table-primary-link-color: var(--nox-content-link-color);
   --table-row-intrinsic-block-size: var(--table-row-min-block-size);
 
   display: grid;
@@ -173,7 +173,7 @@
 }
 
 .table-body__row[data-table-row-href]:focus-within {
-  --table-primary-link-color: var(--nox-link-hover);
+  --table-primary-link-color: var(--nox-content-link-color);
 }
 
 .table-body__cell {
@@ -253,7 +253,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-body__row[data-table-row-href]:hover {
-    --table-primary-link-color: var(--nox-link-hover);
+    --table-primary-link-color: var(--nox-content-link-color);
   }
 }
 

package/src/patterns/Table/TableCell.css

@@ -41,6 +41,12 @@
   min-inline-size: max-content;
 }
 
+.table-cell[data-table-cell-kind='actions'] {
+  inline-size: max-content;
+  min-inline-size: max-content;
+  overflow: visible;
+}
+
 .table-cell[data-table-cell-kind='tags']:not([data-wrap])
   > [data-composition='inline']
   > [data-widget='tag'] {
@@ -62,6 +68,10 @@
     var(--nox-motion-easing-standard);
 }
 
+.table-cell__link [data-text-weight='strong'] {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
 .table-cell__empty {
   color: var(--nox-text-muted);
   font-size: var(--nox-font-size-sm);
@@ -87,7 +97,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-cell__link:hover {
-    color: var(--nox-link-hover);
+    color: var(--nox-content-link-color);
   }
 }
 

package/src/patterns/Table/TableCellValue.astro

@@ -6,6 +6,7 @@ import TextPair from '../../components/data-display/TextPair/TextPair.astro';
 import Media from '../../primitives/media/Media/Media.astro';
 import Inline from '../../composition/Inline/Inline.astro';
 import Tag from '../../components/data-display/Tag/Tag.astro';
+import Button from '../../components/actions/Button/Button.astro';
 
 type Props = {
   cell: TableCell;
@@ -84,3 +85,33 @@ const formatValue = (value: DisplayTextValue): string => String(value);
     </Inline>
   ) : null
 }
+
+{
+  cell.kind === 'actions' ? (
+    <Inline align="center" gap="xs" justify="end" wrap={false}>
+      {cell.actions.map((action) => {
+        const Icon = action.icon;
+
+        return (
+          <Button
+            aria-controls={action.modalTargetId}
+            aria-haspopup={action.modalTargetId ? 'dialog' : undefined}
+            aria-label={action.label}
+            borderless={action.borderless !== false}
+            href={action.href}
+            hoverTone={action.hoverTone}
+            iconOnly
+            size="sm"
+            title={action.label}
+            tone={action.tone}
+            data-modal-open={action.modalTargetId}
+          >
+            <span data-tone={action.iconTone}>
+              <Icon />
+            </span>
+          </Button>
+        );
+      })}
+    </Inline>
+  ) : null
+}

package/src/patterns/Table/TableFooter.astro

@@ -6,6 +6,7 @@ type TableFooterPadding = 'none' | 'sm' | 'md' | 'lg';
 
 type Props = HTMLAttributes<'div'> & {
   padding?: TableFooterPadding;
+  surface?: boolean;
   tone?: Tone;
 };
 
@@ -13,6 +14,7 @@ const {
   class: className,
   'data-tone': dataTone,
   padding = 'md',
+  surface = true,
   tone,
   ...attrs
 }: Props = Astro.props;
@@ -26,7 +28,7 @@ const resolvedTone = tone ?? dataTone;
   data-padding={padding}
   data-table-footer
   data-tone={resolvedTone}
-  data-surface
+  data-surface={surface ? true : undefined}
 >
   <slot />
 </div>

package/src/patterns/Table/TableHeader.astro

@@ -53,6 +53,7 @@ const hasSortableColumns = columns.some((column) => column.sort);
               type="button"
               data-table-sort-column={column.id}
               data-table-sort-direction="none"
+              data-table-sort-first-direction={column.sort.firstDirection}
               data-table-sort-label={column.label}
               data-table-sort-type={column.sort.type}
               data-table-sort-tie-breaker={column.sort.tieBreaker}

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;