@m4l/components 9.3.8 → 9.3.10

package/@types/types.d.ts

@@ -153,6 +153,8 @@ import { CardOwnerState, CardSlotsType } from '../components/Card/types';
 import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
 import { NoItemPrivilegesOwnerState, NoItemPrivilegesSlotsType } from '../components/NoItemPrivileges/types';
 import { ImageTextOwnerState, ImageTextSlotsType } from '../components/ImageText/types';
+import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -238,6 +240,7 @@ declare module '@mui/material/styles' {
     M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
     M4LSettingsLayoutBase: SettingsLayoutSlotsType;
     M4LImageText: ImageTextSlotsType;
+    M4LFormContainer: FormContainerSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -323,6 +326,7 @@ declare module '@mui/material/styles' {
     M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
     M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
     M4LImageText: Partial<ImageTextOwnerState>;
+    M4LFormContainer: Partial<FormContainerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -745,5 +749,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LImageText'];
       variants?: ComponentsVariants['M4LImageText'];
     };
+    M4LFormContainer?: {
+      defaultProps?: ComponentsPropsList['M4LFormContainer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LFormContainer'];
+      variants?: ComponentsVariants['M4LFormContainer'];
+    };
   }
 }

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) {
+    if (sortSettings?.sortsColumns && !sortSettings.skipColumnValidation) {
       for (const sort of sortSettings.sortsColumns) {
         if (!keys.has(sort)) {
           throw new Error(
@@ -175,7 +175,7 @@ function DataGridProvider(props) {
         }
       }
     }
-    if (filterSettings?.filterColumns) {
+    if (filterSettings?.filterColumns && !filterSettings.skipColumnValidation) {
       for (const filterField of filterSettings.filterColumns) {
         if (!keys.has(filterField.name)) {
           throw new Error(

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -185,6 +185,10 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         let fixedValue;
         if (typeof valueMaybeString === "string") {
           fixedValue = valueMaybeString;
+        } else if (typeof valueMaybeString === "number") {
+          fixedValue = valueMaybeString.toString();
+        } else if (valueMaybeString !== null && valueMaybeString !== void 0) {
+          fixedValue = String(valueMaybeString);
         } else {
           fixedValue = "";
         }

package/components/DataGrid/types.d.ts

@@ -88,6 +88,7 @@ export interface SortSettings {
     sortsColumns: string[];
     sortsApplied: SortApplied[];
     onChange: (event: SortChangeEvent) => void;
+    skipColumnValidation?: boolean;
 }
 /**---------------------------------------------------------------- */
 export type FilterChangeAdd = {
@@ -110,6 +111,7 @@ 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/FormContainer/FormContainer.d.ts

@@ -0,0 +1,7 @@
+import { FormContainerProps } from './types';
+/**
+ * Componente que contiene un formulario y un grupo de botones.
+ * @param props - Propiedades del componente.
+ * @returns Componente FormContainer.
+ */
+export declare const FormContainer: (props: FormContainerProps) => import("react/jsx-runtime").JSX.Element;

package/components/FormContainer/FormContainer.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { R as RootStyled, F as FormContainerStyled } from "./slots/FormContainerSlots.js";
+import { F as FORM_CONTAINER_CLASSES } from "./constants.js";
+import React, { useMemo } from "react";
+import clsx from "clsx";
+import { A as ActionsContainer } from "../CommonActions/components/ActionsContainer/ActionsContainer.js";
+const FormContainer = (props) => {
+  const { children, className } = props;
+  const { fields, footer } = useMemo(() => {
+    const fields2 = [];
+    let footer2 = null;
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type === ActionsContainer) {
+          footer2 = child;
+        } else {
+          fields2.push(child);
+        }
+      }
+    });
+    return { fields: fields2, footer: footer2 };
+  }, [children]);
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      role: "region",
+      "aria-label": "formContainer",
+      className: clsx(FORM_CONTAINER_CLASSES.root, className),
+      children: [
+        /* @__PURE__ */ jsx(FormContainerStyled, { children: fields }),
+        footer
+      ]
+    }
+  );
+};
+export {
+  FormContainer as F
+};

package/components/FormContainer/FormContainer.styles.d.ts

@@ -0,0 +1,2 @@
+import { FormContainerStyles } from './types';
+export declare const formContainerStyles: FormContainerStyles;

package/components/FormContainer/FormContainer.styles.js

@@ -0,0 +1,27 @@
+const formContainerStyles = {
+  /**
+   * Estilos para el contenedor principal.
+   */
+  root: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "auto",
+    flexDirection: "column"
+  }),
+  /**
+   * Estilos para el contenedor del formulario.
+   */
+  formContainer: ({ theme }) => ({
+    display: "flex",
+    width: "100%",
+    flexGrow: 1,
+    overflow: "auto",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  buttonGroup: {}
+};
+export {
+  formContainerStyles as f
+};

package/components/FormContainer/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const FORM_CONTAINER_COMPONENT_KEY = "M4LFormContainer";
+export declare const FORM_CONTAINER_CLASSES: Record<string, string>;

package/components/FormContainer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { F as FormContainerSlots } from "./slots/FormContainerEnum.js";
+const FORM_CONTAINER_COMPONENT_KEY = "M4LFormContainer";
+const FORM_CONTAINER_CLASSES = getComponentClasses(FORM_CONTAINER_COMPONENT_KEY, FormContainerSlots);
+export {
+  FORM_CONTAINER_CLASSES as F,
+  FORM_CONTAINER_COMPONENT_KEY as a
+};

package/components/FormContainer/index.d.ts

@@ -0,0 +1 @@
+export { FormContainer } from './FormContainer';

package/components/FormContainer/index.js

@@ -0,0 +1 @@
+

package/components/FormContainer/slots/FormContainerEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum FormContainerSlots {
+    root = "root",
+    formContainer = "formContainer",
+    buttonGroup = "buttonGroup"
+}

package/components/FormContainer/slots/FormContainerEnum.js

@@ -0,0 +1,9 @@
+var FormContainerSlots = /* @__PURE__ */ ((FormContainerSlots2) => {
+  FormContainerSlots2["root"] = "root";
+  FormContainerSlots2["formContainer"] = "formContainer";
+  FormContainerSlots2["buttonGroup"] = "buttonGroup";
+  return FormContainerSlots2;
+})(FormContainerSlots || {});
+export {
+  FormContainerSlots as F
+};

package/components/FormContainer/slots/FormContainerSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const FormContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ButtonGroupStyled: import('@emotion/styled').StyledComponent<Pick<import('../../CommonActions/components/ActionsContainer').ActionsContainerProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../CommonActions/components/ActionsContainer').ActionsContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').FormContainerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/FormContainer/slots/FormContainerSlots.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material";
+import { a as FORM_CONTAINER_COMPONENT_KEY } from "../constants.js";
+import { F as FormContainerSlots } from "./FormContainerEnum.js";
+import { f as formContainerStyles } from "../FormContainer.styles.js";
+import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+const RootStyled = styled("div", {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.root
+})(formContainerStyles?.root);
+const FormContainerStyled = styled("div", {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.formContainer
+})(formContainerStyles?.formContainer);
+styled(ActionsContainer, {
+  name: FORM_CONTAINER_COMPONENT_KEY,
+  slot: FormContainerSlots.buttonGroup
+})(formContainerStyles?.buttonGroup);
+export {
+  FormContainerStyled as F,
+  RootStyled as R
+};

package/components/FormContainer/test/FormContainer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/FormContainer/types.d.ts

@@ -0,0 +1,11 @@
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { FormContainerSlots } from './slots/FormContainerEnum';
+import { FORM_CONTAINER_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+export interface FormContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export type FormContainerOwnerState = {};
+export type FormContainerSlotsType = keyof typeof FormContainerSlots;
+export type FormContainerStyles = M4LOverridesStyleRules<FormContainerSlotsType, typeof FORM_CONTAINER_COMPONENT_KEY, Theme>;

package/components/PaperForm/PaperForm.js

@@ -24,7 +24,8 @@ function PaperForm(props) {
     color = "default",
     size = "medium",
     isForm = false,
-    variant = "standard"
+    variant = "standard",
+    height = "auto"
   } = props;
   const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
@@ -33,7 +34,8 @@ function PaperForm(props) {
     size: currentSize,
     color,
     isForm,
-    paperFormVariant: variant
+    paperFormVariant: variant,
+    height
   };
   return /* @__PURE__ */ jsxs(
     PaperFormRootStyled,
@@ -43,8 +45,8 @@ function PaperForm(props) {
       ownerState: { ...ownerState },
       ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
       children: [
-        /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),
-        /* @__PURE__ */ jsx(ContentStyled, { ownerState: { isForm }, children: renderChildren(children) })
+        variant !== "text" && /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),
+        /* @__PURE__ */ jsx(ContentStyled, { ownerState: { ...ownerState }, children: renderChildren(children) })
       ]
     }
   );

package/components/PaperForm/index.js

@@ -0,0 +1 @@
+

package/components/PaperForm/styles.js

@@ -1,4 +1,4 @@
-import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************
@@ -6,14 +6,26 @@ const paperFormStyles = {
    * @param theme
    ***********************************************************
    */
-  paperFormRoot: ({ theme }) => ({
-    borderRadius: theme.size.borderRadius.r1,
+  paperFormRoot: ({ theme, ownerState }) => ({
     background: theme.vars.palette.background.default,
-    border: `${theme.size.borderStroke.container}`,
-    borderColor: theme.vars.palette.border.default,
-    overflow: "hidden",
+    ...ownerState?.paperFormVariant !== "text" && {
+      borderRadius: theme.size.borderRadius.r1,
+      border: `${theme.size.borderStroke.container}`,
+      borderColor: theme.vars.palette.border.default
+    },
     width: "100%",
-    height: "auto",
+    overflow: "auto",
+    ...ownerState?.height === "full" && {
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 1,
+      minHeight: "200px"
+    },
+    ...ownerState?.height === "auto" && {
+      height: "auto",
+      flexShrink: 0
+    },
     container: "container / inline-size"
   }),
   /**
@@ -32,10 +44,14 @@ const paperFormStyles = {
     borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
     background: theme.vars.palette[ownerState?.color ?? "default"].hoverOpacity,
     alignSelf: "stretch",
-    ...getHeightSizeStyles(
-      theme.generalSettings.isMobile,
+    ...getSizeStyles(
+      theme,
       ownerState?.size || "medium",
-      "container"
+      "container",
+      (size) => ({
+        height: size,
+        minHeight: size
+      })
     )
   }),
   /**
@@ -67,15 +83,17 @@ const paperFormStyles = {
    */
   containerContent: ({ theme, ownerState }) => ({
     width: "100%",
-    height: "auto",
+    height: ownerState?.height === "full" ? "100%" : "auto",
     display: "flex",
     flexDirection: ownerState?.isForm ? "row" : "column",
     alignItems: ownerState?.isForm ? "flex-start" : "center",
     justifyContent: ownerState?.isForm ? "flex-start" : "center",
     gap: ownerState?.isForm ? theme.vars.size.baseSpacings.sp3 : theme.vars.size.baseSpacings.sp0,
     flexWrap: ownerState?.isForm ? "wrap" : "nowrap",
-    padding: theme.vars.size.baseSpacings.sp3,
-    background: theme.vars.palette.background.default
+    padding: ownerState?.paperFormVariant === "text" ? "0px" : theme.vars.size.baseSpacings.sp3,
+    background: theme.vars.palette.background.default,
+    flex: 1,
+    overflow: "auto"
   })
 };
 export {

package/components/PaperForm/types.d.ts

@@ -9,11 +9,12 @@ export interface PaperFormProps {
     urlIcon?: string;
     title: string;
     children?: ReactNode | PropertyValueProps[];
-    variant?: 'standard';
+    variant?: 'standard' | 'text';
     color?: Extract<ComponentPalletColor, 'default'>;
     size?: Extract<Sizes, 'small' | 'medium'>;
     isForm?: boolean;
     dataTestId?: string;
+    height?: 'auto' | 'full';
 }
 /**
  * ***************************************
@@ -25,7 +26,7 @@ interface CommonsProps {
     paperFormVariant?: PaperFormProps['variant'];
 }
 export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
-export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size' | 'height'> & CommonsProps;
 /**
  * ***********************************
  * Slots para los estilos utilizados

package/components/PropertyValue/PropertyValue.styles.js

@@ -48,6 +48,7 @@ const propertyValueStyles = {
       alignItems: "center",
       gap: theme.vars.size.baseSpacings["sp1"],
       width: ownerState?.semanticWidth ? "auto" : "200px",
+      height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
       overflow: "hidden",
       color: theme.vars.palette.text.primary,
       paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,

package/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './mui_extended';
 export * from './formatters';
 export * from './formatters/dictionary';
 export * from './formatters/types';
+export * from './FormContainer';
 export * from './GridLayout';
 export * from './HelmetPage';
 export * from './HelperError';
@@ -36,7 +37,7 @@ export * from './ImageText';
 export * from './NoItemSelected';
 export * from './NoItemPrivileges';
 export * from './ObjectLogs';
-export * from './PaperForm/PaperForm';
+export * from './PaperForm';
 export * from './PDFViewer';
 export * from './popups';
 export * from './PrintingSystem';

package/index.js

@@ -122,6 +122,7 @@ import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatus
 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";
+import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
 import { R as R4 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c2, e as e2, d as d3 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
@@ -193,7 +194,7 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { F as F2, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F3, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u17 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
@@ -282,7 +283,8 @@ export {
   a13 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
-  F2 as FormProviderCustom,
+  F2 as FormContainer,
+  F3 as FormProviderCustom,
   G as GridLayout,
   H as HamburgerMenu,
   H2 as HelmetPage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.8",
+  "version": "9.3.10",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

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

@@ -10,6 +10,8 @@ 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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FormContainer } from '../../../src/components/FormContainer';
+declare const meta: Meta<typeof FormContainer>;
+export default meta;
+type Story = StoryObj<typeof FormContainer>;
+/**
+ * Componente FormContainer por defecto
+ */
+export declare const Default: Story;

package/storybook/components/{paperForm → PaperForm}/PaperForm.stories.d.ts

@@ -19,6 +19,11 @@ export declare const WithChildren: Story;
  ********************************************************/
 export declare const WithPropertyValues: Story;
 export declare const WithSimpleContent: Story;
+/********************************************************
+ * PaperForm con variant text
+ ********************************************************/
+export declare const WithTextVariant: Story;
+export declare const WithFullHeight: Story;
 /**
  * State Skeleton
  */