@campxdev/react-blueprint 1.2.21 → 1.3.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.21",
+  "version": "1.3.0",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
     "@campxdev/campx-web-utils": "0.1.5",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/material": "^5.15.20",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "@mui/x-data-grid": "^7.5.1",
     "@mui/x-date-pickers": "7.16.0",
     "@reduxjs/toolkit": "^2.2.7",

package/src/App.tsx

@@ -1,12 +1,7 @@
-import { GridColDef, GridPreProcessEditCellProps } from '@mui/x-data-grid';
+import { GridColDef } from '@mui/x-data-grid';
 import { useState } from 'react';
 import './App.css';
-import {
-  EditableDataTable,
-  Select,
-  SingleSelect,
-  TextField,
-} from './components/export';
+import { EditableDataTable, Select, SingleSelect } from './components/export';
 import { usePageHeader } from './hooks/usePageHeader';
 
 interface RowType {
@@ -94,35 +89,9 @@ function App() {
     {
       field: 'age',
       headerName: 'Age',
-      preProcessEditCellProps: (params: GridPreProcessEditCellProps) => {
-        const hasError = params.props.value < 3;
-        return {
-          ...params.props,
-          error: hasError,
-        };
-      },
       width: 230,
       editable: true,
       type: 'number',
-      renderEditCell: (params) => {
-        return (
-          <>
-            <TextField
-              value={params.value}
-              error={params.error}
-              helperText={params.error && 'Age is at least 3'}
-              type="number"
-              onChange={(e) => {
-                params.api.setEditCellValue({
-                  id: params.id,
-                  field: 'age',
-                  value: e.target.value,
-                });
-              }}
-            />
-          </>
-        );
-      },
     },
   ];
 

package/src/components/Assets/Icons/IconComponents/QuizIcon.tsx

@@ -1,10 +1,17 @@
+import { useTheme } from '@mui/material';
+
 const QuizIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.black;
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 20 20"
-      fill="none"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clip-path="url(#clip0_1305_893)">

package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx

@@ -129,7 +129,7 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             height: '100%',
           },
           '& .MuiDataGrid-cell.MuiDataGrid-cell--editing': {
-            padding: '0px 9px 0px 0px',
+            padding: '0px 9px',
             alignItems: 'center',
           },
           '& .MuiDataGrid-cell': {
@@ -144,11 +144,6 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
               borderColor: theme.palette.primary.main,
             },
           },
-          '& .MuiOutlinedInput-root': {
-            fieldset: {
-              top: '0px !important',
-            },
-          },
           '& .MuiAutocomplete-input': {
             border: 'none',
           },
@@ -168,53 +163,36 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             width: 150,
             cellClassName: 'actions',
             getActions: (params) => {
+              const actions = [];
               if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
-                return props.hideDelete
-                  ? [
-                      <GridActionsCellItem
-                        icon={<Icons.SaveIcon />}
-                        label="Save"
-                        onClick={() => handleSaveClick(params)}
-                      />,
-                    ]
-                  : [
-                      <GridActionsCellItem
-                        icon={<Icons.SaveIcon />}
-                        label="Save"
-                        onClick={() => handleSaveClick(params)}
-                      />,
-                      <GridActionsCellItem
-                        icon={<Icons.DeleteIcon />}
-                        label="Cancel"
-                        onClick={() => handleDeleteClick(params)}
-                        color="inherit"
-                      />,
-                    ];
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.SaveIcon />}
+                    label="Save"
+                    onClick={() => handleSaveClick(params)}
+                  />,
+                );
+              } else {
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.EditIcon />}
+                    label="Edit"
+                    onClick={() => handleEditClick(params)}
+                    color="inherit"
+                  />,
+                );
               }
-
-              return props.hideDelete
-                ? [
-                    <GridActionsCellItem
-                      icon={<Icons.EditIcon />}
-                      label="Edit"
-                      onClick={() => handleEditClick(params)}
-                      color="inherit"
-                    />,
-                  ]
-                : [
-                    <GridActionsCellItem
-                      icon={<Icons.EditIcon />}
-                      label="Edit"
-                      onClick={() => handleEditClick(params)}
-                      color="inherit"
-                    />,
-                    <GridActionsCellItem
-                      icon={<Icons.DeleteIcon />}
-                      label="Delete"
-                      onClick={() => handleDeleteClick(params)}
-                      color="inherit"
-                    />,
-                  ];
+              if (!props.hideDelete) {
+                actions.push(
+                  <GridActionsCellItem
+                    icon={<Icons.DeleteIcon />}
+                    label="Delete"
+                    onClick={() => handleDeleteClick(params)}
+                    color="inherit"
+                  />,
+                );
+              }
+              return actions;
             },
           } as GridColDef,
         ]}

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -5,15 +5,14 @@ import {
   Box,
   Autocomplete as MuiAutocomplete,
   Paper,
-  PaperProps,
 } from '@mui/material';
 import axios from 'axios';
