@crisp-ui-kit/crisp 0.54.6 → 0.54.8

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

@@ -24,8 +24,20 @@ const config = (0, core_1.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
@@ -36,6 +48,20 @@ const config = (0, core_1.defineRecipe)({
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.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 ${tokens_1.contract.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. */
@@ -119,8 +145,37 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSurface};
+      border: 1px solid ${tokens_1.contract.bgBrandSolid}; border-radius: 4px;
+      font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
+      color: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }

package/dist/cjs/components/dialog/dialog.js

@@ -60,12 +60,13 @@ function useDialogInstanceId() {
  * Escape / outside-click dismissal) with the measured modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+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 = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useDialogInstanceId();
     const service = (0, react_1.useMachine)(dialog.machine, {
         id,
         open,
+        role: variant === "alert" ? "alertdialog" : "dialog",
         onOpenChange(details) {
             onOpenChange(details.open);
         },
@@ -89,15 +90,17 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-dialog-content", className), "data-crisp-dialog": id, 
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", "data-variant": variant, children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-card", children: [variant === "alert"
+                                    ? (title != null || description != null) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-alert-header", children: [title != null && ((0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-alert-title", children: title })), description != null && ((0, jsx_runtime_1.jsx)("p", { ...api.getDescriptionProps(), className: "crisp-dialog-alert-description", children: description }))] }))
+                                    : title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
 }
 Dialog.displayName = "Dialog";
 function DialogBody({ children, className, }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
-function DialogFooter({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-dialog-footer", children: children });
+function DialogFooter({ children, variant = "panel", }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-dialog-footer", "data-variant": variant, children: children }));
 }

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

@@ -18,17 +18,31 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "dialog",
     base: `display: contents; font-family: ${tokens_1.contract.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: ${tokens_1.contract.bgScrim}; }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
+    & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-dialog-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-dialog-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]} 0; }
+    & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-dialog-alert-description { margin: 0; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgAlertDescription}; }
     & .crisp-dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; padding: ${tokens_1.contract.space["5"]} ${tokens_1.contract.space["4"]}; }
     & .crisp-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-dialog-footer[data-variant="alert"] { min-height: 45px; padding: ${tokens_1.contract.space["2"]}; }
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; }
     & .crisp-dialog-field-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }

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

@@ -17,6 +17,23 @@ 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 —
+// 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.
 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 +73,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 +86,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: 0; }
     & .${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); }