goobs-frontend 0.8.2 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "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/Dropdown/index.tsx

@@ -6,70 +6,35 @@ import {
   InputLabel,
   SelectProps,
   FormHelperText,
+  Typography,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-export interface DropdownOption {
+export interface SimpleDropdownOption {
   value: string
-  label: string
 }
 
+export interface ComplexDropdownOption extends SimpleDropdownOption {
+  attribute1?: string
+  attribute2?: string
+}
+
+export type DropdownOption = SimpleDropdownOption | ComplexDropdownOption
+
 export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
-  /**
-   * The label for the dropdown.
-   */
   label: string
-  /**
-   * The options for the dropdown.
-   */
   options: DropdownOption[]
-  /**
-   * The default value for the dropdown.
-   */
   defaultValue?: string
-  /**
-   * The background color of the dropdown.
-   */
   backgroundcolor?: string
-  /**
-   * The outline color of the dropdown.
-   */
   outlinecolor?: string
-  /**
-   * The font color of the dropdown.
-   */
   fontcolor?: string
-  /**
-   * The font color of the dropdown label when shrunk.
-   */
   shrunkfontcolor?: string
-  /**
-   * Callback function triggered when the dropdown value changes.
-   */
   onChange?: SelectProps['onChange']
-  /**
-   * Indicates if the dropdown is in an error state.
-   */
   error?: boolean
-  /**
-   * The helper text to display below the dropdown.
-   */
   helperText?: string
-  /**
-   * The name of the dropdown.
-   */
   name?: string
-  /**
-   * Indicates if the dropdown is required.
-   */
   required?: boolean
-  /**
-   * Callback function triggered when the dropdown loses focus.
-   */
   onBlur?: SelectProps['onBlur']
-  /**
-   * Callback function triggered when the dropdown receives focus.
-   */
   onFocus?: SelectProps['onFocus']
 }
 
@@ -100,9 +65,16 @@ const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
   })
 )
 
-/**
- * Dropdown component built with Material UI.
- */
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+}))
+
+const capitalizeFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 const Dropdown: React.FC<DropdownProps> = ({
   label,
   options,
@@ -139,6 +111,27 @@ const Dropdown: React.FC<DropdownProps> = ({
     onFocus?.(event)
   }
 
+  const renderMenuItem = (option: DropdownOption) => {
+    const label = capitalizeFirstLetter(option.value.replace(/_/g, ' '))
+    if (!('attribute1' in option)) {
+      return (
+        <MenuItem key={option.value} value={option.value}>
+          {label}
+        </MenuItem>
+      )
+    } else {
+      return (
+        <StyledMenuItem key={option.value} value={option.value}>
+          <Typography variant="body1">{label}</Typography>
+          <Typography variant="caption" color="textSecondary">
+            {option.attribute1}
+            {option.attribute2 && ` | ${option.attribute2}`}
+          </Typography>
+        </StyledMenuItem>
+      )
+    }
+  }
+
   return (
     <StyledFormControl
       backgroundcolor={backgroundcolor}
@@ -161,11 +154,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         aria-labelledby={`${name}-label`}
         {...rest}
       >
-        {options.map(option => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-        ))}
+        {options.map(renderMenuItem)}
       </Select>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </StyledFormControl>