@vuu-ui/vuu-data-react 3.5.6 → 3.5.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.6",
+  "version": "3.5.8",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,21 +10,21 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.6",
-    "@vuu-ui/vuu-filter-types": "3.5.6",
-    "@vuu-ui/vuu-protocol-types": "3.5.6",
-    "@vuu-ui/vuu-table-types": "3.5.6"
+    "@vuu-ui/vuu-data-types": "3.5.8",
+    "@vuu-ui/vuu-filter-types": "3.5.8",
+    "@vuu-ui/vuu-protocol-types": "3.5.8",
+    "@vuu-ui/vuu-table-types": "3.5.8"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.6",
-    "@vuu-ui/vuu-data-remote": "3.5.6",
-    "@vuu-ui/vuu-filter-parser": "3.5.6",
-    "@vuu-ui/vuu-filters": "3.5.6",
-    "@vuu-ui/vuu-layout": "3.5.6",
-    "@vuu-ui/vuu-notifications": "3.5.6",
-    "@vuu-ui/vuu-ui-controls": "3.5.6",
-    "@vuu-ui/vuu-utils": "3.5.6",
-    "@vuu-ui/vuu-table": "3.5.6",
+    "@vuu-ui/vuu-context-menu": "3.5.8",
+    "@vuu-ui/vuu-data-remote": "3.5.8",
+    "@vuu-ui/vuu-filter-parser": "3.5.8",
+    "@vuu-ui/vuu-filters": "3.5.8",
+    "@vuu-ui/vuu-layout": "3.5.8",
+    "@vuu-ui/vuu-notifications": "3.5.8",
+    "@vuu-ui/vuu-ui-controls": "3.5.8",
+    "@vuu-ui/vuu-utils": "3.5.8",
+    "@vuu-ui/vuu-table": "3.5.8",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"

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

@@ -90,6 +90,7 @@ const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitO
         className: className,
         column: dataDescriptor.name,
         "data-edit-control": true,
