esrieact 0.2.1 → 0.3.1

package/README.md

@@ -76,7 +76,7 @@ Instead, wrapper components are available to make map presentation clear and dec
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   return (
@@ -119,7 +119,7 @@ Beacuse react-wrapped ESRI component props extend directly from ESRI class optio
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   return (
@@ -142,7 +142,7 @@ However, any propery then updated within the above `new Extent` would not regist
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 import FeatureEffect from '@arcgis/core/layers/FeatureEffect'
 import FeatureFilter from '@arcgis/core/layers/FeatureFilter'
 
@@ -165,7 +165,7 @@ Because the property being updated is deeply nested within class-based ESRI comp
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   const [clause, setClause] = useState("SOME SQL CLAUSE");
@@ -219,7 +219,7 @@ In order for `<MapView />` child components to be properly associated with the u
 
 ```ts
 // App.tsx
-import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+import { MapViewCore, MapContextProvider } from 'esrieact';
 
 const App = () => {
   // Wrap MapViewCore and other components that need access to the map context
@@ -233,7 +233,7 @@ const App = () => {
 
 // OtherUI.tsx
 import { useContext } from 'react';
-import { MapContext } from 'lib/map/MapView';
+import { MapContext } from 'esrieact';
 
 const OtherUI = () => {
   const { view } = useContext(MapContext);
@@ -247,7 +247,7 @@ One of the most used layer types is the `FeatureLayer`. A `FeatureLayer` can be
 
 ```ts
 import React from "react";
-import { FeatureLayer, FeautureLayerView, MapView } from "./esri";
+import { FeatureLayer, FeautureLayerView, MapView } from "esrieact";
 
 export const ReactMap: React.FC = () => {
   const flRef = useRef<__esri.FeatureLayer>();

package/dist/core/renderers/createRendererComponent.d.ts

@@ -10,4 +10,12 @@ export type RendererProps<T extends __esri.RendererProperties = __esri.RendererP
  * any esri properties that extend esri.LayerProperties, and optional children
  */
 export type CreateRendererFunction<T extends RendererProps> = (properties: T) => __esri.Renderer;
+/**
+ * Factory function to create an esrieact renderer component
+ * @param createRenderer - Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
+ * any esri properties that extend esri.RendererProperties, and optional children
+ * @param ref - Ref to the renderer instance
+ * @param properties - Renderer properties
+ * @returns A context provider whose context is the renderer instance to be passed to children, or if there are no children, returns null
+ */
 export declare const createRendererComponent: (createRenderer: CreateRendererFunction<RendererProps>, ref: Ref<__esri.Renderer>, { children, ...properties }: RendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/renderers/createRendererComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
 import SceneLayer from "@arcgis/core/layers/SceneLayer";
 import Sublayer from "@arcgis/core/layers/support/Sublayer";
@@ -15,11 +15,25 @@ import { useEsriPropertyUpdates } from "../../utils";
  * and makes available to its descendants
  */
 export const RendererContext = createContext({});
+/**
+ * Factory function to create an esrieact renderer component
+ * @param createRenderer - Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
+ * any esri properties that extend esri.RendererProperties, and optional children
+ * @param ref - Ref to the renderer instance
+ * @param properties - Renderer properties
+ * @returns A context provider whose context is the renderer instance to be passed to children, or if there are no children, returns null
+ */
 export const createRendererComponent = (createRenderer, ref, { children, ...properties }) => {
     const parent = useContext(LayerContext);
-    const defaultRenderer = parent.renderer;
-    const instance = useMemo(() => {
-        const renderer = createRenderer(properties);
+    const defaultRenderer = useRef(parent.renderer?.clone());
+    // Just create the renderer instance (pure calculation)
+    const instance = useMemo(() => createRenderer(properties), []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    /**
+     * Assign the renderer on mount and clean up on unmount
+     */
+    useEffect(() => {
         if (parent instanceof FeatureLayer ||
             parent instanceof SceneLayer ||
             parent instanceof Sublayer ||
@@ -28,21 +42,12 @@ export const createRendererComponent = (createRenderer, ref, { children, ...prop
             parent instanceof OGCFeatureLayer ||
             parent instanceof StreamLayer ||
             parent instanceof WFSLayer) {
-            parent.renderer = renderer;
+            parent.renderer = instance;
         }
         else {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
+            // eslint-disable-next-line no-console
             console.error("You are trying to use a <Renderer /> component as the descendant of a component that does not take an ESRI renderer.");
         }
-        return renderer;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    /**
-     * Set the renderer of the parent layer back to its initial default on unmount
-     */
-    useEffect(() => {
         return () => {
             if (parent instanceof FeatureLayer ||
                 parent instanceof SceneLayer ||
@@ -52,10 +57,10 @@ export const createRendererComponent = (createRenderer, ref, { children, ...prop
                 parent instanceof OGCFeatureLayer ||
                 parent instanceof StreamLayer ||
                 parent instanceof WFSLayer) {
-                parent.renderer = defaultRenderer;
+                parent.renderer = defaultRenderer.current;
             }
         };
-    }, []);
+    }, [parent, instance, defaultRenderer]);
     // If no children, there is no need to render a context provider
     if (!children)
         return null;

package/dist/core/symbols/PictureMarkerSymbol.js

@@ -1,10 +1,6 @@
-import React, { useContext, useImperativeHandle, useMemo } from "react";
+import React from "react";
 import EsriPictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
-import Graphic from "@arcgis/core/Graphic";
-import Renderer from "@arcgis/core/renderers/Renderer";
-import { GraphicContext } from "../Graphic";
-import { useEsriPropertyUpdates } from "../../utils";
-import { RendererContext } from "../renderers";
+import { createSymbolComponent } from "./createSymbolComponent";
 /**
  * A PictureMarkerSymbol component, must be rendered as a child of a Renderer component or Graphic component
  *
@@ -12,32 +8,5 @@ import { RendererContext } from "../renderers";
  * - [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html)
  */
 export const PictureMarkerSymbol = React.forwardRef((properties, ref) => {
-    const parentGraphic = useContext(GraphicContext);
-    const parentRenderer = useContext(RendererContext);
-    /**
-     * Create instance only on first mount
-     */
-    const instance = useMemo(() => {
-        const symbol = new EsriPictureMarkerSymbol(properties);
-        if (!(parentGraphic instanceof Graphic) &&
-            !(parentRenderer instanceof Renderer)) {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
-            console.error("You are trying to render a PictureMarkerSymbol component that is not a descendant of a Graphic or Renderer.", "Did you forget to wrap your PictureMarkerSymbol in a Graphic or Renderer?");
-            return;
-        }
-        if (parentRenderer) {
-            // @ts-expect-error allow this for renderers that do take a symbol
-            parentRenderer.symbol = symbol;
-            return symbol;
-        }
-        if (parentGraphic) {
-            parentGraphic.symbol = symbol;
-            return symbol;
-        }
-        return symbol;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    return null;
+    return createSymbolComponent((props) => new EsriPictureMarkerSymbol(props), ref, properties, "PictureMarkerSymbol");
 });

package/dist/core/symbols/SimpleFillSymbol.js

@@ -1,9 +1,6 @@
-import React, { useContext, useImperativeHandle, useMemo } from "react";
+import React from "react";
 import EsriSimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
-import Graphic from "@arcgis/core/Graphic";
-import Renderer from "@arcgis/core/renderers/Renderer";
-import { GraphicContext } from "../Graphic";
-import { useEsriPropertyUpdates } from "../../utils";
+import { createSymbolComponent } from "./createSymbolComponent";
 /**
  * A SimpleFillSymbol component, must be rendered as a child of a Renderer component or Graphic component
  *
@@ -11,24 +8,5 @@ import { useEsriPropertyUpdates } from "../../utils";
  * - [SimpleFillSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html)
  */
 export const SimpleFillSymbol = React.forwardRef((properties, ref) => {
-    const parent = useContext(GraphicContext);
-    /**
-     * Create instance only on first mount
-     */
-    const instance = useMemo(() => {
-        const symbol = new EsriSimpleFillSymbol(properties);
-        if (!(parent instanceof Graphic) || !(parent instanceof Renderer)) {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
-            console.error("You are trying to render a SimpleFillSymbol component that is not a descendant of a Graphic or Renderer.", "Did you forget to wrap your SimpleFillSymbol in a Graphic or Renderer?");
-            return;
-        }
-        if (parent) {
-            parent.symbol = symbol;
-        }
-        return symbol;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    return null;
+    return createSymbolComponent((props) => new EsriSimpleFillSymbol(props), ref, properties, "SimpleFillSymbol");
 });

package/dist/core/symbols/createSymbolComponent.d.ts

@@ -0,0 +1,22 @@
+import React, { Ref } from "react";
+/**
+ * The react context object that any symbol component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const SymbolContext: React.Context<__esri.Symbol>;
+export type SymbolProps<T extends __esri.SymbolProperties = __esri.SymbolProperties> = React.PropsWithChildren<T>;
+/**
+ * Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ */
+export type CreateSymbolFunction<T extends SymbolProps> = (properties: T) => __esri.Symbol;
+/**
+ * Factory function to create an esrieact symbol component
+ * @param createSymbol - Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ * @param ref - Ref to the symbol instance
+ * @param properties - Symbol properties
+ * @param componentName - Name of the component for error messages
+ * @returns A context provider whose context is the symbol instance to be passed to children, or if there are no children, returns null
+ */
+export declare const createSymbolComponent: (createSymbol: CreateSymbolFunction<SymbolProps>, ref: Ref<__esri.Symbol>, properties: SymbolProps, componentName: string) => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/symbols/createSymbolComponent.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import Graphic from "@arcgis/core/Graphic";
+import Renderer from "@arcgis/core/renderers/Renderer";
+import { GraphicContext } from "../Graphic";
+import { useEsriPropertyUpdates } from "../../utils";
+import { RendererContext } from "../renderers";
+/**
+ * The react context object that any symbol component creates when rendered
+ * and makes available to its descendants
+ */
+export const SymbolContext = createContext({});
+/**
+ * Factory function to create an esrieact symbol component
+ * @param createSymbol - Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ * @param ref - Ref to the symbol instance
+ * @param properties - Symbol properties
+ * @param componentName - Name of the component for error messages
+ * @returns A context provider whose context is the symbol instance to be passed to children, or if there are no children, returns null
+ */
+export const createSymbolComponent = (createSymbol, ref, properties, componentName) => {
+    const parentGraphic = useContext(GraphicContext);
+    const parentRenderer = useContext(RendererContext);
+    // Just create the symbol instance (pure calculation)
+    const instance = useMemo(() => createSymbol(properties), []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    /**
+     * Assign the symbol on mount and clean up on unmount
+     */
+    useEffect(() => {
+        if (!(parentGraphic instanceof Graphic) &&
+            !(parentRenderer instanceof Renderer)) {
+            // Allow this because it only happens in development and is helpful for devs
+            // eslint-disable-next-line
+            console.error(`You are trying to render a ${componentName} component that is not a descendant of a Graphic or Renderer.`, `Did you forget to wrap your ${componentName} in a Graphic or Renderer?`);
+            return;
+        }
+        if (parentRenderer) {
+            // @ts-expect-error allow this for renderers that do take a symbol
+            parentRenderer.symbol = instance;
+        }
+        if (parentGraphic) {
+            // @ts-expect-error Allow generic __esri.Symbol to be assigned to various specific parent graphic symbol types
+            parentGraphic.symbol = instance;
+        }
+    }, [instance, parentGraphic, parentRenderer, componentName]);
+    // If no children, there is no need to render a context provider
+    if (!properties.children)
+        return null;
+    return (_jsx(SymbolContext.Provider, { value: instance, children: properties.children }));
+};

package/dist/core/symbols/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./PictureMarkerSymbol";
 export * from "./SimpleFillSymbol";
+export * from "./createSymbolComponent";

package/dist/core/symbols/index.js

@@ -1,2 +1,3 @@
 export * from "./PictureMarkerSymbol";
 export * from "./SimpleFillSymbol";
+export * from "./createSymbolComponent";

package/dist/layers/GeoJSONLayer.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
 /**
- * An event handler function map specific to a GeoJSONLayer
+ * An event handler function map for events specific to a GeoJSONLayer
+ *
+ * From [ArcGIS JS API documentation](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html#events-summary)
  */
 export type GeoJSONLayerEventHandlerFnMap = Partial<{
     refresh: __esri.GeoJSONLayerRefreshEventHandler;
@@ -11,7 +13,10 @@ export type GeoJSONLayerEventHandlerFnMap = Partial<{
     "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
 }>;
 /**
- * The GeoJSONLayer React component
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html)
  */
 export declare const GeoJSONLayer: React.ForwardRefExoticComponent<__esri.GeoJSONLayerProperties & {
     children?: React.ReactNode;

package/dist/layers/GeoJSONLayer.js

@@ -8,6 +8,9 @@ const createLayer = (properties) => {
     return new EsriGeoJSONLayer(properties);
 };
 /**
- * The GeoJSONLayer React component
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html)
  */
 export const GeoJSONLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/GraphicsLayer.d.ts

@@ -1,12 +1,5 @@
 import React from "react";
 import EsriGraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
-export type GraphicsLayerEventHandlerFnMap = Partial<{
-    refresh: __esri.FeatureLayerRefreshEventHandler;
-    edits: __esri.FeatureLayerEditsEventHandler;
-    "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
-    "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
-    "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
-}>;
 /**
  * A GraphicsLayer component
  *
@@ -16,12 +9,6 @@ export type GraphicsLayerEventHandlerFnMap = Partial<{
 export declare const GraphicsLayer: React.ForwardRefExoticComponent<__esri.GraphicsLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: Partial<{
-        refresh: __esri.FeatureLayerRefreshEventHandler;
-        edits: __esri.FeatureLayerEditsEventHandler;
-        "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
-        "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
-        "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
-    }> | undefined;
+    events?: {} | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriGraphicsLayer>>;

package/dist/layers/MapImageLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
+export type MapImageLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.MapImageLayerRefreshEventHandler;
+    "layerview-create": __esri.MapImageLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.MapImageLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.MapImageLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A MapImageLayer component
  *
@@ -9,6 +15,11 @@ import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
 export declare const MapImageLayer: React.ForwardRefExoticComponent<__esri.MapImageLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.MapImageLayerRefreshEventHandler;
+        "layerview-create": __esri.MapImageLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.MapImageLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.MapImageLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriMapImageLayer>>;

package/dist/layers/VectorTileLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
+export type VectorTileLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.VectorTileLayerRefreshEventHandler;
+    "layerview-create": __esri.VectorTileLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.VectorTileLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.VectorTileLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A VectorTileLayer component
  *
@@ -9,6 +15,11 @@ import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
 export declare const VectorTileLayer: React.ForwardRefExoticComponent<__esri.VectorTileLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.VectorTileLayerRefreshEventHandler;
+        "layerview-create": __esri.VectorTileLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.VectorTileLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.VectorTileLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriVectorTileLayer>>;

package/dist/layers/WMSLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
+export type WMSLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.WMSLayerRefreshEventHandler;
+    "layerview-create": __esri.WMSLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.WMSLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.WMSLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A WMS Layer component
  *
@@ -9,6 +15,11 @@ import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
 export declare const WMSLayer: React.ForwardRefExoticComponent<__esri.WMSLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.WMSLayerRefreshEventHandler;
+        "layerview-create": __esri.WMSLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.WMSLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.WMSLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriWMSLayer>>;

package/dist/layers/WebTileLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
+export type WebTileLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.WebTileLayerRefreshEventHandler;
+    "layerview-create": __esri.WebTileLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.WebTileLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.WebTileLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * An WebTileLayer component
  *
@@ -9,6 +15,11 @@ import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
 export declare const WebTileLayer: React.ForwardRefExoticComponent<__esri.WebTileLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.WebTileLayerRefreshEventHandler;
+        "layerview-create": __esri.WebTileLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.WebTileLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.WebTileLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriWebTileLayer>>;

package/dist/layers/createLayerComponent.d.ts

@@ -8,9 +8,9 @@ export declare const LayerContext: React.Context<__esri.Layer | __esri.GroupLaye
  * Event handlers for all Layer components, some layer components may extend from this
  */
 export interface LayerEventHandlerFnMap {
-    "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
-    "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
-    "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+    "layerview-create": __esri.LayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.LayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.LayerLayerviewDestroyEventHandler;
 }
 /**
  * Properties that can be applied to any ESRIEACT Layer component.  Extends from

package/dist/layers/createLayerComponent.js

@@ -21,18 +21,7 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
     /**
      * Create instance only on first mount
      */
-    const instance = useMemo(() => {
-        const layer = createLayer(properties);
-        // If the parent is a GroupLayer (or any EsriInstance that has the .add(layer) method), add it to that,
-        // otherwise, add directly to the map
-        if (parent && parent.add) {
-            parent.add(layer, layerOrder);
-        }
-        else {
-            map.add(layer, layerOrder);
-        }
-        return layer;
-    }, []);
+    const instance = useMemo(() => createLayer(properties), []);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(instance, events);
@@ -43,6 +32,12 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
      * https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/fade-a-layer-on-off-smoothly/m-p/70174
      */
     useEffect(() => {
+        if (parent && parent.add) {
+            parent.add(instance, layerOrder);
+        }
+        else {
+            map.add(instance, layerOrder);
+        }
         return () => {
             if (parent && parent.remove) {
                 parent.remove(instance);
@@ -51,7 +46,7 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
                 map.remove(instance);
             }
         };
-    }, []);
+    }, [instance, parent, map, layerOrder]);
     // If no children, there is no need to render a context provider
     if (!children)
         return null;

package/dist/map/MapView.d.ts

@@ -115,7 +115,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * // App.tsx
- * import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+ * import { MapViewCore, MapContextProvider } from 'esrieact';
  *
  * const App = () => {
  *    return (
@@ -128,7 +128,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  *
  * // OtherUI.tsx
  * import { useContext } from 'react';
- * import { MapContext } from 'lib/map/MapView';
+ * import { MapContext } from 'esrieact';
  *
  * const OtherUI = () => {
  *    const { view } = useContext(MapContext);

package/dist/map/MapView.js

@@ -35,7 +35,7 @@ export const MapContextProvider = ({ children, }) => {
  *
  * @example
  * // App.tsx
- * import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+ * import { MapViewCore, MapContextProvider } from 'esrieact';
  *
  * const App = () => {
  *    return (
@@ -48,7 +48,7 @@ export const MapContextProvider = ({ children, }) => {
  *
  * // OtherUI.tsx
  * import { useContext } from 'react';
- * import { MapContext } from 'lib/map/MapView';
+ * import { MapContext } from 'esrieact';
  *
  * const OtherUI = () => {
  *    const { view } = useContext(MapContext);

package/dist/widgets/BasemapGallery.d.ts

@@ -9,6 +9,6 @@ import EsriBasemapGallery from "@arcgis/core/widgets/BasemapGallery";
 export declare const BasemapGallery: React.ForwardRefExoticComponent<__esri.BasemapGalleryProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriBasemapGallery>>;

package/dist/widgets/Expand.d.ts

@@ -9,6 +9,6 @@ import EsriExpandWidget from "@arcgis/core/widgets/Expand";
 export declare const Expand: React.ForwardRefExoticComponent<__esri.ExpandProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriExpandWidget>>;

package/dist/widgets/Histogram.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriHistogramWidget from "@arcgis/core/widgets/Histogram";
+/**
+ * A Histogram Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Histogram](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Histogram.html)
+ */
+export declare const Histogram: React.ForwardRefExoticComponent<__esri.HistogramProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriHistogramWidget>>;

package/dist/widgets/Histogram.js

@@ -0,0 +1,16 @@
+import React from "react";
+import EsriHistogramWidget from "@arcgis/core/widgets/Histogram";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriHistogramWidget(properties);
+};
+/**
+ * A Histogram Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Histogram](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Histogram.html)
+ */
+export const Histogram = React.forwardRef((properties, ref) => {
+    // @ts-expect-error internal mismatch of arcgis types?
+    return createWidgetComponent(createWidget, ref, properties);
+});

package/dist/widgets/HistogramRangeSlider.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import EsriHistogramRangeSliderWidget from "@arcgis/core/widgets/HistogramRangeSlider";
+export type HistogramRangeSliderEventHandlerFnMap = Partial<{
+    "max-change": __esri.HistogramRangeSliderMaxChangeEventHandler;
+    "min-change": __esri.HistogramRangeSliderMinChangeEventHandler;
+    "segment-drag": __esri.HistogramRangeSliderSegmentDragEventHandler;
+    "thumb-change": __esri.HistogramRangeSliderThumbChangeEventHandler;
+    "thumb-drag": __esri.HistogramRangeSliderThumbDragEventHandler;
+}>;
+/**
+ * A HistogramRangeSlider Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [HistogramRangeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-HistogramRangeSlider.html)
+ */
+export declare const HistogramRangeSlider: React.ForwardRefExoticComponent<__esri.HistogramRangeSliderProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriHistogramRangeSliderWidget>>;

package/dist/widgets/HistogramRangeSlider.js

@@ -0,0 +1,16 @@
+import React from "react";
+import EsriHistogramRangeSliderWidget from "@arcgis/core/widgets/HistogramRangeSlider";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriHistogramRangeSliderWidget(properties);
+};
+/**
+ * A HistogramRangeSlider Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [HistogramRangeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-HistogramRangeSlider.html)
+ */
+export const HistogramRangeSlider = React.forwardRef((properties, ref) => {
+    // @ts-expect-error internal mismatch of arcgis types?
+    return createWidgetComponent(createWidget, ref, properties);
+});

package/dist/widgets/LayerList/ListItem.d.ts

@@ -3,12 +3,14 @@ import EsriListItem from "@arcgis/core/widgets/LayerList/ListItem";
 /**
  * An LayerList ListItem component
  *
+ * TODO: Add support for children that attach to parent LayerList
+ *
  * ArcGIS JS API Source Components:
  * - [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html)
  */
 export declare const LayerList: React.ForwardRefExoticComponent<__esri.ListItemProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriListItem>>;

package/dist/widgets/LayerList/ListItem.js

@@ -7,6 +7,8 @@ const createWidget = (properties) => {
 /**
  * An LayerList ListItem component
  *
+ * TODO: Add support for children that attach to parent LayerList
+ *
  * ArcGIS JS API Source Components:
  * - [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html)
  */

package/dist/widgets/LayerList/index.d.ts

@@ -9,6 +9,6 @@ import EsriLayerList from "@arcgis/core/widgets/LayerList";
 export declare const LayerList: React.ForwardRefExoticComponent<__esri.LayerListProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriLayerList>>;

package/dist/widgets/Legend.d.ts

@@ -9,6 +9,6 @@ import EsriLegendWidget from "@arcgis/core/widgets/Legend";
 export declare const Legend: React.ForwardRefExoticComponent<__esri.LegendProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriLegendWidget>>;

package/dist/widgets/SearchBar.d.ts

@@ -9,6 +9,6 @@ import EsriSearch from "@arcgis/core/widgets/Search";
 export declare const SearchBar: React.ForwardRefExoticComponent<__esri.SearchProperties & __esri.WidgetProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriSearch>>;

package/dist/widgets/Sketch.d.ts

@@ -18,7 +18,13 @@ export declare const Sketch: React.ForwardRefExoticComponent<SketchProperties &
         update: __esri.SketchUpdateEventHandler;
         redo: __esri.SketchRedoEventHandler;
         undo: __esri.SketchUndoEventHandler;
-    }> | undefined;
+    }> | ((widgetInstance: __esri.Widget) => Partial<{
+        delete: __esri.SketchDeleteEventHandler;
+        create: __esri.SketchCreateEventHandler;
+        update: __esri.SketchUpdateEventHandler;
+        redo: __esri.SketchRedoEventHandler;
+        undo: __esri.SketchUndoEventHandler;
+    }>) | undefined;
     position?: string | __esri.UIAddPosition | undefined;
 } & React.RefAttributes<EsriSketch>>;
 export {};

package/dist/widgets/createWidgetComponent.d.ts

@@ -6,8 +6,8 @@ import EsriWidget from "@arcgis/core/widgets/Widget";
  */
 export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties & {
     view?: __esri.MapView;
-}, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
-    events?: E;
+}, E extends Record<string, Function> = {}, I extends __esri.Widget = __esri.Widget> = React.PropsWithChildren<T> & {
+    events?: E | ((widgetInstance: I) => E);
     position?: string | __esri.UIAddPosition;
 };
 /**

package/dist/widgets/createWidgetComponent.js

@@ -33,7 +33,7 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
     }, [view]);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
-    useEvents(instance, events);
+    useEvents(instance, typeof events === "function" ? events(instance) : events);
     /**
      * Check if children is a singular HTML element and assign its ref to instance.content,
      * enables dev to make arbitrary UI elements children of an Expand widget

package/dist/widgets/index.d.ts

@@ -5,3 +5,5 @@ export * from "./LayerList";
 export * from "./Legend";
 export * from "./SearchBar";
 export * from "./Sketch";
+export * from "./Histogram";
+export * from "./HistogramRangeSlider";

package/dist/widgets/index.js

@@ -5,3 +5,5 @@ export * from "./LayerList";
 export * from "./Legend";
 export * from "./SearchBar";
 export * from "./Sketch";
+export * from "./Histogram";
+export * from "./HistogramRangeSlider";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "esrieact",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.3.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [