Merge pull request #128 from microsoft/2.0.0

Release-2.0.0

Author: ayeshurun

README.md

@@ -188,6 +188,10 @@ async getReportPages(): Page[] {
 ```
 
 
+## Note
+
+The library supports React applications having version **>= 18**.
+
 ## Dependencies
 
 [powerbi-client](https://www.npmjs.com/package/powerbi-client)
@@ -220,6 +224,7 @@ If you use these features, you must comply with applicable law, including provid
 Our privacy statement is located at [Microsoft Privacy Statement](https://privacy.microsoft.com/privacystatement). You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.
 
 ## Support
+
 - **Feature Requests:** Submit your ideas and suggestions to the [Fabric Ideas Portal](https://ideas.fabric.microsoft.com/), where you can also vote on ideas from other developers.
 - **Bug Reports and Technical Assistance:** Visit the [Fabric Developer Community Forum](https://community.fabric.microsoft.com/t5/Developer/bd-p/Developer). Our team and community experts are ready to assist you.
-- **Additional Support:** Contact your account manager or reach out to the [Fabric Support Team](https://support.fabric.microsoft.com/en-us/support/).
+- **Additional Support:** Contact your account manager or reach out to the [Fabric Support Team](https://support.fabric.microsoft.com/en-us/support/).

React/demo/package.json

@@ -1,28 +1,30 @@
 {
 	"name": "powerbi-client-react-demo",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Demo for usage of powerbi-client-react",
 	"scripts": {
 		"demo": "webpack-dev-server --static ./src/ --open"
 	},
 	"license": "MIT",
 	"dependencies": {
-		"powerbi-client-react": "^1.4.0",
-		"powerbi-report-authoring": "^1.1",
-		"react-app-polyfill": "^1.0.6"
+		"@fluentui/web-components": "^2.6.1",
+		"@microsoft/fast-react-wrapper": "^0.3.24",
+		"powerbi-client-react": "^2.0.0",
+		"powerbi-report-authoring": "^2.0.0",
+		"react-app-polyfill": "^3.0.0"
 	},
 	"peerDependencies": {
-		"react": ">= 16.8"
+		"react": ">= 18"
 	},
 	"devDependencies": {
-		"@types/react": "^16.9.35",
-		"@types/react-dom": "^16.9.8",
+		"@types/react": "^18.3.10",
+		"@types/react-dom": "^18.3.0",
 		"css-loader": "^3.5.3",
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"style-loader": "^1.2.1",
 		"ts-loader": "^9.4.2",
-		"typescript": "^4.8.4",
+		"typescript": "^4.9.5",
 		"webpack": "^5.71.0",
 		"webpack-cli": "^4.9.2",
 		"webpack-dev-server": "^4.11.1"

React/demo/src/DemoApp.css

@@ -1,30 +1,44 @@
 /* Copyright (c) Microsoft Corporation.
 Licensed under the MIT License. */
 
-.report-container {
-	height: 75vh;
-	margin: 8px auto;
-	width: 90%;
-}
-
 body {
 	font-family: 'Segoe UI';
 	margin: 0;
 }
 
+button {
+	background: #117865;
+	border: 0;
+	border-radius: 5px;
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 16px;
+	height: 35px;
+	margin-bottom: 8px;
+	margin-right: 15px;
+	min-width: 270px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: calc((100% / 3) - 120px);
+}
+
+.button-container {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 1120px;
+}
+
 .container {
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
 }
 
-.header {
-	background: #3476ae 0 0 no-repeat padding-box;
-	border: 1px solid #707070;
-	color: #ffffff;
-	font: 700 22px/27px 'Segoe UI';
-	padding: 13px 13px 13px 36px;
-	text-align: left;
+.controls {
+	flex: 1;
+	margin-top: 20px;
+	text-align: center;
 }
 
 .display-message {
@@ -33,24 +47,14 @@ body {
 	font: 400 18px/27px 'Segoe UI';
 	height: 30px;
 	justify-content: center;
-	margin-top: 8px;
 	text-align: center;
 }
 
-.position {
-	margin-top: 40vh;
-}
-
 .embed-report {
+	margin-right: 0;
 	margin-top: 18px;
 	text-align: center;
-	margin-right: 0;
-}
-
-.controls {
-	margin-top: 20px;
-	text-align: center;
-	flex: 1;
+	width: 180px;
 }
 
 .footer {
@@ -63,6 +67,11 @@ body {
 	width: 100%;
 }
 
+.footer a {
+	color: #3a3a3a;
+	text-decoration: underline;
+}
+
 .footer * {
 	padding: 0 3px;
 }
@@ -73,26 +82,42 @@ body {
 	vertical-align: middle;
 }
 
-.footer a {
-	color: #3a3a3a;
-	text-decoration: underline;
+.header {
+	background: #117865 0 0 no-repeat padding-box;
+	border: 1px solid #707070;
+	color: #ffffff;
+	font: 700 22px/27px 'Segoe UI';
+	padding: 13px 13px 13px 36px;
+	text-align: left;
 }
 
-button {
-	background: #337ab7;
-	border: 0;
-	border-radius: 5px;
-	color: #ffffff;
-	font-size: 16px;
-	height: 35px;
-	margin-right: 15px;
-	width: 160px;
+iframe {
+	border: none;
 }
 
-button:hover {
-  cursor: pointer;
+.position {
+	margin-top: 40vh;
 }
 
-iframe {
-	border: none;
+.report-container {
+	height: 75vh;
+	margin: 8px auto;
+	width: 90%;
+}
+
+@media screen and (max-width: 980px) {
+    p {
+        font-size: 12px;
+    }
+}
+
+@media screen and (max-width: 767px) {
+	.display-message {
+		font: 400 14px 'Segoe UI';
+	}
+
+	.footer {
+		font: 400 8px 'Segoe UI';
+		height: 64px;
+	}
 }