goobs-frontend 0.9.10 → 0.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx

@@ -19,7 +19,7 @@ interface ColumnHeaderRowProps {
   // The entire columns array if we need them on mobile
   allColumns: ColumnDef[]
 
-  // The chosen “overflow” column or mobile column
+  // The chosen "overflow" column or mobile column
   selectedOverflowField: string
   setSelectedOverflowField: React.Dispatch<React.SetStateAction<string>>
 }
@@ -77,7 +77,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             boxSizing: 'border-box',
             overflow: 'visible',
             position: 'relative',
-            zIndex: 10,
+            zIndex: 100, // Increased z-index for mobile dropdown
             // If you want no left padding on mobile header as well:
             paddingLeft: 0,
           }}
@@ -93,6 +93,10 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             shrunkfontcolor="black"
             unshrunkfontcolor="black"
             shrunklabelposition="aboveNotch"
+            style={{
+              marginBottom: 0,
+              marginTop: 0,
+            }}
           />
         </TableCell>
       </TableRow>
@@ -133,12 +137,14 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             <TableCell
               key="overflow-header"
               sx={{
-                width: 275,
+                width: 275, // Increased width for dropdown (was 200)
+                minWidth: 275,
                 boxSizing: 'border-box',
                 overflow: 'visible',
                 position: 'relative',
-                zIndex: 10,
+                zIndex: 100, // Increased z-index to ensure dropdown appears above other elements
                 paddingLeft: 0, // <-- remove left padding here
+                height: '55px',
               }}
             >
               <SearchableDropdown
@@ -154,7 +160,11 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
                 inputfontcolor="black"
                 shrunkfontcolor="black"
                 unshrunkfontcolor="black"
-                shrunklabelposition="aboveNotch"
+                shrunklabelposition="onNotch"
+                style={{
+                  marginBottom: 0,
+                  marginTop: 0,
+                }}
               />
             </TableCell>
           )

package/src/components/DataGrid/Table/index.tsx

@@ -52,7 +52,7 @@ function Table({
   })
 
   // Decide which columns to render in the <TableHead /> for desktop.
