@genesislcap/grid-pro 15.72.0 → 15.73.0-FUI-2628.4

package/dist/esm/context-menu/context-menu.js

@@ -0,0 +1,379 @@
+import { css, DOM } from '@microsoft/fast-element';
+import { logger } from '../utils/logger';
+/**
+ * Same surface as the vertical actions menu: AG Grid's context-menu variables, with design-system
+ * tokens when those variables are not set. The menu is drawn in the top layer, outside the themed
+ * grid element, so the values are copied from the cell that was clicked.
+ */
+const contextMenuStyles = css `
+  :host {
+    display: block;
+  }
+
+  :host > .grid-context-menu,
+  .grid-context-menu-item > .grid-context-menu {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--ag-spacing, 4px) 0;
+    max-width: 368px;
+    min-width: 64px;
+    background-color: var(--ag-menu-background-color, var(--fill-color));
+    border: var(
+      --ag-menu-border,
+      calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest, transparent)
+    );
+    border-radius: var(--ag-border-radius, calc(var(--control-corner-radius, 2) * 1px));
+    box-shadow: var(--ag-menu-shadow, var(--ag-popup-shadow, 0 2px 8px rgb(0 0 0 / 30%)));
+    color: var(--ag-menu-text-color, var(--neutral-foreground-rest));
+    font-family: var(--ag-font-family, var(--body-font));
+  }
+
+  .grid-context-menu > .grid-context-menu-item {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    height: calc(var(--ag-icon-size, 16px) + (var(--ag-spacing, 4px) + 2px) * 2);
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--ag-font-size, var(--type-ramp-base-font-size));
+    font-weight: 500;
+    user-select: none;
+  }
+
+  .grid-context-menu > .grid-context-menu-separator {
+    margin: var(--ag-spacing, 4px) 0;
+    border-top: var(
+      --ag-menu-border,
+      calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest, currentColor)
+    );
+    opacity: 50%;
+  }
+
+  .grid-context-menu > .grid-context-menu-item:hover,
+  .grid-context-menu > .grid-context-menu-item:focus {
+    background: var(--ag-row-hover-color, var(--neutral-fill-stealth-hover));
+    border: none;
+  }
+
+  .grid-context-menu > .grid-context-menu-item[disabled] {
+    background: transparent;
+    cursor: default;
+    opacity: 50%;
+  }
+
+  .grid-context-menu > .grid-context-menu-item::part(content) {
+    flex: 1;
+    margin-inline: 0;
+    padding-inline: calc(var(--ag-spacing, 4px) * 2) calc(var(--ag-spacing, 4px) * 4);
+    line-height: var(--ag-icon-size, 16px);
+  }
+
+  /* A plain item in a menu with checkboxes lines its text up with theirs. */
+  .grid-context-menu
+    > .grid-context-menu-item.indent-1:not([role='menuitemcheckbox'])::part(content) {
+    padding-inline-start: calc(var(--ag-spacing, 4px) * 4 + var(--ag-icon-size, 16px));
+  }
+
+  .grid-context-menu > .grid-context-menu-item::part(end) {
+    padding-inline-end: calc(var(--ag-spacing, 4px) * 2);
+  }
+
+  .grid-context-menu > .grid-context-menu-item [slot='end'] {
+    white-space: nowrap;
+  }
+
+  /* The menu item's own boxed, accent-filled checkbox and wide chevron, reduced to AG Grid's
+     icon column: a bare tick and a small arrow at the grid's icon size. */
+  .grid-context-menu > .grid-context-menu-item::part(input-container) {
+    margin: 0;
+    padding-inline-start: calc(var(--ag-spacing, 4px) * 2);
+  }
+
+  .grid-context-menu > .grid-context-menu-item::part(checkbox),
+  .grid-context-menu > .grid-context-menu-item[aria-checked='true']::part(checkbox) {
+    width: var(--ag-icon-size, 16px);
+    height: var(--ag-icon-size, 16px);
+    margin: 0;
+    background: transparent;
+    border: none;
+  }
+
+  .grid-context-menu > .grid-context-menu-item::part(expand-collapse-glyph-container) {
+    margin: 0;
+    padding-inline-end: calc(var(--ag-spacing, 4px) * 2);
+  }
+
+  .grid-context-menu > .grid-context-menu-item::part(expand-collapse) {
+    width: var(--ag-icon-size, 16px);
+    height: var(--ag-icon-size, 16px);
+    margin: 0;
+  }
+
+  .grid-context-menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ag-icon-size, 16px);
+    height: var(--ag-icon-size, 16px);
+    font-size: var(--ag-icon-size, 16px);
+    color: inherit;
+  }
+
+  /* Font Awesome's chevron fills its box; the check does not, so the arrow is drawn smaller. */
+  .grid-context-menu-icon.chevron {
+    font-size: calc(var(--ag-icon-size, 16px) * 0.75);
+  }
+`;
+/** The design-system icon (`${prefix}-icon`), which draws Font Awesome. */
+function menuIcon(prefix, slot, name, variant) {
+    const icon = document.createElement(`${prefix}-icon`);
+    icon.slot = slot;
+    icon.classList.add('grid-context-menu-icon');
+    if (variant) {
+        icon.classList.add(variant);
+    }
+    icon.setAttribute('name', name);
+    icon.setAttribute('size', '1x');
+    icon.setAttribute('aria-hidden', 'true');
+    return icon;
+}
+/**
+ * Custom properties the menu reads. AG Grid sets its theme on its wrapper element, which is not an
+ * ancestor of the menu, so they are copied from the clicked cell.
+ */
+const MENU_THEME_PROPERTIES = [
+    '--ag-spacing',
+    '--ag-icon-size',
+    '--ag-font-size',
+    '--ag-font-family',
+    '--ag-menu-background-color',
+    '--ag-menu-border',
+    '--ag-menu-text-color',
+    '--ag-menu-shadow',
+    '--ag-popup-shadow',
+    '--ag-border-radius',
+    '--ag-row-hover-color',
+    '--fill-color',
+    '--neutral-stroke-rest',
+    '--neutral-foreground-rest',
+    '--neutral-fill-stealth-hover',
+    '--body-font',
+    '--type-ramp-base-font-size',
+    '--stroke-width',
+    '--control-corner-radius',
+];
+function applyMenuTheme(host, source) {
+    if (!source) {
+        return;
+    }
+    const computed = getComputedStyle(source);
+    for (const name of MENU_THEME_PROPERTIES) {
+        const value = computed.getPropertyValue(name).trim();
+        if (value) {
+            host.style.setProperty(name, value);
+        }
+    }
+}
+/**
+ * A CSV Export item, using AG Grid's community CSV export. Assign it to `contextMenuItems` as the
+ * whole menu, or spread its result into a menu of your own. Empty when the grid sets
+ * `suppressCsvExport`.
+ *
+ * @public
+ */
+export function defaultGridContextMenuItems(event) {
+    var _a;
+    if ((_a = event.api) === null || _a === void 0 ? void 0 : _a.getGridOption('suppressCsvExport')) {
+        return [];
+    }
+    return [
+        {
+            name: 'CSV Export',
+            action: () => { var _a; return (_a = event.api) === null || _a === void 0 ? void 0 : _a.exportDataAsCsv(); },
+        },
+    ];
+}
+/** Each prefix is reported once, not on every right-click. */
+const prefixesReportedMissing = new Set();
+function menuComponentsRegistered(prefix) {
+    if (customElements.get(`${prefix}-menu`) && customElements.get(`${prefix}-menu-item`)) {
+        return true;
+    }
+    if (!prefixesReportedMissing.has(prefix)) {
+        prefixesReportedMissing.add(prefix);
+        logger.warn(`Grid Pro: the right-click menu needs <${prefix}-menu> and <${prefix}-menu-item> registered ` +
+            'in the design system. The browser menu is shown instead.');
+    }
+    return false;
+}
+/**
+ * Opens a design-system menu at the pointer and returns a function that removes it, or
+ * `undefined` when the design system has not registered the menu components.
+ *
+ * A pointer press outside, a scroll outside, a window resize, Escape or Tab closes it. Choosing an item runs its
+ * action and closes it; an item with a submenu opens the submenu instead.
+ *
+ * @internal
+ */
+export function openGridContextMenu(options) {
+    var _a, _b;
+    const { prefix, x, y, items, themeSource } = options;
+    if (!menuComponentsRegistered(prefix)) {
+        return undefined;
+    }
+    const host = document.createElement('div');
+    host.classList.add('grid-context-menu-host');
+    host.style.cssText = MENU_HOST_STYLE;
+    applyMenuTheme(host, themeSource);
+    host.addEventListener('mousedown', (event) => event.stopPropagation());
+    const shadow = host.attachShadow({ mode: 'open' });
+    contextMenuStyles.addStylesTo(shadow);
+    const container = (_a = options.container) !== null && _a !== void 0 ? _a : document.body;
+    const containerRoot = container.getRootNode();
+    const returnFocusTo = (_b = themeSource === null || themeSource === void 0 ? void 0 : themeSource.closest('.ag-cell')) !== null && _b !== void 0 ? _b : null;
+    let closed = false;
+    const close = (restoreFocus = false) => {
+        if (closed) {
+            return;
+        }
+        closed = true;
+        const focusWasInMenu = host.matches(':focus-within');
+        host.remove();
+        window.removeEventListener('mousedown', onPointerDownOutside);
+        window.removeEventListener('resize', onResize);
+        window.removeEventListener('scroll', onScroll, true);
+        if (containerRoot instanceof ShadowRoot) {
+            containerRoot.removeEventListener('scroll', onScroll, true);
+        }
+        window.removeEventListener('keydown', onKeyDown, true);
+        if (restoreFocus && focusWasInMenu) {
+            returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.focus({ preventScroll: true });
+        }
+    };
+    const onPointerDownOutside = () => close();
+    const onResize = () => close();
+    // Scroll does not cross shadow roots, so a grid in a shadow root is watched there as well.
+    const onScroll = (event) => {
+        if (!event.composedPath().includes(host)) {
+            close();
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            event.preventDefault();
+            event.stopPropagation();
+            close(true);
+        }
+    };
+    const menu = document.createElement(`${prefix}-menu`);
+    menu.classList.add('grid-context-menu');
+    appendMenuItems(prefix, menu, items, () => close(true));
+    shadow.append(menu);
+    container.appendChild(host);
+    showInTopLayer(host);
+    placeWithinViewport(host, x, y);
+    window.addEventListener('mousedown', onPointerDownOutside);
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', onScroll, true);
+    if (containerRoot instanceof ShadowRoot) {
+        containerRoot.addEventListener('scroll', onScroll, true);
+    }
+    window.addEventListener('keydown', onKeyDown, true);
+    // The menu collects its items on the next update; focusing it before then does nothing.
+    DOM.queueUpdate(() => {
+        if (!closed) {
+            menu.focus();
+        }
+    });
+    return () => close();
+}
+/** Overrides the user-agent popover box; `z-index` only matters where popovers are unsupported. */
+const MENU_HOST_STYLE = 'position: fixed; inset: auto; margin: 0; padding: 0; border: 0; overflow: visible; ' +
+    'background: transparent; color: inherit; z-index: 10000;';
+/**
+ * The top layer keeps the menu above dialogs and clear of transformed or clipping ancestors.
+ * Browsers without popovers fall back to the fixed, high z-index of {@link MENU_HOST_STYLE}.
+ */
+function showInTopLayer(host) {
+    if (typeof host.showPopover === 'function') {
+        host.popover = 'manual';
+        host.showPopover();
+    }
+}
+/** Opens at the pointer, flipping left or up where the menu would leave the viewport. */
+function placeWithinViewport(host, x, y) {
+    host.style.left = `${x}px`;
+    host.style.top = `${y}px`;
+    const { width, height } = host.getBoundingClientRect();
+    if (x + width > window.innerWidth) {
+        host.style.left = `${Math.max(0, x - width)}px`;
+    }
+    if (y + height > window.innerHeight) {
+        host.style.top = `${Math.max(0, y - height)}px`;
+    }
+}
+function appendMenuItems(prefix, menu, items, close) {
+    var _a;
+    // Separators only go between items, so an empty spread does not leave a stray line.
+    const entries = items.filter((item, index) => item !== 'separator' || (index > 0 && items[index - 1] !== 'separator'));
+    while (entries[0] === 'separator')
+        entries.shift();
+    while (entries.at(-1) === 'separator')
+        entries.pop();
+    for (const item of entries) {
+        if (item === 'separator') {
+            const separator = document.createElement('div');
+            separator.setAttribute('role', 'separator');
+            separator.classList.add('grid-context-menu-separator');
+            menu.append(separator);
+            continue;
+        }
+        const menuItem = document.createElement(`${prefix}-menu-item`);
+        menuItem.classList.add('grid-context-menu-item');
+        menuItem.textContent = item.name;
+        if (item.tooltip) {
+            menuItem.title = item.tooltip;
+        }
+        if (item.checked !== undefined) {
+            menuItem.setAttribute('role', 'menuitemcheckbox');
+            if (item.checked) {
+                menuItem.setAttribute('checked', '');
+                // Neither design system draws a checkbox glyph of its own.
+                menuItem.append(menuIcon(prefix, 'checkbox-indicator', 'check'));
+            }
+        }
+        if (item.shortcut) {
+            const shortcut = document.createElement('span');
+            shortcut.slot = 'end';
+            shortcut.textContent = item.shortcut;
+            menuItem.append(shortcut);
+        }
+        if (item.disabled) {
+            menuItem.setAttribute('disabled', '');
+        }
+        const hasSubMenu = !!((_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.length);
+        if (hasSubMenu) {
+            const subMenu = document.createElement(`${prefix}-menu`);
+            subMenu.slot = 'submenu';
+            subMenu.classList.add('grid-context-menu');
+            appendMenuItems(prefix, subMenu, item.subMenu, close);
+            menuItem.append(menuIcon(prefix, 'expand-collapse-indicator', 'chevron-right', 'chevron'), subMenu);
+        }
+        // `change` is what the menu item emits for a click, Enter or Space alike.
+        menuItem.addEventListener('change', (event) => {
+            var _a;
+            if (event.target !== menuItem || hasSubMenu || item.disabled) {
+                return;
+            }
+            (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item);
+            close();
+        });
+        menu.append(menuItem);
+    }
+}

package/dist/esm/context-menu/index.js

@@ -0,0 +1 @@
+export { defaultGridContextMenuItems, } from './context-menu';

package/dist/esm/grid-pro.js

@@ -13,6 +13,7 @@ import { GridProColumn, resolveVisibleColumnFields } from './column';
 import { EnumColumnFilter, EnumColumnFloatingFilter, GridProFilterTypes } from './column-filters';
 import { ColumnSelection, gridProColumnSelectionHostStyles } from './column-selection';
 import { GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY, gridProColumnDragBridgeModule, } from './column-selection/grid-pro-column-drag-bridge';
+import { openGridContextMenu } from './context-menu/context-menu';
 import { GridProClientSideDatasource, GridProInfiniteDatasource, GridProServerSideDatasource, } from './datasource';
 import { baseDatasourceEventNames } from './datasource/base.types';
 import { errorHandlerDialogStyles } from './datasource/error-handler.dialog';
@@ -159,6 +160,9 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         }
         return undefined;
     }
+    contextMenuItemsChanged() {
+        this.syncContextMenuSuppression();
+    }
     enableColumnSelectionChanged() {
         this.syncColumnSelectionHostLayout();
     }
@@ -234,6 +238,8 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.statusPanelState = {};
         this.warnedUnregisteredStatusBar = false;
         this.warnedGridOptionsStatusBar = false;
+        /** Whether the AG grid instance was created with its own context menu suppressed. */
+        this.gridCreatedWithMenuSuppressed = false;
         /**
          * Shows a Columns side panel on the trailing edge of the grid.
          * @public
@@ -247,6 +253,15 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.registeredGridEvents = new Set();
         this.gridEventListeners = new Map();
         this.boundGlobalEventListener = this.globalEventListener.bind(this);
+        /**
+         * `globalListener` runs on a timeout, which is too late to cancel the browser menu.
+         * This one runs inside the right-click event.
+         */
+        this.boundContextMenuListener = (eventType, event) => {
+            if (eventType === 'cellContextMenu') {
+                this.showContextMenu(event);
+            }
+        };
         this._filterConfig = undefined;
         this.handleLuminanceChange = (record) => {
             const luminance = baseLayerLuminance.getValueFor(record.target);
@@ -414,11 +429,13 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.toggleDatasourceEventListeners(true);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
+        (_a = this.closeContextMenu) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.closeContextMenu = undefined;
         this.disposed = true;
         this.debouncedSaveColumnState.cancel();
         this.debouncedSaveFilterModel.cancel();
-        const luminanceTarget = (_a = this.provider) !== null && _a !== void 0 ? _a : this;
+        const luminanceTarget = (_b = this.provider) !== null && _b !== void 0 ? _b : this;
         baseLayerLuminance.unsubscribe(this.luminanceObserver, luminanceTarget);
         if (this.luminanceSubscription) {
             this.luminanceSubscription.unsubscribe();
@@ -1171,6 +1188,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     get gridParams() {
         return {
             globalListener: this.boundGlobalEventListener,
+            globalSyncListener: this.boundContextMenuListener,
             modules: [gridProColumnDragBridgeModule, ColumnMoveModule, DragAndDropModule],
         };
     }
@@ -1238,6 +1256,9 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         const derivedOptions = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.gridOptionsConfig), { defaultColDef: Object.assign({ enableCellChangeFlash: this.enableCellFlashing, filter: true, resizable: true, sortable: true }, defaultColDef), components: this.combineAllGridComponents(components), headerHeight: this.headerHeight, rowHeight: this.rowHeight, animateRows: false, suppressDragLeaveHidesColumns: true }), this.eventsAndCallbacks), { onGridReady: (event) => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b, _c;
                 this.gridApi = event.api;
+                if (!!this.contextMenuItems !== this.gridCreatedWithMenuSuppressed) {
+                    this.syncContextMenuSuppression();
+                }
                 this.applyStatusBarMode();
                 if (this.gridEventsQueue.length) {
                     this.gridEventsQueue.forEach((type) => {
@@ -1374,7 +1395,9 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     this.gridSlot.removeChild(this.gridSlot.firstChild);
                 }
             }
-            this.agGrid = createGrid(this.gridSlot, this.agGridOptions, this.gridParams);
+            this.gridCreatedWithMenuSuppressed = !!this.contextMenuItems;
+            this.agGrid = createGrid(this.gridSlot, this.gridCreatedWithMenuSuppressed
+                ? Object.assign(Object.assign({}, this.agGridOptions), { suppressContextMenu: true }) : this.agGridOptions, this.gridParams);
             this.initialised = true;
         });
     }
@@ -1508,9 +1531,61 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             if (this.initialised) {
                 // for subsequent (post gridOptions) changes - use setGridOption API for v35
                 (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.setGridOption(gridPropertyName, newValue);
+                if (gridPropertyName === 'suppressContextMenu' && this.contextMenuItems) {
+                    this.syncContextMenuSuppression();
+                }
             }
         }
     }
+    /**
+     * AG Grid draws its own menu when `ContextMenu` is registered, so it is suppressed while
+     * `contextMenuItems` is set and the app's own `suppressContextMenu` restored when it is cleared.
+     * The suppression goes to AG Grid only, never into `agGridOptions`: that object is what the
+     * `gridOptions` getter returns, and an app re-applying it would otherwise adopt the setting.
+     * @internal
+     */
+    syncContextMenuSuppression() {
+        var _a, _b, _c, _d;
+        const appSetting = (_c = (_a = this.agAttributes.suppressContextMenu) !== null && _a !== void 0 ? _a : (_b = this.agGridOptions) === null || _b === void 0 ? void 0 : _b.suppressContextMenu) !== null && _c !== void 0 ? _c : false;
+        (_d = this.gridApi) === null || _d === void 0 ? void 0 : _d.setGridOption('suppressContextMenu', this.contextMenuItems ? true : appSetting);
+    }
+    /**
+     * Opens the grid's right-click menu for a cell. Called from the synchronous grid listener so
+     * `preventDefault` still cancels the browser menu.
+     * @internal
+     */
+    showContextMenu(event) {
+        var _a, _b, _c, _d, _e;
+        const items = (_a = this.contextMenuItems) === null || _a === void 0 ? void 0 : _a.call(this, event);
+        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+            return;
+        }
+        const mouse = event.event instanceof MouseEvent ? event.event : null;
+        const pathTarget = mouse === null || mouse === void 0 ? void 0 : mouse.composedPath()[0];
+        const target = pathTarget instanceof Element ? pathTarget : null;
+        let x = (_b = mouse === null || mouse === void 0 ? void 0 : mouse.clientX) !== null && _b !== void 0 ? _b : 0;
+        let y = (_c = mouse === null || mouse === void 0 ? void 0 : mouse.clientY) !== null && _c !== void 0 ? _c : 0;
+        // A menu opened from the keyboard can arrive without a pointer position.
+        const cell = target === null || target === void 0 ? void 0 : target.closest('.ag-cell');
+        if (x === 0 && y === 0 && cell) {
+            const rect = cell.getBoundingClientRect();
+            x = rect.left;
+            y = rect.bottom;
+        }
+        (_d = this.closeContextMenu) === null || _d === void 0 ? void 0 : _d.call(this);
+        const [prefix = 'foundation'] = this.tagName.toLowerCase().split('-');
+        this.closeContextMenu = openGridContextMenu({
+            prefix,
+            x,
+            y,
+            items,
+            container: (_e = this.shadowRoot) !== null && _e !== void 0 ? _e : undefined,
+            themeSource: target,
+        });
+        if (this.closeContextMenu && (mouse === null || mouse === void 0 ? void 0 : mouse.cancelable)) {
+            mouse.preventDefault();
+        }
+    }
     globalEventListener(eventType, event) {
         const eventLowerCase = eventType.toLowerCase();
         const browserEvent = new Event(eventLowerCase);
@@ -1597,6 +1672,9 @@ __decorate([
 __decorate([
     observable
 ], GridPro.prototype, "statusBarMode", void 0);
+__decorate([
+    observable
+], GridPro.prototype, "contextMenuItems", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'enable-column-selection' })
 ], GridPro.prototype, "enableColumnSelection", void 0);

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export * from './cell-editors';
 export * from './column';
 export * from './column-selection';
 export * from './column-filters';
+export * from './context-menu';
 export * from './datasource';
 export * from './external';
 export * from './grid-components';