@svgrid/grid 2.6.21 → 2.6.23

package/src/menus.test.ts

@@ -30,6 +30,11 @@ function makeCtx(overrides: any = {}) {
     commentDraft: '',
     noteOverrides: {},
     columnMenuFacetValues: [],
+    // The values currently SHOWN, i.e. after the search box narrows the list.
+    // Equal to `columnMenuFacetValues` when nothing is typed; the facet
+    // select-all reads both to tell "all" from "all results" apart.
+    columnMenuVisibleFacets: overrides.columnMenuVisibleFacets ??
+      overrides.columnMenuFacetValues ?? [],
     showColumnFiltersEffective: true,
     showFilterRowEffective: false,
     scrollContainer: null,
@@ -429,6 +434,44 @@ describe('createMenus - facet checkboxes', () => {
     m.toggleAllFacets('team') // was subset -> remove filter (all)
     expect(ctx.valueFilters.team).toBeUndefined()
   })
+
+  describe('with a search query narrowing the list', () => {
+    // "Select all" means the RESULTS while a query is typed, the way it does
+    // in a spreadsheet. It used to mean the whole column regardless: with
+    // everything ticked (the default) it read as "on" and the click cleared
+    // the entire selection instead of keeping the matches.
+    const searched = (extra: any = {}) =>
+      makeCtx({
+        columnMenuFacetValues: ['Ada', 'Alan', 'Bram'],
+        columnMenuVisibleFacets: ['Ada', 'Alan'],
+        ...extra,
+      })
+
+    it('selects only the matches instead of clearing everything', () => {
+      const ctx = searched()
+      const m = createMenus(ctx)
+      // Default state is "all ticked", so the box shows checked for the
+      // matches; clicking it unticks THEM and leaves the rest alone.
+      expect(m.isAllFacetsChecked('team')).toBe(true)
+      m.toggleAllFacets('team')
+      expect([...ctx.valueFilters.team].sort()).toEqual(['Bram'])
+    })
+
+    it('ticking it back adds the matches to the existing selection', () => {
+      const ctx = searched({ valueFilters: { team: new Set(['Bram']) } })
+      const m = createMenus(ctx)
+      expect(m.isAllFacetsChecked('team')).toBe(false)
+      m.toggleAllFacets('team')
+      expect([...ctx.valueFilters.team].sort()).toEqual(['Ada', 'Alan', 'Bram'])
+    })
+
+    it('reports checked only when every match is selected', () => {
+      const partial = searched({ valueFilters: { team: new Set(['Ada']) } })
+      expect(createMenus(partial).isAllFacetsChecked('team')).toBe(false)
+      const both = searched({ valueFilters: { team: new Set(['Ada', 'Alan']) } })
+      expect(createMenus(both).isAllFacetsChecked('team')).toBe(true)
+    })
+  })
 })
 
 describe('createMenus - clearColumnFilter', () => {

package/src/menus.ts

@@ -151,7 +151,7 @@ export function createMenus<
   function openChooseColumns(event: MouseEvent) {
     event.stopPropagation();
     // Submenu behavior: keep the parent operations menu open and float the
-    // Choose Columns panel out to the right of it (AG-Grid style). Falls
+    // Choose Columns panel out to the right of it, submenu-style. Falls
     // back to below the item if the popover would clip the viewport.
     const trigger = event.currentTarget as HTMLElement;
     const menuEl = trigger.closest(".sv-grid-menu") as HTMLElement | null;
@@ -294,19 +294,49 @@ export function createMenus<
     ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set(next) };
   }
 
+  /**
+   * With a search query typed, "select all" means the RESULTS - the same thing
+   * it means in a spreadsheet. It used to mean the whole column regardless, so
+   * the standard flow (type a query, tick select-all, get just the matches)
+   * cleared the entire selection instead: `isAllFacetsChecked` saw every value
+   * ticked, read that as "on", and turned everything off.
+   */
   function isAllFacetsChecked(columnId: string) {
     const selected = ctx.valueFilters[columnId];
-    return !selected || selected.size >= ctx.columnMenuFacetValues.length;
+    const visible = ctx.columnMenuVisibleFacets as Array<string>;
+    const searching = visible.length !== ctx.columnMenuFacetValues.length;
+    if (!selected) return true;
+    if (searching) return visible.every((value) => selected.has(value));
+    return selected.size >= ctx.columnMenuFacetValues.length;
   }
 
   function toggleAllFacets(columnId: string) {
-    if (isAllFacetsChecked(columnId)) {
-      ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set<string>() };
-    } else {
-      const copy = { ...ctx.valueFilters };
-      delete copy[columnId];
-      ctx.valueFilters = copy;
+    const visible = ctx.columnMenuVisibleFacets as Array<string>;
+    const all = ctx.columnMenuFacetValues as Array<string>;
+    const searching = visible.length !== all.length;
+    const on = isAllFacetsChecked(columnId);
+
+    if (!searching) {
+      if (on) {
+        ctx.valueFilters = { ...ctx.valueFilters, [columnId]: new Set<string>() };
+      } else {
+        const copy = { ...ctx.valueFilters };
+        delete copy[columnId];
+        ctx.valueFilters = copy;
+      }
+      return;
+    }
+    // Searching: add or remove just the matches, leaving the rest of the
+    // selection alone. An absent entry means "everything", so it has to be
+    // materialized before a subtraction can mean anything.
+    const current = ctx.valueFilters[columnId]
+      ? new Set<string>(ctx.valueFilters[columnId])
+      : new Set<string>(all);
+    for (const value of visible) {
+      if (on) current.delete(value);
+      else current.add(value);
     }
+    ctx.valueFilters = { ...ctx.valueFilters, [columnId]: current };
   }
 
   function clearColumnFilter(columnId: string) {