@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J18062025.beta.1

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -15,14 +15,40 @@ import { g as getPurgedCookie } from "./helpers.js";
 import { u as useWindowToolsMF } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { a as DICCTIONARY } from "../../components/DynamicFilter/dictionary.js";
 const useDynamicFilterAndSort = (props) => {
-  const { fields, sorts, onChangeFilterSort, dataTestId, withAllField, rightActions, initialFilterToggleed = true, initialSortToggleed = true, prefixCookie, setCookie, getCookie, filterSortAutomatic = true, visibleRefresh = false, withExternalRefresh } = props;
+  const {
+    fields,
+    sorts,
+    onChangeFilterSort,
+    dataTestId,
+    withAllField,
+    rightActions,
+    initialFilterToggleed = true,
+    initialSortToggleed = true,
+    prefixCookie,
+    setCookie,
+    getCookie,
+    filterSortAutomatic = true,
+    visibleRefresh = false,
+    withExternalRefresh
+  } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const [togglesLeftActions, setTogglesLeftActions] = useState(() => ({ filter: initialFilterToggleed, sort: initialSortToggleed }));
+  const [togglesLeftActions, setTogglesLeftActions] = useState(() => ({
+    filter: initialFilterToggleed,
+    sort: initialSortToggleed
+  }));
   const [initialAppliedFilters] = useState(() => {
-    return getPurgedCookie(getCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_FILTERS}` : COOKIE_APPLIED_FILTERS));
+    return getPurgedCookie(
+      getCookie?.(
+        prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_FILTERS}` : COOKIE_APPLIED_FILTERS
+      )
+    );
   });
   const [initialAppliedSorts] = useState(() => {
-    return getPurgedCookie(getCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS));
+    return getPurgedCookie(
+      getCookie?.(
+        prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS
+      )
+    );
   });
   const refOnChangeFilterSort = useRef(0);
   const fireOnChangeFilterRef = useRef(null);
@@ -33,7 +59,10 @@ const useDynamicFilterAndSort = (props) => {
     filter: initialAppliedFilters?.length === 0,
     sort: initialAppliedSorts?.length === 0
   }));
