@vuu-ui/vuu-data-react 4.0.0-alpha.20 → 4.0.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.21",
   "main": "./src/index.js",
   "author": "heswell",
   "type": "module",
@@ -11,25 +11,25 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.21"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filters": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-layout": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-notifications": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
-    "@vuu-ui/core": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-filters": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-notifications": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.21",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
+    "@vuu-ui/core": "4.0.0-alpha.21"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/src/data-editing/get-data-item-edit-control.js

@@ -21,6 +21,10 @@ function toTimeString(value, timestamp, { timeZone }, milliseconds = false) {
         if (isValidTimeString(timeString)) return timeString;
     }
 }
+const BOOLEAN_TOGGLE_VALUES = [
+    true,
+    false
+];
 const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, labels, onCommit, table, values, variant })=>{
     const dataVariant = variant && "toggle" !== variant ? variant : void 0;
     const temporalInfo = getTemporalInfo(dataDescriptor);
@@ -82,6 +86,16 @@ const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitO
             "data-edit-control": true
         });
     }
+    if ("toggle" === variant && "boolean" === dataDescriptor.serverDataType) return /*#__PURE__*/ jsx(ToggleFilter, {
+        className: className,
+        column: dataDescriptor.name,
+        "data-edit-control": true,
+        labels: labels,
+        onCommit: onCommit,
+        table: table,
+        values: values?.length ? values : BOOLEAN_TOGGLE_VALUES,
+        value: InputProps?.inputProps?.value ?? "all"
+    });
     if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
         className: className,
         column: dataDescriptor.name,

package/src/hooks/useLookupValues.js

@@ -1,4 +1,5 @@
-import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
+import { useData, useOptionalVuuConnectionId } from "@vuu-ui/core";
+import { DEFAULT_CONNECTION_ID } from "@vuu-ui/vuu-data-remote";
 import { Range, buildColumnMap, getSelectedOption, isLookupRenderer, isTypeDescriptor, isValueListRenderer, useShellContext } from "@vuu-ui/vuu-utils";
 import { useMemo, useState } from "react";
 const NO_VALUES = [];
@@ -7,8 +8,8 @@ const toListOption = (value)=>({
         value
     });
 const lookupValueMap = new Map();
