@m4l/components 0.1.82 → 0.1.84

package/components/AccountPopover/classes/index.d.ts

@@ -3,7 +3,11 @@ export declare const accountPopoverClasses: AccountPopoverClassesType;
 export declare function getAccountPopoverClassesUtilityClass(slot: string): string;
 export declare const useAccountPopoverUtilityClasses: () => {
     root: string;
+    containerUserName: string;
+    containerUserEmail: string;
     containerUserInfo: string;
+    containerlogOut: string;
+    containerSetting: string;
     labelUserName: string;
     labelUserEmail: string;
     labelVersion: string;

package/components/AccountPopover/classes/types.d.ts

@@ -1,7 +1,11 @@
 import { useAccountPopoverUtilityClasses } from ".";
 export interface AccountPopoverClassesType {
     root: string;
+    containerUserName: string;
+    containerUserEmail: string;
+    containerlogOut: string;
     containerUserInfo: string;
+    containerSetting: string;
     labelUserName: string;
     labelUserEmail: string;
     labelVersion: string;

package/components/AccountPopover/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getAccountPopoverDictionary(): string[];

package/components/AccountPopover/{index.0ba26726.js → index.bbeb9142.js}

@@ -2,32 +2,36 @@ import { useEnvironment, useModuleDictionary, useNetwork } from "@m4l/core";
 import { useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { generateUtilityClasses, generateUtilityClass, styled, useTheme, ButtonBase } from "@mui/material";
-import "../Icon/index.2414ff25.js";
-import clsx from "clsx";
+import { I as Icon } from "../Icon/index.d1402200.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.a318316e.js";
+import "../mui_extended/IconButton/index.62aea582.js";
+import clsx from "clsx";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.42cef1c7.js";
+import "../mui_extended/Accordion/index.46771196.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import { A as Avatar } from "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.40af964e.js";
-import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/CheckBox.38abccd8.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.da26e9d4.js";
-import "../mui_extended/Tab/index.0d5f96e6.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "../mui_extended/Tab/index.756fe693.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const componentName = "M4LAccountPopover";
 generateUtilityClasses(componentName, [
   "root",
+  "containerUserName",
+  "containerUserEmail",
+  "containerlogOut",
   "containerUserInfo",
+  "containerSetting",
   "labelUserName",
   "labelUserEmail",
   "labelVersion",
@@ -46,7 +50,11 @@ function getAccountPopoverClassesUtilityClass(slot) {
 const useAccountPopoverUtilityClasses = () => {
   const slots = {
     root: ["root"],
+    containerUserName: ["containerUserName"],
+    containerUserEmail: ["containerUserEmail"],
     containerUserInfo: ["containerUserInfo"],
+    containerlogOut: ["containerlogOut"],
+    containerSetting: ["containerSetting"],
     labelUserName: ["labelUserName"],
     labelUserEmail: ["labelUserEmail"],
     labelVersion: ["labelVersion"],
@@ -103,15 +111,19 @@ const MenuPopOver = (props) => {
     version,
     handleLogOut,
     classes,
-    userData
+    userData,
+    settingHandleOpen
   } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const {
     avatar_url,
     first_name,
     last_name,
     email
   } = userData || {};
-  console.log("sidebar MenuPopOver");
   const {
     getLabel
   } = useModuleDictionary();
@@ -167,28 +179,52 @@ const MenuPopOver = (props) => {
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerUserInfo")
         } : {},
-        children: [/* @__PURE__ */ jsx("span", {
-          className: classes.labelUserName,
-          children: `${first_name} ${last_name}`
-        }), /* @__PURE__ */ jsx("span", {
-          className: classes.labelUserEmail,
-          children: email
+        children: [" ", /* @__PURE__ */ jsxs("div", {
+          className: classes.containerUserName,
+          children: [/* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/users.svg`
+          }), /* @__PURE__ */ jsx("span", {
+            className: classes.labelUserName,
+            children: `${first_name} ${last_name}`
+          })]
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.containerUserEmail,
+          children: [/* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/email.svg`
+          }), /* @__PURE__ */ jsx("span", {
+            className: classes.labelUserEmail,
+            children: email
+          })]
         })]
-      }), /* @__PURE__ */ jsx("div", {
+      }), /* @__PURE__ */ jsxs("div", {
         className: classes.containerAppVersion,
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAppVersion")
         } : {},
-        children: /* @__PURE__ */ jsx("span", {
+        children: [/* @__PURE__ */ jsx(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/version.svg`
+        }), /* @__PURE__ */ jsx("span", {
           className: classes.labelVersion,
-          children: `${getLabel("version")} ${version}`
-        })
-      }), /* @__PURE__ */ jsx("div", {
+          children: `${getLabel("account_popover.label_version")} ${version}`
+        })]
+      }), /* @__PURE__ */ jsxs("div", {
         className: classes.containerMenuItems,
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerMenuItems")
         } : {},
-        children: data ? data.length !== 0 && data.map((option) => /* @__PURE__ */ jsx("div", {
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: classes.containerSetting,
+          children: [/* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`
+          }), /* @__PURE__ */ jsx("div", {
+            className: classes.menuItem,
+            onClick: () => {
+              settingHandleOpen();
+              handleClose();
+            },
+            children: getLabel("account_popover.label_settings")
+          })]
+        }), data ? data.length !== 0 && data.map((option) => /* @__PURE__ */ jsx("div", {
           role: "presentation",
           onClick: () => handleClick(option),
           className: classes.menuItem,
@@ -204,7 +240,9 @@ const MenuPopOver = (props) => {
           children: /* @__PURE__ */ jsx(CircularProgress, {
             size: "20px"
           })
-        })
+        })]
+      }), /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/sign_off.svg`
       }), /* @__PURE__ */ jsx("div", {
         role: "presentation",
         onClick: handleLogOut,
@@ -212,7 +250,7 @@ const MenuPopOver = (props) => {
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("logOut")
         } : {},
-        children: getLabel("logout")
+        children: getLabel("account_popover.label_logout")
       })]
     })]
   });
@@ -223,7 +261,9 @@ const AccountPopover = (props) => {
     version,
     handleLogOut,
     userData,
-    className
+    className,
+    settingOpen,
+    settingHandleOpen
   } = props;
   const [asyncState, setAsyncState] = useState("unLoad");
   const [menuData, setMenuData] = useState([]);
@@ -265,10 +305,16 @@ const AccountPopover = (props) => {
       version,
       handleLogOut,
       classes: accountPopoverClasses,
-      userData
+      userData,
+      settingOpen,
+      settingHandleOpen
     })
   });
 };
+function getAccountPopoverDictionary() {
+  return ["accountPopover"];
+}
 export {
-  AccountPopover as A
+  AccountPopover as A,
+  getAccountPopoverDictionary as g
 };

package/components/AccountPopover/index.d.ts

@@ -1,2 +1,3 @@
 export { AccountPopover } from './AccountPopover';
 export type { UserMenuData } from './types';
+export { getAccountPopoverDictionary } from './dictionary';

package/components/AccountPopover/types.d.ts

@@ -37,4 +37,6 @@ export interface AccountPopoverProps {
     version: string;
     userData: User | null | undefined;
     className?: string;
+    settingOpen?: boolean;
+    settingHandleOpen: () => void;
 }

package/components/AppBar/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getAppBarDictionary(): string[];

package/components/AppBar/{index.fadcefc6.js → index.43f8b54f.js}

@@ -1,10 +1,10 @@
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as IconButton } from "../mui_extended/IconButton/index.a318316e.js";
-import "../mui_extended/Accordion/index.42cef1c7.js";
-import "../Icon/index.2414ff25.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/Accordion/index.46771196.js";
+import "../Icon/index.d1402200.js";
 import "react";
 import "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -13,14 +13,14 @@ import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.40af964e.js";
-import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/CheckBox.38abccd8.js";
 import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../mui_extended/MenuActions/index.2493b1b1.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.da26e9d4.js";
-import "../mui_extended/Tab/index.0d5f96e6.js";
+import "../mui_extended/Pager/index.a7f87c96.js";
+import "../mui_extended/Tab/index.756fe693.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { styled } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
@@ -66,6 +66,9 @@ const AppBar = (props) => {
     environment_assets
   } = useEnvironment();
   const classes = useAppBarUtilityClasses();
+  const {
+    getLabel
+  } = useModuleDictionary();
   return /* @__PURE__ */ jsxs(AppBarRoot, {
     className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {
@@ -77,7 +80,7 @@ const AppBar = (props) => {
         [TEST_PROP_ID]: getNameDataTestId("containerIconMenuToggle")
       } : {},
       children: /* @__PURE__ */ jsx(IconButton, {
-        tooltip: "test",
+        tooltip: getLabel("appbar.tooltip_toogle_menu"),
         className: classes.iconMenuToggle,
         src: `${host_static_assets}/${environment_assets}/frontend/components/settings/assets/icons/options.svg`,
         onClick: onToggleVisible
@@ -91,6 +94,10 @@ const AppBar = (props) => {
     })]
   });
 };
+function getAppBarDictionary() {
+  return ["appbar"];
+}
 export {
-  AppBar as A
+  AppBar as A,
+  getAppBarDictionary as g
 };

package/components/AppBar/index.d.ts

@@ -1 +1,2 @@
 export { AppBar } from './AppBar';
+export { getAppBarDictionary } from './dictionary';

package/components/CommonActions/components/ActionCancel/{index.6cf96d04.js → index.29517521.js}

@@ -1,6 +1,6 @@
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.5abb6ac4.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.e70e8779.js";
 import { jsx } from "react/jsx-runtime";
 const ActionCancel = (props) => {
   const {

package/components/CommonActions/components/ActionFormCancel/{index.a0335cbf.js → index.89f1ac8e.js}

@@ -3,40 +3,40 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
 import { useCallback, useEffect } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.9b0cc3fe.js";
+import { u as useModal } from "../../../../hooks/useModal/index.7611bf21.js";
 import "../../../../react-draggable.7abb5d0a.js";
 import "../../../Resizeable/index.9a9c79a4.js";
 import { jsx } from "react/jsx-runtime";
 import "@m4l/graphics";
-import "../../../Icon/index.2414ff25.js";
+import "../../../Icon/index.d1402200.js";
 import "clsx";
-import "../../../modal/index.e9fece72.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.f148e495.js";
-import "../../../mui_extended/IconButton/index.a318316e.js";
-import "../../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../../modal/index.6f281ef8.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.a68aa0f1.js";
+import "../../../mui_extended/IconButton/index.62aea582.js";
+import "../../../mui_extended/Accordion/index.46771196.js";
 import "../../../mui_extended/Typography/index.443590d6.js";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../../mui_extended/CheckBox.38abccd8.js";
 import "../../../mui_extended/Badge/index.cad260fe.js";
 import "../../../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.da26e9d4.js";
-import "../../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../../mui_extended/Pager/index.a7f87c96.js";
+import "../../../mui_extended/Tab/index.756fe693.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.9820bc7f.js";
-import "../../../areas/components/AreasAdmin/index.f011d49d.js";
+import "../../../areas/contexts/AreasContext/index.230d1584.js";
+import "../../../areas/components/AreasAdmin/index.8ab71eb9.js";
 import "zustand/shallow";
 import "../../../ScrollBar/index.d4410cb5.js";
-import "../../../areas/components/AreasViewer/index.51a52736.js";
+import "../../../areas/components/AreasViewer/index.933e506b.js";
 import "../../../LinearProgressIndeterminate/index.60dabc06.js";
 import "../../../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { u as useWindowToolsMF } from "../../../areas/hooks/useWindowToolsMF/index.b7afaf88.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.5abb6ac4.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.e70e8779.js";
 function ActionFormCancel() {
   const {
     getLabel

package/components/CommonActions/components/ActionFormIntro/{index.273b1b9f.js → index.bbc35e74.js}

@@ -2,7 +2,7 @@ import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { L as LoadingButton } from "../../../mui_extended/Button/index.40af964e.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.5abb6ac4.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.e70e8779.js";
 import { jsx } from "react/jsx-runtime";
 function ActionFormIntro(props) {
   const {

package/components/CommonActions/components/ActionIntro/{index.856df8ef.js → index.a9420126.js}

@@ -1,7 +1,7 @@
 import { useModuleDictionary } from "@m4l/core";
 import { B as Button } from "../../../mui_extended/Button/index.40af964e.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { u as useCommonActionsUtilityClasses } from "../Actions/index.5abb6ac4.js";
+import { u as useCommonActionsUtilityClasses } from "../Actions/index.e70e8779.js";
 import { jsx } from "react/jsx-runtime";
 const ACTIONINTRO_TEST_ID = "m4lactions";
 const ActionIntro = (props) => {

package/components/CommonActions/components/Actions/{index.5abb6ac4.js → index.e70e8779.js}

@@ -10,32 +10,32 @@ import "../../../mui_extended/Button/index.40af964e.js";
 import "clsx";
 import "react-hook-form";
 import "react";
-import "../../../../contexts/ModalContext/index.efc1135a.js";
+import "../../../../contexts/ModalContext/index.51da83de.js";
 import "../../../../react-draggable.7abb5d0a.js";
 import "../../../Resizeable/index.9a9c79a4.js";
 import "@m4l/graphics";
-import "../../../Icon/index.2414ff25.js";
-import "../../../modal/index.e9fece72.js";
+import "../../../Icon/index.d1402200.js";
+import "../../../modal/index.6f281ef8.js";
 import "@mui/lab";
 import "../../../mui_extended/Typography/index.443590d6.js";
 import "../../../Image/index.c18ebf5a.js";
-import "../../../mui_extended/IconButton/index.a318316e.js";
-import "../../../mui_extended/Accordion/index.42cef1c7.js";
+import "../../../mui_extended/IconButton/index.62aea582.js";
+import "../../../mui_extended/Accordion/index.46771196.js";
 import "../../../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../../../mui_extended/CheckBox.5f6c78b0.js";
+import "../../../mui_extended/CheckBox.38abccd8.js";
 import "../../../mui_extended/Badge/index.cad260fe.js";
-import "../../../mui_extended/MenuActions/index.f6bfdd40.js";
+import "../../../mui_extended/MenuActions/index.2493b1b1.js";
 import "../../../mui_extended/Popover/index.9f35d0eb.js";
-import "../../../mui_extended/Pager/index.da26e9d4.js";
-import "../../../mui_extended/Tab/index.0d5f96e6.js";
+import "../../../mui_extended/Pager/index.a7f87c96.js";
+import "../../../mui_extended/Tab/index.756fe693.js";
 import "../../../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.9820bc7f.js";
-import "../../../areas/components/AreasAdmin/index.f011d49d.js";
+import "../../../areas/contexts/AreasContext/index.230d1584.js";
+import "../../../areas/components/AreasAdmin/index.8ab71eb9.js";
 import "zustand/shallow";
 import "../../../ScrollBar/index.d4410cb5.js";
-import "../../../areas/components/AreasViewer/index.51a52736.js";
+import "../../../areas/components/AreasViewer/index.933e506b.js";
 import "../../../LinearProgressIndeterminate/index.60dabc06.js";
 import "../../../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";

package/components/DataGrid/{index.03ad08af.js → index.1d0a3dec.js}

@@ -1,5 +1,5 @@
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.4dc1c8ed.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.da26e9d4.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.42e804cf.js";
+import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.a7f87c96.js";
 import { styled } from "@mui/material/styles";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
 import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
@@ -8,16 +8,16 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.db54ec98.js";
+import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.a8fc9f6a.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.88ed58a5.js";
-import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.32de0803.js";
+import { g as getNameDataTestId } from "../../vendor.1af105d6.js";
+import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.b2f02bc4.js";
 import "@m4l/graphics";
-import "../Icon/index.2414ff25.js";
+import "../Icon/index.d1402200.js";
 import "clsx";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
-import { C as ConcatenatedFormatter } from "../formatters/index.d16d2331.js";
+import { C as ConcatenatedFormatter } from "../formatters/index.f9ad88b4.js";
 const DataGridRoot = styled("div")(({
   theme
 }) => ({
@@ -1001,14 +1001,15 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
   return rowsFinded;
 };
 export {
-  DataGrid as D,
+  DataGridRoot as D,
   useFilters as a,
   dictionary as b,
-  getDataGridRowsFromSet as c,
+  DataGrid as c,
   dataGridClasses as d,
-  columnBooleanFormatter as e,
-  columnDateFormatter as f,
+  getDataGridRowsFromSet as e,
+  columnBooleanFormatter as f,
   getDataGridComponentsDictionary as g,
-  columnConcatenatedValuesFormatter as h,
+  columnDateFormatter as h,
+  columnConcatenatedValuesFormatter as i,
   useDataGrid as u
 };