Update native_input -> native_textarea because it's more flexible

Author: wwwillchen

docs/components/input.md

@@ -13,4 +13,4 @@ For longer text inputs, also see [Textarea](./textarea.md)
 ## API
 
 ::: mesop.components.input.input.input
-::: mesop.components.input.input.native_input
+::: mesop.components.input.input.native_textarea

mesop/__init__.py

@@ -52,7 +52,7 @@
 from mesop.components.icon.icon import icon as icon
 from mesop.components.image.image import image as image
 from mesop.components.input.input import input as input
-from mesop.components.input.input import native_input as native_input
+from mesop.components.input.input import native_textarea as native_textarea
 from mesop.components.input.input import textarea as textarea
 from mesop.components.markdown.markdown import markdown as markdown
 from mesop.components.plot.plot import (

mesop/components/input/e2e/input_app.py

@@ -36,7 +36,7 @@ def app():
       ),
     )
   ):
-    me.native_input(
+    me.native_textarea(
       readonly=False,
       style=me.Style(
         height=32,

mesop/components/input/input.ng.html

@@ -1,13 +1,16 @@
-@if(config().getIsNativeInput()) {
-<input
+@if(config().getIsNativeTextarea()) {
+<textarea
   [disabled]="config().getDisabled()"
   [placeholder]="config().getPlaceholder()!"
-  [type]="config().getType()!"
   [value]="config().getValue()"
   [readonly]="config().getReadonly()"
   [style]="getStyle()"
   (input)="onInput($event)"
-/>
+  [cdkTextareaAutosize]="config().getAutosize()"
+  [cdkAutosizeMinRows]="config().getMinRows()"
+  [cdkAutosizeMaxRows]="config().getMaxRows()"
+  #autosize="cdkTextareaAutosize"
+></textarea>
 } @else {
 <mat-form-field
   [hideRequiredMarker]="config().getHideRequiredMarker()"

mesop/components/input/input.proto

@@ -27,5 +27,5 @@ message InputType {
   optional int32 max_rows = 22;
   // Not exposed as public API.
   optional bool is_textarea = 19;
-  optional bool is_native_input = 23;
+  optional bool is_native_textarea = 23;
 }

mesop/components/input/input.py

@@ -37,6 +37,9 @@ def textarea(
 
   Args:
     label: Label for input.
+    autosize: If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit.
+    min_rows: The minimum number of rows the textarea will display.
+    max_rows: The maximum number of rows the textarea will display.
     on_input: [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is a native browser event.
     rows: The number of lines to show in the text area.
     appearance: The form field appearance style.
@@ -63,7 +66,7 @@ def textarea(
       min_rows=min_rows,
       max_rows=max_rows,
       is_textarea=True,
-      is_native_input=False,
+      is_native_textarea=False,
       disabled=disabled,
       placeholder=placeholder,
       required=required,
@@ -145,7 +148,7 @@ def input(
     type_name="input",
     proto=input_pb.InputType(
       is_textarea=False,
-      is_native_input=False,
+      is_native_textarea=False,
       disabled=disabled,
       placeholder=placeholder,
       required=required,
@@ -167,37 +170,26 @@ def input(
   )
 
 
-def native_input(
+def native_textarea(
   *,
   on_input: Callable[[InputEvent], Any] | None = None,
-  type: Literal[
-    "color",
-    "date",
-    "datetime-local",
-    "email",
-    "month",
-    "number",
-    "password",
-    "search",
-    "tel",
-    "text",
-    "time",
-    "url",
-    "week",
-  ]
-  | None = None,
+  autosize: bool = False,
+  min_rows: int | None = None,
+  max_rows: int | None = None,
   style: Style | None = None,
   disabled: bool = False,
   placeholder: str = "",
   value: str = "",
   readonly: bool = False,
   key: str | None = None,
 ):
-  """Creates a browser native Input component. Intended for advanced use cases with maximum UI control.
+  """Creates a browser native Textarea component. Intended for advanced use cases with maximum UI control.
 
   Args:
     on_input: [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is a native browser event.
-    type: Input type of the element. For textarea, use `me.Textarea(...)`
+    autosize: If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit.
+    min_rows: The minimum number of rows the textarea will display.
+    max_rows: The maximum number of rows the textarea will display.
     style: Style for input.
     disabled: Whether it's disabled.
     placeholder: Placeholder value
@@ -211,10 +203,12 @@ def native_input(
     type_name="input",
     proto=input_pb.InputType(
       is_textarea=False,
-      is_native_input=True,
+      is_native_textarea=True,
+      autosize=autosize,
+      min_rows=min_rows,
+      max_rows=max_rows,
       disabled=disabled,
       placeholder=placeholder,
-      type=type,
       value=value,
       readonly=readonly,
       on_input_handler_id=register_event_handler(on_input, event=InputEvent)