@vuu-ui/vuu-table 2.1.15 → 2.1.16

package/cjs/cell-renderers/input-cell/InputCell.js

@@ -8,11 +8,13 @@ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
 var InputCell$1 = require('./InputCell.css.js');
+var useInputCell = require('./useInputCell.js');
 
 const classBase = "vuuTableInputCell";
 const InputCell = ({
   column,
   dataRow,
+  editedDuringCurrentSession,
   onEdit
 }) => {
   const targetWindow = window.useWindow();
@@ -23,22 +25,30 @@ const InputCell = ({
   });
   const dataValue = dataRow[column.name];
   const { align = "left" } = column;
-  const { edited, warningMessage, ...editProps } = vuuUiControls.useEditableText({
+  const {
+    editing,
+    warningMessage,
+    previousValue = "",
+    ...editProps
+  } = useInputCell.useInputCell({
     column,
     onEdit,
     type: vuuUtils.dataDescriptorTypeToVuuRowDataItemType(column),
     value: dataValue
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: warningMessage, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: warningMessage, placement: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
+  const editRejected = vuuUtils.getVuuEditMessage(dataRow, column, previousValue);
+  const endAdornment = editRejected && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: editRejected, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : warningMessage && align === "left" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: warningMessage, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
+  const startAdornment = editRejected && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: editRejected, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : warningMessage && align === "right" ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: warningMessage, placement: "left", children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Input,
     {
       ...editProps,
       bordered: true,
       className: cx(classBase, {
-        [`${classBase}-edited`]: edited,
-        [`${classBase}-error`]: warningMessage !== void 0
+        [`${classBase}-edited`]: editedDuringCurrentSession === true,
+        [`${classBase}-error`]: warningMessage !== void 0,
+        [`${classBase}-warning`]: editRejected !== void 0,
+        vuuEditing: editing
       }),
       endAdornment,
       startAdornment

package/cjs/cell-renderers/input-cell/InputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\" } = column;\n\n  const { edited, warningMessage, ...editProps } = useEditableText({\n    column,\n    onEdit,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n    value: dataValue,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <Tooltip content={warningMessage} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <Tooltip content={warningMessage} placement=\"left\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: edited,\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","dataDescriptorTypeToVuuRowDataItemType","jsx","Tooltip","Icon","Input","registerComponent"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,EAAE,KAAQ,GAAA,MAAA,EAAW,GAAA,MAAA;AAE3B,EAAA,MAAM,EAAE,MAAQ,EAAA,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IAC/D,MAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,EAAMC,gDAAuC,MAAM,CAAA;AAAA,IACnD,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,eACJ,cAAkB,IAAA,KAAA,KAAU,yBACzBC,cAAA,CAAAC,YAAA,EAAA,EAAQ,SAAS,cAAgB,EAAA,SAAA,EAAU,SAC1C,QAAC,kBAAAD,cAAA,CAAAE,kBAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,iBACJ,cAAkB,IAAA,KAAA,KAAU,0BACzBF,cAAA,CAAAC,YAAA,EAAA,EAAQ,SAAS,cAAgB,EAAA,SAAA,EAAU,QAC1C,QAAC,kBAAAD,cAAA,CAAAE,kBAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAF,cAAA;AAAA,IAACG,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  getVuuEditMessage,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\nimport { useInputCell } from \"./useInputCell\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  editedDuringCurrentSession,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n\n  const { align = \"left\" } = column;\n\n  const {\n    editing,\n    warningMessage,\n    previousValue = \"\",\n    ...editProps\n  } = useInputCell({\n    column,\n    onEdit,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n    value: dataValue,\n  });\n\n  // TODO can this move into useEdtableText ?\n  const editRejected = getVuuEditMessage(dataRow, column, previousValue);\n\n  const endAdornment =\n    editRejected && align === \"left\" ? (\n      <Tooltip content={editRejected} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : warningMessage && align === \"left\" ? (\n      <Tooltip content={warningMessage} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  const startAdornment =\n    editRejected && align === \"right\" ? (\n      <Tooltip content={editRejected} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : warningMessage && align === \"right\" ? (\n      <Tooltip content={warningMessage} placement=\"left\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: editedDuringCurrentSession === true,\n        [`${classBase}-error`]: warningMessage !== undefined,\n        [`${classBase}-warning`]: editRejected !== undefined,\n        vuuEditing: editing,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useInputCell","dataDescriptorTypeToVuuRowDataItemType","getVuuEditMessage","jsx","Tooltip","Icon","Input","registerComponent"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAM,MAAA,EAAE,KAAQ,GAAA,MAAA,EAAW,GAAA,MAAA;AAE3B,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAgB,GAAA,EAAA;AAAA,IAChB,GAAG;AAAA,MACDC,yBAAa,CAAA;AAAA,IACf,MAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,EAAMC,gDAAuC,MAAM,CAAA;AAAA,IACnD,KAAO,EAAA;AAAA,GACR,CAAA;AAGD,EAAA,MAAM,YAAe,GAAAC,0BAAA,CAAkB,OAAS,EAAA,MAAA,EAAQ,aAAa,CAAA;AAErE,EAAA,MAAM,eACJ,YAAgB,IAAA,KAAA,KAAU,MACxB,mBAAAC,cAAA,CAACC,gBAAQ,OAAS,EAAA,YAAA,EAAc,SAAU,EAAA,OAAA,EACxC,yCAACC,kBAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,MAAK,OAAQ,EAAA,CAAA,EACrD,CACE,GAAA,cAAA,IAAkB,UAAU,MAC9B,mBAAAF,cAAA,CAACC,YAAQ,EAAA,EAAA,OAAA,EAAS,gBAAgB,SAAU,EAAA,OAAA,EAC1C,QAAC,kBAAAD,cAAA,CAAAE,kBAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,iBACJ,YAAgB,IAAA,KAAA,KAAU,OACxB,mBAAAF,cAAA,CAACC,gBAAQ,OAAS,EAAA,YAAA,EAAc,SAAU,EAAA,OAAA,EACxC,yCAACC,kBAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,MAAK,OAAQ,EAAA,CAAA,EACrD,CACE,GAAA,cAAA,IAAkB,UAAU,OAC9B,mBAAAF,cAAA,CAACC,YAAQ,EAAA,EAAA,OAAA,EAAS,gBAAgB,SAAU,EAAA,MAAA,EAC1C,QAAC,kBAAAD,cAAA,CAAAE,kBAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAF,cAAA;AAAA,IAACG,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,0BAA+B,KAAA,IAAA;AAAA,QACxD,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,QAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,YAAiB,KAAA,KAAA,CAAA;AAAA,QAC3C,UAAY,EAAA;AAAA,OACb,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/cell-renderers/input-cell/useInputCell.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const stringValueOf = (value) => value?.toString() ?? "";
+const useInputCell = ({
+  column,
+  value,
+  onEdit,
+  type = "string"
+}) => {
+  const [editState, setEditState] = react.useState({
+    editing: false,
+    value: stringValueOf(value)
+  });
+  const initialValueRef = react.useRef(value?.toString() ?? "");
+  const isDirtyRef = react.useRef(false);
+  react.useMemo(() => {
+    if (initialValueRef.current !== value?.toString()) {
+      initialValueRef.current = stringValueOf(value);
+      setEditState((editState2) => ({
+        ...editState2,
+        message: void 0,
+        value: stringValueOf(value)
+      }));
+    }
+  }, [value]);
+  const commit = react.useCallback(async () => {
+    const { value: value2 } = editState;
+    const result = column.clientSideEditValidationCheck?.(value2, "*");
+    if (result?.ok === false) {
+      setEditState((state) => ({
+        ...state,
+        message: result?.messages?.join(",")
+      }));
+      return false;
+    } else {
+      const { current: initialValue } = initialValueRef;
+      const previousValue = vuuUtils.getTypedValue(initialValue, type);
+      try {
+        const typedValue = vuuUtils.getTypedValue(value2, type, true);
+        const response = await onEdit?.(
+          {
+            editType: "commit",
+            isValid: true,
+            previousValue,
+            value: typedValue
+          },
+          "commit"
+        );
+        if (vuuUtils.isRpcSuccess(response)) {
+          isDirtyRef.current = false;
+          setEditState(({ previousValue: previousValue2, value: value3 }) => ({
+            editing: false,
+            previousValue: previousValue2 === value3 ? void 0 : previousValue2 === void 0 ? initialValue : previousValue2,
+            value: value3
+          }));
+        } else if (vuuUtils.isRpcError(response)) {
+          setEditState((state) => ({
+            ...state,
+            message: response.errorMessage
+          }));
+          return false;
+        }
+        initialValueRef.current = value2;
+        return true;
+      } catch (e) {
+        if (e instanceof vuuUtils.DataValidationError) {
+          const { actualType, expectedType, message } = e;
+          if (column) {
+            const { name, label = name } = column;
+            const message2 = `${label} is a ${expectedType} value, data entered is ${actualType} `;
+            setEditState((state) => ({
+              ...state,
+              message: message2
+            }));
+            onEdit?.(
+              {
+                editType: "commit",
+                isValid: false,
+                previousValue,
+                value: value2
+              },
+              "commit"
+            );
+          } else {
+            setEditState((state) => ({
+              ...state,
+              message
+            }));
+          }
+        }
+      }
+    }
+    return false;
+  }, [column, editState, onEdit, type]);
+  const toggleActivation = react.useCallback(
+    async (input, cancel = false) => {
+      if (editState.editing) {
+        if (isDirtyRef.current) {
+          if (cancel) {
+            const { value: previousValue } = editState;
+            isDirtyRef.current = false;
+            setEditState({
+              editing: false,
+              value: initialValueRef.current,
+              message: void 0
+            });
+            onEdit?.(
+              {
+                editType: "cancel",
+                isValid: true,
+                previousValue,
+                value: vuuUtils.getTypedValue(initialValueRef.current, type, true)
+              },
+              "commit"
+            );
+          } else {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              setEditState((editState2) => ({ ...editState2, editing: false }));
+              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
+            }
+          }
+        } else {
+          setEditState((editState2) => ({ ...editState2, editing: false }));
+        }
+      } else if (!cancel) {
+        setEditState((editState2) => ({ ...editState2, editing: true }));
+        input.select();
+      }
+    },
+    [commit, editState, onEdit]
+  );
+  const handleKeyDown = react.useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        toggleActivation(input);
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (editState.editing) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        toggleActivation(input, true);
+      }
+    },
+    [editState, toggleActivation]
+  );
+  const handleFocus = react.useCallback(
+    (e) => {
+      const input = e.target;
+      const source = e.relatedTarget;
+      if (source?.classList.contains("vuuTableCell") && source.contains(input)) {
+        toggleActivation(input);
+      }
+    },
+    [toggleActivation]
+  );
+  const handleBlur = react.useCallback(async () => {
+    if (editState.editing) {
+      if (isDirtyRef.current) {
+        const commitSuccessful = await commit();
+        console.log({ commitSuccessful });
+      }
+      setEditState((editState2) => ({ ...editState2, editing: false }));
+    }
+  }, [commit, editState]);
+  const handleChange = react.useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      isDirtyRef.current = value2 !== initialValueRef.current;
+      const result = column.clientSideEditValidationCheck?.(value2, "change");
+      setEditState({ editing: true, value: value2 });
+      onEdit?.(
+        {
+          editType: "change",
+          isValid: result?.ok !== false,
+          previousValue: initialValueRef.current,
+          value: value2
+        },
+        "change"
+      );
+      if (result?.ok === false) {
+        setEditState({
+          editing: true,
+          value: value2,
+          message: result.messages?.join(",")
+        });
+      }
+    },
+    [column, onEdit]
+  );
+  return {
+    editing: editState.editing,
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    },
+    onChange: handleChange,
+    previousValue: editState.previousValue,
+    value: editState.value,
+    warningMessage: editState.message
+  };
+};
+
+exports.useInputCell = useInputCell;
+//# sourceMappingURL=useInputCell.js.map

