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

package/commons/components/search/AppSearchInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Search } from '@mui/icons-material';
+import { Button, CircularProgress, IconButton, InputAdornment, InputBase, Stack, Tooltip } from '@mui/material';
+import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+const AppSearchInput = ({ searching, provided, autoFocus, showToggle, value, open, onClear, onToggleFullscreen, onFocus, onChange, onKeyDown, ...inputProps }) => {
+    const { t } = useTranslation();
+    const rootRef = useRef();
+    // CTRL+K button click handler.
+    // Decicde whether to open search in normal or fullscreen/modal mode.
+    const onToggleClick = useCallback(() => {
+        if (open && provided) {
+            onToggleFullscreen();
+        }
+        else {
+            rootRef.current.querySelector('input').focus();
+        }
+    }, [open, provided, onToggleFullscreen]);
+    return (_jsx(Stack, { direction: "row", ref: rootRef, children: _jsx(InputBase, { ...inputProps, fullWidth: true, autoComplete: "off", autoFocus: autoFocus, value: value, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, placeholder: t('quicksearch.placeholder'), inputProps: { 'aria-label': t('quicksearch.aria') }, startAdornment: _jsx(InputAdornment, { position: "start", sx: theme => ({ color: theme.palette.text.disabled }), children: searching ? _jsx(CircularProgress, { size: 24, color: "inherit" }) : _jsx(Search, { color: "inherit" }) }), endAdornment: _jsxs(InputAdornment, { position: "end", sx: theme => ({ color: theme.palette.text.disabled }), children: [showToggle && (_jsx(Tooltip, { title: t(open && provided ? 'app.search.fullscreen' : 'app.search.shortcut'), children: _jsx(Button, { size: "small", color: "inherit", onClick: onToggleClick, children: "CTRL+K" }) })), _jsx(IconButton, { color: "inherit", onClick: onClear, children: _jsx(Clear, {}) })] }), sx: theme => ({
+                color: theme.palette.text.secondary,
+                width: '100%',
+                paddingTop: 0.5,
+                paddingBottom: 0.5,
+                paddingLeft: 1.5,
+                paddingRight: 1,
+                // backgroundColor: emphasize(theme.palette.background.default, 0.1),
+                // backgroundColor: theme.palette.background,
+                borderTopLeftRadius: theme.spacing(0.5),
+                borderTopRightRadius: theme.spacing(0.5),
+                borderBottomLeftRadius: open ? 0 : theme.spacing(0.5),
+                borderBottomRightRadius: open ? 0 : theme.spacing(0.5)
+                // boxShadow: theme.palette.mode === 'light' && theme.shadows[2]
+            }) }) }));
+};
+export default memo(AppSearchInput);

package/commons/components/search/AppSearchResult.d.ts

@@ -0,0 +1,4 @@
+import { type MenuListProps } from '@mui/material';
+type AppSearchResultProps = MenuListProps;
+declare const _default: import("react").MemoExoticComponent<({ className, ...menuProps }: AppSearchResultProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/search/AppSearchResult.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, MenuItem, MenuList, Typography } from '@mui/material';
+import { useAppSearchService } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSearchService';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+const AppSearchResult = ({ className, ...menuProps }) => {
+    const { t } = useTranslation();
+    const { state, service } = useAppSearchService();
+    const onKeyDown = (event, item) => {
+        const { isEnter, isEscape } = parseEvent(event);
+        if (isEnter) {
+            if (service.onItemSelect) {
+                service.onItemSelect(item, state);
+            }
+        }
+        else if (isEscape) {
+            state.set({ ...state, menu: false });
+        }
+    };
+    const options = useMemo(() => state.items?.reduce((_options, _item, index) => ({
+        ..._options,
+        [index]: { state, index, last: index === state.items.length - 1 }
+    }), {}), [state]);
+    return (_jsxs("div", { className: className, children: [_jsx(MenuList, { "data-tui-id": "tui-app-search-result", ...menuProps, children: state.items?.length > 0 ? (state.items.map((item, index) => (_jsx(MenuItem, { onKeyDown: event => onKeyDown(event, item), children: service.itemRenderer(item, options[index]) }, item.id)))) : state.items ? (_jsx(AppListEmpty, {})) : (_jsx(MenuItem, { disabled: true, children: _jsx(Box, { mt: 1, mb: 1, children: _jsx(Typography, { variant: "body2", children: _jsx("em", { children: t('app.search.starttyping') }) }) }) })) }), state.mode === 'inline' && service.footerRenderer && service.footerRenderer(state)] }));
+};
+export default memo(AppSearchResult);

