@etsoo/materialui 1.5.1 → 1.5.3

package/src/ShowDataComparison.tsx

@@ -1,14 +1,12 @@
 import { AuditLineChangesDto, IApp } from "@etsoo/appscript";
 import { NotificationMessageType } from "@etsoo/notificationbase";
 import { Utils } from "@etsoo/shared";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow
-} from "@mui/material";
 import { useRequiredAppContext } from "./app/ReactApp";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TableBody from "@mui/material/TableBody";
 
 /**
  * Check obj is instance of AuditLineChangesDto

package/src/Switch.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { FormControlLabel, FormControlLabelProps } from "@mui/material";
 import MuiCheckbox from "@mui/material/Checkbox";
 import MuiSwitch from "@mui/material/Switch";
+import FormControlLabel, {
+  FormControlLabelProps
+} from "@mui/material/FormControlLabel";
 
 /**
  * Switch props

package/src/SwitchAnt.tsx

@@ -1,7 +1,8 @@
-import { Stack, Typography } from "@mui/material";
-import Switch, { SwitchProps } from "@mui/material/Switch";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
+import Switch, { SwitchProps } from "@mui/material/Switch";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 
 /**
  * Ant style switch props

package/src/SwitchField.tsx

@@ -1,13 +1,10 @@
-import {
-  Box,
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  InputLabel
-} from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
 import { SwitchAnt } from "./SwitchAnt";
+import FormControl, { FormControlProps } from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Box from "@mui/material/Box";
+import FormHelperText from "@mui/material/FormHelperText";
 
 /**
  * SwitchField props

package/src/TabBox.tsx

@@ -1,5 +1,7 @@
 import { Utils } from "@etsoo/shared";
-import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
+import Box, { BoxProps } from "@mui/material/Box";
+import Tab, { TabProps } from "@mui/material/Tab";
+import Tabs, { TabsProps } from "@mui/material/Tabs";
 import React from "react";
 import { Link } from "react-router";
 

package/src/TableEx.tsx

@@ -10,23 +10,19 @@ import {
   GridSizeGet
 } from "@etsoo/react";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import {
-  Checkbox,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableCellProps,
-  TableContainer,
-  TableHead,
-  TablePagination,
-  TableProps,
-  TableRow,
-  TableSortLabel,
-  useTheme
-} from "@mui/material";
 import React from "react";
 import { DataGridRenderers } from "./DataGridRenderers";
+import Table, { TableProps } from "@mui/material/Table";
+import { useTheme } from "@mui/material/styles";
+import Paper from "@mui/material/Paper";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableCell, { TableCellProps } from "@mui/material/TableCell";
+import Checkbox from "@mui/material/Checkbox";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TableBody from "@mui/material/TableBody";
+import TablePagination from "@mui/material/TablePagination";
 
 /**
  * Extended table min width for width-unset column

package/src/TagList.tsx

@@ -1,9 +1,11 @@
-import { Autocomplete, AutocompleteProps, Checkbox, Chip } from "@mui/material";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete, { AutocompleteProps } from "@mui/material/Autocomplete";
+import Checkbox from "@mui/material/Checkbox";
+import Chip from "@mui/material/Chip";
 
 export type TagListProps = Omit<
   AutocompleteProps<string, true, false, true>,

package/src/TagListPro.tsx

@@ -1,10 +1,12 @@
-import { Autocomplete, AutocompleteProps, Checkbox, Chip } from "@mui/material";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { DataTypes, ListType2 } from "@etsoo/shared";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete, { AutocompleteProps } from "@mui/material/Autocomplete";
+import Checkbox from "@mui/material/Checkbox";
+import Chip from "@mui/material/Chip";
 
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,

package/src/TextFieldEx.tsx

@@ -1,15 +1,13 @@
 import React from "react";
-import {
-  IconButton,
-  InputAdornment,
-  TextField,
-  TextFieldProps
-} from "@mui/material";
 import { MUGlobal } from "./MUGlobal";
-import { Clear, Visibility } from "@mui/icons-material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import ClearIcon from "@mui/icons-material/Clear";
 import { Keyboard } from "@etsoo/shared";
 import { ReactUtils, useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
 import { useAppContext } from "./app/ReactApp";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
 
 /**
  * Extended text field props
@@ -191,12 +189,12 @@ export const TextFieldEx = React.forwardRef<
             onTouchEnd={touchEnd}
             title={showIt}
           >
-            <Visibility />
+            <VisibilityIcon />
           </IconButton>
         )}
         {showClear && (
           <IconButton onClick={clearClick} tabIndex={-1} title={clearLabel}>
-            <Clear />
+            <ClearIcon />
           </IconButton>
         )}
       </InputAdornment>

package/src/Tiplist.tsx

@@ -1,11 +1,13 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
 import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
-import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
 import React from "react";
 import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete, {
+  AutocompleteRenderInputParams
+} from "@mui/material/Autocomplete";
 
 /**
  * Tiplist props

package/src/TiplistPro.tsx

@@ -1,9 +1,9 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
 import { DataTypes, ListType2 } from "@etsoo/shared";
-import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React, { ChangeEventHandler } from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete, { AutocompleteProps } from "@mui/material/Autocomplete";
 
 /**
  * TiplistPro props

package/src/TooltipClick.tsx

@@ -1,5 +1,6 @@
 import { useDelayedExecutor } from "@etsoo/react";
-import { ClickAwayListener, Tooltip, TooltipProps } from "@mui/material";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
 import React from "react";
 
 /**

package/src/TwoFieldInput.tsx

@@ -1,9 +1,10 @@
-import { Input, InputAdornment } from "@mui/material";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
 import { useDimensions } from "@etsoo/react";
 import React from "react";
 import { DateUtils, DomUtils } from "@etsoo/shared";
 import { InputField, InputFieldProps } from "./InputField";
+import InputAdornment from "@mui/material/InputAdornment";
+import Input from "@mui/material/Input";
 
 type ValueType = string | number | Date | null | undefined;
 

package/src/UserAvatar.tsx

@@ -1,6 +1,6 @@
-import { Avatar } from "@mui/material";
 import { BusinessUtils } from "@etsoo/appscript";
 import { useAppContext } from "./app/ReactApp";
+import Avatar from "@mui/material/Avatar";
 
 /**
  * User avatar props

package/src/UserAvatarEditor.tsx

@@ -1,11 +1,3 @@
-import {
-  Button,
-  ButtonGroup,
-  IconButton,
-  Skeleton,
-  Slider,
-  Stack
-} from "@mui/material";
 import React from "react";
 import type AvatarEditor from "react-avatar-editor";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
@@ -18,6 +10,12 @@ import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
 import { ImageState } from "react-avatar-editor";
+import Stack from "@mui/material/Stack";
+import Skeleton from "@mui/material/Skeleton";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Slider from "@mui/material/Slider";
 
 const defaultSize = 300;
 

package/src/ViewContainer.tsx

@@ -1,4 +1,3 @@
-import { Breakpoint, Grid2, Grid2Props, Typography } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
 import { DataTypes } from "@etsoo/shared";
@@ -6,6 +5,9 @@ import { useCurrentBreakpoint } from "./useCurrentBreakpoint";
 import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
 import { GridDataFormat } from "./GridDataFormat";
 import { ReactAppType, useRequiredAppContext } from "./app/ReactApp";
+import Grid, { GridProps } from "@mui/material/Grid";
+import { Breakpoint } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 
 function formatItemData(
   app: ReactAppType,
@@ -14,6 +16,7 @@ function formatItemData(
   if (fieldData == null) return undefined;
   if (typeof fieldData === "string") return fieldData;
   if (fieldData instanceof Date) return app.formatDate(fieldData, "d");
+  if (Array.isArray(fieldData)) return fieldData.join(", ");
   return `${fieldData}`;
 }
 
@@ -37,11 +40,11 @@ function getItemField<T extends object>(
   app: ReactAppType,
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, Grid2Props, ViewPageItemSize] {
+): [React.ReactNode, React.ReactNode, GridProps, ViewPageItemSize] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
-    gridProps: Grid2Props = {},
+    gridProps: GridProps = {},
     size: ViewPageItemSize;
 
   if (Array.isArray(field)) {
@@ -173,7 +176,7 @@ export type ViewPageRowType =
 /**
  * View page grid item properties
  */
