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

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/index.js

@@ -3,4 +3,5 @@ export * from './dom';
 export * from './event-types';
 export * from './logger';
 export * from './options-datasource-utils';
+export * from './popover-position';
 export * from './tooltip';

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.
+ * @public
+ */
+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).
+ * @public
+ */
+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 = [];
+    }
+}

package/dist/foundation-ui.api.json

@@ -279,7 +279,25 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    name: string | ((rowData: any) => string);\n    callback: (rowData: any) => void | any;\n    isDisabled?: (rowData: any) => boolean;\n    color?: string;\n}"
+              "text": "{\n    name: string | ((rowData: any) => string);\n    callback: (rowData: any) => void | any;\n    isDisabled?: boolean | ((rowData: any) => boolean);\n    color?: string;\n    icon?: {\n        variant?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "IconStyle",
+              "canonicalReference": "@fortawesome/fontawesome-common-types!IconStyle:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        name: string;\n        size?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "FaSize",
+              "canonicalReference": "@genesislcap/foundation-ui!FaSize:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    };\n}"
             },
             {
               "kind": "Content",
@@ -291,7 +309,47 @@
           "name": "ActionMenuItem",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 6
+          }
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItems:type",
+          "docComment": "/**\n * 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).\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type ActionMenuItems = "
+            },
+            {
+              "kind": "Reference",
+              "text": "ActionMenuItem",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItem:type"
+            },
+            {
+              "kind": "Content",
+              "text": "[] | ((rowData: any) => "
+            },
+            {
+              "kind": "Reference",
+              "text": "ActionMenuItem",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItem:type"
+            },
+            {
+              "kind": "Content",
+              "text": "[])"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/actions-menu/actions-menu.ts",
+          "releaseTag": "Public",
+          "name": "ActionMenuItems",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
           }
         },
         {
@@ -330,12 +388,8 @@
                 },
                 {
                   "kind": "Reference",
-                  "text": "ActionMenuItem",
-                  "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItem:type"
-                },
-                {
-                  "kind": "Content",
-                  "text": "[]"
+                  "text": "ActionMenuItems",
+                  "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItems:type"
                 },
                 {
                   "kind": "Content",
@@ -348,7 +402,7 @@
               "name": "actions",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 3
+                "endIndex": 2
               },
               "isStatic": false,
               "isProtected": false,
@@ -870,6 +924,85 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#iconName:member",
+              "docComment": "/**\n * When set, the opener renders this icon instead of the `name` text (e.g. `ellipsis` for an icon-only \"kebab\" opener).\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "iconName: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "iconName",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#isActionDisabled:member(1)",
+              "docComment": "/**\n * Resolves an action's `isDisabled` flag or row-data function for the current row.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "isActionDisabled(action: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ActionMenuItem",
+                  "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItem:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "action",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "isActionDisabled"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#isVertical:member",
@@ -978,6 +1111,104 @@
               "isAbstract": false,
               "name": "onActionMenuItemClick"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#onIconOpenerKeydown:member(1)",
+              "docComment": "/**\n * Opens the icon-only opener from the keyboard, as a native button would.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "onIconOpenerKeydown(event: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "KeyboardEvent",
+                  "canonicalReference": "!KeyboardEvent:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "event",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "onIconOpenerKeydown"
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#onPopoverToggle:member(1)",
+              "docComment": "/**\n * Syncs `open` when the native `popover=\"auto\"` light-dismiss (outside click / Escape) closes the vertical menu without going through `toggleActionsMenuVisibility()`.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "onPopoverToggle(event: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Event",
+                  "canonicalReference": "!Event:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "event",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "onPopoverToggle"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#open:member",
@@ -1039,6 +1270,41 @@
               "isAbstract": false,
               "name": "openChanged"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#resolvedActions:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "get resolvedActions(): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ActionMenuItem",
+                  "canonicalReference": "@genesislcap/foundation-ui!ActionMenuItem:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": true,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "resolvedActions",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-ui!ActionsMenu#rowData:member",
@@ -54125,7 +54391,7 @@
             },
             {
               "kind": "Content",
-              "text": "\"boolean\" | \"number\" | \"date\" | \"text\" | \"enum\""
+              "text": "\"boolean\" | \"number\" | \"text\" | \"date\" | \"enum\""
             }
           ],
           "fileUrlPath": "src/filter-bar/filter-bar.utils.ts",

package/dist/foundation-ui.d.ts

@@ -310,21 +310,39 @@ export declare class AccordionItem extends AccordionItem_2 {
 export declare 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 declare 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;
@@ -332,12 +350,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;
@@ -5480,7 +5511,7 @@ export declare class Listbox extends Listbox_2 {
 export declare class ListboxOption extends ListboxOption_2 {
 }
 
-export declare const mapType: (TYPE: string) => "boolean" | "number" | "date" | "text" | "enum";
+export declare const mapType: (TYPE: string) => "boolean" | "number" | "text" | "date" | "enum";
 
 export declare const MAX_DAYS = 31;