package/commons/components/topnav/AppBar.d.ts

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

package/commons/components/topnav/AppBar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, AppBar as MuiAppBar, Toolbar, useMediaQuery, useTheme } from '@mui/material';
+import { useAppBar, useAppBreadcrumbs, useAppConfigs, useAppLayout, useAppQuickSearch } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { APPBAR_READY_EVENT } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppBarHeight';
+import Breadcrumbs from '@cccsaurora/howler-ui/commons/components/breadcrumbs/Breadcrumbs';
+import AppSearch from '@cccsaurora/howler-ui/commons/components/search/AppSearch';
+import AppName from '@cccsaurora/howler-ui/commons/components/topnav/AppName';
+import AppSwitcher from '@cccsaurora/howler-ui/commons/components/topnav/AppSwitcher';
+import { Notifications } from '@cccsaurora/howler-ui/commons/components/topnav/Notifications';
+import ThemeSelectionIcon from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelectionIcon';
+import UserProfile from '@cccsaurora/howler-ui/commons/components/topnav/UserProfile';
+import { memo, useCallback, useLayoutEffect, useMemo } from 'react';
+export const AppBarBase = ({ children }) => {
+    const layout = useAppLayout();
+    const configs = useAppConfigs();
+    const appbar = useAppBar();
+    const isTopLayout = layout.current === 'top';
+    const autoHide = !isTopLayout && appbar.autoHide;
+    const elevation = useMemo(() => {
+        if (layout.current === 'side') {
+            return 0;
+        }
+        return configs.theme.appbar?.elevation !== undefined ? configs.theme.appbar?.elevation : 1;
+    }, [layout, configs.theme.appbar?.elevation]);
+    return (_jsx(MuiAppBar, { id: "appbar", position: autoHide && !isTopLayout ? 'relative' : 'sticky', elevation: elevation, sx: theme => ({
+            '@media print': {
+                display: 'none !important'
+            },
+            [theme.breakpoints.only('xs')]: {
+                zIndex: theme.zIndex.drawer - 1
+            },
+            ...(isTopLayout
+                ? {
+                    zIndex: theme.zIndex.drawer + 1,
+                    ...(configs.theme.appbar ? configs.theme.appbar[theme.palette.mode] : {})
+                }
+                : {
+                    color: theme.palette.getContrastText(theme.palette.background.paper),
+                    backgroundColor: theme.palette.background.paper
+                })
+        }), children: children }));
+};
+const AppBar = () => {
+    // React Hooks.
+    const muiTheme = useTheme();
+    // TUI hooks.
+    const layout = useAppLayout();
+    const configs = useAppConfigs();
+    const breadcrumbs = useAppBreadcrumbs();
+    const quicksearch = useAppQuickSearch();
+    const { left, leftAfterBreadcrumbs, right, rightBeforeSearch, themeSelectionMode } = configs.preferences.topnav;
+    // media queries.
+    const isXs = useMediaQuery(muiTheme.breakpoints.only('xs'));
+    // const isSmUp = useMediaQuery(muiTheme.breakpoints.up('sm'));
+    const isMdDown = useMediaQuery(muiTheme.breakpoints.down('md'));
+    // const isMdUp = useMediaQuery(muiTheme.breakpoints.up('md'));
+    // compute some flags we need to perform render.
+    const isTopLayout = layout.current === 'top';
+    // const showSpacer = isXs || !quicksearch.show || (isMdUp && (breadcrumbs.show || !!left || !!leftAfterBreadcrumbs));
+    const showBreadcrumbs = breadcrumbs.show && !isMdDown;
+    // Once the dom is mounted, dispatch event to let listeners know
+    //  that the apppbar/topbar dom is available.
+    // Primary usecase is to initialize the 'useAppBarHeight' hook.
+    // That value doesn't initialize properly because it typically gets
+    //  called before the appbar is ready.
+    // The appbar/top bar is conditionally rendered on app/user ready state.
+    useLayoutEffect(() => {
+        window.dispatchEvent(new CustomEvent(APPBAR_READY_EVENT));
+    }, []);
+    const renderLeft = useCallback(() => (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
+        }, children: [(isTopLayout || isXs) && _jsx(AppName, { noName: isXs }), _jsx(Box, { sx: { ...(isTopLayout && { marginLeft: 3 }) } }), left, showBreadcrumbs && _jsx(Breadcrumbs, {}), leftAfterBreadcrumbs && (_jsx(Box, { sx: { ...(showBreadcrumbs && { marginLeft: 3, marginRight: 3 }) }, children: leftAfterBreadcrumbs }))] })), [showBreadcrumbs, leftAfterBreadcrumbs, isTopLayout, left, isXs]);
+    return (_jsx(AppBarBase, { children: _jsxs(Toolbar, { disableGutters: true, style: {
+                paddingLeft: !isXs && !isTopLayout ? muiTheme.spacing(2) : null,
+                paddingRight: muiTheme.spacing(1)
+            }, children: [renderLeft(), _jsx("div", { style: { flex: 1 } }), rightBeforeSearch, quicksearch.show && _jsx(AppSearch, {}), _jsx(Notifications, {}), right, themeSelectionMode === 'icon' && _jsx(ThemeSelectionIcon, {}), _jsx(AppSwitcher, {}), !configs.preferences.topnav.hideUserAvatar && _jsx(UserProfile, {})] }) }));
+};
+export default memo(AppBar);

