Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax

src/packages/excalidraw/CHANGELOG.md

@@ -11,6 +11,22 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
+## Unreleased
+
+### Features
+
+- Sidebar component now supports tabs — for more detailed description of new behavior and breaking changes, see the linked PR. [#6213](https://github.com/excalidraw/excalidraw/pull/6213)
+- Exposed `DefaultSidebar` component to allow modifying the default sidebar, such as adding custom tabs to it. [#6213](https://github.com/excalidraw/excalidraw/pull/6213)
+
+  #### BREAKING CHANGES
+
+  - `props.renderSidebar` is removed in favor of rendering as `children`.
+  - `appState.isSidebarDocked` replaced with `appState.defaultSidebarDockedPreference` with slightly different semantics, and relating only to the default sidebar. You need to handle `docked` state for your custom sidebars yourself.
+  - Sidebar `props.dockable` is removed. To indicate dockability, supply `props.onDock()` alongside setting `props.docked`.
+  - `Sidebar.Header` is no longer rendered by default. You need to render it yourself.
+  - `props.onClose` replaced with `props.onStateChange`.
+  - `restore()`/`restoreAppState()` now retains `appState.openSidebar` regardless of docked state.
+
 ## 0.15.2 (2023-04-20)
 
 ### Docs

src/packages/excalidraw/example/App.tsx

@@ -161,8 +161,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           onClick={() => alert("This is an empty top right UI")}
           style={{ height: "2.5rem" }}
         >
-          {" "}
-          Click me{" "}
+          Click me
         </button>
       </>
     );
@@ -494,15 +493,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
     );
   };
 
-  const renderSidebar = () => {
-    return (
-      <Sidebar>
-        <Sidebar.Header>Custom header!</Sidebar.Header>
-        Custom sidebar!
-      </Sidebar>
-    );
-  };
-
   const renderMenu = () => {
     return (
       <MainMenu>
@@ -668,23 +658,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           </div>
         </div>
         <div className="excalidraw-wrapper">
-          <div
-            style={{
-              position: "absolute",
-              left: "50%",
-              bottom: "20px",
-              display: "flex",
-              zIndex: 9999999999999999,
-              padding: "5px 10px",
-              transform: "translateX(-50%)",
-              background: "rgba(255, 255, 255, 0.8)",
-              gap: "1rem",
-            }}
-          >
-            <button onClick={() => excalidrawAPI?.toggleMenu("customSidebar")}>
-              Toggle Custom Sidebar
-            </button>
-          </div>
           <Excalidraw
             ref={(api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api)}
             initialData={initialStatePromiseRef.current.promise}
@@ -706,7 +679,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             onLinkOpen={onLinkOpen}
             onPointerDown={onPointerDown}
             onScrollChange={rerenderCommentIcons}
-            renderSidebar={renderSidebar}
           >
             {excalidrawAPI && (
               <Footer>
@@ -714,6 +686,30 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
               </Footer>
             )}
             <WelcomeScreen />
+            <Sidebar name="custom">
+              <Sidebar.Tabs>
+                <Sidebar.Header />
+                <Sidebar.Tab tab="one">Tab one!</Sidebar.Tab>
+                <Sidebar.Tab tab="two">Tab two!</Sidebar.Tab>
+                <Sidebar.TabTriggers>
+                  <Sidebar.TabTrigger tab="one">One</Sidebar.TabTrigger>
+                  <Sidebar.TabTrigger tab="two">Two</Sidebar.TabTrigger>
+                </Sidebar.TabTriggers>
+              </Sidebar.Tabs>
+            </Sidebar>
+            <Sidebar.Trigger
+              name="custom"
+              tab="one"
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translateX(-50%)",
+                bottom: "20px",
+                zIndex: 9999999999999999,
+              }}
+            >
+              Toggle Custom Sidebar
+            </Sidebar.Trigger>
             {renderMenu()}
           </Excalidraw>
           {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}

src/packages/excalidraw/example/CustomFooter.tsx

@@ -65,8 +65,7 @@ const CustomFooter = ({
         className="custom-footer"
         onClick={() => alert("This is dummy footer")}
       >
-        {" "}
-        custom footer{" "}
+        custom footer
       </button>
     </>
   );

src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx

@@ -11,7 +11,7 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
         </button>
         <div className="sidebar-links">
           <button>Empty Home</button>
-          <button>Empty About</button>{" "}
+          <button>Empty About</button>
         </div>
       </div>
       <div className={`${open ? "sidebar-open" : ""}`}>

src/packages/excalidraw/index.tsx

@@ -24,7 +24,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     isCollaborating = false,
     onPointerUpdate,
     renderTopRightUI,
-    renderSidebar,
     langCode = defaultLang.code,
     viewModeEnabled,
     zenModeEnabled,
@@ -47,6 +46,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
 
   const canvasActions = props.UIOptions?.canvasActions;
 
+  // FIXME normalize/set defaults in parent component so that the memo resolver
+  // compares the same values
   const UIOptions: AppProps["UIOptions"] = {
     ...props.UIOptions,
     canvasActions: {
@@ -114,7 +115,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
-          renderSidebar={renderSidebar}
         >
           {children}
         </App>
@@ -245,3 +245,5 @@ export { MainMenu };
 export { useDevice } from "../../components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };
+
+export { DefaultSidebar } from "../../components/DefaultSidebar";