@crisp-ui-kit/crisp 0.55.1 → 0.55.3

package/dist/tabletoolbar.layered.css

@@ -8,7 +8,9 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    /* crisp/#830: every trigger label here (Sort, Filter, View settings, Import/Export -- all compose this one shared .tool rule) read the "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
+       (the button root itself inherits Attio's own 10px rem base and is a red herring, the same trap the original "10px font" layout-audit finding fell into): every label leaf is 14px/500/lh20, the "lg" text size. */
+    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
@@ -27,8 +29,17 @@
        an actual sort applied. color-mix (not the raw rgba Attio computes
        to) so both the border and the fill flip correctly in dark mode, the
        same reasoning --ghost above already uses. Only wired into
-       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's own Sort/Filter triggers share this same chrome function but are deprecated, not touched here. */
-    & .crisp-tabletoolbar-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); }
+       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's own Sort/Filter triggers share this same chrome function but are deprecated, not touched here. crisp/#844, correcting #831: the label colour was added here later, muting only the FILTER trigger (via a "--filter" modifier), on the assumption that was a Filter-specific tone distinct from Sort's.
+       Re-measured live and that premise was wrong -- Sort's own resting label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5) as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
+       "Sort's colour" in an earlier pass is a different thing entirely: the
+       "Sorted by" PREFIX word inside an ACTIVE sort chip, #788 -- a
+       compound-label treatment that only exists once a sort is applied, not
+       a resting-state colour.) --dashed is currently only ever applied to
+       Sort's and Filter's own empty triggers (never View settings/
+       Import-Export, which stay full-strength always, confirmed live), so
+       the mute belongs on --dashed itself, not gated behind a Filter-only
+       modifier. */
+    & .crisp-tabletoolbar-tool--dashed { position: relative; box-shadow: none; background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-tabletoolbar-tool--dashed::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); pointer-events: none; }
     & .crisp-tabletoolbar-tool--dashed:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     & .crisp-tabletoolbar-toolgroup { position: relative; display: inline-flex; }
@@ -68,7 +79,11 @@
     & .crisp-tabletoolbar-menu-sep { height: 1px; border: none; background: var(--crisp-border-subtle); margin: var(--crisp-space-0-5) 0; }
     /* #592: the Filter field picker's nested-scope header (back control +
        search, once drilled into a nestedColumns column) and a search
-       result's own breadcrumb row ("Team › Twitter follower count", surfaced by the SAME query matching a nested column). menu-back reuses the established 28px icon-only control pattern this file already uses twice (sort-remove, the kebab segment) rather than an independent measurement of Attio's own back arrow. The breadcrumb
+       result's own breadcrumb row ("Team › Twitter follower count",
+       surfaced by the SAME query matching a nested column). menu-back
+       reuses the established 28px icon-only control pattern this file
+       already uses twice (sort-remove, the kebab segment) rather than
+       an independent measurement of Attio's own back arrow. The breadcrumb
        colours ARE measured live: the parent segment muted at the same
        exact color-mix 63% sort-learn above already uses, the
        separator chevron and leaf segment both full fgPrimary (the
@@ -112,9 +127,15 @@
     & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
-    /* #592: a nested pick's field segment ("Team › Twitter follower
-       count") — measured live: BOTH path segments the same colour (chip context only; the picker's own menu rows keep the parent muted, see
-       tabletoolbar.chrome.ts), each independently truncated. Attio's own layout gives the leaf segment priority (it stays fully readable longer, the parent truncates first) via a two-part min-content measurement this reproduces qualitatively with a flex-shrink differential rather than byte-for-byte (the exact px split Attio computes is content-length-dependent, not a fixed value) — not independently re-verified at other path-segment lengths. */
+    /* #592: a nested pick's field segment ("Team › Twitter follower count") — measured live: BOTH path segments the same colour (chip
+       context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own
+       layout gives the leaf segment priority (it stays fully readable
+       longer, the parent truncates first) via a two-part min-content
+       measurement this reproduces qualitatively with a flex-shrink
+       differential rather than byte-for-byte (the exact px split Attio
+       computes is content-length-dependent, not a fixed value) — not
+       independently re-verified at other path-segment lengths. */
     & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
     & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
     & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
@@ -124,8 +145,10 @@
     & .crisp-tabletoolbar-fcond-seg--kebab { background: var(--crisp-bg-surface); justify-content: center; width: 28px; padding: 0; border-radius: 0 var(--crisp-radius-md) var(--crisp-radius-md) 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: var(--crisp-fg-primary); }
     /* #754: the sort row's own field trigger, replacing a plain Select
-       with the same nested-drill-down popover Filter's field picker already has — reuses Select's own already-measured trigger chrome
-       verbatim (its class is scoped under Select's own root class, so it can't be reused as a bare class name outside an actual Select tree;
+       with the same nested-drill-down popover Filter's field picker
+       already has — reuses Select's own already-measured trigger chrome
+       verbatim (its class is scoped under Select's own root class, so it
+       can't be reused as a bare class name outside an actual Select tree;
        these values are copied, not re-measured). */
     & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
     & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }

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

