@astronox/core 0.4.18 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.18",
+  "version": "0.5.0",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/patterns/Table/tableFilterController.ts

@@ -8,12 +8,15 @@ import {
   hasTableProgressive,
   setTableProgressiveFilters,
 } from './tableProgressiveController';
+import {
+  matchesFilterSelection,
+  normalizeFilterSelection,
+  type TableFilterValues,
+} from './tableFilterSelection';
 import { revealTableStart } from './tableViewport';
 
-type FilterValues = Readonly<Record<string, readonly string[]>>;
-
 type CachedFilterValues = {
-  values: FilterValues;
+  values: TableFilterValues;
   normalizedSearch: readonly string[];
 };
 
@@ -92,7 +95,7 @@ export function initTableFilters(root: HTMLElement): () => void {
       .normalize('NFD')
       .replace(/\p{Diacritic}/gu, '')
       .toLocaleLowerCase(locale);
-  const selections = new Map<string, string>();
+  const selections = new Map<string, readonly string[]>();
   const filterValuesCache = new WeakMap<HTMLElement, CachedFilterValues>();
   const rows: HTMLElement[] = [];
   let scheduledFrame: number | null = null;
@@ -118,7 +121,7 @@ export function initTableFilters(root: HTMLElement): () => void {
   const applyFilters = (): void => {
     const query = normalize(search?.value.trim() ?? '');
     const activeSelections = [...selections.entries()].filter(
-      ([, value]) => value.length > 0,
+      ([, values]) => values.length > 0,
     );
     const hasExternalFilter =
       root.hasAttribute(externalFiltersAttribute) ||
@@ -144,8 +147,10 @@ export function initTableFilters(root: HTMLElement): () => void {
         query.length === 0 ||
         cached.normalizedSearch.some((value) => value.includes(query));
       const matchesSelections = activeSelections.every(
-        ([field, selectedValue]) =>
-          (cached.values[field] ?? []).includes(selectedValue),
+        ([field, selectedValues]) => {
+          const rowValues = cached.values[field] ?? [];
+          return matchesFilterSelection(rowValues, selectedValues);
+        },
       );
       const visible =
         matchesSearch &&
@@ -190,7 +195,9 @@ export function initTableFilters(root: HTMLElement): () => void {
 
     const field = target.dataset.tableFilterField;
     if (!field) return;
-    selections.set(field, customEvent.detail.values[0] ?? '');
+    const values = normalizeFilterSelection(customEvent.detail.values);
+    if (values.length > 0) selections.set(field, values);
+    else selections.delete(field);
     revealTableStart(table);
     scheduleFilters();
   };
@@ -215,8 +222,10 @@ export function initTableFilters(root: HTMLElement): () => void {
 
   for (const field of fields) {
     const fieldName = field.dataset.tableFilterField;
-    const selectedValue = getComboboxValues(field)[0];
-    if (fieldName && selectedValue) selections.set(fieldName, selectedValue);
+    const selectedValues = normalizeFilterSelection(getComboboxValues(field));
+    if (fieldName && selectedValues.length > 0) {
+      selections.set(fieldName, selectedValues);
+    }
   }
   registerRows(
     Array.from(
@@ -248,12 +257,14 @@ export function initTableFilters(root: HTMLElement): () => void {
   };
 }
 
-function parseFilterValues(value: string | undefined): FilterValues {
+function parseFilterValues(value: string | undefined): TableFilterValues {
   if (!value) return {};
 
   try {
     const parsed = JSON.parse(value);
-    return parsed && typeof parsed === 'object' ? (parsed as FilterValues) : {};
+    return parsed && typeof parsed === 'object'
+      ? (parsed as TableFilterValues)
+      : {};
   } catch {
     return {};
   }

package/src/patterns/Table/tableFilterSelection.ts

@@ -0,0 +1,47 @@
+export type TableFilterValues = Readonly<Record<string, readonly string[]>>;
+
+export function normalizeFilterSelection(
+  values: readonly string[],
+): readonly string[] {
+  return [...new Set(values.filter((value) => value.length > 0))].sort();
+}
+
+export function normalizeFilterSelections(
+  selections: TableFilterValues,
+): TableFilterValues {
+  const normalized: Record<string, readonly string[]> = {};
+
+  for (const [field, values] of Object.entries(selections)) {
+    const selection = normalizeFilterSelection(values);
+    if (selection.length > 0) normalized[field] = selection;
+  }
+
+  return normalized;
+}
+
+export function matchesFilterSelection(
+  values: readonly string[],
+  selection: readonly string[],
+): boolean {
+  return selection.some((value) => values.includes(value));
+}
+
+export function areFilterSelectionsEqual(
+  left: TableFilterValues,
+  right: TableFilterValues,
+): boolean {
+  const leftEntries = Object.entries(left);
+  const rightEntries = Object.entries(right);
+
+  return (
+    leftEntries.length === rightEntries.length &&
+    leftEntries.every(([field, values]) => {
+      const rightValues = right[field];
+      return (
+        rightValues !== undefined &&
+        values.length === rightValues.length &&
+        values.every((value, index) => value === rightValues[index])
+      );
+    })
+  );
+}

package/src/patterns/Table/tableProgressiveController.ts

@@ -3,6 +3,12 @@ import type {
   TableProgressiveModel,
 } from '../../display/contracts';
 import { tableProgressiveBatchSize } from '../../display/tableProgressive';
+import {
+  areFilterSelectionsEqual,
+  matchesFilterSelection,
+  normalizeFilterSelections,
+  type TableFilterValues,
+} from './tableFilterSelection';
 import { resolveTableScrollRoot, revealTableStart } from './tableViewport';
 
 const initializedAttribute = 'data-table-progressive-initialized';
@@ -20,7 +26,7 @@ export type TableRowsAppendedDetail = {
 
 export type TableProgressiveFilterState = {
   search: string;
-  selections: Readonly<Record<string, string>>;
+  selections: TableFilterValues;
 };
 
 export type TableProgressiveSortState = {
@@ -250,9 +256,10 @@ export function initTableProgressive(root: HTMLElement): () => void {
       ) {
         return false;
       }
-      return selections.every(([field, value]) =>
-        (entry.filters?.[field] ?? []).includes(value),
-      );
+      return selections.every(([field, selectedValues]) => {
+        const entryValues = entry.filters?.[field] ?? [];
+        return matchesFilterSelection(entryValues, selectedValues);
+      });
     });
 
     if (sortState) {
@@ -455,8 +462,9 @@ export function initTableProgressive(root: HTMLElement): () => void {
     progressive: true,
     refresh,
     setFilters(state) {
-      if (areFilterStatesEqual(filterState, state)) return;
-      filterState = state;
+      const normalizedState = normalizeFilterState(state);
+      if (areFilterStatesEqual(filterState, normalizedState)) return;
+      filterState = normalizedState;
       if (prepared) prepareWindow(0, 'refreshing');
     },
     setSort(state) {
@@ -656,15 +664,21 @@ function areFilterStatesEqual(
   left: TableProgressiveFilterState,
   right: TableProgressiveFilterState,
 ): boolean {
-  if (left.search !== right.search) return false;
-  const leftEntries = Object.entries(left.selections);
-  const rightEntries = Object.entries(right.selections);
   return (
-    leftEntries.length === rightEntries.length &&
-    leftEntries.every(([key, value]) => right.selections[key] === value)
+    left.search === right.search &&
+    areFilterSelectionsEqual(left.selections, right.selections)
   );
 }
 
+function normalizeFilterState(
+  state: TableProgressiveFilterState,
+): TableProgressiveFilterState {
+  return {
+    search: state.search,
+    selections: normalizeFilterSelections(state.selections),
+  };
+}
+
 function areSortStatesEqual(
   left: TableProgressiveSortState,
   right: TableProgressiveSortState,