@etsoo/materialui 1.6.39 → 1.6.42

package/src/ButtonPopupRadio.tsx

@@ -148,7 +148,7 @@ function ButtonPopupList<D extends DnDItemType>(
   }, [value]);
 
   return (
-    <VBox gap={2}>
+    <VBox spacing={2}>
       <RadioGroup
         value={currentValue ?? ""}
         name="radio-buttons-group"
@@ -167,10 +167,12 @@ function ButtonPopupList<D extends DnDItemType>(
           {items.map((item) => (
             <Grid
               size={itemSize}
-              display="flex"
-              justifyContent="flex-start"
-              alignItems="center"
-              gap={1}
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start"
+              }}
+              spacing={1}
               key={item.id}
             >
               <FormControlLabel
@@ -182,7 +184,7 @@ function ButtonPopupList<D extends DnDItemType>(
         </Grid>
       </RadioGroup>
       {onAdd && (
-        <HBox gap={1}>
+        <HBox spacing={1}>
           <TextField
             variant="outlined"
             label={labels?.more}

package/src/ComboBox.tsx

@@ -151,7 +151,7 @@ export function ComboBox<
   const localValue: T | null | undefined =
     idValue != null
       ? localOptions.find((o) => o[idField] === idValue)
-      : defaultValue ?? value;
+      : (defaultValue ?? value);
 
   // State
   // null for controlled
@@ -171,10 +171,10 @@ export function ComboBox<
       Object.assign(params, { readOnly });
     }
 
-    Object.assign(params.inputProps, { "data-reset": inputReset });
+    Object.assign(params.slotProps.htmlInput, { "data-reset": inputReset });
 
     if (dataReadonly) {
-      params.inputProps.onKeyDown = (event) => {
+      params.slotProps.htmlInput.onKeyDown = (event) => {
         if (Keyboard.isTypingContent(event.key)) {
           event.preventDefault();
         }
@@ -183,7 +183,9 @@ export function ComboBox<
 
     // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-    Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+    Object.assign(params.slotProps.htmlInput, {
+      autoComplete: inputAutoComplete
+    });
 
     return params;
   };
@@ -250,7 +252,7 @@ export function ComboBox<
         disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-      <Stack gap={0.5} direction="row" width="100%">
+      <Stack spacing={0.5} direction="row">
         <Autocomplete<T, false, false, false>
           value={stateValue}
           disabled={disabled}

package/src/ComboBoxMultiple.tsx

@@ -172,10 +172,10 @@ export function ComboBoxMultiple<
       Object.assign(params, { readOnly });
     }
 
-    Object.assign(params.inputProps, { "data-reset": inputReset });
+    Object.assign(params.slotProps.htmlInput, { "data-reset": inputReset });
 
     if (dataReadonly) {
-      params.inputProps.onKeyDown = (event) => {
+      params.slotProps.htmlInput.onKeyDown = (event) => {
         if (Keyboard.isTypingContent(event.key)) {
           event.preventDefault();
         }
@@ -184,7 +184,9 @@ export function ComboBoxMultiple<
 
     // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-    Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+    Object.assign(params.slotProps.htmlInput, {
+      autoComplete: inputAutoComplete
+    });
 
     return params;
   };

package/src/ComboBoxPro.tsx

@@ -138,7 +138,7 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
       )}
       getOptionLabel={getOptionLabel}
       getOptionKey={getOptionKey}
-      isOptionEqualToValue={(option, value) => option.id === value.id}
+      isOptionEqualToValue={(option, value) => option.id === (value as D).id}
       noOptionsText={noOptionsText}
       loadingText={loadingText}
       openText={openText}

package/src/CultureDataTable.tsx

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

package/src/DataGridEx.tsx

@@ -250,12 +250,14 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     return (
       <Box
         className="DataGridEx-Header"
-        display="flex"
-        alignItems="center"
-        borderBottom={boldBorder}
-        fontWeight={500}
-        minWidth={widthCalculator.total}
-        height={headerHeight}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          borderBottom: boldBorder,
+          fontWeight: 500,
+          minWidth: widthCalculator.total,
+          height: headerHeight
+        }}
       >
         {columns.map((column, index) => {
           // Destruct
@@ -309,8 +311,10 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           return (
             <Box
               key={field ?? index.toString()}
-              textAlign={GridAlignGet(align, type)}
-              width={columnWidth(index)}
+              sx={{
+                textAlign: GridAlignGet(align, type),
+                width: columnWidth(index)
+              }}
             >
               <Box
                 className="DataGridEx-Cell"
@@ -330,12 +334,14 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     return (
       <Box
         className="DataGridEx-Footer"
-        display="flex"
-        alignItems="center"
-        borderTop={thinBorder}
-        marginTop="1px"
-        minWidth={widthCalculator.total}
-        height={bottomHeight - 1}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          borderTop: thinBorder,
+          marginTop: "1px",
+          minHeight: widthCalculator.total,
+          height: bottomHeight - 1
+        }}
       >
         {columns.map((column, index) => {
           // Destruct
@@ -358,8 +364,10 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           return (
             <Box
               key={"bottom-" + (field ?? index.toString())}
-              textAlign={GridAlignGet(align, type)}
-              width={columnWidth(index)}
+              sx={{
+                textAlign: GridAlignGet(align, type),
+                width: columnWidth(index)
+              }}
             >
               <Box
                 className="DataGridEx-Cell"
@@ -646,13 +654,12 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
             data == null || cellBoxStyle == null
               ? undefined
               : typeof cellBoxStyle === "function"
-              ? cellBoxStyle(data)
-              : cellBoxStyle;
+                ? cellBoxStyle(data)
+                : cellBoxStyle;
 
           const cellProps: BoxProps = {
             className: "DataGridEx-Cell",
-            textAlign: GridAlignGet(align, type),
-            sx: { ...boxStyle }
+            sx: { textAlign: GridAlignGet(align, type), ...boxStyle }
           };
 
           const child = cellRenderer({

package/src/DataSteps.tsx

@@ -65,17 +65,16 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
 
   // Destruct
   const {
-    InputLabelProps = {},
     jsonValue,
     valueFormatter = (_data) => "...",
     onValueChange,
     steps,
     value = "",
+    slotProps,
     ...rest
   } = props;
 
-  // Shrink
-  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+  const { input, htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
 
   // Current index
   const indexRef = React.useRef<number>(-1);
@@ -99,11 +98,13 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
       ...rest,
       buttons: (n, callback) => (
         <HBox
-          paddingLeft={2}
-          paddingRight={2}
-          paddingBottom={2}
-          gap={2}
-          justifyContent="space-between"
+          spacing={2}
+          sx={{
+            justifyContent: "space-between",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingBottom: 2
+          }}
         >
           {index === 0 ? (
             <Button
@@ -179,21 +180,25 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
   return (
     <TextField
       autoComplete="off"
-      InputLabelProps={InputLabelProps}
-      inputProps={{ style: { cursor: "pointer" } }}
-      InputProps={{
-        onKeyDown: (event) => {
-          if (event.key === "Tab") return;
-          cancelInput(event);
+      slotProps={{
+        input: {
+          onKeyDown: (event) => {
+            if (event.key === "Tab") return;
+            cancelInput(event);
+          },
+          onPaste: cancelInput,
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton edge="end" size="small">
+                <StartIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+          ...input
         },
-        onPaste: cancelInput,
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton edge="end" size="small">
-              <StartIcon />
-            </IconButton>
-          </InputAdornment>
-        )
+        htmlInput: { style: { cursor: "pointer" }, ...htmlInput },
+        inputLabel: { shrink: MUGlobal.searchFieldShrink, ...inputLabel },
+        ...restSlotProps
       }}
       onClick={() => showStep(0)}
       value={localValue}

package/src/FileUploadButton.tsx

@@ -104,11 +104,12 @@ export function FileUploadButton(props: FileUploadButtonProps) {
   // Layout
   return (
     <HBox
-      alignItems="center"
-      flexWrap="wrap"
-      border={(theme) =>
-        dragOver ? "1px dashed " + theme.palette.warning.main : undefined
-      }
+      sx={{
+        alignItems: "center",
+        flexWrap: "wrap",
+        border: (theme) =>
+          dragOver ? "1px dashed " + theme.palette.warning.main : undefined
+      }}
       spacing={0.5}
       {...(dropFilesLabel == null
         ? undefined

package/src/FlexBox.tsx

@@ -5,8 +5,8 @@ import Stack, { StackProps } from "@mui/material/Stack";
  * @param props Props
  * @returns Component
  */
-export function HBox(props: Omit<StackProps, "ref">) {
-  return <Stack direction="row" width="100%" {...props} />;
+export function HBox(props: Omit<StackProps, "ref" | "direction">) {
+  return <Stack direction="row" {...props} />;
 }
 
 /**
@@ -15,14 +15,14 @@ export function HBox(props: Omit<StackProps, "ref">) {
  * @returns Component
  */
 export function HBoxList(props: Omit<StackProps, "direction">) {
+  const { sx, ...rest } = props;
+
   return (
     <Stack
       spacing={1}
-      gap={1}
       direction="row"
-      flexWrap="wrap"
-      width="100%"
-      {...props}
+      sx={{ flexWrap: "wrap", ...sx }}
+      {...rest}
     />
   );
 }
@@ -32,6 +32,6 @@ export function HBoxList(props: Omit<StackProps, "direction">) {
  * @param props Props
  * @returns Component
  */
-export function VBox(props: Omit<StackProps, "ref">) {
+export function VBox(props: Omit<StackProps, "ref" | "direction">) {
   return <Stack direction="column" {...props} />;
 }

package/src/InputField.tsx

@@ -33,8 +33,6 @@ export type InputFieldProps = TextFieldProps & {
 export function InputField(props: InputFieldProps) {
   // Destruct
   const {
-    InputProps = {},
-    inputProps = {},
     slotProps,
     onChange,
     onChangeDelay,
@@ -88,10 +86,9 @@ export function InputField(props: InputFieldProps) {
       slotProps={{
         htmlInput: {
           ["data-min-chars"]: changeDelay?.[1],
-          ...htmlInput,
-          ...inputProps
+          ...htmlInput
         },
-        input: { readOnly, ...input, ...InputProps },
+        input: { readOnly, ...input },
         inputLabel: {
           shrink: MUGlobal.inputFieldShrink,
           ...inputLabel

package/src/MoreFab.tsx

@@ -165,7 +165,7 @@ export function MoreFab(props: MoreFabProps) {
         transformOrigin={transformOrigin}
         open={open}
         onClose={handleClose}
-        PaperProps={PaperProps}
+        slotProps={{ paper: PaperProps }}
       >
         {actionsLocal.map(({ label, icon, action }, index) =>
           label === "-" ? (
@@ -182,13 +182,13 @@ export function MoreFab(props: MoreFabProps) {
                     }
                   : { component: Link, to: action }
                 : Array.isArray(action)
-                ? { component: Link, to: action[0], state: action[1] }
-                : {
-                    onClick: (event: React.MouseEvent) => {
-                      handleClose();
-                      if (typeof action === "function") action(event);
-                    }
-                  })}
+                  ? { component: Link, to: action[0], state: action[1] }
+                  : {
+                      onClick: (event: React.MouseEvent) => {
+                        handleClose();
+                        if (typeof action === "function") action(event);
+                      }
+                    })}
             >
               {icon != null && <ListItemIcon>{icon}</ListItemIcon>}
               <ListItemText inset={icon == null && hasIcon}>

package/src/NotifierMU.tsx

@@ -380,7 +380,7 @@ export class NotificationMU extends NotificationReact {
 
     const mRef = content.props.mRef;
 
-    const errorRef = React.createRef<HTMLSpanElement>();
+    const errorRef = React.createRef<HTMLDivElement>();
 
     const setError = (error?: string) => {
       if (errorRef.current == null) return;
@@ -449,8 +449,8 @@ export class NotificationMU extends NotificationReact {
         <DialogContent {...inputProps}>
           {content}
           <Typography
+            component="div"
             variant="caption"
-            display="block"
             ref={errorRef}
             color="error"
           />
@@ -512,7 +512,7 @@ export class NotificationMU extends NotificationReact {
     } = this.inputProps ?? {};
 
     const inputRef = React.createRef<HTMLInputElement>();
-    const errorRef = React.createRef<HTMLSpanElement>();
+    const errorRef = React.createRef<HTMLDivElement>();
 
     const setError = (error?: string) => {
       if (errorRef.current == null) return;
@@ -657,8 +657,8 @@ export class NotificationMU extends NotificationReact {
           )}
           {localInputs}
           <Typography
+            component="div"
             variant="caption"
-            display="block"
             ref={errorRef}
             color="error"
           />
@@ -747,11 +747,11 @@ export class NotificationMU extends NotificationReact {
         {...options}
       >
         <Box
-          display="flex"
-          flexDirection="column"
-          flexWrap="nowrap"
-          alignItems="center"
           sx={{
+            display: "flex",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+            alignItems: "center",
             "& > :not(style) + :not(style)": {
               marginTop: (theme) => theme.spacing(1)
             }
@@ -759,7 +759,7 @@ export class NotificationMU extends NotificationReact {
         >
           <CircularProgress {...setupProps} />
           {content && (
-            <Box maxWidth={maxWidth === false ? undefined : maxWidth}>
+            <Box sx={{ maxWidth: maxWidth === false ? undefined : maxWidth }}>
               {content}
             </Box>
           )}
@@ -918,11 +918,11 @@ export class NotifierMU extends NotifierReact {
         open
       >
         <Box
-          display="flex"
-          flexDirection="column"
-          flexWrap="nowrap"
           key={`box-${alignText}`}
           sx={{
+            display: "flex",
+            flexDirection: "column",
+            flexWrap: "nowrap",
             "& > :not(style) + :not(style)": {
               marginTop: (theme) => theme.spacing(1)
             }

package/src/NumberInputField.tsx

@@ -3,6 +3,7 @@ import { InputField, InputFieldProps } from "./InputField";
 import { Currency } from "@etsoo/appscript";
 import { NumberUtils } from "@etsoo/shared";
 import InputAdornment from "@mui/material/InputAdornment";
+import { NumberFieldInput } from "@base-ui/react/number-field";
 
 /**
  * Number input field properties

package/src/OptionGroup.tsx

@@ -159,8 +159,8 @@ export function OptionGroup<
       defaultValue == null
         ? []
         : Array.isArray(defaultValue)
-        ? defaultValue
-        : [defaultValue],
+          ? defaultValue
+          : [defaultValue],
     [defaultValue]
   );
 
@@ -294,9 +294,7 @@ export function OptionGroup<
             }}
           />
         ) : (
-          <Box paddingLeft={2} paddingY="7px">
-            {group}
-          </Box>
+          <Box sx={{ paddingLeft: 2, paddingY: "7px" }}>{group}</Box>
         )}
       </FormControl>
       {helperText && (

package/src/OptionGroupFlag.tsx

@@ -199,8 +199,8 @@ export function OptionGroupFlag<
                 ? typeValue
                 : undefined
               : event.target.checked
-              ? value | typeValue
-              : value ^ typeValue
+                ? value | typeValue
+                : value ^ typeValue
           ) as (T[D] & number) | undefined;
 
           if (onValueChange) onValueChange(newValue);
@@ -248,9 +248,7 @@ export function OptionGroupFlag<
             }}
           />
         ) : (
-          <Box paddingLeft={2} paddingY="7px">
-            {group}
-          </Box>
+          <Box sx={{ paddingLeft: 2, paddingY: "7px" }}>{group}</Box>
         )}
       </FormControl>
       {helperText && (

package/src/QuickList.tsx

@@ -88,9 +88,9 @@ export function QuickList<T extends ListType2 = ListType2>(
     itemProps,
     loadData,
     noMatchesLabel = app?.get("noMatches"),
-    gap = 1,
-    height = "480px",
+    spacing = 1,
     onItemClick,
+    sx,
     ...rest
   } = props;
 
@@ -115,7 +115,7 @@ export function QuickList<T extends ListType2 = ListType2>(
 
   // Layout
   return (
-    <VBox gap={gap} height={height} {...rest}>
+    <VBox spacing={spacing} sx={{ height: "480px", ...sx }} {...rest}>
       <InputField
         label={label}
         onChangeDelay={(event) => {
@@ -131,7 +131,7 @@ export function QuickList<T extends ListType2 = ListType2>(
       {loading ? (
         <LinearProgress />
       ) : items.length === 0 ? (
-        <Typography textAlign="center">{noMatchesLabel}</Typography>
+        <Typography align="center">{noMatchesLabel}</Typography>
       ) : (
         <List>
           {items.map((item) => (

package/src/ResponsibleContainer.tsx

@@ -408,11 +408,11 @@ export function ResponsibleContainer<T extends object, F>(
           ref={dimensions[0][0]}
           className="SearchBox"
           sx={{
+            marginBottom: hasFields
+              ? `${searchBarBottom}px!important`
+              : undefined,
             height: hasFields ? searchBarHeight : 0
           }}
-          marginBottom={
-            hasFields ? `${searchBarBottom}px!important` : undefined
-          }
         >
           {searchBar}
         </Box>

package/src/SearchBar.tsx

@@ -362,14 +362,14 @@ export function SearchBar(props: SearchBarProps) {
         <Stack
           ref={dimensions[0][0]}
           className="SearchBarContainer"
-          justifyContent="center"
-          alignItems="center"
           direction="row"
           spacing={`${itemGap}px`}
-          width={width}
-          overflow="hidden"
-          paddingTop="6px"
           sx={{
+            alignItems: "center",
+            justifyContent: "center",
+            width,
+            overflow: "hidden",
+            paddingTop: "6px",
             "& > :not(style)": {
               flexBasis: "auto",
               flexGrow: 0,
@@ -429,10 +429,10 @@ export function SearchBar(props: SearchBarProps) {
           >
             <Stack
               direction="column"
-              alignItems="stretch"
               spacing={2}
-              padding={2}
               sx={{
+                padding: 2,
+                alignItems: "stretch",
                 "& > :not(style)": {
                   minWidth: "100px"
                 }

package/src/SearchField.tsx

@@ -32,25 +32,16 @@ export function SearchField(props: SearchFieldProps) {
   // Destruct
   const {
     changeDelay,
-    InputLabelProps = {},
-    InputProps = {},
-    inputProps = {},
     onChange,
     readOnly,
     size = MUGlobal.searchFieldSize,
     variant = MUGlobal.searchFieldVariant,
     minChars = 0,
+    slotProps,
     ...rest
   } = props;
 
-  // Shrink
-  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
-  // Read only
-  if (readOnly != null) InputProps.readOnly = readOnly;
-
-  // Min characters
-  inputProps["data-min-chars"] = minChars;
+  const { input, inputLabel, htmlInput, ...restSlotProps } = slotProps ?? {};
 
   const isMounted = React.useRef(true);
   const delayed =
@@ -90,12 +81,15 @@ export function SearchField(props: SearchFieldProps) {
   // Layout
   return (
     <TextField
-      InputLabelProps={InputLabelProps}
-      InputProps={InputProps}
-      inputProps={inputProps}
       onChange={onChangeEx}
       size={size}
       variant={variant}
+      slotProps={{
+        input: { readOnly, ...input },
+        inputLabel: { shrink: MUGlobal.searchFieldShrink, ...inputLabel },
+        htmlInput: { ["data-min-chars"]: minChars, ...htmlInput },
+        ...restSlotProps
+      }}
       {...rest}
     />
   );

package/src/SwitchAnt.tsx

@@ -72,7 +72,7 @@ export function SwitchAnt(props: SwitchAntProps) {
 
   // Layout
   return (
-    <Stack direction="row" spacing={1} alignItems="center">
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
       <Typography
         onClick={() => controlChecked && ref.current?.click()}
         sx={{
@@ -86,7 +86,7 @@ export function SwitchAnt(props: SwitchAntProps) {
       </Typography>
       <Switch
         checked={controlChecked}
-        inputRef={ref}
+        ref={ref}
         value={value}
         onChange={onChangeLocal}
         {...rest}