@m4l/layouts 9.3.17-BE20260111-beta.1 → 9.3.17-BE20260122-1

package/components/ModuleDetailTabs/ModuleDetailTabs.d.ts

@@ -1,5 +1,33 @@
 import { ModuleDetailTabsProps } from './types';
 /**
- * Componente para mostrar un listado de tabs y contenido en un MasterDetail, basado en las props
+ * Componente para mostrar un listado de tabs y contenido en un MasterDetail
+ *
+ * Este componente renderiza una interfaz de tabs que muestra información detallada
+ * del registro seleccionado en el master (lista principal). Cada tab puede mostrar
+ * diferentes aspectos o secciones de información del mismo registro.
+ *
+ * Características principales:
+ * - Renderiza tabs dinámicos basados en la configuración proporcionada
+ * - Inyecta automáticamente los datos del registro seleccionado a cada tab
+ * - Soporta condiciones de visibilidad para mostrar/ocultar tabs dinámicamente
+ * - Puede obtener datos adicionales desde un endpoint opcional
+ * - Maneja estados de carga, errores y privilegios automáticamente
+ * @template T - Tipo de los datos del registro seleccionado en el master
+ * @example
+ * ```tsx
+ * <ModuleDetailTabs
+ *   defaultTab="main"
+ *   urlAssetsPrefix="https://api.example.com"
+ *   tabs={[
+ *     {
+ *       value: 'main',
+ *       tabContent: MainTab,
+ *       dictionaryId: 'general',
+ *       icon: '/icons/tab-general.svg',
+ *       hasBackground: true
+ *     }
+ *   ]}
+ * />
+ * ```
  */
 export declare function ModuleDetailTabs<T extends Record<string, any> = Record<string, any>>(props: ModuleDetailTabsProps<T>): import("react/jsx-runtime").JSX.Element;

package/components/ModuleDetailTabs/types.d.ts

@@ -3,58 +3,157 @@ import { TabProps } from '@m4l/components';
 import { NetworkProps } from '@m4l/core';
 /**
  * Props obligatorias que deben tener todos los componentes de tab
- * Estas props serán inyectadas automáticamente por ModuleDetailTabs
+ *
+ * Estas props serán inyectadas automáticamente por ModuleDetailTabs a cada
+ * componente de tab. No es necesario pasarlas manualmente al definir los tabs.
+ * @template T - Tipo de los datos del registro seleccionado en el master
+ * @template K - Tipo de los datos adicionales obtenidos desde un endpoint (opcional)
  */
 export interface ModuleDetailTabContent<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>> {
     /**
-     * data - Contiene los datos del registro seleccionado en el master
-     * Esta prop es OBLIGATORIA para todos los componentes de tab
+     * Datos del registro seleccionado en el master (lista principal)
+     *
+     * Esta prop contiene toda la información del registro que el usuario
+     * seleccionó en la lista principal. Es OBLIGATORIA y siempre estará disponible.
+     *
+     * Ejemplo: Si el usuario selecciona un inventario con id: 1001, name: "Inventario A",
+     * entonces data contendrá { id: 1001, name: "Inventario A", ... }
      */
     data: T;
     /**
-     * endPointData - Contiene los datos del endpoint de detalle, en caso de haberse configurado.
+     * Datos adicionales obtenidos desde un endpoint de detalle (opcional)
+     *
+     * Solo estará disponible si se configuró la prop `getEndPoint` en ModuleDetailTabsProps.
+     * Contiene información complementaria que se obtiene mediante una petición HTTP
+     * adicional al seleccionar un registro en el master.
+     *
+     * Ejemplo: Información detallada como descripción, ubicación, historial, etc.
      */
     endPointData?: K;
     /**
-     * hasPrivilegeDetail - Indica si el usuario tiene privilegio para ver el detalle.
+     * Indica si el usuario tiene privilegios para ver el detalle
+     *
+     * Se establece automáticamente basándose en la respuesta del endpoint.
+     * Si el endpoint retorna un error 403 (Forbidden), este valor será false.
      */
     hasPrivilegeDetail?: boolean;
     /**
-     * refreshDetail - Función para refrescar el detalle.
+     * Función para refrescar los datos del detalle
+     *
+     * Al llamar a esta función, se volverá a ejecutar la petición al endpoint
+     * configurado en `getEndPoint` para obtener los datos actualizados.
+     *
+     * Útil cuando se necesita actualizar la información después de una acción
+     * (por ejemplo, después de editar o eliminar un registro).
      */
     refreshDetail: () => void;
 }
