goobs-frontend 0.9.17 → 0.9.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.17",
+  "version": "0.9.19",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "@emotion/cache": "^11",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@mui/icons-material": "^6",
-    "@mui/material": "^6",
+    "@mui/icons-material": "^7",
+    "@mui/material": "^7",
     "@storybook/addon-links": "^8",
     "@types/lodash": "^4",
     "formik": "^2",
@@ -36,7 +36,6 @@
     "next": "15",
     "otplib": "^12",
     "react-datepicker": "^8",
-    "react-native": "^0.78.0",
     "react-qr-code": "^2",
     "slate": "^0.112",
     "slate-dom": "^0.112",
@@ -65,7 +64,7 @@
     "eslint-config-next": "^15",
     "eslint-config-prettier": "^10",
     "eslint-plugin-prettier": "^5",
-    "eslint-plugin-storybook": "^0.11",
+    "eslint-plugin-storybook": "^0.12",
     "prettier": "^3",
     "react": "^19",
     "react-dom": "^19",

package/src/components/Button/index.tsx

@@ -46,6 +46,7 @@ function CustomButton({
   iconlocation = 'left',
   fontlocation = 'center',
   disabled,
+  style = {},
   ...restProps
 }: CustomButtonProps) {
   // Merge MUI's "disabled" with our "disableButton"
@@ -119,6 +120,7 @@ function CustomButton({
   }
 
   // Inline styles for the top-level container (Box)
+  // Merge the passed style prop with our containerStyle
   const containerStyle: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
@@ -127,6 +129,7 @@ function CustomButton({
     height: height || (isIconOnly ? '36px' : isIconAbove ? 'auto' : '40px'),
     minHeight: isIconOnly ? '36px' : isIconAbove ? minHeight : 'auto',
     minWidth: isIconOnly ? '36px' : 'fit-content',
+    ...style, // Apply any custom styles passed through the style prop
   }
 
   // Style for the inner content box

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

@@ -43,8 +43,15 @@ function ManageRow({
         handleClose()
         break
       case 'delete':
-        onDelete?.() // same here
-        handleClose()
+        if (onDelete) {
+          // Execute the delete operation
+          onDelete()
+          // Clear the selection by setting it to empty array
+          if (selectedRows.length > 0) {
+            // This will properly close the ManageRow component
+            handleClose()
+          }
+        }
         break
       case 'export':
         if (onExport) {

package/src/components/DataGrid/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react'
 import { Box, Alert } from '@mui/material'
 import CustomToolbar from '../Toolbar'
 import Table from './Table'
@@ -24,7 +24,16 @@ function DataGrid({
   onManage,
   onShow,
   onSelectionChange,
+  showIdColumns = false,
 }: DatagridProps) {
+  // Filter columns to hide ID columns based on showIdColumns prop
+  const filteredColumns = useMemo(() => {
+    if (showIdColumns) {
+      return columns
+    }
+    return columns.filter(col => col.field !== 'id' && col.field !== '_id')
+  }, [columns, showIdColumns])
+
   // Local state
   const [rows, setRows] = useState<RowData[]>(providedRows || [])
   const [selectedRows, setSelectedRows] = useState<string[]>([])
@@ -32,7 +41,7 @@ function DataGrid({
   const [pageSize, setPageSize] = useState(10)
 
   // Initialize columns/rows if needed
-  useInitializeGrid({ columns, providedRows, setRows })
+  useInitializeGrid({ columns: filteredColumns, providedRows, setRows })
 
   // 1) When row selection changes
   const handleSelectionChange = (newSelectedIds: string[]) => {
@@ -60,7 +69,7 @@ function DataGrid({
 
   // 2) Search logic
   const { filteredRows, updatedSearchbarProps } = useSearchbar({
-    columns,
+    columns: filteredColumns,
     rows,
     searchbarProps,
   })
@@ -116,7 +125,14 @@ function DataGrid({
                 onDuplicate: onDuplicate
                   ? () => onDuplicate(selectedRows)
                   : undefined,
-                onDelete: onDelete ? () => onDelete(selectedRows) : undefined,
+                onDelete: onDelete
+                  ? () => {
+                      // Call the onDelete handler and clear selection after it completes
+                      onDelete(selectedRows)
+                      // Clear the selection after delete operation
+                      handleSelectionChange([])
+                    }
+                  : undefined,
                 onManage: handleManage,
                 onShow: onShow,
                 handleClose: handleManageRowClose,
@@ -138,7 +154,7 @@ function DataGrid({
       >
         {/* Table component */}
         <Table
-          columns={columns}
+          columns={filteredColumns}
           rows={visibleRows}
           selectedRowIds={selectedRows}
           onRowClick={handleRowClick}
@@ -154,7 +170,7 @@ function DataGrid({
           rowCount={filteredRows.length}
           onPageChange={setPage}
           onPageSizeChange={setPageSize}
-          columns={columns}
+          columns={filteredColumns}
         />
       </Box>
     </Box>

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

@@ -48,6 +48,9 @@ export interface DatagridProps {
   searchbarProps?: SearchbarProps
   error?: Error | null
 
+  // Controls whether ID columns (id/_id) are visible
+  showIdColumns?: boolean
+
   // Single or multi selection callbacks:
   onManage?: () => void
   onShow?: () => void

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

@@ -53,6 +53,8 @@ export interface DropdownProps extends Omit<FormControlProps, 'onChange'> {
   value?: string
   width?: string
   disabled?: boolean
+  // Controls whether ID columns (containing 'id' or '_id') are visible by default
+  showIdColumns?: boolean
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -173,10 +175,28 @@ const Dropdown: React.FC<DropdownProps> = ({
   value: externalValue,
   width,
   disabled = false,
+  showIdColumns = false, // Default to hiding ID columns for security
 }) => {
   const [selectedValue, setSelectedValue] = useState<string>('')
   const [focused, setFocused] = useState(false)
 
+  // Filter out options with id values if showIdColumns is false
+  const filteredOptions = React.useMemo(() => {
+    if (showIdColumns) {
+      return options
+    }
+    // Hide options where the value is exactly 'id' or '_id', or looks like a database ID
+    return options.filter(opt => {
+      const value = opt.value.toLowerCase()
+      // Check if value is an ID field or looks like an ObjectId
+      return !(
+        value === 'id' ||
+        value === '_id' ||
+        /^[0-9a-f]{24}$/.test(value) // MongoDB ObjectId format
+      )
+    })
+  }, [options, showIdColumns])
+
   useEffect(() => {
     if (externalValue !== undefined) {
       setSelectedValue(externalValue)
@@ -351,7 +371,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         fontcolor={fontcolor}
         disabled={disabled}
       >
-        {options.map(renderMenuItem)}
+        {filteredOptions.map(renderMenuItem)}
       </StyledSelect>
       {helperText && (
         <FormHelperText error={error}>{helperText}</FormHelperText>

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

@@ -66,6 +66,8 @@ export interface SearchableDropdownProps {
   searchHistory?: HistoryItem[] | string[]
   onSearch?: (searchTerm: string, timestamp?: Date) => void
   maxHistoryItems?: number
+  // Controls whether ID columns (containing 'id' or '_id') are visible by default
+  showIdColumns?: boolean
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -252,6 +254,28 @@ const StyledFormHelperText = styled(FormHelperText)({
   marginLeft: '14px',
 })
 
+// Create a utility function to check if a field is an ID field
+const isIdField = (fieldName: string): boolean => {
+  if (!fieldName) return false
+
+  // Check if it's a common ID field name
+  if (fieldName.toLowerCase() === 'id' || fieldName.toLowerCase() === '_id') {
+    return true
+  }
+
+  // Check if it contains "id" or "_id" as a standalone word or suffix
+  if (/(\b|_)id$/i.test(fieldName)) {
+    return true
+  }
+
+  // Check if it looks like a MongoDB ObjectId
+  if (/^[0-9a-f]{24}$/.test(fieldName)) {
+    return true
+  }
+
+  return false
+}
+
 const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   label,
   options,
@@ -277,6 +301,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   searchHistory = [], // Default to empty array
   onSearch,
   maxHistoryItems = 5, // Default to showing 5 history items
+  showIdColumns = false, // Default to hiding ID columns for security
 }) => {
   const [value, setValue] = useState<DropdownOption | string | null>(null)
   const [inputValue, setInputValue] = useState('')
@@ -561,6 +586,23 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     return localHistory
   }, [searchHistory, localHistory])
 
+  // Filter out options with id values if showIdColumns is false
+  const filteredBaseOptions = React.useMemo(() => {
+    if (showIdColumns) {
+      return options
+    }
+    // Hide options where the value is exactly 'id' or '_id', or looks like a database ID
+    return options.filter(opt => {
+      const value = opt.value.toLowerCase()
+      // Check if value is an ID field or looks like an ObjectId (MongoDB ID format)
+      return !(
+        value === 'id' ||
+        value === '_id' ||
+        /^[0-9a-f]{24}$/.test(value)
+      )
+    })
+  }, [options, showIdColumns])
+
   // Create a combined options array based on active tab and input value
   const getFilteredOptions = React.useCallback(() => {
     const currentInputVal = inputValue.trim()
@@ -581,7 +623,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
       // 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(
+        const matchingOption = filteredBaseOptions.find(
           opt =>
             opt.value.toLowerCase() === item.text.toLowerCase() ||
             (
@@ -617,11 +659,11 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     // ALL OPTIONS TAB (activeTab === 0)
     // If input is empty, return all options
     if (!currentInputVal) {
-      return options
+      return filteredBaseOptions
     }
 
     // Filter options based on current input
-    const filteredOpts = options.filter(opt =>
+    const filteredOpts = filteredBaseOptions.filter(opt =>
       opt.value.toLowerCase().includes(currentInputVal.toLowerCase())
     )
 
@@ -654,7 +696,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     }
 
     return filteredOpts
-  }, [inputValue, combinedHistory, options, activeTab, variant])
+  }, [inputValue, combinedHistory, filteredBaseOptions, activeTab, variant])
 
   // Create the footer component for the dropdown with tabs
   const ListboxFooter = React.forwardRef<HTMLDivElement>((_, ref) => (
@@ -962,124 +1004,165 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
                 />
               )}
 
-              {/* For simple variant - show attribute1 and attribute2 on one line */}
+              {/* For simple variant - show attribute1 and attribute2 on one line (excluding ID fields) */}
               {variant === 'simple' &&
                 !isHistoryItem &&
                 !isCurrentInput &&
                 !isNoHistoryPlaceholder &&
-                (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',
-                    }}
-                  />
-                )}
+                (() => {
+                  // Filter out ID attributes if showIdColumns is false
+                  const filteredAttributes = [
+                    option.attribute1,
+                    option.attribute2,
+                  ].filter(attr => showIdColumns || (attr && !isIdField(attr)))
+
+                  return filteredAttributes.length > 0 ? (
+                    <Typography
+                      fontvariant="merriparagraph"
+                      text={filteredAttributes.join(' | ')}
+                      fontcolor="rgba(0, 0, 0, 0.6)"
+                      sx={{
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        width: '100%',
+                        textAlign: 'left',
+                      }}
+                    />
+                  ) : null
+                })()}
 
-              {/* For complex variant - show attributes on separate lines */}
+              {/* For complex variant - show attributes on separate lines (excluding ID fields) */}
               {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',
-                        }}
-                      />
-                    )}
+                    {(() => {
+                      const filteredAttributes = [
+                        option.attribute1,
+                        option.attribute2,
+                      ].filter(
+                        attr => showIdColumns || (attr && !isIdField(attr))
+                      )
+
+                      return filteredAttributes.length > 0 ? (
+                        <Typography
+                          fontvariant="merriparagraph"
+                          text={filteredAttributes.join(' | ')}
+                          fontcolor="rgba(0, 0, 0, 0.6)"
+                          sx={{
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            width: '100%',
+                            textAlign: 'left',
+                          }}
+                        />
+                      ) : null
+                    })()}
 
                     {/* Second line of attributes */}
-                    {(option.attribute3 || option.attribute4) && (
+                    {(() => {
+                      const filteredAttributes = [
+                        option.attribute3,
+                        option.attribute4,
+                      ].filter(
+                        attr => showIdColumns || (attr && !isIdField(attr))
+                      )
+
+                      return filteredAttributes.length > 0 ? (
+                        <Typography
+                          fontvariant="merriparagraph"
+                          text={filteredAttributes.join(' | ')}
+                          fontcolor="rgba(0, 0, 0, 0.6)"
+                          sx={{
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            width: '100%',
+                            textAlign: 'left',
+                          }}
+                        />
+                      ) : null
+                    })()}
+
+                    {/* Third line of attributes */}
+                    {(() => {
+                      const filteredAttributes = [
+                        option.attribute5,
+                        option.attribute6,
+                      ].filter(
+                        attr => showIdColumns || (attr && !isIdField(attr))
+                      )
+
+                      return filteredAttributes.length > 0 ? (
+                        <Typography
+                          fontvariant="merriparagraph"
+                          text={filteredAttributes.join(' | ')}
+                          fontcolor="rgba(0, 0, 0, 0.6)"
+                          sx={{
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            width: '100%',
+                            textAlign: 'left',
+                          }}
+                        />
+                      ) : null
+                    })()}
+                  </>
+                )}
+
+              {/* For history items, show additional attributes from original options (excluding ID fields) */}
+              {isHistoryItem && variant === 'complex' && (
+                <>
+                  {/* Show attribute3/4 as first additional line for history */}
+                  {(() => {
+                    const filteredAttributes = [
+                      option.attribute3,
+                      option.attribute4,
+                    ].filter(
+                      attr => showIdColumns || (attr && !isIdField(attr))
+                    )
+
+                    return filteredAttributes.length > 0 ? (
                       <Typography
                         fontvariant="merriparagraph"
-                        text={[option.attribute3, option.attribute4]
-                          .filter(Boolean)
-                          .join(' | ')}
+                        text={filteredAttributes.join(' | ')}
                         fontcolor="rgba(0, 0, 0, 0.6)"
                         sx={{
                           fontSize: '12px',
                           lineHeight: '16px',
                           width: '100%',
                           textAlign: 'left',
+                          fontStyle: 'italic',
                         }}
                       />
-                    )}
+                    ) : null
+                  })()}
 
-                    {/* Third line of attributes */}
-                    {(option.attribute5 || option.attribute6) && (
+                  {/* Show attribute5/6 as second additional line for history */}
+                  {(() => {
+                    const filteredAttributes = [
+                      option.attribute5,
+                      option.attribute6,
+                    ].filter(
+                      attr => showIdColumns || (attr && !isIdField(attr))
+                    )
+
+                    return filteredAttributes.length > 0 ? (
                       <Typography
                         fontvariant="merriparagraph"
-                        text={[option.attribute5, option.attribute6]
-                          .filter(Boolean)
-                          .join(' | ')}
+                        text={filteredAttributes.join(' | ')}
                         fontcolor="rgba(0, 0, 0, 0.6)"
                         sx={{
                           fontSize: '12px',
                           lineHeight: '16px',
                           width: '100%',
                           textAlign: 'left',
+                          fontStyle: 'italic',
                         }}
                       />
-                    )}
-                  </>
-                )}
-
-              {/* 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"
-                      text={[option.attribute3, option.attribute4]
-                        .filter(Boolean)
-                        .join(' | ')}
-                      fontcolor="rgba(0, 0, 0, 0.6)"
-                      sx={{
-                        fontSize: '12px',
-                        lineHeight: '16px',
-                        width: '100%',
-                        textAlign: 'left',
-                        fontStyle: 'italic',
-                      }}
-                    />
-                  )}
-
-                  {/* Show attribute5/6 as second additional line for history */}
-                  {(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',
-                        fontStyle: 'italic',
-                      }}
-                    />
-                  )}
+                    ) : null
+                  })()}
                 </>
               )}