@vuu-ui/vuu-data-react 0.13.6 → 0.13.8

package/esm/index.js

@@ -1,16 +1,1536 @@
-export { getDataItemEditControl } from './data-editing/get-data-item-edit-control.js';
-export { EditForm } from './data-editing/EditForm.js';
-export { OK, buildValidationChecker, getEditValidationRules } from './data-editing/edit-rule-validation-checker.js';
-export { UnsavedChangesReport } from './data-editing/UnsavedChangesReport.js';
-export { useEditForm } from './data-editing/useEditForm.js';
-export { CLEAN_FORM, buildFormEditState } from './data-editing/form-edit-state.js';
-export { RestDataSourceProvider, isRestDataSourceExtension } from './datasource-provider/RestDataSourceProvider.js';
-export { VuuDataSourceProvider } from './datasource-provider/VuuDataSourceProvider.js';
-export { useLookupValues } from './hooks/useLookupValues.js';
-export { useSessionDataSource } from './hooks/useSessionDataSource.js';
-export { isRowMenu, isSelectionMenu, useVuuMenuActions } from './hooks/useVuuMenuActions.js';
-export { useVuuTables } from './hooks/useVuuTables.js';
-export { useVisualLinks } from './hooks/useVisualLinks.js';
-export { getTypeaheadParams, useTypeaheadSuggestions } from './hooks/useTypeaheadSuggestions.js';
-export { SessionEditingForm } from './session-editing-form/SessionEditingForm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VuuInput, VuuDatePicker, VuuTypeaheadInput, IconButton } from '@vuu-ui/vuu-ui-controls';
+import { isDateTimeDataValue, isTypeDescriptor, getEditRuleValidator, registerComponent, viewportRpcRequest, buildColumnMap, Range, messageHasDataRows, dataSourceRowToEntity, queryClosest, isObject, DataProvider, useShellContext, isValueListRenderer, getSelectedOption, isLookupRenderer, useData, isConfigChanged, getTypedValue, shallowEquals, vuuEditCellRequest, isErrorResponse, isActionMessage, toColumnName, hasShowNotificationAction, isOpenBulkEditResponse, isSessionTableActionMessage, dataSourceRowToDataRowDto, metadataKeys } from '@vuu-ui/vuu-utils';
+import { Button, FormField, FormFieldLabel, useIdMemo, FormFieldHelperText, Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useDialogContext, useNotifications } from '@vuu-ui/vuu-popups';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { RestDataSource, ConnectionManager, authenticate, VuuDataSource } from '@vuu-ui/vuu-data-remote';
+import { useViewContext } from '@vuu-ui/vuu-layout';
+import { isGroupMenuItemDescriptor } from '@vuu-ui/vuu-context-menu';
+import { getFilterPredicate } from '@vuu-ui/vuu-filter-parser';
+import { isTableLocation, BulkEditDialog, BulkEditPanel } from '@vuu-ui/vuu-table';
+
+const getDataItemEditControl = ({
+  InputProps: InputProps2,
+  TypeaheadProps,
+  commitWhenCleared,
+  dataDescriptor,
+  errorMessage,
+  onCommit,
+  table
+}) => {
+  const handleCommitNumber = (evt, value) => {
+    onCommit(evt, value.toString());
+  };
+  if (dataDescriptor.editable === false) {
+    return /* @__PURE__ */ jsx(
+      VuuInput,
+      {
+        variant: "secondary",
+        ...InputProps2,
+        onCommit,
+        readOnly: true
+      }
+    );
+  } else if (isDateTimeDataValue(dataDescriptor)) {
+    return /* @__PURE__ */ jsx(VuuDatePicker, { onCommit: handleCommitNumber });
+  } else if (dataDescriptor.serverDataType === "string" && table) {
+    return /* @__PURE__ */ jsx(
+      VuuTypeaheadInput,
+      {
+        ...InputProps2,
+        ...TypeaheadProps,
+        column: dataDescriptor.name,
+        onCommit,
+        table
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    VuuInput,
+    {
+      variant: "secondary",
+      ...InputProps2,
+      commitWhenCleared,
+      onCommit,
+      errorMessage
+    }
+  );
+};
+
+const OK = { ok: true };
+const NO_VALIDATION_RULES = [];
+function getEditValidationRules(descriptor, editPhase) {
+  if (isTypeDescriptor(descriptor.type)) {
+    return editPhase === "*" ? descriptor.type.rules ?? [] : descriptor.type.rules?.filter(
+      ({ phase: a = "commit" }) => a === editPhase
+    ) ?? NO_VALIDATION_RULES;
+  }
+  return NO_VALIDATION_RULES;
+}
+const buildValidationChecker = (rules) => (value, editPhase) => applyRules(rules, value, editPhase);
+function applyRules(rules, value, editPhase = "commit") {
+  const result = { ok: true };
+  for (const rule of rules) {
+    const { phase = "commit" } = rule;
+    if (editPhase === "*" || phase === editPhase) {
+      const applyRuleToValue = getEditRuleValidator(rule.name);
+      if (applyRuleToValue) {
+        const res = applyRuleToValue(rule, value);
+        if (!res.ok) {
+          result.ok = false;
+          (result.messages ?? (result.messages = [])).push(res.message);
+        }
+      } else {
+        throw Error(
+          `editable-utils applyRules, no validator registered for rule '${rule.name}'`
+        );
+      }
+    }
+  }
+  return result;
+}
+
+const isString = (value) => typeof value === "string";
+const NUMERIC = /^(?:[0-9]|\.)+$/;
+const CharValidatorNumeric = (rule, value) => {
+  if (isString(value)) {
+    if (value.trim() === "") {
+      return OK;
+    } else if (value.match(NUMERIC)) {
+      return OK;
+    }
+  }
+  return { ok: false, message: "only numeric characters are permitted" };
+};
+const ValueValidatorInteger = (rule, value) => {
+  if (isString(value)) {
+    if (value.trim() === "") {
+      return OK;
+    } else {
+      if (!value.match(NUMERIC)) {
+        return {
+          ok: false,
+          message: "value must be an integer, invalid character"
+        };
+      }
+      if (parseFloat(value) === parseInt(value)) {
+        return OK;
+      }
+    }
+  }
+  return { ok: false, message: "must be an integer value" };
+};
+const registerRules = () => {
+  registerComponent(
+    "char-numeric",
+    CharValidatorNumeric,
+    "data-edit-validator",
+    {}
+  );
+  registerComponent(
+    "value-integer",
+    ValueValidatorInteger,
+    "data-edit-validator",
+    {}
+  );
+};
+
+const CLEAN_FORM = {
+  isClean: true,
+  editedFields: []
+};
+const buildFormEditState = (entity, newEntity) => {
+  if (entity === void 0) {
+    return CLEAN_FORM;
+  } else {
+    const editedFields = [];
+    for (const [fieldName, value] of Object.entries(entity)) {
+      if (value !== newEntity[fieldName]) {
+        editedFields.push(fieldName);
+      }
+    }
+    return {
+      isClean: editedFields.length === 0,
+      editedFields
+    };
+  }
+};
+
+var unsavedChangesCss = ".vuuUnsavedChanges-table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.vuuUnsavedChanges-row {\n  box-sizing: content-box;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  height: 32px;\n\n  td {\n    padding: 0 var(--salt-spacing-200);\n  }\n}\n\n.vuuUnsavedChanges-fieldName {\n  text-transform: capitalize;\n}\n\n.vuuUnsavedChanges-new {\n  font-weight: bold;\n}\n";
+
+const classBase$2 = "vuuUnsavedChanges";
+const UnsavedChangesReport = ({
+  entity,
+  editedEntity
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-unsaved-changes-report",
+    css: unsavedChangesCss,
+    window: targetWindow
+  });
+  const { editedFields } = buildFormEditState(entity, editedEntity);
+  return /* @__PURE__ */ jsx("div", { className: classBase$2, children: /* @__PURE__ */ jsx("table", { className: `${classBase$2}-table`, children: /* @__PURE__ */ jsx("tbody", { children: editedFields.map((fieldName, i) => /* @__PURE__ */ jsxs("tr", { className: `${classBase$2}-row`, children: [
+    /* @__PURE__ */ jsx("td", { className: `${classBase$2}-fieldName`, children: fieldName }),
+    /* @__PURE__ */ jsx("td", { className: `${classBase$2}-old`, children: entity[fieldName] }),
+    /* @__PURE__ */ jsx("td", { className: `${classBase$2}-new`, children: editedEntity[fieldName] })
+  ] }, i)) }) }) });
+};
+
+const CLEAN_VALIDATION = {
+  ok: true,
+  messages: {}
+};
+const getValidationChecker = (descriptor, editPhase) => {
+  const rules = getEditValidationRules(descriptor, editPhase) ?? [];
+  return buildValidationChecker(rules);
+};
+const nextValidationState = (state, dataDescriptor, value) => {
+  const check = getValidationChecker(dataDescriptor, "change");
+  const result = check(value, "change");
+  const { name } = dataDescriptor;
+  const { ok: wasOk, messages: existingMessages } = state;
+  if (result.ok) {
+    if (!wasOk) {
+      const fieldsInError = Object.keys(existingMessages);
+      if (fieldsInError.includes(name)) {
+        if (fieldsInError.length === 1) {
+          return { ok: true, messages: {} };
+        } else {
+          const messages = { ...existingMessages };
+          delete messages[name];
+          return { ok: false, messages };
+        }
+      }
+    }
+  } else {
+    return {
+      ok: false,
+      messages: {
+        ...existingMessages,
+        [name]: result.messages.join("\n")
+      }
+    };
+  }
+  return state;
+};
+function find(descriptors, fieldname) {
+  const d = descriptors.find(({ name }) => name === fieldname);
+  if (d) {
+    return d;
+  }
+  throw Error(`DataValueDescriptor not found for field ${fieldname}`);
+}
+const getField$1 = (target) => {
+  const fieldElement = queryClosest(target, "[data-field]");
+  if (fieldElement) {
+    return fieldElement.dataset.field;
+  } else {
+    throw Error("no field ");
+  }
+};
+const useEditForm = ({
+  dataSource,
+  formFieldDescriptors,
+  onSubmit
+}) => {
+  const { showDialog, closeDialog } = useDialogContext();
+  const currentDataSource = useRef(void 0);
+  const formFieldsContainerRef = useRef(null);
+  const entityRef = useRef(void 0);
+  const focusedFieldRef = useRef("");
+  const originalEntityRef = useRef(void 0);
+  const formEditStateRef = useRef(CLEAN_FORM);
+  const validationStateRef = useRef({
+    ok: true,
+    messages: {}
+  });
+  const [entity, _setEntity] = useState();
+  const [, forceUpdate] = useState({});
+  const setFormEditState = useCallback((newState) => {
+    formEditStateRef.current = newState;
+  }, []);
+  const setEntity = useCallback(
+    (newEntity) => {
+      setFormEditState(
+        buildFormEditState(originalEntityRef.current, newEntity)
+      );
+      entityRef.current = newEntity;
+      _setEntity(newEntity);
+    },
+    [setFormEditState]
+  );
+  const submitChanges = useCallback(async () => {
+    const rpcResponse = await currentDataSource.current?.rpcCall?.(
+      viewportRpcRequest("VP_BULK_EDIT_SUBMIT_RPC")
+    );
+    console.log({ rpcResponse });
+  }, []);
+  const showSaveOrDiscardPrompt = useCallback(async () => {
+    const { current: currentEntity } = entityRef;
+    const { current: originalEntity } = originalEntityRef;
+    let resolver = void 0;
+    const save = async () => {
+      await submitChanges();
+      closeDialog();
+      resolver?.("saved");
+    };
+    const discard = () => {
+      closeDialog();
+      resolver?.("discarded");
+    };
+    requestAnimationFrame(() => {
+      showDialog(
+        /* @__PURE__ */ jsx(
+          UnsavedChangesReport,
+          {
+            entity: originalEntity,
+            editedEntity: currentEntity
+          }
+        ),
+        "Unsaved Changes",
+        [
+          /* @__PURE__ */ jsx(Button, { onClick: discard, children: "Discard Changes" }, "cancel"),
+          /* @__PURE__ */ jsx(Button, { onClick: save, children: "Save Changes" }, "submit")
+        ],
+        true
+        // hideCloseButton
+      );
+    });
+    return new Promise((resolve) => {
+      resolver = resolve;
+    });
+  }, [closeDialog, showDialog, submitChanges]);
+  useMemo(async () => {
+    if (dataSource) {
+      if (formEditStateRef.current.isClean === false) {
+        await showSaveOrDiscardPrompt();
+      }
+      currentDataSource.current = dataSource;
+      originalEntityRef.current = void 0;
+      const columnMap = buildColumnMap(dataSource.columns);
+      dataSource?.subscribe({ range: Range(0, 1) }, (message) => {
+        if (messageHasDataRows(message)) {
+          const [row] = message.rows;
+          if (row) {
+            const entity2 = dataSourceRowToEntity(row, columnMap);
+            if (originalEntityRef.current === void 0) {
+              originalEntityRef.current = entity2;
+              setEntity(entity2);
+            }
+            const { editedFields: editedFields2 } = buildFormEditState(
+              entityRef.current,
+              entity2
+            );
+            if (editedFields2.length === 1) {
+              setEntity(entity2);
+            }
+          }
+        }
+      });
+    }
+  }, [dataSource, setEntity, showSaveOrDiscardPrompt]);
+  const setValidationState = useCallback((state) => {
+    validationStateRef.current = state;
+    forceUpdate({});
+  }, []);
+  const handleFieldCommit = useCallback(
+    (_, value) => {
+      const { current: fieldName } = focusedFieldRef;
+      const dataDescriptor = find(formFieldDescriptors, fieldName);
+      const { current: state } = validationStateRef;
+      const newState = nextValidationState(state, dataDescriptor, value);
+      if (newState !== state) {
+        setValidationState(newState);
+      }
+      if (newState.ok && dataSource?.tableSchema) {
+        const { key } = dataSource.tableSchema;
+        const keyValue = entity?.[key];
+        dataSource?.applyEdit(keyValue, fieldName, value).then((rpcResponse) => {
+          console.log({ rpcResponse });
+        });
+      }
+    },
+    [dataSource, entity, formFieldDescriptors, setValidationState]
+  );
+  const handleFieldChange = useCallback(
+    (evt) => {
+      const { current: fieldName } = focusedFieldRef;
+      if (fieldName) {
+        const input = queryClosest(evt.target, "input", true);
+        const dataDescriptor = find(formFieldDescriptors, fieldName);
+        const value = input.value;
+        const { current: state } = validationStateRef;
+        const newState = nextValidationState(state, dataDescriptor, value);
+        if (newState !== state) {
+          setValidationState(newState);
+        }
+        setEntity({ ...entity, [fieldName]: value });
+      }
+    },
+    [entity, formFieldDescriptors, setEntity, setValidationState]
+  );
+  const handleFormSubmit = useCallback(async () => {
+    submitChanges();
+    setFormEditState(CLEAN_FORM);
+    originalEntityRef.current = entity;
+    onSubmit?.();
+    forceUpdate({});
+  }, [entity, onSubmit, setFormEditState, submitChanges]);
+  const handleFormCancel = useCallback(async () => {
+    setFormEditState(CLEAN_FORM);
+    setValidationState(CLEAN_VALIDATION);
+    setEntity(originalEntityRef.current);
+  }, [setEntity, setFormEditState, setValidationState]);
+  const handleFocus = useCallback((evt) => {
+    if (formFieldsContainerRef.current?.contains(evt.target)) {
+      const fieldName = getField$1(evt.target);
+      if (fieldName) {
+        if (fieldName) {
+          focusedFieldRef.current = fieldName;
+        }
+      }
+    }
+  }, []);
+  const {
+    current: { ok, messages: errorMessages }
+  } = validationStateRef;
+  const {
+    current: { isClean, editedFields }
+  } = formEditStateRef;
+  return {
+    editedFields,
+    editEntity: entity,
+    errorMessages,
+    formFieldsContainerRef,
+    isClean,
+    ok,
+    onCancel: handleFormCancel,
+    onChange: handleFieldChange,
+    onCommit: handleFieldCommit,
+    onFocus: handleFocus,
+    onSubmit: handleFormSubmit
+  };
+};
+
+var editFormCss = ".EditForm {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-400);\n  height: 100%;\n  padding: var(--salt-spacing-200) var(--salt-spacing-200)\n    var(--salt-spacing-200) var(--salt-spacing-400);\n  width: 100%;\n}\n\n.EditForm-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-400);\n}\n\n.EditForm-buttons {\n  align-items: center;\n  display: flex;\n  gap: var(--salt-spacing-200);\n  justify-content: flex-end;\n}\n\n.EditForm-field {\n  display: flex;\n\n  .saltFormField {\n    flex: 1 1 auto;\n  }\n\n  .EditForm-edit-indicator {\n    flex: 0 0 14px;\n    position: relative;\n  }\n\n  &[data-edited=\"true\"] {\n    .EditForm-edit-indicator:after {\n      background-color: var(--salt-content-secondary-foreground);\n      border-radius: 5px;\n      content: \"\";\n      height: 10px;\n      position: absolute;\n      top: 50%;\n      right: -3px;\n      width: 10px;\n    }\n  }\n}\n";
+
+const classBase$1 = "EditForm";
+registerRules();
+const EditForm = ({
+  className,
+  dataSource,
+  formFieldDescriptors,
+  onSubmit: onSubmitProp,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-edit-form",
+    css: editFormCss,
+    window: targetWindow
+  });
+  const {
+    editedFields,
+    editEntity,
+    errorMessages,
+    formFieldsContainerRef,
+    isClean,
+    ok,
+    onCancel,
+    onChange,
+    onCommit,
+    onFocus,
+    onSubmit
+  } = useEditForm({
+    dataSource,
+    formFieldDescriptors,
+    onSubmit: onSubmitProp
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase$1, className),
+      onFocus,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${classBase$1}-form-fields`, ref: formFieldsContainerRef, children: formFieldDescriptors.map((dataDescriptor) => {
+          const { name, label = name } = dataDescriptor;
+          const errorMessage = errorMessages[name];
+          const isEdited = !isClean && editedFields.includes(name);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${classBase$1}-field`,
+              "data-edited": isEdited,
+              children: [
+                /* @__PURE__ */ jsxs(FormField, { "data-field": name, children: [
+                  /* @__PURE__ */ jsx(FormFieldLabel, { children: label }),
+                  getDataItemEditControl({
+                    InputProps: {
+                      onChange,
+                      value: editEntity?.[name]?.toString() ?? ""
+                    },
+                    dataDescriptor,
+                    errorMessage,
+                    onCommit
+                  })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `${classBase$1}-edit-indicator` })
+              ]
+            },
+            name
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${classBase$1}-buttons`, children: [
+          /* @__PURE__ */ jsx(Button, { disabled: isClean, onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: !ok || isClean, children: "Save" })
+        ] })
+      ]
+    }
+  );
+};
+
+const serverAPI = (schemas) => ({
+  getTableList: async () => {
+    if (schemas) {
+      return {
+        tables: Object.keys(schemas).map((key) => {
+          const [module, table] = key.split(":");
+          return { module, table };
+        })
+      };
+    } else {
+      console.log(`Rest data source does not yet support table list`);
+      return { tables: [] };
+    }
+  },
+  getTableSchema: async ({ module, table }) => {
+    const schema = schemas?.[`${module}:${table}`];
+    if (schema) {
+      return schema;
+    } else {
+      throw Error(
+        `Rest data source does not yet support table schema (${table})`
+      );
+    }
+  },
+  rpcCall: async (message) => Promise.reject(
+    Error(`Rest data source does not yet support RPC (${message.type})`)
+  )
+});
+const getServerAPI$1 = (schemas) => async () => serverAPI(schemas);
+const isRestDataSourceExtension = (o) => {
+  return isObject(o) && "createHttpHeaders" in o && typeof o["createHttpHeaders"] === "function";
+};
+const getRestDataSourceClass = ({
+  createHttpHeaders
+}) => {
+  if (createHttpHeaders) {
+    return class ExtendedClass extends RestDataSource {
+      constructor(props) {
+        super(props);
+      }
+      get httpHeaders() {
+        return createHttpHeaders();
+      }
+    };
+  } else {
+    return RestDataSource;
+  }
+};
+const RestDataSourceProvider = ({
+  children,
+  createHttpHeaders,
+  tableSchemas,
+  url
+}) => {
+  RestDataSource.api = url;
+  const restDataSourceClass = getRestDataSourceClass({ createHttpHeaders });
+  return /* @__PURE__ */ jsx(
+    DataProvider,
+    {
+      VuuDataSource: restDataSourceClass,
+      dataSourceExtensions: { createHttpHeaders },
+      getServerAPI: getServerAPI$1(tableSchemas),
+      isLocalData: false,
+      tableSchemas,
+      children
+    }
+  );
+};
+
+const useAutoLoginToVuuServer = ({
+  authenticate: authenticate$1 = true,
+  autoConnect = true,
+  // autoLogin = true,
+  secure = true,
+  websocketUrl
+} = {}) => {
+  const [errorMessage, setErrorMessage] = useState("");
+  useEffect(() => {
+    const connect = async () => {
+      try {
+        let token = "no-token";
+        if (authenticate$1) {
+          token = await authenticate(
+            "steve",
+            "xyz",
+            "/api/authn"
+          );
+        }
+        const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
+        ConnectionManager.connect({
+          url,
+          token,
+          username: "steve"
+        });
+      } catch (e) {
+        if (e instanceof Error) {
+          console.error(e.message);
+          setErrorMessage(e.message);
+        }
+      }
+    };
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      if (autoConnect) {
+        ConnectionManager.disconnect();
+      }
+    };
+  }, [authenticate$1, autoConnect, secure, 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." });
+  }
+};
+
+const getServerAPI = () => ConnectionManager.serverAPI;
+const VuuDataSourceProvider = ({
+  authenticate,
+  autoConnect = false,
+  autoLogin = false,
+  children,
+  websocketUrl
+}) => {
+  useAutoLoginToVuuServer({
+    authenticate,
+    autoConnect,
+    autoLogin,
+    websocketUrl
+  });
+  return /* @__PURE__ */ jsx(
+    DataProvider,
+    {
+      VuuDataSource,
+      getServerAPI,
+      isLocalData: false,
+      children
+    }
+  );
+};
+
+const NO_VALUES = [];
+const toListOption = (value) => ({
+  label: value,
+  value
+});
+const lookupValueMap = /* @__PURE__ */ new Map();
+const loadLookupValues = ({
+  labelColumn,
+  table,
+  valueColumn
+}) => {
+  const tableKey = `${table.module}:${table.table}`;
+  const lookupValues = lookupValueMap.get(tableKey);
+  if (lookupValues) {
+    return lookupValues;
+  } else {
+    const promise = new Promise((resolve) => {
+      const columns = [valueColumn, labelColumn];
+      const columnMap = buildColumnMap(columns);
+      const dataSource = new VuuDataSource({
+        bufferSize: 0,
+        table
+      });
+      dataSource.subscribe(
+        {
+          columns,
+          range: Range(0, 100)
+        },
+        (message) => {
+          if (message.type === "viewport-update") {
+            if (message.rows) {
+              const listOptions = message.rows.map((row) => ({
+                value: row[columnMap[valueColumn]],
+                label: row[columnMap[labelColumn]]
+              }));
+              resolve(listOptions);
+              dataSource.unsubscribe();
+            }
+          }
+        }
+      );
+    });
+    lookupValueMap.set(tableKey, promise);
+    return promise;
+  }
+};
+const getLookupDetails = ({ name, type }) => {
+  if (isTypeDescriptor(type) && isLookupRenderer(type.renderer)) {
+    return type.renderer.lookup;
+  } else {
+    throw Error(
+      `useLookupValues column ${name} is not configured to use lookup values`
+    );
+  }
+};
+const useLookupValues = (column, initialValueProp) => {
+  const { type: columnType } = column;
+  const { getLookupValues } = useShellContext();
+  const initialState = useMemo(() => {
+    if (isTypeDescriptor(columnType) && isValueListRenderer(columnType?.renderer)) {
+      const values2 = columnType.renderer.values.map(toListOption);
+      return {
+        initialValue: getSelectedOption(values2, initialValueProp) ?? null,
+        values: values2
+      };
+    } else {
+      const lookupDetails = getLookupDetails(column);
+      const values2 = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
+      return {
+        initialValue: getSelectedOption(values2, initialValueProp) ?? null,
+        values: values2
+      };
+    }
+  }, [column, columnType, getLookupValues, initialValueProp]);
+  const [{ initialValue, values }, setLookupState] = useState(initialState);
+  useMemo(() => {
+    if (values === NO_VALUES) {
+      const lookupDetails = getLookupDetails(column);
+      loadLookupValues(lookupDetails).then(
+        (values2) => setLookupState({
+          initialValue: getSelectedOption(values2, initialValueProp) ?? null,
+          values: values2
+        })
+      );
+    }
+  }, [values, column, initialValueProp]);
+  return {
+    initialValue,
+    values
+  };
+};
+
+const NO_CONFIG = {};
+const useSessionDataSource = ({
+  dataSourceSessionKey = "data-source",
+  tableSchema
+}) => {
+  const { id, load, save, loadSession, saveSession, title } = useViewContext();
+  const { VuuDataSource } = useData();
+  const { "datasource-config": dataSourceConfigFromState } = useMemo(() => load?.() ?? NO_CONFIG, [load]);
+  const dataSourceConfigRef = useRef(
+    dataSourceConfigFromState
+  );
+  const handleDataSourceConfigChange = useCallback(
+    (config, _range, confirmed) => {
+      if (confirmed !== false) {
+        const { noChanges } = isConfigChanged(
+          dataSourceConfigRef.current,
+          config
+        );
+        if (noChanges === false) {
+          dataSourceConfigRef.current = config;
+          save?.(config, "datasource-config");
+        }
+      }
+    },
+    [save]
+  );
+  const dataSource = useMemo(() => {
+    let ds = loadSession?.(dataSourceSessionKey);
+    if (ds) {
+      if (dataSourceConfigFromState) {
+        ds.applyConfig(dataSourceConfigFromState, true);
+      }
+      if (ds.range.from > 0) {
+        ds.range = ds.range.reset;
+      }
+      return ds;
+    }
+    const columns = dataSourceConfigFromState?.columns ?? tableSchema.columns.map((col) => col.name);
+    ds = new VuuDataSource({
+      // bufferSize: 0,
+      viewport: id,
+      table: tableSchema.table,
+      ...dataSourceConfigRef.current,
+      columns,
+      title
+    });
+    ds.on("config", handleDataSourceConfigChange);
+    saveSession?.(ds, "data-source");
+    return ds;
+  }, [
+    VuuDataSource,
+    dataSourceConfigFromState,
+    dataSourceSessionKey,
+    handleDataSourceConfigChange,
+    id,
+    loadSession,
+    saveSession,
+    tableSchema.columns,
+    tableSchema.table,
+    title
+  ]);
+  return dataSource;
+};
+
+var sessionEditingFormCss = ".vuuSessionEditingForm {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 400px;\n}\n\n.vuuSessionEditingForm-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    gap: 3px;\n    overflow: auto;\n    padding: var(--salt-spacing-200);\n}\n\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n    font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    box-sizing: content-box;\n    display: flex;\n    justify-content: flex-end;\n    flex: 0 0 autox;\n    gap: 6px;\n    height: var(--salt-size-base);\n    margin: var(--salt-spacing-200);\n    padding-top: var(--salt-spacing-200);\n\n}\n\n.vuuSessionEditingForm-errorBanner {\n    --vuu-icon-left: 3px;\n    --vuu-icon-size: 18px;\n    --vuu-icon-top: 3px;\n    border: solid 1px var(--salt-status-error-borderColor);\n    line-height: 24px;\n    padding: 0 6px 0 26px;\n    position: relative;\n}";
+
+const classBase = "vuuSessionEditingForm";
+const getField = (fields, name) => {
+  const field = fields.find((f) => f.name === name);
+  if (field) {
+    return field;
+  } else {
+    throw Error(`SessionEditingForm, no field '${name}' found`);
+  }
+};
+const getFieldNameAndValue = ({
+  target
+}) => {
+  const formField = queryClosest(target, ".saltFormField");
+  if (formField) {
+    const {
+      dataset: { field }
+    } = formField;
+    if (field === void 0) {
+      throw Error("SessionEditingForm, form field has no field data attribute");
+    }
+    return [field, target.value];
+  } else {
+    throw Error("Form control is not enclosed in FormField");
+  }
+};
+const Status = {
+  uninitialised: 0,
+  unchanged: 1,
+  changed: 2,
+  invalid: 3
+};
+const getDataSource = (dataSource, schema) => {
+  if (dataSource) {
+    return dataSource;
+  } else if (schema) {
+    return new VuuDataSource({
+      bufferSize: 0,
+      table: schema.table,
+      columns: schema.columns.map((col) => col.name)
+    });
+  } else {
+    throw Error(
+      "SessionEditingForm: either a DataSource or a TableSchema must be provided"
+    );
+  }
+};
+const SessionEditingForm = ({
+  className,
+  config: { fields, key: keyField },
+  dataSource: dataSourceProp,
+  id: idProp,
+  onClose,
+  schema,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-session-editing-form",
+    css: sessionEditingFormCss,
+    window: targetWindow
+  });
+  const [fieldStatusValues, setFieldStatusValues] = useState({});
+  const [values, setValues] = useState();
+  const [errorMessage, setErrorMessage] = useState("");
+  const formContentRef = useRef(null);
+  const initialDataRef = useRef(void 0);
+  const dataStatusRef = useRef(Status.uninitialised);
+  const dataSource = useMemo(() => {
+    const ds = getDataSource(dataSourceProp, schema);
+    const { columns } = ds;
+    const columnMap = buildColumnMap(ds.columns);
+    const applyServerData = (data) => {
+      if (columnMap) {
+        const values2 = {};
+        for (const column of columns) {
+          values2[column] = data[columnMap[column]];
+        }
+        if (dataStatusRef.current === Status.uninitialised) {
+          dataStatusRef.current = Status.unchanged;
+          initialDataRef.current = values2;
+        }
+        setValues(values2);
+      }
+    };
+    ds.subscribe({ range: Range(0, 5) }, (message) => {
+      if (message.type === "viewport-update" && message.rows) {
+        if (dataStatusRef.current === Status.uninitialised) {
+          applyServerData(message.rows[0]);
+        } else {
+          console.log("what do we do with server updates");
+        }
+      }
+    });
+    return ds;
+  }, [dataSourceProp, schema]);
+  const id = useIdMemo(idProp);
+  const handleChange = useCallback(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      const typedValue = getTypedValue(value, type);
+      setValues((values2 = {}) => {
+        const newValues = {
+          ...values2,
+          [field]: typedValue
+        };
+        const notUpdated = shallowEquals(newValues, initialDataRef.current);
+        dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
+        return newValues;
+      });
+    },
+    [fields]
+  );
+  const handleBlur = useCallback(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const rowKey = values?.[keyField];
+      const { type } = getField(fields, field);
+      const typedValue = getTypedValue(value, type, true);
+      if (typeof rowKey === "string") {
+        dataSource.menuRpcCall(vuuEditCellRequest(rowKey, field, typedValue)).then((response) => {
+          if (isErrorResponse(response)) {
+            console.log(`edit rejected ${response.error}`);
+            setFieldStatusValues((map) => ({
+              ...map,
+              [field]: response.error
+            }));
+          } else {
+            setFieldStatusValues((map) => ({
+              ...map,
+              [field]: void 0
+            }));
+          }
+        });
+      }
+    },
+    [dataSource, fields, keyField, values]
+  );
+  const applyAction = useCallback(
+    (action) => {
+      if (action.type === "CLOSE_DIALOG_ACTION") {
+        onClose?.();
+      }
+    },
+    [onClose]
+  );
+  const handleSubmit = useCallback(async () => {
+    const rpcResponse = await dataSource.menuRpcCall({
+      type: "VP_EDIT_SUBMIT_FORM_RPC"
+    });
+    if (isErrorResponse(rpcResponse)) {
+      setErrorMessage(rpcResponse.error);
+    } else if (isActionMessage(rpcResponse)) {
+      applyAction(rpcResponse.action);
+    }
+  }, [applyAction, dataSource]);
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const getFormControl = (field) => {
+    const value = String(values?.[field.name] ?? "");
+    if (field.readonly || field.name === keyField) {
+      return /* @__PURE__ */ jsx("div", { className: `${classBase}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: `${classBase}-fieldValue`,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  useEffect(() => {
+    if (formContentRef.current) {
+      const firstInput = formContentRef.current.querySelector(
+        "input"
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          firstInput.select();
+        }, 100);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (dataSource) {
+        dataSource.unsubscribe();
+      }
+    };
+  }, [dataSource]);
+  const isDirty = dataStatusRef.current === Status.changed;
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    errorMessage ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${classBase}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${classBase}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => /* @__PURE__ */ jsxs(
+          FormField,
+          {
+            className: `${classBase}-field`,
+            "data-field": field.name,
+            necessity: field.required ? "required" : "optional",
+            readOnly: field.readonly,
+            validationStatus: fieldStatusValues[field.name] ? "error" : void 0,
+            children: [
+              /* @__PURE__ */ jsx(FormFieldLabel, { children: field?.label ?? field.description }),
+              getFormControl(field),
+              /* @__PURE__ */ jsx(FormFieldHelperText, { children: fieldStatusValues[field.name] ?? "" })
+            ]
+          },
+          field.name
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+const isRoot = (menu) => menu.name === "ROOT";
+const isCellMenu = (options) => options.context === "cell";
+const isRowMenu = (options) => options.context === "row";
+const isSelectionMenu = (options) => options.context === "selected-rows";
+const getColumnsFromOptions = (options) => {
+  if (options && typeof options === "object" && "columns" in options) {
+    return options.columns;
+  }
+};
+const isVuuMenuItem = (menu) => "rpcName" in menu;
+const isGroupMenuItem = (menu) => "menus" in menu;
+const hasFilter = ({ filter }) => typeof filter === "string" && filter.length > 0;
+const { KEY } = metadataKeys;
+const getMenuItemOptions = (menu, options) => {
+  switch (menu.context) {
+    case "cell":
+      return {
+        ...menu,
+        field: options.column.name,
+        rowKey: options.row[KEY],
+        value: options.row[options.columnMap[options.column.name]]
+      };
+    case "row":
+      return {
+        ...menu,
+        columns: options.columns,
+        row: dataSourceRowToDataRowDto(options.row, options.columnMap),
+        rowKey: options.row[KEY]
+      };
+    case "selected-rows":
+      return {
+        ...menu,
+        columns: options.columns
+      };
+    default:
+      return menu;
+  }
+};
+const vuuContextCompatibleWithTableLocation = (uiLocation, vuuContext, selectedRowCount = 0) => {
+  switch (uiLocation) {
+    case "grid":
+      if (vuuContext === "selected-rows") {
+        return selectedRowCount > 0;
+      } else {
+        return true;
+      }
+    case "header":
+      return vuuContext === "grid";
+    default:
+      return false;
+  }
+};
+const gridRowMeetsFilterCriteria = (context, row, selectedRows, filter, columnMap) => {
+  if (context === "cell" || context === "row") {
+    const filterPredicate = getFilterPredicate(columnMap, filter);
+    return filterPredicate(row);
+  } else if (context === "selected-rows") {
+    if (selectedRows.length === 0) {
+      return false;
+    } else {
+      const filterPredicate = getFilterPredicate(columnMap, filter);
+      return selectedRows.every(filterPredicate);
+    }
+  }
+  return true;
+};
+const menuShouldBeRenderedInThisContext = (menuItem, tableLocation, options) => {
+  if (isGroupMenuItem(menuItem)) {
+    return menuItem.menus.some(
+      (childMenu) => menuShouldBeRenderedInThisContext(childMenu, tableLocation, options)
+    );
+  }
+  if (!vuuContextCompatibleWithTableLocation(
+    tableLocation,
+    menuItem.context,
+    options.selectedRows?.length
+  )) {
+    return false;
+  }
+  if (tableLocation === "grid" && hasFilter(menuItem)) {
+    return gridRowMeetsFilterCriteria(
+      menuItem.context,
+      options.row,
+      options.selectedRows,
+      menuItem.filter,
+      options.columnMap
+    );
+  }
+  if (isCellMenu(menuItem) && menuItem.field !== "*") {
+    return menuItem.field === options.column.name;
+  }
+  return true;
+};
+const buildMenuDescriptorFromVuuMenu = (menu, tableLocation, options) => {
+  if (menuShouldBeRenderedInThisContext(menu, tableLocation, options)) {
+    if (isVuuMenuItem(menu)) {
+      return {
+        label: menu.name,
+        id: "MENU_RPC_CALL",
+        options: getMenuItemOptions(menu, options)
+      };
+    } else {
+      const children = menu.menus.map(
+        (childMenu) => buildMenuDescriptorFromVuuMenu(childMenu, tableLocation, options)
+      ).filter(
+        (childMenu) => childMenu !== void 0
+      );
+      if (children.length > 0) {
+        return {
+          label: menu.name,
+          children
+        };
+      }
+    }
+  }
+};
+const keyFirst = (c1, c2) => c1.isKeyField ? -1 : c2.isKeyField ? 1 : 0;
+const defaultFormConfig = {
+  fields: [],
+  key: "",
+  title: ""
+};
+const configFromSchema = (schema) => {
+  if (schema) {
+    const { columns, key } = schema;
+    return {
+      key,
+      title: `Parameters for command`,
+      fields: columns.map((col) => ({
+        description: col.name,
+        label: col.name,
+        name: col.name,
+        type: col.serverDataType,
+        isKeyField: col.name === key
+      })).sort(keyFirst)
+    };
+  }
+};
+const getFormConfig = (action) => {
+  const { tableSchema: schema } = action;
+  const config = configFromSchema(schema) ?? defaultFormConfig;
+  return {
+    config,
+    schema
+  };
+};
+const useVuuMenuActions = ({
+  clientSideMenuActionHandler,
+  dataSource,
+  onRpcResponse
+}) => {
+  const { VuuDataSource } = useData();
+  const menuBuilder = useCallback(
+    (location, options) => {
+      const descriptors = [];
+      if (dataSource) {
+        const { links, menu } = dataSource;
+        const { visualLink } = dataSource;
+        if (location === "grid" && links && !visualLink) {
+          links.forEach((linkDescriptor) => {
+            const { link, label: linkLabel } = linkDescriptor;
+            const label = linkLabel ? linkLabel : link.toTable;
+            descriptors.push({
+              label: `Link to ${label}`,
+              id: "link-table",
+              options: linkDescriptor
+            });
+          });
+        }
+        if (menu && isTableLocation(location)) {
+          const menuDescriptor = buildMenuDescriptorFromVuuMenu(
+            menu,
+            location,
+            options
+          );
+          if (isRoot(menu) && isGroupMenuItemDescriptor(menuDescriptor)) {
+            descriptors.push(...menuDescriptor.children);
+          } else if (menuDescriptor) {
+            descriptors.push(menuDescriptor);
+          }
+        }
+      } else {
+        throw Error("useVuuMenuActions no dataSource provided");
+      }
+      return descriptors;
+    },
+    [dataSource]
+  );
+  const { showDialog, closeDialog } = useDialogContext();
+  const showNotification = useNotifications();
+  const showBulkEditDialog = useCallback(
+    (ds, table, columns) => {
+      const sessionDs = new VuuDataSource({
+        columns: columns?.map(toColumnName),
+        table,
+        viewport: table.table
+      });
+      const handleClose = () => {
+        sessionDs.unsubscribe();
+        closeDialog();
+      };
+      showDialog(
+        /* @__PURE__ */ jsx(
+          BulkEditDialog,
+          {
+            columns,
+            sessionDs,
+            parentDs: ds,
+            closeDialog: handleClose
+          }
+        ),
+        "Bulk Amend"
+      );
+      return true;
+    },
+    [VuuDataSource, closeDialog, showDialog]
+  );
+  const showSessionEditingForm = useCallback(
+    (ds, action) => {
+      const { tableSchema } = action;
+      if (tableSchema) {
+        const formConfig = getFormConfig(action);
+        showDialog(
+          /* @__PURE__ */ jsx(SessionEditingForm, { ...formConfig, onClose: closeDialog }),
+          "Set Parameters"
+        );
+      }
+      const sessionDs = ds.createSessionDataSource?.(action.table);
+      const handleSubmit = () => {
+        sessionDs?.rpcCall?.(viewportRpcRequest("VP_BULK_EDIT_SUBMIT_RPC"));
+        closeDialog();
+      };
+      const handleChange = (isValid) => {
+        console.log("placeholder: ", isValid);
+      };
+      if (sessionDs) {
+        showDialog(
+          /* @__PURE__ */ jsx(
+            BulkEditPanel,
+            {
+              dataSource: sessionDs,
+              onSubmit: handleSubmit,
+              parentDs: ds,
+              onValidationStatusChange: handleChange
+            }
+          ),
+          "Multi Row Edit",
+          [
+            /* @__PURE__ */ jsx(Button, { onClick: closeDialog, children: "Cancel" }, "cancel"),
+            /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, children: "Save" }, "submit")
+          ]
+        );
+      }
+    },
+    [closeDialog, showDialog]
+  );
+  const getMenuRpcRequest = (options) => {
+    const { rpcName } = options;
+    if (isCellMenu(options)) {
+      return {
+        field: options.field,
+        rowKey: options.rowKey,
+        rpcName,
+        value: options.value,
+        type: "VIEW_PORT_MENU_CELL_RPC"
+      };
+    } else if (isRowMenu(options)) {
+      return {
+        rowKey: options.rowKey,
+        row: options.row,
+        rpcName,
+        type: "VIEW_PORT_MENU_ROW_RPC"
+      };
+    } else if (isSelectionMenu(options)) {
+      return {
+        rpcName,
+        type: "VIEW_PORT_MENUS_SELECT_RPC"
+      };
+    } else {
+      return {
+        rpcName,
+        type: "VIEW_PORT_MENU_TABLE_RPC"
+      };
+    }
+  };
+  const menuActionHandler = useCallback(
+    (menuItemId, options) => {
+      if (clientSideMenuActionHandler?.(menuItemId, options)) {
+        return true;
+      } else if (menuItemId === "MENU_RPC_CALL") {
+        const rpcRequest = getMenuRpcRequest(options);
+        dataSource?.menuRpcCall(rpcRequest).then((rpcResponse) => {
+          if (rpcResponse) {
+            if (onRpcResponse?.(rpcResponse) === true) {
+              return true;
+            }
+            if (isActionMessage(rpcResponse)) {
+              if (hasShowNotificationAction(rpcResponse)) {
+                const {
+                  action: { message, title = "Success" }
+                } = rpcResponse;
+                showNotification({
+                  type: "success",
+                  body: message,
+                  header: title
+                });
+              } else if (isOpenBulkEditResponse(rpcResponse)) {
+                showBulkEditDialog(
+                  dataSource,
+                  rpcResponse.action.table,
+                  getColumnsFromOptions(options)
+                );
+              } else if (isSessionTableActionMessage(rpcResponse)) {
+                showSessionEditingForm(dataSource, rpcResponse.action);
+              }
+            }
+          }
+        });
+        return true;
+      } else if (menuItemId === "link-table") {
+        if (dataSource) {
+          dataSource.visualLink = options;
+        }
+        return true;
+      } else {
+        console.log(
+          `useViewServer handleMenuAction,  can't handle action type ${menuItemId}`
+        );
+      }
+      return false;
+    },
+    [
+      clientSideMenuActionHandler,
+      dataSource,
+      onRpcResponse,
+      showBulkEditDialog,
+      showNotification,
+      showSessionEditingForm
+    ]
+  );
+  return {
+    menuBuilder,
+    menuActionHandler
+  };
+};
+
+const useVuuTables = () => {
+  const [tableSchemas, setTableSchemas] = useState();
+  const { getServerAPI } = useData();
+  const buildTables = useCallback((schemas) => {
+    const vuuTables = /* @__PURE__ */ new Map();
+    schemas.forEach((schema) => {
+      const { module, table } = schema.table;
+      vuuTables.set(`${module}:${table}`, schema);
+    });
+    return vuuTables;
+  }, []);
+  useEffect(() => {
+    async function fetchTableMetadata() {
+      try {
+        const server = await getServerAPI();
+        const { tables } = await server.getTableList();
+        const tableSchemas2 = await Promise.all(
+          tables.map((vuuTable) => server.getTableSchema(vuuTable))
+        );
+        setTableSchemas(tableSchemas2);
+      } catch (err) {
+        console.warn(
+          `useVuuTables: error fetching table metadata ${String(err)}`
+        );
+      }
+    }
+    fetchTableMetadata();
+  }, [buildTables, getServerAPI]);
+  return tableSchemas;
+};
+
+const useVisualLinks = (dataSource) => {
+  const { dispatch } = useViewContext();
+  const clearVisualLinkTarget = useCallback(() => {
+    if (dataSource.visualLink) {
+      dispatch?.({
+        type: "broadcast-message",
+        message: {
+          targetId: dataSource.visualLink.parentClientVpId,
+          type: "highlight-off"
+        }
+      });
+    }
+  }, [dataSource, dispatch]);
+  const removeVisualLink = useCallback(() => {
+    if (dataSource.visualLink) {
+      dispatch?.({
+        type: "broadcast-message",
+        message: {
+          targetId: dataSource.visualLink.parentClientVpId,
+          type: "highlight-off"
+        }
+      });
+      dataSource.visualLink = void 0;
+    }
+  }, [dataSource, dispatch]);
+  const handleLinkRemoved = useCallback(() => {
+    dispatch?.({
+      type: "remove-toolbar-contribution",
+      location: "post-title"
+    });
+  }, [dispatch]);
+  const highlightVisualLinkTarget = useCallback(() => {
+    if (dataSource.visualLink) {
+      dispatch?.({
+        type: "broadcast-message",
+        message: {
+          targetId: dataSource.visualLink.parentClientVpId,
+          type: "highlight-on"
+        }
+      });
+    }
+  }, [dataSource, dispatch]);
+  const handleLinkCreated = useCallback(() => {
+    dispatch?.({
+      type: "add-toolbar-contribution",
+      location: "post-title",
+      content: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "remove-link",
+          icon: "link",
+          onClick: removeVisualLink,
+          onMouseEnter: highlightVisualLinkTarget,
+          onMouseLeave: clearVisualLinkTarget,
+          variant: "secondary"
+        }
+      )
+    });
+  }, [
+    dispatch,
+    removeVisualLink,
+    highlightVisualLinkTarget,
+    clearVisualLinkTarget
+  ]);
+  useEffect(() => {
+    dataSource.on("visual-link-created", handleLinkCreated);
+    dataSource.on("visual-link-removed", handleLinkRemoved);
+    return () => {
+      dataSource.removeListener("visual-link-created", handleLinkCreated);
+      dataSource.removeListener("visual-link-removed", handleLinkRemoved);
+    };
+  }, [dataSource, handleLinkCreated, handleLinkRemoved]);
+};
+
+const getTypeaheadParams = (table, column, text = "", selectedValues = []) => {
+  if (text !== "" && !selectedValues.includes(text.toLowerCase())) {
+    return [table, column, text];
+  }
+  return [table, column];
+};
+const useTypeaheadSuggestions = () => {
+  const { getServerAPI } = useData();
+  return useCallback(
+    async (params) => {
+      const rpcMessage = params.length === 2 ? {
+        type: "RPC_CALL",
+        service: "TypeAheadRpcHandler",
+        method: "getUniqueFieldValues",
+        params
+      } : {
+        type: "RPC_CALL",
+        service: "TypeAheadRpcHandler",
+        method: "getUniqueFieldValuesStartingWith",
+        params
+      };
+      try {
+        const serverAPI = await getServerAPI();
+        const response = await serverAPI.rpcCall(rpcMessage);
+        return response;
+      } catch (err) {
+        return false;
+      }
+    },
+    [getServerAPI]
+  );
+};
+
+export { CLEAN_FORM, EditForm, OK, RestDataSourceProvider, SessionEditingForm, UnsavedChangesReport, VuuDataSourceProvider, buildFormEditState, buildValidationChecker, getDataItemEditControl, getEditValidationRules, getTypeaheadParams, isRestDataSourceExtension, isRowMenu, isSelectionMenu, useEditForm, useLookupValues, useSessionDataSource, useTypeaheadSuggestions, useVisualLinks, useVuuMenuActions, useVuuTables };
 //# sourceMappingURL=index.js.map