refactor: rename renderTopRight prop to renderTopRightUI (#3572)

* refactor: rename renderTopRight prop to renderTopRightUI

* update

* fix

* update

src/components/App.tsx

@@ -452,7 +452,7 @@ class App extends React.Component<AppProps, AppState> {
     const {
       onCollabButtonClick,
       onExportToBackend,
-      renderTopRight,
+      renderTopRightUI,
       renderFooter,
       renderCustomStats,
     } = this.props;
@@ -493,7 +493,7 @@ class App extends React.Component<AppProps, AppState> {
               langCode={getLanguage().code}
               isCollaborating={this.props.isCollaborating || false}
               onExportToBackend={onExportToBackend}
-              renderTopRight={renderTopRight}
+              renderTopRightUI={renderTopRightUI}
               renderCustomFooter={renderFooter}
               viewModeEnabled={viewModeEnabled}
               showExitZenModeBtn={

src/components/LayerUI.tsx

@@ -67,7 +67,7 @@ interface LayerUIProps {
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
-  renderTopRight?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -371,7 +371,7 @@ const LayerUI = ({
   toggleZenMode,
   isCollaborating,
   onExportToBackend,
-  renderTopRight,
+  renderTopRightUI,
   renderCustomFooter,
   viewModeEnabled,
   libraryReturnUrl,
@@ -627,7 +627,7 @@ const LayerUI = ({
                     </Tooltip>
                   ))}
             </UserList>
-            {renderTopRight?.(isMobile, appState)}
+            {renderTopRightUI?.(isMobile, appState)}
           </div>
         </div>
       </FixedSideContainer>

src/excalidraw-app/index.tsx

@@ -304,7 +304,7 @@ const ExcalidrawWrapper = () => {
     }
   };
 
-  const renderTopRight = useCallback(
+  const renderTopRightUI = useCallback(
     (isMobile: boolean, appState: AppState) => {
       return (
         <div
@@ -399,7 +399,7 @@ const ExcalidrawWrapper = () => {
         isCollaborating={collabAPI?.isCollaborating()}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         onExportToBackend={onExportToBackend}
-        renderTopRight={renderTopRight}
+        renderTopRightUI={renderTopRightUI}
         renderFooter={renderFooter}
         langCode={langCode}
         renderCustomStats={renderCustomStats}

src/packages/excalidraw/CHANGELOG.md

@@ -18,7 +18,7 @@ Please add the latest change on the top under the correct section.
 ### Features
 
 - Expose [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) helper that we use when saving Excalidraw scene to a file [#3538](https://github.com/excalidraw/excalidraw/pull/3538).
-- Add support to render custom UI in the top right corner via [`renderTopRight`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRight) prop [#3539](https://github.com/excalidraw/excalidraw/pull/3539).
+- Add support to render custom UI in the top right corner via [`renderTopRightUI`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRightUI) prop [#3539](https://github.com/excalidraw/excalidraw/pull/3539), [#3572](https://github.com/excalidraw/excalidraw/pull/3572) .
 
   This also removes the GitHub icon, keeping it local to the https://excalidraw.com app.
 

src/packages/excalidraw/README_NEXT.md

@@ -355,7 +355,7 @@ To view the full example visit :point_down:
 | [`onPointerUpdate`](#onPointerUpdate) | Function |  | Callback triggered when mouse pointer is updated. |
 | [`onExportToBackend`](#onExportToBackend) | Function |  | Callback triggered when link button is clicked on export dialog |
 | [`langCode`](#langCode) | string | `en` | Language code string |
-| [`renderTopRight `](#renderTopRight) | Function |  | Function that renders custom UI in top right corner |
+| [`renderTopRightUI`](#renderTopRightUI) | Function |  | Function that renders custom UI in top right corner |
 | [`renderFooter `](#renderFooter) | Function |  | Function that renders custom UI footer |
 | [`renderCustomStats`](#renderCustomStats) | Function |  | Function that can be used to render custom stats on the stats dialog. |
 | [`viewModeEnabled`](#viewModeEnabled) | boolean |  | This implies if the app is in view mode. |
@@ -503,7 +503,7 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 | defaultLang | string |
 | languages | [Language[]](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L8) |
 
-#### `renderTopRight`
+#### `renderTopRightUI`
 
 A function returning JSX to render custom UI in the top right corner of the app.
 

src/packages/excalidraw/index.tsx

@@ -20,7 +20,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     isCollaborating,
     onPointerUpdate,
     onExportToBackend,
-    renderTopRight,
+    renderTopRightUI,
     renderFooter,
     langCode = defaultLang.code,
     viewModeEnabled,
@@ -73,7 +73,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
         isCollaborating={isCollaborating}
         onPointerUpdate={onPointerUpdate}
         onExportToBackend={onExportToBackend}
-        renderTopRight={renderTopRight}
+        renderTopRightUI={renderTopRightUI}
         renderFooter={renderFooter}
         langCode={langCode}
         viewModeEnabled={viewModeEnabled}

src/types.ts

@@ -182,7 +182,7 @@ export interface ExcalidrawProps {
     data: ClipboardData,
     event: ClipboardEvent | null,
   ) => Promise<boolean> | boolean;
-  renderTopRight?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
   renderFooter?: (isMobile: boolean) => JSX.Element;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;