prometeo-design-system 2.4.4 → 2.5.0

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 (65) hide show
  1. package/dist/Avatar.es.js +1 -1
  2. package/dist/{Button-Bc0LYLfg.js → Button-DsbEyjth.js} +1 -1
  3. package/dist/Button.es.js +1 -1
  4. package/dist/{CardProfile-BhHJmvqs.js → CardProfile-Fn44kEnM.js} +1 -1
  5. package/dist/CardProfile.es.js +1 -1
  6. package/dist/CheckBox.es.js +1 -1
  7. package/dist/CheckboxFormik.es.js +1 -1
  8. package/dist/DatePicker.es.js +3 -3
  9. package/dist/DialogModal.es.js +1 -1
  10. package/dist/DrawerDesktop.es.js +2 -2
  11. package/dist/DrawerMobile.es.js +1 -1
  12. package/dist/DropZone.es.js +1 -1
  13. package/dist/Header.es.js +1 -1
  14. package/dist/Icons/Icons.d.ts +1 -0
  15. package/dist/Icons.es.js +213 -196
  16. package/dist/Image.es.js +1 -1
  17. package/dist/{ImageGallery-BeADef_g.js → ImageGallery-DnoRTpCr.js} +2 -2
  18. package/dist/ImageGallery.es.js +1 -1
  19. package/dist/Input-Bhd0bmVq.js +270 -0
  20. package/dist/Input.es.js +2 -236
  21. package/dist/InputFormik.es.js +1 -1
  22. package/dist/InputMultiple.es.js +1 -1
  23. package/dist/{LayoutGeneric-jDE96L2N.js → LayoutGeneric-p4Pll4Cm.js} +1 -1
  24. package/dist/LayoutGeneric.es.js +1 -1
  25. package/dist/Logo.es.js +1 -1
  26. package/dist/Menu.es.js +1 -1
  27. package/dist/OtpInput.es.js +1 -1
  28. package/dist/Pagination.es.js +1 -1
  29. package/dist/ProfilePictureUpload.es.js +1 -1
  30. package/dist/ProgressBar.es.js +1 -1
  31. package/dist/SegmentedButton.es.js +1 -1
  32. package/dist/Select-CxJFcGuQ.js +801 -0
  33. package/dist/Select.es.js +2 -559
  34. package/dist/SelectFormik.es.js +28 -14
  35. package/dist/SelectFormikLegacy.es.js +1 -1
  36. package/dist/SelectSearch.d.ts +4 -0
  37. package/dist/SelectSearch.es.js +201 -0
  38. package/dist/Skeleton.es.js +1 -1
  39. package/dist/Spinner.es.js +1 -1
  40. package/dist/Steps.es.js +1 -1
  41. package/dist/SwipeContainer.es.js +1 -1
  42. package/dist/Switch.es.js +1 -1
  43. package/dist/TabLinks.es.js +1 -1
  44. package/dist/Table.es.js +1 -1
  45. package/dist/TextArea.es.js +1 -1
  46. package/dist/Toast.es.js +2 -2
  47. package/dist/ToastProvider.es.js +1 -1
  48. package/dist/Tooltip.es.js +1 -1
  49. package/dist/components/Autocomplete/Autocomplete.d.ts +20 -0
  50. package/dist/components/Autocomplete/useAutocomplete.d.ts +33 -0
  51. package/dist/components/Input/Input.d.ts +3 -2
  52. package/dist/components/Select/Select.d.ts +42 -25
  53. package/dist/components/Select copy/Select.d.ts +71 -0
  54. package/dist/components/SelectSearch/SelectSearch.d.ts +26 -0
  55. package/dist/components/Shared/Chip.d.ts +2 -1
  56. package/dist/exports/Autocomplete.d.ts +1 -0
  57. package/dist/exports/SelectSearch.d.ts +1 -0
  58. package/dist/index.d.ts +2 -0
  59. package/dist/{jsx-runtime-ByW6EXIE.js → jsx-runtime-DKDX3adD.js} +94 -96
  60. package/dist/lib/utils.d.ts +3 -0
  61. package/dist/pages/Autocomplete.page.d.ts +2 -0
  62. package/dist/preview/AutocompletePreview.d.ts +2 -0
  63. package/dist/prometeo-design-system.css +1 -1
  64. package/dist/prometeo-design-system.es.js +16 -14
  65. package/package.json +1 -1
