@geomak/ui 7.7.1 → 7.7.2

package/dist/index.js

@@ -110,9 +110,9 @@ function Box({
   style,
   children
 }) {
-  const Element = as ?? "div";
+  const Element2 = as ?? "div";
   return /* @__PURE__ */ jsx(
-    Element,
+    Element2,
     {
       onClick,
       className: cx(
@@ -435,9 +435,9 @@ function Typography({
   style,
   children
 }) {
-  const Element = as ?? DEFAULT_ELEMENT[variant];
+  const Element2 = as ?? DEFAULT_ELEMENT[variant];
   return /* @__PURE__ */ jsx(
-    Element,
+    Element2,
     {
       className: cx(
         VARIANT_CLASS[variant],
@@ -5486,14 +5486,33 @@ function EditableCell({
   onCellEdit
 }) {
   const [editing, setEditing] = useState(false);
+  const editRef = useRef(null);
   const value = row[col.keyBind];
   const commit = (next) => {
     setEditing(false);
     onCellEdit?.({ row, key: col.keyBind, value: next, rowIndex });
   };
   const cancel = () => setEditing(false);
+  useEffect(() => {
+    if (!editing || !col.editor) return;
+    const onMouseDown = (e) => {
+      const target = e.target;
+      if (editRef.current && editRef.current.contains(target)) return;
+      if (target instanceof Element && target.closest("[data-radix-popper-content-wrapper],[data-radix-portal]")) return;
+      cancel();
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [editing, col.editor]);
   if (editing) {
-    if (col.editor) return /* @__PURE__ */ jsx(Fragment, { children: col.editor({ value, row, commit, cancel }) });
+    if (col.editor) return /* @__PURE__ */ jsx("div", { ref: editRef, children: col.editor({ value, row, commit, cancel }) });
     return /* @__PURE__ */ jsx(
       "input",
       {