lawgic-dev-kit 0.18.0 → 0.18.2
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/components/molecules/AutocompleteInput/AutocompleteInput.js +153 -126
- package/dist/components/molecules/AutocompleteInput/AutocompleteInput.types.d.ts +1 -0
- package/dist/lawgic-dev-kit.umd.js +43 -43
- package/dist/src/components/molecules/AutocompleteInput/AutocompleteInput.d.ts +1 -1
- package/dist/src/components/molecules/AutocompleteInput/AutocompleteInput.types.d.ts +1 -0
- package/package.json +1 -1
- package/dist/src/components/molecules/AutocompleteInput/index.d.ts +0 -1
- package/dist/src/components/molecules/index.d.ts +0 -16
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
import { j as t } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
-
import { FontAwesomeIcon as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { faChevronUp as
|
|
6
|
-
import { useFloating as
|
|
7
|
-
import { autoUpdate as
|
|
8
|
-
import { offset as
|
|
9
|
-
const
|
|
10
|
-
name:
|
|
11
|
-
error:
|
|
2
|
+
import { FontAwesomeIcon as K } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
|
|
3
|
+
import { useTheme as Y } from "../../../hooks/useTheme.js";
|
|
4
|
+
import { useState as C, useEffect as q, useRef as G } from "react";
|
|
5
|
+
import { faChevronUp as J } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
|
|
6
|
+
import { useFloating as Q, useClick as X, useDismiss as Z, useInteractions as _, useTransitionStyles as V } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
|
|
7
|
+
import { autoUpdate as ee } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
|
|
8
|
+
import { offset as te, flip as re, shift as oe, size as ne } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
|
|
9
|
+
const xe = ({
|
|
10
|
+
name: f,
|
|
11
|
+
error: i,
|
|
12
12
|
value: d,
|
|
13
|
-
onChange:
|
|
14
|
-
onOptionClick:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
onChange: b,
|
|
14
|
+
onOptionClick: y,
|
|
15
|
+
onKeyDown: v,
|
|
16
|
+
onSelect: j,
|
|
17
|
+
options: w,
|
|
18
|
+
placeholder: M,
|
|
19
|
+
label: P,
|
|
19
20
|
disabled: r = !1,
|
|
20
|
-
className:
|
|
21
|
-
showOptionsOnClick:
|
|
21
|
+
className: E = "",
|
|
22
|
+
showOptionsOnClick: I = !0,
|
|
22
23
|
showChevron: s = !1,
|
|
23
|
-
setValueOnOptionSelect:
|
|
24
|
-
leftSide:
|
|
25
|
-
rightSide:
|
|
24
|
+
setValueOnOptionSelect: O = !0,
|
|
25
|
+
leftSide: $,
|
|
26
|
+
rightSide: N
|
|
26
27
|
}) => {
|
|
27
|
-
const { t:
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
const { t: p } = Y(), [n, m] = C(d || ""), [l, a] = C(!1);
|
|
29
|
+
q(() => {
|
|
30
|
+
m(d || "");
|
|
30
31
|
}, [d]);
|
|
31
|
-
const
|
|
32
|
+
const x = G(null), { x: T, y: L, strategy: R, refs: c, context: h } = Q({
|
|
32
33
|
open: l,
|
|
33
|
-
onOpenChange:
|
|
34
|
+
onOpenChange: a,
|
|
34
35
|
middleware: [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
te(8),
|
|
37
|
+
re(),
|
|
38
|
+
oe({ padding: 8 }),
|
|
39
|
+
ne({
|
|
39
40
|
apply({ availableHeight: e, elements: o }) {
|
|
40
41
|
Object.assign(o.floating.style, {
|
|
41
42
|
maxHeight: `${Math.min(e - 10, 300)}px`
|
|
@@ -45,53 +46,57 @@ const me = ({
|
|
|
45
46
|
})
|
|
46
47
|
],
|
|
47
48
|
placement: "bottom-start",
|
|
48
|
-
whileElementsMounted:
|
|
49
|
-
}),
|
|
49
|
+
whileElementsMounted: ee
|
|
50
|
+
}), A = X(h, {
|
|
50
51
|
enabled: s
|
|
51
52
|
// Solo habilitar click si showChevron está activo
|
|
52
|
-
}),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
]), { isMounted:
|
|
53
|
+
}), F = Z(h), { getReferenceProps: z, getFloatingProps: D } = _([
|
|
54
|
+
A,
|
|
55
|
+
F
|
|
56
|
+
]), { isMounted: S, styles: U } = V(h, {
|
|
56
57
|
duration: { open: 200, close: 150 },
|
|
57
58
|
initial: { opacity: 0, transform: "translateY(-4px)" }
|
|
58
|
-
}),
|
|
59
|
-
const e = Array.isArray(
|
|
59
|
+
}), u = (() => {
|
|
60
|
+
const e = Array.isArray(w) ? w : [];
|
|
60
61
|
if (!n.trim()) return e;
|
|
61
62
|
const o = n.toLowerCase();
|
|
62
|
-
return e.filter((
|
|
63
|
-
})(),
|
|
64
|
-
|
|
65
|
-
}, U = (e) => {
|
|
66
|
-
p(e), g && g(e);
|
|
63
|
+
return e.filter((g) => g.label.toLowerCase().includes(o));
|
|
64
|
+
})(), k = (e) => {
|
|
65
|
+
O && m(e.label), a(!1), y && y(e), j && j(e.value);
|
|
67
66
|
}, W = (e) => {
|
|
68
|
-
e
|
|
67
|
+
m(e), b && b(e);
|
|
68
|
+
}, B = (e) => {
|
|
69
|
+
e.stopPropagation(), s && !r && (a(!l), !l && x.current && setTimeout(() => {
|
|
69
70
|
var o;
|
|
70
|
-
return (o =
|
|
71
|
+
return (o = x.current) == null ? void 0 : o.focus();
|
|
71
72
|
}, 100));
|
|
72
|
-
},
|
|
73
|
-
...s ?
|
|
73
|
+
}, H = {
|
|
74
|
+
...s ? z() : {},
|
|
74
75
|
onKeyDown: void 0,
|
|
75
76
|
// Remover el handler de teclado que interfiere
|
|
76
77
|
onClick: void 0
|
|
77
78
|
// Remover el click handler general
|
|
78
79
|
};
|
|
79
|
-
return /* @__PURE__ */ t.jsxs(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
80
|
+
return /* @__PURE__ */ t.jsxs(
|
|
81
|
+
"div",
|
|
82
|
+
{
|
|
83
|
+
className: `flex flex-col gap-8 select-none ${r && "cursor-not-allowed"} ${E}`,
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ t.jsx(
|
|
86
|
+
"h6",
|
|
87
|
+
{
|
|
88
|
+
className: `text-gray-600 font-600 group ${i && "!text-red-500"} text-label ${r && "text-gray-300"}`,
|
|
89
|
+
children: P
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ t.jsxs(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
ref: c.setReference,
|
|
96
|
+
className: `
|
|
92
97
|
flex items-center justify-between gap-8 p-16
|
|
93
98
|
|
|
94
|
-
${
|
|
99
|
+
${i && "!border-red-500"}
|
|
95
100
|
|
|
96
101
|
bg-light
|
|
97
102
|
|
|
@@ -105,73 +110,95 @@ const me = ({
|
|
|
105
110
|
${r && "hover:!cursor-pointer"}
|
|
106
111
|
group-disabled:bg-gray-500
|
|
107
112
|
`,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
position: L,
|
|
145
|
-
top: T ?? 0,
|
|
146
|
-
left: O ?? 0,
|
|
147
|
-
...S,
|
|
148
|
-
width: c.reference.current instanceof Element ? c.reference.current.clientWidth : void 0,
|
|
149
|
-
zIndex: 50
|
|
150
|
-
},
|
|
151
|
-
className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
|
|
152
|
-
...F(),
|
|
153
|
-
children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: $.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: $.map((e, o) => /* @__PURE__ */ t.jsx(
|
|
154
|
-
"li",
|
|
113
|
+
...H,
|
|
114
|
+
children: [
|
|
115
|
+
$ && $,
|
|
116
|
+
/* @__PURE__ */ t.jsx(
|
|
117
|
+
"input",
|
|
118
|
+
{
|
|
119
|
+
ref: x,
|
|
120
|
+
id: f,
|
|
121
|
+
name: f,
|
|
122
|
+
disabled: r,
|
|
123
|
+
placeholder: M,
|
|
124
|
+
value: n,
|
|
125
|
+
onClick: () => {
|
|
126
|
+
I && !l && !r && a(!0);
|
|
127
|
+
},
|
|
128
|
+
onChange: (e) => W(e.target.value),
|
|
129
|
+
onKeyDown: (e) => {
|
|
130
|
+
v && v(e), e.key === "Enter" && (e.preventDefault(), u.length > 0 && k(u[0])), e.key === "Escape" && a(!1);
|
|
131
|
+
},
|
|
132
|
+
className: `group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${r && "pointer-events-none !select-none !caret-transparent"}`
|
|
133
|
+
}
|
|
134
|
+
),
|
|
135
|
+
N && !s ? N : s && /* @__PURE__ */ t.jsx(
|
|
136
|
+
K,
|
|
137
|
+
{
|
|
138
|
+
icon: J,
|
|
139
|
+
className: `text-xl text-gray-500 cursor-pointer ${l && "rotate-180"} transition-transform duration-150 ease-in-out`,
|
|
140
|
+
onClick: B
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
/* @__PURE__ */ t.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: i && p(i || "", { x: p(f) }) }),
|
|
147
|
+
S && /* @__PURE__ */ t.jsx(
|
|
148
|
+
"div",
|
|
155
149
|
{
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
150
|
+
ref: c.setFloating,
|
|
151
|
+
style: {
|
|
152
|
+
position: R,
|
|
153
|
+
top: L ?? 0,
|
|
154
|
+
left: T ?? 0,
|
|
155
|
+
...U,
|
|
156
|
+
width: c.reference.current instanceof Element ? c.reference.current.clientWidth : void 0,
|
|
157
|
+
zIndex: 50
|
|
159
158
|
},
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
159
|
+
className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
|
|
160
|
+
...D(),
|
|
161
|
+
children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: u.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: u.map((e, o) => /* @__PURE__ */ t.jsx(
|
|
162
|
+
"li",
|
|
163
|
+
{
|
|
164
|
+
className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${n === e.label ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
|
|
165
|
+
onClick: (g) => {
|
|
166
|
+
g.stopPropagation(), k(e);
|
|
167
|
+
},
|
|
168
|
+
children: /* @__PURE__ */ t.jsx("span", { children: p(e.label) })
|
|
169
|
+
},
|
|
170
|
+
`${e.label}-${o}`
|
|
171
|
+
)) }) : n.length > 0 ? /* @__PURE__ */ t.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
|
|
172
|
+
/* @__PURE__ */ t.jsx(
|
|
173
|
+
"svg",
|
|
174
|
+
{
|
|
175
|
+
className: "mx-auto h-24 w-24 text-gray-400",
|
|
176
|
+
fill: "none",
|
|
177
|
+
stroke: "currentColor",
|
|
178
|
+
viewBox: "0 0 24 24",
|
|
179
|
+
children: /* @__PURE__ */ t.jsx(
|
|
180
|
+
"path",
|
|
181
|
+
{
|
|
182
|
+
strokeLinecap: "round",
|
|
183
|
+
strokeLinejoin: "round",
|
|
184
|
+
strokeWidth: "2",
|
|
185
|
+
d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
),
|
|
190
|
+
/* @__PURE__ */ t.jsxs("p", { className: "mt-8 text-body-s", children: [
|
|
191
|
+
'No se encontraron resultados para "',
|
|
192
|
+
n,
|
|
193
|
+
'"'
|
|
194
|
+
] })
|
|
195
|
+
] }) : null })
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
);
|
|
174
201
|
};
|
|
175
202
|
export {
|
|
176
|
-
|
|
203
|
+
xe as default
|
|
177
204
|
};
|