@@ -0,0 +1,201 @@
1
+ import { j as q } from "./jsx-runtime-DKDX3adD.js";
2
+ import { g as s, S as $ } from "./Select-CxJFcGuQ.js";
3
+ import { useState as C, useRef as j, useEffect as f, useMemo as z, useCallback as G } from "react";
4
+ function ee(e) {
5
+ const {
6
+ options: u,
7
+ multiple: l = !1,
8
+ fetcher: v,
9
+ asyncMode: b = "fetch_in_open",
10
+ disabled: S = !1,
11
+ debounceDelay: d = 500,
12
+ minCharacters: L = 3,
13
+ optionLabel: h,
14
+ optionValue: a,
15
+ controlledValue: p,
16
+ isOpen: k,
17
+ inputRef: V,
18
+ name: x
19
+ } = e || {}, [_, w] = C(u || []), [E, T] = C(u || []), [r, y] = C(""), [P, I] = C(!1), [m, M] = C([]), [H, N] = C(!1), R = j(null), A = j(null), D = j(!1), F = j(v);
20
+ f(() => {
21
+ F.current = v;
22
+ }, [v]), f(() => {
23
+ p !== void 0 && M(p);
24
+ }, [p]), f(() => {
25
+ e?.options && (w(e.options), T(e.options));
26
+ }, [e?.options]);
27
+ const J = z(() => (n, t) => new Promise((o, c) => {
28
+ R.current && clearTimeout(R.current), R.current = setTimeout(() => n(r).then(o).catch(c), t);
29
+ }), [r]), Q = (n) => {
30
+ const t = p !== void 0;
31
+ console.log(t, "isControlled");
32
+ const o = t ? p : m;
33
+ console.log(o, "prev value");
34
+ let c;
35
+ const i = (O) => a ? s(O, a) : s(O, "id");
36
+ if (l) {
37
+ const O = o.some((g) => i(g) === i(n));
38
+ console.log(O, "exists"), O ? c = o.filter((g) => i(g) !== i(n)) : c = [...o, n];
39
+ } else
40
+ c = [n];
41
+ t || M(c), e?.onChange?.(c, x);
42
+ }, K = (n) => (e?.onFetchingStart?.(), F.current?.(n) || Promise.resolve([])), B = G((n, t) => n.length === 0 ? t : a ? t.filter((o) => !n.some((c) => s(c, a) === s(o, a))) : t.filter((o) => !n.some((c) => s(c, "id") === s(o, "id"))), [a]);
43
+ f(() => {
44
+ const n = e?.subscribeOpenChange;
45
+ if (!n) return;
46
+ const t = n((o) => {
47
+ N(o);
48
+ });
49
+ return () => {
50
+ t && t();
51
+ };
52
+ }, [e?.subscribeOpenChange]);
53
+ const U = k !== void 0 ? k : H;
54
+ f(() => {
55
+ if (!S && F.current && b === "fetch_on_type") {
56
+ if (!r || r === "" || r.length < L) {
57
+ R.current && clearTimeout(R.current), I(!1);
58
+ return;
59
+ }
60
+ const n = J(K, d);
61
+ I(!0), n.then((t) => {
62
+ w(t);
63
+ }).finally(() => {
64
+ I(!1), e?.onFetchingEnd?.();
65
+ });
66
+ }
67
+ }, [b, r, S, d, J, L]), f(() => {
68
+ if (U) {
69
+ if (e?.onOpen?.(), b === "fetch_in_open") {
70
+ if (!F.current)
71
+ return;
72
+ I(!0), K().then((n) => {
73
+ w(() => m.length > 0 ? [...B(m, n), ...m] : n);
74
+ }).finally(() => {
75
+ I(!1), e?.onFetchingEnd?.();
76
+ });
77
+ }
78
+ } else
79
+ e?.onClose?.();
80
+ }, [U, b]);
81
+ const X = (n, t) => n.filter((o) => {
82
+ if (h)
83
+ return s(o, h).toLowerCase().includes(t.toLowerCase());
84
+ switch (typeof o) {
85
+ case "string":
86
+ return o.toLowerCase().includes(t.toLowerCase());
87
+ case "number":
88
+ return o.toString().includes(t);
89
+ case "object":
90
+ return Object.values(o).some((i) => i.toString().toLowerCase().includes(t.toLowerCase()));
91
+ default:
92
+ return !1;
93
+ }
94
+ }), Y = (n) => n.sort((t, o) => {
95
+ if (h)
96
+ return s(t, h) < s(o, h) ? -1 : 1;
97
+ {
98
+ const i = ["label", "name", "value"].find((g) => typeof t == "object" && Object.keys(t).includes(g));
99
+ switch (typeof t) {
100
+ case "string":
101
+ return t < o ? -1 : 1;
102
+ case "number":
103
+ return t < o ? -1 : 1;
104
+ case "object":
105
+ if (i) {
106
+ const g = s(t, i), Z = s(o, i);
107
+ return g < Z ? -1 : 1;
108
+ } else
109
+ return 1;
110
+ default:
111
+ return 1;
112
+ }
113
+ }
114
+ }), W = (n) => {
115
+ const t = typeof V == "function" ? V() : V;
116
+ n.target === t?.current && (A.current && clearTimeout(A.current), D.current || (D.current = !0, e?.onTypeStart?.()), A.current = setTimeout(() => {
117
+ D.current = !1;
118
+ }, d));
119
+ };
120
+ return f(() => {
121
+ if (r === "")
122
+ T(Y(_));
123
+ else {
124
+ const n = B(m, _);
125
+ T([...X(n, r), ...m]);
126
+ }
127
+ }, [_]), f(() => (document.addEventListener("keydown", W), () => {
128
+ document.removeEventListener("keydown", W);
129
+ }), []), {
130
+ inputValue: r,
131
+ setInputValue: y,
132
+ cleanInputValue: () => {
133
+ y("");
134
+ },
135
+ filteredOptions: E,
136
+ isLoading: P,
137
+ value: m,
138
+ setValue: M,
139
+ onOptionClick: Q
140
+ };
141
+ }
142
+ const ce = (e) => {
143
+ const u = j(null), { asyncMode: l = "fetch_in_open" } = e, { inputValue: v, setInputValue: b, filteredOptions: S, isLoading: d, value: L, onOptionClick: h, cleanInputValue: a } = ee({
144
+ options: e.options,
145
+ fetcher: e.fetcher,
146
+ asyncMode: l,
147
+ debounceDelay: e.debounceDelay,
148
+ minCharacters: e.minCharacters,
149
+ disabled: e.disabled,
150
+ multiple: e.multiple,
151
+ optionValue: e.optionValue,
152
+ optionLabel: e.optionLabel,
153
+ onFetchingStart: () => {
154
+ l === "fetch_on_type" && u.current?.open();
155
+ },
156
+ onTypeStart: () => {
157
+ !e?.fetcher && u.current?.open();
158
+ },
159
+ inputRef: () => u.current?.searchInputRef,
160
+ //estado controlado
161
+ controlledValue: e.value,
162
+ subscribeOpenChange: u.current?.subscribeOpenChange,
163
+ onChange: e.onChange,
164
+ name: e.name
165
+ }), p = z(() => L.map((r) => s(r, e.optionValue)), [L, e.optionValue]), k = G(() => l === "fetch_on_type" ? d : !1, [l, d]), V = (r) => {
166
+ console.log(r, "newValue");
167
+ const y = S.find((P) => s(P, e.optionValue) === r.id);
168
+ y && (console.log(y, "originalOption"), h(y));
169
+ }, { displayMode: x = "chips", dropdownOptions: _, overflow: w = "scroll", ...E } = e.selectComponentProps || {}, T = {
170
+ controledSearchValue: v,
171
+ onSearchValueChange: l === "fetch_on_type" ? b : void 0,
172
+ onSearchClear: l === "fetch_on_type" ? a : void 0,
173
+ inputSearchPlaceholder: e.inputSearchPlaceholder,
174
+ isLoading: k(),
175
+ ..._ || {}
176
+ };
177
+ return /* @__PURE__ */ q.jsx("div", { children: /* @__PURE__ */ q.jsx(
178
+ $,
179
+ {
180
+ name: e.name,
181
+ overflow: w,
182
+ ...E,
183
+ label: e.label || "",
184
+ value: p,
185
+ options: S,
186
+ optionValue: e.optionValue,
187
+ optionLabel: e.optionLabel,
188
+ renderOption: e.renderOption,
189
+ onOptionClick: V,
190
+ multiple: e.multiple,
191
+ displayMode: x,
192
+ controls: u,
193
+ emptyMessage: "Use el buscador para obtener las opciones disponibles",
194
+ dropdownOptions: T,
195
+ isLoading: l === "fetch_in_open" ? d : !1
196
+ }
197
+ ) });
198
+ };
199
+ export {
200
+ ce as default
201
+ };
@@ -1,4 +1,4 @@
1
- import { j as E } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as E } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as B } from "./cn-B6yFEsav.js";
3
3
  import { memo as N, useRef as R, useCallback as D, useLayoutEffect as M } from "react";
