@m4l/components 9.2.60 → 9.2.62

package/components/DynamicSort/store/DynamicSortContext.js

@@ -8,77 +8,106 @@ import { f as formatToRowSort } from "../helpers/formatToRowSort.js";
 import { c as createDynamicSortStore } from "./DynamicSortStore.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const DynamicSortContext = createContext(null);
-const DynamicSortProvider = forwardRef((props, ref) => {
-  const {
-    automatic = true,
-    fields,
-    initialAppliedSorts = [],
-    onChangeSorts,
-    dataTestId = "",
-    size = "medium",
-    storeId,
-    storeDevtoolsEnabled,
-    visibleRefresh = true,
-    children
-  } = props;
-  const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const { getLabel } = useModuleDictionary();
-  const dynamicSortStoreRef = useRef();
-  if (!dynamicSortStoreRef.current) {
-    dynamicSortStoreRef.current = createDynamicSortStore({
+const DynamicSortProvider = forwardRef(
+  (props, ref) => {
+    const {
+      automatic = true,
       fields,
-      automatic,
-      getLabel,
-      dataTestId,
-      size,
+      initialAppliedSorts = [],
+      onChangeSorts,
+      dataTestId = "",
+      size = "medium",
       storeId,
-      visibleRefresh,
-      ownerState: {
-        isDirty: false,
-        inEdition: false,
-        isValid: true,
-        isEmpty: true,
-        size
-      }
-    }, storeDevtoolsEnabled);
-    dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
-  }
-  const fireOnChangeSort = useStore(
-    dynamicSortStoreRef.current,
-    (state) => state.actions.fireOnChangeSorts,
-    shallow
-  );
-  useImperativeHandle(ref, () => ({
-    fireOnChangeSort
-  }));
-  const countOnChangeSortsApplyed = useStore(
-    dynamicSortStoreRef.current,
-    (state) => state.countOnChangeSortsApplyed,
-    shallow
-  );
-  useEffect(() => {
-    if (countOnChangeSortsApplyed === 0) {
-      return;
-    }
-    const state = dynamicSortStoreRef.current?.getState();
-    if (state) {
-      onChangeSorts?.(
-        formatToInitialSorts(state.appliedSorts),
-        formatToRowSort(state.appliedSorts)
+      storeDevtoolsEnabled,
+      visibleRefresh = true,
+      children
+    } = props;
+    const { currentSize } = useComponentSize(size);
+    const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+    const { getLabel } = useModuleDictionary();
+    const dynamicSortStoreRef = useRef();
+    if (!dynamicSortStoreRef.current) {
+      dynamicSortStoreRef.current = createDynamicSortStore(
+        {
+          fields,
+          automatic,
+          getLabel,
+          dataTestId,
+          size,
+          storeId,
+          visibleRefresh,
+          ownerState: {
+            isDirty: false,
+            inEdition: false,
+            isValid: true,
+            isEmpty: true,
+            size
+          }
+        },
+        storeDevtoolsEnabled
       );
+      dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
     }
-  }, [countOnChangeSortsApplyed]);
-  useEffect(() => {
-    if (dynamicSortStoreRef.current?.getState().size !== adjustedSize) {
-      dynamicSortStoreRef.current?.getState().actions.setSize(adjustedSize);
-    }
-    if (dynamicSortStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
-      dynamicSortStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
-    }
-  }, [adjustedSize, visibleRefresh]);
-  return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
-});
+    const fireOnChangeSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.fireOnChangeSorts,
+      shallow
+    );
+    const addExternalSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.addExternalSort,
+      shallow
+    );
+    const removeExternalSort = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.removeExternalSort,
+      shallow
+    );
+    const getNewId = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.actions.getNewId,
+      shallow
+    );
+    const getCurrentSorts = useStore(
+      dynamicSortStoreRef.current,
+      (state) => () => state.appliedSorts,
+      shallow
+    );
+    useImperativeHandle(ref, () => ({
+      fireOnChangeSort,
+      addExternalSort,
+      removeExternalSort,
+      getNewId,
+      getCurrentSorts
+    }));
+    const countOnChangeSortsApplyed = useStore(
+      dynamicSortStoreRef.current,
+      (state) => state.countOnChangeSortsApplyed,
+      shallow
+    );
+    useEffect(() => {
+      if (countOnChangeSortsApplyed === 0) {
+        return;
+      }
+      const state = dynamicSortStoreRef.current?.getState();
+      if (state) {
+        onChangeSorts?.(
+          formatToInitialSorts(state.appliedSorts),
+          formatToRowSort(state.appliedSorts)
+        );
+      }
+    }, [countOnChangeSortsApplyed]);
+    useEffect(() => {
+      if (dynamicSortStoreRef.current?.getState().size !== adjustedSize) {
+        dynamicSortStoreRef.current?.getState().actions.setSize(adjustedSize);
+      }
+      if (dynamicSortStoreRef.current?.getState().visibleRefresh !== visibleRefresh) {
+        dynamicSortStoreRef.current?.getState().actions.setVisibleRefresh(visibleRefresh);
+      }
+    }, [adjustedSize, visibleRefresh]);
+    return /* @__PURE__ */ jsx(DynamicSortContext.Provider, { value: dynamicSortStoreRef.current, children });
+  }
+);
 export {
   DynamicSortProvider as D,
   DynamicSortContext as a

package/components/DynamicSort/store/DynamicSortStore.js

@@ -9,7 +9,9 @@ const updateAvailableFields = (state) => {
     let add;
     const field = state.fields[index];
     add = true;
-    const fIndx = state.appliedSorts.findIndex((f) => f.field.name === field.name);
+    const fIndx = state.appliedSorts.findIndex(
+      (f) => f.field.name === field.name
+    );
     if (fIndx > -1) {
       add = false;
     }
@@ -100,7 +102,26 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           removeSort: (id) => {
             set((state) => {
-              const index_to_remove = state.appliedSorts.findIndex((f) => id === f.id && !f.fixed);
+              const index_to_remove = state.appliedSorts.findIndex(
+                (f) => id === f.id && !f.fixed
+              );
+              if (index_to_remove > -1) {
+                state.appliedSorts.splice(index_to_remove, 1);
+                updateAutomatic(state);
+                if (state.appliedSorts.length === 0) {
+                  state.ownerState.isDirty = false;
+                }
+              }
+            });
+          },
+          /**
+           * Elimina un campo sort por el nombre de la columna
+           */
+          removeExternalSort: (columnName) => {
+            set((state) => {
+              const index_to_remove = state.appliedSorts.findIndex(
+                (f) => f.field.name === columnName && !f.fixed
+              );
               if (index_to_remove > -1) {
                 state.appliedSorts.splice(index_to_remove, 1);
                 updateAutomatic(state);
@@ -186,12 +207,37 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
               updateAutomatic(state);
             });
           },
+          /**
+           * Agrega un nuevo campo/atributo por el cual se va aplicar el sort externo
+           */
+          addExternalSort: (newSort) => {
+            set((state) => {
+              const existingIndex = state.appliedSorts.findIndex(
+                (sort) => sort.field.name === newSort.field.name
+              );
+              if (existingIndex > -1) {
+                const existingSort = state.appliedSorts[existingIndex];
+                state.appliedSorts[existingIndex] = {
+                  ...newSort,
+                  id: existingSort.id
+                };
+              } else {
+                if (!state.automatic) {
+                  state.ownerState.isDirty = true;
+                }
+                state.appliedSorts.push(newSort);
+              }
+              updateAutomatic(state);
+            });
+          },
           /**
            * Actualiza un sort existente
            */
           updateSort: (editSort) => {
             set((state) => {
-              const index = state.appliedSorts.findIndex((ap) => ap.id === editSort.id);
+              const index = state.appliedSorts.findIndex(
+                (ap) => ap.id === editSort.id
+              );
               if (index > -1) {
                 state.appliedSorts[index] = editSort;
               }
@@ -251,7 +297,10 @@ const createDynamicSortStore = (initProps, storeDevtoolsEnabled = false) => {
           }
         }
       })),
-      { name: `${DYNAMIC_SORT_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
+      {
+        name: `${DYNAMIC_SORT_STORE_ID}: ${initProps.storeId}`,
+        enabled: storeDevtoolsEnabled
+      }
     )
   );
 };

package/components/DynamicSort/store/types.d.ts

@@ -98,6 +98,11 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @param id //identificador unico de un sort
          */
         removeSort: (id: number) => void;
+        /**
+         * remueve un sort externo por nombre de columna (para uso desde DataGrid)
+         * @param columnName nombre de la columna
+         */
+        removeExternalSort: (columnName: string) => void;
         /**
          *
          * @param anchorEl Elemento de donde va emerger el popup
@@ -136,6 +141,12 @@ export interface DynamicSortStateWithActions extends DynamicSortState {
          * @returns
          */
         addSort: (newSort: SortFieldApplied) => void;
+        /**
+         * Agrega un sort externo a los sorts aplicados (applyedFilters)
+         * @param newSort Sort a agregar
+         * @returns
+         */
+        addExternalSort: (newSort: SortFieldApplied) => void;
         /**
          * Modifica un sort que se encuentra en applyedFilters
          * @param sortToEdit sort a editar

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
 import { S as SORT_ICONS } from "../../../icons.js";
@@ -25,7 +25,7 @@ function StringSort() {
     ],
     [getLabel, host_static_assets, environment_assets]
   );
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     RHFSelect,
     {
       size,

package/components/DynamicSort/subcomponents/InputSort/InputSort.js

@@ -33,6 +33,8 @@ const InputSort = () => {
         value: inputData,
         placeholder: inputPlaceHolder,
         ownerState: { ...ownerState },
+        role: "searchbox",
+        "aria-label": "searchbox",
         ...inputHandlersProps
       }
     ),

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../../Icon/Icon.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
-import { e as PopoverStyled, f as PopoverHeaderStyled, g as PopoverHeaderTitleStyled, C as ContentSortStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
+import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
 function PopoverSort() {
@@ -22,7 +22,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
-  const { ownerState, size } = useDynamicSortBase();
+  const { size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -38,26 +38,31 @@ function PopoverSort() {
       anchorEl,
       onKeyDown: handleKeyDownPopper,
       onClose: handleClosePopover,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         RHFormProvider,
         {
           onSubmit,
           values: sortFormValue,
           validationSchema: popupValidationSchema,
           statusLoad,
-          children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: { ...ownerState }, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(Icon, { src: field.urlIcon, size }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, children: labelField })
-            ] }),
-            /* @__PURE__ */ jsxs(ContentSortStyled, { children: [
-              /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
-              /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
-                /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
-                /* @__PURE__ */ jsx(ActionIntro, { size })
-              ] })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            WindowBase,
+            {
+              title: labelField,
+              iconUrl: field.urlIcon,
+              variant: "text",
+              type: "popup",
+              selected: true,
+              draggable: false,
+              children: [
+                /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
+                /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { children: [
+                  /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose }),
+                  /* @__PURE__ */ jsx(ActionIntro, { size, "aria-label": "applySort" })
+                ] })
+              ]
+            }
+          )
         }
       )
     }

package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts

@@ -17,11 +17,11 @@ declare function usePopoverSort(): {
     sortFormValue: import('../../types').FormSortValueBase;
     formSort: FormSortFieldApplied;
     popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>, import('yup/lib/object').AssertsShape<{
-        [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
+        [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
     }>> | undefined;
     statusLoad: "initial" | "reload_values_provider" | "ready";
 };

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { u as useSortActions } from "./useSortActions.js";
-import { j as ActionsStyled, k as ActionsClearButtonStyled, l as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { h as ActionsStyled, i as ActionsClearButtonStyled, j as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
     sortIconUrl,
@@ -16,7 +16,7 @@ function SortActions() {
   } = useSortActions();
   const { size, visibleRefresh, ownerState: { isDirty } } = useDynamicSortBase();
   const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { isDirty: canShowRemoveAction, visibleRefresh }, children: [
+  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: { ...ownerState, isDirty: canShowRemoveAction, visibleRefresh }, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {

package/components/DynamicSort/subcomponents/SortActions/useSortActions.d.ts

@@ -11,6 +11,8 @@ declare function useSortActions(): {
     sortButtonDictionaryTooltip: string;
     ownerState: {
         isValid: boolean;
+        isDirty: boolean;
+        inEdition: boolean;
     };
 };
 export default useSortActions;

package/components/DynamicSort/subcomponents/SortActions/useSortActions.js

@@ -9,6 +9,7 @@ function useSortActions() {
   const isValid = useDynamicSortStore((state) => state.ownerState?.isValid);
   const isDirty = useDynamicSortStore((state) => state.ownerState?.isDirty);
   const appliedSorts = useDynamicSortStore((state) => state.appliedSorts);
+  const inEdition = useDynamicSortStore((state) => state.ownerState?.inEdition);
   const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
     (state) => state.actions
   );
@@ -31,7 +32,7 @@ function useSortActions() {
     onClickClearSorts,
     onClickSort: fireOnChangeSorts,
     sortButtonDictionaryTooltip,
-    ownerState: { isValid }
+    ownerState: { isValid, isDirty, inEdition }
   };
 }
 export {

package/components/DynamicSort/types.d.ts

@@ -175,4 +175,8 @@ export type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
 export type DynamicSortStyles = M4LOverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme>;
 export interface DynamicSortRef {
     fireOnChangeSort: () => void;
+    addExternalSort: (newSort: SortFieldApplied) => void;
+    removeExternalSort: (columnKey: string) => void;
+    getNewId: () => number;
+    getCurrentSorts: () => SortFieldApplied[];
 }

package/components/LanguagePopover/LanguagePopover.js

@@ -5,17 +5,16 @@ import { useEnvironment, useNetwork } from "@m4l/core";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { I as Image } from "../Image/Image.js";
-import { L as LanguagePopoverRootStyled, P as PaperStyled, I as ImageStyled } from "./slots/LanguagePopoverSlots.js";
+import { L as LanguagePopoverRootStyled, P as PaperStyled } from "./slots/LanguagePopoverSlots.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "./constants.js";
 import { L as LanguagePopoverSlots } from "./slots/LanguagePopoverEnum.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 function LanguagePopover(props) {
   const {
     disabled,
-    size = "medium"
+    size
   } = props;
   const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isFirstRender = useFirstRender();
   const { currentLocale, onChangeLocale } = useLocales();
   const { domain_token } = useEnvironment();
@@ -68,11 +67,14 @@ function LanguagePopover(props) {
   return /* @__PURE__ */ jsx(
     LanguagePopoverRootStyled,
     {
-      size: adjustedSize,
+      ownerState: {
+        size: currentSize
+      },
+      size: currentSize,
       className: classRoot,
       ...getPropDataTestId(LANGUAGE_POPOVER_KEY_COMPONENT, LanguagePopoverSlots.root),
       disabled,
-      icon: /* @__PURE__ */ jsx(ImageStyled, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }),
+      icon: /* @__PURE__ */ jsx(Image, { src: currentLocale?.urlIcon, enableIntersectionObserver: false }),
       menuActions: getMenuActionsOptions(),
       onOpen: handleMenuOpenChange,
       slots: {

package/components/LanguagePopover/LanguagePopover.styles.js

@@ -1,8 +1,36 @@
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const languagePopoverStyles = {
-  root: {},
-  image: {
-    height: "100%"
-  },
+  /**
+   * Estilos del root
+   */
+  root: ({ theme, ownerState }) => ({
+    "&": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (size) => ({
+          width: size,
+          height: size
+        })
+      ),
+      "& .MuiButtonBase-root .M4LImage-root": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "base",
+          (size) => ({
+            width: `${size}!important`,
+            height: `${size}!important`
+          })
+        )
+      }
+    }
+  }),
+  image: {},
   /**
    *  Estilos del paper
    */

package/components/LanguagePopover/slots/LanguagePopoverSlots.d.ts

@@ -1,5 +1,11 @@
-export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
-export declare const ImageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const LanguagePopoverRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../MenuActions/types').MenuActionsProps, keyof import('../../MenuActions/types').MenuActionsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ImageStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     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;
-}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').LanguagePopoverOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/LanguagePopover/slots/LanguagePopoverSlots.js

@@ -1,5 +1,4 @@
 import { styled } from "@mui/material/styles";
-import { I as Image } from "../../Image/Image.js";
 import { M as MenuActions } from "../../MenuActions/MenuActions.js";
 import { L as LANGUAGE_POPOVER_KEY_COMPONENT } from "../constants.js";
 import { l as languagePopoverStyles } from "../LanguagePopover.styles.js";
@@ -9,7 +8,7 @@ const LanguagePopoverRootStyled = styled(MenuActions, {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.root
 })(languagePopoverStyles.root);
-const ImageStyled = styled(Image, {
+styled("div", {
   name: LANGUAGE_POPOVER_KEY_COMPONENT,
   slot: LanguagePopoverSlots.image
 })(languagePopoverStyles.image);
@@ -18,7 +17,6 @@ const PaperStyled = styled(Paper, {
   slot: LanguagePopoverSlots.paper
 })(languagePopoverStyles.paper);
 export {
-  ImageStyled as I,
   LanguagePopoverRootStyled as L,
   PaperStyled as P
 };

package/components/LanguagePopover/types.d.ts

@@ -17,4 +17,9 @@ export interface LanguagePopoverProps {
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
-export type LanguagePopoverStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;
+export type LanguagePopoverSlotsType = keyof typeof Slots;
+export interface LanguagePopoverOwnerState {
+    size: LanguagePopoverProps['size'];
+    image?: string;
+}
+export type LanguagePopoverStyles = M4LOverridesStyleRules<LanguagePopoverSlotsType, typeof LANGUAGE_POPOVER_KEY_COMPONENT, Theme>;

package/components/PaperForm/styles.js

@@ -13,7 +13,8 @@ const paperFormStyles = {
     borderColor: theme.vars.palette.border.default,
     overflow: "hidden",
     width: "100%",
-    height: "auto"
+    height: "auto",
+    container: "container / inline-size"
   }),
   /**
    * ************************************************************