@m4l/components 9.1.125 → 9.1.127

package/.storybook/constants.d.ts

@@ -28,3 +28,4 @@ export declare const HOST_API_REMOTE = "https://lab1.stage.made4labs.com/api/v1/
 export declare const HOST_STATIC_ASSETS = "https://s3.amazonaws.com/static.made4labs/environments";
 export declare const DOMAIN_TOKEN = "lab1";
 export declare const STORYBOOK_MODULE_ID = "login";
+export declare const STORYBOOK_ISOLATION_MODULE_ID = "users_list";

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -25,11 +25,11 @@ export declare const colorsLight: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
+        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
-        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -180,11 +180,11 @@ export declare const colorsLight: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
+        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
-        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -336,11 +336,11 @@ export declare const colorsDark: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
+        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
-        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -491,11 +491,11 @@ export declare const colorsDark: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
+        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
-        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;

package/@types/export.d.ts

@@ -40,9 +40,6 @@ declare module '@mui/material/styles' {
     M4LIconButton?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIconButton'];
     };
-    M4LanguagePopover?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LanguagePopover'];
-    };
     M4LImageButton?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LImageButton'];
     };

package/@types/types.d.ts

@@ -115,11 +115,11 @@ import { AvatarOwnerState, AvatarSlotsType } from '../components/mui_extended/Av
 import { ToggleButtonOwnerState, ToggleButtonSlotsType } from '../components/mui_extended/ToggleButton/types';
 import { BooleanFormatterOwnerState, PresentationType } from '../components/formatters/BooleanFormatter/types';
 import { ToggleIconButtonOwnerState, ToggleIconButtonSlotsType } from '../components/mui_extended/ToggleIconButton/types';
-import { TabsSlotsType, TabsOwnerState } from '../components/mui_extended/Tabs/types';
+import { TabsSlotsType,TabsOwnerState } from '../components/mui_extended/Tabs/types';
 import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/Popover/types';
 import { NumberInputOwnerState, NumberInputSlotsType } from '../components/NumberInput/types';
 import { AccountPopoverOwnerState, AccountPopoverSlotsType } from '../components/AccountPopover/types';
-import { PropertyVaLueOwnerState, PropertyValueType } from '../components/PropertyValue/types';
+import { PropertyVaLueOwnerState, PropertyValueSlotsType } from '../components/PropertyValue/types';
 import { RHFTextFieldPasswordOwnerState, RHFTextFieldPasswordType } from '../components/hook-form/RHFTextFieldPassword/types';
 import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../components/hook-form/RHFAutocomplete/types';
 import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '../components/extended/React-Spinners/PropagateLoaderSpinner/types';
@@ -130,10 +130,11 @@ import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form
 import { ScrollBarSlotsType, ScrollBarOwnerState } from '../components/ScrollBar/types';
 import { StackOwnerState, StackSlotsType } from '../components/mui_extended/Stack/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
+
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
 import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
-import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../components/formatters/CourseFormatter/types';
+
 import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
 import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
 import { AreasViewerOwnerState, AreasViewerType } from '../components/areas/components/AreasViewer/types';
