@etsoo/materialui 1.5.2 → 1.5.3

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,
@@ -38,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)) {
@@ -174,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;
@@ -199,7 +201,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Layout
   return (
-    <Grid2 {...gridProps} {...options}>
+    <Grid {...gridProps} {...options}>
       {label != null && (
         <Typography variant="caption" component="div">
           {label}:
@@ -210,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
    */
@@ -288,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
@@ -400,7 +402,7 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
 
   // Layout
   return (
-    <Grid2
+    <Grid
       container
       justifyContent="left"
       className="ET-ViewContainer"
@@ -409,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}
@@ -417,8 +419,8 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
             {...leftContainerPropsRest}
           >
             {leftResult}
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             container
             className="ET-ViewPage-LeftOthers"
             spacing={spacing}
@@ -428,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

package/src/pages/CommonPage.tsx

@@ -3,7 +3,6 @@ import { FabBox } from "../FabBox";
 import { ScrollTopFab } from "../ScrollTopFab";
 import { MUGlobal } from "../MUGlobal";
 import { MoreFab } from "../MoreFab";
-import { Container, ContainerProps, Fab, Theme, useTheme } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
@@ -11,6 +10,9 @@ import type { CustomFabSize } from "../CustomFabProps";
 import type { IStateUpdate, ListItemReact } from "@etsoo/react";
 import type { UserKey } from "@etsoo/appscript";
 import { useAppContext } from "../app/ReactApp";
+import Container, { ContainerProps } from "@mui/material/Container";
+import { Theme, useTheme } from "@mui/material/styles";
+import Fab from "@mui/material/Fab";
 
 /**
  * Common page props

package/src/pages/DataGridPage.tsx

@@ -7,7 +7,6 @@ import {
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
 import { MUGlobal } from "../MUGlobal";
@@ -15,6 +14,8 @@ import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import type { DataGridPageProps } from "./DataGridPageProps";
 import { GridUtils } from "../GridUtils";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 
 interface LocalStates<T> {
   data?: FormData;

package/src/pages/DrawerHeader.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material";
+import { styled } from "@mui/material/styles";
 
 /**
  * Common drawer header

package/src/pages/EditPage.tsx

@@ -1,4 +1,3 @@
-import { Button, Grid2 } from "@mui/material";
 import React, { FormEventHandler } from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage, CommonPageProps } from "./CommonPage";
@@ -8,6 +7,8 @@ import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
 
 /**
  * Add / Edit page props
@@ -86,15 +87,10 @@ export function EditPage(props: EditPageProps) {
       )}
       {topPart}
       <form onSubmit={onSubmit}>
-        <Grid2
-          container
-          justifyContent="left"
-          spacing={paddings}
-          paddingTop={1}
-        >
+        <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
           {children}
-        </Grid2>
-        <Grid2
+        </Grid>
+        <Grid
           container
           position="sticky"
           display="flex"
@@ -126,7 +122,7 @@ export function EditPage(props: EditPageProps) {
             {labels.save}
           </Button>
           {supportBack && <BackButton title={labels.back} />}
-        </Grid2>
+        </Grid>
       </form>
       {bottomPart}
     </CommonPage>

package/src/pages/FixedListPage.tsx

@@ -7,7 +7,6 @@ import {
   useCombinedRefs,
   useDimensions
 } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
@@ -15,6 +14,8 @@ import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { GridUtils } from "../GridUtils";
 import type { ListPageProps } from "./ListPage";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 
 /**
  * Fixed height list page

package/src/pages/LeftDrawer.tsx

@@ -1,15 +1,13 @@
-import {
-  Avatar,
-  Divider,
-  Drawer,
-  IconButton,
-  List,
-  Typography
-} from "@mui/material";
 import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { useAppContext } from "../app/ReactApp";
+import Drawer from "@mui/material/Drawer";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
 
 /**
  * Left drawer props