@vuu-ui/vuu-data-editing 3.0.0-beta.1

package/esm/UndoCellRenderer.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip, Button } from '@salt-ds/core';
+import { Icon } from '@vuu-ui/vuu-ui-controls';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { useEditSession } from './DataEditingProvider.js';
+
+const UNDO_CELL_RENDERER = "vuu.undo-cell";
+const getUndoButtonContent = (componentProps) => ({
+  icon: componentProps?.icon,
+  text: componentProps?.text === void 0 ? "UNDO" : componentProps.text || void 0
+});
+const getUndoTooltipContent = (action) => action === "deleteRow" ? "Undo delete row" : action === "addRow" ? "Undo insert row" : action === "editCell" ? "Undo row edits" : void 0;
+const UndoCellRenderer = ({
+  column,
+  dataRow
+}) => {
+  const editSession = useEditSession();
+  const renderer = column.type?.renderer;
+  const { icon, text } = getUndoButtonContent(
+    renderer?.componentProps
+  );
+  const tooltipContent = getUndoTooltipContent(
+    dataRow.vuu_action
+  );
+  if (tooltipContent === void 0) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      appearance: "transparent",
+      "aria-label": tooltipContent,
+      onClick: () => editSession?.undoRowChange(dataRow.key),
+      style: { height: "100%", width: "100%" },
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon }) : null,
+        text
+      ]
+    }
+  ) });
+};
+registerComponent(UNDO_CELL_RENDERER, UndoCellRenderer, "cell-renderer");
+
+export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent };
+//# sourceMappingURL=UndoCellRenderer.js.map

package/esm/UndoCellRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UndoCellRenderer.js","sources":["../../../packages/vuu-data-editing/src/UndoCellRenderer.tsx"],"sourcesContent":["import { Button, Tooltip } from \"@salt-ds/core\";\nimport type {\n  ColumnTypeRendering,\n  DataValueTypeDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useEditSession } from \"./DataEditingProvider\";\n\nexport const UNDO_CELL_RENDERER = \"vuu.undo-cell\";\n\nexport interface UndoCellRendererComponentProps {\n  icon?: string;\n  text?: string | false;\n}\n\nexport const getUndoButtonContent = (\n  componentProps?: UndoCellRendererComponentProps,\n) => ({\n  icon: componentProps?.icon,\n  text:\n    componentProps?.text === undefined\n      ? \"UNDO\"\n      : componentProps.text || undefined,\n});\n\nexport const getUndoTooltipContent = (\n  action: unknown,\n) =>\n  action === \"deleteRow\"\n    ? \"Undo delete row\"\n    : action === \"addRow\"\n      ? \"Undo insert row\"\n      : action === \"editCell\"\n        ? \"Undo row edits\"\n        : undefined;\n\nexport const UndoCellRenderer = ({\n  column,\n  dataRow,\n}: TableCellRendererProps) => {\n  const editSession = useEditSession();\n  const renderer = (column.type as DataValueTypeDescriptor)\n    ?.renderer as ColumnTypeRendering;\n  const { icon, text } = getUndoButtonContent(\n    renderer?.componentProps as UndoCellRendererComponentProps | undefined,\n  );\n  const tooltipContent = getUndoTooltipContent(\n    dataRow.vuu_action,\n  );\n\n  if (tooltipContent === undefined) return null;\n\n  return (\n    <Tooltip content={tooltipContent}>\n      <Button\n        appearance=\"transparent\"\n        aria-label={tooltipContent}\n        onClick={() => editSession?.undoRowChange(dataRow.key)}\n        style={{ height: \"100%\", width: \"100%\" }}\n      >\n        {icon ? <Icon name={icon} /> : null}\n        {text}\n      </Button>\n    </Tooltip>\n  );\n};\n\nregisterComponent(UNDO_CELL_RENDERER, UndoCellRenderer, \"cell-renderer\");\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,kBAAqB,GAAA;AAOrB,MAAA,oBAAA,GAAuB,CAClC,cACI,MAAA;AAAA,EACJ,MAAM,cAAgB,EAAA,IAAA;AAAA,EACtB,MACE,cAAgB,EAAA,IAAA,KAAS,KACrB,CAAA,GAAA,MAAA,GACA,eAAe,IAAQ,IAAA,KAAA;AAC/B,CAAA;AAEa,MAAA,qBAAA,GAAwB,CACnC,MAAA,KAEA,MAAW,KAAA,WAAA,GACP,iBACA,GAAA,MAAA,KAAW,QACT,GAAA,iBAAA,GACA,MAAW,KAAA,UAAA,GACT,gBACA,GAAA,KAAA;AAEH,MAAM,mBAAmB,CAAC;AAAA,EAC/B,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,cAAc,cAAe,EAAA;AACnC,EAAM,MAAA,QAAA,GAAY,OAAO,IACrB,EAAA,QAAA;AACJ,EAAM,MAAA,EAAE,IAAM,EAAA,IAAA,EAAS,GAAA,oBAAA;AAAA,IACrB,QAAU,EAAA;AAAA,GACZ;AACA,EAAA,MAAM,cAAiB,GAAA,qBAAA;AAAA,IACrB,OAAQ,CAAA;AAAA,GACV;AAEA,EAAI,IAAA,cAAA,KAAmB,QAAkB,OAAA,IAAA;AAEzC,EACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,OAAA,EAAS,cAChB,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,aAAA;AAAA,MACX,YAAY,EAAA,cAAA;AAAA,MACZ,OAAS,EAAA,MAAM,WAAa,EAAA,aAAA,CAAc,QAAQ,GAAG,CAAA;AAAA,MACrD,KAAO,EAAA,EAAE,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,EAAA;AAAA,MAEtC,QAAA,EAAA;AAAA,QAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,IAAA,EAAM,CAAK,GAAA,IAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;AAEA,iBAAkB,CAAA,kBAAA,EAAoB,kBAAkB,eAAe,CAAA;;;;"}

