@campxdev/react-blueprint 1.6.9 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

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

@@ -1,18 +1,10 @@
-import {
-  AutocompleteCloseReason,
-  AutocompleteProps,
-  Box,
-  Autocomplete as MuiAutocomplete,
-  Paper,
-} from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteProps } from '@mui/material';
 import axios, { AxiosInstance } from 'axios';
-import _, { debounce, startCase } from 'lodash';
-import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
+import _ from 'lodash';
+import { SyntheticEvent, useEffect, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Spinner } from '../../Feedback/Spinner/Spinner';
-import { TextField } from '../TextField/TextField';
-import { OptionsLoader } from '../components/OptionsLoader';
-import { OptionContainer } from '../styles';
+import { SingleFilter } from './components/SingleFilter';
+import { SingleInput } from './components/SingleInput';
 import {
   SingleSelectActionsTypes,
   singleSelectReducer,
@@ -58,6 +50,7 @@ export type SingleSelectProps = {
   onChange?: (value: any) => void;
   error?: any;
   helperText?: string;
+  type?: 'input' | 'filter';
 } & Omit<
   AutocompleteProps<
     { label: string; subLabel?: string; value: any } | any,
@@ -75,32 +68,14 @@ export type SingleSelectProps = {
   | 'renderInput'
 >;
 
-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 const SingleSelect = ({
   options,
   optionsApiEndPoint,
   optionsApiEndpointParams,
   externalAxios,
-  required = false,
-  label,
-  name,
   getValue,
   value,
   onChange,
-  error,
-  helperText,
   dbValueProps = {
     valueKey: 'id',
     isObjectId: false,
@@ -114,6 +89,7 @@ export const SingleSelect = ({
   },
   onOpen,
   onClose,
+  type = 'input',
   ...restProps
 }: SingleSelectProps) => {
   const generateOptionsMap = (options: any[]) => {
@@ -133,16 +109,7 @@ export const SingleSelect = ({
   };
 
   const [state, dispatch] = useReducer(singleSelectReducer, initialState);
-  const {
-    open,
-    loadingInternalOptions,
-    loadingInitialInternalOptions,
-    internalOptions,
-    limit,
-    offset,
-    hasMore,
-    search,
-  } = state;
+  const { internalOptions, limit, offset, hasMore, search } = state;
 
   const internalAxios = externalAxios || axios;
 
@@ -358,19 +325,6 @@ export const SingleSelect = ({
     }
   };
 
-  const debouncedSendRequest = useMemo(() => {
-    return debounce((searchValue) => {
-      if (optionsApiEndPoint) searchDb(searchValue);
-    }, 300);
-  }, [searchDb]);
-
-  const handleSearch = async (e: any) => {
-    if (e) {
-      const searchValue = e.target.value;
-      debouncedSendRequest(searchValue);
-    }
-  };
-
   const loadSelectedOptions = async () => {
     dispatch({
       actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
@@ -418,87 +372,40 @@ export const SingleSelect = ({
     }
   }, []);
 
-  if (loadingInitialInternalOptions) {
-    return (
-      <TextField
-        label={label}
-        name={name}
-        required={required}
-        InputProps={{
-          endAdornment: <Spinner />,
-        }}
-        error={error}
-        helperText={helperText}
-      />
-    );
-  }
-
   if (!onChange) {
     return <Typography>onChange Missing</Typography>;
   }
 
+  if (type === 'filter')
+    return (
+      <SingleFilter
+        onChange={onChange}
+        searchDb={searchDb}
+        handleOpen={handleOpen}
+        handleClose={handleClose}
+        handleScroll={handleScroll}
+        state={state}
+        optionsApiEndPoint={optionsApiEndPoint}
+        getValue={getValue}
+        value={value}
+        dbLabelProps={dbLabelProps}
+        {...restProps}
+      />
+    );
+
   return (
-    <MuiAutocomplete
+    <SingleInput
+      onChange={onChange}
+      searchDb={searchDb}
+      handleOpen={handleOpen}
+      handleClose={handleClose}
+      handleScroll={handleScroll}
+      state={state}
+      optionsApiEndPoint={optionsApiEndPoint}
+      getValue={getValue}
+      value={value}
+      dbLabelProps={dbLabelProps}
       {...restProps}
-      onChange={(e, value) => {
-        onChange(getValue ? getValue(value) : value?.value);
-      }}
-      onInputCapture={handleSearch}
-      open={open}
-      autoFocus={true}
-      filterOptions={(options, state) => {
-        if (optionsApiEndPoint) {
-          return options;
-        }
-        return options.filter((option) =>
-          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
-        );
-      }}
-      value={state.internalOptionsMap[value]}
-      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>
-        );
-      }}
-      ListboxProps={{
-        ...restProps.ListboxProps,
-        onScroll: handleScroll,
-      }}
-      slotProps={{
-        ...restProps.slotProps,
-        paper: {
-          ...restProps.slotProps?.paper,
-          loadingOptions: loadingInternalOptions,
-          isSearch: !!state.search,
-        },
-      }}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      options={internalOptions}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          required={required}
-          name={name}
-          error={error}
-          helperText={helperText}
-        />
-      )}
     />
   );
 };

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

@@ -0,0 +1,228 @@
+import { KeyboardArrowDown } from '@mui/icons-material';
+import {
+  AutocompleteCloseReason,
+  FormControlLabel,
+  RadioGroup as MuiRadioGroup,
+  Paper,
+  Radio,
+  useTheme,
+} from '@mui/material';
+import { startCase } from 'lodash';
+import { SyntheticEvent, useState } from 'react';
+import {
+  Button,
+  DropdownMenu,
+  Icons,
+  SearchBar,
+  SingleSelectProps,
+  Typography,
+} from '../../../export';
+import { OptionsLoader } from '../../components/OptionsLoader';
+import { OptionContainer } from '../../styles';
+import { SingleSelectState } from '../singleSelectReducer';
+
+declare module '@mui/material/Autocomplete' {
+  interface AutocompletePaperSlotPropsOverrides {
+    loadingOptions: boolean;
+    isSearch: boolean;
+  }
+}
+
+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>;
+  handleOpen: (event: SyntheticEvent) => Promise<void>;
+  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  handleScroll: (event: any) => Promise<void>;
+  state: SingleSelectState;
+} & SingleSelectProps;
+
+export const SingleFilter = ({
+  options,
+  optionsApiEndPoint,
+  optionsApiEndpointParams,
+  externalAxios,
+  required = false,
+  label,
+  name,
+  getValue,
+  value,
+  onChange,
+  error,
+  helperText,
+  dbValueProps = {
+    valueKey: 'id',
+    isObjectId: false,
+    isInt: false,
+    isFloat: false,
+  },
+  dbLabelProps = {
+    labelKey: '',
+    useLabelStartCase: false,
+    useSubLabelStartCase: false,
+  },
+  onOpen,
+  onClose,
+  searchDb,
+  handleOpen,
+  handleClose,
+  handleScroll,
+  state,
+  ...restProps
+}: SingleFilterProps) => {
+  const {
+    loadingInitialInternalOptions,
+    internalOptions,
+    internalOptionsMap,
+    loadingInternalOptions,
+    search,
+  } = state;
+
+  const [localSearch, setLocalSearch] = useState(search);
+
+  const searchLocal = (searchValue: string) => {
+    setLocalSearch(searchValue);
+  };
+
+  const theme = useTheme();
+
+  const validValue = !!internalOptionsMap[value];
+
+  return (
+    <>
+      <DropdownMenu
+        menuListProps={{
+          sx: {
+            padding: '12px',
+            width: '250px',
+          },
+        }}
+        anchor={({ open }: { open: (e: any) => void }) => (
+          <Button
+            onClick={(e) => {
+              open(e);
+              handleOpen(e);
+            }}
+            loading={loadingInitialInternalOptions}
+            sx={{
+              gap: '1px',
+              borderRadius: '20px',
+            }}
+            variant="contained"
+            background={
+              validValue
+                ? theme.palette.highlight.greenBackground
+                : theme.palette.surface.grey
+            }
+            hoverBackground={
+              validValue
+                ? theme.palette.highlight.greenBackground
+                : theme.palette.surface.grey
+            }
+            color={theme.palette.text.primary}
+            endIcon={<KeyboardArrowDown />}
+          >
+            {validValue
+              ? label + ' = ' + internalOptionsMap[value].label
+              : label}
+          </Button>
+        )}
+        menuProps={{
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left',
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+          },
+        }}
+        menuHeader={
+          <SearchBar
+            fullWidth
+            size="small"
+            placeholder="Search"
+            onSearch={optionsApiEndPoint ? searchDb : searchLocal}
+          />
+        }
+        menuListContainerSx={{
+          gap: '10px',
+          minHeight: '310px',
+          maxHeight: '310px',
+          overflow: 'scroll',
+          overflowY: 'auto',
+          marginTop: '10px',
+        }}
+        handleMenuScroll={handleScroll}
+        menuSlot={({ close }) => {
+          return (
+            <MuiRadioGroup
+              onChange={(e) => {
+                onChange(e.target.value);
+              }}
+              name={name}
+              value={value}
+            >
+              {internalOptions
+                ?.filter(
+                  (option) =>
+                    (localSearch && option.label.includes(localSearch)) ||
+                    !localSearch,
+                )
+                ?.map((option, index) => (
+                  <FormControlLabel
+                    sx={{
+                      margin: '0px',
+                      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>
+                    }
+                  />
+                ))}
+            </MuiRadioGroup>
+          );
+        }}
+        menuFooter={
+          <OptionsLoader loading={loadingInternalOptions} isSearch={!!search} />
+        }
+        useMenuSlot
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,165 @@
+import {
+  AutocompleteCloseReason,
+  Box,
+  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 { TextField } from '../../TextField/TextField';
+import { OptionsLoader } from '../../components/OptionsLoader';
+import { OptionContainer } from '../../styles';
+import { SingleSelectState } from '../singleSelectReducer';
+
+declare module '@mui/material/Autocomplete' {
+  interface AutocompletePaperSlotPropsOverrides {
+    loadingOptions: boolean;
+    isSearch: boolean;
+  }
+}
+
+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 SingleInputProps = {
+  onChange: (value: any) => void;
+  searchDb: (searchValue: string) => Promise<void>;
+  handleOpen: (event: SyntheticEvent) => Promise<void>;
+  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  handleScroll: (event: any) => Promise<void>;
+  state: SingleSelectState;
+} & SingleSelectProps;
+
+export const SingleInput = ({
+  required = false,
+  optionsApiEndPoint,
+  label,
+  name,
+  getValue,
+  value,
+  onChange,
+  error,
+  helperText,
+  dbLabelProps = {
+    labelKey: '',
+    useLabelStartCase: false,
+    useSubLabelStartCase: false,
+  },
+  searchDb,
+  handleOpen,
+  handleClose,
+  handleScroll,
+  state,
+  ...restProps
+}: SingleInputProps) => {
+  const {
+    open,
+    loadingInitialInternalOptions,
+    internalOptions,
+    loadingInternalOptions,
+  } = state;
+
+  const debouncedSendRequest = useMemo(() => {
+    return debounce((searchValue) => {
+      if (optionsApiEndPoint) searchDb(searchValue);
+    }, 300);
+  }, [searchDb]);
+
+  const handleSearch = async (e: any) => {
+    if (e) {
+      const searchValue = e.target.value;
+      debouncedSendRequest(searchValue);
+    }
+  };
+
+  if (loadingInitialInternalOptions) {
+    return (
+      <TextField
+        label={label}
+        name={name}
+        required={required}
+        InputProps={{
+          endAdornment: <Spinner />,
+        }}
+        error={error}
+        helperText={helperText}
+      />
+    );
+  }
+  return (
+    <MuiAutocomplete
+      {...restProps}
+      onChange={(e, value) => {
+        onChange(getValue ? getValue(value) : value?.value);
+      }}
+      onInputCapture={handleSearch}
+      open={open}
+      autoFocus={true}
+      filterOptions={(options, state) => {
+        if (optionsApiEndPoint) {
+          return options;
+        }
+        return options.filter((option) =>
+          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
+        );
+      }}
+      value={state.internalOptionsMap[value]}
+      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>
+        );
+      }}
+      ListboxProps={{
+        ...restProps.ListboxProps,
+        onScroll: handleScroll,
+      }}
+      slotProps={{
+        ...restProps.slotProps,
+        paper: {
+          ...restProps.slotProps?.paper,
+          loadingOptions: loadingInternalOptions,
+          isSearch: !!state.search,
+        },
+      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      options={internalOptions}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          required={required}
+          name={name}
+          error={error}
+          helperText={helperText}
+        />
+      )}
+    />
+  );
+};

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

@@ -1,7 +1,15 @@
 import { Box, Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { AnimatePresence, motion } from 'framer-motion';
-import { ReactNode, useState } from 'react';
+import {
+  cloneElement,
+  Fragment,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
 import {
   DensitySelector,
   Icons,
@@ -18,6 +26,7 @@ import { SearchBar } from './components/SearchBar';
 interface PageHeaderProps {
   uniqueId?: string;
   viewsSlot?: ReactNode;
+  filterComponents?: ReactElement[];
   actions?: ReactNode[];
   columns?: GridColDef[];
   searchText?: string;
@@ -50,13 +59,33 @@ const motionDivVariants = {
 
 export const PageHeader = ({
   uniqueId,
-  actions,
+  actions = [],
+  filterComponents = [],
   columns,
   viewsSlot = <Box></Box>,
   searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
   const [expandedSearch, setExpandedSearch] = useState(false);
+  const dispatch = useDispatch();
+
+  const wrapProps = (element: ReactElement): ReactElement => {
+    const { name } = element.props;
+    if (name && uniqueId) {
+      return cloneElement(element, {
+        onChange: (value: any) => {
+          dispatch(
+            setFilterByNameForUniqueId({
+              uniqueId,
+              name,
+              value,
+            }),
+          );
+        },
+      });
+    }
+    return element;
+  };
 
   const theme = useTheme();
 
@@ -142,7 +171,7 @@ export const PageHeader = ({
             </AnimatePresence>
           )}
           {isTableMode && <DensitySelector uniqueId={uniqueId} />}
-          {actions?.map((action, index) => action)}
+          {actions.map((action, index) => action)}
         </Stack>
       </Stack>
       {expanded && (
@@ -154,16 +183,32 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {columns && uniqueId && (
-            <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
+          {isTableMode && (
+            <>
+              <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
+              <Divider
+                orientation="vertical"
+                style={{
+                  height: '20px',
+                  background: theme.palette.border.primary,
+                }}
+              />
+            </>
           )}
-          <Divider
-            orientation="vertical"
-            style={{
-              height: '20px',
-              background: theme.palette.border.primary,
-            }}
-          />
+          {filterComponents.map((filter, index) => (
+            <Fragment key={index}>
+              {wrapProps(filter)}
+              {index < filterComponents.length - 1 && (
+                <Divider
+                  orientation="vertical"
+                  style={{
+                    height: '20px',
+                    background: theme.palette.border.primary,
+                  }}
+                />
+              )}
+            </Fragment>
+          ))}
           <Stack direction="row"></Stack>
         </Stack>
       )}

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

@@ -11,20 +11,28 @@ import { Fragment, ReactNode, useState } from 'react';
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
-  menu: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
+  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
+  menuSlot?: (props: { close: () => void }) => ReactNode;
+  useMenuSlot?: boolean;
   menuProps?: Omit<MenuProps, 'open'>;
   menuListProps?: MenuListProps;
   menuListContainerSx?: StackProps['sx'];
   menuHeader?: ReactNode;
+  menuFooter?: ReactNode;
+  handleMenuScroll?: (event: any) => Promise<void>;
 };
 
 export const DropdownMenu = ({
   menuProps,
   menu = [],
+  menuSlot,
+  useMenuSlot = false,
   menuListProps,
   menuHeader,
+  menuFooter,
   menuListContainerSx,
   anchor,
+  handleMenuScroll,
 }: DropdownMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
@@ -70,6 +78,8 @@ export const DropdownMenu = ({
       >
         {menuHeader}
         <Stack
+          component="div"
+          onScroll={handleMenuScroll}
           direction={'column'}
           sx={{
             ...menuListContainerSx,
@@ -83,15 +93,18 @@ export const DropdownMenu = ({
             },
           }}
         >
-          {menuItems.map((item, index) => (
-            <Fragment key={index}>
-              {item}
-              {index < menuItems.length - 1 && (
-                <Divider flexItem sx={{ margin: '0 !important' }} />
-              )}
-            </Fragment>
-          ))}
+          {useMenuSlot && menuSlot
+            ? menuSlot({ close: handleClose })
+            : menuItems.map((item, index) => (
+                <Fragment key={index}>
+                  {item}
+                  {index < menuItems.length - 1 && (
+                    <Divider flexItem sx={{ margin: '0 !important' }} />
+                  )}
+                </Fragment>
+              ))}
         </Stack>
+        {menuFooter}
       </Menu>
     </>
   );

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

@@ -53,7 +53,17 @@ export const ManageFilters = ({
           {<Icons.ConfigureIcon />} Manage Filters
         </Button>
       )}
-      menuProps={{ ...props.menuProps }}
+      menuProps={{
+        ...props.menuProps,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left',
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left',
+        },
+      }}
       menuHeader={
         <SearchBar
           fullWidth
@@ -65,14 +75,23 @@ export const ManageFilters = ({
         />
       }
       menuListContainerSx={{
-        margin: '10px 2px 0px 2px',
+        margin: '10px 5px 0px 5px',
         gap: 1,
         maxHeight: '350px',
-        overflow: 'scroll',
       }}
       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) => {

package/src/redux/slices/pageHeaderSlice.ts

@@ -81,6 +81,16 @@ export const pageHeaderSlice = createSlice({
         filters: defaultFilters,
       };
     },
+    setFilterByNameForUniqueId: (state, action) => {
+      const { uniqueId, name, value } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          [name]: value,
+        },
+      };
+    },
   },
 });
 
@@ -92,4 +102,5 @@ export const {
   setDefaultFiltersForUniqueId,
   setLimitForUniqueId,
   setOffsetForUniqueId,
+  setFilterByNameForUniqueId,
 } = pageHeaderSlice.actions;

package/src/utils/breadcrumbs.ts

@@ -1,17 +1,16 @@
 import _ from 'lodash';
 
 export const getBreadcrumbsCharacter = () => {
-  const unicodeChar = String.fromCharCode(0x21e5);
+  const unicodeChar = String.fromCharCode(0x21e5),
+    fallbackChar = '~~';
+
   const testElement = document.createElement('span');
   testElement.innerHTML = unicodeChar;
   document.body.appendChild(testElement);
   const isRendered = testElement.offsetWidth > 0;
   document.body.removeChild(testElement);
 
-  const fallbackChar = '~~';
-  const s = isRendered ? unicodeChar : fallbackChar;
-
-  return s;
+  return isRendered ? unicodeChar : fallbackChar;
 };
 
 type CreateUrlSlug = {
@@ -21,3 +20,8 @@ type CreateUrlSlug = {
 export const createBreadcrumbIdSlug = ({ name, id }: CreateUrlSlug): string => {
   return `${_.kebabCase(name)}${getBreadcrumbsCharacter()}${id}`;
 };
+
+export const splitBreadcrumbIdSlug = (param: string) => {
+  const [name, id] = param.split(getBreadcrumbsCharacter());
+  return { name, id };
+};