@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/inverse-lazy-list.js

@@ -1,43 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InverseLazyList = InverseLazyList;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
 const PRELOAD_THRESHOLD = 20;
 /**
@@ -56,14 +24,14 @@ function InverseLazyList(props) {
     // Expose prepend function via ref so callers can push live updates
     (0, react_1.useEffect)(() => {
         if (props.prependRef) {
-            props.prependRef.current = (item) => setItems(prev => [item, ...prev]);
+            props.prependRef.current = (item) => setItems((prev) => [item, ...prev]);
         }
         return () => {
             if (props.prependRef)
                 props.prependRef.current = null;
         };
     }, [props.prependRef]);
-    async function loadMore() {
+    const loadMore = (0, react_1.useCallback)(async () => {
         if (isLoadingRef.current || allLoaded)
             return;
         isLoadingRef.current = true;
@@ -73,31 +41,29 @@ function InverseLazyList(props) {
                 setAllLoaded(true);
             }
             else {
-                setItems(prev => [...prev, ...moreItems]);
+                setItems((prev) => [...prev, ...moreItems]);
             }
         }
         finally {
             isLoadingRef.current = false;
         }
-    }
+    }, [props.loadMore, allLoaded]);
     // Auto-preload when items are sparse
     (0, react_1.useEffect)(() => {
         if (items.length < PRELOAD_THRESHOLD && !allLoaded && !isLoadingRef.current) {
             loadMore();
         }
-    }, [items.length, allLoaded]);
+    }, [items.length, allLoaded, loadMore]);
     // Reset when resetTrigger changes
     (0, react_1.useEffect)(() => {
         setItems([]);
         setAllLoaded(false);
         isLoadingRef.current = false;
-    }, [props.resetTrigger]);
-    return (react_1.default.createElement("div", { id: props.scrollableId, style: {
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column-reverse',
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { id: props.scrollableId, style: {
+            overflow: "auto",
+            display: "flex",
+            flexDirection: "column-reverse",
             ...props.style,
-        } },
-        react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: items.length, next: loadMore, style: { display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }, inverse: true, hasMore: !allLoaded, loader: props.loadingIndicator ?? (react_1.default.createElement("div", { className: "d-flex justify-content-center py-2" },
-                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-secondary", role: "status" }))), scrollableTarget: props.scrollableId }, props.renderItems(items))));
+        }, children: (0, jsx_runtime_1.jsx)(react_infinite_scroll_component_1.default, { dataLength: items.length, next: loadMore, style: { display: "flex", flexDirection: "column-reverse", overflow: "hidden" }, inverse: true, hasMore: !allLoaded, loader: props.loadingIndicator ?? ((0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center py-2", children: (0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm text-secondary", role: "status" }) })), scrollableTarget: props.scrollableId, children: props.renderItems(items) }) }));
 }

package/dist/components/io-schema-values.d.ts

@@ -1,15 +1,14 @@
-import React from "react";
-import { IOSchema, Observable } from "@peers-app/peers-sdk";
+import { type IOSchema, type Observable } from "@peers-app/peers-sdk";
 interface IOSchemaValuesProps {
     ioSchema: IOSchema;
-    values: Record<string, any>;
+    values: Record<string, unknown>;
     q: Observable<number>;
     excludeFields?: string[];
 }
-export declare const IOSchemaValues: (props: IOSchemaValuesProps) => React.JSX.Element;
+export declare const IOSchemaValues: (props: IOSchemaValuesProps) => import("react/jsx-runtime").JSX.Element;
 export declare const IOSchemaValue: (props: {
     field: IOSchema["fields"][0];
-    values: Record<string, any>;
+    values: Record<string, unknown>;
     q: Observable<number>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/io-schema-values.js

@@ -1,67 +1,31 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IOSchemaValue = exports.IOSchemaValues = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const tooltip_1 = require("./tooltip");
-const editor_inline_1 = require("./markdown-editor/editor-inline");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const checkbox_1 = require("./checkbox");
 const input_1 = require("./input");
 const input_number_1 = require("./input-number");
-const checkbox_1 = require("./checkbox");
-const hooks_1 = require("../hooks");
+const editor_inline_1 = require("./markdown-editor/editor-inline");
+const tooltip_1 = require("./tooltip");
 const IOSchemaValues = (props) => {
     const { ioSchema, values, q } = props;
-    return (react_1.default.createElement("div", null, ioSchema.fields.map((field, i) => {
-        if (props.excludeFields?.includes(field.name)) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { key: i, className: 'mt-2' },
-            react_1.default.createElement("small", { className: "text-body-secondary" },
-                (0, peers_sdk_1.camelCaseToSpaces)(field.name),
-                ":",
-                react_1.default.createElement("small", null,
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: field.description ?? '' }))),
-            react_1.default.createElement(exports.IOSchemaValue, { field: field, values: values, q: q })));
-    })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: ioSchema.fields.map((field) => {
+            if (props.excludeFields?.includes(field.name)) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("small", { className: "text-body-secondary", children: [(0, peers_sdk_1.camelCaseToSpaces)(field.name), ":", (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: field.description ?? "" }) })] }), (0, jsx_runtime_1.jsx)(exports.IOSchemaValue, { field: field, values: values, q: q })] }, field.name));
+        }) }));
 };
 exports.IOSchemaValues = IOSchemaValues;
 const IOSchemaValue = (props) => {
     const { field, values, q } = props;
     const [valueObs] = (0, react_1.useState)(() => {
-        const obs = (0, peers_sdk_1.observable)(values[field.name] ?? '');
+        // Field values are heterogeneous (string | number | boolean | Date | …) at runtime.
+        // biome-ignore lint/suspicious/noExplicitAny: dynamic IO schema binding
+        const obs = (0, peers_sdk_1.observable)(values[field.name] ?? "");
         return obs;
     });
     (0, react_1.useEffect)(() => {
@@ -74,32 +38,31 @@ const IOSchemaValue = (props) => {
         };
     });
     (0, hooks_1.useSubscription)(q, () => {
-        valueObs(values[field.name] ?? '');
+        valueObs(values[field.name] ?? "");
     }, true);
     const valueType = field.type;
     // TODO isArray
     // TODO UI Types - text:secret, date:time, date:date, date:datetime, enum
-    if (valueType === 'string') {
-        if (field.subType === 'markdown' || (!field.subType && field.name.toLowerCase().includes('body'))) {
-            return (react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: valueObs, maxHeight: '250px' }));
+    if (valueType === "string") {
+        if (field.subType === "markdown" ||
+            (!field.subType && field.name.toLowerCase().includes("body"))) {
+            return (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: valueObs, maxHeight: "250px" });
         }
         else {
-            return (react_1.default.createElement(input_1.Input, { className: 'form-control', value: valueObs }));
+            return (0, jsx_runtime_1.jsx)(input_1.Input, { className: "form-control", value: valueObs });
         }
     }
-    else if (valueType === 'number') {
-        return (react_1.default.createElement(input_number_1.InputNumber, { className: 'form-control', value: valueObs }));
+    else if (valueType === "number") {
+        return (0, jsx_runtime_1.jsx)(input_number_1.InputNumber, { className: "form-control", value: valueObs });
     }
-    else if (valueType === 'boolean') {
-        return (react_1.default.createElement(checkbox_1.Checkbox, { className: 'form-control', checked: valueObs }));
+    else if (valueType === "boolean") {
+        return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "form-control", checked: valueObs });
     }
-    else if (valueType === 'Date') {
-        return (react_1.default.createElement(input_1.Input, { className: 'form-control', value: valueObs, type: 'date' }));
+    else if (valueType === "Date") {
+        return (0, jsx_runtime_1.jsx)(input_1.Input, { className: "form-control", value: valueObs, type: "date" });
     }
     else {
-        return react_1.default.createElement("div", null,
-            "Unknown type: ",
-            valueType);
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Unknown type: ", valueType] });
     }
 };
 exports.IOSchemaValue = IOSchemaValue;

package/dist/components/io-schema.d.ts

@@ -1,13 +1,12 @@
-import { IOSchema, Observable } from "@peers-app/peers-sdk";
-import React from "react";
+import { type IOSchema, type Observable } from "@peers-app/peers-sdk";
 export declare const IOSchemaEditor: (props: {
     ioSchema: Observable<IOSchema>;
     simpleValueName: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const SimpleInputSchema: (props: {
     ioSchema: Observable<IOSchema>;
     simpleValueName: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ComplexInputSchema: (props: {
     ioSchema: Observable<IOSchema>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/io-schema.js

@@ -1,41 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComplexInputSchema = exports.SimpleInputSchema = exports.IOSchemaEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const hooks_1 = require("../hooks");
 const editor_inline_1 = require("./markdown-editor/editor-inline");
 const IOSchemaEditor = (props) => {
@@ -48,27 +16,20 @@ const IOSchemaEditor = (props) => {
     }
     const q = (0, hooks_1.useObservableState)(0);
     (0, react_1.useEffect)(() => {
-        let schemaType = ioSchema().type;
+        const schemaType = ioSchema().type;
         const sub = ioSchema.subscribe(() => {
             if (schemaType !== ioSchema().type) {
                 q(q() + 1);
             }
         });
         return () => sub.dispose();
-    }, [ioSchema, q()]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("select", { className: "form-select form-select-sm", style: { width: "150px", display: "inline-block" }, defaultValue: ioSchema().type, onChange: evt => {
-                ioSchema({
-                    ...ioSchema(),
-                    type: evt.target.value,
-                });
-            } },
-            react_1.default.createElement("option", { value: "none" }, "None"),
-            react_1.default.createElement("option", { value: "simple" }, "Simple Value"),
-            react_1.default.createElement("option", { value: "complex" }, "Complex Value")),
-        react_1.default.createElement("div", { className: "ms-4" },
-            ioSchema().type === peers_sdk_1.IOSchemaType.simple && react_1.default.createElement(exports.SimpleInputSchema, { ioSchema: ioSchema, simpleValueName: simpleValueName }),
-            ioSchema().type === peers_sdk_1.IOSchemaType.complex && react_1.default.createElement(exports.ComplexInputSchema, { ioSchema: ioSchema }))));
+    }, [ioSchema, q]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", style: { width: "150px", display: "inline-block" }, defaultValue: ioSchema().type, onChange: (evt) => {
+                    ioSchema({
+                        ...ioSchema(),
+                        type: evt.target.value,
+                    });
+                }, children: [(0, jsx_runtime_1.jsx)("option", { value: "none", children: "None" }), (0, jsx_runtime_1.jsx)("option", { value: "simple", children: "Simple Value" }), (0, jsx_runtime_1.jsx)("option", { value: "complex", children: "Complex Value" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ms-4", children: [ioSchema().type === peers_sdk_1.IOSchemaType.simple && ((0, jsx_runtime_1.jsx)(exports.SimpleInputSchema, { ioSchema: ioSchema, simpleValueName: simpleValueName })), ioSchema().type === peers_sdk_1.IOSchemaType.complex && (0, jsx_runtime_1.jsx)(exports.ComplexInputSchema, { ioSchema: ioSchema })] })] }));
 };
 exports.IOSchemaEditor = IOSchemaEditor;
 const SimpleInputSchema = (props) => {
@@ -76,7 +37,7 @@ const SimpleInputSchema = (props) => {
     (0, hooks_1.useObservable)(ioSchema);
     const [ioValueType] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(ioSchema()?.fields?.[0]?.type || peers_sdk_1.FieldType.string));
     const [ioValueDesc] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(ioSchema()?.fields?.[0]?.description || ""));
-    const setSimpleInputSchema = () => {
+    const setSimpleInputSchema = (0, react_1.useCallback)(() => {
         const _ioSchema = { ...ioSchema() };
         _ioSchema.type = peers_sdk_1.IOSchemaType.simple;
         _ioSchema.fields = _ioSchema.fields || [];
@@ -86,7 +47,7 @@ const SimpleInputSchema = (props) => {
             type: ioValueType(),
         };
         ioSchema(_ioSchema);
-    };
+    }, [ioSchema, simpleValueName, ioValueDesc, ioValueType]);
     (0, react_1.useEffect)(() => {
         const sub = ioValueType.subscribe(() => {
             setSimpleInputSchema();
@@ -98,41 +59,37 @@ const SimpleInputSchema = (props) => {
             sub.dispose();
             sub2.dispose();
         };
-    }, [ioSchema]);
+    }, [ioValueDesc, ioValueType, setSimpleInputSchema]);
     const simpleValueTypes = Object.values(peers_sdk_1.FieldType);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("small", null, "Value Type:"),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("select", { className: "form-select form-select-sm mt-2 mb-2", defaultValue: ioValueType(), onChange: evt => ioValueType(evt.target.value), style: { width: "150px", display: "inline-block" } }, simpleValueTypes.map((type) => react_1.default.createElement("option", { key: type, value: type }, type))),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("small", null, "Value Description:"),
-        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: ioValueDesc, hideToolbar: true })));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { children: "Value Type:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("select", { className: "form-select form-select-sm mt-2 mb-2", defaultValue: ioValueType(), onChange: (evt) => ioValueType(evt.target.value), style: { width: "150px", display: "inline-block" }, children: simpleValueTypes.map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { children: "Value Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: ioValueDesc, hideToolbar: true })] }));
 };
 exports.SimpleInputSchema = SimpleInputSchema;
 const ComplexInputSchema = (props) => {
     const { ioSchema } = props;
     (0, hooks_1.useObservable)(ioSchema);
-    const [[fields, newRow], __setState] = (0, react_1.useState)(() => {
+    const [[fields, _newRow], __setState] = (0, react_1.useState)(() => {
         const _fields = ioSchema().fields || [];
-        // @ts-ignore
-        _fields.forEach(f => f.fakeId = (0, peers_sdk_1.newid)());
+        for (const f of _fields) {
+            // @ts-expect-error
+            f.fakeId = (0, peers_sdk_1.newid)();
+        }
         const inMemoryTable = (0, peers_sdk_1.arrayAsTable)(_fields, {
             primaryKeyName: "fakeId",
             fields: [
-                { name: "fakeId", type: peers_sdk_1.FieldType.string, description: '', defaultValue: () => (0, peers_sdk_1.newid)() },
-                { name: "name", type: peers_sdk_1.FieldType.string, description: '' },
-                { name: "type", type: peers_sdk_1.FieldType.string, description: '' },
-                { name: "description", type: peers_sdk_1.FieldType.string, description: '' },
-                { name: "default", type: peers_sdk_1.FieldType.string, description: '' },
-                { name: "optional", type: peers_sdk_1.FieldType.string, description: '' },
-                { name: "isArray", type: peers_sdk_1.FieldType.string, description: '' },
-            ]
+                { name: "fakeId", type: peers_sdk_1.FieldType.string, description: "", defaultValue: () => (0, peers_sdk_1.newid)() },
+                { name: "name", type: peers_sdk_1.FieldType.string, description: "" },
+                { name: "type", type: peers_sdk_1.FieldType.string, description: "" },
+                { name: "description", type: peers_sdk_1.FieldType.string, description: "" },
+                { name: "default", type: peers_sdk_1.FieldType.string, description: "" },
+                { name: "optional", type: peers_sdk_1.FieldType.string, description: "" },
+                { name: "isArray", type: peers_sdk_1.FieldType.string, description: "" },
+            ],
         });
-        const _fieldsDocs = _fields.map(f => (0, peers_sdk_1.initDoc)(f, inMemoryTable));
+        const _fieldsDocs = _fields.map((f) => (0, peers_sdk_1.initDoc)(f, inMemoryTable));
         const _fieldsDocsObs = (0, peers_sdk_1.observable)(_fieldsDocs);
         const newRow = () => {
             const newField = (0, peers_sdk_1.initDoc)({
-                // @ts-ignore
+                // @ts-expect-error
                 fakeId: (0, peers_sdk_1.newid)(),
                 name: "",
                 description: "",
@@ -147,17 +104,23 @@ const ComplexInputSchema = (props) => {
         return [_fieldsDocsObs, newRow];
     });
     (0, hooks_1.useObservable)(fields);
-    function updateSchemaFields() {
+    const updateSchemaFields = (0, react_1.useCallback)(() => {
         ioSchema({
             ...ioSchema(),
             type: peers_sdk_1.IOSchemaType.complex,
-            fields: fields().map(f => f.toJS()),
+            fields: fields().map((f) => f.toJS()),
         });
-    }
+    }, [fields, ioSchema]);
     (0, react_1.useEffect)(() => {
-        const subs = fields().map(f => f.q.subscribe(() => updateSchemaFields()));
-        return () => subs.forEach(s => s.dispose());
-    }, [fields()]);
-    return (react_1.default.createElement("div", { style: { fontSize: '9pt' }, className: "mt-2" }, "TODO - Move Datagrid over from peers-kore"));
+        const subs = fields().map((f) => f.q.subscribe(() => {
+            updateSchemaFields();
+        }));
+        return () => {
+            for (const s of subs) {
+                s.dispose();
+            }
+        };
+    }, [fields, updateSchemaFields]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: "9pt" }, className: "mt-2", children: "TODO - Move Datagrid over from peers-kore" }));
 };
 exports.ComplexInputSchema = ComplexInputSchema;

package/dist/components/lazy-list.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from "react";
 interface IProps<T> {
     loadMore: (existingItems: T[]) => Promise<T[]>;
     renderItems: (items: T[]) => React.ReactNode;
@@ -7,7 +7,7 @@ interface IProps<T> {
     loadingIndicator?: React.ReactNode;
     scrollThreshold?: number | string;
     lazyListStyle?: React.CSSProperties;
-    resetTrigger?: any;
+    resetTrigger?: unknown;
 }
-export declare function LazyList<T>(props: IProps<T>): React.JSX.Element;
+export declare function LazyList<T>(props: IProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/lazy-list.js

@@ -1,46 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LazyList = LazyList;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
 const hooks_1 = require("../hooks");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
 function LazyList(props) {
     const [itemsObsAry] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)([]));
     const [items] = (0, hooks_1.useObservable)(itemsObsAry);
@@ -48,44 +16,56 @@ function LazyList(props) {
     const [loading] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
     (0, hooks_1.useObservable)(loading);
     const isLoadingSync = (0, react_1.useRef)(false); // Synchronous loading flag
-    async function loadMore() {
+    // Bumped whenever resetTrigger changes so in-flight loadMore calls can discard stale results.
+    const loadGenRef = (0, react_1.useRef)(0);
+    const loadMore = (0, react_1.useCallback)(async () => {
         if (loading() || isLoadingSync.current) {
             return;
         }
         isLoadingSync.current = true;
         loading(true);
-        const moreItems = await props.loadMore(items);
-        if (!moreItems.length) {
-            setAllLoaded(true);
+        const gen = loadGenRef.current;
+        try {
+            const moreItems = await props.loadMore(itemsObsAry());
+            if (gen !== loadGenRef.current) {
+                // Reset happened while we were awaiting — discard to avoid mixing old + new results.
+                return;
+            }
+            if (!moreItems.length) {
+                setAllLoaded(true);
+            }
+            else {
+                itemsObsAry([...itemsObsAry(), ...moreItems]);
+            }
         }
-        else {
-            itemsObsAry([...itemsObsAry(), ...moreItems]);
+        finally {
+            if (gen === loadGenRef.current) {
+                loading(false);
+                isLoadingSync.current = false;
+            }
         }
-        loading(false);
-        isLoadingSync.current = false;
-    }
+    }, [props.loadMore, itemsObsAry, loading]);
     let renderItems = items;
     if (props.filterItems) {
         renderItems = props.filterItems(items);
     }
+    // Must run before the preload effect below: on mount / when `resetTrigger` changes we bump
+    // the generation and clear items first. Otherwise preload starts `loadMore` at gen N, then
+    // this effect runs and increments to N+1, the awaited result is discarded, and nothing
+    // retriggers a fetch (empty list forever — e.g. Groups).
+    (0, react_1.useEffect)(() => {
+        loadGenRef.current += 1;
+        itemsObsAry([]);
+        setAllLoaded(false);
+        isLoadingSync.current = false;
+        loading(false);
+    }, [itemsObsAry, loading, props.resetTrigger]);
     (0, react_1.useEffect)(() => {
         if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
             loadMore();
         }
-    }, [renderItems.length, allLoaded]);
-    (0, react_1.useEffect)(() => {
-        itemsObsAry([]);
-        setAllLoaded(false);
-        isLoadingSync.current = false; // Reset sync loading flag when resetting
-    }, [props.resetTrigger]);
+    }, [renderItems.length, allLoaded, loadMore, loading]);
     // console.log('existing tasks', items.length);
     // console.log('rendering tasks', renderItems.length);
-    return (react_1.default.createElement("div", { id: "scrollableDiv", style: props.lazyListStyle },
-        react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: renderItems.length, next: loadMore, hasMore: !allLoaded, scrollThreshold: props.scrollThreshold, loader: props.loadingIndicator ??
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "d-flex justify-content-center" },
-                        react_1.default.createElement("div", null, "loading..."))), endMessage: props.endOfList ??
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "d-flex justify-content-center" },
-                        react_1.default.createElement("i", null, "end of list"))) }, props.renderItems(renderItems))));
+    return ((0, jsx_runtime_1.jsx)("div", { id: "scrollableDiv", style: props.lazyListStyle, children: (0, jsx_runtime_1.jsx)(react_infinite_scroll_component_1.default, { dataLength: renderItems.length, next: loadMore, hasMore: !allLoaded, scrollThreshold: props.scrollThreshold, loader: props.loadingIndicator ?? ((0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", children: (0, jsx_runtime_1.jsx)("div", { children: "loading..." }) })), endMessage: props.endOfList ?? ((0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", children: (0, jsx_runtime_1.jsx)("i", { children: "end of list" }) })), children: props.renderItems(renderItems) }) }));
 }

package/dist/components/list-screen.d.ts

@@ -1,8 +1,5 @@
-import { DataFilter, SortBy, Table } from "@peers-app/peers-sdk";
-import React from 'react';
-interface IProps<T extends {
-    [key: string]: any;
-}> {
+import { type DataFilter, type SortBy, type Table } from "@peers-app/peers-sdk";
+interface IProps<T extends Record<string, unknown>> {
     table: Table<T>;
     newRecord: (text: string) => Promise<T>;
     getFilter?: (text: string) => DataFilter<T>;
@@ -10,7 +7,5 @@ interface IProps<T extends {
     renderItem: (record: T) => JSX.Element;
     placeholderName?: string;
 }
-export declare function ListScreen<T extends {
-    [key: string]: any;
-}>(props: IProps<T>): React.JSX.Element;
+export declare function ListScreen<T extends Record<string, unknown>>(props: IProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};