esrieact 0.1.1 → 0.2.1

package/dist/layers/GeoJSONLayer.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+/**
+ * An event handler function map specific to a GeoJSONLayer
+ */
+export type GeoJSONLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.GeoJSONLayerRefreshEventHandler;
+    edits: __esri.GeoJSONLayerEditsEventHandler;
+    "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+}>;
+/**
+ * The GeoJSONLayer React component
+ */
+export declare const GeoJSONLayer: React.ForwardRefExoticComponent<__esri.GeoJSONLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: Partial<{
+        refresh: __esri.GeoJSONLayerRefreshEventHandler;
+        edits: __esri.GeoJSONLayerEditsEventHandler;
+        "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+    }> | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriGeoJSONLayer>>;

package/dist/layers/GeoJSONLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+/**
+ * Function that takes in properties of a GeoJSONLayer, and returns the GeoJSONLayer instance
+ */
+const createLayer = (properties) => {
+    return new EsriGeoJSONLayer(properties);
+};
+/**
+ * The GeoJSONLayer React component
+ */
+export const GeoJSONLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/GraphicsLayer.d.ts

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

package/dist/layers/MapImageLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
+/**
+ * A MapImageLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [MapImageLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html)
+ */
+export declare const MapImageLayer: React.ForwardRefExoticComponent<__esri.MapImageLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriMapImageLayer>>;

package/dist/layers/MapImageLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriMapImageLayer(properties);
+};
+/**
+ * A MapImageLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [MapImageLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html)
+ */
+export const MapImageLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/createLayerComponent.js

