npm - @vuu-ui/vuu-utils - Versions diffs - 2.0.0-alpha.1 → 2.1.0-alpha.1 - Mend

@vuu-ui/vuu-utils 2.0.0-alpha.1 → 2.1.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js ADDED Viewed

@@ -0,0 +1,25 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+const DataEditingContext = React.createContext(void 0);
+const DataEditingProvider = ({
+  children,
+  editTracker
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataEditingContext.Provider, { value: editTracker, children });
+};
+const useEditTracker = () => {
+  const editTracker = React.useContext(DataEditingContext);
+  if (editTracker === void 0) {
+    console.warn(
+      "[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider"
+    );
+  }
+  return editTracker;
+};
+exports.DataEditingProvider = DataEditingProvider;
+exports.useEditTracker = useEditTracker;
+//# sourceMappingURL=DataEditingProvider.js.map

package/cjs/packages/vuu-utils/src/data-editing/DataEditingProvider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataEditingProvider.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/DataEditingProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\n\nconst DataEditingContext = createContext<EditTracker | undefined>(undefined);\n\nexport const DataEditingProvider = ({\n children,\n editTracker,\n}: {\n children: ReactNode;\n editTracker: EditTracker;\n}) => {\n return (\n <DataEditingContext.Provider value={editTracker}>\n {children}\n </DataEditingContext.Provider>\n );\n};\n\nexport const useEditTracker = () => {\n const editTracker = useContext(DataEditingContext);\n if (editTracker === undefined) {\n console.warn(\n \"[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider\",\n );\n }\n return editTracker;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;AAGA,MAAM,kBAAA,GAAqBA,oBAAuC,KAAS,CAAA,CAAA;AAEpE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,sCACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,aACjC,QACH,EAAA,CAAA;AAEJ;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,WAAA,GAAcC,iBAAW,kBAAkB,CAAA;AACjD,EAAA,IAAI,gBAAgB,KAAW,CAAA,EAAA;AAC7B,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,WAAA;AACT;;;;;"}

package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js ADDED Viewed

@@ -0,0 +1,154 @@
+'use strict';
+var eventEmitter = require('../event-emitter.js');
+var protocolMessageUtils = require('../protocol-message-utils.js');
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _active, _rowEdits, _editCount, _dataSource, _inEditMode;
+class EditTracker extends eventEmitter.EventEmitter {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _active, false);
+    /**
+     *  Row key => row edits
+     */
+    __privateAdd(this, _rowEdits, /* @__PURE__ */ new Map());
+    __privateAdd(this, _editCount, 0);
+    __privateAdd(this, _dataSource);
+    __privateAdd(this, _inEditMode, false);
+  }
+  get active() {
+    return __privateGet(this, _active);
+  }
+  set active(isActive) {
+    __privateSet(this, _active, isActive);
+  }
+  get editCount() {
+    return __privateGet(this, _editCount);
+  }
+  set editCount(val) {
+    if (val !== __privateGet(this, _editCount)) {
+      const oldCount = __privateGet(this, _editCount);
+      __privateSet(this, _editCount, val);
+      if (val === 0) {
+        this.emit("editState", "clean");
+      } else if (oldCount === 0) {
+        this.emit("editState", "dirty");
+      }
+    }
+  }
+  set dataSource(ds) {
+    __privateSet(this, _dataSource, ds);
+  }
+  clear() {
+    __privateGet(this, _rowEdits).clear();
+    __privateSet(this, _editCount, 0);
+  }
+  async enterEditMode() {
+    __privateSet(this, _inEditMode, true);
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "ENTER_EDIT_MODE",
+      params: {}
+    });
+    if (protocolMessageUtils.isRpcSuccess(rpcResponse)) {
+      const { table: sessionTable } = rpcResponse.data;
+      return sessionTable;
+    } else {
+      console.log("fail");
+    }
+  }
+  get inEditMode() {
+    return __privateGet(this, _inEditMode);
+  }
+  get editState() {
+    return this.editCount === 0 ? "clean" : "dirty";
+  }
+  async cancelChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: {}
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  async saveChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: { save: true }
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  // TODO how do we deal with the '_edited' pattern
+  edit(key, columnName, originalValue, newValue) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEdit = cellEdits.get(columnName);
+      if (cellEdit) {
+        if (newValue === cellEdit.originalValue) {
+          if (cellEdits.size === 1) {
+            __privateGet(this, _rowEdits).delete(key);
+          } else {
+            cellEdits.delete(columnName);
+          }
+          this.editCount = __privateGet(this, _editCount) - 1;
+        } else {
+          cellEdit.editedValue = newValue;
+        }
+      } else {
+        cellEdits.set(columnName, {
+          originalValue,
+          editedValue: newValue
+        });
+        this.editCount = __privateGet(this, _editCount) + 1;
+      }
+    } else {
+      __privateGet(this, _rowEdits).set(key, {
+        cellEdits: /* @__PURE__ */ new Map([
+          [columnName, { originalValue, editedValue: newValue }]
+        ])
+      });
+      this.editCount = __privateGet(this, _editCount) + 1;
+    }
+  }
+  async commit(key, columnName) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEditValues = cellEdits.get(columnName);
+      if (cellEditValues) {
+        const { editedValue } = cellEditValues;
+        const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+          type: "RPC_REQUEST",
+          rpcName: "editCell",
+          params: {
+            column: `${columnName}`,
+            data: editedValue,
+            key
+          }
+        });
+        return rpcResponse;
+      }
+    } else {
+      throw Error(`[EditTracker] commit, key ${key} not found `);
+    }
+  }
+}
+_active = new WeakMap();
+_rowEdits = new WeakMap();
+_editCount = new WeakMap();
+_dataSource = new WeakMap();
+_inEditMode = new WeakMap();
+exports.EditTracker = EditTracker;
+//# sourceMappingURL=EditTracker.js.map

package/cjs/packages/vuu-utils/src/data-editing/EditTracker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EditTracker.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/EditTracker.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { EventEmitter } from \"../event-emitter\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditState = \"clean\" | \"dirty\";\n\ntype CellEdit = {\n originalValue: VuuRowDataItemType;\n editedValue: VuuRowDataItemType;\n};\n\ntype RowEditDetails = {\n /**\n * Column name => cell edit details\n */\n cellEdits: Map<string, CellEdit>;\n};\n\ntype EditTrackerEvents = {\n editState: (editState: EditState) => void;\n};\n\nexport class EditTracker extends EventEmitter<EditTrackerEvents> {\n #active = false;\n /**\n * Row key => row edits\n */\n #rowEdits = new Map<string, RowEditDetails>();\n #editCount = 0;\n #dataSource?: DataSource;\n #inEditMode = false;\n\n get active() {\n return this.#active;\n }\n set active(isActive: boolean) {\n this.#active = isActive;\n }\n get editCount() {\n return this.#editCount;\n }\n\n set editCount(val: number) {\n if (val !== this.#editCount) {\n const oldCount = this.#editCount;\n this.#editCount = val;\n if (val === 0) {\n this.emit(\"editState\", \"clean\");\n } else if (oldCount === 0) {\n this.emit(\"editState\", \"dirty\");\n }\n }\n }\n\n set dataSource(ds: DataSource) {\n this.#dataSource = ds;\n }\n\n clear() {\n this.#rowEdits.clear();\n this.#editCount = 0;\n }\n\n async enterEditMode() {\n this.#inEditMode = true;\n\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"ENTER_EDIT_MODE\",\n params: {},\n });\n\n if (isRpcSuccess(rpcResponse)) {\n const { table: sessionTable } = rpcResponse.data as { table: VuuTable };\n return sessionTable;\n } else {\n console.log(\"fail\");\n }\n }\n\n get inEditMode() {\n return this.#inEditMode;\n }\n\n get editState(): EditState {\n return this.editCount === 0 ? \"clean\" : \"dirty\";\n }\n\n async cancelChanges() {\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"EXIT_EDIT_MODE\",\n params: {},\n });\n this.clear();\n return rpcResponse;\n }\n\n async saveChanges() {\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"EXIT_EDIT_MODE\",\n params: { save: true },\n });\n this.clear();\n return rpcResponse;\n }\n\n // TODO how do we deal with the '_edited' pattern\n edit(\n key: string,\n columnName: string,\n originalValue: VuuRowDataItemType,\n newValue: VuuRowDataItemType,\n ) {\n const rowEditDetails = this.#rowEdits.get(key);\n if (rowEditDetails) {\n const { cellEdits } = rowEditDetails;\n const cellEdit = cellEdits.get(columnName);\n if (cellEdit) {\n if (newValue === cellEdit.originalValue) {\n if (cellEdits.size === 1) {\n this.#rowEdits.delete(key);\n } else {\n // re-editing a cell had removed the edit\n cellEdits.delete(columnName);\n }\n this.editCount = this.#editCount - 1;\n } else {\n cellEdit.editedValue = newValue;\n }\n } else {\n // row has already been edited, but this column has not\n cellEdits.set(columnName, {\n originalValue,\n editedValue: newValue,\n });\n this.editCount = this.#editCount + 1;\n }\n } else {\n this.#rowEdits.set(key, {\n cellEdits: new Map([\n [columnName, { originalValue, editedValue: newValue }],\n ]),\n });\n this.editCount = this.#editCount + 1;\n }\n }\n\n async commit(key: string, columnName: string) {\n const rowEditDetails = this.#rowEdits.get(key);\n if (rowEditDetails) {\n const { cellEdits } = rowEditDetails;\n const cellEditValues = cellEdits.get(columnName);\n if (cellEditValues) {\n const { editedValue } = cellEditValues;\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"editCell\",\n params: {\n column: `${columnName}`,\n data: editedValue,\n key,\n },\n });\n\n return rpcResponse;\n }\n } else {\n throw Error(`[EditTracker] commit, key ${key} not found `);\n }\n }\n}\n"],"names":["EventEmitter","isRpcSuccess"],"mappings":"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"}

