@arcgis/map-components-react 4.33.0-next.8 → 4.33.0-next.80

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

@@ -193,6 +193,11 @@ export declare const ArcgisLayerList: import("@lit/react").ReactWebComponent<HTM
     onArcgisReady: EventName<HTMLArcgisLayerListElement["arcgisReady"]>;
     onArcgisTriggerAction: EventName<HTMLArcgisLayerListElement["arcgisTriggerAction"]>;
 }>;
+export declare const ArcgisLayerListItem: import("@lit/react").ReactWebComponent<HTMLArcgisLayerListItemElement & {
+    class?: string;
+}, {
+    onArcgisPropertyChange: EventName<HTMLArcgisLayerListItemElement["arcgisPropertyChange"]>;
+}>;
 export declare const ArcgisLegend: import("@lit/react").ReactWebComponent<HTMLArcgisLegendElement & {
     class?: string;
 }, {
@@ -405,6 +410,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 +436,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 +463,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

@@ -136,6 +136,9 @@ export const ArcgisLayerList = /*@__PURE__*/ createWrapper(getReactWrapperOption
     onArcgisReady: "arcgisReady",
     onArcgisTriggerAction: "arcgisTriggerAction",
 }));
+export const ArcgisLayerListItem = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-layer-list-item", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
+}));
 export const ArcgisLegend = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-legend", {
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
@@ -304,6 +307,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 +325,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 +346,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.8",
+  "version": "4.33.0-next.80",
   "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.8",
-    "@esri/calcite-components": "~3.0.0-next",
+    "@arcgis/map-components": "4.33.0-next.80",
+    "@esri/calcite-components": "^3.0.3",
     "@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"
   }