@@ -23,7 +23,7 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
      */
     const instance = useMemo(() => {
         const layer = createLayer(properties);
-        // If the parent in a GroupLayer (or any EsriInstance that has the .add(layer) method), add it to that,
+        // 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);
@@ -44,7 +44,12 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
      */
     useEffect(() => {
         return () => {
-            map.remove(instance);
+            if (parent && parent.remove) {
+                parent.remove(instance);
+            }
+            else {
+                map.remove(instance);
+            }
         };
     }, []);
     // If no children, there is no need to render a context provider

package/dist/layers/index.d.ts

@@ -9,3 +9,5 @@ export * from "./LayerView";
 export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
+export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/layers/index.js

@@ -9,3 +9,5 @@ export * from "./LayerView";
 export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
+export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/map/MapView.js

@@ -110,8 +110,9 @@ export const MapView = React.forwardRef((props, ref) => {
  * Utility hook to get the undnerlying `map` and `view` instances of a MapView
  */
 export const useMap = () => {
-    const { map, view } = useContext(MapContext);
-    if (!map || !view) {
+    const context = useContext(MapContext);
+    const { map, view } = context;
+    if (!context) {
         throw new Error("Cannot find esrieact map context, are you sure your component is a descendent of a MapContext?");
     }
     return { map, view };

package/dist/symbols/SymbolPreview.d.ts

@@ -3,7 +3,7 @@ interface Props {
     /**
      * The symbol to render in HTML
      */
-    symbol: __esri.Symbol;
+    symbol: __esri.SymbolUnion;
     /**
      * HTML rendering options to be passed to `renderPreviewHTML`
      */

package/dist/utils/useEsriPropertyUpdates.js

@@ -1,4 +1,4 @@
-import { useUpdateEffect } from "usehooks-ts";
+import { useUpdateEffect } from "./useUpdateEffect";
 import { usePrevious } from "./usePrevious";
 import { getObjectDiff } from ".";
 /**

package/dist/utils/usePrevious.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 export function usePrevious(value) {
-    const ref = useRef();
+    const ref = useRef(undefined);
     useEffect(() => {
         ref.current = value;
     }, [value]);

package/dist/utils/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Like useEffect, but skips the initial mount.
+ */
+export declare function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/dist/utils/useUpdateEffect.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+/**
+ * Like useEffect, but skips the initial mount.
+ */
+export function useUpdateEffect(effect, deps) {
+    const isFirst = useRef(true);
+    useEffect(() => {
+        if (isFirst.current) {
+            isFirst.current = false;
+            return;
+        }
+        return effect();
+    }, deps);
+}

package/dist/widgets/Expand.js

@@ -11,5 +11,6 @@ const createWidget = (properties) => {
  * - [Expand](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html)
  */
 export const Expand = React.forwardRef((properties, ref) => {
+    // @ts-expect-error internal mismatch of arcgis types?
     return createWidgetComponent(createWidget, ref, properties);
 });

package/dist/widgets/Legend.js

@@ -11,5 +11,6 @@ const createWidget = (properties) => {
  * - [Legend](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html)
  */
 export const Legend = React.forwardRef((properties, ref) => {
+    // @ts-expect-error internal mismatch of arcgis types?
     return createWidgetComponent(createWidget, ref, properties);
 });

package/dist/widgets/SearchBar.js

@@ -2,6 +2,7 @@ import React from "react";
 import EsriSearch from "@arcgis/core/widgets/Search";
 import { createWidgetComponent } from ".";
 const createSearchWidget = (properties) => {
+    // @ts-expect-error internal mismatch of arcgis types?
     return new EsriSearch(properties);
 };
 /**

package/dist/widgets/createWidgetComponent.d.ts

@@ -4,7 +4,9 @@ import EsriWidget from "@arcgis/core/widgets/Widget";
  * Properties that can be applied to any ESRIEACT Widget component.  Extends from
  * esri's WidgetProperties to include child components and the widget position
  */
-export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
+export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties & {
+    view?: __esri.MapView;
+}, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
     events?: E;
     position?: string | __esri.UIAddPosition;
 };
@@ -26,4 +28,4 @@ export declare const WidgetContext: React.Context<EsriWidget>;
  * @param properties The widget properties
  * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
  */
-export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;
+export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, view, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;

package/dist/widgets/createWidgetComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import Expand from "@arcgis/core/widgets/Expand";
 import { useMap } from "..";
 import { useEsriPropertyUpdates, useEvents } from "../utils";
@@ -16,9 +16,10 @@ export const WidgetContext = createContext({});
  * @param properties The widget properties
  * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
  */
-export function createWidgetComponent(createWidget, ref, { children, events, position, ...properties }) {
+export function createWidgetComponent(createWidget, ref, { children, events, position, view: viewFromProps, ...properties }) {
     const { view } = useMap();
     const parentWidgetContext = useContext(WidgetContext);
+    const childrenRef = useRef(null);
     const instance = useMemo(() => {
         const instance = createWidget({ ...properties, view });
         if (parentWidgetContext instanceof Expand) {
@@ -29,10 +30,23 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
             view.ui.add(instance, position);
         }
         return instance;
-    }, []);
+    }, [view]);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(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
+     */
+    useEffect(() => {
+        if (children && childrenRef.current && instance) {
+            if (React.isValidElement(children)) {
+                if (instance instanceof Expand) {
+                    instance.content = childrenRef.current;
+                }
+            }
+        }
+    }, [children, instance]);
     /**
      * Remove widget on unmount
      */
@@ -43,5 +57,8 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
     }, []);
     if (!children)
         return null;
-    return (_jsx(WidgetContext.Provider, { value: instance, children: children }));
+    // Pass ref to the child element - works for both HTML elements and forwardRef components
+    return (_jsx(WidgetContext.Provider, { value: instance, children: React.cloneElement(children, {
+            ref: childrenRef,
+        }) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "esrieact",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -23,17 +23,16 @@
     "./widgets/*": "./dist/widgets/*"
   },
   "dependencies": {
-    "lodash.isequal": "^4.5.0",
-    "usehooks-ts": "^2.9.1"
+    "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
-    "@arcgis/core": "^4.28.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@arcgis/core": "^4.30.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "^5.2.2"
   }
 }