@m4l/components 9.4.14 → 9.4.15-BE20260121-1

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

@@ -12,6 +12,16 @@ export interface SeedProps {
     withMultipleIcons?: boolean;
     withInteractiveCheck?: boolean;
     withNestedValue?: boolean;
+    /**
+     * Si es true, genera valores anidados con algunos null/undefined
+     * para mostrar el comportamiento del defaultValue ('-')
+     */
+    withNestedValueWithNulls?: boolean;
+    /**
+     * Si es true, genera valores anidados con null/undefined
+     * y usa un defaultValue personalizado ('N/A')
+     */
+    withNestedValueCustomDefaultValue?: boolean;
     withPoints?: boolean;
     withPrice?: boolean;
     withUncertainty?: boolean;

package/components/datagrids/views/CardsView/hooks/useCardContent/useCardContent.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useCardContent({
@@ -15,7 +15,6 @@ function useCardContent({
 }) {
   const { getConfigColumns, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const columnsConfig = getConfigColumns("cards");
@@ -95,7 +94,7 @@ function useCardContent({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(column.key);
                     },

package/components/datagrids/views/CardsView/subcomponents/CardDetails/CardDetails.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { o as CardDetailContainerStyled, j as ContainerLabelValueColumnStyled, k as ContentWrapperColumnStyled, L as LabelHeaderColumnStyled, E as EditorCellWrapperStyled, V as ValueColumnStyled, l as EditablePlaceholderStyled, m as IconButtonEditStyled } from "../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { ActionsEditOutlined } from "@m4l/icons";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 function CardDetails({
   row,
@@ -17,7 +17,6 @@ function CardDetails({
   const [editingColumnKey, setEditingColumnKey] = useState(null);
   const [refreshCounter, setRefreshCounter] = useState(0);
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { currentSize } = useComponentSize(size);
   const currentRow = rows[rowIndex] || row;
   const handleForceRefresh = useCallback(() => {
@@ -116,7 +115,7 @@ function CardDetails({
                 /* @__PURE__ */ jsx(
                   IconButtonEditStyled,
                   {
-                    src: `${host_static_assets}/${environment_assets}/${pathIcons.edit}`,
+                    src: /* @__PURE__ */ jsx(ActionsEditOutlined, {}),
                     onClick: () => {
                       setEditingColumnKey(modifiedColumn.key);
                     },

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/CardHeader/CardHeader.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { useEnvironment } from "@m4l/core";
 import { s as CardHeaderStyled, t as CardHeaderLeftStyled, u as CardHeaderRightStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { LayoutExpandOutlined } from "@m4l/icons";
 import { C as CheckboxCellAdapter } from "../../../../../adapters/CheckboxCellAdapter/CheckboxCellAdapter.js";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +15,6 @@ function CardHeader({
   onCheckedRowsChange
 }) {
   const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
     (checked, _isShiftClick) => {
@@ -69,7 +67,7 @@ function CardHeader({
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          icon: `${host_static_assets}/${environment_assets}/${pathIcons.expanded}`,
+          icon: /* @__PURE__ */ jsx(LayoutExpandOutlined, {}),
           size,
           variant: "text",
           "data-testid": `card-details-button-${rowKey}`,

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { p as pathIcons } from "../../../../icons.js";
+import { useModuleDictionary } from "@m4l/core";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
   const { getLabel } = useModuleDictionary();
@@ -19,7 +18,7 @@ function Settings(props) {
       tooltip: getLabel("data_grid.tooltip_settings"),
       onClick: handleClick,
       "aria-label": "settings",
-      icon: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+      icon: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
       "data-testid": "settings-button"
     }
   );

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
 import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
 import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../../icons.js";
+import { SettingsConfigOutlined } from "@m4l/icons";
 import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -16,7 +16,6 @@ const useModalSettings = (size, columns) => {
   const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const columnsConfig = getConfigColumns("cards");
   const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
@@ -39,7 +38,7 @@ const useModalSettings = (size, columns) => {
         WindowBase,
         {
           title: getLabel("data_grid.settings_title"),
-          iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
+          iconUrl: /* @__PURE__ */ jsx(SettingsConfigOutlined, {}),
           onClose: closeModal,
           className: "settings-modal",
           variant: "outlined",

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { p as pathIcons } from "../../../../../../icons.js";
 import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
+import { ArrowChevronUpOutlined, ArrowChevronMdUpOutlined, ArrowChevronDownOutlined, ArrowChevronMdDownOutlined, ActionsMultiCheckOutlined, ActionsCheckIndeterminateOutlined, ArrowRestoreOutlined } from "@m4l/icons";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
   return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
@@ -48,7 +48,6 @@ const ColumnsConfig = forwardRef(
       () => /* @__PURE__ */ new Set()
     );
     const divRef = useRef(null);
-    const { host_static_assets, environment_assets } = useEnvironment();
     useImperativeHandle(ref, () => ({
       onClickIntro: handleIntro,
       current: divRef.current
@@ -234,7 +233,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveFirst,
             "aria-label": "move first place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveFirstPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -244,7 +243,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(-1),
             "aria-label": "move up place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveUpPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -254,7 +253,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveLast,
             "aria-label": "move last place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveLastPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -264,7 +263,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(1),
             "aria-label": "move down place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveDownPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -273,7 +272,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_VISIBLE_ALL),
             onClick: checkAll,
             "aria-label": "check visible all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
+            icon: /* @__PURE__ */ jsx(ActionsMultiCheckOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -282,7 +281,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_NO_VISIBLE_ALL),
             onClick: unCheckAll,
             "aria-label": "un check all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
+            icon: /* @__PURE__ */ jsx(ActionsCheckIndeterminateOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -291,7 +290,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_RESTORE),
             onClick: restoreAll,
             "aria-label": "Restore columns",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`
+            icon: /* @__PURE__ */ jsx(ArrowRestoreOutlined, {})
           }
         )
       ] })

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.js

@@ -1,5 +1,7 @@
-import { useMemo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { ActionsFilterOutlined } from "@m4l/icons";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -14,13 +16,16 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const executeSortChange = (newSortColumns) => {
-    if (handleSortFromPopover) {
-      handleSortFromPopover(newSortColumns);
-    } else {
-      setSortColumns(newSortColumns);
-    }
-  };
+  const executeSortChange = useCallback(
+    (newSortColumns) => {
+      if (handleSortFromPopover) {
+        handleSortFromPopover(newSortColumns);
+      } else {
+        setSortColumns(newSortColumns);
+      }
+    },
+    [handleSortFromPopover, setSortColumns]
+  );
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -235,18 +240,9 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         disabled: externalSortSettings ? !hasAnySortApplied || !isRemovable : !(isAsc || isDesc)
       }
     ];
-    const filterAction = externalFilterSettings ? [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`,
-        label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
-        dataTestId: "filter-add",
-        onClick: () => {
-          addExternalFilter();
-        },
-        disabled: isAddFilterDisabled
-      }
-    ] : [];
+    const filterAction = externalFilterSettings ? [{ type: "menuItem", startIcon: /* @__PURE__ */ jsx(ActionsFilterOutlined, {}), label: getLabel(DICTIONARY.ADD_FILTER_COLUMN), dataTestId: "filter-add", onClick: () => {
+      addExternalFilter();
+    }, disabled: isAddFilterDisabled }] : [];
     const toggleGrouped = (grouped) => {
       if (!columnKey) {
         return;
@@ -254,37 +250,23 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
       const currentGroupedColumns = columnsConfig.filter((c) => c.grouped);
       const newGroupOrder = grouped ? currentGroupedColumns.length : 0;
       const next = columnsConfig.map(
-        (c) => c.key === columnKey ? {
-          ...c,
-          grouped,
-          groupOrder: grouped ? newGroupOrder : c.groupOrder
-        } : c
+        (c) => c.key === columnKey ? { ...c, grouped, groupOrder: grouped ? newGroupOrder : c.groupOrder } : c
       );
       onChangeColumnsConfig("table", next);
     };
-    const groupActions = hasGroupableColumns ? [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.group}`,
-        label: getLabel(DICTIONARY.GROUP_BY_COLUMN),
-        dataTestId: "group-add",
-        onClick: () => {
-          toggleGrouped(true);
-        },
-        disabled: !canGroup || isGrouped
+    const groupActions = hasGroupableColumns ? [{ type: "menuItem", startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.group}`, label: getLabel(DICTIONARY.GROUP_BY_COLUMN), dataTestId: "group-add", onClick: () => {
+      toggleGrouped(true);
+    }, disabled: !canGroup || isGrouped }, {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeGroup}`,
+      label: getLabel(DICTIONARY.REMOVE_GROUP_COLUMN),
+      dataTestId: "group-remove",
+      onClick: () => {
+        toggleGrouped(false);
       },
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeGroup}`,
-        label: getLabel(DICTIONARY.REMOVE_GROUP_COLUMN),
-        dataTestId: "group-remove",
-        onClick: () => {
-          toggleGrouped(false);
-        },
-        // Solo deshabilitado si no está agrupada O si es una agrupación estática (groupable=false)
-        disabled: !isGrouped || !canGroup
-      }
-    ] : [];
+      /** Solo deshabilitado si no está agrupada O si es una agrupación estática (groupable=false)*/
+      disabled: !isGrouped || !canGroup
+    }] : [];
     const baseActions = [
       {
         type: "menuItem",
@@ -305,7 +287,6 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     return [...sortActions, ...filterAction, ...groupActions, ...baseActions];
   }, [
     columnKey,
-    column,
     canSort,
     canSortExternally,
     hasExternalSortAsc,
@@ -325,7 +306,12 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     environment_assets,
     getLabel,
     isAddFilterDisabled,
-    executeSortChange
+    executeSortChange,
+    addExternalFilter,
+    clearLocalSort,
+    isAsc,
+    isDesc,
+    isRemovable
   ]);
 }
 export {

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -20,6 +20,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -28,6 +29,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/extended/React-resizable-panels/SplitLayout.styles.js

@@ -66,25 +66,19 @@ const splitLayoutStyles = {
     "&.M4LSplitLayout-splitResizeHandle-horizontal": {
       width: theme.vars.size.baseSpacings.sp3,
       margin: "1px 0px",
+      transition: "all 0.2s ease",
       "& .M4LIcon-root": {
         opacity: 0,
         zIndex: "1",
-        transform: "rotate(90deg)",
+        transform: "rotate(45deg)",
         width: theme.vars.size.baseSpacings.sp5,
         height: theme.vars.size.baseSpacings.sp5,
+        backgroundColor: theme.vars.palette.background.default,
+        borderRadius: "50%",
+        transition: "all 0.2s ease",
         "& .M4LIcon-icon": {
-          backgroundColor: theme.vars.palette.primary.focusVisible
-        },
-        "&::before": {
-          content: `""`,
-          position: "absolute",
-          left: `calc(50% - ${theme.vars.size.baseSpacings.sp5} / 2)`,
-          right: `calc(50% - ${theme.vars.size.baseSpacings.sp5} / 2)`,
-          width: theme.vars.size.baseSpacings.sp5,
-          height: theme.vars.size.baseSpacings.sp5,
-          backgroundColor: theme.vars.palette.background.default,
-          borderRadius: "50%",
-          zIndex: "0"
+          backgroundColor: theme.vars.palette.primary.focusVisible,
+          transition: "all 0.2s ease"
         }
       },
       "&:after": {
@@ -94,7 +88,8 @@ const splitLayoutStyles = {
         boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.border.disabled}`,
         position: "absolute",
         height: "100%",
-        left: "50%"
+        left: "50%",
+        transition: "all 0.2s ease"
       }
     },
     "&.M4LSplitLayout-splitResizeHandle-vertical": {
@@ -102,23 +97,15 @@ const splitLayoutStyles = {
       // asegúrate de que sea el contenedor para posicionar bien los pseudo-elementos
       height: theme.vars.size.baseSpacings.sp3,
       "& .M4LIcon-root": {
+        transition: "all 0.2s ease",
         opacity: 0,
         zIndex: "1",
         width: theme.vars.size.baseSpacings.sp5,
         height: theme.vars.size.baseSpacings.sp5,
+        borderRadius: "50%",
+        backgroundColor: theme.vars.palette.background.default,
         "& .M4LIcon-icon": {
-          backgroundColor: theme.vars.palette.primary.main
-        },
-        "&::before": {
-          content: `""`,
-          position: "absolute",
-          top: `calc(50% - ${theme.vars.size.baseSpacings.sp5} / 2)`,
-          bottom: `calc(50% - ${theme.vars.size.baseSpacings.sp5} / 2)`,
-          width: theme.vars.size.baseSpacings.sp5,
-          height: theme.vars.size.baseSpacings.sp5,
-          backgroundColor: theme.vars.palette.background.default,
-          borderRadius: "50%",
-          zIndex: "0"
+          backgroundColor: theme.vars.palette.primary.focusVisible
         }
       },
       "&::after": {
@@ -128,25 +115,47 @@ const splitLayoutStyles = {
         boxShadow: `inset 0px 1px 0px 0px ${theme.vars.palette.border.disabled}`,
         position: "absolute",
         width: "100%",
-        top: "50%"
+        top: "50%",
+        transition: "all 0.2s ease"
       }
     },
     // Aquí controlas ambos con hover del root
-    "&:active, &:hover": {
+    "&:hover": {
       "& .M4LIcon-root": {
-        opacity: 1
-      },
-      "&.M4LSplitLayout-splitResizeHandle-vertical": {
-        "&:after": {
-          boxShadow: `inset 0px 1px 0px 0px ${theme.vars.palette.primary.focusVisible}`
+        opacity: 1,
+        transition: "all 0.2s ease",
+        "& .M4LIcon-icon": {
+          backgroundColor: theme.vars.palette.border.dens
         }
-      },
-      "&.M4LSplitLayout-splitResizeHandle-horizontal": {
-        "&:after": {
-          boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.primary.focusVisible}`
+      }
+    },
+    "&:active": {
+      "& .M4LIcon-root": {
+        opacity: 1,
+        transition: "all 0.2s ease",
+        "& .M4LIcon-icon": {
+          backgroundColor: `${theme.vars.palette.primary.focusVisible}!important`
         }
       }
     }
+    /* '&:active, &:hover': {
+      '& .M4LIcon-root': {
+        opacity: 1,
+        transition: 'all 0.2s ease',
+      },
+      '&.M4LSplitLayout-splitResizeHandle-vertical': {
+        '&:after': {
+          boxShadow: `inset 0px 1px 0px 0px ${theme.vars.palette.primary.focusVisible}`,
+          transition: 'all 0.2s ease',
+        },
+      },
+      '&.M4LSplitLayout-splitResizeHandle-horizontal': {
+        '&:after': {
+          boxShadow: `inset 1px 0px 0px 0px ${theme.vars.palette.primary.focusVisible}`,
+          transition: 'all 0.2s ease',
+        },
+      },
+    }, */
   }),
   splitResizeHandleIcon: {}
 };

package/components/extended/React-resizable-panels/slots/SplitLayoutSlots.d.ts

@@ -71,6 +71,6 @@ export declare const SplitResizeHandleStyled: import('@emotion/styled').StyledCo
 }, "children" | "title" | "id" | "disabled" | "color" | "content" | "translate" | "className" | "style" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "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" | "tagName" | "hitAreaMargins" | "onDragging"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const SplitResizeHandleIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const SplitResizeHandleIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, "src" | "icon" | keyof import('../../../Icon').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -1,7 +1,7 @@
-export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, "src" | "icon" | keyof import('../../..').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const BooleanFormatterIconCheckFalseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+export declare const BooleanFormatterIconCheckFalseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, "src" | "icon" | keyof import('../../..').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {

package/components/formatters/IconsFormatter/slots/IconsFormatterSlots.d.ts

@@ -1,9 +1,9 @@
 export declare const IconsContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: any;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, "src" | "icon" | keyof import('../../../Icon').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: any;
 }, {}, {}>;
-export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, "src" | "icon" | keyof import('../../../Icon').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: any;
 }, {}, {}>;

package/components/formatters/IconsFormatter/types.d.ts

@@ -4,6 +4,7 @@ import { Sizes } from '@m4l/styles';
 import { IconsFormatterSlots } from './slots/IconsFormatterEnum';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 import { ICONS_FORMATTER_KEY_COMPONENT } from './constants';
+import { IconProps } from '../../Icon/types';
 export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
 /**
  * Configuración para un solo icono
@@ -12,7 +13,7 @@ export interface IconConfig {
     /**
      * URL o ruta de la imagen del icono
      */
-    iconUrl: string;
+    iconUrl: IconProps['src'];
     /**
      * Tooltip que se mostrará al pasar el cursor sobre el icono
      */

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,6 +65,11 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
+    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
+    //   return {
+    //     ...state,
+    //     selectedOptions: action.payload,
+    //   };
     default:
       return state;
   }