goobs-frontend 0.8.20 → 0.8.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.20",
+  "version": "0.8.22",
   "type": "module",
   "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",
@@ -41,20 +41,20 @@
     "zod-formik-adapter": "^1.3.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.1.3",
+    "@next/eslint-plugin-next": "^15.1.4",
     "@types/node": "^22.10.5",
-    "@types/react": "19.0.3",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "19.0.5",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-config-next": "^15.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "files": [
     "src"

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

@@ -15,6 +15,8 @@ interface ManageRowProps {
   handleClose?: () => void
   selectedRows?: string[]
   rows?: Array<{ [key: string]: unknown }>
+  // Update these to accept an array of strings if you want
+  // them to receive the selected row IDs directly:
   onDuplicate?: () => void
   onDelete?: () => void
   onManage?: () => void
@@ -37,11 +39,11 @@ function ManageRow({
   const handleActionSelection = (type: ModalType) => {
     switch (type) {
       case 'duplicate':
-        onDuplicate?.()
+        onDuplicate?.() // We've already passed selectedRows from DataGrid
         handleClose()
         break
       case 'delete':
-        onDelete?.()
+        onDelete?.() // same here
         handleClose()
         break
       case 'export':

package/src/components/DataGrid/index.tsx

@@ -20,20 +20,25 @@ function DataGrid({
   dropdowns,
   searchbarProps,
   error = null,
-  onDuplicate,
-  onDelete,
+  onDuplicate, // note type: (selectedIds: string[]) => void
+  onDelete, // note type: (selectedIds: string[]) => void
   onManage,
   onShow,
+  onSelectionChange, // (selectedIds: string[]) => void
 }: DatagridProps) {
+  // Local state
   const [rows, setRows] = useState<RowData[]>(providedRows || [])
   const [selectedRows, setSelectedRows] = useState<string[]>([])
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(10)
 
+  // Initialize columns/rows if needed
   useInitializeGrid({ columns, providedRows, setRows })
 
+  // 1) When row selection changes
   const handleSelectionChange = (newSelectedIds: string[]) => {
     setSelectedRows(newSelectedIds)
+    onSelectionChange?.(newSelectedIds)
   }
 
   const handleRowClick = (row: RowData) => {
@@ -54,22 +59,28 @@ function DataGrid({
     selectAllRows(rows, selectedRows, handleSelectionChange)
   }
 
+  // 2) Search logic
   const { filteredRows, updatedSearchbarProps } = useSearchbar({
     columns,
     rows,
     searchbarProps,
   })
 
+  // 3) Manage row logic
   const { handleManageRowClose, handleManage } = useManageRow({
     onManage,
     selectedRows,
     handleSelectionChange,
   })
 
+  // 4) Pagination
   const startIndex = page * pageSize
   const visibleRows = filteredRows.slice(startIndex, startIndex + pageSize)
 
-  const allRowsSelected = rows.length > 0 && selectedRows.length === rows.length
+  // Determine if "all rows" are currently selected
+  const allRowsSelected =
+    rows.length > 0 &&
+    rows.every(r => selectedRows.includes(String(r._id ?? r.id)))
   const someRowsSelected =
     rows.length > 0 &&
     selectedRows.length > 0 &&
@@ -102,8 +113,16 @@ function DataGrid({
             <ManageRow
               selectedRows={selectedRows}
               rows={rows}
-              onDuplicate={onDuplicate}
-              onDelete={onDelete}
+              onDuplicate={
+                onDuplicate
+                  ? () => onDuplicate(selectedRows) // pass the selected IDs
+                  : undefined
+              }
+              onDelete={
+                onDelete
+                  ? () => onDelete(selectedRows) // pass the selected IDs
+                  : undefined
+              }
               onManage={handleManage}
               onShow={onShow}
               handleClose={handleManageRowClose}

package/src/components/DataGrid/types/index.ts

@@ -44,12 +44,18 @@ export interface DatagridProps {
   columns: ColumnDef[]
   rows: RowData[]
   buttons?: CustomButtonProps[]
-  dropdowns?: Omit<DropdownProps, 'onChange'>[]
-  searchbarProps?: Omit<SearchbarProps, 'onChange' | 'value'>
+  dropdowns?: DropdownProps[]
+  searchbarProps?: SearchbarProps
   error?: Error | null
-  onDuplicate?: () => void
-  onDelete?: () => void
+
+  // Single or multi selection callbacks:
   onManage?: () => void
   onShow?: () => void
+
+  // This is critical: must accept selectedIds as an argument
+  onDuplicate?: (selectedIds: string[]) => void
+  onDelete?: (selectedIds: string[]) => void
+
+  // For capturing selection changes
   onSelectionChange?: (selectedIds: string[]) => void
 }

package/src/components/NumberField/index.tsx

@@ -5,7 +5,11 @@ import { styled } from '@mui/material/styles'
 
 export interface NumberFieldProps extends Omit<TextFieldProps, 'onChange'> {
   initialValue?: string
-  onChange?: () => void
+  /**
+   * Now accepts a standard ChangeEvent<HTMLInputElement>
+   * so parent can do e.g. (event) => parseInt(event.target.value) ...
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   backgroundcolor?: string
   outlinecolor?: string
   fontcolor?: string
@@ -58,20 +62,24 @@ const NumberField: React.FC<NumberFieldProps> = ({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value.replace(/[^0-9]/g, '')
+
       if (newValue === '') {
         setValue('')
-        onChange?.()
+        onChange?.(event) // Pass empty string up
         return
       }
+
       const numValue = parseInt(newValue, 10)
       if (min !== undefined && numValue < min) {
-        setValue(min.toString())
+        setValue(String(min))
       } else if (max !== undefined && numValue > max) {
-        setValue(max.toString())
+        setValue(String(max))
       } else {
         setValue(newValue)
       }
-      onChange?.()
+
+      // Call parent's onChange so it knows about the new event/value
+      onChange?.(event)
     },
     [onChange, min, max]
   )

package/src/components/TransferList/index.tsx

@@ -1,4 +1,4 @@
-// src\components\TransferList\index.tsx
+// src/components/TransferList/index.tsx
 'use client'
 
 import React, { useEffect, useState } from 'react'
@@ -12,14 +12,12 @@ import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
 import Paper from '@mui/material/Paper'
 import { Box, Typography } from '@mui/material'
-
 import Dropdown, { DropdownOption } from '../Dropdown'
 
 /** Utility functions for array handling */
 function not(a: readonly string[], b: readonly string[]) {
   return a.filter(value => b.indexOf(value) === -1)
 }
-
 function intersection(a: readonly string[], b: readonly string[]) {
   return a.filter(value => b.indexOf(value) !== -1)
 }
@@ -59,6 +57,14 @@ export interface TransferListProps {
   dropdownOptions?: DropdownOption[]
   dropdownDataMap?: TransferListDropdownDataMap
 
+  /**
+   * A map from item-value to label.
+   * e.g. { "HIGH": "High Priority", "LOW": "Low Priority" }.
+   * If provided, we'll display `itemLabelMap[value]` in the list
+   * rather than the raw `value`.
+   */
+  itemLabelMap?: Record<string, string>
+
   /**
    * Fired whenever left/right arrays change (user clicks the arrows).
    * @param leftItems  Updated array for the "left" column
@@ -92,8 +98,9 @@ const TransferList: React.FC<TransferListProps> = ({
   dropdownLabel,
   dropdownOptions = [],
   dropdownDataMap = {},
-  onChange,
+  itemLabelMap,
 
+  onChange,
   leftTitle = 'Unassigned',
   rightTitle = 'Assigned',
 }) => {
@@ -161,7 +168,6 @@ const TransferList: React.FC<TransferListProps> = ({
   const handleToggle = (value: string) => () => {
     const currentIndex = checked.indexOf(value)
     const newChecked = [...checked]
-
     if (currentIndex === -1) {
       newChecked.push(value)
     } else {
@@ -234,6 +240,10 @@ const TransferList: React.FC<TransferListProps> = ({
       <List dense component="div" role="list">
         {items.map(value => {
           const labelId = `transfer-list-item-${value}-label`
+          const isChecked = checked.indexOf(value) !== -1
+          const displayedLabel =
+            itemLabelMap && itemLabelMap[value] ? itemLabelMap[value] : value
+
           return (
             <ListItemButton
               key={value}
@@ -242,15 +252,13 @@ const TransferList: React.FC<TransferListProps> = ({
             >
               <ListItemIcon>
                 <Checkbox
-                  checked={checked.indexOf(value) !== -1}
+                  checked={isChecked}
                   tabIndex={-1}
                   disableRipple
-                  inputProps={{
-                    'aria-labelledby': labelId,
-                  }}
+                  inputProps={{ 'aria-labelledby': labelId }}
                 />
               </ListItemIcon>
-              <ListItemText id={labelId} primary={value} />
+              <ListItemText id={labelId} primary={displayedLabel} />
             </ListItemButton>
           )
         })}
@@ -275,7 +283,7 @@ const TransferList: React.FC<TransferListProps> = ({
       )
     }
 
-    // multipleSelection => show the dropdown above
+    // multipleSelection => show the dropdown above the list
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
         <Dropdown
@@ -295,14 +303,10 @@ const TransferList: React.FC<TransferListProps> = ({
 
   return (
     <CustomGrid
-      container // We set "container" so our CustomGrid is the outer container
+      container
       spacing={2}
       alignItems="flex-start"
       columnconfig={[
-        // We'll define a single "row" with 3 "columns": left, middle, right
-        // row=1, column=1 => left
-        // row=1, column=2 => middle
-        // row=1, column=3 => right
         {
           row: 1,
           column: 1,