@etsoo/materialui 1.5.1 → 1.5.3

package/src/AddresSelector.tsx

@@ -5,13 +5,14 @@ import {
   AddressState,
   IApiPayload
 } from "@etsoo/appscript";
-import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 import { RegionsRQ } from "./RegionsRQ";
 import { useAppContext } from "./app/ReactApp";
+import Grid, { GridSize } from "@mui/material/Grid";
+import FormLabel from "@mui/material/FormLabel";
 
 /**
  * Address field
@@ -317,17 +318,17 @@ export function AddressSelector(props: AddressSelectorProps) {
   return (
     <React.Fragment>
       {label && (
-        <Grid2 size={{ xs: 12 }}>
+        <Grid size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid2>
+        </Grid>
       )}
       {!hideRegion && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <Tiplist<AddressRegionDb>
             label={regionLabel}
             name={AddressField.Region}
@@ -352,9 +353,9 @@ export function AddressSelector(props: AddressSelectorProps) {
               handleChange([AddressField.Region, value])
             }
           />
-        </Grid2>
+        </Grid>
       )}
-      <Grid2 size={breakPoints}>
+      <Grid size={breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -369,8 +370,8 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.State, value])
           }
         />
-      </Grid2>
-      <Grid2 size={breakPoints}>
+      </Grid>
+      <Grid size={breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -380,8 +381,8 @@ export function AddressSelector(props: AddressSelectorProps) {
           options={cities}
           onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
-      </Grid2>
-      <Grid2 size={breakPoints}>
+      </Grid>
+      <Grid size={breakPoints}>
         <ComboBox<AddressDistrict>
           name={AddressField.District}
           label={districtLabel}
@@ -393,7 +394,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.District, value])
           }
         />
-      </Grid2>
+      </Grid>
     </React.Fragment>
   );
 }

package/src/AuditDisplay.tsx

@@ -1,10 +1,13 @@
 import { Utils } from "@etsoo/shared";
-import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
 import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 import { AuditLineDto } from "@etsoo/appscript";
 import { useAppContext } from "./app/ReactApp";
+import { Theme, useTheme } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
 
 /**
  * Audit display props

package/src/AutocompleteExtendedProps.ts

@@ -1,5 +1,5 @@
 import { DataTypes } from "@etsoo/shared";
-import { AutocompleteProps } from "@mui/material";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 import { ChangeEventHandler } from "react";
 
 /**

package/src/BackButton.tsx

@@ -1,5 +1,6 @@
-import { IconButton, IconButtonProps, useTheme } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 import { useNavigate } from "react-router";
 

package/src/BridgeCloseButton.tsx

@@ -1,8 +1,9 @@
 import { BridgeUtils, IBridgeHost } from "@etsoo/appscript";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, BoxProps, IconButton, IconButtonProps } from "@mui/material";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import Box, { BoxProps } from "@mui/material/Box";
 
 /**
  * Bridge close button props

package/src/ButtonLink.tsx

@@ -1,6 +1,6 @@
-import { Button, ButtonProps } from "@mui/material";
-import React from "react";
-import { useNavigate } from "react-router";
+import Button, { ButtonProps } from "@mui/material/Button";
+import { useNavigate } from "react-router-dom";
+
 /**
  * ButtonLink props
  */

package/src/ButtonPopover.tsx

