From abeebc8086bf449986cbd97e254889a28c257583 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 29 Jul 2025 09:37:41 -0500
Subject: [PATCH 1/7] Formatting of lib dropdown

---
 lib/components/form/dropdown.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/dropdown.jsx b/lib/components/form/dropdown.jsx
index d17898c..c417be6 100644
--- a/lib/components/form/dropdown.jsx
+++ b/lib/components/form/dropdown.jsx
@@ -4,8 +4,8 @@ import gwMerge from "../../gw-merge";
 function Dropdown({
   label,
   options,
-  labelClassName="",
-  className="",
+  labelClassName = "",
+  className = "",
   onChange,
   ...props
 }) {
@@ -16,15 +16,15 @@ function Dropdown({
     );
     return null;
   }
+
   return (
     <>
       <label
         htmlFor={label + "-id"}
-        
         className={gwMerge(
-             'gw-block gw-text-sm gw-font-medium gw-leading-6 gw-text-gray-900',
-             labelClassName
-          )}
+          "gw-block gw-text-sm gw-font-medium gw-leading-6 gw-text-gray-900",
+          labelClassName
+        )}
       >
         {label}
       </label>
@@ -36,8 +36,8 @@ function Dropdown({
           onChange(e);
         }}
         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
+          "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
         )}
         {...props}
         value={selectedValue}

From 2298b77cbddb7bb1d33a021fbee34c3bc2a2ae1a Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 29 Jul 2025 10:07:14 -0500
Subject: [PATCH 2/7] Make the dropdown handle external state management

---
 lib/components/form/dropdown.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/components/form/dropdown.jsx b/lib/components/form/dropdown.jsx
