npm - hfs - Versions diffs - 0.26.7 → 0.26.8 - Mend

hfs 0.26.7 → 0.26.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/admin/.DS_Store +0 -0
package/admin/.eslintrc +8 -0
package/admin/.gitignore +23 -0
package/admin/index.html +1 -3
package/admin/package.json +67 -0
package/admin/{logo.svg → public/logo.svg} +0 -0
package/admin/src/AccountForm.ts +92 -0
package/admin/src/AccountsPage.ts +143 -0
package/admin/src/App.ts +83 -0
package/admin/src/ArrayField.ts +84 -0
package/admin/src/ConfigPage.ts +279 -0
package/admin/src/FileField.ts +52 -0
package/admin/src/FileForm.ts +148 -0
package/admin/src/FilePicker.ts +166 -0
package/admin/src/HomePage.ts +96 -0
package/admin/src/InstalledPlugins.ts +158 -0
package/admin/src/LoginRequired.ts +75 -0
package/admin/src/LogoutPage.ts +27 -0
package/admin/src/LogsPage.ts +75 -0
package/admin/src/MainMenu.ts +74 -0
package/admin/src/MenuButton.ts +38 -0
package/admin/src/MonitorPage.ts +200 -0
package/admin/src/OnlinePlugins.ts +101 -0
package/admin/src/PermField.ts +80 -0
package/admin/src/PluginsPage.ts +27 -0
package/admin/src/VfsMenuBar.ts +58 -0
package/admin/src/VfsPage.ts +124 -0
package/admin/src/VfsTree.ts +95 -0
package/admin/src/addFiles.ts +59 -0
package/admin/src/api.ts +246 -0
package/admin/src/dialog.ts +203 -0
package/admin/src/index.css +21 -0
package/admin/src/index.ts +10 -0
package/admin/src/md.ts +31 -0
package/admin/src/misc.ts +141 -0
package/admin/src/react-app-env.d.ts +1 -0
package/admin/src/reportWebVitals.ts +15 -0
package/admin/src/setupTests.ts +5 -0
package/admin/src/state.ts +40 -0
package/admin/src/theme.ts +37 -0
package/admin/tsconfig.json +26 -0
package/admin/vite.config.ts +32 -0
package/frontend/.DS_Store +0 -0
package/frontend/.eslintrc +8 -0
package/frontend/.gitignore +23 -0
package/frontend/index.html +1 -3
package/frontend/package.json +51 -0
package/frontend/{fontello.css → public/fontello.css} +0 -0
package/frontend/{fontello.woff2 → public/fontello.woff2} +0 -0
package/frontend/src/App.ts +25 -0
package/frontend/src/Breadcrumbs.ts +43 -0
package/frontend/src/BrowseFiles.ts +141 -0
package/frontend/src/Head.ts +45 -0
package/frontend/src/UserPanel.ts +52 -0
package/frontend/src/api.ts +78 -0
package/frontend/src/components.ts +54 -0
package/frontend/src/dialog.css +76 -0
package/frontend/src/dialog.ts +105 -0
package/frontend/src/icons.ts +46 -0
package/frontend/src/index.scss +307 -0
package/frontend/src/index.ts +10 -0
package/frontend/src/login.ts +50 -0
package/frontend/src/menu.ts +188 -0
package/frontend/src/misc.ts +54 -0
package/frontend/src/options.ts +52 -0
package/frontend/src/react-app-env.d.ts +1 -0
package/frontend/src/reportWebVitals.ts +15 -0
package/frontend/src/setupTests.ts +5 -0
package/frontend/src/state.ts +82 -0
package/frontend/src/useAuthorized.ts +17 -0
package/frontend/src/useFetchList.ts +144 -0
package/frontend/src/useTheme.ts +23 -0
package/frontend/tsconfig.json +26 -0
package/frontend/vite.config.ts +21 -0
package/package.json +2 -1
package/plugins/vhosting/plugin.js +1 -1
package/src/QuickZipStream.ts +279 -0
package/src/ThrottledStream.ts +98 -0
package/src/adminApis.ts +161 -0
package/src/api.accounts.ts +78 -0
package/src/api.auth.ts +131 -0
package/src/api.file_list.ts +102 -0
package/src/api.helpers.ts +30 -0
package/src/api.monitor.ts +106 -0
package/src/api.plugins.ts +139 -0
package/src/api.vfs.ts +182 -0
package/src/apiMiddleware.ts +124 -0
package/src/block.ts +35 -0
package/src/commands.ts +122 -0
package/src/config.ts +166 -0
package/src/connections.ts +60 -0
package/src/const.ts +57 -0
package/src/crypt.ts +16 -0
package/src/debounceAsync.ts +51 -0
package/src/events.ts +6 -0
package/src/frontEndApis.ts +17 -0
package/src/github.ts +102 -0
package/src/index.ts +53 -0
package/src/listen.ts +220 -0
package/src/log.ts +128 -0
package/src/middlewares.ts +176 -0
package/src/misc.ts +149 -0
package/src/pbkdf2.ts +83 -0
package/src/perm.ts +194 -0
package/src/plugins.ts +342 -0
package/src/serveFile.ts +104 -0
package/src/serveGuiFiles.ts +95 -0
package/src/sse.ts +29 -0
package/src/throttler.ts +106 -0
package/src/update.ts +67 -0
package/src/util-files.ts +137 -0
package/src/util-generators.ts +29 -0
package/src/util-http.ts +29 -0
package/src/vfs.ts +258 -0
package/src/watchLoad.ts +75 -0
package/src/zip.ts +69 -0
package/admin/assets/index.0f549e00.js +0 -281
package/admin/assets/index.dcc78777.css +0 -1
package/admin/assets/sha512.ea1121b3.js +0 -8
package/frontend/assets/index.1151988f.js +0 -85
package/frontend/assets/index.93366732.css +0 -1
package/frontend/assets/sha512.bb881250.js +0 -8
package/src/QuickZipStream.js +0 -285
package/src/ThrottledStream.js +0 -93
package/src/adminApis.js +0 -169
package/src/api.accounts.js +0 -59
package/src/api.auth.js +0 -130
package/src/api.file_list.js +0 -103
package/src/api.helpers.js +0 -32
package/src/api.monitor.js +0 -102
package/src/api.plugins.js +0 -127
package/src/api.vfs.js +0 -164
package/src/apiMiddleware.js +0 -136
package/src/block.js +0 -33
package/src/commands.js +0 -124
package/src/config.js +0 -168
package/src/connections.js +0 -57
package/src/const.js +0 -83
package/src/crypt.js +0 -21
package/src/debounceAsync.js +0 -48
package/src/events.js +0 -9
package/src/frontEndApis.js +0 -38
package/src/github.js +0 -102
package/src/index.js +0 -55
package/src/listen.js +0 -235
package/src/log.js +0 -137
package/src/middlewares.js +0 -154
package/src/misc.js +0 -160
package/src/pbkdf2.js +0 -74
package/src/perm.js +0 -176
package/src/plugins.js +0 -343
package/src/serveFile.js +0 -104
package/src/serveGuiFiles.js +0 -113
package/src/sse.js +0 -29
package/src/throttler.js +0 -91
package/src/update.js +0 -69
package/src/util-files.js +0 -148
package/src/util-generators.js +0 -30
package/src/util-http.js +0 -30
package/src/vfs.js +0 -227
package/src/watchLoad.js +0 -73
package/src/zip.js +0 -69

