@vuu-ui/vuu-ui-controls 2.1.9 → 2.1.10

package/cjs/editable/useEditableText.js

@@ -11,19 +11,15 @@ const useEditableText = ({
   type = "string"
 }) => {
   const [editState, setEditState] = React.useState({
-    editing: false,
     value: stringValueOf(value)
   });
   const initialValueRef = React.useRef(value?.toString() ?? "");
   const isDirtyRef = React.useRef(false);
+  const isEditingRef = React.useRef(false);
   React.useMemo(() => {
     if (initialValueRef.current !== value?.toString()) {
       initialValueRef.current = stringValueOf(value);
-      setEditState((editState2) => ({
-        ...editState2,
-        message: void 0,
-        value: stringValueOf(value)
-      }));
+      setEditState({ message: void 0, value: stringValueOf(value) });
     }
   }, [value]);
   const commit = React.useCallback(async () => {
@@ -37,9 +33,10 @@ const useEditableText = ({
       return false;
     } else {
       const { current: initialValue } = initialValueRef;
-      const previousValue = vuuUtils.getTypedValue(initialValue, type);
       try {
         const typedValue = vuuUtils.getTypedValue(value2, type, true);
+        console.log(`[useEditableText] typedValue = ${typedValue}`);
+        const previousValue = vuuUtils.getTypedValue(initialValue, type);
         const response = await onEdit?.(
           {
             editType: "commit",
@@ -52,14 +49,12 @@ const useEditableText = ({
         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)) {
           if (response.errorMessage === "CHANGE_REVERTED") {
             setEditState(({ value: value3 }) => ({
-              editing: true,
               previousValue: void 0,
               value: value3
             }));
@@ -84,15 +79,6 @@ const useEditableText = ({
               ...state,
               message: message2
             }));
-            onEdit?.(
-              {
-                editType: "commit",
-                isValid: false,
-                previousValue,
-                value: value2
-              },
-              "commit"
-            );
           } else {
             setEditState((state) => ({
               ...state,
@@ -104,15 +90,38 @@ const useEditableText = ({
     }
     return false;
   }, [column, editState, onEdit, type]);
-  const toggleActivation = React.useCallback(
-    async (input, cancel = false) => {
-      if (editState.editing) {
-        if (isDirtyRef.current) {
-          if (cancel) {
+  const handleKeyDown = React.useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              isEditingRef.current = false;
+              vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
+              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
+            }
+          } else {
+            isEditingRef.current = false;
+            vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
+          }
+        } else {
+          isEditingRef.current = true;
+          vuuUtils.dispatchCustomEvent(input, "vuu-enter-edit-mode");
+          input.select();
+        }
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (isEditingRef.current) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
             const { value: previousValue } = editState;
             isDirtyRef.current = false;
             setEditState({
-              editing: false,
               value: initialValueRef.current,
               message: void 0
             });
@@ -125,64 +134,44 @@ const useEditableText = ({
               },
               "cancel"
             );
-          } else {
-            const commitSuccessful = await commit();
-            if (commitSuccessful) {
-              setEditState((editState2) => ({ ...editState2, editing: false }));
-              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
-            }
           }
-        } else {
-          setEditState((editState2) => ({ ...editState2, editing: false }));
+          isEditingRef.current = false;
+          vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
         }
-      } 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 beginEditHandler = React.useCallback((evt) => {
+    isEditingRef.current = true;
+    vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
+  }, []);
   const handleFocus = React.useCallback(
     (e) => {
-      const input = e.target;
-      const source = e.relatedTarget;
-      if (source?.classList.contains("vuuTableCell") && source.contains(input)) {
-        toggleActivation(input);
-      }
+      e.target.addEventListener("vuu-begin-edit", beginEditHandler, true);
     },
-    [toggleActivation]
+    [beginEditHandler]
   );
-  const handleBlur = React.useCallback(async () => {
-    if (editState.editing) {
-      if (isDirtyRef.current) {
-        const commitSuccessful = await commit();
-        console.log({ commitSuccessful });
+  const handleBlur = React.useCallback(
+    async (evt) => {
+      evt.target.removeEventListener("vuu-begin-edit", beginEditHandler, true);
+      if (isEditingRef.current) {
+        if (isDirtyRef.current) {
+          const commitSuccessful = await commit();
+          console.log({ commitSuccessful });
+        }
+        isEditingRef.current = false;
+        vuuUtils.dispatchCustomEvent(evt.target, "vuu-exit-edit-mode");
       }
-      setEditState((editState2) => ({ ...editState2, editing: false }));
-    }
-  }, [commit, editState]);
+    },
+    [beginEditHandler, commit]
+  );
   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 });
+      setEditState({ value: value2 });
       onEdit?.(
         {
           editType: "change",
@@ -193,11 +182,11 @@ const useEditableText = ({
         "change"
       );
       if (result?.ok === false) {
-        setEditState({
-          editing: true,
-          value: value2,
-          message: result.messages?.join(",")
-        });
+        setEditState({ value: value2, message: result.messages?.join(",") });
+      }
+      if (!isEditingRef.current) {
+        isEditingRef.current = true;
+        vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
       }
     },
     [column, onEdit]
@@ -207,14 +196,13 @@ const useEditableText = ({
      * has the value been edited during this edit session
      */
     edited: editState.previousValue !== void 0 && editState.previousValue !== editState.value,
-    editing: editState.editing,
+    //TODO why are we detecting commit here, why not use VuuInput ?
     inputProps: {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onKeyDown: handleKeyDown
     },
     onChange: handleChange,
-    previousValue: editState.previousValue,
     value: editState.value,
     warningMessage: editState.message
   };

package/cjs/editable/useEditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.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 EditableTextHookProps<\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 useEditableText = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<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          if (response.errorMessage === \"CHANGE_REVERTED\") {\n            setEditState(({ value }) => ({\n              editing: true,\n              previousValue: undefined,\n              value,\n            }));\n            initialValueRef.current = value;\n            return true;\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message: response.errorMessage,\n            }));\n          }\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  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: initialValueRef.current,\n              },\n              \"cancel\",\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    /**\n     * has the value been edited during this edit session\n     */\n    edited:\n      editState.previousValue !== undefined &&\n      editState.previousValue !== editState.value,\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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"}
+{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.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 EditableTextHookProps<\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  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 useEditableText = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n  const isEditingRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: undefined, value: stringValueOf(value) });\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      try {\n        const typedValue = getTypedValue(value, type, true);\n        console.log(`[useEditableText] typedValue = ${typedValue}`);\n        const previousValue = getTypedValue(initialValue, type);\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            previousValue:\n              previousValue === value\n                ? undefined\n                : previousValue === undefined\n                  ? initialValue\n                  : previousValue,\n            value,\n          }));\n        } else if (isRpcError(response)) {\n          if (response.errorMessage === \"CHANGE_REVERTED\") {\n            setEditState(({ value }) => ({\n              previousValue: undefined,\n              value,\n            }));\n            initialValueRef.current = value;\n            return true;\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message: response.errorMessage,\n            }));\n          }\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          } else {\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n          }\n        }\n      }\n    }\n    return false;\n  }, [column, editState, onEdit, type]);\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        if (isEditingRef.current) {\n          if (isDirtyRef.current) {\n            const commitSuccessful = await commit();\n            if (commitSuccessful) {\n              isEditingRef.current = false;\n              dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n              dispatchCustomEvent(input, \"vuu-commit\");\n            }\n          } else {\n            isEditingRef.current = false;\n            dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n          }\n        } else {\n          isEditingRef.current = true;\n          dispatchCustomEvent(input, \"vuu-enter-edit-mode\");\n          input.select();\n        }\n      } else if (\n        key === \"ArrowRight\" ||\n        key === \"ArrowLeft\" ||\n        key === \"ArrowUp\" ||\n        key === \"ArrowDown\"\n      ) {\n        if (isEditingRef.current) {\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        if (isEditingRef.current) {\n          if (isDirtyRef.current) {\n            const { value: previousValue } = editState;\n            isDirtyRef.current = false;\n            setEditState({\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: initialValueRef.current,\n              },\n              \"cancel\",\n            );\n          }\n          isEditingRef.current = false;\n          dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const beginEditHandler = useCallback((evt: Event) => {\n    isEditingRef.current = true;\n    dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n  }, []);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (e) => {\n      e.target.addEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n    },\n    [beginEditHandler],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    async (evt) => {\n      evt.target.removeEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n      if (isEditingRef.current) {\n        if (isDirtyRef.current) {\n          const commitSuccessful = await commit();\n          console.log({ commitSuccessful });\n        }\n        isEditingRef.current = false;\n        dispatchCustomEvent(evt.target, \"vuu-exit-edit-mode\");\n      }\n    },\n    [beginEditHandler, commit],\n  );\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({ 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({ value, message: result.messages?.join(\",\") });\n      }\n\n      if (!isEditingRef.current) {\n        isEditingRef.current = true;\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n      }\n    },\n    [column, onEdit],\n  );\n\n  return {\n    /**\n     * has the value been edited during this edit session\n     */\n    edited:\n      editState.previousValue !== undefined &&\n      editState.previousValue !== editState.value,\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","getTypedValue","isRpcSuccess","previousValue","isRpcError","DataValidationError","message","dispatchCustomEvent"],"mappings":"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"}

package/esm/editable/useEditableText.js

@@ -9,19 +9,15 @@ const useEditableText = ({
   type = "string"
 }) => {
   const [editState, setEditState] = useState({
-    editing: false,
     value: stringValueOf(value)
   });
   const initialValueRef = useRef(value?.toString() ?? "");
   const isDirtyRef = useRef(false);
+  const isEditingRef = useRef(false);
   useMemo(() => {
     if (initialValueRef.current !== value?.toString()) {
       initialValueRef.current = stringValueOf(value);
-      setEditState((editState2) => ({
-        ...editState2,
-        message: void 0,
-        value: stringValueOf(value)
-      }));
+      setEditState({ message: void 0, value: stringValueOf(value) });
     }
   }, [value]);
   const commit = useCallback(async () => {
@@ -35,9 +31,10 @@ const useEditableText = ({
       return false;
     } else {
       const { current: initialValue } = initialValueRef;
-      const previousValue = getTypedValue(initialValue, type);
       try {
         const typedValue = getTypedValue(value2, type, true);
+        console.log(`[useEditableText] typedValue = ${typedValue}`);
+        const previousValue = getTypedValue(initialValue, type);
         const response = await onEdit?.(
           {
             editType: "commit",
@@ -50,14 +47,12 @@ const useEditableText = ({
         if (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 (isRpcError(response)) {
           if (response.errorMessage === "CHANGE_REVERTED") {
             setEditState(({ value: value3 }) => ({
-              editing: true,
               previousValue: void 0,
               value: value3
             }));
@@ -82,15 +77,6 @@ const useEditableText = ({
               ...state,
               message: message2
             }));
-            onEdit?.(
-              {
-                editType: "commit",
-                isValid: false,
-                previousValue,
-                value: value2
-              },
-              "commit"
-            );
           } else {
             setEditState((state) => ({
               ...state,
@@ -102,15 +88,38 @@ const useEditableText = ({
     }
     return false;
   }, [column, editState, onEdit, type]);
-  const toggleActivation = useCallback(
-    async (input, cancel = false) => {
-      if (editState.editing) {
-        if (isDirtyRef.current) {
-          if (cancel) {
+  const handleKeyDown = useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              isEditingRef.current = false;
+              dispatchCustomEvent(input, "vuu-exit-edit-mode");
+              dispatchCustomEvent(input, "vuu-commit");
+            }
+          } else {
+            isEditingRef.current = false;
+            dispatchCustomEvent(input, "vuu-exit-edit-mode");
+          }
+        } else {
+          isEditingRef.current = true;
+          dispatchCustomEvent(input, "vuu-enter-edit-mode");
+          input.select();
+        }
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (isEditingRef.current) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
             const { value: previousValue } = editState;
             isDirtyRef.current = false;
             setEditState({
-              editing: false,
               value: initialValueRef.current,
               message: void 0
             });
@@ -123,64 +132,44 @@ const useEditableText = ({
               },
               "cancel"
             );
-          } else {
-            const commitSuccessful = await commit();
-            if (commitSuccessful) {
-              setEditState((editState2) => ({ ...editState2, editing: false }));
-              dispatchCustomEvent(input, "vuu-commit");
-            }
           }
-        } else {
-          setEditState((editState2) => ({ ...editState2, editing: false }));
+          isEditingRef.current = false;
+          dispatchCustomEvent(input, "vuu-exit-edit-mode");
         }
-      } else if (!cancel) {
-        setEditState((editState2) => ({ ...editState2, editing: true }));
-        input.select();
       }
     },
     [commit, editState, onEdit]
   );
-  const handleKeyDown = 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 beginEditHandler = useCallback((evt) => {
+    isEditingRef.current = true;
+    dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
+  }, []);
   const handleFocus = useCallback(
     (e) => {
-      const input = e.target;
-      const source = e.relatedTarget;
-      if (source?.classList.contains("vuuTableCell") && source.contains(input)) {
-        toggleActivation(input);
-      }
+      e.target.addEventListener("vuu-begin-edit", beginEditHandler, true);
     },
-    [toggleActivation]
+    [beginEditHandler]
   );
-  const handleBlur = useCallback(async () => {
-    if (editState.editing) {
-      if (isDirtyRef.current) {
-        const commitSuccessful = await commit();
-        console.log({ commitSuccessful });
+  const handleBlur = useCallback(
+    async (evt) => {
+      evt.target.removeEventListener("vuu-begin-edit", beginEditHandler, true);
+      if (isEditingRef.current) {
+        if (isDirtyRef.current) {
+          const commitSuccessful = await commit();
+          console.log({ commitSuccessful });
+        }
+        isEditingRef.current = false;
+        dispatchCustomEvent(evt.target, "vuu-exit-edit-mode");
       }
-      setEditState((editState2) => ({ ...editState2, editing: false }));
-    }
-  }, [commit, editState]);
+    },
+    [beginEditHandler, commit]
+  );
   const handleChange = useCallback(
     (evt) => {
       const { value: value2 } = evt.target;
       isDirtyRef.current = value2 !== initialValueRef.current;
       const result = column.clientSideEditValidationCheck?.(value2, "change");
-      setEditState({ editing: true, value: value2 });
+      setEditState({ value: value2 });
       onEdit?.(
         {
           editType: "change",
@@ -191,11 +180,11 @@ const useEditableText = ({
         "change"
       );
       if (result?.ok === false) {
-        setEditState({
-          editing: true,
-          value: value2,
-          message: result.messages?.join(",")
-        });
+        setEditState({ value: value2, message: result.messages?.join(",") });
+      }
+      if (!isEditingRef.current) {
+        isEditingRef.current = true;
+        dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
       }
     },
     [column, onEdit]
@@ -205,14 +194,13 @@ const useEditableText = ({
      * has the value been edited during this edit session
      */
     edited: editState.previousValue !== void 0 && editState.previousValue !== editState.value,
-    editing: editState.editing,
+    //TODO why are we detecting commit here, why not use VuuInput ?
     inputProps: {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onKeyDown: handleKeyDown
     },
     onChange: handleChange,
-    previousValue: editState.previousValue,
     value: editState.value,
     warningMessage: editState.message
   };

package/esm/editable/useEditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.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 EditableTextHookProps<\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 useEditableText = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<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          if (response.errorMessage === \"CHANGE_REVERTED\") {\n            setEditState(({ value }) => ({\n              editing: true,\n              previousValue: undefined,\n              value,\n            }));\n            initialValueRef.current = value;\n            return true;\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message: response.errorMessage,\n            }));\n          }\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  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: initialValueRef.current,\n              },\n              \"cancel\",\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    /**\n     * has the value been edited during this edit session\n     */\n    edited:\n      editState.previousValue !== undefined &&\n      editState.previousValue !== editState.value,\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":["editState","value","previousValue","message"],"mappings":"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"}
+{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.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 EditableTextHookProps<\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  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 useEditableText = <T extends string | number | boolean = string>({\n  column,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n  const isEditingRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: undefined, value: stringValueOf(value) });\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      try {\n        const typedValue = getTypedValue(value, type, true);\n        console.log(`[useEditableText] typedValue = ${typedValue}`);\n        const previousValue = getTypedValue(initialValue, type);\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            previousValue:\n              previousValue === value\n                ? undefined\n                : previousValue === undefined\n                  ? initialValue\n                  : previousValue,\n            value,\n          }));\n        } else if (isRpcError(response)) {\n          if (response.errorMessage === \"CHANGE_REVERTED\") {\n            setEditState(({ value }) => ({\n              previousValue: undefined,\n              value,\n            }));\n            initialValueRef.current = value;\n            return true;\n          } else {\n            setEditState((state) => ({\n              ...state,\n              message: response.errorMessage,\n            }));\n          }\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          } else {\n            setEditState((state) => ({\n              ...state,\n              message,\n            }));\n          }\n        }\n      }\n    }\n    return false;\n  }, [column, editState, onEdit, type]);\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        if (isEditingRef.current) {\n          if (isDirtyRef.current) {\n            const commitSuccessful = await commit();\n            if (commitSuccessful) {\n              isEditingRef.current = false;\n              dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n              dispatchCustomEvent(input, \"vuu-commit\");\n            }\n          } else {\n            isEditingRef.current = false;\n            dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n          }\n        } else {\n          isEditingRef.current = true;\n          dispatchCustomEvent(input, \"vuu-enter-edit-mode\");\n          input.select();\n        }\n      } else if (\n        key === \"ArrowRight\" ||\n        key === \"ArrowLeft\" ||\n        key === \"ArrowUp\" ||\n        key === \"ArrowDown\"\n      ) {\n        if (isEditingRef.current) {\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        if (isEditingRef.current) {\n          if (isDirtyRef.current) {\n            const { value: previousValue } = editState;\n            isDirtyRef.current = false;\n            setEditState({\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: initialValueRef.current,\n              },\n              \"cancel\",\n            );\n          }\n          isEditingRef.current = false;\n          dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const beginEditHandler = useCallback((evt: Event) => {\n    isEditingRef.current = true;\n    dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n  }, []);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (e) => {\n      e.target.addEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n    },\n    [beginEditHandler],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    async (evt) => {\n      evt.target.removeEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n      if (isEditingRef.current) {\n        if (isDirtyRef.current) {\n          const commitSuccessful = await commit();\n          console.log({ commitSuccessful });\n        }\n        isEditingRef.current = false;\n        dispatchCustomEvent(evt.target, \"vuu-exit-edit-mode\");\n      }\n    },\n    [beginEditHandler, commit],\n  );\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({ 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({ value, message: result.messages?.join(\",\") });\n      }\n\n      if (!isEditingRef.current) {\n        isEditingRef.current = true;\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n      }\n    },\n    [column, onEdit],\n  );\n\n  return {\n    /**\n     * has the value been edited during this edit session\n     */\n    edited:\n      editState.previousValue !== undefined &&\n      editState.previousValue !== editState.value,\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["value","previousValue","message"],"mappings":"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"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.9",
-    "@vuu-ui/vuu-protocol-types": "2.1.9",
-    "@vuu-ui/vuu-table-types": "2.1.9"
+    "@vuu-ui/vuu-data-types": "2.1.10",
+    "@vuu-ui/vuu-protocol-types": "2.1.10",
+    "@vuu-ui/vuu-table-types": "2.1.10"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.1.9",
-    "@vuu-ui/vuu-data-react": "2.1.9",
-    "@vuu-ui/vuu-layout": "2.1.9",
-    "@vuu-ui/vuu-popups": "2.1.9",
-    "@vuu-ui/vuu-table": "2.1.9",
-    "@vuu-ui/vuu-utils": "2.1.9",
+    "@vuu-ui/vuu-context-menu": "2.1.10",
+    "@vuu-ui/vuu-data-react": "2.1.10",
+    "@vuu-ui/vuu-layout": "2.1.10",
+    "@vuu-ui/vuu-popups": "2.1.10",
+    "@vuu-ui/vuu-table": "2.1.10",
+    "@vuu-ui/vuu-utils": "2.1.10",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

package/types/editable/useEditableText.d.ts

@@ -12,14 +12,12 @@ export declare const useEditableText: <T extends string | number | boolean = str
      * has the value been edited during this edit session
      */
     edited: boolean;
-    editing: boolean;
     inputProps: {
         onBlur: FocusEventHandler<HTMLElement>;
         onFocus: FocusEventHandler<HTMLElement>;
         onKeyDown: (evt: KeyboardEvent<HTMLElement>) => Promise<void>;
     };
     onChange: FormEventHandler;
-    previousValue: string | undefined;
     value: string;
     warningMessage: string | undefined;
 };