@etsoo/materialui 1.6.39 → 1.6.42

package/src/SwitchField.tsx

@@ -116,9 +116,7 @@ export function SwitchField(props: SwitchFieldProps) {
             }}
           />
         ) : (
-          <Box paddingLeft={2} paddingY="7px">
-            {group}
-          </Box>
+          <Box sx={{ paddingLeft: 2, paddingY: "7px" }}>{group}</Box>
         )}
       </FormControl>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}

package/src/TextFieldEx.tsx

@@ -86,8 +86,6 @@ export function TextFieldEx(props: TextFieldExProps) {
     error,
     fullWidth = true,
     helperText,
-    InputLabelProps = {},
-    InputProps = {},
     slotProps,
     onChange,
     onClear,
@@ -107,16 +105,10 @@ export function TextFieldEx(props: TextFieldExProps) {
   // Slot props
   const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
 
-  // Shrink
-  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
   // State
   const [errorText, updateErrorText] = React.useState<React.ReactNode>();
   const [empty, updateEmpty] = React.useState<boolean>(true);
 
-  // Read only
-  if (readOnly != null) InputProps.readOnly = readOnly;
-
   // Calculate
   let errorEx = error;
   let helperTextEx = helperText;
@@ -181,33 +173,6 @@ export function TextFieldEx(props: TextFieldExProps) {
     preventDefault(e);
   };
 
-  // Show password and/or clear button
-  if (!empty && (showPassword || showClear)) {
-    InputProps.endAdornment = (
-      <InputAdornment position="end">
-        {showPassword && (
-          <IconButton
-            tabIndex={-1}
-            onContextMenu={(event) => event.preventDefault()}
-            onMouseDown={touchStart}
-            onMouseUp={touchEnd}
-            onTouchStart={touchStart}
-            onTouchCancel={touchEnd}
-            onTouchEnd={touchEnd}
-            title={showIt}
-          >
-            <VisibilityIcon />
-          </IconButton>
-        )}
-        {showClear && (
-          <IconButton onClick={clearClick} tabIndex={-1} title={clearLabel}>
-            <ClearIcon />
-          </IconButton>
-        )}
-      </InputAdornment>
-    );
-  }
-
   // Extend key precess
   const onKeyPressEx =
     onEnter == null
@@ -287,7 +252,38 @@ export function TextFieldEx(props: TextFieldExProps) {
       onChange={onChangeEx}
       onKeyDown={onKeyPressEx}
       slotProps={{
-        input: { readOnly, ...input, ...InputProps },
+        input: {
+          endAdornment:
+            !empty && (showPassword || showClear) ? (
+              <InputAdornment position="end">
+                {showPassword && (
+                  <IconButton
+                    tabIndex={-1}
+                    onContextMenu={(event) => event.preventDefault()}
+                    onMouseDown={touchStart}
+                    onMouseUp={touchEnd}
+                    onTouchStart={touchStart}
+                    onTouchCancel={touchEnd}
+                    onTouchEnd={touchEnd}
+                    title={showIt}
+                  >
+                    <VisibilityIcon />
+                  </IconButton>
+                )}
+                {showClear && (
+                  <IconButton
+                    onClick={clearClick}
+                    tabIndex={-1}
+                    title={clearLabel}
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                )}
+              </InputAdornment>
+            ) : undefined,
+          readOnly,
+          ...input
+        },
         inputLabel: {
           shrink: MUGlobal.inputFieldShrink,
           ...inputLabel

package/src/Tiplist.tsx

@@ -159,7 +159,7 @@ export function Tiplist<
 
     // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-    Object.assign(params.inputProps, {
+    Object.assign(params.slotProps.htmlInput, {
       autoComplete: inputAutoComplete,
       "data-reset": inputReset
     });
@@ -299,7 +299,7 @@ export function Tiplist<
         style={{ display: "none" }}
         name={name}
         value={`${
-          inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")
+          inputValue ?? (state.current.idSet ? "" : (localIdValue ?? ""))
         }`}
         readOnly
         onChange={inputOnChange}

package/src/TiplistPro.tsx

@@ -312,7 +312,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         type={idIsString ? "text" : "number"}
         style={{ display: "none" }}
         name={name}
-        value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}
+        value={inputValue ?? (state.current.idSet ? "" : (localIdValue ?? ""))}
         readOnly
         onChange={inputOnChange}
         disabled={disabled}
@@ -383,7 +383,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
             data-reset={inputReset}
           />
         )}
-        isOptionEqualToValue={(option, value) => option.id === value.id}
+        isOptionEqualToValue={(option, value) => option.id === (value as T).id}
         sx={sx}
         noOptionsText={noOptionsText}
         loadingText={loadingText}

package/src/TwoFieldInput.tsx

@@ -11,10 +11,7 @@ type ValueType = string | number | Date | null | undefined;
 /**
  * TwoField Input props
  */
-export type TwoFieldInputProps = Omit<
-  InputFieldProps,
-  "InputProps" | "value"
-> & {
+export type TwoFieldInputProps = Omit<InputFieldProps, "value"> & {
   /**
    * Values
    */
@@ -37,8 +34,8 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
   // Destruct
   const {
     name,
-    inputProps,
-    type = inputProps?.inputMode,
+    slotProps,
+    type,
     values,
     onValuesChange,
     onChange,
@@ -46,13 +43,15 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
     ...rest
   } = props;
 
+  const { htmlInput, input, ...restSlotProps } = slotProps ?? {};
+
   // Local values
   const localValues: [ValueType, ValueType] =
     values == null
       ? [null, null]
       : Array.isArray(values)
-      ? (values as [ValueType, ValueType])
-      : [values as ValueType, null];
+        ? (values as [ValueType, ValueType])
+        : [values as ValueType, null];
 
   // Ref
   const valueRef = React.useRef<[ValueType, ValueType]>(localValues);
@@ -100,29 +99,32 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
       type={type}
       value={formatValue(localValues[0], type)}
       ref={dimensions[0][0]}
-      inputProps={inputProps}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment
-            position="end"
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            }}
-          >
-            <ArrowRightAltIcon />
-            <Input
-              type={type}
-              name={`${name}-end`}
-              value={formatValue(localValues[1], type)}
-              disableUnderline
-              onInput={onInput}
-              onChange={handleChange}
-              inputProps={inputProps}
-            />
-          </InputAdornment>
-        )
+      slotProps={{
+        input: {
+          ...input,
+          endAdornment: (
+            <InputAdornment
+              position="end"
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              }}
+            >
+              <ArrowRightAltIcon />
+              <Input
+                type={type}
+                name={`${name}-end`}
+                value={formatValue(localValues[1], type)}
+                disableUnderline
+                onInput={onInput}
+                onChange={handleChange}
+                slotProps={{ input: htmlInput as any }} // Fix it in the future
+              />
+            </InputAdornment>
+          )
+        },
+        ...restSlotProps
       }}
       onInput={onInput}
       onChange={handleChange}