4
4
  const y = (n) => {
@@ -1,4 +1,4 @@
1
- import { j as e } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as e } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { ClipLoader as l, SyncLoader as m, HashLoader as p, GridLoader as x, DotLoader as j, BounceLoader as f } from "react-spinners";
3
3
  import { c as L } from "./cn-B6yFEsav.js";
4
4
  const y = ({
package/dist/Steps.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { j as e } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as e } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as j } from "./cn-B6yFEsav.js";
3
3
  import { motion as r } from "framer-motion";
4
4
  import N from "react";
@@ -1,4 +1,4 @@
1
- import { j as o } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as o } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as i } from "./cn-B6yFEsav.js";
3
3
  import { useState as d, useRef as D, useEffect as L } from "react";
4
4
  const O = ({
package/dist/Switch.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { j as a } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as a } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as r } from "./cn-B6yFEsav.js";
3
3
  import { memo as w, useRef as b } from "react";
4
4
  import { motion as c } from "framer-motion";
@@ -1,4 +1,4 @@
1
- import { j as n } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as n } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { motion as x } from "framer-motion";
3
3
  import { memo as N } from "react";
4
4
  import { c as r } from "./cn-B6yFEsav.js";
package/dist/Table.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { j as r } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as r } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as l } from "./cn-B6yFEsav.js";
3
3
  import * as o from "react";
