@crisp-ui-kit/crisp 0.54.11 → 0.55.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/badge.css +1 -1
  2. package/dist/badge.layered.css +1 -1
  3. package/dist/cjs/components/badge/badge.recipe.js +10 -5
  4. package/dist/cjs/components/datatable/countries.js +73 -0
  5. package/dist/cjs/components/datatable/datatable.js +318 -40
  6. package/dist/cjs/components/datatable/datatable.recipe.js +18 -1
  7. package/dist/cjs/components/resizablepanel/resizablepanel.js +10 -1
  8. package/dist/cjs/components/table/table.js +8 -1
  9. package/dist/cjs/components/tabletoolbar/tabletoolbar.js +110 -27
  10. package/dist/cjs/index.js +0 -2
  11. package/dist/cjs/product/recordpage/index.js +6 -1
  12. package/dist/cjs/product/recordpage/recordpage.js +20 -4
  13. package/dist/datatable.css +141 -102
  14. package/dist/datatable.layered.css +141 -102
  15. package/dist/esm/components/badge/badge.recipe.js +10 -5
  16. package/dist/esm/components/datatable/countries.js +68 -0
  17. package/dist/esm/components/datatable/datatable.js +319 -41
  18. package/dist/esm/components/datatable/datatable.recipe.js +18 -1
  19. package/dist/esm/components/resizablepanel/resizablepanel.js +10 -1
  20. package/dist/esm/components/table/table.js +8 -1
  21. package/dist/esm/components/tabletoolbar/tabletoolbar.js +111 -28
  22. package/dist/esm/index.js +0 -2
  23. package/dist/esm/product/recordpage/index.js +2 -0
  24. package/dist/esm/product/recordpage/recordpage.js +20 -4
  25. package/dist/styles.css +142 -375
  26. package/dist/styles.layered.css +142 -375
  27. package/dist/types/components/badge/badge.recipe.d.ts +3 -1
  28. package/dist/types/components/datatable/countries.d.ts +12 -0
  29. package/dist/types/components/datatable/datatable.d.ts +27 -3
  30. package/dist/types/components/table/table.d.ts +14 -0
  31. package/dist/types/index.d.ts +0 -2
  32. package/dist/types/product/recordpage/index.d.ts +2 -0
  33. package/package.json +2 -12
  34. package/dist/cjs/product/recordstable/company-logos.js +0 -29
  35. package/dist/cjs/product/recordstable/index.js +0 -13
  36. package/dist/cjs/product/recordstable/recordstable.js +0 -1362
  37. package/dist/cjs/product/recordstable/recordstable.recipe.js +0 -175
  38. package/dist/cjs/product/recordstable/recordstable.tag.js +0 -26
  39. package/dist/cjs/product/taskstable/index.js +0 -7
  40. package/dist/cjs/product/taskstable/taskstable.js +0 -32
  41. package/dist/cjs/product/taskstable/taskstable.recipe.js +0 -56
  42. package/dist/esm/product/recordstable/company-logos.js +0 -26
  43. package/dist/esm/product/recordstable/index.js +0 -3
  44. package/dist/esm/product/recordstable/recordstable.js +0 -1322
  45. package/dist/esm/product/recordstable/recordstable.recipe.js +0 -172
  46. package/dist/esm/product/recordstable/recordstable.tag.js +0 -23
  47. package/dist/esm/product/taskstable/index.js +0 -2
  48. package/dist/esm/product/taskstable/taskstable.js +0 -29
  49. package/dist/esm/product/taskstable/taskstable.recipe.js +0 -53
  50. package/dist/recordstable.css +0 -240
  51. package/dist/recordstable.d.ts +0 -7
  52. package/dist/recordstable.layered.css +0 -242
  53. package/dist/taskstable.css +0 -30
  54. package/dist/taskstable.d.ts +0 -7
  55. package/dist/taskstable.layered.css +0 -32
  56. package/dist/types/product/recordstable/company-logos.d.ts +0 -1
  57. package/dist/types/product/recordstable/index.d.ts +0 -3
  58. package/dist/types/product/recordstable/recordstable.d.ts +0 -294
  59. package/dist/types/product/recordstable/recordstable.recipe.d.ts +0 -5
  60. package/dist/types/product/recordstable/recordstable.tag.d.ts +0 -15
  61. package/dist/types/product/taskstable/index.d.ts +0 -2
  62. package/dist/types/product/taskstable/taskstable.d.ts +0 -59
  63. package/dist/types/product/taskstable/taskstable.recipe.d.ts +0 -3
