@m4l/components 0.1.6 → 0.1.8

package/components/DataGrid/components/editors/TextEditor/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EditorProps } from 'react-data-grid';
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): JSX.Element;
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): JSX.Element;
+export default TextEditor;

package/components/DataGrid/index.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { voidFunction, useModuleDictionary } from "@m4l/core";
+import { voidFunction, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.js";
 import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.js";
 import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.js";
@@ -816,7 +816,8 @@ function Table(props) {
     isMultipleSelect = false,
     columns,
     rows,
-    withActions
+    withActions,
+    onRowsChange
   } = props;
   const {
     finalColumns,
@@ -908,6 +909,7 @@ function Table(props) {
           onSortColumnsChange: onChangeSort,
           onColumnResize,
           rows: finalRows,
+          onRowsChange,
           selectedRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
           onRowClick,
@@ -928,16 +930,17 @@ function Table(props) {
 }
 function DataGrid(props) {
   const {
-    isSkeleton = false,
     withActions = true,
     rows,
     columns,
     actionsProps,
     rowActionsGetter,
+    onRowsChange,
     rowHeaderHeights = [44, 63, 75],
     rowHeights = [36, 52, 67],
     initialRowHeightVariant = "compact"
   } = props;
+  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(WrapperGrid, {
     id: `WrapperGrid_${props.id}`,
     children: /* @__PURE__ */ jsx(BaseProvider, {
@@ -961,6 +964,7 @@ function DataGrid(props) {
           isMultipleSelect: props.isMultipleSelect,
           selectedRows: props.selectedRows,
           rowKeyGetter: props.rowKeyGetter,
+          onRowsChange,
           onRowsSelectedChange: props.onRowsSelectedChange
         })]
       })
@@ -999,4 +1003,62 @@ function getDataGridComponentsDictionary() {
   ...defaultPagerDictionary,
   ...defaultModalDialogDictionary
 });
-export { DataGrid as D, OriginalDataGridWrapperStyled as O, useFilters as a, getDataGridComponentsDictionary as g, useBase as u };
+const Input = styled("input")(() => ({
+  appearance: "none",
+  boxSizing: "border-box",
+  inlineSize: "100%",
+  blockSize: "100%",
+  paddingBlock: "0",
+  verticalAlign: "top",
+  textAlign: "right",
+  color: "var(--rdg-color)",
+  backgroundColor: "var(--rdg-background-color)",
+  fontFamily: "inherit",
+  "&:focus": {
+    outline: "none"
+  },
+  "&::placeholder": {
+    color: "#999",
+    opacity: "1"
+  }
+}));
+function autoFocusAndSelect(input) {
+  input?.focus();
+  input?.select();
+}
+function TextEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value
+    }),
+    onBlur: () => onClose(true)
+  });
+}
+function NumberEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    type: "number",
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
+    }),
+    onBlur: () => onClose(true)
+  });
+}
+export { DataGrid as D, NumberEditor as N, OriginalDataGridWrapperStyled as O, TextEditor as T, useFilters as a, getDataGridComponentsDictionary as g, useBase as u };

package/components/DataGrid/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Column } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import type { Column, RowsChangeData } from 'react-data-grid';
 import type { MenuAction } from '../mui_extended/MenuActions/types';
 import { ActionsProps } from './components/Actions/types';
 export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
@@ -38,7 +39,6 @@ export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
 export declare type RowHeights = number | number[];
 export declare interface GridProps<TRow, TSummaryRow> {
     id: RowKey;
-    isSkeleton?: boolean;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];
     rows: TRow[];