4
4
  const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div", { className: "w-full", children: /* @__PURE__ */ r.jsx(
@@ -1,4 +1,4 @@
1
- import { j as y } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as y } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { c as C } from "./cn-B6yFEsav.js";
3
3
  import * as s from "react";
4
4
  function M({
package/dist/Toast.es.js CHANGED
@@ -1,9 +1,9 @@
1
- import { j as e } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as e } from "./jsx-runtime-DKDX3adD.js";
2
2
  import b from "react";
3
3
  import { toast as p } from "sonner";
4
4
  import { Icons as m } from "./Icons.es.js";
5
5
  import { c as s } from "./cn-B6yFEsav.js";
6
- import { B as u } from "./Button-Bc0LYLfg.js";
6
+ import { B as u } from "./Button-DsbEyjth.js";
7
7
  const x = {
8
8
  dark: {
9
9
  success: {
@@ -1,4 +1,4 @@
1
- import { j as t } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as t } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { Toaster as r } from "sonner";
3
3
  const i = ({ ...o }) => /* @__PURE__ */ t.jsx(r, { ...o, position: "bottom-right", richColors: !1, theme: "light" });
4
4
  export {
@@ -1,4 +1,4 @@
1
- import { j as e } from "./jsx-runtime-ByW6EXIE.js";
1
+ import { j as e } from "./jsx-runtime-DKDX3adD.js";
2
2
  import { AnimatePresence as f, motion as n } from "framer-motion";
3
3
  import { useState as p, cloneElement as x } from "react";
4
4
  import { Icons as b } from "./Icons.es.js";
@@ -0,0 +1,20 @@
1
+ import { ComponentType } from 'react';
2
+ import { CustomSelectOptionRendererProps } from '../Select/Select';
3
+ import { OptionAccessor } from '../Shared/types';
4
+ export interface AutocompleteProps<T> {
5
+ label?: string;
6
+ placeholder?: string;
7
+ name?: string;
8
+ multiple?: boolean;
9
+ options?: T[];
10
+ optionValue: OptionAccessor<T, string | number>;
11
+ optionLabel: OptionAccessor<T, string>;
12
+ fetcher?: (input?: string) => Promise<T[]>;
13
+ asyncMode?: 'fetch_in_open' | 'fetch_on_type';
14
+ debounceDelay?: number;
15
+ labelVariant?: 'static' | 'default';
16
+ disabled?: boolean;
17
+ renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
18
+ }
19
+ declare const Autocomplete: <T>(props: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
20
+ export default Autocomplete;
@@ -0,0 +1,33 @@
1
+ import { OptionAccessor } from '../Shared/types';
2
+ export interface UseAutocompleteOptions<T> {
3
+ options?: T[];
4
+ multiple?: boolean;
5
+ fetcher?: (input?: string) => Promise<T[]>;
6
+ asyncMode?: 'fetch_in_open' | 'fetch_on_type';
7
+ disabled?: boolean;
8
+ debounceDelay?: number;
9
+ minCharacters?: number;
10
+ optionLabel?: OptionAccessor<T, string>;
11
+ optionValue?: OptionAccessor<T, string | number>;
12
+ inputRef?: React.RefObject<HTMLInputElement | null> | (() => React.RefObject<HTMLInputElement | null> | undefined);
13
+ onFetchingStart?: () => void;
14
+ onFetchingEnd?: () => void;
15
+ onTypeStart?: () => void;
16
+ onOpen?: () => void;
17
+ onClose?: () => void;
18
+ controlledValue?: T[];
19
+ isOpen?: boolean;
20
+ subscribeOpenChange?: (cb: (open: boolean) => void) => (() => void) | undefined;
21
+ onChange?: (newValue: T[], name?: string) => void;
22
+ name?: string;
23
+ }
24
+ export declare function useAutocomplete<T>(options?: UseAutocompleteOptions<T>): {
25
+ inputValue: string;
26
+ setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
27
+ cleanInputValue: () => void;
28
+ filteredOptions: T[];
29
+ isLoading: boolean;
30
+ value: T[];
31
+ setValue: import('react').Dispatch<import('react').SetStateAction<T[]>>;
32
+ onOptionClick: (option: T) => void;
33
+ };
@@ -1,7 +1,7 @@
1
1
  export type InputVariant = "default" | "error" | "success";
2
2
  export type InputSize = "small" | "medium" | "large";
3
3
  export type LabelVariant = "default" | "static";
4
- export interface InputProps {
4
+ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
5
5
  label: string;
6
6
  icon?: React.ReactNode;
7
7
  iconPosition?: 'left' | 'right';
@@ -31,6 +31,7 @@ export interface InputProps {
31
31
  isActive?: boolean;
32
32
  style?: React.CSSProperties;
33
33
  readOnly?: boolean;
34
+ onClear?: () => void;
34
35
  }
35
- declare const _default: import('react').MemoExoticComponent<({ label, icon, iconPosition, onChange, value, debounceMs, name, width, height, variant, labelVariant, size, disabled, type, isFetching, errorComponent, helperComponent, placeholder, required, onFocus, onBlur, onEmptied, onKeyDown, onKeyUp, className, isActive, style, readOnly }: InputProps) => import("react/jsx-runtime").JSX.Element>;
36
+ declare const _default: import('react').NamedExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
36
37
  export default _default;
@@ -1,11 +1,6 @@
1
1
  import { ComponentType, JSX, default as React } from 'react';
2
- import { ComponentVariant, LabelVariant } from '../Shared/types';
2
+ import { ComponentVariant, LabelVariant, OptionAccessor } from '../Shared/types';
3
3
  export type SelectDisplayMode = "compact" | "chips";
4
- type PathValue<T, P extends string> = P extends keyof T ? T[P] : P extends `${infer K}.${infer Rest}` ? K extends keyof T ? PathValue<T[K], Rest> : never : never;
5
- type Paths<T> = T extends object ? {
6
- [K in keyof T & string]: T[K] extends object ? K | `${K}.${Paths<T[K]>}` : K;
7
- }[keyof T & string] : never;
8
- type OptionAccessor<T, R> = ((option: T) => R) | (Paths<T> extends infer P ? (P extends string ? (PathValue<T, P> extends R ? P : never) : never) : never);
9
4
  export type SelectOptionType = {
10
5
  label: string;
11
6
  value: string | number;
@@ -24,46 +19,68 @@ interface SelectOptionRendererProps<T = unknown> {
24
19
  onSelect: (option: SelectOptionType) => void;
25
20
  multiple: boolean;
26
21
  disabled?: boolean;
22
+ isLoading?: boolean;
27
23
  }
28
24
  export interface CustomSelectOptionRendererProps<T> extends SelectOptionRendererProps<T> {
29
25
  option: T;
30
26
  onSelect: () => void;
31
27
  disabled?: boolean;
28
+ isLoading?: boolean;
32
29
  }
33
30
  export type SelectVariant = "default" | "error" | "success";
31
+ export type SelectControlsHandler = {
32
+ open: () => void;
33
+ close: () => void;
34
+ toggle: () => void;
35
+ subscribeOpenChange: (cb: (open: boolean) => void) => () => void;
36
+ searchInputRef: React.RefObject<HTMLInputElement | null>;
37
+ };
38
+ export type SelectControlsRef = React.RefObject<SelectControlsHandler | null>;
39
+ export interface DropdownOptionsProps {
40
+ hideSearchBar?: boolean;
41
+ dropdownHeight?: string;
42
+ controledSearchValue?: string;
43
+ onSearchValueChange?: (value: string) => void;
44
+ onSearchClear?: () => void;
45
+ inputSearchPlaceholder?: string;
46
+ isLoading?: boolean;
47
+ }
34
48
  export interface SelectProps<T = unknown> {
49
+ id?: string;
50
+ name?: string;
35
51
  label: string;
36
- value: (string | number)[];
37
- isLoading?: boolean;
38
52
  options: T[];
39
- onOptionClick?: (option: SelectOptionType, name?: string) => void;
40
- onChange?: (newValue: SelectOptionType[], name?: string) => void;
41
- multiple?: boolean;
42
- onClear?: () => void;
43
- onClose?: () => void;
44
- className?: string;
45
- id?: string;
46
- emptyMessage?: string;
47
- optionValue: OptionAccessor<T, string | number>;
48
53
  optionLabel: OptionAccessor<T, string>;
54
+ optionValue: OptionAccessor<T, string | number>;
49
55
  renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
50
56
  renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
57
+ value: (string | number)[];
58
+ disabled?: boolean;
59
+ className?: string;
60
+ multiple?: boolean;
61
+ isLoading?: boolean;
62
+ emptyMessage?: string;
51
63
  placeholder?: string;
64
+ displayMode?: SelectDisplayMode;
65
+ errorComponent?: React.ReactNode;
66
+ helperComponent?: React.ReactNode;
67
+ variant?: ComponentVariant;
68
+ overflow?: 'wrap' | 'scroll';
52
69
  containerClassName?: string;
53
70
  buttonClassName?: string;
54
71
  dropdownClassName?: string;
55
- displayMode?: SelectDisplayMode;
56
- onRemoveOption?: (option: T) => void;
57
72
  width?: string;
58
73
  height?: string;
74
+ controls?: SelectControlsRef;
59
75
  labelVariant?: LabelVariant;
60
76
  attachToParent?: boolean;
61
- name?: string;
62
- overflow?: 'wrap' | 'scroll';
63
- errorComponent?: React.ReactNode;
64
- helperComponent?: React.ReactNode;
65
- disabled?: boolean;
66
- variant?: ComponentVariant;
77
+ disableOpenOnFocus?: boolean;
78
+ onClose?: () => void;
79
+ onClear?: () => void;
80
+ onRemoveOption?: (option: T) => void;
81
+ onChange?: (newValue: SelectOptionType[], name?: string) => void;
82
+ onOptionClick?: (option: SelectOptionType, name?: string) => void;
83
+ dropdownOptions?: DropdownOptionsProps;
67
84
  }
68
85
  declare const _default: <T>(props: SelectProps<T>) => JSX.Element;
69
86
  export default _default;
@@ -0,0 +1,71 @@
1
+ import { ComponentType, JSX, default as React } from 'react';
2
+ import { ComponentVariant, LabelVariant, OptionAccessor } from '../Shared/types';
3
+ export type SelectDisplayMode = "compact" | "chips";
4
+ export type SelectOptionType = {
5
+ label: string;
6
+ value: string | number;
7
+ id: string | number;
8
+ };
9
+ export type CustomSelectionDisplayProps<T> = {
10
+ selectedOptions: T[];
11
+ placeholder?: string;
12
+ multiple: boolean;
13
+ onRemoveOption: (optionId: string | number) => void;
14
+ disabled?: boolean;
15
+ };
16
+ interface SelectOptionRendererProps<T = unknown> {
17
+ option: SelectOptionType | T;
18
+ isSelected: boolean;
19
+ onSelect: (option: SelectOptionType) => void;
20
+ multiple: boolean;
21
+ disabled?: boolean;
22
+ }
23
+ export interface CustomSelectOptionRendererProps<T> extends SelectOptionRendererProps<T> {
24
+ option: T;
25
+ onSelect: () => void;
26
+ disabled?: boolean;
27
+ }
28
+ export type SelectVariant = "default" | "error" | "success";
29
+ export type SelectControlsHandler = {
30
+ open: () => void;
31
+ close: () => void;
32
+ toggle: () => void;
33
+ };
34
+ export type SelectControlsRef = React.RefObject<SelectControlsHandler | null>;
35
+ export interface SelectProps<T = unknown> {
36
+ label: string;
37
+ value: (string | number)[];
38
+ isLoading?: boolean;
39
+ options: T[];
40
+ onOptionClick?: (option: SelectOptionType, name?: string) => void;
41
+ onChange?: (newValue: SelectOptionType[], name?: string) => void;
42
+ multiple?: boolean;
43
+ onClear?: () => void;
44
+ onClose?: () => void;
45
+ className?: string;
46
+ id?: string;
47
+ emptyMessage?: string;
48
+ optionValue: OptionAccessor<T, string | number>;
49
+ optionLabel: OptionAccessor<T, string>;
50
+ renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
51
+ renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
52
+ placeholder?: string;
53
+ containerClassName?: string;
54
+ buttonClassName?: string;
55
+ dropdownClassName?: string;
56
+ displayMode?: SelectDisplayMode;
57
+ onRemoveOption?: (option: T) => void;
58
+ width?: string;
59
+ height?: string;
60
+ labelVariant?: LabelVariant;
61
+ attachToParent?: boolean;
62
+ name?: string;
63
+ overflow?: 'wrap' | 'scroll';
64
+ errorComponent?: React.ReactNode;
65
+ helperComponent?: React.ReactNode;
66
+ disabled?: boolean;
67
+ variant?: ComponentVariant;
68
+ controls?: SelectControlsRef;
69
+ }
70
+ declare const _default: <T>(props: SelectProps<T>) => JSX.Element;
71
+ export default _default;
@@ -0,0 +1,26 @@
1
+ import { ComponentType } from 'react';
2
+ import { CustomSelectionDisplayProps, CustomSelectOptionRendererProps, SelectProps } from '../Select/Select';
3
+ import { OptionAccessor } from '../Shared/types';
4
+ export interface SelectSearchProps<T> {
5
+ label?: string;
6
+ placeholder?: string;
7
+ name?: string;
8
+ multiple?: boolean;
9
+ options?: T[];
10
+ optionValue: OptionAccessor<T, string | number>;
11
+ optionLabel: OptionAccessor<T, string>;
12
+ fetcher?: (input?: string) => Promise<T[]>;
13
+ asyncMode?: 'fetch_in_open' | 'fetch_on_type';
14
+ debounceDelay?: number;
15
+ minCharacters?: number;
16
+ inputSearchPlaceholder?: string;
17
+ labelVariant?: 'static' | 'default';
18
+ disabled?: boolean;
19
+ renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
20
+ renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
21
+ selectComponentProps?: Partial<SelectProps<T>>;
22
+ value?: T[];
23
+ onChange?: (newValue: T[], name?: string) => void;
24
+ }
25
+ declare const SelectSearch: <T>(props: SelectSearchProps<T>) => import("react/jsx-runtime").JSX.Element;
26
+ export default SelectSearch;
@@ -6,9 +6,10 @@ type ChipProps = {
6
6
  className?: string;
7
7
  disabled?: boolean;
8
8
  variant?: ComponentVariant;
9
+ tabIndex?: number;
9
10
  };
10
11
  declare const _default: import('react').MemoExoticComponent<{
11
- ({ id, label, onRemove, className, disabled, variant }: ChipProps): import("react/jsx-runtime").JSX.Element;
12
+ ({ id, label, onRemove, className, disabled, variant, tabIndex }: ChipProps): import("react/jsx-runtime").JSX.Element;
12
13
  displayName: string;
13
14
  }>;
14
15
  export default _default;
@@ -0,0 +1 @@
1
+ export { default } from '../components/Autocomplete/Autocomplete';
@@ -0,0 +1 @@
1
+ export { default } from '../components/SelectSearch/SelectSearch';
package/dist/index.d.ts CHANGED
@@ -36,6 +36,7 @@ export { default as Image } from './components/Image/Image';
36
36
  export { default as Toast } from './components/Toaster/Toaster';
37
37
  export { default as ToastProvider } from './components/Toaster/ToastProvider';
38
38
  export { toastpyrion } from './components/Toaster/Toaster';
39
+ export { default as SelectSearch } from './components/SelectSearch/SelectSearch';
39
40
  export * from './components/Sidebar';
40
41
  export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
41
42
  export { Badge } from './components/Sidebar/components/badge';
@@ -97,4 +98,5 @@ export type { DrawerDesktopHandle } from './components/Drawer/DrawerDesktop';
97
98
  export type { CustomSelectionDisplayProps } from './components/Select/Select';
98
99
  export type { CustomSelectOptionRendererProps } from './components/Select/Select';
99
100
  export type { SelectOptionType } from './components/Select/Select';
101
+ export type { SelectSearchProps } from './components/SelectSearch/SelectSearch';
100
102
  export { Icons } from './Icons/Icons';