@esri/solutions-components 0.8.28 → 0.8.30

package/dist/collection/components/floor-filter/floor-filter.js

@@ -31,19 +31,22 @@ export class FloorFilter {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the mapView and re-init the floor filter
+     */
     async mapViewWatchHandler() {
-        const webMap = this.mapView.map;
-        await webMap.when(() => {
-            if (this.floorFilterWidget) {
-                this.floorFilterWidget.destroy();
-                this.floorFilterWidget = undefined;
-            }
-            if (this._floorFilterElement) {
-                this._floorFilterElement.remove();
-                this._floorFilterElement = document.createElement("div");
-            }
-            this._initFloorFilter(this.mapView, webMap);
-        });
+        await this._initFloorFilter(this.mapView);
+    }
+    /**
+     * Watch for changes to the enabled property and re-init or destroy the floor filter
+     */
+    async enabledWatchHandler() {
+        if (this.enabled) {
+            await this._initFloorFilter(this.mapView);
+        }
+        else if (!this.enabled) {
+            this._destroyWidget();
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -56,8 +59,11 @@ export class FloorFilter {
     async componentWillLoad() {
         return this._initModules();
     }
+    /**
+     * Renders the component.
+     */
     render() {
-        return (h(Host, { key: '98769446b20d8a9432b571b5653abbc6613bdfe5' }, h("div", { key: '6606a2593fec1885fc02b07a168bdea43e7f864a', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -79,27 +85,54 @@ export class FloorFilter {
         this.FloorFilter = FloorFilter;
         this.reactiveUtils = reactiveUtils;
     }
+    /**
+     * Destroy the widget and remove the containing element if it exists
+     *
+     * @protected
+     */
+    _destroyWidget() {
+        if (this.floorFilterWidget) {
+            this.floorFilterWidget.destroy();
+            this.floorFilterWidget = undefined;
+        }
+        if (this._floorFilterElement) {
+            this._floorFilterElement.remove();
+        }
+    }
+    /**
+     * Destroy the widget and remove the containing element then re-create the container element
+     *
+     * @protected
+     */
+    _initContainer() {
+        this._destroyWidget();
+        this._floorFilterElement = document.createElement("div");
+    }
     /**
      * Initialize the floor filter or reset the current view if it already exists
      */
-    _initFloorFilter(view, webMap) {
-        var _a, _b, _c;
+    async _initFloorFilter(view) {
+        const webMap = view === null || view === void 0 ? void 0 : view.map;
         if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
-            this.floorFilterWidget = new this.FloorFilter({
-                container: this._floorFilterElement,
-                view
-            });
-            (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
-            this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
-                this.facilityChanged.emit(facility);
-            });
-            (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
-            this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
-                this.levelChanged.emit(level);
-            });
-            (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
-            this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
-                this.siteChanged.emit(site);
+            this._initContainer();
+            await webMap.when(() => {
+                var _a, _b, _c;
+                this.floorFilterWidget = new this.FloorFilter({
+                    container: this._floorFilterElement,
+                    view
+                });
+                (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
+                this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
+                    this.facilityChanged.emit(facility);
+                });
+                (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
+                this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
+                    this.levelChanged.emit(level);
+                });
+                (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
+                this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
+                    this.siteChanged.emit(site);
+                });
             });
         }
     }
@@ -229,6 +262,9 @@ export class FloorFilter {
         return [{
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
+            }, {
+                "propName": "enabled",
+                "methodName": "enabledWatchHandler"
             }];
     }
 }

package/dist/collection/components/layer-table/layer-table.js

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
+import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
@@ -216,6 +216,10 @@ export class LayerTable {
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
+        if (this.selectedIds.length > 0) {
+            this._table.rowHighlightIds.removeAll();
+            this._table.rowHighlightIds.add(this.selectedIds[0]);
+        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -315,7 +319,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: 'd2e67c4d6676ede2d0094bfca008dfca12fb59b3' }, h("calcite-shell", { key: '62f1c76bbffcae878e4e3f3342c37bf3bbd865ca' }, this._getTableControlRow("header"), h("div", { key: '4efd17a2485f990984f61f2d8c8b45d3d096d428', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '443481322720ab22e9e2bddac98802a25ef87982', class: "height-full width-full" }, h("calcite-loader", { key: '445bb39ac5c33d470a52f10dd1c481fdaf38443d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4f1ba294ece2f5b05030a1c3cdc48d6ff46ed5d4', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '928286a8e4d1159b56b2aa4384f0d6eed38c9e76' }, h("calcite-shell", { key: '7c9b98056ee867df54ebfd31fee6f046f5152f64' }, this._getTableControlRow("header"), h("div", { key: 'b1a9a9cca100c7bef335afd5b6c7d7384ca7536c', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'ceeead9900f43c94f46c8c94698ae17f3ae558b7', class: "height-full width-full" }, h("calcite-loader", { key: '7bf3c9ba21daa27dd387ba5413b6f6e982e1f10d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '7d0440047453a45fe1688ad373ab2463fe7479ba', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -916,43 +920,38 @@ export class LayerTable {
             else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-                if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...ids].reverse()[0];
+                if (ids.length === 1) {
+                    this._skipOnChange = false;
+                }
+                else if (this._previousCurrentId !== this._currentId) {
                     // query the layer based on current sort and filters then grab between the current id and previous id
                     const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
                         prev.push(`${cur.fieldName} ${cur.direction}`);
                         return prev;
                     }, []);
-                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
                     let isBetween = false;
                     const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
                     const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
                     const startIndex = _start < _end ? _start : _end;
                     const endIndex = _end > _start ? _end : _start;
                     this._skipOnChange = startIndex + 1 !== endIndex;
-                    const selectedIds = oids.reduce((prev, cur) => {
+                    const idsInRange = oids.reduce((prev, cur) => {
                         const id = cur;
-                        const index = this._table.viewModel.getObjectIdIndex(id);
                         if ((id === this._currentId || id === this._previousCurrentId)) {
                             isBetween = !isBetween;
                             if (prev.indexOf(id) < 0) {
                                 prev.push(id);
                             }
                         }
-                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
-                        // Index of -1 will occur for features between the start and and oid if
-                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
-                        if (isBetween && prev.indexOf(id) < 0) {
-                            prev.push(id);
-                        }
-                        // Also add index based check.
-                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
-                        if ((this.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                        else if (isBetween && prev.indexOf(id) < 0) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
+                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1294,9 +1293,10 @@ export class LayerTable {
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a;
+        var _a, _b;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**

package/dist/collection/utils/queryUtils.js

@@ -40,6 +40,36 @@ export async function queryAllFeatures(start, layer, graphics) {
         queryAllFeatures(start += num, layer, graphics) :
         Promise.resolve(graphics);
 }
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+export async function queryAllOidsWithQueryFeatures(start, layer, graphics, orderBy) {
+    const num = layer.capabilities.query.maxRecordCount;
+    const query = layer.createQuery();
+    query.start = start;
+    query.num = num;
+    query.returnGeometry = false;
+    query.orderByFields = orderBy;
+    query.outFields = [layer.objectIdField];
+    query.where = layer.definitionExpression || "1=1";
+    const result = await layer.queryFeatures(query);
+    graphics = graphics.concat(result.features);
+    return result.exceededTransferLimit ?
+        queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+        Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
 /**
  * Query the layer for all IDs
  *

package/dist/collection/utils/queryUtils.ts

@@ -48,6 +48,47 @@ export async function queryAllFeatures(
     Promise.resolve(graphics);
 }
 
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+export async function queryAllOidsWithQueryFeatures(
+  start: number,
+  layer: __esri.FeatureLayer,
+  graphics: __esri.Graphic[],
+  orderBy?: string[]
+): Promise<number[]> {
+  const num = layer.capabilities.query.maxRecordCount;
+  const query = layer.createQuery();
+  query.start = start;
+  query.num = num;
+  query.returnGeometry = false;
+  query.orderByFields = orderBy;
+  query.outFields = [layer.objectIdField];
+  query.where = layer.definitionExpression || "1=1";
+
+  const result = await layer.queryFeatures(query);
+
+  graphics = graphics.concat(
+    result.features
+  );
+
+  return result.exceededTransferLimit ?
+    queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+    Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
+
 /**
  * Query the layer for all IDs
  *

package/dist/components/floor-filter2.js

@@ -26,19 +26,22 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the mapView and re-init the floor filter
+     */
     async mapViewWatchHandler() {
-        const webMap = this.mapView.map;
-        await webMap.when(() => {
-            if (this.floorFilterWidget) {
-                this.floorFilterWidget.destroy();
-                this.floorFilterWidget = undefined;
-            }
-            if (this._floorFilterElement) {
-                this._floorFilterElement.remove();
-                this._floorFilterElement = document.createElement("div");
-            }
-            this._initFloorFilter(this.mapView, webMap);
-        });
+        await this._initFloorFilter(this.mapView);
+    }
+    /**
+     * Watch for changes to the enabled property and re-init or destroy the floor filter
+     */
+    async enabledWatchHandler() {
+        if (this.enabled) {
+            await this._initFloorFilter(this.mapView);
+        }
+        else if (!this.enabled) {
+            this._destroyWidget();
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -51,8 +54,11 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
     async componentWillLoad() {
         return this._initModules();
     }
+    /**
+     * Renders the component.
+     */
     render() {
-        return (h(Host, { key: '98769446b20d8a9432b571b5653abbc6613bdfe5' }, h("div", { key: '6606a2593fec1885fc02b07a168bdea43e7f864a', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -74,33 +80,61 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
         this.FloorFilter = FloorFilter;
         this.reactiveUtils = reactiveUtils;
     }
+    /**
+     * Destroy the widget and remove the containing element if it exists
+     *
+     * @protected
+     */
+    _destroyWidget() {
+        if (this.floorFilterWidget) {
+            this.floorFilterWidget.destroy();
+            this.floorFilterWidget = undefined;
+        }
+        if (this._floorFilterElement) {
+            this._floorFilterElement.remove();
+        }
+    }
+    /**
+     * Destroy the widget and remove the containing element then re-create the container element
+     *
+     * @protected
+     */
+    _initContainer() {
+        this._destroyWidget();
+        this._floorFilterElement = document.createElement("div");
+    }
     /**
      * Initialize the floor filter or reset the current view if it already exists
      */
-    _initFloorFilter(view, webMap) {
-        var _a, _b, _c;
+    async _initFloorFilter(view) {
+        const webMap = view === null || view === void 0 ? void 0 : view.map;
         if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
-            this.floorFilterWidget = new this.FloorFilter({
-                container: this._floorFilterElement,
-                view
-            });
-            (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
-            this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
-                this.facilityChanged.emit(facility);
-            });
-            (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
-            this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
-                this.levelChanged.emit(level);
-            });
-            (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
-            this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
-                this.siteChanged.emit(site);
+            this._initContainer();
+            await webMap.when(() => {
+                var _a, _b, _c;
+                this.floorFilterWidget = new this.FloorFilter({
+                    container: this._floorFilterElement,
+                    view
+                });
+                (_a = this._facilityHandle) === null || _a === void 0 ? void 0 : _a.remove();
+                this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.facility, (facility) => {
+                    this.facilityChanged.emit(facility);
+                });
+                (_b = this._levelHandle) === null || _b === void 0 ? void 0 : _b.remove();
+                this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.level, (level) => {
+                    this.levelChanged.emit(level);
+                });
+                (_c = this._siteHandle) === null || _c === void 0 ? void 0 : _c.remove();
+                this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
+                    this.siteChanged.emit(site);
+                });
             });
         }
     }
     get el() { return this; }
     static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "enabled": ["enabledWatchHandler"]
     }; }
     static get style() { return FloorFilterStyle0; }
 }, [1, "floor-filter", {
@@ -108,7 +142,8 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
         "floorFilterWidget": [16],
         "mapView": [16]
     }, undefined, {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "enabled": ["enabledWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/layer-table2.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { b as goToSelection, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
-import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
+import { b as queryAllIds, c as queryAllOidsWithQueryFeatures, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$D } from './action.js';
 import { d as defineCustomElement$C } from './action-bar.js';
@@ -246,6 +246,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
+        if (this.selectedIds.length > 0) {
+            this._table.rowHighlightIds.removeAll();
+            this._table.rowHighlightIds.add(this.selectedIds[0]);
+        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -345,7 +349,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: 'd2e67c4d6676ede2d0094bfca008dfca12fb59b3' }, h("calcite-shell", { key: '62f1c76bbffcae878e4e3f3342c37bf3bbd865ca' }, this._getTableControlRow("header"), h("div", { key: '4efd17a2485f990984f61f2d8c8b45d3d096d428', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '443481322720ab22e9e2bddac98802a25ef87982', class: "height-full width-full" }, h("calcite-loader", { key: '445bb39ac5c33d470a52f10dd1c481fdaf38443d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4f1ba294ece2f5b05030a1c3cdc48d6ff46ed5d4', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '928286a8e4d1159b56b2aa4384f0d6eed38c9e76' }, h("calcite-shell", { key: '7c9b98056ee867df54ebfd31fee6f046f5152f64' }, this._getTableControlRow("header"), h("div", { key: 'b1a9a9cca100c7bef335afd5b6c7d7384ca7536c', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'ceeead9900f43c94f46c8c94698ae17f3ae558b7', class: "height-full width-full" }, h("calcite-loader", { key: '7bf3c9ba21daa27dd387ba5413b6f6e982e1f10d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '7d0440047453a45fe1688ad373ab2463fe7479ba', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -946,43 +950,38 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-                if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...ids].reverse()[0];
+                if (ids.length === 1) {
+                    this._skipOnChange = false;
+                }
+                else if (this._previousCurrentId !== this._currentId) {
                     // query the layer based on current sort and filters then grab between the current id and previous id
                     const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
                         prev.push(`${cur.fieldName} ${cur.direction}`);
                         return prev;
                     }, []);
-                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
                     let isBetween = false;
                     const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
                     const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
                     const startIndex = _start < _end ? _start : _end;
                     const endIndex = _end > _start ? _end : _start;
                     this._skipOnChange = startIndex + 1 !== endIndex;
-                    const selectedIds = oids.reduce((prev, cur) => {
+                    const idsInRange = oids.reduce((prev, cur) => {
                         const id = cur;
-                        const index = this._table.viewModel.getObjectIdIndex(id);
                         if ((id === this._currentId || id === this._previousCurrentId)) {
                             isBetween = !isBetween;
                             if (prev.indexOf(id) < 0) {
                                 prev.push(id);
                             }
                         }
-                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
-                        // Index of -1 will occur for features between the start and and oid if
-                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
-                        if (isBetween && prev.indexOf(id) < 0) {
-                            prev.push(id);
-                        }
-                        // Also add index based check.
-                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
-                        if ((this.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                        else if (isBetween && prev.indexOf(id) < 0) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
+                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1324,9 +1323,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a;
+        var _a, _b;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**

package/dist/components/queryUtils.js

@@ -18,6 +18,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * Query the layer for all OIDs valid for any definition expressions applied to the layer.
+ *
+ * This query allows OIDs to be returned in the same order as shown in the FeatureTable.
+ * FeatureLayer.queryObjectIds can return OIDs in a different order.
+ *
+ * @param start zero-based index indicating where to begin retrieving features
+ * @param layer the layer to retrieve features from
+ * @param graphics stores the features
+ * @param orderBy One or more field names used to order the query results.
+ *                Specify ASC (ascending) or DESC (descending) after the field name to control the order.
+ *                The default order is ASC.
+ *
+ * @returns Promise with the OIDs sorted based on any orderBy definitions
+ */
+async function queryAllOidsWithQueryFeatures(start, layer, graphics, orderBy) {
+    const num = layer.capabilities.query.maxRecordCount;
+    const query = layer.createQuery();
+    query.start = start;
+    query.num = num;
+    query.returnGeometry = false;
+    query.orderByFields = orderBy;
+    query.outFields = [layer.objectIdField];
+    query.where = layer.definitionExpression || "1=1";
+    const result = await layer.queryFeatures(query);
+    graphics = graphics.concat(result.features);
+    return result.exceededTransferLimit ?
+        queryAllOidsWithQueryFeatures(start += num, layer, graphics, orderBy) :
+        Promise.resolve(graphics.map(g => g.attributes[layer.objectIdField]));
+}
 /**
  * Query the layer for all IDs
  *
@@ -125,22 +155,6 @@ async function queryFeaturesByGeometry(start, layer, geometry, featuresCollectio
         queryFeaturesByGeometry(start += num, layer, geometry, featuresCollection) :
         Promise.resolve(featuresCollection);
 }
-/**
- * Query the layer for feature ids that match the provided where clause.
- * If no where clause is provided all features will be returned.
- *
- * @param layer the layer to retrieve features from
- * @param where the where clause for the query
- * @param orderBy any sort order to apply to the query
- *
- * @returns Promise with the ids from the layer that match the where and are sorted as defined by orderBy
- */
-async function queryFeatureIds(layer, where, orderBy) {
-    const query = layer.createQuery();
-    query.where = where ? where : "1=1";
-    query.orderByFields = orderBy;
-    return await layer.queryObjectIds(query);
-}
 /**
  * Query the layer for the extent of features with the provided OIDs
  *
@@ -198,4 +212,4 @@ async function _intersectQuery(geometry, layer) {
     return layer.queryObjectIds(q);
 }
 
-export { queryExtent as a, queryAllIds as b, queryFeatureIds as c, queryFeaturesByGlobalID as d, queryObjectIds as e, queryFeaturesByGeometry as f, getQueryGeoms as g, queryFeaturesByID as q };
+export { queryExtent as a, queryAllIds as b, queryAllOidsWithQueryFeatures as c, queryFeaturesByGlobalID as d, queryObjectIds as e, queryFeaturesByGeometry as f, getQueryGeoms as g, queryFeaturesByID as q };