@@ -191,19 +192,20 @@ declare module '@mui/material/styles' {
     M4LTabs: TabsSlotsType;
     RHFM4LAutocomplete: RHFAutocompleteSlotsType;
     M4LAccountPopover: AccountPopoverSlotsType;
-    M4LPropertyValue: PropertyValueType;
+    M4LPropertyValue: PropertyValueSlotsType;
     M4LPropagateLoaderSpinner: PropagateLoaderSpinnerType;
     M4LRHFTextFieldPassword: RHFTextFieldPasswordType;
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
     M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+
     M4LScrollBar: ScrollBarSlotsType;
     M4LAreasAdmin: AreasAdminType;
     M4LStack: StackSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
     M4LDivider: DividerSlotsType;
-    M4LCourseFormatter: CourseFormatterSlotsType;
+
     M4LNoItemSelected: NoItemSelectedSlotsType;
     M4LActionFormIntro: ActionFormIntroSlotsType;
     M4LAreasViewer: AreasViewerType;
@@ -267,12 +269,13 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LAreasAdmin: Partial<AreasAdminOwnerState>;
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
-    M4LCourseFormatter: Partial<CourseFormatterOwnerState>;
+
     M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
     M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
     M4LAreasViewer: Partial<AreasViewerOwnerState>;
@@ -545,10 +548,17 @@ declare module '@mui/material/styles' {
       variants?: ComponentsVariants['M4LLinearProgressIndeterminate'];
     };
     M4LMenuDivider?: {
-      defaultProps?: ComponentsPropsList['M4LMenuDivider'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
-      variants?: ComponentsVariants['M4LMenuDivider'];
+        defaultProps?: ComponentsPropsList['M4LMenuDivider'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
+        variants?: ComponentsVariants['M4LMenuDivider'];
+      };
+    M4LRHFSelect?: {
+        defaultProps?: ComponentsPropsList['M4LRHFSelect'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
+        variants?: ComponentsVariants['M4LRHFSelect'];
     };
+
+
     M4LNavLink?: {
       defaultProps?: ComponentsPropsList['M4LNavLink'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LNavLink'];

package/components/Chip/Chip.js

@@ -16,7 +16,6 @@ const Chip = forwardRef((props, ref) => {
     variant = "contained",
     skeletonWidth = "100%",
     opacity = false,
-    hasIconClose = true,
     onClick,
     onDeleted,
     iconButtonProps,
@@ -84,7 +83,7 @@ const Chip = forwardRef((props, ref) => {
         renderIcon(startIcon, "ChipStartIcon"),
         /* @__PURE__ */ jsx(TextChipStyled, { size: adjustedSize, ownerState: { ...ownerState }, color, children: label }),
         renderIcon(endIcon, "ChipEndIcon"),
-        hasIconClose && /* @__PURE__ */ jsx(
+        onDeleted && /* @__PURE__ */ jsx(
           IconButtonStyled,
           {
             ...iconButtonProps,

package/components/Chip/ChipStyles.js

@@ -1,12 +1,16 @@
 import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const getColors = (theme, ownerState) => {
+  const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
+  const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
+  const color = ownerState.opacity ? finalPalette.color : finalPalette.colorTone;
+  return { color, finalPalette };
+};
 const chipStyles = {
   /**
    * Styles for the root element of the chip.
    */
   root: ({ theme, ownerState }) => {
-    const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
-    const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
-    const color = ownerState.opacity ? finalPalette.color : finalPalette.colorTone;
+    const { color, finalPalette } = getColors(theme, ownerState);
     const bgColor = ownerState.opacity ? finalPalette.backgroundColor : finalPalette.backgroundColorTone;
     const bgHover = ownerState.opacity ? finalPalette.backgroundHover : finalPalette.backgroundHoverTone;
     const bgActive = ownerState.opacity ? finalPalette.backgroundActive : finalPalette.backgroundActiveTone;
@@ -20,9 +24,9 @@ const chipStyles = {
       cursor: "pointer",
       color,
       backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
-      "& .M4LIcon-icon": {
-        backgroundColor: `${color} !important`
-      },
+      // '& .M4LIcon-icon': {
+      //   backgroundColor: `${color} !important`,
+      // },
       ...getHeightSizeStyles(
         theme.generalSettings.isMobile,
         ownerState.size || "medium",
@@ -35,9 +39,6 @@ const chipStyles = {
         },
         "&:active": {
           backgroundColor: bgActive
-          // '& .M4LIcon-icon': {
-          //   backgroundColor: color,
-          // },
         },
         "&:focus-visible": {
           boxShadow: "none",
@@ -63,36 +64,49 @@ const chipStyles = {
   /**
    * Styles for the chip icon element.
    */
-  chipIcon: () => ({}),
+  chipIcon: ({ theme, ownerState }) => {
+    const { color } = getColors(theme, ownerState);
+    return {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${color} !important`
+      }
+    };
+  },
   /**
    * Styles for the icon button inside the chip element.
    */
-  iconButton: ({ theme, ownerState }) => ({
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.base,
-        width: theme.vars.size.mobile.small.base,
-        minHeight: theme.vars.size.mobile.small.base
-      } : {
-        height: theme.vars.size.desktop.small.base,
-        width: theme.vars.size.desktop.small.base,
-        minHeight: theme.vars.size.desktop.small.base
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.base,
-        width: theme.vars.size.mobile.medium.base,
-        minHeight: theme.vars.size.mobile.medium.base
-      } : {
-        height: theme.vars.size.desktop.medium.base,
-        width: theme.vars.size.desktop.medium.base,
-        minHeight: theme.vars.size.desktop.medium.base
+  iconButton: ({ theme, ownerState }) => {
+    const { color } = getColors(theme, ownerState);
+    return {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${color} !important`
+      },
+      // Estilos específicos para el tamaño small
+      ...ownerState.size === "small" && {
+        ...theme.generalSettings.isMobile ? {
+          height: theme.vars.size.mobile.small.base,
+          width: theme.vars.size.mobile.small.base,
+          minHeight: theme.vars.size.mobile.small.base
+        } : {
+          height: theme.vars.size.desktop.small.base,
+          width: theme.vars.size.desktop.small.base,
+          minHeight: theme.vars.size.desktop.small.base
+        }
+      },
+      // Estilos específicos para el tamaño medium
+      ...ownerState.size === "medium" && {
+        ...theme.generalSettings.isMobile ? {
+          height: theme.vars.size.mobile.medium.base,
+          width: theme.vars.size.mobile.medium.base,
+          minHeight: theme.vars.size.mobile.medium.base
+        } : {
+          height: theme.vars.size.desktop.medium.base,
+          width: theme.vars.size.desktop.medium.base,
+          minHeight: theme.vars.size.desktop.medium.base
+        }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles for the skeleton chip element.
    */

package/components/Chip/types.d.ts

@@ -42,10 +42,6 @@ export interface ChipProps {
      * Define el with of skeleton mode
      */
     skeletonWidth?: string | number;
-    /**
-     * OPtion prop to render the close icon
-     */
-    hasIconClose?: boolean;
     /**
      * Opacity of the `Chip`.
      */

package/components/CommonActions/classes/index.js

@@ -1,7 +1,7 @@
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { c as componentName } from "./constants.js";
-import { g as getComponentUtilityClass } from "../../../utils/index.js";
+import { g as getComponentUtilityClass } from "../../../utils/getComponentUtilityClass.js";
 generateUtilityClasses(
   componentName,
   [

package/components/DataGrid/formatters/index.d.ts

@@ -8,3 +8,4 @@ export { ColumnPriceFormatter } from './ColumnPriceFormatter';
 export { ColumnInteractiveCheckFormatter } from './ColumnInteractiveCheckFormatter';
 export { ColumnSetCheckFormatter } from './ColumnSetCheckFormatter';
 export type { ColumnUncertaintyFormatterProps } from './ColumnUncertaintyFormatter/types';
+export { ColumnIconFormatter } from './ColumnIconFormatter';

package/components/DragResizeWindow/index.d.ts

@@ -1,3 +1,2 @@
 export { DragResizeWindow } from './DragResizeWindow';
-export { dragResizeWindowClasses as draggableWindowClasses } from './classes/index';
-export {};
+export { dragResizeWindowClasses } from './classes/index';

package/components/DynamicFilter/DynamicFIlter.styles.js

@@ -252,7 +252,7 @@ const dynamicFilterStyles = {
     "& .MuiPaper-root": {
       display: "flex",
       flexDirection: "column",
-      padding: "8px !important",
+      padding: "8px 0 !important",
       gap: "4px",
       borderRadius: "6px",
       [theme.breakpoints.down("md")]: {

package/components/DynamicFilter/constants.d.ts

@@ -1,6 +1,7 @@
-import { BooleanOperator, DateTimeOperator, Field, NumberOperator, SelectOperator, StringOperator } from './types';
+import { BooleanOperator, DateTimeOperator, FilterField, NumberOperator, SelectOperator, StringOperator } from './types';
 export declare const DYNAMIC_FILTER_KEY_COMPONENT = "M4LDynamicFilter";
-export declare const ALL_FIELD: Field;
+export declare const DYNAMIC_FILTER_SOTORE_ID = "M4LDynamicFilterStore";
+export declare const ALL_FIELD: FilterField;
 export declare const STRING_OPERATORS: Array<StringOperator>;
 export declare const NUMBER_OPERATORS: Array<NumberOperator>;
 export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;

package/components/DynamicFilter/constants.js

@@ -1,4 +1,5 @@
 const DYNAMIC_FILTER_KEY_COMPONENT = "M4LDynamicFilter";
+const DYNAMIC_FILTER_SOTORE_ID = "M4LDynamicFilterStore";
 const ALL_FIELD = {
   name: "all",
   dictionaryId: "dynamic_filter.all_fields",
@@ -26,6 +27,7 @@ export {
   DYNAMIC_FILTER_KEY_COMPONENT as D,
   NUMBER_OPERATORS as N,
   SELECT_OPERATORS as S,
-  DATE_TIME_OPERATORS as a,
-  STRING_OPERATORS as b
+  DYNAMIC_FILTER_SOTORE_ID as a,
+  DATE_TIME_OPERATORS as b,
+  STRING_OPERATORS as c
 };

package/components/DynamicFilter/helpers/formatToInitialFilters.js

@@ -1,4 +1,4 @@
-import { f as filterValidOperandsArraySelect } from "../subcomponents/FieldTypes/SelectFilter/helpers.js";
+import { f as filterValidOperandsArraySelectAsync } from "../subcomponents/FieldTypes/SelectAsyncFilter/helpers.js";
 function formatToInitialFilters(appliedFilters) {
   return appliedFilters.map((appliedFilter) => {
     const ret = {
@@ -11,8 +11,8 @@ function formatToInitialFilters(appliedFilters) {
       ret.operand1 = appliedFilter.operand1.toISOString();
       ret.operand2 = appliedFilter.operator === "b" ? appliedFilter.operand2.toISOString() : void 0;
     }
-    if (appliedFilter.fieldType === "select") {
-      const validOperandsArray = filterValidOperandsArraySelect(
+    if (appliedFilter.fieldType === "selectAsync") {
+      const validOperandsArray = filterValidOperandsArraySelectAsync(
         appliedFilter.operandsArray,
         appliedFilter.field
       );

package/components/DynamicFilter/helpers/formatToRowFilter.js

@@ -1,11 +1,15 @@
 const formatToRawFilter = (appliedFilters) => {
   return appliedFilters.map((af) => {
     let oa = void 0;
-    if (af.field.type === "select" && af.operandsArray) {
-      oa = Array.isArray(af.operandsArray) ? af.operandsArray.map(af.field.selectOptions.getOptionId) : [af.field.selectOptions.getOptionId(af.operandsArray)];
+    if (af.fieldType === "selectAsync" && af.field.type === "selectAsync" && af.operandsArray) {
+      oa = Array.isArray(af.operandsArray) ? af.operandsArray.map(af.field.selectAsyncOptions.getOptionId) : [af.field.selectAsyncOptions.getOptionId(af.operandsArray)];
+    }
+    if (af.fieldType === "select" && af.field.type === "select" && af.operandsArray) {
+      oa = Array.isArray(af.operandsArray) ? af.operandsArray : [af.operandsArray];
     }
     return {
       n: af.field.name,
+      ft: af.field.type,
       o: af.operator,
       o1: af.operand1,
       o2: af.operator === "b" ? af.operand2 : void 0,

package/components/DynamicFilter/helpers/getPurgedInitialFiltersApplied.d.ts

@@ -1,4 +1,4 @@
-import { Field, FilterFieldApplied, InitialFilterApplied } from '../types';
+import { FilterField, FilterFieldApplied, InitialFilterApplied } from '../types';
 /**
  * Función encargada de purgar cualquier error que pueda venir del endpoint, por algun cambio de versión
  * @param fields todos los campos que pueden aparecer en el filtro no Inclute el AllField
@@ -6,4 +6,4 @@ import { Field, FilterFieldApplied, InitialFilterApplied } from '../types';
  * @param getFieldByName Funcion para obtener el Field a través del nombre
  * @returns Array de filtros aplicados excluyendo los que tengan errores
  */
-export declare function getPurgedInitialFiltersApplied(fields: Array<Field>, initialFilters: Array<InitialFilterApplied>, getFieldByName: (name: string) => Field): Array<FilterFieldApplied>;
+export declare function getPurgedInitialFiltersApplied(fields: Array<FilterField>, initialFilters: Array<InitialFilterApplied>, getFieldByName: (name: string) => FilterField): Array<FilterFieldApplied>;

package/components/DynamicFilter/index.d.ts

@@ -1,3 +1,3 @@
 export * from './DynamicFilter';
 export { getDynamicFilterComponentsDictionary } from './dictionary';
-export type { FilterFieldApplied as FilterFieldApply, RawFilterFieldApply, InitialFilterApplied, Field, } from './types';
+export type { FilterFieldApplied as FilterFieldApply, RawFilterFieldApply, InitialFilterApplied, FilterField, } from './types';