@arcgis/lumina 4.34.0-next.67 → 4.34.0-next.69

package/dist/{Controller-ik0igmGm.js → Controller-ftAEcdmI.js}

@@ -6,7 +6,7 @@ const trackPropertyKey = (object, onResolved, defaultValue) => {
   const keys = Object.keys(object);
   const keyCount = keys.length;
   if (keyTrackMap === void 0) {
-    queueMicrotask(keyTrackResolve);
+    queueMicrotask(propertyTrackResolve);
   }
   keyTrackMap ??= /* @__PURE__ */ new Map();
   let pendingTrackers = keyTrackMap.get(object);
@@ -33,7 +33,7 @@ const trackPropertyKey = (object, onResolved, defaultValue) => {
   return defaultValue;
 };
 let keyTrackMap = void 0;
-const keyTrackResolve = () => {
+const propertyTrackResolve = () => {
   keyTrackMap?.forEach(({ callbacks }, object) => {
     const keys = Object.keys(object);
     callbacks.forEach((commit) => commit(keys));
@@ -93,7 +93,7 @@ const createEventFactory = (eventName = "", options = {}, component = retrieveCo
         console.warn(`Trying to emit an ${eventName} event on a disconnected element ${component.el.localName}`);
       }
       if (eventName === "") {
-        keyTrackResolve();
+        propertyTrackResolve();
         if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && eventName === "") {
           throw new Error("Unable to resolve event name from property name");
         }
@@ -456,6 +456,6 @@ export {
   trackPropertyKey as b,
   createEvent as c,
   trackPropKey as d,
-  keyTrackResolve as k,
+  propertyTrackResolve as p,
   trackKey as t
 };

package/dist/controllers/accessor/index.js

@@ -1,8 +1,8 @@
 import { isEsriInternalEnv } from "@arcgis/toolkit/error";
 import { r as retrieveComponent } from "../../ControllerInternals-CWQrfEA8.js";
 import { on, watch } from "@arcgis/core/core/reactiveUtils.js";
-import { a as createEventFactory, G as GenericController, d as trackPropKey, t as trackKey } from "../../Controller-ik0igmGm.js";
-import { p as proxyExports } from "../../proxyExports-Ch_IR1V2.js";
+import { a as createEventFactory, G as GenericController, d as trackPropKey, t as trackKey } from "../../Controller-ftAEcdmI.js";
+import { p as proxyExports } from "../../proxyExports-D906TEtL.js";
 import { createObservable, trackAccess } from "@arcgis/core/applications/Components/reactiveUtils.js";
 import { property, subclass } from "@arcgis/core/core/accessorSupport/decorators.js";
 import Accessor from "@arcgis/core/core/Accessor.js";

package/dist/controllers/index.d.ts

@@ -3,7 +3,7 @@ export type { GenericControllerType } from './Controller';
 export { Controller, GenericController } from './Controller';
 export type { ControllerManager } from './ControllerManager';
 export { retrieveComponent, bypassSetter, bypassReadOnly } from './ControllerInternals';
-export { trackPropertyKey, keyTrackResolve } from './trackPropertyKey';
+export { trackPropertyKey, propertyTrackResolve } from './trackPropertyKey';
 export { trackPropKey } from './trackPropKey';
 export { trackKey } from './trackKey';
 export { makeController, makeGenericController } from './functional';
@@ -22,3 +22,7 @@ export { isController, getControllersCount } from './utils';
  * @deprecated import from "@arcgis/lumina" instead
  */
 export type EventEmitter<T = undefined> = _EventEmitter<T>;
+/**
+ * @deprecated Let us know if someone is using this
+ */
+export declare const keyTrackResolve: () => void;

package/dist/controllers/index.js

@@ -1,8 +1,8 @@
-import { C as Controller, t as trackKey, a as createEventFactory } from "../Controller-ik0igmGm.js";
-import { G, k, d, b } from "../Controller-ik0igmGm.js";
+import { C as Controller, t as trackKey, a as createEventFactory, p as propertyTrackResolve } from "../Controller-ftAEcdmI.js";
+import { G, d, b } from "../Controller-ftAEcdmI.js";
 import { s as setAmbientComponent, i as isPromise, b as setParentController, d as retrieveParentControllers, r as retrieveComponent } from "../ControllerInternals-CWQrfEA8.js";
 import { f, e, c, h, g } from "../ControllerInternals-CWQrfEA8.js";
-import { p as proxyExports } from "../proxyExports-Ch_IR1V2.js";
+import { p as proxyExports } from "../proxyExports-D906TEtL.js";
 import { isServer } from "lit";
 import { isEsriInternalEnv } from "@arcgis/toolkit/error";
 import { observeAncestorsMutation, getElementAttribute } from "@arcgis/toolkit/dom";
@@ -248,6 +248,7 @@ const propertyChangeController = (...toWatch) => {
   }
   return eventEmitter;
 };
+const keyTrackResolve = propertyTrackResolve;
 export {
   Controller,
   G as GenericController,
@@ -256,11 +257,12 @@ export {
   c as controllerSymbol,
   h as getControllersCount,
   g as isController,
-  k as keyTrackResolve,
+  keyTrackResolve,
   load,
   makeController,
   makeGenericController,
   makeT9nController,
+  propertyTrackResolve,
   proxyExports,
   retrieveComponent,
   toFunction,

package/dist/controllers/trackPropertyKey.d.ts

@@ -26,4 +26,4 @@ export declare const trackPropertyKey: <T>(object: BaseController | LitElement,
  * property you are trying to resolve had it's default value set, thus after
  * constructor. At the start of connectedCallback is a perfect place.
  */
-export declare const keyTrackResolve: () => void;
+export declare const propertyTrackResolve: () => void;

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export type { Runtime, RuntimeOptions, DevOnlyGlobalRuntime, DevOnlyGlobalCompon
 export { makeRuntime } from './makeRuntime';
 export type { EventHandler } from './jsx/baseTypes';
 export * from './jsx/types';
-export { safeClassMap, safeStyleMap, deferLoad, deferredLoaders, directive, live } from './jsx/directives';
+export { safeClassMap, safeStyleMap, deferLoad, deferredLoaders, stabilizedRef, directive, live, } from './jsx/directives';
 export { nothing, noChange, setAttribute, stringOrBoolean } from './jsx/utils';
 export { noShadowRoot, devOnly$getLitElementTagNameAndRuntime } from './utils';
 export { makeReactWrapperFactory, getReactWrapperOptions } from './wrappersUtils';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { G as GenericController, k as keyTrackResolve } from "./Controller-ik0igmGm.js";
-import { c } from "./Controller-ik0igmGm.js";
+import { G as GenericController, p as propertyTrackResolve } from "./Controller-ftAEcdmI.js";
+import { c } from "./Controller-ftAEcdmI.js";
 import { state } from "@lit/reactive-element/decorators/state.js";
 import { property as property$1 } from "@lit/reactive-element/decorators/property.js";
 import { e as emptyFunction, n as noShadowRoot, a as attachToAncestor } from "./lazyLoad-B6Te7FRR.js";
@@ -14,6 +14,7 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { directive as directive$1, Directive } from "lit-html/directive.js";
 import { live as live$1 } from "lit-html/directives/live.js";
+import { ref } from "lit/directives/ref.js";
 import { nothing as nothing$2, noChange as noChange$2, render } from "lit-html";
 const property = property$1;
 const method = void 0;
@@ -47,7 +48,7 @@ class ControllerManager extends GenericController {
         if (this.#autoDestroyTimeout !== void 0) {
           clearTimeout(this.#autoDestroyTimeout);
         }
-        keyTrackResolve();
+        propertyTrackResolve();
         for (const controller of component.M) {
           if ("triggerConnected" in controller) {
             controller.triggerConnected();
@@ -321,6 +322,7 @@ class LitElement extends LitElement$1 {
           this.#observables?.get(name)?.notify();
         }
         if (manager.T.length > 0) {
+          propertyTrackResolve();
           manager?.S(name, rawNewValue);
         }
       }
@@ -581,6 +583,25 @@ class DeferLoad extends Directive {
 }
 const deferLoad = /* @__PURE__ */ directive$1(DeferLoad)();
 const deferredLoaders = /* @__PURE__ */ new Map();
+class StabilizedRef extends Directive {
+  #refValue;
+  #callback;
+  constructor(partInfo) {
+    super(partInfo);
+    const that = this;
+    this.#callback = function ref2(element) {
+      return that.#refValue.call(this, element);
+    };
+  }
+  render(refValue) {
+    if (typeof refValue === "function") {
+      this.#refValue = refValue;
+      return ref(this.#callback);
+    }
+    return ref(refValue);
+  }
+}
+const stabilizedRef = directive$1(StabilizedRef);
 const directive = directive$1;
 const live = live$1;
 const nothing = nothing$2;
@@ -669,6 +690,7 @@ export {
   safeClassMap,
   safeStyleMap,
   setAttribute,
+  stabilizedRef,
   state,
   stringOrBoolean
 };

package/dist/jsx/directives.d.ts

@@ -4,8 +4,10 @@ import { ClassInfo } from 'lit-html/directives/class-map.js';
 import { DirectiveResult } from 'lit/directive.js';
 import { ClassMapDirective } from 'lit/directives/class-map.js';
 import { StyleMapDirective } from 'lit/directives/style-map.js';
-import { DirectiveClass, ElementPart, Directive } from 'lit-html/directive.js';
+import { DirectiveClass, ElementPart, PartInfo, Directive } from 'lit-html/directive.js';
 import { noChange } from 'lit';
+import { CustomAttributes } from './baseTypes';
+import { RefDirective } from 'lit/directives/ref.js';
 /**
  * You likely won't have to import this directly. It will be added during
  * _JSX to lit-html_ conversion.
@@ -72,6 +74,32 @@ export declare const deferLoad: DirectiveResult<typeof DeferLoad>;
  * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
  */
 export declare const deferredLoaders: Map<string, () => Promise<unknown>>;
+declare class StabilizedRef extends Directive {
+    #private;
+    constructor(partInfo: PartInfo);
+    render(refValue: CustomAttributes<Element>["ref"]): DirectiveResult<typeof RefDirective>;
+}
+/**
+ * Because of how Lit's ref() works, there are two requirements on ref
+ * function:
+ * - It must be stable between re-renders (else Lit will call it twice on each
+ *   render() - with undefined and then with element)
+ * - Each element must have a unique instance of this function - if two
+ *   elements share the same ref function, on each render Lit will call
+ *   it multiple times (undefined, element1, undefined, element2)
+ *
+ * The `stabilizedRef` directive resolves both of these requirements by creating
+ * a stable wrapper function for the ref callback.
+ *
+ * @private
+ * Lumina will insert this directive automatically when the `ref` JSX prop is
+ * authored in a way that clearly creates a new function on each render:
+ * ```tsx
+ * <my-component ref={(el) => this.myComponent = el} />
+ * <my-component ref={this.callback.bind(this, index)} />
+ * ```
+ */
+export declare const stabilizedRef: <T extends Element>(refValue: CustomAttributes<T>["ref"]) => DirectiveResult<typeof StabilizedRef>;
 /**
  * Creates a user-facing directive function from a Directive class. This
  * function has the same parameters as the directive's render() method.

package/dist/{proxyExports-Ch_IR1V2.js → proxyExports-D906TEtL.js}

@@ -1,5 +1,5 @@
 import { b as setParentController, d as retrieveParentControllers, j as setAmbientChildController, f as bypassReadOnly } from "./ControllerInternals-CWQrfEA8.js";
-import { t as trackKey } from "./Controller-ik0igmGm.js";
+import { t as trackKey } from "./Controller-ftAEcdmI.js";
 const proxyExports = (Class) => (...args) => {
   const ambientControllers = retrieveParentControllers();
   const instance = new Class(...args);

package/dist/render.d.ts

@@ -1,5 +1,11 @@
 import { JsxNode } from './jsx/types';
 /**
  * Retrieve an HTML element to be manually appended to an existing component.
+ *
+ * @example
+ * ```ts
+ * const fullScreen = renderElement(<arcgis-fullscreen />);
+ * document.body.appendChild(fullScreen);
+ * ```
  */
 export declare const renderElement: <Element extends HTMLElement = HTMLElement>(element: JsxNode) => Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.34.0-next.67",
+  "version": "4.34.0-next.69",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@arcgis/toolkit": "4.34.0-next.67",
+    "@arcgis/toolkit": "4.34.0-next.69",
     "csstype": "^3.1.3",
     "tslib": "^2.8.1"
   },