@m4l/components 9.3.19-BE171025-beta.1 → 9.3.19-BE241025-beta.2

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { O as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/components/CardDetails.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/CardHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/CardRow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/Cards.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/CheckboxCellAdapter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/ColumnsConfigCards.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/IntersectCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/components/ViewMode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/helpers/types.d.ts

@@ -25,6 +25,7 @@ export interface SeedProps {
     withEditors?: boolean;
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
+    visibleColumns?: string[];
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';

package/components/DataGrid/tests/helpers/useCardsViewConfig.d.ts

@@ -0,0 +1,24 @@
+import { CardsViewConfig } from '../../types';
+interface UseCardsViewConfigProps {
+    /**
+     * Si es true, retorna cardsViewConfig con columnsConfig básica
+     */
+    withBasicConfig?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig con customRender
+     */
+    withCustomRender?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig solo con enabled=true (para demostrar error)
+     */
+    withEnabledOnly?: boolean;
+    /**
+     * Si es true, retorna cardsViewConfig con columnKey inválido (para demostrar error)
+     */
+    withInvalidColumnKey?: boolean;
+}
+/**
+ * Hook helper que genera configuraciones de cardsViewConfig para testing
+ */
+export declare const useCardsViewConfigHelper: <TRow = any>(props?: UseCardsViewConfigProps) => CardsViewConfig<TRow> | undefined;
+export {};

package/components/DataGrid/tests/helpers/useCustomCardExample.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook helper que retorna un ejemplo de renderizado custom de cards
+ */
+export declare const useCustomCardExample: () => {
+    renderContent: (row: any) => import("react/jsx-runtime").JSX.Element;
+    minHeight: number;
+};

package/components/DataGrid/tests/hooks/useCardContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/hooks/useModalDetail.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/hooks/useModalSettingsCards.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/tests/hooks/useProcessedColumns.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DataGrid/types.d.ts

@@ -5,7 +5,7 @@ import { MenuAction } from '../MenuActions/types';
 import { ActionsSlots, ColumnIconFormatterSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DATAGRID_PREFIX_NAME } from './constants';
-import { IGridConfig } from './contexts/DataGridContext/types';
+import { IGridConfigExtended, ViewMode } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
 import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
@@ -61,10 +61,10 @@ export interface ColumnConfig {
     position?: number;
     frozen?: Maybe<boolean>;
 }
-type KeyUserColumns = keyof IGridConfig;
+type KeyUserColumns = keyof IGridConfigExtended;
 export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
     reason: T;
-    userConfig: IGridConfig[T];
+    userConfig: IGridConfigExtended[T];
 }
 export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
 export type SortApplied = {
@@ -139,7 +139,7 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     /**
      * Propiedad opcional que recibe la configuración de las columnas
      */
-    defaultUserColumns?: IGridConfig;
+    defaultUserColumns?: IGridConfigExtended;
     /**
      * Propiedad que recibe la función que se ejecuta cuando se cambian
      * las configuraciones de las columnas.
@@ -150,6 +150,15 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * @default 'medium'
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Modo por defecto de visualización
+     */
+    defaultViewMode?: ViewMode;
+    /**
+     * Configuración de la vista de "cards"
+     * Incluye habilitación, configuración de columnas y renderizado personalizado
+     */
+    cardsViewConfig?: CardsViewConfig<TRow>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -170,6 +179,79 @@ export interface ActionsProps {
     leftActions?: React.ReactNode;
     rightActions?: React.ReactNode;
 }
-export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
+/**
+ * Props para el hook useModalDetail
+ */
+export interface UseModalDetailProps<TRow> {
+    row: TRow;
+    columns: readonly Column<TRow, any>[];
+    viewMode: ViewMode;
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+}
+/**
+ * Configuración de una columna específica en vista "cards"
+ */
+export interface CardColumnConfig {
+    /**
+     * Key de la columna (debe coincidir con la key de la columna)
+     */
+    columnKey: string;
+    /**
+     * Si se debe mostrar el título/label de esta columna en la card (Solo si no existe una config previa)
+     */
+    showTitle: boolean;
+}
+/**
+ * Cards con columnsConfig
+ */
+export interface CardsViewConfigWithColumns {
+    columnsConfig: CardColumnConfig[];
+    customRender?: never;
+}
+/**
+ * Cards con customRender
+ */
+export interface CardsViewConfigWithCustomRender<TRow> {
+    columnsConfig?: never;
+    customRender: {
+        renderContent: (row: TRow) => React.ReactNode;
+        minHeight: number;
+    };
+}
+/**
+ * Configuración para la vista de "cards"
+ *
+ * IMPORTANTE:
+ * Es OBLIGATORIO configurar al menos 1 columna cuando customRender=undefined
+ * Se ignora completamente si customRender está definido
+ * @throws Error si customRender=undefined y array está vacío
+ */
+export type CardsViewConfig<TRow> = CardsViewConfigWithColumns | CardsViewConfigWithCustomRender<TRow>;
+/**
+ * Opciones para el procesamiento de columnas
+ */
+export interface ProcessedColumnsOptions {
+    /**
+     * Si es true, aplica el filtro de visibilidad configurado por el usuario.
+     * Si es false, muestra TODAS las columnas.
+     * @default true
+     */
+    applyVisibilityFilter?: boolean;
+}
+/**
+ * Props para el hook useCardContent
+ */
+export interface CardContentProps<TRow> {
+    row: TRow;
+    columns: readonly Column<TRow, any>[];
+    originalColumns: readonly Column<TRow, any>[];
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+}
+export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'> & {
+    viewMode?: ViewMode;
+    isActive?: boolean;
+    hasActions?: boolean;
+    hasCheckedRows?: boolean;
+};
 export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;

package/components/DynamicFilter/helpers/formatToInitialFilters.js

@@ -30,9 +30,9 @@ function formatToInitialFilters(appliedFilters) {
     return {
       name: af.field.name,
       operator: af.operator,
-      ...operand1 ? { operand1 } : {},
-      ...operand2 ? { operand2 } : {},
-      ...operandArray ? { operandArray } : {}
+      ...operand1 !== void 0 ? { operand1 } : {},
+      ...operand2 !== void 0 ? { operand2 } : {},
+      ...operandArray !== void 0 ? { operandArray } : {}
     };
   });
 }

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/helpers.js