package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js ADDED Viewed

@@ -0,0 +1,69 @@
+'use strict';
+var React = require('react');
+var EditTracker = require('./EditTracker.js');
+var DataProvider = require('../context-definitions/DataProvider.js');
+var protocolMessageUtils = require('../protocol-message-utils.js');
+const useEditableTable = ({ table }) => {
+  const { VuuDataSource } = DataProvider.useData();
+  const [editMode, setEditMode] = React.useState("view");
+  const [sessionDataSource, setSessionDataSource] = React.useState(void 0);
+  const dataSource = React.useMemo(() => {
+    return new VuuDataSource({ table });
+  }, [table, VuuDataSource]);
+  const editTracker = React.useMemo(() => new EditTracker.EditTracker(), []);
+  React.useMemo(() => {
+    if (dataSource) {
+      editTracker.dataSource = dataSource;
+    }
+  }, [dataSource, editTracker]);
+  const onCancel = React.useCallback(() => {
+    editTracker.dataSource = dataSource;
+    editTracker.cancelChanges();
+    setEditMode("view");
+    setSessionDataSource(void 0);
+    dataSource.resume?.();
+  }, [dataSource, editTracker]);
+  const onSave = React.useCallback(async () => {
+    editTracker.dataSource = dataSource;
+    const response = await editTracker.saveChanges();
+    if (protocolMessageUtils.isRpcSuccess(response)) {
+      setEditMode("view");
+      setSessionDataSource(void 0);
+      dataSource.resume?.();
+    }
+  }, [dataSource, editTracker]);
+  const onToggleEditMode = React.useCallback(
+    async (e) => {
+      const toggleButton = e.target;
+      const editMode2 = toggleButton.value;
+      setEditMode(editMode2);
+      if (editMode2 === "edit") {
+        const sessionTable = await editTracker.enterEditMode();
+        if (sessionTable && dataSource.tableSchema) {
+          dataSource.suspend?.(false);
+          const sessionDataSource2 = new VuuDataSource({
+            columns: dataSource.columns,
+            table: sessionTable,
+            viewport: sessionTable.table
+          });
+          setSessionDataSource(sessionDataSource2);
+          editTracker.dataSource = sessionDataSource2;
+        }
+      }
+    },
+    [VuuDataSource, dataSource, editTracker]
+  );
+  return {
+    dataSource: sessionDataSource ?? dataSource,
+    editMode,
+    editTracker,
+    onCancel,
+    onSave,
+    onToggleEditMode
+  };
+};
+exports.useEditableTable = useEditableTable;
+//# sourceMappingURL=useEditableTable.js.map

package/cjs/packages/vuu-utils/src/data-editing/useEditableTable.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEditableTable.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/useEditableTable.ts"],"sourcesContent":["import { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\nimport { useData } from \"../context-definitions/DataProvider\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditMode = \"edit\" | \"view\";\n\nexport const useEditableTable = ({ table }: { table: VuuTable }) => {\n const { VuuDataSource } = useData();\n const [editMode, setEditMode] = useState<EditMode>(\"view\");\n const [sessionDataSource, setSessionDataSource] = useState<\n DataSource | undefined\n >(undefined);\n\n const dataSource = useMemo(() => {\n return new VuuDataSource({ table });\n }, [table, VuuDataSource]);\n\n const editTracker = useMemo(() => new EditTracker(), []);\n\n useMemo(() => {\n if (dataSource) {\n editTracker.dataSource = dataSource;\n }\n }, [dataSource, editTracker]);\n\n const onCancel = useCallback(() => {\n editTracker.dataSource = dataSource;\n editTracker.cancelChanges();\n setEditMode(\"view\");\n setSessionDataSource(undefined);\n dataSource.resume?.();\n }, [dataSource, editTracker]);\n\n const onSave = useCallback(async () => {\n editTracker.dataSource = dataSource;\n const response = await editTracker.saveChanges();\n if (isRpcSuccess(response)) {\n setEditMode(\"view\");\n setSessionDataSource(undefined);\n dataSource.resume?.();\n }\n }, [dataSource, editTracker]);\n\n const onToggleEditMode = useCallback(\n async (e: SyntheticEvent<HTMLButtonElement>) => {\n const toggleButton = e.target as HTMLButtonElement;\n const editMode = toggleButton.value as EditMode;\n setEditMode(editMode);\n if (editMode === \"edit\") {\n const sessionTable = await editTracker.enterEditMode();\n if (sessionTable && dataSource.tableSchema) {\n dataSource.suspend?.(false);\n const sessionDataSource = new VuuDataSource({\n columns: dataSource.columns,\n table: sessionTable,\n viewport: sessionTable.table,\n });\n setSessionDataSource(sessionDataSource);\n editTracker.dataSource = sessionDataSource;\n }\n }\n },\n [VuuDataSource, dataSource, editTracker],\n );\n\n return {\n dataSource: sessionDataSource ?? dataSource,\n editMode,\n editTracker,\n onCancel,\n onSave,\n onToggleEditMode,\n };\n};\n"],"names":["useData","useState","useMemo","EditTracker","useCallback","isRpcSuccess","editMode","sessionDataSource"],"mappings":";;;;;;;AASO,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAiC,KAAA;AAClE,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIA,oBAAQ,EAAA;AAClC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAmB,MAAM,CAAA;AACzD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAEhD,KAAS,CAAA,CAAA;AAEX,EAAM,MAAA,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAA,OAAO,IAAI,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA;AAAA,GACjC,EAAA,CAAC,KAAO,EAAA,aAAa,CAAC,CAAA;AAEzB,EAAA,MAAM,cAAcA,aAAQ,CAAA,MAAM,IAAIC,uBAAY,EAAA,EAAG,EAAE,CAAA;AAEvD,EAAAD,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AAAA;AAC3B,GACC,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAWE,kBAAY,MAAM;AACjC,IAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AACzB,IAAA,WAAA,CAAY,aAAc,EAAA;AAC1B,IAAA,WAAA,CAAY,MAAM,CAAA;AAClB,IAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,IAAA,UAAA,CAAW,MAAS,IAAA;AAAA,GACnB,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAM,MAAA,MAAA,GAASA,kBAAY,YAAY;AACrC,IAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AACzB,IAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,WAAY,EAAA;AAC/C,IAAI,IAAAC,iCAAA,CAAa,QAAQ,CAAG,EAAA;AAC1B,MAAA,WAAA,CAAY,MAAM,CAAA;AAClB,MAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,MAAS,IAAA;AAAA;AACtB,GACC,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAAD,iBAAA;AAAA,IACvB,OAAO,CAAyC,KAAA;AAC9C,MAAA,MAAM,eAAe,CAAE,CAAA,MAAA;AACvB,MAAA,MAAME,YAAW,YAAa,CAAA,KAAA;AAC9B,MAAA,WAAA,CAAYA,SAAQ,CAAA;AACpB,MAAA,IAAIA,cAAa,MAAQ,EAAA;AACvB,QAAM,MAAA,YAAA,GAAe,MAAM,WAAA,CAAY,aAAc,EAAA;AACrD,QAAI,IAAA,YAAA,IAAgB,WAAW,WAAa,EAAA;AAC1C,UAAA,UAAA,CAAW,UAAU,KAAK,CAAA;AAC1B,UAAMC,MAAAA,kBAAAA,GAAoB,IAAI,aAAc,CAAA;AAAA,YAC1C,SAAS,UAAW,CAAA,OAAA;AAAA,YACpB,KAAO,EAAA,YAAA;AAAA,YACP,UAAU,YAAa,CAAA;AAAA,WACxB,CAAA;AACD,UAAA,oBAAA,CAAqBA,kBAAiB,CAAA;AACtC,UAAA,WAAA,CAAY,UAAaA,GAAAA,kBAAAA;AAAA;AAC3B;AACF,KACF;AAAA,IACA,CAAC,aAAe,EAAA,UAAA,EAAY,WAAW;AAAA,GACzC;AAEA,EAAO,OAAA;AAAA,IACL,YAAY,iBAAqB,IAAA,UAAA;AAAA,IACjC,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/packages/vuu-utils/src/index.js CHANGED Viewed

