prometeo-design-system 1.7.2 → 1.7.3
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/SelectFormik.es.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { j as t } from "./jsx-runtime-ByW6EXIE.js";
|
|
2
2
|
import { Icons as v } from "./Icons.es.js";
|
|
3
3
|
import { c as o } from "./cn-B6yFEsav.js";
|
|
4
|
-
import { useField as
|
|
5
|
-
import { useState as
|
|
4
|
+
import { useField as P, ErrorMessage as M } from "formik";
|
|
5
|
+
import { useState as w, useRef as R, useEffect as L } from "react";
|
|
6
6
|
import B from "./Spinner.es.js";
|
|
7
7
|
const T = ({
|
|
8
|
-
label:
|
|
9
|
-
name:
|
|
8
|
+
label: N,
|
|
9
|
+
name: A,
|
|
10
10
|
placeholder: b = "",
|
|
11
11
|
disabled: c,
|
|
12
|
-
containerClassName:
|
|
13
|
-
className:
|
|
12
|
+
containerClassName: k,
|
|
13
|
+
className: C,
|
|
14
14
|
options: u = [],
|
|
15
15
|
multiple: n = !1,
|
|
16
|
-
emptyMessage:
|
|
16
|
+
emptyMessage: D = "No hay opciones disponibles",
|
|
17
17
|
labelVariant: g = "default",
|
|
18
|
-
isFetching:
|
|
18
|
+
isFetching: O = !1
|
|
19
19
|
}) => {
|
|
20
|
-
const [a,
|
|
20
|
+
const [a, y, i] = P(A), [l, f] = w(!1), [m, j] = w(!1), x = R(null), p = y.touched && y.error, d = a.value && (Array.isArray(a.value) ? a.value.length > 0 : a.value.toString().length > 0), S = () => g === "static" || d || l || m ? "-top-3 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", V = () => a.value ? Array.isArray(a.value) ? u.filter((e) => a.value.includes(e.id)) : u.filter((e) => e.id === a.value) : [], z = (e) => {
|
|
21
21
|
if (n) {
|
|
22
22
|
const r = Array.isArray(a.value) ? a.value : [], s = r.includes(e.id) ? r.filter((h) => h !== e.id) : [...r, e.id];
|
|
23
23
|
i.setValue(s);
|
|
@@ -25,9 +25,11 @@ const T = ({
|
|
|
25
25
|
i.setValue(e.id), f(!1);
|
|
26
26
|
}, E = (e) => {
|
|
27
27
|
e.stopPropagation(), i.setValue(n ? [] : "");
|
|
28
|
-
},
|
|
28
|
+
}, F = (e, r) => {
|
|
29
29
|
if (r?.stopPropagation(), n && Array.isArray(a.value)) {
|
|
30
|
-
const s = a.value.filter(
|
|
30
|
+
const s = a.value.filter(
|
|
31
|
+
(h) => h !== e
|
|
32
|
+
);
|
|
31
33
|
i.setValue(s);
|
|
32
34
|
}
|
|
33
35
|
};
|
|
@@ -39,124 +41,137 @@ const T = ({
|
|
|
39
41
|
document.removeEventListener("mousedown", e);
|
|
40
42
|
};
|
|
41
43
|
}, [l]);
|
|
42
|
-
const
|
|
44
|
+
const I = () => {
|
|
43
45
|
const e = V();
|
|
44
|
-
return e.length === 0 ? b ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: b }) : null : n ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 flex-wrap py-1", children: e.map((r) => /* @__PURE__ */ t.jsxs(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
return e.length === 0 ? b ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: b }) : null : n ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 flex-wrap py-1", children: e.map((r) => /* @__PURE__ */ t.jsxs(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-default-default text-white text-xs rounded-md",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ t.jsx("span", { className: "truncate max-w-20", children: r.label }),
|
|
52
|
+
/* @__PURE__ */ t.jsx(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onMouseDown: (s) => {
|
|
56
|
+
s.preventDefault(), F(r.id, s);
|
|
57
|
+
},
|
|
58
|
+
className: "flex-shrink-0 hover:bg-primary-strong-default rounded-sm p-0.5 transition-colors",
|
|
59
|
+
type: "button",
|
|
60
|
+
tabIndex: -1,
|
|
61
|
+
children: /* @__PURE__ */ t.jsx(v.Close, { size: 12, className: "" })
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
r.id
|
|
67
|
+
)) }) : /* @__PURE__ */ t.jsx("span", { children: e[0]?.label });
|
|
59
68
|
};
|
|
60
|
-
return /* @__PURE__ */ t.jsxs(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
return /* @__PURE__ */ t.jsxs(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
className: o("relative w-full bg-inherit", k),
|
|
73
|
+
ref: x,
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ t.jsxs("div", { className: "relative bg-inherit", children: [
|
|
76
|
+
/* @__PURE__ */ t.jsxs(
|
|
77
|
+
"button",
|
|
78
|
+
{
|
|
79
|
+
type: "button",
|
|
80
|
+
disabled: c,
|
|
81
|
+
onClick: () => !c && f(!l),
|
|
82
|
+
onFocus: () => j(!0),
|
|
83
|
+
onBlur: () => j(!1),
|
|
84
|
+
className: o(
|
|
85
|
+
"w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
|
|
86
|
+
"flex items-center justify-between bg-transparent focus:outline-none",
|
|
87
|
+
d || l || m ? "border-primary-default-default border-2" : p ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
|
|
88
|
+
c && "opacity-50 cursor-not-allowed",
|
|
89
|
+
C
|
|
90
|
+
),
|
|
91
|
+
children: [
|
|
92
|
+
/* @__PURE__ */ t.jsx(
|
|
93
|
+
"label",
|
|
94
|
+
{
|
|
95
|
+
className: o(
|
|
96
|
+
"absolute pointer-events-none bg-inherit px-1 z-10",
|
|
97
|
+
g === "default" && "transition-all duration-200 ease-in-out",
|
|
98
|
+
"text-md",
|
|
99
|
+
S(),
|
|
100
|
+
d || l || m ? "text-primary-default-default" : p ? "text-red-500" : "text-neutral-medium-default",
|
|
101
|
+
"left-3"
|
|
102
|
+
),
|
|
103
|
+
children: N
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
/* @__PURE__ */ t.jsx("div", { className: "flex-1 min-w-0", children: I() }),
|
|
107
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [
|
|
108
|
+
d && /* @__PURE__ */ t.jsx(
|
|
109
|
+
"button",
|
|
110
|
+
{
|
|
111
|
+
onMouseDown: (e) => {
|
|
112
|
+
e.preventDefault(), e.stopPropagation(), E(e);
|
|
113
|
+
},
|
|
114
|
+
className: "text-neutral-medium-default hover:text-neutral-default-default transition-colors",
|
|
115
|
+
type: "button",
|
|
116
|
+
tabIndex: -1,
|
|
117
|
+
children: /* @__PURE__ */ t.jsx(v.Close, { size: 16, className: "" })
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
O ? /* @__PURE__ */ t.jsx(B, { size: 20, variant: "clip" }) : /* @__PURE__ */ t.jsx(
|
|
121
|
+
v.ChevronDown,
|
|
122
|
+
{
|
|
123
|
+
size: 20,
|
|
124
|
+
className: o(
|
|
125
|
+
"transition-transform text-neutral-default-default",
|
|
126
|
+
l ? "rotate-180" : ""
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
] })
|
|
131
|
+
]
|
|
132
|
+
}
|
|
76
133
|
),
|
|
77
|
-
children:
|
|
78
|
-
|
|
79
|
-
|
|
134
|
+
l && /* @__PURE__ */ t.jsx("div", { className: "absolute z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg max-h-60 overflow-auto", children: u.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: D }) : u.map((e) => {
|
|
135
|
+
const r = n ? Array.isArray(a.value) && a.value.includes(e.id) : a.value === e.id;
|
|
136
|
+
return /* @__PURE__ */ t.jsxs(
|
|
137
|
+
"div",
|
|
80
138
|
{
|
|
139
|
+
onMouseDown: (s) => {
|
|
140
|
+
s.preventDefault(), z(e), s.stopPropagation();
|
|
141
|
+
},
|
|
81
142
|
className: o(
|
|
82
|
-
"
|
|
83
|
-
|
|
84
|
-
"text-md",
|
|
85
|
-
S(),
|
|
86
|
-
d || l || m ? "text-primary-default-default" : p ? "text-red-500" : "text-neutral-medium-default",
|
|
87
|
-
"left-3"
|
|
143
|
+
"px-3 py-2 cursor-pointer flex items-center transition-colors",
|
|
144
|
+
r ? "bg-primary-default-default text-white" : "hover:bg-neutral-medium-selected text-neutral-default-default"
|
|
88
145
|
),
|
|
89
|
-
children:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
{
|
|
110
|
-
size: 20,
|
|
111
|
-
className: o(
|
|
112
|
-
"transition-transform text-neutral-default-default",
|
|
113
|
-
l ? "rotate-180" : ""
|
|
114
|
-
)
|
|
115
|
-
}
|
|
116
|
-
)
|
|
117
|
-
] })
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
),
|
|
121
|
-
l && /* @__PURE__ */ t.jsx("div", { className: "absolute z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg max-h-60 overflow-auto", children: u.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: O }) : u.map((e) => {
|
|
122
|
-
const r = n ? Array.isArray(a.value) && a.value.includes(e.id) : a.value === e.id;
|
|
123
|
-
return /* @__PURE__ */ t.jsxs(
|
|
124
|
-
"div",
|
|
146
|
+
children: [
|
|
147
|
+
n && /* @__PURE__ */ t.jsx(
|
|
148
|
+
"input",
|
|
149
|
+
{
|
|
150
|
+
type: "checkbox",
|
|
151
|
+
checked: r,
|
|
152
|
+
onChange: () => {
|
|
153
|
+
},
|
|
154
|
+
className: "mr-2 pointer-events-none"
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
/* @__PURE__ */ t.jsx("span", { children: e.label })
|
|
158
|
+
]
|
|
159
|
+
},
|
|
160
|
+
e.id
|
|
161
|
+
);
|
|
162
|
+
}) })
|
|
163
|
+
] }),
|
|
164
|
+
p && /* @__PURE__ */ t.jsx(
|
|
165
|
+
M,
|
|
125
166
|
{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
n && /* @__PURE__ */ t.jsx(
|
|
135
|
-
"input",
|
|
136
|
-
{
|
|
137
|
-
type: "checkbox",
|
|
138
|
-
checked: r,
|
|
139
|
-
onChange: () => {
|
|
140
|
-
},
|
|
141
|
-
className: "mr-2 pointer-events-none"
|
|
142
|
-
}
|
|
143
|
-
),
|
|
144
|
-
/* @__PURE__ */ t.jsx("span", { children: e.label })
|
|
145
|
-
]
|
|
146
|
-
},
|
|
147
|
-
e.id
|
|
148
|
-
);
|
|
149
|
-
}) })
|
|
150
|
-
] }),
|
|
151
|
-
p && /* @__PURE__ */ t.jsx(
|
|
152
|
-
M,
|
|
153
|
-
{
|
|
154
|
-
name: a.name,
|
|
155
|
-
component: "span",
|
|
156
|
-
className: "block text-error-default-default text-xs mt-1"
|
|
157
|
-
}
|
|
158
|
-
)
|
|
159
|
-
] });
|
|
167
|
+
name: a.name,
|
|
168
|
+
component: "span",
|
|
169
|
+
className: "block text-error-default-default text-xs mt-1"
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
);
|
|
160
175
|
};
|
|
161
176
|
export {
|
|
162
177
|
T as default
|
|
@@ -9,7 +9,7 @@ export interface ISelectFormik {
|
|
|
9
9
|
disabled: boolean;
|
|
10
10
|
containerClassName: string;
|
|
11
11
|
className: string;
|
|
12
|
-
labelVariant?:
|
|
12
|
+
labelVariant?: "default" | "static";
|
|
13
13
|
options: ISelectFormikOption[];
|
|
14
14
|
multiple?: boolean;
|
|
15
15
|
emptyMessage?: string;
|