@apia/components 0.3.2 → 0.3.4

package/dist/index.d.ts

@@ -1,172 +1,13 @@
+import { ThemeUIStyleObject, IconButtonProps, ButtonProps, ThemeUICSSObject, InputProps, BoxProps } from '@apia/theme';
+import { TModify, TId, TApiaFilter, TApiaFilterValue, IOnFocusConfiguration, TFocusRetriever, EventEmitter } from '@apia/util';
 import * as React$1 from 'react';
-import React__default, { ReactNode, FC, Ref, ChangeEventHandler, MouseEvent, KeyboardEvent, FunctionComponent, ForwardedRef, ComponentType, RefObject } from 'react';
-import { TId, TApiaFilter, TApiaFilterValue, TModify, IOnFocusConfiguration, TFocusRetriever, EventEmitter } from '@apia/util';
-import { TIconName, TIconType } from '@apia/icons';
-import { ThemeUIStyleObject, IconButtonProps, ButtonProps, InputProps, ThemeUICSSObject, BoxProps } from '@apia/theme';
+import React__default, { ChangeEventHandler, MouseEvent, KeyboardEvent, ReactNode, FC, Ref, FunctionComponent, ForwardedRef, ComponentType, RefObject } from 'react';
+import { TIconType, TIconName } from '@apia/icons';
 import { Args } from 'react-cool-portal';
 
