@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/commons/components/app/providers/AppBarProvider.tsx

@@ -1,48 +0,0 @@
-import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { AppBarContext, type AppNotificationService } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import type { AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import AppBreadcrumbsProvider from '@cccsaurora/howler-ui/commons/components/app/providers/AppBreadcrumbsProvider';
-import AppNotificationServiceProvider from '@cccsaurora/howler-ui/commons/components/app/providers/AppNotificationProvider';
-import AppQuickSearchProvider from '@cccsaurora/howler-ui/commons/components/app/providers/AppQuickSearchProvider';
-import AppSwitcherProvider from '@cccsaurora/howler-ui/commons/components/app/providers/AppSwitcherProvider';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import { useMemo, useState, type ReactElement } from 'react';
-
-const { LS_KEY_AUTOHIDE_APPBAR } = AppStorageKeys;
-
-type AppTopNavProviderProps = {
-  search?: AppSearchService;
-  notification?: AppNotificationService;
-  children: ReactElement | ReactElement[];
-};
-
-export default function AppBarProvider({ search, notification, children }: AppTopNavProviderProps) {
-  const configs = useAppConfigs();
-  const [show, setShow] = useState<boolean>(true);
-  const [autoHide, setAutoHide] = useLocalStorageItem<boolean>(
-    LS_KEY_AUTOHIDE_APPBAR,
-    configs.preferences.defaultAutoHideAppbar
-  );
-  const context = useMemo(
-    () => ({
-      show,
-      autoHide: configs.preferences.allowAutoHideTopbar && autoHide,
-      setShow,
-      setAutoHide,
-      toggleAutoHide: () => setAutoHide(!autoHide)
-    }),
-    [configs.preferences.allowAutoHideTopbar, show, autoHide, setAutoHide]
-  );
-  return (
-    <AppBarContext.Provider value={context}>
-      <AppBreadcrumbsProvider>
-        <AppSwitcherProvider>
-          <AppNotificationServiceProvider service={notification}>
-            <AppQuickSearchProvider search={search}>{children}</AppQuickSearchProvider>
-          </AppNotificationServiceProvider>
-        </AppSwitcherProvider>
-      </AppBreadcrumbsProvider>
-    </AppBarContext.Provider>
-  );
-}

package/commons/components/app/providers/AppBreadcrumbsProvider.tsx

@@ -1,53 +0,0 @@
-import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { getRoute, useAppSitemap, type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSitemap';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { AppBreadcrumbsContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { useAppConfigs, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-
-const { LS_KEY_BREADCRUMBS_ENABLED } = AppStorageKeys;
-
-type AppBreadcrumbsProviderProps = {
-  children: ReactNode;
-};
-
-export default function AppBreadcrumbsProvider({ children }: AppBreadcrumbsProviderProps) {
-  const { pathname } = useLocation();
-  const { sitemap, preferences } = useAppConfigs();
-  const user = useAppUser();
-  const { appendRoute } = useAppSitemap();
-  const isUserReady = user.isReady();
-
-  // States.
-  const [items, setItems] = useState<BreadcrumbItem[]>([]);
-  const [show, setShow] = useLocalStorageItem<boolean>(LS_KEY_BREADCRUMBS_ENABLED, preferences.defaultShowBreadcrumbs);
-
-  // Reset the breadcrumbs if the user ready state changes.
-  useEffect(() => {
-    setItems(appendRoute([getRoute('/', sitemap.routes)], getRoute(pathname, sitemap.routes)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isUserReady]);
-
-  // The return callback will ensure the event handler deregisters when component
-  //  is unmounted.  Failure to do this will result in an event handler
-  //  being registered each time this component renders.
-  useEffect(() => {
-    const _matchedRoute = getRoute(pathname, sitemap.routes);
-    setItems(_items => appendRoute(_items, _matchedRoute));
-  }, [pathname, appendRoute, sitemap.routes]);
-
-  // Memoized context value.
-  const context = useMemo(() => {
-    return {
-      show: preferences.allowBreadcrumbs && show,
-      items,
-      setItems,
-      toggle: () => setShow(!show),
-      last: () => (items.length > 0 ? items[items.length - 1] : items[0]),
-      first: () => items[0]
-    };
-  }, [preferences.allowBreadcrumbs, show, items, setShow]);
-  return <AppBreadcrumbsContext.Provider value={context}>{children}</AppBreadcrumbsContext.Provider>;
-}

package/commons/components/app/providers/AppLayoutProvider.tsx

@@ -1,114 +0,0 @@
-import { CssBaseline, styled, useMediaQuery, useTheme } from '@mui/material';
-import { type AppLayoutMode } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { AppLayoutContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { useAppConfigs, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import LeftNavDrawer from '@cccsaurora/howler-ui/commons/components/leftnav/LeftNavDrawer';
-import AppBar from '@cccsaurora/howler-ui/commons/components/topnav/AppBar';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import { useCallback, useMemo, useState, type ReactNode } from 'react';
-
-const { LS_KEY_LAYOUT_MODE } = AppStorageKeys;
-
-const AppHorizontal = styled('div')({
-  '@media print': {
-    overflow: 'unset !important'
-  },
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column'
-});
-
-const AppVertical = styled('div')({
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'row',
-  position: 'relative'
-});
-
-const AppVerticalLeft = styled('div')(({ theme }) => ({
-  height: '100%',
-  [theme.breakpoints.down('md')]: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0
-  }
-}));
-
-const AppVerticalRight = styled('div')({
-  '@media print': {
-    overflow: 'unset !important'
-  },
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-  flex: 1,
-  height: '100%',
-  minWidth: 0
-});
-
-type AppLayoutProps = {
-  children: ReactNode;
-};
-
-export default function AppLayoutProvider({ children }: AppLayoutProps) {
-  const muiTheme = useTheme();
-  const { preferences } = useAppConfigs();
-  const user = useAppUser();
-  const isSM = useMediaQuery(muiTheme.breakpoints.only('sm'));
-  const isPrinting = useMediaQuery('print');
-
-  // Layout related states.
-  const [current, setCurrent] = useLocalStorageItem<AppLayoutMode>(LS_KEY_LAYOUT_MODE, preferences.defaultLayout);
-  const [layoutReady, setLayoutReady] = useState<boolean>(false);
-  const [showMenus, setShowMenus] = useState<boolean>(true);
-
-  // Callback to toggle between 'side' and 'top' layouts.
-  const toggle = useCallback(() => setCurrent(current === 'top' ? 'side' : 'top'), [current, setCurrent]);
-
-  // Callback to hide topnav and leftnav.
-  const hideMenus = useCallback(() => setShowMenus(false), []);
-
-  // Callback to indicate whether the app layout is ready to be fully rendered.
-  const setReady = useCallback(isReady => setLayoutReady(isReady), []);
-
-  // Memoize the value of the context provider.
-  const context = useMemo(() => {
-    return {
-      ready: layoutReady,
-      current: preferences.allowLayoutSelection ? current : preferences.defaultLayout,
-      hideMenus,
-      setReady,
-      toggle
-    };
-  }, [current, preferences.allowLayoutSelection, preferences.defaultLayout, hideMenus, layoutReady, setReady, toggle]);
-
-  return (
-    <AppLayoutContext.Provider value={context}>
-      <CssBaseline enableColorScheme />
-      {context.current === 'side' ? (
-        <AppVertical>
-          <AppVerticalLeft>{user.isReady() && layoutReady && showMenus && <LeftNavDrawer />}</AppVerticalLeft>
-          <AppVerticalRight
-            id="app-scrollct"
-            style={{ overflow: 'auto', paddingLeft: showMenus && isSM && !isPrinting ? muiTheme.spacing(7) : 0 }}
-          >
-            {user.isReady() && layoutReady && showMenus && <AppBar />}
-            {children}
-          </AppVerticalRight>
-        </AppVertical>
-      ) : (
-        <AppHorizontal id="app-scrollct" style={{ overflow: 'auto' }}>
-          {user.isReady() && layoutReady && showMenus && <AppBar />}
-          <AppVertical>
-            <AppVerticalLeft>{user.isReady() && layoutReady && showMenus && <LeftNavDrawer />}</AppVerticalLeft>
-            <AppVerticalRight style={{ paddingLeft: showMenus && isSM && !isPrinting ? muiTheme.spacing(7) : 0 }}>
-              {children}
-            </AppVerticalRight>
-          </AppVertical>
-        </AppHorizontal>
-      )}
-    </AppLayoutContext.Provider>
-  );
-}

package/commons/components/app/providers/AppLeftNavProvider.tsx

@@ -1,30 +0,0 @@
-import { type AppLeftNavElement } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { AppLeftNavContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import { useCallback, useMemo, useState, type ReactNode } from 'react';
-
-const { LS_KEY_LEFTNAV_OPEN } = AppStorageKeys;
-
-type LeftNavProviderProps = {
-  children: ReactNode;
-};
-
-export default function AppLeftNavProvider({ children }: LeftNavProviderProps) {
-  const { preferences } = useAppConfigs();
-  const [open, setOpen] = useLocalStorageItem(LS_KEY_LEFTNAV_OPEN, preferences.defaultDrawerOpen);
-  const [elements, setElements] = useState<AppLeftNavElement[]>();
-  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
-  const context = useMemo(
-    () => ({
-      open,
-      elements: elements || preferences.leftnav.elements,
-      setOpen,
-      setElements,
-      toggle
-    }),
-    [open, elements, preferences.leftnav.elements, setOpen, toggle]
-  );
-  return <AppLeftNavContext.Provider value={context}>{children}</AppLeftNavContext.Provider>;
-}

package/commons/components/app/providers/AppNotificationProvider.tsx

@@ -1,49 +0,0 @@
-import {
-  AppNotificationServiceContext,
-  type AppNotificationService,
-  type AppNotificationServiceContextType,
-  type AppNotificationServiceState
-} from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { useMemo, useState, type ReactElement } from 'react';
-
-const DEFAULT_CONTEXT: AppNotificationServiceContextType = {
-  provided: false,
-  service: {
-    feedUrls: [],
-    notificationRenderer: null
-  },
-  state: { urls: [], set: () => null }
-};
-
-export default function AppNotificationServiceProvider({
-  service,
-  children
-}: {
-  service?: AppNotificationService;
-  children: ReactElement | ReactElement[];
-}) {
-  // Default implementation of the AppNotificationService using configuration preferences.
-  const defaultService: AppNotificationService = useMemo(() => {
-    return {
-      feedUrls: null,
-      notificationRenderer: null
-    };
-  }, []);
-
-  const [state, setState] = useState<AppNotificationServiceState>(DEFAULT_CONTEXT.state);
-
-  // Memoize context value to prevent unnecessary renders.0
-  const context = useMemo(
-    () => ({
-      provided: !!service,
-      service: service || defaultService,
-      state: {
-        ...state,
-        set: setState
-      }
-    }),
-    [service, defaultService, state]
-  );
-
-  return <AppNotificationServiceContext.Provider value={context}>{children}</AppNotificationServiceContext.Provider>;
-}

package/commons/components/app/providers/AppQuickSearchProvider.tsx

@@ -1,32 +0,0 @@
-import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
-import { AppQuickSearchContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { type AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import AppSearchServiceProvider from '@cccsaurora/howler-ui/commons/components/app/providers/AppSearchServiceProvider';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
-import { useMemo, type ReactElement } from 'react';
-
-const { LS_KEY_SHOW_QUICK_SEARCH } = AppStorageKeys;
-
-type AppQuickSearchProviderProps = {
-  search?: AppSearchService;
-  children: ReactElement | ReactElement[];
-};
-
-export default function AppQuickSearchProvider({ search, children }: AppQuickSearchProviderProps) {
-  const { preferences } = useAppConfigs();
-  const [show, setShow] = useLocalStorageItem(LS_KEY_SHOW_QUICK_SEARCH, preferences.defaultShowQuickSearch);
-  const context = useMemo(
-    () => ({
-      show: preferences.allowQuickSearch && show,
-      setShow,
-      toggle: () => setShow(!show)
-    }),
-    [preferences.allowQuickSearch, show, setShow]
-  );
-  return (
-    <AppQuickSearchContext.Provider value={context}>
-      <AppSearchServiceProvider service={search}>{children}</AppSearchServiceProvider>
-    </AppQuickSearchContext.Provider>
-  );
-}

package/commons/components/app/providers/AppSearchServiceProvider.tsx

@@ -1,65 +0,0 @@
-import {
-  AppSearchServiceContext,
-  type AppSearchServiceContextType,
-  type AppSearchServiceState
-} from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import type { AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { useMemo, useState, type ReactElement } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-const DEFAULT_CONTEXT: AppSearchServiceContextType = {
-  provided: false,
-  service: {
-    itemRenderer: () => <div />
-  },
-  state: {
-    searching: false,
-    menu: false,
-    mode: 'inline',
-    items: null,
-    set: () => null
-  }
-};
-
-export default function AppSearchServiceProvider<T = any>({
-  service,
-  children
-}: {
-  service?: AppSearchService<T>;
-  children: ReactElement | ReactElement[];
-}) {
-  // Hooks required for default implementation.
-  const navigate = useNavigate();
-  const { preferences } = useAppConfigs();
-
-  // Default implementation of the AppSearchService using configuration preferences.
-  const defaultService: AppSearchService<any> = useMemo(() => {
-    const searchUri = preferences.topnav.quickSearchURI;
-    const params = preferences.topnav.quickSearchParam;
-    return {
-      onEnter: (value: string) => {
-        navigate(`${searchUri}?${params}=${encodeURIComponent(value)}`);
-      },
-      itemRenderer: () => <div />
-    };
-  }, [preferences, navigate]);
-
-  // The state of the search service.
-  const [state, setState] = useState<AppSearchServiceState<T>>(DEFAULT_CONTEXT.state);
-
-  // Memoize context value to prevent unnecessary renders.
-  const context = useMemo(
-    () => ({
-      provided: !!service,
-      service: service || defaultService,
-      state: {
-        ...state,
-        set: setState
-      }
-    }),
-    [service, defaultService, state]
-  );
-
-  return <AppSearchServiceContext.Provider value={context}>{children}</AppSearchServiceContext.Provider>;
-}

package/commons/components/app/providers/AppSnackbarProvider.tsx

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material';
-import { SnackbarProvider } from 'notistack';
-
-const StyledSnackbarProvider = styled(SnackbarProvider)`
-  & .SnackbarItem-message {
-    word-break: break-all;
-  }
-`;
-
-// Wrap SnackbarProvider into its own component so we can use theme base breakpoints
-//  to calculate css styles.
-// This has to be done as child of AppContextProvider and in a separate component in order
-//  to ensure the ThemeProvider is already initialized.
-export default function AppSnackbarProvider({ children }) {
-  return <StyledSnackbarProvider>{children}</StyledSnackbarProvider>;
-}

package/commons/components/app/providers/AppSwitcherProvider.tsx

@@ -1,16 +0,0 @@
-import type { AppSwitcherItem } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { useMemo, useState, type ReactNode } from 'react';
-
-import { AppSwitcherContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-
-type AppSwitcherProviderProps = {
-  children: ReactNode;
-};
-
-export default function AppSwitcherProvider({ children }: AppSwitcherProviderProps) {
-  const { preferences } = useAppConfigs();
-  const [items, setItems] = useState<AppSwitcherItem[]>(preferences.topnav.apps || []);
-  const context = useMemo(() => ({ items, empty: !items || items.length === 0, setItems }), [items]);
-  return <AppSwitcherContext.Provider value={context}>{children}</AppSwitcherContext.Provider>;
-}

package/commons/components/app/providers/AppUserProvider.tsx

@@ -1,22 +0,0 @@
-import { AppUserContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import type { AppUser, AppUserService } from '@cccsaurora/howler-ui/commons/components/app/AppUserService';
-import { type ReactNode } from 'react';
-
-type AppUserProviderProps<U extends AppUser> = {
-  service: AppUserService<U>;
-  children: ReactNode;
-};
-
-const AppUserServiceImpl = {
-  user: null,
-  setUser: () => null,
-  isReady: () => false,
-  validateProps: () => true
-};
-
-export default function AppUserProvider<U extends AppUser>({
-  service = AppUserServiceImpl,
-  children
-}: AppUserProviderProps<U>) {
-  return <AppUserContext.Provider value={{ ...AppUserServiceImpl, ...service }}>{children}</AppUserContext.Provider>;
-}

package/commons/components/breadcrumbs/BreadcrumbIcon.tsx

@@ -1,21 +0,0 @@
-import { useTheme } from '@mui/material';
-import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSitemap';
-
-type BreadcrumbIconProps = {
-  item: BreadcrumbItem;
-};
-
-const BreadcrumbIcon: React.FC<BreadcrumbIconProps> = ({ item }) => {
-  const theme = useTheme();
-  const {
-    route: { icon }
-  } = item;
-  return icon ? (
-    <>
-      {icon}
-      <span style={{ marginRight: theme.spacing(1) }} />
-    </>
-  ) : null;
-};
-
-export default BreadcrumbIcon;

package/commons/components/breadcrumbs/BreadcrumbLastItem.tsx

@@ -1,40 +0,0 @@
-import { Tooltip, Typography } from '@mui/material';
-import { useAppSitemap, type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import BreadcrumbIcon from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbIcon';
-
-type BreadcrumbLastItemProps = {
-  textOnly?: boolean;
-  item: BreadcrumbItem;
-};
-
-const BreadcrumbLastItem: React.FC<BreadcrumbLastItemProps> = ({ item, textOnly }) => {
-  const { route, matcher } = item;
-  const { getTitle: resolveTitle } = useAppSitemap();
-  const url = matcher ? matcher.pathname : route.path;
-
-  return (
-    <Typography
-      key={`bcrumb-${url}`}
-      style={{
-        display: 'flex',
-        alignItems: 'center'
-      }}
-    >
-      {!textOnly && <BreadcrumbIcon item={item} />}
-      <Tooltip title={url}>
-        <span
-          style={{
-            maxWidth: route.textWidth || '200px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}
-        >
-          {resolveTitle(item)}
-        </span>
-      </Tooltip>
-    </Typography>
-  );
-};
-
-export default BreadcrumbLastItem;

package/commons/components/breadcrumbs/BreadcrumbLinkItem.tsx

@@ -1,43 +0,0 @@
-import { Link, Tooltip } from '@mui/material';
-import { useAppSitemap, type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import BreadcrumbIcon from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbIcon';
-import { Link as RouterLink } from 'react-router-dom';
-
-type BreadcrumbLinkItemProps = {
-  textOnly?: boolean;
-  item: BreadcrumbItem;
-};
-
-const BreadcrumbLinkItem: React.FC<BreadcrumbLinkItemProps> = ({ item, textOnly }) => {
-  const { route, matcher } = item;
-  const { getTitle: resolveTitle } = useAppSitemap();
-  const url = matcher ? matcher.pathname : route.path;
-  return (
-    <Link
-      component={RouterLink}
-      key={`bcrumb-${url}`}
-      color="inherit"
-      to={url}
-      style={{
-        display: 'flex',
-        alignItems: 'center'
-      }}
-    >
-      {!textOnly && <BreadcrumbIcon item={item} />}
-      <Tooltip title={url}>
-        <span
-          style={{
-            maxWidth: route.textWidth || '200px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}
-        >
-          {resolveTitle(item)}
-        </span>
-      </Tooltip>
-    </Link>
-  );
-};
-
-export default BreadcrumbLinkItem;

package/commons/components/breadcrumbs/BreadcrumbList.tsx

@@ -1,87 +0,0 @@
-import { MoreHoriz } from '@mui/icons-material';
-import { Breadcrumbs as MuiBreadcrumbs, Tooltip } from '@mui/material';
-import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import BreadcrumbLastItem from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbLastItem';
-import BreadcrumbLinkItem from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbLinkItem';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type BreadcrumbListProps = {
-  disableStyle?: boolean;
-  textOnly?: boolean;
-  isStatic?: boolean;
-  itemsBefore?: number;
-  itemsAfter?: number;
-  items: BreadcrumbItem[];
-};
-
-const splitItems = (
-  items: BreadcrumbItem[],
-  itemsBeforeCount: number,
-  itemsAfterCount: number,
-  expanded: boolean,
-  isStatic: boolean
-): { before: BreadcrumbItem[]; after: BreadcrumbItem[]; hasEllipsis: boolean } => {
-  const _items = items.concat().filter(i => !i.route.exclude);
-  const hasEllipsis = _items.length > itemsBeforeCount + itemsAfterCount;
-  if (!hasEllipsis || isStatic) {
-    return { before: null, after: _items, hasEllipsis: false };
-  }
-  const before = _items.slice(0, itemsBeforeCount);
-  const after = expanded ? _items.slice(itemsBeforeCount) : _items.slice(_items.length - itemsAfterCount);
-  return { before, after, hasEllipsis: hasEllipsis || expanded };
-};
-
-const BreadcrumbsEllipsis = ({ onClick, expanded }) => {
-  const { t } = useTranslation();
-  return (
-    <Tooltip title={t(expanded ? 'tooltip.breadcrumbs.min' : 'tooltip.breadcrumbs.max')}>
-      <MoreHoriz
-        fontSize="small"
-        sx={{
-          verticalAlign: 'bottom',
-          marginTop: '5px',
-          display: 'inline-flex',
-          '&:hover': {
-            cursor: 'pointer'
-          }
-        }}
-        onClick={onClick}
-      />
-    </Tooltip>
-  );
-};
-
-export default function BreadcrumbList({
-  items,
-  disableStyle,
-  itemsBefore,
-  itemsAfter,
-  textOnly,
-  isStatic
-}: BreadcrumbListProps) {
-  const [expanded, setExpanded] = useState<boolean>(false);
-  const { before, after, hasEllipsis } = splitItems(items, itemsBefore, itemsAfter, expanded, isStatic);
-  const last = after.length > 0 ? after.pop() : null;
-  return (
-    <MuiBreadcrumbs
-      aria-label="breadcrumb"
-      maxItems={1000}
-      style={{
-        ...(!disableStyle && {
-          color: 'inherit',
-          display: 'flex',
-          alignItems: 'center',
-          flexGrow: 2
-        })
-      }}
-    >
-      {before &&
-        before.map(item => <BreadcrumbLinkItem key={`bcrumb-${item.route.path}`} item={item} textOnly={textOnly} />)}
-      {hasEllipsis && <BreadcrumbsEllipsis expanded={expanded} onClick={() => setExpanded(!expanded)} />}
-      {after &&
-        after.map(item => <BreadcrumbLinkItem key={`bcrumb-${item.route.path}`} item={item} textOnly={textOnly} />)}
-      {last && <BreadcrumbLastItem item={last} textOnly={textOnly} />}
-    </MuiBreadcrumbs>
-  );
-}