package/admin/.DS_Store ADDED Viewed

Binary file

package/admin/.eslintrc ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "no-mixed-operators": 0,
+    "no-ex-assign": 0,
+	"no-throw-literal": 0
+  }
+}

package/admin/.gitignore ADDED Viewed

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/admin/index.html CHANGED Viewed

@@ -7,11 +7,9 @@
     <script async src='https://unpkg.com/node-forge@1.3.1/dist/forge.min.js'></script>
     <script>SESSION = _HFS_SESSION_</script>
     <title>HFS Admin</title>
-    <script type="module" crossorigin src="/assets/index.0f549e00.js"></script>
-    <link rel="stylesheet" href="/assets/index.dcc78777.css">
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>

package/admin/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "@hfs/admin",
+  "private": true,
+  "proxy": "http://localhost",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test-dep": "npm audit --production"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@hfs/mui-grid-form": "*",
+    "@hfs/shared": "*",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.94",
+    "@mui/material": "^5.10.0",
+    "@mui/x-data-grid": "^5.15.1",
+    "js-sha512": "^0.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.2.1",
+    "react-window": "^1.8.6",
+    "tssrp6a": "^3.0.0",
+    "valtio": "^1.2.9",
+    "immer": "^9.0.15",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.21",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-window": "^1.8.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "vite": "^3.0.0",
+    "vite-plugin-babel-import": "github:rejetto/vite-plugin-babel-import"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.ts"
+        ],
+        "rules": {
+          "no-mixed-operators": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/admin/{logo.svg → public/logo.svg} RENAMED Viewed

File without changes

package/admin/src/AccountForm.ts ADDED Viewed

@@ -0,0 +1,92 @@
+import { createElement as h, useEffect, useRef, useState } from 'react'
+import { BoolField, Form, MultiSelectField } from '@hfs/mui-grid-form'
+import { Box, Button } from '@mui/material'
+import { apiCall } from './api'
+import { alertDialog } from './dialog'
+import { isEqualLax, modifiedSx } from './misc'
+import { Account, account2icon } from './AccountsPage'
+import { createVerifierAndSalt, SRPParameters, SRPRoutines } from 'tssrp6a'
+interface FormProps { account: Account, groups: string[], done: (username: string)=>void, close: ()=>void }
+export default function AccountForm({ account, done, groups, close }: FormProps) {
+    const [values, setValues] = useState<Account & { password?: string, password2?: string }>(account)
+    const [belongsOptions, setBelongOptions] = useState<string[]>([])
+    useEffect(() => {
+        setValues(account)
+        setBelongOptions(groups.filter(x => x !== account.username ))
+        ref.current?.querySelector('input')?.focus()
+    }, [JSON.stringify(account)]) //eslint-disable-line
+    const add = !account.username
+    const group = !values.hasPassword
+    const ref = useRef<HTMLFormElement>()
+    return h(Form, {
+        formRef:  ref,
+        values,
+        set(v, k) {
+            setValues({ ...values, [k]: v })
+        },
+        addToBar: [
+            h(Button, { onClick: close, sx: { ml: 2 } }, "Close"),
+            h(Box, { flex:1 }),
+            account2icon(values, { fontSize: 'large', sx: { p: 1 }})
+        ],
+        fields: [
+            { k: 'username', label: group ? 'Group name' : undefined, autoComplete: 'off', required: true, xl: group ? 12 : 4,
+                getError: v => v !== account.username && apiCall('get_account', { username: v }).then(() => "already used", () => false),
+            },
+            !group && { k: 'password', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', required: add,
+                label: add ? "Password" : "Change password"
+            },
+            !group && { k: 'password2', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', label: 'Repeat password',
+                getError: (x, { values }) => (x||'') !== (values.password||'') && "Enter same password" },
+            { k: 'ignore_limits', comp: BoolField, xl: 6,
+                helperText: values.ignore_limits ? "Speed limits don't apply to this account" : "Speed limits apply to this account" },
+            { k: 'admin', comp: BoolField, xl: 6, fromField: (v:boolean) => v||null, label: "Permission to access Admin interface",
+                helperText: "To access THIS interface you are using right now",
+                ...account.adminActualAccess && { value: true, disabled: true, helperText: "This permission is inherited" },
+            },
+            { k: 'belongs', comp: MultiSelectField, label: "Inherits from", options: belongsOptions,
+                helperText: "Specify groups to inherit permissions from."
+                    + (belongsOptions.length ? '' : " There are no groups available, create one first.")
+            },
+            { k: 'redirect', helperText: "If you want this account to be redirected to a specific folder/address at login time" },
+        ],
+        onError: alertDialog,
+        save: {
+            sx: modifiedSx( !isEqualLax(values, account)),
+            async onClick() {
+                const { password='', password2, adminActualAccess, ...withoutPassword } = values
+                const { username } = values
+                if (add) {
+                    await apiCall('add_account', withoutPassword)
+                    if (password)
+                        try { await apiNewPassword(username, password) }
+                        catch(e) {
+                            apiCall('del_account', { username }).then() // best effort, don't wait
+                            throw e
+                        }
+                    done(username)
+                    return alertDialog("Account created", 'success')
+                }
+                await apiCall('set_account', {
+                    username: account.username,
+                    changes: withoutPassword,
+                })
+                if (password)
+                    await apiNewPassword(username, password)
+                done(username)
+                return alertDialog("Account modified", 'success')
+            }
+        }
+    })
+}
+async function apiNewPassword(username: string, password: string) {
+    const srp6aNimbusRoutines = new SRPRoutines(new SRPParameters())
+    const res = await createVerifierAndSalt(srp6aNimbusRoutines, username, password)
+    return apiCall('change_srp_others', { username, salt: String(res.s), verifier: String(res.v) }).catch(e => {
+        if (e.code !== 406) // 406 = server was configured to support clear text authentication
+            throw e
+        return apiCall('change_password_others', { username, newPassword: password }) // unencrypted version
+    })
+}

package/admin/src/AccountsPage.ts ADDED Viewed

@@ -0,0 +1,143 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, useState, useEffect, Fragment } from "react"
+import { apiCall, useApiEx } from './api'
+import { Alert, Box, Button, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
+import { Delete, Group, MilitaryTech, Person, PersonAdd, Refresh } from '@mui/icons-material'
+import { alertDialog, confirmDialog } from './dialog'
+import { iconTooltip, onlyTruthy } from './misc'
+import { TreeItem, TreeView } from '@mui/lab'
+import MenuButton from './MenuButton'
+import AccountForm from './AccountForm'
+import md from './md'
+export interface Account {
+    username: string
+    hasPassword?: boolean
+    adminActualAccess?: boolean
+    ignore_limits?: boolean
+    redirect?: string
+    belongs?: string[]
+}
+export default function AccountsPage() {
+    const { data, reload, element } = useApiEx('get_accounts')
+    const [sel, setSel] = useState<string[] | 'new-group' | 'new-user'>([])
+    const selectionMode = Array.isArray(sel)
+    useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
+        if (Array.isArray(data?.list) && selectionMode)
+            setSel( sel.filter(u => data.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
+    }, [data]) //eslint-disable-line -- Don't fall for its suggestion to add `sel` here: we modify it and declaring it as a dependency would cause a logical loop
+    if (element)
+        return element
+    const { list }: { list: Account[] } = data
+    return h(Grid, { container: true, maxWidth: '80em' },
+        h(Grid, { item: true, xs: 12 },
+            h(Box, {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 2,
+                mb: 2,
+                sx: {
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 2,
+                    backgroundColor: 'background.paper',
+                    width: 'fit-content',
+                },
+            },
+                h(MenuButton, {
+                    variant: 'contained',
+                    startIcon: h(PersonAdd),
+                    items: [
+                        { children: "user", onClick: () => setSel('new-user') },
+                        { children: "group", onClick: () => setSel('new-group') }
+                    ]
+                }, 'Add'),
+                h(Button, {
+                    disabled: !selectionMode || !sel.length,
+                    startIcon: h(Delete),
+                    async onClick(){
+                        if (!selectionMode) return
+                        if (!await confirmDialog(`You are going to delete ${sel.length} account(s)`))
+                            return
+                        const errors = onlyTruthy(await Promise.all(sel.map(username =>
+                            apiCall('del_account', { username }).then(() => null, () => username) )))
+                        if (errors.length)
+                            return alertDialog(errors.length === sel.length ? "Request failed" : hList("Some accounts were not deleted", errors), 'error')
+                        reload()
+                    }
+                }, "Remove"),
+                h(Button, { onClick: reload, startIcon: h(Refresh) }, "Reload"),
+                list.length > 0 && h(Typography, { p: 1 }, `${list.length} account(s)`),
+            ) ),
+        h(Grid, { item: true, md: 5 },
+            !list.length && h(Alert, { severity: 'info' }, md`To access administration _remotely_ you will need to create a user account with admin permission`),
+            h(TreeView, {
+                multiSelect: true,
+                sx: { pr: 4, pb: 2, minWidth: '15em' },
+                selected: selectionMode ? sel : [],
+                onNodeSelect(ev, ids) {
+                    setSel(ids)
+                }
+            },
+                list.map((ac: Account) =>
+                    h(TreeItem, {
+                        key: ac.username,
+                        nodeId: ac.username,
+                        label: h(Box, {
+                            sx: {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                padding: '.2em 0',
+                                gap: '.5em',
+                                alignItems: 'center',
+                            }
+                        },
+                            account2icon(ac),
+                            ac.adminActualAccess && iconTooltip(MilitaryTech, "Can login into Admin"),
+                            ac.username,
+                            Boolean(ac.belongs?.length) && h(Box, { sx: { color: 'text.secondary', fontSize: 'small' } },
+                                '(', ac.belongs?.join(', '), ')')
+                        ),
+                    })
+                )
+            )
+        ),
+        sel.length > 0 // this clever test is true both when some accounts are selected and when we are in "new account" modes
+        && h(Grid, { item: true, md: 7 },
+            h(Card, {},
+                h(CardContent, {},
+                    selectionMode && sel.length > 1 ? h(Box, {},
+                        h(Typography, {}, sel.length + " selected"),
+                        h(List, {},
+                            sel.map(username =>
+                                h(ListItem, { key: username },
+                                    h(ListItemText, {}, username))))
+                    ) : h(AccountForm, {
+                        account: selectionMode && list.find(x => x.username === sel[0])
+                            || { username: '', hasPassword: sel === 'new-user' },
+                        groups: list.filter(x => !x.hasPassword).map( x => x.username ),
+                        close(){ setSel([]) },
+                        done(username) {
+                            setSel([username])
+                            reload()
+                        }
+                    })
+                )))
+    )
+}
+function hList(heading: string, list: any[]) {
+    return h(Fragment, {},
+        heading>'' && h(Typography, {}, heading),
+        h(List, {},
+            list.map((text,key) =>
+                h(ListItem, { key },
+                    typeof text === 'string' ? h(ListItemText, {}, text) : text) ))
+    )
+}
+export function account2icon(ac: Account, props={}) {
+    return h(ac.hasPassword ? Person : Group, props)
+}

package/admin/src/App.ts ADDED Viewed

@@ -0,0 +1,83 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+import { createElement as h, Fragment, useState } from 'react'
+import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'
+import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
+import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
+import { Dialogs } from './dialog'
+import { useMyTheme } from './theme'
+import { useBreakpoint} from './misc'
+import { LoginRequired } from './LoginRequired'
+import { Menu } from '@mui/icons-material'
+function App() {
+    return h(ThemeProvider, { theme: useMyTheme() },
+        h(ApplyTheme, {},
+            h(LoginRequired, {},
+                h(HashRouter, {}, h(Routed)) ) ) )
+}
+function ApplyTheme(props:any) {
+    return h(Box, {
+        sx: {
+            bgcolor: 'background.default', color: 'text.primary',
+            display: 'flex', flexDirection: 'column',
+            minHeight: '100%', flex: 1,
+        },
+        ...props
+    })
+}
+function Routed() {
+    const loc = useLocation().pathname.slice(1)
+    const current = mainMenu.find(x => x.path === loc)
+    const title = current && (current.title || getMenuLabel(current))
+    const [open, setOpen] = useState(false)
+    const large = useBreakpoint('lg')
+    return h(Fragment, {},
+        !large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
+        !large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
+            h(MainMenu, {
+                onSelect: () => setOpen(false)
+            })),
+        h(Box, { display: 'flex', flex: 1, }, // horizontal layout for menu-content
+            large && h(MainMenu),
+            h(Box, {
+                component: 'main',
+                sx: {
+                    background: 'url(logo.svg) no-repeat right fixed',
+                    backgroundSize: 'contain',
+                    px: { xs: 2, md: 3 },
+                    pb: '1em',
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                }
+            },
+                title && large && h(Typography, { variant:'h2', mb:2 }, title),
+                h(Routes, {}, mainMenu.map((it,idx) =>
+                    h(Route, { key: idx, path: it.path, element: h(it.comp) })) )
+            ),
+            h(Dialogs)
+        )
+    )
+}
+function StickyBar({ title, openMenu }: { title?: string, openMenu: ()=>void }) {
+    return h(AppBar, { position: 'sticky', sx: { mb: 2 } },
+        h(Toolbar, {},
+            h(IconButton, {
+                size: 'large',
+                edge: 'start',
+                color: 'inherit',
+                sx: { mr: 2 },
+                'aria-label': "menu",
+                onClick: openMenu
+            }, h(Menu)),
+            title,
+        )
+    )
+}
+export default App