+/**
+ * Interfaz base para las propiedades comunes de todos los tabs
+ *
+ * Extiende TabProps de @m4l/components pero omite 'label' ya que
+ * se genera automáticamente desde el dictionaryId o se puede personalizar.
+ */
 interface ModuleDetailBaseTab extends Omit<TabProps, 'label'> {
     /**
-     * "dictionaryId" Id del diccionario para el label.
+     * ID del diccionario para obtener la etiqueta traducida del tab
+     *
+     * Si se proporciona, el label del tab se obtendrá automáticamente
+     * del diccionario usando este ID. Si no se proporciona, el tab no
+     * tendrá label visible (aunque puede tener icono).
+     *
+     * Ejemplo: 'general', 'secondary', 'details', etc.
      */
     dictionaryId?: string;
     /**
-     * "unmountable" Indica si el tab se desmonta cuando el tab no está seleccionado, default: true
+     * Indica si el componente del tab se desmonta cuando no está seleccionado
+     *
+     * - true (default): El componente se desmonta completamente cuando se cambia de tab.
+     *   Útil para mejorar el rendimiento y resetear el estado del componente.
+     *
+     * - false: El componente permanece montado pero oculto. Útil cuando se necesita
+     *   mantener el estado del componente al cambiar entre tabs.
      */
     unmountable?: boolean;
 }
 type ComponentWithData<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>, C extends React.ElementType = React.ElementType> = React.FunctionComponent<ModuleDetailTabContent<T, K> & React.ComponentProps<C>>;
