npm - hfs - Versions diffs - 0.29.0 → 0.29.1-rc1 - Mend

hfs 0.29.0 → 0.29.1-rc1

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 (166) 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 +66 -0
package/admin/{logo.svg → public/logo.svg} +0 -0
package/admin/src/AccountForm.ts +95 -0
package/admin/src/AccountsPage.ts +144 -0
package/admin/src/App.ts +83 -0
package/admin/src/ArrayField.ts +86 -0
package/admin/src/ConfigPage.ts +314 -0
package/admin/src/FileField.ts +54 -0
package/admin/src/FileForm.ts +147 -0
package/admin/src/FilePicker.ts +166 -0
package/admin/src/HomePage.ts +96 -0
package/admin/src/InstalledPlugins.ts +163 -0
package/admin/src/LoginRequired.ts +82 -0
package/admin/src/LogoutPage.ts +29 -0
package/admin/src/LogsPage.ts +80 -0
package/admin/src/MainMenu.ts +74 -0
package/admin/src/MenuButton.ts +38 -0
package/admin/src/MonitorPage.ts +205 -0
package/admin/src/OnlinePlugins.ts +103 -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 +99 -0
package/admin/src/addFiles.ts +59 -0
package/admin/src/api.ts +250 -0
package/admin/src/dialog.ts +203 -0
package/admin/src/index.css +22 -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 +50 -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 +57 -0
package/frontend/src/api.ts +93 -0
package/frontend/src/components.ts +55 -0
package/frontend/src/dialog.css +83 -0
package/frontend/src/dialog.ts +125 -0
package/frontend/src/icons.ts +46 -0
package/frontend/src/index.scss +324 -0
package/frontend/src/index.ts +10 -0
package/frontend/src/login.ts +63 -0
package/frontend/src/menu.ts +187 -0
package/frontend/src/misc.ts +54 -0
package/frontend/src/options.ts +56 -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 +84 -0
package/frontend/src/upload.ts +306 -0
package/frontend/src/useAuthorized.ts +19 -0
package/frontend/src/useFetchList.ts +162 -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 -2
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 +142 -0
package/src/api.file_list.ts +109 -0
package/src/api.helpers.ts +30 -0
package/src/api.monitor.ts +109 -0
package/src/api.plugins.ts +141 -0
package/src/api.vfs.ts +182 -0
package/src/apiMiddleware.ts +131 -0
package/src/block.ts +37 -0
package/src/commands.ts +124 -0
package/src/config.ts +167 -0
package/src/connections.ts +60 -0
package/src/const.ts +69 -0
package/src/crypt.ts +16 -0
package/src/debounceAsync.ts +53 -0
package/src/events.ts +6 -0
package/src/frontEndApis.ts +37 -0
package/src/github.ts +107 -0
package/src/index.ts +55 -0
package/src/listen.ts +223 -0
package/src/log.ts +128 -0
package/src/middlewares.ts +183 -0
package/src/misc.ts +176 -0
package/src/pbkdf2.ts +83 -0
package/src/perm.ts +197 -0
package/src/plugins.ts +340 -0
package/src/serveFile.ts +114 -0
package/src/serveGuiFiles.ts +95 -0
package/src/sse.ts +30 -0
package/src/throttler.ts +106 -0
package/src/update.ts +69 -0
package/src/upload.ts +98 -0
package/src/util-files.ts +141 -0
package/src/util-generators.ts +31 -0
package/src/util-http.ts +32 -0
package/src/util-os.ts +38 -0
package/src/vfs.ts +264 -0
package/src/watchLoad.ts +75 -0
package/src/zip.ts +71 -0
package/admin/assets/index-cbb42a0e.js +0 -415
package/admin/assets/index-f8049da8.css +0 -1
package/admin/assets/sha512-3273321f.js +0 -8
package/frontend/assets/index-72e96bb2.js +0 -85
package/frontend/assets/index-cbcc6ac5.css +0 -1
package/frontend/assets/sha512-2c2fa926.js +0 -8
package/src/QuickZipStream.js +0 -262
package/src/ThrottledStream.js +0 -93
package/src/adminApis.js +0 -167
package/src/api.accounts.js +0 -59
package/src/api.auth.js +0 -132
package/src/api.file_list.js +0 -110
package/src/api.helpers.js +0 -32
package/src/api.monitor.js +0 -104
package/src/api.plugins.js +0 -128
package/src/api.vfs.js +0 -162
package/src/apiMiddleware.js +0 -127
package/src/block.js +0 -34
package/src/commands.js +0 -125
package/src/config.js +0 -169
package/src/connections.js +0 -57
package/src/const.js +0 -95
package/src/crypt.js +0 -21
package/src/debounceAsync.js +0 -49
package/src/events.js +0 -9
package/src/frontEndApis.js +0 -59
package/src/github.js +0 -106
package/src/index.js +0 -58
package/src/listen.js +0 -238
package/src/log.js +0 -137
package/src/middlewares.js +0 -181
package/src/misc.js +0 -185
package/src/pbkdf2.js +0 -74
package/src/perm.js +0 -183
package/src/plugins.js +0 -341
package/src/serveFile.js +0 -107
package/src/serveGuiFiles.js +0 -90
package/src/sse.js +0 -30
package/src/throttler.js +0 -91
package/src/update.js +0 -70
package/src/upload.js +0 -92
package/src/util-files.js +0 -154
package/src/util-generators.js +0 -31
package/src/util-http.js +0 -32
package/src/util-os.js +0 -41
package/src/vfs.js +0 -237
package/src/watchLoad.js +0 -73
package/src/zip.js +0 -75

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-cbb42a0e.js"></script>
-    <link rel="stylesheet" href="/assets/index-f8049da8.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,66 @@
+{
+  "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",
+    "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": "^4.0.4",
+    "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,95 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+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(got => got.username === account.username ? "usernames are case-insensitive" : "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-panel",
+                helperText: "To access THIS interface you are using right now",
+                ...!account.admin && account.adminActualAccess && { value: 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) {
+                    const got = 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(got.username)
+                    return alertDialog("Account created", 'success')
+                }
+                const got = await apiCall('set_account', {
+                    username: account.username,
+                    changes: withoutPassword,
+                })
+                if (password)
+                    await apiNewPassword(username, password)
+                done(got.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,144 @@
+// This file is part of HFS - Copyright 2021-2023, 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
+    admin?: 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-2023, 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,86 @@
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+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,
+                    }
+                },
+            })
+        )
+    )
+}