@apia/components 0.2.4 → 0.3.0

package/dist/index.d.ts

@@ -1,10 +1,36 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, FC, ChangeEventHandler, MouseEvent, KeyboardEvent, FunctionComponent, ForwardedRef, ComponentType, RefObject } 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 { 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.
@@ -20,23 +46,23 @@ interface IAccordionProps {
 }
 declare const Accordion: FC<IAccordionProps>;
 
-type TItemState = {
+type TItemState$1 = {
     isChecked: boolean;
     isExpanded: boolean;
 };
-type TItemStateListener = (state: TItemState) => unknown;
+type TItemStateListener = (state: TItemState$1) => unknown;
 type TPropsListener = (props: IAccordionProps) => unknown;
 
 type TSelectionComparator<T> = (prev: T, next: T) => boolean;
-type TItemUpdater = Partial<TItemState> | ((currentProps: TItemState) => Partial<TItemState>);
+type TItemUpdater = Partial<TItemState$1> | ((currentProps: TItemState$1) => Partial<TItemState$1>);
 declare class AccordionHandler {
     id: string;
     props: IAccordionProps;
-    itemsState: Record<TId, TItemState>;
+    itemsState: Record<TId, TItemState$1>;
     itemsStateListeners: Record<TId, TItemStateListener[]>;
     propsListeners: TPropsListener[];
     constructor(id: string, props: IAccordionProps);
-    registerItem(itemId: TId, initialState: TItemState): void;
+    registerItem(itemId: TId, initialState: TItemState$1): void;
     toggleItem(itemId: TId, isExpanded: boolean): void;
     unregisterItem(itemId: TId): void;
     /**
@@ -52,37 +78,13 @@ declare class AccordionHandler {
             children: ReactNode;
         }) => React$1.JSX.Element;
         useItemId: () => TId;
-        useItemStateSelector: <T>(selector: (props: TItemState) => T, comparator?: TSelectionComparator<T>) => T;
+        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 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;
-    /**
-     * Si no se pasa title se usará ariaLabel.
-     */
-    title?: string;
-}
-
 interface IAccordionItemProps {
     /**
      * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien
@@ -135,9 +137,36 @@ interface ICollapsiblePanel {
 
 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;
@@ -392,7 +421,7 @@ declare const FieldLabel: React$1.ForwardRefExoticComponent<{
 } & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type TListboxItem = {
-    children: ReactNode;
+    children?: ReactNode;
     rowIndex?: number;
 } & BoxProps & {
     /**
@@ -760,31 +789,7 @@ declare function useModal(configuration?: TUseModalConfiguration): {
     show: () => void;
 };
 
-declare global {
-    interface Window {
-        BTN_CONFIRM: string;
-        BTN_CANCEL: string;
-    }
-}
-declare function getConfirmButton(ref: HTMLElement): HTMLElement;
-interface IConfirm {
-    additionalButtons?: React$1.ReactNode;
-    additionalButtonsOnRight?: React$1.ReactNode;
-    cancelButtonText?: string;
-    children: React$1.ReactNode;
-    className?: string;
-    confirmButtonText?: string;
-    confirmButtonVariant?: TApiaButtonType;
-    contentRef?: React$1.Ref<HTMLDivElement>;
-    disabled?: boolean;
-    hideCancelButton?: boolean;
-    hideConfirmButton?: boolean;
-    isLoading?: boolean;
-    onConfirm?: (ev: React$1.MouseEvent) => unknown;
-    onCancel?: (ev: React$1.MouseEvent) => unknown;
-    variant?: string;
-}
-declare const Confirm: React$1.FC<IConfirm>;
+declare const Confirm: ({ children, additionalButtons, additionalButtonsOnRight, cancelButtonText: cancelText, className, confirmButtonText: confirmText, confirmButtonVariant, contentRef, disabled, hideCancelButton, hideConfirmButton, isLoading, onCancel, onConfirm, variant, }: Omit<IConfirm, 'title'>) => React$1.JSX.Element;
 
 interface IDialogButtonBar {
     children: React$1.ReactNode;
@@ -819,8 +824,20 @@ declare global {
  */
 declare const ScreenLock: () => React__default.JSX.Element | null;
 
-declare const AutoEllipsis: ({ children }: {
+declare const AutoEllipsis: ({ children, findParent, overrideStyles, }: {
     children: ReactNode;
+    /**
+     * Si se pasa el método findParent, será invocado con el nodo de AutoEllipsis
+     * para dar control sobre cuál es el elemento al que se le clonarán los
+     * estilos.
+     */
+    findParent?: ((currentElement: HTMLElement) => HTMLElement) | undefined;
+    /**
+     * Si se pasa overrideStyles, será invocado con el nodo actual de
+     * AutoEllipsis para tomar decisiones acerca de cuáles estilos serán
+     * aplicados.
+     */
+    overrideStyles?: ((currentElement: HTMLElement) => Partial<CSSStyleDeclaration>) | undefined;
 }) => React$1.JSX.Element;
 
 interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
@@ -853,7 +870,7 @@ interface IResponsiveComponent<P> extends FC<P> {
  * poder tomar decisiones de responsividad que no dependen del ancho de la
  * pantalla sino del espacio donde se encuentra.
  */
-declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, debounce, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => IResponsiveComponent<P & {
+declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => IResponsiveComponent<P & {
     breakPoints?: number[] | undefined;
 }>;
 
@@ -994,6 +1011,67 @@ declare const IconsList: {
 
 declare function importComponent<T = unknown>(path: string): React$1.LazyExoticComponent<ComponentType<T>>;
 
+type TToolEventState = {
+    isToggled: boolean;
+};
+type TSeparator = {
+    separator: true;
+};
+type TToolDefinition = {
+    action: (props: TToolEventState) => unknown;
+    /**
+     * Si se pasa allowToggle y no se pasa toggled ( ni en true ni en false ),
+     * entonces el estado de toggle será controlado internamente en el toolbar
+     */
+    allowToggle?: boolean;
+    /**
+     * Si se desea usar defaultToggled, debería pasarse también allowToggle
+     */
+    defaultToggled?: boolean;
+    disabled?: boolean;
+    icon: TIconType | TIconName;
+    id: string;
+    title: string;
+    iconSize?: 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl' | undefined;
+    /**
+     * Siempre que se pase toggled, no importa si en true o en false, el
+     * usuario del toolbar deberá mantener la lógica de persistencia del
+     * toggle
+     */
+    toggled?: boolean;
+};
+type TTool = TToolDefinition | TSeparator;
+
+type TClickListener = () => unknown;
+type TItemState = Pick<TToolDefinition, 'disabled' | 'toggled'>;
+declare class ToolbarController extends EventEmitter<{
+    pressEnter: string;
+    updateItemState: string;
+}> {
+    eventListeners: Record<string, TClickListener[]>;
+    itemsState: Record<string, TItemState>;
+    hooks: {
+        useItemState: (id: string, initialState: TItemState) => TItemState;
+    };
+    setItemState: (id: string, newState: Partial<TItemState>) => void;
+    Context: ({ children }: {
+        children: ReactNode;
+    }) => React$1.JSX.Element;
+}
+
+declare const ToolbarItem: (props: TTool) => React$1.JSX.Element;
+
+declare const Toolbar: ((props: {
+    children: ReactNode;
+    /**
+     * El controlador permite gestionar el estado de los distintos elementos de
+     * la toolbar
+     */
+    getController?: ((newController: ToolbarController) => unknown) | undefined;
+}) => React$1.JSX.Element) & {
+    displayName: string;
+};
+
 type TAttachToElement = (() => HTMLElement) | RefObject<HTMLElement>;
 type TPreferredOrientationX = 'left' | 'right';
 type TPreferredOrientationY = 'top' | 'bottom';
@@ -1114,4 +1192,4 @@ declare function useTooltip(tooltip?: TTooltip): {
     toggle: (otherProps?: Partial<TTooltip>) => void;
 };
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, DateInput, DialogButtonBar, FieldErrorMessage, FieldLabel, IAccordionItemProps, IAccordionProps, 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, TTooltip, TTooltipEvents, TUseModalConfiguration, TooltipsProvider, WaiTypeAhead, getConfirmButton, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useOtherTagButton, useTooltip };
+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 };