@@ -12,6 +12,9 @@ var commonTypes = require('./common-types.js');
 var componentRegistry = require('./component-registry.js');
 var cookieUtils = require('./cookie-utils.js');
 var cssUtils = require('./css-utils.js');
+var DataEditingProvider = require('./data-editing/DataEditingProvider.js');
+var EditTracker = require('./data-editing/EditTracker.js');
+var useEditableTable = require('./data-editing/useEditableTable.js');
 var dataUtils = require('./data-utils.js');
 var BaseDataSource = require('./datasource/BaseDataSource.js');
 var datasourceActionUtils = require('./datasource/datasource-action-utils.js');
@@ -62,6 +65,7 @@ var typeaheadUtils = require('./typeahead-utils.js');
 var urlUtils = require('./url-utils.js');
 var useId = require('./useId.js');
 var useLayoutEffectSkipFirst = require('./useLayoutEffectSkipFirst.js');
+var useResizeObserver = require('./useResizeObserver.js');
 var useStateRef = require('./useStateRef.js');
 var DataContext = require('./context-definitions/DataContext.js');
 var DataProvider = require('./context-definitions/DataProvider.js');
@@ -197,6 +201,10 @@ exports.registerConfigurationEditor = componentRegistry.registerConfigurationEdi
 exports.getCookieValue = cookieUtils.getCookieValue;
 exports.setCookieValue = cookieUtils.setCookieValue;
 exports.importCSS = cssUtils.importCSS;
+exports.DataEditingProvider = DataEditingProvider.DataEditingProvider;
+exports.useEditTracker = DataEditingProvider.useEditTracker;
+exports.EditTracker = EditTracker.EditTracker;
+exports.useEditableTable = useEditableTable.useEditableTable;
 exports.DOWN1 = dataUtils.DOWN1;
 exports.DOWN2 = dataUtils.DOWN2;
 exports.UP1 = dataUtils.UP1;
@@ -434,6 +442,9 @@ exports.getUrlParameter = urlUtils.getUrlParameter;
 exports.hasUrlParameter = urlUtils.hasUrlParameter;
 exports.useId = useId.useId;
 exports.useLayoutEffectSkipFirst = useLayoutEffectSkipFirst.useLayoutEffectSkipFirst;
+exports.WidthHeight = useResizeObserver.WidthHeight;
+exports.WidthOnly = useResizeObserver.WidthOnly;
+exports.useResizeObserver = useResizeObserver.useResizeObserver;
 exports.useStateRef = useStateRef.useStateRef;
 exports.DataContext = DataContext.DataContext;
 exports.DataProvider = DataProvider.DataProvider;

package/cjs/packages/vuu-utils/src/index.js.map CHANGED Viewed

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

package/cjs/packages/vuu-utils/src/useResizeObserver.js ADDED Viewed

@@ -0,0 +1,134 @@
+'use strict';
+var React = require('react');
+const WidthHeight = ["height", "width"];
+const WidthOnly = ["width"];
+const observedMap = /* @__PURE__ */ new Map();
+const getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return Math.floor(element.clientHeight);
+    case "clientWidth":
+      return Math.floor(element.clientWidth);
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(Math.floor(element.scrollHeight));
+    case "scrollWidth":
+      return Math.ceil(Math.floor(element.scrollWidth));
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize && onResize(measurements);
+      }
+    }
+  }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = React.useRef(dimensions);
+  const measure = React.useCallback((target) => {
+    const { width, height } = target.getBoundingClientRect();
+    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+    const flooredHeight = Math.floor(height);
+    const flooredWidth = Math.floor(width);
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(
+          target,
+          {
+            width: flooredWidth,
+            height: flooredHeight,
+            contentHeight,
+            contentWidth
+          },
+          dim
+        );
+        return map;
+      },
+      {}
+    );
+  }, []);
+  React.useEffect(() => {
+    const target = ref.current;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const measurements = measure(target);
+        observedTarget.measurements = measurements;
+        resizeObserver.observe(target);
+        if (reportInitialSize) {
+          onResize(measurements);
+        }
+      } else {
+        console.log(
+          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
+          "font-weight:bold; color:red;"
+        );
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        console.log(
+          `useResizeObserver attemping to observe same element twice`,
+          {
+            target
+          }
+        );
+      }
+      registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+      }
+    };
+  }, [measure, ref]);
+  React.useEffect(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+exports.WidthHeight = WidthHeight;
+exports.WidthOnly = WidthOnly;
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/cjs/packages/vuu-utils/src/useResizeObserver.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useResizeObserver.js","sources":["../../../../../../packages/vuu-utils/src/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n height?: T;\n clientHeight?: number;\n clientWidth?: number;\n contentHeight?: number;\n contentWidth?: number;\n scrollHeight?: number;\n scrollWidth?: number;\n width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n onResize?: ResizeHandler;\n measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n element: HTMLElement,\n size: {\n height: number;\n width: number;\n contentHeight: number;\n contentWidth: number;\n },\n dimension: measuredDimension,\n): number => {\n switch (dimension) {\n case \"height\":\n return size.height;\n case \"clientHeight\":\n return Math.floor(element.clientHeight);\n case \"clientWidth\":\n return Math.floor(element.clientWidth);\n case \"contentHeight\":\n return size.contentHeight;\n case \"contentWidth\":\n return size.contentWidth;\n case \"scrollHeight\":\n return Math.ceil(Math.floor(element.scrollHeight));\n case \"scrollWidth\":\n return Math.ceil(Math.floor(element.scrollWidth));\n case \"width\":\n return size.width;\n default:\n return 0;\n }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const { target, borderBoxSize, contentBoxSize } = entry;\n const observedTarget = observedMap.get(target as HTMLElement);\n if (observedTarget) {\n const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n contentBoxSize;\n const { onResize, measurements } = observedTarget;\n let sizeChanged = false;\n for (const [dimension, size] of Object.entries(measurements)) {\n const newSize = getTargetSize(\n target as HTMLElement,\n { height, width, contentHeight, contentWidth },\n dimension as measuredDimension,\n );\n\n if (newSize !== size) {\n sizeChanged = true;\n measurements[dimension as measuredDimension] = newSize;\n }\n }\n if (sizeChanged) {\n // TODO only return measured sizes\n onResize && onResize(measurements);\n }\n }\n }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n ref: RefObject<Element | HTMLElement | null>,\n dimensions: readonly string[],\n onResize: ResizeHandler,\n reportInitialSize = false,\n) {\n const dimensionsRef = useRef(dimensions);\n\n const measure = useCallback((target: HTMLElement): measurements<number> => {\n const { width, height } = target.getBoundingClientRect();\n const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n const flooredHeight = Math.floor(height);\n const flooredWidth = Math.floor(width);\n\n return dimensionsRef.current.reduce(\n (map: { [key: string]: number }, dim) => {\n map[dim] = getTargetSize(\n target,\n {\n width: flooredWidth,\n height: flooredHeight,\n contentHeight,\n contentWidth,\n },\n dim as measuredDimension,\n );\n return map;\n },\n {},\n );\n }, []);\n\n // TODO use ref to store resizeHandler here\n // resize handler registered with REsizeObserver will never change\n // use ref to store user onResize callback here\n // resizeHandler will call user callback.current\n\n // Keep this effect separate in case user inadvertently passes different\n // dimensions or callback instance each time - we only ever want to\n // initiate new observation when ref changes.\n useEffect(() => {\n const target = ref.current as HTMLElement;\n async function registerObserver() {\n // Create the map entry immediately. useEffect may fire below\n // before fonts are ready and attempt to update entry\n observedMap.set(target, { measurements: {} as measurements<number> });\n // await document.fonts.ready;\n const observedTarget = observedMap.get(target);\n if (observedTarget) {\n const measurements = measure(target);\n observedTarget.measurements = measurements;\n resizeObserver.observe(target);\n if (reportInitialSize) {\n onResize(measurements);\n }\n } else {\n console.log(\n `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n \"font-weight:bold; color:red;\",\n );\n }\n }\n\n if (target) {\n // TODO might we want multiple callers to attach a listener to the same element ?\n if (observedMap.has(target)) {\n console.log(\n `useResizeObserver attemping to observe same element twice`,\n {\n target,\n },\n );\n // throw Error(\n // \"useResizeObserver attemping to observe same element twice\"\n // );\n }\n // TODO set a pending entry on map\n registerObserver();\n }\n return () => {\n if (target && observedMap.has(target)) {\n resizeObserver.unobserve(target);\n observedMap.delete(target);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [measure, ref]);\n\n useEffect(() => {\n const target = ref.current as HTMLElement;\n const record = observedMap.get(target);\n if (record) {\n if (dimensionsRef.current !== dimensions) {\n dimensionsRef.current = dimensions;\n const measurements = measure(target);\n record.measurements = measurements;\n }\n // Might not have changed, but no harm ...\n record.onResize = onResize;\n }\n }, [dimensions, measure, ref, onResize]);\n}\n"],"names":["useRef","useCallback","useEffect"],"mappings":"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"}