package/esm/edit-utils.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { formatDate } from '@vuu-ui/vuu-utils';
+export { isInlineEditingSession } from '@vuu-ui/vuu-utils2';
+
+const timeFormatter = formatDate({ time: "hh:mm:ss" });
+const dataRowEditErrors = /* @__PURE__ */ Symbol("vuuDataRowEditErrors");
+const isEditRowReadOnly = (dataRow) => dataRow.vuu_action === "deleteRow";
+const withDataRowEditErrors = (dataRow, errors) => {
+  Object.defineProperty(dataRow, dataRowEditErrors, {
+    configurable: true,
+    value: errors
+  });
+  return dataRow;
+};
+const getVuuEditMessage = (dataRow, column, originalValue) => {
+  const editError = dataRow[dataRowEditErrors]?.[column.name];
+  if (editError) {
+    return editError;
+  }
+  const vuuMsg = dataRow.vuuMsg;
+  if (typeof vuuMsg === "string" && vuuMsg !== "") {
+    const columnMessages = vuuMsg.split(",");
+    const msgForCol = columnMessages.find(
+      (msg) => msg.startsWith(`${column.name}:`)
+    );
+    if (msgForCol) {
+      const [, value, updatedValue, ts] = msgForCol.split(":");
+      const updateTime = timeFormatter(new Date(parseInt(ts)));
+      return /* @__PURE__ */ jsxs("span", { children: [
+        "Update rejected. Original value ",
+        /* @__PURE__ */ jsx("b", { children: originalValue }),
+        " could not be updated to ",
+        /* @__PURE__ */ jsx("b", { children: value }),
+        ". It was updated to ",
+        /* @__PURE__ */ jsx("b", { children: updatedValue }),
+        " at ",
+        updateTime,
+        "."
+      ] });
+    }
+  }
+};
+
+export { getVuuEditMessage, isEditRowReadOnly, withDataRowEditErrors };
+//# sourceMappingURL=edit-utils.js.map

package/esm/edit-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-utils.js","sources":["../../../packages/vuu-data-editing/src/edit-utils.tsx"],"sourcesContent":["import type { DataRow, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { formatDate } from \"@vuu-ui/vuu-utils\";\n\nexport { isInlineEditingSession } from \"@vuu-ui/vuu-utils2\";\n\nconst timeFormatter = formatDate({ time: \"hh:mm:ss\" });\nconst dataRowEditErrors = Symbol(\"vuuDataRowEditErrors\");\n\nexport const isEditRowReadOnly = (dataRow: DataRow) =>\n  dataRow.vuu_action === \"deleteRow\";\n\ntype DataRowWithEditErrors = DataRow & {\n  [dataRowEditErrors]?: Record<string, string>;\n};\n\nexport const withDataRowEditErrors = <T extends DataRow>(\n  dataRow: T,\n  errors: Record<string, string>,\n): T => {\n  Object.defineProperty(dataRow, dataRowEditErrors, {\n    configurable: true,\n    value: errors,\n  });\n  return dataRow;\n};\n\nexport const getVuuEditMessage = (\n  dataRow: DataRow,\n  column: RuntimeColumnDescriptor,\n  originalValue: string,\n) => {\n  const editError = (dataRow as DataRowWithEditErrors)[dataRowEditErrors]?.[\n    column.name\n  ];\n  if (editError) {\n    return editError;\n  }\n\n  const vuuMsg = dataRow.vuuMsg as string;\n  if (typeof vuuMsg === \"string\" && vuuMsg !== \"\") {\n    const columnMessages = vuuMsg.split(\",\");\n    const msgForCol = columnMessages.find((msg) =>\n      msg.startsWith(`${column.name}:`),\n    );\n    if (msgForCol) {\n      const [, value, updatedValue, ts] = msgForCol.split(\":\");\n      const updateTime = timeFormatter(new Date(parseInt(ts as string)));\n      return (\n        <span>\n          {\"Update rejected. Original value \"}\n          <b>{originalValue}</b>\n          {\" could not be updated to \"}\n          <b>{value}</b>\n          {\". It was updated to \"}\n          <b>{updatedValue}</b>\n          {\" at \"}\n          {updateTime}\n          {\".\"}\n        </span>\n      );\n    }\n  }\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,aAAgB,GAAA,UAAA,CAAW,EAAE,IAAA,EAAM,YAAY,CAAA;AACrD,MAAM,iBAAA,0BAA2B,sBAAsB,CAAA;AAEhD,MAAM,iBAAoB,GAAA,CAAC,OAChC,KAAA,OAAA,CAAQ,UAAe,KAAA;AAMZ,MAAA,qBAAA,GAAwB,CACnC,OAAA,EACA,MACM,KAAA;AACN,EAAO,MAAA,CAAA,cAAA,CAAe,SAAS,iBAAmB,EAAA;AAAA,IAChD,YAAc,EAAA,IAAA;AAAA,IACd,KAAO,EAAA;AAAA,GACR,CAAA;AACD,EAAO,OAAA,OAAA;AACT;AAEO,MAAM,iBAAoB,GAAA,CAC/B,OACA,EAAA,MAAA,EACA,aACG,KAAA;AACH,EAAA,MAAM,SAAa,GAAA,OAAA,CAAkC,iBAAiB,CAAA,GACpE,OAAO,IACT,CAAA;AACA,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA;AAAA;AAGT,EAAA,MAAM,SAAS,OAAQ,CAAA,MAAA;AACvB,EAAA,IAAI,OAAO,MAAA,KAAW,QAAY,IAAA,MAAA,KAAW,EAAI,EAAA;AAC/C,IAAM,MAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,GAAG,CAAA;AACvC,IAAA,MAAM,YAAY,cAAe,CAAA,IAAA;AAAA,MAAK,CAAC,GACrC,KAAA,GAAA,CAAI,WAAW,CAAG,EAAA,MAAA,CAAO,IAAI,CAAG,CAAA,CAAA;AAAA,KAClC;AACA,IAAA,IAAI,SAAW,EAAA;AACb,MAAM,MAAA,GAAG,KAAO,EAAA,YAAA,EAAc,EAAE,CAAI,GAAA,SAAA,CAAU,MAAM,GAAG,CAAA;AACvD,MAAA,MAAM,aAAa,aAAc,CAAA,IAAI,KAAK,QAAS,CAAA,EAAY,CAAC,CAAC,CAAA;AACjE,MAAA,4BACG,MACE,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,kCAAA;AAAA,wBACD,GAAA,CAAC,OAAG,QAAc,EAAA,aAAA,EAAA,CAAA;AAAA,QACjB,2BAAA;AAAA,wBACD,GAAA,CAAC,OAAG,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QACT,sBAAA;AAAA,wBACD,GAAA,CAAC,OAAG,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,QAChB,MAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACH,EAAA,CAAA;AAAA;AAEJ;AAEJ;;;;"}

