@m4l/layouts 9.1.9 → 9.1.10

package/components/MFHostApp/MFHostApp.d.ts

@@ -0,0 +1,6 @@
+import { MFHostAppProps } from './types';
+/**
+ * Componente que envuelve la aplicación de un microfrontend
+ */
+export declare function MFHostApp(props: MFHostAppProps): import("react/jsx-runtime").JSX.Element;
+export default MFHostApp;

package/components/MFHostApp/MFHostApp.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { DeviceTypeProvider, LocalesProvider, HostThemeProvider, FormatterProvider } from "@m4l/graphics";
+import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
+import { M as MFWindowsTitle } from "../MFWindowsTitle/MFWindowsTitle.js";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    isAddEditModule = false
+  } = props;
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
+    HostThemeProvider,
+    {
+      isMicroFrontEnd: true,
+      ...hostTheme,
+      children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
+        DomainCountryProvider,
+        {
+          isMicroFrontEnd: true,
+          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+          currency: formatters.currencyFormatter.code,
+          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+          decimal_symbol: formatters.numberFormatter.decimalSymbol,
+          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+          children: /* @__PURE__ */ jsx(
+            BaseModule,
+            {
+              isAuth,
+              moduleId,
+              moduleNameField,
+              componentsDictionary,
+              skeletonFlags,
+              privileges,
+              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
+            }
+          )
+        }
+      ) })
+    }
+  ) }) }) }) }) });
+}
+export {
+  MFHostApp as M
+};

package/components/MFHostApp/index.d.ts

@@ -1,6 +1,2 @@
-import { MFHostAppProps } from './types';
-/**
- * Componente que envuelve la aplicación de un microfrontend
- */
-export declare function MFHostApp(props: MFHostAppProps): import("react/jsx-runtime").JSX.Element;
-export default MFHostApp;
+export { MFHostApp } from './MFHostApp';
+export type { ByHostProps } from './types';

package/components/MFHostApp/index.js

@@ -1,60 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { unstable_HistoryRouter } from "react-router-dom";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
-import { DeviceTypeProvider, LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
-import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
-import { M as MFWindowsTitle } from "../MFWindowsTitle/MFWindowsTitle.js";
-function MFHostApp(props) {
-  const {
-    children,
-    currentLocale,
-    hostTheme,
-    environment,
-    hostTools,
-    axiosOperation,
-    formatters,
-    isAuth = true,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    dynamicMFStore,
-    windowTools,
-    observedDivRef,
-    isAddEditModule = false
-  } = props;
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: currentLocale, children: /* @__PURE__ */ jsx(
-    HostThemeProvider,
-    {
-      isMicroFrontEnd: true,
-      ...hostTheme,
-      children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history: hostTools.history, children: /* @__PURE__ */ jsx(
-        DomainCountryProvider,
-        {
-          isMicroFrontEnd: true,
-          id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
-          currency: formatters.currencyFormatter.code,
-          currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
-          decimal_symbol: formatters.numberFormatter.decimalSymbol,
-          thousands_symbol: formatters.numberFormatter.thousandsSymbol,
-          children: /* @__PURE__ */ jsx(
-            BaseModule,
-            {
-              isAuth,
-              moduleId,
-              moduleNameField,
-              componentsDictionary,
-              skeletonFlags,
-              privileges,
-              children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx(MFWindowsTitle, { isAddEditModule, children: /* @__PURE__ */ jsx(AppearanceComponentProvider, { children }) }) }) }) })
-            }
-          )
-        }
-      ) }) })
-    }
-  ) }) }) }) }) });
-}
-export {
-  MFHostApp as M
-};
+

package/components/MFHostApp/types.d.ts

