@m4l/components 0.1.28 → 0.1.30

package/components/CommonActions/components/ActionCancel/{index.e498eeb2.js → index.a57fcfae.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.53b56958.js";
+import { B as Button } from "../../../mui_extended/Button/index.1d13f53b.js";
 import { jsx } from "react/jsx-runtime";
 const ActionCancel = (props) => {
   const {

package/components/CommonActions/components/ActionFormCancel/{index.4ff0ad73.js → index.b8215cd2.js}

@@ -2,9 +2,9 @@ import { useFormContext, useFormState } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { B as Button } from "../../../mui_extended/Button/index.53b56958.js";
+import { B as Button } from "../../../mui_extended/Button/index.1d13f53b.js";
 import { useCallback } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.5fee01a3.js";
+import { u as useModal } from "../../../../hooks/useModal/index.78ee58f3.js";
 import { jsx } from "react/jsx-runtime";
 function ActionFormCancel(props) {
   const {

package/components/CommonActions/components/ActionIntro/{index.60ef7bd7.js → index.591a8195.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/index.53b56958.js";
+import { B as Button } from "../../../mui_extended/Button/index.1d13f53b.js";
 import { jsx } from "react/jsx-runtime";
 const ActionIntro = (props) => {
   const {

package/components/CommonActions/components/Actions/{index.0645e30f.js → index.2ce05d29.js}

@@ -6,16 +6,16 @@ import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
 import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
-import "../../../../contexts/ModalContext/index.b92fa565.js";
+import "../../../../contexts/ModalContext/index.cc3690d3.js";
 import "@mui/lab";
 import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.a321e5cb.js";
-import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.76d8fd25.js";
-import { P as Pager } from "../../../mui_extended/Pager/index.c0865b70.js";
+import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.07162c02.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.72b43352.js";
 import { D as DataGrid$1 } from "../../../../react-data-grid.d46d625e.js";
-import { u as useModal } from "../../../../hooks/useModal/index.5fee01a3.js";
-import { A as ActionCancel } from "../ActionCancel/index.e498eeb2.js";
-import { A as ActionIntro } from "../ActionIntro/index.60ef7bd7.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.705275a4.js";
+import { u as useModal } from "../../../../hooks/useModal/index.78ee58f3.js";
+import { A as ActionCancel } from "../ActionCancel/index.a57fcfae.js";
+import { A as ActionIntro } from "../ActionIntro/index.591a8195.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.028756ac.js";
 import { I as Icon } from "../../../Icon/index.619c31c4.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperStandarActions = styled("div")(({

package/components/DataGrid/{index.76d8fd25.js → index.07162c02.js}

@@ -6,9 +6,9 @@ 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, useModuleSkeleton } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.0645e30f.js";
-import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.9ea10764.js";
-import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.c0865b70.js";
+import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.2ce05d29.js";
+import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.3e5675c4.js";
+import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.72b43352.js";
 const WrapperGrid = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/DynamicFilter/components/PopupEditFilter/styles.d.ts

@@ -3,3 +3,4 @@ export declare const WrapperPopupEditFilter: import("@emotion/styled").StyledCom
 export declare const PopperActionsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperEditFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DynamicFilter/components/fieldstypes/DateTimeFilter/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { FilterFieldApply, Field } from '../../../types';
-import type { HostToolsType } from '@m4l/core';
-export declare const getDefaultDateTimeFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string, hostTools: HostToolsType) => FilterFieldApply;
+import { Formatters } from '@m4l/graphics';
+export declare const getDefaultDateTimeFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string, formatters: Formatters) => FilterFieldApply;
 export declare function DateTimeFilter(): JSX.Element;

package/components/DynamicFilter/components/fieldstypes/factory.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FilterFieldApply, Field } from '../../types';
-import type { HostToolsType } from '@m4l/core';
-export declare const getDefaultFilterValues: (field: Field, fixed: boolean, getLabel: (key: string) => string, hostTools: HostToolsType) => FilterFieldApply;
+import { Formatters } from '@m4l/graphics';
+export declare const getDefaultFilterValues: (field: Field, fixed: boolean, getLabel: (key: string) => string, formatters: Formatters) => FilterFieldApply;
 export declare const PopupEditFilterComponent: (props: {
     filter: FilterFieldApply;
 }) => JSX.Element;

package/components/DynamicFilter/{index.342ba5fe.js → index.31876c9f.js}

@@ -1,25 +1,26 @@
 import { S as ScrollBar } from "../ScrollBar/index.39eeb2de.js";
 import { styled } from "@mui/material/styles";
 import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
-import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
+import { useModuleDictionary, voidFunction, useEnvironment, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.59a68f9f.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.de93fe01.js";
 import "lodash/debounce";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "../hook-form/RHFCheckbox/index.6dcec9e2.js";
-import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
+import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper, ClickAwayListener } from "@mui/material";
 import "@mui/x-date-pickers";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.9231a7c7.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.e70d2de3.js";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.f9aaaa90.js";
 import { I as Icon } from "../Icon/index.619c31c4.js";
-import "../hook-form/RHFPeriod/index.64a228d5.js";
+import "../hook-form/RHFPeriod/index.fa8426ac.js";
 import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.2941fbda.js";
-import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.0645e30f.js";
+import "../Period/index.111600f2.js";
+import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2ce05d29.js";
 import "@mui/material/Button";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.b92fa565.js";
+import "../../contexts/ModalContext/index.cc3690d3.js";
 import "@mui/lab";
 import "lodash/isString";
 import "react-dropzone";
@@ -27,12 +28,11 @@ import "../Image/index.93d5f37f.js";
 import "../hook-form/RHFUpload/index.d5cc7c13.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.a321e5cb.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as FilterButton } from "../mui_extended/Button/index.53b56958.js";
-import { P as Popover } from "../mui_extended/Popover/index.705275a4.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.b142190a.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.e498eeb2.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.60ef7bd7.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { F as FilterButton } from "../mui_extended/Button/index.1d13f53b.js";
+import { P as Popover } from "../mui_extended/Popover/index.028756ac.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.f8c00745.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a57fcfae.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.591a8195.js";
 const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
@@ -378,9 +378,12 @@ const verifyDateTime = (filter) => {
   }
   return true;
 };
-const getDefaultDateTimeFilter = (field, fixed, getLabel, hostTools) => {
+const getDefaultDateTimeFilter = (field, fixed, getLabel, formatters) => {
   const defaultStartDate = new Date();
   const defaultEndDate = new Date();
+  const {
+    dateFormatter
+  } = formatters;
   let dfop1 = field.defaultOperand1;
   let dfop2 = field.defaultOperand2;
   const defaultFilter = {
@@ -416,7 +419,7 @@ const getDefaultDateTimeFilter = (field, fixed, getLabel, hostTools) => {
   }
   defaultFilter.o1 = defaultStartDate.toISOString();
   defaultFilter.o2 = defaultEndDate.toISOString();
-  defaultFilter.labelOperands = `${hostTools.formatDate(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${hostTools.formatDate(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
+  defaultFilter.labelOperands = `${dateFormatter.formatDate(defaultStartDate, formatters.dateFormatter.datetimeFormat)} - ${dateFormatter.formatDate(defaultEndDate, dateFormatter.datetimeFormat)}`;
   defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
   return defaultFilter;
 };
@@ -430,13 +433,8 @@ function DateTimeFilter() {
     getLabel
   } = useModuleDictionary();
   const {
-    formatDate
-  } = useHostTools();
-  const {
-    dfnsFormat: {
-      datetime_format
-    }
-  } = useEnvironment();
+    dateFormatter
+  } = useFormatter();
   const {
     popupData: {
       filter,
@@ -471,10 +469,10 @@ function DateTimeFilter() {
     };
     if (data.valueOperator.id === "b") {
       newFilter.o2 = data.valueOperand2.toISOString();
-      newFilter.labelOperands = `${formatDate(data.valueOperand1, datetime_format)} - ${formatDate(data.valueOperand2, datetime_format)}`;
+      newFilter.labelOperands = `${dateFormatter.formatDate(data.valueOperand1, dateFormatter.datetimeFormat)} - ${dateFormatter.formatDate(data.valueOperand2, dateFormatter.datetimeFormat)}`;
     } else {
       newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
-      newFilter.labelOperands = formatDate(data.valueOperand1, datetime_format);
+      newFilter.labelOperands = dateFormatter.formatDate(data.valueOperand1, dateFormatter.datetimeFormat);
     }
     return newFilter;
   }, []);
@@ -482,14 +480,10 @@ function DateTimeFilter() {
     if (!isLoaded) {
       setPoupEditValidationSchema({
         valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
-        valueOperand1: Yup.date().test("valueOperand1", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
-          return Boolean(value);
-        }),
-        valueOperand2: Yup.date().when(["valueOperator.id"], {
+        valueOperand1: Yup.date().required(getLabel(`dynamic_filter.error_invalid_date`)).typeError(getLabel(`dynamic_filter.error_invalid_date`)),
+        valueOperand2: Yup.mixed().when(["valueOperator.id"], {
           is: "b",
-          then: Yup.date().test("DOB", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
-            return Boolean(value);
-          })
+          then: Yup.date().typeError(getLabel(`dynamic_filter.error_invalid_date`)).min(Yup.ref("valueOperand1"), getLabel(`dynamic_filter.error_less_than_start`))
         })
       });
     }
@@ -651,8 +645,8 @@ function NumberFilter() {
   useEffect(() => {
     inputRef.current?.focus();
   }, [isLoaded]);
-  return /* @__PURE__ */ jsxs(WrapperStringFilter, {
-    children: [isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
@@ -665,12 +659,14 @@ function NumberFilter() {
       }), /* @__PURE__ */ jsx(RHFTextField, {
         name: "valueOperand1",
         ref: inputRef,
+        type: "number",
         focused: true
       }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
         name: "valueOperand2",
-        ref: inputRef
+        ref: inputRef,
+        type: "number"
       })]
-    }), "x"]
+    })
   });
 }
 const strategiesDefaultFilterValues = {
@@ -682,9 +678,9 @@ const strategiesDefaultFilterValues = {
     throw new Error("Type no defined");
   }
 };
-const getDefaultFilterValues = (field, fixed, getLabel, hostTools) => {
+const getDefaultFilterValues = (field, fixed, getLabel, formatters) => {
   const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
-  return transformer(field, fixed, getLabel, hostTools);
+  return transformer(field, fixed, getLabel, formatters);
 };
 const strategiesEditFilterComponent = {
   string: StringFilter,
@@ -762,7 +758,7 @@ const formatToRawFilter = (applyedFilter) => {
     o2: af.o2
   }));
 };
-const getInitialFilters = (fields, filters, getFieldByName, getLabel, hostTools) => {
+const getInitialFilters = (fields, filters, getFieldByName, getLabel, formatters) => {
   const newFilters = [];
   const fixedFields = [];
   for (let index = 0; index < filters.length; index++) {
@@ -812,7 +808,7 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabel, hostTools)
     const field = fields[index];
     if (field.presence === "initialized" || field.presence === "fixed") {
       if (!filters.find((f) => f.n === field.name)) {
-        const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel, hostTools);
+        const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel, formatters);
         newFilter.id = newFilters.length + 1;
         newFilters.push(newFilter);
       }
@@ -845,7 +841,7 @@ function BaseProvider(props) {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  const hostTools = useHostTools();
+  const formatter = useFormatter();
   const all_fields = useMemo(() => {
     return {
       ...ALL_FIELDS,
@@ -867,7 +863,7 @@ function BaseProvider(props) {
   const getLabelOperator = useCallback((operator) => {
     return getLabel(`dynamic_filter.operator_${operator}`);
   }, [getLabel]);
-  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel, hostTools));
+  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel, formatter));
   const availableFields = useMemo(() => {
     const newFields = [];
     for (let index = 0; index < fields.length; index++) {
@@ -956,6 +952,7 @@ function BaseProvider(props) {
     setInEdition(true);
   }, [applyedFilters]);
   const closeMenuFields = useCallback(() => {
+    console.log("closeMenuFields");
     setOpenAnchorEl(null);
     setInEdition(false);
   }, []);
@@ -974,7 +971,7 @@ function BaseProvider(props) {
   const showPopupForAddFilter = useCallback((anchorEl, field) => {
     setPopupData({
       popupAnchorEl: anchorEl,
-      filter: getDefaultFilterValues(field, false, getLabel, hostTools),
+      filter: getDefaultFilterValues(field, false, getLabel, formatter),
       field
     });
     setInEdition(true);
@@ -1397,6 +1394,12 @@ const HeaderContainer = styled("div")(({
   alignItems: "center",
   borderBottom: `1px solid ${theme.palette.divider}`
 }));
+const WrapperEditFilter = styled("div")(() => ({
+  "& .m4l_FormProvider": {
+    padding: "0px",
+    margin: "0px"
+  }
+}));
 const PopupEditFilter = () => {
   const {
     popupValidationSchema,
@@ -1444,32 +1447,34 @@ const PopupEditFilter = () => {
     hidePopupEdit(false);
   };
   return /* @__PURE__ */ jsx(Popper, {
-    id: "Popover",
     open: Boolean(popupAnchorEl),
     anchorEl: popupAnchorEl,
     sx: {
       boxShadow: theme.customShadows.dropdown,
       borderRadius: 1
     },
-    children: /* @__PURE__ */ jsx(Fragment, {
-      children: filter && /* @__PURE__ */ jsx(RHFormProvider, {
-        onSubmit,
-        values,
-        validationSchema: popupValidationSchema,
-        children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
-          children: [/* @__PURE__ */ jsxs(HeaderContainer, {
-            children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
-              src: field.urlIcon
-            }), /* @__PURE__ */ jsx(TitleContainer, {
-              children: field?.label
+    children: /* @__PURE__ */ jsx(ClickAwayListener, {
+      onClickAway: onClose,
+      children: /* @__PURE__ */ jsx(WrapperEditFilter, {
+        children: filter && /* @__PURE__ */ jsx(RHFormProvider, {
+          onSubmit,
+          values,
+          validationSchema: popupValidationSchema,
+          children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
+            children: [/* @__PURE__ */ jsxs(HeaderContainer, {
+              children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
+                src: field.urlIcon
+              }), /* @__PURE__ */ jsx(TitleContainer, {
+                children: field?.label
+              })]
+            }), /* @__PURE__ */ jsx(PopupEditFilterComponent, {
+              filter
+            }), /* @__PURE__ */ jsxs(Actions, {
+              children: [/* @__PURE__ */ jsx(ActionCancel, {
+                onClick: onClose
+              }), /* @__PURE__ */ jsx(ActionIntro, {})]
             })]
-          }), /* @__PURE__ */ jsx(PopupEditFilterComponent, {
-            filter
-          }), /* @__PURE__ */ jsxs(Actions, {
-            children: [/* @__PURE__ */ jsx(ActionCancel, {
-              onClick: onClose
-            }), /* @__PURE__ */ jsx(ActionIntro, {})]
-          })]
+          })
         })
       })
     })

package/components/ModalDialog/{index.9ea10764.js → index.3e5675c4.js}

@@ -1,6 +1,6 @@
 import { Dialog, IconButton, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.20e95c61.js";
-import { u as useModal } from "../../hooks/useModal/index.5fee01a3.js";
+import { u as useModal } from "../../hooks/useModal/index.78ee58f3.js";
 import { styled } from "@mui/material/styles";
 import { a as getThemeVariantColor } from "../../utils/index.214d9542.js";
 import { R as Resizeable } from "../Resizeable/index.45995d2b.js";
@@ -8,7 +8,7 @@ import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { I as Icon } from "../Icon/index.619c31c4.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.0645e30f.js";
+import { b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2ce05d29.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",
@@ -129,7 +129,8 @@ const ModalDialog = () => {
     closeModal,
     iconComponent,
     actions,
-    variant
+    variant,
+    fullScreen
   } = useModal();
   const isDesktop = useResponsiveDesktop();
   const onCloseModal = () => {
@@ -162,6 +163,7 @@ const ModalDialog = () => {
     PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
     maxWidth: false,
     fullWidth: !isDesktop,
+    fullScreen,
     children: [isDesktop && /* @__PURE__ */ jsx(Resizeable, {
       width: initialWidth,
       height: initialHeigth,

package/components/ObjectLogs/{index.f941fb79.js → index.35dbf836.js}

@@ -1,14 +1,15 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.76d8fd25.js";
-import { D as DateFormatter } from "../formatters/DateFormatter/index.1b9baacc.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.07162c02.js";
+import { D as DateFormatter } from "../formatters/DateFormatter/index.ed73f8ae.js";
 import { Tooltip, IconButton } from "@mui/material";
+import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.f56a7f8e.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.5fee01a3.js";
+import { u as useModal } from "../../hooks/useModal/index.78ee58f3.js";
 import { I as Icon } from "../Icon/index.619c31c4.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.342ba5fe.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.31876c9f.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",
@@ -60,6 +61,9 @@ function DetailDialog(props) {
   const {
     networkOperation
   } = useNetwork();
+  const {
+    hostThemeOptions
+  } = useHostTheme();
   const [detail, setDetail] = useState({});
   useEffect(() => {
     let mounted = true;
@@ -76,9 +80,11 @@ function DetailDialog(props) {
       mounted = false;
     };
   }, []);
+  const modeTheme = hostThemeOptions.palette?.mode;
   return /* @__PURE__ */ jsx(Container, {
     id: "objectLogsDetail",
     children: /* @__PURE__ */ jsx(ReactJson, {
+      theme: modeTheme === "dark" ? "summerfruit" : "rjv-default",
       name: null,
       sortKeys: true,
       displayDataTypes: false,
@@ -102,6 +108,7 @@ function DetailFormatter(props) {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
   const onClickDetail = () => {
     openModal({
       onQueryClose: () => closeModal(),
@@ -111,7 +118,8 @@ function DetailFormatter(props) {
       }),
       contentComponent: /* @__PURE__ */ jsx(DetailDialog, {
         log_id
-      })
+      }),
+      fullScreen: !isDesktop ? true : false
     });
   };
   return /* @__PURE__ */ jsx(Tooltip, {
@@ -162,11 +170,13 @@ function ObjectLogs(props) {
   }, {
     key: "resource_name",
     name: getLabel("object_logs.resource_name"),
-    type: "string"
+    type: "string",
+    width: 120
   }, {
     key: "log_preview",
     name: getLabel("object_logs.log_preview"),
-    type: "string"
+    type: "string",
+    width: 250
   }, {
     key: "Detail",
     name: getLabel("object_logs.log_detail"),
@@ -175,7 +185,8 @@ function ObjectLogs(props) {
   }, {
     key: "ip",
     name: getLabel("object_logs.ip"),
-    type: "string"
+    type: "string",
+    width: 120
   }], [getLabel]);
   const {
     pagerState,

package/components/Period/{index.2941fbda.js → index.111600f2.js}

@@ -3,11 +3,11 @@ import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useMemo } from "react";
 import { I as Icon } from "../Icon/index.619c31c4.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.0645e30f.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2ce05d29.js";
 import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.b92fa565.js";
+import "../../contexts/ModalContext/index.cc3690d3.js";
 import "@mui/lab";
 const ContainerPeriod = styled("div")(({
   theme,

package/components/animate/IconButtonAnimate/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
-export declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Pick<IconButtonProps<"button", {}>, "value" | "dir" | "form" | "slot" | "title" | "onChange" | "disabled" | "children" | "aria-label" | "aria-labelledby" | "tabIndex" | "key" | "onFocus" | "onMouseEnter" | "id" | "aria-rowindex" | "onScroll" | "onCopy" | "onPaste" | "aria-describedby" | "onResize" | "type" | "hidden" | "name" | "placeholder" | "action" | "aria-hidden" | "onDragStart" | "onDrag" | "onMouseDown" | "onMouseUp" | "onTouchStart" | "onTouchEnd" | keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "translate" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<"button", {}>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/formatters/BooleanFormatter/{index.8da35c9c.js → index.ae70b54f.js}

@@ -2,6 +2,7 @@ import { useModuleDictionary, useEnvironment, getPropertyByString } from "@m4l/c
 import React from "react";
 import { I as Icon } from "../../Icon/index.619c31c4.js";
 import { jsx } from "react/jsx-runtime";
+import "@m4l/graphics";
 function BooleanFormatter(props) {
   const {
     presentationType,

package/components/formatters/DateFormatter/{index.1b9baacc.js → index.ed73f8ae.js}

@@ -1,8 +1,9 @@
 import React from "react";
-import { useEnvironment, useHostTools, getPropertyByString } from "@m4l/core";
+import { getPropertyByString } from "@m4l/core";
 import "../../Icon/index.619c31c4.js";
 import "@mui/material/styles";
 import { jsx, Fragment } from "react/jsx-runtime";
+import { useFormatter } from "@m4l/graphics";
 function DateFormatter(props) {
   const {
     presentationType,
@@ -11,12 +12,9 @@ function DateFormatter(props) {
     Component = React.Fragment
   } = props;
   const {
-    dfnsFormat
-  } = useEnvironment();
-  const {
-    formatDate
-  } = useHostTools();
-  let finalFormat = format || dfnsFormat.datetime_format;
+    dateFormatter
+  } = useFormatter();
+  let finalFormat = format || dateFormatter.datetimeFormat;
   let result;
   let resultDate;
   if (value === void 0 || value === null) {
@@ -26,13 +24,13 @@ function DateFormatter(props) {
   }
   switch (presentationType) {
     case "datetime":
-      finalFormat = format || dfnsFormat.datetime_format;
+      finalFormat = format || dateFormatter.datetimeFormat;
       break;
     case "date":
-      finalFormat = format || dfnsFormat.date_format;
+      finalFormat = format || dateFormatter.dateFormat;
       break;
     case "time":
-      finalFormat = format || dfnsFormat.time_format;
+      finalFormat = format || dateFormatter.timeFormat;
       break;
   }
   try {
@@ -41,7 +39,7 @@ function DateFormatter(props) {
     } else {
       resultDate = value;
     }
-    result = formatDate(resultDate, finalFormat);
+    result = dateFormatter.formatDate(resultDate, finalFormat);
   } catch (e) {
     result = "err_typing";
   }

package/components/formatters/{index.689a8086.js → index.9bd10770.js}

@@ -3,6 +3,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import "../Icon/index.619c31c4.js";
 import "@mui/material/styles";
+import "@m4l/graphics";
 function UncertaintyFormatter(props) {
   const {
     value,