index c417be6..509559b 100644
--- a/lib/components/form/dropdown.jsx
+++ b/lib/components/form/dropdown.jsx
@@ -32,7 +32,8 @@ function Dropdown({
         id={label}
         name={label}
         onChange={(e) => {
-          setSelectedValue(e.target.value);
+          // Control the state if a value is not provided
+          !props?.value && setSelectedValue(e.target.value);
           onChange(e);
         }}
         className={gwMerge(
@@ -40,7 +41,7 @@ function Dropdown({
           className
         )}
         {...props}
-        value={selectedValue}
+        value={props?.value || selectedValue}
       >
         {options}
       </select>

From 2bd330ebab72bed34c00dd3b88748e5b74cc2d95 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 29 Jul 2025 10:07:35 -0500
Subject: [PATCH 3/7] Update the documentation to both use external state
 management and show an example of it

---
 .../documentation/forms/dropdown.jsx          | 62 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/app-pages/documentation/forms/dropdown.jsx b/src/app-pages/documentation/forms/dropdown.jsx
index 5e24931..7907c91 100644
--- a/src/app-pages/documentation/forms/dropdown.jsx
+++ b/src/app-pages/documentation/forms/dropdown.jsx
@@ -1,4 +1,12 @@
-import { UsaceBox, Code, Text, Dropdown } from "../../../../lib";
+import { useState } from "react";
+import {
+  UsaceBox,
+  Code,
+  Text,
+  Dropdown,
+  Divider,
+  Badge,
+} from "../../../../lib";
 import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
 import DocsPage from "../_docs-page";
@@ -66,6 +74,7 @@ const exampleOptions = [
 ];
 
 function DropdownDocs() {
+  const [selectedOption, setSelectedOption] = useState("option1");
   return (
     <DocsPage breadcrumbs={pageBreadcrumbs}>
       <UsaceBox title="Dropdown">
@@ -83,8 +92,10 @@ function DropdownDocs() {
           <div className="gw-w-[50%]">
             <Dropdown
               className={"gw-w-5/6 gw-m-auto"}
+              value={selectedOption}
               onChange={(e) => {
                 alert("You selected: " + e.target.value);
+                setSelectedOption(e.target.value);
               }}
               options={exampleOptions.map((option) => (
                 <option
@@ -135,6 +146,55 @@ function DropdownDocs() {
   export default Component;
   `}
         />
+        <Divider text="Controlling Dropdown State" />
+        <Text>
+          If you want to control the state of the dropdown, you can pass a value
+          prop to the Dropdown component. This will override the internal state
+          management and allow you to control the selected value externally.
+        </Text>
+        <Badge color="blue" className="gw-my-2">
+          If you pass a value prop, you must also handle the onChange.
+        </Badge>
+        <Badge color="yellow" className="gw-my-2 gw-ms-2">
+          The string in the useState is your default value and must be a valid
+          value from your options list.
+        </Badge>
+        <CodeExample
+          code={`import { Dropdown } from "@usace/groundwork";
+function Component() {
+    const [selectedOption, setSelectedOption] = useState("option1"); 
+    const exampleOptions = [
+        { text: "Select Option...", value: null },
+        { text: "Option 1", value: "option1" },
+        { text: "Option 2", value: "option2" },
+        { text: "Option 3", value: "option3" },
+    ];
+    return (
+        <div className="gw-w-[50%]">
+            <Dropdown
+                className={"gw-w-5/6 gw-m-auto"}
+                value={selectedOption}
+                onChange={(e) => {
+                    setSelectedOption(e.target.value);
+                }}
+                options={
+                    exampleOptions.map((option) => (
+                        <option
+                            key={option.value}
+                            value={option.value}
+                            className="gw-pl-2"
+                        >
+                            {option.text}
+                        </option>
+                    ))
+                }
+            />
+        </div>
+    );
+}
+export default Component;`}
+        />
+
         {/* Component props documentation */}
         <div className="gw-font-bold gw-text-lg gw-pt-6">
           Component API - <Code className="gw-p-2">{`<Dropdown />`}</Code>

From cd203ac9aee86e93411c1caaad604e2ae6d33669 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 29 Jul 2025 10:11:23 -0500
Subject: [PATCH 4/7] * Correct variable name. * Add options prop table

---
 .../documentation/forms/dropdown.jsx          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app-pages/documentation/forms/dropdown.jsx b/src/app-pages/documentation/forms/dropdown.jsx
index 7907c91..f6b6157 100644
--- a/src/app-pages/documentation/forms/dropdown.jsx
+++ b/src/app-pages/documentation/forms/dropdown.jsx
@@ -26,7 +26,7 @@ const pageBreadcrumbs = [
   },
 ];
 
-const componentProps_Fieldset = [
+const componentProps_Dropdown = [
   {
     name: "label",
     type: "string",
@@ -66,6 +66,21 @@ const componentProps_Fieldset = [
   },
 ];
 
+const componentProps_Options = [
+  {
+    name: "text",
+    type: "string",
+    default: "undefined",
+    desc: "The text to display in the dropdown option.",
+  },
+  {
+    name: "value",
+    type: "string",
+    default: "undefined",
+    desc: "The value to set when this option is selected.",
+  },
+];
+
 const exampleOptions = [
   { text: "Select Option...", value: null },
   { text: "Option 1", value: "option1" },
@@ -199,7 +214,12 @@ export default Component;`}
         <div className="gw-font-bold gw-text-lg gw-pt-6">
           Component API - <Code className="gw-p-2">{`<Dropdown />`}</Code>
         </div>
-        <PropsTable propsList={componentProps_Fieldset} />
+        <PropsTable propsList={componentProps_Dropdown} />
+        <div className="gw-font-bold gw-text-lg gw-pt-6">
+          Options -{" "}
+          <Code className="gw-p-2">{`const OPTIONS = [{text: "Option 1", "value": "option1"}, ...etc]`}</Code>
+        </div>
+        <PropsTable propsList={componentProps_Options} />
       </UsaceBox>
     </DocsPage>
   );

From f31d6b45b77df778e44c7c14261b980aa0bd54e7 Mon Sep 17 00:00:00 2001
From: Charles Graham SWT <krowven@gmail.com>
Date: Tue, 29 Jul 2025 10:24:33 -0500
Subject: [PATCH 5/7] Add a reference to the select attributes on mdn

---
 src/app-pages/documentation/forms/dropdown.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app-pages/documentation/forms/dropdown.jsx b/src/app-pages/documentation/forms/dropdown.jsx
index f6b6157..0295dcf 100644
--- a/src/app-pages/documentation/forms/dropdown.jsx
+++ b/src/app-pages/documentation/forms/dropdown.jsx
@@ -10,6 +10,7 @@ import {
 import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
 import DocsPage from "../_docs-page";
+import Link from "../../../../lib/components/navigation/link";
 
 const pageBreadcrumbs = [
   {
@@ -62,7 +63,19 @@ const componentProps_Dropdown = [
     name: "<select> attributes",
     type: "passthrough",
     default: "undefined",
-    desc: "Any additional props will be passed through to the <select> tag as attributes.",
+    desc: (
+      <>
+        Any additional props will be passed through to the {`<select>`} tag as
+        attributes.
+        <Link
+          target="_blank"
+          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes"
+          className="gw-text-blue-600 hover:gw-underline gw-block"
+        >
+          Learn more
+        </Link>
+      </>
+    ),
   },
 ];
 

From b5c03dc66ef95eb7c041ba880fc551f9d9751a75 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Mon, 15 Sep 2025 23:09:45 -0500
Subject: [PATCH 6/7] Remove internal state for passed in
 value/defaultValue/props

---
 lib/components/form/dropdown.jsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/dropdown.jsx b/lib/components/form/dropdown.jsx
index 66d4238..c120a44 100644
--- a/lib/components/form/dropdown.jsx
+++ b/lib/components/form/dropdown.jsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import gwMerge from "../../gw-merge";
 
 function Dropdown({
@@ -7,9 +6,10 @@ function Dropdown({
   labelClassName = "",
   className = "",
   onChange,
+  value,
+  defaultValue,
   ...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.`,
@@ -31,17 +31,14 @@ function Dropdown({
       <select
         id={label}
         name={label}
-        onChange={(e) => {
-          // Control the state if a value is not provided
-          !props?.value && 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}
+        defaultValue={defaultValue}
         {...props}
-        value={props?.value || selectedValue}
       >
         {options}
       </select>

From af0f5370a15794e03ebb430f58194596a652c840 Mon Sep 17 00:00:00 2001
From: "Charles Graham, SWT" <charles.r.graham@usace.army.mil>
Date: Mon, 15 Sep 2025 23:10:14 -0500
Subject: [PATCH 7/7] Update docs to reflect explicit value/defaultValue
 options

---
 src/app-pages/documentation/forms/dropdown.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app-pages/documentation/forms/dropdown.jsx b/src/app-pages/documentation/forms/dropdown.jsx
index a1cca9a..5d3238b 100644
--- a/src/app-pages/documentation/forms/dropdown.jsx
+++ b/src/app-pages/documentation/forms/dropdown.jsx
@@ -50,6 +50,18 @@ 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 value of the dropdown.",
+  },
+  {
+    name: "defaultValue",
+    type: "string | number | null",
+    default: "undefined",
+    desc: "The initial value of the dropdown.",
+  },
   {
     name: "<select> attributes",
     type: "passthrough",