goobs-frontend 0.9.11 → 0.9.12

package/package.json

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

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

@@ -1,17 +1,33 @@
 'use client'
 
-import React, { useState, useEffect, SyntheticEvent } from 'react'
+import React, { useState, useEffect, SyntheticEvent, useRef } from 'react'
 import {
   Autocomplete,
   InputLabel,
   OutlinedInput,
   FormHelperText,
   FormControl,
+  Box,
+  Tabs,
+  Tab,
+  styled as muiStyled,
+  Popper,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { black, white } from '../../../../styles/palette'
 import Typography from '../../../Typography'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import HistoryIcon from '@mui/icons-material/History'
+import SearchIcon from '@mui/icons-material/Search'
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'
+
+// Define a history item type with timestamp
+interface HistoryItem {
+  text: string
+  timestamp: Date
+  // Optional formatted date string for display
+  formattedDate?: string
+}
 
 export interface DropdownOption {
   value: string
@@ -44,10 +60,12 @@ export interface SearchableDropdownProps {
   placeholder?: string
   disabled?: boolean
   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'
+  // Update search history type to support timestamps
+  searchHistory?: HistoryItem[] | string[]
+  onSearch?: (searchTerm: string, timestamp?: Date) => void
+  maxHistoryItems?: number
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -99,6 +117,26 @@ interface StyledAutocompleteProps {
   variant?: 'simple' | 'complex'
 }
 
+// Styled tab component for the dropdown footer
+const StyledTab = muiStyled(Tab)(() => ({
+  minHeight: '36px',
+  fontSize: '12px',
+  padding: '6px 12px',
+  color: black.main,
+  '&.Mui-selected': {
+    color: black.main,
+    fontWeight: 'bold',
+  },
+}))
+
+const StyledTabs = muiStyled(Tabs)(() => ({
+  minHeight: '36px',
+  borderTop: `1px solid ${black.light}`,
+  '& .MuiTabs-indicator': {
+    backgroundColor: black.main,
+  },
+}))
+
 const StyledAutocomplete = styled(
   Autocomplete<DropdownOption, false, false, true>
 )<StyledAutocompleteProps>(props => {
@@ -236,10 +274,138 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   width,
   style,
   variant = 'simple', // Default to simple variant
+  searchHistory = [], // Default to empty array
+  onSearch,
+  maxHistoryItems = 5, // Default to showing 5 history items
 }) => {
   const [value, setValue] = useState<DropdownOption | string | null>(null)
   const [inputValue, setInputValue] = useState('')
   const [isFocused, setIsFocused] = useState(false)
+  // Update local history state to support timestamps
+  const [localHistory, setLocalHistory] = useState<HistoryItem[]>([])
+
+  // Add state for active tab - 0 for All Options, 1 for History
+  const [activeTab, setActiveTab] = useState<number>(0)
+
+  // Use ref to track if we've done initial history setup to avoid loops
+  const initializedRef = React.useRef(false)
+
+  // Always use controlled open state
+  const [isOpen, setIsOpen] = useState(false)
+
+  // Reference to the tab container
+  const tabsRef = useRef<HTMLDivElement | null>(null)
+
+  // Ref for the input/autocomplete
+  const autocompleteRef = useRef<HTMLDivElement>(null)
+
+  // Use enhanced effect to handle tab clicks without closing dropdown
+  useEnhancedEffect(() => {
+    // If tabs aren't mounted yet, do nothing
+    if (!tabsRef.current) return
+
+    const tabsElement = tabsRef.current
+
+    // Prevent any click inside the tabs from bubbling up
+    const preventClose = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    // Add click handler to the tabs element
+    tabsElement.addEventListener('mousedown', preventClose, true)
+    tabsElement.addEventListener('click', preventClose, true)
+
+    // Cleanup
+    return () => {
+      tabsElement.removeEventListener('mousedown', preventClose, true)
+      tabsElement.removeEventListener('click', preventClose, true)
+    }
+  }, [tabsRef.current])
+
+  // Function to format date for display
+  const formatDate = (date: Date): string => {
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+
+    // If less than a minute ago
+    if (diff < 60 * 1000) {
+      return 'Just now'
+    }
+
+    // If less than an hour ago
+    if (diff < 60 * 60 * 1000) {
+      const minutes = Math.floor(diff / (60 * 1000))
+      return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
+    }
+
+    // If less than a day ago
+    if (diff < 24 * 60 * 60 * 1000) {
+      const hours = Math.floor(diff / (60 * 60 * 1000))
+      return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
+    }
+
+    // If less than a week ago
+    if (diff < 7 * 24 * 60 * 60 * 1000) {
+      const days = Math.floor(diff / (24 * 60 * 60 * 1000))
+      return `${days} ${days === 1 ? 'day' : 'days'} ago`
+    }
+
+    // Otherwise, format as date
+    return date.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+
+  // Initialize history with timestamps if using simple strings
+  useEffect(() => {
+    if (!initializedRef.current && searchHistory && searchHistory.length > 0) {
+      // Check if searchHistory items are strings or already HistoryItems
+      if (typeof searchHistory[0] === 'string') {
+        const historyWithTimestamps = (searchHistory as string[]).map(
+          (text, index) => {
+            // Create timestamps with slight variations so older items are truly older
+            const timestamp = new Date()
+            timestamp.setMinutes(timestamp.getMinutes() - (index + 1))
+
+            return {
+              text,
+              timestamp,
+              formattedDate: formatDate(timestamp),
+            }
+          }
+        )
+        setLocalHistory(historyWithTimestamps)
+      } else {
+        // Already the right format, just update formatted dates
+        const formattedHistory = (searchHistory as HistoryItem[]).map(item => ({
+          ...item,
+          formattedDate: formatDate(item.timestamp),
+        }))
+        setLocalHistory(formattedHistory)
+      }
+
+      initializedRef.current = true
+    }
+  }, [searchHistory])
+
+  // Refresh formatted dates every minute for "minutes ago" style timestamps
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (localHistory.length > 0) {
+        setLocalHistory(prev =>
+          prev.map(item => ({
+            ...item,
+            formattedDate: formatDate(item.timestamp),
+          }))
+        )
+      }
+    }, 60000) // Update every minute
+
+    return () => clearInterval(intervalId)
+  }, [localHistory.length])
 
   useEffect(() => {
     const defaultOption = options.find(option => option.value === defaultValue)
@@ -260,6 +426,26 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
       setValue(newValue)
       setInputValue(newValue)
       onChange?.(null)
+
+      // Add to search history if it's a string input
+      if (newValue.trim()) {
+        const now = new Date()
+
+        if (onSearch) {
+          onSearch(newValue.trim(), now)
+        } else {
+          // Only update local history if we're not using onSearch callback
+          setLocalHistory(prev => {
+            const newItem = {
+              text: newValue.trim(),
+              timestamp: now,
+              formattedDate: formatDate(now),
+            }
+            const filteredPrev = prev.filter(h => h.text !== newItem.text)
+            return [newItem, ...filteredPrev].slice(0, maxHistoryItems)
+          })
+        }
+      }
     } else {
       setValue(newValue)
       if (newValue) {
@@ -268,6 +454,24 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
           newValue.value.replace(/_/g, ' ').slice(1)
         setInputValue(displayText)
         onChange?.(newValue)
+
+        // Add to search history
+        const now = new Date()
+
+        if (onSearch) {
+          onSearch(displayText, now)
+        } else if (newValue.value.trim()) {
+          // Only update local history if we're not using onSearch callback
+          setLocalHistory(prev => {
+            const newItem = {
+              text: displayText,
+              timestamp: now,
+              formattedDate: formatDate(now),
+            }
+            const filteredPrev = prev.filter(h => h.text !== newItem.text)
+            return [newItem, ...filteredPrev].slice(0, maxHistoryItems)
+          })
+        }
       } else {
         setInputValue('')
         onChange?.(null)
@@ -275,6 +479,34 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     }
   }
 
+  // Handler for when the input is submitted (e.g., Enter key)
+  const handleInputSubmit = () => {
+    if (inputValue.trim()) {
+      const now = new Date()
+
+      if (onSearch) {
+        onSearch(inputValue.trim(), now)
+      } else {
+        // Only update local history if we're not using onSearch callback
+        setLocalHistory(prev => {
+          const newItem = {
+            text: inputValue.trim(),
+            timestamp: now,
+            formattedDate: formatDate(now),
+          }
+          const filteredPrev = prev.filter(h => h.text !== newItem.text)
+          return [newItem, ...filteredPrev].slice(0, maxHistoryItems)
+        })
+      }
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleInputSubmit()
+    }
+  }
+
   const handleFocus = () => {
     setIsFocused(true)
   }
@@ -283,10 +515,238 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     if (!value && !inputValue) {
       setIsFocused(false)
     }
+    // Save search when blurring
+    if (inputValue.trim()) {
+      handleInputSubmit()
+    }
+  }
+
+  // Function to handle tab change
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    // Set tab value
+    setActiveTab(newValue)
+
+    // Keep the dropdown open when switching tabs
+    setIsOpen(true)
+
+    // Prevent any bubbling that might close the dropdown
+    _event.preventDefault()
+    _event.stopPropagation()
   }
 
   const labelId = `${name}-label`
 