package/esm/packages/vuu-utils/src/data-editing/DataEditingProvider.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+const DataEditingContext = createContext(void 0);
+const DataEditingProvider = ({
+  children,
+  editTracker
+}) => {
+  return /* @__PURE__ */ jsx(DataEditingContext.Provider, { value: editTracker, children });
+};
+const useEditTracker = () => {
+  const editTracker = useContext(DataEditingContext);
+  if (editTracker === void 0) {
+    console.warn(
+      "[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider"
+    );
+  }
+  return editTracker;
+};
+export { DataEditingProvider, useEditTracker };
+//# sourceMappingURL=DataEditingProvider.js.map

package/esm/packages/vuu-utils/src/data-editing/DataEditingProvider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DataEditingProvider.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/DataEditingProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\n\nconst DataEditingContext = createContext<EditTracker | undefined>(undefined);\n\nexport const DataEditingProvider = ({\n children,\n editTracker,\n}: {\n children: ReactNode;\n editTracker: EditTracker;\n}) => {\n return (\n <DataEditingContext.Provider value={editTracker}>\n {children}\n </DataEditingContext.Provider>\n );\n};\n\nexport const useEditTracker = () => {\n const editTracker = useContext(DataEditingContext);\n if (editTracker === undefined) {\n console.warn(\n \"[useEditTracker] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider\",\n );\n }\n return editTracker;\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,kBAAA,GAAqB,cAAuC,KAAS,CAAA,CAAA;AAEpE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,2BACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,aACjC,QACH,EAAA,CAAA;AAEJ;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,WAAA,GAAc,WAAW,kBAAkB,CAAA;AACjD,EAAA,IAAI,gBAAgB,KAAW,CAAA,EAAA;AAC7B,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,WAAA;AACT;;;;"}

package/esm/packages/vuu-utils/src/data-editing/EditTracker.js ADDED Viewed

@@ -0,0 +1,152 @@
+import { EventEmitter } from '../event-emitter.js';
+import { isRpcSuccess } from '../protocol-message-utils.js';
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _active, _rowEdits, _editCount, _dataSource, _inEditMode;
+class EditTracker extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _active, false);
+    /**
+     *  Row key => row edits
+     */
+    __privateAdd(this, _rowEdits, /* @__PURE__ */ new Map());
+    __privateAdd(this, _editCount, 0);
+    __privateAdd(this, _dataSource);
+    __privateAdd(this, _inEditMode, false);
+  }
+  get active() {
+    return __privateGet(this, _active);
+  }
+  set active(isActive) {
+    __privateSet(this, _active, isActive);
+  }
+  get editCount() {
+    return __privateGet(this, _editCount);
+  }
+  set editCount(val) {
+    if (val !== __privateGet(this, _editCount)) {
+      const oldCount = __privateGet(this, _editCount);
+      __privateSet(this, _editCount, val);
+      if (val === 0) {
+        this.emit("editState", "clean");
+      } else if (oldCount === 0) {
+        this.emit("editState", "dirty");
+      }
+    }
+  }
+  set dataSource(ds) {
+    __privateSet(this, _dataSource, ds);
+  }
+  clear() {
+    __privateGet(this, _rowEdits).clear();
+    __privateSet(this, _editCount, 0);
+  }
+  async enterEditMode() {
+    __privateSet(this, _inEditMode, true);
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "ENTER_EDIT_MODE",
+      params: {}
+    });
+    if (isRpcSuccess(rpcResponse)) {
+      const { table: sessionTable } = rpcResponse.data;
+      return sessionTable;
+    } else {
+      console.log("fail");
+    }
+  }
+  get inEditMode() {
+    return __privateGet(this, _inEditMode);
+  }
+  get editState() {
+    return this.editCount === 0 ? "clean" : "dirty";
+  }
+  async cancelChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: {}
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  async saveChanges() {
+    const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+      type: "RPC_REQUEST",
+      rpcName: "EXIT_EDIT_MODE",
+      params: { save: true }
+    });
+    this.clear();
+    return rpcResponse;
+  }
+  // TODO how do we deal with the '_edited' pattern
+  edit(key, columnName, originalValue, newValue) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEdit = cellEdits.get(columnName);
+      if (cellEdit) {
+        if (newValue === cellEdit.originalValue) {
+          if (cellEdits.size === 1) {
+            __privateGet(this, _rowEdits).delete(key);
+          } else {
+            cellEdits.delete(columnName);
+          }
+          this.editCount = __privateGet(this, _editCount) - 1;
+        } else {
+          cellEdit.editedValue = newValue;
+        }
+      } else {
+        cellEdits.set(columnName, {
+          originalValue,
+          editedValue: newValue
+        });
+        this.editCount = __privateGet(this, _editCount) + 1;
+      }
+    } else {
+      __privateGet(this, _rowEdits).set(key, {
+        cellEdits: /* @__PURE__ */ new Map([
+          [columnName, { originalValue, editedValue: newValue }]
+        ])
+      });
+      this.editCount = __privateGet(this, _editCount) + 1;
+    }
+  }
+  async commit(key, columnName) {
+    const rowEditDetails = __privateGet(this, _rowEdits).get(key);
+    if (rowEditDetails) {
+      const { cellEdits } = rowEditDetails;
+      const cellEditValues = cellEdits.get(columnName);
+      if (cellEditValues) {
+        const { editedValue } = cellEditValues;
+        const rpcResponse = await __privateGet(this, _dataSource)?.rpcRequest?.({
+          type: "RPC_REQUEST",
+          rpcName: "editCell",
+          params: {
+            column: `${columnName}`,
+            data: editedValue,
+            key
+          }
+        });
+        return rpcResponse;
+      }
+    } else {
+      throw Error(`[EditTracker] commit, key ${key} not found `);
+    }
+  }
+}
+_active = new WeakMap();
+_rowEdits = new WeakMap();
+_editCount = new WeakMap();
+_dataSource = new WeakMap();
+_inEditMode = new WeakMap();
+export { EditTracker };
+//# sourceMappingURL=EditTracker.js.map

