@gen-epix/ui 1.15.1 → 1.16.0

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

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

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

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

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

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

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

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

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

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

@@ -1,70 +0,0 @@
-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>
-  );
-};