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

package/types/TableEditSession.d.ts

@@ -0,0 +1,28 @@
+import type { RpcResult, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+export type TableEditSessionEvents = {
+    cellEditChanged: (key: string, columnName: string) => void;
+};
+/**
+ * The subset of edit session behaviour consumed by Table and its cells.
+ * Implemented by EditSession (edits staged in a session table, committed or
+ * discarded at end of session) and DirectEditSession (edits applied directly
+ * to the source table).
+ */
+export interface TableEditSession {
+    /**
+     * True while a staged edit session is in progress. Always false for
+     * DirectEditSession.
+     */
+    readonly inEditMode: boolean;
+    commit(key: string, columnName: string, originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<RpcResult>;
+    /**
+     * Invoked when user abandons an in-progress cell edit, restoring the value
+     * the cell held before editing began. Values that have only been typed, not
+     * committed, have never been sent to the server, so nothing is sent here.
+     * Any invalid edit previously recorded for the cell is discarded.
+     */
+    cancel(key: string, columnName: string, restoredValue: VuuRowDataItemType): Promise<RpcResult>;
+    isCellEdited(key: string, columnName: string): boolean;
+    on<E extends keyof TableEditSessionEvents>(event: E, listener: TableEditSessionEvents[E]): void;
+    removeListener<E extends keyof TableEditSessionEvents>(event: E, listener: TableEditSessionEvents[E]): void;
+}

package/types/UndoCellRenderer.d.ts

@@ -9,4 +9,4 @@ export declare const getUndoButtonContent: (componentProps?: UndoCellRendererCom
     text: string | undefined;
 };
 export declare const getUndoTooltipContent: (action: unknown) => "Undo delete row" | "Undo insert row" | "Undo row edits" | undefined;
-export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element | null;
+export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/types/edit-field/EditField.d.ts

@@ -0,0 +1,21 @@
+import type { DataRow } from "@vuu-ui/vuu-table-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { type OptionMap } from "../lookup-values/useLookupValues";
+import "./EditField.css";
+export type TextFieldType = "email" | "password";
+export type EditFieldType = "checkbox" | "dropdown" | TextFieldType;
+export interface EditFieldProps {
+    dataRow: DataRow;
+    deferNewRow?: boolean;
+    label: string;
+    name: string;
+    readOnly?: boolean;
+    required?: boolean;
+    type?: EditFieldType;
+}
+export interface DropdownEditFieldProps extends EditFieldProps {
+    type: "dropdown";
+    optionMap: OptionMap;
+    table: VuuTable;
+}
+export declare const EditField: ({ dataRow, deferNewRow, label, name, readOnly, required, type, ...options }: EditFieldProps | DropdownEditFieldProps) => import("react/jsx-runtime").JSX.Element;

package/types/edit-field/useEditField.d.ts

@@ -0,0 +1,26 @@
+import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import type { RuntimeColumnDescriptor, TableCellEditHandler } from "@vuu-ui/vuu-table-types";
+import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent, type SyntheticEvent } from "react";
+import type { LookupOption } from "../lookup-values/useLookupValues";
+import type { TextFieldType } from "./EditField";
+export interface EditFieldHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
+    column: Pick<RuntimeColumnDescriptor, "clientSideEditValidationCheck" | "label" | "name">;
+    value?: T;
+    onEdit?: TableCellEditHandler;
+    textType?: TextFieldType;
+    type?: "string" | "number" | "boolean";
+}
+export declare const useEditField: <T extends string | number | boolean = string>({ column, value, onEdit, textType, type, }: EditFieldHookProps<T>) => {
+    editing: boolean;
+    inputProps: {
+        onBlur: FocusEventHandler<HTMLElement>;
+        onFocus: FocusEventHandler<HTMLElement>;
+        type: TextFieldType | undefined;
+    };
+    onKeyDown: (evt: KeyboardEvent<HTMLElement>) => Promise<void>;
+    previousValue: string | undefined;
+    value: string;
+    warningMessage: string | undefined;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    onDropdownSelectionChange: (_evt: SyntheticEvent, [selectedOption]: LookupOption[]) => void;
+};

package/types/edit-utils.d.ts