package/src/UserAvatarEditor.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type AvatarEditor from "react-avatar-editor";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
@@ -9,7 +8,10 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
-import { ImageState } from "react-avatar-editor";
+import AvatarEditor, {
+  type ImageState,
+  type AvatarEditorRef
+} from "react-avatar-editor";
 import Stack from "@mui/material/Stack";
 import Skeleton from "@mui/material/Skeleton";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -132,7 +134,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
 
   // Ref
-  const ref = React.createRef<AvatarEditor>();
+  const ref = React.useRef<AvatarEditorRef>(null);
 
   // Image type
   const type = React.useRef<string>("image/jpeg");
@@ -196,6 +198,13 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
 
   // Handle image load
   const handleLoad = (imageInfo: ImageState) => {
+    if (
+      imageInfo.resource == null ||
+      imageInfo.height == null ||
+      imageInfo.width == null
+    )
+      return;
+
     // Ignore too small images
     if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10) return;
 
@@ -293,11 +302,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     }
   };
 
-  // Load the component
-  const AE = React.lazy(() => import("react-avatar-editor"));
-
   return (
-    <Stack direction="column" spacing={0.5} width={containerWidth}>
+    <Stack direction="column" spacing={0.5} sx={{ width: containerWidth }}>
       <FileUploadButton
         variant="outlined"
         size="medium"
@@ -314,7 +320,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
             <Skeleton variant="rounded" width={width} height={localHeight} />
           }
         >