+  // Use a combined history that prioritizes prop history when available but falls back to local history
+  const combinedHistory = React.useMemo(() => {
+    if (searchHistory?.length) {
+      // Convert string[] to HistoryItem[] if needed
+      if (typeof searchHistory[0] === 'string') {
+        return (searchHistory as string[]).map((text, index) => {
+          // Create timestamps with slight variations
+          const timestamp = new Date()
+          timestamp.setMinutes(timestamp.getMinutes() - (index + 1))
+
+          return {
+            text,
+            timestamp,
+            formattedDate: formatDate(timestamp),
+          }
+        })
+      }
+
+      // Already HistoryItem[] format
+      return searchHistory as HistoryItem[]
+    }
+
+    return localHistory
+  }, [searchHistory, localHistory])
+
+  // Create a combined options array based on active tab and input value
+  const getFilteredOptions = React.useCallback(() => {
+    const currentInputVal = inputValue.trim()
+
+    // HISTORY TAB
+    if (activeTab === 1) {
+      if (combinedHistory.length === 0) {
+        // Show a placeholder message if no history
+        return [
+          {
+            value: 'No search history',
+            uniqueKey: 'no-history',
+            attribute1: 'Try searching for something first',
+          },
+        ]
+      }
+
+      // Map history items to dropdown options
+      return combinedHistory.map(item => {
+        // Check if this history item matches any of the original options
+        const matchingOption = options.find(
+          opt =>
+            opt.value.toLowerCase() === item.text.toLowerCase() ||
+            (
+              opt.value.replace(/_/g, ' ').charAt(0).toUpperCase() +
+              opt.value.replace(/_/g, ' ').slice(1)
+            ).toLowerCase() === item.text.toLowerCase()
+        )
+
+        if (matchingOption) {
+          // If we have a matching original option, use its attributes
+          return {
+            value: item.text,
+            uniqueKey: `history-${item.text}`,
+            attribute1: 'Search History',
+            attribute2: item.formattedDate || formatDate(item.timestamp),
+            attribute3: matchingOption.attribute1,
+            attribute4: matchingOption.attribute2,
+            attribute5: matchingOption.attribute3,
+            attribute6: matchingOption.attribute4,
+          }
+        } else {
+          // Otherwise just use the basic history item with timestamp
+          return {
+            value: item.text,
+            uniqueKey: `history-${item.text}`,
+            attribute1: 'Search History',
+            attribute2: item.formattedDate || formatDate(item.timestamp),
+          }
+        }
+      })
+    }
+
+    // ALL OPTIONS TAB (activeTab === 0)
+    // If input is empty, return all options
+    if (!currentInputVal) {
+      return options
+    }
+
+    // Filter options based on current input
+    const filteredOpts = options.filter(opt =>
+      opt.value.toLowerCase().includes(currentInputVal.toLowerCase())
+    )
+
+    // If no matches found, add the current input as a custom option
+    if (filteredOpts.length === 0) {
+      return [
+        {
+          value: currentInputVal,
+          uniqueKey: `current-${currentInputVal}`,
+          attribute1: 'Search',
+        },
+      ]
+    }
+
+    // Check if the input exactly matches any option
+    const exactMatch = filteredOpts.some(
+      opt => opt.value.toLowerCase() === currentInputVal.toLowerCase()
+    )
+
+    // If no exact match, add the current input as the first option
+    if (!exactMatch) {
+      return [
+        {
+          value: currentInputVal,
+          uniqueKey: `current-${currentInputVal}`,
+          attribute1: 'Search',
+        },
+        ...filteredOpts,
+      ]
+    }
+
+    return filteredOpts
+  }, [inputValue, combinedHistory, options, activeTab])
+
+  // Create the footer component for the dropdown with tabs
+  const ListboxFooter = React.forwardRef<HTMLDivElement>((_, ref) => (
+    <Box
+      ref={(node: HTMLDivElement | null) => {
+        // Set both refs
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(node)
+          } else {
+            ref.current = node
+          }
+        }
+        tabsRef.current = node
+      }}
+      sx={{
+        position: 'sticky',
+        bottom: 0,
+        backgroundColor: white.main,
+        zIndex: 2,
+        borderTop: `1px solid ${black.light}`,
+      }}
+      onClick={e => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      onMouseDown={e => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <StyledTabs
+        value={activeTab}
+        onChange={handleTabChange}
+        centered
+        sx={{
+          pointerEvents: 'all',
+        }}
+      >
+        <StyledTab
+          icon={<SearchIcon fontSize="small" />}
+          label="ALL OPTIONS"
+          iconPosition="start"
+          sx={{
+            pointerEvents: 'all',
+          }}
+        />
+        <StyledTab
+          icon={<HistoryIcon fontSize="small" />}
+          label="HISTORY"
+          iconPosition="start"
+          sx={{
+            pointerEvents: 'all',
+          }}
+        />
+      </StyledTabs>
+    </Box>
+  ))
+
+  // Add display name to ListboxFooter
+  ListboxFooter.displayName = 'ListboxFooter'
+
+  // Custom Listbox component that adds the footer
+  const CustomListbox = React.forwardRef<
+    HTMLElement,
+    React.HTMLAttributes<HTMLElement>
+  >((props, ref) => {
+    const { children, ...other } = props
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        onClick={e => {
+          e.stopPropagation()
+          return false
+        }}
+        style={{ pointerEvents: 'auto' }}
+      >
+        <ul {...other}>{children}</ul>
+        <ListboxFooter />
+      </div>
+    )
+  })
+
+  // Add display name to CustomListbox
+  CustomListbox.displayName = 'CustomListbox'
+
+  // Memoize the filtered options to prevent recreation on every render
+  const filteredOptions = React.useMemo(
+    () => getFilteredOptions(),
+    [getFilteredOptions]
+  )
+
   return (
     <StyledFormControl
       error={error}
@@ -308,7 +768,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
       </StyledInputLabel>
       <StyledAutocomplete
         id={name}
-        options={options}
+        options={filteredOptions}
         freeSolo
         value={value}
         onChange={handleChange}
@@ -321,6 +781,18 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
         onFocus={handleFocus}
         onBlur={handleBlur}
         forcePopupIcon
+        open={isOpen}
+        onOpen={() => {
+          setIsOpen(true)
+        }}
+        onClose={event => {
+          // Don't close when clicking tabs
+          if (tabsRef.current?.contains(event.target as Node)) {
+            return
+          }
+
+          setIsOpen(false)
+        }}
         popupIcon={
           <ArrowDropDownIcon
             sx={{ color: disabled ? 'rgba(0, 0, 0, 0.38)' : black.main }}
@@ -328,8 +800,69 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
         }
         disablePortal={false}
         ListboxProps={{
-          style: { maxHeight: '300px', overflowY: 'auto' },
+          style: {
+            maxHeight: '300px',
+            overflowY: 'auto',
+            pointerEvents: 'all',
+          },
+        }}
+        ListboxComponent={CustomListbox}
+        componentsProps={{
+          popper: {
+            onClick: e => {
+              // Prevent clicks in the popper from closing the dropdown
+              e.stopPropagation()
+            },
+            style: {
+              pointerEvents: 'all',
+              // Ensure clicks inside the popper don't close it
+              inset: '0px auto auto 0px',
+              zIndex: 9999,
+            },
+          },
+          paper: {
+            onClick: e => {
+              // Prevent clicks on the paper from closing the dropdown
+              e.stopPropagation()
+            },
+            style: { pointerEvents: 'all' },
+          },
         }}
+        ref={autocompleteRef}
+        PopperComponent={props => (
+          <Popper
+            {...props}
+            onClick={e => {
+              e.stopPropagation()
+            }}
+            style={{
+              ...props.style,
+              pointerEvents: 'all',
+              zIndex: 9999,
+            }}
+            modifiers={[
+              {
+                name: 'preventOverflow',
+                enabled: true,
+                options: {
+                  altAxis: true,
+                  altBoundary: true,
+                  tether: true,
+                  rootBoundary: 'document',
+                  padding: 8,
+                },
+              },
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, 0],
+                },
+              },
+            ]}
+          >
+            {props.children}
+          </Popper>
+        )}
         disabled={disabled}
         backgroundcolor={backgroundcolor}
         outlinecolor={outlinecolor}
