@vuu-ui/vuu-table-extras 4.2.4 → 4.3.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.4",
+  "version": "4.3.0-beta.1",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "4.2.4",
-    "@vuu-ui/vuu-protocol-types": "4.2.4"
+    "@vuu-ui/vuu-filter-types": "4.3.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "4.3.0-beta.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "4.2.4",
-    "@vuu-ui/vuu-data-editing": "4.2.4",
-    "@vuu-ui/vuu-data-react": "4.2.4",
-    "@vuu-ui/vuu-data-types": "4.2.4",
-    "@vuu-ui/vuu-table-types": "4.2.4",
-    "@vuu-ui/vuu-popups": "4.2.4",
-    "@vuu-ui/vuu-table": "4.2.4",
-    "@vuu-ui/vuu-utils": "4.2.4",
-    "@vuu-ui/vuu-ui-controls": "4.2.4",
+    "@vuu-ui/vuu-codemirror": "4.3.0-beta.1",
+    "@vuu-ui/vuu-data-editing": "4.3.0-beta.1",
+    "@vuu-ui/vuu-data-react": "4.3.0-beta.1",
+    "@vuu-ui/vuu-data-types": "4.3.0-beta.1",
+    "@vuu-ui/vuu-table-types": "4.3.0-beta.1",
+    "@vuu-ui/vuu-popups": "4.3.0-beta.1",
+    "@vuu-ui/vuu-table": "4.3.0-beta.1",
+    "@vuu-ui/vuu-utils": "4.3.0-beta.1",
+    "@vuu-ui/vuu-ui-controls": "4.3.0-beta.1",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.74.0",
     "@salt-ds/styles": "0.4.2",

package/src/bulk-edit-dialog/useBulkEditDialog.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { DataEditingProvider, EditButtons, useEditableTable } from "@vuu-ui/vuu-data-editing";
+import { BulkEditPanel } from "@vuu-ui/vuu-table";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useEffect, useRef, useState } from "react";
+const NOT_EDITING = {
+    copyOption: "Selected",
+    editing: false
+};
+const useBulkEditDialog = ({ bulkEditPanelProps, confirmCancel, dataSource: sourceTableDataSource, deleteMode, editSessionApi, onCancelled, onError, onSaved, rowDefaults, saveLabel = "Save", title = "Edit rows" })=>{
+    const { closeDialog, showDialog } = useModal();
+    const [{ copyOption, editing }, setDialogState] = useState(NOT_EDITING);
+    const callbacksRef = useRef({
+        onCancelled,
+        onSaved
+    });
+    callbacksRef.current = {
+        onCancelled,
+        onSaved
+    };
+    const handleCancelled = useCallback(()=>{
+        setDialogState(NOT_EDITING);
+        callbacksRef.current.onCancelled?.();
+    }, []);
+    const handleSaved = useCallback(()=>{
+        setDialogState(NOT_EDITING);
+        callbacksRef.current.onSaved?.();
+    }, []);
+    const { editSession, onCancel, onSave, rowClassNameGenerators, sessionDataSource, sourceDataSource } = useEditableTable({
+        copyOption,
+        dataSource: sourceTableDataSource,
+        deleteMode,
+        editSessionApi,
+        isEditMode: editing,
+        onCancel: handleCancelled,
+        onError,
+        onSave: handleSaved,
+        rowDefaults
+    });
+    const editSelectedRows = useCallback(()=>{
+        setDialogState({
+            copyOption: "Selected",
+            editing: true
+        });
+    }, []);
+    const insertRows = useCallback(()=>{
+        setDialogState({
+            copyOption: "Empty",
+            editing: true
+        });
+    }, []);
+    useEffect(()=>{
+        if (editing && sessionDataSource) showDialog(/*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: editSession,
+            children: /*#__PURE__*/ jsx(BulkEditPanel, {
+                ...bulkEditPanelProps,
+                parentDs: sourceDataSource,
+                rowClassNameGenerators: rowClassNameGenerators,
+                sessionDs: sessionDataSource
+            })
+        }), title, [
+            /*#__PURE__*/ jsx(EditButtons, {
+                confirmCancel: confirmCancel,
+                editSession: editSession,
+                onCancel: onCancel,
+                onSave: onSave,
+                saveLabel: saveLabel
+            }, "edit-buttons")
+        ], true);
+        else closeDialog();
+    }, [
+        bulkEditPanelProps,
+        closeDialog,
+        confirmCancel,
+        editSession,
+        editing,
+        onCancel,
+        onSave,
+        rowClassNameGenerators,
+        saveLabel,
+        sessionDataSource,
+        showDialog,
+        sourceDataSource,
+        title
+    ]);
+    return {
+        editSelectedRows,
+        editSession,
+        insertRows,
+        isEditing: editing
+    };
+};
+export { useBulkEditDialog };

