@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/commons/components/pages/hooks/usePageProps.js

@@ -1,19 +0,0 @@
-import { useMediaQuery, useTheme } from '@mui/material';
-import { useMemo } from 'react';
-const PagePropsDefaults = { margin: null, mt: 2, mr: 2, mb: 2, ml: 2 };
-export default function usePageProps({ props, defaultOverrides = PagePropsDefaults }) {
-    const { className, width, height, margin, mt, mr, mb, ml } = { ...PagePropsDefaults, ...defaultOverrides, ...props };
-    const theme = useTheme();
-    const divider = useMediaQuery(theme.breakpoints.up('md')) ? 1 : 2;
-    return useMemo(() => ({
-        className,
-        style: {
-            width,
-            height,
-            marginBottom: theme.spacing(margin !== null ? margin / divider : mb / divider),
-            marginLeft: theme.spacing(margin !== null ? margin / divider : ml / divider),
-            marginRight: theme.spacing(margin !== null ? margin / divider : mr / divider),
-            marginTop: theme.spacing(margin !== null ? margin / divider : mt / divider)
-        }
-    }), [className, width, height, margin, mt, mr, mb, ml, divider, theme]);
-}

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

@@ -1 +0,0 @@
-export default function AppSearch(): import("react/jsx-runtime").JSX.Element;

package/commons/components/search/AppSearch.js