@@ -10,7 +10,10 @@ export interface ByHostProps {
     formatters: Formatters;
     dynamicMFStore: DynamicMFStore;
     windowTools: WindowToolsMF;
-    observedDivRef: Element | Text | null;
+    /**
+     * @deprecated no usar, no tiene efecto. esto se usaba para detectar la resposividad de los breakpoints
+     */
+    observedDivRef?: Element | Text | null;
     /**
      * isAddEditModule saber si el módulo es tipo add/edit, para poder asignar el title automáticamente
      * cuando se cambia el idioma, desde MFHostApp/MFWindowsTitle

package/components/MFNoAuthApp/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { DomainCountryProvider } from "@m4l/core";
-import { DeviceTypeProvider, FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
+import { DeviceTypeProvider, FormatterProvider } from "@m4l/graphics";
 import { BaseModule } from "@m4l/components";
 function MFNoAuthApp(props) {
   const {
@@ -11,8 +11,7 @@ function MFNoAuthApp(props) {
     skeletonFlags,
     privileges,
     componentsDictionary,
-    isAuth,
-    observedDivRef
+    isAuth
   } = props;
   const domianCountry = {
     id: 1,
@@ -30,7 +29,7 @@ function MFNoAuthApp(props) {
       componentsDictionary,
       skeletonFlags,
       privileges,
-      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, { observedDivRef, children }) })
+      children: /* @__PURE__ */ jsx(FormatterProvider, { isMicroFrontEnd: true, ...formatters, children })
     }
   ) }) });
 }

package/components/MFNoAuthApp/types.d.ts

@@ -5,5 +5,8 @@ export interface ByHostProps {
     windowTools: WindowToolsMF;
 }
 export interface MFNoAuthAppProps extends ByHostProps, BaseModuleProps {
-    observedDivRef: Element | Text | null;
+    /**
+     * @deprecated no usar, no tiene efecto. esto se usaba para detectar la resposividad de los breakpoints
+     */
+    observedDivRef?: Element | Text | null;
 }

package/components/ModuleDetailTabs/ModuleDetailTabs.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDetailTabsProps } from './types';
+/**
+ * Componente para mostrar un listado de tabs y contenido en un MasterDetail, basado en las props
+ */
+export declare function ModuleDetailTabs(props: ModuleDetailTabsProps): import("react/jsx-runtime").JSX.Element;

package/components/ModuleDetailTabs/ModuleDetailTabs.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NoItemSelected, ModalProvider, Stack, Tabs, Tab, TabContent } from "@m4l/components";
+import { u as useModuleDetailTabs } from "./useModuleDatailTabs.js";
+function ModuleDetailTabs(props) {
+  const { conditionNoMasterSelection, currentTab, detailData, finalTabs, handleChangeTab, hasPrivilegeDetail, endPointData } = useModuleDetailTabs(props);
+  if (conditionNoMasterSelection) {
+    return /* @__PURE__ */ jsx(NoItemSelected, {});
+  }
+  if (!hasPrivilegeDetail) {
+    return /* @__PURE__ */ jsx("div", { children: "No tiene privilegio para ver el detalle" });
+  }
+  return /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentTab,
+        scrollButtons: "auto",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        onChange: (_e, value) => handleChangeTab(value),
+        children: finalTabs.map((tab) => {
+          const { value, label } = tab;
+          return /* @__PURE__ */ jsx(Tab, { value, label }, value);
+        })
+      }
+    ),
+    finalTabs.map((tab) => {
+      const isMatched = tab.value === currentTab;
+      return (isMatched || !tab.unmountable) && /* @__PURE__ */ jsx(
+        TabContent,
+        {
+          style: { display: isMatched ? "flex" : "none" },
+          children: /* @__PURE__ */ jsx(tab.tabContent, { data: detailData, endPointData, hasPrivilegeDetail, ...tab.componentProps })
+        },
+        tab.value
+      );
+    })
+  ] }) });
+}
+export {
+  ModuleDetailTabs as M
+};

package/components/ModuleDetailTabs/index.d.ts

@@ -0,0 +1,2 @@
+export { ModuleDetailTabs } from './ModuleDetailTabs';
+export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';

package/components/ModuleDetailTabs/index.js

@@ -0,0 +1 @@
+

