@genesislcap/foundation-ui 15.75.0 → 15.76.0

package/dist/dts/actions-menu/actions-menu.d.ts

@@ -1,4 +1,6 @@
+import type { IconStyle } from '@fortawesome/fontawesome-svg-core';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { FaSize } from '../icon';
 /**
  * The Action Menu Item component.
  * @remarks Used within the Action Menu component.
@@ -9,18 +11,44 @@ export type ActionMenuItem = {
     callback: (rowData: any) => void | any;
     isDisabled?: (rowData: any) => boolean;
     color?: string;
+    icon?: {
+        variant?: IconStyle;
+        name: string;
+        size?: FaSize;
+    };
 };
+/**
+ * A function of the row data returning the actions for that row (for row-scoped
+ * eligibility/permission filtering).
+ * @public
+ */
+export type ActionMenuItemsResolver = (rowData: any) => ActionMenuItem[];
+/**
+ * The actions a grid column's Actions Menu shows: a fixed array, or a resolver per row.
+ * @public
+ */
+export type ActionMenuItems = ActionMenuItem[] | ActionMenuItemsResolver;
 /**
  * @tagname %%prefix%%-actions-menu
  */
 export declare class ActionsMenu extends FoundationElement {
     actions: ActionMenuItem[];
+    /**
+     * Resolves the actions per row instead of `actions`, from the row data in `definition`.
+     * @remarks Set from a function passed as the cell params' `actions`.
+     */
+    actionsResolver?: ActionMenuItemsResolver;
     isVertical: boolean;
     addDefaultActions: boolean;
     autoCloseOnAction: boolean;
     classNames: string;
     definition: any;
     name: string;
+    /**
+     * When set, the opener renders this icon instead of the `name` text (e.g. `ellipsis`
+     * for an icon-only "kebab" opener).
+     */
+    iconName: string;
     open: boolean;
     buttonAppearance: string;
     hideDisabled: boolean;
@@ -28,12 +56,30 @@ export declare class ActionsMenu extends FoundationElement {
     singleOption: ActionMenuItem;
     actionsMenu: HTMLElement;
     actionsOpener: HTMLElement;
+    private positionTracker?;
+    /** Set when the keyboard opens the menu, so focus moves into it as screen readers announce. */
+    private focusMenuOnOpen;
     disconnectedCallback(): void;
     private updateMenuPosition;
+    private startTrackingPosition;
+    private stopTrackingPosition;
     protected definitionChanged(oldValue: any, newValue: any): void;
     protected openChanged(): void;
     toggleActionsMenuVisibility(): void;
+    /**
+     * Syncs `open` when the native `popover="auto"` light-dismiss (outside click / Escape) closes
+     * the vertical menu without going through `toggleActionsMenuVisibility()`.
+     */
+    onPopoverToggle(event: Event): void;
+    /** Opens the icon-only opener from the keyboard, as a native button would. */
+    onIconOpenerKeydown(event: KeyboardEvent): boolean;
     onActionMenuItemClick(callback: (rowData: any) => void | any): void;
+    /** Resolves an action's `isDisabled` for the current row. */
+    isActionDisabled(action: ActionMenuItem): boolean;
+    /** The actions for the current row: from `actionsResolver` when set, else `actions`. */
+    get resolvedActions(): ActionMenuItem[];
+    /** Whether the row has an action to show: an enabled one, or any when disabled ones show. */
+    get hasVisibleActions(): boolean;
     get allActions(): ActionMenuItem[];
     get rowData(): any;
     getLabel(name: string | ((rowData: any) => string)): string;

package/dist/dts/actions-menu/actions-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-menu.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAS/D;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IACpC,OAAO,EAAE,cAAc,EAAE,CAAC;IACe,UAAU,EAAE,OAAO,CAAS;IACpB,iBAAiB,EAAE,OAAO,CAAQ;IACjC,iBAAiB,EAAE,OAAO,CAAQ;IACpF,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,CAAC;IACtB,IAAI,SAAa;IACuB,IAAI,EAAE,OAAO,CAAS;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACwB,YAAY,EAAE,OAAO,CAAS;IACpB,oBAAoB,EAAE,OAAO,CACtF;IACI,YAAY,EAAE,cAAc,CAAC;IAEzC,WAAW,EAAG,WAAW,CAAC;IAC1B,aAAa,EAAG,WAAW,CAAC;IAE5B,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,kBAAkB;IAQ1B,SAAS,CAAC,iBAAiB,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;IAyBxD,SAAS,CAAC,WAAW;IAWrB,2BAA2B;IAI3B,qBAAqB,CAAC,QAAQ,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,GAAG,GAAG;IAKvD,IAAI,UAAU,IAAI,cAAc,EAAE,CASjC;IAED,IAAI,OAAO,QAKV;IAED,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC;IAQlD,WAAW,CAAC,MAAM,EAAE,MAAM;CAsB3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,2TAIhC,CAAC"}
+{"version":3,"file":"actions-menu.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAStC;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,EAAE,GAAG,KAAK,cAAc,EAAE,CAAC;AAEzE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,EAAE,GAAG,uBAAuB,CAAC;AAEzE;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IACpC,OAAO,EAAE,cAAc,EAAE,CAAC;IACtC;;;OAGG;IACS,eAAe,CAAC,EAAE,uBAAuB,CAAC;IACD,UAAU,EAAE,OAAO,CAAS;IACpB,iBAAiB,EAAE,OAAO,CAAQ;IACjC,iBAAiB,EAAE,OAAO,CAAQ;IACpF,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,CAAC;IACtB,IAAI,SAAa;IACvB;;;OAGG;IAC+B,QAAQ,EAAE,MAAM,CAAC;IACL,IAAI,EAAE,OAAO,CAAS;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACwB,YAAY,EAAE,OAAO,CAAS;IACpB,oBAAoB,EAAE,OAAO,CACtF;IACI,YAAY,EAAE,cAAc,CAAC;IAEzC,WAAW,EAAG,WAAW,CAAC;IAC1B,aAAa,EAAG,WAAW,CAAC;IAE5B,OAAO,CAAC,eAAe,CAAC,CAAiC;IACzD,+FAA+F;IAC/F,OAAO,CAAC,eAAe,CAAS;IAEhC,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,kBAAkB;IAyB1B,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,oBAAoB;IAK5B,SAAS,CAAC,iBAAiB,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;IA0DxD,SAAS,CAAC,WAAW;IAyBrB,2BAA2B;IAI3B;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,KAAK;IAO5B,8EAA8E;IAC9E,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IAOlD,qBAAqB,CAAC,QAAQ,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,GAAG,GAAG;IAKvD,6DAA6D;IAC7D,gBAAgB,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO;IAIjD,wFAAwF;IACxF,IAAI,eAAe,IAAI,cAAc,EAAE,CAEtC;IAED,6FAA6F;IAC7F,IAAI,iBAAiB,IAAI,OAAO,CAK/B;IAED,IAAI,UAAU,IAAI,cAAc,EAAE,CAWjC;IAED,IAAI,OAAO,QAKV;IAED,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC;IAQlD,WAAW,CAAC,MAAM,EAAE,MAAM;CAsB3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,2TAIhC,CAAC"}

package/dist/dts/actions-menu/actions-menu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-menu.styles.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,qBAAqB,GAChC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aA4FF,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAEF,CAAC"}
+{"version":3,"file":"actions-menu.styles.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,qBAAqB,GAChC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aA4HF,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAEF,CAAC"}

package/dist/dts/actions-menu/actions-menu.template.d.ts

@@ -1,6 +1,6 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ActionsMenu } from './actions-menu';
-export declare const menuTemplate: (prefix: string) => ViewTemplate<ActionsMenu, any>;
-export declare const singleOptionTemplate: (prefix: string) => ViewTemplate<ActionsMenu, any>;
+export declare const menuTemplate: (prefix: string) => ViewTemplate<ActionsMenu>;
+export declare const singleOptionTemplate: (prefix: string) => ViewTemplate<ActionsMenu>;
 export declare const foundationActionsMenuTemplate: ViewTemplate<ActionsMenu>;
 //# sourceMappingURL=actions-menu.template.d.ts.map

package/dist/dts/actions-menu/actions-menu.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-menu.template.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,mCAoD1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,mCAclD,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,YAAY,CAAC,WAAW,CAOnE,CAAC"}
+{"version":3,"file":"actions-menu.template.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/actions-menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA6DlD,eAAO,MAAM,YAAY,WAhDP,MAAM,KAAG,YAAY,CAAC,WAAW,CAmHlD,CAAC;AAEF,eAAO,MAAM,oBAAoB,WArHf,MAAM,KAAG,YAAY,CAAC,WAAW,CAqIlD,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,YAAY,CAAC,WAAW,CAOnE,CAAC"}

package/dist/dts/actions-menu/ag-menu.styles.d.ts

@@ -0,0 +1,16 @@
+import type { ElementStyles } from '@microsoft/fast-element';
+/**
+ * Styles a menu to match AG Grid's own menu (ag-menu / ag-menu-list / ag-menu-option), so a menu
+ * drawn over a grid looks like the grid's. AG Grid's `--ag-*` variables apply where they are set;
+ * elsewhere the design system's tokens do, with fallbacks for when neither is in scope.
+ *
+ * @remarks Shared by the vertical actions menu and grid-pro's right-click menu. Each adds its own
+ * layout (display, sizing) around these rules.
+ *
+ * @param menuSelector - Selects the menu surface. May be a selector list.
+ * @param itemSelector - Selects a menu item. Must be a single selector, as states are appended to it.
+ * @returns The menu surface and item styles.
+ * @public
+ */
+export declare const agMenuStyles: (menuSelector: string, itemSelector: string) => ElementStyles;
+//# sourceMappingURL=ag-menu.styles.d.ts.map

package/dist/dts/actions-menu/ag-menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ag-menu.styles.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/ag-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,cAAc,MAAM,KAAG,aA6CzE,CAAC"}

package/dist/dts/actions-menu/index.d.ts

@@ -1,4 +1,5 @@
 export * from './actions-menu.styles';
 export * from './actions-menu.template';
 export * from './actions-menu';
+export * from './ag-menu.styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/actions-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/actions-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/dist/dts/filter-bar/filter-bar.utils.d.ts

@@ -1,2 +1,2 @@
-export declare const mapType: (TYPE: string) => "boolean" | "number" | "date" | "text" | "enum";
+export declare const mapType: (TYPE: string) => "boolean" | "number" | "text" | "date" | "enum";
 //# sourceMappingURL=filter-bar.utils.d.ts.map

package/dist/dts/react.d.ts

@@ -133,6 +133,15 @@ interface HTMLWCProps extends React.AriaAttributes {
   onInput?(e: Event): void;
 }
 
+export declare const Accordion: React.ForwardRefExoticComponent<
+  React.PropsWithChildren<
+    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
+    HTMLWCProps & {
+    }
+  > & React.RefAttributes<AccordionWC>
+>;
+export type AccordionRef = AccordionWC;
+
 export declare const AccordionItem: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
@@ -162,15 +171,6 @@ export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
 >;
 export type AiCriteriaSearchRef = AiCriteriaSearchWC;
 
-export declare const Accordion: React.ForwardRefExoticComponent<
-  React.PropsWithChildren<
-    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
-    HTMLWCProps & {
-    }
-  > & React.RefAttributes<AccordionWC>
->;
-export type AccordionRef = AccordionWC;
-
 export declare const AiIndicator: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<AiIndicatorWC>, 'children' | 'style'> &

package/dist/dts/utils/popover-position.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Keeps a Popover-API element anchored to its trigger, and reports back when the trigger has been
+ * removed from the DOM (e.g. AG Grid row virtualization recycling the row that owns it).
+ * @remarks Checks the trigger once per animation frame while started, and repositions only when
+ * the trigger or the viewport moved. Events alone miss moves: native `scroll` events don't cross
+ * shadow-DOM boundaries, and a grid re-sort moves a row by `transform`, which fires nothing on the
+ * rows that didn't change. Callers start it when the popover opens and stop it when it closes.
+ * @internal
+ */
+export declare class AnchoredPopoverPositionTracker {
+    private readonly anchor;
+    private readonly onReposition;
+    private readonly onAnchorDetached;
+    private view?;
+    private frame?;
+    private lastPosition?;
+    private readonly check;
+    constructor(anchor: HTMLElement, onReposition: () => void, onAnchorDetached: () => void);
+    start(): void;
+    stop(): void;
+}
+//# sourceMappingURL=popover-position.d.ts.map

package/dist/dts/utils/popover-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-position.d.ts","sourceRoot":"","sources":["../../../src/utils/popover-position.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,qBAAa,8BAA8B;IAwBvC,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;IAzBnC,OAAO,CAAC,IAAI,CAAC,CAAgB;IAC7B,OAAO,CAAC,KAAK,CAAC,CAAS;IACvB,OAAO,CAAC,YAAY,CAAC,CAAS;IAE9B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAgBpB;gBAGiB,MAAM,EAAE,WAAW,EACnB,YAAY,EAAE,MAAM,IAAI,EACxB,gBAAgB,EAAE,MAAM,IAAI;IAG/C,KAAK,IAAI,IAAI;IAOb,IAAI,IAAI,IAAI;CAQb"}

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

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { attr, observable } from '@microsoft/fast-element';
+import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { classNames } from '@microsoft/fast-web-utilities';
+import { classNames, limit } from '@microsoft/fast-web-utilities';
+import { AnchoredPopoverPositionTracker } from '../utils/popover-position';
 import { foundationActionsMenuStyles as styles } from './actions-menu.styles';
 import { singleOptionTemplate, menuTemplate, foundationActionsMenuTemplate as template, } from './actions-menu.template';
 /**
@@ -17,24 +18,60 @@ export class ActionsMenu extends FoundationElement {
         this.open = false;
         this.hideDisabled = false;
         this.hideMenuSingleOption = false;
+        /** Set when the keyboard opens the menu, so focus moves into it as screen readers announce. */
+        this.focusMenuOnOpen = false;
     }
     disconnectedCallback() {
         var _a;
+        this.stopTrackingPosition();
         if ((_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
             this.actionsMenu.hidePopover();
         }
         super.disconnectedCallback();
     }
     updateMenuPosition() {
-        const rect = this.actionsOpener.getBoundingClientRect();
-        this.actionsMenu.style.position = 'fixed';
-        this.actionsMenu.style.top = `${rect.top}px`;
-        this.actionsMenu.style.left = 'auto';
-        this.actionsMenu.style.right = `${window.innerWidth - rect.right}px`;
+        const opener = this.actionsOpener.getBoundingClientRect();
+        const menu = this.actionsMenu;
+        menu.style.position = 'fixed';
+        menu.style.left = 'auto';
+        if (!this.isVertical) {
+            // The horizontal menu overlays its opener.
+            menu.style.top = `${opener.top}px`;
+            menu.style.right = `${window.innerWidth - opener.right}px`;
+            return;
+        }
+        // The vertical menu drops down below its opener, flips above when only that side fits, and is
+        // clamped to the viewport (scrolling when taller than it) so it never renders off-screen.
+        const { innerHeight, innerWidth } = window;
+        menu.style.maxHeight = `${innerHeight}px`;
+        const { width, height } = menu.getBoundingClientRect();
+        const fitsBelow = height <= innerHeight - opener.bottom;
+        const fitsAbove = height <= opener.top;
+        const top = fitsBelow || !fitsAbove ? opener.bottom : opener.top - height;
+        menu.style.top = `${limit(0, Math.max(innerHeight - height, 0), top)}px`;
+        menu.style.right = `${limit(0, Math.max(innerWidth - width, 0), innerWidth - opener.right)}px`;
+    }
+    startTrackingPosition() {
+        this.positionTracker = new AnchoredPopoverPositionTracker(this.actionsOpener, () => this.updateMenuPosition(), () => (this.open = false));
+        this.positionTracker.start();
+    }
+    stopTrackingPosition() {
+        var _a;
+        (_a = this.positionTracker) === null || _a === void 0 ? void 0 : _a.stop();
+        this.positionTracker = undefined;
     }
     definitionChanged(oldValue, newValue) {
         var _a;
-        this.actions = (_a = newValue === null || newValue === void 0 ? void 0 : newValue.actions) !== null && _a !== void 0 ? _a : [];
+        if (!newValue)
+            return;
+        if (typeof newValue.actions === 'function') {
+            this.actionsResolver = newValue.actions;
+            this.actions = [];
+        }
+        else {
+            this.actionsResolver = undefined;
+            this.actions = (_a = newValue.actions) !== null && _a !== void 0 ? _a : [];
+        }
         delete this.definition.actions;
         if (newValue.buttonText) {
             this.name = newValue.buttonText;
@@ -44,6 +81,18 @@ export class ActionsMenu extends FoundationElement {
             this.isVertical = newValue.isVertical;
             delete this.definition.isVertical;
         }
+        if (newValue.iconName) {
+            this.iconName = newValue.iconName;
+            delete this.definition.iconName;
+        }
+        if (newValue.addDefaultActions !== undefined) {
+            this.addDefaultActions = newValue.addDefaultActions;
+            delete this.definition.addDefaultActions;
+        }
+        if (newValue.hideDisabled !== undefined) {
+            this.hideDisabled = newValue.hideDisabled;
+            delete this.definition.hideDisabled;
+        }
         if (newValue.buttonAppearance) {
             this.buttonAppearance = newValue.buttonAppearance;
             delete this.definition.buttonAppearance;
@@ -52,35 +101,98 @@ export class ActionsMenu extends FoundationElement {
             this.hideMenuSingleOption = newValue.hideMenuSingleOption;
             delete this.definition.hideMenuSingleOption;
         }
+        // A grid refresh hands over the latest row data: close a menu the row no longer has actions
+        // for (its opener is about to hide), and follow a row that moved.
+        if (this.open) {
+            if (this.isVertical && !this.hasVisibleActions) {
+                this.open = false;
+            }
+            else {
+                DOM.queueUpdate(() => this.open && this.updateMenuPosition());
+            }
+        }
     }
     openChanged() {
-        var _a;
+        var _a, _b, _c, _d;
         this.classNames = classNames(['visible', this.open], ['hidden', !this.open]);
         if (this.open) {
             this.updateMenuPosition();
             this.actionsMenu.showPopover();
+            this.startTrackingPosition();
+            // The menu only takes its size once the class update above renders it.
+            DOM.queueUpdate(() => {
+                if (!this.open)
+                    return;
+                this.updateMenuPosition();
+                if (this.focusMenuOnOpen)
+                    this.actionsMenu.focus();
+                this.focusMenuOnOpen = false;
+            });
         }
-        else if ((_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-            this.actionsMenu.hidePopover();
+        else {
+            this.focusMenuOnOpen = false;
+            this.stopTrackingPosition();
+            const focusInMenu = (_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.contains((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement);
+            if ((_c = this.actionsMenu) === null || _c === void 0 ? void 0 : _c.matches(':popover-open')) {
+                this.actionsMenu.hidePopover();
+            }
+            if (focusInMenu)
+                (_d = this.actionsOpener) === null || _d === void 0 ? void 0 : _d.focus();
         }
     }
     toggleActionsMenuVisibility() {
         this.open = !this.open;
     }
+    /**
+     * Syncs `open` when the native `popover="auto"` light-dismiss (outside click / Escape) closes
+     * the vertical menu without going through `toggleActionsMenuVisibility()`.
+     */
+    onPopoverToggle(event) {
+        const newState = event.newState;
+        if (newState) {
+            this.open = newState === 'open';
+        }
+    }
+    /** Opens the icon-only opener from the keyboard, as a native button would. */
+    onIconOpenerKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return true;
+        this.focusMenuOnOpen = !this.open;
+        this.toggleActionsMenuVisibility();
+        return false;
+    }
     onActionMenuItemClick(callback) {
         if (this.autoCloseOnAction)
             this.open = false;
         callback(this.rowData);
     }
-    get allActions() {
+    /** Resolves an action's `isDisabled` for the current row. */
+    isActionDisabled(action) {
+        var _a;
+        return !!((_a = action.isDisabled) === null || _a === void 0 ? void 0 : _a.call(action, this.rowData));
+    }
+    /** The actions for the current row: from `actionsResolver` when set, else `actions`. */
+    get resolvedActions() {
         var _a;
+        return (_a = (this.actionsResolver ? this.actionsResolver(this.rowData) : this.actions)) !== null && _a !== void 0 ? _a : [];
+    }
+    /** Whether the row has an action to show: an enabled one, or any when disabled ones show. */
+    get hasVisibleActions() {
+        const actions = this.resolvedActions;
+        return this.hideDisabled
+            ? actions.some((action) => !this.isActionDisabled(action))
+            : actions.length > 0;
+    }
+    get allActions() {
         const defaultActions = [
             {
                 name: '✖',
                 callback: () => (this.open = false),
             },
         ];
-        return this.addDefaultActions ? [...((_a = this.actions) !== null && _a !== void 0 ? _a : []), ...defaultActions] : this.actions;
+        return this.addDefaultActions
+            ? [...this.resolvedActions, ...defaultActions]
+            : this.resolvedActions;
     }
     get rowData() {
         if (!this.definition)
@@ -95,15 +207,14 @@ export class ActionsMenu extends FoundationElement {
         return name;
     }
     getTemplate(prefix) {
+        // The vertical menu hides its opener entirely rather than open onto nothing actionable.
+        if (this.isVertical && !this.hasVisibleActions) {
+            return;
+        }
+        const enabledRows = this.resolvedActions.filter((action) => !this.isActionDisabled(action));
         if (!this.hideMenuSingleOption) {
             return menuTemplate(prefix);
         }
-        const enabledRows = this.actions.filter((action) => {
-            if (!action.isDisabled) {
-                return true;
-            }
-            return !action.isDisabled(this.rowData);
-        });
         this.singleOption = null;
         if (enabledRows.length === 0) {
             return;
@@ -118,6 +229,9 @@ export class ActionsMenu extends FoundationElement {
 __decorate([
     observable
 ], ActionsMenu.prototype, "actions", void 0);
+__decorate([
+    observable
+], ActionsMenu.prototype, "actionsResolver", void 0);
 __decorate([
     attr({ attribute: 'is-vertical', mode: 'boolean' })
 ], ActionsMenu.prototype, "isVertical", void 0);
@@ -136,6 +250,9 @@ __decorate([
 __decorate([
     attr
 ], ActionsMenu.prototype, "name", void 0);
+__decorate([
+    attr({ attribute: 'icon-name' })
+], ActionsMenu.prototype, "iconName", void 0);
 __decorate([
     attr({ attribute: 'open', mode: 'boolean' })
 ], ActionsMenu.prototype, "open", void 0);

package/dist/esm/actions-menu/actions-menu.styles.js

@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { agMenuStyles } from './ag-menu.styles';
 export const actionsMenuBaseStyles = (context, definition) => css `
   :host {
     --actions-opener-height-multiplier: 0.7px;
@@ -21,11 +22,9 @@ export const actionsMenuBaseStyles = (context, definition) => css `
     margin: 0;
   }
 
-  .actions-vertical .actions-menu {
-    padding: calc(var(--design-unit) * 1px);
-    max-height: 175px;
-    z-index: 100;
-  }
+  /* The vertical menu follows AG Grid's menu, so it matches the grid it usually sits in.
+     Its box-sizing lets updateMenuPosition cap max-height at the viewport, border included. */
+  ${agMenuStyles('.actions-vertical .actions-menu', '.actions-vertical .menu-item')}
 
   .actions-menu:not(.hidden):hover {
     display: inline-flex;
@@ -48,6 +47,31 @@ export const actionsMenuBaseStyles = (context, definition) => css `
     );
   }
 
+  :host([icon-name]) .actions-container {
+    justify-content: center;
+  }
+
+  /* The icon-only opener mirrors grid-pro's icon renderer: a bare icon with a hover chip. */
+  .actions-opener.icon-only {
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    padding: 5px;
+    border-radius: 5px;
+    line-height: 1;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .actions-opener.icon-only:hover,
+  .actions-opener.icon-only.opened {
+    background-color: var(--neutral-stroke-hover);
+  }
+
+  .actions-opener.icon-only:focus-visible {
+    outline: calc(var(--focus-stroke-width) * 1px) solid var(--accent-fill-rest);
+  }
+
   svg {
     width: 100%;
     height: 100%;
@@ -80,10 +104,19 @@ export const actionsMenuBaseStyles = (context, definition) => css `
     min-height: 0;
   }
 
+  /* The open menu is a flex column, so a flex-basis would override the AG row height. */
   .actions-vertical .menu-item {
-    flex: 1 1 auto;
+    flex: none;
+    max-height: none;
+  }
+
+  .actions-vertical .menu-item::part(start) {
+    padding-left: calc(var(--ag-spacing, 4px) * 2);
+  }
+
+  .actions-vertical .menu-item [slot='start'] {
     justify-content: center;
-    margin: calc(var(--design-unit) * 1px);
+    width: var(--ag-icon-size, 16px);
   }
 
   .actions-vertical .visible,

package/dist/esm/actions-menu/actions-menu.template.js

@@ -1,6 +1,42 @@
 import { html, ref, repeat, when } from '@microsoft/fast-element';
 import { getPrefix } from '../utils';
-export const menuTemplate = (prefix) => html `
+/**
+ * Builds a template once per prefix. The bindings that pick a template re-run on every grid
+ * refresh; returning the same instance keeps the rendered view (and an open menu) in place.
+ * @remarks Don't remove this cache. FAST compares a binding's returned template by identity and
+ * re-creates the view whenever it gets a different instance. grid-pro's renderer `refresh()` hands
+ * the menu new params on every row update, so without it a streaming row would tear down the
+ * rendered view on each tick: the open popover is removed, `actionsMenu`/`actionsOpener` refs
+ * point at fresh elements, and `open` stays `true` with nothing visible.
+ */
+const perPrefix = (build) => {
+    const templates = new Map();
+    return (prefix) => {
+        if (!templates.has(prefix))
+            templates.set(prefix, build(prefix));
+        return templates.get(prefix);
+    };
+};
+/**
+ * A bare icon opener (e.g. a "kebab"), styled like grid-pro's icon renderer rather than a button.
+ */
+const iconOpenerTemplate = perPrefix((prefix) => html `
+  <div
+    ${ref('actionsOpener')}
+    class="actions-opener icon-only${(x) => (x.open ? ' opened' : '')}"
+    part="icon-opener"
+    role="button"
+    tabindex="0"
+    aria-label="${(x) => x.name}"
+    aria-haspopup="menu"
+    aria-expanded="${(x) => String(x.open)}"
+    @click=${(x) => x.toggleActionsMenuVisibility()}
+    @keydown=${(x, c) => x.onIconOpenerKeydown(c.event)}
+  >
+    <${prefix}-icon name="${(x) => x.iconName}" size="lg"></${prefix}-icon>
+  </div>
+`);
+const buttonOpenerTemplate = perPrefix((prefix) => html `
   <${prefix}-button
     ${ref('actionsOpener')}
     id="actiosnMenuTrigger"
@@ -15,32 +51,57 @@ export const menuTemplate = (prefix) => html `
             ${x.name}
           `}
   </${prefix}-button>
-  <${prefix}-menu ${ref('actionsMenu')} popover="manual" class="actions-menu ${(x) => x.classNames}" part="actions-menu">
+`);
+export const menuTemplate = perPrefix((prefix) => html `
+  ${(x) => (x.iconName ? iconOpenerTemplate(prefix) : buttonOpenerTemplate(prefix))}
+  <${prefix}-menu
+    ${ref('actionsMenu')}
+    popover="${(x) => (x.isVertical ? 'auto' : 'manual')}"
+    class="actions-menu ${(x) => x.classNames}"
+    part="actions-menu"
+    @toggle=${(x, c) => x.onPopoverToggle(c.event)}
+  >
     ${repeat((x) => x.allActions, html `
-        ${when((x, context) => x.isDisabled && x.isDisabled(context.parent.rowData), html `
+        ${when((x, context) => context.parent.isActionDisabled(x), html `
             <${prefix}-menu-item
               class="menu-item"
               tabindex="${(x, context) => context.index}"
               disabled
               style=${(x, ctx) => (ctx.parent.hideDisabled ? 'display:none' : '')}
             >
+              ${when((x) => x.icon, html `
+                  <${prefix}-icon
+                    name=${(x) => x.icon.name}
+                    size=${(x) => x.icon.size}
+                    variant=${(x) => x.icon.variant}
+                    slot="start"
+                  ></${prefix}-icon>
+                `)}
               ${(x, ctx) => ctx.parent.getLabel(x.name)}
             </${prefix}-menu-item>
           `)}
-        ${when((x, context) => !x.isDisabled || !x.isDisabled(context.parent.rowData), html `
+        ${when((x, context) => !context.parent.isActionDisabled(x), html `
             <${prefix}-menu-item
               class="menu-item"
               tabindex="${(x, context) => context.index}"
               @click=${(x, context) => context.parent.onActionMenuItemClick(x.callback)}
               style="${(x) => (x.color ? `color: ${x.color};` : '')}"
             >
+              ${when((x) => x.icon, html `
+                  <${prefix}-icon
+                    name=${(x) => x.icon.name}
+                    size=${(x) => x.icon.size}
+                    variant=${(x) => x.icon.variant}
+                    slot="start"
+                  ></${prefix}-icon>
+                `)}
               ${(x, ctx) => ctx.parent.getLabel(x.name)}
             </${prefix}-menu-item>
           `)}
       `, { positioning: true })}
   </${prefix}-menu>
-`;
-export const singleOptionTemplate = (prefix) => html `
+`);
+export const singleOptionTemplate = perPrefix((prefix) => html `
   <${prefix}-button
     appearance="${(x) => x.buttonAppearance}"
     part="actions-opener"
@@ -49,12 +110,12 @@ export const singleOptionTemplate = (prefix) => html `
     return x === null || x === void 0 ? void 0 : x.singleOption.callback(x.rowData);
 }}
     ?disabled=${(x) => {
-    return (x === null || x === void 0 ? void 0 : x.singleOption.isDisabled) && (x === null || x === void 0 ? void 0 : x.singleOption.isDisabled(x.rowData));
+    return x.isActionDisabled(x.singleOption);
 }}
   >
     ${(x) => x.getLabel(x === null || x === void 0 ? void 0 : x.singleOption.name)}
   </${prefix}-button>
-`;
+`);
 export const foundationActionsMenuTemplate = html `
   <div
     class="actions-container${(x) => (x.isVertical ? ' actions-vertical' : '')}"