package/commons/components/topnav/AppName.d.ts

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

package/commons/components/topnav/AppName.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@mui/icons-material';
+import { IconButton, styled, useMediaQuery, useTheme } from '@mui/material';
+import { useAppConfigs, useAppLeftNav, useAppLogo } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { memo } from 'react';
+import { Link } from 'react-router-dom';
+const StyledTitle = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    flex: '0 0 auto',
+    fontSize: '1.5rem',
+    letterSpacing: '-1px'
+});
+const StyledIcon = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0',
+    minWidth: theme.spacing(7)
+}));
+const AppName = ({ noName }) => {
+    const theme = useTheme();
+    const logo = useAppLogo();
+    const configs = useAppConfigs();
+    const leftnav = useAppLeftNav();
+    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
+    if (isXs) {
+        return (_jsxs(StyledTitle, { style: { paddingLeft: theme.spacing(2) }, children: [_jsx(StyledIcon, { children: _jsx(IconButton, { "aria-label": "open drawer", edge: "start", onClick: leftnav.toggle, size: "large", color: "inherit", children: _jsx(Menu, {}) }) }), _jsx("div", { children: !noName && configs.preferences.appName })] }));
+    }
+    return (_jsx(Link, { to: configs.preferences.appLink, style: { color: 'inherit', textDecoration: 'none', paddingLeft: theme.spacing(2) }, children: _jsxs(StyledTitle, { children: [_jsx(StyledIcon, { children: logo }), _jsx("div", { children: !noName && configs.preferences.appName })] }) }));
+};
+export default memo(AppName);

package/commons/components/topnav/AppSwitcher.d.ts

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