+/**
+ * Interfaz para definir un tab en ModuleDetailTabs
+ *
+ * Cada tab representa una sección de información que se muestra cuando
+ * el usuario selecciona un registro en el master (lista principal).
+ * @template T - Tipo de los datos del registro seleccionado en el master
+ * @template K - Tipo de los datos adicionales obtenidos desde un endpoint
+ * @template C - Tipo del componente React que renderiza el contenido del tab
+ */
 export interface ModuleDatailTab<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>, C extends React.ElementType = React.ElementType> extends ModuleDetailBaseTab {
     /**
-     * "value" Valor o key del tab
+     * Identificador único del tab (valor o key)
+     *
+     * Debe ser único entre todos los tabs. Se usa para identificar
+     * qué tab está activo y para cambiar entre tabs.
+     *
+     * Ejemplo: 'main', 'secondary', 'details', 'logs', etc.
      */
     value: string;
     /**
-     * "tabContent" Contenido del tab, debe ser un componente que acepte como mínimo
-     * la prop "data" (DetailComponentProps) que será inyectada automáticamente
+     * Componente React que renderiza el contenido del tab
+     *
+     * IMPORTANTE: Debe ser el componente sin instanciar (la función/clase),
+     * NO una instancia del componente (<Component />).
+     *
+     * El componente debe aceptar las props definidas en ModuleDetailTabContent,
+     * que serán inyectadas automáticamente:
+     * - data: Datos del registro seleccionado
+     * - endPointData: Datos adicionales del endpoint (opcional)
+     * - hasPrivilegeDetail: Si tiene privilegios
+     * - refreshDetail: Función para refrescar
+     *
+     * Ejemplo: tabContent: MainTab (no <MainTab />)
      */
-    tabContent: ComponentWithData<T, K>; /**Elemento no instanciado de react, solamente la funcion */
+    tabContent: ComponentWithData<T, K>;
     /**
-     * "componentProps" Propiedades adicionales del componente del tab.
-     * IMPORTANTE: No se puede sobrescribir la prop "data" aquí, ya que será inyectada
-     * automáticamente por ModuleDetailTabs
+     * Propiedades adicionales que se pasarán al componente del tab
+     *
+     * Estas props se combinarán con las props automáticas (data, endPointData, etc.)
+     * que inyecta ModuleDetailTabs.
+     *
+     * IMPORTANTE: No se puede sobrescribir ninguna prop de ModuleDetailTabContent
+     * (data, endPointData, hasPrivilegeDetail, refreshDetail) ya que estas son
+     * inyectadas automáticamente y tienen prioridad.
+     *
+     * Ejemplo: { customProp: 'value', onCustomAction: () => {} }
      */
     componentProps?: Omit<React.ComponentProps<C>, keyof ModuleDetailTabContent<T, K>>;
     /**
-     * Indica si el contenido del tab debe tener un fondo, default: false
+     * Indica si el contenido del tab debe tener un fondo visual
+     *
+     * - true: El contenido tendrá un fondo (generalmente blanco o gris claro)
+     * - false (default): El contenido no tendrá fondo, será transparente
+     *
+     * Útil para diferenciar visualmente el contenido del tab del fondo de la aplicación.
      */
     hasBackground?: boolean;
+    /**
+     * Función opcional que determina si el tab debe mostrarse u ocultarse
+     *
+     * Esta función se evalúa cada vez que cambian los datos del detalle o del endpoint.
+     * Permite mostrar u ocultar tabs dinámicamente según las condiciones del negocio.
+     * @param detailData - Datos del registro seleccionado en el master
+     * @param endPointData - Datos adicionales del endpoint (puede ser undefined)
+     * @returns true si el tab debe mostrarse, false si debe ocultarse
+     *
+     * Ejemplo:
+     * ```typescript
+     * visibilityCondition: (detailData, endPointData) => {
+     *   // Solo mostrar si el inventario está activo
+     *   return detailData?.status === 'activo';
+     * }
+     * ```
+     *
+     * Si no se proporciona, el tab siempre se mostrará (siempre que haya una selección en el master).
+     */
+    visibilityCondition?: (detailData: T, endPointData?: K) => boolean;
 }
 /**
  * Interfaz para las props del tab de logs
@@ -91,27 +190,82 @@ export interface ModuleDetailOtherObjectLogs<T> extends ModuleDetailBaseObjectLo
     getObjectSerialId: (detailData: T) => string;
 }
 export type ModuleDetailObjectLogs<T extends Record<string, any>> = ModuleDetailM4LObjectLogs<T> | ModuleDetailOtherObjectLogs<T>;
+/**
+ * Props principales del componente ModuleDetailTabs
+ *
+ * Define la configuración completa de los tabs que se mostrarán cuando
+ * el usuario seleccione un registro en el master (lista principal).
+ * @template T - Tipo de los datos del registro seleccionado en el master
+ * @template K - Tipo de los datos adicionales obtenidos desde un endpoint
+ */
 export interface ModuleDetailTabsProps<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>> {
     /**
-     * "defaultTab" Valor o key del tab por defecto, default: el primer tab
+     * Identificador del tab que se mostrará por defecto al seleccionar un registro
+     *
+     * Debe coincidir con el 'value' de uno de los tabs definidos en la lista 'tabs'.
+     * Si no se proporciona o el tab especificado no está disponible, se mostrará
+     * el primer tab de la lista.
+     *
+     * Ejemplo: 'main', 'general', 'details'
      */
     defaultTab: string;
     /**
-     * "urlAssetsPrefix" Prefijo de la url para la ruta de los iconos, en algunos casos es:
-     *   - host_api_remote
-     *   - host_static_asset/environment_assets
+     * Prefijo de la URL base para cargar los iconos de los tabs
+     *
+     * Se concatena con la ruta del icono definida en cada tab para formar
+     * la URL completa del icono.
+     *
+     * Ejemplos comunes:
+     * - host_api_remote
+     * - host_static_asset/environment_assets
+     * - https://cdn.example.com/assets
+     *
+     * Ejemplo de uso:
+     * Si urlAssetsPrefix = 'https://api.example.com' y el icono es '/icons/tab-icon.svg',
+     * la URL final será: 'https://api.example.com/icons/tab-icon.svg'
      */
     urlAssetsPrefix: string;
     /**
-     * "tabs" Lista de tabs con los siguientes campos:
+     * Lista de tabs que se mostrarán en el componente
+     *
+     * Cada tab define su contenido, icono, etiqueta, condiciones de visibilidad, etc.
+     * Los tabs se mostrarán en el orden en que aparecen en este array.
+     *
+     * Ver ModuleDatailTab para más detalles sobre la estructura de cada tab.
      */
     tabs: ModuleDatailTab<T, K>[];
     /**
-     * ObjectLogs props
+     * Configuración opcional para agregar un tab de logs automáticamente
+     *
+     * Si se proporciona, se agregará un tab adicional al final de la lista
+     * que muestra los logs/auditoría del objeto seleccionado.
+     *
+     * Soporta dos tipos:
+     * - 'm4l': Para objetos del sistema M4L (requiere resourceId y getObjectId)
+     * - 'other': Para objetos externos (requiere resourceTypeId y getObjectSerialId)
+     *
+     * Ver ModuleDetailObjectLogs para más detalles.
      */
     objectLogsProps?: ModuleDetailObjectLogs<T>;
     /**
-     * "endPoint" Endpoint para obtener los datos del detalle., en caso de que se requiera.
+     * Función opcional para obtener los datos adicionales desde un endpoint
+     *
+     * Si se proporciona, se ejecutará una petición HTTP al seleccionar un registro
+     * en el master. Los datos obtenidos se pasarán a todos los componentes de tab
+     * a través de la prop 'endPointData'.
+     * @param masterSelection - El registro seleccionado en el master
+     * @returns Configuración de la petición HTTP (NetworkProps)
+     *
+     * Ejemplo:
+     * ```typescript
+     * getEndPoint: (inventory) => ({
+     *   method: 'GET',
+     *   endPoint: `/api/inventories/${inventory.id}/details`
+     * })
+     * ```
+     *
+     * Los datos retornados por el endpoint estarán disponibles en todos los tabs
+     * a través de la prop 'endPointData' de ModuleDetailTabContent.
      */
     getEndPoint?: (masterSelection: T) => NetworkProps;
 }