package/esm/packages/vuu-utils/src/data-editing/EditTracker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EditTracker.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/EditTracker.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { EventEmitter } from \"../event-emitter\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditState = \"clean\" | \"dirty\";\n\ntype CellEdit = {\n originalValue: VuuRowDataItemType;\n editedValue: VuuRowDataItemType;\n};\n\ntype RowEditDetails = {\n /**\n * Column name => cell edit details\n */\n cellEdits: Map<string, CellEdit>;\n};\n\ntype EditTrackerEvents = {\n editState: (editState: EditState) => void;\n};\n\nexport class EditTracker extends EventEmitter<EditTrackerEvents> {\n #active = false;\n /**\n * Row key => row edits\n */\n #rowEdits = new Map<string, RowEditDetails>();\n #editCount = 0;\n #dataSource?: DataSource;\n #inEditMode = false;\n\n get active() {\n return this.#active;\n }\n set active(isActive: boolean) {\n this.#active = isActive;\n }\n get editCount() {\n return this.#editCount;\n }\n\n set editCount(val: number) {\n if (val !== this.#editCount) {\n const oldCount = this.#editCount;\n this.#editCount = val;\n if (val === 0) {\n this.emit(\"editState\", \"clean\");\n } else if (oldCount === 0) {\n this.emit(\"editState\", \"dirty\");\n }\n }\n }\n\n set dataSource(ds: DataSource) {\n this.#dataSource = ds;\n }\n\n clear() {\n this.#rowEdits.clear();\n this.#editCount = 0;\n }\n\n async enterEditMode() {\n this.#inEditMode = true;\n\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"ENTER_EDIT_MODE\",\n params: {},\n });\n\n if (isRpcSuccess(rpcResponse)) {\n const { table: sessionTable } = rpcResponse.data as { table: VuuTable };\n return sessionTable;\n } else {\n console.log(\"fail\");\n }\n }\n\n get inEditMode() {\n return this.#inEditMode;\n }\n\n get editState(): EditState {\n return this.editCount === 0 ? \"clean\" : \"dirty\";\n }\n\n async cancelChanges() {\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"EXIT_EDIT_MODE\",\n params: {},\n });\n this.clear();\n return rpcResponse;\n }\n\n async saveChanges() {\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"EXIT_EDIT_MODE\",\n params: { save: true },\n });\n this.clear();\n return rpcResponse;\n }\n\n // TODO how do we deal with the '_edited' pattern\n edit(\n key: string,\n columnName: string,\n originalValue: VuuRowDataItemType,\n newValue: VuuRowDataItemType,\n ) {\n const rowEditDetails = this.#rowEdits.get(key);\n if (rowEditDetails) {\n const { cellEdits } = rowEditDetails;\n const cellEdit = cellEdits.get(columnName);\n if (cellEdit) {\n if (newValue === cellEdit.originalValue) {\n if (cellEdits.size === 1) {\n this.#rowEdits.delete(key);\n } else {\n // re-editing a cell had removed the edit\n cellEdits.delete(columnName);\n }\n this.editCount = this.#editCount - 1;\n } else {\n cellEdit.editedValue = newValue;\n }\n } else {\n // row has already been edited, but this column has not\n cellEdits.set(columnName, {\n originalValue,\n editedValue: newValue,\n });\n this.editCount = this.#editCount + 1;\n }\n } else {\n this.#rowEdits.set(key, {\n cellEdits: new Map([\n [columnName, { originalValue, editedValue: newValue }],\n ]),\n });\n this.editCount = this.#editCount + 1;\n }\n }\n\n async commit(key: string, columnName: string) {\n const rowEditDetails = this.#rowEdits.get(key);\n if (rowEditDetails) {\n const { cellEdits } = rowEditDetails;\n const cellEditValues = cellEdits.get(columnName);\n if (cellEditValues) {\n const { editedValue } = cellEditValues;\n const rpcResponse = await this.#dataSource?.rpcRequest?.({\n type: \"RPC_REQUEST\",\n rpcName: \"editCell\",\n params: {\n column: `${columnName}`,\n data: editedValue,\n key,\n },\n });\n\n return rpcResponse;\n }\n } else {\n throw Error(`[EditTracker] commit, key ${key} not found `);\n }\n }\n}\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-utils/src/data-editing/useEditableTable.js ADDED Viewed

@@ -0,0 +1,67 @@
+import { useState, useMemo, useCallback } from 'react';
+import { EditTracker } from './EditTracker.js';
+import { useData } from '../context-definitions/DataProvider.js';
+import { isRpcSuccess } from '../protocol-message-utils.js';
+const useEditableTable = ({ table }) => {
+  const { VuuDataSource } = useData();
+  const [editMode, setEditMode] = useState("view");
+  const [sessionDataSource, setSessionDataSource] = useState(void 0);
+  const dataSource = useMemo(() => {
+    return new VuuDataSource({ table });
+  }, [table, VuuDataSource]);
+  const editTracker = useMemo(() => new EditTracker(), []);
+  useMemo(() => {
+    if (dataSource) {
+      editTracker.dataSource = dataSource;
+    }
+  }, [dataSource, editTracker]);
+  const onCancel = useCallback(() => {
+    editTracker.dataSource = dataSource;
+    editTracker.cancelChanges();
+    setEditMode("view");
+    setSessionDataSource(void 0);
+    dataSource.resume?.();
+  }, [dataSource, editTracker]);
+  const onSave = useCallback(async () => {
+    editTracker.dataSource = dataSource;
+    const response = await editTracker.saveChanges();
+    if (isRpcSuccess(response)) {
+      setEditMode("view");
+      setSessionDataSource(void 0);
+      dataSource.resume?.();
+    }
+  }, [dataSource, editTracker]);
+  const onToggleEditMode = useCallback(
+    async (e) => {
+      const toggleButton = e.target;
+      const editMode2 = toggleButton.value;
+      setEditMode(editMode2);
+      if (editMode2 === "edit") {
+        const sessionTable = await editTracker.enterEditMode();
+        if (sessionTable && dataSource.tableSchema) {
+          dataSource.suspend?.(false);
+          const sessionDataSource2 = new VuuDataSource({
+            columns: dataSource.columns,
+            table: sessionTable,
+            viewport: sessionTable.table
+          });
+          setSessionDataSource(sessionDataSource2);
+          editTracker.dataSource = sessionDataSource2;
+        }
+      }
+    },
+    [VuuDataSource, dataSource, editTracker]
+  );
+  return {
+    dataSource: sessionDataSource ?? dataSource,
+    editMode,
+    editTracker,
+    onCancel,
+    onSave,
+    onToggleEditMode
+  };
+};
+export { useEditableTable };
+//# sourceMappingURL=useEditableTable.js.map