package/cjs/cell-renderers/input-cell/useInputCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/useInputCell.ts"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type {\n  RuntimeColumnDescriptor,\n  TableCellEditHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  DataValidationError,\n  dispatchCustomEvent,\n  getTypedValue,\n  isRpcError,\n  isRpcSuccess,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface InputCellHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  column: Pick<\n    RuntimeColumnDescriptor,\n    \"clientSideEditValidationCheck\" | \"label\" | \"name\"\n  >;\n  value?: T;\n  onEdit?: TableCellEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  editing: boolean;\n  message?: string;\n  // Set once we commit an edit, cleared when edit session is ended.\n  previousValue?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useInputCell = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: InputCellHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    editing: false,\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState((editState) => ({\n        ...editState,\n        message: undefined,\n        value: stringValueOf(value),\n      }));\n    }\n  }, [value]);\n\n  const commit = useCallback(async () => {\n    const { value } = editState;\n    const result = column.clientSideEditValidationCheck?.(value, \"*\");\n    if (result?.ok === false) {\n      setEditState((state) => ({\n        ...state,\n        message: result?.messages?.join(\",\"),\n      }));\n      return false;\n    } else {\n      //save initial value,it could be reset by time async operation completes\n      const { current: initialValue } = initialValueRef;\n      const previousValue = getTypedValue(initialValue, type);\n      try {\n        const typedValue = getTypedValue(value, type, true);\n        const response = await onEdit?.(\n          {\n            editType: \"commit\",\n            isValid: true,\n            previousValue,\n            value: typedValue,\n          },\n          \"commit\",\n        );\n        if (isRpcSuccess(response)) {\n          isDirtyRef.current = false;\n          setEditState(({ previousValue, value }) => ({\n            editing: false,\n            previousValue:\n              previousValue === value\n                ? undefined\n                : previousValue === undefined\n                  ? initialValue\n                  : previousValue,\n            value,\n          }));\n        } else if (isRpcError(response)) {\n          setEditState((state) => ({\n            ...state,\n            message: response.errorMessage,\n          }));\n          return false;\n        }\n        initialValueRef.current = value;\n        return true;\n      } catch (e) {\n        if (e instanceof DataValidationError) {\n          const { actualType, expectedType, message } = e;\n          if (column) {\n            const { name, label = name } = column;\n            const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n            onEdit?.(\n              {\n                editType: \"commit\",\n                isValid: false,\n                previousValue,\n                value,\n              },\n              \"commit\",\n            );\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n          }\n        }\n      }\n    }\n    return false;\n  }, [column, editState, onEdit, type]);\n\n  /**\n   * Depending on the current state (editing or not, dirty or not) activation will either be\n   * entering into edit state, leaving edit state or commiting edited value.\n   */\n  const toggleActivation = useCallback(\n    async (input: HTMLInputElement, cancel = false) => {\n      if (editState.editing) {\n        if (isDirtyRef.current) {\n          if (cancel) {\n            const { value: previousValue } = editState;\n            isDirtyRef.current = false;\n            setEditState({\n              editing: false,\n              value: initialValueRef.current,\n              message: undefined,\n            });\n            // this assumes the original value was valid, is that safe ?\n            onEdit?.(\n              {\n                editType: \"cancel\",\n                isValid: true,\n                previousValue,\n                value: getTypedValue(initialValueRef.current, type, true),\n              },\n              \"commit\",\n            );\n          } else {\n            const commitSuccessful = await commit();\n            if (commitSuccessful) {\n              setEditState((editState) => ({ ...editState, editing: false }));\n              dispatchCustomEvent(input, \"vuu-commit\");\n            }\n          }\n        } else {\n          setEditState((editState) => ({ ...editState, editing: false }));\n        }\n      } else if (!cancel) {\n        setEditState((editState) => ({ ...editState, editing: true }));\n        input.select();\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleKeyDown = useCallback(\n    async (evt: KeyboardEvent<HTMLElement>) => {\n      const { key, target } = evt;\n      const input = target as HTMLInputElement;\n      if (key === \"Enter\") {\n        toggleActivation(input);\n      } else if (\n        key === \"ArrowRight\" ||\n        key === \"ArrowLeft\" ||\n        key === \"ArrowUp\" ||\n        key === \"ArrowDown\"\n      ) {\n        if (editState.editing) {\n          evt.stopPropagation();\n        } else {\n          // console.log(\n          //   `[useEditableText] handleKeydown, arrowkey, not editing so let it bubble`,\n          // );\n          // evt.preventDefault();\n        }\n      } else if (evt.key === \"Escape\") {\n        toggleActivation(input, true);\n      }\n    },\n    [editState, toggleActivation],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (e) => {\n      // If focus is transferred from enclosing cell element, we are explicitl entering edit mode\n      const input = e.target as HTMLInputElement;\n      const source = e.relatedTarget as HTMLElement;\n      if (\n        source?.classList.contains(\"vuuTableCell\") &&\n        source.contains(input)\n      ) {\n        toggleActivation(input);\n      }\n    },\n    [toggleActivation],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(async () => {\n    if (editState.editing) {\n      if (isDirtyRef.current) {\n        const commitSuccessful = await commit();\n        console.log({ commitSuccessful });\n      }\n      setEditState((editState) => ({ ...editState, editing: false }));\n    }\n  }, [commit, editState]);\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = column.clientSideEditValidationCheck?.(value, \"change\");\n      setEditState({ editing: true, value });\n\n      onEdit?.(\n        {\n          editType: \"change\",\n          isValid: result?.ok !== false,\n          previousValue: initialValueRef.current,\n          value,\n        },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        setEditState({\n          editing: true,\n          value,\n          message: result.messages?.join(\",\"),\n        });\n      }\n    },\n    [column, onEdit],\n  );\n\n  // console.log(\n  //   `[useEditableText] edited = ${\n  //     editState.previousValue !== undefined &&\n  //     editState.previousValue !== editState.value\n  //   }\n  //   editState.previousValue ${editState.previousValue}\n  //   editState.value ${editState.value}\n  //   `,\n  // );\n\n  return {\n    editing: editState.editing,\n    inputProps: {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    previousValue: editState.previousValue,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","editState","useCallback","value","getTypedValue","isRpcSuccess","previousValue","isRpcError","DataValidationError","message","dispatchCustomEvent"],"mappings":"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"}

