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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppNotificationServiceContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
+import { useMemo, useState } from 'react';
+const DEFAULT_CONTEXT = {
+    provided: false,
+    service: {
+        feedUrls: [],
+        notificationRenderer: null
+    },
+    state: { urls: [], set: () => null }
+};
+export default function AppNotificationServiceProvider({ service, children }) {
+    // Default implementation of the AppNotificationService using configuration preferences.
+    const defaultService = useMemo(() => {
+        return {
+            feedUrls: null,
+            notificationRenderer: null
+        };
+    }, []);
+    const [state, setState] = useState(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 _jsx(AppNotificationServiceContext.Provider, { value: context, children: children });
+}

package/commons/components/app/providers/AppQuickSearchProvider.d.ts

@@ -0,0 +1,8 @@
+import { type AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
+import { type ReactElement } from 'react';
+type AppQuickSearchProviderProps = {
+    search?: AppSearchService;
+    children: ReactElement | ReactElement[];
+};
+export default function AppQuickSearchProvider({ search, children }: AppQuickSearchProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppStorageKeys } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
+import { AppQuickSearchContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
+import {} 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 } from 'react';
+const { LS_KEY_SHOW_QUICK_SEARCH } = AppStorageKeys;
+export default function AppQuickSearchProvider({ search, children }) {
+    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 (_jsx(AppQuickSearchContext.Provider, { value: context, children: _jsx(AppSearchServiceProvider, { service: search, children: children }) }));
+}

package/commons/components/app/providers/AppSearchServiceProvider.d.ts

@@ -0,0 +1,6 @@
+import type { AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
+import { type ReactElement } from 'react';
+export default function AppSearchServiceProvider<T = any>({ service, children }: {
+    service?: AppSearchService<T>;
+    children: ReactElement | ReactElement[];
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppSearchServiceContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
+import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+const DEFAULT_CONTEXT = {
+    provided: false,
+    service: {
+        itemRenderer: () => _jsx("div", {})
+    },
+    state: {
+        searching: false,
+        menu: false,
+        mode: 'inline',
+        items: null,
+        set: () => null
+    }
+};
+export default function AppSearchServiceProvider({ service, children }) {
+    // Hooks required for default implementation.
+    const navigate = useNavigate();
+    const { preferences } = useAppConfigs();
+    // Default implementation of the AppSearchService using configuration preferences.
+    const defaultService = useMemo(() => {
+        const searchUri = preferences.topnav.quickSearchURI;
+        const params = preferences.topnav.quickSearchParam;
+        return {
+            onEnter: (value) => {
+                navigate(`${searchUri}?${params}=${encodeURIComponent(value)}`);
+            },
+            itemRenderer: () => _jsx("div", {})
+        };
+    }, [preferences, navigate]);
+    // The state of the search service.
+    const [state, setState] = useState(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 _jsx(AppSearchServiceContext.Provider, { value: context, children: children });
+}

package/commons/components/app/providers/AppSnackbarProvider.d.ts

@@ -0,0 +1,3 @@
+export default function AppSnackbarProvider({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(StyledSnackbarProvider, { children: children });
+}

package/commons/components/app/providers/AppSwitcherProvider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type AppSwitcherProviderProps = {
+    children: ReactNode;
+};
+export default function AppSwitcherProvider({ children }: AppSwitcherProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/commons/components/app/providers/AppUserProvider.d.ts

@@ -0,0 +1,8 @@
+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;
+};
+export default function AppUserProvider<U extends AppUser>({ service, children }: AppUserProviderProps<U>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppUserContext } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
+import {} from 'react';
+const AppUserServiceImpl = {
+    user: null,
+    setUser: () => null,
+    isReady: () => false,
+    validateProps: () => true
+};
+export default function AppUserProvider({ service = AppUserServiceImpl, children }) {
+    return _jsx(AppUserContext.Provider, { value: { ...AppUserServiceImpl, ...service }, children: children });
+}

package/commons/components/breadcrumbs/BreadcrumbIcon.d.ts

@@ -0,0 +1,6 @@
+import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSitemap';
+type BreadcrumbIconProps = {
+    item: BreadcrumbItem;
+};
+declare const BreadcrumbIcon: React.FC<BreadcrumbIconProps>;
+export default BreadcrumbIcon;

package/commons/components/breadcrumbs/BreadcrumbIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSitemap';
+const BreadcrumbIcon = ({ item }) => {
+    const theme = useTheme();
+    const { route: { icon } } = item;
+    return icon ? (_jsxs(_Fragment, { children: [icon, _jsx("span", { style: { marginRight: theme.spacing(1) } })] })) : null;
+};
+export default BreadcrumbIcon;

package/commons/components/breadcrumbs/BreadcrumbLastItem.d.ts

@@ -0,0 +1,7 @@
+import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+type BreadcrumbLastItemProps = {
+    textOnly?: boolean;
+    item: BreadcrumbItem;
+};
+declare const BreadcrumbLastItem: React.FC<BreadcrumbLastItemProps>;
+export default BreadcrumbLastItem;

package/commons/components/breadcrumbs/BreadcrumbLastItem.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, Typography } from '@mui/material';
+import { useAppSitemap } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import BreadcrumbIcon from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbIcon';
+const BreadcrumbLastItem = ({ item, textOnly }) => {
+    const { route, matcher } = item;
+    const { getTitle: resolveTitle } = useAppSitemap();
+    const url = matcher ? matcher.pathname : route.path;
+    return (_jsxs(Typography, { style: {
+            display: 'flex',
+            alignItems: 'center'
+        }, children: [!textOnly && _jsx(BreadcrumbIcon, { item: item }), _jsx(Tooltip, { title: url, children: _jsx("span", { style: {
+                        maxWidth: route.textWidth || '200px',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    }, children: resolveTitle(item) }) })] }, `bcrumb-${url}`));
+};
+export default BreadcrumbLastItem;

package/commons/components/breadcrumbs/BreadcrumbLinkItem.d.ts

@@ -0,0 +1,7 @@
+import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+type BreadcrumbLinkItemProps = {
+    textOnly?: boolean;
+    item: BreadcrumbItem;
+};
+declare const BreadcrumbLinkItem: React.FC<BreadcrumbLinkItemProps>;
+export default BreadcrumbLinkItem;

package/commons/components/breadcrumbs/BreadcrumbLinkItem.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Tooltip } from '@mui/material';
+import { useAppSitemap } 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';
+const BreadcrumbLinkItem = ({ item, textOnly }) => {
+    const { route, matcher } = item;
+    const { getTitle: resolveTitle } = useAppSitemap();
+    const url = matcher ? matcher.pathname : route.path;
+    return (_jsxs(Link, { component: RouterLink, color: "inherit", to: url, style: {
+            display: 'flex',
+            alignItems: 'center'
+        }, children: [!textOnly && _jsx(BreadcrumbIcon, { item: item }), _jsx(Tooltip, { title: url, children: _jsx("span", { style: {
+                        maxWidth: route.textWidth || '200px',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap'
+                    }, children: resolveTitle(item) }) })] }, `bcrumb-${url}`));
+};
+export default BreadcrumbLinkItem;

package/commons/components/breadcrumbs/BreadcrumbList.d.ts

@@ -0,0 +1,11 @@
+import { type BreadcrumbItem } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+type BreadcrumbListProps = {
+    disableStyle?: boolean;
+    textOnly?: boolean;
+    isStatic?: boolean;
+    itemsBefore?: number;
+    itemsAfter?: number;
+    items: BreadcrumbItem[];
+};
+export default function BreadcrumbList({ items, disableStyle, itemsBefore, itemsAfter, textOnly, isStatic }: BreadcrumbListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/commons/components/breadcrumbs/BreadcrumbList.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHoriz } from '@mui/icons-material';
+import { Breadcrumbs as MuiBreadcrumbs, Tooltip } from '@mui/material';
+import {} 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';
+const splitItems = (items, itemsBeforeCount, itemsAfterCount, expanded, isStatic) => {
+    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 (_jsx(Tooltip, { title: t(expanded ? 'tooltip.breadcrumbs.min' : 'tooltip.breadcrumbs.max'), children: _jsx(MoreHoriz, { fontSize: "small", sx: {
+                verticalAlign: 'bottom',
+                marginTop: '5px',
+                display: 'inline-flex',
+                '&:hover': {
+                    cursor: 'pointer'
+                }
+            }, onClick: onClick }) }));
+};
+export default function BreadcrumbList({ items, disableStyle, itemsBefore, itemsAfter, textOnly, isStatic }) {
+    const [expanded, setExpanded] = useState(false);
+    const { before, after, hasEllipsis } = splitItems(items, itemsBefore, itemsAfter, expanded, isStatic);
+    const last = after.length > 0 ? after.pop() : null;
+    return (_jsxs(MuiBreadcrumbs, { "aria-label": "breadcrumb", maxItems: 1000, style: {
+            ...(!disableStyle && {
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                flexGrow: 2
+            })
+        }, children: [before &&
+                before.map(item => _jsx(BreadcrumbLinkItem, { item: item, textOnly: textOnly }, `bcrumb-${item.route.path}`)), hasEllipsis && _jsx(BreadcrumbsEllipsis, { expanded: expanded, onClick: () => setExpanded(!expanded) }), after &&
+                after.map(item => _jsx(BreadcrumbLinkItem, { item: item, textOnly: textOnly }, `bcrumb-${item.route.path}`)), last && _jsx(BreadcrumbLastItem, { item: last, textOnly: textOnly })] }));
+}

package/commons/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ disableStyle }: {
+    disableStyle?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery, useTheme } from '@mui/material';
+import { useAppBreadcrumbs, useAppConfigs, useAppSitemap } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import BreadcrumbList from '@cccsaurora/howler-ui/commons/components/breadcrumbs/BreadcrumbList';
+import { memo, useMemo } from 'react';
+const Breadcrumbs = ({ disableStyle = false }) => {
+    const theme = useTheme();
+    const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+    const configs = useAppConfigs();
+    const breadcrumbs = useAppBreadcrumbs();
+    const sitemap = useAppSitemap();
+    const current = breadcrumbs.last();
+    const isStatic = !!current.route.breadcrumbs;
+    const isExpanded = isMedium;
+    const items = useMemo(() => {
+        let _items = null;
+        if (sitemap.is404(current)) {
+            _items = [current];
+        }
+        else if (isStatic) {
+            const staticBreadcrumbs = current.route.breadcrumbs.map(path => sitemap.getRoute(path));
+            _items = [...staticBreadcrumbs, current];
+        }
+        else {
+            _items = breadcrumbs.items;
+        }
+        return _items;
+    }, [current, isStatic, breadcrumbs, sitemap]);
+    return (_jsx(BreadcrumbList, { items: items, disableStyle: disableStyle, isStatic: isStatic, itemsBefore: isExpanded ? configs.sitemap.itemsBefore : 0, itemsAfter: isExpanded ? configs.sitemap.itemsAfter : 1 }));
+};
+export default memo(Breadcrumbs);

package/commons/components/display/AppAvatar.d.ts

@@ -0,0 +1,8 @@
+import { type AvatarProps } from '@mui/material';
+export type GravatarD = '404' | 'mp' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'blank';
+export type AppAvatarProps = {
+    d?: GravatarD;
+    url?: string;
+    email?: string;
+} & Omit<AvatarProps, 'src'>;
+export default function AppAvatar({ d, url, email, ...props }: AppAvatarProps): import("react/jsx-runtime").JSX.Element;

package/commons/components/display/AppAvatar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '@mui/material';
+import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppConfigs';
+import md5 from 'md5';
+import { useMemo } from 'react';
+export default function AppAvatar({ d, url, email, ...props }) {
+    const configs = useAppConfigs();
+    const avatarUrl = useMemo(() => url ||
+        (configs.preferences.allowGravatar
+            ? `https://s.gravatar.com/avatar/${email ? md5(email) : ''}?d=${d || configs.preferences.avatarD}`
+            : null), [configs, url, email, d]);
+    return (_jsx(Avatar, { ...props, sx: {
+            ...(props.sx || {}),
+            '&:hover': {
+                cursor: 'pointer'
+            }
+        }, src: avatarUrl }));
+}

package/commons/components/display/AppInfoPanel.d.ts

@@ -0,0 +1,5 @@
+import { type StackProps } from '@mui/material';
+export type AppInfoPanelProps = {
+    i18nKey: string;
+} & StackProps;
+export default function AppInfoPanel({ i18nKey, ...props }: AppInfoPanelProps): import("react/jsx-runtime").JSX.Element;

package/commons/components/display/AppInfoPanel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from '@mui/icons-material';
+import { Box, Stack, Typography, emphasize, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export default function AppInfoPanel({ i18nKey, ...props }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const bgColor = emphasize(theme.palette.background.default, 0.1);
+    const color = emphasize(bgColor, 0.4);
+    return (_jsxs(Stack, { ...props, direction: "row", p: 2, sx: {
+            ...props.sx,
+            alignItems: 'center',
+            borderRadius: 2,
+            backgroundColor: bgColor,
+            color: color
+        }, children: [_jsx(Info, { fontSize: "large" }), _jsx(Box, { m: 1 }), _jsx(Typography, { variant: "h5", children: t(i18nKey) })] }));
+}

package/commons/components/display/AppListEmpty.d.ts

@@ -0,0 +1,2 @@
+import { type AppInfoPanelProps } from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
+export default function AppListEmpty(props: Omit<AppInfoPanelProps, 'i18nKey'>): import("react/jsx-runtime").JSX.Element;

package/commons/components/display/AppListEmpty.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppInfoPanel, {} from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
+export default function AppListEmpty(props) {
+    return _jsx(AppInfoPanel, { ...props, i18nKey: "app.list.empty" });
+}

package/commons/components/display/AppToc.d.ts

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+export type AppTocItem = {
+    id: string;
+    subItems?: AppTocItem[];
+    is_admin?: boolean;
+};
+export type AppTocElementProps = {
+    translation: string;
+    item: AppTocItem;
+};
+type AppTocProps = {
+    children: ReactNode;
+    translation: string;
+    items: AppTocItem[];
+    titleI18nKey?: string;
+    topI18nKey?: string;
+};
+declare const _default: React.MemoExoticComponent<({ children, translation, items, titleI18nKey, topI18nKey }: AppTocProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/display/AppToc.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, useTheme } from '@mui/material';
+import { useAppBar } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppBar';
+import { useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppLayout';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
+import React, { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+const TocRoot = styled('div')(({ theme }) => ({
+    display: 'flex',
+    '.tocBar': {
+        display: 'none',
+        paddingLeft: '16px',
+        [theme.breakpoints.up('md')]: {
+            display: 'block'
+        }
+    },
+    '.toc': {
+        fontSize: '0.875rem',
+        listStyle: 'none',
+        paddingInlineStart: 0,
+        [theme.breakpoints.only('md')]: {
+            width: '124px'
+        },
+        [theme.breakpoints.up('lg')]: {
+            width: '164px'
+        },
+        '& li': {
+            color: theme.palette.text.primary,
+            marginLeft: theme.spacing(1),
+            marginBottom: theme.spacing(0.5),
+            paddingLeft: theme.spacing(1.25),
+            paddingRight: theme.spacing(1)
+        },
+        '& .active': {
+            borderLeft: `solid ${theme.palette.primary.main} 2px`,
+            paddingLeft: theme.spacing(1),
+            color: theme.palette.primary.main
+        },
+        '& li:hover': {
+            borderLeft: `solid ${theme.palette.text.disabled} 1px`,
+            paddingLeft: '9px',
+            color: theme.palette.text.disabled
+        },
+        '& li > a': {
+            color: 'inherit',
+            display: 'block',
+            textDecoration: 'none',
+            width: '100%'
+        }
+    },
+    '.ttop': {
+        paddingTop: theme.spacing(2.5),
+        marginLeft: theme.spacing(2.25),
+        color: theme.palette.text.primary,
+        '& a': {
+            color: 'inherit',
+            display: 'block',
+            textDecoration: 'none'
+        },
+        '& :hover': {
+            color: theme.palette.text.disabled
+        }
+    }
+}));
+const AppTocElement = ({ translation, item }) => {
+    const location = useLocation();
+    const { t } = useTranslation([translation]);
+    const currentHash = location.hash && location.hash !== '' ? location.hash.substring(1) : null;
+    const active = currentHash && currentHash.startsWith(item.id) ? 'active' : null;
+    const { user: currentUser } = useAppUser();
+    return ((!item.is_admin || (currentUser.is_admin && item.is_admin)) && (_jsxs(_Fragment, { children: [_jsx("li", { className: active, children: _jsx(Link, { to: `#${item.id}`, target: "_self", children: t(item.id) }) }), active && item.subItems && (_jsx("ul", { className: "toc", style: { fontSize: 'smaller', paddingInlineStart: '8px' }, children: item.subItems.map(itm => (_jsx(AppTocElement, { item: itm, translation: translation }, itm.id))) }))] })));
+};
+const AppToc = ({ children, translation, items, titleI18nKey = 'toc', topI18nKey = 'top' }) => {
+    const { autoHide: autoHideAppbar } = useAppBar();
+    const { current: currentLayout } = useAppLayout();
+    const theme = useTheme();
+    const location = useLocation();
+    const { t } = useTranslation([translation]);
+    useEffect(() => {
+        if (location.hash && location.hash !== '') {
+            const scrollElement = document.getElementById(location.hash.substring(1));
+            if (scrollElement) {
+                // If element exists already, use native scrollIntoView.
+                scrollElement.scrollIntoView(true);
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.log('[WARN] Trying to scroll to unknown ID:', location.hash);
+            }
+        }
+    }, [location.hash]);
+    return (_jsxs(TocRoot, { id: "top", children: [_jsx("div", { id: "content", children: children }), _jsx("div", { id: "toc", className: "tocBar", children: _jsxs("div", { style: {
+                        position: 'sticky',
+                        top: theme.spacing(autoHideAppbar && currentLayout !== 'top' ? 5 : 13)
+                    }, children: [titleI18nKey && _jsx("div", { style: { fontSize: '1.25rem', marginLeft: '18px' }, children: t(titleI18nKey) }), _jsxs("ul", { className: "toc", children: [items && items.map(item => _jsx(AppTocElement, { item: item, translation: translation }, item.id)), topI18nKey && (_jsx("div", { className: "ttop", children: _jsx(Link, { to: "#top", target: "_self", children: t(topI18nKey) }) }))] })] }) })] }));
+};
+export default memo(AppToc);

package/commons/components/display/hooks/useAppColor.d.ts

@@ -0,0 +1,5 @@
+import { colors } from '@mui/material';
+type MuiColorType = keyof typeof colors;
+type MuiColorVariant = keyof typeof colors.blue;
+export default function useAppColor(color?: MuiColorType, lightVariant?: MuiColorVariant, darkVariant?: MuiColorVariant): "#1e88e5" | "#1976d2" | "#42a5f5" | "#0d47a1" | "#90caf9" | "#64b5f6" | "#2196f3" | "#e3f2fd" | "#bbdefb" | "#1565c0" | "#82b1ff" | "#448aff" | "#2979ff" | "#2962ff";
+export {};

package/commons/components/display/hooks/useAppColor.js

@@ -0,0 +1,10 @@
+import { colors } from '@mui/material';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useMemo } from 'react';
+export default function useAppColor(color = 'grey', lightVariant = 100, darkVariant = 900) {
+    const { isDark } = useAppTheme();
+    return useMemo(() => {
+        // eslint-disable-next-line import/namespace
+        return colors[color][isDark ? darkVariant : lightVariant];
+    }, [isDark, color, lightVariant, darkVariant]);
+}

package/commons/components/leftnav/LeftNavDrawer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;