@@ -1,135 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from '@mui/icons-material';
-import { Box, ClickAwayListener, Dialog, DialogContent, DialogTitle, emphasize, IconButton, Popper, Slide, Stack, styled, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { useAppSearchService } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSearchService';
-import AppSearchInput from '@cccsaurora/howler-ui/commons/components/search/AppSearchInput';
-import AppSearchResult from '@cccsaurora/howler-ui/commons/components/search/AppSearchResult';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-const MENU_LIST_SX = { maxHeight: 500, overflow: 'auto' };
-const AppSearchRoot = styled(Box, { shouldForwardProp: prop => prop !== 'menuOpen' })(({ theme, menuOpen }) => {
-    const backgroundColor = emphasize(theme.palette.background.default, 0.1);
-    return {
-        position: 'relative',
-        borderRadius: theme.shape.borderRadius,
-        borderBottomLeftRadius: menuOpen && 0,
-        borderBottomRightRadius: menuOpen && 0,
-        '.app-search-input': {
-            backgroundColor: theme.palette.mode === 'dark' ? backgroundColor : menuOpen ? theme.palette.background.default : backgroundColor,
-            boxShadow: menuOpen && theme.shadows[4]
-        },
-        '.app-search-result': {
-            backgroundColor: theme.palette.mode === 'dark' ? backgroundColor : theme.palette.background.default,
-            borderBottomLeftRadius: theme.shape.borderRadius,
-            borderBottomRightRadius: theme.shape.borderRadius,
-            boxShadow: menuOpen && theme.shadows[4],
-            color: theme.palette.text.primary
-        }
-    };
-});
-const ModalTransition = forwardRef(function Transition(props, ref) {
-    const { children, ..._props } = props;
-    return (_jsx(Slide, { direction: "down", ref: ref, ..._props, children: children }));
-});
-export default function AppSearch() {
-    const theme = useTheme();
-    const menuRef = useRef(null);
-    const showSearchIcon = useMediaQuery(theme.breakpoints.down('lg'));
-    const { t } = useTranslation();
-    const { provided, state, service } = useAppSearchService();
-    const [value, setValue] = useState('');
-    // const [fullscreen, setFullscreen] = useState<boolean>(false);
-    useEffect(() => {
-        if (service.onMounted) {
-            service.onMounted(setValue, state);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // keyboard[window] handler.
-    // this is to trigger the CTLR+K shortcut to appsearch.
-    useEffect(() => {
-        const keyHandler = event => {
-            const { key, isCtrl } = parseEvent(event);
-            if (isCtrl && key === 'k') {
-                event.preventDefault();
-                const inputRef = menuRef.current.querySelector('input');
-                if (provided && !inputRef) {
-                    state.set({ ...state, menu: !state.menu, mode: 'fullscreen' });
-                }
-                else if (provided && state.menu) {
-                    state.set({ ...state, mode: 'fullscreen' });
-                }
-                else {
-                    inputRef.focus();
-                }
-            }
-        };
-        window.addEventListener('keydown', keyHandler);
-        return () => {
-            window.removeEventListener('keydown', keyHandler);
-        };
-    }, [provided, state]);
-    // Search input focus handler.
-    const onFocus = useCallback(() => {
-        //state.setMenu(!!state?.items && state.items.length > 0);
-        state.set({ ...state, menu: true });
-    }, [state]);
-    // Search input change handler.
-    const onChange = useCallback((event) => {
-        setValue(event.currentTarget.value);
-        if (service.onChange) {
-            service.onChange(event.currentTarget.value, state, setValue);
-        }
-    }, [service, state]);
-    // keyboard[ENTER] handler.
-    const onEnter = useCallback(() => {
-        if (service.onEnter) {
-            state.set({ ...state, menu: true });
-            service.onEnter(value, state);
-        }
-    }, [value, state, service]);
-    // Keyboard handler.
-    const onKeyDown = useCallback((event) => {
-        const { isEnter, isEscape, isArrowDown } = parseEvent(event);
-        if (isEnter) {
-            onEnter();
-        }
-        else if (isEscape) {
-            state.set({ ...state, menu: !state.menu });
-        }
-        else if (isArrowDown) {
-            const result = document.querySelector('[data-tui-id="tui-app-search-result"]');
-            if (result) {
-                // Prevent scolling before menu list gets focus.
-                // Doing this prevents the menu list from scrolling down
-                //  and then back up on second arrow down.
-                event.preventDefault(); // prevent native scroll.
-                result.focus();
-            }
-        }
-    }, [state, onEnter]);
-    // Clear search input handler.
-    const onClear = useCallback(() => {
-        setValue('');
-        state.set({ ...state, items: null });
-    }, [state]);
-    // Fullscreen modal toggle handler.
-    const onToggleFullscreen = useCallback(() => {
-        state.set({ ...state, mode: state.mode === 'inline' ? 'fullscreen' : 'inline' });
-    }, [state]);
-    return (_jsx(ClickAwayListener, { onClickAway: () => state.set({ ...state, menu: false }), children: _jsxs(AppSearchRoot, { ref: menuRef, sx: { mr: !showSearchIcon && 1 }, menuOpen: state.menu, children: [showSearchIcon ? (_jsx(IconButton, { color: "inherit", size: "large", onClick: () => state.set({ ...state, menu: !state.menu, mode: 'fullscreen' }), children: _jsx(Tooltip, { title: _jsxs(Stack, { direction: "column", textAlign: "center", children: [_jsx("span", { children: t('app.search.fullscreen') }), " ", _jsx("span", { children: "CTLR+K" })] }), children: _jsx(Search, {}) }) })) : (_jsxs(_Fragment, { children: [_jsx(AppSearchInput, { showToggle: true, provided: provided, className: "app-search-input", value: value, searching: state.searching, open: state.menu, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, onClear: onClear, onToggleFullscreen: onToggleFullscreen }), provided && (_jsx(Popper, { open: state.menu && state.mode === 'inline', anchorEl: menuRef.current, placement: "bottom-end", sx: _theme => ({ width: '100%', zIndex: _theme.zIndex.appBar + 1 }), disablePortal: true, children: _jsx(AppSearchResult, { className: "app-search-result", sx: MENU_LIST_SX }) }))] })), _jsxs(Dialog, { disableRestoreFocus: true, fullWidth: true, maxWidth: "md", TransitionComponent: ModalTransition, open: state.menu && state.mode === 'fullscreen', onClose: () => state.set({ ...state, mode: 'inline', menu: false }), sx: {
-                        maxHeight: '75%',
-                        margin: 0,
-                        '.MuiDialog-container': {
-                            alignItems: 'start'
-                        }
-                    }, PaperProps: {
-                        sx: {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                            margin: 0,
-                            width: '100%'
-                        }
-                    }, children: [_jsx(DialogTitle, { children: _jsx(AppSearchInput, { autoFocus: true, className: "app-search-input", style: { backgroundColor: emphasize(theme.palette.background.default, 0.1) }, showToggle: false, value: value, searching: state.searching, open: false, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, onClear: onClear, onToggleFullscreen: onToggleFullscreen }) }), provided && state.items && (_jsx(DialogContent, { children: _jsx(AppSearchResult, {}) })), provided && service.footerRenderer && service.footerRenderer(state)] })] }) }));
-}

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

@@ -1,12 +0,0 @@
-import { type InputBaseProps } from '@mui/material';
-type AppSearchInputProps = {
-    searching?: boolean;
-    provided?: boolean;
-    showToggle?: boolean;
-    open?: boolean;
-    onClear: () => void;
-    onToggleFullscreen: () => void;
-} & InputBaseProps;
-declare const AppSearchInput: ({ searching, provided, autoFocus, showToggle, value, open, onClear, onToggleFullscreen, onFocus, onChange, onKeyDown, ...inputProps }: AppSearchInputProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof AppSearchInput>;
-export default _default;

package/commons/components/search/AppSearchInput.js

@@ -1,35 +0,0 @@
-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

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

package/commons/components/search/AppSearchResult.js

@@ -1,28 +0,0 @@
-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

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

package/commons/components/topnav/AppBar.js

@@ -1,80 +0,0 @@
-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

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

package/commons/components/topnav/AppName.js

@@ -1,31 +0,0 @@
-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

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

package/commons/components/topnav/AppSwitcher.js

@@ -1,44 +0,0 @@
-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

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

package/commons/components/topnav/Notifications.js

@@ -1,8 +0,0 @@
-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

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

package/commons/components/topnav/ThemeSelection.js

@@ -1,33 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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

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

package/commons/components/topnav/ThemeSelectionIcon.js

@@ -1,16 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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 UserProfile: () => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof UserProfile>;
-export default _default;

package/commons/components/topnav/UserProfile.js

@@ -1,71 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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

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

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

@@ -1,29 +0,0 @@
-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

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