-const loadLookupValues = ({ labelColumn, table, valueColumn })=>{
-    const tableKey = `${table.module}:${table.table}`;
+const loadLookupValues = (connectionId, VuuDataSource, { labelColumn, table, valueColumn })=>{
+    const tableKey = `${connectionId}:${table.module}:${table.table}`;
     const lookupValues = lookupValueMap.get(tableKey);
     if (lookupValues) return lookupValues;
     {
@@ -49,6 +50,8 @@ const getLookupDetails = ({ name, type })=>{
 const useLookupValues = (column, initialValueProp)=>{
     const { type: columnType } = column;
     const { getLookupValues } = useShellContext();
+    const { VuuDataSource } = useData();
+    const connectionId = useOptionalVuuConnectionId() ?? DEFAULT_CONNECTION_ID;
     const initialState = useMemo(()=>{
         if (isTypeDescriptor(columnType) && isValueListRenderer(columnType?.renderer)) {
             const values = columnType.renderer.values.map(toListOption);
@@ -75,7 +78,7 @@ const useLookupValues = (column, initialValueProp)=>{
     useMemo(()=>{
         if (values === NO_VALUES) {
             const lookupDetails = getLookupDetails(column);
-            loadLookupValues(lookupDetails).then((values)=>setLookupState({
+            loadLookupValues(connectionId, VuuDataSource, lookupDetails).then((values)=>setLookupState({
                     initialValue: getSelectedOption(values, initialValueProp) ?? null,
                     values
                 }));
@@ -83,7 +86,9 @@ const useLookupValues = (column, initialValueProp)=>{
     }, [
         values,
         column,
-        initialValueProp
+        initialValueProp,
+        connectionId,
+        VuuDataSource
     ]);
     return {
         initialValue,

package/src/lost-connection-indicator/useLostConnection.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { ConnectionManager, isConnected } from "@vuu-ui/vuu-data-remote";
-import { useCallback, useMemo, useRef } from "react";
+import { useOptionalVuuConnectionId } from "@vuu-ui/core";
+import { ConnectionManager, DEFAULT_CONNECTION_ID, isConnected } from "@vuu-ui/vuu-data-remote";
+import { useCallback, useEffect, useRef } from "react";
 import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
 import { LostConnectionIndicator } from "./LostConnectionIndicator.js";
 const useLostConnection = ()=>{
     const { hideNotification, showNotification } = useNotifications();
-    const isConnectedRef = useRef(ConnectionManager.connected);
+    const connectionId = useOptionalVuuConnectionId() ?? DEFAULT_CONNECTION_ID;
+    const isConnectedRef = useRef(ConnectionManager.connectedFor(connectionId));
     const handleConnectionStatusChange = useCallback((connectionStatus)=>{
         const { current: wasConnected } = isConnectedRef;
         isConnectedRef.current = isConnected(connectionStatus);
@@ -19,9 +21,8 @@ const useLostConnection = ()=>{
         hideNotification,
         showNotification
     ]);
-    useMemo(async ()=>{
-        ConnectionManager.on("connection-status", handleConnectionStatusChange);
-    }, [
+    useEffect(()=>ConnectionManager.onConnectionStatus(connectionId, handleConnectionStatusChange), [
+        connectionId,
         handleConnectionStatusChange
     ]);
 };

package/src/session-editing-form/SessionEditingForm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
+import { useData } from "@vuu-ui/core";
 import { Range, buildColumnMap, getTypedValue, queryClosest, shallowEquals } from "@vuu-ui/vuu-utils";
 import { Button, FormField, FormFieldHelperText, FormFieldLabel, Input, useIdMemo } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
@@ -31,7 +31,7 @@ const Status = {
     changed: 2,
     invalid: 3
 };
-const getDataSource = (dataSource, schema)=>{
+const getDataSource = (VuuDataSource, dataSource, schema)=>{
     if (dataSource) return dataSource;
     if (schema) return new VuuDataSource({
         bufferSize: 0,
@@ -53,8 +53,9 @@ const SessionEditingForm_SessionEditingForm = ({ className, config: { fields, ke
     const formContentRef = useRef(null);
     const initialDataRef = useRef(void 0);
     const dataStatusRef = useRef(Status.uninitialised);
+    const { VuuDataSource } = useData();
     const dataSource = useMemo(()=>{
-        const ds = getDataSource(dataSourceProp, schema);
+        const ds = getDataSource(VuuDataSource, dataSourceProp, schema);
         const { columns } = ds;
         const columnMap = buildColumnMap(ds.columns);
         const applyServerData = (data)=>{
@@ -76,6 +77,7 @@ const SessionEditingForm_SessionEditingForm = ({ className, config: { fields, ke
         });
         return ds;
     }, [
+        VuuDataSource,
         dataSourceProp,
         schema
     ]);

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

@@ -2,4 +2,4 @@ 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.Element;
+export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react/jsx-runtime").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.Element;
+export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,7 @@ import type { DataValueDescriptor, TableSchemaTable } from "@vuu-ui/vuu-data-typ
 import { type VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
 import { type CommitHandler } from "@vuu-ui/vuu-utils";
 import type { InputProps } from "@salt-ds/core";
+import { type ToggleFilterValue } from "@vuu-ui/vuu-filters";
 /**
  * variant can be used to provide a rendering hint to the filter control rendered.
  * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices
@@ -33,10 +34,11 @@ export interface DataItemEditControlProps {
      * They will be validated against server with Typeahead service, so
      * unavailable options are not offered.
      * Recommended for toggle filters, not usually necessary for other
-     * filter variants.
+     * filter variants. Boolean values are supported for toggle filters on
+     * boolean columns, where values default to [true, false].
      */
-    values?: string[];
+    values?: ToggleFilterValue[];
     variant?: FilterControlVariant;
 }
 export type ValidationStatus = "initial" | true | string;
-export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, labels, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;
+export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, labels, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
 import { type CommitHandler, type Entity } from "@vuu-ui/vuu-utils";
-import { type ChangeEventHandler, type FocusEventHandler } from "react";
+import { type FormEventHandler, 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: ChangeEventHandler<HTMLElement>;
+    onChange: FormEventHandler<HTMLElement>;
     onCommit: CommitHandler<HTMLElement>;
     onFocus: FocusEventHandler;
     onSubmit: () => Promise<void>;

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

@@ -5,4 +5,4 @@ import { type ReactNode } from "react";
  */
 export declare const VuuDataSourceProvider: ({ children, }: {
     children: ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export declare const LostConnectionIndicator: () => import("react").JSX.Element;
+export declare const LostConnectionIndicator: () => import("react/jsx-runtime").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.Element;
+export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react/jsx-runtime").JSX.Element;