xladmin 0.4.0 → 0.5.0

package/dist/index.js

@@ -876,9 +876,13 @@ var FieldEditor = memo(function FieldEditor2({
             size: "small",
             required: field.required,
             sx: buildRequiredLabelSx(),
-            placeholder: (_a = field.placeholder) != null ? _a : void 0,
-            helperText: (_b = field.help_text) != null ? _b : void 0,
-            slotProps: { htmlInput: buildHtmlInputProps(field) }
+            helperText: (_a = field.help_text) != null ? _a : void 0,
+            slotProps: {
+              htmlInput: {
+                ...buildHtmlInputProps(field),
+                placeholder: (_b = field.placeholder) != null ? _b : void 0
+              }
+            }
           }
         }
       }
@@ -910,9 +914,13 @@ var FieldEditor = memo(function FieldEditor2({
             size: "small",
             required: field.required,
             sx: buildRequiredLabelSx(),
-            placeholder: (_c = field.placeholder) != null ? _c : void 0,
-            helperText: (_d = field.help_text) != null ? _d : void 0,
-            slotProps: { htmlInput: buildHtmlInputProps(field) }
+            helperText: (_c = field.help_text) != null ? _c : void 0,
+            slotProps: {
+              htmlInput: {
+                ...buildHtmlInputProps(field),
+                placeholder: (_d = field.placeholder) != null ? _d : void 0
+              }
+            }
           }
         }
       }
