From 45c3664612fe26dbb4a756874e83e66f16d8a84a Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 11 Dec 2023 14:48:11 +0530
Subject: [PATCH] fix(configure): toolbar components

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 .../custom/CustomColumnVisibilityControl.tsx  | 118 +++++++------
 packages/components/src/custom/SearchBar.tsx  |  23 ++-
 .../components/src/custom/UniversalFilter.tsx | 166 ++++++++++--------
 3 files changed, 167 insertions(+), 140 deletions(-)

diff --git a/packages/components/src/custom/CustomColumnVisibilityControl.tsx b/packages/components/src/custom/CustomColumnVisibilityControl.tsx
index 1e639c5a..374df7d4 100644
--- a/packages/components/src/custom/CustomColumnVisibilityControl.tsx
+++ b/packages/components/src/custom/CustomColumnVisibilityControl.tsx
@@ -15,6 +15,7 @@ export interface CustomColumnVisibilityControlProps {
     setColumnVisibility: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
   };
   style?: React.CSSProperties;
+  id: string;
 }
 
 export interface CustomColumn {
@@ -24,6 +25,7 @@ export interface CustomColumn {
 
 export function CustomColumnVisibilityControl({
   columns,
+  id,
   customToolsProps
 }: CustomColumnVisibilityControlProps): JSX.Element {
   const [open, setOpen] = React.useState(false);
@@ -48,64 +50,66 @@ export function CustomColumnVisibilityControl({
 
   return (
     <React.Fragment>
-      <TooltipIcon
-        title="View Columns"
-        onClick={handleOpen}
-        icon={<ColumnIcon fill="#3c494f" />}
-        arrow
-      />
-      <PopperListener
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        placement="bottom-end"
-        modifiers={[
-          {
-            name: 'flip',
-            options: {
-              enabled: false
+      <div id={id}>
+        <TooltipIcon
+          title="View Columns"
+          onClick={handleOpen}
+          icon={<ColumnIcon fill="#3c494f" />}
+          arrow
+        />
+        <PopperListener
+          open={Boolean(anchorEl)}
+          anchorEl={anchorEl}
+          placement="bottom-end"
+          modifiers={[
+            {
+              name: 'flip',
+              options: {
+                enabled: false
+              }
+            },
+            {
+              name: 'preventOverflow',
+              options: {
+                enabled: true,
+                boundariesElement: 'scrollParent'
+              }
             }
-          },
-          {
-            name: 'preventOverflow',
-            options: {
-              enabled: true,
-              boundariesElement: 'scrollParent'
-            }
-          }
-        ]}
-        // transition
-      >
-        <Box>
-          <ClickAwayListener onClickAway={handleClose}>
-            <div>
-              <Card
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  padding: '1rem',
-                  boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
-                  background: '#f4f5f7'
-                }}
-              >
-                {columns.map((col) => (
-                  <FormControlLabel
-                    key={col.name}
-                    control={
-                      <Checkbox
-                        checked={customToolsProps.columnVisibility[col.name]}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          handleColumnVisibilityChange(col.name, e.target.checked)
-                        }
-                      />
-                    }
-                    label={col.label}
-                  />
-                ))}
-              </Card>
-            </div>
-          </ClickAwayListener>
-        </Box>
-      </PopperListener>
+          ]}
+          // transition
+        >
+          <Box>
+            <ClickAwayListener onClickAway={handleClose}>
+              <div>
+                <Card
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: '1rem',
+                    boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
+                    background: '#f4f5f7'
+                  }}
+                >
+                  {columns.map((col) => (
+                    <FormControlLabel
+                      key={col.name}
+                      control={
+                        <Checkbox
+                          checked={customToolsProps.columnVisibility[col.name]}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleColumnVisibilityChange(col.name, e.target.checked)
+                          }
+                        />
+                      }
+                      label={col.label}
+                    />
+                  ))}
+                </Card>
+              </div>
+            </ClickAwayListener>
+          </Box>
+        </PopperListener>
+      </div>
     </React.Fragment>
   );
 }
diff --git a/packages/components/src/custom/SearchBar.tsx b/packages/components/src/custom/SearchBar.tsx
index cc959441..aad0600c 100644
--- a/packages/components/src/custom/SearchBar.tsx
+++ b/packages/components/src/custom/SearchBar.tsx
@@ -51,14 +51,25 @@ function SearchBar({
     }
   };
 
