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