feat(*): add autoresize for textarea

packages/react/CHANGELOG.md

@@ -6,6 +6,11 @@ description: All notable changes will be documented in this file.
 
 # [Unreleased]
 
+## Added
+
+- **Field**: Added `autoresize` prop to `Field.Textarea` for auto-resizing the textarea based on
+  content.
+
 ## Changed
 
 - **TreeView**: Redesigned using the new tree collection for improved rendering and logic

packages/react/package.json

@@ -155,6 +155,7 @@
     "@internationalized/date": "3.5.6",
     "@zag-js/accordion": "0.77.0",
     "@zag-js/anatomy": "0.77.0",
+    "@zag-js/auto-resize": "0.77.0",
     "@zag-js/avatar": "0.77.0",
     "@zag-js/carousel": "0.77.0",
     "@zag-js/checkbox": "0.77.0",

packages/react/src/components/field/examples/textarea.tsx

@@ -4,7 +4,7 @@ export const Textarea = () => {
   return (
     <Field.Root>
       <Field.Label>Label</Field.Label>
-      <Field.Textarea />
+      <Field.Textarea autoresize />
       <Field.HelperText>Some additional Info</Field.HelperText>
       <Field.ErrorText>Error Info</Field.ErrorText>
     </Field.Root>

packages/react/src/components/field/field-textarea.tsx

@@ -1,16 +1,35 @@
+import { autoresizeTextarea } from '@zag-js/auto-resize'
 import { mergeProps } from '@zag-js/react'
-import { forwardRef } from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
+import { composeRefs } from '../../utils/compose-refs'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useFieldContext } from './use-field-context'
 
-export interface FieldTextareaBaseProps extends PolymorphicProps {}
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+  /**
+   * Whether the textarea should autoresize
+   * @default false
+   */
+  autoresize?: boolean
+}
 export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {}
 
 export const FieldTextarea = forwardRef<HTMLTextAreaElement, FieldTextareaProps>((props, ref) => {
+  const { autoresize, ...textareaProps } = props
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
   const field = useFieldContext()
-  const mergedProps = mergeProps<HTMLProps<'textarea'>>(field?.getTextareaProps(), props)
+  const mergedProps = mergeProps<HTMLProps<'textarea'>>(
+    field?.getTextareaProps(),
+    { style: { resize: autoresize ? 'none' : undefined } },
+    textareaProps,
+  )
 
-  return <ark.textarea {...mergedProps} ref={ref} />
+  useEffect(() => {
+    if (!autoresize) return
+    return autoresizeTextarea(textareaRef.current)
+  }, [autoresize])
+
+  return <ark.textarea {...mergedProps} ref={composeRefs(ref, textareaRef)} />
 })
 
 FieldTextarea.displayName = 'FieldTextarea'

packages/solid/CHANGELOG.md

@@ -6,11 +6,16 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+## Added
+
+- **Field**: Added `autoresize` prop to `Field.Textarea` for auto-resizing the textarea based on
+  content.
+
 ## Changed
 
 - **TreeView**: Redesigned using the new tree collection for improved rendering and logic
