goobs-frontend 0.8.29 → 0.8.30

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.29",
+  "version": "0.8.30",
   "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.",
+  "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,7 +15,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "serve": "next start",
+    "start": "storybook dev -p 6006",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "chromatic": "chromatic --project-token=chpt_2d34a5f45351b6c",
@@ -47,27 +48,27 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
     "@next/eslint-plugin-next": "^15.1.6",
-    "@storybook/addon-essentials": "^8.5.1",
-    "@storybook/addon-interactions": "^8.5.1",
-    "@storybook/addon-onboarding": "8.5.1",
-    "@storybook/blocks": "8.5.1",
-    "@storybook/nextjs": "^8.5.1",
-    "@storybook/react": "^8.5.1",
-    "@storybook/test": "^8.5.1",
-    "@types/react": "19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/addon-interactions": "^8",
+    "@storybook/addon-onboarding": "^8",
+    "@storybook/blocks": "^8",
+    "@storybook/nextjs": "^8",
+    "@storybook/react": "^8",
+    "@storybook/test": "^8",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^8",
+    "@typescript-eslint/parser": "^8",
     "chromatic": "^11.25.1",
-    "eslint": "^9.19.0",
+    "eslint": "^9",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-storybook": "^0.11.2",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.3"
+    "prettier": "^3",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5"
   },
   "files": [
     "src"

package/src/components/ComplexTextEditor/SimpleEditor/index.tsx

@@ -1,20 +1,35 @@
-// src\components\ComplexTextEditor\SimpleEditor.tsx
+// src/components/ComplexTextEditor/SimpleEditor.tsx
 
 import React from 'react'
 import { Box, TextField } from '@mui/material'
 
+/**
+ * Extend the simple editor props to support TextField behaviors:
+ * - error
+ * - helperText
+ * - required
+ */
 type SimpleEditorProps = {
   value: string
   setValue: (value: string) => void
   minRows?: number
   label?: string
+  error?: boolean
+  helperText?: React.ReactNode
+  required?: boolean
 }
 
+/**
+ * A simple multiline text editor.
+ */
 const SimpleEditor: React.FC<SimpleEditorProps> = ({
   value,
   setValue,
   minRows = 5,
   label,
+  error,
+  helperText,
+  required,
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -31,10 +46,13 @@ const SimpleEditor: React.FC<SimpleEditorProps> = ({
       <TextField
         fullWidth
         multiline
-        label={label}
         variant="outlined"
         minRows={minRows}
+        label={label}
         value={value}
+        error={error}
+        helperText={helperText}
+        required={required}
         onChange={handleChange}
         sx={{
           '& .MuiOutlinedInput-root': {

package/src/components/ComplexTextEditor/index.tsx

@@ -1,4 +1,4 @@
-// src\components\ComplexTextEditor\index.tsx
+// src/components/ComplexTextEditor/index.tsx
 
 import React, { useState, useEffect } from 'react'
 import { Box } from '@mui/material'
@@ -7,6 +7,11 @@ import ComplexToolbar, { EditorMode } from './Toolbars/Complex'
 
 export type EditorType = 'simple' | 'markdown' | 'rich' | 'complex'
 
+/**
+ * We extend ComplexTextEditorProps to allow the same
+ * text field behavior (error, helperText, required)
+ * that we introduced in SimpleEditor.
+ */
 export interface ComplexTextEditorProps {
   value: string
   onChange?: (val: string) => void
@@ -14,6 +19,9 @@ export interface ComplexTextEditorProps {
   minRows?: number
   accordion?: boolean
   editorType?: EditorType
+  error?: boolean
+  helperText?: React.ReactNode
+  required?: boolean
 }
 
 const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
@@ -22,15 +30,16 @@ const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
   label,
   minRows = 5,
   editorType = 'complex',
+  error,
+  helperText,
+  required,
 }) => {
-  // If editorType is complex, start in simple mode
   const [mode, setMode] = useState<EditorMode>(
     editorType === 'complex' ? 'simple' : editorType
   )
   const [simpleText, setSimpleText] = useState(value)
 
   useEffect(() => {
-    // If the input value changes from outside, update simpleText
     setSimpleText(value)
   }, [value])
 
@@ -42,7 +51,8 @@ const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
   }
 
   const renderEditor = () => {
-    // For now, we only support 'simple' directly. You can expand to 'rich'/'markdown' if needed.
+    // Currently, we only support "simple" mode directly (and the "else" path).
+    // If you implement "rich"/"markdown", you'd handle it similarly.
     if (mode === 'simple') {
       return (
         <SimpleEditor
@@ -50,17 +60,23 @@ const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
           setValue={handleSimpleTextChange}
           minRows={minRows}
           label={label}
+          error={error}
+          helperText={helperText}
+          required={required}
         />
       )
     }
 
-    // If you implement other modes (rich, markdown), handle them here.
+    // Default to "simple" if mode is something else unhandled
     return (
       <SimpleEditor
         value={simpleText}
         setValue={handleSimpleTextChange}
         minRows={minRows}
         label={label}
+        error={error}
+        helperText={helperText}
+        required={required}
       />
     )
   }

package/src/components/Content/Structure/multiSelect/useMultiSelect.tsx

@@ -0,0 +1,74 @@
+'use client'
+import React from 'react'
+import MultipleSelectChip, { MultiSelectChipProps } from '../../../MultiSelect'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+/**
+ * Extend MultiSelectChipProps for use in the grid system.
+ */
+export type ExtendedMultiSelectProps = MultiSelectChipProps & {
+  /**
+   * Additional configuration for the grid column.
+   */
+  columnconfig?: Omit<columnconfig, 'component'> & {
+    component?: columnconfig['component']
+  }
+  /**
+   * Configuration for the individual cell.
+   */
+  cellconfig?: cellconfig
+}
+
+interface MultiSelectGridProps {
+  multiSelect?: ExtendedMultiSelectProps | ExtendedMultiSelectProps[]
+}
+
+/**
+ * Custom hook to transform multiSelect props into `columnconfig` entries.
+ */
+const useMultiSelect = (
+  grid: MultiSelectGridProps
+): columnconfig | columnconfig[] | null => {
+  const { multiSelect } = grid
+
+  if (!multiSelect) return null
+
+  // Helper function to build each columnconfig item
+  const renderMultiSelect = (
+    item: ExtendedMultiSelectProps,
+    index: number
+  ): columnconfig => {
+    const { columnconfig: itemColumnConfig, cellconfig, ...restProps } = item
+
+    // Validate required grid configuration
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig !== 'object' ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with row and column as numbers'
+      )
+    }
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <MultipleSelectChip key={`multiselect-${index}`} {...restProps} />
+      ),
+    }
+  }
+
+  // If it's an array, process each item; otherwise process a single item
+  if (Array.isArray(multiSelect)) {
+    return multiSelect.map(renderMultiSelect)
+  } else {
+    return renderMultiSelect(multiSelect, 0)
+  }
+}
+
+export default useMultiSelect

package/src/components/Content/index.tsx

@@ -75,6 +75,9 @@ import useAccordion, {
 import useProjectBoard, {
   ExtendedProjectBoardProps,
 } from './Structure/projectboard/useProjectBoard'
+import useMultiSelect, {
+  ExtendedMultiSelectProps,
+} from './Structure/multiSelect/useMultiSelect'
 
 /**
  * Props for the ContentSection component.
@@ -118,6 +121,7 @@ export interface ContentSectionProps {
       | ExtendedPhoneNumberFieldProps
       | ExtendedPhoneNumberFieldProps[]
     checkbox?: ExtendedCheckboxProps | ExtendedCheckboxProps[]
+    multiSelect?: ExtendedMultiSelectProps | ExtendedMultiSelectProps[]
   }>
   width?: number
 }
@@ -162,6 +166,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useDateField(props))
   addToColumnConfigs(useProjectBoard(props))
   addToColumnConfigs(useAccordion(props))
+  addToColumnConfigs(useMultiSelect(props))
   addToColumnConfigs(useCheckbox(props))
   addToColumnConfigs(usePhoneNumber(props))
   addToColumnConfigs(useDropdown(props))

package/src/components/DataGrid/index.tsx

@@ -106,7 +106,7 @@ function DataGrid({
 
       <CustomToolbar
         buttons={buttons}
-        dropdown={dropdowns?.[0]}
+        dropdowns={dropdowns?.[0] ? [dropdowns[0]] : undefined}
         searchbarProps={updatedSearchbarProps}
         rightCenterProps={
           selectedRows.length > 0

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

@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react'
 import type { ColumnDef, RowData } from '../types'
 import type { SearchbarProps } from '../../Searchbar'
+import * as palette from '../../../styles/palette'
 
 interface UseSearchbarProps {
   columns: ColumnDef[]
@@ -156,6 +157,11 @@ export const useSearchbar = ({
     ...searchbarProps,
     value: searchValue,
     onChange: handleSearchChange,
+    backgroundcolor: palette.semiTransparentWhite.main,
+    shrunkfontcolor: palette.white.main,
+    unshrunkfontcolor: palette.white.main,
+    shrunklabelposition: 'onNotch',
+    label: 'Search DataGrid',
   }
 
   return {

package/src/components/Form/Popup/index.tsx

@@ -10,11 +10,13 @@ import { ExtendedTypographyProps } from '../../Content/Structure/typography/useG
 export interface PopupProps {
   open: boolean
   /**
-   * Optional flag indicating the popup should be closed.
-   * This is just for observing the internal 'closed' state externally,
-   * or forcing the component closed from outside.
+   * Optional flag indicating the popup should be closed from the parent.
    */
-  close?: boolean
+  close: boolean
+  /**
+   * Optional callback so the parent can be informed when user closes the dialog.
+   */
+  onClose: () => void
   title?: string
   description?: string
   grids?: ContentSectionProps['grids']
@@ -25,6 +27,7 @@ export interface PopupProps {
 function Popup({
   open,
   close,
+  onClose, // <----- ADDED
   title,
   description,
   grids,
@@ -109,6 +112,7 @@ function Popup({
   const handleClose = () => {
     setIsOpen(false)
     setIsClosed(true)
+    onClose?.() // <----- CALL PARENT onClose IF PROVIDED
   }
 
   return (

package/src/components/NumberField/index.tsx

@@ -1,57 +1,26 @@
 'use client'
 import React, { useState, useCallback } from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { styled } from '@mui/material/styles'
+import TextField, { TextFieldProps } from '../TextField'
 
 export interface NumberFieldProps extends Omit<TextFieldProps, 'onChange'> {
   initialValue?: string
   /**
-   * Now accepts a standard ChangeEvent<HTMLInputElement>
-   * so parent can do e.g. (event) => parseInt(event.target.value) ...
+   * 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
   label?: string
   min?: number
   max?: number
 }
 
-const StyledTextField = styled(TextField)<{
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
-    '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputLabel-root': {
-    color: fontcolor || theme.palette.text.primary,
-    '&.Mui-focused': {
-      color: fontcolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputBase-input': {
-    color: fontcolor || theme.palette.text.primary,
-  },
-}))
-
+/**
+ * A controlled numeric field that only allows digits
+ * and optionally enforces min/max constraints.
+ */
 const NumberField: React.FC<NumberFieldProps> = ({
   initialValue = '',
   onChange,
-  backgroundcolor,
-  outlinecolor,
-  fontcolor,
   label,
   min,
   max,
@@ -63,13 +32,16 @@ const NumberField: React.FC<NumberFieldProps> = ({
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value.replace(/[^0-9]/g, '')
 
+      // Let parent know even if newValue is empty:
+      onChange?.(event)
+
       if (newValue === '') {
         setValue('')
-        onChange?.(event) // Pass empty string up
         return
       }
 
       const numValue = parseInt(newValue, 10)
+
       if (min !== undefined && numValue < min) {
         setValue(String(min))
       } else if (max !== undefined && numValue > max) {
@@ -77,24 +49,18 @@ const NumberField: React.FC<NumberFieldProps> = ({
       } else {
         setValue(newValue)
       }
-
-      // Call parent's onChange so it knows about the new event/value
-      onChange?.(event)
     },
     [onChange, min, max]
   )
 
   return (
-    <StyledTextField
+    <TextField
       value={value}
       onChange={handleChange}
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      fontcolor={fontcolor}
       label={label}
-      variant="outlined"
       type="text"
       inputMode="numeric"
+      variant="outlined"
       {...rest}
     />
   )

package/src/components/ProjectBoard/forms/AddTask/client.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 
-// Your PopupForm + ContentSection types
-import PopupForm from '../../../Form/Popup'
+// Popup with open/close
+import Popup from '../../../Form/Popup'
 import { ContentSectionProps } from '../../../Content'
 
 // Types from "../index"
@@ -22,13 +22,27 @@ import type {
 export type AddTaskVariant = 'customer' | 'company' | 'administrator'
 
 export interface AddTaskProps {
+  /**
+   * Controls whether the Popup is open or closed.
+   */
   open: boolean
+
+  /**
+   * If `true`, force the Popup closed.
+   */
+  close?: boolean
+
+  /**
+   * Called when user closes the dialog (via Cancel, X button, backdrop, etc.).
+   */
   onClose: () => void
+
   /**
    * Called when the user clicks "Create Task."
    * We pass back an Omit<Task, '_id'> that the parent can store.
    */
   onSubmit: (newTask: Omit<Task, '_id'>) => void
+
   /**
    * Controls which fields appear:
    *   - 'customer'
@@ -50,6 +64,7 @@ export interface AddTaskProps {
 
 const AddTask: React.FC<AddTaskProps> = ({
   open,
+  close,
   onClose,
   onSubmit,
   variant = 'customer',
@@ -57,6 +72,7 @@ const AddTask: React.FC<AddTaskProps> = ({
   subStatuses,
   topics,
   schedulingQueues,
+  knowledgebaseArticles,
   customers,
   employees,
   severityLevels,
@@ -64,38 +80,27 @@ const AddTask: React.FC<AddTaskProps> = ({
   // -------------------------------------------------------------------------
   // 1) Local state for fields
   // -------------------------------------------------------------------------
-  // If variant="customer", store customerId + assignedEmployee (employeeIds)
-  const [selectedAccount, setSelectedAccount] = useState('') // for "customer" or "company"
-  const [selectedAdministrator, setSelectedAdministrator] = useState('') // for "company"
-  const [selectedEmployee, setSelectedEmployee] = useState('') // for "customer"
+  const [selectedAccount, setSelectedAccount] = useState('') // For "customer" or "company"
+  const [selectedAdministrator, setSelectedAdministrator] = useState('') // For "company"
+  const [selectedEmployee, setSelectedEmployee] = useState('') // For "customer"
 
   const [selectedSeverity, setSelectedSeverity] = useState('')
   const [selectedQueue, setSelectedQueue] = useState('')
   const [selectedStatus, setSelectedStatus] = useState('')
   const [selectedSubStatus, setSelectedSubStatus] = useState('')
 
-  const [unassignedTopics, setUnassignedTopics] = useState<string[]>([])
-  const [assignedTopics, setAssignedTopics] = useState<string[]>([])
+  // MultiSelect states for topics & knowledgebase articles (by ID)
+  const [selectedTopicIds, setSelectedTopicIds] = useState<string[]>([])
+  const [selectedArticleIds, setSelectedArticleIds] = useState<string[]>([])
 
   const [taskTitle, setTaskTitle] = useState('')
   const [taskDescription, setTaskDescription] = useState('')
 
   // -------------------------------------------------------------------------
-  // 2) Initialize "topics" in the TransferList
+  // 2) Convert raw data to dropdown-friendly arrays
+  //    (For the <Dropdown> fields, not the multiSelect.)
   // -------------------------------------------------------------------------
-  useEffect(() => {
-    // If you want all topics initially unassigned:
-    const allTopicValues = topics.map(t => t.topic)
-    setUnassignedTopics(allTopicValues)
-    setAssignedTopics([])
-  }, [topics])
-
-  // -------------------------------------------------------------------------
-  // 3) Convert raw data to dropdown-friendly arrays
-  // -------------------------------------------------------------------------
-  const severityOptions = severityLevels.map(sl => ({
-    value: sl._id, // or sl._id if you store it that way
-  }))
+  const severityOptions = severityLevels.map(sl => ({ value: sl._id }))
   const statusOptions = statuses.map(s => ({ value: s._id }))
   const subStatusOptions = subStatuses.map(s => ({ value: s._id }))
   const queueOptions = schedulingQueues.map(q => ({ value: q._id }))
@@ -105,7 +110,7 @@ const AddTask: React.FC<AddTaskProps> = ({
     attribute1: [c.firstName, c.lastName].filter(Boolean).join(' '),
   }))
 
-  // Example "company accounts" (placeholder). You could also supply these from props.
+  // Example "company accounts"
   const companyAccountOptions = [{ value: 'AcmeInc' }, { value: 'TechCorp' }]
 
   // For assigning employees or administrators
@@ -115,76 +120,56 @@ const AddTask: React.FC<AddTaskProps> = ({
   }))
 
   // -------------------------------------------------------------------------
-  // 4) TransferList handler
-  // -------------------------------------------------------------------------
-  const handleTopicsChange = (left: string[], right: string[]) => {
-    setUnassignedTopics(left)
-    setAssignedTopics(right)
-  }
-
-  // -------------------------------------------------------------------------
-  // 5) Handle "Submit"
+  // 3) Handle "Submit"
   // -------------------------------------------------------------------------
   const handleSubmit = () => {
-    // Build an Omit<Task, '_id'> that matches your Task interface fields
+    // Build Omit<Task, '_id'>
     const newTaskData: Omit<Task, '_id'> = {
       title: taskTitle,
       description: taskDescription,
-      topicIds: assignedTopics,
+      topicIds: selectedTopicIds, // store topic IDs
+      articleIds: selectedArticleIds, // store knowledgebase article IDs
     }
 
-    // Severity => severityId
     if (selectedSeverity) {
       newTaskData.severityId = selectedSeverity
     }
-
-    // Scheduling queue => schedulingQueueId
     if (selectedQueue) {
       newTaskData.schedulingQueueId = selectedQueue
     }
-
-    // Status => statusId
     if (selectedStatus) {
       newTaskData.statusId = selectedStatus
     }
-
-    // Substatus => substatusId
     if (selectedSubStatus) {
       newTaskData.substatusId = selectedSubStatus
     }
 
     // Variant-specific fields
     if (variant === 'customer') {
-      // "Customer Account" => newTaskData.customerId
       newTaskData.customerId = selectedAccount || undefined
-      // "Assigned Employee" => newTaskData.employeeIds = [selectedEmployee]
       if (selectedEmployee) {
         newTaskData.employeeIds = [selectedEmployee]
       }
     } else if (variant === 'company') {
-      // "Company Account" => newTaskData.companyId
       newTaskData.companyId = selectedAccount || undefined
-      // "Assigned Administrator" => newTaskData.employeeIds = [selectedAdministrator]
       if (selectedAdministrator) {
         newTaskData.employeeIds = [selectedAdministrator]
       }
-    } else if (variant === 'administrator') {
-      // e.g., no special account fields
-      // Possibly defaults or skip
     }
 
+    // 'administrator' => no special account fields
     onSubmit(newTaskData)
   }
 
   // -------------------------------------------------------------------------
-  // 6) Type guard for filter(Boolean)-style usage
+  // 4) Type guard for filter(Boolean)-style usage
   // -------------------------------------------------------------------------
   function isDefinedDropdown<T>(val: T | false | null | undefined): val is T {
     return Boolean(val)
   }
 
   // -------------------------------------------------------------------------
-  // 7) Define the grids for ContentSection
+  // 5) Define the grids for ContentSection
   // -------------------------------------------------------------------------
   const mainGrid: ContentSectionProps['grids'][0] = {
     grid: {
@@ -195,7 +180,7 @@ const AddTask: React.FC<AddTaskProps> = ({
     dropdown: (
       [
         // ----------------------------
-        // "customer" => Customer Account + Assigned Employee
+        // "customer"
         // ----------------------------
         variant === 'customer' && {
           label: 'Customer Account',
@@ -217,7 +202,7 @@ const AddTask: React.FC<AddTaskProps> = ({
         },
 
         // ----------------------------
-        // "company" => Company Account + Assigned Administrator
+        // "company"
         // ----------------------------
         variant === 'company' && {
           label: 'Company Account',
@@ -239,7 +224,7 @@ const AddTask: React.FC<AddTaskProps> = ({
         },
 
         // ----------------------------
-        // row=2 => Severity, Queue (all variants)
+        // row=2 => Severity, Queue
         // ----------------------------
         {
           label: 'Severity Level',
@@ -261,7 +246,7 @@ const AddTask: React.FC<AddTaskProps> = ({
         },
 
         // ----------------------------
-        // row=3 => Status, Substatus (all variants)
+        // row=3 => Status, Substatus
         // ----------------------------
         {
           label: 'Status',
@@ -294,30 +279,43 @@ const AddTask: React.FC<AddTaskProps> = ({
       )[]
     ).filter(isDefinedDropdown),
 
-    // TransferList
-    transferlist: [
+    // ----------------------------
+    // MultiSelect for "Topics" + "Knowledgebase Articles"
+    // (Storing IDs)
+    // ----------------------------
+    multiSelect: [
       {
-        leftItems: unassignedTopics,
-        rightItems: assignedTopics,
-        leftTitle: 'Unassigned Topics',
-        rightTitle: 'Assigned Topics',
-        onChange: handleTopicsChange,
+        label: 'Topics (by ID)',
+        /**
+         * We'll store the IDs in the multi-select to keep
+         * `selectedTopicIds` consistent with the Task interface (topicIds).
+         */
+        options: topics.map(t => t._id),
+        defaultSelected: selectedTopicIds,
+        onChange: (newVals: string[]) => setSelectedTopicIds(newVals),
         columnconfig: { row: 4, column: 1, columnwidth: '100%' },
       },
+      {
+        label: 'Knowledgebase Articles (by ID)',
+        options: knowledgebaseArticles.map(a => a._id),
+        defaultSelected: selectedArticleIds,
+        onChange: (newVals: string[]) => setSelectedArticleIds(newVals),
+        columnconfig: { row: 5, column: 1, columnwidth: '100%' },
+      },
     ],
 
-    // Task Title
+    // row=6 => Task Title
     textfield: [
       {
         label: 'Task Title',
         value: taskTitle,
         onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
           setTaskTitle(e.target.value),
-        columnconfig: { row: 5, column: 1, columnwidth: '100%' },
+        columnconfig: { row: 6, column: 1, columnwidth: '100%' },
       },
     ],
 
-    // Task Description
+    // row=7 => Task Description
     complexeditor: [
       {
         label: 'Task Description',
@@ -325,7 +323,7 @@ const AddTask: React.FC<AddTaskProps> = ({
         value: taskDescription,
         minRows: 5,
         onChange: (val: string) => setTaskDescription(val),
-        columnconfig: { row: 6, column: 1, columnwidth: '100%' },
+        columnconfig: { row: 7, column: 1, columnwidth: '100%' },
       },
     ],
   }
@@ -342,7 +340,7 @@ const AddTask: React.FC<AddTaskProps> = ({
         text: 'Cancel',
         backgroundcolor: 'none',
         fontcolor: 'black',
-        onClick: onClose,
+        onClick: onClose, // Tells the parent to close
         columnconfig: { row: 1, column: 1 },
       },
       {
@@ -356,11 +354,14 @@ const AddTask: React.FC<AddTaskProps> = ({
   }
 
   // -------------------------------------------------------------------------
-  // 8) Render
+  // 6) Render
   // -------------------------------------------------------------------------
   return (
-    <PopupForm
+    <Popup
       open={open}
+      // If close is undefined, default to false so Popup sees a boolean
+      close={close ?? false}
+      onClose={onClose}
       title="Create Task"
       width={700}
       grids={[mainGrid, buttonGrid]}

package/src/components/SearchableDropdown/index.tsx

@@ -44,15 +44,17 @@ const StyledAutocomplete = styled(
   shrunkfontcolor?: string
   unshrunkfontcolor?: string
   shrunklabelposition?: 'onNotch' | 'aboveNotch'
-}>(
-  ({
+}>(props => {
+  const {
     outlinecolor,
     fontcolor,
     inputfontcolor,
     shrunkfontcolor,
     unshrunkfontcolor,
     shrunklabelposition,
-  }) => ({
+  } = props
+
+  return {
     '& .MuiOutlinedInput-root': {
       overflow: 'visible',
       minHeight: '45px',
@@ -87,8 +89,8 @@ const StyledAutocomplete = styled(
         }),
       },
     },
-  })
-)
+  }
+})
 
 const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   label,
@@ -192,24 +194,35 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
           option.value.replace(/_/g, ' ').slice(1)
         )
       }}
-      renderOption={(liProps, option) => (
-        <li {...liProps} style={{ color: black.main }}>
-          <Typography
-            fontvariant="merriparagraph"
-            text={option.value.replace(/_/g, ' ')}
-            fontcolor={black.main}
-          />
-          {option.attribute1 && (
+      /**
+       * Add an explicit type to the `props` parameter here to avoid
+       * the “Unsafe array destructuring of a tuple element with an `any` value” error.
+       */
+      renderOption={(
+        liProps: React.HTMLAttributes<HTMLLIElement> & { key?: React.Key },
+        option: DropdownOption
+      ) => {
+        // Destructure `key` so it won't be spread
+        const { key, ...restLiProps } = liProps
+        return (
+          <li key={key} {...restLiProps} style={{ color: black.main }}>
             <Typography
               fontvariant="merriparagraph"
-              text={`${option.attribute1}${
-                option.attribute2 ? ` | ${option.attribute2}` : ''
-              }`}
+              text={option.value.replace(/_/g, ' ')}
               fontcolor={black.main}
             />
-          )}
-        </li>
-      )}
+            {option.attribute1 && (
+              <Typography
+                fontvariant="merriparagraph"
+                text={`${option.attribute1}${
+                  option.attribute2 ? ` | ${option.attribute2}` : ''
+                }`}
+                fontcolor={black.main}
+              />
+            )}
+          </li>
+        )
+      }}
       renderInput={params => (
         <TextField
           {...params}

package/src/components/TextField/index.tsx

@@ -88,7 +88,7 @@ const StyledMuiTextField = styled(MuiTextField, {
   }) => ({
     '& .MuiOutlinedInput-root': {
       minHeight: '40px',
-      height: '40px',
+      height: 'auto', // allow vertical expansion
       backgroundColor: backgroundcolor || 'inherit',
       color: fontcolor || 'black',
       '& .MuiSelect-icon': {
@@ -219,7 +219,6 @@ const TextField = React.memo<TextFieldProps>(props => {
           <InputAdornment
             position="end"
             sx={{
-              // This styling ensures *all* icons (svg elements) in the end adornment are black
               color: '#000000 !important',
               '& svg': {
                 color: '#000000 !important',
@@ -268,10 +267,11 @@ const TextField = React.memo<TextFieldProps>(props => {
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start', // top-aligned so errors appear below
         width: '100%',
-        height: '55px',
-        overflow: 'hidden',
+        marginTop: '15px',
+        height: 'auto', // allow expansion
+        overflow: 'visible', // ensure error messages are visible
         ...sx,
       }}
       onClick={handleClick}

package/src/components/Toolbar/index.tsx

@@ -15,134 +15,138 @@ import { SearchbarProps } from '../Searchbar'
  *  - `buttons` (optional) -> <Left />
  *  - `searchbarProps` (optional) -> <LeftCenter />
  *  - `rightCenterProps` (optional) -> <RightCenter />
- *  - `dropdown` (optional) -> <Right />
+ *  - `dropdowns` (optional, can be one or many) -> <Right /> (rendered in a loop)
  */
 export interface CustomToolbarProps {
   buttons?: CustomButtonProps[]
   searchbarProps?: SearchbarProps
   rightCenterProps?: RightCenterProps
-  dropdown?: DropdownProps
+  dropdowns?: DropdownProps[] // <-- changed from "dropdown?" to "dropdowns?"
 }
 
 const CustomToolbar: FC<CustomToolbarProps> = ({
   buttons,
   searchbarProps,
   rightCenterProps,
-  dropdown,
+  dropdowns,
 }) => {
-  // Three breakpoints:
-  // 1) Desktop: width > 1024px
+  // 1) Mobile:  <= 600px
   // 2) Tablet:  600px < width <= 1024px
-  // 3) Mobile:  width <= 600px
-  const isTabletOrBelow = useMediaQuery('(max-width:1024px)')
+  // 3) Desktop: > 1024px
   const isMobile = useMediaQuery('(max-width:600px)')
+  const isTabletOrBelow = useMediaQuery('(max-width:1024px)')
 
-  // =============== DESKTOP (width > 1024px) ===============
-  // Use a "wrap" layout so items never overlap;
-  // if the searchbar is too big, it automatically wraps to a new line.
+  // ================== DESKTOP (width > 1024px) ==================
+  // Keep the searchbar visible, everything in one row.
   if (!isTabletOrBelow) {
     return (
       <Box
         sx={{
           display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap', // <-- Important to prevent overlap
           alignItems: 'center',
-          gap: 2, // Some spacing between items
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 2,
           width: '100%',
+          mb: 2,
         }}
       >
-        {/* Buttons on the left */}
-        <Left buttons={buttons} />
-
-        {/* Searchbar in the same row; will wrap if there's no room */}
-        {searchbarProps && <LeftCenter {...searchbarProps} />}
-
-        {/* RightCenter (e.g., ReusableSelector for selected rows) */}
-        {rightCenterProps && <RightCenter {...rightCenterProps} />}
-
-        {/* Dropdown on the far right (also wraps if needed) */}
-        {dropdown && <Right dropdown={dropdown} />}
-      </Box>
-    )
-  }
-
-  // =============== MOBILE (width <= 600px) ===============
-  // Hide the searchbar entirely; stack everything in separate rows if needed
-  if (isMobile) {
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-        {/* Row 1: Buttons (Left) */}
+        {/* Left half: Buttons + Searchbar */}
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
-            flexWrap: 'wrap',
             gap: 2,
+            flexWrap: 'wrap',
           }}
         >
           <Left buttons={buttons} />
+          {searchbarProps && <LeftCenter {...searchbarProps} />}
         </Box>
 
-        {/* Row 2: RightCenter (if any) */}
-        {rightCenterProps && (
-          <Box sx={{ mt: 2 }}>
-            <RightCenter {...rightCenterProps} />
-          </Box>
-        )}
-
-        {/* Row 3: Dropdown (if any) */}
-        {dropdown && (
-          <Box sx={{ mt: 2 }}>
-            <Right dropdown={dropdown} />
-          </Box>
-        )}
+        {/* Right half: RightCenter + (multiple) dropdowns */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            flexWrap: 'wrap',
+          }}
+        >
+          {rightCenterProps && <RightCenter {...rightCenterProps} />}
+          {dropdowns?.map((dd, index) => <Right key={index} dropdown={dd} />)}
+        </Box>
       </Box>
     )
   }
 
-  // =============== TABLET (600px < width <= 1024px) ===============
-  // Each item on its own row, with the searchbar explicitly centered.
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-      {/* Row 1: Buttons (Left) */}
+  // ================== TABLET (600px < width <= 1024px) ==================
+  // Hide the searchbar, keep buttons on the left, rightCenter + dropdowns on the right.
+  if (!isMobile) {
+    return (
       <Box
         sx={{
           display: 'flex',
           alignItems: 'center',
+          justifyContent: 'space-between',
           flexWrap: 'wrap',
           gap: 2,
+          width: '100%',
+          mb: 2,
         }}
       >
-        <Left buttons={buttons} />
-      </Box>
+        {/* Left half: Buttons */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            flexWrap: 'wrap',
+          }}
+        >
+          <Left buttons={buttons} />
+        </Box>
 
-      {/* Row 2: Centered Searchbar */}
-      {searchbarProps && (
+        {/* Right half: RightCenter + (multiple) dropdowns */}
         <Box
           sx={{
-            mt: 2,
             display: 'flex',
-            justifyContent: 'center', // center horizontally
+            alignItems: 'center',
+            gap: 2,
+            flexWrap: 'wrap',
           }}
         >
-          <LeftCenter {...searchbarProps} />
+          {rightCenterProps && <RightCenter {...rightCenterProps} />}
+          {dropdowns?.map((dd, index) => <Right key={index} dropdown={dd} />)}
         </Box>
-      )}
+      </Box>
+    )
+  }
 
-      {/* Row 3: RightCenter */}
+  // ================== MOBILE (width <= 600px) ==================
+  // Hide the searchbar, stack everything vertically.
+  return (
+    <Box
+      sx={{ display: 'flex', flexDirection: 'column', width: '100%', mb: 2 }}
+    >
+      {/* Row 1: Buttons */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Left buttons={buttons} />
+      </Box>
+
+      {/* Row 2: RightCenter (selected rows actions) */}
       {rightCenterProps && (
         <Box sx={{ mt: 2 }}>
           <RightCenter {...rightCenterProps} />
         </Box>
       )}
 
-      {/* Row 4: Dropdown */}
-      {dropdown && (
-        <Box sx={{ mt: 2 }}>
-          <Right dropdown={dropdown} />
+      {/* Row 3: (multiple) Dropdowns */}
+      {dropdowns?.map((dd, index) => (
+        <Box sx={{ mt: 2 }} key={index}>
+          <Right dropdown={dd} />
         </Box>
-      )}
+      ))}
     </Box>
   )
 }

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

@@ -1,5 +1,3 @@
-// src/components/Toolbar/Right/index.tsx
-
 'use client'
 
 import React from 'react'
@@ -8,8 +6,8 @@ import Dropdown, { DropdownProps } from '../../Dropdown'
 import { black } from '../../../styles/palette'
 
 export interface RightProps {
-  /** A single dropdown to render on the right side. */
-  dropdown?: DropdownProps
+  /** A single dropdown to render. (We'll render multiple <Right> if needed.) */
+  dropdown: DropdownProps
 }
 
 function Right({ dropdown }: RightProps) {
@@ -25,15 +23,13 @@ function Right({ dropdown }: RightProps) {
         width: '200px',
       }}
     >
-      {dropdown && (
-        <Dropdown
-          outlinecolor={black.main}
-          fontcolor={black.main}
-          shrunkfontcolor={black.main}
-          onChange={() => console.log('Dropdown changed')}
-          {...dropdown}
-        />
-      )}
+      <Dropdown
+        outlinecolor={black.main}
+        fontcolor={black.main}
+        shrunkfontcolor={black.main}
+        onChange={() => console.log('Dropdown changed')}
+        {...dropdown}
+      />
     </Box>
   )
 }

package/src/components/Toolbar/toolbar.stories.tsx

@@ -90,7 +90,7 @@ export const WithSearch: Story = {
 export const WithDropdown: Story = {
   args: {
     buttons: [{ text: 'Only Button' }],
-    dropdown: sampleDropdown,
+    dropdowns: [sampleDropdown],
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -115,7 +115,7 @@ export const FullSetup: Story = {
       onShow: () => console.log('show'),
       handleClose: () => console.log('close'),
     },
-    dropdown: sampleDropdown,
+    dropdowns: [sampleDropdown],
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement)

package/src/index.ts

@@ -19,7 +19,7 @@ import RadioGroup, {
   RadioOption,
   RadioGroupProps,
 } from './components/RadioGroup'
-import PopupForm, { PopupProps } from './components/Form/Popup'
+import Popup, { PopupProps } from './components/Form/Popup'
 import Dialog, { DialogFormProps } from './components/Form/Dialog'
 import ContentSection, { ContentSectionProps } from './components/Content'
 import {
@@ -172,7 +172,7 @@ declare type ConfirmationCodeInputProps = React.ComponentProps<
   typeof ConfirmationCodeInput
 >
 declare type RadioGroupComponentProps = React.ComponentProps<typeof RadioGroup>
-declare type PopupFormComponentProps = React.ComponentProps<typeof PopupForm>
+declare type PopupFormComponentProps = React.ComponentProps<typeof Popup>
 declare type ContentSectionComponentProps = React.ComponentProps<
   typeof ContentSection
 >
@@ -225,7 +225,7 @@ export { CustomGrid }
 export { Typography }
 export { ConfirmationCodeInput }
 export { RadioGroup }
-export { PopupForm }
+export { Popup }
 export { ContentSection }
 export { Accordion, AccordionSummary, AccordionDetails }
 export { Card }