package/commons/components/topnav/AppSwitcher.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Apps } from '@mui/icons-material';
+import { Avatar, Button, ClickAwayListener, Fade, IconButton, Link, Paper, Popper, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useAppSwitcher } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSwitcher';
+import { memo, useCallback, useRef, useState } from 'react';
+const AppSwitcher = () => {
+    const theme = useTheme();
+    const anchorRef = useRef();
+    const appSwitcher = useAppSwitcher();
+    const [open, setOpen] = useState(false);
+    const isDarkTheme = theme.palette.mode === 'dark';
+    const sp1 = theme.spacing(1);
+    const isSm = useMediaQuery(theme.breakpoints.down('sm'));
+    const onTogglePopper = useCallback(() => setOpen(_open => !_open), []);
+    const onClickAway = useCallback(() => setOpen(false), []);
+    if (appSwitcher.empty) {
+        return null;
+    }
+    return (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsxs(IconButton, { ref: anchorRef, color: "inherit", onClick: onTogglePopper, size: "large", children: [_jsx(Apps, {}), _jsx(Popper, { sx: { zIndex: theme.zIndex.drawer + 2 }, open: open, anchorEl: anchorRef.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsx(Paper, { style: { textAlign: 'center', padding: theme.spacing(1) }, elevation: 4, children: _jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    flexWrap: 'wrap',
+                                    maxWidth: appSwitcher.items.length <= 4 || isSm ? '240px' : '360px'
+                                }, children: appSwitcher.items.map((a, i) => (_jsx("div", { style: { width: '120px', padding: sp1, overflow: 'hidden' }, children: _jsxs(Button, { component: Link, target: a.newWindow ? '_blank' : null, href: a.route, style: { display: 'inherit', textDecoration: 'none', fontWeight: 400, color: 'inherit' }, children: [_jsx("div", { style: { display: 'inline-flex' }, children: _jsx(Avatar, { variant: "rounded", alt: a.name, src: isDarkTheme
+                                                        ? typeof a.img_d === 'string'
+                                                            ? a.img_d
+                                                            : null
+                                                        : typeof a.img_l === 'string'
+                                                            ? a.img_l
+                                                            : null, style: a.img_d === null || typeof a.img_d === 'string'
+                                                        ? { width: theme.spacing(8), height: theme.spacing(8) }
+                                                        : { backgroundColor: 'transparent', width: theme.spacing(8), height: theme.spacing(8) }, sx: {
+                                                        '& img': {
+                                                            objectFit: 'contain'
+                                                        }
+                                                    }, children: isDarkTheme
+                                                        ? a.img_d !== null && typeof a.img_d !== 'string'
+                                                            ? a.img_d
+                                                            : a.alt
+                                                        : a.img_l !== null && typeof a.img_l !== 'string'
+                                                            ? a.img_l
+                                                            : a.alt }, `avatar-${i}`) }), _jsx(Typography, { variant: "caption", children: a.name }, `text-${i}`)] }, `button-${i}`) }, `box-${i}`))) }) }) })) })] }) }));
+};
+export default memo(AppSwitcher);

package/commons/components/topnav/Notifications.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const Notifications: FC;

package/commons/components/topnav/Notifications.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppNotification } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppNotification';
+import { Notification } from '@cccsaurora/howler-ui/commons/components/notification';
+import {} from 'react';
+export const Notifications = () => {
+    const { service, state } = useAppNotification();
+    return (_jsx(Notification, { urls: service.feedUrls || state.urls, notificationItem: service.notificationRenderer, maxDrawerWidth: "800px", openIfNew: true }));
+};

package/commons/components/topnav/ThemeSelection.d.ts

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

