@genesislcap/foundation-ui 15.58.0 → 15.58.1-FUI-2629.5

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.
@@ -7,20 +9,37 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 export type ActionMenuItem = {
     name: string | ((rowData: any) => string);
     callback: (rowData: any) => void | any;
-    isDisabled?: (rowData: any) => boolean;
+    /** A fixed flag, or a function of the row data (the grid row from the cell params). */
+    isDisabled?: boolean | ((rowData: any) => boolean);
     color?: string;
+    icon?: {
+        variant?: IconStyle;
+        name: string;
+        size?: FaSize;
+    };
 };
+/**
+ * The actions shown by the Actions Menu: a fixed array, or a function of the row data returning
+ * one (for row-scoped eligibility/permission filtering).
+ * @public
+ */
+export type ActionMenuItems = ActionMenuItem[] | ((rowData: any) => ActionMenuItem[]);
 /**
  * @tagname %%prefix%%-actions-menu
  */
 export declare class ActionsMenu extends FoundationElement {
-    actions: ActionMenuItem[];
+    actions: ActionMenuItems;
     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 +47,25 @@ export declare class ActionsMenu extends FoundationElement {
     singleOption: ActionMenuItem;
     actionsMenu: HTMLElement;
     actionsOpener: HTMLElement;
+    private positionTracker?;
     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` flag or row-data function for the current row. */
+    isActionDisabled(action: ActionMenuItem): boolean;
+    get resolvedActions(): ActionMenuItem[];
     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,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,CAAC;IACnD,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,eAAe,GAAG,cAAc,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,cAAc,EAAE,CAAC,CAAC;AAEtF;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IACpC,OAAO,EAAE,eAAe,CAAC;IACgB,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;IAEzD,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,oBAAoB;IAK5B,SAAS,CAAC,iBAAiB,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;IA0CxD,SAAS,CAAC,WAAW;IAerB,2BAA2B;IAI3B;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,KAAK;IAO5B,8EAA8E;IAC9E,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IAMlD,qBAAqB,CAAC,QAAQ,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,GAAG,GAAG;IAKvD,uFAAuF;IACvF,gBAAgB,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO;IAKjD,IAAI,eAAe,IAAI,cAAc,EAAE,CAGtC;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;CAyB3B;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;AAEpC,eAAO,MAAM,qBAAqB,GAChC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAiKF,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAEF,CAAC"}

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;AAwClD,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,mCAiE1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,mCAclD,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,YAAY,CAAC,WAAW,CAOnE,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,14 +133,14 @@ interface HTMLWCProps extends React.AriaAttributes {
   onInput?(e: Event): void;
 }
 
-export declare const AccordionItem: React.ForwardRefExoticComponent<
+export declare const Accordion: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
+    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<AccordionItemWC>
+  > & React.RefAttributes<AccordionWC>
 >;
-export type AccordionItemRef = AccordionItemWC;
+export type AccordionRef = AccordionWC;
 
 export declare const ActionsMenu: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
@@ -151,14 +151,14 @@ export declare const ActionsMenu: React.ForwardRefExoticComponent<
 >;
 export type ActionsMenuRef = ActionsMenuWC;
 
-export declare const Accordion: React.ForwardRefExoticComponent<
+export declare const AccordionItem: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
+    Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<AccordionWC>
+  > & React.RefAttributes<AccordionItemWC>
 >;
-export type AccordionRef = AccordionWC;
+export type AccordionItemRef = AccordionItemWC;
 
 export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
   React.PropsWithChildren<

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

@@ -0,0 +1,26 @@
+/**
+ * Walks up from `element`, crossing shadow-root boundaries via `.host`, collecting every
+ * scrollable ancestor (including the anchor's own document).
+ * @remarks Native `scroll` events are not `composed`, so they don't cross shadow-DOM boundaries
+ * the way `click`/`keydown` do — a listener on `document` never sees a shadow-DOM-nested
+ * viewport's own scroll. Callers must listen on each returned ancestor directly.
+ * @internal
+ */
+export declare function findScrollableAncestors(element: HTMLElement): (HTMLElement | Document)[];
+/**
+ * Keeps a Popover-API element anchored to its trigger while any of the trigger's scrollable
+ * ancestors scroll, and reports back when the trigger has been removed from the DOM (e.g. AG
+ * Grid row virtualization recycling the row that owns it).
+ * @internal
+ */
+export declare class AnchoredPopoverPositionTracker {
+    private readonly anchor;
+    private readonly onReposition;
+    private readonly onAnchorDetached;
+    private ancestors;
+    private readonly handleScroll;
+    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;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,CA8BxF;AAED;;;;;GAKG;AACH,qBAAa,8BAA8B;IAYvC,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;IAbnC,OAAO,CAAC,SAAS,CAAkC;IAEnD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAM3B;gBAGiB,MAAM,EAAE,WAAW,EACnB,YAAY,EAAE,MAAM,IAAI,EACxB,gBAAgB,EAAE,MAAM,IAAI;IAG/C,KAAK,IAAI,IAAI;IAQb,IAAI,IAAI,IAAI;CAMb"}

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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { classNames } 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';
 /**
@@ -20,6 +21,7 @@ export class ActionsMenu extends FoundationElement {
     }
     disconnectedCallback() {
         var _a;
+        this.stopTrackingPosition();
         if ((_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
             this.actionsMenu.hidePopover();
         }
@@ -28,13 +30,25 @@ export class ActionsMenu extends FoundationElement {
     updateMenuPosition() {
         const rect = this.actionsOpener.getBoundingClientRect();
         this.actionsMenu.style.position = 'fixed';
-        this.actionsMenu.style.top = `${rect.top}px`;
+        // The vertical menu drops down below its opener; the horizontal one overlays it.
+        this.actionsMenu.style.top = `${this.isVertical ? rect.bottom : rect.top}px`;
         this.actionsMenu.style.left = 'auto';
         this.actionsMenu.style.right = `${window.innerWidth - rect.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;
+        this.actions = (_a = newValue.actions) !== null && _a !== void 0 ? _a : [];
         delete this.definition.actions;
         if (newValue.buttonText) {
             this.name = newValue.buttonText;
@@ -44,6 +58,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;
@@ -59,28 +85,59 @@ export class ActionsMenu extends FoundationElement {
         if (this.open) {
             this.updateMenuPosition();
             this.actionsMenu.showPopover();
+            this.startTrackingPosition();
         }
-        else if ((_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-            this.actionsMenu.hidePopover();
+        else {
+            this.stopTrackingPosition();
+            if ((_a = this.actionsMenu) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
+                this.actionsMenu.hidePopover();
+            }
         }
     }
     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.toggleActionsMenuVisibility();
+        return false;
+    }
     onActionMenuItemClick(callback) {
         if (this.autoCloseOnAction)
             this.open = false;
         callback(this.rowData);
     }
+    /** Resolves an action's `isDisabled` flag or row-data function for the current row. */
+    isActionDisabled(action) {
+        const { isDisabled } = action;
+        return typeof isDisabled === 'function' ? !!isDisabled(this.rowData) : !!isDisabled;
+    }
+    get resolvedActions() {
+        const actions = typeof this.actions === 'function' ? this.actions(this.rowData) : this.actions;
+        return actions !== null && actions !== void 0 ? actions : [];
+    }
     get allActions() {
-        var _a;
         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 +152,17 @@ export class ActionsMenu extends FoundationElement {
         return name;
     }
     getTemplate(prefix) {
+        const enabledRows = this.resolvedActions.filter((action) => !this.isActionDisabled(action));
+        // The vertical menu hides its opener entirely rather than open onto nothing actionable.
+        const hasVisibleActions = this.hideDisabled
+            ? enabledRows.length > 0
+            : this.resolvedActions.length > 0;
+        if (this.isVertical && !hasVisibleActions) {
+            return;
+        }
         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;
@@ -136,6 +195,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

@@ -21,10 +21,17 @@ export const actionsMenuBaseStyles = (context, definition) => css `
     margin: 0;
   }
 
+  /* The vertical menu follows AG Grid's context menu (ag-menu / ag-menu-list / ag-menu-option),
+     so it matches the grid it usually sits in. Outside a grid the --ag-* vars are unset and the
+     design system's own tokens apply. */
   .actions-vertical .actions-menu {
-    padding: calc(var(--design-unit) * 1px);
-    max-height: 175px;
-    z-index: 100;
+    padding: var(--ag-spacing, 4px) 0;
+    background-color: var(--ag-menu-background-color, var(--fill-color));
+    border: var(--ag-menu-border, calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest));
+    border-radius: var(--ag-border-radius, calc(var(--control-corner-radius) * 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));
   }
 
   .actions-menu:not(.hidden):hover {
@@ -48,6 +55,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 +112,47 @@ 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;
+    box-sizing: border-box;
+    height: calc(var(--ag-icon-size, 16px) + (var(--ag-spacing, 4px) + 2px) * 2);
+    max-height: none;
+    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;
+  }
+
+  .actions-vertical .menu-item:hover,
+  .actions-vertical .menu-item:focus {
+    background: var(--ag-row-hover-color, var(--neutral-fill-stealth-hover));
+    border: none;
+  }
+
+  .actions-vertical .menu-item[disabled] {
+    background: transparent;
+    opacity: 50%;
+  }
+
+  .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);
+  }
+
+  /* AG's trailing shortcut and popup-pointer cells add 2 more spacings on the right. */
+  .actions-vertical .menu-item::part(content) {
+    margin-inline: 0;
+    padding-inline: calc(var(--ag-spacing, 4px) * 2) calc(var(--ag-spacing, 4px) * 4);
+    line-height: var(--ag-icon-size, 16px);
   }
 
   .actions-vertical .visible,

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

@@ -1,6 +1,25 @@
 import { html, ref, repeat, when } from '@microsoft/fast-element';
 import { getPrefix } from '../utils';
-export const menuTemplate = (prefix) => html `
+/**
+ * A bare icon opener (e.g. a "kebab"), styled like grid-pro's icon renderer rather than a button.
+ */
+const iconOpenerTemplate = (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 = (prefix) => html `
   <${prefix}-button
     ${ref('actionsOpener')}
     id="actiosnMenuTrigger"
@@ -15,25 +34,50 @@ 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 = (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>
           `)}
@@ -49,7 +93,7 @@ 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)}

package/dist/esm/utils/popover-position.js

@@ -0,0 +1,70 @@
+/**
+ * Walks up from `element`, crossing shadow-root boundaries via `.host`, collecting every
+ * scrollable ancestor (including the anchor's own document).
+ * @remarks Native `scroll` events are not `composed`, so they don't cross shadow-DOM boundaries
+ * the way `click`/`keydown` do — a listener on `document` never sees a shadow-DOM-nested
+ * viewport's own scroll. Callers must listen on each returned ancestor directly.
+ * @internal
+ */
+export function findScrollableAncestors(element) {
+    var _a;
+    const ancestors = [];
+    let node = element.parentNode;
+    while (node) {
+        if (node instanceof ShadowRoot) {
+            node = node.host;
+            continue;
+        }
+        if (node instanceof Document) {
+            ancestors.push(node);
+            break;
+        }
+        if (node instanceof HTMLElement) {
+            const style = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node);
+            if (!style) {
+                node = node.parentNode;
+                continue;
+            }
+            if (/(auto|scroll|overlay)/.test(style.overflowY) ||
+                /(auto|scroll|overlay)/.test(style.overflowX)) {
+                ancestors.push(node);
+            }
+        }
+        node = node.parentNode;
+    }
+    return ancestors;
+}
+/**
+ * Keeps a Popover-API element anchored to its trigger while any of the trigger's scrollable
+ * ancestors scroll, and reports back when the trigger has been removed from the DOM (e.g. AG
+ * Grid row virtualization recycling the row that owns it).
+ * @internal
+ */
+export class AnchoredPopoverPositionTracker {
+    constructor(anchor, onReposition, onAnchorDetached) {
+        this.anchor = anchor;
+        this.onReposition = onReposition;
+        this.onAnchorDetached = onAnchorDetached;
+        this.ancestors = [];
+        this.handleScroll = () => {
+            if (!this.anchor.isConnected) {
+                this.onAnchorDetached();
+                return;
+            }
+            this.onReposition();
+        };
+    }
+    start() {
+        this.stop();
+        this.ancestors = findScrollableAncestors(this.anchor);
+        for (const ancestor of this.ancestors) {
+            ancestor.addEventListener('scroll', this.handleScroll, { passive: true });
+        }
+    }
+    stop() {
+        for (const ancestor of this.ancestors) {
+            ancestor.removeEventListener('scroll', this.handleScroll);
+        }
+        this.ancestors = [];
+    }
+}