@@ -2,4 +2,4 @@ import type { DataRow, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
 export { isInlineEditingSession } from "@vuu-ui/vuu-utils";
 export declare const isEditRowReadOnly: (dataRow: DataRow) => boolean;
 export declare const withDataRowEditErrors: <T extends DataRow>(dataRow: T, errors: Record<string, string>) => T;
-export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react").JSX.Element | undefined;
+export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react/jsx-runtime").JSX.Element | undefined;

package/types/index.d.ts

@@ -1,10 +1,17 @@
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
+export { DataEditingProvider, useEditSession, useTableEditSession, } from "./DataEditingProvider";
+export { DirectEditSession, type DirectEditSessionConstructorProps, } from "./DirectEditSession";
+export type { TableEditSession, TableEditSessionEvents, } from "./TableEditSession";
 export { useCellEdited } from "./useCellEdited";
+export { useEditState } from "./useEditState";
 export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
 export { EditButtons, type EditButtonProps } from "./EditButtons";
+export { EditField, type DropdownEditFieldProps, type EditFieldProps, type EditFieldType, type TextFieldType, } from "./edit-field/EditField";
+export { useEditField, type EditFieldHookProps, } from "./edit-field/useEditField";
 export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";
-export { EditError, EditSession, SupersededEditError, type EditActionType, type EditLifecycle, type EditSessionConstructorProps, type NewRowState, type EditState, type RowDefaultDataItemValues, } from "./EditSession";
+export { EditError, EditSession, SupersededEditError, type AddRowResultData, type EditActionType, type EditCommitOptions, type EditLifecycle, type EditSessionConstructorProps, type EditSessionValue, type NewRowState, type EditState, type RowDefaultDataItemValues, } from "./EditSession";
 export { StaleUpdateError } from "@vuu-ui/vuu-utils";
+export { lookupOptionsFromRows, useLookupValues, type LookupOption, type LookupValuedHookProps, type OptionMap, } from "./lookup-values/useLookupValues";
+export { useEditable, type EditableHookProps } from "./useEditable";
 export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator, } from "./editActionRowClassNameGenerator";
 export { getUndoButtonContent, getUndoTooltipContent, UNDO_CELL_RENDERER, UndoCellRenderer, type UndoCellRendererComponentProps, } from "./UndoCellRenderer";
 export { useEditableTable, type EditableTableHookProps, type EditMode, } from "./useEditableTable";

package/types/lookup-values/useLookupValues.d.ts

@@ -0,0 +1,19 @@
+import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type LookupOption = {
+    label: string;
+    metadata?: Record<string, string>;
+    value: number | string;
+};
+export type OptionMap = {
+    additionalFields?: readonly string[];
+    label: string;
+    value: string;
+};
+export interface LookupValuedHookProps {
+    enabled: boolean;
+    optionMap?: OptionMap;
+    table?: VuuTable;
+}
+export declare const lookupOptionsFromRows: (columns: string[], rows: DataSourceRow[], optionMap: OptionMap) => LookupOption[];
+export declare const useLookupValues: ({ enabled, optionMap, table, }: LookupValuedHookProps) => LookupOption[];

package/types/useCellEdited.d.ts

@@ -1,2 +1,2 @@
-import type { EditSession } from "./EditSession";
-export declare const useCellEdited: (editSession: EditSession | undefined, key: string, columnName: string) => boolean;
+import type { TableEditSession } from "./TableEditSession";
+export declare const useCellEdited: (editSession: TableEditSession | undefined, key: string, columnName: string) => boolean;

package/types/useEditState.d.ts

@@ -0,0 +1,2 @@
+import type { EditSession, EditState } from "./EditSession";
+export declare function useEditState(editSession: EditSession | undefined): EditState;

package/types/useEditable.d.ts

@@ -0,0 +1,13 @@
+import type { CopyOption, DataSource } from "@vuu-ui/vuu-data-types";
+import { EditSession } from "./EditSession";
+export interface EditableHookProps {
+    copyOption?: CopyOption;
+    dataSource: DataSource;
+    onCancel: () => void;
+    onSave: () => void;
+}
+export declare const useEditable: ({ copyOption, dataSource, onCancel, onSave, }: EditableHookProps) => {
+    editSession: EditSession;
+    onCancel: () => Promise<void>;
+    onSave: (force?: boolean) => Promise<void>;
+};

package/types/useEditableTable.d.ts

@@ -1,5 +1,6 @@
 import type { CopyOption, DataSource, DeleteRowMode } from "@vuu-ui/vuu-data-types";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import type { DataRow } from "@vuu-ui/vuu-table-types";
 import { EditSession, type EditActionType, type EditLifecycle, type EditSessionApi, type RowDefaultDataItemValues } from "./EditSession";
 export type EditMode = "edit" | "view";
 export interface EditableTableHookProps {
@@ -38,6 +39,7 @@ export declare const useEditableTable: ({ columns, dataSource: dataSourceProp, d
     onDelete: () => Promise<void>;
     onSave: (force?: boolean) => Promise<void>;
     onUndoRowChange: (key: string, action: EditActionType) => undefined;
+    isRowSelectable: ((dataRow: DataRow) => boolean) | undefined;
     rowClassNameGenerators: string[] | undefined;
     sessionDataSource: import("@vuu-ui/vuu-data-types").DataSourceBase<import("@vuu-ui/vuu-data-types").DataSourceRowWithBigint> | undefined;
     sourceDataSource: DataSource;