@vuu-ui/vuu-table-extras 5.0.0-alpha.2 → 5.0.0-alpha.3

package/types/editable-table/EditableTable.d.ts

@@ -0,0 +1,178 @@
+import type { EditableTableHookProps, EditFormValidator } from "@vuu-ui/vuu-data-editing";
+import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
+import type { TableProps } from "@vuu-ui/vuu-table";
+import type { DataRow, TableConfig } from "@vuu-ui/vuu-table-types";
+import type { CSSProperties, ReactNode } from "react";
+import { type TableEditorCreateStrategy, type TableEditorEditModel, type TableEditorEditStrategy, type TableEditorMode, type TableEditorPanelVisibility } from "../table-editor";
+/** `create` is only used with a create form. */
+export type EditableTableMode = TableEditorMode;
+/**
+ * - `session`: edits are staged in a session table and applied on Save, or
+ *   discarded on Cancel.
+ * - `direct`: each committed edit is sent straight to `dataSource`. There
+ *   is no Save or Cancel.
+ */
+export type EditableTableEditModel = TableEditorEditModel;
+/**
+ * - `inline`: cells are edited in the table.
+ * - `form`: the selected row is edited in a form in a side panel.
+ */
+export type EditableTableEditStrategy = TableEditorEditStrategy;
+/**
+ * - `inline`: new rows are added in the table (`showInlineAddRow`).
+ * - `form`: new rows are added with a form in a side panel.
+ */
+export type EditableTableCreateStrategy = TableEditorCreateStrategy;
+/**
+ * - `on-select`: the side panel opens when a row is selected (or New is
+ *   clicked) and closes when the selection is cleared or the panel's close
+ *   button is clicked.
+ * - `always`: the side panel is always visible, showing a placeholder when
+ *   no row is selected.
+ */
+export type EditableTablePanelVisibility = TableEditorPanelVisibility;
+export type EditableTableField = DataValueDescriptor;
+type Never<T> = {
+    [K in keyof T]?: never;
+};
+/** Props for every strategy and model. */
+export interface EditableTableBaseProps extends Pick<EditableTableHookProps, "deleteMode" | "editSessionApi" | "onError" | "rowDefaults"> {
+    className?: string;
+    /** Asked before unsaved changes are discarded. See `useConfirmDiscard`. */
+    confirmCancel?: () => boolean | Promise<boolean>;
+    /** The source (view) dataSource. */
+    dataSource: DataSource;
+    /**
+     * Uncontrolled initial mode. Defaults to `edit` (always editable) for
+     * inline direct editing, otherwise to `view`.
+     */
+    defaultMode?: EditableTableMode;
+    /** Controlled mode. Pair with `onModeChange`. */
+    mode?: EditableTableMode;
+    /** Called once changes, or a new row, have been discarded. */
+    onCancelled?: () => void;
+    onModeChange?: (mode: EditableTableMode) => void;
+    /** Called once changes, or a new row, have been saved. */
+    onSaved?: () => void;
+    /** With a side panel. @default "on-select" */
+    panelVisibility?: EditableTablePanelVisibility;
+    style?: CSSProperties;
+    /** Suffix appended to built-in test ids (`edit-table`, `toggle-edit` …). */
+    testId?: string;
+}
+/** Inline session editing only. */
+export interface EditableTableSessionOnlyProps {
+    /**
+     * Show a checkbox column and a Delete button in edit mode, so selected
+     * rows can be deleted. Rows already marked for deletion cannot be selected.
+     */
+    allowDelete?: boolean;
+    /** Rows copied into the edit session. @default "All" */
+    copyOption?: EditableTableHookProps["copyOption"];
+}
+/** Inline session editing, default layout only. */
+export interface EditableTableSessionLayoutProps {
+    /** @default "Save" */
+    saveLabel?: string;
+    /** Show an inline row, above the column headers, for adding new rows. */
+    showInlineAddRow?: boolean;
+    /** Add a column with an undo button for edited rows. */
+    undoColumn?: boolean;
+}
+/** Inline editing, default layout only. */
+export interface EditableTableInlineLayoutProps {
+    /**
+     * Show a View/Edit toggle above the table. Defaults to true for session
+     * editing and false (always editable) for direct editing.
+     */
+    showEditModeToggle?: boolean;
+}
+/** Form editing, default layout only. */
+export interface EditableTableFormLayoutProps {
+    /** Show a New button and a form for adding rows. @default true */
+    allowCreate?: boolean;
+    /** Fields for the edit form, in tab order. Generated when omitted. */
+    fields?: readonly EditableTableField[];
+    /** Title shown in the side panel header for the selected row. */
+    formTitle?: string | ((dataRow: DataRow) => string);
+    /** @default "Select a row to see its details" */
+    placeholder?: string;
+    /** Validates the edit form. */
+    validate?: EditFormValidator;
+}
+/** With a create form, default layout only. */
+export interface EditableTableCreateLayoutProps {
+    /** Fields for the create form. Defaults to `fields`, or generated. */
+    createFields?: readonly EditableTableField[];
+    /** @default "New" */
+    createTitle?: string;
+    /** Applied to the SidePanel, e.g. to set `--saltSidePanel-width`. */
+    panelClassName?: string;
+    /** Validates the create form. Defaults to `validate`. */
+    validateCreate?: EditFormValidator;
+}
+/** The default layout. Other `Table` props are passed to the table. */
+export interface EditableTableDefaultLayoutProps extends Omit<TableProps, "children" | "className" | "config" | "customHeader" | "dataSource" | "isRowSelectable" | "onError" | "selectionModel" | "style"> {
+    children?: undefined;
+    /**
+     * Table config. Per-column `editable` and `editor` (on each column's
+     * `DataValueDescriptor`) control what can be edited, and how.
+     */
+    config: TableConfig;
+}
+/**
+ * Your own layout: compose `TableEditorTable`, `EditableTableFooter`,
+ * `TableEditorToolbar`, `EditableTableMain`, `EditableTablePanel`,
+ * `TableEditorForm`, `TableEditorCreateForm` etc.
+ */
+export interface EditableTableComposedProps {
+    children: ReactNode;
+    config?: never;
+}
+type SessionModel = {
+    editModel?: "session";
+};
+type DirectModel = {
+    editModel: "direct";
+} & Never<EditableTableSessionOnlyProps & EditableTableSessionLayoutProps>;
+type InlineStrategy = {
+    createStrategy?: "inline";
+    editStrategy?: "inline";
+} & Never<EditableTableFormLayoutProps & EditableTableCreateLayoutProps>;
+type InlineWithCreateForm = {
+    createStrategy: "form";
+    editStrategy?: "inline";
+} & Never<EditableTableFormLayoutProps & Pick<EditableTableSessionLayoutProps, "showInlineAddRow">>;
+type FormStrategy = {
+    createStrategy?: "form";
+    editStrategy: "form";
+} & Never<EditableTableSessionOnlyProps & EditableTableSessionLayoutProps & EditableTableInlineLayoutProps>;
+type Layout = EditableTableComposedProps | (EditableTableDefaultLayoutProps & EditableTableSessionLayoutProps & EditableTableInlineLayoutProps & EditableTableFormLayoutProps & EditableTableCreateLayoutProps);
+export type EditableTableProps = EditableTableBaseProps & EditableTableSessionOnlyProps & (SessionModel | DirectModel) & (InlineStrategy | InlineWithCreateForm | FormStrategy) & Layout;
+/**
+ * A Table with editing. All the wiring (edit session, editable columns, row
+ * styling, forms, Save/Cancel/Delete buttons, the inline add row) is
+ * handled internally.
+ *
+ * - `editStrategy="inline"` (the default): cells are edited in the table.
+ *   `createStrategy="form"` adds new rows with a form in a side panel.
+ * - `editStrategy="form"`: selecting a row shows it in a form in a side
+ *   panel; Edit makes it editable and New shows a form for a new row.
+ *
+ * - `editModel="session"` (the default): edits are staged in an edit
+ *   session and applied when the user saves.
+ * - `editModel="direct"`: each committed edit is sent straight to
+ *   `dataSource`. There is no Save or Cancel.
+ *
+ * What can be edited, and how, comes from the server schema and each
+ * column's `editable` and `editor`. Forms are generated from the schema
+ * unless you pass `fields` or compose your own.
+ *
+ * Renders a flex container that fills its parent (a row, with the side
+ * panel, when there is one). Without `children` it renders a default
+ * layout. Otherwise it holds `children`: compose `TableEditorTable`,
+ * `EditableTableFooter`, `EditableTableMain`, `EditableTablePanel`,
+ * `TableEditorForm` etc. Read the state with `useTableEditor`.
+ */
+export declare const EditableTable: (props: EditableTableProps) => import("react").JSX.Element;
+export {};

