@apia/components 0.0.7 → 0.1.0

package/dist/index.d.ts

@@ -1,133 +1,77 @@
-import { TRequireOnlyOne, TModify } from '@apia/util';
-import { IconType } from '@meronex/icons/lib';
-import * as React from 'react';
-import React__default, { ChangeEventHandler, FC } from 'react';
-import { IconButtonProps, ButtonProps, InputProps, ThemeUICSSObject, BoxProps } from 'theme-ui';
-import { TIconName } from '@apia/icons';
-import { IconType as IconType$1 } from '@meronex/icons';
+import { TApiaFilter, TApiaFilterValue, TModify, IOnFocusConfiguration, TFocusRetriever, EventEmitter, TId } from '@apia/util';
+import * as React$1 from 'react';
+import React__default, { ChangeEventHandler, FC, ReactNode, MouseEvent, KeyboardEvent, FunctionComponent, ForwardedRef, RefObject } from 'react';
+import { TIconType, TIconName } from '@apia/icons';
 import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+import { ThemeUIStyleObject, IconButtonProps, ButtonProps, InputProps, ThemeUICSSObject, BoxProps } from 'theme-ui';
 import { Args } from 'react-cool-portal';
 
-interface IFocusProps {
-    modalsContainerRetriever?: () => HTMLElement;
-    notificationsContainerRetriever?: () => HTMLElement;
+interface IApiaFilter {
+    filter: TApiaFilter;
+    onBlur?: (ev: TApiaFilterValue) => void;
+    onChange?: (ev: TApiaFilterValue) => void | boolean | string | Promise<boolean | string>;
+    onPressEnter?: (ev: TApiaFilterValue) => void;
 }
-interface IOnFocusConfiguration {
-    /**
-     * El controlador emite un evento custom cuando se realiza foco, con la
-     * intención de que los elementos colapsables se abran automáticamente. Si
-     * este parámetro es pasado con false, se evita ese comportamiento.
-     */
-    dispatchCustomEvent?: boolean;
-    /**
-     * Cuando la pantalla está bloqueada con el spinner, el controlador no
-     * intentará hacer foco, a menos que este parámetro se pase en true.
-     */
-    focusEvenWhenScreenLocked?: boolean;
-    scrollIntoViewOptions?: ScrollIntoViewOptions;
+declare const ApiaFilter: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<IApiaFilter & React$1.RefAttributes<HTMLInputElement | HTMLSelectElement>>>;
+
+interface ICollapsiblePanel {
+    children: React.ReactNode;
+    className?: string;
+    closedIcon?: TIconType | TIconName;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    disableChildrenFocus?: boolean;
+    iconSize?: string | number;
+    id?: string;
+    minHeight?: number;
+    onClose?: () => unknown;
+    onOpen?: (ev?: React.MouseEvent) => void | Promise<boolean>;
+    openIcon?: TIconType | TIconName;
+    label: React.ReactNode;
+    titleButtons?: React.ReactNode;
+}
+
+declare const CollapsiblePanel: React__default.ForwardRefExoticComponent<ICollapsiblePanel & React__default.RefAttributes<HTMLDivElement>>;
+
+type TModalSize = 'editGrid' | 'sm' | 'md' | 'md-fixed' | 'lg' | 'lg-fixed' | 'xl' | 'xl-fixed' | 'xxl' | 'xxxl' | 'xxxl-fixed' | 'flex' | 'cal' | 'finder';
+type TApiaButtonType = 'primary' | 'primary-sm' | 'secondary' | 'light-secondary' | 'secondary-sm' | 'danger' | 'danger-sm' | 'outline' | 'outline-sm' | 'warning' | 'warning-sm' | 'link';
+
+interface IBaseButton {
+    text?: string;
+    children?: string;
+    loadingChildren?: string;
+    id?: string;
+    name?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    isLoading?: boolean;
+    disabled?: boolean;
+    variant?: TApiaButtonType | string;
+    type?: 'button' | 'submit' | 'reset';
+    SXProps?: ThemeUIStyleObject;
 }
 /**
- * Al método focus.on se le puede pasar o bien un HTMLElement o bien una
- * función que implemente esta interfaz. Cuando se pasa una función, la misma
- * será invocada cada vez que se vaya a intentar una acción de foco.
- *
- * Si la función devuelve un elemento HTML, se intentará hacer foco sobre éste.
- *
- * Si la función devuelve null, ese intento será tomado como nulo y se volverá
- * a intentar luego del tiempo determinado.
- *
- * Si la función devuelve false, será eliminada de la cola de foco, lo que
- * significa que ya no se intentará hacer foco sobre este elemento. En cambio,
- * se continuará con los demás elementos de la cola o en caso de no haber
- * ninguno, con el último elemento que tuvo foco y aún esté presente en el
- * documento.
+ * The world's most **basic** button
  */
-type TFocusRetriever = (isLastTry: boolean) => HTMLElement | null | false;
-interface IFocusQueryElement {
-    element: HTMLElement | TFocusRetriever;
-    configuration?: IOnFocusConfiguration;
-}
-declare global {
-    interface Window {
-        focusStatus: Record<string, unknown>;
-    }
-}
-interface IFocusCheck {
-    currentInstruction: number;
-}
-declare const focus: {
-    root: HTMLElement;
-    props?: IFocusProps;
-    afterNotificationFocus: IFocusQueryElement | undefined;
-    "__#5@#actualFocusQuery": IFocusQueryElement[];
-    "__#5@#currentInstruction": number;
-    "__#5@#focusDelay": number;
-    "__#5@#focusRetries": number;
-    "__#5@#focusTimeout": number;
-    "__#5@#isIntervalRunning": boolean;
-    "__#5@#focusQuery": IFocusQueryElement[];
-    "__#5@#checkInstruction"(focusCheck: IFocusCheck): boolean;
-    "__#5@#doFocus"(HTMLElement: HTMLElement | TFocusRetriever, focusCheck: IFocusCheck, isLastTry: boolean, configuration?: IOnFocusConfiguration): Promise<false | HTMLElement | null>;
-    "__#5@#resetInterval"(): void;
-    "__#5@#runFocusInterval"(focusElement?: IFocusQueryElement, internalCall?: boolean): Promise<false | HTMLElement>;
-    /**
-     * Da la instrucción de colocar el foco en el elemento provisto como
-     * parámetro una vez que todas las notificaciones se hayan cerrado. En caso
-     * de no existir notificaciones abiertas, hace foco en el elemento
-     * directamente.
-     */
-    afterNotifications(element: HTMLElement | TFocusRetriever, configuration?: IOnFocusConfiguration): void;
-    /**
-     * Da la instrucción de colocar el foco en el elemento provisto como
-     * parámetro luego de recargar la página.
-     *
-     * Los parámetros pasados serán ordenados en orden de importancia priorizando
-     * en el siguiente orden:
-     * - id
-     * - name
-     * - className
-     * - selector
-     */
-    afterReload({ className, id, name, selector, }: TRequireOnlyOne<{
-        className: string;
-        id: string;
-        name: string;
-        selector: string;
-    }, "className" | "id" | "name" | "selector">): void;
-    /**
-     * Da la instrucción de colocar el foco el elemento pasado como parámetro.
-     * Se puede pasar también una función que devuelva HTMLElement | false | null.
-     *
-     * El segundo parámetro del método on es un objeto de tipo
-     * ScrollIntoViewOptions, que permite modificar el comportamiento del scroll
-     * a en el elemento.
-     *
-     * @see TFocusRetriever para más detalles sobre la función como parámetro.
-     */
-    on(element: HTMLElement | TFocusRetriever, configuration?: IOnFocusConfiguration): Promise<false | HTMLElement>;
-    focusOnReload: string | null;
-    restore(): void;
-    init(): void;
-};
+declare const BaseButton: ({ id, name, onClick, isLoading, loadingChildren, disabled, children, text, variant, type, SXProps, ...buttonProps }: IBaseButton) => theme_ui_jsx_runtime.JSX.Element;
 
 type TIconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type TApiaIconButton = 'icon' | 'icon-primary' | 'icon-outline' | 'icon-only';
-type TIconButton = IconButtonProps & React.AriaAttributes & {
+type TIconButton = IconButtonProps & React$1.AriaAttributes & {
     className?: string;
     /**
      * Es posible pasar explícitamente un ícono o el nombre del ícono de
      * acuerdo a la librería de la aplicación. Ver Icon.tsx
      */
-    icon: IconType | TIconName;
+    icon: TIconType | TIconName;
     iconSize?: TIconSize;
     id?: string;
     disabled?: boolean;
     href?: string;
     isLoading?: boolean;
     isToggled?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onMouseOut?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onMouseOver?: React$1.MouseEventHandler<HTMLButtonElement>;
     size?: TIconSize;
     title?: string;
     variant?: string;
@@ -139,20 +83,53 @@ type TIconButton = IconButtonProps & React.AriaAttributes & {
  *
  * Si se pasa solamente size, el iconSize será
  */
-declare const IconButton: React.ForwardRefExoticComponent<Omit<TIconButton, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<TIconButton, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface ISimpleButton extends ButtonProps {
-    icon?: IconType$1;
+    icon?: TIconType;
+    iconColor?: string;
     iconPosition?: 'left' | 'right';
     iconSize?: number;
     isLoading?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
     size?: 'sm' | 'md' | 'lg';
     variant?: string;
     spinnerSize?: number;
     type?: 'button' | 'submit' | 'reset';
 }
-declare const SimpleButton: React.ForwardRefExoticComponent<Omit<ISimpleButton, "ref"> & React.RefAttributes<unknown>>;
+declare const SimpleButton: React$1.ForwardRefExoticComponent<Omit<ISimpleButton, "ref"> & React$1.RefAttributes<unknown>>;
+
+/**
+ * Este hook está pensado para crear un botón utilizando un tag cualquiera.
+ *
+ * @example
+ *
+ * const buttonProps = useOtherTagButton(React.useMemo(()=>({
+ *   onClick(ev) { console.log(ev.target) },
+ *   onKeyDown(ev) { console.log(ev.code) }
+ * }),[])
+ *
+ * return <div {...buttonProps}>Esto es un botón</div>
+ */
+declare function useOtherTagButton(props?: Partial<{
+    className?: string;
+    onClick: React__default.MouseEventHandler;
+    onKeyDown: React__default.KeyboardEventHandler;
+}>): {
+    className: string;
+    onClick: (ev: React__default.MouseEvent) => void;
+    onKeyDown: (ev: React__default.KeyboardEvent) => void;
+    role: string;
+    tabIndex: number;
+};
+
+declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
+    name: string;
+    className?: string | undefined;
+    imageUrl: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    value: string;
+}) => theme_ui_jsx_runtime.JSX.Element;
 
 type TCheckbox = TModify<ButtonProps, {
     background?: string;
@@ -166,7 +143,7 @@ type TCheckbox = TModify<ButtonProps, {
     required?: boolean;
     type?: string;
 }>;
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<TCheckbox, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<TCheckbox, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface IField {
     className?: string;
@@ -179,7 +156,7 @@ interface IIconInput extends IField {
     buttonProps?: Partial<React__default.ComponentProps<typeof IconButton>>;
     buttonRef?: React__default.RefObject<HTMLButtonElement>;
     hideButton?: boolean;
-    icon?: IconType$1;
+    icon?: TIconType | TIconName;
     inputProps?: Partial<InputProps>;
     inputRef?: React__default.RefObject<HTMLInputElement>;
     mask?: string;
@@ -219,7 +196,7 @@ type TDateProps = TModify<InputProps, {
 declare const DateInput: React__default.ForwardRefExoticComponent<Omit<TDateProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 interface IFieldErrorMessage {
-    children: React.ReactNode | string;
+    children: React$1.ReactNode | string;
     name?: string;
 }
 declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => theme_ui_jsx_runtime.JSX.Element | null;
@@ -260,6 +237,105 @@ declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, }: IRequi
 declare const getFieldErrorStyles: (isValid: boolean) => ThemeUICSSObject;
 declare const getFieldTouchedStyles: (isTouched: boolean) => ThemeUICSSObject;
 
+type TListboxItem = {
+    children: ReactNode;
+    rowIndex?: number;
+} & BoxProps & {
+    /**
+     * El label se usa en aria-label por motivos de accesibilidad y además en
+     * la funcionalidad de búsqueda.
+     */
+    label: string;
+};
+declare const ListboxItem: FC<TListboxItem>;
+
+type TListboxState = {
+    /**
+     * El múltipleSearch está de acuerdo a la especificación de wai-aria. Está
+     * habilitado por defecto e implica que si el usuario presiona una "rápida
+     * sucesión" (según palabras de wai-aria) de caracteres, se irá
+     * alternando el foco entre los elementos que comiencen con la cadena
+     * introducida.
+     */
+    allowMultipleCharacterSearch?: boolean;
+    allowSelection: boolean;
+    /**
+     * El singleCharacterSearch está de acuerdo a la especificación de wai-aria.
+     * Está habilitado por defecto e implica que si el usuario presiona una
+     * "lenta sucesión" (según palabras de wai-aria) de caracteres, se irá
+     * alternando el foco entre los elementos que comiencen con la letra
+     * introducida.
+     */
+    allowSingleCharacterSearch?: boolean;
+    focusedRow: number;
+    hiddenRows: number[];
+    id: string;
+    isEverythingSelected: boolean;
+    isMultipleSelection: boolean;
+    lastSelectedRow: number;
+    rowsCount: number;
+    /**
+     * La función de búsqueda debe tomar el label de un campo y el texto
+     * introducido en el campo de búsqueda y determinar si el mismo debe ser
+     * mostrado o no. Por defecto, se usa una función de matcheo estricto.
+     */
+    searchFunction: (label: string, searchString: string) => boolean;
+    selectedRows: number[];
+    shownRows: number[];
+    showSearchbox: boolean;
+    /**
+     * Este método permite determinar si un elemento comienza con una cadena de
+     * texto en particular. Por defecto se usa String.startsWith, sin embargo se
+     * permite el pasaje de este método para situaciones particulares, ejemplo
+     * si se deseara incluir elementos sin tomar en cuenta los espacios.
+     */
+    startsWithFunction: (label: string, searchString: string) => boolean;
+    typing: string | null;
+};
+
+type TListbox = {
+    children: ReactNode | ReactNode[];
+    className?: string;
+    /**
+     * Permite remover los estilos por defecto de la lista a fin de personalizar
+     * su aspecto
+     */
+    unstyled?: boolean;
+    onClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;
+    onDoubleClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;
+    /**
+     * Este evento es lanzado cuando el usuario estando en foco en la lista
+     * presiona:
+     *
+     * - Enter si la selección múltiple está deshabilitada
+     * - ctrl+Enter si la selección múltiple está habilitada
+     */
+    onConfirmSelection?: (ev: TOnConfirmSelection) => unknown;
+    onPressEnterOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onPressKeyOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onSelectionChange?: (ev: TOnSelectionChange) => unknown;
+    /**
+     * onKeyDown e id no son permitidas dado que se usan para generar el
+     * comportamiento correcto del componente
+     */
+    ulProps?: Omit<BoxProps, 'id' | 'onKeyDown'>;
+} & Partial<Pick<TListboxState, 'allowMultipleCharacterSearch' | 'allowSelection' | 'allowSingleCharacterSearch' | 'isMultipleSelection' | 'searchFunction' | 'startsWithFunction' | 'showSearchbox'>>;
+
+type TOnConfirmSelection = {
+    originalEvent: KeyboardEvent;
+    selectedElements: HTMLElement[];
+    focusedElement: HTMLElement;
+};
+type TOnSelectionChange = {
+    focusedElement: HTMLElement;
+    selectedElements: HTMLElement[];
+};
+type TOnClickNode = MouseEvent;
+
+declare const Listbox: React$1.MemoExoticComponent<((props: TListbox) => theme_ui_jsx_runtime.JSX.Element) & {
+    displayName: string;
+}>;
+
 declare const LinearLoader: () => theme_ui_jsx_runtime.JSX.Element;
 
 interface IProgressBar {
@@ -269,9 +345,6 @@ interface IProgressBar {
 }
 declare const ProgressBar: FC<IProgressBar>;
 
-type TModalSize = 'editGrid' | 'sm' | 'md' | 'md-fixed' | 'lg' | 'lg-fixed' | 'xl' | 'xl-fixed' | 'xxl' | 'xxxl' | 'xxxl-fixed' | 'flex' | 'cal' | 'finder';
-type TApiaButtonType = 'primary' | 'primary-sm' | 'secondary' | 'light-secondary' | 'secondary-sm' | 'danger' | 'danger-sm' | 'outline' | 'outline-sm' | 'warning' | 'warning-sm' | 'link';
-
 interface IDialogHeader {
     className?: string;
     close: () => void;
@@ -524,20 +597,20 @@ declare function useModal(configuration?: TUseModalConfiguration): {
 
 declare function getConfirmButton(ref: HTMLElement): HTMLElement;
 interface IConfirm {
-    additionalButtons?: React.ReactNode;
-    additionalButtonsOnRight?: React.ReactNode;
+    additionalButtons?: React$1.ReactNode;
+    additionalButtonsOnRight?: React$1.ReactNode;
     cancelButtonText?: string;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
     confirmButtonText?: string;
     confirmButtonVariant?: TApiaButtonType;
-    contentRef?: React.Ref<HTMLDivElement>;
+    contentRef?: React$1.Ref<HTMLDivElement>;
     disabled?: boolean;
     hideCancelButton?: boolean;
     hideConfirmButton?: boolean;
     isLoading?: boolean;
-    onConfirm?: (ev: React.MouseEvent) => unknown;
-    onCancel?: (ev: React.MouseEvent) => unknown;
+    onConfirm?: (ev: React$1.MouseEvent) => unknown;
+    onCancel?: (ev: React$1.MouseEvent) => unknown;
     variant?: string;
 }
 declare global {
@@ -545,18 +618,18 @@ declare global {
         [key: string]: string;
     }
 }
-declare const Confirm: React.FC<IConfirm>;
+declare const Confirm: React$1.FC<IConfirm>;
 
 interface IDialogButtonBar {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
 }
-declare const DialogButtonBar: React.FC<IDialogButtonBar>;
+declare const DialogButtonBar: React$1.FC<IDialogButtonBar>;
 
 interface IOverlay extends BoxProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
-    onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onOverlayClicked: (event: React$1.MouseEvent<HTMLDivElement>) => void;
     /**
      * Permite pasar un callback que será llamado una vez que el overlay termine
      * de cerrarse.
@@ -567,157 +640,298 @@ interface IOverlay extends BoxProps {
     stretch?: boolean;
     transitionDuration?: number;
 }
-declare const Overlay: React.ForwardRefExoticComponent<IOverlay & React.RefAttributes<unknown>>;
-
-declare const lockController: {
-    "__#1@#private": any;
-    on<K extends "lockLinear" | "lock" | "forceLock" | "forceUnlock" | "forceWhiteScreen" | "unlock">(eventName: K, fn: (params: {
-        forceLock: null;
-        forceUnlock: null;
-        forceWhiteScreen: null;
-        lock: null;
-        unlock: null;
-        lockLinear: null;
-    }[K]) => unknown): () => void;
-    off<K_1 extends "lockLinear" | "lock" | "forceLock" | "forceUnlock" | "forceWhiteScreen" | "unlock">(eventName: K_1, fn: (params: {
-        forceLock: null;
-        forceUnlock: null;
-        forceWhiteScreen: null;
-        lock: null;
-        unlock: null;
-        lockLinear: null;
-    }[K_1]) => unknown): void;
-    emit<K_2 extends "lockLinear" | "lock" | "forceLock" | "forceUnlock" | "forceWhiteScreen" | "unlock">(eventName: K_2, params?: {
-        forceLock: null;
-        forceUnlock: null;
-        forceWhiteScreen: null;
-        lock: null;
-        unlock: null;
-        lockLinear: null;
-    }[K_2] | undefined): void;
-};
-/**
- * There it exists a hook which handles much better the lock process than this
- * method, which is only intended to use outside React components. Please, if
- * you will call the lock function within a component:
- *
- * @see useScreenLock
- *
- * The lockScreen method will add 1 to a counter, which tells the locking screen
- * how much components expect the screen to be locked. The only way the screen
- * is unlocked, is that this counter is exactly 0 and that there is no component
- * forcing the lock.
- *
- * @see forceScreenLock
- *
- * @returns A method which can be used to be sure that the unlocking process will be only made one time, which ensures that any component will interfere with the locking fired by other components.
- *
- * @example
- *
- * const unlock = lockScreen();
- *
- * // Make some heavy stuff
- *
- * // The unlock method is being called 3 times, but the unlock process is executed once.
- * unlock();
- * unlock();
- * unlock();
- */
-declare function lockScreen(linear?: boolean): () => void;
+declare const Overlay: React$1.ForwardRefExoticComponent<IOverlay & React$1.RefAttributes<unknown>>;
+
 /**
- * This method is the counterpart of lockScreen and must (preferably) not be
- * used, use the useScreenLock hook or the method returned from lockScreen in
- * order to avoid interfering with other components locking process.
- *
- * @see lockScreen
- * @see useScreenLock
+ * Implementación de la clase screenLocker que maneja tres tipos de bloqueo:
+ * common, linear, y white. El caso del forced lo trata como common.
  */
-declare function unlockScreen(): void;
+declare const ScreenLock: () => theme_ui_jsx_runtime.JSX.Element | null;
+
+interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
+    breakPoints: number[];
+    Component: FunctionComponent<P & {
+        breakPoint: number;
+        breakPointWidth: number;
+        containerWidth: number;
+    }>;
+    /**
+     * Este HOC hace un setState cada vez que cambia el ancho del contenedor. Hay
+     * situaciones en las que es deseable agregar un debounce a este
+     * comportamiento para mejorar la performance. *Por defecto usa 100*
+     */
+    debounce?: number;
+    /**
+     * Por defecto usa 4.
+     */
+    defaultBreakpoint?: number;
+}
 /**
- * This method is very determinant: the screen will be locked no matter what is
- * happening with other components. To do that, a flag is raised telling the
- * screen lock component: lock the screen.
- *
- * This flag can only be lowered by calling forceUnlockScreen
- *
- * @see releaseScreenLock
+ * El método makeResponsiveComponent agrega un wrapper alrededor de un
+ * componente para conocer el ancho del contenedor del mismo. De esta forma, es
+ * fácil predecir qué ancho dispone el mismo para renderizarse y de esa forma
+ * poder tomar decisiones de responsividad que no dependen del ancho de la
+ * pantalla sino del espacio donde se encuentra.
  */
-declare function forceScreenLock(): void;
+declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, debounce, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => (props: P & {
+    breakPoints?: number[] | undefined;
+    defaultBreakPoint?: number | undefined;
+}) => theme_ui_jsx_runtime.JSX.Element;
+
 /**
- * This method is very determinant: the screen will be locked no matter what is
- * happening with other components. To do that, a flag is raised telling the
- * screen lock component: lock the screen.
+ * Type-ahead is a behavior pattern which helps the user in the lists and trees
+ * (and literally says: "especially those with more than seven options")
+ * navigation. The literal description in Wai-Aria documentation is:
  *
- * This flag can only be lowered by calling forceUnlockScreen
+ * - Type a character: focus moves to the next item with a name that starts
+ * with the typed character.
  *
- * @see releaseScreenLock
- */
-declare function forceWhiteScreen(): void;
-/**
- * This method is the counterpart of forceLockScreen. If the screen is being
- * forced to be locked, this method will release it to allow the screen locking
- * process to behave normally.
+ * - Type multiple characters in rapid succession:
+ * focus moves to the next item with a name that starts with the string of
+ * characters typed.
  *
- * @see forceScreenLock
- */
-declare function releaseScreenLock(): void;
-/**
- * This hook is the ideal way to control the screen locking process, it
- * guarantees that the screen will only be unlocked by the component which
- * is using it if it has locked it previously. This way the behavior will be
- * persistent with what the components expect to happen when they call lock or
- * unlock screen.
+ * It is a little arbitrary what is rapid succession. As I couln't find any
+ * documentation about what rapid succession means, I will make some tests in
+ * order to determine what is more comfortable to accomplish one situation or
+ * the other.
  *
- * @returns an object containing { lockScreen, unlockScreen } methods that are
- * explained by their names.
+ * To callibrate this function it is suficient to override the frequency
+ * parameter, which after some tests I understand is best at 2.5 (keys per
+ * second).
  */
-declare function useScreenLock(): {
-    lockScreen: () => void;
-    unlockScreen: () => void;
+
+declare class WaiTypeAhead extends EventEmitter<{
+    multipleKeys: string;
+    singleKey: string;
+    typeUpdate: string;
+}> {
+    #private;
+    frequency: number;
+    timeout: number;
+    typing: string;
+    constructor(props?: {
+        onMultipleKeys?: (value: string) => unknown;
+        onSingleKey?: (value: string) => unknown;
+        onTypeUpdate?: (value: string) => unknown;
+    });
+    type(ev: KeyboardEvent): void;
+}
+
+type TIcon<P = Record<string, unknown>> = {
+    /**
+     * Permite el pasaje de propoiedades arbitrarias a cada nodo. Se podría usar
+     * por ejemplo para almacenar la url que debe ser llamada cuando se hace doble
+     * click en un ícono.
+     */
+    additionalProps?: P;
+    /**
+     * Se pide un ariaLabel como requerido por motivos de accesibilidad.
+     */
+    ariaLabel: string;
+    /**
+     * Permite el pasaje de clases arbitrarias a cada ícono.
+     */
+    className?: string;
+    id: TId;
+    imageUrl: string;
+    /**
+     * Es el texto que se mostrará debajo de la imagen.
+     */
+    label: string;
+    /**
+     * Permite modificar el color individual de un ícono.
+     */
+    textColor?: string;
 };
-declare function isCurrentlyLocked(): boolean;
-/**
- * **DO NOT USE THIS COMPONENT**
- *
- * This component is not intended to be used by any component more than the
- * BaseApp. If you are looking for a suspense screen to use with a lazy
- * component, please refer to ScreenLockSuspense.
- *
- * **DO NOT USE THIS COMPONENT**
- *
- * @see ScreenLockSuspense
- *
- * **DO NOT USE THIS COMPONENT**
- */
-declare const ScreenLock: () => theme_ui_jsx_runtime.JSX.Element | null;
-interface IReadyTools {
+type TIconsList<P = Record<string, unknown>> = {
     /**
-     * Con este método se libera el bloqueo de la pantalla,
-     * y es pasado como parámetro de la función onScreenLockReady
-     * solamente cuando la pantalla está lista para ser
-     * desbloqueada.
+     * Listado de íconos
      */
-    releaseScreenLock: () => void;
-}
-type TReadyCb = (tools: IReadyTools) => void;
-/**
- * Permite agendar un callback para que sea ejecutado cuando
- * la pantalla esté lista para ser desbloqueada. Este callback
- * será llamado con un método como parámetro que ejecuta el
- * desbloqueo.
- *
- * Si la pantalla ya está lista para ser desbloqueada cuando se
- * registre el callback, éste sera llamado inmediatamente.
- */
-declare function onScreenLockReady(cb: TReadyCb): void;
+    icons: TIcon<P>[];
+    iconRenderer?: TIconRenderer;
+    /**
+     * Por defecto se usa iconWidth=100.
+     *
+     * El iconSize indica el ancho del contenedor del ícono.
+     */
+    iconWidth?: number;
+    /**
+     * Si bien el gap horizontal es calculado automáticamente, es posible
+     * especificar cuál es el mínimo gap que debe mostrarse. *Por defecto se usará
+     * 30*
+     */
+    minHorizontalGap?: number;
+    /**
+     * Este callback es llamado cuando se hace click en un ícono
+     */
+    onIconClick?: (ev: MouseEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este callback es llamado cuando se hace doble click en un ícono
+     */
+    onIconDoubleClick?: (ev: MouseEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este método se usa para obtener detalles de un ícono. Es llamado cuando se
+     * hace foco o cuando se posiciona el mouse en un ícono. Si no está declarado
+     * los íconos no mostrarán detalles. Si está declarado deberá devolver un
+     *
+     * Record<string, ReactNode> y cada entrada será mostrada como una fila de
+     * detalle.
+     */
+    onIconGetDetails?: (icon: TIcon<P>) => ReactNode;
+    /**
+     * Permite agregar comportamiento personalizado a los eventos de teclado.
+     */
+    onIconKeyDown?: (ev: KeyboardEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Normalmente el listado coloca padding horizontal para distribuir
+     * uniformemente los íconos, de forma que la distancia entre ellos sea la
+     * misma que la existente en la izquierda y derecha. Si se pasa esta
+     * propiedad, el primer y úlitmo ícono estarán colocados sobre los bordes y el
+     * espacio restante se distribuirá entre los gaps existnetes
+     */
+    removeHorizontalPadding?: boolean;
+    /**
+     * El espaciado horizontal se calcula automáticamente, sin embargo si es
+     * posible definir el vertical. Por defecto se usa 0.
+     */
+    verticalGap?: number;
+};
 /**
- * Permite agendar un callback para que sea ejecutado una vez
- * que la pantalla haya sido desbloqueada por primera vez.
- *
- * Si al momento de registrar el callback la pantalla ya fue
- * desbloqueada, el callback se ejecuta inmediatamente.
+ * Por defecto se usa DefaultIconRenderer. El pasaje de un nuevo IconRenderer
+ * permite modificar la forma en que se distribuyen en pantalla los distintos
+ * atributos de cada ícono.
+ *
+ * Una particularidad es cómo se definen los estilos cuando el ícono está en
+ * foco: Se usa el selector **'.iconsList__keyHandler:focus .focused
+ * .iconsList__icon__wrapper'**, que es donde se aplican los estilos
+ * correspondientes al foco.
  */
-declare function onScreenLockReleasedFirstTime(cb: () => void): void;
-declare function hasReleasedScreenLock(): boolean;
+type TIconRenderer<P = Record<string, unknown>> = FunctionComponent<TIcon<P>>;
+
+declare const IconsList: {
+    <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): theme_ui_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TAttachToElement = (() => HTMLElement) | RefObject<HTMLElement>;
+type TPreferredOrientationX = 'left' | 'right';
+type TPreferredOrientationY = 'top' | 'bottom';
+type TSize = {
+    width: number;
+    height: number;
+};
+type TSizeWithAuto = {
+    width: number | 'auto';
+    height: number | 'auto';
+};
+type TPosition = {
+    left: number;
+    top: number;
+};
+type TAttachToElementAnchorPoint = 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type TTooltip = {
+    /** Define el contenido del tooltip */
+    children?: ReactNode;
+    /**
+     * Indica si el tooltip se cierra con escape. Valor por defecto: true.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Indica si el tooltip se cierra al desplazar el puntero del mouse fuera del
+     * tooltip. Valor por defecto: true.
+     */
+    closeOnMouseLeaveTooltip?: boolean;
+    /**
+     * Indica si el tooltip se cierra al desplazar el puntero del mouse fuera del
+     * elemento al que el tooltip está anclado. Valor por defecto: true.
+     */
+    closeOnMouseLeaveAttachedElement?: boolean;
+    /**
+     * Indica si el tooltip se cierra al hacerle click. Valor por defecto: false.
+     */
+    closeOnClick?: boolean;
+    /**
+     * Indica si el tooltip se cierra al hacer click fuera de él. Valor por
+     * defecto: true.
+     */
+    closeOnClickOut?: boolean;
+    /**
+     * Indica si el tooltip se cierra al hacer scroll en un elemento externo al
+     * tooltip. Valor por defecto: true.
+     */
+    closeOnScrollOut?: boolean;
+    /**
+     * Permite determinar sobre qué elemento se abre el tooltip
+     */
+    attachToElement?: TAttachToElement;
+    /**
+     * Cuando se desea hacer attach a un elemento, es posible posicionar el menú
+     * en cualquiera de los cuatro vétices definidos por el box que lo contiene o
+     * bien ubicarlo exactamente en el centro.
+     *
+     * Por defecto se colocará en topRight.
+     *
+     * Además el tooltip se extenderá según la orientación definida en los
+     * parámetros preferredOrientationX y preferredOrientationY.
+     */
+    attachToElementAnchorPoint?: TAttachToElementAnchorPoint;
+    /**
+     * Permite indicar que el tooltip se abrirá en un punto específico. En caso
+     * de no indicar anchorPoint ni attachToElement se abrirá en {0,0}
+     */
+    anchorPoint?: TPosition;
+    /**
+     * El minSize define el espacio mínimo que debe existir para mostrar el
+     * tooltip. En caso de que en la orientación definida no exista espacio
+     * suficiente, el tooltip se mostrará en otra orientación que si lo permita.
+     */
+    minSize?: TSize;
+    /**
+     * El preferredSize define el espacio deseado que debería ocupar el tooltip.
+     * En caso de no haber espacio suficiente para cubrir este espacio en la
+     * orientación definida, se cubrirá todo el espacio disponible, siempre y
+     * cuando sea mayor o igual que minSize, en cuyo caso entrará en juego el
+     * comportamiento de minSize.
+     *
+     * Por defecto usa { height: 'auto', width: 'auto' }.
+     */
+    preferredSize?: TSizeWithAuto;
+    /**
+     * Posición en la que el tooltip se muestra en caso de que haya espacio
+     * suficiente, por defecto usa right.
+     */
+    preferredOrientationX?: TPreferredOrientationX;
+    /**
+     * Posición en la que el tooltip se muestra en caso de que haya espacio
+     * suficiente, por defecto usa bottom.
+     */
+    preferredOrientationY?: TPreferredOrientationY;
+    /**
+     * Permite agregar classNames al box contenedor.
+     */
+    className?: string;
+    /**
+     * Será llamado cuando el tooltip sea cerrado.
+     */
+    onClose?: () => unknown;
+    /**
+     * Variante del box contenedor. Por defecto usa
+     * layout.common.tooltips.primary.
+     */
+    variant?: string;
+};
+
+type TTooltipEvents = {
+    open: TTooltip;
+    close: void;
+};
+declare const tooltipsHandler: <K extends keyof TTooltipEvents>(ev: K, args: TTooltipEvents[K]) => void;
+declare const TooltipsProvider: React$1.FC<object>;
+declare function useTooltip(tooltip?: TTooltip): {
+    close: () => void;
+    open: (otherProps?: Partial<TTooltip>) => void;
+    toggle: (otherProps?: Partial<TTooltip>) => void;
+};
 
-export { CalendarModal, Checkbox, Confirm, DateInput, DialogButtonBar, FieldErrorMessage, ICalendarModal, IConfirm, IDialogButtonBar, IDialogHeader, IField, IFieldErrorMessage, IIconInput, IOverlay, IRequiredMark, ISimpleButton, IconButton, IconInput, LinearLoader, Modal, ModalContext, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, TApiaIconButton, TCheckbox, TDateProps, TIconButton, TIconSize, TModal, TModalContext, TNumberInput, TNumberInputChangeEvent, TUseModalConfiguration, focus, forceScreenLock, forceWhiteScreen, getConfirmButton, getFieldErrorStyles, getFieldTouchedStyles, hasReleasedScreenLock, isCurrentlyLocked, lockController, lockScreen, onScreenLockReady, onScreenLockReleasedFirstTime, parseNumberInputValueToNumber, parseNumberValueToNumberInput, releaseScreenLock, unlockScreen, useModal, useScreenLock };
+export { ApiaFilter, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, DateInput, DialogButtonBar, FieldErrorMessage, IApiaFilter, ICalendarModal, IConfirm, IDialogButtonBar, IDialogHeader, IField, IFieldErrorMessage, IIconInput, IOverlay, IRequiredMark, ISimpleButton, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, Modal, ModalContext, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, TApiaButtonType, TApiaIconButton, TCheckbox, TDateProps, TIcon, TIconButton, TIconRenderer, TIconSize, TIconsList, TListbox, TModal, TModalContext, TModalSize, TNumberInput, TNumberInputChangeEvent, TOnClickNode, TOnConfirmSelection, TOnSelectionChange, TTooltipEvents, TUseModalConfiguration, TooltipsProvider, WaiTypeAhead, getConfirmButton, getFieldErrorStyles, getFieldTouchedStyles, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useModal, useOtherTagButton, useTooltip };
+//# sourceMappingURL=index.d.ts.map