@@ -50,9 +50,9 @@ export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "dat
  * country selection survives even for a national number that's still
  * being typed (an E.164 string alone can't distinguish "no country
  * chosen yet" from "the digits happen to start with a valid dial
- * code"). See `editor: "phone"` for the editable picker. Multi-value
- * (Attio's own "Multiple values" constraint on this type) is explicitly
- * out of scope -- tracked as its own follow-up, not this type. */
+ * code"). See `editor: "phone"` for the editable picker. See `multiValue`
+ * (crisp#816) for Attio's own "Multiple values" constraint on this
+ * type. */
  | "phone";
 export type DataTableColumn<T> = {
     key: string;
@@ -87,6 +87,26 @@ export type DataTableColumn<T> = {
     resizable?: boolean;
     /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
     tones?: Record<string, string>;
+    /** `type: "date"`/`"datetime"` only: render this cell in Attio's own
+     * measured overdue/danger red (`fgDanger`, `#eb3b3b` — the same token
+     * `TasksTable`'s own overdue due-date already uses, crisp#462) when the
+     * predicate returns true. A per-row PREDICATE rather than `tones`'s
+     * value-keyed lookup, because a date's danger state is computed over the
+     * WHOLE ROW (e.g. a precomputed "overdue" bucket) — `tones` can only key
+     * off the formatted string, which a date doesn't have a closed set of
+     * (crisp#822). */
+    danger?: (value: unknown, row: T) => boolean;
+    /** This column holds more than one value per row -- Attio's own
+     * "Multiple values" constraint (crisp#816, confirmed live on the Phone
+     * Number attribute type: Constraints → Multiple values, a per-attribute
+     * toggle, absent for e.g. Text). Built out for `type`/`editor: "phone"`
+     * only this pass; the raw value is that type's normal per-value string,
+     * several of them joined with `;` (`"MN|88112233;US|4155550123"`) rather
+     * than JSON -- the same "a real separator earns its keep" reasoning
+     * `phone`'s own single-value `"{iso2}|{digits}"` shape already uses.
+     * Structural flag lives on the column (type-agnostic, per the issue)
+     * even though only one type renders it today. */
+    multiValue?: boolean;
     /** Enable click-to-sort on this column's header. */
     sortable?: boolean;
     /** Exclude this column from the search filter (default: included). */
@@ -386,6 +406,22 @@ export type DataTableProps<T extends {
      * `EmptyState variant="page"` surface as the zero-row state.
      */
     error?: React.ReactNode;
+    /**
+     * A whole-view request in flight (a filter/sort change re-querying every
+     * row, or a fresh page boot) -- crisp#826, confirmed live on Attio's
+     * Companies grid on both triggers. Replaces the row body with a single
+     * centred `Spinner` + `loadingLabel`, `10px` gap, both in the same muted
+     * `rgba(0,0,0,0.63)` -- the same tone `-phone-dial` and other muted text
+     * already use elsewhere in this file. Takes priority over `error`/the
+     * empty state (a new request in flight supersedes a previous one's
+     * result). Distinct from the two OTHER loading states this component
+     * already has: a cold in-place row-body load (blank, no skeleton,
+     * AUTHORING.md Lesson 28) and the warm-navigation per-cell shimmer
+     * (crisp#599) -- neither of those swaps the whole body for this. */
+    loading?: boolean;
+    /** Text next to the spinner while `loading` (default "Loading..." --
+     * Attio's own measured copy, three literal periods). */
+    loadingLabel?: string;
     sort?: SortState | SortState[] | null;
     defaultSort?: SortState;
     onSortChange?: (s: SortState | null) => void;
@@ -484,7 +520,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, loading, loadingLabel, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

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

@@ -2,6 +2,11 @@ import * as React from "react";
 export type SelectOption = {
     value: string;
     label: React.ReactNode;
+    /** Content shown in the CLOSED trigger for this option when selected, if
+     * different from its own option-row `label` (crisp#842 -- a country
+     * picker's row shows the full name + dial code, but Attio's own closed
+     * trigger shows only the bare 2-letter ISO code). Defaults to `label`. */
+    triggerLabel?: React.ReactNode;
     /** Text used for filtering when `searchable` (falls back to a string label). */
     keywords?: string;
     /** A status colour dot shown before the label (status/select fields). */

package/package.json

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