package/esm/editActionRowClassNameGenerator.js

@@ -0,0 +1,22 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+
+const EDIT_ACTION_ROW_CLASS_NAME_GENERATOR = "vuu-edit-actions";
+const editActionRowClassNameGenerator = (dataRow) => {
+  switch (dataRow.vuu_action) {
+    case "addRow":
+      return "vuuTableRow-inserted";
+    case "deleteRow":
+      return "vuuTableRow-deleted";
+  }
+};
+registerComponent(
+  EDIT_ACTION_ROW_CLASS_NAME_GENERATOR,
+  {
+    fn: editActionRowClassNameGenerator,
+    id: EDIT_ACTION_ROW_CLASS_NAME_GENERATOR
+  },
+  "row-class-generator"
+);
+
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator };
+//# sourceMappingURL=editActionRowClassNameGenerator.js.map

package/esm/editActionRowClassNameGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editActionRowClassNameGenerator.js","sources":["../../../packages/vuu-data-editing/src/editActionRowClassNameGenerator.ts"],"sourcesContent":["import type { DataRow } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nexport const EDIT_ACTION_ROW_CLASS_NAME_GENERATOR = \"vuu-edit-actions\";\n\nexport const editActionRowClassNameGenerator = (dataRow: DataRow) => {\n  switch (dataRow.vuu_action) {\n    case \"addRow\":\n      return \"vuuTableRow-inserted\";\n    case \"deleteRow\":\n      return \"vuuTableRow-deleted\";\n  }\n};\n\nregisterComponent(\n  EDIT_ACTION_ROW_CLASS_NAME_GENERATOR,\n  {\n    fn: editActionRowClassNameGenerator,\n    id: EDIT_ACTION_ROW_CLASS_NAME_GENERATOR,\n  },\n  \"row-class-generator\",\n);\n"],"names":[],"mappings":";;AAGO,MAAM,oCAAuC,GAAA;AAEvC,MAAA,+BAAA,GAAkC,CAAC,OAAqB,KAAA;AACnE,EAAA,QAAQ,QAAQ,UAAY;AAAA,IAC1B,KAAK,QAAA;AACH,MAAO,OAAA,sBAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAO,OAAA,qBAAA;AAAA;AAEb;AAEA,iBAAA;AAAA,EACE,oCAAA;AAAA,EACA;AAAA,IACE,EAAI,EAAA,+BAAA;AAAA,IACJ,EAAI,EAAA;AAAA,GACN;AAAA,EACA;AACF,CAAA;;;;"}

package/esm/index.js