@@ -1,4 +1,4 @@
-import { Popover, PopoverOrigin } from "@mui/material";
+import Popover, { PopoverOrigin } from "@mui/material/Popover";
 import React from "react";
 
 /**

package/src/ComboBox.tsx

@@ -5,20 +5,19 @@ import {
   LabelDefaultType,
   ListType
 } from "@etsoo/shared";
-import {
-  Autocomplete,
-  AutocompleteRenderInputParams,
-  IconButton,
-  Stack
-} from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
-import AddIcon from "@mui/icons-material/Add";
 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";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import AddIcon from "@mui/icons-material/Add";
 
 /**
  * ComboBox props

package/src/ComboBoxMultiple.tsx

@@ -5,21 +5,19 @@ import {
   LabelDefaultType,
   ListType
 } from "@etsoo/shared";
-import {
-  Autocomplete,
-  AutocompleteRenderInputParams,
-  Checkbox
-} from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
-
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Checkbox from "@mui/material/Checkbox";
+import Autocomplete, {
+  AutocompleteRenderInputParams
+} from "@mui/material/Autocomplete";
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;

package/src/ComboBoxPro.tsx

@@ -1,8 +1,8 @@
-import { Autocomplete, AutocompleteProps } from "@mui/material";
 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";
 
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,

package/src/CountdownButton.tsx

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

package/src/CultureDataTable.tsx

@@ -1,8 +1,8 @@
 import { DataTable, DataTableProps } from "./DataTable";
 import React from "react";
 import { ListType1 } from "@etsoo/shared";
-import { GridRenderCellParams } from "@mui/x-data-grid";
 import { useAppContext } from "./app/ReactApp";
+import { GridRenderCellParams } from "@mui/x-data-grid/models/params/gridCellParams";
 
 /**
  * Culture table props

package/src/DataGridEx.tsx

@@ -16,17 +16,14 @@ import {
   useCombinedRefs
 } from "@etsoo/react";
 import { DataTypes, Utils } from "@etsoo/shared";
-import {
-  Box,
-  BoxProps,
-  Checkbox,
-  Paper,
-  TableSortLabel,
-  useTheme
-} from "@mui/material";
 import React from "react";
 import { DataGridRenderers } from "./DataGridRenderers";
 import { MouseEventWithDataHandler } from "./MUGlobal";
+import { useTheme } from "@mui/material/styles";
+import Box, { BoxProps } from "@mui/material/Box";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Paper from "@mui/material/Paper";
 
 /**
  * Footer item renderer props

package/src/DataGridRenderers.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { CircularProgress } from "@mui/material";
 import { DateUtils, NumberUtils } from "@etsoo/shared";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import { DataGridExFooterItemRendererProps } from "./DataGridEx";
 import { DateText } from "./texts/DateText";
 import { GridCellRendererProps, GridDataType } from "@etsoo/react";
+import CircularProgress from "@mui/material/CircularProgress";
 
 /**
  * Data grid renderers

package/src/DataSteps.tsx

@@ -1,10 +1,3 @@
-import {
-  Button,
-  IconButton,
-  InputAdornment,
-  TextField,
-  TextFieldProps
-} from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
@@ -15,6 +8,10 @@ import React from "react";
 import { HBox } from "./FlexBox";
 import { MUGlobal } from "./MUGlobal";
 import { useRequiredAppContext } from "./app/ReactApp";
+import Button from "@mui/material/Button";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
 
 /**
  * Data step

package/src/DataTable.tsx

@@ -1,12 +1,9 @@
-import {
-  DataGrid,
-  GridCellModesModel,
-  GridRowId,
-  GridValidRowModel
-} from "@mui/x-data-grid";
-import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
+import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
+import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import { GridCellModesModel } from "@mui/x-data-grid/models/api/gridEditingApi";
+import { DataGrid } from "@mui/x-data-grid/DataGrid/DataGrid";
 
 /**
  * Data table selected cell params

package/src/DialogButton.tsx

@@ -1,16 +1,13 @@
-import {
-  Breakpoint,
-  Button,
-  ButtonProps,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  IconButton
-} from "@mui/material";
 import React from "react";
 import { Labels } from "./app/Labels";
+import Button, { ButtonProps } from "@mui/material/Button";
+import { Breakpoint } from "@mui/material/styles";
+import IconButton from "@mui/material/IconButton";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
 
 export interface DialogButtonProps extends ButtonProps {
   /**

package/src/DnDList.tsx

@@ -4,18 +4,17 @@ import type {
   DragStartEvent,
   UniqueIdentifier
 } from "@dnd-kit/core";
-import {
-  SortableContext,
-  SortingStrategy,
-  horizontalListSortingStrategy,
-  rectSortingStrategy,
-  rectSwappingStrategy,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
+import { SortableContext } from "@dnd-kit/sortable/dist/components/SortableContext";
+import { useSortable } from "@dnd-kit/sortable/dist/hooks/useSortable";
+import { horizontalListSortingStrategy } from "@dnd-kit/sortable/dist/strategies/horizontalListSorting";
+import { rectSortingStrategy } from "@dnd-kit/sortable/dist/strategies/rectSorting";
+import { rectSwappingStrategy } from "@dnd-kit/sortable/dist/strategies/rectSwapping";
+import { verticalListSortingStrategy } from "@dnd-kit/sortable/dist/strategies/verticalListSorting";
+import { SortingStrategy } from "@dnd-kit/sortable/dist/types/strategies";
 import type { CSS } from "@dnd-kit/utilities";
 import { DataTypes } from "@etsoo/shared";
-import { Skeleton, Theme, useTheme } from "@mui/material";
+import Skeleton from "@mui/material/Skeleton";
+import { Theme, useTheme } from "@mui/material/styles";
 import React, { CSSProperties } from "react";
 
 function SortableItem(props: {

package/src/DraggablePaperComponent.tsx

@@ -1,4 +1,4 @@
-import { Paper, PaperProps } from "@mui/material";
+import Paper, { PaperProps } from "@mui/material/Paper";
 import React from "react";
 import Draggable from "react-draggable";
 

package/src/EmailInput.tsx

@@ -1,5 +1,4 @@
-import { TextField, TextFieldProps } from "@mui/material";
-import React from "react";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
 /**
  * Email input props
@@ -11,12 +10,9 @@ export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
  * @param props Props
  */
 export function EmailInput(props: EmailInputProps) {
-  // Destruct
-  const { inputProps = {}, ...rest } = props;
-
-  // Default max length
-  inputProps.maxLength ??= 128;
+  props.slotProps ??= {};
+  props.slotProps.htmlInput ??= { maxLength: 128 };
 
   // Layout
-  return <TextField type="email" fullWidth inputProps={inputProps} {...rest} />;
+  return <TextField type="email" fullWidth {...props} />;
 }