-          <AE
+          <AvatarEditor
             ref={ref}
             border={border}
             width={width}
@@ -343,8 +349,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
       <Stack
         spacing={0.5}
         direction="row"
-        sx={{ paddingBottom: 2 }}
-        alignItems="center"
+        sx={{ alignItems: "center", paddingBottom: 2 }}
       >
         <IconButton
           size="small"

package/src/ViewContainer.tsx

@@ -222,7 +222,11 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
       {typeof data === "object" ? (
         data
       ) : horizontal ? (
-        <Typography variant="subtitle2" component="span" marginLeft={0.5}>
+        <Typography
+          variant="subtitle2"
+          component="span"
+          sx={{ marginLeft: 0.5 }}
+        >
           {data}
         </Typography>
       ) : (
@@ -423,10 +427,10 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
   return (
     <Grid
       container
-      justifyContent="left"
       className="ET-ViewContainer"
       ref={gridRef}
       spacing={spacing}
+      sx={{ justifyContent: "left" }}
     >
       {leftContainer && (leftResult = leftContainer(data)) != null && (
         <React.Fragment>

package/src/custom/CustomAttributeArea.tsx

@@ -55,7 +55,7 @@ function InputItemUIs({ data }: { data?: CustomFieldData }) {
   const optionsRef = React.useRef<HTMLInputElement>(null);
 
   return (
-    <Grid container spacing={2} marginTop={1}>
+    <Grid container spacing={2} sx={{ marginTop: 1 }}>
       <Grid size={{ xs: 12, sm: 6 }}>
         <ComboBox
           name="type"
@@ -334,7 +334,7 @@ function InputUIs({
 
   return (
     <React.Fragment>
-      <HBox marginBottom={0.5} gap={1} alignItems="center">
+      <HBox spacing={1} sx={{ marginTop: 0.5, alignItems: "center" }}>
         <Typography>{labels.sortTip}</Typography>
         <Button
           size="small"
@@ -364,7 +364,7 @@ function InputUIs({
                   size={{ xs: 12, sm: 12 }}
                   ref={ref}
                   style={style}
-                  gap={1}
+                  spacing={1}
                 >
                   <Grid size={smallSize}>
                     <IconButton

package/src/custom/CustomFieldViewer.tsx

@@ -99,9 +99,9 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
   return (
     <Grid
       container
-      justifyContent="left"
       spacing={spacing}
       sx={{
+        justifyContent: "left",
         ".MuiTypography-subtitle2": {
           fontWeight: "bold"
         }
@@ -122,8 +122,13 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
             size={CustomFieldUtils.transformSpace(field.space)}
             {...field.gridItemProps}
           >
-            <VBox gap={verticalGap}>
-              <Typography fontWeight="bold" fontSize="small" {...titleProps}>
+            <VBox spacing={verticalGap}>
+              <Typography
+                component="div"
+                fontWeight="bold"
+                fontSize="small"
+                {...titleProps}
+              >
                 {field.label ?? name}
               </Typography>
               <Typography {...valueProps}>

package/src/custom/CustomFieldWindow.tsx

@@ -29,8 +29,8 @@ function parseJsonData(jsonData: unknown): [Record<string, unknown>, number] {
         typeof jsonData === "object"
           ? jsonData
           : typeof jsonData === "string"
-          ? JSON.parse(jsonData)
-          : {};
+            ? JSON.parse(jsonData)
+            : {};
     } catch {}
   }
   return [data, calculateKeys(data)];
@@ -153,12 +153,12 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
             {
               fullScreen: app.smDown,
               inputs: (
-                <Stack marginTop={1.5}>
+                <Stack sx={{ marginTop: 1.5 }}>
                   <Grid
                     container
-                    justifyContent="left"
                     spacing={spacing}
                     sx={{
+                      justifyContent: "left",
                       ".MuiTypography-subtitle2": {
                         fontWeight: "bold"
                       }

package/src/custom/FieldJson.tsx

@@ -36,8 +36,8 @@ export const FieldJson: ICustomFieldReact<object> = ({
         typeof value === "object"
           ? value
           : typeof value === "string"
-          ? parseJson(value)
-          : undefined;
+            ? parseJson(value)
+            : undefined;
       inputRef.current.value = obj ? JSON.stringify(obj, null, 4) : "";
     }
   };
@@ -68,7 +68,7 @@ export const FieldJson: ICustomFieldReact<object> = ({
       fullWidth
       multiline
       rows={4}
-      inputProps={{ maxLength: 1280 }}
+      slotProps={{ htmlInput: { maxLength: 1280 } }}
       inputRef={inputRef}
       onChange={() => onChange(name, getValue())}
       {...field.mainSlotProps}

package/src/custom/FieldTexarea.tsx

@@ -44,7 +44,7 @@ export const FieldTexarea: ICustomFieldReact<string> = ({
       fullWidth
       multiline
       rows={4}
-      inputProps={{ maxLength: 1280 }}
+      slotProps={{ htmlInput: { maxLength: 1280 } }}
       inputRef={inputRef}
       defaultValue={defaultValue}
       onChange={() => onChange(name, getValue())}

package/src/index.ts

@@ -140,3 +140,6 @@ export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
+
+// Icons
+export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";

package/src/pages/EditPage.tsx

@@ -95,18 +95,17 @@ export function EditPage(props: EditPageProps) {
       <form onSubmit={onSubmit}>
         <Grid
           container
-          justifyContent="left"
           spacing={gridSpacing}
-          paddingTop={1}
+          sx={{ justifyContent: "left", paddingTop: 1 }}
         >
           {children}
         </Grid>
         <Grid
           container
-          position="sticky"
-          display="flex"
-          gap={gridSpacing}
+          spacing={gridSpacing}
           sx={{
+            position: "sticky",
+            display: "flex",
             top: "auto",
             bottom: (theme) =>
               MUGlobal.updateWithTheme(gridSpacing, theme.spacing),

package/src/pages/ViewPage.tsx

@@ -23,18 +23,20 @@ export function ViewPageActionBar(
     actionPaddings?: number | Record<string, string | number>;
   }
 ) {
-  const { actionPaddings = MUGlobal.pagePaddings, ...rest } = props;
+  const { actionPaddings = MUGlobal.pagePaddings, sx, ...rest } = props;
 
   return (
     <Stack
       className="ET-ViewPage-Actions"
       direction="row"
-      width="100%"
-      flexWrap="wrap"
-      justifyContent="center"
-      paddingTop={actionPaddings}
-      paddingBottom={actionPaddings}
-      gap={actionPaddings}
+      spacing={actionPaddings}
+      sx={{
+        flexWrap: "wrap",
+        justifyContent: "center",
+        paddingTop: actionPaddings,
+        paddingBottom: actionPaddings,
+        ...sx
+      }}
       {...rest}
     ></Stack>
   );
@@ -44,7 +46,8 @@ export function ViewPageActionBar(
  * View page props
  */
 export interface ViewPageProps<T extends DataTypes.StringRecord>
-  extends Omit<CommonPageProps, "children">,
+  extends
+    Omit<CommonPageProps, "children">,
     Omit<ViewContainerProps<T>, "data" | "refresh"> {
   /**
    * Actions

package/tsconfig.cjs.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
-    "target": "ES2022",
+    "target": "ES2025",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "isolatedModules": true,

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
-    "target": "ES2022",
-    "module": "ES2022",
+    "target": "ES2025",
+    "module": "ESNext",
     "moduleResolution": "bundler",
     "allowJs": false,
     "isolatedModules": true,