@martinsura/ui 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -648,9 +648,28 @@ var SwitchInput = ({
     errorDisplay && /* @__PURE__ */ jsxRuntime.jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
 };
+
+// src/floating/layerStack.ts
+var FLOATING_ROOT_SELECTOR = "[data-ui-floating-root]";
+var DRAWER_ROOT_SELECTOR = "[data-ui-drawer-root]";
+function getTopmostElement(selector) {
+  const elements = document.querySelectorAll(selector);
+  return elements.length > 0 ? elements[elements.length - 1] : null;
+}
+function hasFloatingRootOpen() {
+  return getTopmostElement(FLOATING_ROOT_SELECTOR) !== null;
+}
+function isTopmostFloatingRoot(element) {
+  return element !== null && getTopmostElement(FLOATING_ROOT_SELECTOR) === element;
+}
+function isTopmostDrawerRoot(element) {
+  return element !== null && getTopmostElement(DRAWER_ROOT_SELECTOR) === element;
+}
+function isTargetInsideFloatingRoot(target) {
+  return target instanceof Element && target.closest(FLOATING_ROOT_SELECTOR) !== null;
+}
 var GAP = 6;
 var VIEWPORT_MARGIN = 8;
-var FLOATING_ROOT_SELECTOR = "[data-ui-floating-root]";
 function calcPosition(triggerRect, panelRect, placement) {
   const spaceBelow = window.innerHeight - triggerRect.bottom - VIEWPORT_MARGIN;
   const spaceAbove = triggerRect.top - VIEWPORT_MARGIN;
@@ -757,7 +776,7 @@ var Dropdown = ({
       }
     };
     const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
         setOpen(false);
       }
     };
@@ -1921,6 +1940,19 @@ var SelectDropdown = (props) => {
   react.useEffect(() => {
     if (props.isOpen) {
       document.addEventListener("mousedown", handleMouseDown);
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          props.onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleMouseDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
     }
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [props.isOpen, handleMouseDown]);
@@ -2270,6 +2302,19 @@ var CalendarPopup = (props) => {
   react.useEffect(() => {
     if (props.isOpen) {
       document.addEventListener("mousedown", handleMouseDown);
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          props.onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleMouseDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
     }
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [props.isOpen, handleMouseDown]);
@@ -2322,7 +2367,7 @@ var CalendarPopup = (props) => {
         ref: popupRef,
         "data-ui-floating-root": "",
         style: { top: pos.top, left: pos.left },
-        className: "fixed z-1000 bg-white border border-(--ui-border) rounded-(--ui-radius-lg) shadow-lg w-68",
+        className: "fixed z-1003 bg-white border border-(--ui-border) rounded-(--ui-radius-lg) shadow-lg w-68",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-(--ui-border)", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2821,6 +2866,7 @@ var Drawer = ({ placement = "top", ...props }) => {
   const [footer, setFooter] = react.useState(null);
   const [loading, setLoading] = react.useState(false);
   const frameRef = react.useRef(0);
+  const panelRef = react.useRef(null);
   react.useEffect(() => {
     if (props.isOpen) {
       setRendered(true);
@@ -2839,9 +2885,19 @@ var Drawer = ({ placement = "top", ...props }) => {
       return;
     }
     const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        props.onClose(false);
+      if (e.key !== "Escape" || e.defaultPrevented) {
+        return;
+      }
+      if (hasFloatingRootOpen()) {
+        return;
+      }
+      if (isTargetInsideFloatingRoot(e.target)) {
+        return;
+      }
+      if (!isTopmostDrawerRoot(panelRef.current)) {
+        return;
       }
+      props.onClose(false);
     };
     document.body.style.overflow = "hidden";
     document.addEventListener("keydown", handleKeyDown);
@@ -2878,6 +2934,8 @@ var Drawer = ({ placement = "top", ...props }) => {
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ref: panelRef,
+          "data-ui-drawer-root": "",
           className: tailwindMerge.twMerge(
             panelBase[placement],
             "bg-white shadow-xl transition-transform duration-220 ease-out",