fix(#2054): docs maxwidth for textarea, tooltip and dropdown

src/routes/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   GoabBadge,
   GoabDropdown,
@@ -81,16 +81,43 @@ export default function DropdownPage() {
       name: "width",
       value: "",
     },
+    {
+      label: "Max width",
+      type: "string",
+      name: "maxWidth",
+      value: "",
+      hidden: version === "old", // Hide in LTS (old) version
+    },
     { label: "Disabled", type: "boolean", name: "disabled", value: false },
     { label: "Error", type: "boolean", name: "error", value: false },
     { label: "Native", type: "boolean", name: "native", value: false },
     { label: "Filterable", type: "boolean", name: "filterable", value: false },
     { label: "ARIA label", type: "string", name: "ariaLabel", value: "" },
   ]);
+
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
     label: "Basic dropdown",
   });
 
+  // Hide the maxWidth control and remove the prop when LTS version is selected
+  useEffect(() => {
+    setDropdownBindings(prev =>
+      prev.map(b => {
+        if (b.name === "maxWidth" && b.type === "string") {
+          return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value };
+        }
+        return b;
+      })
+    );
+
+    if (version === "old") {
+      setDropdownProps(prev => {
+        const { maxWidth, ...rest } = prev as unknown as Record<string, unknown>;
+        return rest as ComponentPropsType;
+      });
+    }
+  }, [version]);
+
   const oldDropdownProperties: ComponentProperty[] = [
     {
       name: "name",
@@ -252,6 +279,11 @@ export default function DropdownPage() {
       type: "string",
       description: "Overrides the autosized menu width. Non-native only.",
     },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Maximum width of the dropdown. Non-native only.",
+    },
     {
       name: "disabled",
       type: "boolean",

src/routes/components/TextArea.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import {
   ComponentProperties,
@@ -88,6 +88,13 @@ export default function TextAreaPage() {
       name: "maxCount",
       type: "number",
     },
+    {
+      label: "Max width",
+      name: "maxWidth",
+      type: "string",
+      value: "",
+      hidden: version === "old", // Hide in LTS (old) version
+    },
     {
       name: "value",
       type: "string",
@@ -97,10 +104,30 @@ export default function TextAreaPage() {
       label: "Value",
     },
   ]);
+
   const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
     label: "Basic",
   });
 
+  // Hide the maxWidth control and remove the prop when LTS version is selected
+  useEffect(() => {
+    setTextAreaBindings(prev =>
+      prev.map(b => {
+        if (b.name === "maxWidth" && b.type === "string") {
+          return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value };
+        }
+        return b;
+      })
+    );
+
+    if (version === "old") {
+      setComponentProps(prev => {
+        const { maxWidth, ...rest } = prev as unknown as Record<string, unknown>;
+        return rest as CastingType;
+      });
+    }
+  }, [version]);
+
   const oldComponentProperties: ComponentProperty[] = [
     {
       name: "name",

src/routes/components/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   ComponentProperties,
   ComponentProperty,
@@ -23,6 +23,7 @@ import {
 import { TooltipExamples } from "@examples/tooltip/TooltipExamples.tsx";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 // == Page props ==
 
@@ -42,6 +43,7 @@ type CastingType = {
 };
 
 export default function TooltipPage() {
+  const { version } = useContext(LanguageVersionContext);
 
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     content: "Tooltip",
@@ -68,8 +70,36 @@ export default function TooltipPage() {
       options: ["left", "center", "right"],
       value: "",
     },
+    {
+      label: "Max width",
+      type: "string",
+      name: "maxWidth",
+      value: "",
+      hidden: version === "old", // ensure hidden on initial render when LTS selected
+    },
   ]);
 
+  // Hide the maxWidth control and remove the prop when LTS version is selected
+  useEffect(() => {
+    // Toggle the visibility of the Max width binding
+    setComponentBindings(prev =>
+      prev.map(b => {
+        if (b.name === "maxWidth" && b.type === "string") {
+          return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value };
+        }
+        return b;
+      })
+    );
+
+    // Ensure the component props do not include maxWidth when LTS is selected
+    if (version === "old") {
+      setComponentProps(prev => {
+        const { maxWidth, ...rest } = prev as Record<string, unknown>;
+        return rest as ComponentPropsType;
+      });
+    }
+  }, [version]);
+
   const oldComponentProperties: ComponentProperty[] = [
     {
       name: "content",
@@ -122,6 +152,11 @@ export default function TooltipPage() {
       description: "Horizontal alignment to the child element",
       defaultValue: "center",
     },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Maximum width of the tooltip",
+    },
     TestIdProperty,
     MarginProperty
   ];
@@ -143,7 +178,6 @@ export default function TooltipPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
             <h2 id="component" style={{ display: "none" }}>Playground</h2>