prometeo-design-system 2.6.2 → 2.6.4

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { S as f } from "./Select-IAQKEfnq.js";
+import { S as f } from "./Select-CSFKGhU7.js";
 export {
   f as default
 };

package/dist/SelectFormik.es.js

@@ -1,6 +1,6 @@
 import { j as d } from "./jsx-runtime-ByW6EXIE.js";
 import { useField as y } from "formik";
-import { S as m } from "./Select-IAQKEfnq.js";
+import { S as m } from "./Select-CSFKGhU7.js";
 import { useRef as p, useEffect as g } from "react";
 function f(e) {
   return Array.isArray(e) && e.every(

package/dist/SelectSearch.es.js

@@ -1,9 +1,9 @@
 import { j as G } from "./jsx-runtime-ByW6EXIE.js";
-import { g as i, S as H } from "./Select-IAQKEfnq.js";
-import { useState as w, useRef as T, useEffect as m, useMemo as Q, useCallback as X } from "react";
+import { g as i, S as H } from "./Select-CSFKGhU7.js";
+import { useState as w, useRef as T, useEffect as h, useMemo as Q, useCallback as X } from "react";
 function te(e) {
   const {
-    options: L,
+    options: p,
     fetcher: s,
     asyncMode: V = "fetch_in_open",
     disabled: x = !1,
@@ -11,32 +11,32 @@ function te(e) {
     minCharacters: S = 3,
     optionLabel: f,
     optionValue: u,
-    controlledValue: h,
+    controlledValue: m,
     isOpen: F,
     inputRef: R,
-    name: p
-  } = e || {}, [O, j] = w(L || []), [J, y] = w(L || []), [a, k] = w(""), [M, r] = w(!1), [C, b] = w(!1), g = T(null), D = T(null), N = T(!1), E = T(s), P = e?.multiple === !0 || !1, _ = T(P ? [] : void 0), [d, A] = w(P ? [] : void 0);
-  m(() => {
+    name: O
+  } = e || {}, [y, j] = w(p || []), [J, C] = w(p || []), [a, k] = w(""), [M, r] = w(!1), [v, b] = w(!1), g = T(null), D = T(null), N = T(!1), E = T(s), P = e?.multiple === !0 || !1, _ = T(P ? [] : void 0), [d, A] = w(P ? [] : void 0);
+  h(() => {
     E.current = s;
-  }, [s]), m(() => {
-    h !== void 0 && A(h);
-  }, [h]), m(() => {
-    _.current = h !== void 0 ? h : d;
-  }, [h, d]), m(() => {
-    e?.options && (j(e.options), y(e.options));
+  }, [s]), h(() => {
+    m !== void 0 && A(m);
+  }, [m]), h(() => {
+    _.current = m !== void 0 ? m : d;
+  }, [m, d]), h(() => {
+    e?.options && (j(e.options), C(e.options));
   }, [e?.options]);
   const U = Q(() => (t, n) => new Promise((o, l) => {
     g.current && clearTimeout(g.current), g.current = setTimeout(() => t(a).then(o).catch(l), n);
   }), [a]), Y = (t) => {
-    const n = h !== void 0, o = (l) => u ? i(l, u) : i(l, "id");
+    const n = m !== void 0, o = (l) => u ? i(l, u) : i(l, "id");
     if (e?.multiple === !0) {
       const l = _.current || [];
       let c;
-      l.some((v) => o(v) === o(t)) ? c = l.filter((v) => o(v) !== o(t)) : c = [...l, t], n ? (_.current = c, e?.onChange?.(c, p)) : (_.current = c, A(c), e?.onChange?.(c, p));
+      l.some((L) => o(L) === o(t)) ? c = l.filter((L) => o(L) !== o(t)) : c = [...l, t], n ? (_.current = c, e?.onChange?.(c, O)) : (_.current = c, A(c), e?.onChange?.(c, O));
     } else
-      n ? (_.current = t, e?.onChange?.(t, p)) : (_.current = t, A(t), e?.onChange?.(t, p));
+      n ? (_.current = t, e?.onChange?.(t, O)) : (_.current = t, A(t), e?.onChange?.(t, O));
   }, W = (t) => (e?.onFetchingStart?.(), E.current?.(t) || Promise.resolve([])), K = X((t, n) => t.length === 0 ? n : u ? n.filter((o) => !t.some((l) => i(l, u) === i(o, u))) : n.filter((o) => !t.some((l) => i(l, "id") === i(o, "id"))), [u]);
-  m(() => {
+  h(() => {
     const t = e?.subscribeOpenChange;
     if (!t) return;
     const n = t((o) => {
@@ -46,8 +46,8 @@ function te(e) {
       n && n();
     };
   }, [e?.subscribeOpenChange]);
-  const B = F !== void 0 ? F : C;
-  m(() => {
+  const B = F !== void 0 ? F : v;
+  h(() => {
     if (!x && E.current && V === "fetch_on_type") {
       if (!a || a === "" || a.length < S) {
         g.current && clearTimeout(g.current), r(!1);
@@ -60,7 +60,7 @@ function te(e) {
         r(!1), e?.onFetchingEnd?.();
       });
     }
-  }, [V, a, x, I, U, S]), m(() => {
+  }, [V, a, x, I, U, S]), h(() => {
     if (B) {
       if (e?.onOpen?.(), V === "fetch_in_open") {
         if (!E.current)
@@ -91,7 +91,7 @@ function te(e) {
     if (f)
       return i(n, f) < i(o, f) ? -1 : 1;
     {
-      const c = ["label", "name", "value"].find((v) => typeof n == "object" && Object.keys(n).includes(v));
+      const c = ["label", "name", "value"].find((L) => typeof n == "object" && Object.keys(n).includes(L));
       switch (typeof n) {
         case "string":
           return n < o ? -1 : 1;
@@ -99,8 +99,8 @@ function te(e) {
           return n < o ? -1 : 1;
         case "object":
           if (c) {
-            const v = i(n, c), ee = i(o, c);
-            return v < ee ? -1 : 1;
+            const L = i(n, c), ee = i(o, c);
+            return L < ee ? -1 : 1;
           } else
             return 1;
         default:
@@ -113,17 +113,17 @@ function te(e) {
       N.current = !1;
     }, I));
   };
-  return m(() => {
+  return h(() => {
     if (a === "")
-      y(Z(O));
+      C(Z(y));
     else if (P) {
-      const t = K(d, O);
-      y([...q(t, a), ...d]);
+      const t = K(d, y);
+      C([...q(t, a), ...d]);
     } else {
-      const t = K([d], O);
-      y([...q(t, a), d]);
+      const t = K([d], y);
+      C([...q(t, a), d]);
     }
-  }, [O]), m(() => (document.addEventListener("keydown", z), () => {
+  }, [y]), h(() => (document.addEventListener("keydown", z), () => {
     document.removeEventListener("keydown", z);
   }), []), {
     inputValue: a,
@@ -139,18 +139,22 @@ function te(e) {
   };
 }
 const ie = (e) => {
-  const L = T(null), { asyncMode: s = "fetch_in_open" } = e, V = (r, C, b) => {
+  const p = T(null);
+  h(() => {
+    e.controls && (e.controls.current = p.current);
+  }, [e.controls]);
+  const { asyncMode: s = "fetch_in_open" } = e, V = (r, v, b) => {
     const g = {
       options: r.options,
       fetcher: r.fetcher,
-      asyncMode: C,
+      asyncMode: v,
       debounceDelay: r.debounceDelay,
       minCharacters: r.minCharacters,
       disabled: r.disabled,
       optionValue: r.optionValue,
       optionLabel: r.optionLabel,
       onFetchingStart: () => {
-        C === "fetch_on_type" && b.current?.open();
+        v === "fetch_on_type" && b.current?.open();
       },
       onTypeStart: () => {
         !r?.fetcher && b.current?.open();
@@ -170,10 +174,10 @@ const ie = (e) => {
       controlledValue: r.value,
       onChange: r.onChange
     };
-  }, { inputValue: x, setInputValue: I, filteredOptions: S, isLoading: f, value: u, onOptionClick: h, cleanInputValue: F } = te(V(e, s, L)), R = X(() => s === "fetch_on_type" ? f : !1, [s, f]), p = Q(() => e.multiple ? u.map((r) => i(r, e.optionValue)) : u ? i(u, e.optionValue) : void 0, [u, e.optionValue, e.multiple]), O = (r) => {
-    const C = S.find((b) => i(b, e.optionValue) === r.id);
-    C && h(C);
-  }, { displayMode: j = e.multiple ? "chips" : "compact", dropdownOptions: J, overflow: y = "scroll", onChange: a, ...k } = e.selectComponentProps || {}, M = {
+  }, { inputValue: x, setInputValue: I, filteredOptions: S, isLoading: f, value: u, onOptionClick: m, cleanInputValue: F } = te(V(e, s, p)), R = X(() => s === "fetch_on_type" ? f : !1, [s, f]), O = Q(() => e.multiple ? u.map((r) => i(r, e.optionValue)) : u ? i(u, e.optionValue) : void 0, [u, e.optionValue, e.multiple]), y = (r) => {
+    const v = S.find((b) => i(b, e.optionValue) === r.id);
+    v && m(v);
+  }, { displayMode: j = e.multiple ? "chips" : "compact", dropdownOptions: J, overflow: C = "scroll", onChange: a, ...k } = e.selectComponentProps || {}, M = {
     controledSearchValue: x,
     onSearchValueChange: s === "fetch_on_type" ? I : void 0,
     onSearchClear: s === "fetch_on_type" ? F : void 0,
@@ -186,18 +190,18 @@ const ie = (e) => {
     {
       className: e.className,
       name: e.name,
-      overflow: y,
+      overflow: C,
       ...k,
       multiple: !0,
-      value: p,
+      value: O,
       label: e.label || "",
       options: S,
       optionValue: e.optionValue,
       optionLabel: e.optionLabel,
       renderOption: e.renderOption,
-      onOptionClick: O,
+      onOptionClick: y,
       displayMode: j,
-      controls: L,
+      controls: p,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: M,
       isLoading: s === "fetch_in_open" ? f : !1
@@ -207,18 +211,18 @@ const ie = (e) => {
     {
       ...k,
       className: e.className,
-      overflow: y,
+      overflow: C,
       name: e.name,
       multiple: !1,
-      value: p,
+      value: O,
       label: e.label || "",
       options: S,
       optionValue: e.optionValue,
       optionLabel: e.optionLabel,
       renderOption: e.renderOption,
-      onOptionClick: O,
+      onOptionClick: y,
       displayMode: "compact",
-      controls: L,
+      controls: p,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: M,
       isLoading: s === "fetch_in_open" ? f : !1

package/dist/components/Dialog/DialogV2.d.ts

@@ -0,0 +1,35 @@
+interface DialogProps<TContext = unknown> {
+    title?: string;
+    children: React.ReactNode | ((context: TContext | null) => React.ReactNode);
+    onClose?: (context: TContext | null) => void;
+    className?: string;
+}
+export interface DialogHandle<TContext = unknown> {
+    open: (context?: TContext) => void;
+    close: () => void;
+    isOpen: boolean;
+    getContext: () => TContext | null;
+}
+interface DialogContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DialogTitleProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DialogHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DialogFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const DialogModal: import('react').ForwardRefExoticComponent<DialogProps<any> & import('react').RefAttributes<DialogHandle<any>>> & {
+    Content: import('react').MemoExoticComponent<({ children, className }: DialogContentProps) => import("react/jsx-runtime").JSX.Element>;
+    Header: import('react').MemoExoticComponent<({ children, className }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+    Footer: import('react').MemoExoticComponent<({ children, className }: DialogFooterProps) => import("react/jsx-runtime").JSX.Element>;
+    Title: import('react').MemoExoticComponent<({ children, className }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export default DialogModal;

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, JSX, default as React } from 'react';
 import { ComponentVariant, LabelVariant, OptionAccessor } from '../Shared/types';
+import { InputProps } from '../Input/Input';
 export type SelectDisplayMode = "compact" | "chips";
 export type SelectOptionType = {
     label: string;
@@ -21,39 +22,45 @@ interface SelectOptionRendererProps<T = unknown> {
     disabled?: boolean;
     isLoading?: boolean;
 }
-export interface CustomSelectOptionRendererProps<T> extends SelectOptionRendererProps<T> {
+export interface CustomSelectOptionRendererProps<T, TContext = unknown> extends Omit<SelectOptionRendererProps<T>, 'onSelect'> {
     option: T;
-    onSelect: () => void;
+    onSelect: (closeOnSelect?: boolean) => void;
     disabled?: boolean;
     isLoading?: boolean;
+    renderContext?: TContext;
 }
 export type SelectVariant = "default" | "error" | "success";
 export type SelectControlsHandler = {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    handleOptionSelect: (option: SelectOptionType, closeOnSelect: boolean) => void;
     subscribeOpenChange: (cb: (open: boolean) => void) => () => void;
     searchInputRef: React.RefObject<HTMLInputElement | null>;
 };
 export type SelectControlsRef = React.RefObject<SelectControlsHandler | null>;
 export interface DropdownOptionsProps {
     hideSearchBar?: boolean;
+    inputProps?: Partial<InputProps>;
     dropdownHeight?: string;
     controledSearchValue?: string;
     onSearchValueChange?: (value: string) => void;
     onSearchClear?: () => void;
     inputSearchPlaceholder?: string;
     isLoading?: boolean;
+    footer?: React.ReactNode;
+    loadingComponent?: React.ReactNode;
 }
-export interface BaseSelectProps<T> {
+export interface BaseSelectProps<T, TContext = unknown> {
     id?: string;
     name?: string;
     label: string;
     options: T[];
     optionLabel: OptionAccessor<T, string>;
     optionValue: OptionAccessor<T, string | number>;
-    renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
+    renderOption?: ComponentType<CustomSelectOptionRendererProps<T, TContext>>;
     renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
+    renderOptionContext?: TContext;
     disabled?: boolean;
     className?: string;
     isLoading?: boolean;
@@ -78,21 +85,21 @@ export interface BaseSelectProps<T> {
     onOptionClick?: (option: SelectOptionType, name?: string) => void;
     dropdownOptions?: DropdownOptionsProps;
 }
-export interface MultipleSelectProps<T> extends BaseSelectProps<T> {
+export interface MultipleSelectProps<T, TContext = unknown> extends BaseSelectProps<T, TContext> {
     multiple: true;
     value: (string | number)[];
     onChange?: (newValue: SelectOptionType[], name?: string) => void;
     displayMode?: 'compact' | 'chips';
 }
-export interface SingleSelectProps<T> extends BaseSelectProps<T> {
+export interface SingleSelectProps<T, TContext = unknown> extends BaseSelectProps<T, TContext> {
     multiple?: false;
     value: string | number | undefined;
     onChange?: (newValue: SelectOptionType | undefined, name?: string) => void;
     displayMode?: 'compact';
 }
-export type SelectProps<T = unknown> = MultipleSelectProps<T> | SingleSelectProps<T>;
+export type SelectProps<T = unknown, TContext = unknown> = MultipleSelectProps<T, TContext> | SingleSelectProps<T, TContext>;
 declare const SelectWithOverloads: {
-    <T>(props: MultipleSelectProps<T>): JSX.Element;
-    <T>(props: SingleSelectProps<T>): JSX.Element;
+    <T, TContext = unknown>(props: MultipleSelectProps<T, TContext>): JSX.Element;
+    <T, TContext = unknown>(props: SingleSelectProps<T, TContext>): JSX.Element;
 };
 export default SelectWithOverloads;

package/dist/components/SelectSearch/SelectSearch.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { CustomSelectionDisplayProps, CustomSelectOptionRendererProps, SelectProps } from '../Select/Select';
+import { CustomSelectionDisplayProps, CustomSelectOptionRendererProps, SelectControlsHandler, SelectProps } from '../Select/Select';
 import { OptionAccessor } from '../Shared/types';
 interface SimpleSelectSearchProps<T> extends BaseSelectSearchProps<T> {
     multiple?: false;
@@ -28,7 +28,8 @@ export interface BaseSelectSearchProps<T> {
     className?: string;
     renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
     renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
-    selectComponentProps?: Partial<SelectProps<T>>;
+    controls?: React.RefObject<SelectControlsHandler | null>;
+    selectComponentProps?: Partial<Omit<SelectProps<T>, 'controls'>>;
 }
 export type SelectSearchProps<T> = SimpleSelectSearchProps<T> | MultipleSelectSearchProps<T>;
 declare const SelectSearch: <T>(props: SelectSearchProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -101,6 +101,7 @@ export type { DrawerMobileHandle } from './components/Drawer/DrawerMobile';
 export type { DrawerDesktopHandle } from './components/Drawer/DrawerDesktop';
 export type { CustomSelectionDisplayProps } from './components/Select/Select';
 export type { CustomSelectOptionRendererProps } from './components/Select/Select';
+export type { SelectControlsHandler } from './components/Select/Select';
 export type { SelectOptionType } from './components/Select/Select';
 export type { BaseSelectSearchProps as SelectSearchProps } from './components/SelectSearch/SelectSearch';
 export type { FAButtonProps } from './components/FAB/FAButton';

package/dist/pages/DialogPage.d.ts

@@ -0,0 +1,2 @@
+declare const DialogPage: () => import("react/jsx-runtime").JSX.Element;
+export default DialogPage;

package/dist/preview/DialogModalPreview.d.ts

@@ -0,0 +1,2 @@
+declare const DialogModalPreview: () => import("react/jsx-runtime").JSX.Element;
+export default DialogModalPreview;

package/dist/preview/SelectPreview/CustomFooterExample.d.ts

@@ -0,0 +1,2 @@
+declare const CustomFooterExample: () => import("react/jsx-runtime").JSX.Element;
+export default CustomFooterExample;