@@ -0,0 +1,11 @@
+export { DataEditingProvider, useEditSession } from './DataEditingProvider.js';
+export { useCellEdited } from './useCellEdited.js';
+export { getVuuEditMessage, isEditRowReadOnly, withDataRowEditErrors } from './edit-utils.js';
+export { EditButtons } from './EditButtons.js';
+export { EditModeProvider, useEditMode } from './EditModeProvider.js';
+export { EditError, EditSession, SupersededEditError } from './EditSession.js';
+export { StaleUpdateError, isInlineEditingSession } from '@vuu-ui/vuu-utils2';
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from './editActionRowClassNameGenerator.js';
+export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent } from './UndoCellRenderer.js';
+export { useEditableTable } from './useEditableTable.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/esm/useCellEdited.js

@@ -0,0 +1,27 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+const useCellEdited = (editSession, key, columnName) => {
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      if (!editSession) {
+        return () => void 0;
+      }
+      const handleCellEditChanged = (changedKey, changedColumnName) => {
+        if (changedKey === key && changedColumnName === columnName) {
+          onStoreChange();
+        }
+      };
+      editSession.on("cellEditChanged", handleCellEditChanged);
+      return () => editSession.removeListener("cellEditChanged", handleCellEditChanged);
+    },
+    [columnName, editSession, key]
+  );
+  const getSnapshot = useCallback(
+    () => editSession?.isCellEdited(key, columnName) ?? false,
+    [columnName, editSession, key]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+
+export { useCellEdited };
+//# sourceMappingURL=useCellEdited.js.map

package/esm/useCellEdited.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellEdited.js","sources":["../../../packages/vuu-data-editing/src/useCellEdited.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport type { EditSession } from \"./EditSession\";\n\nexport const useCellEdited = (\n  editSession: EditSession | undefined,\n  key: string,\n  columnName: string,\n) => {\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      if (!editSession) {\n        return () => undefined;\n      }\n      const handleCellEditChanged = (\n        changedKey: string,\n        changedColumnName: string,\n      ) => {\n        if (changedKey === key && changedColumnName === columnName) {\n          onStoreChange();\n        }\n      };\n      editSession.on(\"cellEditChanged\", handleCellEditChanged);\n      return () =>\n        editSession.removeListener(\"cellEditChanged\", handleCellEditChanged);\n    },\n    [columnName, editSession, key],\n  );\n  const getSnapshot = useCallback(\n    () => editSession?.isCellEdited(key, columnName) ?? false,\n    [columnName, editSession, key],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,aAAgB,GAAA,CAC3B,WACA,EAAA,GAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAA,IAAI,CAAC,WAAa,EAAA;AAChB,QAAA,OAAO,MAAM,KAAA,CAAA;AAAA;AAEf,MAAM,MAAA,qBAAA,GAAwB,CAC5B,UAAA,EACA,iBACG,KAAA;AACH,QAAI,IAAA,UAAA,KAAe,GAAO,IAAA,iBAAA,KAAsB,UAAY,EAAA;AAC1D,UAAc,aAAA,EAAA;AAAA;AAChB,OACF;AACA,MAAY,WAAA,CAAA,EAAA,CAAG,mBAAmB,qBAAqB,CAAA;AACvD,MAAA,OAAO,MACL,WAAA,CAAY,cAAe,CAAA,iBAAA,EAAmB,qBAAqB,CAAA;AAAA,KACvE;AAAA,IACA,CAAC,UAAY,EAAA,WAAA,EAAa,GAAG;AAAA,GAC/B;AACA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,MAAM,WAAA,EAAa,YAAa,CAAA,GAAA,EAAK,UAAU,CAAK,IAAA,KAAA;AAAA,IACpD,CAAC,UAAY,EAAA,WAAA,EAAa,GAAG;AAAA,GAC/B;AAEA,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA;AACjE;;;;"}

package/esm/useEditableTable.js

