@vuu-ui/vuu-data-react 3.3.11 → 4.0.0-alpha.1

package/package.json

@@ -1,7 +1,8 @@
 {
-  "version": "3.3.11",
+  "version": "4.0.0-alpha.1",
   "main": "./src/index.js",
   "author": "heswell",
+  "type": "module",
   "license": "Apache-2.0",
   "scripts": {
     "build:dev": "node ../../scripts/run-build.mjs",
@@ -10,24 +11,25 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.3.11",
-    "@vuu-ui/vuu-filter-types": "3.3.11",
-    "@vuu-ui/vuu-protocol-types": "3.3.11",
-    "@vuu-ui/vuu-table-types": "3.3.11"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.3.11",
-    "@vuu-ui/vuu-data-remote": "3.3.11",
-    "@vuu-ui/vuu-filter-parser": "3.3.11",
-    "@vuu-ui/vuu-filters": "3.3.11",
-    "@vuu-ui/vuu-layout": "3.3.11",
-    "@vuu-ui/vuu-notifications": "3.3.11",
-    "@vuu-ui/vuu-ui-controls": "3.3.11",
-    "@vuu-ui/vuu-utils": "3.3.11",
-    "@vuu-ui/vuu-table": "3.3.11",
-    "@salt-ds/core": "1.54.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-filters": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-notifications": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.1",
+    "@salt-ds/core": "1.67.0",
     "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1"
+    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/core": "4.0.0-alpha.1"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -47,6 +49,5 @@
   },
   "module": "./src/index.js",
   "name": "@vuu-ui/vuu-data-react",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/datasource-provider/VuuDataSourceProvider.js

@@ -1,17 +1,24 @@
 import { jsx } from "react/jsx-runtime";
+import { DataProvider, useOptionalVuuConnectionId } from "@vuu-ui/core";
 import { ConnectionManager, VuuDataSource } from "@vuu-ui/vuu-data-remote";
-import { DataProvider } from "@vuu-ui/vuu-utils";
-import { useAutoLoginToVuuServer } from "./useAutoLoginToVuuServer.js";
-const getServerAPI = ()=>ConnectionManager.serverAPI;
-const VuuDataSourceProvider = ({ authenticate, autoConnect = false, autoLogin = false, children, websocketUrl })=>{
-    useAutoLoginToVuuServer({
-        authenticate,
-        autoConnect,
-        autoLogin,
-        websocketUrl
-    });
+import { useMemo } from "react";
+const VuuDataSourceProvider = ({ children })=>{
+    const connectionId = useOptionalVuuConnectionId() ?? "portal";
+    const BoundVuuDataSource = useMemo(()=>class extends VuuDataSource {
+            constructor(props){
+                super({
+                    ...props,
+                    connectionId
+                });
+            }
+        }, [
+        connectionId
+    ]);
+    const getServerAPI = useMemo(()=>()=>ConnectionManager.serverAPIFor(connectionId), [
+        connectionId
+    ]);
     return /*#__PURE__*/ jsx(DataProvider, {
-        VuuDataSource: VuuDataSource,
+        VuuDataSource: BoundVuuDataSource,
         getServerAPI: getServerAPI,
         isLocalData: false,
         children: children

package/src/hooks/useSessionDataSource.js

@@ -1,4 +1,4 @@
-import { useData } from "@vuu-ui/vuu-utils";
+import { useData } from "@vuu-ui/core";
 import { useCallback, useRef } from "react";
 const sessionState = new Map();
 const useSessionDataSource = (props)=>{

package/src/hooks/useVuuTables.js

@@ -1,16 +1,8 @@
-import { useData } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useState } from "react";
+import { useData } from "@vuu-ui/core";
+import { useEffect, useState } from "react";
 const useVuuTables = ()=>{
     const [tableSchemas, setTableSchemas] = useState();
     const { getServerAPI } = useData();
-    const buildTables = useCallback((schemas)=>{
-        const vuuTables = new Map();
-        schemas.forEach((schema)=>{
-            const { module, table } = schema.table;
-            vuuTables.set(`${module}:${table}`, schema);
-        });
-        return vuuTables;
-    }, []);
     useEffect(()=>{
         async function fetchTableMetadata() {
             try {
@@ -24,7 +16,6 @@ const useVuuTables = ()=>{
         }
         fetchTableMetadata();
     }, [
-        buildTables,
         getServerAPI
     ]);
     return tableSchemas;

package/types/data-editing/EditForm.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from "react";
-import { EditFormHookProps } from "./useEditForm";
+import type { HTMLAttributes } from "react";
+import { type EditFormHookProps } from "./useEditForm";
 export interface EditFormProps extends EditFormHookProps, Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
 }
-export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react").JSX.Element;

package/types/data-editing/UnsavedChangesReport.d.ts

@@ -3,4 +3,4 @@ export interface UnsavedChangesReportProps<T extends Entity = Entity> {
     entity: T;
     editedEntity: T;
 }
-export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react").JSX.Element;

package/types/data-editing/get-data-item-edit-control.d.ts

@@ -34,4 +34,4 @@ export interface DataItemEditControlProps {
     variant?: FilterControlVariant;
 }
 export type ValidationStatus = "initial" | true | string;
-export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;

package/types/data-editing/useEditForm.d.ts

@@ -1,6 +1,6 @@
 import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
-import { CommitHandler, Entity } from "@vuu-ui/vuu-utils";
-import { FocusEventHandler, SyntheticEvent } from "react";
+import { type CommitHandler, type Entity } from "@vuu-ui/vuu-utils";
+import { type ChangeEventHandler, type FocusEventHandler } from "react";
 export interface EditFormHookProps {
     dataSource?: DataSource;
     formFieldDescriptors: DataValueDescriptor[];
@@ -14,7 +14,7 @@ export declare const useEditForm: ({ dataSource, formFieldDescriptors, onSubmit,
     isClean: boolean;
     ok: boolean;
     onCancel: () => Promise<void>;
-    onChange: (evt: SyntheticEvent<HTMLInputElement>) => void;
+    onChange: ChangeEventHandler<HTMLElement>;
     onCommit: CommitHandler<HTMLElement>;
     onFocus: FocusEventHandler;
     onSubmit: () => Promise<void>;

package/types/datasource-provider/VuuDataSourceProvider.d.ts

@@ -1,17 +1,8 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 /**
- * DataSource Providers inject a DataSource constructor, made available
- * to clients via the useData hook. This provider offers the standard
- * VuuDataSource, which will source data from a remote vuu server.
- *
- * In production code, it will generally be used without props, authentication
- * and connection to vuu server will be handled elsewhere. The props are
- * useful for rendering standalone components.
+ * Supplies the standard VUU data-source implementation. Authentication and
+ * websocket lifecycle are handled by AuthenticationProvider.
  */
-export declare const VuuDataSourceProvider: ({ authenticate, autoConnect, autoLogin, children, websocketUrl, }: {
-    authenticate?: boolean;
-    autoConnect?: boolean;
-    autoLogin?: boolean;
+export declare const VuuDataSourceProvider: ({ children, }: {
     children: ReactNode;
-    websocketUrl?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/types/lost-connection-indicator/LostConnectionIndicator.d.ts

@@ -1 +1 @@
-export declare const LostConnectionIndicator: () => import("react/jsx-runtime").JSX.Element;
+export declare const LostConnectionIndicator: () => import("react").JSX.Element;

package/types/session-editing-form/SessionEditingForm.d.ts

@@ -21,4 +21,4 @@ export interface SessionEditingFormProps extends HTMLAttributes<HTMLDivElement>
     dataSource?: DataSource;
     schema?: TableSchema;
 }
-export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react").JSX.Element;

package/src/datasource-provider/useAutoLoginToVuuServer.js

@@ -1,42 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ConnectionManager, authenticate as vuu_data_remote_authenticate } from "@vuu-ui/vuu-data-remote";
-import { useEffect, useState } from "react";
-const useAutoLoginToVuuServer = ({ authenticate = true, autoConnect = true, secure = true, token: tokenProp = "no-token", user = "steve", websocketUrl } = {})=>{
-    const [errorMessage, setErrorMessage] = useState("");
-    useEffect(()=>{
-        const connect = async ()=>{
-            try {
-                let token = tokenProp;
-                if (authenticate) {
-                    const response = await vuu_data_remote_authenticate(user, "xyz", "/api/authn");
-                    token = response.token;
-                }
-                const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
-                ConnectionManager.connect({
-                    url,
-                    token
-                });
-            } catch (e) {
-                if (e instanceof Error) {
-                    console.error(e.message);
-                    setErrorMessage(e.message);
-                }
-            }
-        };
-        if (autoConnect) connect();
-        return ()=>{
-            if (autoConnect) ConnectionManager.disconnect();
-        };
-    }, [
-        authenticate,
-        autoConnect,
-        secure,
-        tokenProp,
-        user,
-        websocketUrl
-    ]);
-    if (errorMessage) return /*#__PURE__*/ jsx("p", {
-        children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example."
-    });
-};
-export { useAutoLoginToVuuServer };