@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/commons/components/search/AppSearchResult.tsx

@@ -0,0 +1,66 @@
+import { Box, MenuItem, MenuList, Typography, type MenuListProps } from '@mui/material';
+import type { AppSearchItem } from 'commons/components/app/AppSearchService';
+import { useAppSearchService } from 'commons/components/app/hooks/useAppSearchService';
+import { memo, useMemo, type KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { parseEvent } from 'commons/components/utils/keyboard';
+
+type AppSearchResultProps = MenuListProps;
+
+const AppSearchResult = ({ className, ...menuProps }: AppSearchResultProps) => {
+  const { t } = useTranslation();
+  const { state, service } = useAppSearchService();
+
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: AppSearchItem) => {
+    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 (
+    <div className={className}>
+      <MenuList data-tui-id="tui-app-search-result" {...menuProps}>
+        {state.items?.length > 0 ? (
+          state.items.map((item, index) => (
+            <MenuItem key={item.id} onKeyDown={event => onKeyDown(event, item)}>
+              {service.itemRenderer(item, options[index])}
+            </MenuItem>
+          ))
+        ) : state.items ? (
+          <AppListEmpty />
+        ) : (
+          <MenuItem disabled>
+            <Box mt={1} mb={1}>
+              <Typography variant="body2">
+                <em>{t('app.search.starttyping')}</em>
+              </Typography>
+            </Box>
+          </MenuItem>
+        )}
+      </MenuList>
+      {state.mode === 'inline' && service.footerRenderer && service.footerRenderer(state)}
+    </div>
+  );
+};
+
+export default memo(AppSearchResult);

package/commons/components/topnav/AppBar.tsx

@@ -0,0 +1,137 @@
+import { Box, AppBar as MuiAppBar, Toolbar, useMediaQuery, useTheme } from '@mui/material';
+import {
+  useAppBar,
+  useAppBreadcrumbs,
+  useAppConfigs,
+  useAppLayout,
+  useAppQuickSearch
+} from 'commons/components/app/hooks';
+import { APPBAR_READY_EVENT } from 'commons/components/app/hooks/useAppBarHeight';
+import Breadcrumbs from 'commons/components/breadcrumbs/Breadcrumbs';
+import AppSearch from 'commons/components/search/AppSearch';
+import AppName from 'commons/components/topnav/AppName';
+import AppSwitcher from 'commons/components/topnav/AppSwitcher';
+import { Notifications } from 'commons/components/topnav/Notifications';
+import ThemeSelectionIcon from 'commons/components/topnav/ThemeSelectionIcon';
+import UserProfile from '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 (
+    <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}
+    </MuiAppBar>
+  );
+};
+
+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(
+    () => (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+      >
+        {(isTopLayout || isXs) && <AppName noName={isXs} />}
+        <Box sx={{ ...(isTopLayout && { marginLeft: 3 }) }} />
+        {left}
+        {showBreadcrumbs && <Breadcrumbs />}
+        {leftAfterBreadcrumbs && (
+          <Box sx={{ ...(showBreadcrumbs && { marginLeft: 3, marginRight: 3 }) }}>{leftAfterBreadcrumbs}</Box>
+        )}
+      </Box>
+    ),
+    [showBreadcrumbs, leftAfterBreadcrumbs, isTopLayout, left, isXs]
+  );
+
+  return (
+    <AppBarBase>
+      <Toolbar
+        disableGutters
+        style={{
+          paddingLeft: !isXs && !isTopLayout ? muiTheme.spacing(2) : null,
+          paddingRight: muiTheme.spacing(1)
+        }}
+      >
+        {renderLeft()}
+        <div style={{ flex: 1 }} />
+        {rightBeforeSearch}
+        {quicksearch.show && <AppSearch />}
+        <Notifications />
+        {right}
+        {themeSelectionMode === 'icon' && <ThemeSelectionIcon />}
+        <AppSwitcher />
+        {!configs.preferences.topnav.hideUserAvatar && <UserProfile />}
+      </Toolbar>
+    </AppBarBase>
+  );
+};
+
+export default memo(AppBar);

package/commons/components/topnav/AppName.tsx

