prometeo-design-system 3.1.1 → 3.1.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/Avatar.es.js +13 -13
- package/dist/{CardProfile-Ct5Fs60N.js → CardProfile-BVO6fKr9.js} +30 -29
- package/dist/CardProfile.es.js +1 -1
- package/dist/RecurrentDatePicker.es.js +1 -1
- package/dist/{Select-mdLPyy7g.js → Select-Bq1fVlwM.js} +124 -117
- package/dist/Select.es.js +1 -1
- package/dist/SelectSearch.d.ts +2 -0
- package/dist/SelectSearch.es.js +177 -155
- package/dist/components/Autocomplete/useAutocomplete.d.ts +1 -0
- package/dist/components/NavigationDrawer/NavItemSecondary.d.ts +1 -0
- package/dist/components/NavigationDrawer/NavigationDrawer.d.ts +25 -21
- package/dist/components/NavigationDrawer/NavigationDrawerActionItem.d.ts +14 -0
- package/dist/components/NavigationDrawer/NavigationDrawerActions.d.ts +9 -0
- package/dist/components/NavigationDrawer/NavigationDrawerItemBase.d.ts +17 -0
- package/dist/components/NavigationDrawer/{NavItem.d.ts → NavigationDrawerLinkItem.d.ts} +9 -4
- package/dist/components/NavigationDrawer/NavigationDrawerNavlinks.d.ts +11 -0
- package/dist/components/PyrionNavigationDrawer/PyrionNavigationDrawer.d.ts +51 -0
- package/dist/components/Scrollable/Scrollable.d.ts +25 -0
- package/dist/components/SelectSearch/SelectSearch.d.ts +6 -2
- package/dist/components/TabSwitch/TabSwitch.d.ts +0 -20
- package/dist/exports/SelectSearch.d.ts +2 -0
- package/dist/prometeo-design-system.es.js +3 -3
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/styles/base.css +22 -0
- package/src/styles/intellisense.css +1 -0
- package/src/styles/utilities.css +18 -0
- package/dist/components/PyrionNavigationDrawer/PyirionNavigationDrawer.d.ts +0 -40
package/dist/Select.es.js
CHANGED
package/dist/SelectSearch.d.ts
CHANGED
package/dist/SelectSearch.es.js
CHANGED
|
@@ -1,126 +1,125 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { g as i, S as
|
|
3
|
-
import { useState as
|
|
4
|
-
function
|
|
1
|
+
import { j as Y } from "./jsx-runtime-DKDX3adD.js";
|
|
2
|
+
import { g as i, S as Z } from "./Select-Bq1fVlwM.js";
|
|
3
|
+
import { useState as A, useRef as E, useEffect as b, useMemo as ee, useCallback as te } from "react";
|
|
4
|
+
function re(e) {
|
|
5
5
|
const {
|
|
6
|
-
options:
|
|
7
|
-
fetcher:
|
|
8
|
-
asyncMode:
|
|
9
|
-
disabled:
|
|
10
|
-
debounceDelay:
|
|
11
|
-
minCharacters:
|
|
6
|
+
options: O,
|
|
7
|
+
fetcher: d,
|
|
8
|
+
asyncMode: _ = "fetch_in_open",
|
|
9
|
+
disabled: w = !1,
|
|
10
|
+
debounceDelay: P = 500,
|
|
11
|
+
minCharacters: T = 3,
|
|
12
12
|
optionLabel: h,
|
|
13
13
|
optionValue: s,
|
|
14
|
-
controlledValue:
|
|
15
|
-
isOpen:
|
|
16
|
-
inputRef:
|
|
17
|
-
name:
|
|
18
|
-
} = e || {},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}, [
|
|
22
|
-
if (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}, [c, f]), m(() => {
|
|
14
|
+
controlledValue: f,
|
|
15
|
+
isOpen: F,
|
|
16
|
+
inputRef: y,
|
|
17
|
+
name: k
|
|
18
|
+
} = e || {}, M = O ? O.filter((t) => t != null) : [], [V, g] = A(M || []), [D, I] = A(M || []), [c, N] = A(""), [W, v] = A(!1), [J, U] = A(!1), o = E(null), C = E(null), m = E(!1), L = E(d), S = e?.multiple === !0 || !1, j = E(S ? [] : void 0), [a, p] = A(S ? [] : void 0);
|
|
19
|
+
b(() => {
|
|
20
|
+
L.current = d;
|
|
21
|
+
}, [d]), b(() => {
|
|
22
|
+
if (S) {
|
|
23
|
+
const t = z(f, "value");
|
|
24
|
+
p(t);
|
|
25
|
+
} else
|
|
26
|
+
f != null ? p(f) : p(void 0);
|
|
27
|
+
}, [f]), b(() => {
|
|
28
|
+
j.current = f !== void 0 ? f : a;
|
|
29
|
+
}, [f, a]), b(() => {
|
|
31
30
|
if (e?.options) {
|
|
32
31
|
const t = e.options.filter((n) => n != null);
|
|
33
|
-
|
|
32
|
+
g(t), I(t);
|
|
34
33
|
}
|
|
35
34
|
}, [e?.options]);
|
|
36
|
-
const B =
|
|
37
|
-
|
|
38
|
-
}), [
|
|
39
|
-
const n =
|
|
35
|
+
const B = ee(() => (t, n) => new Promise((l, r) => {
|
|
36
|
+
o.current && clearTimeout(o.current), o.current = setTimeout(() => t(c).then(l).catch(r), n);
|
|
37
|
+
}), [c]), ne = (t) => {
|
|
38
|
+
const n = f !== void 0, l = (r) => s ? i(r, s) : i(r, "id");
|
|
40
39
|
if (e?.multiple === !0) {
|
|
41
|
-
const r =
|
|
42
|
-
let
|
|
43
|
-
r.some((
|
|
40
|
+
const r = j.current || [];
|
|
41
|
+
let u;
|
|
42
|
+
r.some((x) => l(x) === l(t)) ? u = r.filter((x) => l(x) !== l(t)) : u = [...r, t], n ? (j.current = u, e?.onChange?.(u, k)) : (j.current = u, p(u), e?.onChange?.(u, k));
|
|
44
43
|
} else
|
|
45
|
-
n ? (
|
|
46
|
-
}, q = (t) => (e?.onFetchingStart?.(),
|
|
47
|
-
|
|
44
|
+
n ? (j.current = t, e?.onChange?.(t, k)) : (j.current = t, p(t), e?.onChange?.(t, k));
|
|
45
|
+
}, q = (t) => (e?.onFetchingStart?.(), L.current?.(t) || Promise.resolve([])), z = (t, n) => Array.isArray(t) ? (t.some((l) => typeof l != "object" || l === null) && console.debug(`El valor del ${n || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, t), t?.filter((l) => l != null) || []) : (console.debug(`El valor del ${n || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof t})`), []), $ = te((t, n) => t.length === 0 ? n : s ? n.filter((l) => !t.some((r) => i(r, s) === i(l, s))) : n.filter((l) => !t.some((r) => i(r, "id") === i(l, "id"))), [s]);
|
|
46
|
+
b(() => {
|
|
48
47
|
const t = e?.subscribeOpenChange;
|
|
49
48
|
if (!t) return;
|
|
50
|
-
const n = t((
|
|
51
|
-
|
|
49
|
+
const n = t((l) => {
|
|
50
|
+
U(l);
|
|
52
51
|
});
|
|
53
52
|
return () => {
|
|
54
53
|
n && n();
|
|
55
54
|
};
|
|
56
55
|
}, [e?.subscribeOpenChange]);
|
|
57
|
-
const G =
|
|
58
|
-
|
|
59
|
-
if (!
|
|
60
|
-
if (!
|
|
61
|
-
|
|
56
|
+
const G = F !== void 0 ? F : J;
|
|
57
|
+
b(() => {
|
|
58
|
+
if (!w && L.current && _ === "fetch_on_type") {
|
|
59
|
+
if (!c || c === "" || c.length < T) {
|
|
60
|
+
o.current && clearTimeout(o.current), v(!1);
|
|
62
61
|
return;
|
|
63
62
|
}
|
|
64
|
-
const t = B(q,
|
|
65
|
-
|
|
66
|
-
const
|
|
67
|
-
|
|
63
|
+
const t = B(q, P);
|
|
64
|
+
v(!0), t.then((n) => {
|
|
65
|
+
const l = z(n);
|
|
66
|
+
g(l);
|
|
68
67
|
}).finally(() => {
|
|
69
|
-
|
|
68
|
+
v(!1), e?.onFetchingEnd?.();
|
|
70
69
|
});
|
|
71
70
|
}
|
|
72
|
-
}, [
|
|
73
|
-
if (!
|
|
71
|
+
}, [_, c, w, P, B, T]), b(() => {
|
|
72
|
+
if (!w)
|
|
74
73
|
if (G) {
|
|
75
|
-
if (e?.onOpen?.(),
|
|
76
|
-
if (!
|
|
74
|
+
if (e?.onOpen?.(), _ === "fetch_in_open") {
|
|
75
|
+
if (!L.current)
|
|
77
76
|
return;
|
|
78
|
-
|
|
79
|
-
const n =
|
|
80
|
-
|
|
81
|
-
const
|
|
77
|
+
v(!0), q().then((t) => {
|
|
78
|
+
const n = z(t);
|
|
79
|
+
g(() => {
|
|
80
|
+
const l = n.filter((r) => {
|
|
82
81
|
if (s)
|
|
83
82
|
return i(r, s) !== void 0;
|
|
84
83
|
});
|
|
85
|
-
return
|
|
84
|
+
return S && a.length > 0 ? [...$(a, l), ...a] : l;
|
|
86
85
|
});
|
|
87
86
|
}).finally(() => {
|
|
88
|
-
|
|
87
|
+
v(!1), e?.onFetchingEnd?.();
|
|
89
88
|
});
|
|
90
89
|
}
|
|
91
90
|
} else
|
|
92
91
|
e?.onClose?.();
|
|
93
|
-
}, [G,
|
|
94
|
-
const H = (t, n) => t?.filter((
|
|
92
|
+
}, [G, _, w]);
|
|
93
|
+
const H = (t, n) => t?.filter((l) => {
|
|
95
94
|
if (h)
|
|
96
|
-
return i(
|
|
95
|
+
return i(l, h)?.toLowerCase().includes(n.toLowerCase());
|
|
97
96
|
{
|
|
98
|
-
const r =
|
|
97
|
+
const r = l;
|
|
99
98
|
switch (typeof r) {
|
|
100
99
|
case "string":
|
|
101
100
|
return r?.toLowerCase().includes(n.toLowerCase());
|
|
102
101
|
case "number":
|
|
103
102
|
return r.toString().includes(n);
|
|
104
103
|
case "object":
|
|
105
|
-
return Object.values(r).some((
|
|
104
|
+
return Object.values(r).some((R) => R.toString()?.toLowerCase().includes(n.toLowerCase()));
|
|
106
105
|
default:
|
|
107
106
|
return !1;
|
|
108
107
|
}
|
|
109
108
|
}
|
|
110
|
-
}) || [],
|
|
109
|
+
}) || [], le = (t) => t?.sort((n, l) => {
|
|
111
110
|
if (h)
|
|
112
|
-
return i(n, h) < i(
|
|
111
|
+
return i(n, h) < i(l, h) ? -1 : 1;
|
|
113
112
|
{
|
|
114
|
-
const
|
|
115
|
-
switch (typeof
|
|
113
|
+
const u = ["label", "name", "value"].find((K) => typeof n == "object" && Object.keys(n).includes(K)), R = n, x = l;
|
|
114
|
+
switch (typeof R) {
|
|
116
115
|
case "string":
|
|
117
|
-
return
|
|
116
|
+
return R < x ? -1 : 1;
|
|
118
117
|
case "number":
|
|
119
|
-
return
|
|
118
|
+
return R < x ? -1 : 1;
|
|
120
119
|
case "object":
|
|
121
|
-
if (
|
|
122
|
-
const
|
|
123
|
-
return
|
|
120
|
+
if (u) {
|
|
121
|
+
const K = i(n, u), oe = i(l, u);
|
|
122
|
+
return K < oe ? -1 : 1;
|
|
124
123
|
} else
|
|
125
124
|
return 1;
|
|
126
125
|
default:
|
|
@@ -128,134 +127,157 @@ function le(e) {
|
|
|
128
127
|
}
|
|
129
128
|
}
|
|
130
129
|
}) || [], Q = (t) => {
|
|
131
|
-
const n = typeof
|
|
132
|
-
t.target === n?.current && (
|
|
133
|
-
|
|
134
|
-
},
|
|
130
|
+
const n = typeof y == "function" ? y() : y;
|
|
131
|
+
t.target === n?.current && (C.current && clearTimeout(C.current), m.current || (m.current = !0, e?.onTypeStart?.()), C.current = setTimeout(() => {
|
|
132
|
+
m.current = !1;
|
|
133
|
+
}, P));
|
|
135
134
|
};
|
|
136
|
-
|
|
137
|
-
if (
|
|
138
|
-
|
|
139
|
-
else if (
|
|
140
|
-
const t =
|
|
141
|
-
|
|
135
|
+
b(() => {
|
|
136
|
+
if (c === "")
|
|
137
|
+
I(le(V));
|
|
138
|
+
else if (S) {
|
|
139
|
+
const t = $(a, V);
|
|
140
|
+
I([...H(t, c), ...a]);
|
|
142
141
|
} else {
|
|
143
|
-
const t =
|
|
144
|
-
|
|
142
|
+
const t = $([a], V);
|
|
143
|
+
I([...H(t, c), a]);
|
|
145
144
|
}
|
|
146
|
-
}, [
|
|
145
|
+
}, [V]), b(() => (document.addEventListener("keydown", Q), () => {
|
|
147
146
|
document.removeEventListener("keydown", Q);
|
|
148
|
-
}), [])
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
147
|
+
}), []);
|
|
148
|
+
const X = () => {
|
|
149
|
+
N("");
|
|
150
|
+
};
|
|
151
|
+
return {
|
|
152
|
+
inputValue: c,
|
|
153
|
+
setInputValue: N,
|
|
154
|
+
cleanInputValue: X,
|
|
154
155
|
cleanOptions: () => {
|
|
155
|
-
|
|
156
|
+
if (S)
|
|
157
|
+
g(a);
|
|
158
|
+
else {
|
|
159
|
+
const t = a;
|
|
160
|
+
g(t ? [t] : []);
|
|
161
|
+
}
|
|
162
|
+
X();
|
|
163
|
+
},
|
|
164
|
+
clearValue: () => {
|
|
165
|
+
p(S ? [] : void 0);
|
|
156
166
|
},
|
|
157
167
|
filteredOptions: D,
|
|
158
|
-
isLoading:
|
|
159
|
-
value:
|
|
160
|
-
setValue:
|
|
161
|
-
onOptionClick:
|
|
168
|
+
isLoading: W,
|
|
169
|
+
value: a,
|
|
170
|
+
setValue: p,
|
|
171
|
+
onOptionClick: ne
|
|
162
172
|
};
|
|
163
173
|
}
|
|
164
|
-
const
|
|
165
|
-
const
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
minCharacters: l.minCharacters,
|
|
176
|
-
disabled: l.disabled,
|
|
177
|
-
optionValue: l.optionValue,
|
|
178
|
-
optionLabel: l.optionLabel,
|
|
174
|
+
const fe = (e) => {
|
|
175
|
+
const O = E(null), { asyncMode: d = "fetch_in_open" } = e, _ = (o, C, m) => {
|
|
176
|
+
const L = {
|
|
177
|
+
options: o.options,
|
|
178
|
+
fetcher: o.fetcher,
|
|
179
|
+
asyncMode: C,
|
|
180
|
+
debounceDelay: o.debounceDelay,
|
|
181
|
+
minCharacters: o.minCharacters,
|
|
182
|
+
disabled: o.disabled,
|
|
183
|
+
optionValue: o.optionValue,
|
|
184
|
+
optionLabel: o.optionLabel,
|
|
179
185
|
onFetchingStart: () => {
|
|
180
|
-
|
|
186
|
+
C === "fetch_on_type" && m.current?.open();
|
|
181
187
|
},
|
|
182
188
|
onTypeStart: () => {
|
|
183
|
-
!
|
|
189
|
+
!o?.fetcher && m.current?.open();
|
|
184
190
|
},
|
|
185
|
-
inputRef: () =>
|
|
186
|
-
subscribeOpenChange:
|
|
187
|
-
name:
|
|
191
|
+
inputRef: () => m.current?.searchInputRef,
|
|
192
|
+
subscribeOpenChange: m.current?.subscribeOpenChange,
|
|
193
|
+
name: o.name
|
|
188
194
|
};
|
|
189
|
-
return
|
|
190
|
-
...
|
|
195
|
+
return o.multiple ? {
|
|
196
|
+
...L,
|
|
191
197
|
multiple: !0,
|
|
192
|
-
controlledValue:
|
|
193
|
-
onChange:
|
|
198
|
+
controlledValue: o.value,
|
|
199
|
+
onChange: o.onChange
|
|
194
200
|
} : {
|
|
195
|
-
...
|
|
201
|
+
...L,
|
|
196
202
|
multiple: !1,
|
|
197
|
-
controlledValue:
|
|
198
|
-
onChange:
|
|
203
|
+
controlledValue: o.value,
|
|
204
|
+
onChange: o.onChange
|
|
199
205
|
};
|
|
200
|
-
}, { inputValue:
|
|
201
|
-
|
|
202
|
-
O
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
206
|
+
}, { inputValue: w, setInputValue: P, filteredOptions: T, isLoading: h, value: s, onOptionClick: f, cleanInputValue: F, cleanOptions: y, clearValue: k } = re(_(e, d, O));
|
|
207
|
+
b(() => {
|
|
208
|
+
!e.controls || !O.current || (e.controls.current = {
|
|
209
|
+
...O.current,
|
|
210
|
+
cleanOptions: () => {
|
|
211
|
+
y();
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
}, [e.controls, y]);
|
|
215
|
+
const M = te(
|
|
216
|
+
() => d === "fetch_on_type" ? h : !1,
|
|
217
|
+
[d, h]
|
|
218
|
+
), V = ee(() => e.multiple ? s.map((o) => i(o, e.optionValue)) : s ? i(s, e.optionValue) : void 0, [s, e.optionValue, e.multiple]), g = (o) => {
|
|
219
|
+
const C = T.find((m) => i(m, e.optionValue) === o.id);
|
|
220
|
+
C && f(C);
|
|
221
|
+
}, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: I, overflow: c = "scroll", onChange: N, onClear: W, ...v } = e.selectComponentProps || {}, J = {
|
|
222
|
+
controledSearchValue: w,
|
|
223
|
+
onSearchValueChange: d === "fetch_on_type" ? P : void 0,
|
|
224
|
+
onSearchClear: d === "fetch_on_type" ? () => {
|
|
225
|
+
F(), y();
|
|
208
226
|
} : void 0,
|
|
209
227
|
inputSearchPlaceholder: e.inputSearchPlaceholder,
|
|
210
|
-
isLoading:
|
|
211
|
-
...
|
|
228
|
+
isLoading: M(),
|
|
229
|
+
...I || {}
|
|
230
|
+
}, U = () => {
|
|
231
|
+
k(), e?.selectComponentProps?.onClear?.();
|
|
212
232
|
};
|
|
213
|
-
return e.multiple ? /* @__PURE__ */
|
|
214
|
-
|
|
233
|
+
return e.multiple ? /* @__PURE__ */ Y.jsx(
|
|
234
|
+
Z,
|
|
215
235
|
{
|
|
216
236
|
disabled: e.disabled,
|
|
217
237
|
className: e.className,
|
|
218
238
|
name: e.name,
|
|
219
|
-
overflow:
|
|
220
|
-
...
|
|
239
|
+
overflow: c,
|
|
240
|
+
...v,
|
|
241
|
+
onClear: e?.selectComponentProps?.onClear && U,
|
|
221
242
|
multiple: !0,
|
|
222
|
-
value:
|
|
243
|
+
value: V,
|
|
223
244
|
label: e.label || "",
|
|
224
|
-
options:
|
|
245
|
+
options: T,
|
|
225
246
|
optionValue: e.optionValue,
|
|
226
247
|
optionLabel: e.optionLabel,
|
|
227
248
|
renderOption: e.renderOption,
|
|
228
|
-
onOptionClick:
|
|
229
|
-
displayMode:
|
|
230
|
-
controls:
|
|
249
|
+
onOptionClick: g,
|
|
250
|
+
displayMode: D,
|
|
251
|
+
controls: O,
|
|
231
252
|
emptyMessage: "Use el buscador para obtener las opciones disponibles",
|
|
232
253
|
dropdownOptions: J,
|
|
233
|
-
isLoading:
|
|
254
|
+
isLoading: d === "fetch_in_open" ? h : !1
|
|
234
255
|
}
|
|
235
|
-
) : /* @__PURE__ */
|
|
236
|
-
|
|
256
|
+
) : /* @__PURE__ */ Y.jsx(
|
|
257
|
+
Z,
|
|
237
258
|
{
|
|
238
259
|
disabled: e.disabled,
|
|
239
|
-
...
|
|
260
|
+
...v,
|
|
261
|
+
onClear: U,
|
|
240
262
|
className: e.className,
|
|
241
|
-
overflow:
|
|
263
|
+
overflow: c,
|
|
242
264
|
name: e.name,
|
|
243
265
|
multiple: !1,
|
|
244
|
-
value:
|
|
266
|
+
value: V,
|
|
245
267
|
label: e.label || "",
|
|
246
|
-
options:
|
|
268
|
+
options: T,
|
|
247
269
|
optionValue: e.optionValue,
|
|
248
270
|
optionLabel: e.optionLabel,
|
|
249
271
|
renderOption: e.renderOption,
|
|
250
|
-
onOptionClick:
|
|
272
|
+
onOptionClick: g,
|
|
251
273
|
displayMode: "compact",
|
|
252
|
-
controls:
|
|
274
|
+
controls: O,
|
|
253
275
|
emptyMessage: "Use el buscador para obtener las opciones disponibles",
|
|
254
276
|
dropdownOptions: J,
|
|
255
|
-
isLoading:
|
|
277
|
+
isLoading: d === "fetch_in_open" ? h : !1
|
|
256
278
|
}
|
|
257
279
|
);
|
|
258
280
|
};
|
|
259
281
|
export {
|
|
260
|
-
|
|
282
|
+
fe as default
|
|
261
283
|
};
|
|
@@ -34,6 +34,7 @@ export declare function useAutocomplete<T extends object>(options?: UseAutocompl
|
|
|
34
34
|
setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
|
|
35
35
|
cleanInputValue: () => void;
|
|
36
36
|
cleanOptions: () => void;
|
|
37
|
+
clearValue: () => void;
|
|
37
38
|
filteredOptions: T[];
|
|
38
39
|
isLoading: boolean;
|
|
39
40
|
value: T | T[] | undefined;
|
|
@@ -1,29 +1,33 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
type NavigationDrawerRenderContext = {
|
|
3
|
+
toggleCollapse: () => void;
|
|
4
|
+
getIsCollapsed: () => boolean;
|
|
5
|
+
subscribeToCollapse: (listener: (collapsed: boolean) => void) => () => void;
|
|
6
|
+
};
|
|
7
|
+
type NavigationDrawerSlotChildren = ReactNode | ((context: NavigationDrawerRenderContext) => ReactNode);
|
|
2
8
|
export interface NavigationDrawerProps {
|
|
3
|
-
children?:
|
|
9
|
+
children?: NavigationDrawerSlotChildren;
|
|
4
10
|
}
|
|
5
|
-
|
|
11
|
+
type SlotBaseProps = {
|
|
12
|
+
children?: NavigationDrawerSlotChildren;
|
|
13
|
+
className?: string;
|
|
14
|
+
context?: NavigationDrawerRenderContext;
|
|
15
|
+
};
|
|
16
|
+
type ContentProps = SlotBaseProps & Omit<React.AllHTMLAttributes<HTMLDivElement>, "children">;
|
|
17
|
+
declare const NavigationDrawer: React.NamedExoticComponent<NavigationDrawerProps> & {
|
|
6
18
|
readonly type: (props: NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
19
|
} & {
|
|
8
|
-
Root:
|
|
9
|
-
Header: ({ children, className }:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
Content: ({ children, className }: {
|
|
14
|
-
children: ReactNode;
|
|
15
|
-
className?: string;
|
|
16
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
Footer: ({ children, className }: {
|
|
18
|
-
children: ReactNode;
|
|
19
|
-
className?: string;
|
|
20
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
Spacer: ({ className }: {
|
|
20
|
+
Root: React.MemoExoticComponent<(props: NavigationDrawerProps) => import("react/jsx-runtime").JSX.Element>;
|
|
21
|
+
Header: React.MemoExoticComponent<({ children, className, context }: SlotBaseProps) => import("react/jsx-runtime").JSX.Element>;
|
|
22
|
+
Content: React.MemoExoticComponent<({ children, className, context, ...props }: ContentProps) => import("react/jsx-runtime").JSX.Element>;
|
|
23
|
+
Footer: React.MemoExoticComponent<({ children, className, context }: SlotBaseProps) => import("react/jsx-runtime").JSX.Element>;
|
|
24
|
+
Spacer: React.MemoExoticComponent<({ className }: {
|
|
22
25
|
className?: string;
|
|
23
|
-
}) => import("react/jsx-runtime").JSX.Element
|
|
24
|
-
Outlet: ({ children, className }: {
|
|
25
|
-
children
|
|
26
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
27
|
+
Outlet: React.MemoExoticComponent<({ children, className, context }: {
|
|
28
|
+
children?: NavigationDrawerSlotChildren;
|
|
26
29
|
className?: string;
|
|
27
|
-
|
|
30
|
+
context?: NavigationDrawerRenderContext;
|
|
31
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
28
32
|
};
|
|
29
33
|
export default NavigationDrawer;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconComponent } from '../../Icons/types';
|
|
2
|
+
export interface NavigationDrawerActionItemProps {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
icon?: IconComponent;
|
|
6
|
+
count?: number;
|
|
7
|
+
className?: string;
|
|
8
|
+
isActive?: boolean;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
isView?: boolean | (() => boolean);
|
|
11
|
+
}
|
|
12
|
+
declare const NavigationDrawerActionItem: import('react').MemoExoticComponent<(props: NavigationDrawerActionItemProps) => import("react/jsx-runtime").JSX.Element>;
|
|
13
|
+
export default NavigationDrawerActionItem;
|
|
14
|
+
export type { NavigationDrawerActionItemProps as NavigationDrawerActionItemPropsType };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { NavigationDrawerActionItemProps } from './NavigationDrawerActionItem';
|
|
2
|
+
export interface NavigationDrawerActionsProps {
|
|
3
|
+
actions?: NavigationDrawerActionItemProps[];
|
|
4
|
+
activeActionId?: string;
|
|
5
|
+
onActionClick?: (id: string) => void;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const NavigationDrawerActions: import('react').MemoExoticComponent<({ actions, activeActionId, onActionClick, className }: NavigationDrawerActionsProps) => import("react/jsx-runtime").JSX.Element>;
|
|
9
|
+
export default NavigationDrawerActions;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { IconComponent } from '../../Icons/types';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
export interface NavigationDrawerItemBaseProps {
|
|
4
|
+
title: string;
|
|
5
|
+
icon?: IconComponent;
|
|
6
|
+
count?: number;
|
|
7
|
+
className?: string;
|
|
8
|
+
isSelected?: boolean;
|
|
9
|
+
hasSublinks?: boolean;
|
|
10
|
+
subLinksCollapsed?: boolean;
|
|
11
|
+
onToggleSublinks?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
12
|
+
as?: "a" | "button" | "div";
|
|
13
|
+
onClick?: React.MouseEventHandler;
|
|
14
|
+
onAuxClick?: React.MouseEventHandler;
|
|
15
|
+
}
|
|
16
|
+
declare const NavigationDrawerItemBase: React.MemoExoticComponent<(props: NavigationDrawerItemBaseProps) => import("react/jsx-runtime").JSX.Element>;
|
|
17
|
+
export default NavigationDrawerItemBase;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IconComponent } from '../../Icons/types';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { NavItemSecondaryProps } from './NavItemSecondary';
|
|
4
|
-
export interface
|
|
4
|
+
export interface NavigationDrawerLinkItemProps {
|
|
5
5
|
path: string;
|
|
6
6
|
title: string;
|
|
7
7
|
icon?: IconComponent;
|
|
@@ -10,7 +10,9 @@ export interface NavItemProps {
|
|
|
10
10
|
count?: number;
|
|
11
11
|
className?: string;
|
|
12
12
|
isSelected?: boolean;
|
|
13
|
-
|
|
13
|
+
toggleCollapse?: () => void;
|
|
14
|
+
getIsCollapsed?: () => boolean;
|
|
15
|
+
subscribeToCollapse?: (listener: (collapsed: boolean) => void) => () => void;
|
|
14
16
|
onClick?: (path: string) => void;
|
|
15
17
|
sublinks?: NavItemSecondaryProps[];
|
|
16
18
|
subLinksRender?: (sublinks: NavItemSecondaryProps[], controls: NavItemHandler) => ReactNode;
|
|
@@ -19,6 +21,9 @@ interface NavItemHandler {
|
|
|
19
21
|
toggle: () => void;
|
|
20
22
|
setIsCollapsed: (collapsed: boolean) => void;
|
|
21
23
|
isCollapsed: boolean;
|
|
24
|
+
isDrawerCollapsed: boolean;
|
|
25
|
+
toggleDrawerCollapse?: () => void;
|
|
26
|
+
subscribeToCollapse?: (listener: (collapsed: boolean) => void) => () => void;
|
|
22
27
|
}
|
|
23
|
-
declare const
|
|
24
|
-
export default
|
|
28
|
+
declare const NavigationDrawerLinkItem: import('react').NamedExoticComponent<NavigationDrawerLinkItemProps & import('react').RefAttributes<NavItemHandler>>;
|
|
29
|
+
export default NavigationDrawerLinkItem;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { NavigationDrawerLinkItemProps } from './NavigationDrawerLinkItem';
|
|
2
|
+
export interface NavigationDrawerNavlinksProps {
|
|
3
|
+
navlinks?: NavigationDrawerLinkItemProps[];
|
|
4
|
+
handleNavigation: (path: string) => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
getIsCollapsed?: () => boolean;
|
|
7
|
+
toggleCollapse?: () => void;
|
|
8
|
+
subscribeToCollapse?: (listener: (collapsed: boolean) => void) => () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const NavigationDrawerNavlinks: import('react').MemoExoticComponent<({ navlinks, handleNavigation, className, getIsCollapsed, toggleCollapse, subscribeToCollapse }: NavigationDrawerNavlinksProps) => import("react/jsx-runtime").JSX.Element>;
|
|
11
|
+
export default NavigationDrawerNavlinks;
|