@campxdev/react-blueprint 1.7.3 → 1.7.5

package/src/components/Feedback/Spinner/Spinner.css

@@ -6,39 +6,27 @@
   animation: rotate 1s linear infinite;
   scale: 0.4;
 }
-.spinner::before,
-.spinner::after {
-  content: '';
+.spinner::before , .spinner::after {
+  content: "";
   box-sizing: border-box;
   position: absolute;
   inset: 0px;
   border-radius: 50%;
-  border: 5px solid #7d60d9;
-  animation: prixClipFix 1.5s linear infinite;
+  border: 5px solid #7D60D9;
+  animation: prixClipFix 1.5s linear infinite ;
 }
-.spinner::after {
-  transform: rotate3d(90, 90, 0, 180deg);
-  border-color: #ff3d00;
+.spinner::after{
+  transform: rotate3d(90, 90, 0, 180deg );
+  border-color: #FF3D00;
 }
 
 @keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
 }
 
 @keyframes prixClipFix {
-  0% {
-    clippath: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  50% {
-    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  75%,
-  100% {
-    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-}
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+}

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -36,7 +36,12 @@ export const RadioGroup = ({
       name={name}
       containerProps={containerProps}
     >
-      <MuiRadioGroup onChange={onChange} name={name} {...rest}>
+      <MuiRadioGroup
+        onChange={onChange}
+        name={name}
+        {...rest}
+        sx={{ height: '100%', ...rest.sx }}
+      >
         {options?.map((item, index) => (
           <FormControlLabel
             key={index}
@@ -49,7 +54,6 @@ export const RadioGroup = ({
               />
             }
             label={<Typography variant="body2">{item.label}</Typography>}
-            sx={{ marginBottom: '32px' }}
           />
         ))}
       </MuiRadioGroup>

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   InputAdornment,
   TextField,
   TextFieldProps,
@@ -34,20 +35,22 @@ export const SearchBar = ({
   };
 
   return (
-    <StyledTextField
-      placeholder={placeholder}
-      label={label}
-      value={search}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <SearchIcon />
-          </InputAdornment>
-        ),
-      }}
-      {...rest}
-      onChange={handleChange}
-    />
+    <Box margin="8px">
+      <StyledTextField
+        placeholder={placeholder}
+        label={label}
+        value={search}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        {...rest}
+        onChange={handleChange}
+      />
+    </Box>
   );
 };
 

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

@@ -51,11 +51,12 @@ export type SingleSelectProps = {
   error?: any;
   helperText?: string;
   type?: 'input' | 'filter';
+  disableClear?: boolean;
 } & Omit<
   AutocompleteProps<
     { label: string; subLabel?: string; value: any } | any,
     false,
-    false,
+    true,
     false
   >,
   | 'options'

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

@@ -0,0 +1,24 @@
+import { useTheme } from '@mui/material';
+import { Button } from '../../export';
+import { FooterContainer } from '../../styles';
+
+export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
+  const theme = useTheme();
+  return (
+    <FooterContainer direction="row" alignItems="center">
+      <Button
+        variant="text"
+        onClick={onClick}
+        sx={{
+          fontFamily: 'Heebo',
+          minWidth: '0px',
+          margin: '0px 16px',
+        }}
+        disableRipple
+        color={theme.palette.text.tertiary}
+      >
+        Clear
+      </Button>
+    </FooterContainer>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Spinner } from '../../../Feedback/Spinner/Spinner';
+import { FooterContainer } from '../../styles';
+
+export const OptionsLoader = ({ isSearch }: { isSearch: boolean }) => {
+  return (
+    <FooterContainer direction="row" alignItems="center">
+      <Spinner />
+      <Typography variant="caption">
+        {isSearch ? 'Searching' : 'Loading Options'}
+      </Typography>
+    </FooterContainer>
+  );
+};

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

@@ -3,12 +3,12 @@ import {
   AutocompleteCloseReason,
   FormControlLabel,
   RadioGroup as MuiRadioGroup,
-  Paper,
   Radio,
   useTheme,
 } from '@mui/material';
 import { startCase } from 'lodash';
 import { SyntheticEvent, useState } from 'react';
+import { EmptyIllustration } from '../../../DataDisplay/EmptyIllustration/EmptyIllustration';
 import {
   Button,
   DropdownMenu,
@@ -17,9 +17,10 @@ import {
   SingleSelectProps,
   Typography,
 } from '../../../export';
-import { OptionsLoader } from '../../components/OptionsLoader';
-import { OptionContainer } from '../../styles';
+import { FilterOptionContainer } from '../../styles';
 import { SingleSelectState } from '../singleSelectReducer';
+import { MenuFooter } from './MenuFooter';
+import { OptionsLoader } from './OptionsLoader';
 
 declare module '@mui/material/Autocomplete' {
   interface AutocompletePaperSlotPropsOverrides {
@@ -28,19 +29,6 @@ declare module '@mui/material/Autocomplete' {
   }
 }
 
-const CustomPaper = (props: any) => (
-  <Paper
-    {...props}
-    sx={{
-      boxShadow: 'none',
-      borderRadius: '0px 0px 4px 4px',
-    }}
-  >
-    {props.children}
-    <OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
-  </Paper>
-);
-
 export type SingleFilterProps = {
   onChange: (value: any) => void;
   searchDb: (searchValue: string) => Promise<void>;
@@ -81,6 +69,7 @@ export const SingleFilter = ({
   handleClose,
   handleScroll,
   state,
+  disableClear = false,
   ...restProps
 }: SingleFilterProps) => {
   const {
@@ -106,7 +95,7 @@ export const SingleFilter = ({
       <DropdownMenu
         menuListProps={{
           sx: {
-            padding: '12px',
+            padding: '0px',
             width: '250px',
           },
         }}
@@ -159,15 +148,28 @@ export const SingleFilter = ({
           />
         }
         menuListContainerSx={{
-          gap: '10px',
-          minHeight: '310px',
-          maxHeight: '310px',
-          overflow: 'scroll',
-          overflowY: 'auto',
-          marginTop: '10px',
+          margin: '10px 5px 0px 5px',
+          height: '310px',
+          overflowY: 'scroll',
         }}
         handleMenuScroll={handleScroll}
         menuSlot={({ close }) => {
+          const filteredOptions = internalOptions?.filter(
+            (option) =>
+              (localSearch && option.label.includes(localSearch)) ||
+              !localSearch,
+          );
+
+          if (filteredOptions.length === 0 && !loadingInitialInternalOptions)
+            return (
+              <EmptyIllustration
+                message="No Options Found"
+                imageSize="100px"
+                containerProps={{
+                  height: '310px',
+                }}
+              />
+            );
           return (
             <MuiRadioGroup
               onChange={(e) => {
@@ -176,50 +178,55 @@ export const SingleFilter = ({
               name={name}
               value={value}
             >
-              {internalOptions
-                ?.filter(
-                  (option) =>
-                    (localSearch && option.label.includes(localSearch)) ||
-                    !localSearch,
-                )
-                ?.map((option, index) => (
-                  <FormControlLabel
-                    sx={{
-                      margin: '0px',
+              {filteredOptions?.map((option, index) => (
+                <FormControlLabel
+                  sx={{
+                    margin: '0px',
+                    width: '100%',
+                    '.MuiFormControlLabel-label': {
                       width: '100%',
-                      '.MuiFormControlLabel-label': {
-                        width: '100%',
-                      },
-                    }}
-                    key={index}
-                    value={option.value}
-                    control={
-                      <Radio
-                        checkedIcon={<Icons.CheckedRadioIcon />}
-                        icon={<Icons.UnCheckedRadioIcon />}
-                      />
-                    }
-                    label={
-                      <OptionContainer>
-                        <Typography variant="subtitle3">
-                          {dbLabelProps.useLabelStartCase
-                            ? startCase(option.label)
-                            : option.label}
-                        </Typography>
-                        <Typography variant="caption">
-                          {dbLabelProps.useSubLabelStartCase
-                            ? startCase(option?.subLabel)
-                            : option?.subLabel}
-                        </Typography>
-                      </OptionContainer>
-                    }
-                  />
-                ))}
+                    },
+                  }}
+                  key={index}
+                  value={option.value}
+                  control={
+                    <Radio
+                      checkedIcon={<Icons.CheckedRadioIcon />}
+                      icon={<Icons.UnCheckedRadioIcon />}
+                      checked={value == option.value}
+                    />
+                  }
+                  label={
+                    <FilterOptionContainer>
+                      <Typography variant="subtitle3">
+                        {dbLabelProps.useLabelStartCase
+                          ? startCase(option.label)
+                          : option.label}
+                      </Typography>
+                      <Typography variant="caption">
+                        {dbLabelProps.useSubLabelStartCase
+                          ? startCase(option?.subLabel)
+                          : option?.subLabel}
+                      </Typography>
+                    </FilterOptionContainer>
+                  }
+                />
+              ))}
             </MuiRadioGroup>
           );
         }}
         menuFooter={
-          <OptionsLoader loading={loadingInternalOptions} isSearch={!!search} />
+          loadingInternalOptions ? (
+            <OptionsLoader isSearch={!!search} />
+          ) : disableClear ? (
+            <></>
+          ) : (
+            <MenuFooter
+              onClick={() => {
+                onChange(null);
+              }}
+            />
+          )
         }
         useMenuSlot
       />

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>
   );
 };