package/esm/packages/vuu-utils/src/data-editing/useEditableTable.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEditableTable.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/useEditableTable.ts"],"sourcesContent":["import { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { EditTracker } from \"./EditTracker\";\nimport { useData } from \"../context-definitions/DataProvider\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { isRpcSuccess } from \"../protocol-message-utils\";\n\nexport type EditMode = \"edit\" | \"view\";\n\nexport const useEditableTable = ({ table }: { table: VuuTable }) => {\n const { VuuDataSource } = useData();\n const [editMode, setEditMode] = useState<EditMode>(\"view\");\n const [sessionDataSource, setSessionDataSource] = useState<\n DataSource | undefined\n >(undefined);\n\n const dataSource = useMemo(() => {\n return new VuuDataSource({ table });\n }, [table, VuuDataSource]);\n\n const editTracker = useMemo(() => new EditTracker(), []);\n\n useMemo(() => {\n if (dataSource) {\n editTracker.dataSource = dataSource;\n }\n }, [dataSource, editTracker]);\n\n const onCancel = useCallback(() => {\n editTracker.dataSource = dataSource;\n editTracker.cancelChanges();\n setEditMode(\"view\");\n setSessionDataSource(undefined);\n dataSource.resume?.();\n }, [dataSource, editTracker]);\n\n const onSave = useCallback(async () => {\n editTracker.dataSource = dataSource;\n const response = await editTracker.saveChanges();\n if (isRpcSuccess(response)) {\n setEditMode(\"view\");\n setSessionDataSource(undefined);\n dataSource.resume?.();\n }\n }, [dataSource, editTracker]);\n\n const onToggleEditMode = useCallback(\n async (e: SyntheticEvent<HTMLButtonElement>) => {\n const toggleButton = e.target as HTMLButtonElement;\n const editMode = toggleButton.value as EditMode;\n setEditMode(editMode);\n if (editMode === \"edit\") {\n const sessionTable = await editTracker.enterEditMode();\n if (sessionTable && dataSource.tableSchema) {\n dataSource.suspend?.(false);\n const sessionDataSource = new VuuDataSource({\n columns: dataSource.columns,\n table: sessionTable,\n viewport: sessionTable.table,\n });\n setSessionDataSource(sessionDataSource);\n editTracker.dataSource = sessionDataSource;\n }\n }\n },\n [VuuDataSource, dataSource, editTracker],\n );\n\n return {\n dataSource: sessionDataSource ?? dataSource,\n editMode,\n editTracker,\n onCancel,\n onSave,\n onToggleEditMode,\n };\n};\n"],"names":["editMode","sessionDataSource"],"mappings":";;;;;AASO,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAiC,KAAA;AAClE,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAClC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAmB,MAAM,CAAA;AACzD,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAEhD,KAAS,CAAA,CAAA;AAEX,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,OAAO,IAAI,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA;AAAA,GACjC,EAAA,CAAC,KAAO,EAAA,aAAa,CAAC,CAAA;AAEzB,EAAA,MAAM,cAAc,OAAQ,CAAA,MAAM,IAAI,WAAY,EAAA,EAAG,EAAE,CAAA;AAEvD,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AAAA;AAC3B,GACC,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,IAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AACzB,IAAA,WAAA,CAAY,aAAc,EAAA;AAC1B,IAAA,WAAA,CAAY,MAAM,CAAA;AAClB,IAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,IAAA,UAAA,CAAW,MAAS,IAAA;AAAA,GACnB,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAM,MAAA,MAAA,GAAS,YAAY,YAAY;AACrC,IAAA,WAAA,CAAY,UAAa,GAAA,UAAA;AACzB,IAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,WAAY,EAAA;AAC/C,IAAI,IAAA,YAAA,CAAa,QAAQ,CAAG,EAAA;AAC1B,MAAA,WAAA,CAAY,MAAM,CAAA;AAClB,MAAA,oBAAA,CAAqB,KAAS,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,MAAS,IAAA;AAAA;AACtB,GACC,EAAA,CAAC,UAAY,EAAA,WAAW,CAAC,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,OAAO,CAAyC,KAAA;AAC9C,MAAA,MAAM,eAAe,CAAE,CAAA,MAAA;AACvB,MAAA,MAAMA,YAAW,YAAa,CAAA,KAAA;AAC9B,MAAA,WAAA,CAAYA,SAAQ,CAAA;AACpB,MAAA,IAAIA,cAAa,MAAQ,EAAA;AACvB,QAAM,MAAA,YAAA,GAAe,MAAM,WAAA,CAAY,aAAc,EAAA;AACrD,QAAI,IAAA,YAAA,IAAgB,WAAW,WAAa,EAAA;AAC1C,UAAA,UAAA,CAAW,UAAU,KAAK,CAAA;AAC1B,UAAMC,MAAAA,kBAAAA,GAAoB,IAAI,aAAc,CAAA;AAAA,YAC1C,SAAS,UAAW,CAAA,OAAA;AAAA,YACpB,KAAO,EAAA,YAAA;AAAA,YACP,UAAU,YAAa,CAAA;AAAA,WACxB,CAAA;AACD,UAAA,oBAAA,CAAqBA,kBAAiB,CAAA;AACtC,UAAA,WAAA,CAAY,UAAaA,GAAAA,kBAAAA;AAAA;AAC3B;AACF,KACF;AAAA,IACA,CAAC,aAAe,EAAA,UAAA,EAAY,WAAW;AAAA,GACzC;AAEA,EAAO,OAAA;AAAA,IACL,YAAY,iBAAqB,IAAA,UAAA;AAAA,IACjC,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/packages/vuu-utils/src/index.js CHANGED Viewed

@@ -10,6 +10,9 @@ export { MEASURES } from './common-types.js';
 export { getCellConfigPanelRenderer, getCellRenderer, getCellRendererOptions, getColumnHeaderContentRenderer, getColumnHeaderLabelRenderer, getConfigurationEditor, getEditRuleValidator, getLayoutComponent, getRegisteredCellRenderers, getRowClassNameGenerator, isContainer, isLayoutComponent, isView, registerComponent, registerConfigurationEditor } from './component-registry.js';
 export { getCookieValue, setCookieValue } from './cookie-utils.js';
 export { importCSS } from './css-utils.js';
+export { DataEditingProvider, useEditTracker } from './data-editing/DataEditingProvider.js';
+export { EditTracker } from './data-editing/EditTracker.js';
+export { useEditableTable } from './data-editing/useEditableTable.js';
 export { DOWN1, DOWN2, UP1, UP2, asInteger, getMovingValueDirection, isValidNumber, numericTypeOfStringValue, shallowEquals, stringIsValidDecimal, stringIsValidInt, stringIsValidNumber } from './data-utils.js';
 export { BaseDataSource, defaultSuspenseProps } from './datasource/BaseDataSource.js';
 export { isViewportMenusAction, isVisualLinkCreatedAction, isVisualLinkRemovedAction, isVisualLinksAction, isVuuFeatureAction } from './datasource/datasource-action-utils.js';
@@ -60,6 +63,7 @@ export { NO_DATA_MATCH } from './typeahead-utils.js';
 export { getUrlParameter, hasUrlParameter } from './url-utils.js';
 export { useId } from './useId.js';
 export { useLayoutEffectSkipFirst } from './useLayoutEffectSkipFirst.js';
+export { WidthHeight, WidthOnly, useResizeObserver } from './useResizeObserver.js';
 export { useStateRef } from './useStateRef.js';
 export { DataContext } from './context-definitions/DataContext.js';
 export { DataProvider, useData } from './context-definitions/DataProvider.js';

package/esm/packages/vuu-utils/src/index.js.map CHANGED Viewed

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

