@arcgis/map-components 5.2.0-next.99 → 6.0.0-next.0

package/dist/components/arcgis-link-chart/customElement.js

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as C } from "../../chunks/runtime.js";
-import { watch as n } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
 import _ from "@arcgis/core/views/LinkChartView.js";
 import b from "@arcgis/core/WebLinkChart.js";
 import { LitElement as V, createEvent as p, safeClassMap as w } from "@arcgis/lumina";
-import { makeAccessorController as f, reEmitEvent as e, reCreateAccessor as A } from "@arcgis/lumina/controllers/accessor";
-import { createRef as m, ref as v } from "lit/directives/ref.js";
-import { s as I } from "../../chunks/esri-main.js";
-import { s as E } from "../../chunks/slots.js";
-import { C as u } from "../../chunks/resources.js";
-import { b as L, c as M, p as k, i as R } from "../../chunks/component-utils.js";
+import { reEmitEvent as e } from "@arcgis/lumina-toolkit/reEmitEvent";
+import { makeAccessorController as f, reCreateAccessor as A } from "@arcgis/lumina-toolkit/useAccessor";
+import { createRef as u, ref as v } from "lit/directives/ref.js";
+import { s as E } from "../../chunks/esri-main.js";
+import { s as I } from "../../chunks/slots.js";
+import { C as m } from "../../chunks/resources.js";
+import { b as L, c as R, p as M, i as k } from "../../chunks/component-utils.js";
 import { U, u as D, a as x, b as Q } from "../../chunks/useArcgisViewReadyError.js";
 import { fetchKnowledgeGraph as P } from "@arcgis/core/rest/knowledgeGraphService.js";
 import z from "@arcgis/core/rest/knowledgeGraph/GraphQueryStreaming.js";
