framepexls-ui-lib 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ComboSelect.js +23 -9
- package/dist/ComboSelect.mjs +23 -9
- package/dist/MultiComboSelect.js +25 -1
- package/dist/MultiComboSelect.mjs +26 -2
- package/package.json +1 -1
package/dist/ComboSelect.js
CHANGED
|
@@ -90,6 +90,14 @@ function ComboSelect({
|
|
|
90
90
|
const flat = sections ? sections.flatMap((s) => s.options) : options;
|
|
91
91
|
return flat.find((o) => o.value === value) || null;
|
|
92
92
|
}, [options, value, sections]);
|
|
93
|
+
const closeDropdown = import_react.default.useCallback(() => {
|
|
94
|
+
setOpen(false);
|
|
95
|
+
if (clearQueryOnSelect) setQ("");
|
|
96
|
+
requestAnimationFrame(() => {
|
|
97
|
+
var _a2;
|
|
98
|
+
return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
|
|
99
|
+
});
|
|
100
|
+
}, [clearQueryOnSelect]);
|
|
93
101
|
import_react.default.useEffect(() => {
|
|
94
102
|
if (!open) return;
|
|
95
103
|
const onFocusIn = (e) => {
|
|
@@ -97,11 +105,11 @@ function ComboSelect({
|
|
|
97
105
|
const t = e.target;
|
|
98
106
|
const insideRoot = !!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(t));
|
|
99
107
|
const insideDrop = !!((_b = dropRef.current) == null ? void 0 : _b.contains(t));
|
|
100
|
-
if (!insideRoot && !insideDrop)
|
|
108
|
+
if (!insideRoot && !insideDrop) closeDropdown();
|
|
101
109
|
};
|
|
102
110
|
document.addEventListener("focusin", onFocusIn);
|
|
103
111
|
return () => document.removeEventListener("focusin", onFocusIn);
|
|
104
|
-
}, [open]);
|
|
112
|
+
}, [open, closeDropdown]);
|
|
105
113
|
import_react.default.useEffect(() => {
|
|
106
114
|
if (disabled && open) setOpen(false);
|
|
107
115
|
}, [disabled, open]);
|
|
@@ -116,11 +124,19 @@ function ComboSelect({
|
|
|
116
124
|
import_react.default.useEffect(() => {
|
|
117
125
|
if (!open) return;
|
|
118
126
|
const onPointerDownCapture = (e) => {
|
|
119
|
-
if (isOutside(e))
|
|
127
|
+
if (isOutside(e)) closeDropdown();
|
|
128
|
+
};
|
|
129
|
+
const onKeyDown2 = (e) => {
|
|
130
|
+
if (!open) return;
|
|
131
|
+
if (e.key === "Escape") closeDropdown();
|
|
120
132
|
};
|
|
121
133
|
window.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
122
|
-
|
|
123
|
-
|
|
134
|
+
window.addEventListener("keydown", onKeyDown2, true);
|
|
135
|
+
return () => {
|
|
136
|
+
window.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
137
|
+
window.removeEventListener("keydown", onKeyDown2, true);
|
|
138
|
+
};
|
|
139
|
+
}, [open, isOutside, closeDropdown]);
|
|
124
140
|
const flatAll = import_react.default.useMemo(() => {
|
|
125
141
|
if (!sections)
|
|
126
142
|
return options.map((opt) => ({ kind: "option", secKey: "__", opt }));
|
|
@@ -287,12 +303,10 @@ function ComboSelect({
|
|
|
287
303
|
className: "fixed inset-0",
|
|
288
304
|
style: { zIndex: 1199 },
|
|
289
305
|
onMouseDown: () => {
|
|
290
|
-
|
|
291
|
-
setQ("");
|
|
306
|
+
closeDropdown();
|
|
292
307
|
},
|
|
293
308
|
onContextMenu: () => {
|
|
294
|
-
|
|
295
|
-
setQ("");
|
|
309
|
+
closeDropdown();
|
|
296
310
|
}
|
|
297
311
|
}
|
|
298
312
|
),
|
package/dist/ComboSelect.mjs
CHANGED
|
@@ -57,6 +57,14 @@ function ComboSelect({
|
|
|
57
57
|
const flat = sections ? sections.flatMap((s) => s.options) : options;
|
|
58
58
|
return flat.find((o) => o.value === value) || null;
|
|
59
59
|
}, [options, value, sections]);
|
|
60
|
+
const closeDropdown = React.useCallback(() => {
|
|
61
|
+
setOpen(false);
|
|
62
|
+
if (clearQueryOnSelect) setQ("");
|
|
63
|
+
requestAnimationFrame(() => {
|
|
64
|
+
var _a2;
|
|
65
|
+
return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
|
|
66
|
+
});
|
|
67
|
+
}, [clearQueryOnSelect]);
|
|
60
68
|
React.useEffect(() => {
|
|
61
69
|
if (!open) return;
|
|
62
70
|
const onFocusIn = (e) => {
|
|
@@ -64,11 +72,11 @@ function ComboSelect({
|
|
|
64
72
|
const t = e.target;
|
|
65
73
|
const insideRoot = !!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(t));
|
|
66
74
|
const insideDrop = !!((_b = dropRef.current) == null ? void 0 : _b.contains(t));
|
|
67
|
-
if (!insideRoot && !insideDrop)
|
|
75
|
+
if (!insideRoot && !insideDrop) closeDropdown();
|
|
68
76
|
};
|
|
69
77
|
document.addEventListener("focusin", onFocusIn);
|
|
70
78
|
return () => document.removeEventListener("focusin", onFocusIn);
|
|
71
|
-
}, [open]);
|
|
79
|
+
}, [open, closeDropdown]);
|
|
72
80
|
React.useEffect(() => {
|
|
73
81
|
if (disabled && open) setOpen(false);
|
|
74
82
|
}, [disabled, open]);
|
|
@@ -83,11 +91,19 @@ function ComboSelect({
|
|
|
83
91
|
React.useEffect(() => {
|
|
84
92
|
if (!open) return;
|
|
85
93
|
const onPointerDownCapture = (e) => {
|
|
86
|
-
if (isOutside(e))
|
|
94
|
+
if (isOutside(e)) closeDropdown();
|
|
95
|
+
};
|
|
96
|
+
const onKeyDown2 = (e) => {
|
|
97
|
+
if (!open) return;
|
|
98
|
+
if (e.key === "Escape") closeDropdown();
|
|
87
99
|
};
|
|
88
100
|
window.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
89
|
-
|
|
90
|
-
|
|
101
|
+
window.addEventListener("keydown", onKeyDown2, true);
|
|
102
|
+
return () => {
|
|
103
|
+
window.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
104
|
+
window.removeEventListener("keydown", onKeyDown2, true);
|
|
105
|
+
};
|
|
106
|
+
}, [open, isOutside, closeDropdown]);
|
|
91
107
|
const flatAll = React.useMemo(() => {
|
|
92
108
|
if (!sections)
|
|
93
109
|
return options.map((opt) => ({ kind: "option", secKey: "__", opt }));
|
|
@@ -254,12 +270,10 @@ function ComboSelect({
|
|
|
254
270
|
className: "fixed inset-0",
|
|
255
271
|
style: { zIndex: 1199 },
|
|
256
272
|
onMouseDown: () => {
|
|
257
|
-
|
|
258
|
-
setQ("");
|
|
273
|
+
closeDropdown();
|
|
259
274
|
},
|
|
260
275
|
onContextMenu: () => {
|
|
261
|
-
|
|
262
|
-
setQ("");
|
|
276
|
+
closeDropdown();
|
|
263
277
|
}
|
|
264
278
|
}
|
|
265
279
|
),
|
package/dist/MultiComboSelect.js
CHANGED
|
@@ -53,6 +53,7 @@ function MultiComboSelect({
|
|
|
53
53
|
enableDialog = true,
|
|
54
54
|
dialogTitle = "Seleccionadas"
|
|
55
55
|
}) {
|
|
56
|
+
const rootRef = import_react.default.useRef(null);
|
|
56
57
|
const selectedSet = import_react.default.useMemo(() => new Set(value), [value]);
|
|
57
58
|
const [dialogOpen, setDialogOpen] = import_react.default.useState(false);
|
|
58
59
|
const toggle = import_react.default.useCallback(
|
|
@@ -65,7 +66,30 @@ function MultiComboSelect({
|
|
|
65
66
|
},
|
|
66
67
|
[selectedSet, onChange]
|
|
67
68
|
);
|
|
68
|
-
|
|
69
|
+
import_react.default.useEffect(() => {
|
|
70
|
+
const onPointerDownCapture = (e) => {
|
|
71
|
+
var _a;
|
|
72
|
+
const t = e.target;
|
|
73
|
+
const inRoot = !!rootRef.current && rootRef.current.contains(t);
|
|
74
|
+
const inListbox = !!(t == null ? void 0 : t.closest('[role="listbox"]'));
|
|
75
|
+
if (!inRoot && !inListbox) {
|
|
76
|
+
const input = (_a = rootRef.current) == null ? void 0 : _a.querySelector('input[role="combobox"]');
|
|
77
|
+
if (input) {
|
|
78
|
+
try {
|
|
79
|
+
input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
|
|
80
|
+
} catch {
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
input.blur();
|
|
84
|
+
} catch {
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
window.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
90
|
+
return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
91
|
+
}, []);
|
|
92
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, children: [
|
|
69
93
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
94
|
import_ComboSelect.default,
|
|
71
95
|
{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import ComboSelect from "./ComboSelect";
|
|
5
5
|
import Dialog from "./Dialog";
|
|
@@ -20,6 +20,7 @@ function MultiComboSelect({
|
|
|
20
20
|
enableDialog = true,
|
|
21
21
|
dialogTitle = "Seleccionadas"
|
|
22
22
|
}) {
|
|
23
|
+
const rootRef = React.useRef(null);
|
|
23
24
|
const selectedSet = React.useMemo(() => new Set(value), [value]);
|
|
24
25
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
25
26
|
const toggle = React.useCallback(
|
|
@@ -32,7 +33,30 @@ function MultiComboSelect({
|
|
|
32
33
|
},
|
|
33
34
|
[selectedSet, onChange]
|
|
34
35
|
);
|
|
35
|
-
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
const onPointerDownCapture = (e) => {
|
|
38
|
+
var _a;
|
|
39
|
+
const t = e.target;
|
|
40
|
+
const inRoot = !!rootRef.current && rootRef.current.contains(t);
|
|
41
|
+
const inListbox = !!(t == null ? void 0 : t.closest('[role="listbox"]'));
|
|
42
|
+
if (!inRoot && !inListbox) {
|
|
43
|
+
const input = (_a = rootRef.current) == null ? void 0 : _a.querySelector('input[role="combobox"]');
|
|
44
|
+
if (input) {
|
|
45
|
+
try {
|
|
46
|
+
input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
|
|
47
|
+
} catch {
|
|
48
|
+
}
|
|
49
|
+
try {
|
|
50
|
+
input.blur();
|
|
51
|
+
} catch {
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
window.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
57
|
+
return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
58
|
+
}, []);
|
|
59
|
+
return /* @__PURE__ */ jsxs("div", { ref: rootRef, children: [
|
|
36
60
|
/* @__PURE__ */ jsx(
|
|
37
61
|
ComboSelect,
|
|
38
62
|
{
|