@m4l/components 9.2.63-JT14072025.beta.1 → 9.2.64

package/components/Image/types.d.ts

@@ -31,9 +31,14 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     enableIntersectionObserver?: boolean;
     className?: string;
     dataTestId?: string;
+    /**
+     * Si es verdadero, la imagen se ajusta al contenedor y se recorta si es necesario.
+     */
+    cover?: boolean;
 }
 export type ImageSlotsType = keyof typeof ImageSlots;
 export interface ImageOwnerState {
     isSkeleton?: boolean;
+    cover?: boolean;
 }
 export type ImageStyles = M4LOverridesStyleRules<ImageSlots, typeof IMAGE_KEY_COMPONENT, Theme>;

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/PropertyValue/PropertyValue.styles.js

@@ -85,7 +85,7 @@ const propertyValueStyles = {
     width: "100%",
     display: "flex",
     justifyContent: "flex-start",
-    alignItems: "center",
+    alignItems: "flex-start",
     overflow: "hidden",
     height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -10,
-                    bottom: -10
+                    right: -MARGIN_GRIDLAYOUT,
+                    bottom: -MARGIN_GRIDLAYOUT
                   }
                 });
               }

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;
   }

package/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './BaseModule';
 export * from './Chip';
 export * from './commercial';
 export * from './CommonActions/';
+export * from './ContainerFlow';
 export * from './CommonActions/dictionary';
 export * from './DataGrid';
 export * from './DragResizeWindowRND';

package/components/mui_extended/Accordion/styles.js

@@ -16,7 +16,8 @@ const accordionStyles = {
         borderRadius: "unset"
       },
       margin: "unset",
