@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/ui/NavLink/NavLink.tsx

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material';
+import type { ReactNode } from 'react';
+import type { NavLinkProps as ReactRouterDomNavLinkProps } from 'react-router-dom';
+import {
+  NavLink as ReactRouterDomNavLink,
+  resolvePath,
+  useMatch,
+} from 'react-router-dom';
+
+export interface NavLinkProps extends ReactRouterDomNavLinkProps {
+  readonly children: ReactNode;
+  readonly activeAsText?: boolean;
+}
+
+const StyledNavLink = styled(ReactRouterDomNavLink)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+  '&.active': {
+    color: theme.palette.secondary.main,
+  },
+}));
+
+export const NavLink = ({ children, activeAsText, ...props }: NavLinkProps) => {
+  const match = useMatch({
+    path: resolvePath(props.to).pathname,
+  });
+
+  if (activeAsText && match) {
+    return (
+      <>
+        {children}
+      </>
+    );
+  }
+  return (
+    <StyledNavLink {...props}>
+      {({ isActive }) => (
+        <span className={isActive ? 'active' : ''}>
+          {children}
+        </span>
+      )}
+    </StyledNavLink>
+  );
+};

package/src/components/ui/NavLink/index.ts

@@ -0,0 +1 @@
+export * from './NavLink';

package/src/components/ui/NestedMenu/IconMenuItem.tsx

@@ -0,0 +1,64 @@
+import type { MenuItemProps } from '@mui/material/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { Box } from '@mui/material';
+import type { SxProps } from '@mui/material';
+import type {
+  MouseEvent,
+  ReactNode,
+  RefObject,
+} from 'react';
+
+const StyledMenuItem = styled(MenuItem)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  paddingLeft: '4px',
+  paddingRight: '4px',
+});
+
+const StyledTypography = styled(Typography)({
+  paddingLeft: '8px',
+  paddingRight: '8px',
+  textAlign: 'left',
+});
+
+const FlexBox = styled(Box)({
+  display: 'flex',
+});
+
+type IconMenuItemProps = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly MenuItemProps?: MenuItemProps;
+  readonly className?: string;
+  readonly disabled?: boolean;
+  readonly label?: string;
+  readonly leftIcon?: ReactNode;
+  readonly onClick?: (event: MouseEvent<HTMLElement>) => void;
+  readonly ref?: RefObject<HTMLLIElement>;
+  readonly rightIcon?: ReactNode;
+  readonly sx?: SxProps;
+  readonly divider?: boolean;
+  readonly checked?: 'true' | 'false' | 'mixed';
+};
+
+export const IconMenuItem = ({ MenuItemProps, className, label, leftIcon, rightIcon, checked, ref, ...props }: IconMenuItemProps) => {
+  return (
+    <StyledMenuItem
+      {...MenuItemProps}
+      ref={ref}
+      className={className}
+      {...props}
+      role={checked ? 'menuitemcheckbox' : 'menuitem'}
+      aria-checked={checked}
+    >
+      <FlexBox>
+        {leftIcon}
+        <StyledTypography>
+          {label}
+        </StyledTypography>
+      </FlexBox>
+      {rightIcon}
+    </StyledMenuItem>
+  );
+};

package/src/components/ui/NestedMenu/NestedDropdown.tsx