@@ -49,6 +49,7 @@ export declare interface GridProps<TRow, TSummaryRow> {
     rowKeyGetter: (row: TRow) => RowKey;
     isMultipleSelect?: boolean;
     selectedRows?: Set<RowKey>;
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     onRowsSelectedChange?: (mapRowsSelected: ReadonlySet<RowKey>, rawRowsSelected: TRow[]) => void;
 }
 export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {

package/components/DynamicFilter/index.js

@@ -19,7 +19,7 @@ import "../../react-lazy-load-image-component.js";
 import "../Image/index.js";
 import "../hook-form/RHFUpload/index.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.js";
-import "../../simplebar.js";
+import "simplebar/dist/simplebar.min.css";
 import { F as FilterButton } from "../mui_extended/Button/index.js";
 import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";

package/components/LanguagePopover/index.js

@@ -8,8 +8,9 @@ import "@mui/material/styles";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "../mui_extended/Avatar/index.js";
 import "react-router-dom";
-import "@mui/lab";
+import "@mui/material/Button";
 import "../mui_extended/Button/index.js";
+import "@mui/lab";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
 import "../CommonActions/components/Actions/index.js";
 import "../mui_extended/Pager/index.js";

package/components/ModalDialog/index.js

@@ -71,7 +71,7 @@ const Header = (props) => {
   const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
   const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
   const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
-  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_tittle.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
   return /* @__PURE__ */ jsxs(Header$1, {
     id: "Header",
     className: "draggable-dialog-title",

package/components/NoItemSelected/index.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-import { NoItemSelectedProps } from './types';
-export declare function NoItemSelected(props: NoItemSelectedProps): JSX.Element;
+export declare function NoItemSelected(): JSX.Element;

package/components/NoItemSelected/index.js

@@ -1,4 +1,4 @@
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
 import { I as Image } from "../Image/index.js";
 import { Skeleton } from "@mui/material";
@@ -34,10 +34,7 @@ const WrapperSKTNoItemSelected = styled("div")(() => ({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
-function NoItemSelected(props) {
-  const {
-    isSkeleton
-  } = props;
+function NoItemSelected() {
   const {
     host_static_assets,
     environment_assets
@@ -45,6 +42,7 @@ function NoItemSelected(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const src = useMemo(() => {
     return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   }, []);

package/components/PaperForm/index.js

@@ -2,6 +2,7 @@ import { Skeleton } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { I as Icon } from "../Icon/index.js";
+import { useModuleSkeleton } from "@m4l/core";
 const WrapperPaper = styled("div")(({
   theme
 }) => ({
@@ -89,10 +90,10 @@ function SKTPaperForm(prop) {
 function PaperForm(props) {
   const {
     urlIcon,
-    tittle,
-    children,
-    isSkeleton = false
+    title,
+    children
   } = props;
+  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(WrapperPaper, {
     id: "ContainerPropertyValue",
     children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
@@ -104,7 +105,7 @@ function PaperForm(props) {
             children: /* @__PURE__ */ jsx(Icon, {
               src: urlIcon
             })
-          }), tittle]
+          }), title]
         })
       }), /* @__PURE__ */ jsx(Content, {
         id: "Content",

package/components/PaperForm/types.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 export interface PaperFormProps {
-    isSkeleton?: boolean;
     urlIcon: string;
-    tittle: string;
+    title: string;
     children: ReactNode;
 }

package/components/PropertyValue/index.js

@@ -2,6 +2,7 @@ import { styled } from "@mui/material/styles";
 import { Skeleton } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
 const WrapperPropertyValue = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
@@ -86,10 +87,10 @@ function PropertyValue(props) {
     propertyWidth,
     propertyHeight,
     valueWidth = "100",
-    isForm,
-    isSkeleton = false
+    isForm
   } = props;
   const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
   const getValueW = () => {
     if (valueWidth === "75" && isDesktop) {
       return "75";

package/components/PropertyValue/types.d.ts

@@ -10,7 +10,6 @@ export interface ValueProps {
 }
 export interface PropertyValueProps extends PropertyProps, ValueTypeProps {
     property: string;
-    isSkeleton?: boolean;
     value: number | string | ReactNode;
 }
 export interface ValueTypeProps {

package/components/ScrollBar/index.js

@@ -1,4 +1,4 @@
-import { S as SimpleBar } from "../../simplebar.js";
+import SimpleBarReact from "simplebar-react";
 import { styled, alpha } from "@mui/material/styles";
 import { Box } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
@@ -7,7 +7,7 @@ const RootStyle = styled("div")(() => ({
   height: "100%",
   overflow: "hidden"
 }));
-const SimpleBarStyle = styled(SimpleBar)(({
+const SimpleBarStyle = styled(SimpleBarReact)(({
   theme
 }) => ({
   maxHeight: "100%",

package/components/hook-form/RHFAutocomplete/index.js

@@ -1,4 +1,4 @@
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, Autocomplete, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -49,16 +49,17 @@ function RHFAutocomplete(props) {
     label,
     skeletonProps = {},
     options,
+    disabled,
     ...other
   } = props;
   const {
-    isSkeleton = false,
     width = 100,
     height = "18px"
   } = skeletonProps;
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const {
     control,
     getValues
@@ -116,6 +117,7 @@ function RHFAutocomplete(props) {
             onChange(val);
           },
           loadingText: "",
+          disabled,
           noOptionsText: getLabel("rhf_autocomplete.component_no_options"),
           renderInput: (params) => {
             return /* @__PURE__ */ jsx(TextField, {

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }

package/components/hook-form/RHFAutocompleteAsync/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, Fragment } from "react";
-import { useModuleDictionary, useNetwork, getPropertyByString } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton, useNetwork, getPropertyByString } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
 import { styled } from "@mui/material/styles";
@@ -43,23 +43,25 @@ function RHFAutocompleteAsync(props) {
     label,
     endPoint,
     timeout = 5e3,
-    parms = {},
+    parms,
     resultField = "data",
     skeletonProps = {},
     isRemote = true,
+    disabled,
     ...other
   } = props;
   const {
-    isSkeleton = false,
     width = 100,
     height = "18px"
   } = skeletonProps;
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const {
     control,
-    getValues
+    getValues,
+    setValue
   } = useFormContext();
   const {
     networkOperation
@@ -68,7 +70,14 @@ function RHFAutocompleteAsync(props) {
   const [options, setOptions] = useState(initialValue === null ? [] : [initialValue]);
   const [open, setOpen] = useState(false);
   const [optionsLoaded, setOptionsLoaded] = useState(false);
-  const loading = open && !optionsLoaded;
+  const loading = open && !optionsLoaded && !!endPoint && !isSkeleton;
+  useEffect(() => {
+    if (optionsLoaded) {
+      setOptionsLoaded(false);
+      setOptions([]);
+      setValue(name, null);
+    }
+  }, [parms, endPoint]);
   useEffect(() => {
     if (!optionsLoaded && initialValue) {
       setOptions([initialValue]);
@@ -147,8 +156,10 @@ function RHFAutocompleteAsync(props) {
         setOpen(false);
       },
       onChange: (_e, val) => {
+        console.log("onChante  auto", _e, val);
         onChange(val);
       },
+      disabled,
       loading,
       loadingText: "",
       noOptionsText: getLabel("rhf_autocomplete.component_no_options"),

package/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }
@@ -10,7 +9,7 @@ export interface RHFAutocompleteAsyncProps<T> {
     skeletonProps?: SkeletonProps;
     endPoint: string;
     timeout?: number;
-    parms?: any;
+    parms?: Record<string, any>;
     resultField?: string;
     label: string;
     isRemote?: boolean;

package/components/hook-form/RHFCheckbox/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { RHFCheckboxProps } from './types';
-export declare function RHFCheckbox({ name, sizeCheck, isSkeleton, ...other }: RHFCheckboxProps): JSX.Element;
+export declare const ErrorLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare function RHFCheckbox({ name, sizeCheck, ...other }: RHFCheckboxProps): JSX.Element;

package/components/hook-form/RHFCheckbox/index.js

@@ -1,7 +1,8 @@
 import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { jsx } from "react/jsx-runtime";
+import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
 const WrapperSKTRHFCheckbox = styled("div")(() => ({
   display: "flex"
 }));
@@ -14,15 +15,23 @@ function SKTRHFCheckbox() {
     })
   });
 }
+const ErrorLabel = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
 function RHFCheckbox({
   name,
   sizeCheck = "small",
-  isSkeleton = false,
   ...other
 }) {
   const {
     control
   } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(
     FormControlLabel,
     {
@@ -30,11 +39,18 @@ function RHFCheckbox({
         name,
         control,
         render: ({
-          field
-        }) => isSkeleton ? /* @__PURE__ */ jsx(SKTRHFCheckbox, {}) : /* @__PURE__ */ jsx(Checkbox, {
-          size: sizeCheck,
-          ...field,
-          checked: field.value
+          field,
+          fieldState: {
+            error
+          }
+        }) => isSkeleton ? /* @__PURE__ */ jsx(SKTRHFCheckbox, {}) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Checkbox, {
+            size: sizeCheck,
+            ...field,
+            checked: field.value
+          }), console.log("Error1", error?.message), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+            children: error?.message + ""
+          })]
         })
       }),
       ...other

package/components/hook-form/RHFCheckbox/types.d.ts

@@ -2,7 +2,6 @@ import { FormControlLabelProps } from '@mui/material';
 export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
     name: string;
     sizeCheck?: 'small' | 'medium';
-    isSkeleton?: boolean;
 }
 export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
     name: string;

package/components/hook-form/RHFDateTime/index.js

@@ -2,7 +2,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { DateTimePicker } from "@mui/x-date-pickers";
-import { useEnvironment } from "@m4l/core";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
 const SKTRHFWrapperTextField = styled("div")(({
   theme
@@ -21,10 +21,10 @@ function RHFDateTime(props) {
     skeletonProps: skeletoProps = {}
   } = props;
   const {
-    isSkeleton = false,
     width = "100%",
     height = 14
   } = skeletoProps;
+  const isSkeleton = useModuleSkeleton();
   const {
     control
   } = useFormContext();

package/components/hook-form/RHFDateTime/types.d.ts

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }

package/components/hook-form/RHFTextField/index.js

@@ -2,6 +2,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { forwardRef } from "react";
+import { useModuleSkeleton } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
 const SKTRHFWrapperTextField = styled("div")(({
   theme
@@ -13,18 +14,19 @@ const SKTRHFWrapperTextField = styled("div")(({
   padding: "12px 14px",
   borderRadius: theme.spacing(1)
 }));
-const RHFTextField = forwardRef((props, ref) => {
+const RHFTextField = forwardRef((props, inputRef) => {
   const {
-    name,
+    name: nameRHF,
     autoComplete = "off",
     skeletonProps: skeletoProps = {},
+    type,
     ...other
   } = props;
   const {
-    isSkeleton = false,
     width = "100%",
     height = 14
   } = skeletoProps;
+  const isSkeleton = useModuleSkeleton();
   const {
     control
   } = useFormContext();
@@ -38,25 +40,47 @@ const RHFTextField = forwardRef((props, ref) => {
     });
   }
   return /* @__PURE__ */ jsx(Controller, {
-    name,
+    name: nameRHF,
     control,
     render: ({
-      field,
+      field: {
+        onChange,
+        onBlur,
+        value,
+        name,
+        ref
+      },
       fieldState: {
         error
       }
-    }) => /* @__PURE__ */ jsx(
-      TextField,
-      {
-        inputRef: ref,
-        autoComplete,
-        ...field,
-        fullWidth: true,
-        error: !!error,
-        helperText: error?.message,
-        ...other
-      }
-    )
+    }) => {
+      const onInternalChange = (event) => {
+        if (type === "number") {
+          if (event.target.value) {
+            onChange(Number(event.target.value));
+            return;
+          }
+        }
+        onChange(event);
+      };
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputRef,
+          autoComplete,
+          onChange: onInternalChange,
+          onBlur,
+          value,
+          name,
+          ref,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          type,
+          ...other
+        }
+      );
+    }
   });
 });
 RHFTextField.displayName = "RHFTextField";

package/components/hook-form/RHFTextField/types.d.ts

@@ -1,5 +1,4 @@
 export interface SkeletonProps {
-    isSkeleton?: boolean;
     width?: string | number;
     height?: string | number;
 }

package/components/hook-form/RHFUpload/index.js

@@ -173,8 +173,9 @@ function UploadImage({
               opacity: 1
             },
             ...(isDragReject || error) && {
-              backgroundColor: alpha("error.main", 0.72),
-              color: "common.white"
+              bgcolor: "error.lighter",
+              borderColor: "error.light",
+              color: "error.main"
             }
           },
           children: /* @__PURE__ */ jsxs(ContainerUploadBody, {

package/components/index.d.ts

@@ -5,9 +5,10 @@ export * from '../components/CompanyLogo';
 export * from './formatters';
 export * from './formatters/dicctionary';
 export { DataGrid } from '../components/DataGrid';
-export type { Column } from 'react-data-grid';
+export type { Column, EditorProps } from 'react-data-grid';
 export type { RowKey } from '../components/DataGrid/types';
 export { getDataGridComponentsDictionary as getGridComponentsDictionary } from '../components/DataGrid/dictionary';
+export { TextEditor, NumberEditor } from '../components/DataGrid/components/editors/TextEditor';
 export * from '../components/DynamicFilter';
 export * from '../components/DynamicFilter/dictionary';
 export type { FilterFieldApply, RawFilterFieldApply, InitialFilterFieldApply, } from '../components/DynamicFilter/types';