-      overflow: "visible"
+      overflow: "visible",
+      height: "min-content"
     }
   }),
   /**
@@ -102,10 +103,7 @@ const accordionStyles = {
    * **************************************************************
    */
   accordionDetails: ({ theme, ownerState }) => ({
-    paddingLeft: theme.vars.size.baseSpacings.sp3,
-    paddingRight: theme.vars.size.baseSpacings.sp3,
-    paddingTop: theme.vars.size.baseSpacings.sp1,
-    paddingBottom: theme.vars.size.baseSpacings.sp1,
+    padding: theme.vars.size.baseSpacings.sp4,
     background: theme.vars.palette.background.default,
     display: "flex",
     flexDirection: "column",

package/components/mui_extended/MenuItem/MenuItem.js

@@ -20,7 +20,6 @@ const MenuItem = (props) => {
     checked = false,
     checkable = false,
     className,
-    dataTestId,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -84,7 +83,7 @@ const MenuItem = (props) => {
       disableRipple: true,
       size: adjustedSize,
       className: clsx(className, MENUITEM_CLASSES.root),
-      "data-testid": dataTestId || "MenuItemRoot",
+      "data-testid": "MenuItemRoot",
       children: [
         checkable && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,

package/components/mui_extended/MenuItem/types.d.ts

@@ -53,10 +53,6 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
      * indica si debe aparecer el icono de check
      */
     checkable?: boolean;
-    /**
-     * ID para pruebas que se pasará como data-testid
-     */
-    dataTestId?: string;
 }
 /**
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -1,3 +1,4 @@
+import { C as CONTAINER_QUERY_NAME } from "./constants.js";
 const tabContentStyles = {
   /**
    * Elemento root referencia a `TabContent`
@@ -9,6 +10,8 @@ const tabContentStyles = {
     paddingRight: 0,
     display: "flex",
     overflow: "auto",
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
     // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,

package/components/mui_extended/TabContent/constants.d.ts

@@ -1 +1,2 @@
 export declare const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+export declare const CONTAINER_QUERY_NAME = "container";

package/components/mui_extended/TabContent/constants.js

@@ -1,4 +1,6 @@
 const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+const CONTAINER_QUERY_NAME = "container";
 export {
+  CONTAINER_QUERY_NAME as C,
   TAB_CONTENT_KEY_COMPONENT as T
 };

package/components/mui_extended/Typography/Typography.js

@@ -17,6 +17,7 @@ function Typography(props) {
     dataTestid,
     children,
     disabled,
+    ellipsis = false,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -28,7 +29,8 @@ function Typography(props) {
     size: adjustedSize,
     skeletonRows,
     variant,
-    skeleton: isSkeleton
+    skeleton: isSkeleton,
+    ellipsis
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

package/components/mui_extended/Typography/types.d.ts

@@ -43,6 +43,10 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     htmlFor?: string | undefined;
     /** Si esta disabled, el texto pasa a text.disabled */
     disabled?: boolean;
+    /**
+     * Si se activa, el texto se corta y se muestra un elipsis.
+     */
+    ellipsis?: boolean;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
@@ -54,6 +58,7 @@ export interface TypographyOwnerState {
     size: TypographyProps['size'];
     skeletonRows: TypographyProps['skeletonRows'];
     skeleton: boolean;
+    ellipsis: TypographyProps['ellipsis'];
 }
 /**
  * Agrupa la lista de slots del componente.

package/components/mui_extended/Typography/typography.styles.js

@@ -32,7 +32,13 @@ const typographyStyles = {
         theme.generalSettings.isMobile,
         ownerState?.size || "medium",
         ownerState?.variant || "body"
-      )
+      ),
+      // ellipsis 🔤
+      ...ownerState?.ellipsis && {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
     },
     ...ownerState?.skeleton ? {
       width: ownerState?.width ? ownerState?.width : "100%"

package/helpers/getFieldValueWithRow.js

@@ -0,0 +1,10 @@
+const getFieldValueWithRow = (fieldValue) => {
+  const row = "row";
+  if (fieldValue.includes(row)) {
+    return fieldValue;
+  }
+  return `${row}.${fieldValue}`;
+};
+export {
+  getFieldValueWithRow as g
+};

package/index.js

@@ -29,31 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
 import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
 import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
+import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
 import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
 import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
-import { C as C2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
+import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
-import { C as C3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
+import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
-import { C as C4 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
+import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
-import { C as C5 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { C as C6 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
+import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
 import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
-import { C as C7 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
+import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
 import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
-import { C as C8 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
+import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
 import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
-import { C as C9 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
+import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
 import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
-import { C as C10 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
+import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
 import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
-import { C as C11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
+import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
 import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
-import { C as C12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
+import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
@@ -74,7 +75,7 @@ import { V } from "./components/extended/React-Window/VariableSizeList/VariableS
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C13 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 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";
@@ -84,7 +85,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 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 { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Skeleton/Skeleton.js";
@@ -111,10 +112,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.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 { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { P as P4, u as u12 } 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 { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
@@ -241,22 +242,23 @@ export {
   B2 as BoxIcon,
   B3 as Breadcrumbs,
   B5 as Button,
-  C14 as CheckBox,
+  C15 as CheckBox,
   C as Chip,
-  C16 as ChipStatusFormatter,
-  C13 as CircularProgress,
-  C2 as ColumnBooleanFormatter,
-  C12 as ColumnChipStatusFormatter,
-  C3 as ColumnConcatenatedValueFormatter,
-  C4 as ColumnDateFormatter,
-  C5 as ColumnIconFormatter,
-  C6 as ColumnInteractiveCheckFormatter,
-  C7 as ColumnNestedValueFormatter,
-  C8 as ColumnPointsFormatter,
-  C9 as ColumnPriceFormatter,
-  C10 as ColumnSetCheckFormatter,
-  C11 as ColumnUncertaintyFormatter,
-  C15 as ConcatenatedFormatter,
+  C17 as ChipStatusFormatter,
+  C14 as CircularProgress,
+  C3 as ColumnBooleanFormatter,
+  C13 as ColumnChipStatusFormatter,
+  C4 as ColumnConcatenatedValueFormatter,
+  C5 as ColumnDateFormatter,
+  C6 as ColumnIconFormatter,
+  C7 as ColumnInteractiveCheckFormatter,
+  C8 as ColumnNestedValueFormatter,
+  C9 as ColumnPointsFormatter,
+  C10 as ColumnPriceFormatter,
+  C11 as ColumnSetCheckFormatter,
+  C12 as ColumnUncertaintyFormatter,
+  C16 as ConcatenatedFormatter,
+  C2 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
   e as DATAGRID_SEMANTIC_WIDTHS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.63-JT14072025.beta.1",
+  "version": "9.2.64",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -34,7 +34,7 @@
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
-    "react-data-grid": "7.0.0-beta.47",
+    "react-data-grid": "7.0.0-beta.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ContainerFlow } from '../../../src/components/ContainerFlow/ContainerFlow';
+/**
+ * Renderiza un chip para cada color
+ */
+declare const meta: Meta<typeof ContainerFlow>;
+type Story = StoryObj<typeof ContainerFlow>;
+/**
+ * FlexColumn
+ */
+export declare const H001_FlexColumn: Story;
+/**
+ * variante column-flex con 3 wrappers
+ */
+export declare const H002_FlexColumn3Wrappers: Story;
+/**
+ * variante column-flex con 2 wrappers
+ */
+export declare const H003_FlexColumn2Wrappers: Story;
+/**
+ * variante column-flex con 1 wrapper
+ */
+export declare const H004_FlexColumn1Wrappers: Story;
+/**
+ * variante flex-wrap
+ */
+export declare const H005_FlexWrap: Story;
+/**
+ * variante grid-layout
+ */
+export declare const H006_GridLayout: Story;
+export default meta;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn1Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn1Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn2Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn2Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn3Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn3Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexWrap/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexWrap: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderGridLayout/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderGridLayout: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/wrapperItems/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Componente que se encarga de envolver los items del contenedor de items.
+ * @param children - Los items del contenedor de items.
+ * @returns Un componente de tipo div con los estilos del contenedor de items.
+ */
+export declare const WrapperItems: ({ children, width, style }: {
+    children: React.ReactNode;
+    width?: string | number;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { RenderHeaderCellProps } from 'react-data-grid';
+import { HeaderRendererProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
 import { ColumnAlign } from '../../../../src/components/DataGrid/types';
@@ -74,7 +74,7 @@ export interface Column<TRow, TSummaryRow> {
     type: ColumnType;
     formatter?: (props: any) => JSX.Element;
     width?: number;
-    withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
+    withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
     customFilter?: (row: TRow, value: string) => boolean;
     customSort?: (a: TRow, b: TRow) => number;
 }