@@ -1,294 +0,0 @@
1
- import * as React from "react";
2
- import { type EmptyStateLearnMore } from "../../components/emptystate";
3
- import type { EditableOption } from "../recordpage/editable-field";
4
- type IconType = React.ComponentType<{
5
- size?: number;
6
- strokeWidth?: number;
7
- }>;
8
- export declare function isLabelTruncated(el: {
9
- scrollWidth: number;
10
- clientWidth: number;
11
- }): boolean;
12
- export type ColumnType = "entity" | "text" | "tags" | "number" | "url" | "date" | "currency" | "status" | "reference";
13
- export type StatusOption = {
14
- value: string;
15
- label: string;
16
- color: string;
17
- };
18
- export type ReferenceOption = {
19
- value: string;
20
- label: string;
21
- avatar?: string;
22
- };
23
- export type Column = {
24
- key: string;
25
- label: string;
26
- type?: ColumnType;
27
- /** Mark the column's values as AI-enriched — tints the cells the way
28
- * enriched values are washed (#9b69ff at 4%). */
29
- enriched?: boolean;
30
- icon?: IconType;
31
- /** This column's values reference another type of record (e.g. a
32
- * "Primary location" column of Country records). When the header
33
- * overflows, its `Tooltip` appends this type's icon and name after the
34
- * label and switches to Attio's second, reference-column tooltip chrome
35
- * (crisp#580) — distinct from `icon` above (the column's own field-type
36
- * glyph shown in the header row) and from `refOptions` (the picker's
37
- * selectable values). Omit for a plain column; the tooltip stays
38
- * label-only (#534). */
39
- referencedType?: {
40
- icon: IconType;
41
- label: string;
42
- };
43
- width?: number;
44
- /** Currency symbol for `currency` columns (default "$"). */
45
- symbol?: string;
46
- /** Choices for a `status` column (each a coloured dot + label). */
47
- options?: StatusOption[];
48
- /** Choices for a `reference` column (a searchable record picker). */
49
- refOptions?: ReferenceOption[];
50
- /** Adds a trailing "Create {createLabel}" row to the picker (Attio's own
51
- * always has one) — rendered only when this is provided. Picking it hands
52
- * back the picker's current search text, e.g. to open a create flow
53
- * pre-seeded with it. */
54
- onCreateReference?: (query: string) => void;
55
- /** The object noun in "Create {createLabel}" (Attio: "Create Person").
56
- * Only used with `onCreateReference`; defaults to "record". */
57
- createLabel?: string;
58
- /**
59
- * Full custom cell content — an escape hatch for a display crisp can't
60
- * express via `type` (sign-coloured currency, a maskable amount, a custom
61
- * badge, …). Precedence is **`render` > `format` > the built-in `type`
62
- * renderer**: when `render` is set it is the *only* thing drawn in the
63
- * cell, replacing whatever `type` would normally render.
64
- *
65
- * Interaction contract for a `render` column: it keeps every grid chrome —
66
- * row height, hairlines, padding, hover/selected tint, the cell focus ring,
67
- * shift-click range select, the right-click row menu — but is **never**
68
- * inline-editable and never shows a `type` picker (status/reference/date/
69
- * tags), because crisp has no way to write a value back into custom
70
- * content. Use `format` instead if the column should stay editable.
71
- *
72
- * ⌘C copies `format(value, row)` when the column also has one, otherwise
73
- * the raw value stringified the same way a plain column would — never a
74
- * serialization of the rendered node. Sort, filter, and the footer
75
- * aggregation all read `row[column.key]` directly and never call `render`.
76
- */
77
- render?: (value: unknown, row: Row) => React.ReactNode;
78
- /**
79
- * Display-only string transform. Unlike `render`, a `format` column keeps
80
- * the built-in `type` renderer's chrome (a `currency`/`number` column stays
81
- * right-aligned in its numeric span; `text`/`url`/`date`/the default case
82
- * keep their own wrapper) — `format`'s return value simply replaces the
83
- * text that renderer would otherwise show. `format` fully owns that text,
84
- * so a `currency` column's `format` should include its own symbol/masking
85
- * if it wants one (the built-in `$` prefix is skipped once `format` is
86
- * set). A `format` column stays editable/pickable exactly like a plain
87
- * `type` column — only `render` disables that.
88
- *
89
- * Sort, filter, and the footer aggregation all read the **raw**
90
- * `row[column.key]` value, never `format`'s output — so a grouped/prefixed
91
- * currency string still sums and sorts numerically.
92
- */
93
- format?: (value: unknown, row: Row) => string;
94
- /**
95
- * Opts this column into `RecordPanel`/`RecordPage`'s editable-field API
96
- * (#431) — click-to-edit there (not this table's own type-driven
97
- * mechanism, which those two components don't use). Ignored by
98
- * `RecordsTable` itself. A plain `editable` column, with no `editor`,
99
- * opens a text/number/date field (inferred from `type`, same inference
100
- * `DataTable`'s own `editable` columns use — #385); `editor` below picks
101
- * a `select`/`switch` picker instead. Both consumers require `onEdit` to
102
- * actually be given for a field to open at all.
103
- */
104
- editable?: boolean;
105
- /** `select`/`switch` render as the field's own live, always-interactive
106
- * content instead of opening on click — see `DataTableColumn.editor`
107
- * (#385) for the identical convention and reasoning. `select` reads
108
- * `editOptions`. */
109
- editor?: "select" | "switch";
110
- /** Options for `editor: "select"` — same shape `DataTable`'s own
111
- * `DataEditableOption` uses. Not `options` (`StatusOption` requires
112
- * `color`, for this type's own `status` picker) so this stays additive. */
113
- editOptions?: EditableOption[];
114
- };
115
- export type EntityValue = {
116
- name: string;
117
- avatar?: string;
118
- };
119
- export type Row = {
120
- id: string;
121
- } & Record<string, any>;
122
- export type RecordsTableProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
123
- /** Partial override of the chrome strings; see `recordsTableLabels`. */
124
- labels?: RecordsTableLabelsInput;
125
- columns?: Column[];
126
- rows?: Row[];
127
- /** Controlled selection — omit for self-managed selection state. */
128
- selectedIds?: string[];
129
- onSelectionChange?: (ids: string[]) => void;
130
- /** Show the toolbar's "New" button (hide it when the page provides its own). */
131
- showNew?: boolean;
132
- /** Allow adding columns via the trailing "+" header button (default true). */
133
- allowAddColumn?: boolean;
134
- /** Called when a row's open (↗) button is pressed — opens a record panel. */
135
- onOpenRecord?: (row: Row) => void;
136
- /** Called when a row's entity name is clicked — navigate to its full record page. */
137
- onOpenRecordPage?: (row: Row) => void;
138
- /** Tone for `entity`/`reference` avatars: `"brand"` (uniform, today's
139
- * measured records-grid behaviour — the default) or `"hashed"` (a
140
- * stable colour per name, matching what `DataTable`'s `avatarTone` offers).
141
- * Entity avatars only — `TAG_TONES`/tag/status tone logic is untouched. */
142
- avatarTone?: "brand" | "hashed";
143
- /**
144
- * #603: Attio's zero-*records* state (nothing imported yet, no active
145
- * filter) adds an "Import CSV" / "Connect data source" pair and a
146
- * "Learn more" card next to the usual "New record" action -- measured
147
- * on Users/Workspaces, which show nothing else. Omit any of these and
148
- * that piece is left out; omit the whole prop and the empty state is
149
- * unchanged (just "New record"), since this hasn't been confirmed for
150
- * every object type.
151
- */
152
- emptyStateExtra?: {
153
- onImportCsv?: () => void;
154
- onConnectDataSource?: () => void;
155
- learnMore?: EmptyStateLearnMore;
156
- };
157
- className?: string;
158
- };
159
- export declare function tagTone(t: string): string;
160
- type Agg = "none" | "count" | "filled" | "sum" | "avg" | "min" | "max";
161
- /**
162
- * Every chrome string RecordsTable renders. Supplied as a PARTIAL map, so
163
- * translating one menu item does not mean restating the other fifty; anything
164
- * omitted keeps its English default from `recordsTableLabels`.
165
- *
166
- * The interpolated ones are formatters rather than templates because word
167
- * order does not survive translation — "Sorted by Name +2" has no stable
168
- * arrangement of its parts across languages (the same reason TableToolbar's
169
- * triggers take formatters, #77).
170
- */
171
- export type RecordsTableLabels = {
172
- selectAll: string;
173
- sort: string;
174
- sortField: string;
175
- sortDirection: string;
176
- removeSort: string;
177
- reorderSort: string;
178
- addSort: string;
179
- ascending: string;
180
- descending: string;
181
- noSorts: string;
182
- learnSorting: string;
183
- /**
184
- * Where the sort popover's "Learn about sorting" row links to. Unset by default:
185
- * the row renders as plain text, since a component library has no help site of its
186
- * own to point at. Pass your own docs URL to make it a link.
187
- */
188
- learnSortingHref?: string;
189
- filter: string;
190
- addFilter: string;
191
- filterByField: string;
192
- filterByPlaceholder: string;
193
- filterValuePlaceholder: string;
194
- selectCondition: string;
195
- clearFilter: string;
196
- addColumn: string;
197
- columnLabel: string;
198
- editColumnLabel: string;
199
- hideFromView: string;
200
- moveLeft: string;
201
- moveRight: string;
202
- sortAscending: string;
203
- sortDescending: string;
204
- newRecord: string;
205
- createRecord: string;
206
- createMore: string;
207
- newButton: string;
208
- more: string;
209
- moreActions: string;
210
- recordActions: string;
211
- copy: string;
212
- duplicate: string;
213
- addToList: string;
214
- inAList: string;
215
- /** Placeholder in the record search field. */
216
- searchRecordsPlaceholder: string;
217
- /** Placeholder in a select cell's option search. */
218
- searchOptionsPlaceholder: string;
219
- /** Prefix on the bulk bar's selected count. */
220
- selectedCount: string;
221
- /**
222
- * Announced when the selection changes. A formatter, not a string: the
223
- * count moves within the sentence between languages. Return "" to say
224
- * nothing. The bulk bar cannot carry this itself — the consumer mounts it
225
- * when the first row is picked, so its live region would be created by the
226
- * very change it should announce (#234).
227
- */
228
- selectionAnnouncement: (count: number) => string;
229
- delete: string;
230
- sendEmail: string;
231
- runWorkflow: string;
232
- calculate: string;
233
- emptyPlaceholder: string;
234
- setRecordPlaceholder: string;
235
- noRecords: string;
236
- untitled: string;
237
- /** #603: the zero-records state's optional extra CTAs. */
238
- importCsv: string;
239
- connectDataSource: string;
240
- /** Aggregation names, keyed by the aggregation. */
241
- agg: Record<Agg, string>;
242
- /** Filter operator names, keyed by the operator. */
243
- op: Record<FilterOp, string>;
244
- /** Title of the create dialog, given the entity column's label. */
245
- newRecordTitle: (entity: string) => string;
246
- /** Placeholder for a create-dialog field, given the field's label. */
247
- setFieldPlaceholder: (field: string) => string;
248
- /** Label for a newly added column, given how many columns exist. */
249
- newColumnLabel: (index: number) => string;
250
- /** The sort trigger, given the first sorted column and how many more. */
251
- sortedBy: (first: string, extra: number) => string;
252
- /** The filter trigger, given how many filters are active. */
253
- filterCount: (active: number) => string;
254
- /** The row count under the table. */
255
- recordCount: (n: number) => string;
256
- /** Heading above a filter chip's condition editor. */
257
- conditionTitle: (field: string) => string;
258
- };
259
- export declare const recordsTableLabels: RecordsTableLabels;
260
- /** Partial override of any chrome string; the two keyed maps nest. */
261
- export type RecordsTableLabelsInput = Partial<Omit<RecordsTableLabels, "agg" | "op">> & {
262
- agg?: Partial<Record<Agg, string>>;
263
- op?: Partial<Record<FilterOp, string>>;
264
- };
265
- type FilterOp = "contains" | "doesnotcontain" | "startswith" | "endswith" | "is" | "isnot" | "empty" | "notempty";
266
- /**
267
- * A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
268
- * date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
269
- * the field then renders that instant in the reader's own timezone. A
270
- * `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
271
- * of UTC, at every hour of every day, and a date picked east of UTC
272
- * round-tripped back a day short through `toISOString()` (#220).
273
- *
274
- * A string that carries a time is left alone: that one really is an instant,
275
- * and shifting it would move the moment it names.
276
- */
277
- import { formatCellDate, parseCellDate } from "../../core";
278
- export { formatCellDate, parseCellDate };
279
- /**
280
- * A measured-style record grid — fully featured. Toolbar (search / sort status /
281
- * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
282
- * click-to-sort headers, column resize by dragging a header edge, inline cell
283
- * editing (double-click a text/number/url/date cell), add-row and add-column,
284
- * and a floating bulk-action bar (delete / deselect) when rows are selected.
285
- * Selection can be controlled via `selectedIds`/`onSelectionChange`.
286
- *
287
- * @deprecated Reach for `DataTable` instead — a single Attio-exact records
288
- * grid replaces the separate table variants. `RecordsTable` has no
289
- * consumers left (checked GRC and the fms/Mercury admin) and is slated for
290
- * removal in a future minor.
291
- */
292
- export declare function RecordsTable({ labels, columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, emptyStateExtra, className, ...rest }: RecordsTableProps): React.JSX.Element;
293
- export declare const defaultColumns: Column[];
294
- export declare const defaultRows: Row[];
@@ -1,5 +0,0 @@
1
- declare const config: import("../..").RecipeConfig<{}>;
2
- export declare const recordstableRecipe: import("../..").RecipeFn<{}> & {
3
- config: import("../..").RecipeConfig<{}>;
4
- };
5
- export default config;
@@ -1,15 +0,0 @@
1
- /**
2
- * The record tag/chip, measured live: 22px tall, `padding: 0 4px`,
3
- * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
4
- * tone's colour.
5
- *
6
- * Its own module (not pasted into `recordstable.recipe.ts`) because it used
7
- * to be shared with `RecordPanel`'s own Details field list too, and the two
8
- * copies had already started to drift before that sharing existed — adding
9
- * the measured inset ring meant patching the same rules twice. `RecordPanel`
10
- * no longer renders a Details list (#448, Attio's own peek doesn't have
11
- * one), so `RecordsTable` is this module's only consumer now; kept as its
12
- * own file rather than folded back in, since a second consumer showing up
13
- * again is exactly how the drift happened the first time.
14
- */
15
- export declare const recordTagCss: string;
@@ -1,2 +0,0 @@
1
- export { TasksTable, type TasksTableColumn, type TasksTableGroup, type TasksTableProps, type TasksTableRow, } from "./taskstable";
2
- export { taskstableRecipe } from "./taskstable.recipe";
@@ -1,59 +0,0 @@
1
- import type * as React from "react";
2
- export type TasksTableColumn = {
3
- key: string;
4
- label: React.ReactNode;
5
- icon?: React.ReactNode;
6
- /** Flex ratio for this column's header cell and every row's matching cell
7
- * (matched by `key`). Defaults to 1. */
8
- flex?: number;
9
- };
10
- export type TasksTableRow = {
11
- id: string;
12
- title: React.ReactNode;
13
- done?: boolean;
14
- onToggle?: (done: boolean) => void;
15
- due?: {
16
- label: React.ReactNode;
17
- overdue?: boolean;
18
- };
19
- /** A record-chip slot, consumer-supplied — crisp has no generic "record
20
- * chip" component, so this stays a plain node. */
21
- record?: React.ReactNode;
22
- /** A person-chip slot, same reasoning as `record`. */
23
- assignee?: React.ReactNode;
24
- };
25
- export type TasksTableGroup = {
26
- id: string;
27
- label: React.ReactNode;
28
- count: number;
29
- rows: TasksTableRow[];
30
- };
31
- export type TasksTableProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
32
- columns: TasksTableColumn[];
33
- groups: TasksTableGroup[];
34
- /** Toolbar leading slot (Sort/Filter) — Attio's own Tasks page reference
35
- * is `TableToolbar` with `columns`/`sortColumns`/`filterColumns`. */
36
- leading?: React.ReactNode;
37
- /** Toolbar trailing slot (View settings, "New task"). */
38
- trailing?: React.ReactNode;
39
- emptyLabel?: React.ReactNode;
40
- completeLabel?: string;
41
- incompleteLabel?: string;
42
- className?: string;
43
- };
44
- /**
45
- * A grouped due-date table pattern — Attio's Tasks page. Composes
46
- * `ListPage`'s toolbar and group-row chrome (both class-compatible; see
47
- * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
48
- * row grouped into due-date sections, a due-date cell that goes red past
49
- * due, and consumer-supplied record/assignee chip slots.
50
- *
51
- * @deprecated Reach for `DataTable`'s `groupBy` instead — a single
52
- * Attio-exact records grid replaces the separate table variants.
53
- * `TasksTable` has no consumers left (checked GRC and the fms/Mercury
54
- * admin) and is slated for removal in a future minor.
55
- */
56
- export declare function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }: TasksTableProps): React.JSX.Element;
57
- export declare namespace TasksTable {
58
- var displayName: string;
59
- }
@@ -1,3 +0,0 @@
1
- declare const config: import("../..").RecipeConfig<{}>;
2
- export declare const taskstableRecipe: import("../..").RecipeFn<{}>;
3
- export default config;