framepexls-ui-lib 0.3.6 → 0.3.7

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.
Files changed (5) hide show
  1. package/dist/Checkbox.d.mts +1 -1
  2. package/dist/Checkbox.d.ts +1 -1
  3. package/dist/ComboSelect.js +23 -9
  4. package/dist/ComboSelect.mjs +23 -9
  5. package/package.json +1 -1
package/dist/Checkbox.d.mts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/Checkbox.d.ts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
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) setOpen(false);
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)) setOpen(false);
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
- return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
123
- }, [open, isOutside]);
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
- setOpen(false);
291
- setQ("");
306
+ closeDropdown();
292
307
  },
293
308
  onContextMenu: () => {
294
- setOpen(false);
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) setOpen(false);
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)) setOpen(false);
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
- return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
90
- }, [open, isOutside]);
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
- setOpen(false);
258
- setQ("");
273
+ closeDropdown();
259
274
  },
260
275
  onContextMenu: () => {
261
- setOpen(false);
262
- setQ("");
276
+ closeDropdown();
263
277
  }
264
278
  }
265
279
  ),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.6",
3
+ "version": "0.3.7",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",