package/cjs/data-row/DataRow.js

@@ -137,7 +137,7 @@ function createColumnMap(columns, schemaColumns) {
   const columnMap = {
     ...ColumnMapIntrinsicColumns
   };
-  columns.forEach((name, i) => {
+  columns.forEach((name, i, cols) => {
     const schemaColumn = schemaColumns.find((col) => col.name === name);
     if (schemaColumn) {
       const serverDataType = vuuUtils.getServerDataType(schemaColumn, true);
@@ -151,11 +151,20 @@ function createColumnMap(columns, schemaColumns) {
           `[DataRow] calculated column with invalid serverDataType ${name}`
         );
       }
+    } else if (name === "vuuMsg" && i === cols.length - 1) {
+      columnMap[name] = { index: i + 10, type: "string" };
     } else {
       throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);
     }
   });
-  return columnMap;
+  if (columnMap.vuuMsg === void 0) {
+    return {
+      ...columnMap,
+      vuuMsg: { index: columns.length + 10, type: "string" }
+    };
+  } else {
+    return columnMap;
+  }
 }
 const dataRowFactory = (columns, schemaColumns) => {
   let columnMap = createColumnMap(columns, schemaColumns);

package/cjs/data-row/DataRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataRow.js","sources":["../../../../packages/vuu-table/src/data-row/DataRow.ts"],"sourcesContent":["import { DataSourceRow, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  StringNumericType,\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  DataRow,\n  DataRowIntrinsicAttribute,\n  DataRowOperation,\n  DataRowOperations,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  getServerDataType,\n  isCalculatedColumn,\n  isVuuColumnDataType,\n} from \"@vuu-ui/vuu-utils\";\n\ntype ColumnMapEntry = {\n  index: number;\n  type: VuuColumnDataType;\n};\n\nconst dataRowSymbol = Symbol(\"DataRow\");\n\n/**\n * We allow undefined to allow us to null out rather than delete entries, for\n * performance reasons.\n */\ntype DataRowColumnMap = Record<string, ColumnMapEntry | undefined>;\n\nconst dataRowIntrinsicAttributes: Record<DataRowIntrinsicAttribute, true> = {\n  childCount: true,\n  depth: true,\n  index: true,\n  isExpanded: true,\n  isSelected: true,\n  isLeaf: true,\n  key: true,\n  renderIndex: true,\n};\n\nconst dataRowOperations: Record<DataRowOperation, true> = {\n  hasColumn: true,\n};\n\nconst isDataRowIntrinsicAttribute = (\n  attrName: string,\n): attrName is DataRowIntrinsicAttribute =>\n  dataRowIntrinsicAttributes[attrName as DataRowIntrinsicAttribute] === true;\n\nconst isDataRowOperation = (attrName: string): attrName is DataRowOperation =>\n  dataRowOperations[attrName as DataRowOperation] === true;\n\nconst stringNumericTypes: Record<StringNumericType, true> = {\n  long: true,\n  scaleddecimal2: true,\n  scaleddecimal4: true,\n  scaleddecimal6: true,\n  scaleddecimal8: true,\n};\n\nconst isStringNumericType = (\n  type: VuuColumnDataType,\n): type is StringNumericType =>\n  stringNumericTypes[type as StringNumericType] === true;\n\nconst MAX_DECIMALS = \"0000000\";\n\nconst injectDecimalPoint = (value: string, decimal: 2 | 4 | 6 | 8) => {\n  if (value === \"0\" || value === \"-0\" || value === \"\") {\n    return value;\n  } else {\n    if (value[0] === \"-\") {\n      const digits = value.slice(1);\n      if (digits.length < decimal) {\n        return `-0.${(MAX_DECIMALS + digits).slice(-decimal)}`;\n      } else if (digits.length === decimal) {\n        return `-0.${value}`;\n      } else {\n        return `-${digits.slice(0, -decimal)}.${digits.slice(-decimal)}`;\n      }\n    } else {\n      if (value.length < decimal) {\n        return `0.${(MAX_DECIMALS + value).slice(-decimal)}`;\n      } else if (value.length === decimal) {\n        return `0.${value}`;\n      } else {\n        return `${value.slice(0, -decimal)}.${value.slice(-decimal)}`;\n      }\n    }\n  }\n};\n\nconst formatStringNumeric = (value: string, type: StringNumericType) => {\n  switch (type) {\n    case \"long\":\n      return value;\n    case \"scaleddecimal2\":\n      return injectDecimalPoint(value, 2);\n    case \"scaleddecimal4\":\n      return injectDecimalPoint(value, 4);\n    case \"scaleddecimal6\":\n      return injectDecimalPoint(value, 6);\n    case \"scaleddecimal8\":\n      return injectDecimalPoint(value, 8);\n  }\n};\n/**\n * DataRow wraps a vuu DataSourceRow and a columnMap to provide a more convenient\n * API for manipulating rows from server. It is now used internally by Table. This\n * removes the need to always provide a columnMap to any componnet that must work with\n * data rows. It also removes a category of timing bugs which cause the columnMap\n * to get out of sync with data.\n * Because properties are provided via a proxy, and the DataRow has the Schema, there is\n * flexibility to enhance handling for specific properties. This is used now to insert\n * decimal point in scaleddecimal values.\n * @param data\n * @param columnMap\n * @returns\n */\nfunction DataRowImpl(data: VuuDataRow, columnMap: DataRowColumnMap): DataRow {\n  const target: Record<string, VuuRowDataItemType> = {};\n\n  const getPropertyNames = () => {\n    return Object.keys(columnMap);\n  };\n\n  const jsonSerializer = () => {\n    return Object.entries(columnMap).reduce<Record<string, VuuRowDataItemType>>(\n      (json, [name, mapEntry]) => {\n        if (mapEntry) {\n          json[name] = data[mapEntry.index];\n        }\n        return json;\n      },\n      {},\n    );\n  };\n\n  const DataRowOperations: DataRowOperations = {\n    hasColumn: (name: string) => columnMap[name] !== undefined,\n  };\n\n  return new Proxy(target, {\n    get(_obj, prop: string | symbol) {\n      if (typeof prop === \"symbol\") {\n        if (prop === dataRowSymbol) return true;\n        // TODO what does React use this for\n        return undefined;\n      } else if (prop === \"toJSON\") {\n        return jsonSerializer;\n      } else if (prop === \"toString\") {\n        return \"DataRow\";\n      } else if (prop === \"$$typeof\") {\n        // some react internal weirdness\n        return undefined;\n      } else if (isDataRowOperation(prop)) {\n        return DataRowOperations[prop];\n      } else if (prop === \"getPropertyNames\") {\n        return getPropertyNames;\n      }\n      const columnMapEntry = columnMap[prop];\n\n      if (columnMapEntry === undefined) {\n        if (prop !== \"\") {\n          // System columns like the selection checkbox column\n          console.warn(`[DataRow:Proxy] unknown column ${prop}`);\n        }\n        return undefined;\n      }\n\n      if (isDataRowIntrinsicAttribute(prop)) {\n        return data[columnMapEntry.index];\n      }\n\n      if (isStringNumericType(columnMapEntry.type)) {\n        return formatStringNumeric(\n          data[columnMapEntry.index] as string,\n          columnMapEntry.type,\n        );\n      }\n\n      return data[columnMapEntry.index];\n\n      // throw new Error(`Unknown column: ${prop}`);\n    },\n    set() {\n      throw new TypeError(\"DataRow is readonly\");\n    },\n  }) as DataRow;\n}\n\nexport type DataRowFunc = (data: DataSourceRow) => DataRow;\n\nconst ColumnMapIntrinsicColumns: DataRowColumnMap = {\n  index: { index: 0, type: \"int\" },\n  renderIndex: { index: 1, type: \"int\" },\n  isLeaf: { index: 2, type: \"boolean\" },\n  isExpanded: { index: 3, type: \"boolean\" },\n  depth: { index: 4, type: \"int\" },\n  childCount: { index: 5, type: \"int\" },\n  key: { index: 6, type: \"string\" },\n  isSelected: { index: 7, type: \"boolean\" },\n};\n\nfunction createColumnMap(\n  columns: string[],\n  schemaColumns: readonly SchemaColumn[],\n) {\n  const columnMap: DataRowColumnMap = {\n    ...ColumnMapIntrinsicColumns,\n  };\n\n  columns.forEach((name, i) => {\n    const schemaColumn = schemaColumns.find((col) => col.name === name);\n    if (schemaColumn) {\n      const serverDataType = getServerDataType(schemaColumn, true);\n      columnMap[name] = { index: i + 10, type: serverDataType };\n    } else if (isCalculatedColumn(name)) {\n      const { serverDataType } = getCalculatedColumnDetails(name);\n      if (isVuuColumnDataType(serverDataType)) {\n        columnMap[name] = { index: i + 10, type: serverDataType };\n      } else {\n        throw Error(\n          `[DataRow] calculated column with invalid serverDataType ${name}`,\n        );\n      }\n    } else {\n      throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);\n    }\n  });\n  return columnMap;\n}\n\n/**\n *\n * @param columns the names of columns included in subscription\n * @param schemaColumns full schema definitions for all available columns,\n * the serverDataTypes are used.\n * @returns a tuple containing:\n * - factory function that will create a DataRow instance from a DataSourceRow\n * array.\n * - a function that can be used to reset the columns, which will be used for all\n * subsequently created DataRows. Used by Table when user adds or removes columns\n * at runtime.\n */\nexport const dataRowFactory = (\n  columns: string[],\n  schemaColumns: readonly SchemaColumn[],\n): [DataRowFunc, (columns: string[]) => void] => {\n  let columnMap = createColumnMap(columns, schemaColumns);\n\n  const setColumns = (columns: string[]) => {\n    // new columnMap will be used for all subsequently created DataRows\n    columnMap = createColumnMap(columns, schemaColumns);\n  };\n\n  const DataRow = function (data: DataSourceRow) {\n    return DataRowImpl(data, columnMap);\n  };\n\n  return [DataRow, setColumns];\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  window.devtoolsFormatters = [\n    {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      header: function (obj: any) {\n        if (obj[dataRowSymbol]) {\n          return [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px; justify-content: space-between\",\n            },\n            [\"span\", {}, \"Vuu DataRow\"],\n            [\"span\", { style: \"font-weight: bold;\" }, `[${obj.index}]`],\n            [\n              \"span\",\n              { style: \"font-weight: bold; color: blue;\" },\n              `#${obj.key}`,\n            ],\n          ];\n        }\n        return null;\n      },\n      hasBody: function () {\n        return true;\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      body: function (obj: any) {\n        return [\n          \"div\",\n          {},\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"index\"],\n            [\"span\", {}, obj.index],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"key\"],\n            [\"span\", {}, obj.key],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"renderIndex\"],\n            [\"span\", {}, obj.renderIndex],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"isSelected\"],\n            [\"span\", {}, obj.isSelected],\n          ],\n          ...obj.getPropertyNames().map((name: string) => {\n            return [\n              \"div\",\n              {\n                style: \"display: flex; gap: 4px;\",\n              },\n              [\"span\", {}, name],\n              [\"span\", {}, obj[name]],\n            ];\n          }),\n        ];\n      },\n    },\n  ];\n}\n"],"names":["DataRowOperations","getServerDataType","isCalculatedColumn","getCalculatedColumnDetails","isVuuColumnDataType","columns","DataRow"],"mappings":"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"}
+{"version":3,"file":"DataRow.js","sources":["../../../../packages/vuu-table/src/data-row/DataRow.ts"],"sourcesContent":["import { DataSourceRow, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  StringNumericType,\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  DataRow,\n  DataRowIntrinsicAttribute,\n  DataRowOperation,\n  DataRowOperations,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  getServerDataType,\n  isCalculatedColumn,\n  isVuuColumnDataType,\n} from \"@vuu-ui/vuu-utils\";\n\ntype ColumnMapEntry = {\n  index: number;\n  type: VuuColumnDataType;\n};\n\nconst dataRowSymbol = Symbol(\"DataRow\");\n\n/**\n * We allow undefined to allow us to null out rather than delete entries, for\n * performance reasons.\n */\ntype DataRowColumnMap = Record<string, ColumnMapEntry | undefined>;\n\nconst dataRowIntrinsicAttributes: Record<DataRowIntrinsicAttribute, true> = {\n  childCount: true,\n  depth: true,\n  index: true,\n  isExpanded: true,\n  isSelected: true,\n  isLeaf: true,\n  key: true,\n  renderIndex: true,\n};\n\nconst dataRowOperations: Record<DataRowOperation, true> = {\n  hasColumn: true,\n};\n\nconst isDataRowIntrinsicAttribute = (\n  attrName: string,\n): attrName is DataRowIntrinsicAttribute =>\n  dataRowIntrinsicAttributes[attrName as DataRowIntrinsicAttribute] === true;\n\nconst isDataRowOperation = (attrName: string): attrName is DataRowOperation =>\n  dataRowOperations[attrName as DataRowOperation] === true;\n\nconst stringNumericTypes: Record<StringNumericType, true> = {\n  long: true,\n  scaleddecimal2: true,\n  scaleddecimal4: true,\n  scaleddecimal6: true,\n  scaleddecimal8: true,\n};\n\nconst isStringNumericType = (\n  type: VuuColumnDataType,\n): type is StringNumericType =>\n  stringNumericTypes[type as StringNumericType] === true;\n\nconst MAX_DECIMALS = \"0000000\";\n\nconst injectDecimalPoint = (value: string, decimal: 2 | 4 | 6 | 8) => {\n  if (value === \"0\" || value === \"-0\" || value === \"\") {\n    return value;\n  } else {\n    if (value[0] === \"-\") {\n      const digits = value.slice(1);\n      if (digits.length < decimal) {\n        return `-0.${(MAX_DECIMALS + digits).slice(-decimal)}`;\n      } else if (digits.length === decimal) {\n        return `-0.${value}`;\n      } else {\n        return `-${digits.slice(0, -decimal)}.${digits.slice(-decimal)}`;\n      }\n    } else {\n      if (value.length < decimal) {\n        return `0.${(MAX_DECIMALS + value).slice(-decimal)}`;\n      } else if (value.length === decimal) {\n        return `0.${value}`;\n      } else {\n        return `${value.slice(0, -decimal)}.${value.slice(-decimal)}`;\n      }\n    }\n  }\n};\n\nconst formatStringNumeric = (value: string, type: StringNumericType) => {\n  switch (type) {\n    case \"long\":\n      return value;\n    case \"scaleddecimal2\":\n      return injectDecimalPoint(value, 2);\n    case \"scaleddecimal4\":\n      return injectDecimalPoint(value, 4);\n    case \"scaleddecimal6\":\n      return injectDecimalPoint(value, 6);\n    case \"scaleddecimal8\":\n      return injectDecimalPoint(value, 8);\n  }\n};\n/**\n * DataRow wraps a vuu DataSourceRow and a columnMap to provide a more convenient\n * API for manipulating rows from server. It is now used internally by Table. This\n * removes the need to always provide a columnMap to any component that must work with\n * data rows. It also removes a category of timing bugs which cause the columnMap\n * to get out of sync with data.\n * Because properties are provided via a proxy, and the DataRow has the Schema, there is\n * flexibility to enhance handling for specific properties. This is used now to insert\n * decimal point in scaleddecimal values.\n * @param data\n * @param columnMap\n * @returns\n */\nfunction DataRowImpl(data: VuuDataRow, columnMap: DataRowColumnMap): DataRow {\n  const target: Record<string, VuuRowDataItemType> = {};\n\n  const getPropertyNames = () => {\n    return Object.keys(columnMap);\n  };\n\n  const jsonSerializer = () => {\n    return Object.entries(columnMap).reduce<Record<string, VuuRowDataItemType>>(\n      (json, [name, mapEntry]) => {\n        if (mapEntry) {\n          json[name] = data[mapEntry.index];\n        }\n        return json;\n      },\n      {},\n    );\n  };\n\n  const DataRowOperations: DataRowOperations = {\n    hasColumn: (name: string) => columnMap[name] !== undefined,\n  };\n\n  return new Proxy(target, {\n    get(_obj, prop: string | symbol) {\n      if (typeof prop === \"symbol\") {\n        if (prop === dataRowSymbol) return true;\n        // TODO what does React use this for\n        return undefined;\n      } else if (prop === \"toJSON\") {\n        return jsonSerializer;\n      } else if (prop === \"toString\") {\n        return \"DataRow\";\n      } else if (prop === \"$$typeof\") {\n        // some react internal weirdness\n        return undefined;\n      } else if (isDataRowOperation(prop)) {\n        return DataRowOperations[prop];\n      } else if (prop === \"getPropertyNames\") {\n        return getPropertyNames;\n      }\n      const columnMapEntry = columnMap[prop];\n\n      if (columnMapEntry === undefined) {\n        if (prop !== \"\") {\n          // System columns like the selection checkbox column\n          console.warn(`[DataRow:Proxy] unknown column ${prop}`);\n        }\n        return undefined;\n      }\n\n      if (isDataRowIntrinsicAttribute(prop)) {\n        return data[columnMapEntry.index];\n      }\n\n      if (isStringNumericType(columnMapEntry.type)) {\n        return formatStringNumeric(\n          data[columnMapEntry.index] as string,\n          columnMapEntry.type,\n        );\n      }\n\n      return data[columnMapEntry.index];\n\n      // throw new Error(`Unknown column: ${prop}`);\n    },\n    set() {\n      throw new TypeError(\"DataRow is readonly\");\n    },\n  }) as DataRow;\n}\n\nexport type DataRowFunc = (data: DataSourceRow) => DataRow;\n\nconst ColumnMapIntrinsicColumns: DataRowColumnMap = {\n  index: { index: 0, type: \"int\" },\n  renderIndex: { index: 1, type: \"int\" },\n  isLeaf: { index: 2, type: \"boolean\" },\n  isExpanded: { index: 3, type: \"boolean\" },\n  depth: { index: 4, type: \"int\" },\n  childCount: { index: 5, type: \"int\" },\n  key: { index: 6, type: \"string\" },\n  isSelected: { index: 7, type: \"boolean\" },\n};\n\nfunction createColumnMap(\n  columns: string[],\n  schemaColumns: readonly SchemaColumn[],\n) {\n  const columnMap: DataRowColumnMap = {\n    ...ColumnMapIntrinsicColumns,\n  };\n\n  columns.forEach((name, i, cols) => {\n    const schemaColumn = schemaColumns.find((col) => col.name === name);\n    if (schemaColumn) {\n      const serverDataType = getServerDataType(schemaColumn, true);\n      columnMap[name] = { index: i + 10, type: serverDataType };\n    } else if (isCalculatedColumn(name)) {\n      const { serverDataType } = getCalculatedColumnDetails(name);\n      if (isVuuColumnDataType(serverDataType)) {\n        columnMap[name] = { index: i + 10, type: serverDataType };\n      } else {\n        throw Error(\n          `[DataRow] calculated column with invalid serverDataType ${name}`,\n        );\n      }\n    } else if (name === \"vuuMsg\" && i === cols.length - 1) {\n      // Mag column on a session table, always in last place\n      columnMap[name] = { index: i + 10, type: \"string\" };\n    } else {\n      throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);\n    }\n  });\n\n  if (columnMap.vuuMsg === undefined) {\n    // We will always check for vuuMsg, even if it isn't explicitly included in the subscribed columns\n    return {\n      ...columnMap,\n      vuuMsg: { index: columns.length + 10, type: \"string\" },\n    } as DataRowColumnMap;\n  } else {\n    return columnMap;\n  }\n}\n\n/**\n *\n * @param columns the names of columns included in subscription\n * @param schemaColumns full schema definitions for all available columns,\n * the serverDataTypes are used.\n * @returns a tuple containing:\n * - factory function that will create a DataRow instance from a DataSourceRow\n * array.\n * - a function that can be used to reset the columns, which will be used for all\n * subsequently created DataRows. Used by Table when user adds or removes columns\n * at runtime.\n */\nexport const dataRowFactory = (\n  columns: string[],\n  schemaColumns: readonly SchemaColumn[],\n): [DataRowFunc, (columns: string[]) => void] => {\n  let columnMap = createColumnMap(columns, schemaColumns);\n\n  const setColumns = (columns: string[]) => {\n    // new columnMap will be used for all subsequently created DataRows\n    columnMap = createColumnMap(columns, schemaColumns);\n  };\n\n  const DataRow = function (data: DataSourceRow) {\n    return DataRowImpl(data, columnMap);\n  };\n\n  return [DataRow, setColumns];\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  window.devtoolsFormatters = [\n    {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      header: function (obj: any) {\n        if (obj[dataRowSymbol]) {\n          return [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px; justify-content: space-between\",\n            },\n            [\"span\", {}, \"Vuu DataRow\"],\n            [\"span\", { style: \"font-weight: bold;\" }, `[${obj.index}]`],\n            [\n              \"span\",\n              { style: \"font-weight: bold; color: blue;\" },\n              `#${obj.key}`,\n            ],\n          ];\n        }\n        return null;\n      },\n      hasBody: function () {\n        return true;\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      body: function (obj: any) {\n        return [\n          \"div\",\n          {},\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"index\"],\n            [\"span\", {}, obj.index],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"key\"],\n            [\"span\", {}, obj.key],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"renderIndex\"],\n            [\"span\", {}, obj.renderIndex],\n          ],\n          [\n            \"div\",\n            {\n              style: \"display: flex; gap: 4px;\",\n            },\n            [\"span\", {}, \"isSelected\"],\n            [\"span\", {}, obj.isSelected],\n          ],\n          ...obj.getPropertyNames().map((name: string) => {\n            return [\n              \"div\",\n              {\n                style: \"display: flex; gap: 4px;\",\n              },\n              [\"span\", {}, name],\n              [\"span\", {}, obj[name]],\n            ];\n          }),\n        ];\n      },\n    },\n  ];\n}\n"],"names":["DataRowOperations","getServerDataType","isCalculatedColumn","getCalculatedColumnDetails","isVuuColumnDataType","columns","DataRow"],"mappings":"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"}

