Add section search

Author: mayagbarnes

README.md

@@ -598,6 +598,17 @@ When `interactive=True`, hovering over the top-right of the toolbar reveals util
 
 In **locked mode**, Reset, Swap, and config import/export are hidden. `Export Data` remains available as a viewer action. The Settings gear remains visible, its popover shows read-only display status plus group expand/collapse actions, and header-menu sorting, filtering, and `Show Values As` stay enabled.
 
+### Toolbar Field Search
+
+When a toolbar picker has more than **8 available fields**, the `Rows`, `Columns`, or `Values` dropdown automatically shows a field search input at the top of the panel.
+
+- Typing filters the available field list in place.
+- `ArrowDown` from the search box moves focus into the first matching option.
+- `Escape` closes the dropdown, even when the current query has zero matches.
+- In the `Values` dropdown, search only filters the field checklist. Synthetic-measure actions and per-measure aggregation controls remain visible below it.
+
+This is a frontend-only convenience feature; no Python parameter is needed to enable it.
+
 ### Drag-and-Drop Field Configuration
 
 When `interactive=True`, each chip in the Rows, Columns, and Values toolbar zones has a **grip-dots drag handle** on its left side. Drag chips to:

e2e_playwright/pivot_table_interactions_test.py

@@ -306,7 +306,9 @@ def test_date_hierarchy_supports_drill_week_and_original(page_at_app: Page):
 
     menu = open_header_menu(
         page,
-        container.get_by_test_id("header-menu-trigger-order_date").first,
+        container.locator("th")
+        .filter(has_text="2024-W01")
+        .get_by_test_id("header-menu-trigger-order_date"),
         "header-menu-order_date",
     )
     grain_select = menu.get_by_test_id("header-date-grain")

streamlit_app.py

@@ -39,6 +39,12 @@
 _DATA_DIR = Path(__file__).parent / "tests" / "golden_data"
 df = pd.read_csv(_DATA_DIR / "small.csv")
 df_medium = pd.read_csv(_DATA_DIR / "medium.csv")
+df_field_search = df_medium.assign(
+    Cost=(df_medium["Revenue"] - df_medium["Profit"]).round(2),
+    RevenuePerUnit=(df_medium["Revenue"] / df_medium["Units"]).round(2),
+    DiscountAmount=(df_medium["Revenue"] * df_medium["Discount"]).round(2),
+    ProfitMargin=(df_medium["Profit"] / df_medium["Revenue"]).round(3),
+)
 
 _rnd.seed(42)
 _date_regions = ["US", "EU", "APAC"]
@@ -141,6 +147,29 @@
     key="basic_auto_detect",
 )
 
+st.markdown("#### Toolbar Field Search")
+st.markdown(
+    """
+The toolbar adds a **field search input** automatically when a picker has more than
+8 available fields. This wider demo includes enough dimensions and numeric measures
+to surface search in the **Rows**, **Columns**, and **Values** dropdowns.
+
+**Try it:**
+- Open **Rows**, **Columns**, or **Values** and type part of a field name.
+- Press **ArrowDown** from the search box to jump into the filtered list.
+- Press **Escape** to close the dropdown.
+"""
+)
+st_pivot_table(
+    df_field_search,
+    key="basic_field_search",
+    rows=["Region"],
+    columns=["Year"],
+    values=["Revenue"],
+    interactive=True,
+    show_totals=True,
+)
+
 
 # ---------------------------------------------------------------------------
 # Section 2: Multiple Measures and Sorting

streamlit_pivot/frontend/src/config/Toolbar.module.css

@@ -132,11 +132,13 @@
   z-index: 20;
   max-height: 240px;
   overflow: auto;
-  padding: 4px;
+  padding: 6px 0;
   background: var(--st-background-color);
   border: 1px solid var(--st-border-color);
   border-radius: var(--st-base-radius);
   box-shadow: var(--pivot-dropdown-shadow, 0 6px 18px rgba(0, 0, 0, 0.08));
+  font-family: var(--st-font);
+  font-size: 0.75rem;
 }
 
 .valuesDropdownPanel {
@@ -149,10 +151,10 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 8px;
+  padding: 3px 7px;
   border-radius: calc(var(--st-base-radius) - 2px);
   cursor: pointer;
-  font-size: 0.75em;
+  font-size: 1em;
   white-space: nowrap;
   color: var(--st-text-color);
   border: none;
@@ -213,6 +215,40 @@
   text-align: center;
 }
 
