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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.2",
+  "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.2",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.2"
+    "@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.2",
-    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-filters": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-layout": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-notifications": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.2",
-    "@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.2"
+    "@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",
@@ -43,8 +43,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "module": "./src/index.js",

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

@@ -1,12 +1,33 @@
 import { jsx } from "react/jsx-runtime";
 import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
-import { asTimeString, isDataValueEditable, isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { EpochTimestamp, getTemporalInfo, isDataValueEditable, isTimeDataValueWithMilliseconds, isValidTimeString, isValidTimeStringMillis, parseTemporalInput } from "@vuu-ui/vuu-utils";
 import { ToggleFilter } from "@vuu-ui/vuu-filters";
-const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, onCommit, table, values, variant })=>{
-    const handleCommitNumber = (evt, value)=>{
-        onCommit(evt, value.toString());
-    };
+const timeOfDayPattern = /^\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?$/;
+const toEpochTimestamp = (value, { encoding })=>{
+    if (("string" == typeof value || "number" == typeof value) && !timeOfDayPattern.test(`${value}`)) return EpochTimestamp.fromWire(value, encoding);
+};
+const pad = (n)=>`${n}`.padStart(2, "0");
+function toTimeString(value, timestamp, { timeZone }, milliseconds = false) {
+    if (timestamp) {
+        const { hour, minute, second, millisecond } = timestamp.getFields(timeZone);
+        const timeString = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
+        return milliseconds ? `${timeString}.${`${millisecond}`.padStart(3, "0")}` : timeString;
+    }
+    if ("string" == typeof value) if (milliseconds) {
+        const timeString = 8 === value.length ? `${value}.000` : value.slice(0, 12);
+        if (isValidTimeStringMillis(timeString)) return timeString;
+    } else {
+        const timeString = value.slice(0, 8);
+        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);
     if (!isDataValueEditable(dataDescriptor, editOperation, true)) return /*#__PURE__*/ jsx(VuuInput, {
         variant: "secondary",
         ...InputProps,
@@ -14,26 +35,72 @@ const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitO
         readOnly: true,
         "data-edit-control": true
     });
-    if (isTimeDataValue(dataDescriptor)) {
-        if (InputProps?.inputProps) {
-            const { value, onChange } = InputProps.inputProps;
-            return /*#__PURE__*/ jsx(VuuTimePicker, {
-                className: className,
-                value: asTimeString(value, true),
-                onChange: onChange,
-                onCommit: onCommit,
-                "data-edit-control": true
-            });
-        }
-    } else if (isDateTimeDataValue(dataDescriptor)) return /*#__PURE__*/ jsx(VuuDatePicker, {
+    if (temporalInfo?.kind === "time") {
+        const { value, onChange } = InputProps?.inputProps ?? {};
+        const baseValue = toEpochTimestamp(value, temporalInfo);
+        const handleCommitTime = (evt, timeString)=>{
+            if (baseValue) {
+                const timestamp = parseTemporalInput(timeString, temporalInfo, baseValue);
+                onCommit(evt, timestamp ? `${timestamp.toWire(temporalInfo.encoding)}` : "");
+            } else onCommit(evt, timeString);
+        };
+        return isTimeDataValueWithMilliseconds(dataDescriptor) ? /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            milliseconds: true,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo, true),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        }) : /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        });
+    }
+    if (temporalInfo) {
+        const baseValue = toEpochTimestamp(InputProps?.inputProps?.value, temporalInfo);
+        const handleCommitDate = (evt, startOfDayMillis)=>{
+            let timestamp = EpochTimestamp.fromMillis(startOfDayMillis);
+            if (baseValue && "datetime" === temporalInfo.kind) {
+                const { year, month, day } = timestamp.getFields(temporalInfo.timeZone);
+                const { hour, minute, second, millisecond } = baseValue.getFields(temporalInfo.timeZone);
+                timestamp = EpochTimestamp.fromFields({
+                    year,
+                    month,
+                    day,
+                    hour,
+                    minute,
+                    second,
+                    millisecond
+                }, temporalInfo.timeZone, baseValue.subMilliNanos);
+            }
+            onCommit(evt, `${timestamp.toWire(temporalInfo.encoding)}`);
+        };
+        return /*#__PURE__*/ jsx(VuuDatePicker, {
+            className: className,
+            onCommit: handleCommitDate,
+            timeZone: temporalInfo.timeZone,
+            value: baseValue,
+            "data-edit-control": true
+        });
+    }
+    if ("toggle" === variant && "boolean" === dataDescriptor.serverDataType) return /*#__PURE__*/ jsx(ToggleFilter, {
         className: className,
-        onCommit: handleCommitNumber,
-        "data-edit-control": true
+        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"
     });
-    else if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
+    if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
         className: className,
         column: dataDescriptor.name,
         "data-edit-control": true,
+        labels: labels,
         onCommit: onCommit,
         table: table,
         values: values,

package/src/data-editing/useEditForm.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import { useModal } from "@vuu-ui/core";
 import { Range, buildColumnMap, dataSourceRowToEntity, messageHasDataRows, queryClosest } from "@vuu-ui/vuu-utils";
 import { Button } from "@salt-ds/core";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { UnsavedChangesReport } from "./UnsavedChangesReport.js";
 import { buildValidationChecker, getEditValidationRules } from "./edit-rule-validation-checker.js";
 import { CLEAN_FORM, buildFormEditState } from "./form-edit-state.js";
-import { useModal } from "@vuu-ui/vuu-ui-controls";
 const CLEAN_VALIDATION = {
     ok: true,
     messages: {}

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/hooks/useVuuMenuActions.js

@@ -5,9 +5,9 @@ import { getFilterPredicate } from "@vuu-ui/vuu-filter-parser";
 import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
 import { BulkEditPanel, isTableLocation } from "@vuu-ui/vuu-table";
 import { getLayoutComponent, isActionMessage, isCustomComponentActionMessage, isSessionTableActionMessage, useData } from "@vuu-ui/vuu-utils";
+import { useModal } from "@vuu-ui/core";
 import { useCallback } from "react";
 import { SessionEditingForm } from "../session-editing-form/index.js";
-import { useModal } from "@vuu-ui/vuu-ui-controls";
 const isRoot = (menu)=>"ROOT" === menu.name;
 const isCellMenu = (options)=>"cell" === options.context;
 const isRowMenu = (options)=>"row" === options.context;

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
@@ -21,6 +22,11 @@ export interface DataItemEditControlProps {
     dataDescriptor: DataValueDescriptor;
     editOperation?: "insert" | "update";
     errorMessage?: string;
+    /**
+     * Optional labels, only used with 'toggle' variant. If provided, must
+     * have same number of items as values. Defaults to values.
+     */
+    labels?: string[];
     onCommit: CommitHandler<HTMLElement>;
     table?: TableSchemaTable;
     /**
@@ -28,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, 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;