feat(editable): add value text

.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

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 },

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>

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() {

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
    */