package/components/ModuleDetailTabs/useModuleDatailTabs.d.ts

@@ -16,6 +16,7 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         tabContent: import('react').FunctionComponent<any>;
         componentProps?: Omit<any, keyof import('./types').ModuleDetailTabContent<T_1, K_1>> | undefined;
         hasBackground?: boolean;
+        visibilityCondition?: ((detailData: T, endPointData?: K | undefined) => boolean) | undefined;
         dictionaryId?: string;
         size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
         children?: null | undefined;

package/components/ModuleDetailTabs/useModuleDatailTabs.js

@@ -46,19 +46,39 @@ function useModuleDetailTabs(props) {
         icon: "/main/na/icons/i_common_master_detail_layout_detail_tab_logs"
       });
     }
-    return arrTabs.map((tab) => ({
+    const processedTabs = arrTabs.map((tab) => ({
       ...tab,
       unmountable: tab.unmountable === void 0 ? true : tab.unmountable,
       icon: typeof tab.icon === "string" ? /* @__PURE__ */ jsx(Icon, { src: `${urlAssetsPrefix}${tab.icon}` }) : tab.icon,
       label: tab.dictionaryId ? getLabel(tab.dictionaryId) : void 0
     }));
-  }, [masterSelection, tabs, objectLogsProps, urlAssetsPrefix, getLabel]);
+    return processedTabs.filter((tab) => {
+      if (tab.visibilityCondition) {
+        return tab.visibilityCondition(detailData, endPointData);
+      }
+      return true;
+    });
+  }, [masterSelection, tabs, objectLogsProps, urlAssetsPrefix, getLabel, detailData, endPointData]);
   useEffect(() => {
     if (masterSelection === void 0 || masterSelection.length === 0) {
       return;
     }
     setDetailData(masterSelection[0]);
   }, [masterSelection]);
