@arcgis/map-components-react 4.33.0-next.98 → 4.33.0

package/README.md

@@ -1,13 +1,13 @@
 # ArcGIS Maps SDK for JavaScript - React wrapper for Map 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.
+> 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.
 
 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
 
 - [Key Features](https://developers.arcgis.com/javascript/latest/key-features/)
-- [Build with React](https://developers.arcgis.com/javascript/latest/get-started-react/)
+- [Build with React](https://developers.arcgis.com/javascript/latest/get-started/#react)
 - [API and component references](https://developers.arcgis.com/javascript/latest/references/)
 - [Functionality samples](https://developers.arcgis.com/javascript/latest/sample-code/)
 
@@ -27,61 +27,7 @@ The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI component
 
 ## 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.
+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
 

package/dist/components.d.ts

@@ -77,6 +77,7 @@ export declare const ArcgisDaylight: import("@lit/react").ReactWebComponent<HTML
     class?: string;
 }, {
     onArcgisReady: EventName<HTMLArcgisDaylightElement["arcgisReady"]>;
+    onArcgisUserDateTimeChange: EventName<HTMLArcgisDaylightElement["arcgisUserDateTimeChange"]>;
 }>;
 export declare const ArcgisDirectionalPad: import("@lit/react").ReactWebComponent<HTMLArcgisDirectionalPadElement & {
     class?: string;
@@ -90,6 +91,12 @@ export declare const ArcgisDirections: import("@lit/react").ReactWebComponent<HT
     onArcgisPropertyChange: EventName<HTMLArcgisDirectionsElement["arcgisPropertyChange"]>;
     onArcgisReady: EventName<HTMLArcgisDirectionsElement["arcgisReady"]>;
 }>;
+export declare const ArcgisDirectLineMeasurement3d: import("@lit/react").ReactWebComponent<HTMLArcgisDirectLineMeasurement3dElement & {
+    class?: string;
+}, {
+    onArcgisPropertyChange: EventName<HTMLArcgisDirectLineMeasurement3dElement["arcgisPropertyChange"]>;
+    onArcgisReady: EventName<HTMLArcgisDirectLineMeasurement3dElement["arcgisReady"]>;
+}>;
 export declare const ArcgisDirectlineMeasurement3d: import("@lit/react").ReactWebComponent<HTMLArcgisDirectlineMeasurement3dElement & {
     class?: string;
 }, {
@@ -198,11 +205,6 @@ 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;
 }, {
@@ -321,6 +323,9 @@ export declare const ArcgisScaleRangeSlider: import("@lit/react").ReactWebCompon
 export declare const ArcgisScene: import("@lit/react").ReactWebComponent<HTMLArcgisSceneElement & {
     class?: string;
 }, {
+    onArcgisViewAnalysisViewCreate: EventName<HTMLArcgisSceneElement["arcgisViewAnalysisViewCreate"]>;
+    onArcgisViewAnalysisViewCreateError: EventName<HTMLArcgisSceneElement["arcgisViewAnalysisViewCreateError"]>;
+    onArcgisViewAnalysisViewDestroy: EventName<HTMLArcgisSceneElement["arcgisViewAnalysisViewDestroy"]>;
     onArcgisViewChange: EventName<HTMLArcgisSceneElement["arcgisViewChange"]>;
     onArcgisViewClick: EventName<HTMLArcgisSceneElement["arcgisViewClick"]>;
     onArcgisViewDoubleClick: EventName<HTMLArcgisSceneElement["arcgisViewDoubleClick"]>;

package/dist/components.js

@@ -56,6 +56,7 @@ export const ArcgisCoordinateConversion = /*@__PURE__*/ createWrapper(getReactWr
 }));
 export const ArcgisDaylight = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-daylight", {
     onArcgisReady: "arcgisReady",
+    onArcgisUserDateTimeChange: "arcgisUserDateTimeChange",
 }));
 export const ArcgisDirectionalPad = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-directional-pad", {
     onArcgisPropertyChange: "arcgisPropertyChange",
@@ -65,6 +66,10 @@ export const ArcgisDirections = /*@__PURE__*/ createWrapper(getReactWrapperOptio
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
 }));
+export const ArcgisDirectLineMeasurement3d = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-direct-line-measurement-3d", {
+    onArcgisPropertyChange: "arcgisPropertyChange",
+    onArcgisReady: "arcgisReady",
+}));
 export const ArcgisDirectlineMeasurement3d = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-directline-measurement-3d", {
     onArcgisPropertyChange: "arcgisPropertyChange",
     onArcgisReady: "arcgisReady",
@@ -141,9 +146,6 @@ 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",
@@ -234,6 +236,9 @@ export const ArcgisScaleRangeSlider = /*@__PURE__*/ createWrapper(getReactWrappe
     onArcgisReady: "arcgisReady",
 }));
 export const ArcgisScene = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-scene", {
+    onArcgisViewAnalysisViewCreate: "arcgisViewAnalysisViewCreate",
+    onArcgisViewAnalysisViewCreateError: "arcgisViewAnalysisViewCreateError",
+    onArcgisViewAnalysisViewDestroy: "arcgisViewAnalysisViewDestroy",
     onArcgisViewChange: "arcgisViewChange",
     onArcgisViewClick: "arcgisViewClick",
     onArcgisViewDoubleClick: "arcgisViewDoubleClick",

package/package.json

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