package/commons/components/topnav/ThemeSelection.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Divider, List, ListItemButton, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { APP_STORAGE_PREFIX } from '@cccsaurora/howler-ui/commons/components/app/AppConstants';
+import { useAppBar, useAppBreadcrumbs, useAppConfigs, useAppLanguage, useAppLayout, useAppQuickSearch, useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import useLocalStorage from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorage';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const ThemeSelection = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const configs = useAppConfigs();
+    const layout = useAppLayout();
+    const breadcrumbs = useAppBreadcrumbs();
+    const language = useAppLanguage();
+    const appbar = useAppBar();
+    const appTheme = useAppTheme();
+    const quicksearch = useAppQuickSearch();
+    const localStorage = useLocalStorage(APP_STORAGE_PREFIX);
+    const isSmDown = useMediaQuery(theme.breakpoints.down('sm'));
+    const clearStorage = () => {
+        localStorage.clear();
+        window.location.reload();
+    };
+    return (_jsxs("div", { children: [configs.preferences.allowTranslate && (_jsx(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: t('app.language') }), children: _jsx(ListItemButton, { dense: true, onClick: language.toggle, children: _jsx(ListItemText, { style: { margin: 0 }, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                flexDirection: 'row',
+                                width: '100%',
+                                textAlign: 'center',
+                                cursor: 'pointer'
+                            }, children: [_jsx(Typography, { component: "div", variant: "body2", children: "English" }), _jsx("div", { style: { flexGrow: 1 }, children: _jsx(Switch, { checked: language.isFR(), name: "langSwitch" }) }), _jsx(Typography, { component: "div", variant: "body2", children: "Fran\u00E7ais" })] }) }) }) })), configs.preferences.allowTranslate && configs.allowPersonalization && _jsx(Divider, {}), configs.allowPersonalization && (_jsxs(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: t('personalization') }), children: [configs.preferences.allowThemeSelection && (_jsxs(ListItemButton, { onClick: appTheme.toggle, children: [_jsx(ListItemText, { children: t('personalization.dark') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", onChange: appTheme.toggle, checked: theme.palette.mode === 'dark' }) })] })), configs.preferences.allowLayoutSelection && (_jsxs(ListItemButton, { onClick: layout.toggle, children: [_jsx(ListItemText, { children: t('personalization.sticky') }), _jsx(ListItemSecondaryAction, { onClick: layout.toggle, children: _jsx(Switch, { edge: "end", checked: layout.current === 'top' }) })] })), configs.preferences.allowQuickSearch && !isSmDown && (_jsxs(ListItemButton, { onClick: quicksearch.toggle, children: [_jsx(ListItemText, { children: t('personalization.quicksearch') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", checked: quicksearch.show, onClick: quicksearch.toggle }) })] })), configs.preferences.allowAutoHideTopbar && (_jsxs(ListItemButton, { disabled: layout.current === 'top', onClick: appbar.toggleAutoHide, children: [_jsx(ListItemText, { children: t('personalization.autohideappbar') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", disabled: layout.current === 'top', checked: appbar.autoHide && layout.current !== 'top', onClick: appbar.toggleAutoHide }) })] })), configs.preferences.allowBreadcrumbs && !isSmDown && (_jsx(_Fragment, { children: _jsxs(ListItemButton, { onClick: breadcrumbs.toggle, children: [_jsx(ListItemText, { children: t('personalization.showbreadcrumbs') }), _jsx(ListItemSecondaryAction, { children: _jsx(Switch, { edge: "end", checked: breadcrumbs.show, onClick: breadcrumbs.toggle }) })] }) }))] })), (configs.preferences.allowTranslate || configs.allowPersonalization) && configs.preferences.allowReset && (_jsx(Divider, {})), configs.preferences.allowReset && (_jsx(List, { dense: true, children: _jsx(ListItemButton, { dense: true, onClick: clearStorage, children: _jsx(ListItemText, { children: t('personalization.reset_text') }) }) }))] }));
+};
+export default memo(ThemeSelection);

package/commons/components/topnav/ThemeSelectionIcon.d.ts

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

package/commons/components/topnav/ThemeSelectionIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tune } from '@mui/icons-material';
+import { ClickAwayListener, Fade, IconButton, Paper, Popper, useTheme } from '@mui/material';
+import { useAppConfigs } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppConfigs';
+import ThemeSelection from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelection';
+import { useRef, useState } from 'react';
+const ThemeSelectionIcon = () => {
+    const anchorEl = useRef();
+    const theme = useTheme();
+    const { allowPersonalization, preferences } = useAppConfigs();
+    const [open, setOpen] = useState(false);
+    const onThemeSelectionClick = () => setOpen(!open);
+    const onClickAway = () => setOpen(false);
+    return allowPersonalization || preferences.allowTranslate || preferences.allowReset ? (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsxs(IconButton, { ref: anchorEl, color: "inherit", "aria-label": "open drawer", onClick: onThemeSelectionClick, size: "large", children: [_jsx(Tune, {}), _jsx(Popper, { sx: { zIndex: theme.zIndex.drawer + 2, minWidth: '280px' }, open: open, anchorEl: anchorEl.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsx(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: _jsx(ThemeSelection, {}) }) })) })] }) })) : null;
+};
+export default ThemeSelectionIcon;

