@campxdev/react-blueprint 1.7.2 → 1.7.4

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

@@ -1,17 +1,17 @@
 import {
   AutocompleteCloseReason,
   Box,
+  InputAdornment,
   Autocomplete as MuiAutocomplete,
   Paper,
 } from '@mui/material';
 import { debounce, startCase } from 'lodash';
 import { SyntheticEvent, useMemo } from 'react';
 import { Typography } from '../../../DataDisplay/Typography/Typography';
-import { SingleSelectProps, Spinner } from '../../../export';
+import { Icons, SingleSelectProps, Spinner } from '../../../export';
 import { TextField } from '../../TextField/TextField';
-import { OptionsLoader } from '../../components/OptionsLoader';
-import { OptionContainer } from '../../styles';
 import { SingleSelectState } from '../singleSelectReducer';
+import { OptionsLoader } from './OptionsLoader';
 
 declare module '@mui/material/Autocomplete' {
   interface AutocompletePaperSlotPropsOverrides {
@@ -29,7 +29,7 @@ const CustomPaper = (props: any) => (
     }}
   >
     {props.children}
-    <OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
+    {props.loadingOptions ? <OptionsLoader isSearch={props.isSearch} /> : <></>}
   </Paper>
 );
 
@@ -62,6 +62,7 @@ export const SingleInput = ({
   handleClose,
   handleScroll,
   state,
+  disableClear = false,
   ...restProps
 }: SingleInputProps) => {
   const {
@@ -98,15 +99,18 @@ export const SingleInput = ({
       />
     );
   }
+
   return (
     <MuiAutocomplete
       {...restProps}
+      disableClearable
+      forcePopupIcon={false}
       onChange={(e, value) => {
         onChange(getValue ? getValue(value) : value?.value);
       }}
       onInputCapture={handleSearch}
       open={open}
-      autoFocus={true}
+      autoFocus={false}
       filterOptions={(options, state) => {
         if (optionsApiEndPoint) {
           return options;
@@ -119,19 +123,17 @@ export const SingleInput = ({
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
-          <Box component="li" {...props} key={option.value}>
-            <OptionContainer>
-              <Typography variant="label1">
-                {dbLabelProps.useLabelStartCase
-                  ? startCase(option.label)
-                  : option.label}
-              </Typography>
-              <Typography variant="caption">
-                {dbLabelProps.useSubLabelStartCase
-                  ? startCase(option?.subLabel)
-                  : option?.subLabel}
-              </Typography>
-            </OptionContainer>
+          <Box component="li" {...props} margin="4px 0px" key={option.value}>
+            <Typography variant="subtitle3">
+              {dbLabelProps.useLabelStartCase
+                ? startCase(option.label)
+                : option.label}
+            </Typography>
+            <Typography variant="caption">
+              {dbLabelProps.useSubLabelStartCase
+                ? startCase(option?.subLabel)
+                : option?.subLabel}
+            </Typography>
           </Box>
         );
       }}
@@ -158,6 +160,31 @@ export const SingleInput = ({
           name={name}
           error={error}
           helperText={helperText}
+          fullWidth
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              sx: {
+                paddingRight: '18px',
+              },
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Icons.DownArrow
+                    disabled={params.disabled}
+                    onClick={
+                      params.disabled
+                        ? () => {}
+                        : open
+                        ? (e) => {
+                            handleClose(e, 'escape');
+                          }
+                        : handleOpen
+                    }
+                  />
+                </InputAdornment>
+              ),
+            },
+          }}
         />
       )}
     />

package/src/components/Input/TextField/TextField.tsx

@@ -26,7 +26,10 @@ export const TextField = ({
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(rest.fullWidth && { width: '100%' }),
+        ...containerProps,
+      }}
     >
       <MuiTextField
         required={required}

package/src/components/Input/styles.tsx

@@ -1,14 +1,14 @@
 import { Box, Stack, styled } from '@mui/material';
 
-export const OptionContainer = styled(Box)(({ theme }) => ({
+export const FilterOptionContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   borderBottom: `1px solid ${theme.palette.secondary.main}`,
   width: '100%',
-  padding: '4px 0px',
 }));
 
-export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  maxHeight: '32px',
+export const FooterContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  borderRadius: '4px',
+  height: '40px',
 }));

