hfs 0.26.8 → 0.27.2

package/src/watchLoad.js

@@ -0,0 +1,73 @@
+"use strict";
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watchLoad = void 0;
+const fs_1 = require("fs");
+const promises_1 = __importDefault(require("fs/promises"));
+const yaml_1 = __importDefault(require("yaml"));
+const misc_1 = require("./misc");
+function watchLoad(path, parser, { failedOnFirstAttempt } = {}) {
+    let doing = false;
+    let watcher;
+    const debounced = (0, misc_1.debounceAsync)(load, 500, { leading: true });
+    let retry;
+    let saving;
+    let lastStats;
+    init().then(ok => ok || (failedOnFirstAttempt === null || failedOnFirstAttempt === void 0 ? void 0 : failedOnFirstAttempt()));
+    return {
+        unwatch() {
+            watcher === null || watcher === void 0 ? void 0 : watcher.close();
+            clearTimeout(retry);
+            watcher = undefined;
+        },
+        save(...args) {
+            return Promise.resolve(saving).then(() => // wait in case another is ongoing
+             saving = promises_1.default.writeFile(...args).finally(() => // save but also keep track of the current operation
+             saving = undefined)); // clear
+        }
+    };
+    async function init() {
+        try {
+            debounced().then();
+            watcher = (0, fs_1.watch)(path, () => {
+                if (!saving)
+                    debounced().then();
+            });
+            return true; // used actually just by the first invocation
+        }
+        catch (e) {
+            retry = setTimeout(init, 3000); // manual watching until watch is successful
+        }
+    }
+    async function load() {
+        if (doing)
+            return;
+        doing = true;
+        let data;
+        try {
+            try { // I've seen watch() firing 'change' without any change, so we'll check if any change is detectable before going on
+                const stats = await promises_1.default.stat(path);
+                if (stats.mtimeMs === (lastStats === null || lastStats === void 0 ? void 0 : lastStats.mtimeMs))
+                    return;
+                lastStats = stats;
+                data = await (0, misc_1.readFileBusy)(path);
+                console.debug('loaded', path);
+            }
+            catch (e) {
+                if (e.code === 'EPERM')
+                    console.error("missing permissions on file", path); // warn user, who could be clueless about this problem
+                return; // ignore read errors
+            }
+            if (path.endsWith('.yaml'))
+                data = yaml_1.default.parse(data);
+            await parser(data);
+        }
+        finally {
+            doing = false;
+        }
+    }
+}
+exports.watchLoad = watchLoad;

package/src/zip.js

@@ -0,0 +1,73 @@
+"use strict";
+// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zipStreamFromFolder = void 0;
+const vfs_1 = require("./vfs");
+const misc_1 = require("./misc");
+const QuickZipStream_1 = require("./QuickZipStream");
+const fs_1 = require("fs");
+const promises_1 = __importDefault(require("fs/promises"));
+const config_1 = require("./config");
+const path_1 = require("path");
+const serveFile_1 = require("./serveFile");
+const const_1 = require("./const");
+async function zipStreamFromFolder(node, ctx) {
+    ctx.status = const_1.HTTP_OK;
+    ctx.mime = 'zip';
+    const name = (0, vfs_1.getNodeName)(node);
+    ctx.attachment((name || 'archive') + '.zip');
+    const filter = (0, misc_1.pattern2filter)(String(ctx.query.search || ''));
+    const { list } = ctx.query;
+    const walker = !list ? (0, vfs_1.walkNode)(node, ctx, Infinity)
+        : (async function* () {
+            for await (const el of String(list).split('*')) { // we are using * as separator because it cannot be used in a file name and doesn't need url encoding
+                const subNode = await (0, vfs_1.urlToNode)(el, ctx, node);
+                if (!subNode || !(0, vfs_1.hasPermission)(subNode, 'can_read', ctx))
+                    continue;
+                if (await (0, vfs_1.nodeIsDirectory)(subNode)) { // a directory needs to walked
+                    yield* (0, vfs_1.walkNode)(subNode, ctx, Infinity, el + '/');
+                    continue;
+                }
+                let folder = (0, path_1.dirname)(el);
+                folder = folder === '.' ? '' : folder + '/';
+                yield { ...subNode, name: folder + (0, vfs_1.getNodeName)(subNode) }; // reflect relative path in archive, otherwise way may have name-clashes
+            }
+        })();
+    const mappedWalker = (0, misc_1.filterMapGenerator)(walker, async (el) => {
+        const { source } = el;
+        const name = (0, vfs_1.getNodeName)(el);
+        if (!source || ctx.req.aborted || !filter(name))
+            return;
+        try {
+            const st = await promises_1.default.stat(source);
+            if (!st || !st.isFile())
+                return;
+            return {
+                path: name,
+                size: st.size,
+                ts: st.mtime || st.ctime,
+                mode: st.mode,
+                sourcePath: source,
+                getData: () => (0, fs_1.createReadStream)(source, { start: 0, end: Math.max(0, st.size - 1) })
+            };
+        }
+        catch (_a) { }
+    });
+    const zip = new QuickZipStream_1.QuickZipStream(mappedWalker);
+    const time = 1000 * zipSeconds.get();
+    const size = await zip.calculateSize(time);
+    ctx.response.length = size;
+    const range = (0, serveFile_1.getRange)(ctx, size); // keep var size as ctx.response.length won't preserve a NaN
+    if (ctx.status >= 400)
+        return;
+    if (range)
+        zip.applyRange(range.start, range.end);
+    ctx.body = zip;
+    ctx.req.on('close', () => zip.destroy());
+    ctx.state.archive = 'zip';
+}
+exports.zipStreamFromFolder = zipStreamFromFolder;
+const zipSeconds = (0, config_1.defineConfig)('zip_calculate_size_for_seconds', 1);

package/admin/.eslintrc

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

package/admin/.gitignore

@@ -1,23 +0,0 @@
-# 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/package.json

@@ -1,67 +0,0 @@
-{
-  "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/src/AccountForm.ts

@@ -1,92 +0,0 @@
-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

@@ -1,143 +0,0 @@
-// 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

@@ -1,83 +0,0 @@
-// 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

@@ -1,84 +0,0 @@
-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,
-                    }
-                },
-            })
-        )
-    )
-}