muffin-admin 9.5.4 → 11.0.0

package/dist/types.d.ts

@@ -45,6 +45,7 @@ export type AdminPayloadProps = {
     help?: string;
 };
 export type AdminResourceProps = {
+    key: string;
     name: string;
     group?: string;
     icon?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "9.5.4",
+  "version": "11.0.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -25,18 +25,18 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "js-cookie": "^3.0.5",
-    "ra-language-russian": "^4.14.2",
-    "react": "^18.3.1",
-    "react-admin": "^5.4.0",
+    "ra-language-russian": "^5.4.4",
+    "react": "^19.1.1",
+    "react-admin": "^5.10.0",
     "react-datepicker": "^8.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.1",
     "validator": "^13.12.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.10",
-    "@types/node": "20.14.2",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "24.1.0",
+    "@types/react": "19.1.9",
+    "@types/react-dom": "19.1.7",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",

package/src/MuffinDashboard.tsx

@@ -43,7 +43,7 @@ setupAdmin(["dashboard-content"], () => null)
 function AdminCards({ src }: { src: AdminDashboardBlock | AdminDashboardBlock[] }) {
   if (Array.isArray(src))
     return (
-      <Grid container item spacing={2}>
+      <Grid container spacing={2}>
         {src.map((card, idx) => (
           <AdminCards key={idx} src={card} />
         ))}
@@ -55,23 +55,21 @@ function AdminCards({ src }: { src: AdminDashboardBlock | AdminDashboardBlock[]
 
 function DashboardCard({ title, value }: AdminDashboardBlock) {
   return (
-    <Grid item xs>
-      <Card>
-        <CardContent>
-          <Typography variant="h5" component="h2" m={2} style={{ textAlign: "center" }}>
-            {title}
-          </Typography>
-          {(Array.isArray(value) && <AdminTableView src={value} />) || (
-            <pre>{JSON.stringify(value, null, 2)}</pre>
-          )}
-        </CardContent>
-      </Card>
-    </Grid>
+    <Card>
+      <CardContent>
+        <Typography variant="h5" component="h2" m={2} style={{ textAlign: "center" }}>
+          {title}
+        </Typography>
+        {(Array.isArray(value) && <AdminTableView src={value} />) || (
+          <pre>{JSON.stringify(value, null, 2)}</pre>
+        )}
+      </CardContent>
+    </Card>
   )
 }
 
 const AdminTableView = ({ src }) => (
-  <Table>
+  <Table width="100%" sx={{ tableLayout: "fixed" }}>
     <TableBody>
       {src.map((row: any, idx: number) => (
         <TableRow key={idx} hover>

package/src/MuffinResourceEdit.tsx

@@ -20,7 +20,7 @@ export function MuffinEdit({ children }: PropsWithChildren) {
     adminProps: { mutationMode = "optimistic" },
   } = useMuffinAdminOpts()
 
-  const { edit, name } = useMuffinResourceOpts()
+  const { edit, name, key } = useMuffinResourceOpts()
   if (!edit) return null
 
   const Actions = findBuilder(["edit-toolbar", name])
@@ -28,7 +28,7 @@ export function MuffinEdit({ children }: PropsWithChildren) {
   const FormToolbar = findBuilder(["edit-form-toolbar", name])
 
   return (
-    <Edit actions={<Actions />} mutationMode={mutationMode}>
+    <Edit actions={<Actions />} mutationMode={mutationMode} queryOptions={{ meta: { key } }}>
       {children}
       <SimpleForm toolbar={<FormToolbar />}>
         <Inputs />

package/src/MuffinResourceList.tsx

@@ -23,7 +23,7 @@ import { AdminInput } from "./types"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinList({ children }: PropsWithChildren) {
-  const { name, list } = useMuffinResourceOpts()
+  const { name, list, key } = useMuffinResourceOpts()
   const { limit, limitMax, limitTotal, sort, filters } = list
 
   const DataGrid = findBuilder(["list-grid", name])
@@ -36,6 +36,7 @@ export function MuffinList({ children }: PropsWithChildren) {
       perPage={limit}
       filters={raFilters}
       actions={<Toolbar />}
+      queryOptions={{ meta: { key } }}
       pagination={
         <Pagination rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))} />
       }
@@ -44,7 +45,13 @@ export function MuffinList({ children }: PropsWithChildren) {
       <DataGrid />
     </List>
   ) : (
-    <InfiniteList sort={sort} perPage={limit} actions={<Toolbar />} filters={raFilters}>
+    <InfiniteList
+      sort={sort}
+      perPage={limit}
+      filters={raFilters}
+      actions={<Toolbar />}
+      queryOptions={{ meta: { key } }}
+    >
       {children}
       <DataGrid />
     </InfiniteList>

package/src/MuffinResourceShow.tsx

@@ -7,11 +7,11 @@ import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinShow({ children }: PropsWithChildren) {
-  const { show, name } = useMuffinResourceOpts()
+  const { show, name, key } = useMuffinResourceOpts()
   const ShowToolbar = findBuilder(["show-toolbar", name])
 
   return (
-    <Show actions={<ShowToolbar />}>
+    <Show actions={<ShowToolbar />} queryOptions={{ meta: { key } }}>
       <SimpleShowLayout>{buildAdmin(["show-fields", name], show)}</SimpleShowLayout>
       {children}
     </Show>

package/src/dataprovider.ts

@@ -1,6 +1,10 @@
 import { TID } from "./types"
 import { APIParams, makeRequest, prepareFilters, setupAdmin } from "./utils"
 
+type TQueryMeta = {
+  key?: string
+}
+
 export function MuffinDataprovider(apiUrl: string) {
   async function request(url: string, options?: APIParams) {
     if (!url.startsWith("/")) url = `${apiUrl}/${url}`
@@ -10,7 +14,7 @@ export function MuffinDataprovider(apiUrl: string) {
 
   const methods = {
     request,
-    getList: async (resource: string, params: any) => {
+    getList: async (resource: string, { meta, ...params }: any) => {
       const { filter, pagination, sort } = params
       const query: APIParams["query"] = {}
       if (filter) query.where = prepareFilters(filter)
@@ -24,6 +28,14 @@ export function MuffinDataprovider(apiUrl: string) {
         query.sort = order == "ASC" ? field : `-${field}`
       }
       const { headers, data } = await request(resource, { query })
+
+      // React-admin requires item to have an `id` field
+      if (meta?.key) {
+        for (const item of data) {
+          item.id = item.id ?? item[meta.key]
+        }
+      }
+
       if (pagination)
         return {
           data,
@@ -37,8 +49,13 @@ export function MuffinDataprovider(apiUrl: string) {
       return { data }
     },
 
-    getOne: async (resource: string, { id }: { id: TID }) => {
-      return await request(`${resource}/${id}`)
+    getOne: async (resource: string, { id, meta }: { id: TID; meta?: TQueryMeta }) => {
+      const response = await request(`${resource}/${id}`)
+      const { data } = response
+      if (meta?.key) {
+        data.id = data.id ?? data[meta.key]
+      }
+      return response
     },
 
     create: async (resource: string, { data }) => {
@@ -76,7 +93,7 @@ export function MuffinDataprovider(apiUrl: string) {
     getMany: (resource: string, props: { ids: TID[]; meta: any }) => {
       const { ids, meta } = props
       const key = meta?.key || "id"
-      return methods.getList(resource, { filter: { [key]: { $in: ids } } })
+      return methods.getList(resource, { filter: { [key]: { $in: ids } }, meta })
     },
 
     getManyReference: async (resource: string, { target, id, filter, ...opts }) => {

package/src/fields/FKField.tsx

@@ -1,6 +1,7 @@
 import { ReferenceField, TextField } from "react-admin"
 
 export function FKField({ reference, refSource, refKey, link, source, ...props }) {
+  refKey = refKey || "id"
   return (
     <ReferenceField
       source={source}
@@ -11,9 +12,13 @@ export function FKField({ reference, refSource, refKey, link, source, ...props }
     >
       <>
         <TextField source={refSource} />
-        {" (#"}
-        <TextField source={refKey || "id"} />
-        {")"}
+        {refSource !== refKey && (
+          <>
+            {" (#"}
+            <TextField source={refKey} />
+            {")"}
+          </>
+        )}
       </>
     </ReferenceField>
   )

package/src/index.tsx

@@ -37,4 +37,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "9.5.4"
+export const VERSION = "11.0.0"

package/src/inputs/FKInput.tsx

@@ -10,13 +10,19 @@ export function FKInput({ refKey, refSource, fullWidth, reference, source, ...pr
 
   refKey = refKey || "id"
   const renderText = (record) => {
-    const pk = record[refKey]
-    if (refKey == refSource) return `#${pk}`
-    return (pk && `${record[refSource]} (#${pk})`) || ""
+    const key = record[refKey]
+    if (refKey == refSource) return `#${key}`
+    return (key && `${record[refSource]} (#${key})`) || ""
   }
 
   return (
-    <ReferenceInput reference={reference} source={source}>
+    <ReferenceInput
+      reference={reference}
+      source={source}
+      queryOptions={{
+        meta: { key: refKey },
+      }}
+    >
       <AutocompleteInput
         source={refKey}
         optionText={renderText}

package/src/types.ts

@@ -81,6 +81,7 @@ export type AdminPayloadProps = {
 }
 
 export type AdminResourceProps = {
+  key: string
   name: string
   group?: string
   icon?: string