@crisp-ui-kit/crisp 0.54.7 → 0.54.8

package/dist/esm/components/datatable/datatable.recipe.js

@@ -21,8 +21,20 @@ const config = defineRecipe({
     }
     /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
-       Mirrors the summary-row fix. */
-    & th { padding: 0; }
+       Mirrors the summary-row fix.
+       \`& .crisp-table th\`, not bare \`& th\` (found while re-checking #691's
+       own fix live): DataTable's root nests \`Table\`'s own wrapper, whose
+       \`table.recipe.ts\` carries \`& th, & td { padding: 0 12px }\` at the
+       SAME specificity (.crisp-table th vs .crisp-datatable th, both one
+       class + one element) -- a bare \`& th\` here only won by source
+       order, which flipped the moment table.recipe.ts's own CSS file
+       happened to land after datatable's in the build (alphabetical:
+       datatable < table), silently reinstating 12px on every header cell
+       in the whole product and making every interactive column's button
+       double it to 24px. Scoping through \`.crisp-table\` adds a second
+       class to the selector (0,2,1 beats 0,1,1) so this can never lose a
+       specificity tie to source order again. */
+    & .crisp-table th { padding: 0; }
 /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a
        long header grew past the column instead of filling it -- with nothing
@@ -33,6 +45,20 @@ const config = defineRecipe({
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    /* crisp/#605 follow-up: a header with neither a Menu nor a sort button
+       (the primary/entity column's now-inert path, or any column with no
+       columnMenu/sortable at all) renders .crisp-datatable-th-inner as a
+       DIRECT child of th instead of nested inside a button -- and loses
+       the button's own 12px inset, drifting left of the td's 12px base
+       inset. Measured live on Attio's own Companies grid: the header label
+       and the cell's own text land at the exact same x (335px from the
+       viewport, both 40px from the column's left edge) via two different
+       padding+icon+gap combinations -- Attio does not leave the inert
+       primary header flush left either. The \`>\` combinator targets only
+       the button-less case: Menu's own wrapper (\`.crisp-menu\`) and the
+       plain sort \`button\` both put >=1 more level between \`th\` and this
+       span, so their own 12px (already on the button) isn't doubled. */
+    & th > .crisp-datatable-th-inner { box-sizing: border-box; padding: 0 ${c.space["3"]}; }
 /* The summary cell has NO padding of its own -- the calculation trigger
        owns the whole 246x37 area so a click anywhere in the cell opens the
        menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
@@ -116,8 +142,37 @@ const config = defineRecipe({
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+    /* #579: click-to-expand overlay for a truncated cell -- a read-only,
+       full-value card, settled live as click (not Attio's usual
+       hover-expand) and measured position: absolute, unlike this file's
+       floating chrome (Menu/Select popovers) which portals and escapes the
+       scroll container. Deliberately NOT the edit-error pattern above
+       (grow the row, block-level, never clipped): a virtualized grid
+       assumes a fixed row height for its scroll math (owned by the grid
+       core, not this cell), so growing a row here would fight it. Anchored
+       to the SAME column width the cell itself renders at (measured:
+       Attio's own overlay came out only slightly wider than the
+       triggering cell's clientWidth -- the overshoot is this padding),
+       wrapping onto as many lines as the value needs; it CAN be clipped by
+       \`.crisp-table-scroll\`'s own \`overflow: auto\` if it grows past the
+       visible viewport, same as the edit-error comment above already
+       notes for any position:absolute escape -- unmeasured against Attio
+       for this exact case, flagged rather than guessed. */
+    & td[data-cell-expanded] { overflow: visible; z-index: 7; }
+    & .crisp-datatable-cell-overlay {
+      position: absolute; inset-inline-start: 0; top: 0; width: 100%; box-sizing: border-box;
+      padding: ${c.space["2"]} ${c.space["3"]}; background: ${c.bgSurface};
+      border: 1px solid ${c.bgBrandSolid}; border-radius: 4px;
+      font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium};
+      color: ${c.fgPrimary}; white-space: normal; word-break: break-word; cursor: default;
+    }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
+    /* read-only/computed column marker (#596) -- sits just inside the
+       resize handle, same absolute-positioned-against-the-th approach the
+       handle itself uses, since th has zero padding and the button/inner
+       row fills the whole cell with no room left for a trailing sibling. */
+    & .crisp-datatable-readonly { position: absolute; top: 50%; inset-inline-end: 11px; transform: translateY(-50%); color: ${c.fgMuted}; pointer-events: none; z-index: 5; }
     /* column resize grip */
     & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
     & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }

package/dist/esm/components/dialog/dialog.js

@@ -22,12 +22,13 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+export function Dialog({ open, onOpenChange, title, icon, width = 640, variant = "panel", description, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
     const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useDialogInstanceId();
     const service = useMachine(dialog.machine, {
         id,
         open,
+        role: variant === "alert" ? "alertdialog" : "dialog",
         onOpenChange(details) {
             onOpenChange(details.open);
         },
@@ -51,15 +52,17 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)
         return null;
-    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-dialog-content", className), "data-crisp-dialog": id, 
+    return (_jsx(Portal, { children: _jsxs("div", { className: dialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", "data-variant": variant, children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-dialog-content", className), "data-crisp-dialog": id, "data-variant": variant, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-dialog-card", children: [variant === "alert"
+                                    ? (title != null || description != null) && (_jsxs("div", { className: "crisp-dialog-alert-header", children: [title != null && (_jsx("h2", { ...api.getTitleProps(), className: "crisp-dialog-alert-title", children: title })), description != null && (_jsx("p", { ...api.getDescriptionProps(), className: "crisp-dialog-alert-description", children: description }))] }))
+                                    : title != null && (_jsxs("div", { className: "crisp-dialog-header", children: [icon, _jsx("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 export function DialogBody({ children, className, }) {
     return (_jsx("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
-export function DialogFooter({ children }) {
-    return _jsx("div", { className: "crisp-dialog-footer", children: children });
+export function DialogFooter({ children, variant = "panel", }) {
+    return (_jsx("div", { className: "crisp-dialog-footer", "data-variant": variant, children: children }));
 }

package/dist/esm/components/dialog/dialog.recipe.js

@@ -15,17 +15,31 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "dialog",
     base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: ${c.bgScrim}; }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+    & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: ${c.space["4"]}; }
     & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
     & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.floating}; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; margin: 0; }
     & .crisp-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    /* The discard-confirm's own stacked title + sentence (crisp#677) — no
+       border, no close button, unlike the panel header above: measured
+       live, both themes, 18px/24px 600-weight title (no scale token
+       reaches 18px — the scale tops out at text.xl's 16px, so this is raw
+       px per Golden Rule 3's "genuinely intrinsic size" exception, same as
+       this file's own submit-key glyphs) then a 14px/20px 500-weight
+       sentence 4px below it. */
+    & .crisp-dialog-alert-header { display: flex; flex-direction: column; gap: ${c.space["1"]}; padding: ${c.space["4"]} ${c.space["4"]} 0; }
+    & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-dialog-alert-description { margin: 0; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; color: ${c.fgAlertDescription}; }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${c.space["4"]}; padding: ${c.space["5"]} ${c.space["4"]}; }
     & .crisp-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-dialog-footer[data-variant="alert"] { min-height: 45px; padding: ${c.space["2"]}; }
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
     & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }

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

@@ -16,12 +16,21 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // 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
+// no fixed min-width of its own (#593 correction below), unlike 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.
+//
+// #593 correction: `.menu--op` originally carried a fixed `min-width: 134px`
+// (rounded from one live measurement, the 8-op text set at 135px). Adding
+// number/date columns' own shorter operator sets and re-measuring them live
+// (104.86px for 6 number ops, 91.16px for 6 date ops — both narrower than
+// 134px) showed that number wasn't a real Attio constant, just one set's own
+// content width: a floor sized for the text set overshoots the other two.
+// Dropped to `min-width: 0` so every op set sizes to its own content, the
+// same as any other menu here without an explicit floor.
 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}; }
@@ -73,7 +82,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--op { min-width: 0; }
     & .${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); }