-  const handleClickAway = (): void => {
-    if (expanded) {
-      setExpanded(false);
-    }
-  };
+  // const handleClickAway = (): void => {
+  //   if (expanded) {
+  //     setExpanded(false);
+  //   }
+  // };
 
   return (
-    <ClickAwayListener onClickAway={handleClickAway}>
+    <ClickAwayListener
+      onClickAway={(event) => {
+        const isTable = (event.target as HTMLElement)?.closest('#ref');
+
+        if (searchText !== '') {
+          return;
+        }
+        if (isTable) {
+          handleClearIconClick(); // Close the search bar as needed
+        }
+      }}
+    >
       <div>
         <TextField
           variant="standard"
diff --git a/packages/components/src/custom/UniversalFilter.tsx b/packages/components/src/custom/UniversalFilter.tsx
index baf5ffbe..28d9ce88 100644
--- a/packages/components/src/custom/UniversalFilter.tsx
+++ b/packages/components/src/custom/UniversalFilter.tsx
@@ -21,6 +21,7 @@ export interface UniversalFilterProps {
   setSelectedFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   handleApplyFilter: () => void;
   showAllOption?: boolean;
+  id: string;
 }
 
 function UniversalFilter({
@@ -28,7 +29,8 @@ function UniversalFilter({
   selectedFilters,
   setSelectedFilters,
   handleApplyFilter,
-  showAllOption = true
+  showAllOption = true,
+  id
 }: UniversalFilterProps): JSX.Element {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
@@ -53,7 +55,7 @@ function UniversalFilter({
   };
 
   const canBeOpen = open && Boolean(anchorEl);
-  const id = canBeOpen ? 'transition-popper' : undefined;
+  const idx = canBeOpen ? 'transition-popper' : undefined;
 
   const handleClose = () => {
     setAnchorEl(null);
@@ -62,84 +64,94 @@ function UniversalFilter({
 
   return (
     <React.Fragment>
-      <TooltipIcon title="Close" onClick={handleClick} icon={<FilterIcon fill="#3c494f" />} arrow />
-      <PopperListener
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        placement="bottom-end"
-        modifiers={[
-          {
-            name: 'flip',
-            options: {
-              enabled: false
+      <div id={id}>
+        <TooltipIcon
+          title="Close"
+          onClick={handleClick}
+          icon={<FilterIcon fill="#3c494f" />}
+          arrow
+        />
+        <PopperListener
+          id={idx}
+          open={open}
+          anchorEl={anchorEl}
+          placement="bottom-end"
+          modifiers={[
+            {
+              name: 'flip',
+              options: {
+                enabled: false
+              }
+            },
+            {
+              name: 'preventOverflow',
+              options: {
+                enabled: true,
+                boundariesElement: 'scrollParent'
+              }
             }
-          },
-          {
-            name: 'preventOverflow',
-            options: {
-              enabled: true,
-              boundariesElement: 'scrollParent'
-            }
-          }
-        ]}
-        // transition
-      >
-        <div>
-          <ClickAwayListener
-            onClickAway={handleClose}
-            mouseEvent="onMouseDown"
-            touchEvent="onTouchStart"
-          >
-            <Paper
-              sx={{
-                padding: '1rem',
-                paddingTop: '1.8rem',
-                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-                backgroundColor: '#f4f5f7'
-              }}
+          ]}
+          // transition
+        >
+          <div>
+            <ClickAwayListener
+              onClickAway={handleClose}
+              mouseEvent="onMouseDown"
+              touchEvent="onTouchStart"
             >
-              {Object.keys(filters).map((filterColumn) => {
-                const options = filters[filterColumn].options;
-                return (
-                  <div key={filterColumn} role="presentation">
-                    <InputLabel id={filters[filterColumn].name}>
-                      {filters[filterColumn].name}
-                    </InputLabel>
-                    <Select
-                      defaultValue="All"
-                      key={filterColumn}
-                      value={selectedFilters[filterColumn]}
-                      onChange={(e: SelectChangeEvent<unknown>) =>
-                        handleFilterChange(e as React.ChangeEvent<{ value: string }>, filterColumn)
-                      }
-                      style={{
-                        width: '15rem',
-                        marginBottom: '1rem'
-                      }}
-                      inputProps={{ 'aria-label': 'Without label' }}
-                      displayEmpty
-                    >
-                      {showAllOption && <MenuItem value="All">All</MenuItem>}
-                      {options.map((option) => (
-                        <MenuItem key={option.value} value={option.value}>
-                          {option.label}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  </div>
-                );
-              })}
+              <Paper
+                sx={{
+                  padding: '1rem',
+                  paddingTop: '1.8rem',
+                  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+                  backgroundColor: '#f4f5f7'
+                }}
+              >
+                {Object.keys(filters).map((filterColumn) => {
+                  const options = filters[filterColumn].options;
+                  return (
+                    <div key={filterColumn} role="presentation">
+                      <InputLabel id={filters[filterColumn].name}>
+                        {filters[filterColumn].name}
+                      </InputLabel>
+                      <Select
+                        defaultValue="All"
+                        key={filterColumn}
+                        value={selectedFilters[filterColumn]}
+                        onChange={(e: SelectChangeEvent<unknown>) =>
+                          handleFilterChange(
+                            e as React.ChangeEvent<{ value: string }>,
+                            filterColumn
+                          )
+                        }
+                        style={{
+                          width: '15rem',
+                          marginBottom: '1rem'
+                        }}
+                        inputProps={{ 'aria-label': 'Without label' }}
+                        displayEmpty
+                      >
+                        {showAllOption && <MenuItem value="All">All</MenuItem>}
+                        {options.map((option) => (
+                          <MenuItem key={option.value} value={option.value}>
+                            {option.label}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </div>
+                  );
+                })}
 
-              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                <Button variant="contained" onClick={handleApplyOnClick}>
-                  Apply
-                </Button>
-              </div>
-            </Paper>
-          </ClickAwayListener>
-        </div>
-      </PopperListener>
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                  <Button variant="contained" onClick={handleApplyOnClick}>
+                    Apply
+                  </Button>
+                </div>
+              </Paper>
+            </ClickAwayListener>
+          </div>
+        </PopperListener>
+      </div>
     </React.Fragment>
   );
 }