package/src/ErrorAlert.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertProps } from "@mui/material";
+import Alert, { AlertProps } from "@mui/material/Alert";
 import { useAppContext } from "./app/ReactApp";
 
 /**

package/src/FabBox.tsx

@@ -1,4 +1,6 @@
-import { Box, BoxProps, Paper, PaperProps, useTheme } from "@mui/material";
+import Box, { BoxProps } from "@mui/material/Box";
+import Paper, { PaperProps } from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 
 type SharedProps = keyof BoxProps & keyof PaperProps;

package/src/FieldSetEx.tsx

@@ -1,9 +1,6 @@
-import {
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  InputLabel
-} from "@mui/material";
+import FormControl, { FormControlProps } from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
 import NotchedOutline from "@mui/material/OutlinedInput";
 import React from "react";
 

package/src/FileUploadButton.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from "@mui/material";
+import Button, { ButtonProps } from "@mui/material/Button";
 import React from "react";
 
 /**

package/src/FlexBox.tsx

@@ -1,4 +1,4 @@
-import { Stack, StackProps } from "@mui/material";
+import Stack, { StackProps } from "@mui/material/Stack";
 
 /**
  * Horizonal box

package/src/GridDataFormat.tsx

@@ -71,6 +71,9 @@ export function GridDataFormat(
       );
   }
 
+  // Array
+  if (Array.isArray(data)) return data.join(", ");
+
   if (typeof data === "string") return data;
 
   return `${data}`;

package/src/HiSelector.tsx

@@ -1,8 +1,10 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { FormLabel, Grid2, GridSize, SelectChangeEvent } from "@mui/material";
 import React from "react";
 import { SelectEx } from "./SelectEx";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import Grid, { GridSize } from "@mui/material/Grid";
+import { SelectChangeEvent } from "@mui/material/Select";
+import FormLabel from "@mui/material/FormLabel";
 
 /**
  * Hierarchy selector props
@@ -161,17 +163,17 @@ export function HiSelector<
   return (
     <React.Fragment>
       {label && (
-        <Grid2 size={{ xs: 12 }}>
+        <Grid size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid2>
+        </Grid>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid2 size={breakPoints}>
+      <Grid size={breakPoints}>
         <SelectEx<T, D, L>
           idField={idField}
           label={labels[0]}
@@ -188,9 +190,9 @@ export function HiSelector<
           helperText={helperText}
           variant={variant}
         />
-      </Grid2>
+      </Grid>
       {localValues[0] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[0]}`}
             idField={idField}
@@ -205,10 +207,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid2>
+        </Grid>
       )}
       {localValues[1] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[1]}`}
             idField={idField}
@@ -223,10 +225,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid2>
+        </Grid>
       )}
       {localValues[2] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[2]}`}
             idField={idField}
@@ -241,7 +243,7 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid2>
+        </Grid>
       )}
     </React.Fragment>
   );

package/src/HiSelectorTL.tsx

@@ -1,14 +1,13 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import {
-  AutocompleteChangeReason,
-  AutocompleteValue,
-  FormLabel,
-  Grid2,
-  GridSize
-} from "@mui/material";
 import React from "react";
 import { Tiplist } from "./Tiplist";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import Grid, { GridSize } from "@mui/material/Grid";
+import {
+  AutocompleteChangeReason,
+  AutocompleteValue
+} from "@mui/material/Autocomplete";
+import FormLabel from "@mui/material/FormLabel";
 
 /**
  * Hierarchy tiplist selector props
@@ -155,17 +154,17 @@ export function HiSelectorTL<
   return (
     <React.Fragment>
       {label && (
-        <Grid2 size={{ xs: 12 }}>
+        <Grid size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid2>
+        </Grid>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid2 size={breakPoints}>
+      <Grid size={breakPoints}>
         <Tiplist<T, D>
           idField={idField}
           label={labels[0]}
@@ -179,9 +178,9 @@ export function HiSelectorTL<
           inputHelperText={helperText}
           onChange={(event, value, reason) => doChange(0, event, value, reason)}
         />
-      </Grid2>
+      </Grid>
       {localValues[0] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[0]}`}
             label={labels[1]}
@@ -197,10 +196,10 @@ export function HiSelectorTL<
               doChange(1, event, value, reason)
             }
           />
-        </Grid2>
+        </Grid>
       )}
       {localValues[1] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[1]}`}
             label={labels[2]}
@@ -216,10 +215,10 @@ export function HiSelectorTL<
               doChange(2, event, value, reason)
             }
           />
-        </Grid2>
+        </Grid>
       )}
       {localValues[2] != null && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[2]}`}
             label={labels[3]}
@@ -235,7 +234,7 @@ export function HiSelectorTL<
               doChange(3, event, value, reason)
             }
           />
-        </Grid2>
+        </Grid>
       )}
     </React.Fragment>
   );

package/src/IconButtonLink.tsx

@@ -1,5 +1,4 @@
-import { IconButton, IconButtonProps } from "@mui/material";
-import React from "react";
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import { useNavigate } from "react-router";
 
 /**

package/src/InputField.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";
 
 /**
  * Input field props

package/src/InputTipField.tsx

@@ -1,9 +1,12 @@
 import { DataTypes } from "@etsoo/shared";
-import { InputAdornment, List, ListItem, Popover } from "@mui/material";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import ListItem from "@mui/material/ListItem";
+import Popover from "@mui/material/Popover";
+import List from "@mui/material/List";
+import InputAdornment from "@mui/material/InputAdornment";
 
 type ItemType = DataTypes.IdLabelItem<string | number>;