@@ -11,12 +11,16 @@ class BooleanFilterHelpers {
    */
   getDefaultFilter(field, fixed) {
     const defaultOperand1 = field.defaultOperand1;
+    let isSet = false;
+    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "boolean") {
+      isSet = true;
+    }
     const defaultFilter = {
       id: 0,
       fieldType: "boolean",
       field,
       fixed,
-      isSet: true,
+      isSet,
       operator: "e",
       operand1: true
     };
@@ -45,7 +49,9 @@ class BooleanFilterHelpers {
     const operator = filterValueBoolean ? filterValueBoolean.operator : field.defaultOperator ?? "e";
     const formValueOperand1 = filterValueBoolean ? {
       value: filterValueBoolean.operand1,
-      label: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operand_${filterValueBoolean.operand1}`)
+      label: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operand_${filterValueBoolean.operand1}`
+      )
     } : null;
     return {
       fieldType: "boolean",
@@ -63,7 +69,9 @@ class BooleanFilterHelpers {
     const labelOperands = filter.operand1 ? getLabel(DICCTIONARY.operand_true) : getLabel(DICCTIONARY.operand_false);
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/helpers.js

@@ -18,12 +18,16 @@ class DateTimeFilterHelpers {
     defaultEndDate.setHours(23, 59, 59, 999);
     const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
     const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+    let isSet = false;
+    if (defaultOperand1 !== void 0) {
+      isSet = true;
+    }
     return {
       id: 0,
       fieldType: "datetime",
       field,
       fixed,
-      isSet: true,
+      isSet,
       operator: "b",
       operand1: defaultOperand1,
       operand2: defaultOperand2
@@ -83,13 +87,21 @@ class DateTimeFilterHelpers {
       labelOperands = filter.operand1 && filter.operand2 ? `${dateFormatter.formatDate(
         filter.operand1,
         dateFormatter.datetimeFormat
-      )} - ${dateFormatter.formatDate(filter.operand2, dateFormatter.datetimeFormat)}` : "";
+      )} - ${dateFormatter.formatDate(
+        filter.operand2,
+        dateFormatter.datetimeFormat
+      )}` : "";
     } else {
-      labelOperands = filter.operand1 ? dateFormatter.formatDate(filter.operand1, dateFormatter.datetimeFormat) : "";
+      labelOperands = filter.operand1 ? dateFormatter.formatDate(
+        filter.operand1,
+        dateFormatter.datetimeFormat
+      ) : "";
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/DynamicFilter/subcomponents/FieldTypes/NumberFilter/helpers.js

@@ -15,12 +15,10 @@ class NumberFilterHelpers {
     const defaultOperand1 = field.defaultOperand1 ?? null;
     const defaultOperand2 = field.defaultOperand2 ?? null;
     let isSet = false;
-    if (fixed) {
-      if (["b"].includes(dOperator)) {
-        isSet = defaultOperand1 !== null && defaultOperand2 !== null ? true : false;
-      } else {
-        isSet = defaultOperand1 !== null ? true : false;
-      }
+    if (["b"].includes(dOperator)) {
+      isSet = defaultOperand1 !== null && defaultOperand2 !== null ? true : false;
+    } else {
+      isSet = defaultOperand1 !== null ? true : false;
     }
     return {
       id: 0,
@@ -85,7 +83,9 @@ class NumberFilterHelpers {
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -100,7 +100,10 @@ class NumberFilterHelpers {
       ),
       formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
         is: "b",
-        then: Yup.number().typeError(getLabel(DICCTIONARY.error_operand_mustbe_number)).min(Yup.ref("formValueOperand1"), getLabel(DICCTIONARY.error_less_than_start))
+        then: Yup.number().typeError(getLabel(DICCTIONARY.error_operand_mustbe_number)).min(
+          Yup.ref("formValueOperand1"),
+          getLabel(DICCTIONARY.error_less_than_start)
+        )
       })
     });
   }

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/helpers.js

@@ -27,13 +27,16 @@ class SelectAsyncFilterHelpers {
     let operandsArray = [];
     if (isMultiple) {
       dOperator = field.defaultOperator ?? "in";
-      isSet = fixed ? defaultOperandsArray !== null && defaultOperandsArray.length > 0 ? true : false : false;
+      isSet = defaultOperandsArray !== null && defaultOperandsArray.length > 0;
       if (field.defaultOperandsArray !== void 0 && Array.isArray(field.defaultOperandsArray)) {
-        operandsArray = filterValidOperandsArraySelectAsync(field.defaultOperandsArray, field);
+        operandsArray = filterValidOperandsArraySelectAsync(
+          field.defaultOperandsArray,
+          field
+        );
       }
     } else {
       dOperator = field.defaultOperator ?? "e";
-      isSet = fixed ? defaultOperand1 ? true : false : false;
+      isSet = defaultOperand1 ? true : false;
     }
     const defaultCommonFilter = {
       id: 0,
@@ -122,15 +125,21 @@ class SelectAsyncFilterHelpers {
     let labelOperands = "";
     if (isMultiple) {
       labelOperands = operandsArray?.reduce?.((label, operand) => {
-        const textLabel = field.selectAsyncOptions?.getOptionLabel?.(operand) || "";
+        const textLabel = field.selectAsyncOptions?.getOptionLabel?.(
+          operand
+        ) || "";
         return label ? `${label} | ${textLabel}` : textLabel;
       }, "")?.toString() || "?";
     } else {
-      labelOperands = (field.selectAsyncOptions?.getOptionLabel?.(filter.operand1) ?? "?") + "";
+      labelOperands = (field.selectAsyncOptions?.getOptionLabel?.(
+        filter.operand1
+      ) ?? "?") + "";
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -163,7 +172,9 @@ class SelectAsyncFilterHelpers {
       return false;
     }
     if (isMultiple) {
-      if (SELECT_ASYNC_OPERATORS_MULTIPLE.findIndex((f) => f === filter.operator) === -1) {
+      if (SELECT_ASYNC_OPERATORS_MULTIPLE.findIndex(
+        (f) => f === filter.operator
+      ) === -1) {
         return false;
       }
       if (!filter.operandsArray || typeof filter.operandsArray !== "object") {
@@ -180,7 +191,9 @@ class SelectAsyncFilterHelpers {
         return false;
       }
     } else {
-      if (SELECT_ASYNC_OPERATORS_SINGLE.findIndex((f) => f === filter.operator) === -1) {
+      if (SELECT_ASYNC_OPERATORS_SINGLE.findIndex(
+        (f) => f === filter.operator
+      ) === -1) {
         return false;
       }
       if (!filter.operand1 || typeof filter.operand1 !== "object") {

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.js

@@ -26,13 +26,15 @@ class SelectFilterHelpers {
     let operandsArray = [];
     if (isMultiple) {
       dOperator = field.defaultOperator ?? "in";
-      isSet = fixed ? defaultOperandsArray !== null && defaultOperandsArray.length > 0 ? true : false : false;
+      isSet = defaultOperandsArray !== null && defaultOperandsArray.length > 0;
       if (field.defaultOperandsArray !== void 0 && Array.isArray(field.defaultOperandsArray)) {
-        operandsArray = filterValidOperandsArraySelect(field.defaultOperandsArray);
+        operandsArray = filterValidOperandsArraySelect(
+          field.defaultOperandsArray
+        );
       }
     } else {
       dOperator = field.defaultOperator ?? "e";
-      isSet = fixed ? defaultOperand1 !== null ? true : false : false;
+      isSet = defaultOperand1 !== null;
     }
     const defaultCommonFilter = {
       id: 0,
@@ -123,7 +125,9 @@ class SelectFilterHelpers {
     let labelOperands = "";
     if (isMultiple) {
       labelOperands = operandsArray?.reduce?.((label, operand) => {
-        const textLabel = field.selectOptions?.options.find((option) => option.id === operand)?.label || "";
+        const textLabel = field.selectOptions?.options.find(
+          (option) => option.id === operand
+        )?.label || "";
         return label ? `${label} | ${textLabel}` : textLabel;
       }, "")?.toString() || "?";
     } else {
@@ -131,7 +135,9 @@ class SelectFilterHelpers {
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -147,9 +153,13 @@ class SelectFilterHelpers {
       }),
       formValueOperand1: Yup.mixed().when(["multiple"], {
         is: false,
-        then: Yup.mixed().test("is-string-or-number", getLabel(DICCTIONARY.error_operand_required), (value) => {
-          return typeof value === "string" || typeof value === "number";
-        }).required(getLabel(DICCTIONARY.error_operand_required))
+        then: Yup.mixed().test(
+          "is-string-or-number",
+          getLabel(DICCTIONARY.error_operand_required),
+          (value) => {
+            return typeof value === "string" || typeof value === "number";
+          }
+        ).required(getLabel(DICCTIONARY.error_operand_required))
       })
     });
   }

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.js

@@ -12,8 +12,8 @@ class StringFilterHelpers {
   getDefaultFilter(field, fixed) {
     const defaultOperand1 = field.defaultOperand1;
     let isSet = false;
-    if (fixed) {
-      isSet = defaultOperand1 !== null ? true : false;
+    if (defaultOperand1 !== null && typeof defaultOperand1 === "string") {
+      isSet = true;
     }
     const defaultFilter = {
       id: 0,
@@ -64,7 +64,9 @@ class StringFilterHelpers {
     const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/EditLabel/hooks/useEditLabel.d.ts

@@ -5,6 +5,7 @@ export interface UseEditLabelProps {
 export interface UseEditLabelReturn {
     inEdition: boolean;
     value: string;
+    inputRef: React.RefObject<HTMLInputElement>;
     buttonSubmitRef: React.RefObject<HTMLButtonElement>;
     buttonCancelRef: React.RefObject<HTMLButtonElement>;
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/components/LanguagePopover/LanguagePopover.js

@@ -70,6 +70,8 @@ function LanguagePopover(props) {
       ownerState: {
         size: currentSize
       },
+      role: "button",
+      "aria-label": "Language selector",
       size: currentSize,
       className: classRoot,
       ...getPropDataTestId(LANGUAGE_POPOVER_KEY_COMPONENT, LanguagePopoverSlots.root),

package/components/MFIsolationApp/MFIsolationApp.js

@@ -43,7 +43,7 @@ function MFIsolationApp(props) {
     forcedDeviceType,
     areasStoreId,
     areasStoreDevtoolsEnabled,
-    appBarSettings = false
+    appBarSettings = true
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback(
@@ -134,12 +134,9 @@ function MFIsolationApp(props) {
                 onLoad,
                 loadAreasFromNetwork: activeAreasNetwork,
                 loadCookiesFromNetwork: activeCookiesFromNetwork,
-                onSelectLayout: (modId) => {
-                  console.log("onSelectLayout", modId);
-                },
-                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
+                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", position: "absolute", children: [
                   appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
-                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
+                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", position: "relative", children })
                 ] })
               }
             )

package/components/MFIsolationApp/subcomponents/AppBarSettings/AppBarSettings.js

@@ -12,7 +12,7 @@ function AppBarSettings() {
     /* @__PURE__ */ jsx(Stack, { width: "100%", height: "100%" }),
     /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", gap: 2, height: "100%", width: "auto", alignItems: "center", children: [
       /* @__PURE__ */ jsx(LanguagePopover, {}),
-      /* @__PURE__ */ jsx(IconButton, { src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.SETTINGS}`, onClick: handleOpen })
+      /* @__PURE__ */ jsx(IconButton, { role: "button", "aria-label": "Toggle App Bar Settings", src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.SETTINGS}`, onClick: handleOpen })
     ] })
   ] });
 }

package/components/MFIsolationAppStorybook/MFIsolationAppStorybook.js

@@ -5,7 +5,7 @@ import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
 import NProgress from "nprogress";
 import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider } from "@m4l/graphics";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider } from "@m4l/core";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation } from "@m4l/core";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import enLocale from "date-fns/locale/en-US";
 import { c as createToaster } from "../ToastContainer/helpers/toaster.js";
@@ -13,10 +13,7 @@ import { M as MFAuthAppStorybook } from "./subcomponents/MFAuthAppStorybook/MFAu
 import { B as BaseModule } from "../BaseModule/BaseModule.js";
 import { S as SettingsLayout } from "../SettingsLayout/SettingsLayout.js";
 import { T as ToastContainer } from "../ToastContainer/ToastContainer.js";
-import { A as AppBarSettings } from "./subcomponents/AppBarSettings/AppBarSettings.js";
 import { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
-import { A as AreasProvider } from "../areas/contexts/AreasContext/index.js";
-import { S as Stack } from "../mui_extended/Stack/Stack.js";
 const LOCALE_HOST_EN = {
   lang: "en",
   script: void 0,
@@ -43,13 +40,11 @@ function MFIsolationAppStorybook(props) {
     moduleNameField,
     privileges,
     componentsDictionary,
-    onLoad,
     // observedDivRef,
     moduleDictionaryLoaded,
     forcedDeviceType,
     areasStoreId,
-    areasStoreDevtoolsEnabled,
-    appBarSettings = false
+    areasStoreDevtoolsEnabled
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback(
@@ -113,14 +108,7 @@ function MFIsolationAppStorybook(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const mockNetworkOperation = useCallback(async (_networkProps) => {
-    return Promise.resolve({
-      data: [],
-      status: 200,
-      statusText: "OK"
-    });
-  }, []);
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation: mockNetworkOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(MFAuthAppStorybook, { children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: LOCALE_HOST_EN, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(MFAuthAppStorybook, { children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: LOCALE_HOST_EN, children: /* @__PURE__ */ jsx(
     BaseModule,
     {
       moduleId,
@@ -132,17 +120,13 @@ function MFIsolationAppStorybook(props) {
       children: /* @__PURE__ */ jsxs(AppearanceComponentProvider, { children: [
         /* @__PURE__ */ jsx(SettingsLayout, {}),
         /* @__PURE__ */ jsx(ToastContainer, { containerId: toastContainerId }),
-        " ",
         /* @__PURE__ */ jsx(
           PopupsProvider,
           {
             baseZindex: 1e3,
             storeId: areasStoreId,
             storeDevtoolsEnabled: areasStoreDevtoolsEnabled,
-            children: /* @__PURE__ */ jsx(AreasProvider, { loadAreasFromNetwork: false, loadCookiesFromNetwork: false, onLoad, children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
-              appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
-              /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
-            ] }) })
+            children
           }
         )
       ] })

package/components/MFIsolationAppStorybook/types.d.ts

@@ -8,10 +8,6 @@ export type MFIsolationAppStorybookProps = BaseModuleProps & {
     host_api_remote: string;
     host_static_assets: string;
     environment_assets: string;
-    onLoad: () => void;
-    activeAreasNetwork?: boolean;
-    activeCookiesFromNetwork?: boolean;
-    appBarSettings?: boolean;
     /**
      * Diccionario de componentes, se puede proporcionar ya el diccionario cargado, para evitar que se llame al endpoint nuevamente.
      */