-  // On mobile, we skip the “__overflow__” approach and just show the single dropdown.
+  // On mobile, we skip the "__overflow__" approach and just show the single dropdown.
   const finalDesktopColumns = !isMobile
     ? overflowDesktopColumns.length > 0
       ? [
@@ -63,16 +63,23 @@ function Table({
     : []
 
   return (
-    // The main wrapper. Key: allow horizontal scroll if table is too wide.
-    <Box sx={{ width: '100%', overflowX: 'auto' }}>
+    // The main wrapper - Using overflowX: 'hidden' to prevent horizontal scrollbar
+    <Box sx={{ width: '100%', overflowX: 'hidden' }}>
       {/* We set the "ref" here so that useComputeTableResize can measure width. */}
-      <TableContainer ref={containerRef} sx={{ overflowX: 'auto' }}>
+      <TableContainer
+        ref={containerRef}
+        sx={{
+          overflowX: 'visible', // Changed from 'auto' to 'visible'
+        }}
+      >
         <MuiTable
           sx={{
-            // Let columns expand to their set widths
+            // Set width to 100% to fit container
+            width: '100%',
+            // Keep tableLayout as 'auto' to respect column widths
             tableLayout: 'auto',
             // Force the table's minimum width to accommodate large columns
-            minWidth: 'fit-content',
+            minWidth: isMobile ? 'auto' : 'fit-content',
           }}
         >
           {/* Table Header */}
@@ -87,7 +94,7 @@ function Table({
               finalDesktopColumns={finalDesktopColumns}
               // Overflow columns (desktop)
               overflowDesktopColumns={overflowDesktopColumns}
-              // Current “selected” column for overflow or mobile
+              // Current "selected" column for overflow or mobile
               selectedOverflowField={selectedOverflowField}
               setSelectedOverflowField={setSelectedOverflowField}
               // The entire columns array so we can present them all on mobile

package/src/components/DataGrid/index.tsx

@@ -93,8 +93,8 @@ function DataGrid({
         flexDirection: 'column',
         // Increase or remove height if you want more vertical space:
         height: 'calc(100vh - 60px)',
-        // The key: allow horizontal scroll so columns with big widths can be scrolled
-        overflow: 'auto',
+        // Add overflow hidden at the DataGrid level to prevent horizontal scrollbars
+        overflow: 'hidden',
         backgroundColor: woad.main,
       }}
     >
@@ -132,12 +132,11 @@ function DataGrid({
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
+          // Ensure this container doesn't create scrollbars
+          overflow: 'hidden',
         }}
       >
-        {/* 
-          This is the actual <Table/> component (not the file).
-          Just leaving it as-is, but inside it we do a horizontal scroll and tableLayout: 'auto'.
-        */}
+        {/* Table component */}
         <Table
           columns={columns}
           rows={visibleRows}

package/src/components/DataGrid/utils/useComputeTableResize.tsx

@@ -86,8 +86,8 @@ export function useComputeTableResize({
         return 60
       }
       const header = col.headerName || col.field
-      // +40 as a buffer for padding, sorting icons, etc.
-      return measureTextWidth(header) + 40
+      // +60 as a larger buffer for padding, sorting icons, etc. to prevent premature overflow
+      return measureTextWidth(header) + 60
     },
     [measureTextWidth]
   )
@@ -102,14 +102,17 @@ export function useComputeTableResize({
     if (!containerRef.current) return
     const containerWidth = containerRef.current.offsetWidth
 
+    // Add a buffer zone to make transitions smoother
+    const COLUMN_TRANSITION_BUFFER = 50 // pixels of buffer
+
     // Only consider columns that are visible
     const visibleCols = columns.filter(
       col => columnVisibility[col.field] !== false
     )
 
     let usedWidth = checkboxSelection ? 50 : 0
-    // ~180 px for the "overflow" column if needed
-    const overflowReservedWidth = showOverflowDropdown ? 180 : 0
+    // Increase overflow column width for better usability (was 180)
+    const overflowReservedWidth = showOverflowDropdown ? 275 : 0
 
     const canFit: ColumnDef[] = []
     let theOverflow: ColumnDef[] = []
@@ -120,28 +123,43 @@ export function useComputeTableResize({
 
       if (col.width != null) {
         // If the developer explicitly set a width, forcibly add to canFit
-        canFit.push(col)
-        usedWidth += needed
-        continue
-      }
-
-      // Otherwise, do the old "fit" check
-      if (usedWidth + needed + overflowReservedWidth <= containerWidth) {
-        canFit.push(col)
-        usedWidth += needed
+        // only if we have enough space with our buffer
+        if (
+          usedWidth +
+            needed +
+            overflowReservedWidth +
+            COLUMN_TRANSITION_BUFFER <=
+          containerWidth
+        ) {
+          canFit.push(col)
+          usedWidth += needed
+        } else {
+          // Not enough space, all remaining columns go to overflow
+          theOverflow = visibleCols.slice(i)
+          break
+        }
       } else {
-        // everything else is overflow
-        theOverflow = visibleCols.slice(i)
-
-        // If we can't fit i-th column, let's see if we can also move
-        // the last fitted column to overflow
-        if (theOverflow.length > 0 && canFit.length > 1) {
-          const lastFitted = canFit.pop()
-          if (lastFitted) {
-            theOverflow = [lastFitted, ...theOverflow]
+        // Standard "does it fit?" check with buffer to prevent flickering/jumping
+        if (
+          usedWidth + needed + overflowReservedWidth <=
+          containerWidth - COLUMN_TRANSITION_BUFFER
+        ) {
+          canFit.push(col)
+          usedWidth += needed
+        } else {
+          // everything else is overflow
+          theOverflow = visibleCols.slice(i)
+
+          // If we can't fit i-th column, let's see if we can also move
+          // the last fitted column to overflow to make more room
+          if (theOverflow.length > 0 && canFit.length > 1) {
+            const lastFitted = canFit.pop()
+            if (lastFitted) {
+              theOverflow = [lastFitted, ...theOverflow]
+            }
           }
+          break
         }
-        break
       }
     }
 

package/src/components/Field/Dropdown/Searchable/index.tsx

@@ -17,6 +17,11 @@ export interface DropdownOption {
   value: string
   attribute1?: string
   attribute2?: string
+  attribute3?: string // New attribute for complex variant
+  attribute4?: string // New attribute for complex variant
+  attribute5?: string // Additional attribute for complex variant
+  attribute6?: string // Additional attribute for complex variant
+  uniqueKey?: string // Add uniqueKey for React key usage
 }
 
 export interface SearchableDropdownProps {
@@ -41,6 +46,8 @@ export interface SearchableDropdownProps {
   width?: string
   // Added style property to allow additional styling (e.g., marginBottom)
   style?: React.CSSProperties
+  // New variant property to determine display style
+  variant?: 'simple' | 'complex'
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -89,6 +96,7 @@ interface StyledAutocompleteProps {
   placeholdercolor?: string
   shrunklabelposition?: 'onNotch' | 'aboveNotch'
   disabled?: boolean
+  variant?: 'simple' | 'complex'
 }
 
 const StyledAutocomplete = styled(
@@ -102,6 +110,7 @@ const StyledAutocomplete = styled(
     placeholdercolor,
     shrunklabelposition,
     disabled,
+    variant,
   } = props
 
   return {
@@ -162,16 +171,22 @@ const StyledAutocomplete = styled(
     '& .MuiAutocomplete-input': {
       padding: '8px 14px',
     },
+    // Improve dropdown menu positioning and styling
     '& .MuiAutocomplete-popper': {
       width: '100% !important',
+      zIndex: 9999, // Ensure high z-index for the popup
       '& .MuiPaper-root': {
         width: '100%',
         marginTop: '4px',
+        maxHeight: '300px', // Increase max height for better usability
+        overflowY: 'auto',
+        boxShadow: '0px 5px 15px rgba(0, 0, 0, 0.2)', // Enhanced shadow
+        border: `1px solid ${black.light}`, // Add border to dropdown container
       },
       '& .MuiAutocomplete-listbox': {
-        padding: '4px 0',
+        padding: '0', // Remove default padding for cleaner lines
         '& .MuiAutocomplete-option': {
-          padding: '8px 14px',
+          padding: variant === 'complex' ? '10px 14px' : '8px 14px',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
@@ -180,6 +195,15 @@ const StyledAutocomplete = styled(
             width: '100%',
             textAlign: 'left',
           },
+          '&:last-child': {
+            borderBottom: 'none', // Remove border from last item to avoid double borders
+          },
+        },
+        '& .MuiAutocomplete-option[aria-selected="true"]': {
+          backgroundColor: `${black.main}08`,
+        },
+        '& .MuiAutocomplete-option:hover': {
+          backgroundColor: `${black.main}15`, // Slightly darker hover state
         },
       },
     },
@@ -210,7 +234,8 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   placeholder,
   disabled = false,
   width,
-  style, // destructure the style prop
+  style,
+  variant = 'simple', // Default to simple variant
 }) => {
   const [value, setValue] = useState<DropdownOption | string | null>(null)
   const [inputValue, setInputValue] = useState('')
@@ -267,7 +292,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
       error={error}
       disabled={disabled}
       width={width}
-      style={style} // pass the style prop here
+      style={style}
     >
       <StyledInputLabel
         id={labelId}
@@ -302,12 +327,16 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
           />
         }
         disablePortal={false}
+        ListboxProps={{
+          style: { maxHeight: '300px', overflowY: 'auto' },
+        }}
         disabled={disabled}
         backgroundcolor={backgroundcolor}
         outlinecolor={outlinecolor}
         fontcolor={fontcolor}
         inputfontcolor={inputfontcolor}
         placeholdercolor={placeholdercolor}
+        variant={variant}
         filterOptions={(opts, state) => {
           const input = state.inputValue.toLowerCase()
           return opts.filter(o => o.value.toLowerCase().includes(input))
@@ -328,45 +357,110 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
           const { key, ...restLiProps } = liProps as {
             key: string
           } & React.HTMLAttributes<HTMLLIElement>
+
+          // Common styles for both variants
+          const liStyle = {
+            color: black.main,
+            padding: variant === 'complex' ? '10px 14px' : '8px 14px',
+            display: 'flex',
+            flexDirection: 'column' as const,
+            alignItems: 'flex-start' as const,
+            gap: variant === 'complex' ? '4px' : '2px',
+            width: '100%',
+            borderBottom: `1px solid ${black.light}`,
+          }
+
+          // Use the uniqueKey prop if available, otherwise fall back to the provided key
+          const optionKey = option.uniqueKey || key
+
           return (
-            <li
-              key={key}
-              {...restLiProps}
-              style={{
-                color: black.main,
-                padding: '8px 14px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                gap: '2px',
-                width: '100%',
-              }}
-            >
+            <li key={optionKey} {...restLiProps} style={liStyle}>
+              {/* Main value - both variants */}
               <Typography
                 fontvariant="merriparagraph"
                 text={option.value.replace(/_/g, ' ')}
                 fontcolor={black.main}
                 sx={{
                   fontSize: '14px',
+                  fontWeight: variant === 'complex' ? '500' : 'normal',
                   lineHeight: '20px',
                   width: '100%',
                   textAlign: 'left',
                 }}
               />
-              {(option.attribute1 || option.attribute2) && (
-                <Typography
-                  fontvariant="merriparagraph"
-                  text={[option.attribute1, option.attribute2]
-                    .filter(Boolean)
-                    .join(' | ')}
-                  fontcolor="rgba(0, 0, 0, 0.6)"
-                  sx={{
-                    fontSize: '12px',
-                    lineHeight: '16px',
-                    width: '100%',
-                    textAlign: 'left',
-                  }}
-                />
+
+              {/* For simple variant - show attribute1 and attribute2 on one line */}
+              {variant === 'simple' &&
+                (option.attribute1 || option.attribute2) && (
+                  <Typography
+                    fontvariant="merriparagraph"
+                    text={[option.attribute1, option.attribute2]
+                      .filter(Boolean)
+                      .join(' | ')}
+                    fontcolor="rgba(0, 0, 0, 0.6)"
+                    sx={{
+                      fontSize: '12px',
+                      lineHeight: '16px',
+                      width: '100%',
+                      textAlign: 'left',
+                    }}
+                  />
+                )}
+
+              {/* For complex variant - show attributes on separate lines */}
+              {variant === 'complex' && (
+                <>
+                  {/* First line of attributes */}
+                  {(option.attribute1 || option.attribute2) && (
+                    <Typography
+                      fontvariant="merriparagraph"
+                      text={[option.attribute1, option.attribute2]
+                        .filter(Boolean)
+                        .join(' | ')}
+                      fontcolor="rgba(0, 0, 0, 0.6)"
+                      sx={{
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        width: '100%',
+                        textAlign: 'left',
+                      }}
+                    />
+                  )}
+
+                  {/* Second line of attributes */}
+                  {(option.attribute3 || option.attribute4) && (
+                    <Typography
+                      fontvariant="merriparagraph"
+                      text={[option.attribute3, option.attribute4]
+                        .filter(Boolean)
+                        .join(' | ')}
+                      fontcolor="rgba(0, 0, 0, 0.6)"
+                      sx={{
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        width: '100%',
+                        textAlign: 'left',
+                      }}
+                    />
+                  )}
+
+                  {/* Third line of attributes */}
+                  {(option.attribute5 || option.attribute6) && (
+                    <Typography
+                      fontvariant="merriparagraph"
+                      text={[option.attribute5, option.attribute6]
+                        .filter(Boolean)
+                        .join(' | ')}
+                      fontcolor="rgba(0, 0, 0, 0.6)"
+                      sx={{
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        width: '100%',
+                        textAlign: 'left',
+                      }}
+                    />
+                  )}
+                </>
               )}
             </li>
           )

package/src/components/Field/Dropdown/Searchable/searchabledropdown.stories.tsx

@@ -16,6 +16,79 @@ const sampleOptions = [
   { value: 'broccoli', attribute1: 'Vegetable', attribute2: 'Green' },
 ]
 
+/**
+ * Sample options with the complex variant attributes
+ */
+const complexSampleOptions = [
+  {
+    value: 'apple',
+    attribute1: 'Fruit',
+    attribute2: 'Green or Red',
+    attribute3: 'High Fiber',
+    attribute4: 'Seasonal: Fall',
+    attribute5: 'Origin: Worldwide',
+    attribute6: 'Storage: Cool, Dry',
+  },
+  {
+    value: 'banana',
+    attribute1: 'Fruit',
+    attribute2: 'Yellow',
+    attribute3: 'High Potassium',
+    attribute4: 'Year-round',
+    attribute5: 'Origin: Tropical',
+    attribute6: 'Storage: Room Temp',
+  },
+  {
+    value: 'carrot',
+    attribute1: 'Vegetable',
+    attribute2: 'Orange',
+    attribute3: 'High Vitamin A',
+    attribute4: 'Year-round',
+    attribute5: 'Origin: Middle East',
+    attribute6: 'Storage: Refrigerated',
+  },
+  {
+    value: 'potato',
+    attribute1: 'Vegetable',
+    attribute2: 'Brown',
+    attribute3: 'High Starch',
+    attribute4: 'Year-round',
+    attribute5: 'Origin: South America',
+    attribute6: 'Storage: Dark, Cool',
+  },
+  {
+    value: 'avocado',
+    attribute1: 'Fruit',
+    attribute2: 'Green',
+    attribute3: 'Healthy Fats',
+    attribute4: 'Seasonal: Spring',
+    attribute5: 'Origin: Mexico',
+    attribute6: 'Storage: Room Temp',
+  },
+  {
+    value: 'broccoli',
+    attribute1: 'Vegetable',
+    attribute2: 'Green',
+    attribute3: 'High Vitamin K',
+    attribute4: 'Seasonal: Winter',
+    attribute5: 'Origin: Mediterranean',
+    attribute6: 'Storage: Refrigerated',
+  },
+]
+
+/**
+ * Helper function to safely access dropdown options in tests
+ */
+const getDropdownOptions = () => {
+  const listboxElement = document.querySelector('[role="listbox"]')
+  if (listboxElement && listboxElement instanceof HTMLElement) {
+    const listbox = within(listboxElement)
+    return listbox.getAllByRole('option')
+  }
+  console.log('Listbox not found')
+  return []
+}
+
 /**
  * Storybook metadata
  */
@@ -34,6 +107,11 @@ const meta: Meta<typeof SearchableDropdown> = {
       control: 'select',
       options: ['onNotch', 'aboveNotch'],
     },
+    variant: {
+      control: 'select',
+      options: ['simple', 'complex'],
+      description: 'Dropdown display variant',
+    },
   },
 }
 export default meta
@@ -49,12 +127,15 @@ export const Basic: Story = {
     label: 'Basic SearchableDropdown',
     options: sampleOptions,
     placeholder: 'Start typing...',
+    variant: 'simple',
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
 
-    // Check for the label
-    expect(canvas.getByText('Basic SearchableDropdown')).toBeInTheDocument()
+    // Check for the label using a more specific query
+    expect(
+      canvas.getByRole('combobox', { name: 'Basic SearchableDropdown' })
+    ).toBeInTheDocument()
 
     // Click into the input
     const input = canvas.getByRole('combobox')
@@ -62,8 +143,15 @@ export const Basic: Story = {
 
     // Type a partial match
     await userEvent.type(input, 'car')
-    // 'carrot' should appear
-    expect(canvas.getByText('carrot')).toBeInTheDocument()
+
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
+
+    // Check if any option contains "carrot"
+    const hasCarrot = listboxItems.some(
+      item => item.textContent && item.textContent.includes('carrot')
+    )
+    expect(hasCarrot).toBe(true)
   },
 }
 
@@ -76,22 +164,23 @@ export const WithDefaultValue: Story = {
     label: 'Dropdown with Default Value',
     options: sampleOptions,
     defaultValue: 'banana',
+    variant: 'simple',
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    // Expect the combobox to show the default item
+    // Expect the combobox to show the default item with first letter capitalized
     const input = canvas.getByRole('combobox')
-    expect(input).toHaveValue('banana')
+    expect(input).toHaveValue('Banana')
   },
 }
 
 /**
- * 3) Options with Complex Attributes
+ * 3) Simple Variant with Attributes
  *    Uses userEvent => keep `async`.
  */
-export const ComplexAttributes: Story = {
+export const SimpleVariant: Story = {
   args: {
-    label: 'Complex Attributes',
+    label: 'Simple Variant',
     options: [
       {
         value: 'item1',
@@ -110,20 +199,151 @@ export const ComplexAttributes: Story = {
       },
     ],
     placeholder: 'Search items...',
+    variant: 'simple',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
+
+    // Check if the items we're looking for exist
+    const hasItem1 = listboxItems.some(
+      item => item.textContent && item.textContent.includes('item1')
+    )
+    const hasItem3 = listboxItems.some(
+      item => item.textContent && item.textContent.includes('item3')
+    )
+
+    expect(hasItem1).toBe(true)
+    expect(hasItem3).toBe(true)
+  },
+}
+
+/**
+ * 4) Complex Variant with Additional Attributes
+ *    Uses userEvent => keep `async`.
+ */
+export const ComplexVariant: Story = {
+  args: {
+    label: 'Complex Variant',
+    options: [
+      {
+        value: 'item1',
+        attribute1: 'Primary attribute #1',
+        attribute2: 'Secondary attribute #1',
+        attribute3: 'Tertiary attribute #1',
+        attribute4: 'Additional info #1',
+        attribute5: 'Extended data #1',
+        attribute6: 'Final info #1',
+      },
+      {
+        value: 'item2',
+        attribute1: 'Primary attribute #2',
+        attribute2: 'Secondary attribute #2',
+        attribute3: 'Tertiary attribute #2',
+        attribute4: 'Additional info #2',
+        attribute5: 'Extended data #2',
+        attribute6: 'Final info #2',
+      },
+      {
+        value: 'item3',
+        attribute1: 'Primary attribute #3',
+        attribute2: 'Secondary attribute #3',
+        attribute3: 'Tertiary attribute #3',
+        attribute4: 'Additional info #3',
+        attribute5: 'Extended data #3',
+        attribute6: 'Final info #3',
+      },
+    ],
+    placeholder: 'Search complex items...',
+    variant: 'complex',
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     // Open the dropdown
     const input = canvas.getByRole('combobox')
     await userEvent.click(input)
-    // item1, item2, item3 should be visible
-    expect(canvas.getByText('item1')).toBeInTheDocument()
-    expect(canvas.getByText('item3')).toBeInTheDocument()
+
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
+
+    // Check if the items and their attributes are present in any of the option items
+    const hasItem1 = listboxItems.some(
+      item => item.textContent && item.textContent.includes('item1')
+    )
+    const hasAttributes = listboxItems.some(
+      item =>
+        item.textContent &&
+        item.textContent.includes('Primary attribute') &&
+        item.textContent.includes('Secondary attribute')
+    )
+    const hasExtendedAttributes = listboxItems.some(
+      item =>
+        item.textContent &&
+        item.textContent.includes('Extended data') &&
+        item.textContent.includes('Final info')
+    )
+
+    expect(hasItem1).toBe(true)
+    expect(hasAttributes).toBe(true)
+    expect(hasExtendedAttributes).toBe(true)
   },
 }
 
 /**
- * 4) Error State
+ * 5) Complex Data Example
+ *    Uses userEvent => keep `async`.
+ */
+export const ComplexDataExample: Story = {
+  args: {
+    label: 'Food Items',
+    options: complexSampleOptions,
+    placeholder: 'Search foods...',
+    variant: 'complex',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+    await userEvent.type(input, 'a')
+
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
+
+    // Check if avocado and its attributes are present
+    const hasAvocado = listboxItems.some(
+      item => item.textContent && item.textContent.includes('avocado')
+    )
+    const hasFruitGreen = listboxItems.some(
+      item =>
+        item.textContent &&
+        item.textContent.includes('Fruit') &&
+        item.textContent.includes('Green')
+    )
+    const hasHealthyFats = listboxItems.some(
+      item => item.textContent && item.textContent.includes('Healthy Fats')
+    )
+    const hasOriginStorage = listboxItems.some(
+      item =>
+        item.textContent &&
+        (item.textContent.includes('Origin: Mexico') ||
+          item.textContent.includes('Storage: Room Temp'))
+    )
+
+    expect(hasAvocado).toBe(true)
+    expect(hasFruitGreen).toBe(true)
+    expect(hasHealthyFats).toBe(true)
+    expect(hasOriginStorage).toBe(true)
+  },
+}
+
+/**
+ * 6) Error State
  *    No user interactions => remove `async`.
  */
 export const ErrorState: Story = {
@@ -132,6 +352,7 @@ export const ErrorState: Story = {
     options: sampleOptions,
     error: true,
     helperText: 'Something went wrong!',
+    variant: 'simple',
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -141,7 +362,7 @@ export const ErrorState: Story = {
 }
 
 /**
- * 5) Required Dropdown
+ * 7) Required Dropdown
  *    No user interactions => remove `async`.
  */
 export const RequiredField: Story = {
@@ -149,16 +370,19 @@ export const RequiredField: Story = {
     label: 'Required Dropdown',
     options: sampleOptions,
     required: true,
+    variant: 'simple',
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    // Check that label is present
-    expect(canvas.getByText('Required Dropdown')).toBeInTheDocument()
+    // Check that label is present with a more specific query
+    expect(
+      canvas.getByRole('combobox', { name: 'Required Dropdown' })
+    ).toBeInTheDocument()
   },
 }
 
 /**
- * 6) Custom Colors
+ * 8) Custom Colors
  *    Uses userEvent => keep `async`.
  */
 export const CustomColors: Story = {
@@ -174,6 +398,35 @@ export const CustomColors: Story = {
     shrunklabelposition: 'onNotch',
     placeholdercolor: '#42a5f5',
     placeholder: 'Enter something...',
+    variant: 'simple',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Interact just to ensure no errors
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+    expect(input).toBeInTheDocument()
+  },
+}
+
+/**
+ * 9) Custom Colors - Complex Variant
+ *    Uses userEvent => keep `async`.
+ */
+export const CustomColorsComplex: Story = {
+  args: {
+    label: 'Custom Colors - Complex',
+    options: complexSampleOptions,
+    backgroundcolor: '#f0f8ff',
+    outlinecolor: '#ff5722',
+    fontcolor: '#4caf50',
+    inputfontcolor: '#e91e63',
+    shrunkfontcolor: '#673ab7',
+    unshrunkfontcolor: '#9c27b0',
+    shrunklabelposition: 'onNotch',
+    placeholdercolor: '#42a5f5',
+    placeholder: 'Enter something...',
+    variant: 'complex',
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -185,7 +438,7 @@ export const CustomColors: Story = {
 }
 
 /**
- * 7) Searching & Selecting
+ * 10) Searching & Selecting
  *    Uses userEvent => keep `async`.
  */
 export const SearchAndSelect: Story = {
@@ -193,6 +446,7 @@ export const SearchAndSelect: Story = {
     label: 'Search & Select',
     options: sampleOptions,
     placeholder: 'Find an item...',
+    variant: 'simple',
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -202,20 +456,28 @@ export const SearchAndSelect: Story = {
     await userEvent.click(input)
     await userEvent.type(input, 'avo')
 
-    // 'avocado' should appear
-    const avocadoOption = canvas.getByText('avocado')
-    expect(avocadoOption).toBeInTheDocument()
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
 
-    // Click the option
-    await userEvent.click(avocadoOption)
+    // Find the avocado option
+    const avocadoOption = listboxItems.find(
+      item => item.textContent && item.textContent.includes('avocado')
+    )
 
-    // Now the combobox value should be "avocado"
-    expect(input).toHaveValue('avocado')
+    expect(avocadoOption).toBeTruthy()
+
+    // Click the option if found
+    if (avocadoOption) {
+      await userEvent.click(avocadoOption)
+
+      // Now the combobox value should be "Avocado" (with capitalization)
+      expect(input).toHaveValue('Avocado')
+    }
   },
 }
 
 /**
- * 8) No Options scenario
+ * 11) No Options scenario
  *    Uses userEvent => keep `async`.
  */
 export const NoOptions: Story = {
@@ -223,6 +485,7 @@ export const NoOptions: Story = {
     label: 'Empty Dropdown',
     options: [],
     placeholder: 'No items available...',
+    variant: 'simple',
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -233,3 +496,87 @@ export const NoOptions: Story = {
     expect(canvas.queryByText('apple')).not.toBeInTheDocument()
   },
 }
+
+/**
+ * 12) Disabled State
+ *    No user interactions => remove `async`.
+ */
+export const DisabledState: Story = {
+  args: {
+    label: 'Disabled Dropdown',
+    options: sampleOptions,
+    placeholder: 'Cannot select',
+    disabled: true,
+    variant: 'simple',
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('combobox')
+    expect(input).toBeDisabled()
+  },
+}
+
+/**
+ * 13) Complex Variant Disabled
+ *    No user interactions => remove `async`.
+ */
+export const ComplexVariantDisabled: Story = {
+  args: {
+    label: 'Complex Variant Disabled',
+    options: complexSampleOptions,
+    placeholder: 'Cannot select',
+    disabled: true,
+    variant: 'complex',
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('combobox')
+    expect(input).toBeDisabled()
+  },
+}
+
+/**
+ * 14) All Attributes Display
+ *    Uses userEvent => keep `async`.
+ */
+export const AllAttributesDisplay: Story = {
+  args: {
+    label: 'All Attributes Display',
+    options: [
+      {
+        value: 'complete item',
+        attribute1: 'First level',
+        attribute2: 'Second level',
+        attribute3: 'Third level',
+        attribute4: 'Fourth level',
+        attribute5: 'Fifth level',
+        attribute6: 'Sixth level',
+      },
+    ],
+    placeholder: 'View all attributes...',
+    variant: 'complex',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // Get dropdown options
+    const listboxItems = getDropdownOptions()
+
+    // Check if all attribute levels are displayed
+    const hasAllLevels = listboxItems.some(
+      item =>
+        item.textContent &&
+        item.textContent.includes('First level') &&
+        item.textContent.includes('Second level') &&
+        item.textContent.includes('Third level') &&
+        item.textContent.includes('Fourth level') &&
+        item.textContent.includes('Fifth level') &&
+        item.textContent.includes('Sixth level')
+    )
+
+    expect(hasAllLevels).toBe(true)
+  },
+}

package/src/components/Toolbar/index.tsx

@@ -48,7 +48,6 @@ const CustomToolbar: FC<CustomToolbarProps> = ({
           flexWrap: 'wrap',
           gap: 2,
           width: '100%',
-          mb: 2,
         }}
       >
         {/* Left half: Buttons + Searchbar */}
@@ -92,7 +91,6 @@ const CustomToolbar: FC<CustomToolbarProps> = ({
           flexWrap: 'wrap',
           gap: 2,
           width: '100%',
-          mb: 2,
         }}
       >
         {/* Left half: Buttons */}

package/src/components/Toolbar/leftCenter/index.tsx

@@ -31,7 +31,7 @@ const LeftCenter: FC<Partial<SearchbarProps>> = props => {
         height: '55px',
       }}
     >
-      <Box sx={{ marginBottom: '10px' }}>
+      <Box sx={{ marginBottom: '7px' }}>
         <Searchbar
           shrunklabelposition={shrunklabelposition}
           shrunkfontcolor={shrunkfontcolor}

package/src/index.ts

@@ -57,14 +57,14 @@ import PasswordField, { PasswordFieldProps } from './components/Field/Password'
 import PhoneNumberField from './components/Field/PhoneNumber'
 import Searchbar, { SearchbarProps } from './components/Field/Search'
 import TextField, { TextFieldProps } from './components/Field/Text'
+import SearchableDropdown, {
+  SearchableDropdownProps,
+  DropdownOption,
+} from './components/Field/Dropdown/Searchable'
 
 // Add FormDataGrid import
 import FormDataGrid from './components/Form/DataGrid'
 import type { FormDataGridProps } from './components/Form/DataGrid'
-import type {
-  SearchableDropdownProps,
-  DropdownOption,
-} from './components/Field/Dropdown/Searchable'
 
 // Animations
 import { Animation } from './components/Content/Structure/animations'
@@ -199,6 +199,7 @@ export type { RawCustomer }
 /*                           Named Type Exports                               */
 /* -------------------------------------------------------------------------- */
 
+export { SearchableDropdown }
 // 1) Form DataGrid
 export type { FormDataGridProps }
 export type { CustomDialogProps }