Allow for External Dropdown State Control

lib/components/display/modal.jsx

@@ -16,11 +16,11 @@ function Modal({
   dialogTitle,
   dialogDescription,
   isStatic = false,
-  autoFocus=false,
-  dialogTransition=false,
-  dialogPanelTransition= false,
+  autoFocus = false,
+  dialogTransition = false,
+  dialogPanelTransition = false,
   unmount = true,
-  role='dialog',
+  role = "dialog",
   buttons,
   size = "2xl",
   className,
@@ -36,23 +36,23 @@ function Modal({
     );
     size = "2xl";
   }
-  
+
   // Check if Role exists
   if (!roleOptions.includes(role)) {
     console.error(
-      `Invalid role option for dialog ${role}. Must be one of: 'dialog','alertdialog'`)
-      console.warn(
+      `Invalid role option for dialog ${role}. Must be one of: 'dialog','alertdialog'`,
+    );
+    console.warn(
       `Defaulting to 'dialog' for role of <Modal modalTitle="${dialogTitle}" .../>`,
     );
     role = "dialog";
-
   }
 
   return (
     <Dialog
       open={opened}
       onClose={onClose}
-      static= {isStatic}
+      static={isStatic}
       autoFocus={autoFocus}
       transition={dialogTransition}
       unmount={unmount}

lib/components/form/dropdown.jsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import gwMerge from "../../gw-merge";
 
 function Dropdown({
@@ -7,15 +6,17 @@ 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.`,
     );
     return null;
   }
+
   return (
     <>
       <label
@@ -30,16 +31,14 @@ 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}
+        defaultValue={defaultValue}
         {...props}
-        value={selectedValue}
       >
         {options}
       </select>

src/app-pages/documentation/display/modal.jsx

@@ -60,39 +60,39 @@ const componentProps = [
   },
   {
     name: "isStatic",
-    type:"boolean",
-    default:"false",
-    desc:"Whether the element should ignore the internally managed open/closed state."
+    type: "boolean",
+    default: "false",
+    desc: "Whether the element should ignore the internally managed open/closed state.",
   },
   {
-    name:"autoFocus",
-    type:"boolean",
-    default:"false",
-    desc:"Whether or not the dialog should receive focus when first rendered."
+    name: "autoFocus",
+    type: "boolean",
+    default: "false",
+    desc: "Whether or not the dialog should receive focus when first rendered.",
   },
   {
-    name:"dialogTransition",
-    type:"boolean",
-    default:"false",
-    desc:"Whether the element should render transition attributes like data-closed, data-enter and data-leave."
+    name: "dialogTransition",
+    type: "boolean",
+    default: "false",
+    desc: "Whether the element should render transition attributes like data-closed, data-enter and data-leave.",
   },
   {
-    name:"unmount",
-    type:"boolean",
-    default:"true",
-    desc:"Whether the element should be unmounted or hidden based on the open/closed state."
+    name: "unmount",
+    type: "boolean",
+    default: "true",
+    desc: "Whether the element should be unmounted or hidden based on the open/closed state.",
   },
   {
-    name:"role",
-    type:"string",
-    default:"dialog",
-    desc:"The role to apply to the dialog root element. Options include: 'dialog' , 'alertdialog'"
+    name: "role",
+    type: "string",
+    default: "dialog",
+    desc: "The role to apply to the dialog root element. Options include: 'dialog' , 'alertdialog'",
   },
   {
-    name:"dialogPanelTransition",
-    type:"boolean",
-    default:"false",
-    desc:"Whether the element should render transition attributes like data-closed, data-enter and data-leave."
+    name: "dialogPanelTransition",
+    type: "boolean",
+    default: "false",
+    desc: "Whether the element should render transition attributes like data-closed, data-enter and data-leave.",
   },
   {
     name: "className",

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",