-import { t as d } from "../../chunks/async-utils.js";
-import { isAbortError as g } from "@arcgis/core/core/promiseUtils.js";
+import { t as g } from "../../chunks/async-utils.js";
+import { isAbortError as d } from "@arcgis/core/core/promiseUtils.js";
 import { html as y } from "lit";
 import Z from "@arcgis/core/layers/LinkChartLayer.js";
 const F = f(
@@ -28,18 +29,21 @@ const F = f(
    * in an externalized package.
    */
   {}
-), G = f(_, {});
-class S extends V {
+), S = f(_, {});
+class G extends V {
   constructor() {
-    super(), this._attributionMode = null, this._containerRef = m(), this._mapRef = m(), this._uiController = new U(this), this._activeLoadAbortController = null, this.arcgisLoadError = D(this), this.arcgisViewReadyError = x(this), this._map = F(this), this._baseCypherQuery = "", this._serviceUrl = "", this._propItemId = "", this.view = G(this), this.animationsDisabled = this.view.animationsEnabled, this.allLayerViews = this.view.allLayerViews, this.analyses = this.view.analyses, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.selectionManager = this.view.selectionManager, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.arcgisViewAnalysisViewCreate = e(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = e(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = e(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = p(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = e(() => this.view, "double-tap-drag"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = p(), this.arcgisViewVerticalTwoFingerDrag = e(() => this.view, "vertical-two-finger-drag"), Q(this), this.view.ui = {
+    super(), this._attributionMode = null, this._containerRef = u(), this._mapRef = u(), this._uiController = new U(this), this._activeLoadAbortController = null, this.arcgisLoadError = D(this), this.arcgisViewReadyError = x(this), this._map = F(this), this._baseCypherQuery = "", this._serviceUrl = "", this._propItemId = "", this.view = S(this), this.animationsDisabled = this.view.animationsEnabled, this.allLayerViews = this.view.allLayerViews, this.analyses = this.view.analyses, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.options = this.view.options, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.selectionManager = this.view.selectionManager, this.focusRegionEnabled = this.view.focusRegionEnabled, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.arcgisViewAnalysisViewCreate = e(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = e(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = e(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = p(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = e(() => this.view, "double-tap-drag"), this.arcgisViewFocusRegionSelect = e(() => this.view, "focus-region-select"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = p(), this.arcgisViewVerticalTwoFingerDrag = e(() => this.view, "vertical-two-finger-drag"), Q(this), this.view.ui = {
       components: []
     };
   }
   static {
-    this.properties = { _map: 16, _baseCypherQuery: 16, _serviceUrl: 16, _propItemId: 16, view: 32, animationsDisabled: 5, aria: 0, allLayerViews: 32, analyses: 0, attributionItems: 32, attributionMode: 1, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, canZoomIn: 36, canZoomOut: 36, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, focusAreas: 0, graphics: 0, hideAttribution: 5, highlights: 0, interacting: 32, itemId: 3, baseCypherQuery: 3, serviceUrl: 3, layerViews: 32, magnifier: 32, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupElement: 32, popupDisabled: 5, popupComponentEnabled: 5, ready: 36, resizeAlign: 1, resolution: 40, rotation: 9, selectionManager: 32, scale: 9, slotGroupRefs: 32, spatialReference: 0, stationary: 32, suspended: 39, theme: 0, timeExtent: 0, timeZone: 1, updating: 36, viewpoint: 0, zoom: 9, loadErrorSources: 0 };
+    this.properties = { _map: 16, _baseCypherQuery: 16, _serviceUrl: 16, _propItemId: 16, view: 32, animationsDisabled: 5, aria: 0, allLayerViews: 32, analyses: 0, attributionItems: 32, attributionMode: 1, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, canZoomIn: 36, canZoomOut: 36, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, focusAreas: 0, graphics: 0, hideAttribution: 5, highlights: 0, interacting: 32, itemId: 3, baseCypherQuery: 3, serviceUrl: 3, layerViews: 32, magnifier: 32, map: 0, navigating: 32, navigation: 0, options: 0, padding: 0, popup: 0, popupElement: 32, popupDisabled: 5, popupComponentEnabled: 5, ready: 36, resizeAlign: 1, resolution: 40, rotation: 9, selectionManager: 32, focusRegionEnabled: 5, focusRegion: 32, scale: 9, slotGroupRefs: 32, spatialReference: 0, stationary: 32, suspended: 39, theme: 0, timeExtent: 0, timeZone: 1, updating: 32, viewpoint: 0, zoom: 9, loadErrorSources: 0 };
   }
   static {
-    this.styles = [I, E];
+    this.styles = [E, I];
+  }
+  static {
+    this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   get aria() {
     return this.view?.aria;
@@ -62,8 +66,8 @@ class S extends V {
   set center(i) {
     if (L(i, this._center))
       return;
-    this._center = M(i);
-    const t = k(i, this.view);
+    this._center = R(i);
+    const t = M(i, this.view);
     t && (this.view.center = t);
   }
   get extent() {
@@ -114,6 +118,9 @@ class S extends V {
   get popupElement() {
     return this._uiController.popupElement || null;
   }
+  get focusRegion() {
+    return this.view.focusRegion;
+  }
   get scale() {
     return this.view.scale;
   }
@@ -123,11 +130,14 @@ class S extends V {
   get stationary() {
     return this.view.stationary;
   }
+  get updating() {
+    return this.view.updating;
+  }
   get viewpoint() {
     return this.view.viewpoint;
   }
   set viewpoint(i) {
-    R(this.viewpoint, i) && (this.view.viewpoint = i);
+    k(this.viewpoint, i) && (this.view.viewpoint = i);
   }
   get zoom() {
     return this.view.zoom;
@@ -148,7 +158,7 @@ class S extends V {
     return await this.view.goTo(i, t);
   }
   async openPopup(i) {
-    this._uiController.openPopup(i);
+    await this._uiController.openPopup(i);
   }
   toMap(i) {
     return this.view.toMap(i);
@@ -187,16 +197,16 @@ class S extends V {
         if (this._serviceUrl && !this._baseCypherQuery) {
           const a = t();
           s.fetchKnowledgeGraph(this._serviceUrl).then((l) => {
-            const h = new s.WebLinkChart(), o = new s.LinkChartLayer({
+            const n = new s.WebLinkChart(), o = new s.LinkChartLayer({
               url: l.url
             });
             o.load({
               signal: a?.signal
             });
             try {
-              d(a.signal), h.add(o), this._setLinkChartAndZoom(h);
+              g(a.signal), n.add(o), this._setLinkChartAndZoom(n);
             } catch (c) {
-              if (!g(c))
+              if (!d(c))
                 throw c;
             }
           });
@@ -207,11 +217,11 @@ class S extends V {
               openCypherQuery: this._baseCypherQuery
             }), void 0, {
               signal: a?.signal
-            }).then(async (h) => {
+            }).then(async (n) => {
               try {
-                d(a.signal), this._setLinkChartAndZoom(h);
+                g(a.signal), this._setLinkChartAndZoom(n);
               } catch (o) {
-                if (!g(o))
+                if (!d(o))
                   throw o;
               }
             });
@@ -222,12 +232,12 @@ class S extends V {
   loaded() {
     const i = this;
     i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, s.setLocalPublicMap(this, this._map), this.manager.onLifecycle(() => [
-      n(() => this.map, (t) => {
+      h(() => this.map, (t) => {
         t && s.setLocalPrivateMap(this, t);
       }, { initial: !0, sync: !0 }),
-      n(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
-      n(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready }),
-      n(() => this.view.attributionHeight, (t) => {
+      h(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
+      h(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready }),
+      h(() => this.view.attributionHeight, (t) => {
         this._uiController.handleAttributionHeightChange(t);
       }, { initial: !0 })
     ]);
@@ -238,10 +248,10 @@ class S extends V {
     });
   }
   renderMain() {
-    return y`<div class=${w(u.base)} ${v(this._mapRef)}></div>`;
+    return y`<div class=${w(m.base)} ${v(this._mapRef)}></div>`;
   }
   render() {
-    return y`${this.renderMain()}<section class=${w(u.containerUI)} ${v(this._containerRef)}>${this._uiController.render()}</section>`;
+    return y`${this.renderMain()}<section class=${w(m.containerUI)} ${v(this._containerRef)}>${this._uiController.render()}</section>`;
   }
 }
 const s = {
@@ -262,8 +272,8 @@ const s = {
   },
   reCreateAccessor: A
 };
-C("arcgis-link-chart", S);
+C("arcgis-link-chart", G);
 export {
-  S as ArcgisLinkChart,
+  G as ArcgisLinkChart,
   s as exportsForTests
 };

package/dist/components/arcgis-link-chart-layout-switcher/customElement.d.ts

@@ -158,10 +158,10 @@ export abstract class ArcgisLinkChartLayoutSwitcher extends LitElement {
   };
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
-   * Fires when component has completed the layout switch
+   * Fires when the component has completed the layout switch.
    *
    * @example
    * ```js

package/dist/components/arcgis-link-chart-layout-switcher/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as h } from "../../chunks/runtime.js";
 import { html as i } from "lit";
-import d from "@arcgis/core/widgets/LinkChartLayoutSwitcher/LinkChartLayoutSwitcherViewModel.js";
-import { usePropertyChange as m } from "@arcgis/lumina/controllers";
+import m from "@arcgis/core/widgets/LinkChartLayoutSwitcher/LinkChartLayoutSwitcherViewModel.js";
+import { usePropertyChange as d } from "@arcgis/lumina/controllers";
 import { m as g } from "../../chunks/useViewModel.js";
 import { u as p } from "../../chunks/useT9n.js";
-import { reEmitEvent as u } from "@arcgis/lumina/controllers/accessor";
+import { reEmitEvent as u } from "@arcgis/lumina-toolkit/reEmitEvent";
 import { LitElement as y, createEvent as w } from "@arcgis/lumina";
 const e = {
   forceDirected: "organic-standard",
@@ -47,10 +47,10 @@ const e = {
   [e.geographic]: "geographic",
   [e.chronologicalSingle]: "chronologicalSingle",
   [e.chronologicalMultiple]: "chronologicalMultiple"
-}, v = g(d);
+}, v = g(m);
 class L extends y {
   constructor() {
-    super(...arguments), this.messages = p(), this.viewModel = v(this), this.view = this.viewModel.view, this.appearance = "dropdown", this.autoDestroyDisabled = !1, this.closeOnSelectDisabled = !1, this.icon = "nodes-link", this.layout = this.viewModel.layout, this.preventExtentUpdate = this.viewModel.preventExtentUpdate, this.state = this.viewModel.state, this.arcgisSwitchLayout = u(() => this.viewModel, "switchLayout"), this.arcgisPropertyChange = m()("state"), this.arcgisReady = w();
+    super(...arguments), this.messages = p(), this.viewModel = v(this), this.view = this.viewModel.view, this.appearance = "dropdown", this.autoDestroyDisabled = !1, this.closeOnSelectDisabled = !1, this.icon = "nodes-link", this.layout = this.viewModel.layout, this.preventExtentUpdate = this.viewModel.preventExtentUpdate, this.state = this.viewModel.state, this.arcgisSwitchLayout = u(() => this.viewModel, "switchLayout"), this.arcgisPropertyChange = d()("state"), this.arcgisReady = w();
   }
   static {
     this.properties = { view: 0, appearance: 1, autoDestroyDisabled: 5, closeOnSelectDisabled: 5, icon: 1, label: 1, layout: 32, messageOverrides: 0, preventExtentUpdate: 5, referenceElement: 1, state: 32 };
@@ -69,7 +69,7 @@ class L extends y {
   }
   _renderMenuBar() {
     const { messages: t } = this;
-    return i`<calcite-action-bar scale=s floating overflow-actions-disabled>${Object.entries(l).map(([o, c]) => i`<calcite-action-group .label=${this.messages[o]}>${c.map((a) => i`<calcite-action scale=s .icon=${s[a]} .active=${a === this.layout ? !0 : void 0} @click=${() => {
+    return i`<calcite-action-bar scale=s floating overflow-mode=none>${Object.entries(l).map(([o, c]) => i`<calcite-action-group .label=${this.messages[o]}>${c.map((a) => i`<calcite-action scale=s .icon=${s[a]} .active=${a === this.layout ? !0 : void 0} @click=${() => {
       this.switchLayout(a);
     }} .text=${t[n[a]]}></calcite-action>`)}</calcite-action-group>`)}</calcite-action-bar>`;
   }

package/dist/components/arcgis-link-chart-nonspatial-visibility-toggle/customElement.d.ts

@@ -6,9 +6,11 @@ import type { State, NonspatialMode } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * The <link-chart-nonspatial-visibility-toggle> component is for use in link charts that allows users to switch whether or not nonspatial data is visible in the view.  Spatial entities are those with a value in a defined geometry property in a traditional map context.  A Spatial relationship is one where both endpoints are spatial
+ * The <link-chart-nonspatial-visibility-toggle> component is used in conjunction with link chart. The component toggles visibility of nonspatial data.
  *
- * Note: Sign in to access the data in this demo, U/P: `viewer01`/`I68VGU^nMurF`
+ * Note: Use the following credentials to sign in to the demo:
+ *   - Username: `viewer01`
+ *   - Password: `I68VGU^nMurF`
  *
  * @since 5.0
  */
@@ -77,7 +79,7 @@ export abstract class ArcgisLinkChartNonspatialVisibilityToggle extends LitEleme
   switchNonspatialVisibility(nonspatialVisibilitySetting: NonspatialMode): Promise<void>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisLinkChartNonspatialVisibilityToggle["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-locate/customElement.d.ts

@@ -49,7 +49,7 @@ export abstract class ArcgisLocate extends LitElement {
   accessor autoDestroyDisabled: boolean;
   accessor geolocationOptions: PositionOptions | undefined;
   /**
-   * Indicates whether to navigate the view to the position and scale of the geolocated result.
+   * Indicates whether navigation to the position and scale of the geolocated result is disabled.
    *
    * @default false
    */
@@ -176,7 +176,7 @@ export abstract class ArcgisLocate extends LitElement {
   readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, { error: GeolocationPositionError; }>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly arcgisSuccess: import("@arcgis/lumina").TargetedEvent<this, { position: GeolocationPosition; }>;
   readonly "@eventTypes": {

package/dist/components/arcgis-locate/customElement.js

@@ -14,7 +14,7 @@ import f from "@arcgis/core/core/Error.js";
 import { onLocaleChange as D } from "@arcgis/core/intl.js";
 import N from "@arcgis/core/PopupTemplate.js";
 import x from "@arcgis/core/support/actions/ActionButton.js";
-import { a as G } from "../../chunks/async-utils.js";
+import { i as G } from "../../chunks/async-utils.js";
 import { G as I, g as A } from "../../chunks/GeolocationPositioning.js";
 import { g } from "../../chunks/globalCss.js";
 const B = y`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`;
@@ -27,7 +27,6 @@ const R = new x({
   icon: "trash",
   id: "remove-selected-feature",
   title: "{messages.remove}"
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
 })._internalSetClassName("esri-icon-trash");
 function U(e) {
   return new N({

package/dist/components/arcgis-map/customElement.d.ts

@@ -19,6 +19,7 @@ import type HighlightOptions from "@arcgis/core/views/support/HighlightOptions.j
 import type IPSInfo from "@arcgis/core/webdoc/IPSInfo.js";
 import type Magnifier from "@arcgis/core/views/Magnifier.js";
 import type Navigation from "@arcgis/core/views/navigation/Navigation.js";
+import type ViewOptions from "@arcgis/core/views/interactive/options/ViewOptions.js";
 import type Popup from "@arcgis/core/widgets/Popup.js";
 import type SelectionManager from "@arcgis/core/views/SelectionManager.js";
 import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
@@ -29,7 +30,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LoadErrorSource } from "../types.js";
 import type { ArcgisPopup } from "../arcgis-popup/customElement.js";
 import type { LayerView2DFor, ResizeAlign } from "@arcgis/core/views/2d/types.js";
-import type { DoubleClickEvent, DoubleTapDragEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
+import type { DoubleClickEvent, DoubleTapDragEvent, FocusRegionSelectEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
 import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, ToScreenOptions2D, Screenshot, UserSettings, ViewHitTestResult, HitTestOptions, GoToOptions2D, GoToTarget2D } from "@arcgis/core/views/types.js";
 import type { AnalysisView2DUnion } from "@arcgis/core/views/2d/analysis/types.js";
 import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
@@ -50,10 +51,18 @@ export interface DeclareCssProperties {
   "--arcgis-layout-overlay-space-right": "*";
   /** _Since 5.0_ Specifies the focus outline color for the view. */
   "--arcgis-view-color-focus": "*";
+  /** _Since 5.2_ Specifies the corner radius for the view. */
+  "--arcgis-view-corner-radius": "*";
   /** _Since 5.1_ Specifies the background color for table rows. */
   "--arcgis-table-row-background-color": "*";
   /** _Since 5.1_ Specifies the background color for alternate table rows. */
   "--arcgis-table-row-alt-background-color": "*";
+  /** _Since 5.2_ Specifies the outer border color of the focus region. */
+  "--arcgis-focus-region-outer-border-color": "*";
+  /** _Since 5.2_ Specifies the inner border color of the focus region. */
+  "--arcgis-focus-region-inner-border-color": "*";
+  /** _Since 5.2_ Specifies the border width of the focus region. */
+  "--arcgis-focus-region-border-width": "*";
 }
 }
 
@@ -404,7 +413,7 @@ export abstract class ArcgisMap extends LitElement {
   accessor constraints: MapViewConstraints;
   /**
    * Indicates whether a layer's `displayFilterInfo` is honored when rendering layers in the view.
-   * If `false`, display filters are ignored and all features are rendered.
+   * If `true`, display filters are ignored and all features are rendered.
    *
    * @default false
    */
@@ -448,6 +457,38 @@ export abstract class ArcgisMap extends LitElement {
    * It can filter the map display on floor-aware layers by zero or more level IDs.
    */
   accessor floors: Collection<string>;
+  /**
+   * The screen rectangle of the active focus region, or `null` when [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) is `false`.
+   * This screen rectangle represents the area of the view that is currently in focus and can be used with methods that require a screen rectangle as input, such as `hitTest()`.
+   *
+   * | Action | Keyboard Shortcut / Property |
+   * |--------|----------------------------|
+   * | Enable or disable focus region | Use the `Shift` + `Alt`/`Option` + `O` keyboard shortcut while the view component is in focus or set the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) property to `true` or `false`. |
+   * | Resize focus region | Use the `Shift` + `Alt`/`Option` + Up/Down arrow keys while the focus region is enabled. |
+   * | Open the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) for features in the focus region | Press `Enter` or `Spacebar` while the focus region is enabled. |
+   *
+   * **Notes:** 
+   * - To know when this focus region is selected, listen for the [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect) event. The default behavior of the popup component opening with features in the focus region can be prevented by calling `event.preventDefault()` within the event handler.
+   * - The styling of the focus region can be customized using the [--arcgis-focus-region-outer-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-outer-border-color), [--arcgis-focus-region-inner-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-inner-border-color), and [--arcgis-focus-region-border-width](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-border-width) CSS variables.
+   * -  When the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) is `true`, the opened [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
+   *
+   * @since 5.2
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect)
+   */
+  get focusRegion(): MapView["focusRegion"];
+  /**
+   * Indicates whether the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) is enabled. Set this property to `true` to show the centered focus region, or `false` to hide it.
+   * The focus region can also be enabled/disabled by focusing on the ArcgisMap component and pressing the `Shift` + `Alt`/`Option` + `O` keyboard shortcut.
+   *
+   * **Note:** When the focus region is enabled, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
+   *
+   * @default false
+   * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect)
+   */
+  accessor focusRegionEnabled: boolean;
   /** Gamepad input specific configuration settings. */
   get gamepad(): GamepadSettings;
   /**
@@ -631,7 +672,7 @@ export abstract class ArcgisMap extends LitElement {
   /** An instance of a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) object to display in the view. */
   accessor map: Map | null | undefined;
   /**
-   * Indication whether the view is being navigated (for example when panning).
+   * Indicates whether the view is being navigated (for example when panning).
    *
    * @default false
    */
@@ -658,6 +699,14 @@ export abstract class ArcgisMap extends LitElement {
    * ```
    */
   accessor navigation: Navigation;
+  /**
+   * Configures snapping, tooltips, and measurement units for supported components and analyses configured to inherit these options from the view.
+   * See [ViewOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/) for details.
+   *
+   * @since 5.2
+   * @beta
+   */
+  accessor options: ViewOptions;
   /**
    * Padding to make the map's center and extent work off a
    * subsection of the full map. This is particularly useful when layering UI
@@ -672,6 +721,7 @@ export abstract class ArcgisMap extends LitElement {
    *
    * By default, the `popup` property is an empty object that allows you to set the popup options. A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) instance is automatically created and assigned to the view's [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) when the user clicks on the view and [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/views/PopupView/#popupEnabled) is `true`, when the [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#openPopup) method is called, or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/). If [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) is `null`, the popup instance will not be created.
    *
+   * @deprecated since 5.2, use [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) instead. Set the [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled) property to `true` to enable the popup component.
    * @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement)
    * @see [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupDisabled)
    * @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#openPopup)
@@ -829,7 +879,7 @@ export abstract class ArcgisMap extends LitElement {
    * reference. The [scale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#scale) and [rotation](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#rotation) properties are adjusted to keep the content of the map at the same size and orientation on screen.
    * * To ensure [TileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/TileLayer/) and
    * [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/)
-   * are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap) correctly, the spatialReference of the view must be set match their
+   * are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap) correctly, the spatialReference of the view must be set to match their
    * [tileInfo's](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) spatial reference.
    * * Switching spatial reference with an [imageCoordinateSystem](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#imageCoordinateSystem)
    * is not supported.
@@ -868,7 +918,7 @@ export abstract class ArcgisMap extends LitElement {
    */
   accessor spatialReferenceLocked: boolean;
   /**
-   * Indication whether the view is animating, being navigated with or resizing.
+   * Indicates whether the view is animating, being navigated with or resizing.
    *
    * @default false
    */
@@ -1010,7 +1060,8 @@ export abstract class ArcgisMap extends LitElement {
    * const viewElement = document.querySelector("arcgis-map");
    * // Get viewElement's click event
    * viewElement.addEventListener("arcgisViewClick", async (event) => {
-   *   const generator = await viewElement.fetchPopupFeatures(event.detail.screenPoint, {
+   *   const screenPoint = { x: event.detail.x, y: event.detail.y };
+   *   const generator = await viewElement.fetchPopupFeatures(screenPoint, {
    *     pointerType: event.detail.pointerType
    *   });
    *   // Access the features returned from the generator
@@ -1023,7 +1074,7 @@ export abstract class ArcgisMap extends LitElement {
    * ```js
    * // Wait for all the features to be available
    * view.on("click", async (event) => {
-   *   const generator = view.fetchPopupFeatures(event.screenPoint, {
+   *   const generator = view.fetchPopupFeatures({ x: event.x, y: event.y }, {
    *     pointerType: event.pointerType
    *   });
    *
@@ -1059,7 +1110,7 @@ export abstract class ArcgisMap extends LitElement {
    * Release-specific changes:
    * * At version 5.1, **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** support was added for [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect), allowing hit tests across rectangular screen areas.
    * * At version 4.24, [ViewHitTestResult](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) returns an array of objects containing [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) graphic, [MediaHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#MediaHit) media element, and [RouteHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RouteHit) route.
-   * * At version 4.23, all hit test features from feature layers are returned in the result. In prior releases, only the top most feature was returned.
+   * * At version 4.23, all hit test features from feature layers are returned in the result. In prior releases, only the topmost feature was returned.
    *
    * @param hitTarget
    * @param options
@@ -1283,6 +1334,30 @@ export abstract class ArcgisMap extends LitElement {
   readonly arcgisViewDoubleTapDrag: import("@arcgis/lumina").TargetedEvent<this, DoubleTapDragEvent>;
   /** Fires during a pointer drag on the view. */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
+  /**
+   * Fires when the focus region is selected using the `Enter` or `Space` key. Use this event to react to the selection of the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) via keyboard input and perform any necessary actions based on that selection, such as performing a `hitTest()` on the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) and passing the returned graphics to the [selectionManager](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#selectionManager).
+   *           
+   * Call `event.detail.preventDefault()` to suppress the default behavior of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) opening with the features in the focus region.
+   *
+   * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion)
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled)
+   * @example
+   * ```js
+   * viewElement.addEventListener("arcgisViewFocusRegionSelect", async (event) => {
+   *   // prevent the default popup from appearing
+   *   event.detail.preventDefault();
+   *   // get the focus region and fetch the popup features for it
+   *   const focusRegion = viewElement.focusRegion;
+   *   const generator = await viewElement.fetchPopupFeatures(focusRegion, {
+   *     pointerType: event.detail.pointerType,
+   *   });
+   *   // process the features as needed
+   *   const features = await Array.fromAsync(generator);
+   * });
+   * ```
+   */
+  readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /** Fires after holding either a mouse button or a single finger on the view for a short amount of time. */
   readonly arcgisViewHold: import("@arcgis/lumina").TargetedEvent<this, HoldEvent>;
   /**
@@ -1414,6 +1489,7 @@ export abstract class ArcgisMap extends LitElement {
     arcgisViewDoubleClick: ArcgisMap["arcgisViewDoubleClick"]["detail"];
     arcgisViewDoubleTapDrag: ArcgisMap["arcgisViewDoubleTapDrag"]["detail"];
     arcgisViewDrag: ArcgisMap["arcgisViewDrag"]["detail"];
+    arcgisViewFocusRegionSelect: ArcgisMap["arcgisViewFocusRegionSelect"]["detail"];
     arcgisViewHold: ArcgisMap["arcgisViewHold"]["detail"];
     arcgisViewImmediateClick: ArcgisMap["arcgisViewImmediateClick"]["detail"];
     arcgisViewImmediateDoubleClick: ArcgisMap["arcgisViewImmediateDoubleClick"]["detail"];