@campxdev/react-blueprint 1.7.12 → 1.7.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/App.tsx

@@ -27,9 +27,13 @@ function App() {
       }}
     >
       <FormControlWrapper control={control}>
-        <FileUpload label={'Files'} name="daaku" files={watch().daaku} />
+        <FileUpload
+          label={'Files'}
+          name="daaku"
+          files={watch().daaku}
+          required
+        />
       </FormControlWrapper>
-      <Button onClick={handleSubmit(onSubmit)}>Submit</Button>
     </div>
   );
 }

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

@@ -15,36 +15,30 @@ export const ExportIcon = ({
   return (
     <>
       <svg
-        width={size}
-        height={size}
-        viewBox="0 0 30 30"
-        style={{
-          fill: color,
-          ...sx,
-        }}
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
       >
-        <g id="vuesax/outline/export">
-          <g id="export">
-            <path
-              id="Vector"
-              d="M19.0746 27.8126H10.9246C4.78711 27.8126 2.16211 25.1876 2.16211 19.0501V18.8876C2.16211 13.3376 4.34961 10.6626 9.24961 10.1976C9.49694 10.1805 9.74137 10.2592 9.93221 10.4175C10.123 10.5758 10.2457 10.8014 10.2746 11.0476C10.2865 11.1708 10.2739 11.2951 10.2375 11.4134C10.2012 11.5317 10.1418 11.6416 10.0628 11.7369C9.9838 11.8322 9.88675 11.9109 9.77722 11.9685C9.6677 12.0261 9.54786 12.0615 9.42461 12.0726C5.49961 12.4351 4.03711 14.2851 4.03711 18.8976V19.0601C4.03711 24.1476 5.83711 25.9476 10.9246 25.9476H19.0746C24.1621 25.9476 25.9621 24.1476 25.9621 19.0601V18.8976C25.9621 14.2601 24.4746 12.4101 20.4746 12.0726C20.3504 12.0644 20.2291 12.0316 20.1178 11.9759C20.0065 11.9202 19.9074 11.8429 19.8263 11.7484C19.7453 11.6539 19.684 11.5442 19.6459 11.4258C19.6078 11.3073 19.5937 11.1824 19.6045 11.0584C19.6154 10.9344 19.6508 10.8138 19.7089 10.7037C19.7669 10.5936 19.8463 10.4962 19.9425 10.4172C20.0387 10.3382 20.1496 10.2791 20.2689 10.2436C20.3882 10.208 20.5134 10.1967 20.6371 10.2101C25.6121 10.6351 27.8371 13.3226 27.8371 18.9101V19.0726C27.8371 25.1876 25.2121 27.8126 19.0746 27.8126Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-            <path
-              id="Vector_2"
-              d="M15 19.6879C14.7519 19.6863 14.5144 19.587 14.3389 19.4115C14.1634 19.236 14.0641 18.9985 14.0625 18.7504V4.52539C14.0641 4.27726 14.1634 4.03975 14.3389 3.86429C14.5144 3.68883 14.7519 3.58953 15 3.58789C15.2481 3.58953 15.4856 3.68883 15.6611 3.86429C15.8366 4.03975 15.9359 4.27726 15.9375 4.52539V18.7504C15.9359 18.9985 15.8366 19.236 15.6611 19.4115C15.4856 19.587 15.2481 19.6863 15 19.6879Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-            <path
-              id="Vector_3"
-              d="M19.189 8.24978C19.0658 8.25022 18.9438 8.22614 18.83 8.17892C18.7163 8.1317 18.6131 8.06231 18.5265 7.97478L15.004 4.44978L11.479 7.97478C11.3012 8.14038 11.0662 8.23054 10.8233 8.22625C10.5804 8.22197 10.3487 8.12358 10.1769 7.95181C10.0052 7.78004 9.90678 7.54831 9.90249 7.30544C9.8982 7.06256 9.98836 6.8275 10.154 6.64978L14.339 2.46353C14.5154 2.28918 14.7534 2.19141 15.0015 2.19141C15.2495 2.19141 15.4875 2.28918 15.664 2.46353L19.8515 6.65103C20.0258 6.82746 20.1236 7.06549 20.1236 7.31353C20.1236 7.56157 20.0258 7.79961 19.8515 7.97603C19.7654 8.06431 19.6623 8.13413 19.5484 8.18119C19.4345 8.22826 19.3122 8.2516 19.189 8.24978Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-          </g>
-        </g>
+        <path
+          d="M15.5105 22.2501H8.99047C4.08047 22.2501 1.98047 20.1501 1.98047 15.2401V15.1101C1.98047 10.6701 3.73047 8.53009 7.65047 8.15809C7.84833 8.1444 8.04387 8.20739 8.19655 8.334C8.34922 8.4606 8.44731 8.64111 8.47047 8.83809C8.47997 8.93664 8.46988 9.03609 8.4408 9.13073C8.41172 9.22536 8.36422 9.31332 8.30102 9.38953C8.23782 9.46573 8.16018 9.5287 8.07256 9.57479C7.98494 9.62088 7.88907 9.64919 7.79047 9.65809C4.65047 9.94809 3.48047 11.4281 3.48047 15.1181V15.2481C3.48047 19.3181 4.92047 20.7581 8.99047 20.7581H15.5105C19.5805 20.7581 21.0205 19.3181 21.0205 15.2481V15.1181C21.0205 11.4081 19.8305 9.92809 16.6305 9.65809C16.5311 9.65155 16.4341 9.62524 16.345 9.58071C16.256 9.53617 16.1767 9.4743 16.1119 9.39873C16.047 9.32315 15.9979 9.2354 15.9675 9.1406C15.937 9.04581 15.9258 8.94589 15.9344 8.84669C15.9431 8.7475 15.9714 8.65103 16.0179 8.56295C16.0643 8.47486 16.1278 8.39693 16.2048 8.33373C16.2817 8.27052 16.3705 8.22332 16.4659 8.19487C16.5613 8.16643 16.6615 8.15733 16.7605 8.16809C20.7405 8.50809 22.5205 10.6581 22.5205 15.1281V15.2581C22.5205 20.1501 20.4205 22.2501 15.5105 22.2501Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M12.25 15.7501C12.0515 15.7488 11.8615 15.6694 11.7211 15.529C11.5807 15.3886 11.5013 15.1986 11.5 15.0001V3.62012C11.5013 3.42161 11.5807 3.2316 11.7211 3.09124C11.8615 2.95087 12.0515 2.87143 12.25 2.87012C12.4485 2.87143 12.6385 2.95087 12.7789 3.09124C12.9193 3.2316 12.9987 3.42161 13 3.62012V15.0001C12.9987 15.1986 12.9193 15.3886 12.7789 15.529C12.6385 15.6694 12.4485 15.7488 12.25 15.7501Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M15.6012 6.60012C15.5026 6.60047 15.405 6.5812 15.314 6.54343C15.223 6.50566 15.1405 6.45014 15.0712 6.38012L12.2532 3.56012L9.43317 6.38012C9.29099 6.5126 9.10295 6.58472 8.90864 6.58129C8.71434 6.57787 8.52896 6.49915 8.39155 6.36174C8.25413 6.22433 8.17542 6.03894 8.17199 5.84464C8.16856 5.65034 8.24069 5.46229 8.37317 5.32012L11.7212 1.97112C11.8623 1.83164 12.0527 1.75342 12.2512 1.75342C12.4496 1.75342 12.64 1.83164 12.7812 1.97112L16.1312 5.32112C16.2706 5.46226 16.3489 5.65269 16.3489 5.85112C16.3489 6.04955 16.2706 6.23998 16.1312 6.38112C16.0624 6.45175 15.9799 6.50759 15.8887 6.54525C15.7976 6.5829 15.6998 6.60157 15.6012 6.60012Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.4"
+        />
       </svg>
     </>
   );

package/src/components/DataDisplay/AccordionGroup/AccordionGroup.tsx

@@ -19,6 +19,7 @@ export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
     <Box sx={{ ...containerSx }}>
       {data?.map((itemProps, index) => (
         <Accordion
+          elevation={0}
           {...itemProps}
           expanded={expanded}
           index={index}

package/src/components/DataDisplay/Card/Card.tsx

@@ -48,7 +48,7 @@ export interface CardProps {
   checkBox?: boolean;
 
   moreOptions?: boolean;
-  menu?: Array<ReactNode>;
+  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
   icon?: ReactNode;
   headerSx?: SxProps;
   statusSx?: SxProps;

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -5,8 +5,10 @@ import {
   styled,
   SxProps,
   useTheme,
+  useMediaQuery,
 } from '@mui/material';
 import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
+import { alpha } from '@mui/system';
 
 export type FileUploadProps = {
   label: string;
@@ -24,6 +26,7 @@ export type FileUploadProps = {
   sx?: SxProps;
   showImage?: boolean;
   previewSx?: SxProps;
+  required?: boolean;
 };
 
 export const FileUpload = ({
@@ -42,8 +45,10 @@ export const FileUpload = ({
   showImage,
   previewSx,
   sx,
+  required,
 }: FileUploadProps) => {
   const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
 
   if (!onChange) {
     return <Typography>onChange Missing</Typography>;
@@ -81,7 +86,14 @@ export const FileUpload = ({
 
   return (
     <Stack sx={sx}>
-      <Typography variant="label1">{label}</Typography>
+      <Typography variant="label1">
+        {label}{' '}
+        {required && (
+          <span style={{ color: `${theme.palette.tertiary.main}` }}>
+            {' *'}
+          </span>
+        )}
+      </Typography>{' '}
       <input
         accept={accept}
         style={{ display: 'none' }}
@@ -92,19 +104,11 @@ export const FileUpload = ({
         disabled={disabled}
         onChange={handleFileChange}
       />
-
       <FormLabel htmlFor={name}>
         <StyledFileSelectorContainer>
           <Stack display={'flex'} alignItems={'center'}>
             <Icons.ExportIcon size={20} />
-            <Typography
-              color={
-                disabled
-                  ? theme.palette.secondary.dark
-                  : theme.palette.primary.main
-              }
-              variant="label2"
-            >
+            <Typography color={theme.palette.text.tertiary} variant="label2">
               {inputText ?? 'Upload Files'}
             </Typography>
           </Stack>
@@ -123,11 +127,13 @@ export const FileUpload = ({
           </Typography>
         )}
       </FormLabel>
-
       <Box display="flex" gap="12px" flexWrap="wrap">
         {showImage ? (
           files.map((file, index) => (
-            <StyledSelectedFileContainer key={index}>
+            <StyledSelectedFileContainer
+              key={index}
+              isSmallScreen={isSmallScreen}
+            >
               <Box
                 sx={{
                   height: '120px',
@@ -183,13 +189,15 @@ export const FileUpload = ({
   );
 };
 
-const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
+const StyledSelectedFileContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isSmallScreen',
+})<{ isSmallScreen: boolean }>(({ theme, isSmallScreen }) => ({
   borderRadius: '10px',
   position: 'relative',
-  flex: '1 1 auto',
   textAlign: 'center',
   marginTop: '5px',
-  minWidth: '400px',
+  minWidth: isSmallScreen ? '100%' : '300px', // Full width on small screens, 300px on larger
+  maxWidth: '100%',
   '& > button': {
     position: 'absolute',
     right: '-4%',
@@ -198,14 +206,17 @@ const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
-  border: '1.5px dotted',
+  border: '2.5px dashed',
   height: '120px',
   display: 'flex',
   width: '100%',
+  minWidth: '200px',
   borderRadius: '5px',
-  borderColor: theme.palette.primary.main,
+  borderColor: theme.palette.border.primary,
   justifyContent: 'center',
   alignItems: 'center',
+  padding: '8px',
+  textAlign: 'center',
   '&:hover': {
     borderColor: theme.palette.primary.light,
     backgroundColor: theme.palette.secondary.light,

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

@@ -18,6 +18,7 @@ import {
   Typography,
 } from '../../export';
 import { FiltersAnchor } from './components/Anchors';
+import { ManageFilters } from './components/ManageFilters/ManageFilters';
 import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
@@ -64,6 +65,8 @@ export const PageHeader = ({
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
 
+  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
+
   const dispatch = useDispatch();
 
   const wrapProps = (element: ReactElement): ReactElement => {
@@ -100,6 +103,10 @@ export const PageHeader = ({
 
   const isTableMode = columns && uniqueId;
 
+  const finalFilterComponents = filterComponents.filter(
+    (filter) => !hiddenLabels.includes(filter.props['label']),
+  );
+
   return (
     <motion.div
       style={{
@@ -149,10 +156,10 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {filterComponents.map((filter, index) => (
+          {finalFilterComponents.map((filter, index) => (
             <Fragment key={index}>
               {wrapProps(filter)}
-              {index < filterComponents.length - 1 && (
+              {index < finalFilterComponents.length - 1 && (
                 <Divider
                   orientation="vertical"
                   style={{
@@ -163,6 +170,27 @@ export const PageHeader = ({
               )}
             </Fragment>
           ))}
+          <ManageFilters
+            filterLabels={filterComponents.map((filter) => {
+              return filter.props['label'] || 'Label Not Found';
+            })}
+            selectedFilterLabels={finalFilterComponents.map(
+              (filter) => filter.props['label'] || 'Label Not Found',
+            )}
+            handleCheckboxChange={function (
+              label: string,
+              checked: boolean,
+            ): void {
+              if (checked) {
+                setHiddenLabels(hiddenLabels.filter((l) => label !== l));
+              } else {
+                setHiddenLabels([...hiddenLabels, label]);
+              }
+            }}
+            handleReset={() => {
+              setHiddenLabels([]);
+            }}
+          />
         </Stack>
       )}
     </motion.div>

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

@@ -0,0 +1,172 @@
+import {
+  MenuListProps,
+  MenuProps,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useState } from 'react';
+import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
+import { DropdownMenu } from '../../../../Navigation/export';
+
+export type ManageFiltersProps = {
+  filterLabels: string[];
+  selectedFilterLabels: string[];
+  handleCheckboxChange: (label: string, checked: boolean) => void;
+  handleReset: () => void;
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+};
+
+const FooterContainerContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  borderRadius: '4px',
+  height: '40px',
+}));
+
+export const ManageFiltersMenuFooter = ({
+  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 ManageFilters = ({
+  filterLabels,
+  selectedFilterLabels,
+  handleCheckboxChange,
+  handleReset,
+  ...props
+}: ManageFiltersProps) => {
+  const theme = useTheme();
+  const [search, setSearch] = useState<string>('');
+
+  const filteredOptions = filterLabels.filter((label) =>
+    label.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  return (
+    <DropdownMenu
+      menuListProps={{
+        sx: {
+          padding: '0px',
+          width: '250px',
+        },
+        ...props.menuListProps,
+      }}
+      anchor={({ open }: { open: (e: any) => void }) => (
+        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
+          {<Icons.ConfigureIcon />} Manage Filters
+        </Button>
+      )}
+      menuProps={{
+        ...props.menuProps,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left',
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left',
+        },
+      }}
+      menuHeader={
+        <SearchBar
+          fullWidth
+          size="small"
+          placeholder="Search"
+          onSearch={(value) => {
+            setSearch(value);
+          }}
+        />
+      }
+      menuListContainerSx={{
+        margin: '12px 12px 0px 12px',
+        gap: 0,
+        maxHeight: '310px',
+        overflowY: 'scroll',
+      }}
+      menu={filteredOptions.map((item, index) => (
+        <SingleCheckBox
+          key={index}
+          formControlLabelProps={{
+            labelPlacement: 'start',
+            sx: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              margin: '0px',
+              width: '100%',
+              '.MuiFormControlLabel-label': {
+                width: '100%',
+              },
+            },
+          }}
+          icon={<Icons.VisibilityOffIcon />}
+          checkedIcon={<Icons.VisibilityIcon />}
+          checked={selectedFilterLabels.includes(item)}
+          label={
+            <Typography
+              color={
+                !selectedFilterLabels.includes(item)
+                  ? theme.palette.text.tertiary
+                  : theme.palette.text.primary
+              }
+              variant="subtitle3"
+            >
+              {item}
+            </Typography>
+          }
+          onChange={(e) => {
+            handleCheckboxChange(item, e.target.checked);
+          }}
+        />
+      ))}
+      menuFooter={<ManageFiltersMenuFooter onClick={handleReset} />}
+    />
+  );
+};
+
+// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
+//   height: '40px',
+//   width: '40px',
+//   backgroundColor: theme.palette.secondary.main,
+//   borderRadius: '5px',
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+// }));
+
+/* <DropDownIcon
+  icon={{
+    icon: (
+      <Badge
+        overlap="circular"
+        variant={values.length > 0 ? 'dot' : 'standard'}
+      >
+        <FilterAnchorContainer>
+          <FilterViewIcon />
+        </FilterAnchorContainer>
+      </Badge>
+    ),
+  }}
+  handleClick={open}
+/>; */

package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx

@@ -7,7 +7,7 @@ import {
   StackProps,
   useTheme,
 } from '@mui/material';
-import { Fragment, ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
@@ -73,6 +73,7 @@ export const DropdownMenu = ({
         }}
         MenuListProps={{
           ...menuListProps,
+          // sx: { padding: '0px' },
         }}
         {...menuProps}
       >
@@ -96,12 +97,12 @@ export const DropdownMenu = ({
           {useMenuSlot && menuSlot
             ? menuSlot({ close: handleClose })
             : menuItems.map((item, index) => (
-                <Fragment key={index}>
+                <div key={index}>
                   {item}
                   {index < menuItems.length - 1 && (
                     <Divider flexItem sx={{ margin: '0 !important' }} />
                   )}
-                </Fragment>
+                </div>
               ))}
         </Stack>
         {menuFooter}

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -12,6 +12,7 @@ export interface TabsContainerProps {
   onTabChange?: (tabKey: string) => void;
   currentTabIndex?: number;
   tabsProps: TabsProps;
+  variant?: 'fixed' | 'dynamic';
 }
 
 const TabContent = styled(Box)(({ theme }) => ({
@@ -27,11 +28,19 @@ const TabContent = styled(Box)(({ theme }) => ({
   },
 }));
 
+const DynamicContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: 'max-content',
+  backgroundColor: theme.palette.surface.paperBackground,
+  '&::-webkit-scrollbar': { display: 'none' },
+}));
+
 export const TabsContainer = ({
   tabs,
   onTabChange,
   currentTabIndex = 0,
   tabsProps,
+  variant = 'fixed',
 }: TabsContainerProps) => {
   const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex]?.key);
 
@@ -67,9 +76,15 @@ export const TabsContainer = ({
           />
         ))}
       </Tabs>
-      <TabContent>
-        {tabs.find((tab) => tab?.key === currentTab)?.component}
-      </TabContent>
+      {variant === 'fixed' ? (
+        <TabContent>
+          {tabs.find((tab) => tab?.key === currentTab)?.component}
+        </TabContent>
+      ) : (
+        <DynamicContent>
+          {tabs.find((tab) => tab?.key === currentTab)?.component}
+        </DynamicContent>
+      )}
     </>
   );
 };

package/src/components/Navigation/export.ts

@@ -7,7 +7,6 @@ export * from './DropDownMenu/DropDownButton';
 export * from './DropDownMenu/DropDownIcon';
 export * from './DropDownMenu/DropDownMenu';
 export * from './DropDownMenu/DropdownMenuItem';
-export * from './ManageFilters/ManageFilters';
 export * from './PreviewFiles/PreviewFiles';
 export * from './Sidebar/Sidebar';
 export * from './Stepper/Stepper';

package/src/stories/Navigation/FileUpload.stories.tsx

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { StoryFn } from '@storybook/react/*';
+import { FileUpload, FileUploadProps } from '../../components/export';
+
+export default {
+  title: 'Navigation/FileUpload',
+  component: FileUpload,
+  argTypes: {
+    onChange: { action: 'onChange' },
+    handleRemove: { action: 'handleRemove' },
+    onInvalidFile: { action: 'onInvalidFile' },
+    label: { control: 'text' },
+    accept: { control: 'text' },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    hideDeleteButton: { control: 'boolean' },
+    showImage: { control: 'boolean' },
+    errorText: { control: 'text' },
+  },
+};
+
+const Template: StoryFn<FileUploadProps> = (args: any) => (
+  <FileUpload {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Upload File',
+  files: [],
+  onChange: action('onChange'),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const AcceptOnlyPDF = Template.bind({});
+AcceptOnlyPDF.args = {
+  ...Default.args,
+  accept: '.pdf',
+};

package/src/components/Navigation/ManageFilters/ManageFilters.tsx

@@ -1,130 +0,0 @@
-import { MenuListProps, MenuProps, Typography } from '@mui/material';
-import { ReactNode, useState } from 'react';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
-import { DropdownMenu } from '../export';
-
-type Options = {
-  label: string;
-  value: ReactNode;
-};
-
-export type ManageFiltersProps = {
-  options: Options[];
-  onChange: (values: ReactNode[]) => void;
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-};
-
-export const ManageFilters = ({
-  options,
-  onChange,
-  ...props
-}: ManageFiltersProps) => {
-  const [values, setValues] = useState<Options[]>([]);
-  const [search, setSearch] = useState<string>('');
-
-  const filteredOptions = options.filter((option) =>
-    option.label.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  const handleCheckboxChange = (
-    value: ReactNode,
-    label: string,
-    checked: boolean,
-  ) => {
-    const updatedValues = checked
-      ? [...values, { label, value }]
-      : values.filter((v) => v.label !== label);
-    setValues(updatedValues);
-    onChange(updatedValues.map((v) => v.value));
-  };
-
-  return (
-    <DropdownMenu
-      menuListProps={{
-        sx: {
-          padding: '12px',
-          width: '250px',
-        },
-        ...props.menuListProps,
-      }}
-      anchor={({ open }: { open: (e: any) => void }) => (
-        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
-          {<Icons.ConfigureIcon />} Manage Filters
-        </Button>
-      )}
-      menuProps={{
-        ...props.menuProps,
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left',
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-      }}
-      menuHeader={
-        <SearchBar
-          fullWidth
-          size="small"
-          placeholder="Search"
-          onSearch={(value) => {
-            setSearch(value);
-          }}
-        />
-      }
-      menuListContainerSx={{
-        margin: '10px 5px 0px 5px',
-        gap: 1,
-        maxHeight: '350px',
-      }}
-      menu={filteredOptions.map((item, index) => (
-        <SingleCheckBox
-          key={index}
-          formControlLabelProps={{
-            labelPlacement: 'start',
-            sx: {
-              display: 'flex',
-              justifyContent: 'space-between',
-              marginLeft: '0px',
-            },
-          }}
-          icon={<Icons.VisibilityIcon />}
-          checkedIcon={<Icons.VisibilityOffIcon />}
-          checked={values.map((s) => s.label).includes(item.label)}
-          label={<Typography variant="subtitle3">{item.label}</Typography>}
-          onChange={(e) => {
-            handleCheckboxChange(item.value, item.label, e.target.checked);
-          }}
-        />
-      ))}
-    />
-  );
-};
-
-// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
-//   height: '40px',
-//   width: '40px',
-//   backgroundColor: theme.palette.secondary.main,
-//   borderRadius: '5px',
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'center',
-// }));
-
-/* <DropDownIcon
-  icon={{
-    icon: (
-      <Badge
-        overlap="circular"
-        variant={values.length > 0 ? 'dot' : 'standard'}
-      >
-        <FilterAnchorContainer>
-          <FilterViewIcon />
-        </FilterAnchorContainer>
-      </Badge>
-    ),
-  }}
-  handleClick={open}
-/>; */