package/src/editable-table/EditableTable.css.js

@@ -0,0 +1,41 @@
+const css = `
+.vuuEditableTable {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+}
+
+.vuuEditableTable-withPanel {
+  flex-direction: row;
+}
+
+.vuuEditableTable-main {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.vuuEditableTable-panel {
+  --saltSidePanel-width: 320px;
+}
+
+.vuuEditableTable-panelHeader > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.vuuEditableTable-detail {
+  min-height: 0;
+  overflow: auto;
+}
+
+
+`;
+export default css;

package/src/editable-table/EditableTable.js

@@ -0,0 +1,176 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SidePanelContent, SidePanelTitle } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { TableEditorCreateForm, TableEditorEditButton, TableEditorForm, TableEditorModeToggle, TableEditorNewButton, TableEditorPlaceholder, TableEditorTable, TableEditorToolbar, useTableEditor } from "../table-editor/index.js";
+import { TableEditorProvider } from "../table-editor/TableEditorProvider.js";
+import EditableTable from "./EditableTable.css";
+import { EditableTableFooter, EditableTableMain, EditableTablePanel, EditableTablePanelHeader } from "./EditableTableLayout.js";
+const classBase = "vuuEditableTable";
+const PanelTitle = ({ createTitle, formTitle })=>{
+    const { mode, selectedRow } = useTableEditor();
+    const title = "create" === mode ? createTitle : selectedRow ? "function" == typeof formTitle ? formTitle(selectedRow) : formTitle : null;
+    return title ? /*#__PURE__*/ jsx(SidePanelTitle, {
+        children: title
+    }) : null;
+};
+const InlineContent = ({ createFields, createTitle = "New", panelClassName, saveLabel, showEditModeToggle, testId, validateCreate, ...tableProps })=>{
+    const { createStrategy, editModel } = useTableEditor();
+    const hasCreateForm = "form" === createStrategy;
+    const showToggle = showEditModeToggle ?? "session" === editModel;
+    const table = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showToggle || hasCreateForm ? /*#__PURE__*/ jsxs(TableEditorToolbar, {
+                children: [
+                    showToggle ? /*#__PURE__*/ jsx(TableEditorModeToggle, {
+                        testId: testId
+                    }) : null,
+                    hasCreateForm ? /*#__PURE__*/ jsx(TableEditorNewButton, {
+                        "data-testid": `new-button${testId}`
+                    }) : null
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx(TableEditorTable, {
+                "data-testid": `table${testId}`,
+                ...tableProps
+            }),
+            /*#__PURE__*/ jsx(EditableTableFooter, {
+                saveLabel: saveLabel
+            })
+        ]
+    });
+    return hasCreateForm ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(EditableTableMain, {
+                children: table
+            }),
+            /*#__PURE__*/ jsxs(EditableTablePanel, {
+                className: panelClassName,
+                "data-testid": `edit-panel${testId}`,
+                children: [
+                    /*#__PURE__*/ jsx(EditableTablePanelHeader, {
+                        children: /*#__PURE__*/ jsx(PanelTitle, {
+                            createTitle: createTitle
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(SidePanelContent, {
+                        className: `${classBase}-detail`,
+                        children: /*#__PURE__*/ jsx(TableEditorCreateForm, {
+                            "data-testid": `create-form${testId}`,
+                            fields: createFields,
+                            validate: validateCreate
+                        })
+                    })
+                ]
+            })
+        ]
+    }) : table;
+};
+const FormContent = ({ allowCreate = true, createFields, createTitle = "New", fields, formTitle, panelClassName, placeholder = "Select a row to see its details", testId, validate, validateCreate = validate, ...tableProps })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(EditableTableMain, {
+                children: [
+                    /*#__PURE__*/ jsxs(TableEditorToolbar, {
+                        children: [
+                            /*#__PURE__*/ jsx(TableEditorEditButton, {
+                                "data-testid": `edit-button${testId}`
+                            }),
+                            allowCreate ? /*#__PURE__*/ jsx(TableEditorNewButton, {
+                                "data-testid": `new-button${testId}`
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(TableEditorTable, {
+                        "data-testid": `table${testId}`,
+                        ...tableProps
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(EditableTablePanel, {
+                className: panelClassName,
+                "data-testid": `edit-panel${testId}`,
+                children: [
+                    /*#__PURE__*/ jsx(EditableTablePanelHeader, {
+                        children: /*#__PURE__*/ jsx(PanelTitle, {
+                            createTitle: createTitle,
+                            formTitle: formTitle
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(SidePanelContent, {
+                        className: `${classBase}-detail`,
+                        children: [
+                            /*#__PURE__*/ jsx(TableEditorPlaceholder, {
+                                children: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(TableEditorForm, {
+                                "data-testid": `edit-form${testId}`,
+                                fields: fields,
+                                validate: validate
+                            }),
+                            allowCreate ? /*#__PURE__*/ jsx(TableEditorCreateForm, {
+                                "data-testid": `create-form${testId}`,
+                                fields: createFields ?? fields,
+                                validate: validateCreate
+                            }) : null
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+const Container = ({ children, className, style, testId })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-editable-table",
+        css: EditableTable,
+        window: targetWindow
+    });
+    const { createStrategy, editStrategy, mode, panelOpen } = useTableEditor();
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(classBase, className, `${classBase}-${mode}`, {
+            [`${classBase}-editing`]: "edit" === mode,
+            [`${classBase}-panelOpen`]: panelOpen,
+            [`${classBase}-withPanel`]: "form" === editStrategy || "form" === createStrategy
+        }),
+        "data-testid": `edit-table${testId}`,
+        style: style,
+        children: children
+    });
+};
+const EditableTable_EditableTable = (props)=>{
+    const { allowDelete = false, children, className, confirmCancel, copyOption, createStrategy, dataSource, defaultMode, deleteMode, editModel = "session", editSessionApi, editStrategy = "inline", mode, onCancelled, onError, onModeChange, onSaved, panelVisibility, rowDefaults, style, testId = "", ...contentProps } = props;
+    const isInlineDirect = "inline" === editStrategy && "direct" === editModel;
+    return /*#__PURE__*/ jsx(TableEditorProvider, {
+        allowDelete: allowDelete,
+        confirmCancel: confirmCancel,
+        copyOption: copyOption,
+        createStrategy: createStrategy,
+        dataSource: dataSource,
+        defaultMode: defaultMode ?? (isInlineDirect ? "edit" : "view"),
+        deleteMode: deleteMode,
+        editModel: editModel,
+        editSessionApi: editSessionApi,
+        editStrategy: editStrategy,
+        mode: mode,
+        onCancelled: onCancelled,
+        onError: onError,
+        onModeChange: onModeChange,
+        onSaved: onSaved,
+        panelVisibility: panelVisibility,
+        rowDefaults: rowDefaults,
+        children: /*#__PURE__*/ jsx(Container, {
+            className: className,
+            style: style,
+            testId: testId,
+            children: children ?? ("form" === editStrategy ? /*#__PURE__*/ jsx(FormContent, {
+                ...contentProps,
+                testId: testId
+            }) : /*#__PURE__*/ jsx(InlineContent, {
+                ...contentProps,
+                testId: testId
+            }))
+        })
+    });
+};
+export { EditableTable_EditableTable as EditableTable };

package/src/editable-table/EditableTableLayout.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SidePanel, SidePanelHeader, useForkRef } from "@salt-ds/core";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { DataSourceStats } from "../datasource-stats/DatasourceStats.js";
+import { TableEditorButtons, TableEditorPanelCloseButton } from "../table-editor/index.js";
+import { useTableEditorContext } from "../table-editor/TableEditorContext.js";
+import { TableFooter, TableFooterTray } from "../table-footer/TableFooter.js";
+const EditableTableFooter = ({ children, saveLabel, ...htmlAttributes })=>{
+    const { dataSource, editableTable } = useTableEditorContext("EditableTableFooter");
+    return /*#__PURE__*/ jsx(TableFooter, {
+        ...htmlAttributes,
+        children: editableTable?.isEditSessionReady ? /*#__PURE__*/ jsx(TableFooterTray, {
+            position: "center",
+            children: /*#__PURE__*/ jsx(TableEditorButtons, {
+                saveLabel: saveLabel
+            })
+        }) : children ?? /*#__PURE__*/ jsx(DataSourceStats, {
+            dataSource: dataSource
+        })
+    });
+};
+const classBase = "vuuEditableTable";
+const EditableTableLayout_EditableTableMain = /*#__PURE__*/ forwardRef(function({ className, ...htmlAttributes }, forwardedRef) {
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(`${classBase}-main`, className),
+        ref: forwardedRef
+    });
+});
+const animationWidth = "--saltSidePanel-animation-width";
+const measureAnimationWidth = (el)=>{
+    if (el?.classList.contains("saltSidePanel-enterAnimation") && !el.style.getPropertyValue(animationWidth)) {
+        const { animation } = el.style;
+        el.style.animation = "none";
+        const { width } = el.getBoundingClientRect();
+        el.style.animation = animation;
+        el.style.setProperty(animationWidth, `${width}px`);
+    }
+};
+const EditableTableLayout_EditableTablePanel = /*#__PURE__*/ forwardRef(function({ className, ...props }, forwardedRef) {
+    const ref = useForkRef(measureAnimationWidth, forwardedRef);
+    return /*#__PURE__*/ jsx(SidePanel, {
+        ...props,
+        className: clsx(`${classBase}-panel`, className),
+        position: "right",
+        ref: ref
+    });
+});
+const EditableTableLayout_EditableTablePanelHeader = /*#__PURE__*/ forwardRef(function({ canClose = true, children, className, ...props }, forwardedRef) {
+    return /*#__PURE__*/ jsxs(SidePanelHeader, {
+        ...props,
+        className: clsx(`${classBase}-panelHeader`, className),
+        ref: forwardedRef,
+        children: [
+            children,
+            canClose ? /*#__PURE__*/ jsx(TableEditorPanelCloseButton, {}) : null
+        ]
+    });
+});
+export { EditableTableFooter, EditableTableLayout_EditableTableMain as EditableTableMain, EditableTableLayout_EditableTablePanel as EditableTablePanel, EditableTableLayout_EditableTablePanelHeader as EditableTablePanelHeader };

package/src/index.js

@@ -5,6 +5,7 @@ export * from "./cell-renderers/index.js";
 export * from "./column-expression-input/index.js";
 export * from "./column-formatting-settings/index.js";
 export * from "./inline-add-row/index.js";
+export * from "./table-editor/index.js";
 export { CalculatedColumnPanel } from "./calculated-column/CalculatedColumnPanel.js";
 export { ColumnMenu } from "./column-menu/ColumnMenu.js";
 export { useColumnActions } from "./column-menu/useColumnActions.js";
@@ -22,3 +23,6 @@ export { TabbedTableSettingsAction } from "./tabbed-table-config-panel/TabbedTab
 export { TableFooter, TableFooterTray } from "./table-footer/TableFooter.js";
 export { TableProvider, useTableContext } from "./table-provider/TableProvider.js";
 export { TableSettingsPanel, defaultTableSettingsPermissions } from "./table-settings-panel/TableSettingsPanel.js";
+export { useBulkEditDialog } from "./bulk-edit-dialog/useBulkEditDialog.js";
+export { EditableTable } from "./editable-table/EditableTable.js";
+export { EditableTableFooter, EditableTableMain, EditableTablePanel, EditableTablePanelHeader } from "./editable-table/EditableTableLayout.js";

package/src/table-editor/TableEditorContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const TableEditorContext = createContext(void 0);
+const useTableEditorContext = (componentName)=>{
+    const context = useContext(TableEditorContext);
+    if (void 0 === context) throw Error(`${componentName} must be used within an EditableTable`);
+    return context;
+};
+const useTableEditor = ()=>useTableEditorContext("useTableEditor");
+export { TableEditorContext, useTableEditor, useTableEditorContext };

package/src/table-editor/TableEditorControls.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, SidePanelCloseButton, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { EditButtons, EditFormButtons, useEditFormContext } from "@vuu-ui/vuu-data-editing";
+import { forwardRef, useCallback } from "react";
+import { useTableEditorContext } from "./TableEditorContext.js";
+const TableEditorButtons = ({ hideCancel, saveLabel })=>{
+    const { allowDelete, confirmCancel, editStrategy, editableTable } = useTableEditorContext("TableEditorButtons");
+    const form = useEditFormContext();
+    if (form || "form" === editStrategy) return form ? /*#__PURE__*/ jsx(EditFormButtons, {
+        confirmCancel: confirmCancel,
+        hideCancel: hideCancel,
+        saveLabel: saveLabel
+    }) : null;
+    if (editableTable) {
+        const { canCancel, canSave, editSession, hasSelection, onCancel, onDelete, onSave } = editableTable;
+        return /*#__PURE__*/ jsx(EditButtons, {
+            canCancel: canCancel,
+            canSave: canSave,
+            confirmCancel: confirmCancel,
+            editSession: editSession,
+            hasSelection: allowDelete ? hasSelection : void 0,
+            onCancel: hideCancel ? void 0 : onCancel,
+            onDelete: allowDelete ? onDelete : void 0,
+            onSave: onSave,
+            saveLabel: saveLabel
+        });
+    }
+    return null;
+};
+const TableEditorModeToggle = ({ "aria-label": ariaLabel = "Mode", disabled, testId = "", ...props })=>{
+    const { cancel, editStrategy, mode, selectedRow, startEdit } = useTableEditorContext("TableEditorModeToggle");
+    const handleChange = useCallback((e)=>{
+        if ("edit" === e.currentTarget.value) startEdit();
+        else cancel();
+    }, [
+        cancel,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+        ...props,
+        "aria-label": ariaLabel,
+        disabled: disabled || "create" === mode || "form" === editStrategy && void 0 === selectedRow,
+        onChange: handleChange,
+        value: "edit" === mode ? "edit" : "view",
+        children: [
+            /*#__PURE__*/ jsx(ToggleButton, {
+                "data-testid": `toggle-view${testId}`,
+                value: "view",
+                children: "View"
+            }),
+            /*#__PURE__*/ jsx(ToggleButton, {
+                "data-testid": `toggle-edit${testId}`,
+                value: "edit",
+                children: "Edit"
+            })
+        ]
+    });
+};
+const TableEditorControls_TableEditorEditButton = /*#__PURE__*/ forwardRef(function({ children = "Edit", disabled, ...props }, ref) {
+    const { isEditing, selectedRow, startEdit } = useTableEditorContext("TableEditorEditButton");
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        disabled: disabled || isEditing || void 0 === selectedRow,
+        onClick: startEdit,
+        ref: ref,
+        children: children
+    });
+});
+const TableEditorControls_TableEditorNewButton = /*#__PURE__*/ forwardRef(function({ children = "New", disabled, ...props }, ref) {
+    const { canCreate, startCreate } = useTableEditorContext("TableEditorNewButton");
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        disabled: disabled || !canCreate,
+        onClick: startCreate,
+        ref: ref,
+        children: children
+    });
+});
+const TableEditorControls_TableEditorPanelCloseButton = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { canClosePanel } = useTableEditorContext("TableEditorPanelCloseButton");
+    return canClosePanel ? /*#__PURE__*/ jsx(SidePanelCloseButton, {
+        ...props,
+        ref: ref
+    }) : null;
+});
+export { TableEditorButtons, TableEditorControls_TableEditorEditButton as TableEditorEditButton, TableEditorControls_TableEditorNewButton as TableEditorNewButton, TableEditorControls_TableEditorPanelCloseButton as TableEditorPanelCloseButton, TableEditorModeToggle };

package/src/table-editor/TableEditorForm.js

@@ -0,0 +1,142 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { CreateRowForm, EditField, EditForm, getFormFields, useEditFormContext } from "@vuu-ui/vuu-data-editing";
+import { useTableEditorContext } from "./TableEditorContext.js";
+const classBase = "vuuTableEditorForm";
+const useFormFields = (fields, operation, enabled)=>{
+    const { columns, dataSource } = useTableEditorContext("TableEditorForm");
+    const schema = dataSource.tableSchema;
+    return useMemo(()=>enabled ? getFormFields({
+            columns,
+            fields,
+            operation,
+            schema
+        }) : [], [
+        columns,
+        enabled,
+        fields,
+        operation,
+        schema
+    ]);
+};
+const requiredNames = (fields)=>fields.filter(({ required })=>required).map(({ name })=>name);
+const FormRegistration = ()=>{
+    const form = useEditFormContext();
+    const { formHandleRef } = useTableEditorContext("TableEditorForm");
+    useLayoutEffect(()=>{
+        formHandleRef.current = form ? {
+            cancel: form.cancel,
+            getValues: form.getValues,
+            isDirty: form.isDirty
+        } : void 0;
+    });
+    useLayoutEffect(()=>()=>{
+            formHandleRef.current = void 0;
+        }, [
+        formHandleRef
+    ]);
+    return null;
+};
+const TableEditorForm = ({ children, className, fields, onCancelled, onSaved, showButtons = void 0 === children, validate, ...formProps })=>{
+    const { confirmCancel, dataSource, editModel, editStrategy, formHandleRef, formSessionProps, mode, onEditCancelled, onEditSaved, selectedRow } = useTableEditorContext("TableEditorForm");
+    const formFields = useFormFields(fields, "update", void 0 === children);
+    const requiredColumns = useMemo(()=>requiredNames(formFields), [
+        formFields
+    ]);
+    const submittedValuesRef = useRef(void 0);
+    const validateEdit = useCallback((values)=>{
+        submittedValuesRef.current = values;
+        return validate?.(values);
+    }, [
+        validate
+    ]);
+    const handleCancelled = useCallback(()=>{
+        onCancelled?.();
+        onEditCancelled();
+    }, [
+        onCancelled,
+        onEditCancelled
+    ]);
+    const handleSaved = useCallback(()=>{
+        onSaved?.();
+        onEditSaved("direct" === editModel ? formHandleRef.current?.getValues() : submittedValuesRef.current);
+    }, [
+        editModel,
+        formHandleRef,
+        onEditSaved,
+        onSaved
+    ]);
+    if ("form" !== editStrategy || "create" === mode || void 0 === selectedRow) return null;
+    return /*#__PURE__*/ createElement(EditForm, {
+        ...formProps,
+        ...formSessionProps,
+        className: [
+            classBase,
+            className
+        ].filter(Boolean).join(" "),
+        confirmCancel: confirmCancel,
+        dataRow: selectedRow,
+        dataSource: dataSource,
+        editModel: editModel,
+        isEditMode: "edit" === mode,
+        key: selectedRow.key,
+        onCancelled: handleCancelled,
+        onSaved: handleSaved,
+        requiredColumns: requiredColumns,
+        showButtons: showButtons,
+        validate: validateEdit,
+        children: [
+            children ?? formFields.map((field)=>/*#__PURE__*/ jsx(EditField, {
+                    column: field
+                }, field.name)),
+            /*#__PURE__*/ jsx(FormRegistration, {})
+        ]
+    });
+};
+const TableEditorCreateForm = ({ children, className, fields, onCancelled, onSaved, ...formProps })=>{
+    const { confirmCancel, createKey, createStrategy, dataSource, editModel, editSession, editStrategy, formSessionProps, mode, onCreateDone } = useTableEditorContext("TableEditorCreateForm");
+    const generatedFields = useFormFields(fields, "insert", void 0 !== fields || void 0 === children);
+    const formFields = useMemo(()=>fields ? generatedFields : generatedFields.map((field)=>field.required ? field : {
+                ...field,
+                required: false
+            }), [
+        fields,
+        generatedFields
+    ]);
+    const sharedEditSession = "inline" === editStrategy && "session" === editModel ? editSession : void 0;
+    const handleCancelled = useCallback(()=>{
+        onCancelled?.();
+        onCreateDone(false);
+    }, [
+        onCancelled,
+        onCreateDone
+    ]);
+    const handleSaved = useCallback(()=>{
+        onSaved?.();
+        onCreateDone(true);
+    }, [
+        onCreateDone,
+        onSaved
+    ]);
+    if ("form" !== createStrategy || "create" !== mode) return null;
+    return /*#__PURE__*/ createElement(CreateRowForm, {
+        ...formProps,
+        ...formSessionProps,
+        className: [
+            classBase,
+            className
+        ].filter(Boolean).join(" "),
+        confirmCancel: confirmCancel,
+        dataSource: dataSource,
+        editSession: sharedEditSession,
+        fields: formFields,
+        key: createKey,
+        onCancelled: handleCancelled,
+        onSaved: handleSaved,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(FormRegistration, {})
+        ]
+    });
+};
+export { TableEditorCreateForm, TableEditorForm };