@astronox/core 0.2.0 → 0.2.2

package/src/patterns/Table/tableSortController.ts

@@ -1,3 +1,10 @@
+import {
+  hasTableProgressive,
+  refreshTableProgressive,
+  setTableProgressiveSort,
+  updateTableProgressiveEntry,
+} from './tableProgressiveController';
+
 type SortDirection = 'ascending' | 'descending';
 type SortType = 'number' | 'text';
 type SortValue = string | number | null;
@@ -134,30 +141,35 @@ export function initTableSort(root: HTMLElement): () => void {
     const id = button.dataset.tableSortColumn;
     const type = button.dataset.tableSortType;
     if (!id || (type !== 'number' && type !== 'text')) return;
+    const firstDirection =
+      button.dataset.tableSortFirstDirection === 'ascending'
+        ? 'ascending'
+        : 'descending';
+    const secondDirection =
+      firstDirection === 'ascending' ? 'descending' : 'ascending';
 
     if (state?.id !== id) {
       state = {
         id,
         type,
-        direction: 'descending',
+        direction: firstDirection,
         tieBreaker: button.dataset.tableSortTieBreaker,
       };
-      root.dispatchEvent(new CustomEvent('table:load-all', { bubbles: true }));
-    } else if (state.direction === 'descending') {
-      state = { ...state, direction: 'ascending' };
+    } else if (state.direction === firstDirection) {
+      state = { ...state, direction: secondDirection };
     } else {
       state = null;
     }
 
     updateButtons();
-    scheduleSort();
+    if (!setTableProgressiveSort(root, state)) scheduleSort();
   };
 
   const handleRowsAppended = (event: Event): void => {
     const detail = (event as CustomEvent<{ rows?: readonly HTMLElement[] }>)
       .detail;
     registerRows(detail?.rows ?? []);
-    scheduleSort();
+    if (!hasTableProgressive(root)) scheduleSort();
   };
 
   const handleSortValuesChanged = (): void => {
@@ -169,7 +181,7 @@ export function initTableSort(root: HTMLElement): () => void {
 
     state = null;
     updateButtons();
-    scheduleSort();
+    if (!setTableProgressiveSort(root, null)) scheduleSort();
   };
 
   registerRows(getRows());
@@ -208,9 +220,15 @@ export function setTableSortValues(
   };
   sortValuesCache.set(row, nextValues);
   row.dataset.tableSortValues = JSON.stringify(nextValues);
+  const root = row.closest<HTMLElement>('[data-table-scroll-root]');
+  const key = row.dataset.tableRowKey;
+  if (root && key) {
+    updateTableProgressiveEntry(root, key, { sortValues: nextValues });
+  }
 }
 
 export function refreshTableSort(root: HTMLElement): void {
+  if (refreshTableProgressive(root)) return;
   root.dispatchEvent(
     new CustomEvent('table:sort-values-changed', { bubbles: true }),
   );

package/src/styles/interaction.css

@@ -29,6 +29,22 @@
   transform-origin: center;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  :where(
+      a[href],
+      button,
+      summary,
+      [role='button'],
+      [role='link'],
+      [tabindex]:not(input, select, textarea)
+    ):focus-visible {
+    --nox-focus-ring: transparent;
+    --nox-tone-focus-ring: transparent;
+
+    outline: none;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   [data-interaction-accent]:hover {
     background: var(--nox-interaction-accent-hover-background);

package/src/styles/style.css

@@ -41,9 +41,13 @@
 @import '../components/data-display/Tag/Tag.css' layer(components);
 @import '../components/data-display/TextPair/TextPair.css'
   layer(components);
+@import '../components/forms/Checkbox/Checkbox.css' layer(components);
+@import '../components/forms/ChoiceGroup/ChoiceGroup.css' layer(components);
 @import '../components/forms/FieldLabel/FieldLabel.css' layer(components);
 @import '../components/forms/FieldError/FieldError.css' layer(components);
+@import '../components/forms/FieldGroup/FieldGroup.css' layer(components);
 @import '../components/forms/TextInput/TextInput.css' layer(components);
+@import '../components/forms/Textarea/Textarea.css' layer(components);
 @import '../components/feedback/Tooltip/Tooltip.css' layer(components);
 @import '../components/feedback/Spinner/Spinner.css' layer(components);
 @import '../components/icons/CurrencyIcon.css' layer(components);