@@ -0,0 +1,144 @@
+import { useLayoutEffectSkipFirst } from '@vuu-ui/vuu-utils';
+import { useData } from '@vuu-ui/vuu-utils2';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { EditSession } from './EditSession.js';
+import { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR } from './editActionRowClassNameGenerator.js';
+
+const EDIT_ACTION_ROW_CLASS_NAME_GENERATORS = [
+  EDIT_ACTION_ROW_CLASS_NAME_GENERATOR
+];
+const useEditableTable = ({
+  columns,
+  dataSource: dataSourceProp,
+  deleteMode = "soft",
+  editSessionApi = "createSessionDataSource",
+  copyOption = "All",
+  isEditMode,
+  onCancel,
+  onSave,
+  table
+}) => {
+  const { VuuDataSource } = useData();
+  const [selectionCount, setSelectionCount] = useState(0);
+  useLayoutEffectSkipFirst(() => {
+    console.warn("[useEditableTable] columns and or table changed");
+  }, [columns, table]);
+  const sourceDataSource = useMemo(() => {
+    if (dataSourceProp) {
+      return dataSourceProp;
+    } else if (table) {
+      return new VuuDataSource({ columns, table });
+    } else {
+      throw Error(
+        "useEditableTable unable to provide DataSource, neither dataSource nor table available as props"
+      );
+    }
+  }, [VuuDataSource, columns, dataSourceProp, table]);
+  const editSession = useMemo(
+    () => new EditSession(sourceDataSource, deleteMode, editSessionApi),
+    [deleteMode, editSessionApi, sourceDataSource]
+  );
+  const [lifecycle, setLifecycle] = useState(
+    editSession.lifecycle
+  );
+  const [editState, setEditState] = useState(editSession.editState);
+  const [subscribedSessionDataSource, setSubscribedSessionDataSource] = useState();
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  const sessionDataSource = "sessionDataSource" in lifecycle ? lifecycle.sessionDataSource : void 0;
+  const dataSource = sessionDataSource ?? sourceDataSource;
+  const handleCancel = useCallback(async () => {
+    try {
+      await editSession.end();
+      setSelectionCount(0);
+      onCancel();
+    } catch (error) {
+      console.error("[useEditableTable] cancel edit session failed", error);
+    }
+  }, [editSession, onCancel]);
+  const handleSave = useCallback(
+    async (force = false) => {
+      try {
+        await editSession.end(true, force);
+        setSelectionCount(0);
+        onSave();
+      } catch (error) {
+        console.error("[useEditableTable] save edit session failed", error);
+      }
+    },
+    [editSession, onSave]
+  );
+  const handleDelete = useCallback(async () => {
+    await editSession.deleteSelectedRows();
+  }, [editSession]);
+  const handleUndoRowChange = useCallback(
+    (key) => void editSession.undoRowChange(key),
+    [editSession]
+  );
+  useEffect(() => {
+    dataSource.on("row-selection", setSelectionCount);
+    return () => dataSource.removeListener("row-selection", setSelectionCount);
+  }, [dataSource]);
+  useEffect(() => {
+    if (!sessionDataSource) {
+      setSubscribedSessionDataSource(void 0);
+      return;
+    }
+    const handleSubscribed = () => setSubscribedSessionDataSource(sessionDataSource);
+    setSubscribedSessionDataSource(void 0);
+    sessionDataSource.on("subscribed", handleSubscribed);
+    if (sessionDataSource.status === "subscribed" && sessionDataSource.tableSchema) {
+      handleSubscribed();
+    }
+    return () => sessionDataSource.removeListener("subscribed", handleSubscribed);
+  }, [sessionDataSource]);
+  useEffect(() => {
+    const handleEditState = (nextEditState) => {
+      setEditState(nextEditState);
+    };
+    const handleLifecycle = (nextLifecycle) => {
+      setLifecycle(nextLifecycle);
+    };
+    setEditState(editSession.editState);
+    setLifecycle(editSession.lifecycle);
+    editSession.on("editState", handleEditState);
+    editSession.on("lifecycle", handleLifecycle);
+    return () => {
+      editSession.removeListener("editState", handleEditState);
+      editSession.removeListener("lifecycle", handleLifecycle);
+    };
+  }, [editSession]);
+  useEffect(() => {
+    const transition = isEditMode ? editSession.begin(copyOption) : editSession.end();
+    void transition.catch((error) => {
+      if (isEditMode) {
+        console.error("[useEditableTable] begin edit session failed", error);
+        onCancelRef.current();
+      } else {
+        console.error("[useEditableTable] end edit session failed", error);
+      }
+    });
+  }, [copyOption, editSession, isEditMode]);
+  const canCancel = lifecycle.status === "active" || lifecycle.status === "error" && lifecycle.operation === "end";
+  const canSave = canCancel && (editState === "dirty" || editState === "stale") && editSession.invalidCount === 0;
+  const isEditSessionReady = isEditMode && sessionDataSource !== void 0 && sessionDataSource === editSession.sessionDataSource && subscribedSessionDataSource === sessionDataSource && sessionDataSource.status === "subscribed" && sessionDataSource.tableSchema !== void 0;
+  return {
+    canCancel,
+    canSave,
+    dataSource,
+    editSession,
+    lifecycle,
+    hasSelection: selectionCount > 0,
+    isEditSessionReady,
+    onCancel: handleCancel,
+    onDelete: handleDelete,
+    onSave: handleSave,
+    onUndoRowChange: handleUndoRowChange,
+    rowClassNameGenerators: isEditMode ? EDIT_ACTION_ROW_CLASS_NAME_GENERATORS : void 0,
+    sessionDataSource,
+    sourceDataSource
+  };
+};
+
+export { useEditableTable };
+//# sourceMappingURL=useEditableTable.js.map