@@ -0,0 +1,53 @@
+import { Menu } from '@mui/icons-material';
+import { IconButton, styled, useMediaQuery, useTheme } from '@mui/material';
+import { useAppConfigs, useAppLeftNav, useAppLogo } from '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 }: { noName?: boolean }) => {
+  const theme = useTheme();
+  const logo = useAppLogo();
+  const configs = useAppConfigs();
+  const leftnav = useAppLeftNav();
+  const isXs = useMediaQuery(theme.breakpoints.only('xs'));
+  if (isXs) {
+    return (
+      <StyledTitle style={{ paddingLeft: theme.spacing(2) }}>
+        <StyledIcon>
+          <IconButton aria-label="open drawer" edge="start" onClick={leftnav.toggle} size="large" color="inherit">
+            <Menu />
+          </IconButton>
+        </StyledIcon>
+        <div>{!noName && configs.preferences.appName}</div>
+      </StyledTitle>
+    );
+  }
+  return (
+    <Link
+      to={configs.preferences.appLink}
+      style={{ color: 'inherit', textDecoration: 'none', paddingLeft: theme.spacing(2) }}
+    >
+      <StyledTitle>
+        <StyledIcon>{logo}</StyledIcon>
+        <div>{!noName && configs.preferences.appName}</div>
+      </StyledTitle>
+    </Link>
+  );
+};
+
+export default memo(AppName);

package/commons/components/topnav/AppSwitcher.tsx

@@ -0,0 +1,116 @@
+import { Apps } from '@mui/icons-material';
+import {
+  Avatar,
+  Button,
+  ClickAwayListener,
+  Fade,
+  IconButton,
+  Link,
+  Paper,
+  Popper,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+import { useAppSwitcher } from '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<boolean>(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 (
+    <ClickAwayListener onClickAway={onClickAway}>
+      <IconButton ref={anchorRef} color="inherit" onClick={onTogglePopper} size="large">
+        <Apps />
+        <Popper
+          sx={{ zIndex: theme.zIndex.drawer + 2 }}
+          open={open}
+          anchorEl={anchorRef.current}
+          placement="bottom-end"
+          transition
+        >
+          {({ TransitionProps }) => (
+            <Fade {...TransitionProps} timeout={250}>
+              <Paper style={{ textAlign: 'center', padding: theme.spacing(1) }} elevation={4}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    maxWidth: appSwitcher.items.length <= 4 || isSm ? '240px' : '360px'
+                  }}
+                >
+                  {appSwitcher.items.map((a, i) => (
+                    <div key={`box-${i}`} style={{ width: '120px', padding: sp1, overflow: 'hidden' }}>
+                      <Button
+                        component={Link}
+                        target={a.newWindow ? '_blank' : null}
+                        href={a.route}
+                        key={`button-${i}`}
+                        style={{ display: 'inherit', textDecoration: 'none', fontWeight: 400, color: 'inherit' }}
+                      >
+                        <div style={{ display: 'inline-flex' }}>
+                          <Avatar
+                            key={`avatar-${i}`}
+                            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'
+                              }
+                            }}
+                          >
+                            {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>
+                        </div>
+                        <Typography key={`text-${i}`} variant="caption">
+                          {a.name}
+                        </Typography>
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </Paper>
+            </Fade>
+          )}
+        </Popper>
+      </IconButton>
+    </ClickAwayListener>
+  );
+};
+
+export default memo(AppSwitcher);

package/commons/components/topnav/Notifications.tsx

@@ -0,0 +1,16 @@
+import { useAppNotification } from 'commons/components/app/hooks/useAppNotification';
+import { Notification } from 'commons/components/notification';
+import { type FC } from 'react';
+
+export const Notifications: FC = () => {
+  const { service, state } = useAppNotification();
+
+  return (
+    <Notification
+      urls={service.feedUrls || state.urls}
+      notificationItem={service.notificationRenderer}
+      maxDrawerWidth="800px"
+      openIfNew
+    />
+  );
+};

package/commons/components/topnav/ThemeSelection.tsx

@@ -0,0 +1,143 @@
+import {
+  Divider,
+  List,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Switch,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+import useLocalStorage from 'commons/components//utils/hooks/useLocalStorage';
+import { APP_STORAGE_PREFIX } from 'commons/components/app/AppConstants';
+import {
+  useAppBar,
+  useAppBreadcrumbs,
+  useAppConfigs,
+  useAppLanguage,
+  useAppLayout,
+  useAppQuickSearch,
+  useAppTheme
+} from 'commons/components/app/hooks';
+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 (
+    <div>
+      {configs.preferences.allowTranslate && (
+        <List dense subheader={<ListSubheader disableSticky>{t('app.language')}</ListSubheader>}>
+          <ListItemButton dense onClick={language.toggle}>
+            <ListItemText style={{ margin: 0 }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                  width: '100%',
+                  textAlign: 'center',
+                  cursor: 'pointer'
+                }}
+              >
+                <Typography component="div" variant="body2">
+                  English
+                </Typography>
+                <div style={{ flexGrow: 1 }}>
+                  <Switch checked={language.isFR()} name="langSwitch" />
+                </div>
+                <Typography component="div" variant="body2">
+                  Français
+                </Typography>
+              </div>
+            </ListItemText>
+          </ListItemButton>
+        </List>
+      )}
+      {configs.preferences.allowTranslate && configs.allowPersonalization && <Divider />}
+      {configs.allowPersonalization && (
+        <List dense subheader={<ListSubheader disableSticky>{t('personalization')}</ListSubheader>}>
+          {configs.preferences.allowThemeSelection && (
+            <ListItemButton onClick={appTheme.toggle}>
+              <ListItemText>{t('personalization.dark')}</ListItemText>
+              <ListItemSecondaryAction>
+                <Switch edge="end" onChange={appTheme.toggle} checked={theme.palette.mode === 'dark'} />
+              </ListItemSecondaryAction>
+            </ListItemButton>
+          )}
+          {configs.preferences.allowLayoutSelection && (
+            <ListItemButton onClick={layout.toggle}>
+              <ListItemText>{t('personalization.sticky')}</ListItemText>
+              <ListItemSecondaryAction onClick={layout.toggle}>
+                <Switch edge="end" checked={layout.current === 'top'} />
+              </ListItemSecondaryAction>
+            </ListItemButton>
+          )}
+          {configs.preferences.allowQuickSearch && !isSmDown && (
+            <ListItemButton onClick={quicksearch.toggle}>
+              <ListItemText>{t('personalization.quicksearch')}</ListItemText>
+              <ListItemSecondaryAction>
+                <Switch edge="end" checked={quicksearch.show} onClick={quicksearch.toggle} />
+              </ListItemSecondaryAction>
+            </ListItemButton>
+          )}
+          {configs.preferences.allowAutoHideTopbar && (
+            <ListItemButton disabled={layout.current === 'top'} onClick={appbar.toggleAutoHide}>
+              <ListItemText>{t('personalization.autohideappbar')}</ListItemText>
+              <ListItemSecondaryAction>
+                <Switch
+                  edge="end"
+                  disabled={layout.current === 'top'}
+                  checked={appbar.autoHide && layout.current !== 'top'}
+                  onClick={appbar.toggleAutoHide}
+                />
+              </ListItemSecondaryAction>
+            </ListItemButton>
+          )}
+          {configs.preferences.allowBreadcrumbs && !isSmDown && (
+            <>
+              <ListItemButton onClick={breadcrumbs.toggle}>
+                <ListItemText>{t('personalization.showbreadcrumbs')}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch edge="end" checked={breadcrumbs.show} onClick={breadcrumbs.toggle} />
+                </ListItemSecondaryAction>
+              </ListItemButton>
+            </>
+          )}
+        </List>
+      )}
+
+      {(configs.preferences.allowTranslate || configs.allowPersonalization) && configs.preferences.allowReset && (
+        <Divider />
+      )}
+
+      {configs.preferences.allowReset && (
+        <List dense>
+          <ListItemButton dense onClick={clearStorage}>
+            <ListItemText>{t('personalization.reset_text')}</ListItemText>
+          </ListItemButton>
+        </List>
+      )}
+    </div>
+  );
+};
+
+export default memo(ThemeSelection);

package/commons/components/topnav/ThemeSelectionIcon.tsx

@@ -0,0 +1,39 @@
+import { Tune } from '@mui/icons-material';
+import { ClickAwayListener, Fade, IconButton, Paper, Popper, useTheme } from '@mui/material';
+import { useAppConfigs } from 'commons/components/app/hooks/useAppConfigs';
+import ThemeSelection from '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<boolean>(false);
+  const onThemeSelectionClick = () => setOpen(!open);
+  const onClickAway = () => setOpen(false);
+
+  return allowPersonalization || preferences.allowTranslate || preferences.allowReset ? (
+    <ClickAwayListener onClickAway={onClickAway}>
+      <IconButton ref={anchorEl} color="inherit" aria-label="open drawer" onClick={onThemeSelectionClick} size="large">
+        <Tune />
+        <Popper
+          sx={{ zIndex: theme.zIndex.drawer + 2, minWidth: '280px' }}
+          open={open}
+          anchorEl={anchorEl.current}
+          placement="bottom-end"
+          transition
+        >
+          {({ TransitionProps }) => (
+            <Fade {...TransitionProps} timeout={250}>
+              <Paper style={{ padding: theme.spacing(1) }} elevation={4}>
+                <ThemeSelection />
+              </Paper>
+            </Fade>
+          )}
+        </Popper>
+      </IconButton>
+    </ClickAwayListener>
+  ) : null;
+};
+
+export default ThemeSelectionIcon;