From e827bd9d459bcce74e971d947208d0312dd0b18a Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 20 May 2024 16:13:06 +0100
Subject: [PATCH] feat(editable): add value text

---
 .changeset/perfect-lions-attend.md            |  5 +++
 examples/svelte-ts/src/App.svelte             |  2 ++
 examples/svelte-ts/src/routes/editable.svelte | 32 +++++++++++++++++++
 .../machines/editable/src/editable.connect.ts | 10 ++++--
 .../machines/editable/src/editable.types.ts   |  4 +++
 5 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/perfect-lions-attend.md
 create mode 100644 examples/svelte-ts/src/routes/editable.svelte

diff --git a/.changeset/perfect-lions-attend.md b/.changeset/perfect-lions-attend.md
new file mode 100644
index 0000000000..919099ed49
--- /dev/null
+++ b/.changeset/perfect-lions-attend.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/editable": minor
+---
+
+Add `api.valueText` that returns the current value or placeholder if empty
diff --git a/examples/svelte-ts/src/App.svelte b/examples/svelte-ts/src/App.svelte
index 22a55fdeff..e64231d503 100644
--- a/examples/svelte-ts/src/App.svelte
+++ b/examples/svelte-ts/src/App.svelte
@@ -39,6 +39,7 @@
   import Tooltip from "./routes/tooltip.svelte"
   import Tour from "./routes/tour.svelte"
   import TreeView from "./routes/tree-view.svelte"
+  import Editable from "./routes/editable.svelte"
 
   const sortedRoutes = routesData.sort((a, b) => a.label.localeCompare(b.label))
 
@@ -54,6 +55,7 @@
     { path: "/combobox", component: Combobox },
     { path: "/context-menu", component: ContextMenu },
     { path: "/dialog", component: Dialog },
+    { path: "/editable", component: Editable },
     { path: "/file-upload", component: FileUpload },
     { path: "/floating-panel", component: FloatingPanel },
     { path: "/hover-card", component: HoverCard },
diff --git a/examples/svelte-ts/src/routes/editable.svelte b/examples/svelte-ts/src/routes/editable.svelte
new file mode 100644
index 0000000000..3fbbc47c8b
--- /dev/null
+++ b/examples/svelte-ts/src/routes/editable.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import * as editable from "@zag-js/editable"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+  import { editableControls } from "@zag-js/shared"
+  import { useControls } from "$lib/use-controls.svelte"
+
+  const controls = useControls(editableControls)
+
+  const [snapshot, send] = useMachine(editable.machine({ id: "1" }), {
+    context: controls.context,
+  })
+
+  const api = $derived(editable.connect(snapshot, send, normalizeProps))
+</script>
+
+<main class="editable">
+  <div {...api.rootProps}>
+    <div {...api.areaProps}>
+      <input data-testid="input" {...api.inputProps} />
+      <span data-testid="preview" {...api.previewProps}>{api.valueText}</span>
+    </div>
+    <div {...api.controlProps}>
+      {#if !api.editing}
+        <button data-testid="edit-button" {...api.editTriggerProps}> Edit </button>
+      {/if}
+      {#if api.editing}
+        <button data-testid="save-button" {...api.submitTriggerProps}> Save </button>
+        <button data-testid="cancel-button" {...api.cancelTriggerProps}> Cancel </button>
+      {/if}
+    </div>
+  </div>
+</main>
diff --git a/packages/machines/editable/src/editable.connect.ts b/packages/machines/editable/src/editable.connect.ts
index 8df6febf9d..952a11dbc4 100644
--- a/packages/machines/editable/src/editable.connect.ts
+++ b/packages/machines/editable/src/editable.connect.ts
@@ -21,10 +21,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const placeholder =
     typeof placeholderProp === "string" ? { edit: placeholderProp, preview: placeholderProp } : placeholderProp
 
+  const value = state.context.value
+  const valueText = empty ? placeholder?.preview ?? "" : value
+
   return {
     editing,
     empty,
-    value: state.context.value,
+    value,
+    valueText,
     setValue(value) {
       send({ type: "SET_VALUE", value })
     },
@@ -90,7 +94,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-readonly": dataAttr(readOnly),
       "aria-invalid": ariaAttr(invalid),
       "data-invalid": dataAttr(invalid),
-      defaultValue: state.context.value,
+      defaultValue: value,
       size: autoResize ? 1 : undefined,
       onChange(event) {
         send({ type: "TYPE", value: event.currentTarget.value })
@@ -138,7 +142,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "aria-disabled": ariaAttr(disabled),
       "aria-invalid": ariaAttr(invalid),
       "data-invalid": dataAttr(invalid),
-      children: empty ? placeholder?.preview : state.context.value,
+      children: valueText,
       hidden: autoResize ? undefined : editing,
       tabIndex: interactive && state.context.isPreviewFocusable ? 0 : undefined,
       onFocus() {
diff --git a/packages/machines/editable/src/editable.types.ts b/packages/machines/editable/src/editable.types.ts
index a446cb96f7..0cc49f30db 100644
--- a/packages/machines/editable/src/editable.types.ts
+++ b/packages/machines/editable/src/editable.types.ts
@@ -200,6 +200,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * The current value of the editable
    */
   value: string
+  /**
+   * The current value of the editable, or the placeholder if the value is empty
+   */
+  valueText: string
   /**
    * Function to set the value of the editable
    */