@m4l/components 9.3.10 → 9.3.12-BE270825-beta.1

package/components/Card/Card.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { C as CardRootStyled } from "./slots/CardSlots.js";
+import { C as CARD_CLASSES } from "./constants.js";
+import clsx from "clsx";
+const Card = (props) => {
+  const {
+    className,
+    variant = "text",
+    gap = "standard",
+    height = "auto",
+    children,
+    direction = "row",
+    justifyContent = "center",
+    alignItems = "center",
+    selected = false,
+    padding = "standard",
+    ...others
+  } = props;
+  const ownerState = {
+    variant,
+    gap,
+    height,
+    direction,
+    onClick: !!props.onClick,
+    justifyContent,
+    alignItems,
+    selected,
+    padding
+  };
+  return /* @__PURE__ */ jsx(
+    CardRootStyled,
+    {
+      ownerState,
+      className: clsx(
+        CARD_CLASSES.root,
+        variant === "outlined" && CARD_CLASSES.outlined,
+        variant === "text" && CARD_CLASSES.text,
+        selected && CARD_CLASSES.selected,
+        className
+      ),
+      role: "card",
+      ...others,
+      children
+    }
+  );
+};
+export {
+  Card as C
+};

package/components/Card/Card.styles.js

@@ -0,0 +1,52 @@
+import { g as getSizeSpacing } from "./helpers/getSizeSpacing.js";
+const cardStyles = {
+  /**
+   * Estilos para el contenedor principal del card.
+   */
+  root: ({ theme, ownerState }) => ({
+    display: "flex",
+    justifyContent: ownerState?.justifyContent ?? "center",
+    alignItems: ownerState?.alignItems ?? "center",
+    flexDirection: ownerState?.direction ?? "column",
+    gap: getSizeSpacing(ownerState?.gap),
+    padding: getSizeSpacing(ownerState?.padding),
+    transition: "all 0.2s ease-in-out",
+    width: "100%",
+    outline: "unset!important",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.palette.background.paper,
+    height: ownerState?.height ?? "auto",
+    minHeight: ownerState?.height ?? "auto",
+    maxHeight: ownerState?.height ?? "auto",
+    overflow: "hidden",
+    ...ownerState?.onClick && {
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: theme.vars.palette.background.base
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&:focus-visible, &:focus-within": {
+        border: theme.vars.size.borderStroke.container,
+        borderColor: `${theme.vars.palette.primary.focusVisible}!important`,
+        outline: "unset!important"
+      }
+    },
+    ...ownerState?.variant === "outlined" && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: theme.vars.palette.border.disabled
+    },
+    ...ownerState?.variant === "text" && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: "transparent"
+    },
+    ...ownerState?.selected && {
+      border: theme.vars.size.borderStroke.container,
+      borderColor: theme.vars.palette.primary.enabled
+    }
+  })
+};
+export {
+  cardStyles as c
+};

package/components/Card/constants.js

@@ -0,0 +1,23 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as CardSlots } from "./slots/CardEnum.js";
+const CARD_KEY = "M4LCard";
+const CARD_VARIANTS = {
+  text: "text",
+  outlined: "outlined"
+};
+const COMBINED_CLASSES = {
+  ...CARD_VARIANTS,
+  ...CardSlots,
+  selected: "selected"
+};
+const CARD_CLASSES = getComponentClasses(CARD_KEY, COMBINED_CLASSES);
+const CARD_SIZES = {
+  compact: 8,
+  standard: 16,
+  comfortable: 24
+};
+export {
+  CARD_CLASSES as C,
+  CARD_SIZES as a,
+  CARD_KEY as b
+};

package/components/Card/helpers/getSizeSpacing.js

@@ -0,0 +1,10 @@
+import { a as CARD_SIZES } from "../constants.js";
+const getSizeSpacing = (gap) => {
+  if (typeof gap === "number") {
+    return gap;
+  }
+  return CARD_SIZES[gap ?? "standard"];
+};
+export {
+  getSizeSpacing as g
+};