@@ -0,0 +1,133 @@
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
+import type { MenuProps } from '@mui/material/Menu';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Menu from '@mui/material/Menu';
+import type {
+  MouseEvent,
+  ReactNode,
+  Ref,
+} from 'react';
+import {
+  useCallback,
+  useState,
+} from 'react';
+import type { BoxProps } from '@mui/material';
+import {
+  Box,
+  Tooltip,
+  useTheme,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuItemData } from '../../../models/nestedMenu';
+
+import { nestedMenuItemsFromObject } from './nestedMenuItemsFromObject';
+
+interface NestedDropdownProps {
+  readonly children?: ReactNode;
+  readonly menuItemsData?: MenuItemData;
+  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly ButtonProps?: Partial<ButtonProps>;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly ContainerProps?: Partial<BoxProps>;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly MenuProps?: Partial<MenuProps>;
+  readonly showTopLevelTooltip?: boolean;
+  readonly ref?: Ref<HTMLDivElement>;
+}
+
+export const NestedDropdown = ({ ref, ...props }: NestedDropdownProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const { menuItemsData: data, onClick, ButtonProps, ContainerProps, MenuProps, showTopLevelTooltip, ...rest } = props;
+
+  const onButtonClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick]);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const onMenuClose = useCallback(() => {
+    handleClose();
+  }, [handleClose]);
+
+  const menuItems = nestedMenuItemsFromObject({
+    handleClose,
+    isOpen: open,
+    menuItemsData: data?.items ?? [],
+  });
+
+  const buttonElement = (
+    <Button
+      endIcon={<ExpandMoreIcon />}
+      onClick={onButtonClick}
+      {...ButtonProps}
+      sx={{
+        ...(ButtonProps.sx ?? {}),
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        display: 'inline-block',
+        width: '100%',
+        height: '24px',
+        lineHeight: '16px',
+        position: 'relative',
+        paddingRight: '24px',
+        '& .MuiButton-endIcon': {
+          display: 'inline-block',
+          position: 'absolute',
+          right: '8px',
+          top: '2px',
+        },
+      }}
+      aria-expanded={open ? 'true' : 'false'}
+    >
+      {data?.label ?? t`Menu`}
+    </Button>
+  );
+
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        maxWidth: '100%',
+      }}
+      {...ContainerProps}
+      {...rest}
+    >
+      {(ButtonProps.disabled || !showTopLevelTooltip) && buttonElement}
+      {(!ButtonProps.disabled && showTopLevelTooltip) && (
+        <Tooltip
+          arrow
+          slotProps={{
+            tooltip: {
+              sx: {
+                marginLeft: `${theme.spacing(0)} !important`,
+              },
+            },
+          }}
+          placement={'right'}
+          title={data?.tooltip ?? data?.label ?? t`Menu`}
+        >
+          {buttonElement}
+        </Tooltip>
+      )}
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={onMenuClose}
+        {...MenuProps}
+      >
+        {menuItems}
+      </Menu>
+    </Box>
+  );
+};

package/src/components/ui/NestedMenu/NestedMenuItem.tsx

