@apia/components 0.1.3 → 0.2.2

package/LICENSE.md

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) [year] [fullname]
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
-# Components
-
+# Components
+
 Este paquete es un compilado de componentes comunes.

package/dist/index.d.ts

@@ -1,11 +1,113 @@
-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 React__default, { ReactNode, FC, 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 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 = {
+    isChecked: boolean;
+    isExpanded: boolean;
+};
+type TItemStateListener = (state: TItemState) => unknown;
+type TPropsListener = (props: IAccordionProps) => unknown;
+
+type TSelectionComparator<T> = (prev: T, next: T) => boolean;
+type TItemUpdater = Partial<TItemState> | ((currentProps: TItemState) => Partial<TItemState>);
+declare class AccordionHandler {
+    id: string;
+    props: IAccordionProps;
+    itemsState: Record<TId, TItemState>;
+    itemsStateListeners: Record<TId, TItemStateListener[]>;
+    propsListeners: TPropsListener[];
+    constructor(id: string, props: IAccordionProps);
+    registerItem(itemId: TId, initialState: TItemState): 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) => 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
+     * 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;
@@ -52,11 +154,11 @@ interface IBaseButton {
 /**
  * The world's most **basic** button
  */
-declare const BaseButton: ({ id, name, onClick, isLoading, loadingChildren, disabled, children, text, variant, type, SXProps, ...buttonProps }: IBaseButton) => theme_ui_jsx_runtime.JSX.Element;
+declare const BaseButton: ({ id, name, onClick, isLoading, loadingChildren, disabled, children, text, variant, type, SXProps, ...buttonProps }: IBaseButton) => React$1.JSX.Element;
 
 type TIconSize = number | 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl';
 type TApiaIconButton = 'icon' | 'icon-primary' | 'icon-outline' | 'icon-only';
-type TIconButton = IconButtonProps & React$1.AriaAttributes & {
+type TIconButton = Omit<IconButtonProps, 'sx'> & React$1.AriaAttributes & {
     className?: string;
     /**
      * Es posible pasar explícitamente un ícono o el nombre del ícono de
@@ -129,7 +231,7 @@ declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
     imageUrl: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     value: string;
-}) => theme_ui_jsx_runtime.JSX.Element;
+}) => React$1.JSX.Element;
 
 type TCheckbox = TModify<ButtonProps, {
     background?: string;
@@ -153,19 +255,27 @@ interface IField {
 }
 interface IIconInput extends IField {
     additionalButtons?: React__default.ReactNode;
+    additionalButtonsPosition?: 'before' | 'after';
     buttonProps?: Partial<React__default.ComponentProps<typeof IconButton>>;
     buttonRef?: React__default.RefObject<HTMLButtonElement>;
     hideButton?: boolean;
     icon?: TIconType | TIconName;
     inputProps?: Partial<InputProps>;
     inputRef?: React__default.RefObject<HTMLInputElement>;
-    mask?: string;
     onClick?: (ev: React__default.MouseEvent) => void;
     onBlur?: React__default.FocusEventHandler;
     [key: string]: unknown;
 }
-declare const IconInput: ({ additionalButtons, buttonProps, buttonRef, className, disabled, hideButton, icon, inputProps, inputRef, isLoading, mask, onClick, onBlur, readOnly, ...rest }: IIconInput) => theme_ui_jsx_runtime.JSX.Element;
+declare const IconInput: ({ additionalButtons, additionalButtonsPosition, buttonProps, buttonRef, className, disabled, hideButton, icon, inputProps, inputRef, isLoading, mask, onClick, onBlur, readOnly, ...rest }: IIconInput) => React__default.JSX.Element;
 
+declare global {
+    interface Window {
+        LANG_CODE: string;
+        MSG_INVALID_DATE: string;
+        MSG_FEC_FIN_MAY_FEC_INI: string;
+        LBL_PICK_DATE: string;
+    }
+}
 type TDateProps = TModify<InputProps, {
     allowPickBeforeToday?: boolean;
     error?: string | null;
@@ -199,7 +309,7 @@ interface IFieldErrorMessage {
     children: React$1.ReactNode | string;
     name?: string;
 }
-declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => theme_ui_jsx_runtime.JSX.Element | null;
+declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => React$1.JSX.Element | null;
 
 /**
  * El NumberInput respeta los parámetros de ambiente:
@@ -220,6 +330,15 @@ type TNumberInput = Omit<InputProps, 'type' | 'onChange' | 'onBlur' | 'value' |
     defaultValue?: string;
     avoidDecimalRestriction?: boolean;
 };
+declare global {
+    interface Window {
+        AMOUNT_DECIMAL_SEPARATOR: string;
+        AMOUNT_DECIMAL_ZEROS: string;
+        CHAR_DECIMAL_SEPARATOR: string;
+        CHAR_THOUS_SEPARATOR: string;
+        ADD_THOUSAND_SEPARATOR: string;
+    }
+}
 declare function parseNumberInputValueToNumber(value: string): number;
 declare function parseNumberValueToNumberInput(value: string | number): string;
 declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<TNumberInput, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
@@ -232,11 +351,46 @@ interface IRequiredMark {
 /**
  * Muestra el * en los campos de requerido.
  */
-declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, }: IRequiredMark) => theme_ui_jsx_runtime.JSX.Element | null;
+declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, }: IRequiredMark) => React$1.JSX.Element | null;
 
 declare const getFieldErrorStyles: (isValid: boolean) => ThemeUICSSObject;
 declare const getFieldTouchedStyles: (isTouched: boolean) => ThemeUICSSObject;
 