-  const visibleCustomHeader = useMemo(() => togglesLeftActions.filter || togglesLeftActions.sort, [togglesLeftActions]);
+  const visibleCustomHeader = useMemo(
+    () => togglesLeftActions.filter || togglesLeftActions.sort,
+    [togglesLeftActions]
+  );
   const refreshIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS.refresh}`;
   const eventRefs = useRef({
     eventFilters: { filters: initialAppliedFilters, rawFilters: [] },
@@ -49,35 +78,55 @@ const useDynamicFilterAndSort = (props) => {
     }
     return true;
   }, [eventRefs, fields]);
-  const handleChangeFilters = useCallback((filters, rawFilters) => {
-    setInvisibleBadge((prev) => ({ ...prev, filter: filters.length === 0 }));
-    if (eventRefs.current?.eventFilters?.filters && !deepEqual(eventRefs.current?.eventFilters?.filters, filters)) {
-      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_FILTERS}` : COOKIE_APPLIED_FILTERS, "window", filters);
-    }
-    eventRefs.current = {
-      ...eventRefs.current,
-      eventFilters: { filters, rawFilters }
-    };
-    if (refOnChangeFilterSort.current > 0 || refOnChangeFilterSort.current === 0 && !sorts) {
-      onChangeFilterSort(eventRefs.current);
-    }
-    refOnChangeFilterSort.current++;
-  }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]);
-  const handleChangeSorts = useCallback((newSorts, rawSorts) => {
-    setInvisibleBadge((prev) => ({ ...prev, sort: newSorts.length === 0 }));
-    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, newSorts)) {
-      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", newSorts);
-    }
-    eventRefs.current = {
-      ...eventRefs.current,
-      eventSorts: { sorts: newSorts, rawSorts }
-    };
-    if (isValidFilters()) {
-      onChangeFilterSort(eventRefs.current);
-    } else {
+  const handleChangeFilters = useCallback(
+    (filters, rawFilters) => {
+      setInvisibleBadge((prev) => ({ ...prev, filter: filters.length === 0 }));
+      if (eventRefs.current?.eventFilters?.filters && !deepEqual(eventRefs.current?.eventFilters?.filters, filters)) {
+        setCookie?.(
+          prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_FILTERS}` : COOKIE_APPLIED_FILTERS,
+          "window",
+          filters
+        );
+      }
+      eventRefs.current = {
+        ...eventRefs.current,
+        eventFilters: { filters, rawFilters }
+      };
+      if (refOnChangeFilterSort.current > 0 || refOnChangeFilterSort.current === 0 && !sorts) {
+        onChangeFilterSort(eventRefs.current);
+      }
       refOnChangeFilterSort.current++;
-    }
-  }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, isValidFilters]);
+    },
+    [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]
+  );
+  const handleChangeSorts = useCallback(
+    (newSorts, rawSorts) => {
+      setInvisibleBadge((prev) => ({ ...prev, sort: newSorts.length === 0 }));
+      if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, newSorts)) {
+        setCookie?.(
+          prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS,
+          "window",
+          newSorts
+        );
+      }
+      eventRefs.current = {
+        ...eventRefs.current,
+        eventSorts: { sorts: newSorts, rawSorts }
+      };
+      if (isValidFilters()) {
+        onChangeFilterSort(eventRefs.current);
+      } else {
+        refOnChangeFilterSort.current++;
+      }
+    },
+    [
+      onChangeFilterSort,
+      prefixCookie,
+      setCookie,
+      setInvisibleBadge,
+      isValidFilters
+    ]
+  );
   const onRefresh = useCallback(() => {
     if (!filterSortAutomatic) {
       if (fireOnChangeFilterRef.current) {
@@ -90,73 +139,236 @@ const useDynamicFilterAndSort = (props) => {
       if (isValidFilters()) {
         onChangeFilterSort(eventRefs.current);
       } else {
-        toast({ title: getLabel(DICCTIONARY.error_invalid_filters_before) }, { type: "error" });
+        toast(
+          { title: getLabel(DICCTIONARY.error_invalid_filters_before) },
+          { type: "error" }
+        );
       }
     }
-  }, [filterSortAutomatic, getLabel, isValidFilters, onChangeFilterSort, toast]);
-  const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
-    /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.filter, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }),
-    /* @__PURE__ */ jsx(ToggleIconButton, { badgeProps: { variant: "dot", invisible: invisibleBadge.sort, color: "primary" }, icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") })
-  ] }), [togglesLeftActions, invisibleBadge, host_static_assets, environment_assets]);
-  const finalRightActions = useMemo(() => /* @__PURE__ */ jsxs(
-    StackRightActionsStyled,
-    {
-      direction: "row",
-      ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackRightActions, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            icon: refreshIconUrl,
-            "aria-label": "refresh",
-            onClick: onRefresh,
-            variant: "outline"
-          }
-        ),
-        rightActions
-      ]
-    }
-  ), [dataTestId, rightActions, refreshIconUrl, onRefresh]);
-  const dynamicsFiltersSorts = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      DynamicFilter,
+  }, [
+    filterSortAutomatic,
+    getLabel,
+    isValidFilters,
+    onChangeFilterSort,
+    toast
+  ]);
+  const leftActions = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      StackLeftActionsStyled,
       {
-        ref: fireOnChangeFilterRef,
-        visibleRefresh,
-        automatic: filterSortAutomatic,
-        fields,
-        initialAppliedFilters,
-        onChangeFilters: handleChangeFilters,
-        withAllField
+        direction: "row",
+        ...getPropDataTestId(
+          M4LDYNAMIC_KEY_FILTER_AND_SORT,
+          DynamicFilterAndSortSlots.stackLeftActions,
+          dataTestId
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleIconButton,
+            {
+              badgeProps: {
+                variant: "dot",
+                invisible: invisibleBadge.filter,
+                color: "primary"
+              },
+              icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`,
+              isToggled: togglesLeftActions.filter,
+              onToggle: () => handleToggles("filter")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleIconButton,
+            {
+              badgeProps: {
+                variant: "dot",
+                invisible: invisibleBadge.sort,
+                color: "primary"
+              },
+              icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`,
+              isToggled: togglesLeftActions.sort,
+              onToggle: () => handleToggles("sort")
+            }
+          )
+        ]
       }
     ),
-    sorts ? /* @__PURE__ */ jsx(
-      DynamicSort,
+    [
+      togglesLeftActions,
+      invisibleBadge,
+      host_static_assets,
+      environment_assets,
+      dataTestId
+    ]
+  );
+  const finalRightActions = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      StackRightActionsStyled,
       {
-        ref: fireOnChangeSortRef,
-        visibleRefresh,
-        automatic: filterSortAutomatic,
-        fields: sorts,
-        initialAppliedSorts,
-        onChangeSorts: handleChangeSorts
+        direction: "row",
+        ...getPropDataTestId(
+          M4LDYNAMIC_KEY_FILTER_AND_SORT,
+          DynamicFilterAndSortSlots.stackRightActions,
+          dataTestId
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: refreshIconUrl,
+              "aria-label": "refresh",
+              onClick: onRefresh,
+              variant: "outline"
+            }
+          ),
+          rightActions
+        ]
+      }
+    ),
+    [dataTestId, rightActions, refreshIconUrl, onRefresh]
+  );
+  const getCurrentSorts = useCallback(() => {
+    if (fireOnChangeSortRef.current) {
+      return fireOnChangeSortRef.current.getCurrentSorts();
+    }
+    return [];
+  }, [fireOnChangeSortRef]);
+  const handleChangeSortExternal = useCallback(
+    (sortApplied) => {
+      if (fireOnChangeSortRef.current) {
+        const sort = sorts?.find((sort2) => sort2.name === sortApplied.columnKey);
+        const isFixed = sort?.presence === "fixed";
+        switch (sortApplied.action) {
+          case "add":
+            const newSort = {
+              id: fireOnChangeSortRef.current.getNewId(),
+              field: {
+                name: sortApplied.columnKey,
+                type: sort?.type || "string",
+                urlIcon: sort?.urlIcon || "",
+                label: sort?.label || sortApplied.columnKey
+              },
+              isSet: true,
+              fixed: isFixed,
+              fieldType: sort?.type || "string",
+              operator: sortApplied.direction
+            };
+            setTogglesLeftActions((prev) => ({ ...prev, sort: true }));
+            fireOnChangeSortRef.current.addExternalSort(newSort);
+            break;
+          case "remove":
+            if (!isFixed) {
+              fireOnChangeSortRef.current.removeExternalSort(
+                sortApplied.columnKey
+              );
+            }
+            break;
+        }
+      }
+    },
+    [fireOnChangeSortRef, sorts]
+  );
+  const handleChangeFilterExternal = useCallback(
+    (event) => {
+      if (fireOnChangeFilterRef.current) {
+        switch (event.action) {
+          case "add":
+            setTogglesLeftActions((prev) => ({ ...prev, filter: true }));
+            fireOnChangeFilterRef.current.addExternalFilter(event.columnKey);
+            break;
+          case "openPopoverMenuFields":
+            setTogglesLeftActions((prev) => ({ ...prev, filter: true }));
+            fireOnChangeFilterRef.current.openPopoverMenuFields();
+            break;
+          default:
+            return;
+        }
       }
-    ) : null,
-    withExternalRefresh && /* @__PURE__ */ jsx(IconButton, { icon: refreshIconUrl, "aria-label": "refresh", onClick: onRefresh })
-  ] }), [visibleRefresh, filterSortAutomatic, fields, initialAppliedFilters, handleChangeFilters, withAllField, sorts, initialAppliedSorts, handleChangeSorts, withExternalRefresh, refreshIconUrl, onRefresh]);
-  const customHeaderComponent = useMemo(() => /* @__PURE__ */ jsx(
-    StackCustomHeaderStyled,
-    {
-      direction: "row",
-      ownerState: { showDynamicFilter: togglesLeftActions.filter, showDynamicSort: togglesLeftActions.sort },
-      ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackCustomHeader, dataTestId),
-      children: dynamicsFiltersSorts
+    },
+    [fireOnChangeFilterRef]
+  );
+  const getCurrentFilters = useCallback(() => {
+    if (fireOnChangeFilterRef.current) {
+      return fireOnChangeFilterRef.current.getCurrentFilters();
     }
-  ), [togglesLeftActions]);
+    return [];
+  }, [fireOnChangeFilterRef]);
+  const dynamicsFiltersSorts = useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        DynamicFilter,
+        {
+          ref: fireOnChangeFilterRef,
+          visibleRefresh,
+          automatic: filterSortAutomatic,
+          fields,
+          initialAppliedFilters,
+          onChangeFilters: handleChangeFilters,
+          withAllField
+        }
+      ),
+      sorts ? /* @__PURE__ */ jsx(
+        DynamicSort,
+        {
+          ref: fireOnChangeSortRef,
+          visibleRefresh,
+          automatic: filterSortAutomatic,
+          fields: sorts,
+          initialAppliedSorts,
+          onChangeSorts: handleChangeSorts
+        }
+      ) : null,
+      withExternalRefresh && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: refreshIconUrl,
+          "aria-label": "refresh",
+          onClick: onRefresh
+        }
+      )
+    ] }),
+    [
+      visibleRefresh,
+      filterSortAutomatic,
+      fields,
+      initialAppliedFilters,
+      handleChangeFilters,
+      withAllField,
+      sorts,
+      initialAppliedSorts,
+      handleChangeSorts,
+      withExternalRefresh,
+      refreshIconUrl,
+      onRefresh
+    ]
+  );
+  const customHeaderComponent = useMemo(
+    () => /* @__PURE__ */ jsx(
+      StackCustomHeaderStyled,
+      {
+        direction: "row",
+        ownerState: {
+          showDynamicFilter: togglesLeftActions.filter,
+          showDynamicSort: togglesLeftActions.sort
+        },
+        ...getPropDataTestId(
+          M4LDYNAMIC_KEY_FILTER_AND_SORT,
+          DynamicFilterAndSortSlots.stackCustomHeader,
+          dataTestId
+        ),
+        children: dynamicsFiltersSorts
+      }
+    ),
+    [togglesLeftActions, dataTestId, dynamicsFiltersSorts]
+  );
   return {
     leftActions,
     rightActions: finalRightActions,
     visibleCustomHeader,
-    customHeaderComponent
+    customHeaderComponent,
+    getCurrentSorts,
+    handleChangeSortExternal,
+    handleChangeFilterExternal,
+    getCurrentFilters
   };
 };
 export {

package/index.d.ts

@@ -8,4 +8,3 @@ export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
 export * from './utils';
-export type { M4LOverridesStyleRules } from './@types/augmentations';

package/index.js

@@ -33,7 +33,7 @@ import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
-import { b as b3, a as a4, d as d2 } from "./components/DataGrid/constants.js";
+import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
 import { C as C2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
 import { C as C3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
@@ -56,7 +56,7 @@ import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyForm
 import { C as C12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
-import { d as d3 } from "./components/DragResizeWindowRND/classes/index.js";
+import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { g as g7 } from "./components/DynamicFilter/dictionary.js";
 import { a as a5, g as g8 } from "./components/DynamicFilter/helpers/frontEndHelpers.js";
 import { g as g9 } from "./components/DynamicFilter/helpers/getRawFiltersForNetwork.js";
@@ -106,9 +106,8 @@ import { T as T15 } from "./components/mui_extended/ToggleIconButton/slots/Toggl
 import { T as T16 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { N as N2 } from "./components/mui_extended/NavLink/NavLink.js";
 import { D as D6 } from "./components/mui_extended/Dialog/Dialog.js";
-import { D as D7 } from "./components/mui_extended/Divider/Divider.js";
 import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
-import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
+import { D as D7, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
 import { C as C15, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
@@ -116,11 +115,11 @@ import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/Perio
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
 import { C as C16 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
-import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
+import { D as D8 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { G } from "./components/GridLayout/GridLayout.js";
 import { R as R3 } from "./components/GridLayout/subcomponents/Responsive/index.js";
-import { c as c2, e, d as d4 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
+import { c as c2, e as e2, d as d3 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
@@ -180,7 +179,7 @@ import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.j
 import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M6, W as W2, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D9, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g27 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
@@ -210,12 +209,12 @@ import { g as g30 } from "./utils/getComponentUtilityClass.js";
 import { g as g31 } from "./utils/getPaletteColor.js";
 import { g as g32 } from "./utils/getTypographyStyles.js";
 import { g as g33 } from "./utils/getIconColor.js";
-import { a as a16, g as g34 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { a as a16 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g35, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g34, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g36 } from "./utils/getValidDate.js";
-import { g as g37 } from "./utils/getNullGuard.js";
+import { g as g35 } from "./utils/getValidDate.js";
+import { g as g36 } from "./utils/getNullGuard.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -259,16 +258,15 @@ export {
   C15 as ConcatenatedFormatter,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
-  d2 as DATAGRID_SEMANTIC_WIDTHS,
+  e as DATAGRID_SEMANTIC_WIDTHS,
   D as DICTIONARY,
   D2 as DataGrid,
-  D8 as DateFormatter,
+  D7 as DateFormatter,
   D6 as Dialog,
-  D9 as DistanceToNowFormatter,
-  D7 as Divider,
+  D8 as DistanceToNowFormatter,
   D3 as DragResizeWindowRND,
   D4 as DynamicFilter,
-  D10 as DynamicMFParmsContext,
+  D9 as DynamicMFParmsContext,
   a13 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
@@ -381,20 +379,20 @@ export {
   W2 as WindowToolsMFContext,
   a12 as WindowToolsMFProvider,
   c2 as addLayoutItemToBreakPointIfNoExists,
-  e as addLayoutItemToBreakPoints,
+  e2 as addLayoutItemToBreakPoints,
   c4 as capitalizeFirstLetter,
-  d4 as cloneLayouts,
+  d3 as cloneLayouts,
   c3 as createDynamicMFStore,
   c as createToaster,
   d as defaultCommonActionsDictionary,
-  d3 as dragResizeWindowRNDClasses,
+  d2 as dragResizeWindowRNDClasses,
   f as formatDistanceToNow,
   g as getAccountPopoverDictionary,
   g2 as getAppBarDictionary,
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g35 as getComponentClasses,
+  g34 as getComponentClasses,
   a17 as getComponentSlotRoot,
   g30 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
@@ -418,7 +416,7 @@ export {
   a14 as getModalDialogComponentsDictionary,
   g27 as getModalDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g37 as getNullGuard,
+  g36 as getNullGuard,
   g26 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
   g31 as getPaletteColor,
@@ -427,10 +425,9 @@ export {
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
-  g34 as getSizeStyles,
   g32 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g36 as getValidDate,
+  g35 as getValidDate,
   g29 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.60-24062025.beta.1",
+  "version": "9.2.60-J18062025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.2-24062025.beta.1",
-    "@m4l/styles": "7.1.29-24062025.beta.1",
+    "@m4l/graphics": "^7.0.0",
+    "@m4l/styles": "^7.0.0",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
@@ -62,10 +62,9 @@
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "react-dom": "18.3.1",
+    "storybook": "^8.3.4",
     "attr-accept": "2.2.2",
-    "@vitejs/plugin-react": "4.3.4",
-    "storybook": "8.3.4",
-    "@storybook/react": "8.3.4"
+    "@vitejs/plugin-react": "4.3.4"
   },
   "overrides": {
     "glob": "^10.4.5",

package/storybook/components/DataGrid/DataGrid.stories.d.ts

@@ -49,5 +49,27 @@ export declare const RowMenuActions: Story;
  * Filter y Sort en busqueda manual
  */
 export declare const CustomHeaderFilterSortManual: Story;
+/**
+ * DataGrid con leftActions, rightActions y
+ * Filter y Sort en busqueda automatica
+ */
+export declare const CustomHeaderAutomaticWithExternalFiltersAndSorts: Story;
+/**
+ * DataGrid con leftActions, rightActions y
+ * Filter y Sort en busqueda manual
+ */
+export declare const CustomHeaderManualWithExternalFiltersAndSorts: Story;
 export declare const DynamicColumns: Story;
+/**
+ * Menú de columna con botón de remover sort deshabilitado
+ */
+export declare const HeaderRenderClickRemoveExternalSortDisabled: Story;
+/**
+ * Menú de columna con botón de agregar filtro deshabilitado
+ */
+export declare const HeaderRenderClickAddFilterDisabled: Story;
+/**
+ * Demostración completa: aplica sort DESC en 'phone', agrega filtro 'email contains 5' y cambia sort DESC en 'name'
+ */
+export declare const HeaderRenderClickFullActions: Story;
 export default meta;

package/storybook/components/DataGrid/MswHandles.d.ts

@@ -0,0 +1 @@
+export declare const mswHandles: import('msw').HttpHandler[];

package/storybook/components/DataGrid/helpers/filterFieldsSeedData.d.ts

@@ -0,0 +1,5 @@
+import { FilterField } from '../../../../src/components/DynamicFilter/types';
+/**
+ * Helper que retorna los fields configurados para el DataGrid de Storybook
+ */
+export declare const filterFieldsSeedData: FilterField[];

package/storybook/components/DataGrid/helpers/getRows.d.ts

@@ -3,3 +3,7 @@ import { RowType, SeedProps } from './types';
  * Función para generar las filas para el DataGrid de Storybook
  */
 export declare const getRows: (props: SeedProps) => RowType[];
+/**
+ * Función para generar filas con nombres duplicados para probar ordenamiento múltiple
+ */
+export declare const getRowsForMultiSort: (props: SeedProps) => RowType[];

package/storybook/components/DataGrid/helpers/getRowsWithBackendSimulation.d.ts

@@ -0,0 +1,9 @@
+import { RowType } from './types';
+import { RawFilterFieldApply } from '../../../../src/components/DynamicFilter/types';
+import { RawSortFieldApply } from '../../../../src/components/DynamicSort/types';
+/**
+ * Función que simula el comportamiento del backend
+ * Recibe exactamente los mismos parámetros que se enviarían al backend real
+ */
+export declare function getRowsWithBackendSimulation(originalRows: RowType[], f: Omit<RawFilterFieldApply, 'ft'>[] | undefined, // filtros en formato snake_case (sin ft)
+s: RawSortFieldApply[] | undefined): RowType[];

package/storybook/components/DataGrid/helpers/sortsSeedData.d.ts

@@ -0,0 +1,5 @@
+import { SortField } from '../../../../src/components/DynamicSort/types';
+/**
+ * Helper que retorna los sorts configurados para el DataGrid de Storybook
+ */
+export declare const sortsSeedData: SortField[];