@crisp-ui-kit/crisp 0.54.6 → 0.54.7

package/dist/cjs/components/tabletoolbar/tabletoolbar.chrome.js

@@ -17,6 +17,14 @@ const tokens_1 = require("../../tokens");
 // block, and those depend on following `.menu` in source order. Keeping the
 // split preserves that cascade exactly, which is what lets the generated CSS
 // stay byte-for-byte identical to what shipped before the extraction.
+//
+// `.menu--op` (#594 follow-up) is the filter condition's own operator list —
+// measured live against Attio's own popover at 135px (rounds to 134px), not
+// the default 232px every other menu here uses. `.menu-item` also picked up
+// `line-height: 20px` and `font-weight: medium` from the same measurement
+// (its 8 rows read 14px/20px/500) — shared by every menu that renders one,
+// not just the operator list, since crisp's menu-item typography was
+// previously unset rather than wrong.
 const toolbarChromeHead = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
     & .${namespace_1.CLASS_PREFIX}${p}-toolbar[data-inline] { padding-bottom: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
@@ -56,7 +64,7 @@ const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-he
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.lg}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); text-decoration: none; }
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-sort-learn:hover { color: ${tokens_1.contract.fgPrimary}; }
-    & .${namespace_1.CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; text-align: left; cursor: pointer; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:hover { background: ${tokens_1.contract.bgRaised}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
@@ -69,6 +77,7 @@ const toolbarChromeBody = (p) => `    & .${namespace_1.CLASS_PREFIX}${p}-menu-he
     & .${namespace_1.CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
+    & .${namespace_1.CLASS_PREFIX}${p}-menu--op { min-width: 134px; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger { color: ${tokens_1.contract.bgDanger}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
     & .${namespace_1.CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -52,8 +52,14 @@ const OP_LABELS = {
     is: "is",
     isnot: "is not",
     isanyof: "is any of",
-    empty: "is empty",
-    notempty: "is not empty",
+    // Attio's own text says "empty"/"not empty", not "is empty"/"is not empty"
+    // -- #619's own issue body quotes it verbatim this way, and #593's number/
+    // date operator sets ("is / is not / less than / greater than / empty /
+    // not empty") repeat it. #619 ported the 3 new ops but left these two
+    // untouched from the pre-existing 5-op set, which had drifted; caught in
+    // review.
+    empty: "empty",
+    notempty: "not empty",
 };
 // #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
@@ -407,7 +413,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
                     return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => removeFilter(cond.id), children: deleteFilterLabel }) })), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), open && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

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

@@ -14,6 +14,14 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // block, and those depend on following `.menu` in source order. Keeping the
 // split preserves that cascade exactly, which is what lets the generated CSS
 // stay byte-for-byte identical to what shipped before the extraction.
+//
+// `.menu--op` (#594 follow-up) is the filter condition's own operator list —
+// measured live against Attio's own popover at 135px (rounds to 134px), not
+// the default 232px every other menu here uses. `.menu-item` also picked up
+// `line-height: 20px` and `font-weight: medium` from the same measurement
+// (its 8 rows read 14px/20px/500) — shared by every menu that renders one,
+// not just the operator list, since crisp's menu-item typography was
+// previously unset rather than wrong.
 export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
     & .${CLASS_PREFIX}${p}-toolbar[data-inline] { padding-bottom: 0; }
     & .${CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
@@ -52,7 +60,7 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.lg}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-decoration: none; }
     & .${CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-sort-learn:hover { color: ${c.fgPrimary}; }
-    & .${CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; }
     & .${CLASS_PREFIX}${p}-menu-item:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .${CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
@@ -65,6 +73,7 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .${CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
+    & .${CLASS_PREFIX}${p}-menu--op { min-width: 134px; }
     & .${CLASS_PREFIX}${p}-menu-item--danger { color: ${c.bgDanger}; }
     & .${CLASS_PREFIX}${p}-menu-item--danger svg { color: ${c.bgDanger}; }
     & .${CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }

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

@@ -1,5 +1,5 @@
 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, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
@@ -13,8 +13,14 @@ const OP_LABELS = {
     is: "is",
     isnot: "is not",
     isanyof: "is any of",
-    empty: "is empty",
-    notempty: "is not empty",
+    // Attio's own text says "empty"/"not empty", not "is empty"/"is not empty"
+    // -- #619's own issue body quotes it verbatim this way, and #593's number/
+    // date operator sets ("is / is not / less than / greater than / empty /
+    // not empty") repeat it. #619 ported the 3 new ops but left these two
+    // untouched from the pre-existing 5-op set, which had drifted; caught in
+    // review.
+    empty: "empty",
+    notempty: "not empty",
 };
 // #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
@@ -368,7 +374,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                     const hasValue = (!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: _jsx("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => removeFilter(cond.id), children: deleteFilterLabel }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", 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`, 
+                                                            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

package/dist/recordstable.css

@@ -43,7 +43,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -56,6 +56,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/recordstable.layered.css

@@ -44,7 +44,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -57,6 +57,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/styles.css

@@ -1746,7 +1746,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -1759,6 +1759,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
@@ -2753,7 +2754,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -2766,6 +2767,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/styles.layered.css

@@ -1747,7 +1747,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -1760,6 +1760,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
@@ -2754,7 +2755,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -2767,6 +2768,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/tabletoolbar.css

@@ -39,7 +39,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -52,6 +52,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/tabletoolbar.layered.css

@@ -40,7 +40,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -53,6 +53,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -95,8 +95,10 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     /** aria-label on a filter chip's "⋮" kebab (default "Filter options"). */
     filterOptionsLabel?: string;
     /** Label on the filter chip kebab's "Delete filter" action (default
-     *  "Delete filter") — Attio's own chip kebab (#594) has exactly this one
-     *  item. */
+     *  "Delete filter") — Attio's own chip kebab (#594) has exactly this
+     *  one item, danger-styled with a leading trash icon. Renamed from
+     *  "Delete filter" (this prop's original default) after a re-measurement
+     *  caught the wrong word. */
     deleteFilterLabel?: string;
     /** Label on the "ascending" sort-direction option (default "Ascending"). */
     ascendingLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.6",
+  "version": "0.54.7",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",