framepexls-ui-lib 0.3.7 → 0.3.9

package/dist/ComboSelect.js

@@ -74,6 +74,7 @@ function ComboSelect({
   var _a;
   const [query, _setQuery] = import_react.default.useState("");
   const [open, setOpen] = import_react.default.useState(false);
+  const closingUntil = import_react.default.useRef(0);
   const [activeIdx, setActiveIdx] = import_react.default.useState(0);
   const setQ = import_react.default.useCallback(
     (q) => {
@@ -91,6 +92,7 @@ function ComboSelect({
     return flat.find((o) => o.value === value) || null;
   }, [options, value, sections]);
   const closeDropdown = import_react.default.useCallback(() => {
+    closingUntil.current = (typeof performance !== "undefined" ? performance.now() : Date.now()) + 200;
     setOpen(false);
     if (clearQueryOnSelect) setQ("");
     requestAnimationFrame(() => {
@@ -126,14 +128,24 @@ function ComboSelect({
     const onPointerDownCapture = (e) => {
       if (isOutside(e)) closeDropdown();
     };
+    const onMouseDown = (e) => {
+      if (isOutside(e)) closeDropdown();
+    };
+    const onTouchStart = (e) => {
+      if (isOutside(e)) closeDropdown();
+    };
     const onKeyDown2 = (e) => {
       if (!open) return;
       if (e.key === "Escape") closeDropdown();
     };
     window.addEventListener("pointerdown", onPointerDownCapture, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("touchstart", onTouchStart, true);
     window.addEventListener("keydown", onKeyDown2, true);
     return () => {
       window.removeEventListener("pointerdown", onPointerDownCapture, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("touchstart", onTouchStart, true);
       window.removeEventListener("keydown", onKeyDown2, true);
     };
   }, [open, isOutside, closeDropdown]);
@@ -401,7 +413,11 @@ function ComboSelect({
                 setQ(e.target.value);
                 if (!open) setOpen(true);
               },
-              onFocus: () => setOpen(true),
+              onFocus: () => {
+                const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+                if (now < closingUntil.current) return;
+                setOpen(true);
+              },
               onKeyDown,
               placeholder,
               disabled,

package/dist/ComboSelect.mjs

@@ -41,6 +41,7 @@ function ComboSelect({
   var _a;
   const [query, _setQuery] = React.useState("");
   const [open, setOpen] = React.useState(false);
+  const closingUntil = React.useRef(0);
   const [activeIdx, setActiveIdx] = React.useState(0);
   const setQ = React.useCallback(
     (q) => {
@@ -58,6 +59,7 @@ function ComboSelect({
     return flat.find((o) => o.value === value) || null;
   }, [options, value, sections]);
   const closeDropdown = React.useCallback(() => {
+    closingUntil.current = (typeof performance !== "undefined" ? performance.now() : Date.now()) + 200;
     setOpen(false);
     if (clearQueryOnSelect) setQ("");
     requestAnimationFrame(() => {
@@ -93,14 +95,24 @@ function ComboSelect({
     const onPointerDownCapture = (e) => {
       if (isOutside(e)) closeDropdown();
     };
+    const onMouseDown = (e) => {
+      if (isOutside(e)) closeDropdown();
+    };
+    const onTouchStart = (e) => {
+      if (isOutside(e)) closeDropdown();
+    };
     const onKeyDown2 = (e) => {
       if (!open) return;
       if (e.key === "Escape") closeDropdown();
     };
     window.addEventListener("pointerdown", onPointerDownCapture, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("touchstart", onTouchStart, true);
     window.addEventListener("keydown", onKeyDown2, true);
     return () => {
       window.removeEventListener("pointerdown", onPointerDownCapture, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("touchstart", onTouchStart, true);
       window.removeEventListener("keydown", onKeyDown2, true);
     };
   }, [open, isOutside, closeDropdown]);
@@ -368,7 +380,11 @@ function ComboSelect({
                 setQ(e.target.value);
                 if (!open) setOpen(true);
               },
-              onFocus: () => setOpen(true),
+              onFocus: () => {
+                const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+                if (now < closingUntil.current) return;
+                setOpen(true);
+              },
               onKeyDown,
               placeholder,
               disabled,

package/dist/Dropdown.js

@@ -153,7 +153,7 @@ function Trigger({
         className: [
           "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
           "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
-          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-[var(--fx-surface)]",
+          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10",
           className
         ].join(" "),
         ...safe,

package/dist/Dropdown.mjs

@@ -123,7 +123,7 @@ function Trigger({
         className: [
           "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
           "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
-          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-[var(--fx-surface)]",
+          "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10",
           className
         ].join(" "),
         ...safe,

package/dist/MultiComboSelect.js

@@ -53,6 +53,7 @@ function MultiComboSelect({
   enableDialog = true,
   dialogTitle = "Seleccionadas"
 }) {
+  const rootRef = import_react.default.useRef(null);
   const selectedSet = import_react.default.useMemo(() => new Set(value), [value]);
   const [dialogOpen, setDialogOpen] = import_react.default.useState(false);
   const toggle = import_react.default.useCallback(
@@ -65,7 +66,35 @@ function MultiComboSelect({
     },
     [selectedSet, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  import_react.default.useEffect(() => {
+    const closeIfOutside = (e) => {
+      var _a;
+      const t = e.target;
+      const inRoot = !!rootRef.current && rootRef.current.contains(t);
+      const inListbox = !!(t == null ? void 0 : t.closest('[role="listbox"]'));
+      if (!inRoot && !inListbox) {
+        const input = (_a = rootRef.current) == null ? void 0 : _a.querySelector('input[role="combobox"]');
+        if (input) {
+          try {
+            input.blur();
+          } catch {
+          }
+        }
+      }
+    };
+    const onPointerDownCapture = (e) => closeIfOutside(e);
+    const onMouseDown = (e) => closeIfOutside(e);
+    const onTouchStart = (e) => closeIfOutside(e);
+    window.addEventListener("pointerdown", onPointerDownCapture, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("touchstart", onTouchStart, true);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDownCapture, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("touchstart", onTouchStart, true);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ComboSelect.default,
       {

package/dist/MultiComboSelect.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import ComboSelect from "./ComboSelect";
 import Dialog from "./Dialog";
@@ -20,6 +20,7 @@ function MultiComboSelect({
   enableDialog = true,
   dialogTitle = "Seleccionadas"
 }) {
+  const rootRef = React.useRef(null);
   const selectedSet = React.useMemo(() => new Set(value), [value]);
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const toggle = React.useCallback(
@@ -32,7 +33,35 @@ function MultiComboSelect({
     },
     [selectedSet, onChange]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  React.useEffect(() => {
+    const closeIfOutside = (e) => {
+      var _a;
+      const t = e.target;
+      const inRoot = !!rootRef.current && rootRef.current.contains(t);
+      const inListbox = !!(t == null ? void 0 : t.closest('[role="listbox"]'));
+      if (!inRoot && !inListbox) {
+        const input = (_a = rootRef.current) == null ? void 0 : _a.querySelector('input[role="combobox"]');
+        if (input) {
+          try {
+            input.blur();
+          } catch {
+          }
+        }
+      }
+    };
+    const onPointerDownCapture = (e) => closeIfOutside(e);
+    const onMouseDown = (e) => closeIfOutside(e);
+    const onTouchStart = (e) => closeIfOutside(e);
+    window.addEventListener("pointerdown", onPointerDownCapture, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("touchstart", onTouchStart, true);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDownCapture, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("touchstart", onTouchStart, true);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, children: [
     /* @__PURE__ */ jsx(
       ComboSelect,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",