package/cjs/index.js

@@ -1,8 +1,6 @@
 'use strict';
 
 var BulkEditPanel = require('./bulk-edit/BulkEditPanel.js');
-var useBulkEditPanel = require('./bulk-edit/useBulkEditPanel.js');
-var useBulkEditRow = require('./bulk-edit/useBulkEditRow.js');
 var CheckboxCell = require('./cell-renderers/checkbox-cell/CheckboxCell.js');
 var CheckboxRowSelectorCell = require('./cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js');
 var InputCell = require('./cell-renderers/input-cell/InputCell.js');
@@ -21,7 +19,7 @@ var HeaderProvider = require('./table-header/HeaderProvider.js');
 var TableHeader = require('./table-header/TableHeader.js');
 var useControlledTableNavigation = require('./useControlledTableNavigation.js');
 var useEditableCell = require('./useEditableCell.js');
-var useHighlighting = require('./useHighlighting.js');
+var applyHighlighting = require('./applyHighlighting.js');
 var useKeyboardNavigation = require('./useKeyboardNavigation.js');
 var useTableContextMenu = require('./useTableContextMenu.js');
 var useTableModel = require('./useTableModel.js');
@@ -32,8 +30,6 @@ var VirtualColSpan = require('./VirtualColSpan.js');
 
 
 exports.BulkEditPanel = BulkEditPanel.BulkEditPanel;
