@arcgis/lumina 4.32.0-next.5 → 4.32.0-next.51

package/dist/jsx/directives.d.ts

@@ -26,6 +26,8 @@ import type { DirectiveClass } from "lit-html/directive.js";
  * Instead, if the prop value is a object definition, variable reference,
  * ternary expression or etc, the `safeClassMap` will be called, which will
  * determine at runtime if directive should be called
+ *
+ * @private
  */
 export declare const safeClassMap: (parameters: ClassInfo | Nil | string) => DirectiveResult<typeof ClassMapDirective> | Nil | string;
 /**
@@ -49,6 +51,8 @@ export declare const safeClassMap: (parameters: ClassInfo | Nil | string) => Dir
  * Instead, if the prop value is a object definition, variable reference,
  * ternary expression or etc, the `safeStyleMap` will be called, which will
  * determine at runtime if directive should be called
+ *
+ * @private
  */
 export declare const safeStyleMap: (parameters: CssProperties | Nil | string) => DirectiveResult<typeof StyleMapDirective> | Nil | string;
 /**

package/dist/jsx/jsx.d.ts

@@ -6,7 +6,6 @@
  * /// <reference types="@arcgis/lumina/typings" />
  * ```
  */
-/// <reference path="../typings/jsxGlobals.d.ts" />
 import type { Properties as CssProperties } from "csstype";
 import type { TemplateResult } from "lit-html";
 import type { DirectiveResult } from "lit-html/directive.js";
@@ -28,13 +27,13 @@ export declare const Fragment: (props: {
     children?: JsxNode;
 }) => TemplateResult;
 /**
- * @internal
+ * @private
  * The references to this function are removed at build time. You do not need
  * to import it directly
  */
 export declare function jsx(type: string, props: unknown, key?: unknown): JsxNode;
 /**
- * @internal
+ * @private
  * The references to this function are removed at build time. You do not need
  * to import it directly
  */
@@ -201,6 +200,26 @@ export type ToElement<Component> = Omit<Component, LuminaJsx.ExcludedProperties>
 export type ToJsx<Component extends {
     el: unknown;
 }> = LuminaJsx.HTMLAttributes<Component["el"]> & LuminaJsx.RemapEvents<Component> & Partial<Omit<Component, LuminaJsx.ExcludedProperties | keyof HTMLElement | keyof LuminaJsx.RemapEvents<Component>>>;
+/**
+ * This interface will be automatically extended in src/lumina.ts files to add
+ * typings for Stencil elements usages in Lumina. You do not need to manually
+ * extend this interface.
+ *
+ * @example
+ * ```ts
+ * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
+ * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
+ *
+ * declare module "@arcgis/lumina" {
+ *   interface ImportStencilElements
+ *     extends CalciteJSX.IntrinsicElements,
+ *     CommonComponentsJsx.IntrinsicElements {
+ *   }
+ * }
+ * ```
+ */
+export interface ImportStencilElements {
+}
 /**
  * Get the type of all events for a given component. Includes native DOM events
  * and custom events.
@@ -208,15 +227,21 @@ export type ToJsx<Component extends {
  * @example
  * ```tsx
  * render() {
- *   return <arcgis-counter onArcgisOverflow={this._handleOverflow} />
+ *   return <arcgis-map onArcgisViewClick={this._handleViewClick} />
  * }
- * _handleOverflow(event: ToEvents<ArcgisCounter>["arcgisOverflow"]) {
+ * _handleViewClick(event: ToEvents<HTMLArcgisMapElement>["arcgisViewClick"]) {
  *   // event.detail
  *   // event.currentTarget
  * }
  * ```
  *
  * @remarks
+ * This helper is intended to be used on components defined within the same
+ * package. For external components, you can use
+ * `HTMLArcgisMapElement["arcgisViewClick"]` directly, without need for
+ * `ToEvents<>`.
+ *
+ * @remarks
  * Alternative implementation of this type that is simpler, and potentially
  * more performant, but looses "go to definition" information.
  *
@@ -237,11 +262,36 @@ export type ToJsx<Component extends {
 export type ToEvents<Component> = GlobalEventTypes<MaybeEl<Component>> & {
     [Key in keyof Component as ListenerToPayloadType<Component[Key]> extends CustomEvent ? Key : never]-?: ListenerToPayloadType<Component[Key]> & {
         currentTarget: MaybeEl<Component>;
+        target: MaybeEl<Component>;
     };
 };
 type MaybeEl<Component> = Component extends {
     el: unknown;
 } ? Component["el"] : Component;
+export interface TargetedEvent<Target = EventTarget | null, Payload = void> extends BaseEvent {
+    /**
+     * Returns any custom data event was created with.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+     */
+    readonly detail: Payload;
+    /**
+     * Returns the object whose event listener's callback is currently being invoked.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)
+     */
+    readonly currentTarget: Target;
+    /**
+     * Returns the object to which event is dispatched (its target).
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
+     */
+    readonly target: Target;
+}
+type BaseEvent = Omit<Event, "currentTarget" | "target">;
+export type EventHandler<E> = {
+    bivarianceHack(event: E): void;
+}["bivarianceHack"];
 /**
  * From "GlobalEventHandlersCamelCase" extract event names and their payloads.
  * Not using "HTMLElementEventMap" because that map has all events in lowercase.
@@ -252,6 +302,12 @@ type GlobalEventTypes<Target = HTMLElement> = {
 type ListenerToPayloadType<Listener> = unknown extends Listener ? void : Listener extends {
     emit: (...rest: never[]) => infer PayloadType;
 } ? PayloadType : Listener extends CustomEvent ? Listener : void;
+/**
+ * Defined Lumina custom elements. This interface is used only for internal
+ * type-checking only.
+ */
+export interface DeclareElements {
+}
 /**
  * These typings are based on dom-expressions typings:
  * https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts
@@ -307,7 +363,7 @@ export declare namespace LuminaJsx {
          */
         key?: unknown;
     }