@@ -0,0 +1,250 @@
+import type { MenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
+import type { MenuItemProps } from '@mui/material/MenuItem';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import type {
+  ElementType,
+  FocusEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  Ref,
+} from 'react';
+import {
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { PopoverOrigin } from '@mui/material';
+import { Box } from '@mui/material';
+
+import { IconMenuItem } from './IconMenuItem';
+
+type Origins = {
+  anchor: PopoverOrigin;
+  transform: PopoverOrigin;
+};
+
+const rightOrigins: Origins = {
+  anchor: {
+    horizontal: 'right',
+    vertical: 'top',
+  },
+  transform: {
+    horizontal: 'left',
+    vertical: 'top',
+  },
+};
+
+const leftOrigins: Origins = {
+  anchor: {
+    horizontal: 'left',
+    vertical: 'top',
+  },
+  transform: {
+    horizontal: 'right',
+    vertical: 'top',
+  },
+};
+
+export type NestedMenuItemProps = Omit<MenuItemProps, 'button'> & {
+  readonly parentMenuOpen: boolean;
+  readonly component?: ElementType;
+  readonly label?: string;
+  readonly checked?: 'true' | 'false' | 'mixed';
+  readonly rightIcon?: ReactNode;
+  readonly leftIcon?: ReactNode;
+  readonly children?: ReactNode;
+  readonly className?: string;
+  readonly tabIndex?: number;
+  readonly disabled?: boolean;
+  readonly callback?: () => void;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly ContainerProps?: HTMLAttributes<HTMLElement>;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  readonly MenuProps?: Partial<Omit<MenuProps, 'children'>>;
+  readonly button?: true;
+  readonly active?: boolean;
+  readonly ref?: Ref<HTMLLIElement>;
+};
+
+export const NestedMenuItem = ({ ref, ...props }: NestedMenuItemProps) => {
+  const menuItemRef = useRef<HTMLLIElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const menuContainerRef = useRef<HTMLDivElement>(null);
+  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
+  const [origins, setOrigins] = useState<Origins>(rightOrigins);
+
+  const {
+    callback,
+    parentMenuOpen,
+    label,
+    rightIcon = <ChevronRightIcon />,
+    leftIcon = null,
+    children,
+    className,
+    tabIndex: tabIndexProp,
+    ContainerProps = {},
+    MenuProps,
+    checked,
+    ...MenuItemProps
+  } = props;
+
+  useImperativeHandle(ref, () => menuItemRef.current);
+
+  const onIconMenuItemClick = useCallback((): void => {
+    if (callback) {
+      callback();
+    }
+  }, [callback]);
+
+  const onMouseEnter = useCallback((e: MouseEvent<HTMLElement>): void => {
+    setIsSubMenuOpen(true);
+
+    if (ContainerProps.onMouseEnter) {
+      ContainerProps.onMouseEnter(e);
+    }
+  }, [ContainerProps]);
+
+  const onMouseLeave = useCallback((e: MouseEvent<HTMLElement>): void => {
+    setIsSubMenuOpen(false);
+
+    if (ContainerProps.onMouseLeave) {
+      ContainerProps.onMouseLeave(e);
+    }
+  }, [ContainerProps]);
+
+  const onMenuClose = useCallback((): void => {
+    setIsSubMenuOpen(false);
+  }, []);
+
+  // Check if any immediate children are active
+  const isSubmenuFocused = useCallback(() => {
+    const isActive = containerRef.current?.ownerDocument.activeElement ?? null;
+
+    if (menuContainerRef.current?.children) {
+      for (const child of menuContainerRef.current.children) {
+        if (child === isActive) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }, []);
+
+  const onFocus = useCallback((e: FocusEvent<HTMLElement>) => {
+    if (e.target === containerRef.current) {
+      setIsSubMenuOpen(true);
+    }
+
+    if (ContainerProps.onFocus) {
+      ContainerProps.onFocus(e);
+    }
+  }, [ContainerProps]);
+
+  const onBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!isSubmenuFocused()) {
+        setIsSubMenuOpen(false);
+      }
+    });
+  }, [isSubmenuFocused]);
+
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      return;
+    }
+
+    if (isSubmenuFocused()) {
+      e.stopPropagation();
+    }
+
+    const isActive = containerRef.current?.ownerDocument.activeElement;
+
+    // if pressing enter key, run callback
+    if (e.key === 'Enter' && e.target === containerRef.current && callback) {
+      callback();
+    }
+
+    if (e.key === 'ArrowLeft' && isSubmenuFocused()) {
+      containerRef.current?.focus();
+    }
+
+    if (e.key === 'ArrowRight' && e.target === containerRef.current && e.target === isActive) {
+      const firstChild = menuContainerRef.current?.children[0] as HTMLDivElement;
+      firstChild?.focus();
+    }
+  }, [callback, isSubmenuFocused]);
+
+  const open = isSubMenuOpen && parentMenuOpen;
+
+  const menuRef = useCallback((node: HTMLElement) => {
+    if (node !== null) {
+      const subMenuWidth = menuContainerRef?.current?.clientWidth;
+      const { x, width } = menuItemRef.current.getBoundingClientRect();
+      const bodyWidth = document.body.clientWidth;
+
+      setOrigins(x + width + subMenuWidth > bodyWidth ? leftOrigins : rightOrigins);
+    }
+  }, []);
+
+  // Root element must have a `tabIndex` attribute for keyboard navigation
+  let tabIndex;
+  if (!props.disabled) {
+    tabIndex = tabIndexProp ?? -1;
+  }
+
+  return (
+    <Box
+      {...ContainerProps}
+      ref={containerRef}
+      tabIndex={tabIndex}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onKeyDown={onKeyDown}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+
+      <IconMenuItem
+        ref={menuItemRef}
+        MenuItemProps={MenuItemProps}
+        className={className}
+        label={label}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
+        checked={checked}
+        onClick={onIconMenuItemClick}
+      />
+      <Menu
+        ref={menuRef}
+        disableAutoFocus
+        disableEnforceFocus
+        // from capturing events for clicks and hovers
+        anchorEl={menuItemRef.current}
+        anchorOrigin={origins.anchor}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={false}
+        open={open}
+        // Set pointer events to 'none' to prevent the invisible Popover div
+        sx={{
+          pointerEvents: 'none',
+        }}
+        transformOrigin={origins.transform}
+        onClose={onMenuClose}
+        {...MenuProps}
+      >
+        <Box
+          ref={menuContainerRef}
+          sx={{ pointerEvents: 'auto' }}
+        >
+          {children}
+        </Box>
+      </Menu>
+
+    </Box>
+  );
+};

package/src/components/ui/NestedMenu/index.ts

@@ -0,0 +1,4 @@
+export * from './IconMenuItem';
+export * from './NestedDropdown';
+export * from './NestedMenuItem';
+export * from './nestedMenuItemsFromObject';

package/src/components/ui/NestedMenu/nestedMenuItemsFromObject.tsx