-import _ from 'lodash';
-import { SyntheticEvent, useEffect, useReducer } from 'react';
+import _, { debounce } from 'lodash';
+import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
-import { FetchingOptionsLoader } from '../components/FetchingOptionsLoader';
+import { OptionsLoader } from '../components/OptionsLoader';
 import { OptionContainer } from '../styles';
 
 function sleep(duration: number): Promise<void> {
@@ -24,6 +23,13 @@ function sleep(duration: number): Promise<void> {
   });
 }
 
+declare module '@mui/material/Autocomplete' {
+  interface AutocompletePaperSlotPropsOverrides {
+    loadingOptions: boolean;
+    isSearch: boolean;
+  }
+}
+
 export type SingleSelectProps = {
   options?: { label: string; subLabel?: string; value: any }[] | any[];
   optionsApiEndPoint?: string;
@@ -33,7 +39,11 @@ export type SingleSelectProps = {
   label?: string;
   name?: string;
   getValue?: (option: any) => any;
-  dbValueKey?: string;
+  dbValueProps?: {
+    valueKey: string;
+    isObjectId?: boolean;
+  };
+  dbLabelProps?: { labelKey: string; subLabelKey?: string };
   onChange: (value: any) => void;
   error?: any;
   helperText?: string;
@@ -54,7 +64,7 @@ export type SingleSelectProps = {
   | 'renderInput'
 >;
 
-const CustomPaper = (props: PaperProps) => (
+const CustomPaper = (props: any) => (
   <Paper
     {...props}
     sx={{
@@ -63,7 +73,7 @@ const CustomPaper = (props: PaperProps) => (
     }}
   >
     {props.children}
-    <FetchingOptionsLoader loading={!!props.square} />
+    <OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
   </Paper>
 );
 
@@ -78,6 +88,8 @@ enum SingleSelectActionsTypes {
   SET_INTERNAL_OPTIONS = 'set_internal_options',
   APPEND_INTERNAL_OPTIONS = 'append_internal_options',
   CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
+  SET_SEARCH = 'set_search',
+  CLEAR_SEARCH = 'clear_search',
 }
 const singleSelectReducer = (
   state: any,
@@ -108,6 +120,18 @@ const singleSelectReducer = (
     case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
       return { ...state, ...stateChanges };
     }
+    case SingleSelectActionsTypes.SET_SEARCH: {
+      return { ...state, search: stateChanges.search, hasMore: true };
+    }
+    case SingleSelectActionsTypes.CLEAR_SEARCH: {
+      return {
+        ...state,
+        search: null,
+        offset: 0,
+        internalOptions: [],
+        internalOptionsMap: {},
+      };
+    }
     case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
       return {
         ...state,
@@ -153,7 +177,11 @@ export const SingleSelect = ({
   onChange,
   error,
   helperText,
-  dbValueKey = 'id',
+  dbValueProps = {
+    valueKey: 'id',
+    isObjectId: false,
+  },
+  dbLabelProps,
   onOpen,
   onClose,
   ...restProps
@@ -171,6 +199,7 @@ export const SingleSelect = ({
     limit: 10,
     offset: 0,
     hasMore: true,
+    search: null,
   });
   const {
     open,
@@ -180,6 +209,7 @@ export const SingleSelect = ({
     limit,
     offset,
     hasMore,
+    search,
   } = state;
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
@@ -199,7 +229,11 @@ export const SingleSelect = ({
               limit,
               offset,
               selectedValueData: value,
-              dbValueKey,
+              dbValueProps: {
+                ...dbValueProps,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+              },
+              dbLabelProps,
               ...optionsApiEndpointParams,
             },
           })
@@ -248,6 +282,11 @@ export const SingleSelect = ({
     dispatch({
       actionType: SingleSelectActionsTypes.CLOSE,
     });
+    if (optionsApiEndPoint) {
+      dispatch({
+        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+      });
+    }
     if (onClose) {
       onClose(event, reason);
     }
@@ -265,12 +304,17 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
       });
       const newOptions = await internalAxios
-        .get(optionsApiEndPoint ?? '', {
+        .get(optionsApiEndPoint, {
           params: {
             limit: limit,
             offset: offset + 10,
+            search: search,
             selectedValueData: value,
-            dbValueKey,
+            dbValueProps: {
+              ...dbValueProps,
+              ...(dbValueProps.isObjectId && { isObjectId: true }),
+            },
+            dbLabelProps,
             ...optionsApiEndpointParams,
           },
         })
@@ -285,13 +329,81 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
         stateChanges: {
           newOptions: newOptions,
-
           internalOptionsMap: generateOptionsMap(newOptions),
         },
       });
     }
   };
 
+  const searchDb = async (searchValue: string) => {
+    dispatch({
+      actionType: SingleSelectActionsTypes.SET_SEARCH,
+      stateChanges: {
+        search: searchValue,
+      },
+    });
+    if (!searchValue || searchValue.trim() === '') {
+      dispatch({
+        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+      });
+    }
+    if (optionsApiEndPoint) {
+      try {
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+        });
+        const options = await internalAxios
+          .get(optionsApiEndPoint, {
+            params: {
+              limit,
+              offset: 0,
+              selectedValueData: value,
+              dbValueProps: {
+                ...dbValueProps,
+                ...(dbValueProps.isObjectId && { isObjectId: true }),
+              },
+              dbLabelProps,
+              search: searchValue,
+              ...optionsApiEndpointParams,
+            },
+          })
+          .then((res) => res.data);
+        await sleep(700);
+
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
+          stateChanges: {
+            internalOptions: options,
+            internalOptionsMap: generateOptionsMap(options),
+          },
+        });
+      } catch (e) {
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
+          stateChanges: {
+            error: e,
+          },
+        });
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
+        });
+      }
+    }
+  };
+
+  const debouncedSendRequest = useMemo(() => {
+    return debounce((searchValue) => {
+      searchDb(searchValue);
+    }, 300);
+  }, [searchDb]);
+
+  const handleSearch = async (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const searchValue = e.target.value;
+    debouncedSendRequest(searchValue);
+  };
+
   const loadSelectedOptions = async () => {
     dispatch({
       actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
@@ -302,7 +414,11 @@ export const SingleSelect = ({
           limit,
           offset,
           selectedValueData: value,
-          dbValueKey,
+          dbValueProps: {
+            ...dbValueProps,
+            ...(dbValueProps.isObjectId && { isObjectId: true }),
+          },
+          dbLabelProps,
           filterBySelectedValues: true,
         },
       });
@@ -354,11 +470,19 @@ export const SingleSelect = ({
       }}
       open={open}
       autoFocus={true}
+      filterOptions={(options, state) => {
+        if (optionsApiEndPoint) {
+          return options;
+        }
+        return options.filter((option) =>
+          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
+        );
+      }}
       value={state.internalOptionsMap[value]}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
-          <Box component="li" {...props}>
+          <Box component="li" {...props} key={option.value}>
             <OptionContainer>
               <Typography variant="label1">{option.label}</Typography>
               <Typography variant="caption">{option?.subLabel}</Typography>
@@ -374,7 +498,8 @@ export const SingleSelect = ({
         ...restProps.slotProps,
         paper: {
           ...restProps.slotProps?.paper,
-          square: loadingInternalOptions,
+          loadingOptions: loadingInternalOptions,
+          isSearch: !!state.search,
         },
       }}
       onOpen={handleOpen}
@@ -386,6 +511,7 @@ export const SingleSelect = ({
           label={label}
           required={required}
           name={name}
+          onChange={handleSearch}
           error={error}
           helperText={helperText}
         />

package/src/components/Input/components/{FetchingOptionsLoader.tsx → OptionsLoader.tsx}

@@ -2,11 +2,19 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { FetchingOptionsLoaderContainer } from '../styles';
 
-export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
+export const OptionsLoader = ({
+  loading,
+  isSearch,
+}: {
+  loading: boolean;
+  isSearch: boolean;
+}) => {
   return loading ? (
     <FetchingOptionsLoaderContainer direction="row" alignItems="center">
       <Spinner />
-      <Typography variant="caption">Fetching Options</Typography>
+      <Typography variant="caption">
+        {isSearch ? 'Searching' : 'Loading Options'}
+      </Typography>
     </FetchingOptionsLoaderContainer>
   ) : (
     <></>

package/src/components/Input/styles.tsx

@@ -5,7 +5,7 @@ export const OptionContainer = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   borderBottom: `1px solid ${theme.palette.secondary.main}`,
   width: '100%',
-  padding: '5px 0px',
+  padding: '4px 0px',
 }));
 
 export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({

package/src/themes/commonTheme.ts

@@ -302,7 +302,15 @@ export const getCommonTheme = (mode: Theme) => {
             '& label': {
               display: 'none',
             },
+            input: {
+              padding: '9px',
+            },
+
+            fieldset: {
+              top: '0px',
+            },
             '& legend': {
+              height: '0px',
               '& span': {
                 display: 'none',
               },