@crisp-ui-kit/crisp 0.54.7 → 0.54.9

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,10 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, ChevronDown, ChevronLeft, ChevronRight, CircleHelp, Download, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, Upload, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
+import { DatePicker, } from "../datepicker/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
+// #592: shared by every direction-bearing ChevronRight usage below (the
+// field picker's own disclosure chevron, a flattened search result's
+// breadcrumb separator, and a filter chip's own breadcrumb separator) so
+// the RTL mirror attribute lives in exactly one JSX tag — build/spec-check
+// .mjs's icon sweep counts that attribute per icon NAME across the whole
+// file, not per call site, and three independently attributed tags for
+// the same name over-counts against that (it expects one per name).
+const RtlChevronRight = ({ size, className, }) => (_jsx(ChevronRight, { "data-rtl-flip": "", size: size, strokeWidth: 1.75, className: className }));
 const OP_LABELS = {
     contains: "contains",
     doesnotcontain: "does not contain",
@@ -21,11 +30,24 @@ const OP_LABELS = {
     // review.
     empty: "empty",
     notempty: "not empty",
+    lessthan: "less than",
+    greaterthan: "greater than",
+    before: "before",
+    after: "after",
 };
 // #619: order and label set match Attio's own text-filter operator picker
 // verbatim (measured live, per RecordsTable's own #578 port of the same
 // set: contains · does not contain · starts with · ends with · is · is not ·
-// empty · not empty).
+// empty · not empty). #593: number and date columns get their OWN shorter
+// sets instead — also measured live (`app.attio.com`, a Twitter follower
+// count / Foundation date column, each filter added then discarded): number
+// is "is / is not / less than / greater than / empty / not empty" (104.86px
+// wide, 6 rows); date is "is / is not / before / after / empty / not empty"
+// (91.16px, 6 rows) — both narrower than the text set's own 156.5px, which
+// is why `.crisp-tabletoolbar-menu--op`'s old fixed 134px floor is gone (see
+// tabletoolbar.recipe.ts): every one of these three sets is real, live-
+// measured content-driven width, and a floor sized for one of them
+// overshoots the other two.
 const OP_ORDER = [
     "contains",
     "doesnotcontain",
@@ -36,15 +58,79 @@ const OP_ORDER = [
     "empty",
     "notempty",
 ];
+const NUMBER_OP_ORDER = [
+    "is",
+    "isnot",
+    "lessthan",
+    "greaterthan",
+    "empty",
+    "notempty",
+];
+const DATE_OP_ORDER = [
+    "is",
+    "isnot",
+    "before",
+    "after",
+    "empty",
+    "notempty",
+];
+// #715: a closed-vocabulary column (GRC Audit's Action/Entity, e.g.) gets
+// its own shorter set too — the text set's `contains`/`starts with`/… mean
+// nothing against a fixed value list. Reuses the already-measured `is`/
+// `is not`/`empty`/`not empty` labels and the same "is/isnot before the
+// type-specific pair, empty/notempty last" ordering every other set here
+// follows — not an independent pixel measurement the way #593's number/date
+// sets were (a live re-check of Attio's own select-column filter menu is
+// still open, see the PR).
+const SELECT_OP_ORDER = ["is", "isnot", "empty", "notempty"];
 // "isanyof" is appended only for a column that supplies `values` — there is
-// nothing to check off otherwise.
-const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
+// nothing to check off otherwise. A column's `type` picks the base set
+// first; "isanyof" can still follow any of the four (a column's own
+// declared values aren't tied to its underlying number/date/text/select
+// kind).
+const opsFor = (col) => {
+    const base = col?.type === "number"
+        ? NUMBER_OP_ORDER
+        : col?.type === "date"
+            ? DATE_OP_ORDER
+            : col?.type === "select"
+                ? SELECT_OP_ORDER
+                : OP_ORDER;
+    return col?.values?.length ? [...base, "isanyof"] : base;
+};
+// #592: a condition's `key` is either a plain top-level column key, or a
+// dot-joined path into `nestedColumns` ("team.twitterFollowerCount"). Walks
+// the path one segment at a time, descending into each match's own
+// `nestedColumns` for the next — returns the resolved column at each step,
+// in order, so a caller has both the LEAF (its own `type`/`values`/`icon`
+// govern the operator set and value editor, unchanged from a plain column)
+// and the FULL PATH (for the breadcrumb the field segment/picker render).
+// Empty when any segment fails to resolve, rather than a partial path — a
+// stale key (its column was removed upstream) should render as "unknown",
+// not as whatever prefix still happens to match.
+const resolveColumnPath = (cols, key) => {
+    const segments = key.split(".");
+    const path = [];
+    let list = cols;
+    for (const seg of segments) {
+        const found = list.find((c) => c.key === seg);
+        if (!found)
+            return [];
+        path.push(found);
+        list = found.nestedColumns ?? [];
+    }
+    return path;
+};
 const opNeedsValue = (op) => op === "contains" ||
     op === "doesnotcontain" ||
     op === "startswith" ||
     op === "endswith" ||
     op === "is" ||
-    op === "isnot";
+    op === "isnot" ||
+    op === "lessthan" ||
+    op === "greaterthan" ||
+    op === "before" ||
+    op === "after";
 const opNeedsValues = (op) => op === "isanyof";
 // "Department is any of IT, Finance" past two values becomes "… +N": the
 // chip is one line, and a field can have far more than two facet values.
@@ -59,9 +145,10 @@ const asText = (v) => {
         return v.join(", ");
     // Before the generic object branch, which would look for `.name`, find none
     // and return "" — turning every Date into the empty string (#185). The ISO
-    // date is stable and locale-independent, so `contains "2026-06"` works; it
-    // will not match "16/06/2026", and a date-aware operator set needs a
-    // date-picker UI, which has to be measured before it can be built.
+    // date is stable and locale-independent, so `contains "2026-06"` works and
+    // (#593) so does `is`/`is not` against a `type: "date"` column's own ISO
+    // condition value — `before`/`after` get a real chronological compare
+    // instead, below.
     if (v instanceof Date)
         return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
     if (typeof v === "object") {
@@ -70,13 +157,67 @@ const asText = (v) => {
     }
     return String(v);
 };
+// #593: `lessthan`/`greaterthan` (number columns) and `before`/`after` (date
+// columns) need a real numeric/chronological compare, not `asText`'s string
+// one — `null` on anything that doesn't parse, so a condition against a
+// malformed or missing value never matches rather than throwing.
+const toNumberOrNull = (v) => {
+    if (typeof v === "number")
+        return Number.isNaN(v) ? null : v;
+    if (typeof v === "string" && v.trim() !== "") {
+        const n = Number(v);
+        return Number.isNaN(n) ? null : n;
+    }
+    return null;
+};
+const toDateOrNull = (v) => {
+    if (v instanceof Date)
+        return Number.isNaN(v.getTime()) ? null : v;
+    if (typeof v === "string" || typeof v === "number") {
+        const d = new Date(v);
+        return Number.isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+};
+// A `type: "date"` condition's own value is stored as a plain ISO date
+// string ("2026-09-25") — machine-comparable (`before`/`after` above,
+// `is`/`is not` via `asText`) and locale-independent, the same choice #185
+// already made for `asText`'s own `Date` branch. Parsed/formatted at local
+// midnight, not UTC, so the picked calendar day and the displayed day are
+// always the same one regardless of timezone offset.
+const isoToDate = (iso) => {
+    if (!iso)
+        return null;
+    const d = new Date(`${iso}T00:00:00`);
+    return Number.isNaN(d.getTime()) ? null : d;
+};
+const dateToISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+// e.g. "Sep 25, 2026" — the same format `DatePickerField`'s own default
+// uses, and what Attio's chip itself showed after picking "Today" live.
+const formatFilterDate = (iso) => {
+    const d = isoToDate(iso);
+    return d
+        ? d.toLocaleDateString(undefined, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        })
+        : iso;
+};
+const toDatePickerDate = (d) => ({
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate(),
+});
+const fromDatePickerDate = (d) => new Date(d.year, d.month - 1, d.day);
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
  * at `row[key]` (override with `get` for derived fields) — never a formatted
  * display string, so a grouped-thousands "$1,200" still matches "1200".
  */
 export function applyFilters(rows, filters, get = (row, key) => row[key]) {
-    const active = filters.filter((f) => (!opNeedsValue(f.op) || f.value.trim() !== "") &&
+    const active = filters.filter((f) => f.op != null &&
+        (!opNeedsValue(f.op) || f.value.trim() !== "") &&
         (!opNeedsValues(f.op) || (f.values?.length ?? 0) > 0));
     if (!active.length)
         return rows;
@@ -86,6 +227,20 @@ export function applyFilters(rows, filters, get = (row, key) => row[key]) {
             return isEmptyValue(raw);
         if (f.op === "notempty")
             return !isEmptyValue(raw);
+        if (f.op === "lessthan" || f.op === "greaterthan") {
+            const n = toNumberOrNull(raw);
+            const cn = toNumberOrNull(f.value);
+            if (n == null || cn == null)
+                return false;
+            return f.op === "lessthan" ? n < cn : n > cn;
+        }
+        if (f.op === "before" || f.op === "after") {
+            const d = toDateOrNull(raw);
+            const cd = toDateOrNull(f.value);
+            if (d == null || cd == null)
+                return false;
+            return f.op === "before" ? d < cd : d > cd;
+        }
         const t = asText(raw).toLowerCase();
         if (f.op === "isanyof")
             return (f.values ?? []).some((v) => v.toLowerCase() === t);
@@ -144,7 +299,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -171,6 +326,12 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const reorderAttributeLabel = useCrispMessage(reorderAttributeLabelProp, "Reorder attribute");
     const addAttributeToViewLabel = useCrispMessage(addAttributeToViewLabelProp, "Add attribute to view");
     const searchAttributesPlaceholder = useCrispMessage(searchAttributesPlaceholderProp, "Search attributes…");
+    const importExportLabel = useCrispMessage(importExportLabelProp, "Import / Export");
+    const importCsvLabel = useCrispMessage(importCsvLabelProp, "Import CSV");
+    const exportCsvLabel = useCrispMessage(exportCsvLabelProp, "Export view as CSV");
+    const exportExcelLabel = useCrispMessage(exportExcelLabelProp, "Export view as Excel");
+    const learnImportExportLabel = useCrispMessage(learnImportExportLabelProp, "Learn about imports and exports");
+    const backLabel = useCrispMessage(backLabelProp, "Back");
     // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
     // their own — a whole lookup table, not one string — so they translate
     // straight from the provider's dictionary at the two spots they render
@@ -211,6 +372,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
+    // #592: which nested scope the Filter field picker is currently drilled
+    // into -- [] is the top level, [team] is inside Team's own attributes,
+    // [team, company] is Team -> Company, etc. Reset to [] wherever
+    // `filterQuery` already resets (opening the picker fresh), same lifetime.
+    const [fieldPickerPath, setFieldPickerPath] = React.useState([]);
     // filters the "isanyof" checkbox list, same lifetime as filterQuery above
     const [anyOfQuery, setAnyOfQuery] = React.useState("");
     const [dragAttr, setDragAttr] = React.useState(null);
@@ -278,11 +444,29 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     };
     const addFilter = (key) => {
         const id = `f${Date.now()}${Math.random().toString(36).slice(2, 6)}`;
-        putFilters([...filters, { id, key, op: "contains", value: "" }]);
+        putFilters([...filters, { id, key, value: "" }]);
         setFilterQuery("");
-        setOpenMenu(`fcond:${id}`);
+        // matches Attio: picking a field opens the operator menu next, not a
+        // combined dialog — measured live, 2026-09-25.
+        setOpenMenu(`fop:${id}`);
     };
     const patchFilter = (id, patch) => putFilters(filters.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+    // The field segment's own picker (#462 follow-up): changing the field
+    // replaces it in place — confirmed live, one chip, not a second — and
+    // resets op/value/values, since neither is guaranteed to make sense for
+    // the new field's type (a text op on a select field, e.g.).
+    const changeFilterField = (id, key) => {
+        patchFilter(id, { key, op: undefined, value: "", values: undefined });
+        setFilterQuery("");
+        setOpenMenu(`fop:${id}`);
+    };
+    // The operator segment's own menu: picking an operator that needs a value
+    // auto-opens the value popover, focused; "empty"/"not empty" need nothing
+    // further, so the menu just closes — both measured live, 2026-09-25.
+    const pickOp = (id, op) => {
+        patchFilter(id, { op });
+        setOpenMenu(opNeedsValue(op) || opNeedsValues(op) ? `fval:${id}` : null);
+    };
     const removeFilter = (id) => {
         putFilters(filters.filter((c) => c.id !== id));
         setOpenMenu(null);
@@ -321,6 +505,66 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         close: () => setOpenMenu(null),
         contentRef: kebabMenuRef,
     });
+    // The operator popover is `role="menu"` too — confirmed live, 2026-09-25 —
+    // so it gets the same shared keyboard model as the kebab above, one hook
+    // call tracking whichever condition's operator menu is open.
+    const opMenuRef = React.useRef(null);
+    const { onKeyDown: onOpKeyDown } = useMenuKeyboard({
+        open: typeof openMenu === "string" && openMenu.startsWith("fop:"),
+        close: () => setOpenMenu(null),
+        contentRef: opMenuRef,
+    });
+    // The Import/Export menu is `role="menu"` too — confirmed live, 2026-09-25
+    // (an `<a>`/`<div>` mix, each `role="menuitem"`, two `role="separator"`
+    // dividers between the 3 groups) — same shared keyboard model.
+    const importExportMenuRef = React.useRef(null);
+    const { onKeyDown: onImportExportKeyDown } = useMenuKeyboard({
+        open: openMenu === "importexport",
+        close: () => setOpenMenu(null),
+        contentRef: importExportMenuRef,
+    });
+    // Shared between the "Filter" trigger's own add-condition picker and each
+    // chip's field segment (#462 follow-up) — both search the same
+    // `filterColumns` list and differ only in what a pick does. #592: also
+    // handles drilling into a `nestedColumns` column — `fieldPickerPath`
+    // tracks the current scope ([] is the top level), reset to [] wherever
+    // the picker opens fresh (both trigger onClicks, above).
+    const filterFieldPicker = (onSelect) => {
+        const scope = fieldPickerPath.at(-1);
+        const scopeColumns = scope ? (scope.nestedColumns ?? []) : filterColumns;
+        const query = filterQuery.trim().toLowerCase();
+        const direct = scopeColumns.filter((c) => c.label.toLowerCase().includes(query));
+        // #592: one level of flattening from wherever the picker is currently
+        // scoped — a nested column's own children get searched too, and a
+        // match renders breadcrumbed, alongside this level's direct matches.
+        // Matches the one case measured live at the TOP level ("Twitter
+        // follower" surfaces both the direct field and "Team › Twitter
+        // follower count"); applying the identical rule recursively from an
+        // already-drilled-into scope (so it also reaches Team → Company → X
+        // while already browsing inside Team) is the same construct, one level
+        // relative to wherever you are, but wasn't independently re-verified
+        // live from inside a nested scope — flagged on the PR.
+        const nested = query
+            ? scopeColumns.flatMap((c) => (c.nestedColumns ?? [])
+                .filter((n) => n.label.toLowerCase().includes(query))
+                .map((n) => ({ parent: c, col: n })))
+            : [];
+        const selectPath = (path) => onSelect(path.map((c) => c.key).join("."));
+        const drillIn = (col) => {
+            setFieldPickerPath([...fieldPickerPath, col]);
+            setFilterQuery("");
+        };
+        return (_jsxs(_Fragment, { children: [scope ? (_jsxs("div", { className: "crisp-tabletoolbar-menu-nesthead", children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-menu-back", "aria-label": backLabel, onClick: () => {
+                                setFieldPickerPath(fieldPickerPath.slice(0, -1));
+                                setFilterQuery("");
+                            }, children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }), _jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: nestedFieldPlaceholder
+                                ? nestedFieldPlaceholder(scope.nestedObjectLabel ?? scope.label.toLowerCase())
+                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": filterFieldLabel, 
+                            // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                    // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })), scope && (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath(fieldPickerPath), children: [scope.icon ? (_jsx(scope.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), scope.label] })), direct.map((col) => col.nestedColumns?.length ? (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--expand", onClick: () => drillIn(col), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label, _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-chevron" })] }, col.key)) : (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key))), nested.map(({ parent, col }) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, parent, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), _jsxs("span", { className: "crisp-tabletoolbar-menu-item-path", children: [_jsx("span", { className: "crisp-tabletoolbar-menu-item-path-parent", children: parent.label }), _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-path-sep" }), _jsx("span", { children: col.label })] })] }, `${parent.key}.${col.key}`)))] }));
+    };
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template — crisp/#471's
@@ -335,7 +579,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         : sorts.length
             ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -357,47 +601,106 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                     label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => {
+                                setFieldPickerPath([]);
+                                setOpenMenu(openMenu === "filter" ? null : "filter");
+                            }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `${filterLabel} · ${activeFilters}`
-                                        : filterLabel] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
-                                    // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
-                                    .filter((col) => col.label
-                                    .toLowerCase()
-                                    .includes(filterQuery.trim().toLowerCase()))
-                                    .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
-                    const col = filterColumns.find((c) => c.key === cond.key);
-                    const open = openMenu === `fcond:${cond.id}`;
+                                        : filterLabel] }), openMenu === "filter" && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker(addFilter) }))] }), filters.map((cond) => {
+                    // #592: cond.key may be a dot-joined nested path
+                    // ("team.twitterFollowerCount") — resolve the full path so the
+                    // field segment can render its breadcrumb; `col` (the leaf) still
+                    // drives the operator set and value editor exactly as before, for
+                    // both a plain and a nested key.
+                    const colPath = resolveColumnPath(filterColumns, cond.key);
+                    const col = colPath.at(-1);
+                    const fieldOpen = openMenu === `ffield:${cond.id}`;
+                    const opOpen = openMenu === `fop:${cond.id}`;
+                    const valOpen = openMenu === `fval:${cond.id}`;
                     const kebabOpen = openMenu === `fkebab:${cond.id}`;
-                    const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
+                    // Gates the field/value segments' background (white once the
+                    // condition is usable, the measured `f6f7f7` otherwise) — NOT
+                    // whether the value popover renders; see `showValueSeg` below.
+                    const complete = cond.op != null &&
+                        (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
-                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [_jsx(Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
-                                        // biome-ignore lint/a11y/noAutofocus: focus the value field
-                                        autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
-                                                // biome-ignore lint/a11y/noAutofocus: focus the search field
-                                                autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
-                                                .filter((v) => v
-                                                .toLowerCase()
-                                                .includes(anyOfQuery.trim().toLowerCase()))
-                                                .map((v) => {
-                                                const checked = (cond.values ?? []).includes(v);
-                                                return (_jsx(MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
-                                                        const set = new Set(cond.values ?? []);
-                                                        if (next)
-                                                            set.add(v);
-                                                        else
-                                                            set.delete(v);
-                                                        // the column's own order, not click order —
-                                                        // what the chip summary reads out
-                                                        patchFilter(cond.id, {
-                                                            values: col.values?.filter((x) => set.has(x)),
-                                                        });
-                                                    }, children: v }, v));
-                                            })] }))] }))] }, cond.id));
-                }), _jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
+                    // No value segment at all for "empty"/"not empty" (nothing to
+                    // show) or before an operator is even chosen — matches Attio,
+                    // which never renders a third box in either case.
+                    const showValueSeg = cond.op != null &&
+                        (opNeedsValue(cond.op) || opNeedsValues(cond.op));
+                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fcond", "data-complete": complete ? "" : undefined, children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--field", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": fieldOpen, onClick: () => {
+                                            setFieldPickerPath([]);
+                                            setOpenMenu(fieldOpen ? null : `ffield:${cond.id}`);
+                                        }, children: [col?.icon ? _jsx(col.icon, { size: 14, strokeWidth: 1.75 }) : null, colPath.length > 1 ? (_jsx("span", { className: "crisp-tabletoolbar-fcond-path", children: colPath.map((c, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), _jsx("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : (col?.label)] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op
+                                            ? (crispMessages[OP_LABELS[cond.op]] ?? OP_LABELS[cond.op])
+                                            : selectConditionLabel }), showValueSeg && (_jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--val", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": valOpen, onClick: () => setOpenMenu(valOpen ? null : `fval:${cond.id}`), children: cond.op === "isanyof"
+                                            ? cond.values?.length
+                                                ? isAnyOfSummary(cond.values)
+                                                : filterValuePlaceholder
+                                            : cond.value.trim()
+                                                ? col?.type === "date"
+                                                    ? formatFilterDate(cond.value)
+                                                    : cond.value
+                                                : filterValuePlaceholder })), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--kebab", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [_jsx(Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), fieldOpen && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker((key) => changeFilterField(cond.id, key)) })), opOpen && (_jsx("div", { ref: opMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "menu", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, onKeyDown: onOpKeyDown, children: opsFor(col).map((op) => (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => pickOp(cond.id, op), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))) })), valOpen && showValueSeg && (_jsx("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--val", role: "dialog", "aria-label": `${col?.label} filter value`, children: cond.op === "isanyof" && col?.values ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                            // biome-ignore lint/a11y/noAutofocus: focus the search field
+                                            autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                            .filter((v) => v
+                                            .toLowerCase()
+                                            .includes(anyOfQuery.trim().toLowerCase()))
+                                            .map((v) => {
+                                            const checked = (cond.values ?? []).includes(v);
+                                            return (_jsx(MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
+                                                    const set = new Set(cond.values ?? []);
+                                                    if (next)
+                                                        set.add(v);
+                                                    else
+                                                        set.delete(v);
+                                                    // the column's own order, not click order —
+                                                    // what the chip summary reads out
+                                                    patchFilter(cond.id, {
+                                                        values: col.values?.filter((x) => set.has(x)),
+                                                    });
+                                                }, children: v }, v));
+                                        })] })) : col?.type === "select" &&
+                                    col?.values &&
+                                    (cond.op === "is" || cond.op === "isnot") ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                            // biome-ignore lint/a11y/noAutofocus: focus the search field
+                                            autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                            .filter((v) => v
+                                            .toLowerCase()
+                                            .includes(anyOfQuery.trim().toLowerCase()))
+                                            .map((v) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.value === v ? "" : undefined, onClick: () => {
+                                                patchFilter(cond.id, { value: v });
+                                                setOpenMenu(null);
+                                            }, children: [v, cond.value === v ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, v)))] })) : col?.type === "date" ? (_jsxs("div", { className: "crisp-tabletoolbar-datepop", children: [_jsx(DatePicker, { ...{
+                                                selectionMode: "single",
+                                                value: isoToDate(cond.value)
+                                                    ? toDatePickerDate(isoToDate(cond.value))
+                                                    : undefined,
+                                                onValueChange: (next) => {
+                                                    if (!next)
+                                                        return;
+                                                    patchFilter(cond.id, {
+                                                        value: dateToISO(fromDatePickerDate(next)),
+                                                    });
+                                                    setOpenMenu(null);
+                                                },
+                                            } }), _jsx("div", { className: "crisp-tabletoolbar-datepop-presets", children: [
+                                                [crispMessages.Today ?? "Today", 0],
+                                                [crispMessages.Tomorrow ?? "Tomorrow", 1],
+                                                [crispMessages["Next week"] ?? "Next week", 7],
+                                            ].map(([label, addDays]) => (_jsx("button", { type: "button", className: "crisp-tabletoolbar-datepop-preset", onClick: () => {
+                                                    const d = new Date();
+                                                    d.setDate(d.getDate() + addDays);
+                                                    patchFilter(cond.id, { value: dateToISO(d) });
+                                                    setOpenMenu(null);
+                                                }, children: label }, label))) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", type: col?.type === "number" ? "number" : "text", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                                    // biome-ignore lint/a11y/noAutofocus: focus the value field
+                                    autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })) }))] }, cond.id));
+                }), showViewSettings && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
                                 if (openMenu === "viewsettings") {
                                     setOpenMenu(null);
                                 }
@@ -421,7 +724,20 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                 moveAttr(dragAttr, i);
                                             setDragAttr(null);
                                         }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                    onExportCsv ||
+                    onExportExcel ||
+                    importExportHelpHref) && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [_jsx(Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && (_jsxs("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onImportCsv();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onExportCsv();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onExportExcel();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
+                                    (onImportCsv || onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && (_jsxs("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] })), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone