@m4l/components 9.3.8-BE190825-beta.2 → 9.3.8-JT200825.beta.1

package/@types/types.d.ts

@@ -153,8 +153,6 @@ 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 {
@@ -240,7 +238,6 @@ declare module '@mui/material/styles' {
     M4LNoItemPrivileges: NoItemPrivilegesSlotsType;
     M4LSettingsLayoutBase: SettingsLayoutSlotsType;
     M4LImageText: ImageTextSlotsType;
-    M4LFormContainer: FormContainerSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -326,7 +323,6 @@ declare module '@mui/material/styles' {
     M4LNoItemPrivileges: Partial<NoItemPrivilegesOwnerState>;
     M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
     M4LImageText: Partial<ImageTextOwnerState>;
-    M4LFormContainer: Partial<FormContainerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -749,10 +745,5 @@ 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

@@ -17,7 +17,6 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
-    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -185,6 +183,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/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,11 +56,9 @@ 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/PaperForm/PaperForm.js

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

package/components/PaperForm/styles.js

@@ -1,4 +1,4 @@
-import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************
@@ -6,25 +6,14 @@ const paperFormStyles = {
    * @param theme
    ***********************************************************
    */
-  paperFormRoot: ({ theme, ownerState }) => ({
+  paperFormRoot: ({ theme }) => ({
+    borderRadius: theme.size.borderRadius.r1,
     background: theme.vars.palette.background.default,
-    ...ownerState?.paperFormVariant !== "text" && {
-      borderRadius: theme.size.borderRadius.r1,
-      border: `${theme.size.borderStroke.container}`,
-      borderColor: theme.vars.palette.border.default
-    },
+    border: `${theme.size.borderStroke.container}`,
+    borderColor: theme.vars.palette.border.default,
     overflow: "hidden",
     width: "100%",
-    ...ownerState?.height === "full" && {
-      flexGrow: 1,
-      overflow: "auto",
-      display: "flex",
-      flexDirection: "column"
-    },
-    ...ownerState?.height === "auto" && {
-      height: "auto"
-    },
-    flexShrink: 0,
+    height: "auto",
     container: "container / inline-size"
   }),
   /**
@@ -43,8 +32,8 @@ 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",
-    ...getSizeStyles(
-      theme,
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
       ownerState?.size || "medium",
       "container"
     )
@@ -78,14 +67,14 @@ const paperFormStyles = {
    */
   containerContent: ({ theme, ownerState }) => ({
     width: "100%",
-    height: ownerState?.height === "full" ? "100%" : "auto",
+    height: "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: ownerState?.paperFormVariant === "text" ? "0px" : theme.vars.size.baseSpacings.sp3,
+    padding: theme.vars.size.baseSpacings.sp3,
     background: theme.vars.palette.background.default
   })
 };

package/components/PaperForm/types.d.ts

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

package/components/PropertyValue/PropertyValue.styles.js

@@ -48,7 +48,6 @@ 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/areas/contexts/AreasContext/store.js

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

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ 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

@@ -18,7 +18,6 @@ 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';
@@ -37,7 +36,7 @@ export * from './ImageText';
 export * from './NoItemSelected';
 export * from './NoItemPrivileges';
 export * from './ObjectLogs';
-export * from './PaperForm';
+export * from './PaperForm/PaperForm';
 export * from './PDFViewer';
 export * from './popups';
 export * from './PrintingSystem';

package/index.js

@@ -122,7 +122,6 @@ 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";
@@ -194,7 +193,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 F3, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F2, 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";
@@ -283,8 +282,7 @@ export {
   a13 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
-  F2 as FormContainer,
-  F3 as FormProviderCustom,
+  F2 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-BE190825-beta.2",
+  "version": "9.3.8-JT200825.beta.1",
   "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/paperForm/PaperForm.stories.d.ts

@@ -19,11 +19,6 @@ 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
  */

package/components/FormContainer/FormContainer.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,21 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { R as RootStyled, F as FormContainerStyled, B as ButtonGroupStyled } from "./slots/FormContainerSlots.js";
-import { F as FORM_CONTAINER_CLASSES } from "./constants.js";
-const FormContainer = (props) => {
-  const { children, buttonGroup } = props;
-  return /* @__PURE__ */ jsxs(
-    RootStyled,
-    {
-      role: "region",
-      "aria-label": "formContainer",
-      className: FORM_CONTAINER_CLASSES.root,
-      children: [
-        /* @__PURE__ */ jsx(FormContainerStyled, { children }),
-        buttonGroup && /* @__PURE__ */ jsx(ButtonGroupStyled, { children: buttonGroup })
-      ]
-    }
-  );
-};
-export {
-  FormContainer as F
-};

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

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

package/components/FormContainer/FormContainer.styles.js

@@ -1,27 +0,0 @@
-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

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

package/components/FormContainer/constants.js

@@ -1,8 +0,0 @@
-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

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

package/components/FormContainer/index.js

@@ -1 +0,0 @@
-

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

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

package/components/FormContainer/slots/FormContainerEnum.js

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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);
-const ButtonGroupStyled = styled(ActionsContainer, {
-  name: FORM_CONTAINER_COMPONENT_KEY,
-  slot: FormContainerSlots.buttonGroup
-})(formContainerStyles?.buttonGroup);
-export {
-  ButtonGroupStyled as B,
-  FormContainerStyled as F,
-  RootStyled as R
-};

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

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

package/components/FormContainer/types.d.ts

@@ -1,11 +0,0 @@
-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;
-    buttonGroup?: React.ReactNode;
-}
-export type FormContainerOwnerState = {};
-export type FormContainerSlotsType = keyof typeof FormContainerSlots;
-export type FormContainerStyles = M4LOverridesStyleRules<FormContainerSlotsType, typeof FORM_CONTAINER_COMPONENT_KEY, Theme>;

package/components/PaperForm/index.js

@@ -1 +0,0 @@
-

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

@@ -1,13 +0,0 @@
-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;
-/**
- * Componente FormContainer con skeleton
- */
-export declare const Skeleton: Story;