package/commons/components/topnav/UserProfile.d.ts

@@ -0,0 +1,5 @@
+import type { StyledComponent } from '@emotion/styled';
+import { type AppAvatarProps } from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';
+export declare const AppUserAvatar: StyledComponent<AppAvatarProps>;
+declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/commons/components/topnav/UserProfile.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, ClickAwayListener, Divider, Fade, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Popper, styled, Typography, useTheme } from '@mui/material';
+import { useAppConfigs, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import AppAvatar, {} from '@cccsaurora/howler-ui/commons/components/display/AppAvatar';
+import ThemeSelection from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelection';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+export const AppUserAvatar = styled(AppAvatar)(({ theme }) => ({
+    width: theme.spacing(5),
+    height: theme.spacing(5),
+    [theme.breakpoints.down('sm')]: {
+        width: theme.spacing(4),
+        height: theme.spacing(4)
+    }
+}));
+const UserProfile = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const configs = useAppConfigs();
+    const { user } = useAppUser();
+    const anchorRef = useRef();
+    const location = useLocation();
+    const [open, setOpen] = useState(false);
+    const onProfileClick = useCallback(e => {
+        e.stopPropagation();
+        setOpen(_open => !_open);
+    }, []);
+    const onClickAway = useCallback(() => setOpen(false), []);
+    const renderThemeSelection = useCallback(enabled => {
+        if (enabled &&
+            (configs.allowPersonalization || configs.preferences.allowTranslate || configs.preferences.allowReset)) {
+            return (_jsxs("div", { children: [_jsx(Divider, {}), _jsx(ThemeSelection, {})] }));
+        }
+        return null;
+    }, [configs.allowPersonalization, configs.preferences.allowTranslate, configs.preferences.allowReset]);
+    const renderMenu = useCallback((type, menuItems, title, i18nKey) => {
+        if (menuItems !== undefined && menuItems !== null && menuItems.length !== 0) {
+            return (_jsxs("div", { children: [_jsx(Divider, {}), _jsx(List, { dense: true, subheader: _jsx(ListSubheader, { disableSticky: true, children: i18nKey ? t(i18nKey) : title }), children: menuItems.map((a, i) => a.element ? (_jsx(ListItem, { children: a.element }, `${type}-${i}`)) : (_jsxs(ListItemButton, { component: Link, to: a.route, children: [a.icon && _jsx(ListItemIcon, { children: a.icon }), _jsx(ListItemText, { children: a.i18nKey ? t(a.i18nKey) : a.title })] }, `${type}-${i}`))) })] }));
+        }
+        return null;
+    }, [t]);
+    useEffect(() => {
+        // This effect checks to see if the result of pressing a button was a navigation
+        // if so, close the settings bar.
+        if (open) {
+            setOpen(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.pathname]);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { ref: anchorRef, edge: "end", sx: {
+                    padding: 0,
+                    marginLeft: theme.spacing(1),
+                    marginRight: theme.spacing(1)
+                }, onClick: onProfileClick, size: "large", children: _jsx(AppUserAvatar, { alt: user.name, url: user.avatar, email: user.email, children: user.name
+                        .split(' ', 2)
+                        .map(n => n[0].toUpperCase())
+                        .join('') }) }), _jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsx(Popper, { sx: { zIndex: theme.zIndex.appBar + 200, minWidth: '280px' }, open: open, anchorEl: anchorRef.current, placement: "bottom-end", transition: true, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 250, children: _jsxs(Paper, { style: { padding: theme.spacing(1) }, elevation: 4, children: [_jsx(List, { disablePadding: true, children: _jsx(ListItem, { disableGutters: true, dense: true, children: _jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                paddingTop: 2,
+                                                paddingBottom: 2,
+                                                paddingLeft: 3,
+                                                paddingRight: 3,
+                                                alignItems: 'center'
+                                            }, children: [_jsx(AppAvatar, { sx: { width: theme.spacing(8), height: theme.spacing(8) }, alt: user.name, url: user.avatar, email: user.email, children: user.name
+                                                        .split(' ', 2)
+                                                        .map(n => n[0].toUpperCase())
+                                                        .join('') }), _jsxs(Box, { sx: { paddingLeft: 2 }, children: [_jsx(Typography, { variant: "body1", noWrap: true, children: _jsx("b", { children: user.name }) }), _jsx(Typography, { variant: "caption", noWrap: true, children: user.email })] })] }) }) }), renderMenu('usermenu', configs.preferences.topnav.userMenu, configs.preferences.topnav.userMenuTitle, configs.preferences.topnav.userMenuI18nKey), user.is_admin &&
+                                    renderMenu('adminmenu', configs.preferences.topnav.adminMenu, configs.preferences.topnav.adminMenuTitle, configs.preferences.topnav.adminMenuI18nKey), renderThemeSelection(configs.preferences.topnav.themeSelectionMode === 'profile')] }) })) }) })] }));
+};
+export default memo(UserProfile);