@@ -337,10 +870,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
         inputfontcolor={inputfontcolor}
         placeholdercolor={placeholdercolor}
         variant={variant}
-        filterOptions={(opts, state) => {
-          const input = state.inputValue.toLowerCase()
-          return opts.filter(o => o.value.toLowerCase().includes(input))
-        }}
+        filterOptions={opts => opts} // We're handling filtering ourselves
         getOptionLabel={(option: DropdownOption | string) => {
           if (typeof option === 'string') {
             return option
@@ -373,24 +903,63 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
           // Use the uniqueKey prop if available, otherwise fall back to the provided key
           const optionKey = option.uniqueKey || key
 
+          // Check if this is a history item
+          const isHistoryItem = option.uniqueKey?.startsWith('history-')
+          const isCurrentInput = option.uniqueKey?.startsWith('current-')
+          const isNoHistoryPlaceholder = option.uniqueKey === 'no-history'
+
           return (
             <li key={optionKey} {...restLiProps} style={liStyle}>
               {/* Main value - both variants */}
               <Typography
                 fontvariant="merriparagraph"
-                text={option.value.replace(/_/g, ' ')}
+                text={
+                  isNoHistoryPlaceholder
+                    ? option.value
+                    : isCurrentInput
+                      ? `Search: "${option.value}"`
+                      : isHistoryItem
+                        ? `History: ${option.value.replace(/_/g, ' ')}`
+                        : option.value.replace(/_/g, ' ')
+                }
                 fontcolor={black.main}
                 sx={{
                   fontSize: '14px',
-                  fontWeight: variant === 'complex' ? '500' : 'normal',
+                  fontWeight: isCurrentInput
+                    ? '500'
+                    : isHistoryItem
+                      ? '400'
+                      : variant === 'complex'
+                        ? '500'
+                        : 'normal',
+                  fontStyle: isHistoryItem ? 'italic' : 'normal',
                   lineHeight: '20px',
                   width: '100%',
                   textAlign: 'left',
                 }}
               />
 
+              {/* For history items, show the timestamp */}
+              {isHistoryItem && option.attribute2 && (
+                <Typography
+                  fontvariant="merriparagraph"
+                  text={option.attribute2}
+                  fontcolor="rgba(0, 0, 0, 0.6)"
+                  sx={{
+                    fontSize: '11px',
+                    lineHeight: '14px',
+                    width: '100%',
+                    textAlign: 'left',
+                    fontStyle: 'italic',
+                  }}
+                />
+              )}
+
               {/* For simple variant - show attribute1 and attribute2 on one line */}
               {variant === 'simple' &&
+                !isHistoryItem &&
+                !isCurrentInput &&
+                !isNoHistoryPlaceholder &&
                 (option.attribute1 || option.attribute2) && (
                   <Typography
                     fontvariant="merriparagraph"
@@ -408,26 +977,68 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
                 )}
 
               {/* 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',
-                      }}
-                    />
-                  )}
+              {variant === 'complex' &&
+                !isHistoryItem &&
+                !isCurrentInput &&
+                !isNoHistoryPlaceholder && (
+                  <>
+                    {/* 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',
+                        }}
+                      />
+                    )}
 
-                  {/* Second line of attributes */}
+                    {/* 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',
+                        }}
+                      />
+                    )}
+                  </>
+                )}
+
+              {/* For history items, show additional attributes from original options */}
+              {isHistoryItem && variant === 'complex' && (
+                <>
+                  {/* Show attribute3/4 as first additional line for history */}
                   {(option.attribute3 || option.attribute4) && (
                     <Typography
                       fontvariant="merriparagraph"
@@ -440,11 +1051,12 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
                         lineHeight: '16px',
                         width: '100%',
                         textAlign: 'left',
+                        fontStyle: 'italic',
                       }}
                     />
                   )}
 
-                  {/* Third line of attributes */}
+                  {/* Show attribute5/6 as second additional line for history */}
                   {(option.attribute5 || option.attribute6) && (
                     <Typography
                       fontvariant="merriparagraph"
@@ -457,11 +1069,43 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
                         lineHeight: '16px',
                         width: '100%',
                         textAlign: 'left',
+                        fontStyle: 'italic',
                       }}
                     />
                   )}
                 </>
               )}