package/src/components/Layout/PageContent/PageContent.tsx

@@ -4,8 +4,7 @@ const PageContentContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'auto',
-  padding: '16px',
-  gap: '16px',
+  padding: '12px',
   backgroundColor: theme.palette.surface.paperBackground,
   height: 'calc(100vh - 148px)',
   width: '100%',
@@ -14,6 +13,8 @@ const PageContentContainer = styled(Box)(({ theme }) => ({
 
 export const PageContent = (props: BoxProps) => {
   return (
-    <PageContentContainer {...props}>{props.children}</PageContentContainer>
+    <PageContentContainer gap="12px" {...props}>
+      {props.children}
+    </PageContentContainer>
   );
 };

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 { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import {
   cloneElement,
   Fragment,
@@ -8,19 +8,16 @@ import {
   ReactNode,
   useState,
 } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../redux/store';
 import {
   DensitySelector,
   Icons,
   TableColumnsSelector,
   Typography,
 } from '../../export';
-import {
-  ColumnsAnchor,
-  FiltersAnchor,
-  SearchAnchor,
-} from './components/Anchors';
+import { FiltersAnchor } from './components/Anchors';
 import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
@@ -36,7 +33,7 @@ const ViewTab = ({ title }: { title: string }) => {
   const theme = useTheme();
   return (
     <Stack>
-      <Stack direction="row" gap={1} alignItems="center" padding="8px">
+      <Stack direction="row" gap={1} alignItems="center" padding="8px 0px">
         <Icons.ViewsIcon />
         <Typography variant="subtitle3">{title}</Typography>
       </Stack>
@@ -54,7 +51,7 @@ const ViewTab = ({ title }: { title: string }) => {
 
 const motionDivVariants = {
   collapsed: { height: '48px' },
-  expanded: { height: '102px' },
+  expanded: { height: '108px' },
 };
 
 export const PageHeader = ({
@@ -66,7 +63,7 @@ export const PageHeader = ({
   searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
-  const [expandedSearch, setExpandedSearch] = useState(false);
+
   const dispatch = useDispatch();
 
   const wrapProps = (element: ReactElement): ReactElement => {
@@ -89,13 +86,17 @@ export const PageHeader = ({
 
   const theme = useTheme();
 
-  const handleSearchClick = () => {
-    setExpandedSearch(true);
-  };
+  const filters = useSelector((state: RootState) =>
+    uniqueId ? state.pageHeader[uniqueId]?.filters : undefined,
+  );
 
-  const handleSearchBlur = () => {
-    setExpandedSearch(false);
-  };
+  const hasFilters =
+    !!filters &&
+    Object.entries(filters).some(([key, value]) => {
+      return (
+        !['search', 'limit', 'offset', 'skip'].includes(key) && value !== null
+      );
+    });
 
   const isTableMode = columns && uniqueId;
 
@@ -104,10 +105,8 @@ export const PageHeader = ({
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '10px',
-        margin: '8px 0px',
-        padding: '0px 16px',
         height: '48px',
+        gap: '8px',
       }}
       variants={motionDivVariants}
       animate={expanded ? 'expanded' : 'collapsed'}
@@ -118,6 +117,7 @@ export const PageHeader = ({
         width="100%"
         alignItems="center"
         justifyContent="space-between"
+        height="48px"
       >
         {isTableMode ? <ViewTab title="Default View" /> : viewsSlot}
 
@@ -127,48 +127,14 @@ export const PageHeader = ({
               handleClick={() => {
                 setExpanded(!expanded);
               }}
-              showDot={false}
+              showDot={hasFilters}
             />
           )}
           {isTableMode && (
-            <ColumnsAnchor
-              handleClick={() => {
-                setExpanded(!expanded);
-              }}
-              showDot={false}
-            />
+            <TableColumnsSelector columns={columns} 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>
+            <SearchBar searchText={searchText} uniqueId={uniqueId} />
           )}
           {isTableMode && <DensitySelector uniqueId={uniqueId} />}
           {actions.map((action, index) => action)}
@@ -183,18 +149,6 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {isTableMode && (
-            <>
-              <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
-              <Divider
-                orientation="vertical"
-                style={{
-                  height: '20px',
-                  background: theme.palette.border.primary,
-                }}
-              />
-            </>
-          )}
           {filterComponents.map((filter, index) => (
             <Fragment key={index}>
               {wrapProps(filter)}
@@ -209,7 +163,6 @@ export const PageHeader = ({
               )}
             </Fragment>
           ))}
-          <Stack direction="row"></Stack>
         </Stack>
       )}
     </motion.div>

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

@@ -1,28 +1,34 @@
-import { InputAdornment } from '@mui/material';
+import { InputAdornment, Stack } from '@mui/material';
+import { AnimatePresence, motion } from 'framer-motion';
 import { debounce } from 'lodash';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../redux/store';
 import { Icons, TextField } from '../../../export';
+import { SearchAnchor } from './Anchors';
 
 export const SearchBar = ({
-  handleSearchBlur,
   uniqueId,
   searchText,
 }: {
-  handleSearchBlur: () => void;
   uniqueId: string;
   searchText: string;
 }) => {
   const dispatch = useDispatch();
 
+  const [expandedSearch, setExpandedSearch] = useState(false);
+
+  const handleSearchClick = () => {
+    setExpandedSearch(true);
+  };
+
   const search = useSelector(
     (state: RootState) => state.pageHeader[uniqueId]?.filters?.search,
   );
 
   // Wrap onSearch in useCallback
-  const onSearch = (value: string) => {
+  const onSearch = (value: string | null) => {
     dispatch(
       setSearchForUniqueId({
         uniqueId: uniqueId,
@@ -31,36 +37,73 @@ export const SearchBar = ({
     );
   };
 
-  // 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);
   };
 
+  const handleClearClick = (e: any) => {
+    onSearch(null);
+    setExpandedSearch(false);
+  };
+
   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
-    />
+    <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 }}
+        >
+          <TextField
+            containerProps={{
+              margin: '0px',
+              width: '300px',
+            }}
+            sx={{
+              input: {
+                padding: '9px 9px 9px 4px',
+              },
+            }}
+            size="small"
+            placeholder={searchText}
+            defaultValue={search || ''}
+            onChange={handleChange}
+            InputProps={{
+              startAdornment: (
+                // <InputAdornment position="start">
+                <Stack direction="row" alignItems="center" gap="4px">
+                  <Icons.SearchIcon />
+                  <Icons.LineDividerIcon />
+                </Stack>
+                // </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Icons.ClearIcon onClick={handleClearClick} />
+                </InputAdornment>
+              ),
+            }}
+            autoFocus
+          />
+        </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>
   );
 };

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

@@ -1,12 +1,25 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
+import {
+  MenuListProps,
+  MenuProps,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
+import {
+  Button,
+  EmptyIllustration,
+  Icons,
+  SearchBar,
+  SingleCheckBox,
+} from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
+import { ColumnsAnchor } from '../Anchors';
 
 export type TableColumnsSelectorProps = {
   columns: GridColDef[];
@@ -15,6 +28,37 @@ export type TableColumnsSelectorProps = {
   uniqueId: string;
 };
 
+export const FooterContainerContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  borderRadius: '4px',
+  height: '40px',
+}));
+
+export const TableColumnsSelectorMenuFooter = ({
+  onClick,
+}: {
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <FooterContainerContainer direction="row" alignItems="center">
+      <Button
+        variant="text"
+        onClick={onClick}
+        sx={{
+          fontFamily: 'Heebo',
+          minWidth: '0px',
+          margin: '0px 16px',
+        }}
+        disableRipple
+        color={theme.palette.text.tertiary}
+      >
+        Reset
+      </Button>
+    </FooterContainerContainer>
+  );
+};
+
 export const TableColumnsSelector = ({
   columns,
   uniqueId,
@@ -36,7 +80,7 @@ export const TableColumnsSelector = ({
   const theme = useTheme();
 
   const filteredOptions = columns.filter((option) =>
-    option.field.toLowerCase().includes(search.toLowerCase()),
+    option.headerName?.toLowerCase().includes(search.toLowerCase()),
   );
 
   const handleCheckboxChange = (column: GridColDef, checked: boolean) => {
@@ -56,26 +100,16 @@ export const TableColumnsSelector = ({
       <DropdownMenu
         menuListProps={{
           sx: {
-            padding: '12px',
+            padding: '0px',
             width: '250px',
           },
           ...props.menuListProps,
         }}
         anchor={({ open }: { open: (e: any) => void }) => (
-          <Button
-            onClick={open}
-            sx={{
-              gap: '1px',
-              borderRadius: '20px',
-            }}
-            variant="contained"
-            background={theme.palette.surface.grey}
-            hoverBackground={theme.palette.surface.grey}
-            color={theme.palette.text.primary}
-            endIcon={<KeyboardArrowDown />}
-          >
-            Columns
-          </Button>
+          <ColumnsAnchor
+            handleClick={open}
+            showDot={Object.values(columnVisibilityModel).includes(false)}
+          />
         )}
         menuProps={{
           ...props.menuProps,
@@ -99,9 +133,9 @@ export const TableColumnsSelector = ({
           />
         }
         menuListContainerSx={{
-          margin: '10px 5px 0px 5px',
-          gap: 1,
-          maxHeight: '350px',
+          margin: '12px 12px 0px 12px',
+          height: '310px',
+          overflowY: 'scroll',
         }}
         menu={filteredOptions.map((item, index) => (
           <SingleCheckBox
@@ -111,7 +145,11 @@ export const TableColumnsSelector = ({
               sx: {
                 display: 'flex',
                 justifyContent: 'space-between',
-                marginLeft: '0px',
+                margin: '0px',
+                width: '100%',
+                '.MuiFormControlLabel-label': {
+                  width: '100%',
+                },
               },
             }}
             icon={<Icons.VisibilityIcon />}
@@ -134,6 +172,70 @@ export const TableColumnsSelector = ({
             }}
           />
         ))}
+        menuSlot={({ close }) => {
+          if (filteredOptions.length === 0)
+            return (
+              <EmptyIllustration
+                message="No Options Found"
+                imageSize="100px"
+                containerProps={{
+                  height: '310px',
+                }}
+              />
+            );
+          return filteredOptions.map((item, index) => (
+            <SingleCheckBox
+              key={index}
+              formControlLabelProps={{
+                labelPlacement: 'start',
+                sx: {
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  margin: '0px',
+                  width: '100%',
+                  '.MuiFormControlLabel-label': {
+                    width: '100%',
+                  },
+                  borderBottom: `1px solid ${theme.palette.secondary.main}`,
+                },
+              }}
+              icon={<Icons.VisibilityIcon />}
+              checkedIcon={<Icons.VisibilityOffIcon />}
+              checked={!columnVisibilityModel[item.field]}
+              label={
+                <Typography
+                  color={
+                    !columnVisibilityModel[item.field]
+                      ? theme.palette.text.tertiary
+                      : theme.palette.text.primary
+                  }
+                  variant="subtitle3"
+                >
+                  {item.headerName}
+                </Typography>
+              }
+              onChange={(e) => {
+                handleCheckboxChange(item, e.target.checked);
+              }}
+            />
+          ));
+        }}
+        useMenuSlot
+        menuFooter={
+          <TableColumnsSelectorMenuFooter
+            onClick={() => {
+              dispatch(
+                setColumnVisibilityModelForUniqueId({
+                  uniqueId: uniqueId,
+                  columnVisibilityModel: columns.reduce((acc, column) => {
+                    acc[column.field] = true;
+                    return acc;
+                  }, {} as GridColumnVisibilityModel),
+                }),
+              );
+            }}
+          />
+        }
       />
     </>
   );