package/components/Card/index.js

@@ -0,0 +1 @@
+

package/components/Card/slots/CardEnum.js

@@ -0,0 +1,7 @@
+var CardSlots = /* @__PURE__ */ ((CardSlots2) => {
+  CardSlots2["root"] = "root";
+  return CardSlots2;
+})(CardSlots || {});
+export {
+  CardSlots as C
+};

package/components/Card/slots/CardSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { b as CARD_KEY } from "../constants.js";
+import { C as CardSlots } from "./CardEnum.js";
+import { c as cardStyles } from "../Card.styles.js";
+const CardRootStyled = styled("div", {
+  name: CARD_KEY,
+  slot: CardSlots.root
+})(cardStyles?.root);
+export {
+  CardRootStyled as C
+};

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -166,7 +166,7 @@ function DataGridProvider(props) {
   });
   useEffect(() => {
     const keys = new Set(columns.map((c) => c.key));
-    if (sortSettings?.sortsColumns && !sortSettings.skipColumnValidation) {
+    if (sortSettings?.sortsColumns) {
       for (const sort of sortSettings.sortsColumns) {
         if (!keys.has(sort)) {
           throw new Error(
@@ -175,9 +175,9 @@ function DataGridProvider(props) {
         }
       }
     }
-    if (filterSettings?.filterColumns && !filterSettings.skipColumnValidation) {
+    if (filterSettings?.filterColumns) {
       for (const filterField of filterSettings.filterColumns) {
-        if (!keys.has(filterField.name)) {
+        if (!filterField.skipColumnValidation && !keys.has(filterField.name)) {
           throw new Error(
             `DataGridProvider: Fields incluye "${filterField.name}", pero no existe ninguna columna con key="${filterField.name}".`
           );

package/components/DataGrid/types.d.ts

@@ -88,7 +88,6 @@ export interface SortSettings {
     sortsColumns: string[];
     sortsApplied: SortApplied[];
     onChange: (event: SortChangeEvent) => void;
-    skipColumnValidation?: boolean;
 }
 /**---------------------------------------------------------------- */
 export type FilterChangeAdd = {
@@ -102,6 +101,7 @@ export type FilterChangeEvent = FilterChangeAdd | FilterChangeOpenPopover;
 interface FilterColumn {
     name: string;
     multiple: boolean;
+    skipColumnValidation?: boolean;
 }
 export type FilterApplied = {
     columnKey: string;
@@ -111,7 +111,6 @@ export interface FilterSettings {
     filterColumns: FilterColumn[];
     filtersApplied: FilterApplied[];
     onChange: (event: FilterChangeEvent) => void;
-    skipColumnValidation?: boolean;
 }
 /**--------------------Termina tipado de filtros-------------------------------------------- */
 export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {

package/components/DynamicFilter/types.d.ts

@@ -46,6 +46,7 @@ export interface FieldBase<T extends FieldType = FieldType, TOption = any> {
     defaultOperandsArray?: Maybe<FieldTypeOperandsArray<T>>;
     selectOptions?: SelectOptions;
     selectAsyncOptions?: SelectAsyncOptions<TOption>;
+    skipColumnValidation?: boolean;
 }
 export interface FieldWithSelectAsync<T extends 'selectAsync', TOption = any> extends FieldBase<T, TOption> {
     selectAsyncOptions: SelectAsyncOptions<TOption>;

package/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './AppBar';
 export * from './AppBar/AppBar';
 export * from './areas';
 export * from './BaseModule';
+export * from './Card';
 export * from './Chip';
 export * from './commercial';
 export * from './CommonActions/';

package/components/mui_extended/Select/Select.js

@@ -176,6 +176,7 @@ const Select = forwardRef(
               paddingBottom: theme.vars.size.baseSpacings.sp3,
               paddingLeft: 0,
               paddingRight: 0,
+              maxHeight: "200px",
               "& .MuiList-root": {
                 padding: 0,
                 display: "flex",

package/components/mui_extended/Select/Select.styles.js

@@ -35,7 +35,12 @@ const selectStyles = {
         },
         "& .MuiSelect-select": {
           padding: `${theme.vars.size.baseSpacings.sp1}!important`,
-          minHeight: "unset"
+          minHeight: "unset",
+          maxHeight: "80px",
+          overflow: "auto",
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column"
         },
         // Estilos para la variante text
         [`&.${SELECT_CLASSES.text}`]: {
@@ -69,7 +74,8 @@ const selectStyles = {
           (height) => {
             return {
               minHeight: height,
-              maxHeight: height
+              height: "fit-content",
+              maxHeight: "80px"
             };
           }
         )
@@ -88,7 +94,9 @@ const selectStyles = {
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    overflow: "auto",
+    flexShrink: 1
   }),
   arrowDown: {},
   renderValueTypography: () => ({

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -389,7 +389,8 @@ const useDynamicFilterAndSort = (props) => {
     return {
       filterColumns: fields.map((filter) => ({
         name: filter.name,
-        multiple: filter.multiple || false
+        multiple: filter.multiple || false,
+        skipColumnValidation: filter.skipColumnValidation || false
       })),
       filtersApplied: getCurrentFilters().map((filter) => ({
         columnKey: filter.field.name,

package/index.js

@@ -18,7 +18,8 @@ import { a as a2, A as A6 } from "./components/areas/contexts/AreasContext/index
 import { u } from "./components/areas/hooks/useAreas/index.js";
 import { A as A7, a as a3, L as L2, b as b2, g as g3 } from "./components/areas/dictionary.js";
 import { B } from "./components/BaseModule/BaseModule.js";
-import { C } from "./components/Chip/Chip.js";
+import { C } from "./components/Card/Card.js";
+import { C as C2 } from "./components/Chip/Chip.js";
 import { A as A8 } from "./components/commercial/AppBarCommercial/index.js";
 import { H } from "./components/commercial/HamburgerMenu/HamburgerMenu.js";
 import { T } from "./components/commercial/TopBar/TopBar.js";
@@ -29,32 +30,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 { C as C3 } 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 C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
+import { C as C4 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
-import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
+import { C as C5 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
-import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
+import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
-import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
+import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
 import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
-import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
+import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
 import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
-import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
+import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
 import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
-import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
+import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
 import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
-import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
+import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
 import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
-import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
+import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
 import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
-import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
+import { C as C14 } 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";
@@ -77,7 +78,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
 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 C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C15 } 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";
@@ -87,7 +88,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 C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C16 } 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/Select/Select.js";
@@ -115,10 +116,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 C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { C as C17, 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 C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { C as C18 } 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";
@@ -251,23 +252,24 @@ export {
   B2 as BoxIcon,
   B3 as Breadcrumbs,
   B5 as Button,
-  C15 as CheckBox,
-  C as Chip,
-  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,
+  C as Card,
+  C16 as CheckBox,
+  C2 as Chip,
+  C18 as ChipStatusFormatter,
+  C15 as CircularProgress,
+  C4 as ColumnBooleanFormatter,
+  C14 as ColumnChipStatusFormatter,
+  C5 as ColumnConcatenatedValueFormatter,
+  C6 as ColumnDateFormatter,
+  C7 as ColumnIconFormatter,
+  C8 as ColumnInteractiveCheckFormatter,
+  C9 as ColumnNestedValueFormatter,
+  C10 as ColumnPointsFormatter,
+  C11 as ColumnPriceFormatter,
+  C12 as ColumnSetCheckFormatter,
+  C13 as ColumnUncertaintyFormatter,
+  C17 as ConcatenatedFormatter,
+  C3 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.3.10",
+  "version": "9.3.12-BE270825-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -10,8 +10,6 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     visibleRefreshFilterSort?: boolean;
     withExternalSortSettings?: boolean;
     withExternalFilterSettings?: boolean;
-    skipSortValidation?: boolean;
-    skipFilterValidation?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook