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

package/src/table-editor/TableEditorLayout.css.js

@@ -0,0 +1,16 @@
+const css = `
+.vuuTableEditorToolbar {
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  flex: none;
+  display: flex;
+}
+
+.vuuTableEditorPlaceholder {
+  color: var(--salt-content-secondary-foreground);
+}
+
+
+`;
+export default css;

package/src/table-editor/TableEditorLayout.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useTableEditorContext } from "./TableEditorContext.js";
+import TableEditorLayout from "./TableEditorLayout.css";
+const useLayoutCss = ()=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-editor-layout",
+        css: TableEditorLayout,
+        window: targetWindow
+    });
+};
+const TableEditorToolbar = ({ className, ...htmlAttributes })=>{
+    useLayoutCss();
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx("vuuTableEditorToolbar", className)
+    });
+};
+const TableEditorPlaceholder = ({ className, ...htmlAttributes })=>{
+    useLayoutCss();
+    const { editStrategy, mode, selectedRow } = useTableEditorContext("TableEditorPlaceholder");
+    return "form" === editStrategy && "create" !== mode && void 0 === selectedRow ? /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx("vuuTableEditorPlaceholder", className)
+    }) : null;
+};
+export { TableEditorPlaceholder, TableEditorToolbar };

package/src/table-editor/TableEditorProvider.js

@@ -0,0 +1,434 @@
+import { jsx } from "react/jsx-runtime";
+import { SidePanelProvider } from "@salt-ds/core";
+import { DataEditingProvider, DirectEditSession, getDataRowValues, useEditableTable } from "@vuu-ui/vuu-data-editing";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { TableEditorContext } from "./TableEditorContext.js";
+const useModeState = ({ defaultMode = "view", mode: modeProp, onModeChange })=>{
+    const [modeState, setModeState] = useState(defaultMode);
+    const isControlled = void 0 !== modeProp;
+    const setMode = useCallback((mode)=>{
+        if (!isControlled) setModeState(mode);
+        onModeChange?.(mode);
+    }, [
+        isControlled,
+        onModeChange
+    ]);
+    return [
+        modeProp ?? modeState,
+        setMode
+    ];
+};
+const useFormState = ()=>{
+    const [columns, setColumns] = useState();
+    const formHandleRef = useRef(void 0);
+    return {
+        columns,
+        formHandleRef,
+        setColumns
+    };
+};
+const cancelForm = async (form, confirmCancel, onNoForm)=>{
+    if (void 0 === form) onNoForm();
+    else if (!confirmCancel || !form.isDirty || await confirmCancel()) await form.cancel();
+};
+const useInlineCreate = ({ createStrategy, mode, modeAfterCreate, setMode })=>{
+    const [createKey, setCreateKey] = useState(0);
+    const modeBeforeCreateRef = useRef("view");
+    const hasCreateForm = "form" === createStrategy;
+    const canCreate = hasCreateForm && "create" !== mode;
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    const startCreate = useCallback(()=>{
+        const currentMode = modeRef.current;
+        if (hasCreateForm && "create" !== currentMode) {
+            modeBeforeCreateRef.current = currentMode;
+            setCreateKey((key)=>key + 1);
+            setMode("create");
+        }
+    }, [
+        hasCreateForm,
+        setMode
+    ]);
+    const endCreate = useCallback(()=>{
+        setMode(modeAfterCreate ?? modeBeforeCreateRef.current);
+    }, [
+        modeAfterCreate,
+        setMode
+    ]);
+    return {
+        canCreate,
+        createKey,
+        endCreate,
+        panelOpen: hasCreateForm && "create" === mode,
+        startCreate
+    };
+};
+const NO_FORM_SESSION_PROPS = void 0;
+const noop = ()=>void 0;
+const Providers = ({ children, value })=>/*#__PURE__*/ jsx(TableEditorContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ jsx(SidePanelProvider, {
+            onOpenChange: value.setPanelOpen,
+            open: value.panelOpen,
+            children: children
+        })
+    });
+const InlineSessionProvider = ({ allowDelete = false, children, confirmCancel, copyOption, createStrategy = "inline", dataSource, deleteMode = allowDelete ? "soft" : void 0, editSessionApi, onCancelled, onError, onSaved, rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const isEditing = "view" !== mode;
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const handleCancelled = useCallback(()=>{
+        setMode("view");
+        onCancelled?.();
+    }, [
+        onCancelled,
+        setMode
+    ]);
+    const handleSaved = useCallback(()=>{
+        setMode("view");
+        onSaved?.();
+    }, [
+        onSaved,
+        setMode
+    ]);
+    const editableTable = useEditableTable({
+        copyOption,
+        dataSource,
+        deleteMode,
+        editSessionApi,
+        isEditMode: isEditing,
+        onCancel: handleCancelled,
+        onError,
+        onSave: handleSaved,
+        rowDefaults
+    });
+    const { editSession, onCancel: cancelEdit } = editableTable;
+    const { canCreate, createKey, endCreate, panelOpen, startCreate } = useInlineCreate({
+        createStrategy,
+        mode,
+        modeAfterCreate: "edit",
+        setMode
+    });
+    const cancel = useCallback(async ()=>{
+        if ("create" === mode) await cancelForm(formHandleRef.current, confirmCancel, endCreate);
+        else if (isEditing && (!confirmCancel || "clean" === editSession.editState || await confirmCancel())) cancelEdit();
+    }, [
+        cancelEdit,
+        confirmCancel,
+        editSession,
+        endCreate,
+        formHandleRef,
+        isEditing,
+        mode
+    ]);
+    const startEdit = useCallback(()=>setMode("edit"), [
+        setMode
+    ]);
+    const value = useMemo(()=>({
+            allowDelete,
+            canClosePanel: false,
+            canCreate,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy,
+            dataSource,
+            editModel: "session",
+            editSession,
+            editStrategy: "inline",
+            editableTable,
+            formHandleRef,
+            formSessionProps: NO_FORM_SESSION_PROPS,
+            isEditing,
+            mode,
+            onCreateDone: endCreate,
+            onEditCancelled: noop,
+            onEditSaved: noop,
+            onSelect: noop,
+            panelOpen,
+            setColumns,
+            setPanelOpen: noop,
+            startCreate,
+            startEdit
+        }), [
+        allowDelete,
+        canCreate,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        createStrategy,
+        dataSource,
+        editSession,
+        editableTable,
+        endCreate,
+        formHandleRef,
+        isEditing,
+        mode,
+        panelOpen,
+        setColumns,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: /*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: editSession,
+            children: children
+        })
+    });
+};
+const InlineDirectProvider = ({ children, confirmCancel, createStrategy = "inline", dataSource, deleteMode, editSessionApi, onCancelled, onError, onSaved, rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const isEditing = "view" !== mode;
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const editSession = useMemo(()=>new DirectEditSession({
+            dataSource
+        }), [
+        dataSource
+    ]);
+    const { canCreate, createKey, endCreate, panelOpen, startCreate } = useInlineCreate({
+        createStrategy,
+        mode,
+        setMode
+    });
+    const onCreateDone = useCallback((saved = false)=>{
+        endCreate();
+        if (saved) onSaved?.();
+        else onCancelled?.();
+    }, [
+        endCreate,
+        onCancelled,
+        onSaved
+    ]);
+    const cancel = useCallback(async ()=>{
+        if ("create" === mode) await cancelForm(formHandleRef.current, confirmCancel, onCreateDone);
+        else setMode("view");
+    }, [
+        confirmCancel,
+        formHandleRef,
+        mode,
+        onCreateDone,
+        setMode
+    ]);
+    const startEdit = useCallback(()=>setMode("edit"), [
+        setMode
+    ]);
+    const value = useMemo(()=>({
+            allowDelete: false,
+            canClosePanel: false,
+            canCreate,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy,
+            dataSource,
+            editModel: "direct",
+            editStrategy: "inline",
+            formHandleRef,
+            formSessionProps: {
+                deleteMode,
+                editSessionApi,
+                onError,
+                rowDefaults
+            },
+            isEditing,
+            mode,
+            onCreateDone,
+            onEditCancelled: noop,
+            onEditSaved: noop,
+            onSelect: noop,
+            panelOpen,
+            setColumns,
+            setPanelOpen: noop,
+            startCreate,
+            startEdit
+        }), [
+        canCreate,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        createStrategy,
+        dataSource,
+        deleteMode,
+        editSessionApi,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onError,
+        panelOpen,
+        rowDefaults,
+        setColumns,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: /*#__PURE__*/ jsx(DataEditingProvider, {
+            editSession: editSession,
+            children: children
+        })
+    });
+};
+const toRowSnapshot = (values)=>{
+    const snapshot = {
+        ...values
+    };
+    return {
+        ...snapshot,
+        hasColumn: (name)=>name in snapshot
+    };
+};
+const FormProvider = ({ children, confirmCancel, dataSource, deleteMode, editModel = "session", editSessionApi, onCancelled, onError, onSaved, panelVisibility = "on-select", rowDefaults, ...modeProps })=>{
+    const [mode, setMode] = useModeState(modeProps);
+    const [selectedRow, setSelectedRow] = useState();
+    const [createKey, setCreateKey] = useState(0);
+    const [panelOpenState, setPanelOpenState] = useState(false);
+    const panelOpenBeforeCreateRef = useRef(false);
+    const { columns, formHandleRef, setColumns } = useFormState();
+    const isEditing = "view" !== mode;
+    const alwaysVisible = "always" === panelVisibility;
+    const canClosePanel = !alwaysVisible && !isEditing;
+    const panelOpen = alwaysVisible || isEditing || panelOpenState;
+    const setPanelOpen = useCallback((open)=>{
+        if (open || canClosePanel) setPanelOpenState(open);
+    }, [
+        canClosePanel
+    ]);
+    const onSelect = useCallback((dataRow)=>{
+        setSelectedRow(dataRow ? toRowSnapshot(getDataRowValues(dataRow)) : void 0);
+        setPanelOpenState(null !== dataRow);
+    }, []);
+    const startEdit = useCallback(()=>{
+        if (selectedRow) {
+            setPanelOpenState(true);
+            setMode("edit");
+        }
+    }, [
+        selectedRow,
+        setMode
+    ]);
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    const startCreate = useCallback(()=>{
+        if ("view" === modeRef.current) {
+            setCreateKey((key)=>key + 1);
+            panelOpenBeforeCreateRef.current = panelOpenState;
+            setMode("create");
+        }
+    }, [
+        panelOpenState,
+        setMode
+    ]);
+    const onCreateDone = useCallback((saved = false)=>{
+        setPanelOpenState(panelOpenBeforeCreateRef.current);
+        setMode("view");
+        if (saved) onSaved?.();
+        else onCancelled?.();
+    }, [
+        onCancelled,
+        onSaved,
+        setMode
+    ]);
+    const onEditCancelled = useCallback(()=>{
+        setMode("view");
+        onCancelled?.();
+    }, [
+        onCancelled,
+        setMode
+    ]);
+    const onEditSaved = useCallback((values)=>{
+        if (values) setSelectedRow(toRowSnapshot(values));
+        setMode("view");
+        onSaved?.();
+    }, [
+        onSaved,
+        setMode
+    ]);
+    const cancel = useCallback(async ()=>{
+        if (isEditing) await cancelForm(formHandleRef.current, confirmCancel, ()=>"create" === mode ? onCreateDone() : onEditCancelled());
+    }, [
+        confirmCancel,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onEditCancelled
+    ]);
+    const value = useMemo(()=>({
+            allowDelete: false,
+            canClosePanel,
+            canCreate: !isEditing,
+            cancel,
+            columns,
+            confirmCancel,
+            createKey,
+            createStrategy: "form",
+            dataSource,
+            editModel,
+            editStrategy: "form",
+            formHandleRef,
+            formSessionProps: {
+                deleteMode,
+                editSessionApi,
+                onError,
+                rowDefaults
+            },
+            isEditing,
+            mode,
+            onCreateDone,
+            onEditCancelled,
+            onEditSaved,
+            onSelect,
+            panelOpen,
+            selectedRow,
+            setColumns,
+            setPanelOpen,
+            startCreate,
+            startEdit
+        }), [
+        canClosePanel,
+        cancel,
+        columns,
+        confirmCancel,
+        createKey,
+        dataSource,
+        deleteMode,
+        editModel,
+        editSessionApi,
+        formHandleRef,
+        isEditing,
+        mode,
+        onCreateDone,
+        onEditCancelled,
+        onEditSaved,
+        onError,
+        onSelect,
+        panelOpen,
+        rowDefaults,
+        selectedRow,
+        setColumns,
+        setPanelOpen,
+        startCreate,
+        startEdit
+    ]);
+    return /*#__PURE__*/ jsx(Providers, {
+        value: value,
+        children: children
+    });
+};
+const TableEditorProvider = ({ createStrategy, editModel = "session", editStrategy = "inline", ...props })=>"form" === editStrategy ? /*#__PURE__*/ jsx(FormProvider, {
+        ...props,
+        editModel: editModel
+    }) : "direct" === editModel ? /*#__PURE__*/ jsx(InlineDirectProvider, {
+        ...props,
+        createStrategy: createStrategy
+    }) : /*#__PURE__*/ jsx(InlineSessionProvider, {
+        ...props,
+        createStrategy: createStrategy
+    });
+export { TableEditorProvider };

package/src/table-editor/TableEditorTable.js

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import { useEditableColumns } from "@vuu-ui/vuu-data-editing";
+import { Table } from "@vuu-ui/vuu-table";
+import { useCallback, useLayoutEffect, useMemo } from "react";
+import { InlineAddRow } from "../inline-add-row/index.js";
+import { useTableEditorContext } from "./TableEditorContext.js";
+const NO_ROWS_SELECTABLE = ()=>false;
+const TableCellEditorTable = ({ config, showInlineAddRow = false, undoColumn = false, ...tableProps })=>{
+    const { allowDelete, editableTable } = useTableEditorContext("TableEditorTable");
+    const { columnsDiverge, dataSource, editSchema, isEditSessionReady, isRowSelectable, rowClassNameGenerators } = editableTable;
+    const columns = useEditableColumns({
+        actionColumn: allowDelete ? "hidden" : false,
+        columns: config.columns,
+        columnsDiverge,
+        editSchema,
+        isEditing: isEditSessionReady,
+        schema: dataSource.tableSchema ?? editSchema,
+        undoColumn
+    });
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns,
+            rowClassNameGenerators: isEditSessionReady ? (config.rowClassNameGenerators ?? []).concat(rowClassNameGenerators ?? []) : config.rowClassNameGenerators
+        }), [
+        columns,
+        config,
+        isEditSessionReady,
+        rowClassNameGenerators
+    ]);
+    const canDelete = isEditSessionReady && allowDelete;
+    return /*#__PURE__*/ jsx(Table, {
+        renderBufferSize: 10,
+        ...tableProps,
+        config: tableConfig,
+        customHeader: isEditSessionReady && showInlineAddRow ? InlineAddRow : void 0,
+        dataSource: dataSource,
+        isRowSelectable: canDelete ? isRowSelectable : void 0,
+        selectionModel: canDelete ? "checkbox" : "none"
+    });
+};
+const DirectCellEditorTable = ({ config, showInlineAddRow: _showInlineAddRow, undoColumn: _undoColumn, ...tableProps })=>{
+    const { dataSource, isEditing } = useTableEditorContext("TableEditorTable");
+    const columns = useEditableColumns({
+        columns: config.columns,
+        isEditing,
+        schema: dataSource.tableSchema
+    });
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns
+        }), [
+        columns,
+        config
+    ]);
+    return /*#__PURE__*/ jsx(Table, {
+        renderBufferSize: 10,
+        ...tableProps,
+        config: tableConfig,
+        dataSource: dataSource
+    });
+};
+const FormEditorTable = ({ config, onSelect, showInlineAddRow: _showInlineAddRow, undoColumn: _undoColumn, ...tableProps })=>{
+    const { dataSource, isEditing, onSelect: selectRow } = useTableEditorContext("TableEditorTable");
+    const handleSelect = useCallback((dataRow)=>{
+        selectRow(dataRow);
+        onSelect?.(dataRow);
+    }, [
+        onSelect,
+        selectRow
+    ]);
+    const columns = useEditableColumns({
+        columns: config.columns,
+        isEditing: false
+    });
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns
+        }), [
+        columns,
+        config
+    ]);
+    return /*#__PURE__*/ jsx(Table, {
+        renderBufferSize: 10,
+        ...tableProps,
+        config: tableConfig,
+        dataSource: dataSource,
+        isRowSelectable: isEditing ? NO_ROWS_SELECTABLE : void 0,
+        onSelect: handleSelect,
+        selectionModel: "single"
+    });
+};
+const TableEditorTable = (props)=>{
+    const { editModel, editStrategy, setColumns } = useTableEditorContext("TableEditorTable");
+    const { columns } = props.config;
+    useLayoutEffect(()=>{
+        setColumns(columns);
+    }, [
+        columns,
+        setColumns
+    ]);
+    useLayoutEffect(()=>()=>setColumns(void 0), [
+        setColumns
+    ]);
+    return "form" === editStrategy ? /*#__PURE__*/ jsx(FormEditorTable, {
+        ...props
+    }) : "direct" === editModel ? /*#__PURE__*/ jsx(DirectCellEditorTable, {
+        ...props
+    }) : /*#__PURE__*/ jsx(TableCellEditorTable, {
+        ...props
+    });
+};
+export { TableEditorTable };

package/src/table-editor/index.js

@@ -0,0 +1,5 @@
+export { useTableEditor } from "./TableEditorContext.js";
+export { TableEditorButtons, TableEditorEditButton, TableEditorModeToggle, TableEditorNewButton, TableEditorPanelCloseButton } from "./TableEditorControls.js";
+export { TableEditorCreateForm, TableEditorForm } from "./TableEditorForm.js";
+export { TableEditorPlaceholder, TableEditorToolbar } from "./TableEditorLayout.js";
+export { TableEditorTable } from "./TableEditorTable.js";

package/types/bulk-edit-dialog/useBulkEditDialog.d.ts

@@ -0,0 +1,27 @@
+import { type EditableTableHookProps } from "@vuu-ui/vuu-data-editing";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import { type BulkEditPanelProps } from "@vuu-ui/vuu-table";
+export interface BulkEditDialogHookProps extends Pick<EditableTableHookProps, "deleteMode" | "editSessionApi" | "onError" | "rowDefaults"> {
+    /** Options passed through to the BulkEditPanel. */
+    bulkEditPanelProps?: Partial<Omit<BulkEditPanelProps, "parentDs" | "rowClassNameGenerators" | "sessionDs">>;
+    /** Asked before an edit session with unsaved changes is discarded. */
+    confirmCancel?: () => boolean | Promise<boolean>;
+    dataSource: DataSource;
+    onCancelled?: () => void;
+    onSaved?: () => void;
+    saveLabel?: string;
+    title?: string;
+}
+/**
+ * Edits many rows at once in a modal dialog. Call `editSelectedRows()` to
+ * edit the rows selected in `dataSource`, or `insertRows()` to add new rows.
+ * Edits are staged in a session table and applied on Save.
+ *
+ * Requires a `ModalProvider` above the calling component.
+ */
+export declare const useBulkEditDialog: ({ bulkEditPanelProps, confirmCancel, dataSource: sourceTableDataSource, deleteMode, editSessionApi, onCancelled, onError, onSaved, rowDefaults, saveLabel, title, }: BulkEditDialogHookProps) => {
+    editSelectedRows: () => void;
+    editSession: import("@vuu-ui/vuu-data-editing").EditSession;
+    insertRows: () => void;
+    isEditing: boolean;
+};