-export type ViewPageGridItemProps = Grid2Props & {
+export type ViewPageGridItemProps = GridProps & {
   data: React.ReactNode;
   label?: React.ReactNode;
   singleRow?: ViewPageRowType;
@@ -198,7 +201,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Layout
   return (
-    <Grid2 {...gridProps} {...options}>
+    <Grid {...gridProps} {...options}>
       {label != null && (
         <Typography variant="caption" component="div">
           {label}:
@@ -209,14 +212,14 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
       ) : (
         <Typography variant="subtitle2">{data}</Typography>
       )}
-    </Grid2>
+    </Grid>
   );
 }
 
 /**
  * View page display field
  */
-export interface ViewPageField<T extends object> extends Grid2Props {
+export interface ViewPageField<T extends object> extends GridProps {
   /**
    * Data field
    */
@@ -287,7 +290,7 @@ export type ViewContainerProps<T extends DataTypes.StringRecord> = {
   /**
    * Left container properties
    */
-  leftContainerProps?: Omit<Grid2Props, "size"> & { size?: ViewPageItemSize };
+  leftContainerProps?: Omit<GridProps, "size"> & { size?: ViewPageItemSize };
 
   /**
    * Refresh function
@@ -399,7 +402,7 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
 
   // Layout
   return (
-    <Grid2
+    <Grid
       container
       justifyContent="left"
       className="ET-ViewContainer"
@@ -408,7 +411,7 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
     >
       {leftContainer && (leftResult = leftContainer(data)) != null && (
         <React.Fragment>
-          <Grid2
+          <Grid
             container
             className="ET-ViewPage-LeftContainer"
             spacing={spacing}
@@ -416,8 +419,8 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
             {...leftContainerPropsRest}
           >
             {leftResult}
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             container
             className="ET-ViewPage-LeftOthers"
             spacing={spacing}
@@ -427,10 +430,10 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
               data,
               leftContainerLines * (12 - getItemSize(bp, size))
             )}
-          </Grid2>
+          </Grid>
         </React.Fragment>
       )}
       {createFields(data)}
-    </Grid2>
+    </Grid>
   );
 }

package/src/custom/CustomFieldUtils.tsx

@@ -5,8 +5,6 @@ import {
 } from "@etsoo/appscript";
 import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
 import { IdType, ListType2 } from "@etsoo/shared";
-import { Grid2, GridSize, Typography } from "@mui/material";
-import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
 import { FieldCheckbox } from "./FieldCheckbox";
 import { FieldAmountLabel } from "./FieldAmountLabel";
@@ -22,6 +20,8 @@ import { FieldRadio } from "./FieldRadio";
 import { FieldSelect } from "./FieldSelect";
 import { FieldSwitch } from "./FieldSwitch";
 import { ResponsiveStyleValue } from "../ResponsiveStyleValue";
+import Grid, { GridSize } from "@mui/material/Grid";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
 /**
  * Custom field utilities
@@ -83,13 +83,13 @@ export namespace CustomFieldUtils {
       const creator = customFieldCreators[field.type];
       if (creator == null) {
         return (
-          <Grid2
+          <Grid
             key={index}
             size={transformSpace(field.space)}
             {...field.gridItemProps}
           >
             {`Type ${field.type} is not supported currently`}
-          </Grid2>
+          </Grid>
         );
       }
 
@@ -115,13 +115,13 @@ export namespace CustomFieldUtils {
       }
 
       return (
-        <Grid2
+        <Grid
           key={name ?? index}
           size={transformSpace(field.space)}
           {...field.gridItemProps}
         >
           {ui}
-        </Grid2>
+        </Grid>
       );
     });
   }

package/src/custom/CustomFieldViewer.tsx

@@ -1,9 +1,10 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { Grid2, Grid2Props, Typography, TypographyProps } from "@mui/material";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { MUGlobal } from "../MUGlobal";
 import { VBox } from "../FlexBox";
 import { DataTypes, Utils } from "@etsoo/shared";
+import Grid, { GridProps } from "@mui/material/Grid";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
 /**
  * Custom field viewer props
@@ -20,7 +21,7 @@ export type CustomFieldViewerProps = {
    * Grid props
    * 网格属性
    */
-  gridProps?: Grid2Props;
+  gridProps?: GridProps;
 
   /**
    * JSON data
@@ -96,7 +97,7 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
   }
 
   return (
-    <Grid2
+    <Grid
       container
       justifyContent="left"
       spacing={spacing}
@@ -116,7 +117,7 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
         const value = Utils.getNestedValue(data, name);
 
         return (
-          <Grid2
+          <Grid
             key={name ?? index}
             size={CustomFieldUtils.transformSpace(field.space)}
             {...field.gridItemProps}
@@ -129,9 +130,9 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
                 {valueLabelFormatter(value, field)}
               </Typography>
             </VBox>
-          </Grid2>
+          </Grid>
         );
       })}
-    </Grid2>
+    </Grid>
   );
 }

package/src/custom/CustomFieldWindow.tsx

@@ -1,11 +1,12 @@
 import { CustomFieldData } from "@etsoo/appscript";
 import { CustomFieldReactCollection } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { Grid2, Grid2Props, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { useRequiredAppContext } from "../app/ReactApp";
+import Grid, { GridProps } from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
 
 function calculateKeys(data: Record<string, unknown>) {
   let count = 0;
@@ -64,7 +65,7 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
    * Grid props
    * 网格属性
    */
-  gridProps?: Grid2Props;
+  gridProps?: GridProps;
 
   /**
    * JSON data
@@ -153,7 +154,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
               fullScreen: app.smDown,
               inputs: (
                 <Stack marginTop={1.5}>
-                  <Grid2
+                  <Grid
                     container
                     justifyContent="left"
                     spacing={spacing}
@@ -175,7 +176,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
                         Utils.setNestedValue(data, name, value);
                       }
                     )}
-                  </Grid2>
+                  </Grid>
                 </Stack>
               )
             }

package/src/custom/FieldAmountLabel.tsx

@@ -1,6 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
 import { NumberUtils } from "@etsoo/shared";
-import { FormHelperText, Typography } from "@mui/material";
+import FormHelperText from "@mui/material/FormHelperText";
+import Typography from "@mui/material/Typography";
 import React from "react";
 
 /**

package/src/custom/FieldCheckbox.tsx

@@ -1,8 +1,8 @@
 import { ICustomFieldReact } from "@etsoo/react";
 import { IdType } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { OptionGroup } from "../OptionGroup";
+import Typography from "@mui/material/Typography";
 
 /**
  * Checkbox (multiple values) field creator

package/src/custom/FieldCombobox.tsx

@@ -1,8 +1,8 @@
 import { IdType } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { ComboBoxMultiple } from "../ComboBoxMultiple";
 import { ICustomFieldReact } from "@etsoo/react";
+import Typography from "@mui/material/Typography";
 
 /**
  * Combobox (multiple values) field creator

package/src/custom/FieldDateInput.tsx

@@ -1,8 +1,8 @@
 import { ICustomFieldReact } from "@etsoo/react";
 import { DateUtils } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 
 /**
  * Date input field creator

package/src/custom/FieldDivider.tsx

@@ -1,7 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
-import { Divider } from "@mui/material";
 import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import Divider from "@mui/material/Divider";
 
 /**
  * Divider field creator

package/src/custom/FieldInput.tsx

@@ -1,7 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 
 /**
  * Input field creator

package/src/custom/FieldJson.tsx

@@ -1,7 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 
 function parseJson(value: string | undefined | null) {
   if (value) {

package/src/custom/FieldNumberInput.tsx

@@ -1,8 +1,8 @@
 import { ICustomFieldReact } from "@etsoo/react";
-import { Typography } from "@mui/material";
 import React from "react";
 import { NumberInputField } from "../NumberInputField";
 import { NumberUtils } from "@etsoo/shared";
+import Typography from "@mui/material/Typography";
 
 /**
  * Number input field creator

package/src/custom/FieldRadio.tsx

@@ -1,8 +1,8 @@
 import { ICustomFieldReact } from "@etsoo/react";
 import { IdType } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { OptionGroup } from "../OptionGroup";
+import Typography from "@mui/material/Typography";
 
 /**
  * Radio (single value) field creator

package/src/custom/FieldSelect.tsx

@@ -1,8 +1,8 @@
 import { IdType } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { ICustomFieldReact } from "@etsoo/react";
 import { SelectEx } from "../SelectEx";
+import Typography from "@mui/material/Typography";
 
 /**
  * Select (single value) field creator

package/src/custom/FieldSwitch.tsx

@@ -1,7 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
 import React from "react";
 import { SwitchAnt } from "../SwitchAnt";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 
 /**
  * Input field creator

package/src/custom/FieldTexarea.tsx

@@ -1,7 +1,7 @@
 import { ICustomFieldReact } from "@etsoo/react";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 
 /**
  * Textarea field creator