goobs-frontend 0.9.23 → 0.9.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.23",
+  "version": "0.9.25",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -37,10 +37,10 @@
     "otplib": "^12",
     "react-datepicker": "^8",
     "react-qr-code": "^2",
-    "slate": "^0.112",
-    "slate-dom": "^0.112",
-    "slate-history": "^0.110",
-    "slate-react": "^0.112",
+    "slate": "^0.114",
+    "slate-dom": "^0.114",
+    "slate-history": "^0.113",
+    "slate-react": "^0.114",
     "storybook": "^8",
     "zod": "^3",
     "zod-formik-adapter": "^1"

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

@@ -38,8 +38,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
   // If we're mobile, just render a single dropdown + "select all" checkbox
   if (isMobile) {
     const mobileOptions = allColumns.map(col => ({
-      value: col.field,
-      label: col.headerName ?? col.field,
+      value: col.headerName ?? col.field,
     }))
 
     // Find the currently-selected column as an object
@@ -47,7 +46,19 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
       mobileOptions.find(opt => opt.value === selectedOverflowField) || null
 
     const handleMobileChange = (value: { value: string } | null) => {
-      setSelectedOverflowField(value?.value || '')
+      if (value && value.value) {
+        // Try to find a column with matching headerName first
+        const matchingColumn = allColumns.find(
+          col => col.headerName === value.value || col.field === value.value
+        )
+
+        // If found, use its field property, otherwise use the value directly
+        setSelectedOverflowField(
+          matchingColumn ? matchingColumn.field : value.value
+        )
+      } else {
+        setSelectedOverflowField('')
+      }
     }
 
     return (
@@ -107,7 +118,20 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
   // Desktop logic
   // ---------------------------
   const handleOverflowChange = (value: { value: string } | null) => {
-    setSelectedOverflowField(value?.value || '')
+    // If using headerName for value in dropdown, we need to find the corresponding field
+    if (value && value.value) {
+      // Try to find a column with matching headerName first
+      const matchingColumn = overflowDesktopColumns.find(
+        col => col.headerName === value.value || col.field === value.value
+      )
+
+      // If found, use its field property, otherwise use the value directly
+      setSelectedOverflowField(
+        matchingColumn ? matchingColumn.field : value.value
+      )
+    } else {
+      setSelectedOverflowField('')
+    }
   }
 
   return (
@@ -150,8 +174,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
               <SearchableDropdown
                 label="More Columns"
                 options={overflowDesktopColumns.map(oc => ({
-                  value: oc.field,
-                  label: oc.headerName ?? oc.field,
+                  value: oc.headerName ?? oc.field,
                 }))}
                 defaultValue={selectedOverflowField}
                 onChange={handleOverflowChange}

package/src/components/Field/Date/index.tsx

@@ -4,11 +4,38 @@ import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
 import TextField, { TextFieldProps } from '../../Field/Text'
+import { Box } from '@mui/material'
+
+/**
+ * DateRange interface for range mode
+ */
+export interface DateRange {
+  start: Date | null
+  end: Date | null
+}
 
 export interface DateFieldProps
   extends Omit<TextFieldProps, 'onChange' | 'value' | 'endAdornment'> {
-  onChange?: (date: Date | null) => void
-  value?: Date | null
+  /**
+   * Callback when date changes
+   */
+  onChange?: (date: Date | null | DateRange) => void
+  /**
+   * Current date value
+   */
+  value?: Date | null | DateRange
+  /**
+   * Whether to show date range picker instead of single date
+   */
+  isRange?: boolean
+  /**
+   * Start date label (for range mode)
+   */
+  startLabel?: string
+  /**
+   * End date label (for range mode)
+   */
+  endLabel?: string
 }
 
 interface CustomInputProps {
@@ -35,6 +62,9 @@ const DateField: React.FC<DateFieldProps> = ({
   onChange,
   label = 'Select Date',
   value,
+  isRange = false,
+  startLabel = 'Start Date',
+  endLabel = 'End Date',
   ...rest
 }) => {
   const formatDate = (date: Date | null) => {
@@ -49,22 +79,45 @@ const DateField: React.FC<DateFieldProps> = ({
     return ''
   }
 
-  const [selectedDate, setSelectedDate] = useState<Date>(value || new Date())
+  // Initialize state based on whether in range mode or single date mode
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
+    isRange ? null : (value as Date | null) || new Date()
+  )
+  const [dateRange, setDateRange] = useState<DateRange>(
+    isRange
+      ? (value as DateRange) || { start: new Date(), end: new Date() }
+      : { start: new Date(), end: new Date() }
+  )
   const [isOpen, setIsOpen] = useState(false)
-  const [inputValue, setInputValue] = useState(formatDate(selectedDate))
+  const [isStartDateOpen, setIsStartDateOpen] = useState(false)
+  const [isEndDateOpen, setIsEndDateOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(
+    isRange ? '' : formatDate(selectedDate)
+  )
+  const [startDateInputValue, setStartDateInputValue] = useState(
+    formatDate(dateRange.start)
+  )
+  const [endDateInputValue, setEndDateInputValue] = useState(
+    formatDate(dateRange.end)
+  )
 
+  // Single date mode handlers
   const handleChange = (date: Date | null) => {
-    if (date) {
-      setSelectedDate(date)
-      setInputValue(formatDate(date))
-      setIsOpen(false)
-      if (onChange) {
-        onChange(date)
+    if (!isRange) {
+      if (date) {
+        setSelectedDate(date)
+        setInputValue(formatDate(date))
+        setIsOpen(false)
+        if (onChange) {
+          onChange(date)
+        }
       }
     }
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isRange) return // Only for single date mode
+
     const input = e.target
     const newValue = e.target.value
     const selectionStart = input.selectionStart || 0
@@ -103,6 +156,117 @@ const DateField: React.FC<DateFieldProps> = ({
     }, 0)
   }
 
+  // Range mode handlers
+  const handleStartDateChange = (date: Date | null) => {
+    if (isRange && date) {
+      const newRange = { ...dateRange, start: date }
+      setDateRange(newRange)
+      setStartDateInputValue(formatDate(date))
+      setIsStartDateOpen(false)
+      if (onChange) {
+        onChange(newRange)
+      }
+    }
+  }
+
+  const handleEndDateChange = (date: Date | null) => {
+    if (isRange && date) {
+      const newRange = { ...dateRange, end: date }
+      setDateRange(newRange)
+      setEndDateInputValue(formatDate(date))
+      setIsEndDateOpen(false)
+      if (onChange) {
+        onChange(newRange)
+      }
+    }
+  }
+
+  const handleStartDateInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (!isRange) return
+
+    const input = e.target
+    const newValue = e.target.value
+    const selectionStart = input.selectionStart || 0
+
+    setStartDateInputValue(newValue)
+
+    const parts = newValue.split('/')
+    if (parts.length === 3) {
+      const month = parseInt(parts[0], 10)
+      const day = parseInt(parts[1], 10)
+      const year = parseInt(parts[2], 10)
+
+      if (!isNaN(month) && !isNaN(day) && !isNaN(year)) {
+        const newDate = new Date(year, month - 1, day)
+        if (
+          newDate.getMonth() === month - 1 &&
+          newDate.getDate() === day &&
+          newDate.getFullYear() === year
+        ) {
+          const newRange = { ...dateRange, start: newDate }
+          setDateRange(newRange)
+          if (onChange) {
+            onChange(newRange)
+          }
+        }
+      }
+    }
+
+    setTimeout(() => {
+      if (selectionStart <= 2) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else if (selectionStart <= 5) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else {
+        input.setSelectionRange(selectionStart, selectionStart)
+      }
+    }, 0)
+  }
+
+  const handleEndDateInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.target
+    const newValue = e.target.value
+    const selectionStart = input.selectionStart || 0
+
+    setEndDateInputValue(newValue)
+
+    const parts = newValue.split('/')
+    if (parts.length === 3) {
+      const month = parseInt(parts[0], 10)
+      const day = parseInt(parts[1], 10)
+      const year = parseInt(parts[2], 10)
+
+      if (!isNaN(month) && !isNaN(day) && !isNaN(year)) {
+        const newDate = new Date(year, month - 1, day)
+        if (
+          newDate.getMonth() === month - 1 &&
+          newDate.getDate() === day &&
+          newDate.getFullYear() === year
+        ) {
+          const newRange = { ...dateRange, end: newDate }
+          setDateRange(newRange)
+          if (onChange) {
+            onChange(newRange)
+          }
+        }
+      }
+    }
+
+    setTimeout(() => {
+      if (selectionStart <= 2) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else if (selectionStart <= 5) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else {
+        input.setSelectionRange(selectionStart, selectionStart)
+      }
+    }, 0)
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const input = e.currentTarget
     const selectionStart = input.selectionStart || 0
@@ -118,7 +282,120 @@ const DateField: React.FC<DateFieldProps> = ({
 
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault()
-      const newDate = new Date(selectedDate)
+
+      if (!isRange) {
+        // Single date mode
+        const newDate = new Date(selectedDate || new Date())
+        const increment = e.key === 'ArrowUp' ? 1 : -1
+
+        switch (selectedPart) {
+          case 'month':
+            newDate.setMonth(newDate.getMonth() + increment)
+            break
+          case 'day':
+            newDate.setDate(newDate.getDate() + increment)
+            break
+          case 'year':
+            newDate.setFullYear(newDate.getFullYear() + increment)
+            break
+        }
+
+        setSelectedDate(newDate)
+        setInputValue(formatDate(newDate))
+        if (onChange) {
+          onChange(newDate)
+        }
+      }
+
+      setTimeout(() => {
+        switch (selectedPart) {
+          case 'month':
+            input.setSelectionRange(0, 2)
+            break
+          case 'day':
+            input.setSelectionRange(3, 5)
+            break
+          case 'year':
+            input.setSelectionRange(6, 10)
+            break
+        }
+      }, 0)
+    }
+  }
+
+  const handleStartDateKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.currentTarget
+    const selectionStart = input.selectionStart || 0
+
+    let selectedPart: 'month' | 'day' | 'year'
+    if (selectionStart <= 2) {
+      selectedPart = 'month'
+    } else if (selectionStart <= 5) {
+      selectedPart = 'day'
+    } else {
+      selectedPart = 'year'
+    }
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const newDate = new Date(dateRange.start || new Date())
+      const increment = e.key === 'ArrowUp' ? 1 : -1
+
+      switch (selectedPart) {
+        case 'month':
+          newDate.setMonth(newDate.getMonth() + increment)
+          break
+        case 'day':
+          newDate.setDate(newDate.getDate() + increment)
+          break
+        case 'year':
+          newDate.setFullYear(newDate.getFullYear() + increment)
+          break
+      }
+
+      const newRange = { ...dateRange, start: newDate }
+      setDateRange(newRange)
+      setStartDateInputValue(formatDate(newDate))
+      if (onChange) {
+        onChange(newRange)
+      }
+
+      setTimeout(() => {
+        switch (selectedPart) {
+          case 'month':
+            input.setSelectionRange(0, 2)
+            break
+          case 'day':
+            input.setSelectionRange(3, 5)
+            break
+          case 'year':
+            input.setSelectionRange(6, 10)
+            break
+        }
+      }, 0)
+    }
+  }
+
+  const handleEndDateKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.currentTarget
+    const selectionStart = input.selectionStart || 0
+
+    let selectedPart: 'month' | 'day' | 'year'
+    if (selectionStart <= 2) {
+      selectedPart = 'month'
+    } else if (selectionStart <= 5) {
+      selectedPart = 'day'
+    } else {
+      selectedPart = 'year'
+    }
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const newDate = new Date(dateRange.end || new Date())
       const increment = e.key === 'ArrowUp' ? 1 : -1
 
       switch (selectedPart) {
@@ -133,10 +410,11 @@ const DateField: React.FC<DateFieldProps> = ({
           break
       }
 
-      setSelectedDate(newDate)
-      setInputValue(formatDate(newDate))
+      const newRange = { ...dateRange, end: newDate }
+      setDateRange(newRange)
+      setEndDateInputValue(formatDate(newDate))
       if (onChange) {
-        onChange(newDate)
+        onChange(newRange)
       }
 
       setTimeout(() => {
@@ -170,7 +448,23 @@ const DateField: React.FC<DateFieldProps> = ({
 
   const handleIconClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    setIsOpen(true)
+    if (!isRange) {
+      setIsOpen(true)
+    }
+  }
+
+  const handleStartIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isRange) {
+      setIsStartDateOpen(true)
+    }
+  }
+
+  const handleEndIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isRange) {
+      setIsEndDateOpen(true)
+    }
   }
 
   const calendarIcon = (
@@ -187,6 +481,94 @@ const DateField: React.FC<DateFieldProps> = ({
     />
   )
 
+  const startCalendarIcon = (
+    <CalendarTodayIcon
+      onClick={handleStartIconClick}
+      sx={{
+        cursor: 'pointer',
+        '&:hover': {
+          opacity: 0.8,
+        },
+        fontSize: '20px',
+        color: 'black',
+      }}
+    />
+  )
+
+  const endCalendarIcon = (
+    <CalendarTodayIcon
+      onClick={handleEndIconClick}
+      sx={{
+        cursor: 'pointer',
+        '&:hover': {
+          opacity: 0.8,
+        },
+        fontSize: '20px',
+        color: 'black',
+      }}
+    />
+  )
+
+  if (isRange) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+        <Box sx={{ flex: 1 }}>
+          <TextField
+            label={startLabel}
+            value={startDateInputValue}
+            onChange={handleStartDateInputChange}
+            endAdornment={startCalendarIcon}
+            slotProps={{
+              input: {
+                readOnly: false,
+                style: { cursor: 'text', height: '40px' },
+                onKeyDown: handleStartDateKeyDown,
+                onClick: handleClick,
+              },
+            }}
+            {...rest}
+          />
+          <DatePicker
+            selected={dateRange.start ?? undefined}
+            onChange={handleStartDateChange}
+            dateFormat="MM/dd/yyyy"
+            customInput={<CustomInput />}
+            open={isStartDateOpen}
+            onClickOutside={() => setIsStartDateOpen(false)}
+            shouldCloseOnSelect
+          />
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <TextField
+            label={endLabel}
+            value={endDateInputValue}
+            onChange={handleEndDateInputChange}
+            endAdornment={endCalendarIcon}
+            slotProps={{
+              input: {
+                readOnly: false,
+                style: { cursor: 'text', height: '40px' },
+                onKeyDown: handleEndDateKeyDown,
+                onClick: handleClick,
+              },
+            }}
+            {...rest}
+          />
+          <DatePicker
+            selected={dateRange.end ?? undefined}
+            onChange={handleEndDateChange}
+            dateFormat="MM/dd/yyyy"
+            customInput={<CustomInput />}
+            open={isEndDateOpen}
+            onClickOutside={() => setIsEndDateOpen(false)}
+            shouldCloseOnSelect
+            minDate={dateRange.start ?? undefined}
+          />
+        </Box>
+      </Box>
+    )
+  }
+
   return (
     <>
       <TextField
@@ -205,7 +587,7 @@ const DateField: React.FC<DateFieldProps> = ({
         {...rest}
       />
       <DatePicker
-        selected={selectedDate}
+        selected={selectedDate ?? undefined}
         onChange={handleChange}
         dateFormat="MM/dd/yyyy"
         customInput={<CustomInput />}