-exports.useBulkEditPanel = useBulkEditPanel.useBulkEditPanel;
-exports.useBulkEditRow = useBulkEditRow.useBulkEditRow;
 exports.CheckboxCell = CheckboxCell.CheckboxCell;
 exports.CheckboxRowSelectorCell = CheckboxRowSelectorCell.CheckboxRowSelectorCell;
 exports.InputCell = InputCell.InputCell;
@@ -54,7 +50,7 @@ exports.TableHeader = TableHeader.TableHeader;
 exports.isRowSelectionKey = useControlledTableNavigation.isRowSelectionKey;
 exports.useControlledTableNavigation = useControlledTableNavigation.useControlledTableNavigation;
 exports.useEditableCell = useEditableCell.useEditableCell;
-exports.useHighlighting = useHighlighting.useHighlighting;
+exports.applyHighlighting = applyHighlighting.applyHighlighting;
 exports.isNavigationKey = useKeyboardNavigation.isNavigationKey;
 exports.isPagingKey = useKeyboardNavigation.isPagingKey;
 exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;

package/cjs/index.js.map

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

package/cjs/table-cell/TableCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell:focus-visible {\n  outline: none;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n  /** This is to achieve a white background to outline dashes */\n  /* box-shadow: inset 0 0 0 var(--cell-outline-width) white; */\n  border-bottom: none;\n  .saltInput-bordered {\n    border-color: transparent;\n    outline: solid var(--salt-editable-borderColor-active) 2px;\n    outline-offset: -1px;\n  }\n\n  &.vuuEditing {\n    .saltInput-bordered {\n      outline: dashed var(--salt-editable-borderColor-active) 2px;\n      outline-offset: -1px;\n    }\n\n    .vuuTableInputCell-error.saltInput-bordered {\n        outline: dashed var(--salt-status-error-borderColor) 2px;\n    }\n  }\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n\n\n    &:has(.vuuCheckboxRowSelector) {\n      text-overflow: unset;\n    }\n\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell:focus-visible {\n  outline: none;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n  /** This is to achieve a white background to outline dashes */\n  /* box-shadow: inset 0 0 0 var(--cell-outline-width) white; */\n  border-bottom: none;\n  .saltInput-bordered {\n    border-color: transparent;\n    outline: solid var(--salt-editable-borderColor-active) 2px;\n    outline-offset: -1px;\n  }\n\n    .saltInput-bordered.vuuEditing{\n      outline: dashed var(--salt-editable-borderColor-active) 2px;\n      outline-offset: -1px;\n    }\n\n    .vuuTableInputCell-error.saltInput-bordered {\n        outline: dashed var(--salt-status-error-borderColor) 2px;\n    }\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
 
 module.exports = tableCellCss;
 //# sourceMappingURL=TableCell.css.js.map

package/cjs/table-cell/TableCell.js

@@ -5,8 +5,8 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
+var applyHighlighting = require('../applyHighlighting.js');
 var useCell = require('../useCell.js');
-var useHighlighting = require('../useHighlighting.js');
 var TableCell$1 = require('./TableCell.css.js');
 
 const classBase = "vuuTableCell";
@@ -14,7 +14,6 @@ const TableCell = ({
   column,
   dataRow,
   onClick,
-  onDataEdited,
   searchPattern = ""
 }) => {
   const targetWindow = window.useWindow();
@@ -23,41 +22,26 @@ const TableCell = ({
     css: TableCell$1,
     window: targetWindow
   });
-  const [hasError, setHasError] = react.useState(false);
-  const { className, style } = useCell.useCell(column, classBase, false, hasError);
-  const { ariaColIndex, CellRenderer, valueFormatter } = column;
+  const editSession = vuuUtils.useEditSession();
+  const { className, style } = useCell.useCell(column, classBase, false);
+  const { ariaColIndex, CellRenderer, name, valueFormatter } = column;
+  const [editedDuringCurrentSession, setEditingDuringCurrentSession] = react.useState(void 0);
   const handleDataItemEdited = react.useCallback(
-    (editState, editPhase) => {
-      if (editPhase === "commit") {
-        const { serverDataType = "string" } = column;
-        const typedValue = vuuUtils.getTypedValue(
-          String(editState.value),
-          serverDataType,
-          true
+    async (editState, editPhase) => {
+      const { isValid = true, previousValue = "", value } = editState;
+      if (editPhase === "commit" && editSession) {
+        const { editedDuringCurrentSession: editedDuringCurrentSession2, ...response } = await editSession.commit(
+          dataRow.key,
+          name,
+          previousValue,
+          value,
+          isValid
         );
-        return onDataEdited?.(
-          {
-            ...editState,
-            dataRow,
-            columnName: column.name,
-            value: typedValue
-          },
-          editPhase
-        );
-      } else {
-        setHasError(editState.isValid === false);
-        onDataEdited?.(
-          {
-            ...editState,
-            dataRow,
-            columnName: column.name
-          },
-          editPhase
-        );
-        return void 0;
+        setEditingDuringCurrentSession(editedDuringCurrentSession2);
+        return response;
       }
     },
-    [column, dataRow, onDataEdited]
+    [dataRow.key, editSession, name]
   );
   const handleClick = react.useCallback(
     (evt) => {
@@ -65,8 +49,6 @@ const TableCell = ({
     },
     [column, onClick]
   );
-  const value = valueFormatter(dataRow[column.name]);
-  const valueWithHighlighting = useHighlighting.useHighlighting(value, searchPattern);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -80,10 +62,11 @@ const TableCell = ({
         {
           column,
           dataRow,
+          editedDuringCurrentSession,
           onEdit: handleDataItemEdited,
           searchPattern
         }
-      ) : valueWithHighlighting
+      ) : applyHighlighting.applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)
     }
   );
 };

package/cjs/table-cell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n  TableCellEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  dataRow,\n  onClick,\n  onDataEdited,\n  searchPattern = \"\",\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const [hasError, setHasError] = useState(false);\n\n  const { className, style } = useCell(column, classBase, false, hasError);\n  const { ariaColIndex, CellRenderer, valueFormatter } = column;\n  // const dataIdx = columnMap[column.name];\n\n  const handleDataItemEdited = useCallback<TableCellEditHandler>(\n    (editState, editPhase) => {\n      if (editPhase === \"commit\") {\n        const { serverDataType = \"string\" } = column;\n        const typedValue = getTypedValue(\n          String(editState.value),\n          serverDataType,\n          true,\n        );\n        return onDataEdited?.(\n          {\n            ...editState,\n            dataRow,\n            columnName: column.name,\n            value: typedValue,\n          },\n          editPhase,\n        );\n      } else {\n        setHasError(editState.isValid === false);\n        onDataEdited?.(\n          {\n            ...editState,\n            dataRow,\n            columnName: column.name,\n          },\n          editPhase,\n        );\n        return undefined;\n      }\n    },\n    [column, dataRow, onDataEdited],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const value = valueFormatter(dataRow[column.name]);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          dataRow={dataRow}\n          onEdit={handleDataItemEdited}\n          searchPattern={searchPattern}\n        />\n      ) : (\n        valueWithHighlighting\n      )}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useState","useCell","useCallback","getTypedValue","useHighlighting","jsx"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAIC,gBAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AAGvD,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,MAAM,UAAa,GAAAC,sBAAA;AAAA,UACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,UACtB,cAAA;AAAA,UACA;AAAA,SACF;AACA,QAAO,OAAA,YAAA;AAAA,UACL;AAAA,YACE,GAAG,SAAA;AAAA,YACH,OAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACT;AAAA,UACA;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAA,YAAA;AAAA,UACE;AAAA,YACE,GAAG,SAAA;AAAA,YACH,OAAA;AAAA,YACA,YAAY,MAAO,CAAA;AAAA,WACrB;AAAA,UACA;AAAA,SACF;AACA,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,OAAA,EAAS,YAAY;AAAA,GAChC;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,KAAQ,GAAA,cAAA,CAAe,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA;AACjD,EAAM,MAAA,qBAAA,GAAwBE,+BAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR;AAAA;AAAA,OAGF,GAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n  TableCellEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useEditSession } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { applyHighlighting } from \"../applyHighlighting\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  dataRow,\n  onClick,\n  searchPattern = \"\",\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const editSession = useEditSession();\n\n  const { className, style } = useCell(column, classBase, false);\n  const { ariaColIndex, CellRenderer, name, valueFormatter } = column;\n  const [editedDuringCurrentSession, setEditingDuringCurrentSession] = useState<\n    boolean | undefined\n  >(undefined);\n\n  const handleDataItemEdited = useCallback<TableCellEditHandler>(\n    async (editState, editPhase) => {\n      const { isValid = true, previousValue = \"\", value } = editState;\n      if (editPhase === \"commit\" && editSession) {\n        const { editedDuringCurrentSession, ...response } =\n          await editSession.commit(\n            dataRow.key,\n            name,\n            previousValue,\n            value,\n            isValid,\n          );\n        setEditingDuringCurrentSession(editedDuringCurrentSession);\n        return response;\n      }\n    },\n    [dataRow.key, editSession, name],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          dataRow={dataRow}\n          editedDuringCurrentSession={editedDuringCurrentSession}\n          onEdit={handleDataItemEdited}\n          searchPattern={searchPattern}\n        />\n      ) : (\n        applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)\n      )}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useEditSession","useCell","useState","useCallback","editedDuringCurrentSession","jsx","applyHighlighting"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAcC,uBAAe,EAAA;AAEnC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,KAAUC,eAAQ,CAAA,MAAA,EAAQ,WAAW,KAAK,CAAA;AAC7D,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA;AAC7D,EAAA,MAAM,CAAC,0BAAA,EAA4B,8BAA8B,CAAA,GAAIC,eAEnE,KAAS,CAAA,CAAA;AAEX,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,OAAO,WAAW,SAAc,KAAA;AAC9B,MAAA,MAAM,EAAE,OAAU,GAAA,IAAA,EAAM,aAAgB,GAAA,EAAA,EAAI,OAAU,GAAA,SAAA;AACtD,MAAI,IAAA,SAAA,KAAc,YAAY,WAAa,EAAA;AACzC,QAAA,MAAM,EAAE,0BAAAC,EAAAA,2BAAAA,EAA4B,GAAG,QAAS,EAAA,GAC9C,MAAM,WAAY,CAAA,MAAA;AAAA,UAChB,OAAQ,CAAA,GAAA;AAAA,UACR,IAAA;AAAA,UACA,aAAA;AAAA,UACA,KAAA;AAAA,UACA;AAAA,SACF;AACF,QAAA,8BAAA,CAA+BA,2BAA0B,CAAA;AACzD,QAAO,OAAA,QAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,OAAA,CAAQ,GAAK,EAAA,WAAA,EAAa,IAAI;AAAA,GACjC;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EACE,uBAAAE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,0BAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR;AAAA;AAAA,OACF,GAEAC,oCAAkB,cAAe,CAAA,OAAA,CAAQ,OAAO,IAAI,CAAC,GAAG,aAAa;AAAA;AAAA,GAEzE;AAEJ;;;;"}