Allow for External Dropdown State Control

lib/components/form/dropdown.jsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import gwMerge from "../../gw-merge";
 
 function Dropdown({
@@ -7,15 +6,16 @@ function Dropdown({
   labelClassName = "",
   className = "",
   onChange,
+  value,
   ...props
 }) {
-  const [selectedValue, setSelectedValue] = useState(options[0]?.value);
   if (!options || options.length === 0) {
     console.error(
       `Dropdown ${label} must have at least one option with value and text.`,
     );
     return null;
   }
+
   return (
     <>
       <label
@@ -30,16 +30,13 @@ function Dropdown({
       <select
         id={label}
         name={label}
-        onChange={(e) => {
-          setSelectedValue(e.target.value);
-          onChange(e);
-        }}
+        onChange={onChange}
         className={gwMerge(
           "gw-mt-2 gw-block gw-w-full gw-rounded-md gw-border-0 gw-py-1.5 gw-pl-3 gw-pr-10 gw-text-gray-900 gw-ring-1 gw-ring-inset gw-ring-gray-300 focus:gw-ring-2 focus:gw-ring-indigo-600 sm:gw-text-sm sm:gw-leading-6",
           className,
         )}
+        value={value}
         {...props}
-        value={selectedValue}
       >
         {options}
       </select>

src/app-pages/documentation/forms/dropdown.jsx

@@ -50,6 +50,12 @@ const componentProps_Fieldset = [
     default: "undefined",
     desc: "Function to call when the dropdown value changes.",
   },
+  {
+    name: "value",
+    type: "string | number | null",
+    default: "undefined",
+    desc: "The current selected value when using the dropdown as a controlled component.",
+  },
   {
     name: "<select> attributes",
     type: "passthrough",
@@ -113,7 +119,6 @@ function DropdownDocs() {
      <div className="w-[50%]">
         <Dropdown
             className={"w-5/6 m-auto"}
-            value={exampleOptions}
             onChange={(e) => {
                 alert("You selected: " + e.target.value);
             }}