package/admin/src/ArrayField.ts ADDED Viewed

@@ -0,0 +1,84 @@
+import { createElement as h, Fragment, useMemo } from 'react'
+import { IconBtn, setHidden } from './misc'
+import { Add, Edit, Delete } from '@mui/icons-material'
+import { confirmDialog, formDialog } from './dialog'
+import { DataGrid, GridAlignment } from '@mui/x-data-grid'
+import { FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
+import { Box, FormHelperText, FormLabel } from '@mui/material'
+export function ArrayField<T=any>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
+    const rows = useMemo(() => (value||[]).map((x,$idx) =>
+            setHidden({ ...x } as any, 'id' in x ? { $idx } : { id: $idx })),
+        [JSON.stringify(value)]) //eslint-disable-line
+    const columns = useMemo(() => {
+        return [
+            ...fields.map(f => ({
+                field: f.k,
+                headerName: f.headerName ?? (typeof f.label === 'string' ? f.label : labelFromKey(f.k)),
+                disableColumnMenu: true,
+                ...f.$width >= 8 ? { width: f.$width } : { flex: f.$width || 1 },
+                ...f.$column,
+            })),
+            {
+                field: '',
+                width: 80,
+                disableColumnMenu: true,
+                sortable: false,
+                align: 'center' as GridAlignment,
+                headerAlign: 'center' as GridAlignment,
+                renderHeader(){
+                    return h(IconBtn, {
+                        icon: Add,
+                        title: "Add",
+                        onClick: (event:any) =>
+                            formDialog({ fields }).then(o => // @ts-ignore
+                                o && onChange([...value||[], o], { was: value, event }))
+                    })
+                },
+                renderCell({ row }: any) {
+                    const { $idx=row.id } = row
+                    return h('div', {},
+                        h(IconBtn, {
+                            icon: Edit,
+                            title: "Modify",
+                            onClick: (event:any) =>
+                                formDialog({ fields, values: row }).then(newRec => {
+                                    if (!newRec) return
+                                    const newValue = value!.map((oldRec, i) => i === $idx ? newRec : oldRec)
+                                    onChange(newValue, { was: value, event })
+                                }),
+                        }),
+                        h(IconBtn, {
+                            icon: Delete,
+                            title: "Delete",
+                            onClick: (event:any) =>
+                                confirmDialog("Delete?").then(ok => {
+                                    if (!ok) return
+                                    const newValue = value!.filter((rec, i) => i !== $idx)
+                                    onChange(newValue, { was: value, event })
+                                }),
+                        }),
+                    )
+                }
+            }
+        ]
+    }, [fields, value, onChange])
+    return h(Fragment, {},
+        label && h(FormLabel, { sx: { ml: 1 } }, label),
+        helperText && h(FormHelperText, {}, helperText),
+        h(Box, { height: '20em', ...rest },
+            h(DataGrid, {
+                columns,
+                rows,
+                hideFooterSelectedRowCount: true,
+                hideFooter: true,
+                componentsProps: {
+                    pagination: {
+                        showFirstButton: true,
+                        showLastButton: true,
+                    }
+                },
+            })
+        )
+    )
+}