package/types/editable-table/EditableTableLayout.d.ts

@@ -0,0 +1,41 @@
+import { type SidePanelHeaderProps, type SidePanelProps } from "@salt-ds/core";
+import { type HTMLAttributes } from "react";
+export interface EditableTableFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default "Save" */
+    saveLabel?: string;
+}
+/**
+ * The footer of an `EditableTable`. Shows Save and Cancel (and Delete)
+ * while a session is being edited, and `children` otherwise. `children`
+ * default to the row count. With direct editing there is nothing to save,
+ * so it always shows `children`.
+ */
+export declare const EditableTableFooter: ({ children, saveLabel, ...htmlAttributes }: EditableTableFooterProps) => import("react").JSX.Element;
+export type EditableTableMainProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * With a side panel (`editStrategy="form"` or `createStrategy="form"`): a
+ * flex column that fills the space beside the `EditableTablePanel`. Holds a
+ * `TableEditorTable` and whatever headers, toolbars or footers belong with
+ * it.
+ */
+export declare const EditableTableMain: import("react").ForwardRefExoticComponent<EditableTableMainProps & import("react").RefAttributes<HTMLDivElement>>;
+export type EditableTablePanelProps = Omit<SidePanelProps, "position">;
+/**
+ * The Salt `SidePanel`, on the right, that holds the form. `EditableTable`
+ * opens and closes it. Use with `editStrategy="form"` or
+ * `createStrategy="form"`. Compose `SidePanelHeader` and `SidePanelContent`.
+ */
+export declare const EditableTablePanel: import("react").ForwardRefExoticComponent<Omit<EditableTablePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface EditableTablePanelHeaderProps extends SidePanelHeaderProps {
+    /**
+     * Render a close button after the children. It is hidden while the panel
+     * can't be closed, i.e. while editing. Defaults to true.
+     */
+    canClose?: boolean;
+}
+/**
+ * The Salt `SidePanelHeader` of a `EditableTablePanel`. Its first child
+ * fills the available width; a close button follows unless `canClose` is
+ * false.
+ */
+export declare const EditableTablePanelHeader: import("react").ForwardRefExoticComponent<Omit<EditableTablePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/types/index.d.ts