@@ -1044,8 +1052,8 @@ function renderChoiceEditor({
           listbox: { sx: { maxHeight: 240 } }
         },
         renderInput: (params) => (() => {
-          var _a2, _b;
-          const { InputProps, inputProps, ...textFieldParams } = params;
+          var _a2, _b, _c;
+          const { slotProps, ...textFieldParams } = params;
           return /* @__PURE__ */ jsx3(
             TextField,
             {
@@ -1056,15 +1064,16 @@ function renderChoiceEditor({
               placeholder: (_a2 = field.placeholder) != null ? _a2 : searchPlaceholder,
               helperText: (_b = field.help_text) != null ? _b : void 0,
               slotProps: {
+                inputLabel: slotProps.inputLabel,
                 input: {
-                  ...InputProps,
+                  ...slotProps.input,
                   endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
                     isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
-                    InputProps.endAdornment
+                    (_c = slotProps.input) == null ? void 0 : _c.endAdornment
                   ] })
                 },
                 htmlInput: {
-                  ...inputProps,
+                  ...slotProps.htmlInput,
                   autoComplete: "new-password",
                   name: `admin-choice-${field.name}`
                 }
@@ -1104,8 +1113,8 @@ function renderChoiceEditor({
         listbox: { sx: { maxHeight: 240 } }
       },
       renderInput: (params) => (() => {
-        var _a2, _b;
-        const { InputProps, inputProps, ...textFieldParams } = params;
+        var _a2, _b, _c;
+        const { slotProps, ...textFieldParams } = params;
         return /* @__PURE__ */ jsx3(
           TextField,
           {
@@ -1116,15 +1125,16 @@ function renderChoiceEditor({
             placeholder: (_a2 = field.placeholder) != null ? _a2 : searchPlaceholder,
             helperText: (_b = field.help_text) != null ? _b : void 0,
             slotProps: {
+              inputLabel: slotProps.inputLabel,
               input: {
-                ...InputProps,
+                ...slotProps.input,
                 endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
                   isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
-                  InputProps.endAdornment
+                  (_c = slotProps.input) == null ? void 0 : _c.endAdornment
                 ] })
               },
               htmlInput: {
-                ...inputProps,
+                ...slotProps.htmlInput,
                 autoComplete: "new-password",
                 name: `admin-choice-${field.name}`
               }
@@ -1294,8 +1304,8 @@ function stringifyJsonValue(value) {
 
 // src/components/layout/AdminMessageContext.tsx
 import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
+import ErrorOutlinedIcon from "@mui/icons-material/ErrorOutlined";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { Box, Paper, Portal, Stack, Typography } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
@@ -1435,7 +1445,7 @@ function AdminMessageBubble({
           }
         }
       },
-      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.125, alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.125, sx: { alignItems: "center" }, children: [
         /* @__PURE__ */ jsx4(
           Box,
           {
@@ -1477,7 +1487,7 @@ function AdminMessageBubble({
 function getBubbleAppearance(theme, kind) {
   if (kind === "success") {
     return {
-      icon: CheckCircleOutlineIcon,
+      icon: CheckCircleOutlinedIcon,
       backgroundColor: alpha(theme.palette.success.main, 0.6),
       iconColor: theme.palette.common.white,
       iconBackgroundColor: alpha(theme.palette.common.white, 0.14),
@@ -1486,7 +1496,7 @@ function getBubbleAppearance(theme, kind) {
   }
   if (kind === "error") {
     return {
-      icon: ErrorOutlineIcon,
+      icon: ErrorOutlinedIcon,
       backgroundColor: alpha(theme.palette.error.main, 0.6),
       iconColor: theme.palette.common.white,
       iconBackgroundColor: alpha(theme.palette.common.white, 0.14),
@@ -2150,84 +2160,64 @@ function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtit
       },
       children: [
         /* @__PURE__ */ jsxs7(Stack5, { spacing: 0.5, children: [
-          /* @__PURE__ */ jsxs7(
-            Stack5,
-            {
-              direction: "row",
-              spacing: 1.5,
-              alignItems: "center",
-              justifyContent: "space-between",
-              sx: { minWidth: 0 },
-              children: [
-                /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-                  isMobile ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
-                    IconButton,
-                    {
-                      "aria-label": t("menu"),
-                      onClick: openMobileSidebar,
-                      size: "small",
-                      sx: { ml: -0.5 },
-                      children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
-                    }
-                  ) }) : null,
-                  beforeTitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
-                  /* @__PURE__ */ jsx13(
-                    Typography3,
-                    {
-                      variant: "h5",
-                      sx: {
-                        fontWeight: 600,
-                        lineHeight: "2.125rem",
-                        minWidth: 0
-                      },
-                      children: title
-                    }
-                  )
-                ] }),
-                actions ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
-              ]
-            }
-          ),
-          subtitle && !details ? /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1.5, sx: { minWidth: 0, alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, sx: { minWidth: 0, flex: 1, alignItems: "center" }, children: [
+              isMobile ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
+                IconButton,
+                {
+                  "aria-label": t("menu"),
+                  onClick: openMobileSidebar,
+                  size: "small",
+                  sx: { ml: -0.5 },
+                  children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
+                }
+              ) }) : null,
+              beforeTitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
+              /* @__PURE__ */ jsx13(
+                Typography3,
+                {
+                  variant: "h5",
+                  sx: {
+                    fontWeight: 600,
+                    lineHeight: "2.125rem",
+                    minWidth: 0
+                  },
+                  children: title
+                }
+              )
+            ] }),
+            actions ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
+          ] }),
+          subtitle && !details ? /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, alignItems: "center" }, children: [
             beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
             /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
           ] }) : null,
           details ? /* @__PURE__ */ jsxs7(Stack5, { spacing: 0.5, children: [
-            /* @__PURE__ */ jsxs7(
-              Stack5,
-              {
-                direction: "row",
-                spacing: 0.5,
-                alignItems: "center",
-                justifyContent: "space-between",
-                sx: { minWidth: 0 },
-                children: [
-                  /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-                    beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
-                    /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
-                  ] }),
-                  /* @__PURE__ */ jsx13(
-                    IconButton,
+            /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, flex: 1, alignItems: "center" }, children: [
+                beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
+                /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsx13(
+                IconButton,
+                {
+                  "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
+                  onClick: () => setIsDetailsOpen((current) => !current),
+                  size: "small",
+                  sx: { mr: -0.5 },
+                  children: /* @__PURE__ */ jsx13(
+                    ExpandMoreIcon3,
                     {
-                      "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
-                      onClick: () => setIsDetailsOpen((current) => !current),
-                      size: "small",
-                      sx: { mr: -0.5 },
-                      children: /* @__PURE__ */ jsx13(
-                        ExpandMoreIcon3,
-                        {
-                          fontSize: "small",
-                          sx: {
-                            transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
-                            transition: "transform 0.2s ease"
-                          }
-                        }
-                      )
+                      fontSize: "small",
+                      sx: {
+                        transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s ease"
+                      }
                     }
                   )
-                ]
-              }
-            ),
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx13(Collapse, { in: isDetailsOpen, children: /* @__PURE__ */ jsx13(Box5, { sx: { pt: 0.5 }, children: details }) })
           ] }) : null
         ] }),
@@ -2638,7 +2628,7 @@ function DeletePreviewDialog({
       children: [
         /* @__PURE__ */ jsx16(DialogTitle3, { children: title }),
         /* @__PURE__ */ jsxs10(DialogContent3, { dividers: true, children: [
-          isLoading ? /* @__PURE__ */ jsxs10(Stack7, { spacing: 1.5, alignItems: "center", justifyContent: "center", sx: { minHeight: 180 }, children: [
+          isLoading ? /* @__PURE__ */ jsxs10(Stack7, { spacing: 1.5, sx: { minHeight: 180, alignItems: "center", justifyContent: "center" }, children: [
             /* @__PURE__ */ jsx16(CircularProgress2, { size: 28, thickness: 4.2, color: "inherit" }),
             /* @__PURE__ */ jsx16(Typography4, { color: "text.secondary", children: t("delete_preview_loading") })
           ] }) : null,
@@ -2796,7 +2786,7 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
         overflow: "auto"
       },
       children: /* @__PURE__ */ jsxs11(Stack8, { spacing: 1.5, children: [
-        /* @__PURE__ */ jsxs11(Stack8, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs11(Stack8, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxs11(Stack8, { spacing: 0.25, children: [
             /* @__PURE__ */ jsx17(Typography5, { sx: { fontSize: 15, fontWeight: 700 }, children: t("filters") }),
             activeFiltersCount > 0 ? /* @__PURE__ */ jsx17(Typography5, { color: "text.secondary", sx: { fontSize: 12 }, children: t("active_filters", { count: activeFiltersCount }) }) : null
@@ -2949,8 +2939,8 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
         },
         onInputChange: (_, nextInputValue) => setSearchValue(nextInputValue),
         renderInput: (params) => (() => {
-          var _a2;
-          const { InputProps, inputProps, ...textFieldParams } = params;
+          var _a2, _b2;
+          const { slotProps, ...textFieldParams } = params;
           return /* @__PURE__ */ jsx17(
             TextField2,
             {
@@ -2958,14 +2948,15 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
               label: filter.label,
               placeholder: (_a2 = filter.placeholder) != null ? _a2 : t("search"),
               slotProps: {
+                inputLabel: slotProps.inputLabel,
                 input: {
-                  ...InputProps,
+                  ...slotProps.input,
                   endAdornment: /* @__PURE__ */ jsxs11(Fragment2, { children: [
                     isLoadingChoices ? /* @__PURE__ */ jsx17(CircularProgress3, { color: "inherit", size: 16 }) : null,
-                    InputProps.endAdornment
+                    (_b2 = slotProps.input) == null ? void 0 : _b2.endAdornment
                   ] })
                 },
-                htmlInput: inputProps
+                htmlInput: slotProps.htmlInput
               }
             }
           );
@@ -3866,7 +3857,7 @@ import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function ModelPageSkeleton() {
   return /* @__PURE__ */ jsxs13(Stack9, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
     /* @__PURE__ */ jsx20(MainHeaderSkeleton, { titleWidth: 240, subtitleWidth: "38%" }),
-    /* @__PURE__ */ jsx20(Paper6, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs13(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
+    /* @__PURE__ */ jsx20(Paper6, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs13(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { alignItems: { lg: "center" } }, children: [
       /* @__PURE__ */ jsx20(Skeleton3, { variant: "rounded", width: 360, height: 40 }),
       /* @__PURE__ */ jsx20(Skeleton3, { variant: "rounded", width: 128, height: 40 }),
       /* @__PURE__ */ jsx20(Box10, { sx: { flex: 1 } }),
@@ -3979,14 +3970,13 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
           borderRadius: "10px",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ jsxs14(Stack10, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
+        children: /* @__PURE__ */ jsxs14(Stack10, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { alignItems: { lg: "center" } }, children: [
           /* @__PURE__ */ jsxs14(
             Stack10,
             {
               direction: { xs: "column", xl: "row" },
               spacing: 1.5,
-              alignItems: { xl: "center" },
-              sx: { flex: 1, minWidth: 0 },
+              sx: { flex: 1, minWidth: 0, alignItems: { xl: "center" } },
               children: [
                 /* @__PURE__ */ jsx21(
                   SearchField,
@@ -3997,7 +3987,7 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
                     placeholder: t("search")
                   }
                 ),
-                controller.hasSelection ? /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flexWrap: "wrap" }, children: [
+                controller.hasSelection ? /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, sx: { minWidth: 0, flexWrap: "wrap", alignItems: "center" }, children: [
                   /* @__PURE__ */ jsx21(
                     Button5,
                     {
@@ -4025,7 +4015,7 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, alignItems: "center", sx: { marginLeft: "auto" }, children: [
+          /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, sx: { marginLeft: "auto", alignItems: "center" }, children: [
             beforePagination ? /* @__PURE__ */ jsx21(Box11, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforePagination }) : null,
             isMobile && controller.hasListFilters ? /* @__PURE__ */ jsx21(Tooltip, { title: t("filters"), children: /* @__PURE__ */ jsx21(
               IconButton3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xladmin",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Framework-agnostic React + MUI admin frontend for xladmin.",
   "license": "MIT",
   "type": "module",
@@ -38,9 +38,9 @@
   "peerDependencies": {
     "@emotion/react": ">=11.14.0 <12.0.0",
     "@emotion/styled": ">=11.14.0 <12.0.0",
-    "@mui/icons-material": ">=7.0.0 <8.0.0",
-    "@mui/material": ">=7.0.0 <8.0.0",
-    "@mui/x-date-pickers": ">=8.0.0 <9.0.0",
+    "@mui/icons-material": ">=9.0.0 <10.0.0",
+    "@mui/material": ">=9.0.0 <10.0.0",
+    "@mui/x-date-pickers": ">=9.0.0 <10.0.0",
     "axios": ">=1.0.0 <2.0.0",
     "dayjs": ">=1.11.0 <2.0.0",
     "react": ">=19.0.0 <20.0.0",