alkem-io / client-web / #9533

import MoreVertIcon from '@mui/icons-material/MoreVert';

import { ClickAwayListener, IconButton, Menu } from '@mui/material';

import { Children, MouseEvent, PropsWithChildren, cloneElement, isValidElement, useCallback, useState } from 'react';

import { useTranslation } from 'react-i18next';

};

  // prevent the redirection of Link components when clicking on the ActionsMenu

    event.stopPropagation();

    setSettingsAnchorEl(event.currentTarget);

  }, []);

  }, [setSettingsAnchorEl]);

  const clonedChildren = Children.map(children, child => {

      return cloneElement(child, {

        onClick: (event: React.MouseEvent<HTMLElement>) => {

          child.props.onClick?.(event);

          handleClose();

      });

    }

  });

  return (

        aria-label={t('common.settings')}

        aria-haspopup="true"

        aria-controls={settingsOpened ? 'settings-menu' : undefined}

        aria-expanded={settingsOpened ? 'true' : undefined}

        onClick={onMenuClick}

      >

        <MoreVertIcon color="primary" />

      </IconButton>

      <ClickAwayListener onClickAway={handleClose}>

        <Menu

          aria-labelledby="settings-button"

          anchorEl={settingsAnchorEl}

          open={settingsOpened}

          onClose={handleClose}

          anchorOrigin={{

            vertical: 'top',

            horizontal: 'right',

          }}

        >

          {clonedChildren}

        </Menu>

      </ClickAwayListener>

    </div>

  );

};

export default ActionsMenu;