package/esm/packages/vuu-utils/src/useResizeObserver.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { useRef, useCallback, useEffect } from 'react';
+const WidthHeight = ["height", "width"];
+const WidthOnly = ["width"];
+const observedMap = /* @__PURE__ */ new Map();
+const getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return Math.floor(element.clientHeight);
+    case "clientWidth":
+      return Math.floor(element.clientWidth);
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(Math.floor(element.scrollHeight));
+    case "scrollWidth":
+      return Math.ceil(Math.floor(element.scrollWidth));
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize && onResize(measurements);
+      }
+    }
+  }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = useRef(dimensions);
+  const measure = useCallback((target) => {
+    const { width, height } = target.getBoundingClientRect();
+    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+    const flooredHeight = Math.floor(height);
+    const flooredWidth = Math.floor(width);
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(
+          target,
+          {
+            width: flooredWidth,
+            height: flooredHeight,
+            contentHeight,
+            contentWidth
+          },
+          dim
+        );
+        return map;
+      },
+      {}
+    );
+  }, []);
+  useEffect(() => {
+    const target = ref.current;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const measurements = measure(target);
+        observedTarget.measurements = measurements;
+        resizeObserver.observe(target);
+        if (reportInitialSize) {
+          onResize(measurements);
+        }
+      } else {
+        console.log(
+          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
+          "font-weight:bold; color:red;"
+        );
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        console.log(
+          `useResizeObserver attemping to observe same element twice`,
+          {
+            target
+          }
+        );
+      }
+      registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+      }
+    };
+  }, [measure, ref]);
+  useEffect(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+export { WidthHeight, WidthOnly, useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/esm/packages/vuu-utils/src/useResizeObserver.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useResizeObserver.js","sources":["../../../../../../packages/vuu-utils/src/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n height?: T;\n clientHeight?: number;\n clientWidth?: number;\n contentHeight?: number;\n contentWidth?: number;\n scrollHeight?: number;\n scrollWidth?: number;\n width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n onResize?: ResizeHandler;\n measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n element: HTMLElement,\n size: {\n height: number;\n width: number;\n contentHeight: number;\n contentWidth: number;\n },\n dimension: measuredDimension,\n): number => {\n switch (dimension) {\n case \"height\":\n return size.height;\n case \"clientHeight\":\n return Math.floor(element.clientHeight);\n case \"clientWidth\":\n return Math.floor(element.clientWidth);\n case \"contentHeight\":\n return size.contentHeight;\n case \"contentWidth\":\n return size.contentWidth;\n case \"scrollHeight\":\n return Math.ceil(Math.floor(element.scrollHeight));\n case \"scrollWidth\":\n return Math.ceil(Math.floor(element.scrollWidth));\n case \"width\":\n return size.width;\n default:\n return 0;\n }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const { target, borderBoxSize, contentBoxSize } = entry;\n const observedTarget = observedMap.get(target as HTMLElement);\n if (observedTarget) {\n const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n contentBoxSize;\n const { onResize, measurements } = observedTarget;\n let sizeChanged = false;\n for (const [dimension, size] of Object.entries(measurements)) {\n const newSize = getTargetSize(\n target as HTMLElement,\n { height, width, contentHeight, contentWidth },\n dimension as measuredDimension,\n );\n\n if (newSize !== size) {\n sizeChanged = true;\n measurements[dimension as measuredDimension] = newSize;\n }\n }\n if (sizeChanged) {\n // TODO only return measured sizes\n onResize && onResize(measurements);\n }\n }\n }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n ref: RefObject<Element | HTMLElement | null>,\n dimensions: readonly string[],\n onResize: ResizeHandler,\n reportInitialSize = false,\n) {\n const dimensionsRef = useRef(dimensions);\n\n const measure = useCallback((target: HTMLElement): measurements<number> => {\n const { width, height } = target.getBoundingClientRect();\n const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n const flooredHeight = Math.floor(height);\n const flooredWidth = Math.floor(width);\n\n return dimensionsRef.current.reduce(\n (map: { [key: string]: number }, dim) => {\n map[dim] = getTargetSize(\n target,\n {\n width: flooredWidth,\n height: flooredHeight,\n contentHeight,\n contentWidth,\n },\n dim as measuredDimension,\n );\n return map;\n },\n {},\n );\n }, []);\n\n // TODO use ref to store resizeHandler here\n // resize handler registered with REsizeObserver will never change\n // use ref to store user onResize callback here\n // resizeHandler will call user callback.current\n\n // Keep this effect separate in case user inadvertently passes different\n // dimensions or callback instance each time - we only ever want to\n // initiate new observation when ref changes.\n useEffect(() => {\n const target = ref.current as HTMLElement;\n async function registerObserver() {\n // Create the map entry immediately. useEffect may fire below\n // before fonts are ready and attempt to update entry\n observedMap.set(target, { measurements: {} as measurements<number> });\n // await document.fonts.ready;\n const observedTarget = observedMap.get(target);\n if (observedTarget) {\n const measurements = measure(target);\n observedTarget.measurements = measurements;\n resizeObserver.observe(target);\n if (reportInitialSize) {\n onResize(measurements);\n }\n } else {\n console.log(\n `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n \"font-weight:bold; color:red;\",\n );\n }\n }\n\n if (target) {\n // TODO might we want multiple callers to attach a listener to the same element ?\n if (observedMap.has(target)) {\n console.log(\n `useResizeObserver attemping to observe same element twice`,\n {\n target,\n },\n );\n // throw Error(\n // \"useResizeObserver attemping to observe same element twice\"\n // );\n }\n // TODO set a pending entry on map\n registerObserver();\n }\n return () => {\n if (target && observedMap.has(target)) {\n resizeObserver.unobserve(target);\n observedMap.delete(target);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [measure, ref]);\n\n useEffect(() => {\n const target = ref.current as HTMLElement;\n const record = observedMap.get(target);\n if (record) {\n if (dimensionsRef.current !== dimensions) {\n dimensionsRef.current = dimensions;\n const measurements = measure(target);\n record.measurements = measurements;\n }\n // Might not have changed, but no harm ...\n record.onResize = onResize;\n }\n }, [dimensions, measure, ref, onResize]);\n}\n"],"names":[],"mappings":";;AAEa,MAAA,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO;AAChC,MAAA,SAAA,GAAY,CAAC,OAAO;AAoBjC,MAAM,WAAA,uBAAkB,GAAkC,EAAA;AAE1D,MAAM,aAAgB,GAAA,CACpB,OACA,EAAA,IAAA,EAMA,SACW,KAAA;AACX,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,QAAA;AACH,MAAA,OAAO,IAAK,CAAA,MAAA;AAAA,IACd,KAAK,cAAA;AACH,MAAO,OAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,YAAY,CAAA;AAAA,IACxC,KAAK,aAAA;AACH,MAAO,OAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,IACvC,KAAK,eAAA;AACH,MAAA,OAAO,IAAK,CAAA,aAAA;AAAA,IACd,KAAK,cAAA;AACH,MAAA,OAAO,IAAK,CAAA,YAAA;AAAA,IACd,KAAK,cAAA;AACH,MAAA,OAAO,KAAK,IAAK,CAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,YAAY,CAAC,CAAA;AAAA,IACnD,KAAK,aAAA;AACH,MAAA,OAAO,KAAK,IAAK,CAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,WAAW,CAAC,CAAA;AAAA,IAClD,KAAK,OAAA;AACH,MAAA,OAAO,IAAK,CAAA,KAAA;AAAA,IACd;AACE,MAAO,OAAA,CAAA;AAAA;AAEb,CAAA;AAGA,MAAM,cAAiB,GAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5E,EAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,cAAA,EAAmB,GAAA,KAAA;AAClD,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAqB,CAAA;AAC5D,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,MAAM,CAAC,EAAE,SAAA,EAAW,QAAQ,UAAY,EAAA,KAAA,EAAO,CAAI,GAAA,aAAA;AACnD,MAAA,MAAM,CAAC,EAAE,SAAA,EAAW,eAAe,UAAY,EAAA,YAAA,EAAc,CAC3D,GAAA,cAAA;AACF,MAAM,MAAA,EAAE,QAAU,EAAA,YAAA,EAAiB,GAAA,cAAA;AACnC,MAAA,IAAI,WAAc,GAAA,KAAA;AAClB,MAAA,KAAA,MAAW,CAAC,SAAW,EAAA,IAAI,KAAK,MAAO,CAAA,OAAA,CAAQ,YAAY,CAAG,EAAA;AAC5D,QAAA,MAAM,OAAU,GAAA,aAAA;AAAA,UACd,MAAA;AAAA,UACA,EAAE,MAAA,EAAQ,KAAO,EAAA,aAAA,EAAe,YAAa,EAAA;AAAA,UAC7C;AAAA,SACF;AAEA,QAAA,IAAI,YAAY,IAAM,EAAA;AACpB,UAAc,WAAA,GAAA,IAAA;AACd,UAAA,YAAA,CAAa,SAA8B,CAAI,GAAA,OAAA;AAAA;AACjD;AAEF,MAAA,IAAI,WAAa,EAAA;AAEf,QAAA,QAAA,IAAY,SAAS,YAAY,CAAA;AAAA;AACnC;AACF;AAEJ,CAAC,CAAA;AAIM,SAAS,iBACd,CAAA,GAAA,EACA,UACA,EAAA,QAAA,EACA,oBAAoB,KACpB,EAAA;AACA,EAAM,MAAA,aAAA,GAAgB,OAAO,UAAU,CAAA;AAEvC,EAAM,MAAA,OAAA,GAAU,WAAY,CAAA,CAAC,MAA8C,KAAA;AACzE,IAAA,MAAM,EAAE,KAAA,EAAO,MAAO,EAAA,GAAI,OAAO,qBAAsB,EAAA;AACvD,IAAA,MAAM,EAAE,WAAA,EAAa,YAAc,EAAA,YAAA,EAAc,eAAkB,GAAA,MAAA;AACnE,IAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AACvC,IAAM,MAAA,YAAA,GAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAErC,IAAA,OAAO,cAAc,OAAQ,CAAA,MAAA;AAAA,MAC3B,CAAC,KAAgC,GAAQ,KAAA;AACvC,QAAA,GAAA,CAAI,GAAG,CAAI,GAAA,aAAA;AAAA,UACT,MAAA;AAAA,UACA;AAAA,YACE,KAAO,EAAA,YAAA;AAAA,YACP,MAAQ,EAAA,aAAA;AAAA,YACR,aAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA;AAAA,SACF;AACA,QAAO,OAAA,GAAA;AAAA,OACT;AAAA,MACA;AAAC,KACH;AAAA,GACF,EAAG,EAAE,CAAA;AAUL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA;AACnB,IAAA,eAAe,gBAAmB,GAAA;AAGhC,MAAA,WAAA,CAAY,IAAI,MAAQ,EAAA,EAAE,YAAc,EAAA,IAA4B,CAAA;AAEpE,MAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA;AAC7C,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA;AACnC,QAAA,cAAA,CAAe,YAAe,GAAA,YAAA;AAC9B,QAAA,cAAA,CAAe,QAAQ,MAAM,CAAA;AAC7B,QAAA,IAAI,iBAAmB,EAAA;AACrB,UAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,GAAA;AAAA,UACN,CAAA,yGAAA,CAAA;AAAA,UACA;AAAA,SACF;AAAA;AACF;AAGF,IAAA,IAAI,MAAQ,EAAA;AAEV,MAAI,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AAC3B,QAAQ,OAAA,CAAA,GAAA;AAAA,UACN,CAAA,yDAAA,CAAA;AAAA,UACA;AAAA,YACE;AAAA;AACF,SACF;AAAA;AAMF,MAAiB,gBAAA,EAAA;AAAA;AAEnB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,MAAU,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AACrC,QAAA,cAAA,CAAe,UAAU,MAAM,CAAA;AAC/B,QAAA,WAAA,CAAY,OAAO,MAAM,CAAA;AAAA;AAC3B,KACF;AAAA,GAEC,EAAA,CAAC,OAAS,EAAA,GAAG,CAAC,CAAA;AAEjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA;AACnB,IAAM,MAAA,MAAA,GAAS,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA;AACrC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAI,IAAA,aAAA,CAAc,YAAY,UAAY,EAAA;AACxC,QAAA,aAAA,CAAc,OAAU,GAAA,UAAA;AACxB,QAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA;AACnC,QAAA,MAAA,CAAO,YAAe,GAAA,YAAA;AAAA;AAGxB,MAAA,MAAA,CAAO,QAAW,GAAA,QAAA;AAAA;AACpB,KACC,CAAC,UAAA,EAAY,OAAS,EAAA,GAAA,EAAK,QAAQ,CAAC,CAAA;AACzC;;;;"}

package/package.json CHANGED Viewed

@@ -1,17 +1,17 @@
 {
-  "version": "2.0.0-alpha.1",
+  "version": "2.1.0-alpha.1",
   "author": "heswell",
   "license": "Apache-2.0",
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.0.0-alpha.1",
-    "@vuu-ui/vuu-table-types": "2.0.0-alpha.1",
-    "@vuu-ui/vuu-filter-types": "2.0.0-alpha.1",
-    "@vuu-ui/vuu-protocol-types": "2.0.0-alpha.1"
+    "@vuu-ui/vuu-data-types": "2.1.0-alpha.1",
+    "@vuu-ui/vuu-table-types": "2.1.0-alpha.1",
+    "@vuu-ui/vuu-filter-types": "2.1.0-alpha.1",
+    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.1"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
-    "@vuu-ui/vuu-filter-parser": "2.0.0-alpha.1",
+    "@vuu-ui/vuu-filter-parser": "2.1.0-alpha.1",
     "clsx": "^2.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"

package/types/data-editing/DataEditingProvider.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { EditTracker } from "./EditTracker";
+export declare const DataEditingProvider: ({ children, editTracker, }: {
+    children: ReactNode;
+    editTracker: EditTracker;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useEditTracker: () => EditTracker | undefined;

package/types/data-editing/EditButtons.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { EditTracker } from "./EditTracker";
+export interface EditButtonProps {
+    editTracker?: EditTracker;
+    onCancel: () => void;
+    onSave: () => void;
+}
+export declare const EditButtons: ({ editTracker, onCancel, onSave, }: EditButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/data-editing/EditTracker.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import type { VuuRowDataItemType, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { EventEmitter } from "../event-emitter";
+export type EditState = "clean" | "dirty";
+type EditTrackerEvents = {
+    editState: (editState: EditState) => void;
+};
+export declare class EditTracker extends EventEmitter<EditTrackerEvents> {
+    #private;
+    get active(): boolean;
+    set active(isActive: boolean);
+    get editCount(): number;
+    set editCount(val: number);
+    set dataSource(ds: DataSource);
+    clear(): void;
+    enterEditMode(): Promise<VuuTable | undefined>;
+    get inEditMode(): boolean;
+    get editState(): EditState;
+    cancelChanges(): Promise<import("@vuu-ui/vuu-protocol-types").RpcResultSuccess | import("@vuu-ui/vuu-protocol-types").RpcResultError | undefined>;
+    saveChanges(): Promise<import("@vuu-ui/vuu-protocol-types").RpcResultSuccess | import("@vuu-ui/vuu-protocol-types").RpcResultError | undefined>;
+    edit(key: string, columnName: string, originalValue: VuuRowDataItemType, newValue: VuuRowDataItemType): void;
+    commit(key: string, columnName: string): Promise<import("@vuu-ui/vuu-protocol-types").RpcResultSuccess | import("@vuu-ui/vuu-protocol-types").RpcResultError | undefined>;
+}
+export {};

package/types/data-editing/useEditableTable.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { SyntheticEvent } from "react";
+import { EditTracker } from "./EditTracker";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export type EditMode = "edit" | "view";
+export declare const useEditableTable: ({ table }: {
+    table: VuuTable;
+}) => {
+    dataSource: DataSource;
+    editMode: EditMode;
+    editTracker: EditTracker;
+    onCancel: () => void;
+    onSave: () => Promise<void>;
+    onToggleEditMode: (e: SyntheticEvent<HTMLButtonElement>) => Promise<void>;
+};

package/types/index.d.ts CHANGED Viewed

@@ -12,6 +12,9 @@ export * from "./common-types";
 export * from "./component-registry";
 export * from "./cookie-utils";
 export * from "./css-utils";
+export { DataEditingProvider, useEditTracker, } from "./data-editing/DataEditingProvider";
+export { EditTracker, type EditState } from "./data-editing/EditTracker";
+export { useEditableTable } from "./data-editing/useEditableTable";
 export * from "./data-utils";
 export * from "./datasource/BaseDataSource";
 export * from "./datasource/datasource-action-utils";
@@ -62,6 +65,7 @@ export * from "./url-utils";
 export * from "./useId";
 export * from "./useLayoutEffectSkipFirst";
 export * from "./user-types";
+export { useResizeObserver, WidthHeight, WidthOnly, type measurements, type ResizeHandler, } from "./useResizeObserver";
 export * from "./useStateRef";
 /** Context declarations hosted in utils to minimize intra package dependencies */
 export { DataContext } from "./context-definitions/DataContext";

package/types/useResizeObserver.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const WidthOnly: string[];
+export type measurements<T = string | number> = {
+    height?: T;
+    clientHeight?: number;
+    clientWidth?: number;
+    contentHeight?: number;
+    contentWidth?: number;
+    scrollHeight?: number;
+    scrollWidth?: number;
+    width?: T;
+};
+export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: readonly string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;