feat(content-explorer): enable independent theming (#4062)

tjuanitas · web-flow · commit a67be72dc988 · 2025-04-17T12:23:08.000-04:00
diff --git a/src/elements/common/breadcrumbs/BreadcrumbDropdown.tsx b/src/elements/common/breadcrumbs/BreadcrumbDropdown.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useIntl } from 'react-intl';
 import { DropdownMenu, IconButton } from '@box/blueprint-web';
 import { Ellipsis } from '@box/blueprint-web-assets/icons/Fill';
 import type { Crumb } from '../../../common/types/core';
@@ -8,21 +9,26 @@ import messages from '../messages';
 export interface BreadcrumbDropdownProps {
     crumbs: Crumb[];
     onCrumbClick: (item: string) => void;
+    portalElement?: HTMLElement;
 }
 
-const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: BreadcrumbDropdownProps) => (
-    <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-            <IconButton aria-label={messages.breadcrumbLabel.defaultMessage} icon={Ellipsis} />
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-            {crumbs.map(({ id, name }: Crumb) => (
-                <DropdownMenu.Item key={id} onClick={() => onCrumbClick(id)}>
-                    {name}
-                </DropdownMenu.Item>
-            ))}
-        </DropdownMenu.Content>
-    </DropdownMenu.Root>
-);
+const BreadcrumbDropdown = ({ crumbs, onCrumbClick, portalElement }: BreadcrumbDropdownProps) => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                <IconButton aria-label={formatMessage(messages.breadcrumbLabel)} icon={Ellipsis} />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content container={portalElement}>
+                {crumbs.map(({ id, name }: Crumb) => (
+                    <DropdownMenu.Item key={id} onClick={() => onCrumbClick(id)}>
+                        {name}
+                    </DropdownMenu.Item>
+                ))}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    );
+};
 
 export default BreadcrumbDropdown;
diff --git a/src/elements/common/breadcrumbs/Breadcrumbs.tsx b/src/elements/common/breadcrumbs/Breadcrumbs.tsx
@@ -16,6 +16,7 @@ export interface BreadcrumbsProps {
     delimiter: Delimiter;
     isSmall?: boolean;
     onCrumbClick: (item: string) => void;
+    portalElement?: HTMLElement;
     rootId: string;
 }
 
