@crisp-ui-kit/crisp 0.54.8 → 0.54.10

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

@@ -1,4 +1,4 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
 // The feature-rich, config-driven data grid (sort / filter / selection /
 // inline edit) built on the composable `Table` primitives. This recipe adds the
@@ -19,6 +19,30 @@ const config = defineRecipe({
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
+    /* crisp/#645: visually-hidden-but-focusable, not visually-hidden-and-
+       inert like .crisp-datatable-live above -- same clip-rect shape,
+       this one just needs to actually hold DOM focus so a native
+       copy/paste event has something to fire on (see its own comment
+       in datatable.tsx). resize: none keeps a stray native textarea handle
+       from ever being drawable, even though it's clipped to 1px anyway. */
+    & .crisp-datatable-clipboard-proxy {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+      resize: none;
+    }
+    /* single active cell (crisp/#645 follow-up -- this had no styling of its
+       own at all before, a gap against Golden Rule 0: RecordsTable's own
+       measured value, .crisp-recordstable-td[data-selected], brought
+       across unchanged now that a visible anchor actually matters for the
+       Shift+Click range below). */
+    & td[data-selected] { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; border-radius: ${c.radius.sm}; z-index: 3; }
+    /* crisp/#645, G-101: a Shift+Click range -- reuses the row-selection
+       tint formula already used twice below (tbody tr[data-selected] td)
+       for the same reason a selected group of rows gets one: a selected
+       GROUP of cells is the same kind of state, just cell-scoped instead of
+       row-scoped. Not independently re-measured against Attio's own range
+       highlight (out of scope this slice -- flagged on crisp#645). */
+    & td[data-in-range] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     /* 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.
@@ -111,6 +135,12 @@ const config = defineRecipe({
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${c.fgPrimary} 4%, color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface})); }
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
+    /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own
+       already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%,
+       composited OVER whatever row-state background the cell already has
+       (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
+    & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, ${c.bgPurple} 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     /* An async onEdit's in-flight state (#385) -- the field/picker dims and
@@ -177,11 +207,44 @@ const config = defineRecipe({
     & .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; }
     & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
+    /* crisp/#731 -- column drag-to-reorder. Measured live against Attio's
+       own grid (the issue's own comment): the dragged header keeps full
+       opacity and the plain \`pointer\` cursor throughout (Attio draws no
+       ghost and no "grabbing" cursor of its own), so this adds nothing to
+       \`[data-dragging]\` itself -- the ONLY new paint is the drop-indicator
+       line, a 3px bar in the same measured brand blue the resize handle's
+       own hover state (above) already uses, positioned on whichever edge of
+       the hovered header the pointer is closer to. */
+    & th[data-dragging] { cursor: pointer; }
+    & th[data-drop-before]::before, & th[data-drop-after]::after {
+      content: ""; position: absolute; top: 0; width: 3px; height: 100%;
+      background: ${c.bgBrandSolid}; z-index: 6; pointer-events: none;
+    }
+    & th[data-drop-before]::before { inset-inline-start: -1.5px; }
+    & th[data-drop-after]::after { inset-inline-end: -1.5px; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
+    /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text,
+       plain hover vs rest) that Attio's underline is unconditional, not a
+       hover reveal -- identical at rest and on hover: text-decoration-color
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
+       colour. The previous :hover-gated, full-contrast rule here was itself
+       unmeasured and wrong in two ways at once. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.fgPrimary} 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
+       column, revealed on ROW hover (the issue's own title says "row
+       hover", and a live check confirmed hovering well past the name --
+       not just the icons' own hit target -- still reveals them) or
+       keyboard focus. Measured live: border-radius 6px, icon colour
+       rgba(0,0,0,0.55) at rest, darkening to the full text colour with a
+       rgba(0,0,0,0.04) background on the icon's OWN hover -- both
+       expressed as color-mix against fgPrimary so they stay correct in
+       dark mode instead of a literal black that would invert. */
+    & .crisp-datatable-entity-actions { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
     & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@@ -213,7 +276,8 @@ const config = defineRecipe({
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
-    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }`,
+    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }
+    ${rtlFlipCss}`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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

@@ -25,10 +25,74 @@ function useDialogInstanceId() {
 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 isAlert = variant === "alert";
     const service = useMachine(dialog.machine, {
         id,
         open,
-        role: variant === "alert" ? "alertdialog" : "dialog",
+        role: isAlert ? "alertdialog" : "dialog",
+        // #704: a stacked (second) Dialog can get marked `aria-hidden="true"`
+        // on its own outer wrapper a frame after it opens. Traced into
+        // `@zag-js/dialog`'s `hideContentBelow` effect and `@zag-js/aria-hidden`'s
+        // own source: a modal Dialog's `hideContentBelow` calls
+        // `hideOthers([itself])` (deferred one `requestAnimationFrame`), which
+        // walks `document.body`'s children and `aria-hidden`s every one that
+        // ISN'T an ancestor of its own content. Each open `Dialog` schedules
+        // this independently, with no shared registry of who else is open —
+        // when the effect re-runs for the FIRST (panel) Dialog (Zag re-runs an
+        // effect whenever any prop it reads is considered changed, which a
+        // parent re-render can trigger even when the boolean VALUE didn't),
+        // its walk runs again with the SECOND (alert) Dialog now mounted as a
+        // sibling body child it has never seen before, and marks that whole
+        // sibling subtree — including the alert's own wrapper, the thing
+        // actually on top and interactive — as hidden. A real upstream
+        // limitation (no per-instance awareness of other open Dialogs), not
+        // something crisp can fix by calling the library differently.
+        //
+        // `hideContentBelow` is gated purely on `modal` (no separate flag), so
+        // `modal: false` for the alert variant skips it — `trapFocus`/
+        // `preventScroll` are passed explicitly right below so they stay on
+        // regardless (their own defaults are ALSO `= modal`, so leaving them
+        // out here would silently turn them off too).
+        //
+        // A DOM-level fix was tried first — correcting the wrongly-set
+        // attribute after the fact instead of touching `modal` at all, so
+        // every other zag-managed behavior would stay untouched by
+        // construction. It broke `formdialog.test.tsx`'s own
+        // "the confirm's own Cancel keeps the dirtied form open" test (a real
+        // regression, reproduced with the correction reduced to literally one
+        // `removeAttribute` call, and reproduced again unmodified on the prior
+        // WIP commit — that version was never actually run against the full
+        // suite): `waitFor(() => expect(queryByRole("alertdialog")).toBeNull())`
+        // hung for the full test timeout rather than the confirm's real,
+        // sub-100ms unmount, in a way that traces to `aria-hidden` specifically
+        // (swapping the correction for a harmless, differently-named attribute
+        // did not reproduce it) — a fragile interaction this DOM-mutation
+        // approach could not be made to reliably avoid.
+        //
+        // `modal: false` also turns off `@zag-js/dismissable`'s own
+        // `pointerBlocking` for the alert. Verified live (a real
+        // headed-then-headless Chromium session against a built `FormDialog`,
+        // not just reasoning from the source) that this does NOT regress
+        // outside-click safety in practice — but for a DIFFERENT reason than
+        // `pointerBlocking` itself: the thing actually keeping a background
+        // click from reaching anything is `@zag-js/remove-scroll`'s
+        // `preventBodyScroll`, gated on `preventScroll` (kept `true` above,
+        // independent of `modal`) — it sets `pointer-events: none` directly on
+        // `<body>` while any modal-ish Dialog is open, and `getContentProps()`
+        // re-enables `pointer-events: auto` only on each Dialog's OWN content
+        // element. Confirmed live: the alert's content had an explicit
+        // `pointer-events: auto`; its OWN backdrop/positioner did not, and
+        // inherited body's `none`; clicking anywhere in that dead zone (the
+        // alert's backdrop, or the panel's, now both non-interactive) dismissed
+        // neither dialog, because the click lands on nothing that listens for
+        // it — a stronger guarantee than "click closes the wrong layer", not
+        // just an absence of that one failure mode. `pointerBlocking` is a
+        // second, redundant layer over the same problem `preventScroll` already
+        // solves here; the alert's own `closeOnInteractOutside` is already
+        // `false` for any `alertdialog` role regardless of `modal`.
+        modal: !isAlert,
+        trapFocus: true,
+        preventScroll: true,
         onOpenChange(details) {
             onOpenChange(details.open);
         },

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

@@ -31,6 +31,19 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // 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.
+//
+// `.menu-item` also picked up `text-decoration: none` for #595's Import/
+// Export menu — Attio's own "Import CSV" and "Learn about imports and
+// exports" rows are real `<a>` tags (the middle two, pure JS actions, are
+// plain `<div role="menuitem">`), and an anchor needs the underline reset
+// every button-based `.menu-item` never needed. No-op for every existing
+// button consumer of this class. Same menu's 2 dividers use `.menu-sep` on
+// a real `<hr>` (implicit `role="separator"`, no extra ARIA plumbing needed)
+// rather than a `<div role="separator">` — biome's a11y rules want a
+// separator either genuinely interactive (`tabIndex`, `aria-valuenow`, a
+// resizable-splitter kind of thing this isn't) or the semantic element
+// instead; `.menu-sep` picked up `border: none` for it, a no-op for the
+// existing plain-`<div>` consumers of this class.
 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}; }
@@ -69,7 +82,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}; line-height: 20px; font-weight: ${c.weight.medium}; 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; text-decoration: none; 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; }
@@ -77,7 +90,29 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-menu-item[data-on] svg { color: ${c.bgBrandSolid}; }
     & .${CLASS_PREFIX}${p}-menu-item .${CLASS_PREFIX}${p}-menu-check { margin-left: auto; }
     & .${CLASS_PREFIX}${p}-menu-input { height: ${c.size.row}; margin: ${c.space["0.5"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; }
-    & .${CLASS_PREFIX}${p}-menu-sep { height: 1px; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
+    & .${CLASS_PREFIX}${p}-menu-sep { height: 1px; border: none; background: ${c.borderSubtle}; margin: ${c.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
+       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
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .${CLASS_PREFIX}${p}-menu-nesthead { display: flex; align-items: center; gap: ${c.space["1"]}; margin: ${c.space["0.5"]}; }
+    & .${CLASS_PREFIX}${p}-menu-nesthead .${CLASS_PREFIX}${p}-menu-input { flex: 1; margin: 0; }
+    & .${CLASS_PREFIX}${p}-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-menu-back:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-menu-item--expand { justify-content: space-between; }
+    & .${CLASS_PREFIX}${p}-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .${CLASS_PREFIX}${p}-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .${CLASS_PREFIX}${p}-menu-item-path-sep { flex-shrink: 0; color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .${CLASS_PREFIX}${p}-menu--up { top: auto; bottom: calc(100% + ${c.space["1"]}); transform-origin: bottom; }
     & .${CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }