Popupmenu: Improve Event Support

[tmcconechy]

Describe the bug
The current api for popupmenus in datagrid has a bug where the events will stack up. Will also like to be able to distinguish right clicking between: header vs header filter, and normal cell vs editable element

To Reproduce

Steps to reproduce the behavior:

1. Copy attached example over the existing one and run
2. Right click on the header and select a menu
3. Right click on the header filter and select a menu
4. Right click on a cell and select a menu
5. Right click on different cell and select a menu

In addition add the following to the m3-example.html

      dataGrid.addEventListener('beforemenushow', (e: any) => {
        console.info(detail.data.type);
      })

1. try to right click the header -> can see the type this is working
2. try to right click the header filter input -> need a new type for this
3. try to right click a cell -> can see the type this is working
4. try to right click an inline editable cell -> need a new type for this
5. Add md Docs for this and tests

Expected behavior
New types in events and events not stacking up

Additional context
M3 - email..

Code:

import '../ids-data-grid';
import booksJSON from '../../../assets/data/books.json';
import menuContentsJSON from '../../../assets/data/menu-contents.json';

// Example for populating the DataGrid
const dataGrid: any = document.querySelector('#data-grid-contextmenu-thru-data');
const container: any = document.querySelector('ids-container');

if (dataGrid) {
  (async function init() {
    // Set Locale and wait for it to load
    await container?.setLocale('en-US');

    // Do an ajax request
    const url: any = booksJSON;
    const menuUrl: any = menuContentsJSON;

    // Header contextmenu data
    const headerMenuData = {
      id: 'grid-header-menu',
      contents: [{
        id: 'actions-group',
        items: [
          { id: 'actions-split', value: 'actions-split', text: 'Split' },
          { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },
          { id: 'actions-hide', value: 'actions-hide', text: 'Hide' }
        ]
      }],
    };

    // Set up columns
    const columns = [];
    columns.push({
      id: 'selectionCheckbox',
      name: 'selection',
      sortable: false,
      resizable: false,
      formatter: dataGrid.formatters.selectionCheckbox,
      align: 'center'
    });
    columns.push({
      id: 'rowNumber',
      name: '#',
      formatter: dataGrid.formatters.rowNumber,
      sortable: false,
      readonly: true,
      width: 65
    });
    columns.push({
      id: 'description',
      name: 'Description',
      field: 'description',
      sortable: true,
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'ledger',
      name: 'Ledger',
      field: 'ledger',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'publishDate',
      name: 'Pub. Date',
      field: 'publishDate',
      formatter: dataGrid.formatters.date
    });
    columns.push({
      id: 'publishTime',
      name: 'Pub. Time',
      field: 'publishDate',
      formatter: dataGrid.formatters.time
    });
    columns.push({
      id: 'price',
      name: 'Price',
      field: 'price',
      formatter: dataGrid.formatters.decimal,
      formatOptions: { locale: 'en-US' } // Data Values are in en-US
    });
    columns.push({
      id: 'bookCurrency',
      name: 'Currency',
      field: 'bookCurrency',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'transactionCurrency',
      name: 'Transaction Currency',
      field: 'transactionCurrency',
      formatter: dataGrid.formatters.text,
    });
    columns.push({
      id: 'integer',
      name: 'Price (Int)',
      field: 'price',
      formatter: dataGrid.formatters.integer,
      formatOptions: { locale: 'en-US' } // Data Values are in en-US
    });
    columns.push({
      id: 'location',
      name: 'Location',
      field: 'location',
      formatter: dataGrid.formatters.hyperlink,
      href: '#'
    });
    columns.push({
      id: 'postHistory',
      name: 'Post History',
      field: 'postHistory',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'active',
      name: 'Active',
      field: 'active',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'convention',
      name: 'Convention',
      field: 'convention',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'methodSwitch',
      name: 'Method Switch',
      field: 'methodSwitch',
      formatter: dataGrid.formatters.text
    });
    columns.push({
      id: 'trackDeprecationHistory',
      name: 'Track Deprecation History',
      field: 'trackDeprecationHistory',
      formatter: dataGrid.formatters.dropdown
    });
    columns.push({
      id: 'useForEmployee',
      name: 'Use For Employee',
      field: 'useForEmployee',
      formatter: dataGrid.formatters.password
    });
    columns.push({
      id: 'deprecationHistory',
      name: 'Deprecation History',
      field: 'deprecationHistory',
      formatter: dataGrid.formatters.text
    });

    dataGrid.columns = columns;
    const setData = async () => {
      let counter = 0;
      const res = await fetch(url);
      const menuRes = await fetch(menuUrl);

      const data = await res.json();
      const menuData = await menuRes.json();

      dataGrid.data = data;
      dataGrid.menuData = menuData;
      dataGrid.headerMenuData = headerMenuData;

      dataGrid.addEventListener('beforemenushow', (e: any) => {
        console.info('before contextmenu show', e.detail);
        counter++;
        if (counter % 2 === 0) {
          dataGrid.menuData = headerMenuData;
        } else {
          dataGrid.menuData = menuData;
        }
        // e.detail.response(false);
      });

      dataGrid.addEventListener('menushow', (e: any) => {
        console.info('After contextmenu show', e.detail);
      });

      dataGrid.addEventListener('menuselected', (e: any) => {
        console.info('contextmenu item selected', e.detail);
      });
    };

    setData();
  }());
}

[jbrcna]

QA Passed