package/esm/useEditableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableTable.js","sources":["../../../packages/vuu-data-editing/src/useEditableTable.ts"],"sourcesContent":["import type {\n  CopyOption,\n  DataSource,\n  DeleteRowMode,\n  EditApi,\n} from \"@vuu-ui/vuu-data-types\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useData } from \"@vuu-ui/vuu-utils2\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  EditSession,\n  type EditLifecycle,\n  type EditSessionApi,\n  type EditState,\n} from \"./EditSession\";\nimport { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR } from \"./editActionRowClassNameGenerator\";\n\nconst EDIT_ACTION_ROW_CLASS_NAME_GENERATORS = [\n  EDIT_ACTION_ROW_CLASS_NAME_GENERATOR,\n];\n\nexport type EditMode = \"edit\" | \"view\";\n\nexport interface EditableTableHookProps {\n  /**\n   * columns to be included in subscription. If not provided,\n   * default will be '*'. Ignored if dataSource prop present.\n   */\n  columns?: string[];\n  dataSource?: DataSource;\n  addRowsCount?: number;\n  deleteMode?: DeleteRowMode;\n  editSessionApi?: EditSessionApi;\n  copyOption?: CopyOption;\n  isEditMode: boolean;\n  onCancel: () => void;\n  onSave: () => void;\n  /**\n   * If dataSource not provided, new DataSource\n   * will be created using table and columns\n   */\n  table?: VuuTable;\n}\n\nexport const useEditableTable = ({\n  columns,\n  dataSource: dataSourceProp,\n  deleteMode = \"soft\",\n  editSessionApi = \"createSessionDataSource\",\n  copyOption = \"All\",\n  isEditMode,\n  onCancel,\n  onSave,\n  table,\n}: EditableTableHookProps) => {\n  const { VuuDataSource } = useData();\n  const [selectionCount, setSelectionCount] = useState(0);\n  useLayoutEffectSkipFirst(() => {\n    console.warn(\"[useEditableTable] columns and or table changed\");\n  }, [columns, table]);\n\n  const sourceDataSource = useMemo(() => {\n    if (dataSourceProp) {\n      return dataSourceProp;\n    } else if (table) {\n      return new VuuDataSource({ columns, table });\n    } else {\n      throw Error(\n        \"useEditableTable unable to provide DataSource, neither dataSource nor table available as props\",\n      );\n    }\n  }, [VuuDataSource, columns, dataSourceProp, table]);\n\n  // The editSession will be made available to all the edit controls in scope\n  // by wrapping the edit component with a DataEditingProvider.\n  const editSession = useMemo(\n    () => new EditSession(sourceDataSource as EditApi, deleteMode, editSessionApi),\n    [deleteMode, editSessionApi, sourceDataSource],\n  );\n  const [lifecycle, setLifecycle] = useState<EditLifecycle>(\n    editSession.lifecycle,\n  );\n  const [editState, setEditState] = useState<EditState>(editSession.editState);\n  const [subscribedSessionDataSource, setSubscribedSessionDataSource] =\n    useState<DataSource>();\n  const onCancelRef = useRef(onCancel);\n  onCancelRef.current = onCancel;\n\n  const sessionDataSource =\n    \"sessionDataSource\" in lifecycle ? lifecycle.sessionDataSource : undefined;\n  const dataSource = sessionDataSource ?? sourceDataSource;\n\n  const handleCancel = useCallback(async () => {\n    try {\n      await editSession.end();\n      setSelectionCount(0);\n      onCancel();\n    } catch (error) {\n      console.error(\"[useEditableTable] cancel edit session failed\", error);\n    }\n  }, [editSession, onCancel]);\n\n  const handleSave = useCallback(\n    async (force = false) => {\n      try {\n        await editSession.end(true, force);\n        setSelectionCount(0);\n        onSave();\n      } catch (error) {\n        console.error(\"[useEditableTable] save edit session failed\", error);\n      }\n    },\n    [editSession, onSave],\n  );\n\n  const handleDelete = useCallback(async () => {\n    await editSession.deleteSelectedRows();\n  }, [editSession]);\n\n  const handleUndoRowChange = useCallback(\n    (key: string) => void editSession.undoRowChange(key),\n    [editSession],\n  );\n\n  useEffect(() => {\n    dataSource.on(\"row-selection\", setSelectionCount);\n    return () => dataSource.removeListener(\"row-selection\", setSelectionCount);\n  }, [dataSource]);\n\n  useEffect(() => {\n    if (!sessionDataSource) {\n      setSubscribedSessionDataSource(undefined);\n      return;\n    }\n\n    const handleSubscribed = () =>\n      setSubscribedSessionDataSource(sessionDataSource);\n\n    setSubscribedSessionDataSource(undefined);\n    sessionDataSource.on(\"subscribed\", handleSubscribed);\n    if (\n      sessionDataSource.status === \"subscribed\" &&\n      sessionDataSource.tableSchema\n    ) {\n      handleSubscribed();\n    }\n\n    return () =>\n      sessionDataSource.removeListener(\"subscribed\", handleSubscribed);\n  }, [sessionDataSource]);\n\n  useEffect(() => {\n    const handleEditState = (nextEditState: EditState) => {\n      setEditState(nextEditState);\n    };\n    const handleLifecycle = (nextLifecycle: EditLifecycle) => {\n      setLifecycle(nextLifecycle);\n    };\n\n    setEditState(editSession.editState);\n    setLifecycle(editSession.lifecycle);\n    editSession.on(\"editState\", handleEditState);\n    editSession.on(\"lifecycle\", handleLifecycle);\n    return () => {\n      editSession.removeListener(\"editState\", handleEditState);\n      editSession.removeListener(\"lifecycle\", handleLifecycle);\n    };\n  }, [editSession]);\n\n  useEffect(() => {\n    const transition = isEditMode\n      ? editSession.begin(copyOption)\n      : editSession.end();\n\n    void transition.catch((error) => {\n      if (isEditMode) {\n        console.error(\"[useEditableTable] begin edit session failed\", error);\n        onCancelRef.current();\n      } else {\n        console.error(\"[useEditableTable] end edit session failed\", error);\n      }\n    });\n  }, [copyOption, editSession, isEditMode]);\n\n  const canCancel =\n    lifecycle.status === \"active\" ||\n    (lifecycle.status === \"error\" && lifecycle.operation === \"end\");\n\n  const canSave =\n    canCancel &&\n    (editState === \"dirty\" || editState === \"stale\") &&\n    editSession.invalidCount === 0;\n  const isEditSessionReady =\n    isEditMode &&\n    sessionDataSource !== undefined &&\n    sessionDataSource === editSession.sessionDataSource &&\n    subscribedSessionDataSource === sessionDataSource &&\n    sessionDataSource.status === \"subscribed\" &&\n    sessionDataSource.tableSchema !== undefined;\n\n  return {\n    canCancel,\n    canSave,\n    dataSource,\n    editSession,\n    lifecycle,\n    hasSelection: selectionCount > 0,\n    isEditSessionReady,\n    onCancel: handleCancel,\n    onDelete: handleDelete,\n    onSave: handleSave,\n    onUndoRowChange: handleUndoRowChange,\n    rowClassNameGenerators: isEditMode\n      ? EDIT_ACTION_ROW_CLASS_NAME_GENERATORS\n      : undefined,\n    sessionDataSource,\n    sourceDataSource,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "3.0.0-beta.1",
+  "description": "Shared data editing APIs and React components for VUU UI",
+  "author": "heswell",
+  "license": "Apache-2.0",
+  "type": "module",
+  "dependencies": {
+    "@salt-ds/core": "1.54.1",
+    "@vuu-ui/vuu-ui-controls": "3.0.0-beta.1",
+    "@vuu-ui/vuu-utils": "3.0.0-beta.1",
+    "@vuu-ui/vuu-utils2": "3.0.0-beta.1"
+  },
+  "devDependencies": {
+    "@vuu-ui/vuu-data-types": "3.0.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "3.0.0-beta.1",
+    "@vuu-ui/vuu-table-types": "3.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "sideEffects": false,
+  "files": [
+    "README.md",
+    "esm",
+    "cjs",
+    "/types"
+  ],
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js",
+      "types": "./types/index.d.ts"
+    }
+  },
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "name": "@vuu-ui/vuu-data-editing",
+  "types": "types/index.d.ts"
+}

