npm - @vuu-ui/vuu-ui-controls - Versions diffs - 2.1.10 → 2.1.11 - Mend

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

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

Files changed (6) hide show

package/cjs/editable/useEditableText.js +77 -74
package/cjs/editable/useEditableText.js.map +1 -1
package/esm/editable/useEditableText.js +77 -74
package/esm/editable/useEditableText.js.map +1 -1
package/package.json +10 -10
package/types/editable/useEditableText.d.ts +2 -0

package/cjs/editable/useEditableText.js CHANGED Viewed

@@ -11,15 +11,19 @@ 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({ message: void 0, value: stringValueOf(value) });
+      setEditState((editState2) => ({
+        ...editState2,
+        message: void 0,
+        value: stringValueOf(value)
+      }));
     }
   }, [value]);
   const commit = React.useCallback(async () => {
@@ -33,10 +37,9 @@ 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",
@@ -49,23 +52,16 @@ 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 }) => ({
-              previousValue: void 0,
-              value: value3
-            }));
-            initialValueRef.current = value2;
-            return true;
-          } else {
-            setEditState((state) => ({
-              ...state,
-              message: response.errorMessage
-            }));
-          }
+          setEditState((state) => ({
+            ...state,
+            message: response.errorMessage
+          }));
+          return false;
         }
         initialValueRef.current = value2;
         return true;
@@ -79,6 +75,15 @@ const useEditableText = ({
               ...state,
               message: message2
             }));
+            onEdit?.(
+              {
+                editType: "commit",
+                isValid: false,
+                previousValue,
+                value: value2
+              },
+              "commit"
+            );
           } else {
             setEditState((state) => ({
               ...state,
@@ -90,38 +95,15 @@ const useEditableText = ({
     }
     return false;
   }, [column, editState, onEdit, type]);
-  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 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
             });
@@ -134,44 +116,64 @@ const useEditableText = ({
               },
               "cancel"
             );
+          } else {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              setEditState((editState2) => ({ ...editState2, editing: false }));
+              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
+            }
           }
-          isEditingRef.current = false;
-          vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
+        } else {
+          setEditState((editState2) => ({ ...editState2, editing: false }));
         }
+      } else if (!cancel) {
+        setEditState((editState2) => ({ ...editState2, editing: true }));
+        input.select();
       }
     },
     [commit, editState, onEdit]
   );
-  const beginEditHandler = React.useCallback((evt) => {
-    isEditingRef.current = true;
-    vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
-  }, []);
-  const handleFocus = React.useCallback(
-    (e) => {
-      e.target.addEventListener("vuu-begin-edit", beginEditHandler, true);
-    },
-    [beginEditHandler]
-  );
-  const handleBlur = React.useCallback(
+  const handleKeyDown = 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 });
+      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();
         }
-        isEditingRef.current = false;
-        vuuUtils.dispatchCustomEvent(evt.target, "vuu-exit-edit-mode");
+      } 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);
       }
     },
-    [beginEditHandler, commit]
+    [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({ value: value2 });
+      setEditState({ editing: true, value: value2 });
       onEdit?.(
         {
           editType: "change",
@@ -182,11 +184,11 @@ const useEditableText = ({
         "change"
       );
       if (result?.ok === false) {
-        setEditState({ value: value2, message: result.messages?.join(",") });
-      }
-      if (!isEditingRef.current) {
-        isEditingRef.current = true;
-        vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
+        setEditState({
+          editing: true,
+          value: value2,
+          message: result.messages?.join(",")
+        });
       }
     },
     [column, onEdit]
@@ -196,13 +198,14 @@ const useEditableText = ({
      * has the value been edited during this edit session
      */
     edited: editState.previousValue !== void 0 && editState.previousValue !== editState.value,
-    //TODO why are we detecting commit here, why not use VuuInput ?
+    editing: editState.editing,
     inputProps: {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onKeyDown: handleKeyDown
     },
     onChange: handleChange,
+    previousValue: editState.previousValue,
     value: editState.value,
     warningMessage: editState.message
   };

package/cjs/editable/useEditableText.js.map CHANGED Viewed

	@@ -1 +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 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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"}
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 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: 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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"}

package/esm/editable/useEditableText.js CHANGED Viewed

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

package/esm/editable/useEditableText.js.map CHANGED Viewed

	@@ -1 +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 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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"}
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 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: 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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"}

package/package.json CHANGED Viewed

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

package/types/editable/useEditableText.d.ts CHANGED Viewed

@@ -12,12 +12,14 @@ 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;
 };