@m4l/components 9.2.60 → 9.2.61

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { useState, useRef, useMemo, useCallback } from "react";
+import { useState, useRef, useMemo, useCallback, useReducer } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
 import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.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,61 @@ 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 [changeFlags, dispatchChangeFlag] = useReducer(
+    (state, action) => ({ ...state, [action]: !state[action] }),
+    { filters: false, sorts: false }
+  );
+  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]);
+      dispatchChangeFlag("filters");
+    },
+    [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++;
+      }
+      dispatchChangeFlag("sorts");
+    },
+    [
+      onChangeFilterSort,
+      prefixCookie,
+      setCookie,
+      setInvisibleBadge,
+      isValidFilters
+    ]
+  );
   const onRefresh = useCallback(() => {
     if (!filterSortAutomatic) {
       if (fireOnChangeFilterRef.current) {
@@ -90,73 +145,264 @@ 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"
-          }
+  }, [
+    filterSortAutomatic,
+    getLabel,
+    isValidFilters,
+    onChangeFilterSort,
+    toast
+  ]);
+  const leftActions = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      StackLeftActionsStyled,
+      {
+        direction: "row",
+        ...getPropDataTestId(
+          M4LDYNAMIC_KEY_FILTER_AND_SORT,
+          DynamicFilterAndSortSlots.stackLeftActions,
+          dataTestId
         ),
-        rightActions
-      ]
-    }
-  ), [dataTestId, rightActions, refreshIconUrl, onRefresh]);
-  const dynamicsFiltersSorts = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      DynamicFilter,
+        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,
+      dataTestId
+    ]
+  );
+  const finalRightActions = useMemo(
+    () => /* @__PURE__ */ jsxs(
+      StackRightActionsStyled,
       {
-        ref: fireOnChangeFilterRef,
-        visibleRefresh,
-        automatic: filterSortAutomatic,
-        fields,
-        initialAppliedFilters,
-        onChangeFilters: handleChangeFilters,
-        withAllField
+        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
+        ]
       }
     ),
-    sorts ? /* @__PURE__ */ jsx(
-      DynamicSort,
+    [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;
+        }
+      }
+    },
+    [fireOnChangeFilterRef]
+  );
+  const getCurrentFilters = useCallback(() => {
+    if (fireOnChangeFilterRef.current) {
+      return fireOnChangeFilterRef.current.getCurrentFilters();
+    }
+    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,
       {
-        ref: fireOnChangeSortRef,
-        visibleRefresh,
-        automatic: filterSortAutomatic,
-        fields: sorts,
-        initialAppliedSorts,
-        onChangeSorts: handleChangeSorts
+        direction: "row",
+        ownerState: {
+          showDynamicFilter: togglesLeftActions.filter,
+          showDynamicSort: togglesLeftActions.sort
+        },
+        ...getPropDataTestId(
+          M4LDYNAMIC_KEY_FILTER_AND_SORT,
+          DynamicFilterAndSortSlots.stackCustomHeader,
+          dataTestId
+        ),
+        children: dynamicsFiltersSorts
       }
-    ) : 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]
+  );
+  const externalSortSettings = useMemo(() => {
+    if (!sorts || sorts.length === 0) {
+      return void 0;
+    }
+    return {
+      sortsColumns: sorts.map((sort) => sort.name),
+      sortsApplied: getCurrentSorts().map((sort) => ({
+        columnKey: sort.field.name,
+        removable: !sort.fixed,
+        direction: sort.operator
+      })),
+      onChange: handleChangeSortExternal
+    };
+  }, [sorts, changeFlags.sorts, getCurrentSorts, handleChangeSortExternal]);
+  const externalFilterSettings = useMemo(() => {
+    if (!fields || fields.length === 0) {
+      return void 0;
     }
-  ), [togglesLeftActions]);
+    return {
+      filterColumns: fields.map((filter) => ({
+        name: filter.name,
+        multiple: filter.multiple || false
+      })),
+      filtersApplied: getCurrentFilters().map((filter) => ({
+        columnKey: filter.field.name,
+        isValid: filter.isSet
+      })),
+      onChange: handleChangeFilterExternal
+    };
+  }, [fields, changeFlags.filters, getCurrentFilters, handleChangeFilterExternal]);
   return {
     leftActions,
     rightActions: finalRightActions,
     visibleCustomHeader,
-    customHeaderComponent
+    customHeaderComponent,
+    externalSortSettings,
+    externalFilterSettings
   };
 };
 export {

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";
@@ -119,7 +119,7 @@ import { D as D8 } from "./components/formatters/DistanceToNowFormatter/Distance
 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";
@@ -258,7 +258,7 @@ 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,
   D7 as DateFormatter,
@@ -379,13 +379,13 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.60",
+  "version": "9.2.61",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

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[];

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

@@ -21,6 +21,7 @@ export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
 export interface RowType {
     id: string;
     name: string;
+    filterableOnlyOne: string;
     email: string;
     phone: string;
     ip: string;

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

@@ -4,5 +4,8 @@ import { SeedProps } from './types';
  */
 export declare const useSeed: (props: SeedProps) => {
     columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
+    filters: import('../../../../src').FilterField[];
+    sorts: import('../../../../src').SortField[];
     rows: import('./types').RowType[];
+    rowsMultiSort: import('./types').RowType[];
 };

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -8,6 +8,8 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     dynamicColumns?: boolean;
     filterSortAutomatic?: boolean;
     visibleRefreshFilterSort?: boolean;
+    withExternalSortSettings?: boolean;
+    withExternalFilterSettings?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook

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

@@ -3,5 +3,5 @@ import { ObjectLogs } from '../../../src/components/ObjectLogs/ObjectLogs';
 import { ObjectLogsM4LProps, ObjectLogsOtherProps } from '../../../src/components/ObjectLogs/types';
 declare const meta: Meta<typeof ObjectLogs>;
 export default meta;
-export declare const DefaultM4L: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsM4LProps>;
-export declare const DefaultOthers: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsOtherProps>;
+export declare const DefaultM4L: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsM4LProps>;
+export declare const DefaultOthers: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsOtherProps>;