@apia/components 4.0.17 → 4.0.18

package/dist/index.d.ts

@@ -115,67 +115,67 @@ type TModal = {
     variant?: string;
 } & Pick<IDialogHeader, 'hideCloseButton'>;
 declare const Modal: React__default.ForwardRefExoticComponent<{
-    animationDuration?: number | undefined;
+    animationDuration?: number;
     /**
      * Aplica solamente para modales que tengan draggable=true.
      */
     defaultPosition?: {
-        left?: string | undefined;
-        right?: string | undefined;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | undefined;
+        left?: string;
+        right?: string;
+        top?: string;
+        bottom?: string;
+    };
     /**
      * Si esta variable está en true, el modal se comportará más como una ventana
      * que como un modal
      */
-    draggable?: boolean | undefined;
-    dragBounded?: boolean | undefined;
+    draggable?: boolean;
+    dragBounded?: boolean;
     children?: React__default.ReactNode;
-    className?: string | undefined;
-    id?: string | undefined;
-    initialFocusConfiguration?: IOnFocusConfiguration | undefined;
+    className?: string;
+    id?: string;
+    initialFocusConfiguration?: IOnFocusConfiguration;
     /**
      * Este retriever será pasado al método focus.on para realizar el foco en el
      * elemento inicial del modal.
      *
      * @see focus
      */
-    initialFocusGetter?: ((modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>) | undefined;
+    initialFocusGetter?: (modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>;
     /**
      * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya
      * abierto.
      */
-    initialFocusRef?: React__default.RefObject<unknown> | undefined;
+    initialFocusRef?: React__default.RefObject<unknown>;
     /**
      * Controla el estado del modal, indicando a la transición de apertura o
      * cierre que debe comenzar, dependiendo de si cambia a true o false
      * respectivamente.
      */
-    isOpen?: boolean | undefined;
-    maxWidth?: string | number | undefined;
+    isOpen?: boolean;
+    maxWidth?: number | string;
     /**
      * Permite pasar un componente React que se mostrará a la derecha del título,
      * con el fin de incorporar botones en el header del modal.
      */
     NavBar?: React__default.ReactNode;
-    noFocus?: boolean | undefined;
-    noHeader?: boolean | undefined;
+    noFocus?: boolean;
+    noHeader?: boolean;
     /**
      * Permite definir un callback que será llamado solamente cuando el modal se
      * cierre por medio del click en el overlay, al presionar escape o mediante
      * el botón cerrar del header (La X).
      */
-    onClose?: (() => void) | undefined;
+    onClose?: () => void;
     /**
      * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
      */
-    onDragStart?: ((ev: MouseEvent) => boolean) | undefined;
+    onDragStart?: (ev: MouseEvent) => boolean;
     /**
      * Permite definir un callback que será llamado siempre que el modal se
      * cierre, una vez que la animación haya terminado.
      */
-    onExited?: (() => unknown) | undefined;
+    onExited?: () => unknown;
     /**
      * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en
      * la posición actual dentro del árbol de componentes. Normalmente, este
@@ -186,19 +186,19 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
      */
     Portal?: React__default.FC<{
         children: React__default.ReactNode;
-    }> | undefined;
+    }>;
     /**
      * Si es true, el modal será cerrado al presionar escape.
      */
-    shouldCloseOnEsc?: boolean | undefined;
+    shouldCloseOnEsc?: boolean;
     /**
      * Si es true, el modal será cerrado al hacer clic en el overlay.
      */
-    shouldCloseOnOverlayClick?: boolean | undefined;
-    size?: TModalSize | undefined;
-    stretch?: boolean | undefined;
-    title?: string | undefined;
-    variant?: string | undefined;
+    shouldCloseOnOverlayClick?: boolean;
+    size?: TModalSize;
+    stretch?: boolean;
+    title?: string;
+    variant?: string;
 } & Pick<IDialogHeader, "hideCloseButton"> & React__default.RefAttributes<HTMLDivElement>>;
 
 type TOpenModal = Pick<TModal, 'NavBar' | 'Portal' | 'children' | 'className' | 'hideCloseButton' | 'initialFocusGetter' | 'initialFocusConfiguration' | 'maxWidth' | 'noHeader' | 'onExited' | 'shouldCloseOnEsc' | 'shouldCloseOnOverlayClick' | 'size' | 'stretch' | 'title' | 'variant' | 'draggable' | 'onClose' | 'onDragStart' | 'defaultPosition' | 'dragBounded'> & {
@@ -285,7 +285,7 @@ declare class ApiaUtilNotifications {
 }
 
 declare const TabsList: (({ arrowsBehavior }: {
-    arrowsBehavior?: "open" | "focus" | undefined;
+    arrowsBehavior?: "open" | "focus";
 }) => React__default.JSX.Element | null) & {
     displayName: string;
 };
@@ -428,13 +428,14 @@ type TTabsListState<TabType extends TTab> = {
 
 declare const DefaultTabsLabelRenderer: TTabLabelRenderer;
 
-declare const TabsContent: ((props: Omit<BoxProps, 'children'>) => React$1.JSX.Element | null) & {
+declare const TabsContent: ((props: Omit<BoxProps, "children">) => React$1.JSX.Element | null) & {
     displayName: string;
 };
 
 declare function useTabsContext(): TabsController<TTab> | null;
 
-declare const Tabs: ({ id, getController, initialTabs, orientation, initialState, ...props }: TabsControllerProps<TTab> & Omit<BoxProps, 'id' | 'as' | 'role'>, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element | null;
+declare const NonForwardedTabs: ({ id, getController, initialTabs, orientation, initialState, ...props }: TabsControllerProps<TTab> & Omit<BoxProps, "id" | "as" | "role">, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element | null;
+declare const Tabs: typeof NonForwardedTabs;
 
 declare class ApiaUtilTabsController {
     get currentTab(): Tab<TTab>;
@@ -647,9 +648,9 @@ declare class AutomaticTooltip {
     #private;
     private handler;
     ref: (el: HTMLElement | null) => void;
-    constructor(tooltip: (Partial<TTooltip> & {
-        timeout?: number | undefined;
-    }) | null | undefined, handler: ApiaUtilTooltips);
+    constructor(tooltip: ((Partial<TTooltip> & {
+        timeout?: number;
+    }) | null) | undefined, handler: ApiaUtilTooltips);
     update: (tooltip: Partial<TTooltip>) => void;
 }
 
@@ -816,6 +817,7 @@ type AutocompleteProps = {
      * Por defecto es 100ms.
      */
     searchDebounce?: number;
+    readOnly?: boolean;
 } & AutocompleteBoxProps & Partial<Pick<AutocompleteState, 'disabled' | 'value'>>;
 type AutocompleteBoxProps = Partial<{
     className: string;
@@ -824,6 +826,7 @@ type AutocompleteBoxProps = Partial<{
 }>;
 type AutocompleteState = {
     disabled: boolean;
+    readOnly: boolean;
     focusedValue?: null | string;
     loading: boolean;
     showValue: string;
@@ -984,7 +987,7 @@ declare function useOtherTagButton(props?: Partial<{
 
 declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
     name: string;
-    className?: string | undefined;
+    className?: string;
     imageUrl: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     value: string;
@@ -1125,12 +1128,12 @@ type TFieldLabel = {
     requiredMarkPosition?: 'before' | 'after';
 } & BoxProps;
 declare const FieldLabel: React$1.ForwardRefExoticComponent<{
-    avoidSemicolon?: boolean | undefined;
+    avoidSemicolon?: boolean;
     /**
      * Permite mostrar un mensaje de error debajo del campo
      */
-    error?: string | undefined;
-    hideRequiredMark?: boolean | undefined;
+    error?: string;
+    hideRequiredMark?: boolean;
     label: string;
     /**
      * La propiedad required se utiliza para mostrar el * de requerido.
@@ -1138,8 +1141,8 @@ declare const FieldLabel: React$1.ForwardRefExoticComponent<{
      * @see requiredMarkPosition
      * @see hideRequiredMark
      */
-    required?: boolean | undefined;
-    requiredMarkPosition?: "after" | "before" | undefined;
+    required?: boolean;
+    requiredMarkPosition?: "before" | "after";
 } & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 
 interface IAccordionItemButton {
@@ -1223,7 +1226,7 @@ declare class AccordionHandler {
         useItemId: () => TId$1;
         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;
+        usePropsSelector: <T>(selector: (props: IAccordionProps) => T, comparator?: TSelectionComparator<T>) => T;
         usePropsUpdate: (cb: TPropsListener) => void;
     };
 }
@@ -1384,7 +1387,7 @@ declare const ContainerWithHeader: ({ title, children, footerChildren, onClose,
     children: ReactNode;
     footerChildren?: ReactNode;
     additionalButtons?: ReactNode;
-    onClose?: (() => void) | undefined;
+    onClose?: () => void;
 }) => React$1.JSX.Element;
 
 interface ICollapsiblePanel {
@@ -1525,7 +1528,7 @@ interface IProgressBar {
 declare const ProgressBar: FC<IProgressBar>;
 
 declare const LoaderSpinner: ((props: {
-    className?: string | undefined;
+    className?: string;
 }) => React$1.JSX.Element) & {
     displayName: string;
 };
@@ -1640,7 +1643,7 @@ declare function useModal(configuration?: TUseModalConfiguration): {
     show: () => void;
 };
 
-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;
+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;
@@ -1671,13 +1674,13 @@ declare const AutoEllipsis: ({ children, findParent, overrideStyles, }: {
      * para dar control sobre cuál es el elemento al que se le clonarán los
      * estilos.
      */
-    findParent?: ((currentElement: HTMLElement) => HTMLElement) | undefined;
+    findParent?: (currentElement: HTMLElement) => HTMLElement;
     /**
      * 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;
+    overrideStyles?: (currentElement: HTMLElement) => Partial<CSSStyleDeclaration>;
 }) => React$1.JSX.Element;
 
 interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
@@ -1711,7 +1714,7 @@ interface IResponsiveComponent<P> extends FC<P> {
  * pantalla sino del espacio donde se encuentra.
  */
 declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => IResponsiveComponent<P & {
-    breakPoints?: number[] | undefined;
+    breakPoints?: number[];
 }>;
 
 /**
@@ -1848,10 +1851,11 @@ type TIconRenderer<P = Record<string, unknown>> = FunctionComponent<TIcon<P>>;
 
 declare const DefaultIconRenderer: React$1.NamedExoticComponent<TIcon<Record<string, unknown>>>;
 
-declare const IconsList: {
+declare const IconsListNonForwarded: {
     <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
+declare const IconsList: typeof IconsListNonForwarded;
 
 /**
  * Permite importar un componente en forma dinámica con ruta relativa a
@@ -1927,7 +1931,7 @@ declare const Toolbar: ({ children, getController, }: {
      * El controlador permite gestionar el estado de los distintos elementos de
      * la toolbar
      */
-    getController?: ((newController: ToolbarController) => unknown) | undefined;
+    getController?: (newController: ToolbarController) => unknown;
 }) => React$1.JSX.Element;
 
 type TSortableListItem = {
@@ -1939,39 +1943,39 @@ type TSortableListItem = {
 declare const SortableListItem: React$1.MemoExoticComponent<({ boxProps, id, children }: TSortableListItem) => React$1.JSX.Element>;
 
 declare const UnstyledSortableList: ({ boxProps, children, onSortChange, }: {
-    boxProps?: BoxProps | undefined;
+    boxProps?: BoxProps;
     children: ReactNode;
-    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+    onSortChange?: (items: ReactElement<TSortableListItem>[]) => unknown;
 }) => React$1.JSX.Element;
 declare const SortableList: ((props: {
-    boxProps?: BoxProps | undefined;
+    boxProps?: BoxProps;
     children: ReactNode;
-    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+    onSortChange?: (items: ReactElement<TSortableListItem>[]) => unknown;
 }) => React$1.JSX.Element) & {
     displayName: string;
 };
 
 declare const FileCard: React$1.ForwardRefExoticComponent<{
     name: string;
-    iconsSize?: "sm" | "md" | "lg" | "xl" | undefined;
-    additionalButtons?: TIconButton[] | undefined;
-    className?: string | undefined;
-    sx?: ThemeUIStyleObject | undefined;
-    width?: string | undefined;
-    handleClose?: ((f: string) => void) | undefined;
-    onDoubleClick?: (() => void) | undefined;
-    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    iconsSize?: "sm" | "md" | "lg" | "xl";
+    additionalButtons?: TIconButton[];
+    className?: string;
+    sx?: ThemeUIStyleObject;
+    width?: string;
+    handleClose?: (f: string) => void;
+    onDoubleClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 } & React$1.RefAttributes<unknown>>;
 
 declare const Dropzone: ({ sx, className, messageError, progress, defaultLabel, draggingLabel, onClick, onChange, }: {
-    sx?: ThemeUIStyleObject | undefined;
-    className?: string | undefined;
-    messageError?: string | undefined;
-    progress?: number | undefined;
-    defaultLabel?: string | undefined;
-    draggingLabel?: string | undefined;
-    onClick?: ((e: MouseEvent$1) => void) | undefined;
-    onChange?: ((e: File[]) => any) | undefined;
+    sx?: ThemeUIStyleObject;
+    className?: string;
+    messageError?: string;
+    progress?: number;
+    defaultLabel?: string;
+    draggingLabel?: string;
+    onClick?: (e: MouseEvent$1) => void;
+    onChange?: (e: File[]) => any;
 }) => React__default.JSX.Element;
 
 declare class TableParameter extends Parameter<ITableParameterProps> {
@@ -2013,10 +2017,10 @@ declare class FilterDTO<T extends IFilterDTOState = IFilterDTOState> {
     Component: (({ renderers, multipleInputBoxProps, }: {
         renderers?: {
             input?: FC<InputProps & {
-                label?: string | undefined;
-            }> | undefined;
-        } | undefined;
-        multipleInputBoxProps?: BoxProps | undefined;
+                label?: string;
+            }>;
+        };
+        multipleInputBoxProps?: BoxProps;
     }) => React$1.JSX.Element) & {
         displayName: string;
     };
@@ -2143,7 +2147,7 @@ declare class Parameter<T extends IParameter = IParameter> implements ParameterO
 
 declare const ParameterRender: (({ index, omitLabel, parameter, }: {
     index: number;
-    omitLabel?: boolean | undefined;
+    omitLabel?: boolean;
     parameter: Parameter;
 }) => React$1.JSX.Element | null) & {
     displayName: string;
@@ -2152,8 +2156,8 @@ declare const ParameterRender: (({ index, omitLabel, parameter, }: {
 type ParametersMap = Record<string, ParameterObject>;
 declare const Parameters: (({ label, ownerName, parameters, }: {
     label?: ReactNode;
-    ownerName?: string | undefined;
-    parameters?: ParametersMap | undefined;
+    ownerName?: string;
+    parameters?: ParametersMap;
 }) => React$1.JSX.Element | undefined) & {
     displayName: string;
 };

package/dist/index.js

@@ -3914,6 +3914,7 @@ class AutocompleteController {
   constructor(properties) {
     __publicField$f(this, "state", {
       disabled: false,
+      readOnly: false,
       id: uniqueId$3("autocomplete"),
       loading: false,
       options: [],
@@ -4120,7 +4121,7 @@ class AutocompleteController {
     }
   }
   async setValue(value) {
-    if (this.state.disabled) {
+    if (this.state.disabled || this.state.readOnly) {
       return;
     }
     const selectedOption = this.state.options.find((c) => c.value === value);
@@ -4167,7 +4168,7 @@ const SearchBox = observer(() => {
         Input,
         {
           ref: inputRef,
-          className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""}`,
+          className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
           onChange: (ev) => {
             handler.search(ev.target.value);
           },
@@ -6011,7 +6012,9 @@ const FileCard = forwardRef(
         key: name,
         className: `fileCard ${className ?? ""}`,
         onDoubleClick,
-        onClick
+        onClick,
+        title: name,
+        tabIndex: 0
       },
       /* @__PURE__ */ jsxs(Box, { className: "fileCard__content", children: [
         /* @__PURE__ */ jsx(FileIcon, { docName: name, iconSize: iconsSize }),
@@ -9583,12 +9586,14 @@ const ToolbarIconButton = ({
       if (context.itemsState[id].toggled !== void 0) {
         setInnerIsToggled(!!context.itemsState[id].toggled);
       }
-    } else
+    } else {
+      const o = context.itemsState[id];
       context.itemsState[id] = {
         disabled: isDisabled,
         toggled: innerIsToggled,
-        ...context.itemsState[id]
+        ...o
       };
+    }
   });
   return /* @__PURE__ */ jsx(
     IconButton,