@arcgis/lumina 4.33.0-next.10 → 4.33.0-next.101

package/dist/jsx/baseTypes.d.ts

@@ -1,5 +1,5 @@
-import type { DirectiveResult } from "lit-html/directive.js";
-import type { Ref } from "lit-html/directives/ref.js";
+import { DirectiveResult } from 'lit-html/directive.js';
+import { Ref } from 'lit-html/directives/ref.js';
 export type EventHandlerUnion<T, E extends Event> = (e: E & {
     currentTarget: T;
     target: Element;
@@ -21,15 +21,19 @@ export type EventHandler<E> = {
 }["bivarianceHack"];
 export interface CustomAttributes<T = HTMLElement> {
     /**
-     * The `key` is a special attribute that can be set on any element.
-     *
-     * At build-time it is translated into the `keyed()` directive:
-     * https://lit.dev/docs/templates/directives/#keyed
-     *
-     * @remarks
-     * Unlike in React or Stencil, any JavaScript value is acceptable as a key
+     * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#key-prop)
      */
     key?: unknown;
+    /**
+     * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#refs)
+     */
     ref?: EventHandler<T | undefined> | Ref<T>;
+    /**
+     * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#lit-directives)
+     */
     directives?: readonly DirectiveResult[];
+    /**
+     * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
+     */
+    deferLoad?: true;
 }

package/dist/jsx/directives.d.ts

@@ -1,10 +1,11 @@
-import type { Nil } from "@arcgis/components-utils";
-import type { Properties as CssProperties } from "csstype";
-import type { ClassInfo } from "lit-html/directives/class-map.js";
-import type { DirectiveResult } from "lit/directive.js";
-import type { ClassMapDirective } from "lit/directives/class-map.js";
-import type { StyleMapDirective } from "lit/directives/style-map.js";
-import type { DirectiveClass } from "lit-html/directive.js";
+import { Nil } from '@arcgis/components-utils';
+import { Properties as CssProperties } from 'csstype';
+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 { noChange } from 'lit';
 /**
  * You likely won't have to import this directly. It will be added during
  * _JSX to lit-html_ conversion.
@@ -55,6 +56,22 @@ export declare const safeClassMap: (parameters: ClassInfo | Nil | string) => Dir
  * @private
  */
 export declare const safeStyleMap: (parameters: CssProperties | Nil | string) => DirectiveResult<typeof StyleMapDirective> | Nil | string;
+declare class DeferLoad extends Directive {
+    update(part: ElementPart): void;
+    render(): typeof noChange;
+}
+/**
+ * @private
+ * Do not use this directive directly. Use the `deferLoad` JSX prop instead.
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
+ */
+export declare const deferLoad: DirectiveResult<typeof DeferLoad>;
+/**
+ * @private
+ * Do not use this directly. Use the `deferLoad` JSX prop instead.
+ * [Documentation](https://qawebgis.esri.com/components/lumina/jsx#deferring-web-component-load)
+ */
+export declare const deferredLoaders: Map<string, () => Promise<unknown>>;
 /**
  * Creates a user-facing directive function from a Directive class. This
  * function has the same parameters as the directive's render() method.
@@ -75,3 +92,4 @@ export declare const directive: <C extends DirectiveClass>(c: C) => (...values:
  * "never" to allow it be set as a value for any JSX attribute.
  */
 export declare const live: (value: unknown) => never;
+export {};

package/dist/jsx/generatedTypes.d.ts

@@ -1,13 +1,9 @@
-/**
- * Parts of this file are auto-generated or auto-updated by the `generate-jsx-types`
- * script.
- */
-import type { DirectiveResult } from "lit/directive.js";
-import type { ClassInfo, ClassMapDirective } from "lit/directives/class-map.js";
-import type { StyleMapDirective } from "lit/directives/style-map.js";
-import type { ChangeEventHandlerUnion, CustomAttributes, EventHandlerUnion, FocusEventHandlerUnion, InputEventHandlerUnion } from "./baseTypes";
-import type { JsxNode } from "./types";
-import type { Properties as CssProperties } from "csstype";
+import { DirectiveResult } from 'lit/directive.js';
+import { ClassInfo, ClassMapDirective } from 'lit/directives/class-map.js';
+import { StyleMapDirective } from 'lit/directives/style-map.js';
+import { ChangeEventHandlerUnion, CustomAttributes, EventHandlerUnion, FocusEventHandlerUnion, InputEventHandlerUnion } from './baseTypes';
+import { JsxNode } from './types';
+import { Properties as CssProperties } from 'csstype';
 /**
  * Some attributes accepts numbers as a number or as a string, while also
  * accepting "inherit". Define the type as `number | string | "inherit"` rather

package/dist/jsx/types.d.ts

@@ -1,15 +1,7 @@
-/**
- * This reference directive is removed by tsup at compile time. It is only
- * needed to correctly type-check this package. For consumers of this package,
- * they should have an `./src/lumina.ts` file like so:
- * ```ts
- * /// <reference types="@arcgis/lumina/typings" />
- * ```
- */
-import type { TemplateResult } from "lit-html";
-import type { DirectiveResult } from "lit-html/directive.js";
-import type { HTMLElementTags, HTMLAttributes, GlobalEventHandlersCamelCase, SvgElementTags, DOMAttributes, AriaAttributes } from "./generatedTypes";
-import type { CustomAttributes } from "./baseTypes";
+import { TemplateResult } from 'lit-html';
+import { DirectiveResult } from 'lit-html/directive.js';
+import { HTMLElementTags, HTMLAttributes, GlobalEventHandlersCamelCase, SvgElementTags, DOMAttributes, AriaAttributes } from './generatedTypes';
+import { CustomAttributes } from './baseTypes';
 /**
  * The "h" namespace is used to import JSX types for elements and attributes.
  * It is imported in order to avoid conflicting global JSX issues.
@@ -372,27 +364,8 @@ type FixupStencilEventCasing<PropertyName extends PropertyKey> = PropertyName ex
  * https://www.typescriptlang.org/docs/handbook/jsx.html
  */
 export declare namespace LuminaJsx {
-    /**
-     * Whether to pick TemplateResult or JsxNode here is a compromise.
-     *
-     * - If I tell it Lit JSX type is JsxNode, then even <a /> expression will
-     *   have a very broad JsxNode type (union of template results, null,
-     *   undefined, false, and more). This may slow down type-checking and may be
-     *   too-broad for certain use cases.
-     *   - Since <a /> would be typed very broad, you won't be able to declare
-     *     your function as receiving just TemplateResult
-     *   - Also, this makes TypeScript not allow you to return undefined from
-     *     your functional component
-     *   - This is what React did and what I am going with
-     * - If I tell TypeScript that JSX type is TemplateResult, then my function
-     *   component is no longer allowed to return undefined or string or etc.
-     *
-     * This is mainly a TypeScript limitation. Issues tracking this:
-     * - https://github.com/microsoft/TypeScript/issues/21699
-     * - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18912
-     *
-     */
     export type Element = TemplateResult;
+    export type ElementType = JsxNode;
     export interface ElementClass {
     }
     export interface ElementAttributesProperty {

package/dist/lazyLoad.d.ts

@@ -1,7 +1,7 @@
-import { Deferred } from "@arcgis/components-utils";
-import type { LitElement } from "./LitElement";
-import type { Runtime } from "./runtime";
-import type { ControllerManager } from "@arcgis/components-controllers";
+import { Deferred } from '@arcgis/components-utils';
+import { LitElement } from './LitElement';
+import { Runtime } from './makeRuntime';
+import { ControllerManager } from './controllers/ControllerManager';
 /**
  * Defines lazy-loading proxy components for all web components in this package.
  *
@@ -47,32 +47,32 @@ declare const HtmlElement: {
  * component, so as to have identical DOM structure for lazy vs non-lazy builds
  * (otherwise, css selectors may break)
  *
- * @internal
+ * @private
  */
 export declare abstract class ProxyComponent extends HtmlElement {
     static observedAttributes?: readonly string[];
-    /** @internal */
+    /** @private */
     static _loadPromise: Promise<Record<string, typeof LitElement>> | undefined;
-    /** @internal */
+    /** private */
     static _LitConstructor?: typeof LitElement;
     /**
      * A list of instances of this component. This allows hot module replacement
      * to update all proxy component to use a new LitElement instance.
      *
-     * @internal
+     * private
      */
     static _hmrInstances: WeakRef<ProxyComponent>[] | undefined;
-    /** @internal */
+    /** private */
     static _hmrIndex: number | undefined;
-    /** @internal */
+    /** private */
     static _properties?: readonly string[];
-    /** @internal */
+    /** private */
     static _asyncMethods?: readonly string[];
-    /** @internal */
+    /** private */
     static _syncMethods?: readonly string[];
     protected static _name: string;
     static readonly lumina = true;
-    /** @internal */
+    /** private */
     static _initializePrototype(): void;
     private static _bindProp;
     private static _bindAsync;
@@ -81,14 +81,14 @@ export declare abstract class ProxyComponent extends HtmlElement {
      * On HMR, preserve the values of all properties that at least once were set
      * by someone other than component itself.
      *
-     * @internal
+     * private
      */
     _hmrSetProps: Set<PropertyKey>;
-    /** @internal */
+    /** private */
     _hmrSetAttributes: Set<string>;
-    /** @internal */
+    /** private */
     _litElement: LitElement | undefined;
-    /** @internal */
+    /** private */
     _store: LitElement | Record<string, unknown>;
     /**
      * If attributeChangedCallback() is called before the LitElement is loaded,
@@ -153,7 +153,7 @@ export declare abstract class ProxyComponent extends HtmlElement {
      * Create a promise that resolves once component is fully loaded
      */
     componentOnReady(): Promise<this>;
-    /** @internal */
+    /** private */
     _initializeComponent(module: Record<string, typeof LitElement>): void;
     /**
      * Implemented on the proxy for compatibility with Lit Context.

package/dist/lifecycleSupport.d.ts

@@ -1,4 +1,4 @@
-import type { ProxyComponent } from "./lazyLoad";
+import { ProxyComponent } from './lazyLoad';
 /**
  * If there is a parent component, tell it to await it's loaded() until we
  * completed load().

package/dist/makeRuntime.d.ts

@@ -0,0 +1,109 @@
+import { CSSResult } from 'lit';
+import { LitElement } from './LitElement';
+/**
+ * `@arcgis/lumina` package may be bundled once but used by multiple packages with
+ * different configuration options. For that reason, the configuration options
+ * cannot be a global object, but has to be an object that you pass around.
+ */
+export type Runtime = RuntimeOptions & {
+    /**
+     * Get the base path to where the package assets can be found.
+     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
+     * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
+     * It is CORS-enabled, so you can load the assets from any domain.
+     * Use "setAssetPath(path)" if the path needs to be customized.
+     */
+    readonly getAssetPath: (suffix: string) => string;
+    /**
+     * Used to manually set the base path where package assets (like localization
+     * and icons) can be found.
+     *
+     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
+     * For example, `https://js.arcgis.com/map-components/4.30/`.
+     * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
+     * It is CORS-enabled, so you can load the assets from any domain.
+     * This is the recommended way to load the assets and avoid bundling them with your application.
+     * It means that by default, you don't need to use "setAssetPath" since the path is already set.
+     *
+     * However, if you need to host the assets locally, you can use "setAssetPath" to set the base path.
+     * If the script is used as "module", it's recommended to use "import.meta.url",
+     * such as "setAssetPath(import.meta.url)". Other options include
+     * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+     * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+     * But do note that this configuration depends on how your script is bundled, or lack of
+     * bundling, and where your assets can be loaded from. Additionally custom bundling
+     * will have to ensure the static assets are copied to its build directory.
+     */
+    readonly setAssetPath: (path: URL | string) => void;
+    /**
+     * The customElement decorator. Unlike default Lit's decorator this one
+     * provides runtime instance to the LitElement class
+     *
+     * @remarks
+     * You do not need to call this decorator in your component.
+     * It will be added automatically at build time.
+     *
+     * Instead, make sure your component file has the following:
+     * ```ts
+     * declare global {
+     *  interface DeclareElements {
+     *      "arcgis-your-component": ArcgisYourComponent;
+     *   }
+     * }
+     * ```
+     */
+    readonly customElement: (tagName: string, component: typeof LitElement) => void;
+};
+export type RuntimeOptions = {
+    /**
+     * The default asset path to use in NPM and CDN builds.
+     *
+     * This option will be set by Lumina compiler based on the value of the
+     * `assets.defaultPath` option in the `useLumina()` plugin.
+     */
+    readonly defaultAssetPath: string;
+    /**
+     * The attribute that indicates a component has rendered it's content.
+     * Usually this attribute is added after your component's `loaded()` lifecycle
+     * happened. However, during SSR, "hydrated" is added right away on the
+     * server.
+     *
+     * Until element has this attribute, it will have `visibility:hidden` style
+     * applied.
+     *
+     * This option will be set by the Lumina compiler based on the value of
+     * the `css.hydratedAttribute` option in the `useLumina()` plugin.
+     */
+    readonly hydratedAttribute: string;
+    /**
+     * Styles that you wish to make available in each component's shadow root, but
+     * to not apply outside the shadow root
+     *
+     * This option will be set by Lumina compiler based on the value of the
+     * `css.commonStylesPath` option in the `useLumina()` plugin.
+     */
+    readonly commonStyles?: CSSResult;
+};
+/**
+ * The options object will be provided by Lumina compiler at build-time.
+ * It should not be specified in the source code.
+ */
+export declare function makeRuntime(options?: RuntimeOptions): Runtime;
+/**
+ * Exposing the reference to the runtime globally when in tests or development.
+ * This is primarily for usage by dynamically created components in tests
+ *
+ * @private
+ */
+export type DevOnlyGlobalRuntime = typeof globalThis & {
+    devOnly$luminaRuntime?: Runtime;
+};
+/**
+ * Called from the component constructor when in development or test mode.
+ * Used primarily by mount to get a reference to the rendered component.
+ *
+ * @private
+ */
+export type DevOnlyGlobalComponentRefCallback = typeof globalThis & {
+    devOnly$luminaComponentRefCallback?: (component: LitElement) => void;
+};

package/dist/proxyExports-CK5BLFLO.js

@@ -0,0 +1,60 @@
+import { e as setParentController, f as retrieveParentControllers, u as setAmbientChildController, t as trackKey, l as bypassReadOnly } from "./Controller-CZ8Djohh.js";
+const proxyExports = (Class) => (...args) => {
+  const ambientControllers = retrieveParentControllers();
+  const instance = new Class(...args);
+  const initialExports = instance.exports;
+  setParentController(ambientControllers.at(-1));
+  const manager = instance.component.manager;
+  manager._markExports(instance, initialExports);
+  instance.watchExports((exports) => manager._markExports(instance, exports));
+  setAmbientChildController(instance);
+  const hostCandidates = [instance.component, ...ambientControllers].reverse();
+  return trackKey(
+    hostCandidates,
+    (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution, initialExports),
+    initialExports
+  );
+};
+function setProxy(controller, { host, key, isReactive: assignedToProp }, initialExports) {
+  const genericHost = host;
+  const controllerValueChanged = genericHost[key] !== controller.exports;
+  const hostValueChanged = genericHost[key] !== initialExports;
+  const controllerUpdatedExports = initialExports !== controller.exports;
+  if (controllerValueChanged && !hostValueChanged && controllerUpdatedExports) {
+    genericHost[key] = controller.exports;
+  }
+  const isProxyExportsOnComponent = host === controller.component;
+  if (isProxyExportsOnComponent) {
+    if (assignedToProp) {
+      const manager = controller.component.manager;
+      if (hostValueChanged) {
+        manager._markExports(controller, genericHost[key]);
+      }
+      controller.onUpdate((changes) => {
+        if (changes.has(key)) {
+          const value = genericHost[key];
+          if (value !== controller.exports) {
+            manager._markExports(controller, value);
+          }
+        }
+      });
+    }
+    controller.assignedProperty = assignedToProp ? void 0 : key;
+  }
+  const isReadOnly = controller.component.constructor.elementProperties.get(key)?.readOnly;
+  controller.watchExports(() => {
+    if (genericHost[key] === controller.exports) {
+      return;
+    }
+    if (isReadOnly) {
+      bypassReadOnly(() => {
+        genericHost[key] = controller.exports;
+      });
+    } else {
+      genericHost[key] = controller.exports;
+    }
+  });
+}
+export {
+  proxyExports as p
+};

package/dist/render.d.ts

@@ -0,0 +1,5 @@
+import { JsxNode } from './jsx/types';
+/**
+ * Retrieve an HTML element to be manually appended to an existing component.
+ */
+export declare function renderElement<Element extends HTMLElement = HTMLElement>(element: JsxNode): Element;

package/dist/runtime.d.ts

@@ -1,109 +1,6 @@
-import type { CSSResult } from "lit";
-import type { LitElement } from "./LitElement";
+export declare const runtime: import('./makeRuntime').Runtime;
 /**
- * `@arcgis/lumina` package may be bundled once but used by multiple packages with
- * different configuration options. For that reason, the configuration options
- * cannot be a global object, but has to be an object that you pass around.
+ * "customElement" needs to be exported - it will be used by the build system.
+ * You should not call it directly.
  */
-export type Runtime = RuntimeOptions & {
-    /**
-     * Get the base path to where the package assets can be found.
-     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
-     * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
-     * It is CORS-enabled, so you can load the assets from any domain.
-     * Use "setAssetPath(path)" if the path needs to be customized.
-     */
-    readonly getAssetPath: (suffix: string) => string;
-    /**
-     * Used to manually set the base path where package assets (like localization
-     * and icons) can be found.
-     *
-     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
-     * For example, `https://js.arcgis.com/map-components/4.30/`.
-     * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
-     * It is CORS-enabled, so you can load the assets from any domain.
-     * This is the recommended way to load the assets and avoid bundling them with your application.
-     * It means that by default, you don't need to use "setAssetPath" since the path is already set.
-     *
-     * However, if you need to host the assets locally, you can use "setAssetPath" to set the base path.
-     * If the script is used as "module", it's recommended to use "import.meta.url",
-     * such as "setAssetPath(import.meta.url)". Other options include
-     * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
-     * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
-     * But do note that this configuration depends on how your script is bundled, or lack of
-     * bundling, and where your assets can be loaded from. Additionally custom bundling
-     * will have to ensure the static assets are copied to its build directory.
-     */
-    readonly setAssetPath: (path: URL | string) => void;
-    /**
-     * The customElement decorator. Unlike default Lit's decorator this one
-     * provides runtime instance to the LitElement class
-     *
-     * @remarks
-     * You do not need to call this decorator in your component.
-     * It will be added automatically at build time.
-     *
-     * Instead, make sure your component file has the following:
-     * ```ts
-     * declare global {
-     *  interface DeclareElements {
-     *      "arcgis-your-component": ArcgisYourComponent;
-     *   }
-     * }
-     * ```
-     */
-    readonly customElement: (tagName: string, component: typeof LitElement) => void;
-};
-export type RuntimeOptions = {
-    /**
-     * The default asset path to use in NPM and CDN builds.
-     *
-     * This option will be set by Lumina compiler based on the value of the
-     * `assets.defaultPath` option in the `useLumina()` plugin.
-     */
-    readonly defaultAssetPath: string;
-    /**
-     * The attribute that indicates a component has rendered it's content.
-     * Usually this attribute is added after your component's `loaded()` lifecycle
-     * happened. However, during SSR, "hydrated" is added right away on the
-     * server.
-     *
-     * Until element has this attribute, it will have `visibility:hidden` style
-     * applied.
-     *
-     * This option will be set by the Lumina compiler based on the value of
-     * the `css.hydratedAttribute` option in the `useLumina()` plugin.
-     */
-    readonly hydratedAttribute: string;
-    /**
-     * Styles that you wish to make available in each component's shadow root, but
-     * to not apply outside the shadow root
-     *
-     * This option will be set by Lumina compiler based on the value of the
-     * `css.commonStylesPath` option in the `useLumina()` plugin.
-     */
-    readonly commonStyles?: CSSResult;
-};
-/**
- * The options object will be provided by Lumina compiler at build-time.
- * It should not be specified in the source code.
- */
-export declare function makeRuntime(options?: RuntimeOptions): Runtime;
-/**
- * Exposing the reference to the runtime globally when in tests or development.
- * This is primarily for usage by dynamically created components in tests
- *
- * @private
- */
-export type DevOnlyGlobalRuntime = typeof globalThis & {
-    devOnly$luminaRuntime?: Runtime;
-};
-/**
- * Called from the component constructor when in development or test mode.
- * Used primarily by mount to get a reference to the rendered component.
- *
- * @private
- */
-export type DevOnlyGlobalComponentRefCallback = typeof globalThis & {
-    devOnly$luminaComponentRefCallback?: (component: LitElement) => void;
-};
+export declare const customElement: (tagName: string, component: typeof import('./LitElement').LitElement) => void;

package/dist/stencilSsrCompatibility/index.d.ts

@@ -1,9 +1,5 @@
-/**
- * Lots of silencing of ESLint in this file to be compatible with Stencil's
- * unsafe typings.
- */
-import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
-import type { Readable } from "node:stream";
+import { RenderInfo } from '@lit-labs/ssr/lib/render.js';
+import { Readable } from 'node:stream';
 /**
  * @deprecated
  * Use `render` from `@lit-labs/ssr` instead.

package/dist/stencilSsrCompatibility/index.js

@@ -1,11 +1,10 @@
-// src/stencilSsrCompatibility/index.ts
 import { getWindow } from "@lit-labs/ssr/lib/dom-shim.js";
 import { render } from "@lit-labs/ssr/lib/render.js";
 import { html } from "@lit-labs/ssr/lib/server-template.js";
-import { unsafeStatic, withStatic } from "lit-html/static.js";
+import { withStatic, unsafeStatic } from "lit-html/static.js";
 import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
 import { RenderResultReadable } from "@lit-labs/ssr/lib/render-result-readable.js";
-var staticHtml = withStatic(html);
+const staticHtml = withStatic(html);
 function createWindowFromHtml(templateHtml, uniqueId = Math.random().toString()) {
   const window = getWindow({ includeJSBuiltIns: true });
   window.document.defaultView = window;

package/dist/typings/importMeta.d.ts

@@ -7,7 +7,7 @@ interface ImportMetaEnv {
 }
 interface ImportMeta {
     url: string;
-    readonly hot?: import("vite/types/hot.d.ts").ViteHotContext;
+    readonly hot?: import('vite/types/hot.d.ts').ViteHotContext;
     readonly env: ImportMetaEnv;
-    glob: import("vite/types/importGlob.d.ts").ImportGlobFunction;
+    glob: import('vite/types/importGlob.d.ts').ImportGlobFunction;
 }