react-customizable-dropdown 1.0.0 → 1.0.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.
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import type { ReactNode, CSSProperties } from "react";
|
|
2
|
+
export interface DropdownOption {
|
|
3
|
+
value?: any;
|
|
4
|
+
label?: any;
|
|
5
|
+
sublabel?: any;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
group?: string;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
export interface DropdownTheme {
|
|
11
|
+
primaryColor?: string;
|
|
12
|
+
backgroundColor?: string;
|
|
13
|
+
hoverColor?: string;
|
|
14
|
+
textColor?: string;
|
|
15
|
+
padding?: string;
|
|
16
|
+
menuBackgroundColor?: string;
|
|
17
|
+
optionTextColor?: string;
|
|
18
|
+
selectedOptionTextColor?: string;
|
|
19
|
+
selectedOptionBackgroundColor?: string;
|
|
20
|
+
multiSelectSelectedOptionTextColor?: string;
|
|
21
|
+
multiSelectSelectedOptionBackgroundColor?: string;
|
|
22
|
+
focusBorderColor?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface DropdownProps {
|
|
25
|
+
/** Label for the dropdown */
|
|
26
|
+
label?: ReactNode;
|
|
27
|
+
/** Custom classes for the label */
|
|
28
|
+
labelClassName?: string;
|
|
29
|
+
/** Custom classes for dropdown option items */
|
|
30
|
+
optionClassName?: string;
|
|
31
|
+
/** Custom classes for selected options in the dropdown list (when dropdown is open) */
|
|
32
|
+
selectedOptionClassName?: string;
|
|
33
|
+
/** Custom classes for the dropdown menu wrapper/container */
|
|
34
|
+
menuClassName?: string;
|
|
35
|
+
/** Custom classes for the dropdown trigger/field area */
|
|
36
|
+
triggerClassName?: string;
|
|
37
|
+
/** Inline styles for the dropdown trigger/field area */
|
|
38
|
+
triggerStyle?: CSSProperties;
|
|
39
|
+
/** Custom arrow/chevron icon component to display instead of the default */
|
|
40
|
+
arrowIcon?: ReactNode;
|
|
41
|
+
/** Custom class name for the arrow icon wrapper */
|
|
42
|
+
arrowIconClassName?: string;
|
|
43
|
+
/** Field name for the label from the option object (defaults to 'label') */
|
|
44
|
+
labelField?: string;
|
|
45
|
+
/** Field name for the value from the option object (defaults to 'value') */
|
|
46
|
+
valueField?: string;
|
|
47
|
+
/** Field name for the sublabel from the option object (defaults to 'sublabel') */
|
|
48
|
+
sublabelField?: string;
|
|
49
|
+
/** Custom classes for the sublabel */
|
|
50
|
+
sublabelClassName?: string;
|
|
51
|
+
/** Array of options to display */
|
|
52
|
+
options: DropdownOption[];
|
|
53
|
+
/** Current selected value(s) */
|
|
54
|
+
value?: any;
|
|
55
|
+
/** Callback when selection changes */
|
|
56
|
+
onChange?: (value: any, option?: DropdownOption | DropdownOption[]) => void;
|
|
57
|
+
/** Placeholder text when nothing is selected */
|
|
58
|
+
placeholder?: string;
|
|
59
|
+
/** Whether to allow selecting multiple options */
|
|
60
|
+
multiSelect?: boolean;
|
|
61
|
+
/** Whether to show a search input */
|
|
62
|
+
searchable?: boolean;
|
|
63
|
+
/** Custom functionality to handle search externally */
|
|
64
|
+
onSearch?: (query: string) => void;
|
|
65
|
+
/** Debounce delay for search in ms */
|
|
66
|
+
searchDebounce?: number;
|
|
67
|
+
/** Disable the entire dropdown */
|
|
68
|
+
disabled?: boolean;
|
|
69
|
+
/** Custom theme overrides */
|
|
70
|
+
theme?: DropdownTheme;
|
|
71
|
+
/** Whether the options are currently loading */
|
|
72
|
+
loading?: boolean;
|
|
73
|
+
/** Custom render function for options */
|
|
74
|
+
renderOption?: (option: DropdownOption) => ReactNode;
|
|
75
|
+
/** Custom render function for selected value */
|
|
76
|
+
renderValue?: (value: DropdownOption | DropdownOption[]) => ReactNode;
|
|
77
|
+
/** Custom class names */
|
|
78
|
+
className?: string;
|
|
79
|
+
/** Inline styles */
|
|
80
|
+
style?: CSSProperties;
|
|
81
|
+
}
|
package/dist/dropdown.es.js
CHANGED
|
@@ -1,292 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return le || (le = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
-
function x(e) {
|
|
30
|
-
if (e == null) return null;
|
|
31
|
-
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof === D ? null : e.displayName || e.name || null;
|
|
33
|
-
if (typeof e == "string") return e;
|
|
34
|
-
switch (e) {
|
|
35
|
-
case O:
|
|
36
|
-
return "Fragment";
|
|
37
|
-
case z:
|
|
38
|
-
return "Profiler";
|
|
39
|
-
case K:
|
|
40
|
-
return "StrictMode";
|
|
41
|
-
case q:
|
|
42
|
-
return "Suspense";
|
|
43
|
-
case F:
|
|
44
|
-
return "SuspenseList";
|
|
45
|
-
case N:
|
|
46
|
-
return "Activity";
|
|
47
|
-
}
|
|
48
|
-
if (typeof e == "object")
|
|
49
|
-
switch (typeof e.tag == "number" && console.error(
|
|
50
|
-
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
51
|
-
), e.$$typeof) {
|
|
52
|
-
case Z:
|
|
53
|
-
return "Portal";
|
|
54
|
-
case A:
|
|
55
|
-
return e.displayName || "Context";
|
|
56
|
-
case Q:
|
|
57
|
-
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
|
-
case p:
|
|
59
|
-
var o = e.render;
|
|
60
|
-
return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
|
-
case u:
|
|
62
|
-
return o = e.displayName || null, o !== null ? o : x(e.type) || "Memo";
|
|
63
|
-
case g:
|
|
64
|
-
o = e._payload, e = e._init;
|
|
65
|
-
try {
|
|
66
|
-
return x(e(o));
|
|
67
|
-
} catch {
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
return null;
|
|
71
|
-
}
|
|
72
|
-
function a(e) {
|
|
73
|
-
return "" + e;
|
|
74
|
-
}
|
|
75
|
-
function h(e) {
|
|
76
|
-
try {
|
|
77
|
-
a(e);
|
|
78
|
-
var o = !1;
|
|
79
|
-
} catch {
|
|
80
|
-
o = !0;
|
|
81
|
-
}
|
|
82
|
-
if (o) {
|
|
83
|
-
o = console;
|
|
84
|
-
var s = o.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
85
|
-
return s.call(
|
|
86
|
-
o,
|
|
87
|
-
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
88
|
-
c
|
|
89
|
-
), a(e);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
function R(e) {
|
|
93
|
-
if (e === O) return "<>";
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof === g)
|
|
95
|
-
return "<...>";
|
|
96
|
-
try {
|
|
97
|
-
var o = x(e);
|
|
98
|
-
return o ? "<" + o + ">" : "<...>";
|
|
99
|
-
} catch {
|
|
100
|
-
return "<...>";
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
function f() {
|
|
104
|
-
var e = T.A;
|
|
105
|
-
return e === null ? null : e.getOwner();
|
|
106
|
-
}
|
|
107
|
-
function d() {
|
|
108
|
-
return Error("react-stack-top-frame");
|
|
109
|
-
}
|
|
110
|
-
function k(e) {
|
|
111
|
-
if (_.call(e, "key")) {
|
|
112
|
-
var o = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
113
|
-
if (o && o.isReactWarning) return !1;
|
|
114
|
-
}
|
|
115
|
-
return e.key !== void 0;
|
|
116
|
-
}
|
|
117
|
-
function E(e, o) {
|
|
118
|
-
function s() {
|
|
119
|
-
S || (S = !0, console.error(
|
|
120
|
-
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
121
|
-
o
|
|
122
|
-
));
|
|
123
|
-
}
|
|
124
|
-
s.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
125
|
-
get: s,
|
|
126
|
-
configurable: !0
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
function X() {
|
|
130
|
-
var e = x(this.type);
|
|
131
|
-
return H[e] || (H[e] = !0, console.error(
|
|
132
|
-
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
133
|
-
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
134
|
-
}
|
|
135
|
-
function V(e, o, s, c, y, $) {
|
|
136
|
-
var i = s.ref;
|
|
137
|
-
return e = {
|
|
138
|
-
$$typeof: B,
|
|
139
|
-
type: e,
|
|
140
|
-
key: o,
|
|
141
|
-
props: s,
|
|
142
|
-
_owner: c
|
|
143
|
-
}, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
|
|
144
|
-
enumerable: !1,
|
|
145
|
-
get: X
|
|
146
|
-
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
147
|
-
configurable: !1,
|
|
148
|
-
enumerable: !1,
|
|
149
|
-
writable: !0,
|
|
150
|
-
value: 0
|
|
151
|
-
}), Object.defineProperty(e, "_debugInfo", {
|
|
152
|
-
configurable: !1,
|
|
153
|
-
enumerable: !1,
|
|
154
|
-
writable: !0,
|
|
155
|
-
value: null
|
|
156
|
-
}), Object.defineProperty(e, "_debugStack", {
|
|
157
|
-
configurable: !1,
|
|
158
|
-
enumerable: !1,
|
|
159
|
-
writable: !0,
|
|
160
|
-
value: y
|
|
161
|
-
}), Object.defineProperty(e, "_debugTask", {
|
|
162
|
-
configurable: !1,
|
|
163
|
-
enumerable: !1,
|
|
164
|
-
writable: !0,
|
|
165
|
-
value: $
|
|
166
|
-
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
|
-
}
|
|
168
|
-
function j(e, o, s, c, y, $) {
|
|
169
|
-
var i = o.children;
|
|
170
|
-
if (i !== void 0)
|
|
171
|
-
if (c)
|
|
172
|
-
if (Y(i)) {
|
|
173
|
-
for (c = 0; c < i.length; c++)
|
|
174
|
-
L(i[c]);
|
|
175
|
-
Object.freeze && Object.freeze(i);
|
|
176
|
-
} else
|
|
177
|
-
console.error(
|
|
178
|
-
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
179
|
-
);
|
|
180
|
-
else L(i);
|
|
181
|
-
if (_.call(o, "key")) {
|
|
182
|
-
i = x(e);
|
|
183
|
-
var r = Object.keys(o).filter(function(l) {
|
|
184
|
-
return l !== "key";
|
|
185
|
-
});
|
|
186
|
-
c = 0 < r.length ? "{key: someKey, " + r.join(": ..., ") + ": ...}" : "{key: someKey}", ee[i + c] || (r = 0 < r.length ? "{" + r.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
|
-
`A props object containing a "key" prop is being spread into JSX:
|
|
188
|
-
let props = %s;
|
|
189
|
-
<%s {...props} />
|
|
190
|
-
React keys must be passed directly to JSX without using spread:
|
|
191
|
-
let props = %s;
|
|
192
|
-
<%s key={someKey} {...props} />`,
|
|
193
|
-
c,
|
|
194
|
-
i,
|
|
195
|
-
r,
|
|
196
|
-
i
|
|
197
|
-
), ee[i + c] = !0);
|
|
198
|
-
}
|
|
199
|
-
if (i = null, s !== void 0 && (h(s), i = "" + s), k(o) && (h(o.key), i = "" + o.key), "key" in o) {
|
|
200
|
-
s = {};
|
|
201
|
-
for (var t in o)
|
|
202
|
-
t !== "key" && (s[t] = o[t]);
|
|
203
|
-
} else s = o;
|
|
204
|
-
return i && E(
|
|
205
|
-
s,
|
|
206
|
-
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
207
|
-
), V(
|
|
208
|
-
e,
|
|
209
|
-
i,
|
|
210
|
-
s,
|
|
211
|
-
f(),
|
|
212
|
-
y,
|
|
213
|
-
$
|
|
214
|
-
);
|
|
215
|
-
}
|
|
216
|
-
function L(e) {
|
|
217
|
-
U(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? U(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
|
-
}
|
|
219
|
-
function U(e) {
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof === B;
|
|
221
|
-
}
|
|
222
|
-
var C = ce, B = /* @__PURE__ */ Symbol.for("react.transitional.element"), Z = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), K = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), Q = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), p = /* @__PURE__ */ Symbol.for("react.forward_ref"), q = /* @__PURE__ */ Symbol.for("react.suspense"), F = /* @__PURE__ */ Symbol.for("react.suspense_list"), u = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), N = /* @__PURE__ */ Symbol.for("react.activity"), D = /* @__PURE__ */ Symbol.for("react.client.reference"), T = C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _ = Object.prototype.hasOwnProperty, Y = Array.isArray, P = console.createTask ? console.createTask : function() {
|
|
223
|
-
return null;
|
|
224
|
-
};
|
|
225
|
-
C = {
|
|
226
|
-
react_stack_bottom_frame: function(e) {
|
|
227
|
-
return e();
|
|
228
|
-
}
|
|
229
|
-
};
|
|
230
|
-
var S, H = {}, I = C.react_stack_bottom_frame.bind(
|
|
231
|
-
C,
|
|
232
|
-
d
|
|
233
|
-
)(), J = P(R(d)), ee = {};
|
|
234
|
-
W.Fragment = O, W.jsx = function(e, o, s) {
|
|
235
|
-
var c = 1e4 > T.recentlyCreatedOwnerStacks++;
|
|
236
|
-
return j(
|
|
237
|
-
e,
|
|
238
|
-
o,
|
|
239
|
-
s,
|
|
240
|
-
!1,
|
|
241
|
-
c ? Error("react-stack-top-frame") : I,
|
|
242
|
-
c ? P(R(e)) : J
|
|
243
|
-
);
|
|
244
|
-
}, W.jsxs = function(e, o, s) {
|
|
245
|
-
var c = 1e4 > T.recentlyCreatedOwnerStacks++;
|
|
246
|
-
return j(
|
|
247
|
-
e,
|
|
248
|
-
o,
|
|
249
|
-
s,
|
|
250
|
-
!0,
|
|
251
|
-
c ? Error("react-stack-top-frame") : I,
|
|
252
|
-
c ? P(R(e)) : J
|
|
253
|
-
);
|
|
254
|
-
};
|
|
255
|
-
})()), W;
|
|
256
|
-
}
|
|
257
|
-
var ae;
|
|
258
|
-
function ue() {
|
|
259
|
-
return ae || (ae = 1, process.env.NODE_ENV === "production" ? G.exports = ie() : G.exports = de()), G.exports;
|
|
260
|
-
}
|
|
261
|
-
var n = ue();
|
|
262
|
-
const me = ({
|
|
263
|
-
options: x,
|
|
264
|
-
value: a,
|
|
265
|
-
onChange: h,
|
|
266
|
-
placeholder: R = "Select...",
|
|
267
|
-
multiSelect: f = !1,
|
|
268
|
-
searchable: d = !1,
|
|
269
|
-
disabled: k = !1,
|
|
270
|
-
loading: E = !1,
|
|
271
|
-
className: X = "",
|
|
272
|
-
style: V = {},
|
|
273
|
-
theme: j,
|
|
274
|
-
label: L,
|
|
275
|
-
labelClassName: U = "",
|
|
276
|
-
optionClassName: C = "",
|
|
277
|
-
selectedOptionClassName: B = "",
|
|
278
|
-
menuClassName: Z = "",
|
|
279
|
-
triggerClassName: O = "",
|
|
280
|
-
triggerStyle: K = {},
|
|
281
|
-
arrowIcon: z,
|
|
282
|
-
arrowIconClassName: Q = "",
|
|
283
|
-
labelField: A = "label",
|
|
284
|
-
valueField: p = "value",
|
|
285
|
-
sublabelField: q = "sublabel",
|
|
286
|
-
sublabelClassName: F = ""
|
|
1
|
+
import { jsxs as m, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as j, useRef as M, useMemo as z, useEffect as U } from "react";
|
|
3
|
+
const le = ({
|
|
4
|
+
options: g,
|
|
5
|
+
value: l,
|
|
6
|
+
onChange: x,
|
|
7
|
+
placeholder: E = "Select...",
|
|
8
|
+
multiSelect: S = !1,
|
|
9
|
+
searchable: a = !1,
|
|
10
|
+
disabled: y = !1,
|
|
11
|
+
loading: N = !1,
|
|
12
|
+
className: q = "",
|
|
13
|
+
style: H = {},
|
|
14
|
+
theme: T,
|
|
15
|
+
label: V,
|
|
16
|
+
labelClassName: G = "",
|
|
17
|
+
optionClassName: O = "",
|
|
18
|
+
selectedOptionClassName: L = "",
|
|
19
|
+
menuClassName: J = "",
|
|
20
|
+
triggerClassName: B = "",
|
|
21
|
+
triggerStyle: Q = {},
|
|
22
|
+
arrowIcon: P,
|
|
23
|
+
arrowIconClassName: X = "",
|
|
24
|
+
labelField: k = "label",
|
|
25
|
+
valueField: d = "value",
|
|
26
|
+
sublabelField: R = "sublabel",
|
|
27
|
+
sublabelClassName: Y = ""
|
|
287
28
|
}) => {
|
|
288
|
-
const [
|
|
289
|
-
const
|
|
29
|
+
const [n, f] = j(!1), [b, A] = j(""), [p, h] = j(-1), D = M(null), $ = M(null), w = M(null), Z = z(() => {
|
|
30
|
+
const e = {
|
|
290
31
|
primaryColor: "#3b82f6",
|
|
291
32
|
// blue-500
|
|
292
33
|
backgroundColor: "#ffffff",
|
|
@@ -305,131 +46,131 @@ const me = ({
|
|
|
305
46
|
// blue-100
|
|
306
47
|
focusBorderColor: "#3b82f6"
|
|
307
48
|
// blue-500 (defaults to primaryColor)
|
|
308
|
-
}, t =
|
|
309
|
-
...
|
|
49
|
+
}, t = T || {}, o = t.selectedOptionTextColor ?? t.primaryColor ?? e.selectedOptionTextColor, i = t.selectedOptionBackgroundColor ?? t.hoverColor ?? e.selectedOptionBackgroundColor, c = t.multiSelectSelectedOptionTextColor ?? "#1e40af", u = t.multiSelectSelectedOptionBackgroundColor ?? "#dbeafe", s = {
|
|
50
|
+
...e,
|
|
310
51
|
...t,
|
|
311
|
-
menuBackgroundColor: t.menuBackgroundColor ?? t.backgroundColor ??
|
|
312
|
-
optionTextColor: t.optionTextColor ?? t.textColor ??
|
|
313
|
-
selectedOptionTextColor:
|
|
314
|
-
selectedOptionBackgroundColor:
|
|
315
|
-
multiSelectSelectedOptionTextColor:
|
|
316
|
-
multiSelectSelectedOptionBackgroundColor:
|
|
317
|
-
focusBorderColor: t.focusBorderColor ?? t.primaryColor ??
|
|
52
|
+
menuBackgroundColor: t.menuBackgroundColor ?? t.backgroundColor ?? e.menuBackgroundColor,
|
|
53
|
+
optionTextColor: t.optionTextColor ?? t.textColor ?? e.optionTextColor,
|
|
54
|
+
selectedOptionTextColor: o,
|
|
55
|
+
selectedOptionBackgroundColor: i,
|
|
56
|
+
multiSelectSelectedOptionTextColor: c,
|
|
57
|
+
multiSelectSelectedOptionBackgroundColor: u,
|
|
58
|
+
focusBorderColor: t.focusBorderColor ?? t.primaryColor ?? e.focusBorderColor
|
|
318
59
|
};
|
|
319
60
|
return {
|
|
320
|
-
"--dd-primary":
|
|
321
|
-
"--dd-bg":
|
|
322
|
-
"--dd-hover":
|
|
323
|
-
"--dd-text":
|
|
324
|
-
"--dd-padding":
|
|
325
|
-
"--dd-menu-bg":
|
|
326
|
-
"--dd-option-text":
|
|
327
|
-
"--dd-selected-text":
|
|
328
|
-
"--dd-selected-bg":
|
|
329
|
-
"--dd-multi-selected-text":
|
|
330
|
-
"--dd-multi-selected-bg":
|
|
331
|
-
"--dd-focus-border":
|
|
332
|
-
...
|
|
61
|
+
"--dd-primary": s.primaryColor,
|
|
62
|
+
"--dd-bg": s.backgroundColor,
|
|
63
|
+
"--dd-hover": s.hoverColor,
|
|
64
|
+
"--dd-text": s.textColor,
|
|
65
|
+
"--dd-padding": s.padding,
|
|
66
|
+
"--dd-menu-bg": s.menuBackgroundColor,
|
|
67
|
+
"--dd-option-text": s.optionTextColor,
|
|
68
|
+
"--dd-selected-text": s.selectedOptionTextColor,
|
|
69
|
+
"--dd-selected-bg": s.selectedOptionBackgroundColor,
|
|
70
|
+
"--dd-multi-selected-text": s.multiSelectSelectedOptionTextColor,
|
|
71
|
+
"--dd-multi-selected-bg": s.multiSelectSelectedOptionBackgroundColor,
|
|
72
|
+
"--dd-focus-border": s.focusBorderColor,
|
|
73
|
+
...H
|
|
333
74
|
};
|
|
334
|
-
}, [
|
|
335
|
-
|
|
336
|
-
const
|
|
337
|
-
|
|
75
|
+
}, [T, H]);
|
|
76
|
+
U(() => {
|
|
77
|
+
const e = (t) => {
|
|
78
|
+
D.current && !D.current.contains(t.target) && f(!1);
|
|
338
79
|
};
|
|
339
|
-
return document.addEventListener("mousedown",
|
|
340
|
-
document.removeEventListener("mousedown",
|
|
80
|
+
return document.addEventListener("mousedown", e), () => {
|
|
81
|
+
document.removeEventListener("mousedown", e);
|
|
341
82
|
};
|
|
342
83
|
}, []);
|
|
343
84
|
const I = () => {
|
|
344
|
-
|
|
345
|
-
|
|
85
|
+
y || (f(!n), n || (h(-1), setTimeout(() => {
|
|
86
|
+
a && w.current && w.current.focus();
|
|
346
87
|
}, 0)));
|
|
347
|
-
},
|
|
348
|
-
|
|
349
|
-
|
|
88
|
+
}, _ = () => {
|
|
89
|
+
a ? n || (f(!0), h(-1), setTimeout(() => {
|
|
90
|
+
w.current && w.current.focus();
|
|
350
91
|
}, 0)) : I();
|
|
351
|
-
},
|
|
352
|
-
if (
|
|
353
|
-
if (Array.isArray(
|
|
354
|
-
return
|
|
355
|
-
const
|
|
356
|
-
return
|
|
357
|
-
})(),
|
|
358
|
-
if (t?.stopPropagation(),
|
|
359
|
-
let
|
|
360
|
-
if (
|
|
361
|
-
const
|
|
362
|
-
|
|
363
|
-
(
|
|
92
|
+
}, C = (() => {
|
|
93
|
+
if (l == null) return [];
|
|
94
|
+
if (Array.isArray(l))
|
|
95
|
+
return g.filter((t) => l.includes(t[d]));
|
|
96
|
+
const e = g.find((t) => t[d] === l);
|
|
97
|
+
return e ? [e] : [];
|
|
98
|
+
})(), W = (e, t) => {
|
|
99
|
+
if (t?.stopPropagation(), e.disabled) return;
|
|
100
|
+
let o, i;
|
|
101
|
+
if (S) {
|
|
102
|
+
const c = Array.isArray(l) ? l : l ? [l] : [];
|
|
103
|
+
c.includes(e[d]) ? o = c.filter((s) => s !== e[d]) : o = [...c, e[d]], i = g.filter(
|
|
104
|
+
(s) => o.includes(s[d])
|
|
364
105
|
);
|
|
365
106
|
} else
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
},
|
|
369
|
-
if (t.stopPropagation(), !
|
|
370
|
-
const
|
|
371
|
-
(
|
|
107
|
+
o = e[d], i = e, f(!1), A("");
|
|
108
|
+
x && x(o, i);
|
|
109
|
+
}, F = (e, t) => {
|
|
110
|
+
if (t.stopPropagation(), !x) return;
|
|
111
|
+
const i = (Array.isArray(l) ? l : l ? [l] : []).filter((u) => u !== e), c = g.filter(
|
|
112
|
+
(u) => i.includes(u[d])
|
|
372
113
|
);
|
|
373
|
-
|
|
374
|
-
},
|
|
375
|
-
if (
|
|
376
|
-
|
|
114
|
+
x(i, c);
|
|
115
|
+
}, ee = (e) => {
|
|
116
|
+
if (e.stopPropagation(), n && a) {
|
|
117
|
+
A(""), f(!1);
|
|
377
118
|
return;
|
|
378
119
|
}
|
|
379
|
-
|
|
380
|
-
},
|
|
381
|
-
() =>
|
|
382
|
-
[
|
|
383
|
-
),
|
|
384
|
-
if (!
|
|
385
|
-
switch (
|
|
120
|
+
x && x(S ? [] : "", S ? [] : []);
|
|
121
|
+
}, v = z(
|
|
122
|
+
() => g.filter((e) => !a || !b ? !0 : (typeof e[k] == "string" ? e[k] : String(e[d])).toLowerCase().includes(b.toLowerCase())),
|
|
123
|
+
[g, a, b]
|
|
124
|
+
), K = (e) => {
|
|
125
|
+
if (!y)
|
|
126
|
+
switch (e.key) {
|
|
386
127
|
case "Enter":
|
|
387
|
-
|
|
128
|
+
e.preventDefault(), n ? p >= 0 && p < v.length && W(v[p]) : f(!0);
|
|
388
129
|
break;
|
|
389
130
|
case "Escape":
|
|
390
|
-
|
|
131
|
+
n && (e.preventDefault(), f(!1));
|
|
391
132
|
break;
|
|
392
133
|
case "ArrowDown":
|
|
393
|
-
|
|
394
|
-
(t) => t <
|
|
395
|
-
) : (
|
|
134
|
+
e.preventDefault(), n ? h(
|
|
135
|
+
(t) => t < v.length - 1 ? t + 1 : t
|
|
136
|
+
) : (f(!0), h(0));
|
|
396
137
|
break;
|
|
397
138
|
case "ArrowUp":
|
|
398
|
-
|
|
139
|
+
e.preventDefault(), n && h((t) => t > 0 ? t - 1 : t);
|
|
399
140
|
break;
|
|
400
141
|
}
|
|
401
142
|
};
|
|
402
|
-
|
|
403
|
-
if (
|
|
404
|
-
const
|
|
143
|
+
U(() => {
|
|
144
|
+
if (n && $.current && p >= 0) {
|
|
145
|
+
const e = $.current, t = e.children[p];
|
|
405
146
|
if (t) {
|
|
406
|
-
const
|
|
407
|
-
|
|
147
|
+
const o = e.scrollTop, i = o + e.clientHeight, c = t.offsetTop, u = c + t.clientHeight;
|
|
148
|
+
c < o ? e.scrollTop = c : u > i && (e.scrollTop = u - e.clientHeight);
|
|
408
149
|
}
|
|
409
150
|
}
|
|
410
|
-
}, [
|
|
411
|
-
const
|
|
412
|
-
return /* @__PURE__ */
|
|
151
|
+
}, [p, n]);
|
|
152
|
+
const te = (e) => Array.isArray(l) ? l.includes(e) : l === e;
|
|
153
|
+
return /* @__PURE__ */ m(
|
|
413
154
|
"div",
|
|
414
155
|
{
|
|
415
|
-
ref:
|
|
416
|
-
className: `relative w-full ${
|
|
417
|
-
style:
|
|
418
|
-
onKeyDown:
|
|
156
|
+
ref: D,
|
|
157
|
+
className: `relative w-full ${q} ${y ? "opacity-60 cursor-not-allowed" : ""}`,
|
|
158
|
+
style: Z,
|
|
159
|
+
onKeyDown: K,
|
|
419
160
|
children: [
|
|
420
|
-
|
|
161
|
+
V && /* @__PURE__ */ r(
|
|
421
162
|
"label",
|
|
422
163
|
{
|
|
423
|
-
className: `block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${
|
|
164
|
+
className: `block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${G}`,
|
|
424
165
|
onClick: I,
|
|
425
|
-
style:
|
|
426
|
-
children:
|
|
166
|
+
style: T ? { color: T.textColor } : void 0,
|
|
167
|
+
children: V
|
|
427
168
|
}
|
|
428
169
|
),
|
|
429
|
-
/* @__PURE__ */
|
|
170
|
+
/* @__PURE__ */ m(
|
|
430
171
|
"div",
|
|
431
172
|
{
|
|
432
|
-
onClick:
|
|
173
|
+
onClick: _,
|
|
433
174
|
className: `
|
|
434
175
|
flex items-center justify-between
|
|
435
176
|
w-full
|
|
@@ -437,36 +178,36 @@ const me = ({
|
|
|
437
178
|
cursor-pointer
|
|
438
179
|
transition-all duration-200
|
|
439
180
|
text-[var(--dd-text)]
|
|
440
|
-
${
|
|
181
|
+
${B || "border rounded-lg"}
|
|
441
182
|
`,
|
|
442
183
|
style: {
|
|
443
|
-
padding:
|
|
444
|
-
minHeight:
|
|
445
|
-
borderColor:
|
|
184
|
+
padding: B ? void 0 : "var(--dd-padding)",
|
|
185
|
+
minHeight: B ? void 0 : "42px",
|
|
186
|
+
borderColor: B ? void 0 : n ? "var(--dd-focus-border)" : "#d1d5db",
|
|
446
187
|
outline: "none",
|
|
447
|
-
...
|
|
188
|
+
...Q
|
|
448
189
|
},
|
|
449
190
|
role: "button",
|
|
450
|
-
tabIndex:
|
|
191
|
+
tabIndex: a ? -1 : 0,
|
|
451
192
|
"aria-haspopup": "listbox",
|
|
452
|
-
"aria-expanded":
|
|
193
|
+
"aria-expanded": n,
|
|
453
194
|
children: [
|
|
454
|
-
/* @__PURE__ */
|
|
195
|
+
/* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1 flex-1 overflow-hidden", children: a && (n || C.length === 0) ? /* @__PURE__ */ r(
|
|
455
196
|
"input",
|
|
456
197
|
{
|
|
457
|
-
ref:
|
|
198
|
+
ref: w,
|
|
458
199
|
type: "text",
|
|
459
|
-
value:
|
|
460
|
-
onChange: (
|
|
461
|
-
onKeyDown:
|
|
462
|
-
placeholder:
|
|
200
|
+
value: b,
|
|
201
|
+
onChange: (e) => A(e.target.value),
|
|
202
|
+
onKeyDown: K,
|
|
203
|
+
placeholder: C.length === 0 ? E : "Search...",
|
|
463
204
|
className: "flex-1 outline-none bg-transparent min-w-[60px]",
|
|
464
|
-
onClick: (
|
|
465
|
-
|
|
205
|
+
onClick: (e) => {
|
|
206
|
+
e.stopPropagation(), n || f(!0);
|
|
466
207
|
},
|
|
467
|
-
disabled:
|
|
208
|
+
disabled: y
|
|
468
209
|
}
|
|
469
|
-
) :
|
|
210
|
+
) : C.length === 0 ? /* @__PURE__ */ r("span", { className: "text-gray-400", children: E }) : S ? C.map((e) => /* @__PURE__ */ m(
|
|
470
211
|
"span",
|
|
471
212
|
{
|
|
472
213
|
className: "inline-flex items-center px-2 py-0.5 rounded text-sm animate-fadeIn",
|
|
@@ -476,36 +217,36 @@ const me = ({
|
|
|
476
217
|
},
|
|
477
218
|
onClick: (t) => t.stopPropagation(),
|
|
478
219
|
children: [
|
|
479
|
-
|
|
480
|
-
/* @__PURE__ */
|
|
220
|
+
e[k],
|
|
221
|
+
/* @__PURE__ */ r(
|
|
481
222
|
"span",
|
|
482
223
|
{
|
|
483
224
|
className: "ml-1 cursor-pointer font-bold",
|
|
484
225
|
style: { color: "currentColor", opacity: 0.8 },
|
|
485
|
-
onClick: (t) =>
|
|
226
|
+
onClick: (t) => F(e[d], t),
|
|
486
227
|
children: "×"
|
|
487
228
|
}
|
|
488
229
|
)
|
|
489
230
|
]
|
|
490
231
|
},
|
|
491
|
-
|
|
492
|
-
)) : /* @__PURE__ */
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
|
|
495
|
-
!
|
|
232
|
+
e[d]
|
|
233
|
+
)) : /* @__PURE__ */ r("span", { className: "truncate", children: C[0][k] }) }),
|
|
234
|
+
/* @__PURE__ */ m("div", { className: "flex items-center gap-2 ml-2", children: [
|
|
235
|
+
N && /* @__PURE__ */ r("div", { className: "animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full" }),
|
|
236
|
+
!N && !y && (C.length > 0 || n && a && b) && /* @__PURE__ */ r(
|
|
496
237
|
"div",
|
|
497
238
|
{
|
|
498
|
-
onClick:
|
|
239
|
+
onClick: ee,
|
|
499
240
|
className: "p-1 hover:bg-gray-100 rounded-full transition-colors z-10",
|
|
500
|
-
title:
|
|
501
|
-
children: /* @__PURE__ */
|
|
241
|
+
title: n && a ? "Clear search" : "Clear selection",
|
|
242
|
+
children: /* @__PURE__ */ r(
|
|
502
243
|
"svg",
|
|
503
244
|
{
|
|
504
245
|
className: "w-3 h-3 text-gray-400 hover:text-gray-600",
|
|
505
246
|
fill: "none",
|
|
506
247
|
stroke: "currentColor",
|
|
507
248
|
viewBox: "0 0 24 24",
|
|
508
|
-
children: /* @__PURE__ */
|
|
249
|
+
children: /* @__PURE__ */ r(
|
|
509
250
|
"path",
|
|
510
251
|
{
|
|
511
252
|
strokeLinecap: "round",
|
|
@@ -518,18 +259,18 @@ const me = ({
|
|
|
518
259
|
)
|
|
519
260
|
}
|
|
520
261
|
),
|
|
521
|
-
/* @__PURE__ */
|
|
262
|
+
/* @__PURE__ */ r(
|
|
522
263
|
"div",
|
|
523
264
|
{
|
|
524
|
-
className: `transform transition-transform duration-200 ${
|
|
525
|
-
children:
|
|
265
|
+
className: `transform transition-transform duration-200 ${n ? "rotate-180" : ""} ${X}`,
|
|
266
|
+
children: P || /* @__PURE__ */ r(
|
|
526
267
|
"svg",
|
|
527
268
|
{
|
|
528
269
|
className: "w-4 h-4 text-gray-500",
|
|
529
270
|
fill: "none",
|
|
530
271
|
stroke: "currentColor",
|
|
531
272
|
viewBox: "0 0 24 24",
|
|
532
|
-
children: /* @__PURE__ */
|
|
273
|
+
children: /* @__PURE__ */ r(
|
|
533
274
|
"path",
|
|
534
275
|
{
|
|
535
276
|
strokeLinecap: "round",
|
|
@@ -546,45 +287,45 @@ const me = ({
|
|
|
546
287
|
]
|
|
547
288
|
}
|
|
548
289
|
),
|
|
549
|
-
|
|
290
|
+
n && /* @__PURE__ */ r(
|
|
550
291
|
"div",
|
|
551
292
|
{
|
|
552
|
-
className: `absolute z-50 w-full mt-1 bg-[var(--dd-menu-bg)] border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col animate-enter ${
|
|
553
|
-
children:
|
|
554
|
-
/* @__PURE__ */
|
|
293
|
+
className: `absolute z-50 w-full mt-1 bg-[var(--dd-menu-bg)] border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col animate-enter ${J}`,
|
|
294
|
+
children: N ? /* @__PURE__ */ m("div", { className: "px-4 py-8 flex justify-center items-center text-gray-400", children: [
|
|
295
|
+
/* @__PURE__ */ r("div", { className: "animate-spin h-6 w-6 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full mr-2" }),
|
|
555
296
|
"Loading options..."
|
|
556
|
-
] }) : /* @__PURE__ */
|
|
557
|
-
const
|
|
558
|
-
return /* @__PURE__ */
|
|
297
|
+
] }) : /* @__PURE__ */ r("ul", { ref: $, className: "py-1 overflow-y-auto", role: "listbox", children: v.length === 0 ? /* @__PURE__ */ r("li", { className: "px-4 py-2 text-gray-500 text-center text-sm", children: "No options found" }) : v.map((e, t) => {
|
|
298
|
+
const o = te(e[d]), i = t === p;
|
|
299
|
+
return /* @__PURE__ */ m(
|
|
559
300
|
"li",
|
|
560
301
|
{
|
|
561
302
|
className: `
|
|
562
303
|
px-4 py-2 cursor-pointer transition-colors duration-150 flex items-center justify-between
|
|
563
304
|
text-[var(--dd-option-text)]
|
|
564
|
-
${
|
|
565
|
-
${
|
|
305
|
+
${O}
|
|
306
|
+
${o ? L : ""}
|
|
566
307
|
`,
|
|
567
308
|
style: {
|
|
568
|
-
backgroundColor:
|
|
569
|
-
color:
|
|
570
|
-
fontWeight:
|
|
309
|
+
backgroundColor: o && L ? void 0 : i && !O ? "var(--dd-hover)" : o ? "var(--dd-selected-bg)" : O ? void 0 : "transparent",
|
|
310
|
+
color: o && L || O ? void 0 : o ? "var(--dd-selected-text)" : "var(--dd-option-text)",
|
|
311
|
+
fontWeight: o ? 500 : 400
|
|
571
312
|
},
|
|
572
|
-
onMouseEnter: () =>
|
|
313
|
+
onMouseEnter: () => h(t),
|
|
573
314
|
role: "option",
|
|
574
|
-
"aria-selected":
|
|
575
|
-
onClick: (
|
|
315
|
+
"aria-selected": o,
|
|
316
|
+
onClick: (c) => W(e, c),
|
|
576
317
|
children: [
|
|
577
|
-
/* @__PURE__ */
|
|
578
|
-
/* @__PURE__ */
|
|
579
|
-
|
|
318
|
+
/* @__PURE__ */ m("div", { className: "flex flex-col", children: [
|
|
319
|
+
/* @__PURE__ */ r("span", { children: e[k] }),
|
|
320
|
+
e[R] && /* @__PURE__ */ r(
|
|
580
321
|
"span",
|
|
581
322
|
{
|
|
582
|
-
className: `text-xs text-gray-500 mt-0.5 ${
|
|
583
|
-
children:
|
|
323
|
+
className: `text-xs text-gray-500 mt-0.5 ${Y}`,
|
|
324
|
+
children: e[R]
|
|
584
325
|
}
|
|
585
326
|
)
|
|
586
327
|
] }),
|
|
587
|
-
|
|
328
|
+
o && /* @__PURE__ */ r(
|
|
588
329
|
"svg",
|
|
589
330
|
{
|
|
590
331
|
className: "w-4 h-4",
|
|
@@ -592,7 +333,7 @@ const me = ({
|
|
|
592
333
|
fill: "none",
|
|
593
334
|
stroke: "currentColor",
|
|
594
335
|
viewBox: "0 0 24 24",
|
|
595
|
-
children: /* @__PURE__ */
|
|
336
|
+
children: /* @__PURE__ */ r(
|
|
596
337
|
"path",
|
|
597
338
|
{
|
|
598
339
|
strokeLinecap: "round",
|
|
@@ -605,7 +346,7 @@ const me = ({
|
|
|
605
346
|
)
|
|
606
347
|
]
|
|
607
348
|
},
|
|
608
|
-
|
|
349
|
+
e[d]
|
|
609
350
|
);
|
|
610
351
|
}) })
|
|
611
352
|
}
|
|
@@ -615,5 +356,5 @@ const me = ({
|
|
|
615
356
|
);
|
|
616
357
|
};
|
|
617
358
|
export {
|
|
618
|
-
|
|
359
|
+
le as Dropdown
|
|
619
360
|
};
|
package/dist/dropdown.umd.js
CHANGED
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
let props = %s;
|
|
3
|
-
<%s {...props} />
|
|
4
|
-
React keys must be passed directly to JSX without using spread:
|
|
5
|
-
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,c,i,r,i),te[i+c]=!0)}if(i=null,s!==void 0&&(v(s),i=""+s),y(o)&&(v(o.key),i=""+o.key),"key"in o){s={};for(var t in o)t!=="key"&&(s[t]=o[t])}else s=o;return i&&C(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),J(e,i,s,f(),E,M)}function W(e){G(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===b&&(e._payload.status==="fulfilled"?G(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function G(e){return typeof e=="object"&&e!==null&&e.$$typeof===L}var _=m,L=Symbol.for("react.transitional.element"),q=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),P=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),$=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),u=Symbol.for("react.memo"),b=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),T=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,w=Object.prototype.hasOwnProperty,U=Array.isArray,D=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var O,Z={},z=_.react_stack_bottom_frame.bind(_,d)(),K=D(S(d)),te={};I.Fragment=j,I.jsx=function(e,o,s){var c=1e4>T.recentlyCreatedOwnerStacks++;return N(e,o,s,!1,c?Error("react-stack-top-frame"):z,c?D(S(e)):K)},I.jsxs=function(e,o,s){var c=1e4>T.recentlyCreatedOwnerStacks++;return N(e,o,s,!0,c?Error("react-stack-top-frame"):z,c?D(S(e)):K)}})()),I}var se;function ce(){return se||(se=1,process.env.NODE_ENV==="production"?H.exports=le():H.exports=ae()),H.exports}var n=ce();const ie=({options:g,value:a,onChange:v,placeholder:S="Select...",multiSelect:f=!1,searchable:d=!1,disabled:y=!1,loading:C=!1,className:Q="",style:J={},theme:N,label:W,labelClassName:G="",optionClassName:_="",selectedOptionClassName:L="",menuClassName:q="",triggerClassName:j="",triggerStyle:F={},arrowIcon:X,arrowIconClassName:ee="",labelField:P="label",valueField:x="value",sublabelField:$="sublabel",sublabelClassName:re=""})=>{const[u,b]=m.useState(!1),[B,V]=m.useState(""),[T,w]=m.useState(-1),U=m.useRef(null),D=m.useRef(null),O=m.useRef(null),Z=m.useMemo(()=>{const r={primaryColor:"#3b82f6",backgroundColor:"#ffffff",hoverColor:"#eff6ff",textColor:"#1f2937",padding:"0.5rem 1rem",menuBackgroundColor:"#ffffff",optionTextColor:"#1f2937",selectedOptionTextColor:"#3b82f6",selectedOptionBackgroundColor:"#eff6ff",multiSelectSelectedOptionTextColor:"#1e40af",multiSelectSelectedOptionBackgroundColor:"#dbeafe",focusBorderColor:"#3b82f6"},t=N||{},l=t.selectedOptionTextColor??t.primaryColor??r.selectedOptionTextColor,k=t.selectedOptionBackgroundColor??t.hoverColor??r.selectedOptionBackgroundColor,h=t.multiSelectSelectedOptionTextColor??"#1e40af",R=t.multiSelectSelectedOptionBackgroundColor??"#dbeafe",p={...r,...t,menuBackgroundColor:t.menuBackgroundColor??t.backgroundColor??r.menuBackgroundColor,optionTextColor:t.optionTextColor??t.textColor??r.optionTextColor,selectedOptionTextColor:l,selectedOptionBackgroundColor:k,multiSelectSelectedOptionTextColor:h,multiSelectSelectedOptionBackgroundColor:R,focusBorderColor:t.focusBorderColor??t.primaryColor??r.focusBorderColor};return{"--dd-primary":p.primaryColor,"--dd-bg":p.backgroundColor,"--dd-hover":p.hoverColor,"--dd-text":p.textColor,"--dd-padding":p.padding,"--dd-menu-bg":p.menuBackgroundColor,"--dd-option-text":p.optionTextColor,"--dd-selected-text":p.selectedOptionTextColor,"--dd-selected-bg":p.selectedOptionBackgroundColor,"--dd-multi-selected-text":p.multiSelectSelectedOptionTextColor,"--dd-multi-selected-bg":p.multiSelectSelectedOptionBackgroundColor,"--dd-focus-border":p.focusBorderColor,...J}},[N,J]);m.useEffect(()=>{const r=t=>{U.current&&!U.current.contains(t.target)&&b(!1)};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]);const z=()=>{y||(b(!u),u||(w(-1),setTimeout(()=>{d&&O.current&&O.current.focus()},0)))},K=()=>{d?u||(b(!0),w(-1),setTimeout(()=>{O.current&&O.current.focus()},0)):z()},e=(()=>{if(a==null)return[];if(Array.isArray(a))return g.filter(t=>a.includes(t[x]));const r=g.find(t=>t[x]===a);return r?[r]:[]})(),o=(r,t)=>{if(t?.stopPropagation(),r.disabled)return;let l,k;if(f){const h=Array.isArray(a)?a:a?[a]:[];h.includes(r[x])?l=h.filter(p=>p!==r[x]):l=[...h,r[x]],k=g.filter(p=>l.includes(p[x]))}else l=r[x],k=r,b(!1),V("");v&&v(l,k)},s=(r,t)=>{if(t.stopPropagation(),!v)return;const k=(Array.isArray(a)?a:a?[a]:[]).filter(R=>R!==r),h=g.filter(R=>k.includes(R[x]));v(k,h)},c=r=>{if(r.stopPropagation(),u&&d){V(""),b(!1);return}v&&v(f?[]:"",f?[]:[])},E=m.useMemo(()=>g.filter(r=>!d||!B?!0:(typeof r[P]=="string"?r[P]:String(r[x])).toLowerCase().includes(B.toLowerCase())),[g,d,B]),M=r=>{if(!y)switch(r.key){case"Enter":r.preventDefault(),u?T>=0&&T<E.length&&o(E[T]):b(!0);break;case"Escape":u&&(r.preventDefault(),b(!1));break;case"ArrowDown":r.preventDefault(),u?w(t=>t<E.length-1?t+1:t):(b(!0),w(0));break;case"ArrowUp":r.preventDefault(),u&&w(t=>t>0?t-1:t);break}};m.useEffect(()=>{if(u&&D.current&&T>=0){const r=D.current,t=r.children[T];if(t){const l=r.scrollTop,k=l+r.clientHeight,h=t.offsetTop,R=h+t.clientHeight;h<l?r.scrollTop=h:R>k&&(r.scrollTop=R-r.clientHeight)}}},[T,u]);const i=r=>Array.isArray(a)?a.includes(r):a===r;return n.jsxs("div",{ref:U,className:`relative w-full ${Q} ${y?"opacity-60 cursor-not-allowed":""}`,style:Z,onKeyDown:M,children:[W&&n.jsx("label",{className:`block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${G}`,onClick:z,style:N?{color:N.textColor}:void 0,children:W}),n.jsxs("div",{onClick:K,className:`
|
|
1
|
+
(function(x,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(x=typeof globalThis<"u"?globalThis:x||self,o(x.Dropdown={},x.jsxRuntime,x.React))})(this,(function(x,o,a){"use strict";const q=({options:h,value:l,onChange:m,placeholder:$="Select...",multiSelect:T=!1,searchable:f=!1,disabled:k=!1,loading:L=!1,className:z="",style:E={},theme:O,label:H,labelClassName:U="",optionClassName:B="",selectedOptionClassName:j="",menuClassName:G="",triggerClassName:N="",triggerStyle:J={},arrowIcon:P,arrowIconClassName:Q="",labelField:w="label",valueField:d="value",sublabelField:V="sublabel",sublabelClassName:X=""})=>{const[n,u]=a.useState(!1),[b,D]=a.useState(""),[g,C]=a.useState(-1),A=a.useRef(null),M=a.useRef(null),S=a.useRef(null),Y=a.useMemo(()=>{const e={primaryColor:"#3b82f6",backgroundColor:"#ffffff",hoverColor:"#eff6ff",textColor:"#1f2937",padding:"0.5rem 1rem",menuBackgroundColor:"#ffffff",optionTextColor:"#1f2937",selectedOptionTextColor:"#3b82f6",selectedOptionBackgroundColor:"#eff6ff",multiSelectSelectedOptionTextColor:"#1e40af",multiSelectSelectedOptionBackgroundColor:"#dbeafe",focusBorderColor:"#3b82f6"},t=O||{},r=t.selectedOptionTextColor??t.primaryColor??e.selectedOptionTextColor,i=t.selectedOptionBackgroundColor??t.hoverColor??e.selectedOptionBackgroundColor,c=t.multiSelectSelectedOptionTextColor??"#1e40af",p=t.multiSelectSelectedOptionBackgroundColor??"#dbeafe",s={...e,...t,menuBackgroundColor:t.menuBackgroundColor??t.backgroundColor??e.menuBackgroundColor,optionTextColor:t.optionTextColor??t.textColor??e.optionTextColor,selectedOptionTextColor:r,selectedOptionBackgroundColor:i,multiSelectSelectedOptionTextColor:c,multiSelectSelectedOptionBackgroundColor:p,focusBorderColor:t.focusBorderColor??t.primaryColor??e.focusBorderColor};return{"--dd-primary":s.primaryColor,"--dd-bg":s.backgroundColor,"--dd-hover":s.hoverColor,"--dd-text":s.textColor,"--dd-padding":s.padding,"--dd-menu-bg":s.menuBackgroundColor,"--dd-option-text":s.optionTextColor,"--dd-selected-text":s.selectedOptionTextColor,"--dd-selected-bg":s.selectedOptionBackgroundColor,"--dd-multi-selected-text":s.multiSelectSelectedOptionTextColor,"--dd-multi-selected-bg":s.multiSelectSelectedOptionBackgroundColor,"--dd-focus-border":s.focusBorderColor,...E}},[O,E]);a.useEffect(()=>{const e=t=>{A.current&&!A.current.contains(t.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const I=()=>{k||(u(!n),n||(C(-1),setTimeout(()=>{f&&S.current&&S.current.focus()},0)))},Z=()=>{f?n||(u(!0),C(-1),setTimeout(()=>{S.current&&S.current.focus()},0)):I()},y=(()=>{if(l==null)return[];if(Array.isArray(l))return h.filter(t=>l.includes(t[d]));const e=h.find(t=>t[d]===l);return e?[e]:[]})(),W=(e,t)=>{if(t?.stopPropagation(),e.disabled)return;let r,i;if(T){const c=Array.isArray(l)?l:l?[l]:[];c.includes(e[d])?r=c.filter(s=>s!==e[d]):r=[...c,e[d]],i=h.filter(s=>r.includes(s[d]))}else r=e[d],i=e,u(!1),D("");m&&m(r,i)},_=(e,t)=>{if(t.stopPropagation(),!m)return;const i=(Array.isArray(l)?l:l?[l]:[]).filter(p=>p!==e),c=h.filter(p=>i.includes(p[d]));m(i,c)},F=e=>{if(e.stopPropagation(),n&&f){D(""),u(!1);return}m&&m(T?[]:"",T?[]:[])},v=a.useMemo(()=>h.filter(e=>!f||!b?!0:(typeof e[w]=="string"?e[w]:String(e[d])).toLowerCase().includes(b.toLowerCase())),[h,f,b]),K=e=>{if(!k)switch(e.key){case"Enter":e.preventDefault(),n?g>=0&&g<v.length&&W(v[g]):u(!0);break;case"Escape":n&&(e.preventDefault(),u(!1));break;case"ArrowDown":e.preventDefault(),n?C(t=>t<v.length-1?t+1:t):(u(!0),C(0));break;case"ArrowUp":e.preventDefault(),n&&C(t=>t>0?t-1:t);break}};a.useEffect(()=>{if(n&&M.current&&g>=0){const e=M.current,t=e.children[g];if(t){const r=e.scrollTop,i=r+e.clientHeight,c=t.offsetTop,p=c+t.clientHeight;c<r?e.scrollTop=c:p>i&&(e.scrollTop=p-e.clientHeight)}}},[g,n]);const R=e=>Array.isArray(l)?l.includes(e):l===e;return o.jsxs("div",{ref:A,className:`relative w-full ${z} ${k?"opacity-60 cursor-not-allowed":""}`,style:Y,onKeyDown:K,children:[H&&o.jsx("label",{className:`block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${U}`,onClick:I,style:O?{color:O.textColor}:void 0,children:H}),o.jsxs("div",{onClick:Z,className:`
|
|
7
2
|
flex items-center justify-between
|
|
8
3
|
w-full
|
|
9
4
|
bg-[var(--dd-bg)]
|
|
10
5
|
cursor-pointer
|
|
11
6
|
transition-all duration-200
|
|
12
7
|
text-[var(--dd-text)]
|
|
13
|
-
${
|
|
14
|
-
`,style:{padding:
|
|
8
|
+
${N||"border rounded-lg"}
|
|
9
|
+
`,style:{padding:N?void 0:"var(--dd-padding)",minHeight:N?void 0:"42px",borderColor:N?void 0:n?"var(--dd-focus-border)":"#d1d5db",outline:"none",...J},role:"button",tabIndex:f?-1:0,"aria-haspopup":"listbox","aria-expanded":n,children:[o.jsx("div",{className:"flex flex-wrap gap-1 flex-1 overflow-hidden",children:f&&(n||y.length===0)?o.jsx("input",{ref:S,type:"text",value:b,onChange:e=>D(e.target.value),onKeyDown:K,placeholder:y.length===0?$:"Search...",className:"flex-1 outline-none bg-transparent min-w-[60px]",onClick:e=>{e.stopPropagation(),n||u(!0)},disabled:k}):y.length===0?o.jsx("span",{className:"text-gray-400",children:$}):T?y.map(e=>o.jsxs("span",{className:"inline-flex items-center px-2 py-0.5 rounded text-sm animate-fadeIn",style:{backgroundColor:"var(--dd-multi-selected-bg)",color:"var(--dd-multi-selected-text)"},onClick:t=>t.stopPropagation(),children:[e[w],o.jsx("span",{className:"ml-1 cursor-pointer font-bold",style:{color:"currentColor",opacity:.8},onClick:t=>_(e[d],t),children:"×"})]},e[d])):o.jsx("span",{className:"truncate",children:y[0][w]})}),o.jsxs("div",{className:"flex items-center gap-2 ml-2",children:[L&&o.jsx("div",{className:"animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full"}),!L&&!k&&(y.length>0||n&&f&&b)&&o.jsx("div",{onClick:F,className:"p-1 hover:bg-gray-100 rounded-full transition-colors z-10",title:n&&f?"Clear search":"Clear selection",children:o.jsx("svg",{className:"w-3 h-3 text-gray-400 hover:text-gray-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}),o.jsx("div",{className:`transform transition-transform duration-200 ${n?"rotate-180":""} ${Q}`,children:P||o.jsx("svg",{className:"w-4 h-4 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})]}),n&&o.jsx("div",{className:`absolute z-50 w-full mt-1 bg-[var(--dd-menu-bg)] border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col animate-enter ${G}`,children:L?o.jsxs("div",{className:"px-4 py-8 flex justify-center items-center text-gray-400",children:[o.jsx("div",{className:"animate-spin h-6 w-6 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full mr-2"}),"Loading options..."]}):o.jsx("ul",{ref:M,className:"py-1 overflow-y-auto",role:"listbox",children:v.length===0?o.jsx("li",{className:"px-4 py-2 text-gray-500 text-center text-sm",children:"No options found"}):v.map((e,t)=>{const r=R(e[d]),i=t===g;return o.jsxs("li",{className:`
|
|
15
10
|
px-4 py-2 cursor-pointer transition-colors duration-150 flex items-center justify-between
|
|
16
11
|
text-[var(--dd-option-text)]
|
|
17
|
-
${
|
|
18
|
-
${
|
|
19
|
-
`,style:{backgroundColor:
|
|
12
|
+
${B}
|
|
13
|
+
${r?j:""}
|
|
14
|
+
`,style:{backgroundColor:r&&j?void 0:i&&!B?"var(--dd-hover)":r?"var(--dd-selected-bg)":B?void 0:"transparent",color:r&&j||B?void 0:r?"var(--dd-selected-text)":"var(--dd-option-text)",fontWeight:r?500:400},onMouseEnter:()=>C(t),role:"option","aria-selected":r,onClick:c=>W(e,c),children:[o.jsxs("div",{className:"flex flex-col",children:[o.jsx("span",{children:e[w]}),e[V]&&o.jsx("span",{className:`text-xs text-gray-500 mt-0.5 ${X}`,children:e[V]})]}),r&&o.jsx("svg",{className:"w-4 h-4",style:{color:"var(--dd-selected-text)"},fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M5 13l4 4L19 7"})})]},e[d])})})})]})};x.Dropdown=q,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./components/Dropdown";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-customizable-dropdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A highly customizable, accessible, and premium React Dropdown component with built-in search, multi-select, field mapping, sublabels, and extensive theming options.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/dropdown.umd.js",
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
11
12
|
"import": "./dist/dropdown.es.js",
|
|
12
|
-
"require": "./dist/dropdown.umd.js"
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
13
|
+
"require": "./dist/dropdown.umd.js"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"scripts": {
|
|
20
20
|
"dev": "vite",
|
|
21
|
-
"build": "tsc -b && vite build",
|
|
21
|
+
"build": "rimraf dist && tsc -b && vite build",
|
|
22
22
|
"lint": "eslint .",
|
|
23
23
|
"preview": "vite preview"
|
|
24
24
|
},
|
|
@@ -59,7 +59,6 @@
|
|
|
59
59
|
"react": "^18.0.0 || ^19.0.0",
|
|
60
60
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
61
61
|
},
|
|
62
|
-
"dependencies": {},
|
|
63
62
|
"devDependencies": {
|
|
64
63
|
"@eslint/js": "^9.39.1",
|
|
65
64
|
"@types/node": "^24.10.1",
|
|
@@ -74,9 +73,10 @@
|
|
|
74
73
|
"postcss": "^8.5.6",
|
|
75
74
|
"react": "^19.2.0",
|
|
76
75
|
"react-dom": "^19.2.0",
|
|
76
|
+
"rimraf": "^6.1.2",
|
|
77
77
|
"tailwindcss": "^3.4.17",
|
|
78
78
|
"typescript": "~5.9.3",
|
|
79
79
|
"typescript-eslint": "^8.46.4",
|
|
80
80
|
"vite": "^7.2.4"
|
|
81
81
|
}
|
|
82
|
-
}
|
|
82
|
+
}
|