@arcgis/map-components-react 4.33.0-next.11 → 4.33.0-next.110

package/README.md

@@ -1,8 +1,8 @@
 # ArcGIS Maps SDK for JavaScript - React wrapper for Map Components
 
-The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package contains a map component, scene component, and many other components with functionality made possible through the SDK's core API which is also accessible through the components.
+> Note: `@arcgis/map-components-react` was developed for use in React 18. Consider updating to React 19 where the React wrapper is no longer necessary. Check out the [documentation](https://developers.arcgis.com/javascript/latest/get-started-react/) to get started with `@arcgis/map-components` in React 19.
 
-Samples for how to use this package are available on github in the [jsapi-resources](https://github.com/Esri/jsapi-resources) repository.
+The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package contains a map component, scene component, and many other components with functionality made possible through the SDK's core API which is also accessible through the components.
 
 ## Documentation
 
@@ -20,11 +20,69 @@ Samples for how to use this package are available on github in the [jsapi-resour
 - [Licensing](https://developers.arcgis.com/javascript/latest/licensing/)
 - [Working with `next` versions](https://github.com/Esri/feedback-js-api-next/blob/main/README.md)
 
-## Issues
+## Support
 
 - General questions about using this package or the ArcGIS Maps SDK for JavaScript? See the [Esri developer community](https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript).
 - [Technical support](https://support.esri.com/).
 
+## Quick start guide
+
+- Get started by using the [react 18 sample](https://developers.arcgis.com/javascript/latest/get-started-react/#download-project).
+- Install the required packages: `@arcgis/map-components-react`, `@arcgis/core`, `@esri/calcite-components-react`.
+- Import the necessary CSS files in your project and ensure CSS is configured for the map components:
+
+```js
+@import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/dark/main.css';
+@import url("https://js.arcgis.com/calcite-components/2.3.2/calcite.css");
+
+#root,
+html,
+body {
+  margin: 0;
+}
+
+arcgis-map {
+  display: block;
+  height: 100vh;
+}
+```
+
+- Add map component: In your main file (e.g., index.tsx), add the `ArcgisMap` component and configure it with an optional `item-id` if using a WebMap from ArcGIS Online or an ArcGIS Enterprise portal:
+
+```js
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@arcgis/map-components/components/arcgis-map";
+import "@arcgis/map-components/components/arcgis-zoom";
+import { ArcgisMap, ArcgisZoom } from "@arcgis/map-components-react";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <ArcgisMap itemId="your-webmap-item-id"></ArcgisMap>
+  </React.StrictMode>,
+);
+```
+
+- Add additional functionality: To your map, you could set properties and use events like `onArcgisViewReadyChange` to detect when the map view is ready, and implement custom JavaScript logic using the core API. For example, you can add the `ArcgisZoom` component and listen for view changes:
+
+```js
+root.render(
+  <React.StrictMode>
+    <ArcgisMap
+      itemId="your-webmap-item-id"
+      onArcgisViewReadyChange={(event: CustomEvent) => {
+        console.log("MapView ready", event);
+      }}
+    >
+      <ArcgisZoom position="top-left"></ArcgisZoom>
+    </ArcgisMap>
+  </React.StrictMode>
+);
+```
+
+Alternatively, an [example](https://github.com/Esri/jsapi-resources/tree/50579b9362b846e869a343b660c5a2415176a275/component-samples/map-components/samples/react) is available from the 4.31 release in the jsapi-resources repo.
+
 ## License
 
 COPYRIGHT © 2025 Esri

package/dist/components.d.ts

@@ -27,6 +27,7 @@ export declare const ArcgisBasemapGallery: import("@lit/react").ReactWebComponen
 export declare const ArcgisBasemapLayerList: import("@lit/react").ReactWebComponent<HTMLArcgisBasemapLayerListElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisBasemapLayerListElement["arcgisClose"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisBasemapLayerListElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisBasemapLayerListElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisBasemapLayerListElement["arcgisTriggerAction"]>;
@@ -40,6 +41,7 @@ export declare const ArcgisBasemapToggle: import("@lit/react").ReactWebComponent
 export declare const ArcgisBookmarks: import("@lit/react").ReactWebComponent<HTMLArcgisBookmarksElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisBookmarksElement["arcgisClose"]>;
     onArcgisEdit: EventName<HTMLArcgisBookmarksElement["arcgisEdit"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisBookmarksElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisBookmarksElement["arcgisReady"]>;
@@ -54,6 +56,7 @@ export declare const ArcgisBuildingExplorer: import("@lit/react").ReactWebCompon
 export declare const ArcgisCatalogLayerList: import("@lit/react").ReactWebComponent<HTMLArcgisCatalogLayerListElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisCatalogLayerListElement["arcgisClose"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisCatalogLayerListElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisCatalogLayerListElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisCatalogLayerListElement["arcgisTriggerAction"]>;
@@ -152,6 +155,7 @@ export declare const ArcgisFeatureTemplates: import("@lit/react").ReactWebCompon
 export declare const ArcgisFeatures: import("@lit/react").ReactWebComponent<HTMLArcgisFeaturesElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisFeaturesElement["arcgisClose"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisFeaturesElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisFeaturesElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisFeaturesElement["arcgisTriggerAction"]>;
@@ -167,11 +171,11 @@ export declare const ArcgisFullscreen: import("@lit/react").ReactWebComponent<HT
     onArcgisPropertyChange: EventName<HTMLArcgisFullscreenElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisFullscreenElement["arcgisReady"]>;
 }>;
-export declare const ArcgisHistogram: import("@lit/react").ReactWebComponent<HTMLArcgisHistogramElement & {
+export declare const ArcgisGridControls: import("@lit/react").ReactWebComponent<HTMLArcgisGridControlsElement & {
     class?: string;
 }, {
-    onArcgisPropertyChange: EventName<HTMLArcgisHistogramElement["arcgisPropertyChange"]>;
-    onArcgisReady: EventName<HTMLArcgisHistogramElement["arcgisReady"]>;
+    onArcgisPropertyChange: EventName<HTMLArcgisGridControlsElement["arcgisPropertyChange"]>;
+    onArcgisReady: EventName<HTMLArcgisGridControlsElement["arcgisReady"]>;
 }>;
 export declare const ArcgisHistogramRangeSlider: import("@lit/react").ReactWebComponent<HTMLArcgisHistogramRangeSliderElement & {
     class?: string;
@@ -189,6 +193,7 @@ export declare const ArcgisHome: import("@lit/react").ReactWebComponent<HTMLArcg
 export declare const ArcgisLayerList: import("@lit/react").ReactWebComponent<HTMLArcgisLayerListElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisLayerListElement["arcgisClose"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisLayerListElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisLayerListElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisLayerListElement["arcgisTriggerAction"]>;
@@ -334,17 +339,20 @@ export declare const ArcgisScene: import("@lit/react").ReactWebComponent<HTMLArc
 export declare const ArcgisSearch: import("@lit/react").ReactWebComponent<HTMLArcgisSearchElement & {
     class?: string;
 }, {
-    onArcgisBlur: EventName<HTMLArcgisSearchElement["arcgisBlur"]>;
-    onArcgisClear: EventName<HTMLArcgisSearchElement["arcgisClear"]>;
-    onArcgisComplete: EventName<HTMLArcgisSearchElement["arcgisComplete"]>;
-    onArcgisFocus: EventName<HTMLArcgisSearchElement["arcgisFocus"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisSearchElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisSearchElement["arcgisReady"]>;
+    onArcgisSearchClear: EventName<HTMLArcgisSearchElement["arcgisSearchClear"]>;
+    onArcgisSearchComplete: EventName<HTMLArcgisSearchElement["arcgisSearchComplete"]>;
+    onArcgisSearchStart: EventName<HTMLArcgisSearchElement["arcgisSearchStart"]>;
     onArcgisSelectResult: EventName<HTMLArcgisSearchElement["arcgisSelectResult"]>;
-    onArcgisStart: EventName<HTMLArcgisSearchElement["arcgisStart"]>;
     onArcgisSuggestComplete: EventName<HTMLArcgisSearchElement["arcgisSuggestComplete"]>;
     onArcgisSuggestStart: EventName<HTMLArcgisSearchElement["arcgisSuggestStart"]>;
 }>;
+export declare const ArcgisSearchResultRenderer: import("@lit/react").ReactWebComponent<HTMLArcgisSearchResultRendererElement & {
+    class?: string;
+}, {
+    onArcgisReady: EventName<HTMLArcgisSearchResultRendererElement["arcgisReady"]>;
+}>;
 export declare const ArcgisShadowCast: import("@lit/react").ReactWebComponent<HTMLArcgisShadowCastElement & {
     class?: string;
 }, {
@@ -394,6 +402,7 @@ export declare const ArcgisSwipe: import("@lit/react").ReactWebComponent<HTMLArc
 export declare const ArcgisTableList: import("@lit/react").ReactWebComponent<HTMLArcgisTableListElement & {
     class?: string;
 }, {
+    onArcgisClose: EventName<HTMLArcgisTableListElement["arcgisClose"]>;
     onArcgisPropertyChange: EventName<HTMLArcgisTableListElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisTableListElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisTableListElement["arcgisTriggerAction"]>;
@@ -405,6 +414,12 @@ export declare const ArcgisTimeSlider: import("@lit/react").ReactWebComponent<HT
     onArcgisReady: EventName<HTMLArcgisTimeSliderElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisTimeSliderElement["arcgisTriggerAction"]>;
 }>;
+export declare const ArcgisTimeZoneLabel: import("@lit/react").ReactWebComponent<HTMLArcgisTimeZoneLabelElement & {
+    class?: string;
+}, {
+    onArcgisPropertyChange: EventName<HTMLArcgisTimeZoneLabelElement["arcgisPropertyChange"]>;
+    onArcgisReady: EventName<HTMLArcgisTimeZoneLabelElement["arcgisReady"]>;
+}>;
 export declare const ArcgisTrack: import("@lit/react").ReactWebComponent<HTMLArcgisTrackElement & {
     class?: string;
 }, {
@@ -425,12 +440,14 @@ export declare const ArcgisUtilityNetworkTrace: import("@lit/react").ReactWebCom
     onArcgisAddFlagComplete: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisAddFlagComplete"]>;
     onArcgisAddFlagError: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisAddFlagError"]>;
     onArcgisAddResultArea: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisAddResultArea"]>;
+    onArcgisPropertyChange: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisReady"]>;
     onArcgisRemoveResultArea: EventName<HTMLArcgisUtilityNetworkTraceElement["arcgisRemoveResultArea"]>;
 }>;
 export declare const ArcgisUtilityNetworkValidateTopology: import("@lit/react").ReactWebComponent<HTMLArcgisUtilityNetworkValidateTopologyElement & {
     class?: string;
 }, {
+    onArcgisPropertyChange: EventName<HTMLArcgisUtilityNetworkValidateTopologyElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisUtilityNetworkValidateTopologyElement["arcgisReady"]>;
 }>;
 export declare const ArcgisValuePicker: import("@lit/react").ReactWebComponent<HTMLArcgisValuePickerElement & {
@@ -450,6 +467,18 @@ export declare const ArcgisVersionManagement: import("@lit/react").ReactWebCompo
     onArcgisReady: EventName<HTMLArcgisVersionManagementElement["arcgisReady"]>;
     onArcgisVersioningStateChanged: EventName<HTMLArcgisVersionManagementElement["arcgisVersioningStateChanged"]>;
 }>;
+export declare const ArcgisVideo: import("@lit/react").ReactWebComponent<HTMLArcgisVideoElement & {
+    class?: string;
+}, {
+    onArcgisViewReadyChange: EventName<HTMLArcgisVideoElement["arcgisViewReadyChange"]>;
+}>;
+export declare const ArcgisVideoPlayer: import("@lit/react").ReactWebComponent<HTMLArcgisVideoPlayerElement & {
+    class?: string;
+}, {
+    onArcgisPropertyChange: EventName<HTMLArcgisVideoPlayerElement["arcgisPropertyChange"]>;
+    onArcgisReady: EventName<HTMLArcgisVideoPlayerElement["arcgisReady"]>;
+    onArcgisVideoReady: EventName<HTMLArcgisVideoPlayerElement["arcgisVideoReady"]>;
+}>;
 export declare const ArcgisWeather: import("@lit/react").ReactWebComponent<HTMLArcgisWeatherElement & {
     class?: string;
 }, {

package/dist/components.js

@@ -20,6 +20,7 @@ export const ArcgisBasemapGallery = /*@__PURE__*/ createWrapper(getReactWrapperO
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisBasemapLayerList = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-basemap-layer-list", {
+    onArcgisClose: "arcgisClose",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
@@ -29,6 +30,7 @@ export const ArcgisBasemapToggle = /*@__PURE__*/ createWrapper(getReactWrapperOp
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisBookmarks = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-bookmarks", {
+    onArcgisClose: "arcgisClose",
     onArcgisEdit: "arcgisEdit",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
@@ -39,6 +41,7 @@ export const ArcgisBuildingExplorer = /*@__PURE__*/ createWrapper(getReactWrappe
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisCatalogLayerList = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-catalog-layer-list", {
+    onArcgisClose: "arcgisClose",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
@@ -107,6 +110,7 @@ export const ArcgisFeatureTemplates = /*@__PURE__*/ createWrapper(getReactWrappe
     onArcgisSelect: "arcgisSelect",
 }));
 export const ArcgisFeatures = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-features", {
+    onArcgisClose: "arcgisClose",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
@@ -118,7 +122,7 @@ export const ArcgisFullscreen = /*@__PURE__*/ createWrapper(getReactWrapperOptio
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
 }));
-export const ArcgisHistogram = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-histogram", {
+export const ArcgisGridControls = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-grid-controls", {
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
 }));
@@ -132,6 +136,7 @@ export const ArcgisHome = /*@__PURE__*/ createWrapper(getReactWrapperOptions("ar
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisLayerList = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-layer-list", {
+    onArcgisClose: "arcgisClose",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
@@ -247,17 +252,18 @@ export const ArcgisScene = /*@__PURE__*/ createWrapper(getReactWrapperOptions("a
     onArcgisViewReadyChange: "arcgisViewReadyChange",
 }));
 export const ArcgisSearch = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-search", {
-    onArcgisBlur: "arcgisBlur",
-    onArcgisClear: "arcgisClear",
-    onArcgisComplete: "arcgisComplete",
-    onArcgisFocus: "arcgisFocus",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
+    onArcgisSearchClear: "arcgisSearchClear",
+    onArcgisSearchComplete: "arcgisSearchComplete",
+    onArcgisSearchStart: "arcgisSearchStart",
     onArcgisSelectResult: "arcgisSelectResult",
-    onArcgisStart: "arcgisStart",
     onArcgisSuggestComplete: "arcgisSuggestComplete",
     onArcgisSuggestStart: "arcgisSuggestStart",
 }));
+export const ArcgisSearchResultRenderer = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-search-result-renderer", {
+    onArcgisReady: "arcgisReady",
+}));
 export const ArcgisShadowCast = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-shadow-cast", {
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
@@ -295,6 +301,7 @@ export const ArcgisSwipe = /*@__PURE__*/ createWrapper(getReactWrapperOptions("a
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisTableList = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-table-list", {
+    onArcgisClose: "arcgisClose",
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
@@ -304,6 +311,10 @@ export const ArcgisTimeSlider = /*@__PURE__*/ createWrapper(getReactWrapperOptio
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
 }));
+export const ArcgisTimeZoneLabel = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-time-zone-label", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
+    onArcgisReady: "arcgisReady",
+}));
 export const ArcgisTrack = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-track", {
     onArcgisComplete: "arcgisComplete",
     onArcgisError: "arcgisError",
@@ -318,10 +329,12 @@ export const ArcgisUtilityNetworkTrace = /*@__PURE__*/ createWrapper(getReactWra
     onArcgisAddFlagComplete: "arcgisAddFlagComplete",
     onArcgisAddFlagError: "arcgisAddFlagError",
     onArcgisAddResultArea: "arcgisAddResultArea",
+    onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
     onArcgisRemoveResultArea: "arcgisRemoveResultArea",
 }));
 export const ArcgisUtilityNetworkValidateTopology = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-utility-network-validate-topology", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisValuePicker = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-value-picker", {
@@ -337,6 +350,14 @@ export const ArcgisVersionManagement = /*@__PURE__*/ createWrapper(getReactWrapp
     onArcgisReady: "arcgisReady",
     onArcgisVersioningStateChanged: "arcgisVersioningStateChanged",
 }));
+export const ArcgisVideo = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-video", {
+    onArcgisViewReadyChange: "arcgisViewReadyChange",
+}));
+export const ArcgisVideoPlayer = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-video-player", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
+    onArcgisReady: "arcgisReady",
+    onArcgisVideoReady: "arcgisVideoReady",
+}));
 export const ArcgisWeather = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-weather", {
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/map-components-react",
-  "version": "4.33.0-next.11",
+  "version": "4.33.0-next.110",
   "description": "A set of React components that wrap ArcGIS map components",
   "keywords": [
     "ArcGIS",
@@ -29,13 +29,13 @@
   ],
   "license": "SEE LICENSE.md",
   "dependencies": {
-    "@arcgis/map-components": "4.33.0-next.11",
-    "@esri/calcite-components": "~3.0.0-next",
+    "@arcgis/map-components": "4.33.0-next.110",
+    "@esri/calcite-components": "^3.2.0-next.15",
     "@lit/react": "^1.0.5",
     "tslib": "^2.7.0"
   },
   "peerDependencies": {
-    "@arcgis/core": ">=4.32.0-next <4.33",
+    "@arcgis/core": ">=4.33.0-next <4.34",
     "react": ">=18.0.0 <19.0.0",
     "react-dom": ">=18.0.0 <19.0.0"
   }