@arcgis/map-components 5.2.0-next.134 → 5.2.0-next.136

package/dist/chunks/useArcgisViewReadyError.js

@@ -1,91 +1,106 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { html as b } from "lit";
-import { initializeProjection as w } from "@arcgis/core/applications/Components/featureUtils.js";
-import { signal as g } from "@arcgis/core/applications/Components/reactiveUtils.js";
-import { when as v, watch as s } from "@arcgis/core/core/reactiveUtils.js";
-import m from "@arcgis/core/geometry/Point.js";
-import P from "@arcgis/core/Graphic.js";
-import { GenericController as y, useDirection as _, makeController as S, makeGenericController as f } from "@arcgis/lumina/controllers";
-import { getSlotAssignedElements as C } from "@arcgis/toolkit/dom/slots";
-import { whenOrAbort as R } from "@arcgis/toolkit/promise";
-import { createRef as A } from "lit/directives/ref.js";
-import { c as L, S as F } from "./slots.js";
-import { observeAncestorsMutation as G, unsafeGetCalciteModeName as O } from "@arcgis/toolkit/dom";
-import { createEvent as d } from "@arcgis/lumina";
-async function* M(n, o) {
-  for (const e of n) {
-    const t = await R(e, o).catch(() => {
+import { html as O } from "lit";
+import { initializeProjection as S } from "@arcgis/core/applications/Components/featureUtils.js";
+import { signal as R } from "@arcgis/core/applications/Components/reactiveUtils.js";
+import { when as A, watch as c } from "@arcgis/core/core/reactiveUtils.js";
+import P from "@arcgis/core/geometry/Point.js";
+import F from "@arcgis/core/Graphic.js";
+import { GenericController as L, useDirection as G, makeController as M, makeGenericController as _ } from "@arcgis/lumina/controllers";
+import { getSlotAssignedElements as V } from "@arcgis/toolkit/dom/slots";
+import { whenOrAbort as y } from "@arcgis/toolkit/promise";
+import { createRef as D } from "lit/directives/ref.js";
+import { c as k, S as x } from "./slots.js";
+import { i as T, t as H } from "./async-utils.js";
+import { observeAncestorsMutation as j, unsafeGetCalciteModeName as q } from "@arcgis/toolkit/dom";
+import { createEvent as C } from "@arcgis/lumina";
+async function* U(i, t) {
+  for (const e of i) {
+    const o = await y(e, t).catch(() => {
     });
-    if (o.aborted)
+    if (t.aborted)
       return;
-    yield* Array.isArray(t) ? t.filter((i) => i instanceof P) : [];
+    yield* Array.isArray(o) ? o.filter((r) => r instanceof F) : [];
   }
 }
-async function* V(n, o, e, t) {
-  let i;
-  e instanceof m ? (await w(e.spatialReference, n.spatialReference), i = n.toScreen(e)) : i = e;
-  const p = i ? n.fetchPopupFeatures(i, {
-    ...t,
-    defaultPopupTemplateEnabled: o.defaultPopupTemplateEnabled
-  }) : void 0;
-  p && (yield* p);
+async function* v() {
+  yield* [];
 }
-function u(n, o) {
-  if (o instanceof m)
-    return o;
-  const e = "width" in o ? { x: o.x + o.width / 2, y: o.y + o.height / 2 } : o;
-  return n.toMap(e) ?? void 0;
+async function* K(i, t) {
+  await y(i, t).catch(() => {
+  });
+}
+async function N(i, t, e, o) {
+  let r;
+  if (e instanceof P ? (await S(e.spatialReference, i.spatialReference), H(o.signal), r = i.toScreen(e)) : r = e, !r)
+    return v();
+  const n = Promise.withResolvers(), a = i.fetchPopupFeatures(r, {
+    ...o,
+    defaultPopupTemplateEnabled: t.defaultPopupTemplateEnabled,
+    hitTestResolver: n
+  }) ?? v();
+  return await n.promise, a;
+}
+function d(i, t) {
+  if (t instanceof P)
+    return t;
+  const e = "width" in t ? { x: t.x + t.width / 2, y: t.y + t.height / 2 } : t;
+  return i.toMap(e) ?? void 0;
 }
-function D(n, o, e, t) {
-  const i = {};
+async function $(i, t, e, o) {
+  const r = {};
   return {
-    diagnostics: i,
-    featureStream: V(n, o, e, {
-      diagnostics: i,
-      signal: t
+    diagnostics: r,
+    featureStream: await N(i, t, e, {
+      diagnostics: r,
+      signal: o
     }),
-    location: u(n, e)
+    location: d(i, e)
   };
 }
-class J extends y {
+class ne extends L {
   //#endregion
   //#region Lifecycle
-  constructor(o) {
-    super(o), this.direction = _(), this.popupRef = A(), this._popupElement = g(void 0), this._popupAbortController = null, this.slotGroupRefs = L(), this.attributionHeight = 0, this._uiContainer = null, this.component.listenOn(globalThis, "unhandledrejection", (e) => {
-      const t = e.reason;
-      if (t?.name === "webgl:required") {
-        const { name: i } = t;
-        this.webGLError = { name: i };
+  constructor(t) {
+    super(t), this.direction = G(), this.popupRef = D(), this._popupElement = R(void 0), this._popupAbortController = null, this._popupClickOpenCount = 0, this.slotGroupRefs = k(), this.attributionHeight = 0, this._uiContainer = null, this.component.listenOn(globalThis, "unhandledrejection", (e) => {
+      const o = e.reason;
+      if (o?.name === "webgl:required") {
+        const { name: r } = o;
+        this.webGLError = { name: r };
       }
     });
   }
   get popupElement() {
     return this._popupElement.value;
   }
-  set popupElement(o) {
-    this._popupElement.value = o;
+  set popupElement(t) {
+    this._popupElement.value = t;
   }
   //#endregion
   //#region Private Methods
   hostLifecycle() {
     return [
-      v(() => this.component.view.ready, () => {
+      A(() => this.component.view.ready, () => {
         this._assignDefaultPopup();
       }),
-      s(() => this.component.view.popup?.visible, (e, t) => {
-        (e || t) && this._cancelPopupOperation(), e && this.popupElement?.open && (this.popupElement.open = !1);
+      c(() => this.component.view.popup?.visible, (e, o) => {
+        (e || o) && this._cancelPopupOperation(), e && this.popupElement?.open && (this.popupElement.open = !1);
       }, { initial: !0 }),
-      // Cancel the closing operation before openPopup() installs its replacement.
-      s(() => this.component.popupElement?.open, (e, t) => {
-        t && !e && this._cancelPopupOperation();
-      }, { initial: !0, sync: !0 }),
+      c(
+        () => this.component.popupElement?.open,
+        (e, o) => {
+          o && !e && this._cancelPopupOperation();
+        },
+        // Using sync to preemptively prevent a close notification from canceling a replacement operation.
+        { initial: !0, sync: !0 }
+      ),
       this.component.view.on("focus-region-select", (e) => this._handleFocusRegionSelect(e)),
       this.component.view.on(
         "click",
         [],
         (e) => {
-          const t = e.native;
-          e.button !== 0 || t?.ctrlKey || t?.metaKey || this._handleOpenPopup(e);
+          const o = e.native;
+          e.button !== 0 || o?.ctrlKey || o?.metaKey || this._handleOpenPopup(e).catch(() => {
+          });
         },
         // @ts-ignore: Core supports a click listener priority argument, needed for Popup click
         -2
@@ -95,22 +110,46 @@ class J extends y {
   hostDestroy() {
     this._cancelPopupOperation();
   }
-  async openPopup(o = {}) {
-    this._assignDefaultPopup(), this.closePopup();
-    const e = new AbortController();
-    if (this._popupAbortController = e, this.popupElement) {
-      if (await this.popupElement.componentOnReady(), e.signal.aborted)
+  async openPopup(t = {}) {
+    this._assignDefaultPopup();
+    const e = this.popupElement, o = t.location ?? e?.location, r = !!e && !t.featureStream && !t.promises?.length && !!t.fetchFeatures && !!o;
+    r ? (this._cancelPopupOperation(), this.component.view.closePopup()) : this.closePopup();
+    const n = new AbortController();
+    if (this._popupAbortController = n, e) {
+      const { fetchFeatures: a, shouldFocus: h, title: u, featureStream: w, promises: b, location: l, ...E } = t, m = l ? d(this.component.view, l) : void 0, g = l ?? o, p = r && g ? $(this.component.view, e, g, n.signal) : null, f = p ? Promise.withResolvers() : null;
+      p && f && (p.catch(() => {
+      }), e.featureStream = K(f.promise, n.signal));
+      try {
+        await e.componentOnReady();
+      } catch (s) {
+        throw p && this._isCurrentPopupOperation(n) && (n.abort(), e.open = !1, await e.clear()), s;
+      }
+      if (!this._isCurrentPopupOperation(n))
         return;
-      const { fetchFeatures: t, shouldFocus: i, title: p, featureStream: l, promises: h, location: r, ...E } = o, a = r ? u(this.component.view, r) : void 0, c = r ?? this.popupElement.location;
-      Object.assign(this.popupElement, E), p !== void 0 && (this.popupElement.heading = p), l ? await this.popupElement.openFeatureStream({ featureStream: l, location: a }) : h?.length ? await this.popupElement.openFeatureStream({
-        featureStream: M(h, e.signal),
-        location: a
-      }) : t && c ? await this.popupElement.openFeatureStream(D(this.component.view, this.popupElement, c, e.signal)) : (this.popupElement.featureStream = null, r !== void 0 && (this.popupElement.location = a), this.popupElement.open = !0), i && !e.signal.aborted && await this.popupElement.setFocus();
+      if (p)
+        try {
+          const s = await p;
+          if (!this._isCurrentPopupOperation(n))
+            return;
+          Object.assign(e, E), u !== void 0 && (e.heading = u), await e.openFeatureStream(s);
+        } catch (s) {
+          if (!T(s))
+            throw this._isCurrentPopupOperation(n) && (e.open = !1, await e.clear()), s;
+          return;
+        } finally {
+          f?.resolve();
+        }
+      else
+        Object.assign(e, E), u !== void 0 && (e.heading = u), w ? await e.openFeatureStream({ featureStream: w, location: m }) : b?.length ? await e.openFeatureStream({
+          featureStream: U(b, n.signal),
+          location: m
+        }) : (e.featureStream = null, l !== void 0 && (e.location = m), e.open = !0);
+      h && this._isCurrentPopupOperation(n) && await e.setFocus();
     } else {
-      const { location: t, ...i } = o;
+      const { location: a, ...h } = t;
       await this.component.view.openPopup({
-        ...i,
-        location: t ? u(this.component.view, t) : void 0
+        ...h,
+        location: a ? d(this.component.view, a) : void 0
       });
     }
   }
@@ -120,12 +159,15 @@ class J extends y {
   _cancelPopupOperation() {
     this._popupAbortController?.abort(), this._popupAbortController = null;
   }
+  _isCurrentPopupOperation(t) {
+    return this._popupAbortController === t && !t.signal.aborted;
+  }
   _assignDefaultPopup() {
     this.popupRef.value && !this.popupElement && (this.popupElement = this.popupRef.value, this.popupElement.referenceElement = this.component.el, this.popupElement.view = this.component.view);
   }
-  handleAttributionHeightChange(o) {
-    if (!(this.attributionHeight === o || !this.component.el.shadowRoot)) {
-      if (this.attributionHeight = o, !this._uiContainer) {
+  handleAttributionHeightChange(t) {
+    if (!(this.attributionHeight === t || !this.component.el.shadowRoot)) {
+      if (this.attributionHeight = t, !this._uiContainer) {
         const e = this.component.el.shadowRoot.querySelector(".arcgis-map-container-ui");
         this._uiContainer = e;
       }
@@ -133,90 +175,91 @@ class J extends y {
     }
   }
   _maybeDisableViewPopup() {
-    this.component.view && (this.component.popupComponentEnabled || this.popupElement) && (this.previousViewPopupEnabled = this.component.view.popupEnabled, this.component.view.popupEnabled = !1);
+    this.component.view && (this.component.popupComponentEnabled || this.popupElement) && (this.previousViewPopupEnabled ??= this.component.view.popupEnabled, this.component.view.popupEnabled = !1);
   }
   _maybeResetViewPopup() {
     this.component.view && this.previousViewPopupEnabled !== void 0 && (this.component.view.popupEnabled = this.previousViewPopupEnabled, this.previousViewPopupEnabled = void 0);
   }
-  async _handleOpenPopup(o) {
+  async _handleOpenPopup(t) {
     if (this._assignDefaultPopup(), !this.component.popupDisabled) {
-      this._maybeDisableViewPopup();
+      this._popupClickOpenCount++, this._maybeDisableViewPopup();
       try {
         this.popupElement && await this.openPopup({
           fetchFeatures: !0,
-          location: { x: o.x, y: o.y }
+          location: { x: t.x, y: t.y }
         });
       } finally {
-        this._maybeResetViewPopup();
+        this._popupClickOpenCount--, this._popupClickOpenCount || this._maybeResetViewPopup();
       }
     }
   }
-  _handleFocusRegionSelect(o) {
+  _handleFocusRegionSelect(t) {
     queueMicrotask(() => {
       const { focusRegion: e } = this.component.view;
-      !o.defaultPrevented && e && this.openPopup({ fetchFeatures: !0, location: e });
+      !t.defaultPrevented && e && this.openPopup({ fetchFeatures: !0, location: e }).catch(() => {
+      });
     });
   }
-  _handlePopupSlotChange(o) {
-    const e = C(o.target, "arcgis-popup");
+  _handlePopupSlotChange(t) {
+    const e = V(t.target, "arcgis-popup");
     !this.popupElement && e.length ? this.popupElement = e[0] : e.length || (this.popupElement = void 0);
   }
   _webGLErrorAlert() {
-    return this.webGLError ? b`<arcgis-webgl-error .errorName=${this.webGLError.name}></arcgis-webgl-error>` : null;
+    return this.webGLError ? O`<arcgis-webgl-error .errorName=${this.webGLError.name}></arcgis-webgl-error>` : null;
   }
   //#endregion
   //#region Rendering
   render() {
-    return F({ direction: this.direction, popupComponentEnabled: this.component.popupComponentEnabled, slotGroupRefs: this.slotGroupRefs, handlePopupSlotChange: (o) => this._handlePopupSlotChange(o), webGLErrorElement: this._webGLErrorAlert(), popupElement: this.popupRef });
+    return x({ direction: this.direction, popupComponentEnabled: this.component.popupComponentEnabled, slotGroupRefs: this.slotGroupRefs, handlePopupSlotChange: (t) => this._handlePopupSlotChange(t), webGLErrorElement: this._webGLErrorAlert(), popupElement: this.popupRef });
   }
 }
-function Q(n) {
-  S((o, e) => {
-    const t = () => {
-      if (n.attributionMode !== "auto")
+function pe(i) {
+  M((t, e) => {
+    const o = () => {
+      if (i.attributionMode !== "auto")
         return;
-      const i = O(n.el);
-      n.view.attributionMode !== i && (n.view.attributionMode = i);
+      const r = q(i.el);
+      i.view.attributionMode !== r && (i.view.attributionMode = r);
     };
-    e.onLifecycle(() => (t(), G(n.el, ["class"], t))), e.onUpdate((i) => {
-      i.has("attributionMode") && n.attributionMode === "auto" && t();
+    e.onLifecycle(() => (o(), j(i.el, ["class"], o))), e.onUpdate((r) => {
+      r.has("attributionMode") && i.attributionMode === "auto" && o();
     });
   });
 }
-const W = f((n, o) => {
-  const e = d();
-  return o.onLifecycle(
-    () => s(
+const se = _((i, t) => {
+  const e = C();
+  return t.onLifecycle(
+    () => c(
       () => {
-        const { map: t } = n;
-        if (!t || t.destroyed)
+        const { map: o } = i;
+        if (!o || o.destroyed)
           return [];
-        const i = [];
-        return t.loadError && i.push(t), t.basemap?.loadError && i.push(t.basemap), t.ground.loadError && i.push(t.ground), [...t.allLayers, ...t.allTables].forEach((p) => {
-          p.loadError && i.push(p);
-        }), i;
+        const r = [];
+        return o.loadError && r.push(o), o.basemap?.loadError && r.push(o.basemap), o.ground.loadError && r.push(o.ground), [...o.allLayers, ...o.allTables].forEach((n) => {
+          n.loadError && r.push(n);
+        }), r;
       },
-      (t) => {
-        t.length && (n.loadErrorSources = t, e.emit());
+      (o) => {
+        o.length && (i.loadErrorSources = o, e.emit());
       }
     )
   ), e;
-}), X = f(
-  (n, o) => {
-    const e = d();
-    return o.onLifecycle(
-      () => s(
-        () => n.view?.readyState,
-        (t) => {
-          (t === "map-content-error" || t === "rendering-error") && e.emit();
+}), ae = _(
+  (i, t) => {
+    const e = C();
+    return t.onLifecycle(
+      () => c(
+        () => i.view?.readyState,
+        (o) => {
+          (o === "map-content-error" || o === "rendering-error") && e.emit();
         }
       )
     ), e;
   }
 );
 export {
-  J as U,
-  X as a,
-  Q as b,
-  W as u
+  ne as U,
+  ae as a,
+  pe as b,
+  se as u
 };

package/dist/components/arcgis-features-next/customElement.d.ts

@@ -4,6 +4,7 @@ import type Collection from "@arcgis/core/core/Collection.js";
 import type ActionToggle from "@arcgis/core/support/actions/ActionToggle.js";
 import type Graphic from "@arcgis/core/Graphic.js";
 import type FeatureAbilities from "@arcgis/core/popup/support/FeatureAbilities.js";
+import type Point from "@arcgis/core/geometry/Point.js";
 import type Map from "@arcgis/core/Map.js";
 import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
 import type { ActionEvent } from "@arcgis/core/widgets/Popup/types.js";
@@ -398,6 +399,12 @@ export abstract class ArcgisFeaturesNext extends LitElement {
   accessor initialDisplayMode: InitialDisplayOptions;
   /** The component's default label. */
   accessor label: string | undefined;
+  /**
+   * The [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) representing the location of the map interaction used to trigger the opening of the component.
+   *
+   * @since 5.2
+   */
+  accessor location: Point | null | undefined;
   /**
    * A map is required when the input [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#features) have a popupTemplate that contains [Arcade](https://developers.arcgis.com/arcade) expressions in [ExpressionInfo](https://developers.arcgis.com/javascript/latest/references/core/popup/ExpressionInfo/) or [ExpressionContent](https://developers.arcgis.com/javascript/latest/references/core/popup/content/ExpressionContent/) that may use the `$map` profile variable to access data from layers within a map. Without a map, expressions that use `$map` will throw an error.
    *