Passing in additional headless ui props and updated documentation (#232)

Author: bmulcahy

lib/components/display/modal.jsx

@@ -8,11 +8,19 @@ import {
 import gwMerge from "../../gw-merge";
 import { WIDTH_OPTIONS } from "../../utils/sizes";
 
+const roleOptions = ["dialog", "alertdialog"];
+
 function Modal({
   opened = false,
   onClose,
   dialogTitle,
   dialogDescription,
+  isStatic = false,
+  autoFocus=false,
+  dialogTransition=false,
+  dialogPanelTransition= false,
+  unmount = true,
+  role='dialog',
   buttons,
   size = "2xl",
   className,
@@ -28,11 +36,27 @@ function Modal({
     );
     size = "2xl";
   }
+  
+  // Check if Role exists
+  if (!roleOptions[role]) {
+    console.error(
+      `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}
+      autoFocus={autoFocus}
+      dialogTransition={dialogTransition}
+      unount={unmount}
+      role={role}
       className={gwMerge("gw-relative", "gw-z-[200]", className)}
     >
       <DialogBackdrop className="gw-fixed gw-inset-0 gw-bg-black/30" />
@@ -48,6 +72,7 @@ function Modal({
               "gw-bg-white",
               "gw-p-12",
             )}
+            transition={dialogPanelTransition}
           >
             {dialogTitle && (
               <DialogTitle className="gw-font-bold gw-text-center">

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

@@ -58,6 +58,42 @@ const componentProps = [
     default: "2xl",
     desc: "Size of the modal dialog. Options include: 'sx', 'sm', 'md', 'lg', 'xl', '2xl', '4xl', 'full'.",
   },
+  {
+    name: "isStatic",
+    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:"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:"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: "className",
     type: "string",