-interface IAccordionItemButton {
-    ariaLabel: string;
-    /**
-     * Si checked !== undefined => se mostrará un checkbox.
-     */
-    checked?: boolean;
-    /**
-     * Solamente se utiliza en conjunto con el checkbox y permite evitar que el
-     * usuario pueda marcar o desmarcar el checkbox.
-     */
-    disableSelection?: boolean;
-    label: string;
-    /**
-     * Evento que se dispara cuando el usuario hace click en el checkbox o
-     * presiona espacio sobre el botón del acordeón.
-     */
-    onChange?: (checked: boolean) => unknown;
-    rightIcons?: TIconName[] | TIconName;
-    tabIndex?: number;
-    /**
-     * Si no se pasa title se usará ariaLabel.
-     */
-    title?: string;
-}
-declare const DefaultAccordionItemButton: (props: IAccordionItemButton) => React$1.JSX.Element;
-
-interface IAccordionProps {
-    /**
-     * Tiempo en ms que dura la animación. Por defecto se usa 150.
-     */
-    animationDuration?: number;
-    children?: ReactNode;
-    className?: string;
-    getHandler?: (handler: AccordionHandler) => unknown;
-    /**
-     * Por defecto usa la variante layout.common.components.accordion.primary
-     */
-    variant?: string;
-}
-declare const Accordion: FC<IAccordionProps>;
-
-type TItemState$1 = {
-    isChecked: boolean;
-    isExpanded: boolean;
-};
-type TItemStateListener = (state: TItemState$1) => unknown;
-type TPropsListener = (props: IAccordionProps) => unknown;
-
-type TSelectionComparator<T> = (prev: T, next: T) => boolean;
-type TItemUpdater = Partial<TItemState$1> | ((currentProps: TItemState$1) => Partial<TItemState$1>);
-declare class AccordionHandler {
-    id: string;
-    props: IAccordionProps;
-    itemsState: Record<TId, TItemState$1>;
-    itemsStateListeners: Record<TId, TItemStateListener[]>;
-    propsListeners: TPropsListener[];
-    constructor(id: string, props: IAccordionProps);
-    registerItem(itemId: TId, initialState: TItemState$1): void;
-    toggleItem(itemId: TId, isExpanded: boolean): void;
-    unregisterItem(itemId: TId): void;
-    /**
-     * Permite actualizar parcialmente el estado de un item
-     */
-    udpateItem(itemId: TId, updater: TItemUpdater): void;
-    updateProps(props: IAccordionProps): void;
-    hooks: {
-        useAccordionContextProvider: () => ({ children }: {
-            children: ReactNode;
-        }) => React$1.JSX.Element;
-        useItemContextProvider: (itemId: TId) => ({ children }: {
-            children: ReactNode;
-        }) => React$1.JSX.Element;
-        useItemId: () => TId;
-        useItemStateSelector: <T>(selector: (props: TItemState$1) => T, comparator?: TSelectionComparator<T>) => T;
-        useItemStateUpdate: (cb: TItemStateListener) => void;
-        usePropsSelector: <T_1>(selector: (props: IAccordionProps) => T_1, comparator?: TSelectionComparator<T_1>) => T_1;
-        usePropsUpdate: (cb: TPropsListener) => void;
-    };
-}
-
-interface IAccordionItemProps {
-    /**
-     * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien
-     * se pasa un elemento AccordionItemButton como hijo o bien se pasan
-     * buttonProps. En caso contrario, el elemento no tendrá botón.
-     */
-    buttonProps?: IAccordionItemButton;
-    children?: ReactNode;
-    id: TId;
-}
-declare const AccordionItem: ({ children, id, ...props }: IAccordionItemProps) => React$1.JSX.Element;
-
-type TAccordionItemButton = {
-    children?: ReactNode;
-};
-declare const AccordionItemButton: ({ children }: TAccordionItemButton) => React$1.JSX.Element;
-
-declare const AccordionItemContent: ({ children, buttonProps, }: IAccordionItemProps) => React$1.JSX.Element;
-
-declare const AccordionContext: React$1.Context<AccordionHandler | null>;
-declare const AccordionItemContext: React$1.Context<TId | null>;
-declare const useAccordionContext: () => AccordionHandler;
-
-type TAccordionHandler = AccordionHandler;
-
-interface IApiaFilter {
-    filter: TApiaFilter;
-    onBlur?: (ev: TApiaFilterValue) => void;
-    onChange?: (ev: TApiaFilterValue) => void | boolean | string | Promise<boolean | string>;
-    onPressEnter?: (ev: TApiaFilterValue) => void;
-}
-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>>;
-
-interface IAlert {
-    children: React.ReactNode;
-    onClose: () => void;
-    title?: string;
-}
-declare const AlertModal: ({ children, onClose, title }: IAlert) => React$1.JSX.Element;
-
 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 IConfirm {
-    additionalButtons?: ReactNode;
-    additionalButtonsOnRight?: ReactNode;
-    cancelButtonText?: string;
-    children: ReactNode;
-    className?: string;
-    confirmButtonText?: string;
-    confirmButtonVariant?: TApiaButtonType;
-    contentRef?: Ref<HTMLDivElement>;
-    disabled?: boolean;
-    hideCancelButton?: boolean;
-    hideConfirmButton?: boolean;
-    isLoading?: boolean;
-    onConfirm?: () => unknown;
-    onCancel?: () => unknown;
-    title?: string;
-    variant?: string;
-}
-declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
-
 interface IBaseButton {
     text?: string;
     children?: string;
@@ -217,6 +58,7 @@ type TIconButton = Omit<IconButtonProps, 'sx'> & React$1.AriaAttributes & {
 declare const IconButton: React$1.ForwardRefExoticComponent<Omit<TIconButton, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface ISimpleButton extends ButtonProps {
+    buttonSx?: ThemeUICSSObject;
     icon?: TIconType;
     iconColor?: string;
     iconPosition?: 'left' | 'right';
@@ -420,6 +262,170 @@ declare const FieldLabel: React$1.ForwardRefExoticComponent<{
     requiredMarkPosition?: "after" | "before" | undefined;
 } & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface IAccordionItemButton {
+    ariaLabel: string;
+    /**
+     * Si checked !== undefined => se mostrará un checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Solamente se utiliza en conjunto con el checkbox y permite evitar que el
+     * usuario pueda marcar o desmarcar el checkbox.
+     */
+    className?: string;
+    disableSelection?: boolean;
+    domButtonProps?: ISimpleButton;
+    label: string;
+    /**
+     * Evento que se dispara cuando el usuario hace click en el checkbox o
+     * presiona espacio sobre el botón del acordeón.
+     */
+    onChange?: (checked: boolean) => unknown;
+    onClick?: (ev: MouseEvent) => unknown;
+    onUserPressEnter?: (ev: KeyboardEvent) => unknown;
+    rightButtons?: ReactNode;
+    rightIcons?: TIconName[] | TIconName;
+    tabIndex?: number;
+    /**
+     * Si no se pasa title se usará ariaLabel.
+     */
+    title?: string;
+}
+declare const DefaultAccordionItemButton: (props: IAccordionItemButton) => React$1.JSX.Element;
+
+interface IAccordionProps {
+    /**
+     * Tiempo en ms que dura la animación. Por defecto se usa 150.
+     */
+    animationDuration?: number;
+    children?: ReactNode;
+    className?: string;
+    getHandler?: (handler: AccordionHandler) => unknown;
+    /**
+     * Por defecto usa la variante layout.common.components.accordion.primary
+     */
+    variant?: string;
+}
+declare const Accordion: FC<IAccordionProps>;
+
+type TItemState$1 = {
+    isChecked: boolean;
+    isExpanded: boolean;
+};
+type TItemStateListener = (state: TItemState$1) => unknown;
+type TPropsListener = (props: IAccordionProps) => unknown;
+
+type TSelectionComparator<T> = (prev: T, next: T) => boolean;
+type TItemUpdater = Partial<TItemState$1> | ((currentProps: TItemState$1) => Partial<TItemState$1>);
+declare class AccordionHandler {
+    id: string;
+    props: IAccordionProps;
+    itemsState: Record<TId, TItemState$1>;
+    itemsStateListeners: Record<TId, TItemStateListener[]>;
+    propsListeners: TPropsListener[];
+    constructor(id: string, props: IAccordionProps);
+    registerItem(itemId: TId, initialState: TItemState$1): void;
+    toggleItem(itemId: TId, isExpanded: boolean): void;
+    unregisterItem(itemId: TId): void;
+    /**
+     * Permite actualizar parcialmente el estado de un item
+     */
+    udpateItem(itemId: TId, updater: TItemUpdater): void;
+    updateProps(props: IAccordionProps): void;
+    hooks: {
+        useAccordionContextProvider: () => ({ children }: {
+            children: ReactNode;
+        }) => React$1.JSX.Element;
+        useItemContextProvider: (itemId: TId) => ({ children }: {
+            children: ReactNode;
+        }) => React$1.JSX.Element;
+        useItemId: () => TId;
+        useItemStateSelector: <T>(selector: (props: TItemState$1) => T, comparator?: TSelectionComparator<T>) => T;
+        useItemStateUpdate: (cb: TItemStateListener) => void;
+        usePropsSelector: <T_1>(selector: (props: IAccordionProps) => T_1, comparator?: TSelectionComparator<T_1>) => T_1;
+        usePropsUpdate: (cb: TPropsListener) => void;
+    };
+}
+
+interface IAccordionItemProps {
+    /**
+     * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien
+     * se pasa un elemento AccordionItemButton como hijo o bien se pasan
+     * buttonProps. En caso contrario, el elemento no tendrá botón.
+     */
+    buttonProps?: IAccordionItemButton;
+    children?: ReactNode;
+    id: TId;
+}
+declare const AccordionItem: ({ children, id, ...props }: IAccordionItemProps) => React$1.JSX.Element;
+
+type TAccordionItemButton = {
+    children?: ReactNode;
+};
+declare const AccordionItemButton: ({ children }: TAccordionItemButton) => React$1.JSX.Element;
+
+declare const AccordionItemContent: ({ children, buttonProps, }: IAccordionItemProps) => React$1.JSX.Element;
+
+declare const AccordionContext: React$1.Context<AccordionHandler | null>;
+declare const AccordionItemContext: React$1.Context<TId | null>;
+declare const useAccordionContext: () => AccordionHandler;
+
+type TAccordionHandler = AccordionHandler;
+
+interface IApiaFilter {
+    filter: TApiaFilter;
+    onBlur?: (ev: TApiaFilterValue) => void;
+    onChange?: (ev: TApiaFilterValue) => void | boolean | string | Promise<boolean | string>;
+    onPressEnter?: (ev: TApiaFilterValue) => void;
+}
+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>>;
+
+interface IAlert {
+    children: React.ReactNode;
+    onClose: () => void;
+    title?: string;
+}
+declare const AlertModal: ({ children, onClose, title }: IAlert) => React$1.JSX.Element;
+
+interface IConfirm {
+    additionalButtons?: ReactNode;
+    additionalButtonsOnRight?: ReactNode;
+    cancelButtonText?: string;
+    children: ReactNode;
+    className?: string;
+    confirmButtonText?: string;
+    confirmButtonVariant?: TApiaButtonType;
+    contentRef?: Ref<HTMLDivElement>;
+    disabled?: boolean;
+    hideCancelButton?: boolean;
+    hideConfirmButton?: boolean;
+    isLoading?: boolean;
+    onConfirm?: () => unknown;
+    onCancel?: () => unknown;
+    title?: string;
+    variant?: string;
+}
+declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
+
 type TListboxItem = {
     children?: ReactNode;
     rowIndex?: number;
@@ -534,6 +540,13 @@ declare const LoaderSpinner: ((props: {
     displayName: string;
 };
 
+type TModalContext = {
+    changeTitle: (newTitle: string) => void;
+    close: () => unknown;
+    descriptionId: string;
+};
+declare function useModalContext(): TModalContext;
+
 interface IDialogHeader {
     className?: string;
     close: () => void;
@@ -548,13 +561,6 @@ declare global {
     }
 }
 
-type TModalContext = {
-    /**
-     * Se debe usar para dotar de una descripción al cuadro de diálogo
-     */
-    descriptionId: string;
-};
-declare const ModalContext: React__default.Context<TModalContext>;
 type TModal = {
     animationDuration?: number;
     children?: React__default.ReactNode;
@@ -929,7 +935,8 @@ type TIcon<P = Record<string, unknown>> = {
      */
     className?: string;
     id: TId;
-    imageUrl: string;
+    icon?: TIconName | TIconType;
+    imageUrl?: string;
     /**
      * Es el texto que se mostrará debajo de la imagen.
      */
@@ -944,7 +951,7 @@ type TIconsList<P = Record<string, unknown>> = {
      * Listado de íconos
      */
     icons: TIcon<P>[];
-    iconRenderer?: TIconRenderer;
+    iconRenderer?: TIconRenderer<P>;
     /**
      * Por defecto se usa iconWidth=100.
      *
@@ -1004,6 +1011,8 @@ type TIconsList<P = Record<string, unknown>> = {
  */
 type TIconRenderer<P = Record<string, unknown>> = FunctionComponent<TIcon<P>>;
 
+declare const DefaultIconRenderer: React$1.NamedExoticComponent<TIcon<Record<string, unknown>>>;
+
 declare const IconsList: {
     <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
@@ -1192,4 +1201,6 @@ declare function useTooltip(tooltip?: TTooltip): {
     toggle: (otherProps?: Partial<TTooltip>) => void;
 };
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DefaultAccordionItemButton, DialogButtonBar, FieldErrorMessage, FieldLabel, IAccordionItemProps, IAccordionProps, IAlert, IApiaFilter, ICalendarModal, IConfirm, IDialogButtonBar, IDialogHeader, IField, IFieldErrorMessage, IIconInput, IOverlay, IRequiredMark, IResponsiveComponent, ISimpleButton, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, ModalContext, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, TAccordionHandler, TAccordionItemButton, TApiaButtonType, TApiaIconButton, TCheckbox, TDateProps, TFieldLabel, TIcon, TIconButton, TIconRenderer, TIconSize, TIconsList, TListbox, TModal, TModalContext, TModalSize, TNumberInput, TNumberInputChangeEvent, TOnClickNode, TOnConfirmSelection, TOnSelectionChange, TTool, TTooltip, TTooltipEvents, TUseModalConfiguration, Toolbar, ToolbarController, ToolbarItem, TooltipsProvider, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useOtherTagButton, useTooltip };
+declare const Tooltip: ({ anchorPoint, attachToElement, attachToElementAnchorPoint, children, className, closeOnClick, closeOnClickOut, closeOnEscape, closeOnMouseLeaveTooltip, closeOnMouseLeaveAttachedElement, closeOnScrollOut, minSize, onClose, preferredOrientationX, preferredOrientationY, preferredSize, variant, }: TTooltip) => React$1.JSX.Element;
+
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DefaultAccordionItemButton, DefaultIconRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IAccordionItemButton, IAccordionItemProps, IAccordionProps, IAlert, IApiaFilter, ICalendarModal, IConfirm, IDialogButtonBar, IDialogHeader, IField, IFieldErrorMessage, IIconInput, IOverlay, IRequiredMark, IResponsiveComponent, ISimpleButton, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, TAccordionHandler, TAccordionItemButton, TApiaButtonType, TApiaIconButton, TCheckbox, TDateProps, TFieldLabel, TIcon, TIconButton, TIconRenderer, TIconSize, TIconsList, TListbox, TModal, TModalSize, TNumberInput, TNumberInputChangeEvent, TOnClickNode, TOnConfirmSelection, TOnSelectionChange, TTool, TTooltip, TTooltipEvents, TUseModalConfiguration, Toolbar, ToolbarController, ToolbarItem, Tooltip, TooltipsProvider, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useModalContext, useOtherTagButton, useTooltip };