esrieact 0.1.0

package/dist/map/MapView.d.ts

@@ -0,0 +1,144 @@
+import React, { HTMLAttributes, ReactNode, Dispatch, SetStateAction } from "react";
+import EsriMap from "@arcgis/core/Map";
+import EsriMapView from "@arcgis/core/views/MapView";
+import "@arcgis/core/assets/esri/themes/light/main.css";
+import { HandlerWithOptionalModifiers } from "../utils";
+/**
+ * View event handler function map, key is the event name, value is the handler functionm
+ * or an object that defines the handler function and optional modifiers
+ */
+export type ViewEventHandlerFnMap = Partial<{
+    resize: __esri.ViewResizeEventHandler;
+    "layerview-create": __esri.ViewLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.ViewLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.ViewLayerviewDestroyEventHandler;
+    click: HandlerWithOptionalModifiers<__esri.ViewClickEventHandler>;
+    "double-click": HandlerWithOptionalModifiers<__esri.ViewDoubleClickEventHandler>;
+    "immediate-double-click": HandlerWithOptionalModifiers<__esri.ViewImmediateDoubleClickEventHandler>;
+    "immediate-click": HandlerWithOptionalModifiers<__esri.ViewImmediateClickEventHandler>;
+    hold: HandlerWithOptionalModifiers<__esri.ViewHoldEventHandler>;
+    drag: HandlerWithOptionalModifiers<__esri.ViewDragEventHandler>;
+    "mouse-wheel": HandlerWithOptionalModifiers<__esri.ViewMouseWheelEventHandler>;
+    "key-down": HandlerWithOptionalModifiers<__esri.ViewKeyDownEventHandler>;
+    "key-up": HandlerWithOptionalModifiers<__esri.ViewKeyUpEventHandler>;
+    "pointer-down": HandlerWithOptionalModifiers<__esri.ViewPointerDownEventHandler>;
+    "pointer-move": HandlerWithOptionalModifiers<__esri.ViewPointerMoveEventHandler>;
+    "pointer-up": HandlerWithOptionalModifiers<__esri.ViewPointerUpEventHandler>;
+    "pointer-enter": HandlerWithOptionalModifiers<__esri.ViewPointerEnterEventHandler>;
+    "pointer-leave": HandlerWithOptionalModifiers<__esri.ViewPointerLeaveEventHandler>;
+    focus: __esri.ViewFocusEventHandler;
+    blur: __esri.ViewBlurEventHandler;
+}>;
+/**
+ * Properties that the MapContext provides to all consumers
+ */
+interface MapReference {
+    /**
+     * The esri [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html) instance
+     */
+    map: EsriMap;
+    /**
+     * The esri [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) instance
+     */
+    view: EsriMapView;
+}
+/**
+ * The react ref object describing the MapView component's ref
+ */
+export interface MapRef extends MapReference {
+    /**
+     * The HTML element that the map is rendered in
+     */
+    element?: HTMLDivElement;
+}
+interface MapContextProps extends MapReference {
+    /**
+     * Callback to set map
+     */
+    setMap: Dispatch<SetStateAction<EsriMap>>;
+    /**
+     * Callback to set map
+     */
+    setView: Dispatch<SetStateAction<EsriMapView>>;
+}
+/**
+ * The map context that holds references to the underlying Map and MapView objects
+ */
+export declare const MapContext: React.Context<MapContextProps>;
+interface MapContextProviderProps {
+    children?: ReactNode | ReactNode[];
+}
+/**
+ * Provider which provides the map context to all descedants
+ */
+export declare const MapContextProvider: React.FC<MapContextProviderProps>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Properties passed to the [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html)
+     */
+    MapProperties?: __esri.MapProperties;
+    /**
+     * Properties passed to the [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)
+     */
+    ViewProperties?: __esri.MapViewProperties & {
+        /**
+         * Events that are attached to the MapView.  Can be an event handler function map, or a function of the `view`
+         * which return an event handler function map
+         */
+        events?: ViewEventHandlerFnMap | ((view: __esri.MapView) => ViewEventHandlerFnMap);
+    };
+    /**
+     * Any layers or controls to be rendered as part of the map
+     */
+    children?: ReactNode | ReactNode[];
+}
+/**
+ * MapView Component for 2D map. Accepts properties for both the Map and the MapView.  Renders the container
+ * div, and once mounted, renders the map to it.
+ *
+ * ***Does not provide its own Map Context, and as such, will fail if you do not manuaaly provide one***
+ *
+ * @example
+ * // App.tsx
+ * import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+ *
+ * const App = () => {
+ *    return (
+ *      <MapContextProvider>
+ *        <MapViewCore />
+ *        <OtherUI />
+ *      </MapContextProvider>
+ *    )
+ * }
+ *
+ * // OtherUI.tsx
+ * import { useContext } from 'react';
+ * import { MapContext } from 'lib/map/MapView';
+ *
+ * const OtherUI = () => {
+ *    const { view } = useContext(MapContext);
+ *
+ *    return <button onClick={() => view.zoom = view.zoom + 1}>Zoom in!</button>
+ * }
+ *
+ * ArcGIS JS API Source Components:
+ * - [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html)
+ * - [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)
+ */
+export declare const MapViewCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<MapReference & {
+    element?: HTMLElement | undefined;
+}>>;
+/**
+ * MapView Component for 2D map. Accepts properties for both the Map and the MapView.  Renders the container
+ * div, and once mounted, renders the map to it.
+ *
+ * ArcGIS JS API Source Components:
+ * - [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html)
+ * - [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)
+ */
+export declare const MapView: React.ForwardRefExoticComponent<Props & React.RefAttributes<MapReference>>;
+/**
+ * Utility hook to get the undnerlying `map` and `view` instances of a MapView
+ */
+export declare const useMap: () => MapReference;
+export {};

package/dist/map/MapView.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useContext, useImperativeHandle, } from "react";
+import EsriMap from "@arcgis/core/Map";
+import EsriMapView from "@arcgis/core/views/MapView";
+import "@arcgis/core/assets/esri/themes/light/main.css";
+import { useEsriPropertyUpdates, useEvents, } from "../utils";
+/**
+ * The map context that holds references to the underlying Map and MapView objects
+ */
+export const MapContext = React.createContext({});
+/**
+ * Provider which provides the map context to all descedants
+ */
+export const MapContextProvider = ({ children, }) => {
+    const [map, setMap] = useState(undefined);
+    const [view, setView] = useState(undefined);
+    return (_jsx(MapContext.Provider, { value: {
+            map,
+            setMap,
+            view,
+            setView,
+        }, children: children }));
+};
+/**
+ * MapView Component for 2D map. Accepts properties for both the Map and the MapView.  Renders the container
+ * div, and once mounted, renders the map to it.
+ *
+ * ***Does not provide its own Map Context, and as such, will fail if you do not manuaaly provide one***
+ *
+ * @example
+ * // App.tsx
+ * import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+ *
+ * const App = () => {
+ *    return (
+ *      <MapContextProvider>
+ *        <MapViewCore />
+ *        <OtherUI />
+ *      </MapContextProvider>
+ *    )
+ * }
+ *
+ * // OtherUI.tsx
+ * import { useContext } from 'react';
+ * import { MapContext } from 'lib/map/MapView';
+ *
+ * const OtherUI = () => {
+ *    const { view } = useContext(MapContext);
+ *
+ *    return <button onClick={() => view.zoom = view.zoom + 1}>Zoom in!</button>
+ * }
+ *
+ * ArcGIS JS API Source Components:
+ * - [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html)
+ * - [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)
+ */
+export const MapViewCore = React.forwardRef((props, ref) => {
+    //
+    const { MapProperties, ViewProperties: { events: viewEvents, ...ViewProperties } = {}, children, ...rest } = props;
+    const [containerRef, setContainerRef] = useState();
+    const { map, setMap, view, setView } = useContext(MapContext);
+    useImperativeHandle(ref, () => ({ map, view, element: containerRef }));
+    useEvents(view, typeof viewEvents === "function" ? viewEvents(view) : viewEvents);
+    /**
+     * On mount, once the container reference is ready, create the map and the view
+     */
+    useEffect(() => {
+        if (containerRef) {
+            const map = new EsriMap(MapProperties);
+            const view = new EsriMapView({
+                map,
+                container: containerRef,
+                ...ViewProperties,
+            });
+            setMap(map);
+            setView(view);
+        }
+    }, [containerRef]);
+    /**
+     * Imperatively set properties on esri view instance if properties change
+     */
+    useEsriPropertyUpdates(map, MapProperties);
+    useEsriPropertyUpdates(view, ViewProperties);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: (element) => {
+                    if (element)
+                        setContainerRef(element);
+                }, ...rest }), map && view && children] }));
+});
+/**
+ * MapView Component for 2D map. Accepts properties for both the Map and the MapView.  Renders the container
+ * div, and once mounted, renders the map to it.
+ *
+ * ArcGIS JS API Source Components:
+ * - [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html)
+ * - [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)
+ */
+export const MapView = React.forwardRef((props, ref) => {
+    return (_jsx(MapContextProvider, { children: _jsx(MapViewCore, { ...props, ref: 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) {
+        throw new Error("Cannot find esrieact map context, are you sure your component is a descendent of a MapContext?");
+    }
+    return { map, view };
+};

package/dist/map/index.d.ts

@@ -0,0 +1 @@
+export * from "./MapView";

package/dist/map/index.js

@@ -0,0 +1 @@
+export * from "./MapView";

package/dist/symbols/SymbolPreview.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface Props {
+    /**
+     * The symbol to render in HTML
+     */
+    symbol: __esri.Symbol;
+    /**
+     * HTML rendering options to be passed to `renderPreviewHTML`
+     */
+    options?: __esri.symbolUtilsRenderPreviewHTMLOptions;
+}
+/**
+ * Component which renders HTML markup for a symbol based on its renderer.symbol JSON
+ */
+export declare const SymbolPreview: React.FC<Props>;
+export {};

package/dist/symbols/SymbolPreview.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as symbolUtils from "@arcgis/core/symbols/support/symbolUtils.js";
+/**
+ * Component which renders HTML markup for a symbol based on its renderer.symbol JSON
+ */
+export const SymbolPreview = ({ symbol, options }) => {
+    const ref = useRef(null);
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        if (result && !ref.current?.innerHTML) {
+            ref.current?.appendChild(result);
+        }
+    }, [result, JSON.stringify(symbol.toJSON())]);
+    useMemo(async () => {
+        const localOptions = symbol.type === "simple-fill" ? { size: 12 } : undefined;
+        const symbolNode = await symbolUtils.renderPreviewHTML(symbol, options ?? localOptions);
+        setResult(symbolNode);
+    }, [JSON.stringify(symbol.toJSON())]);
+    return _jsx("div", { ref: ref });
+};

package/dist/symbols/index.d.ts

@@ -0,0 +1 @@
+export * from "./SymbolPreview";

package/dist/symbols/index.js

@@ -0,0 +1 @@
+export * from "./SymbolPreview";

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useEsriPropertyUpdates";
+export * from "./useEvents";
+export declare function getObjectDiff(obj1: Record<string, any>, obj2: Record<string, any>): string[];

package/dist/utils/index.js

@@ -0,0 +1,30 @@
+import isEqual from "lodash.isequal";
+export * from "./useEsriPropertyUpdates";
+export * from "./useEvents";
+/*
+ * Compare two objects by reducing an array of keys in obj1, having the
+ * keys in obj2 as the intial value of the result. Key points:
+ *
+ * - All keys of obj2 are initially in the result.
+ *
+ * - If the loop finds a key (from obj1, remember) not in obj2, it adds
+ *   it to the result.
+ *
+ * - If the loop finds a key that are both in obj1 and obj2, it compares
+ *   the value. If it's the same value, the key is removed from the result.
+ *
+ * From https://stackoverflow.com/a/40610459/12010984
+ */
+export function getObjectDiff(obj1, obj2) {
+    const diff = Object.keys(obj1).reduce((result, key) => {
+        if (!obj2.hasOwnProperty(key)) {
+            result.push(key);
+        }
+        else if (isEqual(obj1[key], obj2[key])) {
+            const resultKeyIndex = result.indexOf(key);
+            result.splice(resultKeyIndex, 1);
+        }
+        return result;
+    }, Object.keys(obj2));
+    return diff;
+}

package/dist/utils/useEsriPropertyUpdates.d.ts

@@ -0,0 +1,10 @@
+interface EsriClassable {
+    constructor: Function;
+}
+/**
+ * Generic hook to update an existing ESRI class object instance with new properties
+ * @param instance The ESRI item instance to update
+ * @param properties The properties passed to the esri instance
+ */
+export declare const useEsriPropertyUpdates: <T extends EsriClassable, P>(instance: T | undefined, properties: P) => void;
+export {};

package/dist/utils/useEsriPropertyUpdates.js

@@ -0,0 +1,26 @@
+import { useUpdateEffect } from "usehooks-ts";
+import { usePrevious } from "./usePrevious";
+import { getObjectDiff } from ".";
+/**
+ * Generic hook to update an existing ESRI class object instance with new properties
+ * @param instance The ESRI item instance to update
+ * @param properties The properties passed to the esri instance
+ */
+export const useEsriPropertyUpdates = (instance, properties) => {
+    const prevProperties = usePrevious(properties);
+    /**
+     * Imperatively set properties on ESRI instance if properties change, based on the setter
+     * technique described here: https://developers.arcgis.com/javascript/latest/programming-patterns/#setters
+     */
+    useUpdateEffect(() => {
+        if (prevProperties) {
+            const updatedProperties = getObjectDiff(properties, prevProperties);
+            if (updatedProperties.length) {
+                updatedProperties.forEach((property) => {
+                    // @ts-expect-error Need to properly type this
+                    instance[property] = properties[property];
+                });
+            }
+        }
+    }, [JSON.stringify(properties)]);
+};

package/dist/utils/useEvents.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Event handler that takes in modifier parameter
+ */
+export type WithMofidiers<T extends Function = Function> = {
+    modifiers: string[];
+    handler: T;
+};
+/**
+ * View event callback that may or may not take optional modifiers
+ */
+export type HandlerWithOptionalModifiers<T extends Function = Function> = T | WithMofidiers<T>;
+export type EventHandlerMap = Record<string, Function | HandlerWithOptionalModifiers>;
+/**
+ * Utility hook to attach event handlers to an esri [Accessor](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html)
+ * instance, and refresh those event handlers if they are updated
+ *
+ * @param instance The esri item instance to attach events to
+ * @param events The events to attach, in the form of an event handler function map
+ */
+export declare function useEvents<I extends __esri.Accessor, E extends EventHandlerMap>(instance: I, events?: E): void;

package/dist/utils/useEvents.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+/**
+ * Utility hook to attach event handlers to an esri [Accessor](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html)
+ * instance, and refresh those event handlers if they are updated
+ *
+ * @param instance The esri item instance to attach events to
+ * @param events The events to attach, in the form of an event handler function map
+ */
+export function useEvents(instance, events) {
+    const handlers = useRef([]);
+    /**
+     * Attach event listeners on mount, if there are any
+     */
+    useEffect(() => {
+        if (instance && events) {
+            handlers.current.forEach((handler) => handler.remove());
+            handlers.current = Object.keys(events).map((eventName) => {
+                const eventHandler = events[eventName];
+                if (eventHandler) {
+                    if (eventHandler.modifiers) {
+                        const { modifiers, handler } = eventHandler;
+                        // @ts-expect-error allow events to be handled
+                        return instance.on(eventName, modifiers, handler);
+                    }
+                    else {
+                        // @ts-expect-error allow events to be handled
+                        return instance.on(eventName, eventHandler);
+                    }
+                }
+            });
+        }
+        // Remove listeners and flush listener ref on unmount
+        return () => {
+            handlers.current.forEach((handler) => handler.remove());
+            handlers.current = [];
+        };
+    }, [instance, events]);
+}

package/dist/utils/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/dist/utils/usePrevious.js

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

package/dist/widgets/BasemapGallery.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriBasemapGallery from "@arcgis/core/widgets/BasemapGallery";
+/**
+ * An BasemapGallery Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [BasemapGallery](https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemapgallery/)
+ */
+export declare const BasemapGallery: React.ForwardRefExoticComponent<__esri.BasemapGalleryProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriBasemapGallery>>;

package/dist/widgets/BasemapGallery.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriBasemapGallery from "@arcgis/core/widgets/BasemapGallery";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriBasemapGallery(properties);
+};
+/**
+ * An BasemapGallery Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [BasemapGallery](https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemapgallery/)
+ */
+export const BasemapGallery = React.forwardRef((properties, ref) => createWidgetComponent(createWidget, ref, properties));

package/dist/widgets/Expand.d.ts

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

package/dist/widgets/Expand.js

@@ -0,0 +1,15 @@
+import React from "react";
+import EsriExpandWidget from "@arcgis/core/widgets/Expand";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriExpandWidget(properties);
+};
+/**
+ * An Expand Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Expand](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html)
+ */
+export const Expand = React.forwardRef((properties, ref) => {
+    return createWidgetComponent(createWidget, ref, properties);
+});

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

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriListItem from "@arcgis/core/widgets/LayerList/ListItem";
+/**
+ * An LayerList ListItem component
+ *
+ * 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;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriListItem>>;

package/dist/widgets/LayerList/ListItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriListItem from "@arcgis/core/widgets/LayerList/ListItem";
+import { createWidgetComponent } from "..";
+const createWidget = (properties) => {
+    return new EsriListItem(properties);
+};
+/**
+ * An LayerList ListItem component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ListItem](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html)
+ */
+export const LayerList = React.forwardRef((properties, ref) => createWidgetComponent(createWidget, ref, properties));

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

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

package/dist/widgets/LayerList/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriLayerList from "@arcgis/core/widgets/LayerList";
+import { createWidgetComponent } from "..";
+const createWidget = (properties) => {
+    return new EsriLayerList(properties);
+};
+/**
+ * An LayerList Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [LayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html)
+ */
+export const LayerList = React.forwardRef((properties, ref) => createWidgetComponent(createWidget, ref, properties));

package/dist/widgets/Legend.d.ts

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

package/dist/widgets/Legend.js

@@ -0,0 +1,15 @@
+import React from "react";
+import EsriLegendWidget from "@arcgis/core/widgets/Legend";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriLegendWidget(properties);
+};
+/**
+ * A Legend Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Legend](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html)
+ */
+export const Legend = React.forwardRef((properties, ref) => {
+    return createWidgetComponent(createWidget, ref, properties);
+});

package/dist/widgets/SearchBar.d.ts

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

package/dist/widgets/SearchBar.js

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