-    interface IntrinsicElements extends HTMLElementTags, SVGElementTags, ReMappedComponents<globalThis.DeclareElements>, Omit<ReMapStencilComponents<globalThis.ImportStencilElements>, keyof HTMLElementTags | keyof SVGElementTags> {
+    interface IntrinsicElements extends HTMLElementTags, SVGElementTags, ReMappedComponents<DeclareElements>, Omit<ReMapStencilComponents<ImportStencilElements>, keyof HTMLElementTags | keyof SVGElementTags> {
     }
     /**
      * By not requiring to have some sort of typings generation watcher to run
@@ -349,6 +405,7 @@ export declare namespace LuminaJsx {
             emit: (...rest: never[]) => infer PayloadType;
         } ? (event: PayloadType & {
             currentTarget: Component["el"];
+            target: Component["el"];
         }) => void : never;
     };
     /**
@@ -381,9 +438,6 @@ export declare namespace LuminaJsx {
         currentTarget: T;
         target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ? T : DOMElement;
     }) => void;
-    type RefCallback<T> = {
-        bivarianceHack(instance: T | undefined): void;
-    }["bivarianceHack"];
     interface CustomAttributes<T = HTMLElement> {
         /**
          * The `key` is a special attribute that can be set on any element.
@@ -395,7 +449,7 @@ export declare namespace LuminaJsx {
          * Unlike in React or Stencil, any JavaScript value is acceptable as a key
          */
         key?: unknown;
-        ref?: RefCallback<T> | Ref<T>;
+        ref?: EventHandler<T | undefined> | Ref<T>;
         directives?: readonly DirectiveResult[];
     }
     interface DOMAttributes<T = HTMLElement> extends CustomAttributes<T>, GlobalEventHandlersCamelCase<T> {
@@ -843,6 +897,7 @@ export declare namespace LuminaJsx {
     }
     interface HTMLAttributes<T = HTMLElement> extends AriaAttributes, DOMAttributes<T>, RdfaAttributes {
         accessKey?: string;
+        autofocus?: boolean;
         dir?: HTMLDir;
         draggable?: boolean;
         hidden?: boolean | "hidden" | "until-found";
@@ -922,7 +977,6 @@ export declare namespace LuminaJsx {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autofocus?: boolean;
         disabled?: boolean;
         form?: string;
         name?: string;
@@ -1031,7 +1085,6 @@ export declare namespace LuminaJsx {
         autocomplete?: AutoFill;
         accept?: string;
         alt?: string;
-        autofocus?: boolean;
         capture?: boolean | string;
         checked?: boolean;
         disabled?: boolean;
@@ -1313,7 +1366,6 @@ export declare namespace LuminaJsx {
         referrerPolicy?: HTMLReferrerPolicy;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autofocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1350,7 +1402,6 @@ export declare namespace LuminaJsx {
     }
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         children?: "Error: Use value property instead. See https://lit.dev/docs/templates/expressions/#invalid-locations";
-        autofocus?: boolean;
         cols?: number | string;
         dirname?: string;
         disabled?: boolean;

package/dist/lazyLoad.d.ts

@@ -15,6 +15,9 @@ export interface DefineCustomElements {
 export type LazyLoadOptions = {
     readonly resourcesUrl?: string;
 };
+interface CommonInterface extends HTMLElement {
+    componentOnReady: () => Promise<this>;
+}
 export declare const makeDefineCustomElements: (runtime: Runtime, structure: Readonly<Record<string, CompactMeta>>) => DefineCustomElements;
 /**
  * Use compact meta to reduce bundle size (otherwise, it would be ~65kb for
@@ -105,7 +108,9 @@ export declare abstract class ProxyComponent extends HtmlElement {
     /**
      * Direct offspring that should be awaited before loaded() is emitted
      */
-    _offspring: (Element & Partial<Pick<LitElement, "manager">> & Pick<LitElement, "componentOnReady">)[];
+    _offspring: (CommonInterface & {
+        manager?: LitElement["manager"];
+    })[];
     /**
      * Promise that resolves once parent's load() completed. False if there is no
      * parent
@@ -147,10 +152,19 @@ export declare abstract class ProxyComponent extends HtmlElement {
     /**
      * Create a promise that resolves once component is fully loaded
      */
-    componentOnReady(): Promise<LitElement>;
+    componentOnReady(): Promise<this>;
     /** @internal */
     _initializeComponent(module: Record<string, typeof LitElement>): void;
+    /**
+     * Implemented on the proxy for compatibility with Lit Context.
+     */
+    addController(): void;
+    /**
+     * Implemented on the proxy for compatibility with Lit Context.
+     */
+    requestUpdate(): void;
 }
+/** @private */
 export type GlobalThisWithPuppeteerEnv = typeof globalThis & {
     devOnly$createdElements?: WeakRef<ProxyComponent>[];
 };

package/dist/runtime.d.ts

@@ -8,7 +8,7 @@ import type { LitElement } from "./LitElement";
 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>/".
+     * 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.
@@ -18,8 +18,8 @@ export type Runtime = RuntimeOptions & {
      * 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/".
+     * 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.
@@ -92,6 +92,8 @@ 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;
@@ -99,6 +101,8 @@ export type DevOnlyGlobalRuntime = typeof globalThis & {
 /**
  * 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/stencilSsrCompatibility/index.d.ts

@@ -2,7 +2,6 @@
  * Lots of silencing of ESLint in this file to be compatible with Stencil's
  * unsafe typings.
  */
-/// <reference types="node" />
 import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
 import type { Readable } from "node:stream";
 /**

package/dist/typings/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="jsxGlobals.d.ts" />
-/// <reference path="loadLitCss.d.ts" />
-/// <reference path="viteEnv.d.ts" />
-/// <reference path="importMeta.d.ts" />
+/// <reference path="jsxGlobals.d.ts" preserve="true" />
+/// <reference path="loadLitCss.d.ts" preserve="true" />
+/// <reference path="viteEnv.d.ts" preserve="true" />
+/// <reference path="importMeta.d.ts" preserve="true" />

package/dist/typings/jsxGlobals.d.ts

@@ -1,4 +1,8 @@
-export {};
+/**
+ * This file is used for internal type checking only. It should not be
+ * referenced in public types of your package to not pollute the global types
+ * namespace
+ */
 declare global {
     /**
      * This interface will be extended in each source file that defines a LitElement.
@@ -19,23 +23,17 @@ declare global {
     };
     interface HTMLElementTagNameMap extends ReMappedDeclareElements {
     }
-    /**
-     * Extend this interface with Stencil web components that you wish to use
-     * in Lit
-     *
-     * @example
-     * ```ts
-     * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
-     * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
-     *
-     * declare global {
-     *   interface ImportStencilElements
-     *     extends CalciteJSX.IntrinsicElements,
-     *     CommonComponentsJsx.IntrinsicElements {
-     *   }
-     * }
-     * ```
-     */
-    export interface ImportStencilElements {
+}
+export interface DeclareElements extends globalThis.DeclareElements {
+}
+/**
+ * In the component files, we declare "DeclareElements" interface on the
+ * `declare global` namespace as it's shorter than writing
+ * `declare module "@arcgis/lumina"`. However, we want to avoid polluting
+ * global typings with this interface - thus we use namespace merging to
+ * extend the namespaced DeclareElements based on the global DeclareElements.
+ */
+declare module "../jsx/jsx" {
+    interface DeclareElements extends globalThis.DeclareElements {
     }
 }

package/dist/wrappersUtils.d.ts

@@ -1,9 +1,33 @@
+export interface Options<I extends HTMLElement, E extends EventNames> {
+    react: any;
+    tagName: string;
+    elementClass: Constructor<I>;
+    events?: E;
+    displayName?: string;
+}
+export type EventNames = Record<string, string>;
+type Constructor<T> = new () => T;
 /**
- * Returns a proxy object for a custom element prototype.
- * The function that creates a React wrapper component for a custom element,
- * if rendered, will need the custom element prototype to define the React component properties.
- * Because the custom element may not yet be defined in global scope when
- * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
- * element prototype until it is actually needed, and caches the result for future calls.
+ * Wrap `createComponent` from `@lit/react` to improve lazy loading
+ * compatibility.
+ *
+ * @private
  */
-export declare function createPrototypeProxy<T extends HTMLElement>(tagName: string): new () => T;
+export declare const makeReactWrapperFactory: (react: unknown, createComponent: (options: Options<HTMLElement, EventNames>) => unknown) => (options: Pick<Options<HTMLElement, EventNames>, "events" | "tagName">) => unknown;
+/**
+ * Helper for `createComponent` to declare options in a type-safe and concise
+ * manner.
+ *
+ * @remarks
+ * Only tagName and events need to be provided to the wrapped version of the
+ * `createComponent` function. However, since we inherit the typings from
+ * the original `createComponent`, TypeScript would still force us to provide
+ * `react` and `elementClass` properties - instead, this helper convinces
+ * TypeScript that we are providing `react` and `elementClass` properties.
+ *
+ * @private
+ */
+export declare const getReactWrapperOptions: <Element extends HTMLElement, Events extends EventNames>(tagNameAndElement: Element, events: Events) => Options<Element & {
+    class?: string;
+}, Events>;
+export {};

package/dist/wrappersUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.32.0-next.5",
+  "version": "4.32.0-next.51",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./config": "./dist/config.js",
+    "./hmrSupport": "./dist/hmrSupport.js",
     "./stencilSsrCompatibility": "./dist/stencilSsrCompatibility/index.js",
     "./typings": {
       "types": "./dist/typings/index.d.ts"
@@ -17,33 +18,15 @@
   "files": [
     "dist/"
   ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
   "license": "SEE LICENSE IN LICENSE.md",
-  "scripts": {
-    "build": "tsup",
-    "build:dev": "tsup --sourcemap",
-    "watch": "yarn build:dev --watch",
-    "clean": "rimraf ./dist ./build ./turbo ./node_modules"
-  },
   "dependencies": {
-    "@arcgis/components-controllers": "4.32.0-next.5",
-    "@arcgis/components-utils": "4.32.0-next.5",
+    "@arcgis/components-controllers": "4.32.0-next.51",
+    "@arcgis/components-utils": "4.32.0-next.51",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
+    "@lit/context": "^1.1.3",
     "csstype": "^3.1.3",
     "lit": "^3.2.0",
     "tslib": "^2.7.0"
-  },
-  "devDependencies": {
-    "@arcgis/typescript-config": "4.32.0-next.5",
-    "@types/node": "^20.2.5",
-    "eslint": "^8.55.0",
-    "rimraf": "^5.0.0",
-    "tsup": "^8.3.0",
-    "typescript": "~5.4.0"
-  },
-  "gitHead": "e4e69443c65b6667007b81e8a05805bec146db56"
-}
+  }
+}