@@ -0,0 +1,98 @@
+import { Tooltip } from '@mui/material';
+
+import type { MenuItemData } from '../../../models/nestedMenu';
+
+import { IconMenuItem } from './IconMenuItem';
+import { NestedMenuItem } from './NestedMenuItem';
+
+export interface NestedMenuItemsFromObjectProps {
+  menuItemsData: MenuItemData[];
+  isOpen: boolean;
+  handleClose: () => void;
+}
+
+/**
+ * Create a JSX element with nested elements creating a nested menu.
+ * Every menu item should have a uid provided
+ */
+export const nestedMenuItemsFromObject = ({
+  menuItemsData: items,
+  isOpen,
+  handleClose,
+}: NestedMenuItemsFromObjectProps) => {
+  return items.map((item) => {
+    const { leftIcon, rightIcon, label, tooltip, items: menuItemsData, callback, sx, disabled, active, divider, autoCloseDisabled, checked } = item;
+    if (!disabled && menuItemsData && menuItemsData.length > 0) {
+      return (
+        <Tooltip
+          key={label}
+          arrow
+          placement={'right'}
+          title={undefined}
+        >
+          <NestedMenuItem
+            key={label}
+            checked={checked}
+            active={active}
+            callback={callback}
+            disabled={disabled}
+            label={label}
+            leftIcon={leftIcon}
+            parentMenuOpen={isOpen}
+            rightIcon={rightIcon}
+            sx={sx}
+          >
+            {/* Call this function to nest more items */}
+            {nestedMenuItemsFromObject({
+              handleClose,
+              isOpen,
+              menuItemsData,
+            })}
+          </NestedMenuItem>
+        </Tooltip>
+      );
+    }
+
+    const iconMenuItem = (
+      <IconMenuItem
+        key={label}
+        checked={checked}
+        disabled={disabled}
+        divider={divider}
+        label={label}
+        rightIcon={rightIcon}
+        sx={{
+          ...(sx || {}),
+          '& p': {
+            fontWeight: active ? 700 : undefined,
+          },
+        }}
+        leftIcon={leftIcon}
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => {
+          if (!autoCloseDisabled) {
+            handleClose();
+          }
+          if (callback) {
+            callback();
+          }
+        }}
+      />
+    );
+    if (disabled) {
+      return iconMenuItem;
+    }
+
+    // No children elements, return MenuItem
+    return (
+      <Tooltip
+        key={label}
+        arrow
+        placement={'right'}
+        title={tooltip ?? label}
+      >
+        {iconMenuItem}
+      </Tooltip>
+    );
+  });
+};

package/src/components/ui/Notifications/NotificationItem.tsx

@@ -0,0 +1,70 @@
+import {
+  Alert,
+  CircularProgress,
+  AlertTitle,
+  Box,
+} from '@mui/material';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { TimeUtil } from '../../../utils/TimeUtil';
+import type { Notification } from '../../../models/notification';
+
+export type NotificationItemProps = {
+  readonly notification: Notification;
+  readonly showTimestamp?: boolean;
+  readonly onClose: (key: string) => void;
+  readonly allowClose: boolean;
+};
+
+export const NotificationItem = ({ notification, showTimestamp, onClose, allowClose }: NotificationItemProps) => {
+  const { t } = useTranslation();
+
+  const onCloseButtonClick = useCallback(() => {
+    onClose(notification.key);
+  }, [notification.key, onClose]);
+
+  const now = new Date().getTime();
+
+  return (
+    <Alert
+      {...TestIdUtil.createAttributes('NotificationItem', { key: notification.key })}
+      closeText={t`Clear notification`}
+      icon={notification.isLoading ? <CircularProgress size={16} /> : undefined}
+      severity={notification.isLoading ? 'info' : notification.severity}
+      slotProps={{
+        message: {
+          sx: {
+            flexGrow: 1,
+          },
+        },
+      }}
+      sx={{
+        boxShadow: 1,
+        marginBottom: 1,
+        backgroundColor: 'background.paper',
+      }}
+      onClose={allowClose ? onCloseButtonClick : undefined}
+    >
+      <AlertTitle
+        sx={{
+          width: '100%',
+        }}
+      >
+        {notification.message}
+      </AlertTitle>
+      {showTimestamp && (
+        <Box
+          sx={{
+            textAlign: 'right',
+          }}
+        >
+          {TimeUtil.getReadableTimeRemaining(now - notification.timestamp, true)}
+          {' '}
+          {t('ago')}
+        </Box>
+      )}
+    </Alert>
+  );
+};