-  management. See the [TreeView documentation](https://ark-ui.com/docs/solid/components/tree-view) for
-  details.
+  management. See the [TreeView documentation](https://ark-ui.com/docs/solid/components/tree-view)
+  for details.
 - **QrCode, SignaturePad, Timer**: Promoted from preview to stable release.
 
 ## Fixed

packages/solid/package.json

@@ -123,6 +123,7 @@
     "@internationalized/date": "3.5.6",
     "@zag-js/accordion": "0.77.0",
     "@zag-js/anatomy": "0.77.0",
+    "@zag-js/auto-resize": "0.77.0",
     "@zag-js/avatar": "0.77.0",
     "@zag-js/carousel": "0.77.0",
     "@zag-js/checkbox": "0.77.0",

packages/solid/src/components/field/examples/textarea.tsx

@@ -4,7 +4,7 @@ export const Textarea = () => {
   return (
     <Field.Root>
       <Field.Label>Label</Field.Label>
-      <Field.Textarea />
+      <Field.Textarea autoresize />
       <Field.HelperText>Some additional Info</Field.HelperText>
       <Field.ErrorText>Error Info</Field.ErrorText>
     </Field.Root>

packages/solid/src/components/field/field-textarea.tsx

@@ -1,13 +1,41 @@
+import { autoresizeTextarea } from '@zag-js/auto-resize'
 import { mergeProps } from '@zag-js/solid'
+import { createEffect } from 'solid-js'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useFieldContext } from './use-field-context'
 
-export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {}
+export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'> {
+  /**
+   * Whether the textarea should autoresize
+   * @default false
+   */
+  autoresize?: boolean
+}
 export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {}
 
 export const FieldTextarea = (props: FieldTextareaProps) => {
   const field = useFieldContext()
-  const mergedProps = mergeProps(() => field?.().getTextareaProps(), props)
+  let textareaRef: HTMLTextAreaElement
+  const { autoresize, ...textareaProps } = props
+
+  const mergedProps = mergeProps(
+    () => field?.().getTextareaProps(),
+    () => ({ style: { resize: autoresize ? 'none' : undefined } }),
+    textareaProps,
+  )
+
+  createEffect(() => {
+    if (!autoresize) return
+    const cleanup = autoresizeTextarea(textareaRef)
+    return cleanup
+  })
 
-  return <ark.textarea {...mergedProps} />
+  return (
+    <ark.textarea
+      {...mergedProps}
+      ref={(el) => {
+        textareaRef = el
+      }}
+    />
+  )
 }

packages/vue/CHANGELOG.md

@@ -6,6 +6,11 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+## Added
+
+- **Field**: Added `autoresize` prop to `Field.Textarea` for auto-resizing the textarea based on
+  content.
+
 ## Changed
 
 - **TreeView**: Redesigned using the new tree collection for improved rendering and logic

packages/vue/package.json

@@ -153,6 +153,7 @@
     "@internationalized/date": "3.5.6",
     "@zag-js/accordion": "0.77.0",
     "@zag-js/anatomy": "0.77.0",
+    "@zag-js/auto-resize": "0.77.0",
     "@zag-js/avatar": "0.77.0",
     "@zag-js/carousel": "0.77.0",
     "@zag-js/checkbox": "0.77.0",

packages/vue/src/components/field/examples/textarea.vue

@@ -5,7 +5,7 @@ import { Field } from '@ark-ui/vue/field'
 <template>
   <Field.Root>
     <Field.Label>Label</Field.Label>
-    <Field.Textarea />
+    <Field.Textarea autoresize />
     <Field.HelperText>Some additional Info</Field.HelperText>
     <Field.ErrorText>Error Info</Field.ErrorText>
   </Field.Root>

packages/vue/src/components/field/field-textarea.vue

@@ -2,7 +2,13 @@
 import type { TextareaHTMLAttributes } from 'vue'
 import type { PolymorphicProps } from '../factory'
 
-export interface FieldTextareaBaseProps extends PolymorphicProps {}
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+  /**
+   * Whether the textarea should autoresize
+   * @default false
+   */
+  autoresize?: boolean
+}
 export interface FieldTextareaProps
   extends FieldTextareaBaseProps,
     /**
@@ -14,24 +20,26 @@ export interface FieldTextareaProps
 </script>
 
 <script setup lang="ts">
-import { ark } from '../factory'
-import { useFieldContext } from './use-field-context'
+import { autoresizeTextarea } from '@zag-js/auto-resize'
 import { useForwardExpose } from '../../utils'
+import { useFieldContext } from './use-field-context'
 
-defineProps<FieldTextareaProps>()
+const props = defineProps<FieldTextareaProps>()
 const field = useFieldContext()
 const emit = defineEmits(['update:modelValue'])
 
 useForwardExpose()
 </script>
 
+<!-- TODO use ark.textarea -->
 <template>
-  <ark.textarea
+  <textarea
+    :ref="autoresizeTextarea"
     v-bind="field.getTextareaProps()"
     :value="modelValue"
     @input="(event) => emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
-    :as-child
+    :style="props.autoresize ? { resize: 'none', overflow: 'hidden' } : undefined"
   >
     <slot />
-  </ark.textarea>
-</template>
+  </textarea>
+</template>

packages/vue/src/components/select/examples/basic.vue

@@ -21,13 +21,7 @@ const collection = createListCollection({
     </Select.Control>
     <Teleport to="body">
       <Select.Positioner>
-        <Select.Content
-          :ref="
-            (el) => {
-              console.log(el)
-            }
-          "
-        >
+        <Select.Content>
           <Select.ItemGroup>
             <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
             <Select.Item v-for="item in collection.items" :key="item" :item="item">

packages/vue/src/components/select/examples/root-provider.vue

@@ -25,13 +25,7 @@ const select = useSelect({ collection: collection })
     </Select.Control>
     <Teleport to="body">
       <Select.Positioner>
-        <Select.Content
-          :ref="
-            (el) => {
-              console.log(el)
-            }
-          "
-        >
+        <Select.Content>
           <Select.ItemGroup>
             <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
             <Select.Item v-for="item in collection.items" :key="item" :item="item">

packages/vue/src/components/tree-view/tree-view-branch-content.vue

@@ -25,7 +25,6 @@ import { createSplitProps } from '../create-split-props'
 
 const splitVisibilityProps = createSplitProps<VisibilityProps>()
 
-
 defineProps<TreeViewBranchContentProps>()
 const treeView = useTreeViewContext()
 const ndoeProps = useTreeViewNodePropsContext()

packages/vue/src/components/tree-view/tree-view-root-provider.vue

@@ -23,7 +23,7 @@ export interface TreeViewRootProviderProps<T extends TreeNode>
 
 <script setup lang="ts" generic="T extends TreeNode">
 import { computed } from 'vue'
-import { RenderStrategyPropsProvider, useForwardExpose, } from '../../utils'
+import { RenderStrategyPropsProvider, useForwardExpose } from '../../utils'
 import { ark } from '../factory'
 import { TreeViewProvider } from './use-tree-view-context'