@ncino/web-components 15.5.0 → 15.7.0

package/dist/types/src/components/list/gator/list/list.gator.d.ts

@@ -71,7 +71,7 @@ export declare class NgcList extends NgcComponent {
     falseFocusFirstItem(): Element | undefined;
     falseFocusPreviousItem(): Element | undefined;
     falseFocusNextItem(): Element | undefined;
-    selectFalseFocusedItem(): void;
+    selectFalseFocusedItem(): boolean;
     unselectAllListItems(): void;
     handleKeyUp(e: KeyboardEvent): void;
     get nodes(): Element[] | undefined;

package/dist/types/src/components/menu/base/gator/menu.gator.d.ts

@@ -17,9 +17,13 @@ export declare class NgcMenu extends NjcMenu {
     private _hidePopover;
     handleTriggerSlotChange(e: Event): void;
     private focusMenuItem;
+    private isNavigableMenuItem;
+    private getNavigableMenuItems;
     focusFirstMenuItem(): void;
     focusTriggerButton(): void;
     handleItemSlotChange(e: Event): void;
+    private handleMenuItemDisabledChange;
+    private syncMenuItemTabIndexes;
     handleMenuKeydown(e: KeyboardEvent): void;
     handleArrowDown(e: KeyboardEvent): void;
     handleArrowUp(e: KeyboardEvent): void;

package/dist/types/src/components/menu/menu-item/gator/menu-item.gator.d.ts

@@ -1,11 +1,20 @@
 import { NjcMenuItem } from '../menu-item.ts';
+/**
+ * @slot start - Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`.
+ * @slot end - Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`.
+ */
 export declare class NgcMenuItem extends NjcMenuItem {
+    private _startIconWarned;
+    private _endIconWarned;
     constructor();
     connectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private syncAriaDisabled;
+    private warnDeprecatedIconProps;
     render(): import('lit').TemplateResult<1>;
     focus(options?: FocusOptions): void;
     click(): void;
-    handleKeydown(e: KeyboardEvent): void;
+    handleKeydown: (e: KeyboardEvent) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/src/components/menu/menu-item/menu-item.d.ts

@@ -6,12 +6,24 @@ export declare class NjcMenuItem extends LitElement {
      */
     value: string;
     /**
-     * An icon displayed before the value text
+     * Optional secondary text below the label (forwarded to ngc-list-item)
+     * @type {string}
+     */
+    subtitle: string | null;
+    /**
+     * When true, the menu item is non-interactive and styled as disabled
+     * @type {boolean}
+     */
+    disabled: boolean;
+    /**
+     * @deprecated Use the `start` slot instead, e.g. `<ngc-icon slot="start" name="…">`.
+     * Declarative hosts (e.g. table `menuItems[].startIcon`) should stamp slot content when rendering.
      * @type {string}
      */
     startIcon: string;
     /**
-     * An icon displayed after the value text
+     * @deprecated Use the `end` slot instead, e.g. `<ngc-icon slot="end" name="…">`.
+     * Declarative hosts (e.g. table `menuItems[].endIcon`) should stamp slot content when rendering.
      * @type {string}
      */
     endIcon: string;

package/dist/types/src/components/table/gator/__tests__/test-table-data.d.ts

@@ -73,3 +73,20 @@ export declare function getTestDataWithHeader(): ({
     account?: undefined;
     selected?: undefined;
 })[];
+export declare function getSortableFilterableTestData(): ({
+    amount: string;
+    date: string;
+    business: string;
+    name: string;
+    type: string;
+    account: string;
+    selected: boolean;
+} | {
+    amount: string;
+    date: string;
+    business: string;
+    name: string;
+    type: string;
+    account: string;
+    selected?: undefined;
+})[];

package/dist/types/src/components/table/gator/table.gator.d.ts

@@ -25,13 +25,18 @@ export declare class NgcTable extends NjcTable {
     _hoveredHeaderColumnField: string | null;
     _pendingFilterValues: Record<string, string | string[]>;
     _filterSearchQuery: Record<string, string>;
+    private _visibleFilterChipCount;
+    private previousFilterOptionsScrollTop;
+    private _filterChipResizeObserver;
     protected updated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
     render(): TemplateResult<1> | null;
     private getColumnCellStyle;
     private get _skeletonLoaderColumns();
     get tableElevatedClass(): "" | "gator-table-elevated";
     get showBulkControls(): boolean;
     renderWrapper(header: unknown, body: unknown): TemplateResult<1>;
+    private calculateFilterChipOverflow;
     /**
      * Content for `ngc-illustration`'s default actions slot (must be light-DOM children of the illustration).
      * Clear filters is rendered here when filters are active; otherwise the table's
@@ -62,6 +67,7 @@ export declare class NgcTable extends NjcTable {
     private getActiveFilterChips;
     private handleFilterChipDismiss;
     private handleClearAllFilters;
+    private onFilterOptionsScroll;
     private getTableBody;
     private getCategoryBody;
     private getTotalRow;

package/dist/types/src/components/table/table-cell-config.d.ts

@@ -37,6 +37,8 @@ export type TableIconButtonMenuItem = {
     value?: string;
     startIcon?: string;
     endIcon?: string;
+    subtitle?: string;
+    disabled?: boolean;
 };
 export interface TableIconButtonCellConfig extends TableCellConfigBase {
     iconName: string;
@@ -48,6 +50,10 @@ export interface TableIconButtonCellConfig extends TableCellConfigBase {
 export type TableDropdownOption = {
     label: string;
     value: string | number;
+    startIcon?: string;
+    endIcon?: string;
+    subtitle?: string;
+    disabled?: boolean;
 };
 export interface TableInputDropdownCellConfig extends TableCellConfigBase {
     options?: TableDropdownOption[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "15.5.0",
+  "version": "15.7.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.10",
     "yaml-eslint-parser": "^2.1.0",
-    "@ncino/styles": "15.5.0"
+    "@ncino/styles": "15.7.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "15.5.0"
+    "@ncino/styles": "15.7.0"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "15.4.0",
+  "version": "15.6.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -159,6 +159,10 @@
               "name": "start-icon",
               "value": { "type": "String", "default": "''" }
             },
+            {
+              "name": "end-icon",
+              "value": { "type": "String", "default": "''" }
+            },
             {
               "name": "dismissible",
               "value": { "type": "boolean", "default": "false" }
@@ -193,6 +197,7 @@
               { "name": "size", "type": " | 'small'" },
               { "name": "hideBorder", "type": "boolean" },
               { "name": "startIcon", "type": "String" },
+              { "name": "endIcon", "type": "String" },
               { "name": "dismissible", "type": "boolean" },
               { "name": "ariaHidden", "type": "'true' | 'false'" },
               { "name": "dataTestid", "type": "string | undefined" },
@@ -2254,7 +2259,7 @@
         },
         {
           "name": "ngc-menu-item",
-          "description": "\n---\n\n\n### **Events:**\n - **menuitemclick**",
+          "description": "\n---\n\n\n### **Events:**\n - **menuitemdisabledchange**\n- **menuitemclick**\n\n### **Slots:**\n - **start** - Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`.\n- **end** - Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -2262,37 +2267,64 @@
               "description": "The value and text displayed of the menu item",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "subtitle",
+              "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
+              "value": { "type": "string", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "When true, the menu item is non-interactive and styled as disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "start-icon",
-              "description": "An icon displayed before the value text",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "end-icon",
-              "description": "An icon displayed after the value text",
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "events": [{ "name": "menuitemclick", "type": "CustomEvent" }],
+          "slots": [
+            {
+              "name": "start",
+              "description": "Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`."
+            },
+            {
+              "name": "end",
+              "description": "Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`."
+            }
+          ],
+          "events": [
+            { "name": "menuitemdisabledchange", "type": "CustomEvent" },
+            { "name": "menuitemclick", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
+              { "name": "handleKeydown" },
               {
                 "name": "value",
                 "description": "The value and text displayed of the menu item",
                 "type": "string"
               },
               {
-                "name": "startIcon",
-                "description": "An icon displayed before the value text",
+                "name": "subtitle",
+                "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
                 "type": "string"
               },
               {
-                "name": "endIcon",
-                "description": "An icon displayed after the value text",
-                "type": "string"
-              }
+                "name": "disabled",
+                "description": "When true, the menu item is non-interactive and styled as disabled",
+                "type": "boolean"
+              },
+              { "name": "startIcon", "type": "string" },
+              { "name": "endIcon", "type": "string" }
             ],
-            "events": [{ "name": "menuitemclick", "type": "CustomEvent" }]
+            "events": [
+              { "name": "menuitemdisabledchange", "type": "CustomEvent" },
+              { "name": "menuitemclick", "type": "CustomEvent" }
+            ]
           }
         },
         {
@@ -4973,7 +5005,7 @@
         },
         {
           "name": "ngc-input-dropdown",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+          "description": "Dropdown / combobox. Options come from either:\n- the `options` / `data-type` props (data-driven), or\n- light-DOM `ngc-list-item` children (slotted). If any list-item children are present,\n  they win and `options` / `data-type` are ignored.\n\nSlotted items must be direct children of `ngc-input-dropdown` (not wrapped in other elements).\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Slots:**\n - **label** - Optional custom label\n- _default_ - Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)",
           "doc-url": "",
           "attributes": [
             {
@@ -5108,6 +5140,13 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
+          "slots": [
+            { "name": "label", "description": "Optional custom label" },
+            {
+              "name": "",
+              "description": "Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)"
+            }
+          ],
           "events": [
             { "name": "input", "type": "CustomEvent" },
             { "name": "change", "type": "CustomEvent" }
@@ -5152,6 +5191,11 @@
               { "name": "displayedValue" },
               { "name": "showPlaceholder" },
               { "name": "listboxMarkup" },
+              {
+                "name": "slottedListItems",
+                "description": "Direct light-DOM `ngc-list-item` children (default slot). Used when composing rich\noptions (avatars, custom start/end) instead of the `options` array. Nested/wrapped\nlist items are not supported — place them as direct children of the dropdown.",
+                "type": "NgcListItem[]"
+              },
               { "name": "selectAllIcon" },
               { "name": "allSelected" },
               { "name": "listboxMessageMarkup" },
@@ -6347,14 +6391,22 @@
               "description": "The value and text displayed of the menu item",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "subtitle",
+              "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
+              "value": { "type": "string", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "When true, the menu item is non-interactive and styled as disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "start-icon",
-              "description": "An icon displayed before the value text",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "end-icon",
-              "description": "An icon displayed after the value text",
               "value": { "type": "string", "default": "''" }
             }
           ],
@@ -6368,15 +6420,17 @@
                 "type": "string"
               },
               {
-                "name": "startIcon",
-                "description": "An icon displayed before the value text",
+                "name": "subtitle",
+                "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
                 "type": "string"
               },
               {
-                "name": "endIcon",
-                "description": "An icon displayed after the value text",
-                "type": "string"
-              }
+                "name": "disabled",
+                "description": "When true, the menu item is non-interactive and styled as disabled",
+                "type": "boolean"
+              },
+              { "name": "startIcon", "type": "string" },
+              { "name": "endIcon", "type": "string" }
             ],
             "events": [{ "name": "menuitemclick", "type": "CustomEvent" }]
           }
@@ -8178,7 +8232,7 @@
         },
         {
           "name": "ngc-table",
-          "description": "Gator data table.\n---\n\n\n### **Events:**\n - **selectall**\n- **sort**\n- **filter**\n- **rowselected**\n- **cellchange**\n- **cellclick**\n\n### **Slots:**\n - **bulk-controls** - Actions shown in the bulk selection toolbar when rows are selected.\n- **empty-state-actions** - Action buttons forwarded into `ngc-illustration`'s default actions slot when no filters are active (e.g. a primary \"Add\" CTA). Not rendered when filters are active; the built-in \"Clear filters\" button is shown in that slot instead.",
+          "description": "Gator data table.\n---\n\n\n### **Events:**\n - **selectall**\n- **sort**\n- **filter**\n- **filteroptionsreachedbottom**\n- **rowselected**\n- **cellchange**\n- **cellclick**\n\n### **Slots:**\n - **bulk-controls** - Actions shown in the bulk selection toolbar when rows are selected.\n- **empty-state-actions** - Action buttons forwarded into `ngc-illustration`'s default actions slot when no filters are active (e.g. a primary \"Add\" CTA). Not rendered when filters are active; the built-in \"Clear filters\" button is shown in that slot instead.",
           "doc-url": "",
           "attributes": [
             {
@@ -8279,6 +8333,7 @@
             { "name": "selectall", "type": "CustomEvent" },
             { "name": "sort", "type": "CustomEvent" },
             { "name": "filter", "type": "CustomEvent" },
+            { "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
             { "name": "rowselected", "type": "CustomEvent" },
             { "name": "cellchange", "type": "CustomEvent" },
             { "name": "cellclick", "type": "CustomEvent" }
@@ -8348,6 +8403,7 @@
               { "name": "selectall", "type": "CustomEvent" },
               { "name": "sort", "type": "CustomEvent" },
               { "name": "filter", "type": "CustomEvent" },
+              { "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
               { "name": "rowselected", "type": "CustomEvent" },
               { "name": "cellchange", "type": "CustomEvent" },
               { "name": "cellclick", "type": "CustomEvent" }