fix: disable open on click behavior (#2685)

Adds the disable-open-on-click attibute to the mgt-file-list to allow developers to prevent items with a webUrl from opening in a new browser window. The provides backwards function compatibility to v2
Adds disable-open-on-click to events story

Author: gavinbarron

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -403,6 +403,11 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
     void this.requestStateUpdate(true);
   }
 
+  @property({
+    attribute: 'disable-open-on-click',
+    type: Boolean
+  })
+  public disableOpenOnClick = false;
   /**
    * A boolean value indication if 'show-more' button should be disabled
    *
@@ -1007,7 +1012,7 @@ export class MgtFileList extends MgtTemplatedComponent implements CardSection {
   }
 
   private handleFileClick(file: DriveItem) {
-    if (file?.webUrl) {
+    if (file?.webUrl && !this.disableOpenOnClick) {
       window.open(file.webUrl, '_blank', 'noreferrer');
     }
   }

packages/mgt-element/src/utils/version.ts

@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '3.0.1';
+export const PACKAGE_VERSION = '3.1.1';

packages/mgt-react/src/generated/react.ts

@@ -58,6 +58,7 @@ export type FileListProps = {
 	itemView?: ViewType;
 	fileExtensions?: string[];
 	pageSize?: number;
+	disableOpenOnClick?: boolean;
 	hideMoreFilesButton?: boolean;
 	maxFileSize?: number;
 	enableFileUpload?: boolean;

stories/components/fileList/fileList.properties.js

@@ -94,6 +94,10 @@ export const getFileListByExtensions = () => html`
     <mgt-file-list file-extensions="docx, xlsx"></mgt-file-list>
   `;
 
+export const disableOpenOnClick = () => html`
+<mgt-file-list disable-open-on-click></mgt-file-list>
+`;
+
 export const disableFileExpansion = () => html`
     <mgt-file-list hide-more-files-button></mgt-file-list>
   `;

stories/components/fileList/fileList.stories.js

@@ -51,7 +51,7 @@ export const localization = () => html`
 export const events = () => html`
   <p>Clicked File:</p>
   <mgt-file></mgt-file>
-  <mgt-file-list></mgt-file-list>
+  <mgt-file-list disable-open-on-click></mgt-file-list>
   <script>
     document.querySelector('mgt-file-list').addEventListener('itemClick', e => {
       const file = document.querySelector('mgt-file');