+type TFieldLabel = {
+    avoidSemicolon?: boolean;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string;
+    hideRequiredMark?: boolean;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean;
+    requiredMarkPosition?: 'before' | 'after';
+} & BoxProps;
+declare const FieldLabel: React$1.ForwardRefExoticComponent<{
+    avoidSemicolon?: boolean | undefined;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string | undefined;
+    hideRequiredMark?: boolean | undefined;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean | undefined;
+    requiredMarkPosition?: "after" | "before" | undefined;
+} & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+
 type TListboxItem = {
     children: ReactNode;
     rowIndex?: number;
@@ -318,7 +472,7 @@ type TListbox = {
      * onKeyDown e id no son permitidas dado que se usan para generar el
      * comportamiento correcto del componente
      */
-    ulProps?: Omit<BoxProps, 'id' | 'onKeyDown'>;
+    ulProps?: Omit<BoxProps, 'id' | 'onKeyDown' | 'sx'>;
 } & Partial<Pick<TListboxState, 'allowMultipleCharacterSearch' | 'allowSelection' | 'allowSingleCharacterSearch' | 'isMultipleSelection' | 'searchFunction' | 'startsWithFunction' | 'showSearchbox'>>;
 
 type TOnConfirmSelection = {
@@ -332,11 +486,11 @@ type TOnSelectionChange = {
 };
 type TOnClickNode = MouseEvent;
 
-declare const Listbox: React$1.MemoExoticComponent<((props: TListbox) => theme_ui_jsx_runtime.JSX.Element) & {
+declare const Listbox: React$1.MemoExoticComponent<((props: TListbox) => React$1.JSX.Element) & {
     displayName: string;
 }>;
 
-declare const LinearLoader: () => theme_ui_jsx_runtime.JSX.Element;
+declare const LinearLoader: () => React$1.JSX.Element;
 
 interface IProgressBar {
     id: string;
@@ -345,6 +499,12 @@ interface IProgressBar {
 }
 declare const ProgressBar: FC<IProgressBar>;
 
+declare const LoaderSpinner: ((props: {
+    className?: string | undefined;
+}) => React__default.JSX.Element) & {
+    displayName: string;
+};
+
 interface IDialogHeader {
     className?: string;
     close: () => void;
@@ -352,6 +512,11 @@ interface IDialogHeader {
     id?: string;
     NavBar?: React__default.ReactNode;
     title?: string;
+}
+declare global {
+    interface Window {
+        BTN_CLOSE: string;
+    }
 }
 
 type TModalContext = {
@@ -595,6 +760,12 @@ 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;
@@ -613,11 +784,6 @@ interface IConfirm {
     onCancel?: (ev: React$1.MouseEvent) => unknown;
     variant?: string;
 }
-declare global {
-    interface Window {
-        [key: string]: string;
-    }
-}
 declare const Confirm: React$1.FC<IConfirm>;
 
 interface IDialogButtonBar {
@@ -642,11 +808,20 @@ interface IOverlay extends BoxProps {
 }
 declare const Overlay: React$1.ForwardRefExoticComponent<IOverlay & React$1.RefAttributes<unknown>>;
 
+declare global {
+    interface Window {
+        WAIT_A_SECOND: string;
+    }
+}
 /**
  * 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 const ScreenLock: () => theme_ui_jsx_runtime.JSX.Element | null;
+declare const ScreenLock: () => React__default.JSX.Element | null;
+
+declare const AutoEllipsis: ({ children }: {
+    children: ReactNode;
+}) => React$1.JSX.Element;
 
 interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
     breakPoints: number[];
@@ -666,6 +841,11 @@ interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
      */
     defaultBreakpoint?: number;
 }
+interface IResponsiveComponent<P> extends FC<P> {
+    setBreakpoints: {
+        current: (breakPoints: number[]) => void;
+    };
+}
 /**
  * El método makeResponsiveComponent agrega un wrapper alrededor de un
  * componente para conocer el ancho del contenedor del mismo. De esta forma, es
@@ -673,9 +853,9 @@ interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
  * 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>) => (props: P & {
+declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, debounce, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => IResponsiveComponent<P & {
     breakPoints?: number[] | undefined;
-}) => theme_ui_jsx_runtime.JSX.Element;
+}>;
 
 /**
  * Type-ahead is a behavior pattern which helps the user in the lists and trees
@@ -808,10 +988,12 @@ type TIconsList<P = Record<string, unknown>> = {
 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;
+    <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
 
+declare function importComponent<T = unknown>(path: string): React$1.LazyExoticComponent<ComponentType<T>>;
+
 type TAttachToElement = (() => HTMLElement) | RefObject<HTMLElement>;
 type TPreferredOrientationX = 'left' | 'right';
 type TPreferredOrientationY = 'top' | 'bottom';
@@ -932,4 +1114,4 @@ declare function useTooltip(tooltip?: TTooltip): {
     toggle: (otherProps?: Partial<TTooltip>) => void;
 };
 
-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, TTooltip, TTooltipEvents, TUseModalConfiguration, TooltipsProvider, WaiTypeAhead, getConfirmButton, getFieldErrorStyles, getFieldTouchedStyles, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useModal, useOtherTagButton, useTooltip };
+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 };