+  useEffect(() => {
+    if (finalTabs.length === 0) {
+      return;
+    }
+    const currentTabExists = finalTabs.some((tab) => tab.value === currentTab);
+    if (!currentTabExists) {
+      const defaultTabExists = finalTabs.some((tab) => tab.value === defaultTab);
+      if (defaultTabExists) {
+        setCurrentTab(defaultTab);
+      } else {
+        setCurrentTab(finalTabs[0].value);
+      }
+    }
+  }, [finalTabs, currentTab, defaultTab]);
   const conditionNoMasterSelection = masterSelection === void 0 || masterSelection.length === 0;
   useEffect(() => {
     if (!getEndPoint) {

package/hooks/useDynamicAccordions/index.d.ts

@@ -1,2 +1,2 @@
 export * from './useDynamicAccordions';
-export type { useDynamicAccordionsProps, ConfigDynamicAccordion as DynamicAccordion, DynamicAccordionValue, GroupConfigDynamicAccordion as DynamicAccordionGroup, GroupConfigDynamicAccordion } from './types';
+export type { useDynamicAccordionsProps, ConfigDynamicAccordion as DynamicAccordion, DynamicAccordionValue, GroupConfigDynamicAccordion as DynamicAccordionGroup } from './types';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.3.17-BE20260111-beta.1",
+  "version": "9.3.17-BE20260122-1+PR22-moduledetailtabs-condicional",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/components": "9.4.6-BE20260111-beta.1",
+    "@m4l/components": "^9.0.0",
     "@m4l/core": "^2.0.0",
     "@m4l/graphics": "^7.0.0",
     "@m4l/styles": "^7.0.0"

package/storybook/layouts/ModuleDetailTabs/ModuleDetailTabs.stories.d.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ModuleDetailTabs } from '../../../src/components/ModuleDetailTabs/ModuleDetailTabs';
+declare const meta: Meta<typeof ModuleDetailTabs>;
+type Story = StoryObj<typeof ModuleDetailTabs>;
+/**
+ * Historia por defecto: Muestra todos los tabs disponibles sin condiciones de visibilidad
+ *
+ * En este ejemplo:
+ * - Se muestran 2 tabs: "General" y "Secundario"
+ * - El tab "General" está seleccionado por defecto
+ * - Ambos tabs muestran información del inventario con ID 1001
+ * - No hay condiciones que oculten ningún tab
+ */
+export declare const Default: Story;
+/**
+ * Historia con condición de visibilidad: Demuestra cómo ocultar tabs dinámicamente
+ *
+ * En este ejemplo:
+ * - El tab "General" siempre se muestra
+ * - El tab "Secundario" se oculta cuando el ID del inventario es igual a 1001
+ * - Como el mockInventoryData tiene id: 1001, el tab "Secundario" NO será visible
+ *
+ * Para ver el tab "Secundario", cambiaría el ID del inventario a cualquier otro valor
+ * (por ejemplo, 2001) y entonces el tab se mostraría.
+ */
+export declare const WithVisibilityCondition: Story;
+/**
+ * Historia con control dinámico de visibilidad: Demuestra cómo cambiar la visibilidad
+ * de los tabs mediante interacción del usuario
+ *
+ * En este ejemplo:
+ * - Inicialmente ambos tabs ("General" y "Secundario") son visibles
+ * - El tab "General" contiene un botón de control interno
+ * - Al hacer clic en el botón "Ocultar Tab Secundario", el tab "Secundario" se oculta
+ * - Solo el tab "General" permanece visible después de la interacción
+ *
+ * Este caso de uso es útil cuando se necesita controlar la visibilidad de tabs
+ * basándose en acciones del usuario o estados internos de la aplicación.
+ */
+export declare const InteractionWithDynamicVisibilityControl: Story;
+export default meta;

package/storybook/layouts/NoAuthModuleLayout/NoAuthModuleLayout.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import { NoAuthModuleLayout } from '../../../src/layouts/NoAuthModuleLayout/index';
 declare const meta: Meta<typeof NoAuthModuleLayout>;
 type Story = StoryObj<typeof NoAuthModuleLayout>;