@arcgis/map-components-react 4.33.0-next.5 → 4.33.0-next.51

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

@@ -228,6 +228,13 @@ export declare const ArcgisLinkChart: import("@lit/react").ReactWebComponent<HTM
     onArcgisViewPointerUp: EventName<HTMLArcgisLinkChartElement["arcgisViewPointerUp"]>;
     onArcgisViewReadyChange: EventName<HTMLArcgisLinkChartElement["arcgisViewReadyChange"]>;
 }>;
+export declare const ArcgisLinkChartLayoutSwitcher: import("@lit/react").ReactWebComponent<HTMLArcgisLinkChartLayoutSwitcherElement & {
+    class?: string;
+}, {
+    onArcgisPropertyChange: EventName<HTMLArcgisLinkChartLayoutSwitcherElement["arcgisPropertyChange"]>;
+    onArcgisReady: EventName<HTMLArcgisLinkChartLayoutSwitcherElement["arcgisReady"]>;
+    onArcgisSwitchLayout: EventName<HTMLArcgisLinkChartLayoutSwitcherElement["arcgisSwitchLayout"]>;
+}>;
 export declare const ArcgisLocate: import("@lit/react").ReactWebComponent<HTMLArcgisLocateElement & {
     class?: string;
 }, {
@@ -424,6 +431,7 @@ export declare const ArcgisUtilityNetworkTrace: import("@lit/react").ReactWebCom
 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 & {

package/dist/components.js

@@ -165,6 +165,11 @@ export const ArcgisLinkChart = /*@__PURE__*/ createWrapper(getReactWrapperOption
     onArcgisViewPointerUp: "arcgisViewPointerUp",
     onArcgisViewReadyChange: "arcgisViewReadyChange",
 }));
+export const ArcgisLinkChartLayoutSwitcher = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-link-chart-layout-switcher", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
+    onArcgisReady: "arcgisReady",
+    onArcgisSwitchLayout: "arcgisSwitchLayout",
+}));
 export const ArcgisLocate = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-locate", {
     onArcgisError: "arcgisError",
     onArcgisPropertyChange: "arcgisPropertyChange",
@@ -317,6 +322,7 @@ export const ArcgisUtilityNetworkTrace = /*@__PURE__*/ createWrapper(getReactWra
     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", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/map-components-react",
-  "version": "4.33.0-next.5",
+  "version": "4.33.0-next.51",
   "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.5",
-    "@esri/calcite-components": "~3.0.0-next",
+    "@arcgis/map-components": "4.33.0-next.51",
+    "@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"
   }