goobs-frontend 0.7.60 → 0.7.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.60",
+  "version": "0.7.61",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -1,89 +1,42 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { Box, Tabs, styled, Tab } from '@mui/material'
+import { Box, Tabs, Tab } from '@mui/material'
 import { get, set, JSONValue } from 'goobs-cache'
 import { NavProps, SubNav, View } from '../index'
 
-// Define the possible alignment values for the navigation
+/**
+ * Represents the possible alignment options for the horizontal navigation.
+ */
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 
 /**
- * Interface representing the active tab value
+ * Represents the structure of an active tab value.
  */
 export interface ActiveTabValue {
+  /** The unique identifier of the active tab. */
   tabId: string
 }
 
 /**
- * Interface for the props of the HorizontalVariant component
+ * Props for the HorizontalVariant component.
  */
 export interface HorizontalVariantProps {
-  items: (NavProps | SubNav | View)[] // Array of navigation items
-  height?: string // Optional height of the navigation
-  alignment?: Alignment // Optional alignment of the navigation
-  navname?: string // Optional name for the navigation
-}
-
-/**
- * Styled component for the Tab, extending MUI's Tab with custom props
- */
-const StyledTab = styled(Tab, {
-  shouldForwardProp: prop =>
-    prop !== 'height' && prop !== 'hasleftborder' && prop !== 'hasrightborder',
-})<NavProps & { height?: string }>(
-  ({ height = '80px', hasleftborder = 'false', hasrightborder = 'false' }) => ({
-    minHeight: 0,
-    textTransform: 'none',
-    border: 'none',
-    boxSizing: 'border-box',
-    backgroundColor: 'black',
-    color: '#fff',
-    fontWeight: 500,
-    fontFamily: 'Merriweather',
-    fontSize: 16,
-    height: height,
-    '&:hover': {
-      backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    },
-    '& .MuiTouchRipple-root': {
-      color: '#fff',
-    },
-    '&.Mui-selected': {
-      color: '#fff',
-      backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    },
-    '& .MuiSvgIcon-root': {
-      color: '#fff',
-    },
-    ...(hasleftborder === 'true' && {
-      borderLeft: '1px solid white',
-    }),
-    ...(hasrightborder === 'true' && {
-      borderRight: '1px solid white',
-    }),
-  })
-)
-
-/**
- * Styled component for the horizontal navigation container
- */
-const HorizontalNavContainer = styled(Box)<{
+  /** An array of navigation items, sub-navigation items, or views. */
+  items: (NavProps | SubNav | View)[]
+  /** The height of the navigation bar. Defaults to '80px'. */
   height?: string
+  /** The alignment of the navigation items. Defaults to 'left'. */
   alignment?: Alignment
-}>(({ height = '80px', alignment = 'left' }) => ({
-  flexGrow: 1,
-  bgcolor: 'black',
-  display: 'flex',
-  height: height,
-  justifyContent: alignment,
-  paddingLeft: '5px',
-  paddingRight: '5px',
-}))
+  /** A unique name for this navigation component. Used for state management. */
+  navname?: string
+}
 
 /**
- * HorizontalVariant component for rendering a horizontal navigation bar
- * @param {HorizontalVariantProps} props - The props for the component
- * @returns {JSX.Element} The rendered HorizontalVariant component
+ * HorizontalVariant component that renders a horizontal navigation bar.
+ * It supports dynamic tab management, routing, and custom click handlers.
+ *
+ * @param {HorizontalVariantProps} props - The props for the HorizontalVariant component.
+ * @returns {JSX.Element} The rendered HorizontalVariant component.
  */
 function HorizontalVariant({
   items,
@@ -91,13 +44,20 @@ function HorizontalVariant({
   alignment = 'left',
   navname,
 }: HorizontalVariantProps) {
-  // State to store active tab values
+  /**
+   * State to keep track of active tab values for different navigation components.
+   */
   const [activeTabValues, setActiveTabValues] = useState<
     Record<string, ActiveTabValue | null>
   >({})
 
-  // Effect to fetch active tab values from cache on component mount
+  /**
+   * Effect hook to fetch and set the active tab values when the component mounts.
+   */
   useEffect(() => {
+    /**
+     * Asynchronously fetches the active tab values from the cache.
+     */
     const fetchActiveTabValues = async () => {
       const result = await get('activeTabValues', 'client')
       if (result && typeof result === 'object' && 'value' in result) {
@@ -111,9 +71,11 @@ function HorizontalVariant({
   }, [])
 
   /**
-   * Handle tab change event
-   * @param {React.SyntheticEvent} event - The event object
-   * @param {string} newValue - The new value of the selected tab
+   * Handles tab change events.
+   * Updates the active tab values in the state and cache.
+   *
+   * @param {React.SyntheticEvent} event - The event object.
+   * @param {string} newValue - The new value of the selected tab.
    */
   const handleTabChange = async (
     event: React.SyntheticEvent,
@@ -124,7 +86,6 @@ function HorizontalVariant({
       [navname ?? '']: { tabId: newValue },
     }
     setActiveTabValues(updatedActiveTabValues)
-    // Store updated values in cache with 30 minutes expiration
     await set(
       'activeTabValues',
       { type: 'json', value: updatedActiveTabValues } as JSONValue,
@@ -134,8 +95,10 @@ function HorizontalVariant({
   }
 
   /**
-   * Handle tab click event based on the tab's trigger type
-   * @param {NavProps} tab - The tab object that was clicked
+   * Handles click events on individual tabs.
+   * Supports different trigger types: route, onClick, and routeonhorizontal.
+   *
+   * @param {NavProps} tab - The tab object that was clicked.
    */
   const handleTabClick = (tab: NavProps) => {
     if (tab.trigger === 'route') {
@@ -154,9 +117,19 @@ function HorizontalVariant({
   }
 
   return (
-    <HorizontalNavContainer height={height} alignment={alignment}>
+    <Box
+      sx={{
+        flexGrow: 1,
+        bgcolor: 'black',
+        display: 'flex',
+        height: height,
+        justifyContent: alignment,
+        paddingLeft: '5px',
+        paddingRight: '5px',
+      }}
+    >
       <Tabs
-        value={activeTabValues[navname ?? '']?.tabId || false}
+        value={activeTabValues?.[navname ?? '']?.tabId || false}
         onChange={handleTabChange}
         aria-label="nav tabs"
         sx={{
@@ -171,35 +144,56 @@ function HorizontalVariant({
         }}
       >
         {items.map((item: NavProps | SubNav | View) => {
-          // Only render NavProps items as tabs
           if ('orientation' in item) {
             const tab = item as NavProps
             return (
-              <StyledTab
+              <Tab
                 key={tab.title}
                 value={tab.title}
                 label={tab.title}
-                hasleftborder={tab.hasleftborder}
-                hasrightborder={tab.hasrightborder}
-                height={height}
-                orientation={tab.orientation}
+                onClick={() => handleTabClick(tab)}
                 sx={{
+                  minHeight: 0,
+                  textTransform: 'none',
+                  border: 'none',
+                  boxSizing: 'border-box',
+                  backgroundColor: 'black',
+                  color: '#fff',
+                  fontWeight: 500,
+                  fontFamily: 'Merriweather',
+                  fontSize: 16,
+                  height: height,
+                  '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  },
+                  '& .MuiTouchRipple-root': {
+                    color: '#fff',
+                  },
+                  '&.Mui-selected': {
+                    color: '#fff',
+                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                  },
+                  '& .MuiSvgIcon-root': {
+                    color: '#fff',
+                  },
+                  ...(tab.hasleftborder === 'true' && {
+                    borderLeft: '1px solid white',
+                  }),
+                  ...(tab.hasrightborder === 'true' && {
+                    borderRight: '1px solid white',
+                  }),
                   width: 'auto',
                   justifyContent: 'center',
                   alignItems: 'center',
                   px: 4,
                 }}
-                onClick={() => handleTabClick(tab)}
-                title={tab.title}
-                route={tab.route}
-                navname={tab.navname}
               />
             )
           }
           return null
         })}
       </Tabs>
-    </HorizontalNavContainer>
+    </Box>
   )
 }
 

package/src/components/Nav/VerticalVariant/index.tsx

@@ -25,23 +25,47 @@ import {
 } from '../../../styles/palette'
 import { Typography } from './../../Typography'
 
+/**
+ * Props for the VerticalVariant component.
+ */
 export interface VerticalVariantProps {
+  /** An array of navigation items, sub-navigation items, or views. */
   items: (NavProps | SubNav | View)[]
+  /** Determines whether to show the search bar. */
   showSearchbar: boolean
+  /** Determines whether to show the dropdown. */
   showDropdown: boolean
+  /** Determines whether to show the title. */
   showTitle: boolean
+  /** Determines whether to show a divider line. */
   showLine: boolean
+  /** The title of the vertical navigation. */
   verticalNavTitle: string
+  /** The label for the dropdown. */
   dropdownLabel: string
+  /** The label for the search bar. */
   searchbarLabel: string
+  /** The anchor position of the drawer ('left' or 'right'). */
   anchor: 'left' | 'right'
+  /** An array of expanded navigation items. */
   expandedNavs: string[]
+  /** Function to set the expanded navigation items. */
   setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
+  /** An array of expanded sub-navigation items. */
   expandedSubnavs: string[]
+  /** Function to set the expanded sub-navigation items. */
   setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
+  /** The width of the vertical navigation drawer. */
   verticalNavWidth: string
 }
 
+/**
+ * VerticalVariant component that renders a vertical navigation drawer.
+ * It supports nested navigation items, sub-navigation items, and views.
+ *
+ * @param {VerticalVariantProps} props - The props for the VerticalVariant component.
+ * @returns {JSX.Element} The rendered VerticalVariant component.
+ */
 function VerticalVariant({
   items,
   showSearchbar,
@@ -60,10 +84,19 @@ function VerticalVariant({
 }: VerticalVariantProps) {
   const router = useRouter()
 
+  /**
+   * Extracts navigation options from the items array.
+   */
   const navOptions = items
     .filter((item): item is NavProps => 'title' in item && 'subnavs' in item)
     .map(nav => nav.title ?? '')
 
+  /**
+   * Handles click events on navigation items.
+   * Supports different trigger types: route and onClick.
+   *
+   * @param {NavProps} nav - The navigation item that was clicked.
+   */
   const handleNavClick = (nav: NavProps) => {
     console.log('Clicked Nav:', nav.title)
     if (nav.trigger === 'route') {
@@ -77,6 +110,14 @@ function VerticalVariant({
     }
   }
 
+  /**
+   * Recursively renders navigation items, sub-navigation items, and views.
+   *
+   * @param {NavProps | SubNav | View} item - The item to render.
+   * @param {number} level - The nesting level of the item.
+   * @param {string} [activeAndHoverColor] - The color to use for active and hover states.
+   * @returns {JSX.Element | null} The rendered item or null if the item type is not recognized.
+   */
   const renderItem = (
     item: NavProps | SubNav | View,
     level: number,

package/src/components/PricingTable/defaultconfig.tsx

@@ -12,7 +12,6 @@ const defaultConfig: PricingProps = {
     gridname: 'pricingtableheader',
     alignment: 'center' as Alignment,
     margintop: 1,
-    marginbottom: 0,
     gridwidth: '100%',
   },
   // Configuration for the table title
@@ -23,15 +22,11 @@ const defaultConfig: PricingProps = {
       column: 1,
       gridname: 'pricingtableheader',
       alignment: 'left' as Alignment,
-      marginleft: 1,
+      marginleft: 3,
+      marginbottom: 1,
       mobilewidth: '100%',
       tabletwidth: '100%',
       computerwidth: '100%',
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for package columns
@@ -41,16 +36,9 @@ const defaultConfig: PricingProps = {
       column: 2,
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      marginleft: 1,
-      marginbottom: 1,
       mobilewidth: '80%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
+      tabletwidth: '48%',
+      computerwidth: '48%',
     },
   },
   // Configuration for monthly pricing
@@ -60,15 +48,10 @@ const defaultConfig: PricingProps = {
       row: 2,
       column: 1,
       mobilewidth: '100%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
+      tabletwidth: '48%',
+      computerwidth: '48%',
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for annual pricing
@@ -78,15 +61,10 @@ const defaultConfig: PricingProps = {
       row: 2,
       column: 2,
       mobilewidth: '100%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
+      tabletwidth: '48%',
+      computerwidth: '48%',
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for the feature grid
@@ -105,15 +83,10 @@ const defaultConfig: PricingProps = {
         row: 1,
         column: 1,
         mobilewidth: '80%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        tabletwidth: '48%',
+        computerwidth: '48%',
         gridname: 'pricingtablefeatures',
         alignment: 'left' as Alignment,
-        marginleft: 1,
-        cellconfig: {
-          border: 'solid',
-          minHeight: '40px',
-        },
       },
       tiedtopackage: {
         tiedtopackages: 'true',
@@ -121,34 +94,24 @@ const defaultConfig: PricingProps = {
           row: 1,
           column: 2,
           mobilewidth: '20%',
-          tabletwidth: '50%',
-          computerwidth: '50%',
+          tabletwidth: '48%',
+          computerwidth: '48%',
           gridname: 'pricingtablefeatures',
           alignment: 'center' as Alignment,
-          cellconfig: {
-            border: 'solid',
-            minHeight: '40px',
-          },
         },
       },
       subfeatures: [
         {
           title: 'Pricing Table',
-          titlelink: '',
           infopopuptext: 'Pricing table subfeature info',
           columnconfig: {
             row: 2,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -156,14 +119,10 @@ const defaultConfig: PricingProps = {
               row: 2,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -175,15 +134,10 @@ const defaultConfig: PricingProps = {
             row: 3,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -191,14 +145,10 @@ const defaultConfig: PricingProps = {
               row: 3,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -211,15 +161,10 @@ const defaultConfig: PricingProps = {
         row: 4,
         column: 1,
         mobilewidth: '80%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        tabletwidth: '48%',
+        computerwidth: '48%',
         gridname: 'pricingtablefeatures',
         alignment: 'left' as Alignment,
-        marginleft: 1,
-        cellconfig: {
-          border: 'solid',
-          minHeight: '40px',
-        },
       },
       tiedtopackage: {
         tiedtopackages: 'true',
@@ -227,14 +172,10 @@ const defaultConfig: PricingProps = {
           row: 4,
           column: 2,
           mobilewidth: '20%',
-          tabletwidth: '50%',
-          computerwidth: '50%',
+          tabletwidth: '48%',
+          computerwidth: '48%',
           gridname: 'pricingtablefeatures',
           alignment: 'center' as Alignment,
-          cellconfig: {
-            border: 'solid',
-            minHeight: '40px',
-          },
         },
       },
       subfeatures: [
@@ -247,14 +188,9 @@ const defaultConfig: PricingProps = {
             column: 1,
             mobilewidth: '80%',
             tabletwidth: '50%',
-            computerwidth: '50%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -262,14 +198,10 @@ const defaultConfig: PricingProps = {
               row: 5,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -281,15 +213,10 @@ const defaultConfig: PricingProps = {
             row: 6,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -297,14 +224,10 @@ const defaultConfig: PricingProps = {
               row: 6,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -319,15 +242,12 @@ const defaultConfig: PricingProps = {
       row: 7,
       column: 2,
       mobilewidth: '100%',
-      tabletwidth: '50%',
-      computerwidth: '50%',
+      marginbottom: 1,
+      marginright: 1,
+      tabletwidth: '100%',
+      computerwidth: '48%',
       gridname: 'pricingtablefeatures',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '50px',
-        width: '50%',
-      },
     },
   },
 }

package/src/components/PricingTable/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useState } from 'react'
+import React from 'react'
 import { Box, Paper } from '@mui/material'
 import InfoIcon from '@mui/icons-material/Info'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
@@ -87,9 +87,6 @@ const PricingTable: React.FC<PricingProps> = props => {
   // Merge default config with provided props
   const config: PricingProps = { ...defaultConfig, ...props }
 
-  // State for selected package
-  const [selectedPackage] = useState<string>('goobs-frontend-unlimited')
-
   const router = useRouter()
 
   /**
@@ -125,10 +122,10 @@ const PricingTable: React.FC<PricingProps> = props => {
             shrunklabellocation="above"
             componentvariant="dropdown"
             shrunkfontcolor={black.main}
-            value={selectedPackage}
             outlinecolor={black.main}
             backgroundcolor={semiTransparentBlack.main}
-            options={['ThothOS']}
+            defaultOption="ThothOS"
+            options={['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise']}
           />
         ),
       })
@@ -142,7 +139,7 @@ const PricingTable: React.FC<PricingProps> = props => {
           <Typography
             text={config.monthlyprice.prices}
             fontcolor={black.main}
-            fontvariant="merrih6"
+            fontvariant="merrih5"
           />
         ),
       })
@@ -156,7 +153,7 @@ const PricingTable: React.FC<PricingProps> = props => {
           <Typography
             text={config.annualprice.annualprices}
             fontcolor={black.main}
-            fontvariant="merrih6"
+            fontvariant="merrih5"
           />
         ),
       })
@@ -203,7 +200,6 @@ const PricingTable: React.FC<PricingProps> = props => {
         const tiedConfig: columnconfig = {
           ...feature.tiedtopackage.columnconfig,
           cellconfig: {
-            border: 'solid',
             minHeight: '40px',
           },
           component: feature.tiedtopackage.tiedtopackages ? (
@@ -225,7 +221,7 @@ const PricingTable: React.FC<PricingProps> = props => {
                 <Typography
                   text={subFeature.title}
                   fontcolor={black.main}
-                  fontvariant="merrih6"
+                  fontvariant="merriparagraph"
                   noWrap
                 />
                 {subFeature.infopopuptext && (
@@ -252,7 +248,6 @@ const PricingTable: React.FC<PricingProps> = props => {
           const tiedConfig: columnconfig = {
             ...subFeature.tiedtopackage.columnconfig,
             cellconfig: {
-              border: 'solid',
               minHeight: '40px',
             },
             component: subFeature.tiedtopackage.tiedtopackages ? (
@@ -281,6 +276,7 @@ const PricingTable: React.FC<PricingProps> = props => {
             fontcolor={white.main}
             backgroundcolor={black.main}
             href={buttonLink}
+            width="100%"
             onClick={() => router.push(buttonLink)}
             text={config.buttoncolumns.buttontexts}
           />

package/src/components/StyledComponent/hooks/useDropdown.tsx

@@ -22,7 +22,8 @@ export const useDropdown = (
   const [filteredOptions, setFilteredOptions] = useState<string[]>([])
   const [selectedOption, setSelectedOption] = useState('')
   const [isDropdownFocused, setIsDropdownFocused] = useState(false)
-  const { componentvariant, options, value } = props
+
+  const { componentvariant, options, value, defaultOption } = props
 
   useEffect(() => {
     if (componentvariant === 'dropdown' && options) {
@@ -33,15 +34,19 @@ export const useDropdown = (
   useEffect(() => {
     if (value !== undefined) {
       setSelectedOption(value)
+    } else if (defaultOption !== undefined) {
+      setSelectedOption(defaultOption)
+    } else if (options && options.length > 0) {
+      setSelectedOption(options[0])
     }
-  }, [value])
+  }, [value, defaultOption, options])
 
   const handleDropdownClick = useCallback(() => {
     if (componentvariant === 'dropdown') {
       setAnchorEl(inputBoxRef.current)
-      setIsDropdownOpen(!isDropdownOpen)
+      setIsDropdownOpen(prev => !prev)
     }
-  }, [componentvariant, inputBoxRef, isDropdownOpen])
+  }, [componentvariant, inputBoxRef])
 
   const handleOptionSelect = useCallback((option: string) => {
     setSelectedOption(option)
@@ -57,11 +62,7 @@ export const useDropdown = (
     [componentvariant]
   )
 
-  if (componentvariant !== 'dropdown') {
-    return {}
-  }
-
-  const renderMenu = anchorEl !== null && isDropdownOpen !== undefined && (
+  const renderMenu = (
     <Menu
       anchorEl={anchorEl}
       open={isDropdownOpen}
@@ -77,12 +78,13 @@ export const useDropdown = (
           <StyledSelectMenu
             key={option}
             onClick={() => handleOptionSelect(option)}
+            selected={option === selectedOption}
           >
             {option}
           </StyledSelectMenu>
         ))
       ) : (
-        <div>No Options Found</div>
+        <MenuItem disabled>No Options Found</MenuItem>
       )}
     </Menu>
   )

package/src/components/StyledComponent/index.tsx

@@ -47,6 +47,7 @@ export interface StyledComponentProps {
     | 'date'
     | 'splitbutton'
   options?: readonly string[]
+  defaultOption?: string
   helperfooter?: HelperFooterMessage
   placeholder?: string
   minRows?: number
@@ -112,14 +113,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     'aria-describedby': ariaDescribedBy,
   } = props
 
-  console.log('StyledComponent: Initializing with props', {
-    name,
-    label,
-    required,
-    formname,
-    formSubmitted,
-  })
-
   const { validateField, validateRequiredField, helperFooterValue } =
     useHelperFooter()
   const [isFocused, setIsFocused] = useState(false)
@@ -128,8 +121,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   const inputRefInternal = useRef<HTMLInputElement>(null)
   const inputBoxRef = useRef<HTMLDivElement>(null)
 
-  // Custom hooks
-  const { renderMenu, selectedOption, isDropdownOpen } = useDropdown(
+  const { renderMenu, selectedOption, handleDropdownClick } = useDropdown(
     props,
     inputBoxRef
   )
@@ -141,7 +133,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     handleDecrement,
   } = useSplitButton(props)
 
-  // useEffect hooks
   useHasInputEffect(value, valuestatus, setHasInput)
   usePreventAutocompleteEffect(inputRefInternal)
 
@@ -160,24 +151,13 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   }, [formSubmitted, hasInput])
 
   const currentHelperFooter = name ? helperFooterValue[name] : undefined
-  console.log('StyledComponent: Current helper footer', currentHelperFooter)
 
-  /**
-   * Handle the change event of the input element.
-   * @param e The change event.
-   */
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    console.log('StyledComponent: handleChange called', {
-      name: e.target.name,
-      value: e.target.value,
-    })
-
     if (componentvariant === 'phonenumber') {
       handlePhoneNumberChange(e)
     } else if (componentvariant === 'splitbutton') {
-      // Only allow numbers for splitbutton
       const numValue = e.target.value.replace(/[^0-9]/g, '')
       e.target.value = numValue
     }
@@ -187,37 +167,17 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     const formData = new FormData()
     formData.append(e.target.name, e.target.value)
     if (name && label && formname) {
-      console.log('StyledComponent: Calling validateField', {
-        name,
-        label,
-        required,
-        formname,
-      })
       validateField(name, formData, label, required, formname)
     }
   }
 
-  /**
-   * Handle the focus event of the input element.
-   */
   const handleFocus = () => {
-    console.log('StyledComponent: handleFocus called')
     setIsFocused(true)
   }
 
-  /**
-   * Handle the blur event of the input element.
-   */
   const handleBlur = () => {
-    console.log('StyledComponent: handleBlur called')
     setIsFocused(false)
     if (name && label && !hasInput && formname) {
-      console.log('StyledComponent: Calling validateField on blur', {
-        name,
-        label,
-        required,
-        formname,
-      })
       const formData = new FormData()
       formData.append(name, '')
       validateField(name, formData, label, required, formname)
@@ -233,9 +193,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     !!label
   const hasPlaceholder = !!placeholder
 
-  /**
-   * Determine if the label should be shrunk based on various conditions.
-   */
   const shouldShrinkLabel =
     isFocused ||
     isDropdownVariant ||
@@ -244,14 +201,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     hasInput ||
     componentvariant === 'phonenumber'
 
-  console.log('StyledComponent: Rendering', {
-    name,
-    showError,
-    hasHelperFooter: !!currentHelperFooter,
-    helperFooterStatus: currentHelperFooter?.status,
-    helperFooterMessage: currentHelperFooter?.statusMessage,
-  })
-
   return (
     <Box
       sx={{
@@ -349,6 +298,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            onClick={isDropdownVariant ? handleDropdownClick : undefined}
             fullWidth
             multiline={componentvariant === 'multilinetextfield'}
             label={label}
@@ -370,7 +320,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
               componentvariant === 'phonenumber'
             }
           />
-          {isDropdownVariant && isDropdownOpen && renderMenu}
+          {isDropdownVariant && renderMenu}
         </Box>
       </Box>
       {showError && currentHelperFooter?.statusMessage && (

package/src/components/StyledComponent/useEffects/index.tsx

@@ -18,7 +18,6 @@ export const useHasInputEffect = (
 ) => {
   useEffect(() => {
     const hasInput = !!value || !!valuestatus
-    console.log('useHasInputEffect: Setting hasInput to', hasInput)
     setHasInput(hasInput)
   }, [value, valuestatus, setHasInput])
 }
@@ -39,16 +38,12 @@ export const usePreventAutocompleteEffect = (
   inputRefInternal: React.RefObject<HTMLInputElement>
 ) => {
   useEffect(() => {
-    console.log('usePreventAutocompleteEffect: Starting effect')
     const input = inputRefInternal.current
     if (input) {
-      console.log('usePreventAutocompleteEffect: Setting input attributes')
       input.setAttribute('autocomplete', 'new-password')
       input.setAttribute('autocorrect', 'off')
       input.setAttribute('autocapitalize', 'none')
       input.setAttribute('spellcheck', 'false')
-    } else {
-      console.log('usePreventAutocompleteEffect: Input ref is null')
     }
   }, [inputRefInternal])
 }