@m4l/components 9.2.55 → 9.2.56-beta.3

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -118,6 +118,8 @@ const Popup = forwardRef((props, ref) => {
           isLoading: loading,
           windowId: popupId,
           selected,
+          type: "popup",
+          variant: "outlined",
           ...process.env.NODE_ENV !== "production" ? {
             [TEST_PROP_ID]: getNameDataTestId(
               POPUPS_VIEWER_CLASS_NAME,

package/hooks/useComponentSize/useComponentSize.d.ts

@@ -3,7 +3,7 @@ import { Sizes } from '@m4l/styles';
  * hook usado para obtener el valor por defecto para los componentes que usan la prop size
  * @returns objeto con el valor por default del size y la función para cambiarlo
  */
-export declare function useComponentSize(componentSize?: Sizes | null | undefined): {
-    currentSize: Sizes;
-    setDefaultSize: (newDefaultSize: Sizes) => void;
+export declare function useComponentSize<T extends Sizes | null | undefined = Sizes>(componentSize?: T): {
+    currentSize: T extends Sizes ? T : Sizes;
+    setDefaultSize: (size: Sizes) => void;
 };

package/hooks/useComponentSize/useComponentSize.js

@@ -1,8 +1,11 @@
 import { u as useAppearanceComponentStore } from "../../contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
-function useComponentSize(componentSize = null) {
+function useComponentSize(componentSize) {
   const defaultSize = useAppearanceComponentStore((state) => state.defaultSize);
   const setDefaultSize = useAppearanceComponentStore((state) => state.actions.setDefaultSize);
-  return { currentSize: componentSize ?? defaultSize, setDefaultSize };
+  return {
+    currentSize: componentSize ?? defaultSize,
+    setDefaultSize
+  };
 }
 export {
   useComponentSize as u

package/hooks/useDynamicFilterAndSort/slots/DynamicFilterAndSortSlots.d.ts

@@ -1,9 +1,9 @@
-export declare const StackLeftActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>;
+export declare const StackLeftActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const StackCustomHeaderStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>;
+export declare const StackCustomHeaderStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const StackRightActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>;
+export declare const StackRightActionsStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').StackProps, keyof import('../../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DynamicFilterAndSortOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/hooks/useDynamicFilterAndSort/styles.js

@@ -5,14 +5,10 @@ const dynamicFilterAndSortStyles = {
    * Estilos para los leftActions
    */
   stackLeftActions: ({ theme }) => ({
+    width: "fit-content",
     gap: theme.vars.size.baseSpacings.sp1,
-    "& .MuiBadge-badge": {
-      width: `${theme.vars.size.baseSpacings.sp2} !important`,
-      minWidth: `${theme.vars.size.baseSpacings.sp2} !important`,
-      minHeight: `${theme.vars.size.baseSpacings.sp2} !important`,
-      height: `${theme.vars.size.baseSpacings.sp2} !important`,
-      backgroundColor: `${theme.vars.palette.primary.enabled} !important`
-    }
+    display: "flex",
+    alignItems: "center"
   }),
   /**
    * Estilos para el Stack que contiene los componentes de filtro y ordenamiento
@@ -20,17 +16,14 @@ const dynamicFilterAndSortStyles = {
   stackCustomHeader: ({ theme, ownerState }) => ({
     flexDirection: theme.generalSettings.isMobile ? "column" : "row",
     gap: theme.vars.size.baseSpacings.sp3,
-    padding: `0 ${theme.vars.size.baseSpacings.sp1}`,
     height: "auto",
     alignItems: "center",
     [`& [class*="${DYNAMIC_FILTER_KEY_COMPONENT}-root"]`]: {
-      display: ownerState.showDynamicFilter ? "block" : "none",
-      width: "auto",
+      display: ownerState?.showDynamicFilter ? "block" : "none",
       flexGrow: theme.generalSettings.isMobile ? 1 : 2
     },
     [`& [class*="${DYNAMIC_SORT_KEY_COMPONENT}-root"]`]: {
-      display: ownerState.showDynamicSort ? "block" : "none",
-      width: "auto",
+      display: ownerState?.showDynamicSort ? "block" : "none",
       flexGrow: 1
     }
   }),
@@ -39,7 +32,8 @@ const dynamicFilterAndSortStyles = {
    */
   stackRightActions: ({ theme }) => ({
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "fit-content"
   })
 };
 export {

package/hooks/useDynamicFilterAndSort/types.d.ts

@@ -1,10 +1,10 @@
 import { DynamicSortProps, InitialSortApplied, RawSortFieldApply } from '../../components/DynamicSort/types';
 import { DynamicFilterProps, InitialFilterApplied, RawFilterFieldApply } from '../../components/DynamicFilter/types';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DynamicFilterAndSortSlots } from './slots/DynamicFilterAndSortEnum';
 import { M4LDYNAMIC_KEY_FILTER_AND_SORT } from './constants';
 import { Theme } from '@mui/material/styles';
 import { WindowToolsMF } from '../../components/WindowBase';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
 interface ChangeFilter {
     filters?: Array<InitialFilterApplied>;
     rawFilters?: Array<RawFilterFieldApply>;
@@ -35,5 +35,5 @@ export interface DynamicFilterAndSortOwnerState {
     showDynamicSort: boolean;
 }
 export type DynamicFilterAndSortSlotsType = keyof typeof DynamicFilterAndSortSlots;
-export type DynamicFilterAndSortStyles = OverridesStyleRules<DynamicFilterAndSortSlotsType, typeof M4LDYNAMIC_KEY_FILTER_AND_SORT, Theme>;
+export type DynamicFilterAndSortStyles = M4LOverridesStyleRules<DynamicFilterAndSortSlotsType, typeof M4LDYNAMIC_KEY_FILTER_AND_SORT, Theme>;
 export {};

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo, useCallback } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
-import { B as Badge } from "../../components/mui_extended/Badge/Badge.js";
 import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
 import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
@@ -13,23 +12,10 @@ import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum
 import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
 import { deepEqual } from "fast-equals";
 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 [initialAppliedFilters] = useState(() => {
@@ -41,6 +27,8 @@ const useDynamicFilterAndSort = (props) => {
   const refOnChangeFilterSort = useRef(0);
   const fireOnChangeFilterRef = useRef(null);
   const fireOnChangeSortRef = useRef(null);
+  const { toast } = useWindowToolsMF();
+  const { getLabel } = useModuleDictionary();
   const [invisibleBadge, setInvisibleBadge] = useState(() => ({
     filter: initialAppliedFilters?.length === 0,
     sort: initialAppliedSorts?.length === 0
@@ -75,14 +63,14 @@ const useDynamicFilterAndSort = (props) => {
     }
     refOnChangeFilterSort.current++;
   }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge, sorts]);
-  const handleChangeSorts = useCallback((Sorts, rawSorts) => {
-    setInvisibleBadge((prev) => ({ ...prev, sort: Sorts.length === 0 }));
-    if (eventRefs.current?.eventSorts?.sorts && !deepEqual(eventRefs.current?.eventSorts?.sorts, Sorts)) {
-      setCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS, "window", 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: Sorts, rawSorts }
+      eventSorts: { sorts: newSorts, rawSorts }
     };
     if (isValidFilters()) {
       onChangeFilterSort(eventRefs.current);
@@ -101,18 +89,19 @@ const useDynamicFilterAndSort = (props) => {
     } else {
       if (isValidFilters()) {
         onChangeFilterSort(eventRefs.current);
+      } else {
+        toast({ title: getLabel(DICCTIONARY.error_invalid_filters_before) }, { type: "error" });
       }
     }
-  }, [filterSortAutomatic, isValidFilters, onChangeFilterSort]);
-  const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ownerState: {}, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
-    /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.filter, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }) }),
-    /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.sort, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") }) })
+  }, [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",
-      ownerState: {},
       ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackRightActions, dataTestId),
       children: [
         /* @__PURE__ */ jsx(

package/index.js

@@ -80,7 +80,6 @@ import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
 import { L as L5 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
-import { P as P2 } from "./components/Pager/Pager.js";
 import { g as g11 } from "./components/Pager/dicctionary.js";
 import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
@@ -88,7 +87,7 @@ import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
 import { C as C14 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
-import { P as P3 } from "./components/mui_extended/Popover/Popover.js";
+import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Skeleton/Skeleton.js";
 import { S as S5 } from "./components/mui_extended/Stack/Stack.js";
 import { T as T4 } from "./components/mui_extended/Tab/Tab.js";
@@ -103,7 +102,7 @@ import { T as T11 } from "./components/mui_extended/ToggleButton/slots/ToggleBut
 import { T as T12 } from "./components/mui_extended/ToggleButton/slots/ToggleButtonSlots.js";
 import { t as t2 } from "./components/mui_extended/ToggleIconButton/ToggleIconButton.styles.js";
 import { T as T13 } from "./components/mui_extended/ToggleIconButton/ToggleIconButton.js";
-import { T as T14 } from "./components/mui_extended/ToggleIconButton/constants.js";
+import { a as a7, T as T14 } from "./components/mui_extended/ToggleIconButton/constants.js";
 import { T as T15 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
 import { T as T16 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { N as N2 } from "./components/mui_extended/NavLink/NavLink.js";
@@ -111,10 +110,10 @@ import { D as D6 } from "./components/mui_extended/Dialog/Dialog.js";
 import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
 import { D as D7, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
-import { P as P4, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
+import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
 import { C as C15, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
-import { P as P5, u as u13 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
-import { P as P6, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
+import { P as P4, u as u13 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
+import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
 import { C as C16 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D8 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
@@ -145,7 +144,7 @@ import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
 import { R as R16 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
 import { R as R17 } from "./components/hook-form/RHFPeriod/constants.js";
 import { R as R18 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { P as P7, R as R19, S as S6, T as T17 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { P as P6, R as R19, S as S6, T as T17 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
 import { R as R20 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
 import { R as R21 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { I as I4 } from "./components/Icon/Icon.js";
@@ -157,7 +156,7 @@ import { L as L9 } from "./components/Loadable/index.js";
 import { L as L10 } from "./components/LoadingError/LoadingError.js";
 import { g as g22 } from "./components/LoadingError/dictionary.js";
 import { g as g23 } from "./components/MenuActions/dictionary.js";
-import { a as a7, M as M3 } from "./components/MenuActions/MenuActions.js";
+import { a as a8, M as M3 } from "./components/MenuActions/MenuActions.js";
 import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
 import { M as M5 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
@@ -165,31 +164,32 @@ import { N as N3 } from "./components/NoItemSelected/NoItemSelected.js";
 import { g as g25 } from "./components/NoItemSelected/dictionary.js";
 import { g as g26 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
-import { P as P8 } from "./components/PaperForm/PaperForm.js";
-import { P as P9 } from "./components/PDFViewer/PDFViewer.js";
+import { P as P7 } from "./components/PaperForm/PaperForm.js";
+import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
 import { u as u14 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
-import { a as a8, P as P10 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
-import { P as P11 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
-import { P as P12 } from "./components/PrintingSystem/PrintingSystem.js";
-import { P as P13 } from "./components/PropertyValue/PropertyValue.js";
+import { a as a9, P as P9 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
+import { P as P10 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
+import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
+import { P as P12 } from "./components/PropertyValue/PropertyValue.js";
 import { S as S7 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S8 } from "./components/SideBar/SideBar.js";
 import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W } from "./components/WindowBase/WindowBase.js";
 import { u as u15 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { a as a9, u as u16 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
-import { M as M6, W as W2, a as a10 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
+import { a as a10, u as u16 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
+import { M as M6, W as W2, a as a11 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D9, a as a11, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D9, a as a12, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
-import { a as a12, g as g27 } from "./components/ModalDialog/dictionary.js";
+import { a as a13, g as g27 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
+import { P as P13 } from "./components/Pager/Pager.js";
 import { F as F2, R as R22, u as u17 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g28 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { a as a13, M as M9 } from "./contexts/ModalContext/index.js";
+import { a as a14, M as M9 } from "./contexts/ModalContext/index.js";
 import { u as u19 } from "./hooks/useFormAddEdit/index.js";
 import { u as u20 } from "./hooks/useModal/index.js";
 import { u as u21 } from "./hooks/useTab/index.js";
@@ -210,9 +210,9 @@ import { g as g30 } from "./utils/getComponentUtilityClass.js";
 import { g as g31 } from "./utils/getPaletteColor.js";
 import { g as g32 } from "./utils/getTypographyStyles.js";
 import { g as g33 } from "./utils/getIconColor.js";
-import { a as a14 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { a as a15 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g34, a as a15 } from "./utils/getComponentSlotRoot.js";
+import { g as g34, a as a16 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
 import { g as g35 } from "./utils/getValidDate.js";
 import { g as g36 } from "./utils/getNullGuard.js";
@@ -266,7 +266,7 @@ export {
   D3 as DragResizeWindowRND,
   D4 as DynamicFilter,
   D9 as DynamicMFParmsContext,
-  a11 as DynamicMFParmsProvider,
+  a12 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
   F2 as FormProviderCustom,
@@ -292,10 +292,10 @@ export {
   M4 as MFIsolationApp,
   M5 as MFLoader,
   M7 as MemonizedDynamicMFParmsProvider,
-  a7 as MemonizedMenuActions,
+  a8 as MemonizedMenuActions,
   M6 as MemonizedWindowToolsMFContext,
   M3 as MenuActions,
-  a13 as ModalContext,
+  a14 as ModalContext,
   M8 as ModalDialog,
   M9 as ModalProvider,
   M as MotionContainer,
@@ -305,20 +305,20 @@ export {
   N as NumberEditor,
   O as ObjectLogs,
   O2 as ObjectQueue,
-  P9 as PDFViewer,
-  P2 as Pager,
-  P8 as PaperForm,
-  P5 as PeriodFormatter,
-  P7 as PeriodRootStyled,
-  P4 as PointsFormatter,
-  P3 as Popover,
-  a8 as PopupsContext,
-  P10 as PopupsProvider,
-  P11 as PopupsViewer,
-  P6 as PriceFormatter,
-  P12 as PrintingSystem,
+  P8 as PDFViewer,
+  P13 as Pager,
+  P7 as PaperForm,
+  P4 as PeriodFormatter,
+  P6 as PeriodRootStyled,
+  P3 as PointsFormatter,
+  P2 as Popover,
+  a9 as PopupsContext,
+  P9 as PopupsProvider,
+  P10 as PopupsViewer,
+  P5 as PriceFormatter,
+  P11 as PrintingSystem,
   P as PropagateLoaderSpinner,
-  P13 as PropertyValue,
+  P12 as PropertyValue,
   R4 as RHFAutocomplete,
   R5 as RHFAutocompleteAsync,
   R13 as RHFCheckbox,
@@ -351,6 +351,7 @@ export {
   S3 as SplitLayout,
   S5 as Stack,
   T10 as TOGGLE_BUTTON_KEY_COMPONENT,
+  a7 as TOGGLE_ICON_BUTTON_CLASS_NAME_SPECIFY,
   T14 as TOGGLE_ICON_BUTTON_KEY_COMPONENT,
   T4 as Tab,
   T6 as TabContent,
@@ -375,7 +376,7 @@ export {
   W as WindowBase,
   W3 as WindowConfirm,
   W2 as WindowToolsMFContext,
-  a10 as WindowToolsMFProvider,
+  a11 as WindowToolsMFProvider,
   c2 as addLayoutItemToBreakPointIfNoExists,
   e as addLayoutItemToBreakPoints,
   c4 as capitalizeFirstLetter,
@@ -391,7 +392,7 @@ export {
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
   g34 as getComponentClasses,
-  a15 as getComponentSlotRoot,
+  a16 as getComponentSlotRoot,
   g30 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
@@ -405,13 +406,13 @@ export {
   g14 as getFormatPoints,
   g16 as getFormatPrice,
   g18 as getFormattersComponentsDictionary,
-  a14 as getHeightSizeStyles,
+  a15 as getHeightSizeStyles,
   g33 as getIconColor,
   g8 as getIsIfInDynamicFilter,
   g22 as getLoadingErrorComponentsDictionary,
   g24 as getMFLoaderComponentsDictionary,
   g23 as getMenuActionsComponentsDictionary,
-  a12 as getModalDialogComponentsDictionary,
+  a13 as getModalDialogComponentsDictionary,
   g27 as getModalDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
   g36 as getNullGuard,
@@ -449,7 +450,7 @@ export {
   u17 as useCustomForm,
   u29 as useDataGridPersistence,
   u28 as useDynamicFilterAndSort,
-  a9 as useDynamicMFParameters,
+  a10 as useDynamicMFParameters,
   u16 as useDynamicMFParametersStore,
   u19 as useFormAddEdit,
   u22 as useFormFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.55",
+  "version": "9.2.56-beta.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "^2.9.5",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^7.0.0",
-    "@m4l/styles": "^7.0.0",
+    "@m4l/graphics": "7.1.1-beta.3",
+    "@m4l/styles": "7.1.28-beta.3",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

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

@@ -30,4 +30,8 @@ export declare const WithStartAndEndIcon: Story;
  * Base story for `Chip` in skeleton mode.
  */
 export declare const Skeleton: Story;
+export declare const allaColorsContainedTone: Story;
+export declare const allaColorsOutlinedTone: Story;
+export declare const allaColorsContainedOpacity: Story;
+export declare const allaColorsOutlinedOpacity: Story;
 export default meta;

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

@@ -28,6 +28,22 @@ export declare const NoPager: Story;
  * Filter y Sort en busqueda automatica
  */
 export declare const CustomHeaderFilterSortAutomatic: Story;
+/**
+ * DataGrid con modal de configuracion desplegado
+ */
+export declare const ModalConfiguration: Story;
+/**
+ * Menú de acciones desplegable para configurar la densidad de los registros.
+ */
+export declare const DensityMenuActions: Story;
+/**
+ * Botón para visualizar los filtros de columnas.
+ */
+export declare const ColumnFilters: Story;
+/**
+ * Menú de acciones desplegable para la fila.
+ */
+export declare const RowMenuActions: Story;
 /**
  * DataGrid con leftActions, rightActions y
  * Filter y Sort en busqueda manual

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

@@ -18,4 +18,8 @@ export declare const small: Story;
  * Icon component with size medium
  */
 export declare const medium: Story;
+/**
+ * Icon component with skeleton
+ */
+export declare const withSkeleton: Story;
 export default meta;

package/storybook/components/WindowBase/windowBase.stories.d.ts

@@ -2,11 +2,64 @@ import { Meta, StoryObj } from '@storybook/react';
 import { WindowBase } from '../../../src/components/WindowBase';
 declare const meta: Meta<typeof WindowBase>;
 type Story = StoryObj<typeof WindowBase>;
-export declare const Default: Story;
-export declare const SelectedState: Story;
-export declare const WithIcon: Story;
-export declare const WithCloseButton: Story;
-export declare const WithActions: Story;
-export declare const isLoadingTrue: Story;
-export declare const WithToaster: Story;
+/**
+ * Variante de WindowBase con outlined en enabled no selected
+ */
+export declare const EnabledNoSelectedOutlinedLayout: Story;
+/**
+ * Variante de WindowBase con text en enabled no selected
+ */
+export declare const EnabledNoSelectedTextLayout: Story;
+/**
+ * Variante de WindowBase con outlined en enabled tipo popup no selected
+ */
+export declare const EnabledNoSelectedOutlinedPopup: Story;
+/**
+ * Variante de WindowBase con outlined o text en enabled tipo modal no selected
+ */
+export declare const EnabledNoSelectedOutlinedOrTextModal: Story;
+/**
+ * Variante de WindowBase con text en enabled tipo popup no selected
+ */
+export declare const EnabledNoSelectedTextPopup: Story;
+/**
+ * Variante de WindowBase con outlined en enabled selected
+ */
+export declare const EnabledSelectedOutlinedLayout: Story;
+/**
+ * Variante de WindowBase con outlined en selected tipo popup
+ */
+export declare const EnabledSelectedOutlinedPopup: Story;
+/**
+ * Variante de WindowBase con outlined en enabled no selected loading
+ */
+export declare const EnabledNoSelectedLoadingOutlinedLayout: Story;
+/**
+ * Variante de WindowBase con text en enabled no selected loading
+ */
+export declare const EnabledNoSelectedLoadingTextLayout: Story;
+/**
+ * Variante de WindowBase con text en enabled no selected loading tipo popup
+ */
+export declare const EnabledNoSelectedLoadingTextPopup: Story;
+/**
+ * Variante de WindowBase con outlined en loading en enabled tipo popup
+ */
+export declare const EnabledNoSelectedLoadingOutlinedPopup: Story;
+/**
+ * Componente en skeleton con outlined tipo layout
+ */
+export declare const SkeletonOutlinedLayout: Story;
+/**
+ * Componente en skeleton con outlined tipo popup
+ */
+export declare const SkeletonOutlinedPopup: Story;
+/**
+ * Componente en skeleton con text tipo layout
+ */
+export declare const SkeletonTextLayout: Story;
+/**
+ * Componente en skeleton con text tipo popup
+ */
+export declare const SkeletonTextPopup: Story;
 export default meta;