+.fieldSearchWrapper {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: 0 0 4px;
+  padding: 2px 6px;
+  background: var(--st-background-color);
+}
+
+.fieldSearchInput {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px 7px;
+  border: 1px solid var(--st-border-color);
+  border-radius: calc(var(--st-base-radius) - 2px);
+  background: var(--st-background-color);
+  color: var(--st-text-color);
+  font-family: var(--st-font);
+  font-size: 1em;
+  outline: none;
+}
+
+.fieldSearchInput:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-primary-color) 50%, transparent);
+  outline: none;
+}
+
+.noSearchResults {
+  padding: 8px;
+  font-size: 0.78em;
+  opacity: 0.55;
+  text-align: center;
+}
+
 /* --- Chips row (shows selected items below section header) --- */
 
 .chipRow {

streamlit_pivot/frontend/src/config/Toolbar.test.tsx

@@ -16,13 +16,36 @@
  */
 
 import { describe, expect, it, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import Toolbar, { applyDragMove } from "./Toolbar";
 import { PivotData, type DataRecord } from "../engine/PivotData";
 import { makeConfig } from "../test-utils";
 
 const ALL_COLUMNS = ["region", "year", "revenue", "profit", "category"];
 const NUMERIC_COLUMNS = ["revenue", "profit"];
+const MANY_FIELDS = [
+  "region",
+  "year",
+  "category",
+  "segment",
+  "state",
+  "city",
+  "country",
+  "quarter",
+  "month",
+  "channel",
+];
+const MANY_NUMERIC_COLUMNS = [
+  "revenue",
+  "profit",
+  "cost",
+  "margin",
+  "units",
+  "discount",
+  "tax",
+  "freight",
+  "returns",
+];
 
 describe("Toolbar - rendering", () => {
   it("renders toolbar with data-testid", () => {
@@ -466,6 +489,162 @@ describe("Toolbar - interactions", () => {
   });
 });
 
+describe("Toolbar - field search", () => {
+  it("does not render search input when options are at or below the threshold", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ rows: [] })}
+        allColumns={ALL_COLUMNS}
+        numericColumns={NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-rows-select"));
+    expect(screen.queryByTestId("toolbar-rows-search")).not.toBeInTheDocument();
+  });
+
+  it("renders search input above threshold and filters options", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ rows: [] })}
+        allColumns={MANY_FIELDS}
+        numericColumns={NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-rows-select"));
+    const search = screen.getByTestId("toolbar-rows-search");
+    expect(search).toBeInTheDocument();
+
+    fireEvent.change(search, { target: { value: "cat" } });
+    expect(
+      screen.getByTestId("toolbar-rows-option-category"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("toolbar-rows-option-region"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.change(search, { target: { value: "" } });
+    expect(
+      screen.getByTestId("toolbar-rows-option-region"),
+    ).toBeInTheDocument();
+  });
+
+  it("does not move focus into the search input when the dropdown opens", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ rows: [] })}
+        allColumns={MANY_FIELDS}
+        numericColumns={NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    const trigger = screen.getByTestId("toolbar-rows-select");
+    trigger.focus();
+    fireEvent.click(trigger);
+    const search = screen.getByTestId("toolbar-rows-search");
+
+    expect(trigger).toHaveFocus();
+    expect(search).not.toHaveFocus();
+  });
+
+  it("closes the dropdown on Escape even when search yields zero results", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ rows: [] })}
+        allColumns={MANY_FIELDS}
+        numericColumns={NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-rows-select"));
+    const search = screen.getByTestId("toolbar-rows-search");
+    fireEvent.change(search, { target: { value: "zzz" } });
+
+    expect(
+      screen.getByTestId("toolbar-rows-no-search-results"),
+    ).toBeInTheDocument();
+    fireEvent.keyDown(search, { key: "Escape" });
+    expect(screen.queryByTestId("toolbar-rows-panel")).not.toBeInTheDocument();
+  });
+
+  it("moves focus to the first option on ArrowDown from the search input", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ rows: [] })}
+        allColumns={MANY_FIELDS}
+        numericColumns={NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-rows-select"));
+    const search = screen.getByTestId("toolbar-rows-search");
+    const firstOption = screen.getByTestId("toolbar-rows-option-region");
+
+    search.focus();
+    fireEvent.keyDown(search, { key: "ArrowDown" });
+    expect(firstOption).toHaveFocus();
+  });
+
+  it("filters value-field options without hiding synthetic or aggregation controls", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ values: ["revenue", "profit"] })}
+        allColumns={[...MANY_FIELDS, ...MANY_NUMERIC_COLUMNS]}
+        numericColumns={MANY_NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-values-select"));
+    const search = screen.getByTestId("toolbar-values-search");
+    fireEvent.change(search, { target: { value: "tax" } });
+
+    expect(screen.getByTestId("toolbar-values-option-tax")).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("toolbar-values-option-revenue"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByTestId("toolbar-values-add-synthetic"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("toolbar-values-aggregation-controls"),
+    ).toBeInTheDocument();
+  });
+
+  it("clears the values search when opening the synthetic measure builder", () => {
+    render(
+      <Toolbar
+        config={makeConfig({ values: ["revenue", "profit"] })}
+        allColumns={[...MANY_FIELDS, ...MANY_NUMERIC_COLUMNS]}
+        numericColumns={MANY_NUMERIC_COLUMNS}
+        onConfigChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toolbar-values-select"));
+    fireEvent.change(screen.getByTestId("toolbar-values-search"), {
+      target: { value: "tax" },
+    });
+    fireEvent.click(screen.getByTestId("toolbar-values-add-synthetic"));
+
+    expect(
+      screen.queryByTestId("toolbar-values-panel"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("toolbar-values-select"));
+    expect(screen.getByTestId("toolbar-values-search")).toHaveValue("");
+    expect(
+      screen.getByTestId("toolbar-values-option-revenue"),
+    ).toBeInTheDocument();
+  });
+});
+
 describe("Toolbar - reset", () => {
   it("shows reset button when config differs from initial", () => {
     const initial = makeConfig({ aggregation: "sum" });