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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.4",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -11,25 +11,25 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.ts ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-protocol-types": "5.0.0-alpha.2"
+    "@vuu-ui/vuu-filter-types": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-protocol-types": "5.0.0-alpha.4"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-data-editing": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-data-react": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-data-types": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-table-types": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-popups": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-table": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-utils": "5.0.0-alpha.2",
-    "@vuu-ui/vuu-ui-controls": "5.0.0-alpha.2",
+    "@vuu-ui/vuu-codemirror": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-data-editing": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-data-react": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-data-types": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-table-types": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-popups": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-table": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-utils": "5.0.0-alpha.4",
+    "@vuu-ui/vuu-ui-controls": "5.0.0-alpha.4",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.74.0",
     "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2",
     "csv-parse": "^7.0.0",
-    "@vuu-ui/core": "5.0.0-alpha.2"
+    "@vuu-ui/core": "5.0.0-alpha.4"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.19",

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/core";
+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/csv-upload/parse/csv-parse.js

@@ -47,8 +47,8 @@ const parseCsv = (csvText, options)=>{
             relax_column_count: true,
             skip_empty_lines: true
         });
-    } catch (err) {
-        addCsvFileError(errorState, "*", CsvParseErrorEnum.INVALID_FORMAT, err instanceof Error ? err.message : "Invalid CSV format.");
+    } catch  {
+        addCsvFileError(errorState, "*", CsvParseErrorEnum.INVALID_FORMAT, "Invalid CSV format.");
         return withError("Invalid CSV format.", errorState.errorMap, errorState.errors);
     }
     if (0 === records.length) {
@@ -75,6 +75,10 @@ const parseCsv = (csvText, options)=>{
         addCsvFileError(errorState, duplicateHeader, CsvParseErrorEnum.DUPLICATE_HEADER_COLUMN, `CSV header contains duplicate column '${duplicateHeader}'.`, duplicateHeader);
         return withError(`CSV header contains duplicate column '${duplicateHeader}'.`, errorState.errorMap, errorState.errors, header, []);
     }
+    if (0 === rows.length) {
+        addCsvFileError(errorState, "*", CsvParseErrorEnum.EMPTY_FILE, "CSV file is empty.");
+        return withError("CSV file is empty.", errorState.errorMap, errorState.errors, header, []);
+    }
     const firstDataRowNumber = options?.customHeaders && false === options.hasHeaderRow ? 1 : CSV_FIRST_DATA_ROW_NUMBER;
     rows.forEach((row, rowIndex)=>{
         if (row.length !== header.length) addCsvRowError(errorState, rowIndex + firstDataRowNumber, "*", CsvParseErrorEnum.ROW_COLUMN_COUNT_MISMATCH, "This row has too many or too few columns compared to the header line. Check for extra or missing commas.", row.join(","));

package/src/csv-upload/useCsvUpload.js

@@ -5,6 +5,14 @@ import { CsvValidationErrorEnum, validateCsvAgainstSchema } from "./parse/csv-sc
 import { createUploadError, hasFileParseErrors, isCsvParseError, mapCsvHeaders, mergeValidationWithParseErrors, toErrorMessage } from "./parse/csv-upload-utils.js";
 import { useImportSchema } from "./session/useImportSchema.js";
 import { useImportSession } from "./session/useImportSession.js";
+const CSV_MIME_TYPES = new Set([
+    "",
+    "text/csv",
+    "text/plain",
+    "application/csv",
+    "application/vnd.ms-excel"
+]);
+const isCsvFile = (file)=>file.name.toLowerCase().endsWith(".csv") && CSV_MIME_TYPES.has(file.type.toLowerCase());
 const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importTable, onImportSessionEnded, onImportSessionReady, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, customHeaders, hasHeaderRow, headerMapping, rowDefaults, validators })=>{
     const [validation, setValidation] = useState();
     const [isProcessingFile, setIsProcessingFile] = useState(false);
@@ -58,6 +66,15 @@ const useCsvUpload = ({ dataSource, importMode = "direct", importSchema, importT
         }
         if (void 0 === schema) throw Error("Table schema is not yet available.");
         if (void 0 === table) throw Error("CsvUpload requires dataSource.table to be defined.");
+        if (!isCsvFile(file)) {
+            const errorMessage = "Invalid file type. Only .csv files are supported.";
+            handleError({
+                errors: {
+                    validationError: createUploadError("validation", errorMessage)
+                }
+            });
+            return;
+        }
         const effectiveParseOptions = {
             ...parseOptions,
             ...void 0 !== customHeaders ? {

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/inline-add-row/useInlineAddRow.js

@@ -66,14 +66,6 @@ const useInlineAddRow = ({ columns })=>{
         newRowState.values,
         visibleInsertColumns
     ]);
-    useEffect(()=>{
-        const firstInvalidIndex = visibleColumns.findIndex(({ name })=>void 0 !== newRowState.errors[name]);
-        if (-1 !== firstInvalidIndex) focusEditor(firstInvalidIndex);
-    }, [
-        focusEditor,
-        newRowState.errors,
-        visibleColumns
-    ]);
     useEffect(()=>{
         const previousValues = previousValuesRef.current;
         previousValuesRef.current = newRowState.values;

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 };