+        disableTypeahead: true,
         labels: labels,
         onCommit: onCommit,
         table: table,

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+import { 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;

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

@@ -0,0 +1,6 @@
+import { Entity } from "@vuu-ui/vuu-utils";
+export interface UnsavedChangesReportProps<T extends Entity = Entity> {
+    entity: T;
+    editedEntity: T;
+}
+export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react").JSX.Element;

package/types/src/data-editing/edit-rule-validation-checker.d.ts

@@ -0,0 +1,4 @@
+import type { DataValueDescriptor, DataValueValidationChecker, EditPhase, EditRuleValidationSuccessResult, EditValidationRule } from "@vuu-ui/vuu-data-types";
+export declare const OK: EditRuleValidationSuccessResult;
+export declare function getEditValidationRules(descriptor: DataValueDescriptor, editPhase: EditPhase | "*"): EditValidationRule[];
+export declare const buildValidationChecker: (rules: EditValidationRule[]) => DataValueValidationChecker;

package/types/src/data-editing/edit-validation-rules.d.ts

@@ -0,0 +1 @@
+export declare const registerRules: () => void;

package/types/src/data-editing/form-edit-state.d.ts

@@ -0,0 +1,7 @@
+import { Entity } from "@vuu-ui/vuu-utils";
+export type FormEditState = {
+    isClean: boolean;
+    editedFields: string[];
+};
+export declare const CLEAN_FORM: FormEditState;
+export declare const buildFormEditState: (entity: Entity | undefined, newEntity: Entity) => FormEditState;

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

@@ -0,0 +1,37 @@
+import type { DataValueDescriptor, TableSchemaTable } from "@vuu-ui/vuu-data-types";
+import { type VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
+import { type CommitHandler } from "@vuu-ui/vuu-utils";
+import type { InputProps } from "@salt-ds/core";
+/**
+ * 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
+ * 'search' to render a search icon and require at least one character to be entered.
+ * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists
+ */
+export type FilterControlVariant = "search" | "pick" | "toggle";
+export interface DataItemEditControlProps {
+    InputProps?: Partial<InputProps>;
+    TypeaheadProps?: Pick<VuuTypeaheadInputProps, "highlightFirstSuggestion" | "minCharacterCountToTriggerSuggestions" | "selectOnTab">;
+    className?: string;
+    commitOnBlur?: boolean;
+    commitWhenCleared?: boolean;
+    /**
+     * A table column or form field Descriptor.
+     */
+    dataDescriptor: DataValueDescriptor;
+    editOperation?: "insert" | "update";
+    errorMessage?: string;
+    onCommit: CommitHandler<HTMLElement>;
+    table?: TableSchemaTable;
+    /**
+     * Where provided, only these values will be offered as suggestions.
+     * 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.
+     */
+    values?: string[];
+    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;

package/types/src/data-editing/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./get-data-item-edit-control";
+export * from "./EditForm";
+export * from "./edit-rule-validation-checker";
+export * from "./UnsavedChangesReport";
+export * from "./useEditForm";
+export * from "./form-edit-state";

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

@@ -0,0 +1,21 @@
+import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
+import { CommitHandler, Entity } from "@vuu-ui/vuu-utils";
+import { FocusEventHandler, SyntheticEvent } from "react";
+export interface EditFormHookProps {
+    dataSource?: DataSource;
+    formFieldDescriptors: DataValueDescriptor[];
+    onSubmit?: () => void;
+}
+export declare const useEditForm: ({ dataSource, formFieldDescriptors, onSubmit, }: EditFormHookProps) => {
+    editedFields: string[];
+    editEntity: Entity | undefined;
+    errorMessages: Record<string, string>;
+    formFieldsContainerRef: import("react").RefObject<HTMLDivElement | null>;
+    isClean: boolean;
+    ok: boolean;
+    onCancel: () => Promise<void>;
+    onChange: (evt: SyntheticEvent<HTMLInputElement>) => void;
+    onCommit: CommitHandler<HTMLElement>;
+    onFocus: FocusEventHandler;
+    onSubmit: () => Promise<void>;
+};

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

@@ -0,0 +1,17 @@
+import { 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.
+ */
+export declare const VuuDataSourceProvider: ({ authenticate, autoConnect, autoLogin, children, websocketUrl, }: {
+    authenticate?: boolean;
+    autoConnect?: boolean;
+    autoLogin?: boolean;
+    children: ReactNode;
+    websocketUrl?: string;
+}) => import("react").JSX.Element;

package/types/src/datasource-provider/index.d.ts

@@ -0,0 +1 @@
+export * from "./VuuDataSourceProvider";

package/types/src/datasource-provider/useAutoLoginToVuuServer.d.ts

@@ -0,0 +1,20 @@
+export declare const useAutoLoginToVuuServer: ({ authenticate, autoConnect, secure, token: tokenProp, user, websocketUrl, }?: {
+    /**
+     * if true, auth url on vuuserver will be used to get token
+     * auth url is "/api/authn"
+     */
+    authenticate?: boolean;
+    /**
+     * true by default, will go ahead and open websocket connection
+     */
+    autoConnect?: boolean;
+    autoLogin?: boolean;
+    secure?: boolean;
+    /**
+     * use with no authenticate step, to provide auth token.
+     * Used when vuu server is performing no token check
+     */
+    token?: string;
+    user?: string;
+    websocketUrl?: string;
+}) => import("react").JSX.Element | undefined;

package/types/src/hooks/useLookupValues.d.ts

@@ -0,0 +1,5 @@
+import { ColumnDescriptor, ListOption } from "@vuu-ui/vuu-table-types";
+export declare const useLookupValues: (column: ColumnDescriptor, initialValueProp: number | string) => {
+    initialValue: ListOption | null;
+    values: ListOption[];
+};

package/types/src/hooks/useSessionDataSource.d.ts

@@ -0,0 +1,8 @@
+import type { DataSource, DataSourceConfigChangeHandler, DataSourceConstructorProps } from "@vuu-ui/vuu-data-types";
+export interface SessionStateHookProps {
+    onConfigChange?: DataSourceConfigChangeHandler;
+}
+export declare const useSessionDataSource: (props?: SessionStateHookProps) => {
+    clearDataSource: (sessionKey: string, unsubscribe?: boolean) => void;
+    getDataSource: (sessionKey: string, dataSourceConstructorProps?: DataSourceConstructorProps) => DataSource;
+};

package/types/src/hooks/useTypeaheadSuggestions.d.ts

@@ -0,0 +1,4 @@
+import { SuggestionFetcher, TableSchemaTable } from "@vuu-ui/vuu-data-types";
+import { TypeaheadParams } from "@vuu-ui/vuu-protocol-types";
+export declare const getTypeaheadParams: (table: TableSchemaTable, column: string, text?: string, selectedValues?: string[]) => TypeaheadParams;
+export declare const useTypeaheadSuggestions: () => SuggestionFetcher;

package/types/src/hooks/useVisualLinks.d.ts

@@ -0,0 +1,2 @@
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+export declare const useVisualLinks: (dataSource: DataSource) => void;

package/types/src/hooks/useVuuMenuActions.d.ts

@@ -0,0 +1,39 @@
+import { type MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import { DataSource, DataSourceVisualLinkCreatedMessage, RpcResponseHandler } from "@vuu-ui/vuu-data-types";
+import type { LinkDescriptorWithLabel, VuuDataRowDto, VuuMenu, VuuMenuItem, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import type { ColumnDescriptor, TableContextMenuDef } from "@vuu-ui/vuu-table-types";
+export interface MenuActionConfig {
+    vuuMenu?: VuuMenu;
+    visualLink?: DataSourceVisualLinkCreatedMessage;
+    visualLinks?: LinkDescriptorWithLabel[];
+}
+export interface VuuMenuActionHookProps {
+    /**
+     * By default, vuuMenuActions will be handled automatically. When activated, a
+     * message will be sent to server and response will be handled here too.
+     * This prop allows client to provide a custom handler for a menu Item. This will
+     * take priority and if handler returns true, no further processing for the menu
+     * item will be handled by Vuu. This can also be used to prevent an item from being
+     * actioned, even when no custom handling is intended. If the handler returns false,
+     * Vuu will process the menuItem.
+     */
+    clientSideMenuActionHandler?: MenuActionHandler;
+    dataSource?: DataSource;
+    menuActionConfig?: MenuActionConfig;
+    onRpcResponse?: RpcResponseHandler;
+}
+export interface VuuCellContextMenuItemOptions extends VuuMenuItem {
+    rowKey: string;
+    field: string;
+    value: VuuRowDataItemType;
+}
+export interface VuuRowContextMenuItemOptions extends VuuMenuItem {
+    rowKey: string;
+    row: VuuDataRowDto;
+}
+export interface VuuSelectedRowsContextMenuItemOptions extends VuuMenuItem {
+    columns: ColumnDescriptor[];
+}
+export declare const isRowMenu: (options: VuuMenuItem) => options is VuuRowContextMenuItemOptions;
+export declare const isSelectionMenu: (options: VuuMenuItem) => options is VuuSelectedRowsContextMenuItemOptions;
+export declare const useVuuMenuActions: ({ clientSideMenuActionHandler, dataSource, onRpcResponse, }: VuuMenuActionHookProps) => TableContextMenuDef;

package/types/src/hooks/useVuuTables.d.ts

@@ -0,0 +1,2 @@
+import type { TableSchema } from "@vuu-ui/vuu-data-types";
+export declare const useVuuTables: () => TableSchema[] | undefined;

package/types/src/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./data-editing";
+export * from "./datasource-provider";
+export { useLookupValues } from "./hooks/useLookupValues";
+export { useSessionDataSource } from "./hooks/useSessionDataSource";
+export { getTypeaheadParams, useTypeaheadSuggestions, } from "./hooks/useTypeaheadSuggestions";
+export { useVisualLinks } from "./hooks/useVisualLinks";
+export { isRowMenu, isSelectionMenu, useVuuMenuActions, type MenuActionConfig, } from "./hooks/useVuuMenuActions";
+export { useVuuTables } from "./hooks/useVuuTables";
+export { useLostConnection } from "./lost-connection-indicator/useLostConnection";
+export * from "./session-editing-form";

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

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

package/types/src/lost-connection-indicator/useLostConnection.d.ts

@@ -0,0 +1 @@
+export declare const useLostConnection: () => void;

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

@@ -0,0 +1,24 @@
+import { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
+import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+import { HTMLAttributes } from "react";
+export type FormFieldDescriptor = {
+    isKeyField?: boolean;
+    label?: string;
+    name: string;
+    type: VuuColumnDataType;
+    description: string;
+    readonly?: boolean;
+    required?: boolean;
+};
+export type FormConfig = {
+    title: string;
+    key: string;
+    fields: FormFieldDescriptor[];
+};
+export interface SessionEditingFormProps extends HTMLAttributes<HTMLDivElement> {
+    config: FormConfig;
+    onClose?: () => void;
+    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;

package/types/src/session-editing-form/index.d.ts

@@ -0,0 +1 @@
+export * from "./SessionEditingForm";