From b8c424c41d5acf04f040c392aa5c0169433ae708 Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Mon, 21 Apr 2025 01:20:54 +0400
Subject: [PATCH 1/6] added tabOrder as a non required parameter to FilePicker

---
 src/controls/filePicker/FilePicker.tsx      | 80 +++++++++++++--------
 src/controls/filePicker/IFilePickerProps.ts |  5 ++
 2 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
index 32b78215e..17cd71b7e 100644
--- a/src/controls/filePicker/FilePicker.tsx
+++ b/src/controls/filePicker/FilePicker.tsx
@@ -47,6 +47,8 @@ export class FilePicker extends React.Component<
   private orgAssetsService: OrgAssetsService;
   private fileSearchService: FilesSearchService;
 
+  private tabOrder = this.props.tabOrder ?? ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"];
+
   constructor(props: IFilePickerProps) {
     super(props);
 
@@ -89,7 +91,7 @@ export class FilePicker extends React.Component<
 
     this.setState({
       organisationAssetsEnabled: orgAssetsEnabled,
-      selectedTab: this.getDefaultSelectedTabKey(this.props, orgAssetsEnabled),
+      selectedTab: this._getDefaultSelectedTabKey(this.props, orgAssetsEnabled),
     });
     if (!!this.props.context && !!this.props.webAbsoluteUrl) {
       const { title, id } = await this.fileBrowserService.getSiteTitleAndId();
@@ -294,7 +296,7 @@ export class FilePicker extends React.Component<
   private _handleOpenPanel = (): void => {
     this.setState({
       panelOpen: true,
-      selectedTab: this.getDefaultSelectedTabKey(
+      selectedTab: this._getDefaultSelectedTabKey(
         this.props,
         this.state.organisationAssetsEnabled
       ),
@@ -344,7 +346,7 @@ export class FilePicker extends React.Component<
    */
   private _getNavPanelOptions = (): INavLinkGroup[] => {
     const addUrl = this.props.storeLastActiveTab !== false;
-    const links = [];
+    let links: INavLink[] = [];
 
     if (!this.props.hideRecentTab) {
       links.push({
@@ -422,41 +424,57 @@ export class FilePicker extends React.Component<
       });
     }
 
+    if(this.props.tabOrder) {
+      links = this._getTabOrder(links);
+    }
+
     const groups: INavLinkGroup[] = [{ links }];
     return groups;
   }
 
-  private getDefaultSelectedTabKey = (
+  /**
+   * Sorts navigation tabs based on the tabOrder prop
+   */
+  private _getTabOrder = (links: INavLink[]): INavLink[] => {
+    const sortedKeys = [
+      ...this.tabOrder,
+      ...links.map(l => l.key).filter(key => !this.tabOrder.includes(key)),
+    ];
+
+    links.sort((a, b) => {
+      return sortedKeys.indexOf(a.key) - sortedKeys.indexOf(b.key);
+    });
+
+    return links;
+  };
+
+  /**
+   * Returns the default selected tab key
+   */
+  private _getDefaultSelectedTabKey = (
     props: IFilePickerProps,
     orgAssetsEnabled: boolean
   ): string => {
-    if (!props.hideRecentTab) {
-      return "keyRecent";
-    }
-    if (!props.hideStockImages) {
-      return "keyStockImages";
-    }
-    if (props.bingAPIKey && !props.hideWebSearchTab) {
-      return "keyWeb";
-    }
-    if (!props.hideOrganisationalAssetTab && orgAssetsEnabled) {
-      return "keyOrgAssets";
-    }
-    if (!props.hideOneDriveTab) {
-      return "keyOneDrive";
-    }
-    if (!props.hideSiteFilesTab) {
-      return "keySite";
-    }
-    if (!props.hideLocalUploadTab) {
-      return "keyUpload";
-    }
-    if (!props.hideLinkUploadTab) {
-      return "keyLink";
-    }
-    if (!props.hideLocalMultipleUploadTab) {
-      return "keyMultipleUpload";
-    }
+    const tabConfig = [
+      { isTabVisible: !props.hideRecentTab, tabKey: "keyRecent" },
+      { isTabVisible: !props.hideStockImages, tabKey: "keyStockImages" },
+      { isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: "keyWeb" },
+      { isTabVisible: !props.hideOrganisationalAssetTab && orgAssetsEnabled, tabKey: "keyOrgAssets" },
+      { isTabVisible: !props.hideOneDriveTab, tabKey: "keyOneDrive" },
+      { isTabVisible: !props.hideSiteFilesTab, tabKey: "keySite" },
+      { isTabVisible: !props.hideLocalUploadTab, tabKey: "keyUpload" },
+      { isTabVisible: !props.hideLinkUploadTab, tabKey: "keyLink" },
+      { isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: "keyMultipleUpload" }
+    ];
 
+    const visibleTabs = tabConfig.filter(tab => tab.isTabVisible);
+    const visibleTabKeys = visibleTabs.map(tab => tab.tabKey);
+
+    if (this.props.tabOrder) {
+      const visibleTabSet = new Set(visibleTabKeys);
+      return this.tabOrder.find(key => visibleTabSet.has(key));
+    } else {
+      return visibleTabKeys[0]; // first visible tab from default order
+    }
   }
 }
diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
index 903c850fc..d90827cc3 100644
--- a/src/controls/filePicker/IFilePickerProps.ts
+++ b/src/controls/filePicker/IFilePickerProps.ts
@@ -175,4 +175,9 @@ export interface IFilePickerProps {
    * Specifies if file check should be done
    */
    checkIfFileExists?: boolean;
+  /**
+   * Specifies tab order
+   * default ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
+   */
+   tabOrder?: string[];
 }

From 470af0a3ceb59fcc1f1683ba68e5d5fb6a4544b6 Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 23 Apr 2025 00:01:46 +0400
Subject: [PATCH 2/6] Added defaultSelectedTab webpart property

---
 src/controls/filePicker/FilePicker.tsx      | 10 ++++++++--
 src/controls/filePicker/IFilePickerProps.ts |  6 ++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
index 17cd71b7e..a68cf3a5c 100644
--- a/src/controls/filePicker/FilePicker.tsx
+++ b/src/controls/filePicker/FilePicker.tsx
@@ -455,7 +455,7 @@ export class FilePicker extends React.Component<
     props: IFilePickerProps,
     orgAssetsEnabled: boolean
   ): string => {
-    const tabConfig = [
+    const tabsConfig = [
       { isTabVisible: !props.hideRecentTab, tabKey: "keyRecent" },
       { isTabVisible: !props.hideStockImages, tabKey: "keyStockImages" },
       { isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: "keyWeb" },
@@ -467,9 +467,15 @@ export class FilePicker extends React.Component<
       { isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: "keyMultipleUpload" }
     ];
 
-    const visibleTabs = tabConfig.filter(tab => tab.isTabVisible);
+    const visibleTabs = tabsConfig.filter(tab => tab.isTabVisible);
     const visibleTabKeys = visibleTabs.map(tab => tab.tabKey);
 
+    // If defaultSelectedTab is provided and is visible, then return tabKey
+    if(this.props.defaultSelectedTab ?? visibleTabKeys.includes(this.props.defaultSelectedTab)) {
+      return this.props.defaultSelectedTab;
+    }
+
+    // If no valid default tab is provided, find the first visible tab in the order
     if (this.props.tabOrder) {
       const visibleTabSet = new Set(visibleTabKeys);
       return this.tabOrder.find(key => visibleTabSet.has(key));
diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
index d90827cc3..09ecace93 100644
--- a/src/controls/filePicker/IFilePickerProps.ts
+++ b/src/controls/filePicker/IFilePickerProps.ts
@@ -180,4 +180,10 @@ export interface IFilePickerProps {
    * default ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
    */
    tabOrder?: string[];
+  /**
+   * Specifies default selected tab
+   * One of the keys from tabOrder
+   * One of ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
+  */
+  defaultSelectedTab?: string;
 }

From 652ebaefef6b8cfab20cf3af48c76fc9ca30955b Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 23 Apr 2025 00:26:25 +0400
Subject: [PATCH 3/6] added FilePickerTab enum to collect tab types and remove
 hardcoded strings

---
 src/controls/filePicker/FilePicker.tsx        | 69 +++++++++----------
 src/controls/filePicker/FilePickerTab.ts      | 11 +++
 src/controls/filePicker/IFilePickerProps.ts   |  5 +-
 src/controls/filePicker/index.ts              |  1 +
 .../controlsTest/components/ControlsTest.tsx  |  4 ++
 5 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 src/controls/filePicker/FilePickerTab.ts

diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
index a68cf3a5c..ec2617d4f 100644
--- a/src/controls/filePicker/FilePicker.tsx
+++ b/src/controls/filePicker/FilePicker.tsx
@@ -36,6 +36,7 @@ import { StockImages } from "./StockImagesTab/StockImages";
 import UploadFilePickerTab from "./UploadFilePickerTab/UploadFilePickerTab";
 import MultipleUploadFilePickerTab from "./MultipleUploadFilePickerTab/MultipleUploadFilePickerTab";
 import WebSearchTab from "./WebSearchTab/WebSearchTab";
+import { FilePickerTab } from "./FilePickerTab";
 
 
 export class FilePicker extends React.Component<
@@ -47,8 +48,6 @@ export class FilePicker extends React.Component<
   private orgAssetsService: OrgAssetsService;
   private fileSearchService: FilesSearchService;
 
-  private tabOrder = this.props.tabOrder ?? ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"];
-
   constructor(props: IFilePickerProps) {
     super(props);
 
@@ -192,7 +191,7 @@ export class FilePicker extends React.Component<
             />
           </div>
           <div className={styles.tabsContainer}>
-            {this.state.selectedTab === "keyLink" && (
+            {this.state.selectedTab === FilePickerTab.Link && (
               <LinkFilePickerTab
                 fileSearchService={this.fileSearchService}
                 renderCustomLinkTabContent={
@@ -203,7 +202,7 @@ export class FilePicker extends React.Component<
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyUpload" && (
+            {this.state.selectedTab === FilePickerTab.Upload && (
               <UploadFilePickerTab
                 renderCustomUploadTabContent={
                   this.props.renderCustomUploadTabContent
@@ -212,7 +211,7 @@ export class FilePicker extends React.Component<
                 onChange={this._handleOnChange}
               />
             )}
-            {this.state.selectedTab === "keyMultipleUpload" && (
+            {this.state.selectedTab === FilePickerTab.MultipleUpload && (
               <MultipleUploadFilePickerTab
                 renderCustomMultipleUploadTabContent={
                   this.props.renderCustomMultipleUploadTabContent
@@ -221,7 +220,7 @@ export class FilePicker extends React.Component<
                 onChange={this._handleOnChange}
               />
             )}
-            {this.state.selectedTab === "keySite" && (
+            {this.state.selectedTab === FilePickerTab.Site && (
               <SiteFilePickerTab
                 fileBrowserService={this.fileBrowserService}
                 includePageLibraries={this.props.includePageLibraries}
@@ -232,37 +231,37 @@ export class FilePicker extends React.Component<
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyOrgAssets" && (
+            {this.state.selectedTab === FilePickerTab.OrgAssets && (
               <SiteFilePickerTab
                 breadcrumbFirstNode={{
                   isCurrentItem: true,
                   text: strings.OrgAssetsTabLabel,
-                  key: "keyOrgAssets",
+                  key: FilePickerTab.OrgAssets,
                 }}
                 fileBrowserService={this.orgAssetsService}
                 webTitle={this.state.webTitle}
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyWeb" && (
+            {this.state.selectedTab === FilePickerTab.Web && (
               <WebSearchTab
                 bingSearchService={this.fileSearchService}
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyOneDrive" && (
+            {this.state.selectedTab === FilePickerTab.OneDrive && (
               <OneDriveFilesTab
                 oneDriveService={this.oneDriveService}
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyRecent" && (
+            {this.state.selectedTab === FilePickerTab.Recent && (
               <RecentFilesTab
                 fileSearchService={this.fileSearchService}
                 {...linkTabProps}
               />
             )}
-            {this.state.selectedTab === "keyStockImages" && (
+            {this.state.selectedTab === FilePickerTab.StockImages && (
               <StockImages
                 language={
                   this.props.context.pageContext.cultureInfo.currentCultureName
@@ -346,21 +345,21 @@ export class FilePicker extends React.Component<
    */
   private _getNavPanelOptions = (): INavLinkGroup[] => {
     const addUrl = this.props.storeLastActiveTab !== false;
-    let links: INavLink[] = [];
+    let links = [];
 
     if (!this.props.hideRecentTab) {
       links.push({
         name: strings.RecentLinkLabel,
         url: addUrl ? "#recent" : undefined,
         icon: "Recent",
-        key: "keyRecent",
+        key: FilePickerTab.Recent,
       });
     }
     if (!this.props.hideStockImages) {
       links.push({
         name: strings.StockImagesLinkLabel,
         url: addUrl ? "#stockImages" : undefined,
-        key: "keyStockImages",
+        key: FilePickerTab.StockImages,
         icon: "ImageSearch",
       });
     }
@@ -368,7 +367,7 @@ export class FilePicker extends React.Component<
       links.push({
         name: strings.WebSearchLinkLabel,
         url: addUrl ? "#search" : undefined,
-        key: "keyWeb",
+        key: FilePickerTab.Web,
         icon: "Search",
       });
     }
@@ -380,14 +379,14 @@ export class FilePicker extends React.Component<
         name: strings.OrgAssetsLinkLabel,
         url: addUrl ? "#orgAssets" : undefined,
         icon: "FabricFolderConfirm",
-        key: "keyOrgAssets",
+        key: FilePickerTab.OrgAssets,
       });
     }
     if (!this.props.hideOneDriveTab) {
       links.push({
         name: "OneDrive",
         url: addUrl ? "#onedrive" : undefined,
-        key: "keyOneDrive",
+        key: FilePickerTab.OneDrive,
         icon: "OneDrive",
       });
     }
@@ -395,7 +394,7 @@ export class FilePicker extends React.Component<
       links.push({
         name: strings.SiteLinkLabel,
         url: addUrl ? "#globe" : undefined,
-        key: "keySite",
+        key: FilePickerTab.Site,
         icon: "Globe",
       });
     }
@@ -403,7 +402,7 @@ export class FilePicker extends React.Component<
       links.push({
         name: strings.UploadLinkLabel,
         url: addUrl ? "#upload" : undefined,
-        key: "keyUpload",
+        key: FilePickerTab.Upload,
         icon: "System",
       });
     }
@@ -411,7 +410,7 @@ export class FilePicker extends React.Component<
       links.push({
         name: strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName,
         url: addUrl ? "#Multipleupload" : undefined,
-        key: "keyMultipleUpload",
+        key: FilePickerTab.MultipleUpload,
         icon: "BulkUpload",
       });
     }
@@ -419,7 +418,7 @@ export class FilePicker extends React.Component<
       links.push({
         name: strings.FromLinkLinkLabel,
         url: addUrl ? "#link" : undefined,
-        key: "keyLink",
+        key: FilePickerTab.Link,
         icon: "Link",
       });
     }
@@ -435,10 +434,10 @@ export class FilePicker extends React.Component<
   /**
    * Sorts navigation tabs based on the tabOrder prop
    */
-  private _getTabOrder = (links: INavLink[]): INavLink[] => {
+  private _getTabOrder = (links): INavLink[] => {
     const sortedKeys = [
-      ...this.tabOrder,
-      ...links.map(l => l.key).filter(key => !this.tabOrder.includes(key)),
+      ...this.props.tabOrder,
+      ...links.map(l => l.key).filter(key => !this.props.tabOrder.includes(key)),
     ];
 
     links.sort((a, b) => {
@@ -456,15 +455,15 @@ export class FilePicker extends React.Component<
     orgAssetsEnabled: boolean
   ): string => {
     const tabsConfig = [
-      { isTabVisible: !props.hideRecentTab, tabKey: "keyRecent" },
-      { isTabVisible: !props.hideStockImages, tabKey: "keyStockImages" },
-      { isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: "keyWeb" },
-      { isTabVisible: !props.hideOrganisationalAssetTab && orgAssetsEnabled, tabKey: "keyOrgAssets" },
-      { isTabVisible: !props.hideOneDriveTab, tabKey: "keyOneDrive" },
-      { isTabVisible: !props.hideSiteFilesTab, tabKey: "keySite" },
-      { isTabVisible: !props.hideLocalUploadTab, tabKey: "keyUpload" },
-      { isTabVisible: !props.hideLinkUploadTab, tabKey: "keyLink" },
-      { isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: "keyMultipleUpload" }
+      { isTabVisible: !props.hideRecentTab, tabKey: FilePickerTab.Recent },
+      { isTabVisible: !props.hideStockImages, tabKey: FilePickerTab.StockImages },
+      { isTabVisible: props.bingAPIKey && !props.hideWebSearchTab, tabKey: FilePickerTab.Web },
+      { isTabVisible: !props.hideOrganisationalAssetTab && orgAssetsEnabled, tabKey: FilePickerTab.OrgAssets },
+      { isTabVisible: !props.hideOneDriveTab, tabKey: FilePickerTab.OneDrive },
+      { isTabVisible: !props.hideSiteFilesTab, tabKey: FilePickerTab.Site },
+      { isTabVisible: !props.hideLocalUploadTab, tabKey: FilePickerTab.Upload },
+      { isTabVisible: !props.hideLinkUploadTab, tabKey: FilePickerTab.Link },
+      { isTabVisible: !props.hideLocalMultipleUploadTab, tabKey: FilePickerTab.MultipleUpload }
     ];
 
     const visibleTabs = tabsConfig.filter(tab => tab.isTabVisible);
@@ -478,7 +477,7 @@ export class FilePicker extends React.Component<
     // If no valid default tab is provided, find the first visible tab in the order
     if (this.props.tabOrder) {
       const visibleTabSet = new Set(visibleTabKeys);
-      return this.tabOrder.find(key => visibleTabSet.has(key));
+      return this.props.tabOrder.find(key => visibleTabSet.has(key));
     } else {
       return visibleTabKeys[0]; // first visible tab from default order
     }
diff --git a/src/controls/filePicker/FilePickerTab.ts b/src/controls/filePicker/FilePickerTab.ts
new file mode 100644
index 000000000..9094e9bbf
--- /dev/null
+++ b/src/controls/filePicker/FilePickerTab.ts
@@ -0,0 +1,11 @@
+export enum FilePickerTab {
+  Recent = "keyRecent",
+  StockImages = "keyStockImages",
+  Web = "keyWeb",
+  OrgAssets = "keyOrgAssets",
+  OneDrive = "keyOneDrive",
+  Site = "keySite",
+  Upload = "keyUpload",
+  Link = "keyLink",
+  MultipleUpload = "keyMultipleUpload"
+}
diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
index 09ecace93..48c9132a3 100644
--- a/src/controls/filePicker/IFilePickerProps.ts
+++ b/src/controls/filePicker/IFilePickerProps.ts
@@ -3,6 +3,7 @@ import { IIconProps } from "@fluentui/react/lib/Icon";
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 import { IFilePickerResult } from "./FilePicker.types";
+import { FilePickerTab } from "./FilePickerTab";
 
 export interface IFilePickerProps {
   /**
@@ -179,11 +180,11 @@ export interface IFilePickerProps {
    * Specifies tab order
    * default ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
    */
-   tabOrder?: string[];
+   tabOrder?: FilePickerTab[];
   /**
    * Specifies default selected tab
    * One of the keys from tabOrder
    * One of ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
   */
-  defaultSelectedTab?: string;
+  defaultSelectedTab?: FilePickerTab;
 }
diff --git a/src/controls/filePicker/index.ts b/src/controls/filePicker/index.ts
index 64d58e192..b484b2be8 100644
--- a/src/controls/filePicker/index.ts
+++ b/src/controls/filePicker/index.ts
@@ -2,3 +2,4 @@ export * from "./FilePicker";
 export * from "./FilePicker.types";
 export * from "./IFilePickerProps";
 export * from "./IFilePickerState";
+export * from "./FilePickerTab";
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index 2354af418..f1c60eb63 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -167,6 +167,7 @@ import { debounce } from 'lodash';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { sp } from '@pnp/sp';
 import styles from './ControlsTest.module.scss';
+import { FilePickerTab } from '../../../controls/filePicker/FilePickerTab';
 
 //#endregion
 
@@ -2137,6 +2138,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}
                   context={this.props.context}
                   hideRecentTab={false}
+                  hideLinkUploadTab={true}
                   renderCustomUploadTabContent={() => (
                     <FolderExplorer context={this.props.context}
                       rootFolder={this.rootFolder}
@@ -2144,6 +2146,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                       onSelect={this._onFolderSelect}
                       canCreateFolders={true}
                     />)}
+                    tabOrder={[FilePickerTab.Web, FilePickerTab.OneDrive]}
+                    defaultSelectedTab={FilePickerTab.MultipleUpload}
                 />
               </div>
               <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>

From 3892d2bb9d2d582e25ce22dcb35da3b96ffbb37d Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 23 Apr 2025 00:48:40 +0400
Subject: [PATCH 4/6] Added documentation for new properties: tabOrder and
 defaultSelectedTab

---
 .../documentation/docs/controls/FilePicker.md | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/documentation/docs/controls/FilePicker.md b/docs/documentation/docs/controls/FilePicker.md
index 81b19ea63..aa036b862 100644
--- a/docs/documentation/docs/controls/FilePicker.md
+++ b/docs/documentation/docs/controls/FilePicker.md
@@ -107,8 +107,10 @@ The FilePicker component can be configured with the following properties:
 | includePageLibraries | boolean | no | Specifies if Site Pages library to be visible on Sites tab |
 | allowExternalLinks | boolean | no | Specifies if external links should be allowed. |
 | checkIfFileExists | boolean | no | When using file links, this property allows the user to choose if the control should check if the link point to a file that exists or not. |
+| tabOrder | FilePickerTab[]| no | Defines a custom display order for the tabs. Tabs not listed will follow their default order. |
+| defaultSelectedTab | FilePickerTab  | no | Sets the default selected tab. If not specified, the first visible tab is used. |
 
-interface `IFilePickerResult`
+Interface `IFilePickerResult`
 
 Provides options for carousel buttons location.
 
@@ -120,4 +122,20 @@ Provides options for carousel buttons location.
 | fileSize | number | Size of the result (in bytes). Set only for file upload |
 | downloadFileContent | () => Promise&lt;File&gt; | Function allows to download file content. Returns File object. |
 
+Enum `FilePickerTab`
+
+Represents the available tabs in the File Picker component. Each tab corresponds to a different source from which users can select files.
+
+| Name            | Description                                           |
+|-----------------|-------------------------------------------------------|
+| Recent          | Displays recently used files.                         |
+| StockImages     | Shows stock image selection.                          |
+| Web             | Allows searching files from the web.                  |
+| OrgAssets       | Displays organizational assets.                       |
+| OneDrive        | Allows file selection from OneDrive.                  |
+| Site            | Enables browsing site files.                          |
+| Upload          | Provides option to upload local files.                |
+| Link            | Lets the user add a file via a URL.                   |
+| MultipleUpload  | Supports uploading multiple files at once.            |
+
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/filePicker/FilePicker)

From 8687248940bb652fb14161590046465a712c25fa Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 23 Apr 2025 01:00:09 +0400
Subject: [PATCH 5/6] Update new FilePicker props with better description

---
 src/controls/filePicker/IFilePickerProps.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
index 48c9132a3..64a567f4d 100644
--- a/src/controls/filePicker/IFilePickerProps.ts
+++ b/src/controls/filePicker/IFilePickerProps.ts
@@ -178,13 +178,12 @@ export interface IFilePickerProps {
    checkIfFileExists?: boolean;
   /**
    * Specifies tab order
-   * default ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
+   * Default [FilePickerTab.Recent, FilePickerTab.StockImages, FilePickerTab.Web, FilePickerTab.OrgAssets, FilePickerTab.OneDrive, FilePickerTab.Site, FilePickerTab.Upload, FilePickerTab.Link, FilePickerTab.MultipleUpload]
    */
    tabOrder?: FilePickerTab[];
   /**
    * Specifies default selected tab
-   * One of the keys from tabOrder
-   * One of ["keyRecent", "keyStockImages", "keyWeb", "keyOrgAssets", "keyOneDrive", "keySite", "keyUpload", "keyLink", "keyMultipleUpload"]
+   * One of the values from the FilePickerTab enum: Recent, StockImages, Web, OrgAssets, OneDrive, Site, Upload, Link, or MultipleUpload.
   */
   defaultSelectedTab?: FilePickerTab;
 }

From 2d7f581db8a00e821c4e42ef5168096ab8d8831d Mon Sep 17 00:00:00 2001
From: Antanina Druzhkina <totora246@gmail.com>
Date: Wed, 23 Apr 2025 01:07:54 +0400
Subject: [PATCH 6/6] minor fixes

---
 src/controls/filePicker/FilePicker.tsx                | 2 +-
 src/webparts/controlsTest/components/ControlsTest.tsx | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
index ec2617d4f..0859c53e4 100644
--- a/src/controls/filePicker/FilePicker.tsx
+++ b/src/controls/filePicker/FilePicker.tsx
@@ -470,7 +470,7 @@ export class FilePicker extends React.Component<
     const visibleTabKeys = visibleTabs.map(tab => tab.tabKey);
 
     // If defaultSelectedTab is provided and is visible, then return tabKey
-    if(this.props.defaultSelectedTab ?? visibleTabKeys.includes(this.props.defaultSelectedTab)) {
+    if(this.props.defaultSelectedTab && visibleTabKeys.includes(this.props.defaultSelectedTab)) {
       return this.props.defaultSelectedTab;
     }
 
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index f1c60eb63..2354af418 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -167,7 +167,6 @@ import { debounce } from 'lodash';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { sp } from '@pnp/sp';
 import styles from './ControlsTest.module.scss';
-import { FilePickerTab } from '../../../controls/filePicker/FilePickerTab';
 
 //#endregion
 
@@ -2138,7 +2137,6 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}
                   context={this.props.context}
                   hideRecentTab={false}
-                  hideLinkUploadTab={true}
                   renderCustomUploadTabContent={() => (
                     <FolderExplorer context={this.props.context}
                       rootFolder={this.rootFolder}
@@ -2146,8 +2144,6 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                       onSelect={this._onFolderSelect}
                       canCreateFolders={true}
                     />)}
-                    tabOrder={[FilePickerTab.Web, FilePickerTab.OneDrive]}
-                    defaultSelectedTab={FilePickerTab.MultipleUpload}
                 />
               </div>
               <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>