@genesislcap/foundation-ui 14.488.2 → 14.489.0-GENC-1351.10

package/dist/foundation-ui.d.ts

@@ -102,6 +102,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import { GenesisResources } from '@genesislcap/foundation-comms';
 import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-components';
 import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
 import { Http } from '@genesislcap/foundation-comms';
@@ -893,6 +894,12 @@ export declare abstract class BaseDatasource extends BaseDatasource_base {
     isSnapshot: boolean;
     maxRows: number;
     maxView: number;
+    /**
+     * Sort field(s) for the resource. When using OFFSET-based paging (e.g.
+     * `options-datasource`'s `infinite-scroll`), the server has no other guaranteed row
+     * ordering between requests, so a stable `orderBy` is required to avoid rows shifting
+     * across pages (duplicates/gaps) as the underlying data changes between fetches.
+     */
     orderBy: string;
     request: any;
     requestChanged(oldValue: any, newValue: any): void;
@@ -908,7 +915,15 @@ export declare abstract class BaseDatasource extends BaseDatasource_base {
     set datasourceConfig(config: DatasourceOptions);
     requiresFullDataRefresh: boolean;
     dataSub: Subscription;
-    private sourceRef;
+    protected sourceRef: string;
+    /**
+     * Whether the server reported more rows are available beyond the ones already fetched.
+     */
+    protected moreRowsAvailable: boolean;
+    /**
+     * The OFFSET to request the next page from, for REQUEST_SERVER paging.
+     */
+    protected nextRequestOffset: number;
     rowsSyncedWithStream: Map<string, any>;
     dataSubWasLoggedOff: boolean;
     private criteriaFromFilters;
@@ -923,6 +938,28 @@ export declare abstract class BaseDatasource extends BaseDatasource_base {
     abstract handleStreamUpdates(updatedRows: any[]): void;
     fetchGenesisData(withFullInit?: boolean): Promise<void>;
     initDatasource(): Promise<void>;
+    /**
+     * Whether a further page of rows can be requested from the server.
+     * @public
+     */
+    canRequestMoreRows(): boolean;
+    /**
+     * Requests the next page of rows (up to `maxRows`) from the server.
+     *
+     * @remarks
+     * For DATASERVER resources a MORE_ROWS message is sent against the active stream's view and
+     * the rows are delivered as inserts on the existing stream subscription. For REQUEST_SERVER
+     * resources the next page is requested by OFFSET and delivered via `handleStreamInserts`.
+     * @public
+     */
+    requestMoreRows(): Promise<void>;
+    /**
+     * Row extraction identical to `Datasource.snapshotFiltered`, kept local so the raw
+     * response (with MORE_ROWS/NEXT_OFFSET paging metadata) remains available.
+     */
+    private filterSnapshotResult;
+    private updateRequestPagingState;
+    private initialRequestOffset;
     private datasourceOptions;
     private handleStreamUpdate;
     applyRequestServerData(requestServerResult: RequestServerResult): void;
@@ -1550,6 +1587,7 @@ export declare const COMBO_INPUT_MIN_LENGTH = 1;
  * @tagname %%prefix%%-combobox
  *
  * @fires change - Fired when a selection is confirmed in autocomplete-both mode
+ * @fires open-change - Fired when the dropdown opens or closes. detail: `OpenChangeEventDetail`
  */
 export declare class Combobox extends Combobox_2 {
     #private;
@@ -1557,6 +1595,16 @@ export declare class Combobox extends Combobox_2 {
     private needManualChangeEventDispatch;
     get activeDescendant(): string;
     slottedDatasource: HTMLSlotElement;
+    /**
+     * Enables server-side filtering: typed input refetches from the server with a criteria
+     * instead of filtering the already-loaded options client-side.
+     *
+     * @remarks
+     * Automatically forced to `true` (overriding an explicit `async="false"`) when the
+     * slotted datasource has `infinite-scroll` enabled — see
+     * {@link Combobox.enableAsyncForInfiniteScrollDatasource}. With only a page of the
+     * resource loaded, client-side filtering would silently only search that page.
+     */
     async: boolean;
     debounce: number;
     debounceChanged(oldValue: any, newValue: number): void;
@@ -1587,10 +1635,24 @@ export declare class Combobox extends Combobox_2 {
      * @experimental
      */
     scrollWhenSelectionChangesOptions: boolean | ScrollIntoViewOptions;
+    /**
+     * The scrollable element hosting the dropdown options. Part of the public contract for
+     * slotted datasources (e.g. options-datasource infinite scroll) to observe scrolling.
+     * @public
+     */
+    get scrollableListbox(): HTMLElement | null;
     openChanged(): void;
     get value(): string;
     set value(next: string);
     slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
+    /**
+     * When the slotted datasource pages its options (infinite scroll), only a page of the
+     * resource is loaded client-side, so filtering typed input locally is meaningless.
+     * Switch to async mode so input refetches from the server with a criteria instead;
+     * further pages honour that criteria. This overrides an explicit `async="false"` on
+     * the combobox — infinite-scroll datasources cannot support client-side filtering.
+     */
+    private enableAsyncForInfiniteScrollDatasource;
     filterOptions(): void;
     clickHandler(e: MouseEvent): boolean | void;
     keydownHandler(e: KeyboardEvent): boolean | void;
@@ -5665,6 +5727,15 @@ declare const NumberField_base: {
 
 export declare const NUMERIC_OPERATORS: CriteriaOperator[];
 
+/**
+ * Detail payload for the `open-change` event fired by `Select` and `Combobox` when their
+ * dropdown opens or closes.
+ * @public
+ */
+export declare interface OpenChangeEventDetail {
+    open: boolean;
+}
+
 export declare const OPERATOR_DISPLAY_LABEL: Record<CriteriaOperator, string>;
 
 declare type Operators = keyof typeof clientOperators;
@@ -5705,11 +5776,30 @@ export declare class Optgroup extends ListboxOption_3 {
  * @fires value-change - Fired when the selected value changes. detail: `ValueChangeEventDetail`
  */
 export declare class OptionsDatasource extends BaseDatasource {
+    resources: GenesisResources;
     labelField: string;
     optionElement: string;
     valueField: string;
     emptyDataLabel: string;
     allowCustomOptions: boolean;
+    /**
+     * Enables infinite scrolling. Instead of loading everything upfront, only `page-size`
+     * options are loaded initially and the next page is requested when the user scrolls near
+     * the bottom of the dropdown. REQUEST_SERVER resources page by OFFSET; DATASERVER
+     * resources page via MORE_ROWS on a live stream (total still capped by `maxView`).
+     *
+     * @remarks
+     * When paging REQUEST_SERVER resources by OFFSET, set a stable `order-by` — without one
+     * the server has no other guaranteed ordering between requests, so rows can shift across
+     * pages (duplicates/gaps) as the underlying data changes between fetches. Also, when the
+     * parent is a combobox, this forces `async` mode on it (see `Combobox.async`), since only
+     * a page of options is loaded client-side.
+     */
+    infiniteScroll: boolean;
+    /**
+     * Number of options fetched per page when `infinite-scroll` is enabled. Defaults to 20.
+     */
+    pageSize: number;
     labelFormatter: any;
     labelRowFormatter: (any: any) => string;
     initialSelectedValue: string | number;
@@ -5723,20 +5813,69 @@ export declare class OptionsDatasource extends BaseDatasource {
     }[];
     baseCriteria: string;
     private resizeObserver;
+    private static readonly defaultPageSize;
+    /**
+     * Distance from the bottom of the listbox (in px) at which the next page is requested.
+     */
+    private static readonly scrollLoadThresholdPx;
+    private listboxElement;
+    private loadingMoreRows;
+    private renderedOptionsCount;
+    private lastTopUpScrollHeight;
+    private emptyDataOption;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    /**
+     * While the dropdown is closed, the listbox has no dimensions and cannot be scrolled,
+     * so re-check whether the visible listbox needs topping up every time it opens. Also
+     * retries attaching the scroll listener if the initial attempt (queued on connect)
+     * missed the listbox because the host hadn't rendered it yet.
+     */
+    private selectOpenChangeHandler;
+    /**
+     * REQUEST_SERVER resources page by OFFSET against one-shot requests, so they keep the
+     * default snapshot mode. DATASERVER resources page via MORE_ROWS, which needs the live
+     * stream's SOURCE_REF, so they switch to stream mode.
+     */
+    private applyInfiniteScrollFetchMode;
+    private attachListboxScrollListener;
+    private listboxScrollHandler;
+    private loadNextPage;
+    /**
+     * If the loaded options don't fill the visible listbox (so it can't be scrolled),
+     * keep requesting pages until it overflows or the server runs out of rows.
+     */
+    private topUpVisibleListbox;
     private resizeObserverCallback;
     selectChangeHandler: (e: any) => void;
     fetchData(): void;
     asyncModeIntialization(): Promise<void>;
     clearData(): void;
     private checkOverflow;
+    private rowToOption;
+    private renderListboxOptions;
+    private removeEmptyDataOption;
     syncComponentData(snapshotData?: any[]): void;
     getInitialLabel(): string;
     private getDisplayForValue;
     resetCombobox(): void;
+    /**
+     * Appends rows to the already rendered options. Used by REQUEST_SERVER
+     * infinite scroll paging, where each page contains only the new rows.
+     */
     handleStreamInserts(insertedRows: any[]): void;
+    /**
+     * @remarks
+     * Not implemented: rendered options are only ever appended (see `syncComponentData` /
+     * `handleStreamInserts`). For DATASERVER `infinite-scroll`, a live delete/update on a
+     * row already rendered in an open dropdown will not be reflected until the datasource
+     * is refetched (e.g. criteria change) — tracked as a known limitation, not a v1 goal.
+     */
     handleStreamDeletes(deletedRows: any[]): void;
+    /**
+     * @remarks
+     * Not implemented — see {@link OptionsDatasource.handleStreamDeletes}.
+     */
     handleStreamUpdates(updatedRows: any[]): void;
 }
 
@@ -6428,8 +6567,16 @@ export declare class SegmentedItem extends Radio_2 {
 
 /**
  * @tagname %%prefix%%-select
+ *
+ * @fires open-change - Fired when the dropdown opens or closes. detail: `OpenChangeEventDetail`
  */
 export declare class Select extends Select_2 {
+    /**
+     * The scrollable element hosting the dropdown options. Part of the public contract for
+     * slotted datasources (e.g. options-datasource infinite scroll) to observe scrolling.
+     * @public
+     */
+    get scrollableListbox(): HTMLElement | null;
     /**
      * @internal
      */

package/dist/react.cjs

@@ -111,9 +111,9 @@ function _mergeRefs(...refs) {
   };
 }
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
+const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
 const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
@@ -121,9 +121,9 @@ const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
 });
 
 const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
@@ -148,9 +148,9 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 const Anchor = React.forwardRef(function Anchor(props, ref) {
@@ -255,8 +255,20 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
 });
 
 const Combobox = React.forwardRef(function Combobox(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref }, children);
+  const { onOpenChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOpenChangeRef = React.useRef(onOpenChange);
+  _onOpenChangeRef.current = onOpenChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOpenChangeFn = (e) => _onOpenChangeRef.current?.(e);
+    el.addEventListener('open-change', _onOpenChangeFn);
+    return () => {
+      el.removeEventListener('open-change', _onOpenChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
 const ConnectionIndicator = React.forwardRef(function ConnectionIndicator(props, ref) {
@@ -859,8 +871,20 @@ const SegmentedItem = React.forwardRef(function SegmentedItem(props, ref) {
 });
 
 const Select = React.forwardRef(function Select(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref }, children);
+  const { onOpenChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOpenChangeRef = React.useRef(onOpenChange);
+  _onOpenChangeRef.current = onOpenChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOpenChangeFn = (e) => _onOpenChangeRef.current?.(e);
+    el.addEventListener('open-change', _onOpenChangeFn);
+    return () => {
+      el.removeEventListener('open-change', _onOpenChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
 const Skeleton = React.forwardRef(function Skeleton(props, ref) {
@@ -1078,11 +1102,11 @@ const WeeklyRecurrence = React.forwardRef(function WeeklyRecurrence(props, ref)
 });
 
 module.exports = {
-  Accordion,
-  AccordionItem,
   ActionsMenu,
-  AiCriteriaSearch,
+  AccordionItem,
   AiIndicator,
+  AiCriteriaSearch,
+  Accordion,
   Anchor,
   AnchoredRegion,
   Avatar,

package/dist/react.mjs

@@ -109,9 +109,9 @@ function _mergeRefs(...refs) {
   };
 }
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
+export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
 export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
@@ -119,9 +119,9 @@ export const AccordionItem = React.forwardRef(function AccordionItem(props, ref)
   return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
 });
 
 export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
@@ -146,9 +146,9 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 export const Anchor = React.forwardRef(function Anchor(props, ref) {
@@ -253,8 +253,20 @@ export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
 });
 
 export const Combobox = React.forwardRef(function Combobox(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref }, children);
+  const { onOpenChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOpenChangeRef = React.useRef(onOpenChange);
+  _onOpenChangeRef.current = onOpenChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOpenChangeFn = (e) => _onOpenChangeRef.current?.(e);
+    el.addEventListener('open-change', _onOpenChangeFn);
+    return () => {
+      el.removeEventListener('open-change', _onOpenChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
 export const ConnectionIndicator = React.forwardRef(function ConnectionIndicator(props, ref) {
@@ -857,8 +869,20 @@ export const SegmentedItem = React.forwardRef(function SegmentedItem(props, ref)
 });
 
 export const Select = React.forwardRef(function Select(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref }, children);
+  const { onOpenChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOpenChangeRef = React.useRef(onOpenChange);
+  _onOpenChangeRef.current = onOpenChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOpenChangeFn = (e) => _onOpenChangeRef.current?.(e);
+    el.addEventListener('open-change', _onOpenChangeFn);
+    return () => {
+      el.removeEventListener('open-change', _onOpenChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
 export const Skeleton = React.forwardRef(function Skeleton(props, ref) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.488.2",
+  "version": "14.489.0-GENC-1351.10",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.488.2",
-    "@genesislcap/genx": "14.488.2",
-    "@genesislcap/rollup-builder": "14.488.2",
-    "@genesislcap/ts-builder": "14.488.2",
-    "@genesislcap/uvu-playwright-builder": "14.488.2",
-    "@genesislcap/vite-builder": "14.488.2",
-    "@genesislcap/webpack-builder": "14.488.2",
+    "@genesislcap/foundation-testing": "14.489.0-GENC-1351.10",
+    "@genesislcap/genx": "14.489.0-GENC-1351.10",
+    "@genesislcap/rollup-builder": "14.489.0-GENC-1351.10",
+    "@genesislcap/ts-builder": "14.489.0-GENC-1351.10",
+    "@genesislcap/uvu-playwright-builder": "14.489.0-GENC-1351.10",
+    "@genesislcap/vite-builder": "14.489.0-GENC-1351.10",
+    "@genesislcap/webpack-builder": "14.489.0-GENC-1351.10",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -100,16 +100,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.488.2",
-    "@genesislcap/foundation-ai": "14.488.2",
-    "@genesislcap/foundation-comms": "14.488.2",
-    "@genesislcap/foundation-criteria": "14.488.2",
-    "@genesislcap/foundation-errors": "14.488.2",
-    "@genesislcap/foundation-events": "14.488.2",
-    "@genesislcap/foundation-logger": "14.488.2",
-    "@genesislcap/foundation-notifications": "14.488.2",
-    "@genesislcap/foundation-user": "14.488.2",
-    "@genesislcap/foundation-utils": "14.488.2",
+    "@genesislcap/expression-builder": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-ai": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-comms": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-criteria": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-errors": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-events": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-logger": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-notifications": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-user": "14.489.0-GENC-1351.10",
+    "@genesislcap/foundation-utils": "14.489.0-GENC-1351.10",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -142,5 +142,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "babd82759de2896aaec4b630259c716b59afb1b3"
+  "gitHead": "3a274a433b5f216481f035a4fa38fa726103d694"
 }