@@ -23,3 +23,7 @@ export { TabbedTableSettingsAction } from "./tabbed-table-config-panel/TabbedTab
 export { TableFooter, TableFooterTray } from "./table-footer/TableFooter";
 export { TableProvider, useTableContext } from "./table-provider/TableProvider";
 export { defaultTableSettingsPermissions, TableSettingsPanel, type TableDisplayAttributeChangeHandler, } from "./table-settings-panel/TableSettingsPanel";
+export { type BulkEditDialogHookProps, useBulkEditDialog, } from "./bulk-edit-dialog/useBulkEditDialog";
+export { EditableTable, type EditableTableBaseProps, type EditableTableComposedProps, type EditableTableCreateLayoutProps, type EditableTableCreateStrategy, type EditableTableDefaultLayoutProps, type EditableTableEditModel, type EditableTableEditStrategy, type EditableTableField, type EditableTableFormLayoutProps, type EditableTableInlineLayoutProps, type EditableTableMode, type EditableTablePanelVisibility, type EditableTableProps, type EditableTableSessionLayoutProps, type EditableTableSessionOnlyProps, } from "./editable-table/EditableTable";
+export { EditableTableFooter, type EditableTableFooterProps, EditableTableMain, type EditableTableMainProps, EditableTablePanel, EditableTablePanelHeader, type EditableTablePanelHeaderProps, type EditableTablePanelProps, } from "./editable-table/EditableTableLayout";
+export * from "./table-editor";

package/types/inline-add-row/useInlineAddRow.d.ts

