@crisp-ui-kit/crisp 0.39.0 → 0.40.0

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

@@ -72,6 +72,18 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
         // search), rather than the close button; fall back to the machine default.
         initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361): none of those five are Zag machines, so this
+        // machine's own dismissable-layer stack has no visibility into them --
+        // pressing Escape to close one opened from inside this Dialog closed
+        // the Dialog too, since both listen for the same keypress independently.
+        // Zag only calls its own dismiss when the event isn't already
+        // prevented (`@zag-js/dismissable`), so this cleanly defers instead of
+        // racing it.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)

package/dist/cjs/components/drawer/drawer.js

@@ -66,6 +66,13 @@ function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-label":
             onOpenChange(details.open);
         },
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, react_1.normalizeProps);
     if (!api.open)

package/dist/cjs/core/floating-stack.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerFloatingLayer = registerFloatingLayer;
 exports.isInsideLaterFloatingLayer = isInsideLaterFloatingLayer;
+exports.hasOpenFloatingLayer = hasOpenFloatingLayer;
 /**
  * Tracks every currently-open `FloatingPortal` layer, in open order, so a
  * layer's outside-click check can tell "outside me" from "inside a layer I
@@ -52,3 +53,23 @@ function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+function hasOpenFloatingLayer() {
+    return stack.length > 0;
+}

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = void 0;
 var cell_date_1 = require("./cell-date");
 Object.defineProperty(exports, "formatCellDate", { enumerable: true, get: function () { return cell_date_1.formatCellDate; } });
 Object.defineProperty(exports, "parseCellDate", { enumerable: true, get: function () { return cell_date_1.parseCellDate; } });
@@ -29,6 +29,7 @@ Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function
 var floating_portal_1 = require("./floating-portal");
 Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return floating_portal_1.FloatingPortal; } });
 var floating_stack_1 = require("./floating-stack");
+Object.defineProperty(exports, "hasOpenFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasOpenFloatingLayer; } });
 Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.isInsideLaterFloatingLayer; } });
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });
 var form_value_1 = require("./form-value");

package/dist/cjs/product/recordpanel/recordpanel.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
+const core_1 = require("../../core");
 const recordstable_1 = require("../recordstable");
 const recordpanel_recipe_1 = require("./recordpanel.recipe");
 function FieldValue({ col, row, emptyLabel, }) {
@@ -64,11 +65,21 @@ function FieldValue({ col, row, emptyLabel, }) {
  */
 function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
     const titleId = React.useId();
-    // close on Escape while open
+    // close on Escape while open -- but not when a Menu/Select/Popover/
+    // ContextMenu opened from inside the panel (e.g. a footer "More actions"
+    // menu) is itself open (#361): that Escape belongs to the nested layer,
+    // which has its own listener and will close itself. Without this check
+    // both close on the same keypress, since neither knows about the other --
+    // none of the five are built on this listener or registered anywhere it
+    // can see, only on the shared floating-stack this checks instead.
     React.useEffect(() => {
         if (!record)
             return;
-        const onKey = (e) => e.key === "Escape" && onClose();
+        const onKey = (e) => {
+            if (e.key !== "Escape" || (0, core_1.hasOpenFloatingLayer)())
+                return;
+            onClose();
+        };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [record, onClose]);

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

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
 import { dialogRecipe } from "./dialog.recipe.js";
 // A globally unique id per mounted instance (see command.tsx for the rationale —
 // the machine defers its dismissal listeners a frame, so tree-relative useId
@@ -34,6 +34,18 @@ export function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-lab
         // search), rather than the close button; fall back to the machine default.
         initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361): none of those five are Zag machines, so this
+        // machine's own dismissable-layer stack has no visibility into them --
+        // pressing Escape to close one opened from inside this Dialog closed
+        // the Dialog too, since both listen for the same keypress independently.
+        // Zag only calls its own dismiss when the event isn't already
+        // prevented (`@zag-js/dismissable`), so this cleanly defers instead of
+        // racing it.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)

package/dist/esm/components/drawer/drawer.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, hasOpenFloatingLayer, withDescribedBy } from "../../core/index.js";
 import { drawerRecipe } from "./drawer.recipe.js";
 let instanceCounter = 0;
 function useDrawerInstanceId() {
@@ -28,6 +28,13 @@ export function Drawer({ open, onOpenChange, side = "right", title, icon, "aria-
             onOpenChange(details.open);
         },
         "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
     });
     const api = dialog.connect(service, normalizeProps);
     if (!api.open)

package/dist/esm/core/floating-stack.js

@@ -48,3 +48,23 @@ export function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+export function hasOpenFloatingLayer() {
+    return stack.length > 0;
+}

package/dist/esm/core/index.js

@@ -4,7 +4,7 @@ export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
-export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
+export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";

package/dist/esm/product/recordpanel/recordpanel.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { X } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
+import { hasOpenFloatingLayer } from "../../core/index.js";
 import { tagTone, } from "../recordstable/index.js";
 import { recordpanelRecipe } from "./recordpanel.recipe.js";
 function FieldValue({ col, row, emptyLabel, }) {
@@ -28,11 +29,21 @@ function FieldValue({ col, row, emptyLabel, }) {
  */
 export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
     const titleId = React.useId();
-    // close on Escape while open
+    // close on Escape while open -- but not when a Menu/Select/Popover/
+    // ContextMenu opened from inside the panel (e.g. a footer "More actions"
+    // menu) is itself open (#361): that Escape belongs to the nested layer,
+    // which has its own listener and will close itself. Without this check
+    // both close on the same keypress, since neither knows about the other --
+    // none of the five are built on this listener or registered anywhere it
+    // can see, only on the shared floating-stack this checks instead.
     React.useEffect(() => {
         if (!record)
             return;
-        const onKey = (e) => e.key === "Escape" && onClose();
+        const onKey = (e) => {
+            if (e.key !== "Escape" || hasOpenFloatingLayer())
+                return;
+            onClose();
+        };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [record, onClose]);

package/dist/types/core/floating-stack.d.ts

@@ -11,3 +11,21 @@ export declare function registerFloatingLayer(el: HTMLElement): () => void;
  * right query for "was this click inside some floating child I opened".
  */
 export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;
+/**
+ * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
+ * `ContextMenu` is currently open, anywhere (#361).
+ *
+ * A dismissable container that closes on Escape via its OWN raw keydown
+ * listener or a library's dismissable-layer machine (`RecordPanel`,
+ * `Dialog`, `Drawer`) has no visibility into these five: none of them are
+ * built on the same machine, so a Menu opened from inside a `Dialog`
+ * registers here, but the Dialog's own Escape handling doesn't know to
+ * check for it. Both listeners fire on the same Escape keydown, so both
+ * close — the outer container closing was never the point of that
+ * keypress, which was meant for the nested layer alone. Call this before
+ * closing on Escape (or in a dismissable-layer's `onEscapeKeyDown`, calling
+ * `event.preventDefault()` when it's true) to defer instead: the nested
+ * layer's own listener still runs and closes it, and the outer container
+ * gets its own, uncontested Escape on the next press.
+ */
+export declare function hasOpenFloatingLayer(): boolean;

package/dist/types/core/index.d.ts

@@ -4,7 +4,7 @@ export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
-export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
+export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/package.json

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