package/components/ModuleDetailTabs/types.d.ts

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+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
+ */
+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
+     */
+    data: T;
+    /**
+     * endPointData - Contiene los datos del endpoint de detalle, en caso de haberse configurado.
+     */
+    endPointData?: K;
+    /**
+     * hasPrivilegeDetail - Indica si el usuario tiene privilegio para ver el detalle.
+     */
+    hasPrivilegeDetail?: boolean;
+}
+interface ModuleDetailBaseTab extends Omit<TabProps, 'label'> {
+    /**
+     * "dictionaryId" Id del diccionario para el label.
+     */
+    dictionaryId?: string;
+    /**
+     * "unmountable" Indica si el tab se desmonta cuando el tab no está seleccionado, default: true
+     */
+    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>>;
+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
+     */
+    value: string;
+    /**
+     * "tabContent" Contenido del tab, debe ser un componente que acepte como mínimo
+     * la prop "data" (DetailComponentProps) que será inyectada automáticamente
+     */
+    tabContent: ComponentWithData<T, K>; /**Elemento no instanciado de react, solamente la funcion */
+    /**
+     * "componentProps" Propiedades adicionales del componente del tab.
+     * IMPORTANTE: No se puede sobrescribir la prop "data" aquí, ya que será inyectada
+     * automáticamente por ModuleDetailTabs
+     */
+    componentProps?: Omit<React.ComponentProps<C>, keyof ModuleDetailTabContent<T, K>>;
+}
+/**
+ * Interfaz para las props del tab de logs
+ */
+export interface ModuleDetailObjectLogs extends ModuleDetailBaseTab {
+    /**
+     * "resourceId" Id del recurso para el logs.
+     */
+    resourceId: string | number;
+    /**
+     * "getObjectId" Función para obtener el id del objeto.
+     */
+    getObjectId: (detailData: Record<string, any>) => number;
+}
+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
+     */
+    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
+     */
+    urlAssetsPrefix: string;
+    /**
+     * "tabs" Lista de tabs con los siguientes campos:
+     */
+    tabs: ModuleDatailTab<T, K>[];
+    /**
+     * ObjectLogs props
+     */
+    objectLogsProps?: ModuleDetailObjectLogs;
+    /**
+     * "endPoint" Endpoint para obtener los datos del detalle., en caso de que se requiera.
+     */
+    getEndPoint?: (masterSelection: T) => NetworkProps;
+}
+export {};

package/components/ModuleDetailTabs/useModuleDatailTabs.d.ts

@@ -0,0 +1,308 @@
+import { ModuleDetailTabContent, ModuleDetailTabsProps } from './types';
+/**
+ * Componente para mostrar un listado de tabs y contenido en un MasterDetail, basado en las props
+ */
+export declare function useModuleDetailTabs<T extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>>(props: ModuleDetailTabsProps<T, K>): {
+    conditionNoMasterSelection: boolean;
+    currentTab: string;
+    detailData: any;
+    endPointData: any;
+    hasPrivilegeDetail: boolean;
+    finalTabs: {
+        unmountable: boolean;
+        icon: import("react/jsx-runtime").JSX.Element | undefined;
+        label: string | undefined;
+        value: string;
+        tabContent: import('react').FunctionComponent<any>;
+        componentProps?: Omit<any, keyof ModuleDetailTabContent<T_1, K_1>> | undefined;
+        dictionaryId?: string;
+        size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
+        children?: null | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+        title?: string | undefined;
+        component?: React.ElementType | undefined;
+        id?: string | undefined;
+        disabled?: boolean | undefined;
+        action?: React.Ref<import('@mui/material').ButtonBaseActions> | undefined;
+        hidden?: boolean | undefined;
+        color?: Extract<import('@m4l/styles').ComponentPalletColor, "default"> | undefined;
+        content?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        translate?: "yes" | "no" | undefined;
+        urlIcon?: string | undefined;
+        lang?: string | undefined;
+        slot?: string | undefined;
+        dir?: string | undefined;
+        className?: string | undefined;
+        classes?: (Partial<import('@mui/material').TabClasses> & Partial<import('@mui/material').ClassNameMap<never>>) | undefined;
+        sx?: import('@mui/system').SxProps<import('@mui/material').Theme> | undefined;
+        key?: import('react').Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: NonNullable<React.HTMLAttributes<any>["tabIndex"]> | undefined;
+        radioGroup?: string | undefined;
+        role?: import('react').AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResizeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        centerRipple?: boolean | undefined;
+        disableRipple?: boolean | undefined;
+        disableTouchRipple?: boolean | undefined;
+        focusRipple?: boolean | undefined;
+        focusVisibleClassName?: string | undefined;
+        LinkComponent?: React.ElementType | undefined;
+        onFocusVisible?: React.FocusEventHandler<any> | undefined;
+        TouchRippleProps?: Partial<import('@mui/material/ButtonBase/TouchRipple').TouchRippleProps> | undefined;
+        touchRippleRef?: React.Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
+        disableFocusRipple?: boolean | undefined;
+        dataTestId?: string | undefined;
+        iconPosition?: ("top" | "bottom" | "start" | "end") | undefined;
+        wrapped?: boolean | undefined;
+    }[];
+    handleChangeTab: (newValue: string) => void;
+};