@@ -7,6 +7,7 @@ export declare const useInlineAddRow: ({ columns }: UseInlineAddRowProps) => {
     dataRow: DataRow;
     draftRevision: number;
     inlineAddColumns: {
+        editor?: import("@vuu-ui/vuu-data-types").DataValueEditor;
         editableBulk?: import("@vuu-ui/vuu-data-types").BulkEdit;
         name: string;
         required?: boolean;

package/types/table-editor/TableEditorContext.d.ts

@@ -0,0 +1,100 @@
+import type { EditFormHookProps, EditFormValues, EditSession, useEditableTable } from "@vuu-ui/vuu-data-editing";
+import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
+import type { DataRow } from "@vuu-ui/vuu-table-types";
+/**
+ * How existing rows are edited.
+ * - `inline`: in the table's cells.
+ * - `form`: the selected row is edited in a form, in a side panel.
+ */
+export type TableEditorEditStrategy = "inline" | "form";
+/**
+ * How rows are added.
+ * - `inline`: with inline editing, in the inline add row (session only).
+ * - `form`: in a form, in a side panel. Always `form` with
+ *   `editStrategy="form"`.
+ */
+export type TableEditorCreateStrategy = "inline" | "form";
+/**
+ * - `session`: edits are staged in an edit session and applied on Save, or
+ *   discarded on Cancel.
+ * - `direct`: each committed edit is validated, then sent straight to the
+ *   source table. There is no Save or Cancel.
+ */
+export type TableEditorEditModel = "session" | "direct";
+/** `create` is only used with a create form. */
+export type TableEditorMode = "view" | "edit" | "create";
+/**
+ * With a side panel (form editing, or a create form).
+ * - `on-select`: the side panel opens when a row is selected (or a new row is
+ *   started) and closes when the selection is cleared or the panel is closed.
+ * - `always`: the side panel is always open.
+ */
+export type TableEditorPanelVisibility = "on-select" | "always";
+/** State and actions of the enclosing `EditableTable`. */
+export interface TableEditorState {
+    /**
+     * Whether the side panel can be closed. False while editing and when
+     * `panelVisibility` is `always`.
+     */
+    canClosePanel: boolean;
+    /**
+     * Leaves edit (or create) mode, discarding changes. Asks `confirmCancel`
+     * first when there are unsaved changes. With direct editing, edits are
+     * already committed, so this just makes the table read-only.
+     */
+    cancel: () => Promise<void>;
+    /** Whether a new row can be started now, e.g. with `TableEditorNewButton`. */
+    canCreate: boolean;
+    createStrategy: TableEditorCreateStrategy;
+    /** The dataSource passed to the provider. */
+    dataSource: DataSource;
+    editModel: TableEditorEditModel;
+    editStrategy: TableEditorEditStrategy;
+    /** True in edit and create modes. */
+    isEditing: boolean;
+    mode: TableEditorMode;
+    /** Whether the side panel is open. */
+    panelOpen: boolean;
+    /**
+     * Form editing: a snapshot of the selected row, updated with the saved
+     * values after a successful save.
+     */
+    selectedRow?: DataRow;
+    /** Ignored when closing while `canClosePanel` is false. */
+    setPanelOpen: (open: boolean) => void;
+    /** With a create form: shows an empty form for adding a row. */
+    startCreate: () => void;
+    /** Enters edit mode. Form editing needs a selected row. */
+    startEdit: () => void;
+}
+/** Registered by the mounted form, so `cancel` can route through it. */
+export interface TableEditorFormHandle {
+    cancel: () => Promise<void> | void;
+    getValues: () => EditFormValues;
+    isDirty: boolean;
+}
+export interface TableEditorContextValue extends TableEditorState {
+    allowDelete: boolean;
+    /**
+     * The columns of the `TableEditorTable`, registered by it. Generated forms
+     * take labels, editors etc from them.
+     */
+    columns?: readonly DataValueDescriptor[];
+    confirmCancel?: () => boolean | Promise<boolean>;
+    createKey: number;
+    formHandleRef: {
+        current: TableEditorFormHandle | undefined;
+    };
+    formSessionProps?: Pick<EditFormHookProps, "deleteMode" | "editSessionApi" | "onError" | "rowDefaults">;
+    onCreateDone: (saved?: boolean) => void;
+    onEditCancelled: () => void;
+    onEditSaved: (values?: EditFormValues) => void;
+    onSelect: (dataRow: DataRow | null) => void;
+    setColumns: (columns: readonly DataValueDescriptor[] | undefined) => void;
+    editSession?: EditSession;
+    editableTable?: ReturnType<typeof useEditableTable>;
+}
+export declare const TableEditorContext: import("react").Context<TableEditorContextValue | undefined>;
+export declare const useTableEditorContext: (componentName: string) => TableEditorContextValue;
+/** State and actions of the enclosing `EditableTable`. */
+export declare const useTableEditor: () => TableEditorState;

package/types/table-editor/TableEditorControls.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonProps, type ToggleButtonGroupProps } from "@salt-ds/core";
+export interface TableEditorButtonsProps {
+    hideCancel?: boolean;
+    /** @default "Save", or "Create" for a new row */
+    saveLabel?: string;
+}
+/**
+ * Save and Cancel (and, for inline editing with `allowDelete`, Delete)
+ * buttons for the enclosing `EditableTable`. Disabled outside edit mode.
+ * Within a form, they are the form's buttons: render them within the
+ * `children` of `TableEditorForm` (which then omits its own buttons), or
+ * within `TableEditorCreateForm` with `showButtons={false}`. Renders nothing
+ * for inline direct editing, which has nothing to save.
+ */
+export declare const TableEditorButtons: ({ hideCancel, saveLabel, }: TableEditorButtonsProps) => import("react").JSX.Element | null;
+export interface TableEditorModeToggleProps extends Omit<ToggleButtonGroupProps, "children" | "onChange" | "value"> {
+    /** Suffix appended to the `toggle-view` and `toggle-edit` test ids. */
+    testId?: string;
+}
+/**
+ * View/Edit toggle for the enclosing `EditableTable`. Switching to View
+ * discards changes, asking `confirmCancel` first. It is disabled while a row
+ * is being created and, when editing in a form, until a row is selected.
+ */
+export declare const TableEditorModeToggle: ({ "aria-label": ariaLabel, disabled, testId, ...props }: TableEditorModeToggleProps) => import("react").JSX.Element;
+export type TableEditorEditButtonProps = Omit<ButtonProps, "onClick">;
+/**
+ * Form editing: makes the selected row's form editable. Disabled while
+ * editing and when no row is selected.
+ */
+export declare const TableEditorEditButton: import("react").ForwardRefExoticComponent<TableEditorEditButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type TableEditorNewButtonProps = Omit<ButtonProps, "onClick">;
+/**
+ * Starts a new row, shown in `TableEditorCreateForm`, with
+ * `editStrategy="form"` or `createStrategy="form"`. Disabled while a new row
+ * can't be started: while editing in a form, or while already creating.
+ */
+export declare const TableEditorNewButton: import("react").ForwardRefExoticComponent<TableEditorNewButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * A Salt `SidePanelCloseButton` that is only rendered while the side panel
+ * can be closed, i.e. not while editing.
+ */
+export declare const TableEditorPanelCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/table-editor/TableEditorForm.d.ts

@@ -0,0 +1,58 @@
+import { type CreateRowFormProps, type EditFormProps } from "@vuu-ui/vuu-data-editing";
+import type { DataValueDescriptor } from "@vuu-ui/vuu-data-types";
+import { type ReactNode } from "react";
+/**
+ * Form editing: describes a field, overlaid on its schema column (and table
+ * column). The control is chosen from its `editor` and `serverDataType`.
+ */
+export type TableEditorField = DataValueDescriptor;
+type ProviderOwnedProps = "confirmCancel" | "dataSource" | "deleteMode" | "editSessionApi" | "onError" | "rowDefaults";
+export interface TableEditorFormProps extends Omit<EditFormProps, ProviderOwnedProps | "children" | "columns" | "dataRow" | "editModel" | "editSession" | "isEditMode" | "mode" | "requiredColumns"> {
+    /**
+     * The form's content: `EditField`s (which need no `dataRow`), custom
+     * editors, tabs, `EditFormButtons` etc. Read the selected row with
+     * `useTableEditor`. Defaults to an `EditField` per entry in `fields`.
+     */
+    children?: ReactNode;
+    /**
+     * Fields for the default form content, in tab order. Without `fields` or
+     * `children`, a field is generated for each schema column.
+     */
+    fields?: readonly TableEditorField[];
+    /**
+     * Render the built-in Save and Cancel buttons. When you compose the form's
+     * content as `children`, render `TableEditorButtons` where you want them.
+     * @default true without `children`, false with them
+     */
+    showButtons?: boolean;
+}
+/**
+ * Form editing: the selected row of the enclosing `EditableTable`, read-only
+ * in view mode and editable in edit mode. Renders nothing in create mode
+ * (see `TableEditorCreateForm`) and when no row is selected (see
+ * `TableEditorPlaceholder`).
+ *
+ * Without `children` or `fields`, the form is generated: a field per schema
+ * column, labelled and edited as the table's columns are.
+ *
+ * With `editModel="direct"`, each field is validated and sent as it is
+ * committed. Done returns the form to read-only.
+ */
+export declare const TableEditorForm: ({ children, className, fields, onCancelled, onSaved, showButtons, validate, ...formProps }: TableEditorFormProps) => import("react").JSX.Element | null;
+export interface TableEditorCreateFormProps extends Omit<CreateRowFormProps, ProviderOwnedProps | "editSession"> {
+}
+/**
+ * A form for adding a row, shown in create mode (see
+ * `TableEditorNewButton`), with `editStrategy="form"` or
+ * `createStrategy="form"`. Renders an `EditField` per entry in `fields`,
+ * followed by `children`. Custom editors in `children` stage values with
+ * `setValue` from `useEditFormContext`.
+ *
+ * Without `children` or `fields`, a field is generated for each schema
+ * column that can be set on a new row.
+ *
+ * With inline session editing the row is added to the table's edit
+ * session (the button reads Add), and saved with the rest of the session.
+ */
+export declare const TableEditorCreateForm: ({ children, className, fields, onCancelled, onSaved, ...formProps }: TableEditorCreateFormProps) => import("react").JSX.Element | null;
+export {};

package/types/table-editor/TableEditorLayout.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export type TableEditorToolbarProps = HTMLAttributes<HTMLDivElement>;
+/** A row of controls, e.g. `TableEditorModeToggle` or `TableEditorNewButton`. */
+export declare const TableEditorToolbar: ({ className, ...htmlAttributes }: TableEditorToolbarProps) => import("react").JSX.Element;
+export type TableEditorPlaceholderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Form editing: renders `children` while no row is selected (and no row is
+ * being created), typically alongside `TableEditorForm` in the side panel.
+ */
+export declare const TableEditorPlaceholder: ({ className, ...htmlAttributes }: TableEditorPlaceholderProps) => import("react").JSX.Element | null;

package/types/table-editor/TableEditorProvider.d.ts

@@ -0,0 +1,57 @@
+import { type EditableTableHookProps } from "@vuu-ui/vuu-data-editing";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import { type ReactNode } from "react";
+import { type TableEditorCreateStrategy, type TableEditorEditModel, type TableEditorEditStrategy, type TableEditorMode, type TableEditorPanelVisibility } from "./TableEditorContext";
+export interface TableEditorProviderProps extends Pick<EditableTableHookProps, "deleteMode" | "editSessionApi" | "onError" | "rowDefaults"> {
+    /**
+     * Inline session editing: show a checkbox column, and a Delete button in
+     * `TableEditorButtons`, so selected rows can be deleted.
+     */
+    allowDelete?: boolean;
+    children: ReactNode;
+    /** Asked before changes are discarded. See `useConfirmDiscard`. */
+    confirmCancel?: () => boolean | Promise<boolean>;
+    /** Inline session editing: rows copied into the edit session. @default "All" */
+    copyOption?: EditableTableHookProps["copyOption"];
+    /**
+     * How rows are added. Always `form` with `editStrategy="form"`.
+     * @default "inline"
+     */
+    createStrategy?: TableEditorCreateStrategy;
+    dataSource: DataSource;
+    /** Uncontrolled initial mode. @default "view" */
+    defaultMode?: TableEditorMode;
+    /** @default "session" */
+    editModel?: TableEditorEditModel;
+    /** @default "inline" */
+    editStrategy?: TableEditorEditStrategy;
+    /** Controlled mode. Pair with `onModeChange`. */
+    mode?: TableEditorMode;
+    /** Called once changes have been discarded. */
+    onCancelled?: () => void;
+    onModeChange?: (mode: TableEditorMode) => void;
+    /** Called once changes (or a new row) have been saved. */
+    onSaved?: () => void;
+    /** Form editing: when the side panel is open. @default "on-select" */
+    panelVisibility?: TableEditorPanelVisibility;
+}
+/**
+ * Internal: the provider behind `EditableTable`. Owns the editing state
+ * shared by the `TableEditor` components: the mode (view, edit or create),
+ * the edit session and, with a side panel, the selected row and the panel.
+ * Lay out `TableEditorTable`, `TableEditorForm`, `TableEditorButtons` etc
+ * anywhere inside it; read its state with `useTableEditor`.
+ *
+ * - `editStrategy="inline"`: cells are edited in `TableEditorTable`. With
+ *   `editModel="session"` edits are staged in a session table and applied
+ *   on Save; with `editModel="direct"` each edit is sent straight to
+ *   `dataSource`. With `createStrategy="form"`, new rows are added in
+ *   `TableEditorCreateForm`.
+ * - `editStrategy="form"`: selecting a row in `TableEditorTable` shows it in
+ *   `TableEditorForm`. Row selection is locked, and the panel cannot be
+ *   closed, while the form is being edited.
+ *
+ * A Salt `SidePanelProvider` is provided, so a `SidePanel` placed inside
+ * opens and closes with the form.
+ */
+export declare const TableEditorProvider: ({ createStrategy, editModel, editStrategy, ...props }: TableEditorProviderProps) => import("react").JSX.Element;

package/types/table-editor/TableEditorTable.d.ts

@@ -0,0 +1,24 @@
+import { type EditableColumnsHookProps } from "@vuu-ui/vuu-data-editing";
+import { type TableProps } from "@vuu-ui/vuu-table";
+export interface TableEditorTableProps extends Omit<TableProps, "customHeader" | "dataSource" | "isRowSelectable" | "selectionModel">, Partial<Pick<EditableColumnsHookProps, "undoColumn">> {
+    /**
+     * Session table editing: show a row, above the column headers, for adding
+     * rows.
+     */
+    showInlineAddRow?: boolean;
+}
+/**
+ * The Table of the enclosing `EditableTable`, bound to its dataSource and
+ * mode. Its `config.columns` are also used by generated forms, for labels,
+ * editors etc.
+ *
+ * - Inline session editing: cells become editable in edit mode, edited,
+ *   added and deleted rows are styled, and rows can be checked for deletion
+ *   when `allowDelete` is set on the provider.
+ * - Inline direct editing: cells are editable in edit mode, and each edit is
+ *   sent straight to the dataSource. `showInlineAddRow` and `undoColumn`
+ *   are ignored.
+ * - Form editing: single selection, which selects the row shown in
+ *   `TableEditorForm`. Selection is locked while the form is being edited.
+ */
+export declare const TableEditorTable: (props: TableEditorTableProps) => import("react").JSX.Element;

package/types/table-editor/index.d.ts

@@ -0,0 +1,5 @@
+export { type TableEditorCreateStrategy, type TableEditorEditModel, type TableEditorEditStrategy, type TableEditorMode, type TableEditorPanelVisibility, type TableEditorState, useTableEditor, } from "./TableEditorContext";
+export { TableEditorButtons, type TableEditorButtonsProps, TableEditorEditButton, type TableEditorEditButtonProps, TableEditorModeToggle, type TableEditorModeToggleProps, TableEditorNewButton, type TableEditorNewButtonProps, TableEditorPanelCloseButton, } from "./TableEditorControls";
+export { type TableEditorCreateFormProps, type TableEditorField, TableEditorCreateForm, TableEditorForm, type TableEditorFormProps, } from "./TableEditorForm";
+export { TableEditorPlaceholder, type TableEditorPlaceholderProps, TableEditorToolbar, type TableEditorToolbarProps, } from "./TableEditorLayout";
+export { TableEditorTable, type TableEditorTableProps, } from "./TableEditorTable";