package/types/DataEditingProvider.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { EditSession } from "./EditSession";
+export declare const DataEditingProvider: ({ children, editSession, }: {
+    children: ReactNode;
+    editSession: EditSession;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function useEditSession(throwIfUnavailable?: false): EditSession | undefined;
+export declare function useEditSession(throwIfUnavailable: true): EditSession;

package/types/EditButtons.d.ts

@@ -0,0 +1,14 @@
+import type { EditSession } from "./EditSession";
+export interface EditButtonProps {
+    canCancel: boolean;
+    canSave: boolean;
+    editSession?: EditSession;
+    hasSelection?: boolean;
+    onCancel?: () => void;
+    onDelete?: () => void;
+    onSave: (force?: boolean) => void;
+    saveLabel?: string;
+    confirmSave?: () => boolean | Promise<boolean>;
+    confirmCancel?: () => boolean | Promise<boolean>;
+}
+export declare const EditButtons: ({ canCancel, canSave, confirmCancel, confirmSave, editSession, hasSelection, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/EditModeProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface EditModeContextProps {
+    isEditMode: boolean;
+    setEditMode: (inEditMode: boolean) => void;
+}
+/**
+ * Implemented as a standalone Provider so that EditMode cna be implemented
+ * at higher level than individual edit controls.
+ */
+export declare const EditModeProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useEditMode: () => EditModeContextProps;

package/types/EditSession.d.ts

@@ -0,0 +1,73 @@
+import type { CopyOption, DataSource, DeleteRowMode, EditApi } from "@vuu-ui/vuu-data-types";
+import type { RpcResult, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+export type EditState = "clean" | "dirty" | "invalid" | "stale";
+export type EditSessionApi = "createSessionDataSource" | "beginEditSession";
+export type NewRowState = {
+    columns: readonly string[];
+    draftRevision: number;
+    errors: Readonly<Record<string, string>>;
+    submitting: boolean;
+    values: Readonly<Record<string, VuuRowDataItemType>>;
+};
+export type EditLifecycle = {
+    status: "idle";
+} | {
+    status: "starting";
+} | {
+    status: "active";
+    sessionDataSource: DataSource;
+} | {
+    status: "ending";
+    sessionDataSource: DataSource;
+} | {
+    status: "error";
+    operation: "begin" | "end";
+    error: Error;
+    sessionDataSource?: DataSource;
+};
+export declare class EditError extends Error {
+}
+export declare class SupersededEditError extends Error {
+}
+type EditSessionEvents = {
+    cellEditChanged: (key: string, columnName: string) => void;
+    editState: (editState: EditState) => void;
+    lifecycle: (lifecycle: EditLifecycle) => void;
+    newRow: (newRowState: NewRowState) => void;
+};
+export declare class EditSession extends EventEmitter<EditSessionEvents> {
+    #private;
+    static readonly newRowKey = "__vuu_new_row__";
+    constructor(dataSource: EditApi, deleteMode?: DeleteRowMode, editSessionApi?: EditSessionApi);
+    get editCount(): number;
+    set editCount(val: number);
+    get invalidCount(): number;
+    set invalidCount(val: number);
+    get deleteCount(): number;
+    set deleteCount(val: number);
+    get addCount(): number;
+    set addCount(val: number);
+    get editState(): EditState;
+    get newRowState(): NewRowState;
+    isNewRow(key: string): key is "__vuu_new_row__";
+    isNewRowFinalColumn(columnName: string): boolean;
+    isNewRowComplete(): boolean;
+    configureNewRow(columns: readonly string[]): void;
+    setNewRowValue(column: string, value: VuuRowDataItemType): void;
+    addNewRow(): Promise<RpcResult>;
+    deleteSelectedRows(): Promise<void>;
+    addRow(rowData?: Record<string, VuuRowDataItemType>): Promise<RpcResult>;
+    restoreRows(keys: string[]): void;
+    hasRowChanges(key: string): boolean;
+    isCellEdited(key: string, columnName: string): boolean;
+    undoRowChange(key: string): Promise<void>;
+    begin(copyOption?: CopyOption): Promise<DataSource>;
+    get dataSource(): EditApi<import("@vuu-ui/vuu-data-types").DataSourceRow<VuuRowDataItemType>> | undefined;
+    get sessionDataSource(): DataSource | undefined;
+    end(saveChanges?: boolean, force?: boolean): Promise<void>;
+    get lifecycle(): EditLifecycle;
+    get inEditMode(): boolean;
+    commit(key: string, columnName: string, originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<RpcResult>;
+}
+export {};

package/types/UndoCellRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const UNDO_CELL_RENDERER = "vuu.undo-cell";
+export interface UndoCellRendererComponentProps {
+    icon?: string;
+    text?: string | false;
+}
+export declare const getUndoButtonContent: (componentProps?: UndoCellRendererComponentProps) => {
+    icon: string | undefined;
+    text: string | undefined;
+};
+export declare const getUndoTooltipContent: (action: unknown) => "Undo delete row" | "Undo insert row" | "Undo row edits" | undefined;
+export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/types/edit-utils.d.ts

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

package/types/editActionRowClassNameGenerator.d.ts

@@ -0,0 +1,3 @@
+import type { DataRow } from "@vuu-ui/vuu-table-types";
+export declare const EDIT_ACTION_ROW_CLASS_NAME_GENERATOR = "vuu-edit-actions";
+export declare const editActionRowClassNameGenerator: (dataRow: DataRow) => "vuuTableRow-inserted" | "vuuTableRow-deleted" | undefined;

package/types/index.d.ts

@@ -0,0 +1,10 @@
+export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
+export { useCellEdited } from "./useCellEdited";
+export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
+export { EditButtons, type EditButtonProps } from "./EditButtons";
+export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";
+export { EditError, EditSession, SupersededEditError, type EditLifecycle, type NewRowState, type EditState, } from "./EditSession";
+export { StaleUpdateError } from "@vuu-ui/vuu-utils2";
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator, } from "./editActionRowClassNameGenerator";
+export { getUndoButtonContent, getUndoTooltipContent, UNDO_CELL_RENDERER, UndoCellRenderer, type UndoCellRendererComponentProps, } from "./UndoCellRenderer";
+export { useEditableTable, type EditableTableHookProps, type EditMode, } from "./useEditableTable";

package/types/useCellEdited.d.ts

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

package/types/useEditableTable.d.ts

@@ -0,0 +1,40 @@
+import type { CopyOption, DataSource, DeleteRowMode } from "@vuu-ui/vuu-data-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { EditSession, type EditLifecycle, type EditSessionApi } from "./EditSession";
+export type EditMode = "edit" | "view";
+export interface EditableTableHookProps {
+    /**
+     * columns to be included in subscription. If not provided,
+     * default will be '*'. Ignored if dataSource prop present.
+     */
+    columns?: string[];
+    dataSource?: DataSource;
+    addRowsCount?: number;
+    deleteMode?: DeleteRowMode;
+    editSessionApi?: EditSessionApi;
+    copyOption?: CopyOption;
+    isEditMode: boolean;
+    onCancel: () => void;
+    onSave: () => void;
+    /**
+     * If dataSource not provided, new DataSource
+     * will be created using table and columns
+     */
+    table?: VuuTable;
+}
+export declare const useEditableTable: ({ columns, dataSource: dataSourceProp, deleteMode, editSessionApi, copyOption, isEditMode, onCancel, onSave, table, }: EditableTableHookProps) => {
+    canCancel: boolean;
+    canSave: boolean;
+    dataSource: DataSource;
+    editSession: EditSession;
+    lifecycle: EditLifecycle;
+    hasSelection: boolean;
+    isEditSessionReady: boolean;
+    onCancel: () => Promise<void>;
+    onDelete: () => Promise<void>;
+    onSave: (force?: boolean) => Promise<void>;
+    onUndoRowChange: (key: string) => undefined;
+    rowClassNameGenerators: string[] | undefined;
+    sessionDataSource: import("@vuu-ui/vuu-data-types").DataSourceBase<import("@vuu-ui/vuu-data-types").DataSourceRowWithBigint> | undefined;
+    sourceDataSource: DataSource;
+};