package/commons/components/utils/hooks/useClipboard.d.ts

@@ -0,0 +1,3 @@
+export default function useClipboard(): {
+    copy: (text: string) => Promise<void>;
+};

package/commons/components/utils/hooks/useClipboard.js

@@ -0,0 +1,29 @@
+import { useSnackbar } from 'notistack';
+import { useTranslation } from 'react-i18next';
+export default function useClipboard() {
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const { t } = useTranslation();
+    const snackBarOptions = {
+        preventDuplicate: true,
+        autoHideDuration: 3000,
+        anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'center'
+        },
+        SnackbarProps: {
+            onClick: () => {
+                closeSnackbar();
+            }
+        }
+    };
+    const copy = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            enqueueSnackbar(`${text} ${t('clipboard.success')}`, { variant: 'success', ...snackBarOptions });
+        }
+        catch (error) {
+            enqueueSnackbar(`${text} ${t('clipboard.failure')}`, { variant: 'error', ...snackBarOptions });
+        }
+    };
+    return { copy };
+}

package/commons/components/utils/hooks/useEnv.d.ts

@@ -0,0 +1 @@
+export default function useAppEnv(key?: string): string | NodeJS.ProcessEnv;

package/commons/components/utils/hooks/useEnv.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+// @ts-ignore
+const APP_ENV = process.env;
+export default function useAppEnv(key) {
+    return useMemo(() => {
+        if (key) {
+            return APP_ENV[key];
+        }
+        return APP_ENV;
+    }, [key]);
+}

package/commons/components/utils/hooks/useFullscreenStatus.d.ts

@@ -0,0 +1,2 @@
+import { type MutableRefObject } from 'react';
+export default function useFullscreenStatus(elRef: MutableRefObject<any>): [boolean, () => void];

package/commons/components/utils/hooks/useFullscreenStatus.js

@@ -0,0 +1,41 @@
+import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+const getBrowserFullscreenElementProp = () => {
+    if (typeof document.fullscreenElement !== 'undefined') {
+        return 'fullscreenElement';
+    }
+    // eslint-disable-next-line @typescript-eslint/dot-notation
+    if (typeof document['mozFullScreenElement'] !== 'undefined') {
+        return 'mozFullScreenElement';
+    }
+    // eslint-disable-next-line @typescript-eslint/dot-notation
+    if (typeof document['msFullscreenElement'] !== 'undefined') {
+        return 'msFullscreenElement';
+    }
+    // eslint-disable-next-line @typescript-eslint/dot-notation
+    if (typeof document['webkitFullscreenElement'] !== 'undefined') {
+        return 'webkitFullscreenElement';
+    }
+    throw new Error('fullscreenElement is not supported by this browser');
+};
+export default function useFullscreenStatus(elRef) {
+    const [isFullscreen, setIsFullscreen] = useState(document[getBrowserFullscreenElementProp()] != null);
+    const setFullscreen = useCallback(() => {
+        if (elRef.current == null)
+            return;
+        elRef.current
+            .requestFullscreen()
+            .then(() => {
+            setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
+        })
+            .catch(() => {
+            setIsFullscreen(false);
+        });
+    }, [elRef]);
+    useLayoutEffect(() => {
+        document.onfullscreenchange = () => setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
+        return () => {
+            document.onfullscreenchange = undefined;
+        };
+    });
+    return useMemo(() => [isFullscreen, setFullscreen], [isFullscreen, setFullscreen]);
+}

