@campxdev/react-blueprint 1.6.4 → 1.6.6

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

@@ -16,10 +16,11 @@ import { v4 } from 'uuid';
 import { DataTable, DataTableProps, Icons } from '../../export';
 
 export type EditableDataTableProps = {
-  hideDelete?: boolean;
   onChange: (rows: GridValidRowModel) => void;
   onSave?: (params: any) => void;
   onDelete?: (params: any) => void;
+  editVisibilityArray?: number[];
+  deleteVisibilityArray?: number[];
 } & Omit<
   DataTableProps,
   | 'rowModesModel'
@@ -29,7 +30,7 @@ export type EditableDataTableProps = {
 >;
 
 export const EditableDataTable = (props: EditableDataTableProps) => {
-  const { rows } = props;
+  const { rows = [] } = props;
 
   useEffect(() => {}, [props.columns]);
 
@@ -43,7 +44,7 @@ export const EditableDataTable = (props: EditableDataTableProps) => {
 
 export const EditableTableCore = (props: EditableDataTableProps) => {
   const theme = useTheme();
-  const { rows, columns } = props;
+  const { rows = [], columns } = props;
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
   const processRowUpdate = (newRow: GridRowModel) => {
     const updatedRow = { ...newRow, isNew: false };
@@ -86,6 +87,12 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
     props.onChange(rows?.filter((row) => row.id !== params.id) ?? []);
   };
 
+  const deleteVisibilityArray =
+    props.deleteVisibilityArray || rows.map((row) => row.id);
+
+  const editVisibilityArray =
+    props.editVisibilityArray || rows.map((row) => row.id);
+
   return (
     <>
       <DataTable
@@ -159,25 +166,29 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
             cellClassName: 'actions',
             getActions: (params) => {
               const actions = [];
-              if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
-                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"
-                  />,
-                );
+
+              if (editVisibilityArray.includes(params.row.id)) {
+                if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
+                  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"
+                    />,
+                  );
+                }
               }
-              if (!props.hideDelete) {
+
+              if (deleteVisibilityArray.includes(params.row.id)) {
                 actions.push(
                   <GridActionsCellItem
                     icon={<Icons.DeleteIcon />}

package/src/components/DataDisplay/export.ts

@@ -1,4 +1,5 @@
 export * from './AccordionGroup/AccordionGroup';
+export * from './ActivityLogView/ActivityLogView';
 export * from './Avatar/Avatar';
 export * from './Card/Card';
 export * from './Chips/Chips';

package/src/components/Feedback/Tooltip/ToolTipContent.tsx

@@ -0,0 +1,15 @@
+import { Stack } from '@mui/material';
+import { Icons, Typography } from '../../export';
+import { TooltipContentProps } from './Tooltip';
+
+export const ToolTipContent = ({ message }: TooltipContentProps) => {
+  return (
+    <Stack gap={1} sx={{ margin: '5px' }}>
+      <Stack direction="row" gap={1}>
+        <Icons.BulbIcon />
+        <Typography variant="subtitle3">Note:</Typography>
+      </Stack>
+      <Typography variant="caption">{message}</Typography>
+    </Stack>
+  );
+};

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -2,14 +2,11 @@ import {
   IconButton,
   Tooltip as MuiTooltip,
   TooltipProps as MuiTooltipProps,
-  Stack,
 } from '@mui/material';
-import { Children, ReactElement } from 'react';
-import { BulbIcon } from '../../Assets/Icons/IconComponents/BulbIcon';
-import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Children, ReactNode } from 'react';
 
 export type TooltipProps = {
-  children: ReactElement | string;
+  children: ReactNode;
 } & MuiTooltipProps;
 export type TooltipContentProps = { message: string };
 
@@ -19,6 +16,7 @@ export const Tooltip = ({
   ...props
 }: TooltipProps) => {
   const isIconButton = Children.only(props.children).type === IconButton;
+
   return (
     <MuiTooltip {...props} placement={placement} arrow={arrow}>
       {isIconButton ? (
@@ -29,15 +27,3 @@ export const Tooltip = ({
     </MuiTooltip>
   );
 };
-
-export const ToolTipContent = ({ message }: TooltipContentProps) => {
-  return (
-    <Stack gap={1} sx={{ margin: '5px' }}>
-      <Stack direction="row" gap={1}>
-        <BulbIcon />
-        <Typography variant="subtitle3">Note:</Typography>
-      </Stack>
-      <Typography variant="caption">{message}</Typography>
-    </Stack>
-  );
-};

package/src/components/Feedback/export.ts

@@ -2,4 +2,5 @@ export * from './Alert/Alert';
 export * from './Snackbar/Snackbar';
 export * from './Spinner/Spinner';
 export * from './Tooltip/Tooltip';
+export * from './Tooltip/ToolTipContent';
 export * from './Tutorial/Tutorial';

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

@@ -6,7 +6,7 @@ import {
   Paper,
 } from '@mui/material';
 import axios, { AxiosInstance } from 'axios';
-import _, { debounce } from 'lodash';
+import _, { debounce, startCase } from 'lodash';
 import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
@@ -49,7 +49,12 @@ export type SingleSelectProps = {
     isInt?: boolean;
     isFloat?: boolean;
   };
-  dbLabelProps?: { labelKey: string; subLabelKey?: string };
+  dbLabelProps?: {
+    labelKey: string;
+    subLabelKey?: string;
+    useLabelStartCase?: boolean;
+    useSubLabelStartCase?: boolean;
+  };
   onChange?: (value: any) => void;
   error?: any;
   helperText?: string;
@@ -102,7 +107,11 @@ export const SingleSelect = ({
     isInt: false,
     isFloat: false,
   },
-  dbLabelProps,
+  dbLabelProps = {
+    labelKey: '',
+    useLabelStartCase: false,
+    useSubLabelStartCase: false,
+  },
   onOpen,
   onClose,
   ...restProps
@@ -451,8 +460,16 @@ export const SingleSelect = ({
         return (
           <Box component="li" {...props} key={option.value}>
             <OptionContainer>
-              <Typography variant="label1">{option.label}</Typography>
-              <Typography variant="caption">{option?.subLabel}</Typography>
+              <Typography variant="label1">
+                {dbLabelProps.useLabelStartCase
+                  ? startCase(option.label)
+                  : option.label}
+              </Typography>
+              <Typography variant="caption">
+                {dbLabelProps.useSubLabelStartCase
+                  ? startCase(option?.subLabel)
+                  : option?.subLabel}
+              </Typography>
             </OptionContainer>
           </Box>
         );

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { ReactNode, useState } from 'react';
 import {
   DensitySelector,
@@ -8,13 +8,19 @@ import {
   TableColumnsSelector,
   Typography,
 } from '../../export';
-import { ColumnsAnchor } from './components/Anchors';
+import {
+  ColumnsAnchor,
+  FiltersAnchor,
+  SearchAnchor,
+} from './components/Anchors';
+import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
-  uniqueId: string;
+  uniqueId?: string;
   viewsSlot?: ReactNode;
   actions?: ReactNode[];
   columns?: GridColDef[];
+  searchText?: string;
 }
 
 const ViewTab = ({ title }: { title: string }) => {
@@ -42,19 +48,16 @@ const motionDivVariants = {
   expanded: { height: '102px' },
 };
 
-const motionTextFieldVariants = {
-  collapsed: { width: '40px' },
-  expanded: { width: '300px' },
-};
-
 export const PageHeader = ({
   uniqueId,
   actions,
   columns,
   viewsSlot = <Box></Box>,
+  searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
   const [expandedSearch, setExpandedSearch] = useState(false);
+
   const theme = useTheme();
 
   const handleSearchClick = () => {
@@ -65,6 +68,8 @@ export const PageHeader = ({
     setExpandedSearch(false);
   };
 
+  const isTableMode = columns && uniqueId;
+
   return (
     <motion.div
       style={{
@@ -85,17 +90,18 @@ export const PageHeader = ({
         alignItems="center"
         justifyContent="space-between"
       >
-        {columns ? <ViewTab title="Default View" /> : viewsSlot}
+        {isTableMode ? <ViewTab title="Default View" /> : viewsSlot}
+
         <Stack direction="row" alignItems="center">
-          {/* {columns && (
+          {isTableMode && (
             <FiltersAnchor
               handleClick={() => {
                 setExpanded(!expanded);
               }}
               showDot={false}
             />
-          )} */}
-          {columns && (
+          )}
+          {isTableMode && (
             <ColumnsAnchor
               handleClick={() => {
                 setExpanded(!expanded);
@@ -103,35 +109,39 @@ export const PageHeader = ({
               showDot={false}
             />
           )}
-          {/* <motion.div
-            variants={motionTextFieldVariants}
-            animate={expandedSearch ? 'expanded' : 'collapsed'}
-            transition={{ duration: 0.3 }}
-          >
-            {!expandedSearch && (
-              <SearchAnchor handleClick={handleSearchClick} showDot={false} />
-            )}
-            {expandedSearch && (
-              <TextField
-                containerProps={{
-                  margin: '0px',
-                }}
-                size="small"
-                placeholder="Search by name"
-                // onChange={(e) => { setInput(e.target.value); }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Icons.SearchIcon />
-                    </InputAdornment>
-                  ),
-                }}
-                onBlur={handleSearchBlur}
-                autoFocus
-              />
-            )}
-          </motion.div> */}
-          {columns && <DensitySelector uniqueId={uniqueId} />}
+          {isTableMode && (
+            <AnimatePresence mode="wait">
+              {expandedSearch ? (
+                <motion.div
+                  key="searchBar"
+                  initial={{ opacity: 0, x: -20, scale: 0.95 }}
+                  animate={{ opacity: 1, x: 0, scale: 1 }}
+                  exit={{ opacity: 0, x: 20, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <SearchBar
+                    searchText={searchText}
+                    handleSearchBlur={handleSearchBlur}
+                    uniqueId={uniqueId}
+                  />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="searchAnchor"
+                  initial={{ opacity: 0, x: 20, scale: 0.95 }}
+                  animate={{ opacity: 1, x: 0, scale: 1 }}
+                  exit={{ opacity: 0, x: -20, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <SearchAnchor
+                    handleClick={handleSearchClick}
+                    showDot={false}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          )}
+          {isTableMode && <DensitySelector uniqueId={uniqueId} />}
           {actions?.map((action, index) => action)}
         </Stack>
       </Stack>
@@ -144,7 +154,7 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {columns && (
+          {columns && uniqueId && (
             <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
           )}
           <Divider

package/src/components/Layout/PageHeader/components/DensitySelector/DensitySelector.tsx

@@ -2,7 +2,7 @@ import { MenuListProps, MenuProps, Stack, useTheme } from '@mui/material';
 import { GridDensity } from '@mui/x-data-grid';
 import { capitalize } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
-import { setDensity } from '../../../../../redux/slices/pageHeaderSlice';
+import { setDensityForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
 import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
 import { DensityAnchor } from '../Anchors';
@@ -38,7 +38,7 @@ export const DensitySelector = ({
 
   const handleMenuClick = (value: GridDensity, close: () => void) => {
     dispatch(
-      setDensity({
+      setDensityForUniqueId({
         uniqueId: uniqueId,
         density: value,
       }),

package/src/components/Layout/PageHeader/components/SearchBar.tsx

@@ -0,0 +1,66 @@
+import { InputAdornment } from '@mui/material';
+import { debounce } from 'lodash';
+import React, { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../redux/store';
+import { Icons, TextField } from '../../../export';
+
+export const SearchBar = ({
+  handleSearchBlur,
+  uniqueId,
+  searchText,
+}: {
+  handleSearchBlur: () => void;
+  uniqueId: string;
+  searchText: string;
+}) => {
+  const dispatch = useDispatch();
+
+  const search = useSelector(
+    (state: RootState) => state.pageHeader[uniqueId]?.filters?.search,
+  );
+
+  // Wrap onSearch in useCallback
+  const onSearch = (value: string) => {
+    dispatch(
+      setSearchForUniqueId({
+        uniqueId: uniqueId,
+        search: value,
+      }),
+    );
+  };
+
+  // Now we can memoize a debounced version of onSearch
+  const debouncedSendRequest = useMemo(
+    () => debounce(onSearch, 300),
+    [onSearch],
+  );
+
+  // Pass the updated value to the debounced function in onChange
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSendRequest(e.target.value);
+  };
+
+  return (
+    <TextField
+      containerProps={{
+        margin: '0px',
+        width: '300px',
+      }}
+      size="small"
+      placeholder={searchText}
+      defaultValue={search || ''}
+      onChange={handleChange}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <Icons.SearchIcon />
+          </InputAdornment>
+        ),
+      }}
+      onBlur={handleSearchBlur}
+      autoFocus
+    />
+  );
+};

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -3,7 +3,7 @@ import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { setColumnVisibilityModel } from '../../../../../redux/slices/pageHeaderSlice';
+import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
 import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
@@ -45,7 +45,7 @@ export const TableColumnsSelector = ({
       [column.field]: !checked,
     };
     dispatch(
-      setColumnVisibilityModel({
+      setColumnVisibilityModelForUniqueId({
         uniqueId: uniqueId,
         columnVisibilityModel: newColumnVisibilityModel,
       }),
@@ -77,7 +77,17 @@ export const TableColumnsSelector = ({
             Columns
           </Button>
         )}
-        menuProps={{ ...props.menuProps }}
+        menuProps={{
+          ...props.menuProps,
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+          },
+        }}
         menuHeader={
           <SearchBar
             fullWidth
@@ -89,7 +99,7 @@ export const TableColumnsSelector = ({
           />
         }
         menuListContainerSx={{
-          margin: '10px 2px 0px 0px',
+          margin: '10px 5px 0px 5px',
           gap: 1,
           maxHeight: '350px',
         }}

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -36,7 +36,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       open={isOpen}
       content={({ close }) => {
         return (
-          <>
+          <Box sx={{ padding: '16px' }}>
             <Stack direction="row" alignItems="center">
               <img
                 src={
@@ -71,7 +71,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 {confirmButtonText}
               </Button>
             </Stack>
-          </>
+          </Box>
         );
       }}
       onClose={onCancel}

package/src/hooks/usePageHeader.ts

@@ -1,30 +1,69 @@
-import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 } from 'uuid';
-import { resetStateForUniqueId } from '../redux/slices/pageHeaderSlice';
+import {
+  PageHeaderSingleState,
+  resetStateForUniqueId,
+  setDefaultFiltersForUniqueId,
+  setLimitForUniqueId,
+  setOffsetForUniqueId,
+} from '../redux/slices/pageHeaderSlice';
 import { RootState } from '../redux/store';
 
-export const usePageHeader = () => {
+export const usePageHeader = (defaultFilters?: { [x: string]: any }) => {
   const uuidRef = useRef(v4());
   const dispatch = useDispatch();
-  const filterState = useSelector(
-    (state: RootState) =>
-      state.pageHeader[uuidRef.current] ||
-      ({} as {
-        density: GridDensity;
-        columnVisibilityModel: GridColumnVisibilityModel;
-      }),
-  );
 
   const resetState = () => {
     dispatch(resetStateForUniqueId({ uniqueId: uuidRef.current }));
   };
 
+  const setDefaultFilters = (defaultFilters: { [x: string]: any }) => {
+    dispatch(
+      setDefaultFiltersForUniqueId({
+        uniqueId: uuidRef.current,
+        defaultFilters,
+      }),
+    );
+  };
+
+  const onLimitChange = (limit: number) => {
+    dispatch(
+      setLimitForUniqueId({
+        uniqueId: uuidRef.current,
+        limit,
+      }),
+    );
+  };
+
+  const onPageChange = (offset: number) => {
+    dispatch(
+      setOffsetForUniqueId({
+        uniqueId: uuidRef.current,
+        offset,
+      }),
+    );
+  };
+
+  useEffect(() => {
+    if (defaultFilters)
+      setDefaultFilters({ limit: 10, offset: 0, skip: 0, ...defaultFilters });
+  }, []);
+
+  const filterState = useSelector(
+    (state: RootState) =>
+      state.pageHeader[uuidRef.current] ||
+      ({ filters: { limit: 10, offset: 0, skip: 0 } } as PageHeaderSingleState),
+  );
+
   return {
     columnVisibilityModel: filterState.columnVisibilityModel,
     density: filterState.density,
+    filters: { ...defaultFilters, ...filterState.filters },
     uniqueId: uuidRef.current,
     resetState,
+    setDefaultFilters,
+    onPageChange,
+    onLimitChange,
   };
 };