@@ -46,12 +47,13 @@ function getBreadcrumb(
     isLast: boolean,
     onCrumbClick: (item: string) => void,
     delimiter: Delimiter,
+    portalElement?: HTMLElement,
 ) {
     if (Array.isArray(crumbs)) {
         const condensed = delimiter !== DELIMITER_CARET;
         return (
             <span className="be-breadcrumb-more">
-                <BreadcrumbDropdown crumbs={crumbs} onCrumbClick={onCrumbClick} />
+                <BreadcrumbDropdown crumbs={crumbs} onCrumbClick={onCrumbClick} portalElement={portalElement} />
                 <BreadcrumbDelimiter delimiter={condensed ? DELIMITER_SLASH : DELIMITER_CARET} />
             </span>
         );
@@ -61,7 +63,7 @@ function getBreadcrumb(
     return <Breadcrumb delimiter={delimiter} isLast={isLast} name={name} onClick={() => onCrumbClick(id)} />;
 }
 
-const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false }: BreadcrumbsProps) => {
+const Breadcrumbs = ({ crumbs, delimiter, isSmall = false, onCrumbClick, portalElement, rootId }: BreadcrumbsProps) => {
     const { formatMessage } = useIntl();
 
     if (!rootId || crumbs.length === 0) {
@@ -86,14 +88,17 @@ const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false
 
     // Always show the second last/parent breadcrumb when there are at least 2 crumbs.
     const secondLastBreadcrumb =
-        length > 1 ? getBreadcrumb(filteredCrumbs[length - 2], false, onCrumbClick, delimiter) : null;
+        length > 1 ? getBreadcrumb(filteredCrumbs[length - 2], false, onCrumbClick, delimiter, portalElement) : null;
 
     // Only show the more dropdown when there were at least 4 crumbs.
     const moreBreadcrumbs =
-        length > 3 ? getBreadcrumb(filteredCrumbs.slice(1, length - 2), false, onCrumbClick, delimiter) : null;
+        length > 3
+            ? getBreadcrumb(filteredCrumbs.slice(1, length - 2), false, onCrumbClick, delimiter, portalElement)
+            : null;
 
     // Only show the root breadcrumb when there are at least 3 crumbs.
-    const firstBreadcrumb = length > 2 ? getBreadcrumb(filteredCrumbs[0], false, onCrumbClick, delimiter) : null;
+    const firstBreadcrumb =
+        length > 2 ? getBreadcrumb(filteredCrumbs[0], false, onCrumbClick, delimiter, portalElement) : null;
 
     return (
         <div className="be-breadcrumbs">
diff --git a/src/elements/common/sub-header/Add.tsx b/src/elements/common/sub-header/Add.tsx
@@ -9,11 +9,12 @@ export interface AddProps {
     isDisabled: boolean;
     onCreate: () => void;
     onUpload: () => void;
+    portalElement?: HTMLElement;
     showCreate: boolean;
     showUpload: boolean;
 }
 
-const Add = ({ isDisabled, onUpload, onCreate, showUpload = true, showCreate = true }: AddProps) => {
+const Add = ({ isDisabled, onUpload, onCreate, portalElement, showCreate = true, showUpload = true }: AddProps) => {
     const { formatMessage } = useIntl();
 
     return (
@@ -26,7 +27,7 @@ const Add = ({ isDisabled, onUpload, onCreate, showUpload = true, showCreate = t
                     icon={Plus}
                 />
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content>
+            <DropdownMenu.Content container={portalElement}>
                 {showUpload && (
                     <DropdownMenu.Item onClick={onUpload}>{formatMessage(messages.upload)}</DropdownMenu.Item>
                 )}
diff --git a/src/elements/common/sub-header/Sort.tsx b/src/elements/common/sub-header/Sort.tsx
@@ -9,6 +9,7 @@ import messages from '../messages';
 
 export interface SortProps {
     onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
+    portalElement?: HTMLElement;
 }
 
 type SortItem = [SortBy, SortDirection];
@@ -22,15 +23,15 @@ const SORT_ITEMS: Array<SortItem> = [
     [FIELD_SIZE, SORT_DESC],
 ];
 
-const Sort = ({ onSortChange }: SortProps) => {
+const Sort = ({ onSortChange, portalElement }: SortProps) => {
     const { formatMessage } = useIntl();
 
     return (
         <DropdownMenu.Root>
             <DropdownMenu.Trigger>
                 <IconButton aria-label={formatMessage(messages.sort)} className="be-btn-sort" icon={IconSort} />
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content>
+            <DropdownMenu.Content container={portalElement}>
                 {SORT_ITEMS.map(([sortByValue, sortDirectionValue]) => {
                     const sortItemKey = `${sortByValue}${sortDirectionValue}`;
 
diff --git a/src/elements/common/sub-header/SubHeader.tsx b/src/elements/common/sub-header/SubHeader.tsx
@@ -24,6 +24,7 @@ export interface SubHeaderProps {
     onSortChange: (sortBy: string, sortDirection: string) => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
+    portalElement?: HTMLElement;
     rootId: string;
     rootName?: string;
     view: View;
@@ -45,6 +46,7 @@ const SubHeader = ({
     onSortChange,
     onUpload,
     onViewModeChange,
+    portalElement,
     rootId,
     rootName,
     view,
@@ -56,6 +58,7 @@ const SubHeader = ({
                 currentCollection={currentCollection}
                 isSmall={isSmall}
                 onItemClick={onItemClick}
+                portalElement={portalElement}
                 rootId={rootId}
                 rootName={rootName}
                 view={view}
@@ -75,6 +78,7 @@ const SubHeader = ({
                 onSortChange={onSortChange}
                 onUpload={onUpload}
                 onViewModeChange={onViewModeChange}
+                portalElement={portalElement}
                 view={view}
                 viewMode={viewMode}
             />
diff --git a/src/elements/common/sub-header/SubHeaderLeft.tsx b/src/elements/common/sub-header/SubHeaderLeft.tsx
@@ -10,12 +10,21 @@ export interface SubHeaderLeftProps {
     currentCollection: Collection;
     isSmall: boolean;
     onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;
+    portalElement?: HTMLElement;
     rootId: string;
     rootName?: string;
     view: View;
 }
 
-const SubHeaderLeft = ({ view, isSmall, rootId, rootName, currentCollection, onItemClick }: SubHeaderLeftProps) => {
+const SubHeaderLeft = ({
+    currentCollection,
+    isSmall,
+    onItemClick,
+    portalElement,
+    rootId,
+    rootName,
+    view,
+}: SubHeaderLeftProps) => {
     let crumbs;
     const { formatMessage } = useIntl();
 
@@ -53,6 +62,7 @@ const SubHeaderLeft = ({ view, isSmall, rootId, rootName, currentCollection, onI
             delimiter={DELIMITER_CARET}
             isSmall={isSmall}
             onCrumbClick={onItemClick}
+            portalElement={portalElement}
             rootId={rootId}
         />
     );
diff --git a/src/elements/common/sub-header/SubHeaderRight.tsx b/src/elements/common/sub-header/SubHeaderRight.tsx
@@ -21,6 +21,7 @@ export interface SubHeaderRightProps {
     onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
+    portalElement?: HTMLElement;
     view: View;
     viewMode: ViewMode;
 }
@@ -38,6 +39,7 @@ const SubHeaderRight = ({
     onSortChange,
     onUpload,
     onViewModeChange,
+    portalElement,
     view,
     viewMode,
 }: SubHeaderRightProps) => {
@@ -61,12 +63,13 @@ const SubHeaderRight = ({
             {hasItems && hasGridView && (
                 <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />
             )}
-            {showSort && <Sort onSortChange={onSortChange} />}
+            {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}
             {showAdd && (
                 <Add
                     isDisabled={!isFolder}
                     onCreate={onCreate}
                     onUpload={onUpload}
+                    portalElement={portalElement}
                     showCreate={canCreateNewFolder}
                     showUpload={canUpload}
                 />
diff --git a/src/elements/content-explorer/ContentExplorer.tsx b/src/elements/content-explorer/ContentExplorer.tsx
@@ -1646,7 +1646,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             <Internationalize language={language} messages={messages}>
                 <TooltipProvider container={this.rootElement}>
                     <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-explorer">
-                        <ThemingStyles theme={theme} />
+                        <ThemingStyles selector={`#${this.id}`} theme={theme} />
                         <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
                             {!isDefaultViewMetadata && (
                                 <>
@@ -1670,6 +1670,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                                         onItemClick={this.fetchFolder}
                                         onSortChange={this.sort}
                                         onViewModeChange={this.changeViewMode}
+                                        portalElement={this.rootElement}
                                     />
                                 </>
                             )}
diff --git a/src/elements/content-uploader/ContentUploader.tsx b/src/elements/content-uploader/ContentUploader.tsx
@@ -1273,7 +1273,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                 <TooltipProvider>
                     {useUploadsManager ? (
                         <div ref={measureRef} className={styleClassName} id={this.id}>
-                            <ThemingStyles theme={theme} />
+                            <ThemingStyles selector={`#${this.id}`} theme={theme} />
                             <UploadsManager
                                 isDragging={isDraggingItemsToUploadsManager}
                                 isExpanded={isUploadsManagerExpanded}
@@ -1290,7 +1290,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                         </div>
                     ) : (
                         <div ref={measureRef} className={styleClassName} id={this.id}>
-                            <ThemingStyles theme={theme} />
+                            <ThemingStyles selector={`#${this.id}`} theme={theme} />
                             <DroppableContent
                                 addDataTransferItemsToUploadQueue={this.addDroppedItemsToUploadQueue}
                                 addFiles={this.addFilesToUploadQueue}
