@etsoo/materialui 1.5.1 → 1.5.3

package/src/IntInputField.tsx

@@ -1,9 +1,11 @@
-import { Box, BoxProps, IconButton, InputAdornment } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import React from "react";
 import { NumberUtils } from "@etsoo/shared";
 import { InputField, InputFieldProps } from "./InputField";
+import Box, { BoxProps } from "@mui/material/Box";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
 
 /**
  * Integer input field props

package/src/ItemList.tsx

@@ -1,19 +1,17 @@
 import React from "react";
-import {
-  Dialog,
-  DialogTitle,
-  List,
-  ListItemText,
-  DialogContent,
-  Button,
-  ListItemButton
-} from "@mui/material";
 import {
   DataTypes,
   IdDefaultType,
   LabelDefaultType,
   ListType
 } from "@etsoo/shared";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
 
 /**
  * Item list properties

package/src/LineChart.tsx

@@ -1,7 +1,7 @@
-import { LinearProgress } from "@mui/material";
 import React from "react";
 import type { ChartData, LineControllerChartOptions } from "chart.js" with { "resolution-mode": "import" };
 import type { Line } from "react-chartjs-2" with { "resolution-mode": "import" };
+import LinearProgress from "@mui/material/LinearProgress";
 
 /**
  * Line chart

package/src/ListChooser.tsx

@@ -1,17 +1,15 @@
 import { useDelayedExecutor } from "@etsoo/react";
 import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemButtonProps,
-  ListItemText,
-  ListProps,
-  TextField
-} from "@mui/material";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { VBox } from "./FlexBox";
+import ListItemButton, {
+  ListItemButtonProps
+} from "@mui/material/ListItemButton";
+import List, { ListProps } from "@mui/material/List";
+import TextField from "@mui/material/TextField";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
 
 type QueryData = {
   title?: string;
@@ -130,7 +128,7 @@ export function ListChooser<
         label={title}
         fullWidth
         variant="standard"
-        inputProps={{ maxLength: 128 }}
+        slotProps={{ htmlInput: { maxLength: 128 } }}
         onChange={(event) => {
           Reflect.set(rq, "title", event.target.value);
           delayed.call();

package/src/ListItemRightIcon.tsx

@@ -1,4 +1,5 @@
-import { ListItemIcon, styled } from "@mui/material";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import { styled } from "@mui/material/styles";
 
 /**
  * List item right icon component

package/src/ListMoreDisplay.tsx

@@ -1,11 +1,3 @@
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardProps,
-  CircularProgress
-} from "@mui/material";
 import React from "react";
 import {
   GridData,
@@ -16,6 +8,11 @@ import {
 } from "@etsoo/react";
 import { LoadingButton } from "./LoadingButton";
 import { useAppContext } from "./app/ReactApp";
+import Card, { CardProps } from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CircularProgress from "@mui/material/CircularProgress";
+import CardActions from "@mui/material/CardActions";
 
 /**
  * ListMoreDisplay props

package/src/LoadingButton.tsx

@@ -1,9 +1,7 @@
-import {
-  Button,
-  ButtonProps,
-  CircularProgress,
+import Button, { ButtonProps } from "@mui/material/Button";
+import CircularProgress, {
   CircularProgressProps
-} from "@mui/material";
+} from "@mui/material/CircularProgress";
 import React from "react";
 
 /**

package/src/MUGlobal.ts

@@ -1,5 +1,6 @@
 import { NumberUtils } from "@etsoo/shared";
-import { Breakpoint, ListItemButtonProps, Theme } from "@mui/material";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { Breakpoint, Theme } from "@mui/material/styles";
 import { Link } from "react-router";
 
 /**

package/src/MaskInput.tsx

@@ -1,6 +1,6 @@
-import { TextField, TextFieldProps } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
 type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" }}).useIMask;
 type RIOpts = Parameters<ReactIMask>[0];

package/src/MenuButton.tsx

@@ -1,5 +1,7 @@
 import { DataTypes } from "@etsoo/shared";
-import { Button, ButtonProps, Menu, MenuItem, MenuProps } from "@mui/material";
+import Button, { ButtonProps } from "@mui/material/Button";
+import Menu, { MenuProps } from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import React from "react";
 
 export type MenuButtonProps<T extends DataTypes.IdItem> = Omit<

package/src/MobileListItemRenderer.tsx

@@ -1,8 +1,11 @@
 import { ListItemReact } from "@etsoo/react";
-import { Card, CardContent, CardHeader, LinearProgress } from "@mui/material";
 import React from "react";
 import { MoreFab } from "./MoreFab";
 import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
+import LinearProgress from "@mui/material/LinearProgress";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
 
 /**
  * Default mobile list item renderer
@@ -58,9 +61,11 @@ export function MobileListItemRenderer<T>(
           )
         }
         title={title}
-        titleTypographyProps={{ variant: "body2" }}
         subheader={subheader}
-        subheaderTypographyProps={{ variant: "caption" }}
+        slotProps={{
+          title: { variant: "body2" },
+          subheader: { variant: "caption" }
+        }}
       />
       <CardContent
         sx={{

package/src/MoreFab.tsx

@@ -1,19 +1,17 @@
 import { CustomFabProps } from "./CustomFabProps";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import React from "react";
-import {
-  Divider,
-  Fab,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  PaperProps,
-  PopoverOrigin
-} from "@mui/material";
 import { Link } from "react-router";
 import { ListItemReact } from "@etsoo/react";
+import { PopoverOrigin } from "@mui/material/Popover";
+import { PaperProps } from "@mui/material/Paper";
+import IconButton from "@mui/material/IconButton";
+import Fab from "@mui/material/Fab";
+import Menu from "@mui/material/Menu";
+import Divider from "@mui/material/Divider";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
 
 /**
  * More fab props

package/src/NotifierMU.tsx

@@ -5,34 +5,6 @@ import {
   NotificationType
 } from "@etsoo/notificationbase";
 import { DataTypes, DomUtils } from "@etsoo/shared";
-import {
-  Alert,
-  AlertColor,
-  AlertProps,
-  AlertTitle,
-  Backdrop,
-  Box,
-  Button,
-  CircularProgress,
-  CircularProgressProps,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  DialogTitleProps,
-  Fade,
-  IconButton,
-  Popover,
-  Slider,
-  Snackbar,
-  styled,
-  Switch,
-  TextField,
-  Typography
-} from "@mui/material";
-import { Error, Info, Help, Warning, Done } from "@mui/icons-material";
-import CloseIcon from "@mui/icons-material/Close";
 import React from "react";
 import {
   INotificationBaseReact,
@@ -43,6 +15,34 @@ import {
 import { DraggablePaperComponent } from "./DraggablePaperComponent";
 import { LoadingButton, LoadingButtonProps } from "./LoadingButton";
 import { Labels } from "./app/Labels";
+import DialogTitle, { DialogTitleProps } from "@mui/material/DialogTitle";
+import { styled } from "@mui/material/styles";
+import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText";
+import Fade from "@mui/material/Fade";
+import Alert, { AlertColor, AlertProps } from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import Switch from "@mui/material/Switch";
+import Slider from "@mui/material/Slider";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Popover from "@mui/material/Popover";
+import CircularProgress, {
+  CircularProgressProps
+} from "@mui/material/CircularProgress";
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Snackbar from "@mui/material/Snackbar";
+import CloseIcon from "@mui/icons-material/Close";
+import DoneIcon from "@mui/icons-material/Done";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningIcon from "@mui/icons-material/Warning";
+import ErrorIcon from "@mui/icons-material/Error";
+import HelpIcon from "@mui/icons-material/Help";
 
 type StyledDialogTitleProps = DialogTitleProps & {
   draggable?: boolean;
@@ -94,16 +94,16 @@ export class NotificationMU extends NotificationReact {
     let title = this.title;
     let icon: React.ReactNode;
     if (this.type === NotificationMessageType.Success) {
-      icon = <Done color="primary" />;
+      icon = <DoneIcon color="primary" />;
       title ??= labels.success;
     } else if (this.type === NotificationMessageType.Info) {
-      icon = <Info />;
+      icon = <InfoIcon />;
       title ??= labels.info;
     } else if (this.type === NotificationMessageType.Warning) {
-      icon = <Warning color="secondary" />;
+      icon = <WarningIcon color="secondary" />;
       title ??= labels.warning;
     } else {
-      icon = <Error color="error" />;
+      icon = <ErrorIcon color="error" />;
       title ??= labels.alertTitle;
     }
 
@@ -223,7 +223,7 @@ export class NotificationMU extends NotificationReact {
             draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
           }
         >
-          <Help color="action" />
+          <HelpIcon color="action" />
           <span className="dialogTitle">{title}</span>
           {closable && (
             <IconButton
@@ -462,7 +462,7 @@ export class NotificationMU extends NotificationReact {
               draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
             }
           >
-            <Info color="primary" />
+            <InfoIcon color="primary" />
             <span className="dialogTitle">{title}</span>
             {closable && (
               <IconButton

package/src/NotifierPopupProps.ts

@@ -1,4 +1,4 @@
-import { PopoverProps } from "@mui/material";
+import { PopoverProps } from "@mui/material/Popover";
 
 /**
  * Notifier Popup pros

package/src/NumberInputField.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { Currency } from "@etsoo/appscript";
-import { InputAdornment } from "@mui/material";
 import { NumberUtils } from "@etsoo/shared";
+import InputAdornment from "@mui/material/InputAdornment";
 
 /**
  * Number input field properties
@@ -63,31 +63,32 @@ export function NumberInputField(props: NumberInputFieldProps) {
       : undefined,
     endSymbol,
     max = 9999999,
-    InputProps,
+    slotProps = {},
     ...rest
   } = props;
 
   return (
     <InputField
       type="number"
-      inputProps={{
-        min,
-        step,
-        max,
-        style: inputStyle,
-        inputMode: "numeric"
-      }}
-      InputProps={{
-        startAdornment: symbol ? (
-          <React.Fragment>
-            <InputAdornment position="start">{symbol}</InputAdornment>
-          </React.Fragment>
-        ) : undefined,
-        endAdornment: endSymbol ? (
-          <InputAdornment position="end">{endSymbol}</InputAdornment>
-        ) : undefined,
-        ...InputProps
-      }}
+      slotProps={Object.assign(slotProps, {
+        input: {
+          startAdornment: symbol ? (
+            <React.Fragment>
+              <InputAdornment position="start">{symbol}</InputAdornment>
+            </React.Fragment>
+          ) : undefined,
+          endAdornment: endSymbol ? (
+            <InputAdornment position="end">{endSymbol}</InputAdornment>
+          ) : undefined
+        },
+        htmlInput: {
+          min,
+          step,
+          max,
+          style: inputStyle,
+          inputMode: "numeric"
+        }
+      })}
       {...rest}
     />
   );

package/src/OptionGroup.tsx

@@ -5,19 +5,16 @@ import {
   ListType,
   Utils
 } from "@etsoo/shared";
-import {
-  Box,
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormControlProps,
-  FormGroup,
-  FormHelperText,
-  InputLabel,
-  Radio,
-  RadioGroup
-} from "@mui/material";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import FormControl, { FormControlProps } from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
 import NotchedOutline from "@mui/material/OutlinedInput";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
 import React from "react";
 
 /**

package/src/OptionGroupFlag.tsx

@@ -5,16 +5,13 @@ import {
   ListType,
   Utils
 } from "@etsoo/shared";
-import {
-  Box,
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormControlProps,
-  FormGroup,
-  FormHelperText,
-  InputLabel
-} from "@mui/material";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import FormControl, { FormControlProps } from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
 

package/src/PercentCircularProgress.tsx

@@ -1,11 +1,8 @@
-import {
-  Box,
-  CircularProgress,
-  CircularProgressProps,
-  Typography,
-  TypographyProps
-} from "@mui/material";
-import React from "react";
+import Box from "@mui/material/Box";
+import CircularProgress, {
+  CircularProgressProps
+} from "@mui/material/CircularProgress";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
 export type PercentCircularProgressProps = CircularProgressProps & {
   value: number;

package/src/PercentLinearProgress.tsx

@@ -1,11 +1,8 @@
-import {
-  Box,
-  LinearProgress,
-  LinearProgressProps,
-  Typography,
-  TypographyProps
-} from "@mui/material";
-import React from "react";
+import Box from "@mui/material/Box";
+import LinearProgress, {
+  LinearProgressProps
+} from "@mui/material/LinearProgress";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
 export type PercentLinearProgressProps = LinearProgressProps & {
   value: number;

package/src/ProgressCount.tsx

@@ -1,9 +1,7 @@
-import {
-  Box,
-  CircularProgress,
-  LinearProgress,
-  Typography
-} from "@mui/material";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import LinearProgress from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
 import React from "react";
 
 /**

package/src/QuickList.tsx

@@ -1,18 +1,16 @@
 import { DataTypes, ListType2 } from "@etsoo/shared";
-import {
-  LinearProgress,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemButtonProps,
-  ListItemProps,
-  StackProps,
-  Typography
-} from "@mui/material";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { VBox } from "./FlexBox";
 import { useAppContext } from "./app/ReactApp";
+import { StackProps } from "@mui/material/Stack";
+import ListItemButton, {
+  ListItemButtonProps
+} from "@mui/material/ListItemButton";
+import ListItem, { ListItemProps } from "@mui/material/ListItem";
+import LinearProgress from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
 
 /**
  * Quick list props

package/src/ResponsibleContainer.tsx

@@ -1,4 +1,3 @@
-import { Box, Stack, SxProps, Theme, useMediaQuery } from "@mui/material";
 import React from "react";
 import {
   GridOnScrollProps,
@@ -29,6 +28,10 @@ import {
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
 import { GridUtils } from "./GridUtils";
+import { SxProps, Theme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 
 /**
  * ResponsibleContainer props

package/src/ResponsiveStyleValue.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from "@mui/material";
+import { Breakpoint } from "@mui/material/styles";
 
 /**
  * Responsive style value

package/src/ScrollTopFab.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { Fab, useScrollTrigger, Zoom } from "@mui/material";
 import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
 import { CustomFabProps } from "./CustomFabProps";
+import useScrollTrigger from "@mui/material/useScrollTrigger";
+import Zoom from "@mui/material/Zoom";
+import Fab from "@mui/material/Fab";
 
 /**
  * Scroll to top fab

package/src/ScrollerListEx.tsx

@@ -1,10 +1,10 @@
 import { css } from "@emotion/css";
 import { ScrollerList, ScrollerListProps } from "@etsoo/react";
 import { DataTypes, Utils } from "@etsoo/shared";
-import { useTheme } from "@mui/material";
 import React from "react";
 import { ListChildComponentProps } from "react-window";
 import { MouseEventWithDataHandler, MUGlobal } from "./MUGlobal";
+import { useTheme } from "@mui/material/styles";
 
 // Scroll bar size
 const scrollbarSize = 16;

package/src/SearchBar.tsx

@@ -1,16 +1,13 @@
-import {
-  Button,
-  Container,
-  Drawer,
-  IconButton,
-  Stack,
-  Toolbar
-} from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { DomUtils, NumberUtils } from "@etsoo/shared";
 import { ReactUtils, useDelayedExecutor, useDimensions } from "@etsoo/react";
 import { Labels } from "./app/Labels";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import Button from "@mui/material/Button";
+import Drawer from "@mui/material/Drawer";
+import Toolbar from "@mui/material/Toolbar";
 
 /**
  * Search bar props

package/src/SearchField.tsx

@@ -1,7 +1,7 @@
 import { useDelayedExecutor } from "@etsoo/react";
-import { TextField, TextFieldProps } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
 /**
  * Search field props

package/src/SearchOptionGroup.tsx

@@ -4,7 +4,6 @@ import {
   LabelDefaultType,
   ListType
 } from "@etsoo/shared";
-import React from "react";
 import { MUGlobal } from "./MUGlobal";
 import { OptionGroup, OptionGroupProps } from "./OptionGroup";
 

package/src/SelectEx.tsx

@@ -1,21 +1,6 @@
-import {
-  Checkbox,
-  FormControl,
-  FormHelperText,
-  IconButton,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  OutlinedInput,
-  Select,
-  SelectProps,
-  SelectVariants,
-  Stack
-} from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
 import { ListItemRightIcon } from "./ListItemRightIcon";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import {
   ArrayUtils,
   DataTypes,
@@ -25,6 +10,17 @@ import {
   Utils
 } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
+import Select, { SelectProps, SelectVariants } from "@mui/material/Select";
+import Stack from "@mui/material/Stack";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import MenuItem from "@mui/material/MenuItem";
+import Checkbox from "@mui/material/Checkbox";
+import ListItemText from "@mui/material/ListItemText";
+import IconButton from "@mui/material/IconButton";
+import FormHelperText from "@mui/material/FormHelperText";
+import RefreshIcon from "@mui/icons-material/Refresh";
 
 /**
  * Extended select component props