+
+              {/* For current input search, show a simpler display */}
+              {isCurrentInput && option.attribute1 && (
+                <Typography
+                  fontvariant="merriparagraph"
+                  text={option.attribute1}
+                  fontcolor="rgba(0, 0, 0, 0.6)"
+                  sx={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    width: '100%',
+                    textAlign: 'left',
+                  }}
+                />
+              )}
+
+              {/* For no history placeholder, show the instructions */}
+              {isNoHistoryPlaceholder && option.attribute1 && (
+                <Typography
+                  fontvariant="merriparagraph"
+                  text={option.attribute1}
+                  fontcolor="rgba(0, 0, 0, 0.6)"
+                  sx={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    width: '100%',
+                    textAlign: 'left',
+                    fontStyle: 'italic',
+                  }}
+                />
+              )}
             </li>
           )
         }}
@@ -471,6 +1115,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
             inputProps={{
               ...params.inputProps,
               'aria-labelledby': labelId,
+              onKeyDown: handleKeyDown,
             }}
             placeholder={placeholder}
             error={error}

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

@@ -580,3 +580,167 @@ export const AllAttributesDisplay: Story = {
     expect(hasAllLevels).toBe(true)
   },
 }
+
+/**
+ * 15) With Search History
+ *    Uses userEvent => keep `async`.
+ */
+export const WithSearchHistory: Story = {
+  args: {
+    label: 'Search with History',
+    options: complexSampleOptions,
+    placeholder: 'Search with history...',
+    variant: 'complex',
+    // Provide pre-populated search history
+    searchHistory: [
+      { text: 'apple', timestamp: new Date(Date.now() - 5 * 60000) }, // 5 minutes ago
+      { text: 'broccoli', timestamp: new Date(Date.now() - 60 * 60000) }, // 1 hour ago
+      {
+        text: 'custom search',
+        timestamp: new Date(Date.now() - 24 * 60 * 60000),
+      }, // 1 day ago
+    ],
+    maxHistoryItems: 5,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // Switch to history tab
+    const historyTab = canvas.getByRole('tab', { name: /HISTORY/i })
+    await userEvent.click(historyTab)
+
+    // Get dropdown options after switching to history tab
+    const listboxItems = getDropdownOptions()
+
+    // Check if history items are displayed
+    const hasAppleHistory = listboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+
+    const hasTimestamp = listboxItems.some(
+      item =>
+        item.textContent &&
+        (item.textContent.includes('minutes ago') ||
+          item.textContent.includes('hour ago') ||
+          item.textContent.includes('day ago'))
+    )
+
+    expect(hasAppleHistory).toBe(true)
+    expect(hasTimestamp).toBe(true)
+
+    // Try entering a new search term
+    await userEvent.clear(input)
+    await userEvent.type(input, 'new search')
+    await userEvent.tab() // Blur to trigger adding to history
+
+    // Reopen and check history tab again
+    await userEvent.click(input)
+    await userEvent.click(historyTab)
+
+    // Should now include our new search
+    const updatedListboxItems = getDropdownOptions()
+    const hasNewSearch = updatedListboxItems.some(
+      item => item.textContent && item.textContent.includes('new search')
+    )
+
+    expect(hasNewSearch).toBe(true)
+  },
+}
+
+/**
+ * 16) With Search Callback
+ *    Uses userEvent => keep `async`.
+ */
+export const WithSearchCallback: Story = {
+  args: {
+    label: 'Search with Callback',
+    options: sampleOptions,
+    placeholder: 'Search with callback...',
+    variant: 'simple',
+    // This callback will be triggered when searches are performed
+    onSearch: (searchTerm: string, timestamp?: Date) => {
+      console.log(
+        `Search term: ${searchTerm}, Time: ${timestamp?.toISOString() || 'No timestamp'}`
+      )
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Perform a search
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+    await userEvent.type(input, 'test search')
+    await userEvent.tab() // Blur to trigger search
+
+    // Since we can't easily verify the callback in Storybook tests,
+    // we'll just ensure the component functions correctly
+    expect(input).toHaveValue('test search')
+  },
+}
+
+/**
+ * 17) Tab Navigation
+ *    Uses userEvent => keep `async`.
+ */
+export const TabNavigation: Story = {
+  args: {
+    label: 'Tab Navigation Demo',
+    options: sampleOptions,
+    placeholder: 'Explore tabs...',
+    variant: 'simple',
+    // Provide some search history
+    searchHistory: [
+      'previous search one',
+      'previous search two',
+      'previous search three',
+    ],
+    maxHistoryItems: 10,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Open the dropdown
+    const input = canvas.getByRole('combobox')
+    await userEvent.click(input)
+
+    // First check that we're on the default "ALL OPTIONS" tab
+    // and can see the regular options
+    const allOptionsTab = canvas.getByRole('tab', { name: /ALL OPTIONS/i })
+    expect(allOptionsTab).toHaveAttribute('aria-selected', 'true')
+
+    // We should see the original options
+    const initialListboxItems = getDropdownOptions()
+    const hasAppleOption = initialListboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+    expect(hasAppleOption).toBe(true)
+
+    // Now switch to the HISTORY tab
+    const historyTab = canvas.getByRole('tab', { name: /HISTORY/i })
+    await userEvent.click(historyTab)
+    expect(historyTab).toHaveAttribute('aria-selected', 'true')
+
+    // Now we should see the history items
+    const historyListboxItems = getDropdownOptions()
+    const hasHistoryItems = historyListboxItems.some(
+      item => item.textContent && item.textContent.includes('previous search')
+    )
+    expect(hasHistoryItems).toBe(true)
+
+    // Now switch back to ALL OPTIONS tab
+    await userEvent.click(allOptionsTab)
+    expect(allOptionsTab).toHaveAttribute('aria-selected', 'true')
+
+    // We should see the original options again
+    const finalListboxItems = getDropdownOptions()
+    const hasAppleOptionAgain = finalListboxItems.some(
+      item => item.textContent && item.textContent.includes('apple')
+    )
+    expect(hasAppleOptionAgain).toBe(true)
+  },
+}