package/commons/components/utils/hooks/useGravatar.d.ts

@@ -0,0 +1,2 @@
+declare const useGravatar: (email: string) => string;
+export default useGravatar;

package/commons/components/utils/hooks/useGravatar.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import md5 from 'md5';
+const useGravatar = (email) => useMemo(() => {
+    if (email !== null) {
+        return `https://s.gravatar.com/avatar/${md5(email)}?d=404`;
+    }
+    return null;
+}, [email]);
+export default useGravatar;

package/commons/components/utils/hooks/useLocalStorage.d.ts

@@ -0,0 +1,12 @@
+export default function useLocalStorage(prefix?: string): {
+    get: <T>(key: string) => T;
+    set: (key: string, value: any) => void;
+    remove: (key: string, withPrefix?: boolean) => void;
+    has: (key: string) => boolean;
+    keys: () => string[];
+    items: () => {
+        key: string;
+        value: unknown;
+    }[];
+    clear: () => void;
+};

package/commons/components/utils/hooks/useLocalStorage.js

@@ -0,0 +1,52 @@
+import { useCallback, useMemo } from 'react';
+export default function useLocalStorage(prefix) {
+    // Build the name of the key.
+    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
+    const _buildKey = useCallback((name) => (prefix ? `${prefix}.${name}` : name), [prefix]);
+    // Get an item from local storage.
+    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
+    const get = useCallback((key) => {
+        try {
+            return JSON.parse(localStorage.getItem(_buildKey(key)));
+        }
+        catch (e) {
+            return null;
+        }
+    }, [_buildKey]);
+    // Set an item to local storage.
+    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
+    const set = useCallback((key, value) => localStorage.setItem(_buildKey(key), JSON.stringify(value)), [_buildKey]);
+    // Remove an item from local storage.
+    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
+    const remove = useCallback((key, withPrefix = false) => localStorage.removeItem(withPrefix ? key : _buildKey(key)), [_buildKey]);
+    // Indicates if the local storage has an item with the specified key.
+    // If a 'prefix' was specified, the 'key' will be appended to the 'prefix' automatically.
+    const has = useCallback((key) => get(key) !== null, [get]);
+    // Get all the keys in the local storage.
+    const keys = useCallback(() => Object.keys(localStorage), []);
+    // Get the local storage items {key: string, value: any}.
+    // If a 'prefix' key was specified, it will return the items that have a key starting with the prefix.
+    // If no 'prefix' was specified, it will return all items.
+    const items = useCallback(() => keys().map(k => ({ key: k, value: get(k) })), [get, keys]);
+    // Clear all local storage.
+    // If a 'prefix' key was specified, it will only clear/remove the items that start with that key.
+    // If no 'prefix' key was specified, it will clear/remove all of them.
+    const clear = useCallback(() => keys().forEach(key => {
+        if (prefix && key.startsWith(prefix)) {
+            remove(key, true);
+        }
+        else if (!prefix) {
+            remove(key);
+        }
+    }), [prefix, remove, keys]);
+    // Return memoized object to prevent unecessary renders.
+    return useMemo(() => ({
+        get,
+        set,
+        remove,
+        has,
+        keys,
+        items,
+        clear
+    }), [get, set, remove, has, keys, items, clear]);
+}

package/commons/components/utils/hooks/useLocalStorageItem.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This hooks backs the typical 'useState' hook with local storage.
+ *
+ * This means that it will initialize with the value stored in local storage.
+ *
+ * State changes are also persisted to local storage.
+ *
+ * All this ensures the state is preserved across inializations.
+ *
+ * @param key - local storage key under which to store the state.
+ * @param initialValue - local storage initialization value.
+ * @returns a stateful value, a function to update it, and a function to remove it.
+ */
+export default function useLocalStorageItem<T>(key: string, initialValue?: T): [T, (value: T) => void, () => void];