@teambit/scope 0.0.785 → 0.0.788

package/dist/get-scope-options.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { ScopeModel } from '.';
+export declare type GetScopeOptions = {
+    useScope?: () => {
+        scope: ScopeModel | undefined;
+    };
+    Corner?: ComponentType;
+};

package/dist/get-scope-options.js

@@ -0,0 +1,3 @@
+"use strict";
+
+//# sourceMappingURL=get-scope-options.js.map

package/dist/get-scope-options.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["get-scope-options.ts"],"sourcesContent":["import { ComponentType } from 'react';\nimport { ScopeModel } from '.';\n\nexport type GetScopeOptions = {\n  useScope?: () => { scope: ScopeModel | undefined };\n  Corner?: ComponentType;\n};\n"],"mappings":""}

package/dist/scope.ui.runtime.d.ts

@@ -14,6 +14,7 @@ import { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
 import { DrawerWidgetSlot, ComponentFiltersSlot } from '@teambit/component.ui.component-drawer';
 import { ComponentFilters } from '@teambit/component.ui.component-filters';
 import { ComponentUrlResolver } from '@teambit/component.modules.component-url';
+import { GetScopeOptions } from './get-scope-options';
 export declare type ScopeBadge = ComponentType;
 export declare type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;
 export declare type ContextSlot = SlotRegistry<ScopeContextType[]>;
@@ -106,6 +107,7 @@ export declare class ScopeUI {
      * register a new badge into the scope overview.
      */
     registerBadge(...badges: ScopeBadge[]): this;
+    getScope(options: GetScopeOptions): JSX.Element;
     /**
      * register a new line beneath the scope overview section.
      */
@@ -115,6 +117,8 @@ export declare class ScopeUI {
      */
     registerRoutes(routes: RouteProps[]): this;
     registerMenuRoutes: (routes: RouteProps[]) => this;
+    private applyMenuRoutes;
+    getScopeMenu(): JSX.Element;
     private registerExplicitRoutes;
     registerMenuWidget(...menuItems: MenuWidget[]): void;
     registerCorner(corner: Corner): void;
@@ -161,6 +165,7 @@ export declare class ScopeUI {
      */
     registerDrawerComponentFilters: (filters: ComponentFilters) => void;
     registerDrawerWidgets: (widgets: ReactNode[]) => void;
+    registerDefaultDrawers(): void;
     uiRoot(): UIRoot;
     /** registers available components */
     setComponents: (components: ComponentModel[]) => void;

package/dist/scope.ui.runtime.js

@@ -277,6 +277,24 @@ class ScopeUI {
     this.scopeBadgeSlot.register(badges);
     return this;
   }
+
+  getScope(options) {
+    return /*#__PURE__*/_react().default.createElement(_scope2().Scope, {
+      TargetCorner: options.Corner,
+      routeSlot: this.routeSlot,
+      menuSlot: this.menuSlot,
+      sidebar: /*#__PURE__*/_react().default.createElement(this.sidebar.render, {
+        itemSlot: this.sidebarItemSlot
+      }),
+      scopeUi: this,
+      userUseScopeQuery: options.useScope,
+      badgeSlot: this.scopeBadgeSlot,
+      overviewLineSlot: this.overviewSlot,
+      context: this.getContext(),
+      onSidebarTogglerChange: this.setSidebarToggle,
+      cornerSlot: this.cornerSlot
+    });
+  }
   /**
    * register a new line beneath the scope overview section.
    */
@@ -296,17 +314,25 @@ class ScopeUI {
     return this;
   }
 
-  registerExplicitRoutes() {
+  applyMenuRoutes() {
     this.registerMenuRoutes([{
       path: this.componentUi.routePath,
       element: this.componentUi.getMenu(_scope().ScopeAspect.id)
     }, {
       path: '/',
-      element: /*#__PURE__*/_react().default.createElement(_menu().ScopeMenu, {
-        widgetSlot: this.menuWidgetSlot,
-        menuItemSlot: this.menuItemSlot
-      })
+      element: this.getScopeMenu()
     }]);
+  }
+
+  getScopeMenu() {
+    return /*#__PURE__*/_react().default.createElement(_menu().ScopeMenu, {
+      widgetSlot: this.menuWidgetSlot,
+      menuItemSlot: this.menuItemSlot
+    });
+  }
+
+  registerExplicitRoutes() {
+    this.applyMenuRoutes();
     this.registerRoutes([{
       path: this.componentUi.routePath,
       element: this.componentUi.getComponentUI(_scope().ScopeAspect.id)
@@ -378,12 +404,16 @@ class ScopeUI {
     return (0, _lodash().default)(contexts).concat(ComponentUrlFuncProvider);
   }
 
-  uiRoot() {
+  registerDefaultDrawers() {
     this.sidebar.registerDrawer((0, _scopeUi().scopeDrawer)({
       treeWidgets: this.sidebarSlot,
       filtersSlot: this.drawerComponentsFiltersSlot,
       drawerWidgetSlot: this.drawerWidgetSlot
     }));
+  }
+
+  uiRoot() {
+    this.registerDefaultDrawers();
     const [setKeyBindHandler] = this.commandBarUI.addCommand({
       id: 'sidebar.toggle',
       // TODO - extract to a component!
@@ -422,15 +452,15 @@ class ScopeUI {
     }), /*#__PURE__*/_react().default.createElement(_componentUi().TreeToggleWidget, {
       key: 'workspace-tree-toggle-widget'
     })]);
-    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
+    if (ui) ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => /*#__PURE__*/_react().default.createElement(_menu().ScopeUseBox, null));
     scopeUi.registerSidebarLink(() => /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuLinkItem, {
       exact: true,
-      href: "/",
+      href: "",
       icon: "comps"
     }, "Gallery"));
-    scopeUi.registerExplicitRoutes();
+    if (ui) scopeUi.registerExplicitRoutes();
     return scopeUi;
   }
 

package/dist/scope.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","contextSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","routes","register","menuItems","componentTreeNodes","map","componentTreeNode","links","drawer","registerDrawer","filters","widgets","components","updateComponents","category","title","keyChar","handler","run","registerBadge","badges","registerOverviewLine","lines","registerRoutes","registerExplicitRoutes","registerMenuRoutes","path","routePath","element","getMenu","ScopeAspect","id","getComponentUI","registerMenuWidget","registerCorner","corner","registerComponentUrl","func","componentUrlFunc","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","getContext","contexts","values","ComponentUrlFuncProvider","children","flatten","concat","uiRoot","scopeDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","action","displayName","keybinding","setSidebarToggle","provider","ui","config","componentFiltersSlot","scopeUi","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","UIRuntime","Slot","withType","addRuntime"],"sources":["scope.ui.runtime.tsx"],"sourcesContent":["import flatten from 'lodash.flatten';\nimport type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';\nimport { ComponentUrlResolver, ComponentUrlProvider } from '@teambit/component.modules.component-url';\n\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { scopeDrawer } from './scope.ui.drawer';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ContextSlot = SlotRegistry<ScopeContextType[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot,\n\n    /**\n     * add a new context to ui\n     */\n    private contextSlot: ContextSlot,\n    private drawerWidgetSlot: DrawerWidgetSlot,\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  private registerExplicitRoutes() {\n    this.registerMenuRoutes([\n      {\n        path: this.componentUi.routePath,\n        element: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        path: '/',\n        element: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,\n      },\n    ]);\n    this.registerRoutes([\n      {\n        path: this.componentUi.routePath,\n        element: this.componentUi.getComponentUI(ScopeAspect.id),\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  private componentUrlFunc: ComponentUrlResolver | undefined;\n  registerComponentUrl(func: ComponentUrlResolver) {\n    this.componentUrlFunc = func;\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(...context: ScopeContextType[]) {\n    this.contextSlot.register(context);\n    return this;\n  }\n\n  private getContext() {\n    const contexts = this.contextSlot.values();\n    // eslint-disable-next-line react/prop-types\n    const ComponentUrlFuncProvider: ScopeContextType = ({ children }) => (\n      <ComponentUrlProvider value={this.componentUrlFunc}>{children}</ComponentUrlProvider>\n    );\n\n    return flatten(contexts).concat(ComponentUrlFuncProvider);\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  registerDrawers = (...drawer: DrawerType[]) => {\n    this.sidebar.registerDrawer(...drawer);\n    return this;\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.sidebar.registerDrawer(\n      scopeDrawer({\n        treeWidgets: this.sidebarSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n      })\n    );\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<ContextSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI]: [UiUI, ComponentUI, SidebarUI, CommandBarUI],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot,\n      ContextSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot\n    );\n    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);\n    scopeUi.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n    scopeUi.registerExplicitRoutes();\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAMA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAwBO,MAAMA,OAAN,CAAc;EACnBC,WAAW;EACT;AACJ;AACA;EACYC,SAJC;EAMT;AACJ;AACA;EACYC,WATC;EAUT;AACJ;AACA;EACYC,QAbC,EAeDC,OAfC,EAiBDC,WAjBC,EAmBDC,YAnBC,EAqBDC,cArBC,EAuBDC,cAvBC;EAyBT;AACJ;AACA;EACYC,eA5BC;EA8BT;AACJ;AACA;EACYC,YAjCC;EAmCT;AACJ;AACA;EACYC,UAtCC;EAwCT;AACJ;AACA;EACYC,YA3CC;EA6CT;AACJ;AACA;EACYC,WAhDC,EAiDDC,gBAjDC,EAkDDC,2BAlDC,EAmDT;IAAA,KA/CQd,SA+CR,GA/CQA,SA+CR;IAAA,KA1CQC,WA0CR,GA1CQA,WA0CR;IAAA,KAtCQC,QAsCR,GAtCQA,QAsCR;IAAA,KApCQC,OAoCR,GApCQA,OAoCR;IAAA,KAlCQC,WAkCR,GAlCQA,WAkCR;IAAA,KAhCQC,YAgCR,GAhCQA,YAgCR;IAAA,KA9BQC,cA8BR,GA9BQA,cA8BR;IAAA,KA5BQC,cA4BR,GA5BQA,cA4BR;IAAA,KAvBQC,eAuBR,GAvBQA,eAuBR;IAAA,KAlBQC,YAkBR,GAlBQA,YAkBR;IAAA,KAbQC,UAaR,GAbQA,UAaR;IAAA,KARQC,YAQR,GARQA,YAQR;IAAA,KAHQC,WAGR,GAHQA,WAGR;IAAA,KAFQC,gBAER,GAFQA,gBAER;IAAA,KADQC,2BACR,GADQA,2BACR;IAAA,0DAE4D,MAAM,CAAE,CAFpE;IAAA,4DA4BoBC,MAAD,IAA0B;MAC7C,KAAKb,QAAL,CAAcc,QAAd,CAAuBD,MAAvB;MACA,OAAO,IAAP;IACD,CA/BC;IAAA;IAAA,0DA8GkBE,SAAD,IAA2B;MAC5C,KAAKR,YAAL,CAAkBO,QAAlB,CAA2BC,SAA3B;IACD,CAhHC;IAAA,+DAqHuBC,kBAAD,IAA6C;MACnEA,kBAAkB,CAACC,GAAnB,CAAwBC,iBAAD,IAAuB,KAAKhB,WAAL,CAAiBY,QAAjB,CAA0BI,iBAA1B,CAA9C;MACA,OAAO,IAAP;IACD,CAxHC;IAAA,6DA6HoB,CAAC,GAAGC,KAAJ,KAA6B;MACjD,KAAKb,eAAL,CAAqBQ,QAArB,CAA8BK,KAA9B;IACD,CA/HC;IAAA,yDAiIgB,CAAC,GAAGC,MAAJ,KAA6B;MAC7C,KAAKnB,OAAL,CAAaoB,cAAb,CAA4B,GAAGD,MAA/B;MACA,OAAO,IAAP;IACD,CApIC;IAAA,wEAyIgCE,OAAD,IAA+B;MAC9D,KAAKV,2BAAL,CAAiCE,QAAjC,CAA0CQ,OAA1C;IACD,CA3IC;IAAA,+DA6IuBC,OAAD,IAA0B;MAChD,KAAKZ,gBAAL,CAAsBG,QAAtB,CAA+BS,OAA/B;IACD,CA/IC;IAAA,uDAwLeC,UAAD,IAAkC;MAChD,KAAKzB,WAAL,CAAiB0B,gBAAjB,CAAkCD,UAAlC;IACD,CA1LC;IAAA,mDA4L8B,CAC9B;MACEE,QAAQ,EAAE,SADZ;MAEEC,KAAK,EAAE,kBAFT;MAGEC,OAAO,EAAE,OAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,6BAAM,KAAK1B,YAAX,uDAAM,mBAAmB2B,GAAnB,CAAuB,kBAAvB,CAAN;MAAA;IAJX,CAD8B,EAO9B;MACEJ,QAAQ,EAAE,SADZ;MAEEC,KAAK,EAAE,uBAFT;MAGEC,OAAO,EAAE,OAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,8BAAM,KAAK1B,YAAX,wDAAM,oBAAmB2B,GAAnB,CAAuB,gBAAvB,CAAN;MAAA;IAJX,CAP8B,CA5L9B;EAAE;;EAIJ;AACF;AACA;EACEC,aAAa,CAAC,GAAGC,MAAJ,EAA0B;IACrC,KAAK5B,cAAL,CAAoBU,QAApB,CAA6BkB,MAA7B;IACA,OAAO,IAAP;EACD;EAED;AACF;AACA;;;EACEC,oBAAoB,CAAC,GAAGC,KAAJ,EAA2B;IAC7C,KAAKzB,YAAL,CAAkBK,QAAlB,CAA2BoB,KAA3B;IACA,OAAO,IAAP;EACD;EAED;AACF;AACA;;;EACEC,cAAc,CAACtB,MAAD,EAAuB;IACnC,KAAKf,SAAL,CAAegB,QAAf,CAAwBD,MAAxB;IACA,OAAO,IAAP;EACD;;EAOOuB,sBAAsB,GAAG;IAC/B,KAAKC,kBAAL,CAAwB,CACtB;MACEC,IAAI,EAAE,KAAKvC,WAAL,CAAiBwC,SADzB;MAEEC,OAAO,EAAE,KAAKzC,WAAL,CAAiB0C,OAAjB,CAAyBC,oBAAA,CAAYC,EAArC;IAFX,CADsB,EAKtB;MACEL,IAAI,EAAE,GADR;MAEEE,OAAO,eAAE,+BAAC,iBAAD;QAAW,UAAU,EAAE,KAAKnC,cAA5B;QAA4C,YAAY,EAAE,KAAKE;MAA/D;IAFX,CALsB,CAAxB;IAUA,KAAK4B,cAAL,CAAoB,CAClB;MACEG,IAAI,EAAE,KAAKvC,WAAL,CAAiBwC,SADzB;MAEEC,OAAO,EAAE,KAAKzC,WAAL,CAAiB6C,cAAjB,CAAgCF,oBAAA,CAAYC,EAA5C;IAFX,CADkB,CAApB;EAMD;;EAEDE,kBAAkB,CAAC,GAAG9B,SAAJ,EAA6B;IAC7C,KAAKV,cAAL,CAAoBS,QAApB,CAA6BC,SAA7B;EACD;;EAED+B,cAAc,CAACC,MAAD,EAAiB;IAC7B,KAAKvC,UAAL,CAAgBM,QAAhB,CAAyBiC,MAAzB;EACD;;EAGDC,oBAAoB,CAACC,IAAD,EAA6B;IAC/C,KAAKC,gBAAL,GAAwBD,IAAxB;EACD;EAED;AACF;AACA;;;EACEE,eAAe,GAAG,CAAE;EAEpB;AACF;AACA;;;EACEC,kBAAkB,GAAG,CAAE;EAEvB;AACF;AACA;;;EACEC,sBAAsB,GAAG,CAAE;EAE3B;AACF;AACA;;;EACEC,oBAAoB,GAAG,CAAE;;EAEzBC,oBAAoB,GAAG,CAAE;EAEzB;AACF;AACA;;;EACEC,gBAAgB,GAAG,CAAE;EAErB;AACF;AACA;;;EACEC,UAAU,CAAC,GAAGC,OAAJ,EAAiC;IACzC,KAAKhD,WAAL,CAAiBI,QAAjB,CAA0B4C,OAA1B;IACA,OAAO,IAAP;EACD;;EAEOC,UAAU,GAAG;IACnB,MAAMC,QAAQ,GAAG,KAAKlD,WAAL,CAAiBmD,MAAjB,EAAjB,CADmB,CAEnB;;IACA,MAAMC,wBAA0C,GAAG,CAAC;MAAEC;IAAF,CAAD,kBACjD,+BAAC,wCAAD;MAAsB,KAAK,EAAE,KAAKb;IAAlC,GAAqDa,QAArD,CADF;;IAIA,OAAO,IAAAC,iBAAA,EAAQJ,QAAR,EAAkBK,MAAlB,CAAyBH,wBAAzB,CAAP;EACD;;EAqCDI,MAAM,GAAW;IACf,KAAKjE,OAAL,CAAaoB,cAAb,CACE,IAAA8C,sBAAA,EAAY;MACVC,WAAW,EAAE,KAAKlE,WADR;MAEVmE,WAAW,EAAE,KAAKzD,2BAFR;MAGVD,gBAAgB,EAAE,KAAKA;IAHb,CAAZ,CADF;IAOA,MAAM,CAAC2D,iBAAD,IAAsB,KAAKnE,YAAL,CAAkBoE,UAAlB,CAA6B;MACvD5B,EAAE,EAAE,gBADmD;MACjC;MACtB6B,MAAM,EAAE,MAAM,CAAE,CAFuC;MAGvDC,WAAW,EAAE,uBAH0C;MAIvDC,UAAU,EAAE;IAJ2C,CAA7B,CAA5B;IAMA,KAAKC,gBAAL,GAAwBL,iBAAxB;IAEA,OAAO;MACLzD,MAAM,EAAE,CACN;QACEyB,IAAI,EAAE,IADR;QAEEE,OAAO,eACL,+BAAC,eAAD;UACE,SAAS,EAAE,KAAK1C,SADlB;UAEE,QAAQ,EAAE,KAAKE,QAFjB;UAGE,OAAO,eAAE,oCAAM,OAAN,CAAc,MAAd;YAAqB,QAAQ,EAAE,KAAKM;UAApC,EAHX;UAIE,OAAO,EAAE,IAJX;UAKE,SAAS,EAAE,KAAKF,cALlB;UAME,gBAAgB,EAAE,KAAKK,YANzB;UAOE,OAAO,EAAE,KAAKkD,UAAL,EAPX;UAQE,sBAAsB,EAAE,KAAKgB,gBAR/B;UASE,UAAU,EAAE,KAAKnE;QATnB;MAHJ,CADM;IADH,CAAP;EAoBD;EAED;;;EAsCqB,aAARoE,QAAQ,CACnB,CAACC,EAAD,EAAK9E,WAAL,EAAkBE,OAAlB,EAA2BE,YAA3B,CADmB,EAEnB2E,MAFmB,EAGnB,CACEhF,SADF,EAEEE,QAFF,EAGEE,WAHF,EAIEE,cAJF,EAKEC,cALF,EAMEE,YANF,EAOED,eAPF,EAQEE,UARF,EASEC,YATF,EAUEC,WAVF,EAWEC,gBAXF,EAYEoE,oBAZF,CAHmB,EA8BnB;IACA,MAAMC,OAAO,GAAG,IAAIpF,OAAJ,CACdE,SADc,EAEdC,WAFc,EAGdC,QAHc,EAIdC,OAJc,EAKdC,WALc,EAMdC,YANc,EAOdC,cAPc,EAQdC,cARc,EASdC,eATc,EAUdC,YAVc,EAWdC,UAXc,EAYdC,YAZc,EAadC,WAbc,EAcdC,gBAdc,EAedoE,oBAfc,CAAhB;IAiBAC,OAAO,CAACC,8BAAR,CAAuC,CAACC,+BAAD,EAAkBC,0BAAlB,CAAvC;IACAH,OAAO,CAACI,qBAAR,CAA8B,cAC5B,+BAAC,2BAAD;MAAc,GAAG,EAAE;IAAnB,EAD4B,eAE5B,+BAAC,+BAAD;MAAkB,GAAG,EAAE;IAAvB,EAF4B,CAA9B;IAIAP,EAAE,CAACQ,YAAH,CAAgBL,OAAO,CAACd,MAAR,CAAeoB,IAAf,CAAoBN,OAApB,CAAhB;IACAA,OAAO,CAACO,gBAAR,CAAyBP,OAAO,CAACjE,SAAjC;IACAiE,OAAO,CAACnC,kBAAR,CAA2B,mBAAM,+BAAC,mBAAD,OAAjC;IACAmC,OAAO,CAACQ,mBAAR,CAA4B,mBAC1B,+BAAC,oCAAD;MAAc,KAAK,MAAnB;MAAoB,IAAI,EAAC,GAAzB;MAA6B,IAAI,EAAC;IAAlC,aADF;IAKAR,OAAO,CAAC5C,sBAAR;IAEA,OAAO4C,OAAP;EACD;;AAjVkB;;;gCAARpF,O,kBA+PW,CAAC6F,cAAD,EAAWC,4BAAX,EAA4BC,wBAA5B,EAA2CC,qBAA3C,C;gCA/PXhG,O,aAgQMiG,e;gCAhQNjG,O,WAiQI,CACbkG,eAAA,CAAKC,QAAL,EADa,EAEbD,eAAA,CAAKC,QAAL,EAFa,EAGbD,eAAA,CAAKC,QAAL,EAHa,EAIbD,eAAA,CAAKC,QAAL,EAJa,EAKbD,eAAA,CAAKC,QAAL,EALa,EAMbD,eAAA,CAAKC,QAAL,EANa,EAObD,eAAA,CAAKC,QAAL,EAPa,EAQbD,eAAA,CAAKC,QAAL,EARa,EASbD,eAAA,CAAKC,QAAL,EATa,EAUbD,eAAA,CAAKC,QAAL,EAVa,EAWbD,eAAA,CAAKC,QAAL,EAXa,EAYbD,eAAA,CAAKC,QAAL,EAZa,EAabD,eAAA,CAAKC,QAAL,EAba,C;eAmFFnG,O;;;AAEf8C,oBAAA,CAAYsD,UAAZ,CAAuBpG,OAAvB"}
+{"version":3,"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","contextSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","routes","register","menuItems","componentTreeNodes","map","componentTreeNode","links","drawer","registerDrawer","filters","widgets","components","updateComponents","category","title","keyChar","handler","run","registerBadge","badges","getScope","options","Corner","useScope","getContext","setSidebarToggle","registerOverviewLine","lines","registerRoutes","applyMenuRoutes","registerMenuRoutes","path","routePath","element","getMenu","ScopeAspect","id","getScopeMenu","registerExplicitRoutes","getComponentUI","registerMenuWidget","registerCorner","corner","registerComponentUrl","func","componentUrlFunc","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","contexts","values","ComponentUrlFuncProvider","children","flatten","concat","registerDefaultDrawers","scopeDrawer","treeWidgets","filtersSlot","uiRoot","setKeyBindHandler","addCommand","action","displayName","keybinding","provider","ui","config","componentFiltersSlot","scopeUi","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","UIRuntime","Slot","withType","addRuntime"],"sources":["scope.ui.runtime.tsx"],"sourcesContent":["import flatten from 'lodash.flatten';\nimport type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';\nimport { ComponentUrlResolver, ComponentUrlProvider } from '@teambit/component.modules.component-url';\n\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { scopeDrawer } from './scope.ui.drawer';\nimport { GetScopeOptions } from './get-scope-options';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ContextSlot = SlotRegistry<ScopeContextType[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot,\n\n    /**\n     * add a new context to ui\n     */\n    private contextSlot: ContextSlot,\n    private drawerWidgetSlot: DrawerWidgetSlot,\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  getScope(options: GetScopeOptions) {\n    return (\n      <Scope\n        TargetCorner={options.Corner}\n        routeSlot={this.routeSlot}\n        menuSlot={this.menuSlot}\n        sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n        scopeUi={this}\n        userUseScopeQuery={options.useScope}\n        badgeSlot={this.scopeBadgeSlot}\n        overviewLineSlot={this.overviewSlot}\n        context={this.getContext()}\n        onSidebarTogglerChange={this.setSidebarToggle}\n        cornerSlot={this.cornerSlot}\n      />\n    );\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  private applyMenuRoutes() {\n    this.registerMenuRoutes([\n      {\n        path: this.componentUi.routePath,\n        element: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        path: '/',\n        element: this.getScopeMenu(),\n      },\n    ]);\n  }\n\n  getScopeMenu() {\n    return <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />;\n  }\n\n  private registerExplicitRoutes() {\n    this.applyMenuRoutes();\n    this.registerRoutes([\n      {\n        path: this.componentUi.routePath,\n        element: this.componentUi.getComponentUI(ScopeAspect.id),\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  private componentUrlFunc: ComponentUrlResolver | undefined;\n  registerComponentUrl(func: ComponentUrlResolver) {\n    this.componentUrlFunc = func;\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(...context: ScopeContextType[]) {\n    this.contextSlot.register(context);\n    return this;\n  }\n\n  private getContext() {\n    const contexts = this.contextSlot.values();\n    // eslint-disable-next-line react/prop-types\n    const ComponentUrlFuncProvider: ScopeContextType = ({ children }) => (\n      <ComponentUrlProvider value={this.componentUrlFunc}>{children}</ComponentUrlProvider>\n    );\n\n    return flatten(contexts).concat(ComponentUrlFuncProvider);\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  registerDrawers = (...drawer: DrawerType[]) => {\n    this.sidebar.registerDrawer(...drawer);\n    return this;\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  registerDefaultDrawers() {\n    this.sidebar.registerDrawer(\n      scopeDrawer({\n        treeWidgets: this.sidebarSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n      })\n    );\n  }\n\n  uiRoot(): UIRoot {\n    this.registerDefaultDrawers();\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<ContextSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI]: [UiUI, ComponentUI, SidebarUI, CommandBarUI],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot,\n      ContextSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot\n    );\n    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);\n    scopeUi.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    if (ui) ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n    if (ui) scopeUi.registerExplicitRoutes();\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"],"mappings":"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"}

package/dist/ui/scope.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import 'reset-css';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { ComponentType } from 'react';
 import ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';
+import { ScopeModel } from '..';
 export declare type ScopeProps = {
     routeSlot: RouteSlot;
     menuSlot: RouteSlot;
@@ -11,9 +12,13 @@ export declare type ScopeProps = {
     overviewLineSlot: OverviewLineSlot;
     cornerSlot: CornerSlot;
     context: ScopeContextType[];
+    userUseScopeQuery?: () => {
+        scope: ScopeModel | undefined;
+    };
     onSidebarTogglerChange: (callback: () => void) => void;
+    TargetCorner?: ComponentType;
 };
 /**
  * root component of the scope
  */
-export declare function Scope({ routeSlot, menuSlot, sidebar, scopeUi, badgeSlot, overviewLineSlot, cornerSlot, context, onSidebarTogglerChange, }: ScopeProps): JSX.Element;
+export declare function Scope({ routeSlot, menuSlot, sidebar, scopeUi, badgeSlot, overviewLineSlot, cornerSlot, context, TargetCorner, onSidebarTogglerChange, userUseScopeQuery, }: ScopeProps): JSX.Element;

package/dist/ui/scope.js

@@ -177,11 +177,13 @@ function Scope({
   overviewLineSlot,
   cornerSlot,
   context = [],
-  onSidebarTogglerChange
+  TargetCorner,
+  onSidebarTogglerChange,
+  userUseScopeQuery
 }) {
   const {
     scope
-  } = (0, _scopeUiHooks2().useScopeQuery)();
+  } = userUseScopeQuery ? userUseScopeQuery() : (0, _scopeUiHooks2().useScopeQuery)();
   const isMobile = (0, _uiFoundationUiHooks().useIsMobile)();
   const [isSidebarOpen, handleSidebarToggle] = (0, _react().useReducer)(x => !x, !isMobile);
   const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.right;
@@ -190,7 +192,7 @@ function Scope({
     return /*#__PURE__*/_react().default.createElement(_uiFoundationUi3().FullLoader, null);
   }
 
-  const CornerOverride = cornerSlot === null || cornerSlot === void 0 ? void 0 : cornerSlot.values()[0];
+  const CornerOverride = TargetCorner || (cornerSlot === null || cornerSlot === void 0 ? void 0 : cornerSlot.values()[0]);
   scopeUi.setComponents(scope.components);
   const Context = context.map(ctx => [ctx, {
     scope

package/dist/ui/scope.js.map

@@ -1 +1 @@
-{"version":3,"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","context","onSidebarTogglerChange","scope","useScopeQuery","isMobile","useIsMobile","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","Context","map","ctx","styles","topbar","name","whiteCorner","main","splitter","e","stopPropagation"],"sources":["scope.tsx"],"sourcesContent":["import 'reset-css';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport React, { useReducer } from 'react';\nimport { Route } from 'react-router-dom';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';\nimport { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport { ScopeOverview } from './scope-overview';\nimport styles from './scope.module.scss';\nimport ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';\n\nexport type ScopeProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  scopeUi: ScopeUI;\n  badgeSlot: ScopeBadgeSlot;\n  overviewLineSlot: OverviewLineSlot;\n  cornerSlot: CornerSlot;\n  context: ScopeContextType[];\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * root component of the scope\n */\nexport function Scope({\n  routeSlot,\n  menuSlot,\n  sidebar,\n  scopeUi,\n  badgeSlot,\n  overviewLineSlot,\n  cornerSlot,\n  context = [],\n  onSidebarTogglerChange,\n}: ScopeProps) {\n  const { scope } = useScopeQuery();\n  const isMobile = useIsMobile();\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  if (!scope) {\n    return <FullLoader />;\n  }\n  const CornerOverride = cornerSlot?.values()[0];\n  scopeUi.setComponents(scope.components);\n  const Context = context.map((ctx) => [ctx, { scope }] as ComponentTuple);\n\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  return (\n    <ScopeProvider scope={scope}>\n      <Composer components={Context}>\n        <div className={styles.scope}>\n          <TopBar\n            className={styles.topbar}\n            Corner={() => {\n              if (CornerOverride) return <CornerOverride />;\n              return <Corner name={scope.name} className={styles.whiteCorner} />;\n            }}\n            menu={menuSlot}\n          />\n\n          <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>\n            <Pane className={styles.sidebar}>{sidebar}</Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={isSidebarOpen}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot}>\n                <Route index element={<ScopeOverview badgeSlot={badgeSlot} overviewSlot={overviewLineSlot} />} />\n              </SlotRouter>\n            </Pane>\n          </SplitPane>\n        </div>\n      </Composer>\n    </ScopeProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAeA;AACA;AACA;AACO,SAASA,KAAT,CAAe;EACpBC,SADoB;EAEpBC,QAFoB;EAGpBC,OAHoB;EAIpBC,OAJoB;EAKpBC,SALoB;EAMpBC,gBANoB;EAOpBC,UAPoB;EAQpBC,OAAO,GAAG,EARU;EASpBC;AAToB,CAAf,EAUQ;EACb,MAAM;IAAEC;EAAF,IAAY,IAAAC,8BAAA,GAAlB;EACA,MAAMC,QAAQ,GAAG,IAAAC,kCAAA,GAAjB;EACA,MAAM,CAACC,aAAD,EAAgBC,mBAAhB,IAAuC,IAAAC,mBAAA,EAAYC,CAAD,IAAO,CAACA,CAAnB,EAAsB,CAACL,QAAvB,CAA7C;EACA,MAAMM,eAAe,GAAGJ,aAAa,GAAGK,iCAAA,CAAOC,GAAV,GAAgBD,iCAAA,CAAOE,KAA5D;;EACA,IAAI,CAACX,KAAL,EAAY;IACV,oBAAO,+BAAC,6BAAD,OAAP;EACD;;EACD,MAAMY,cAAc,GAAGf,UAAH,aAAGA,UAAH,uBAAGA,UAAU,CAAEgB,MAAZ,GAAqB,CAArB,CAAvB;EACAnB,OAAO,CAACoB,aAAR,CAAsBd,KAAK,CAACe,UAA5B;EACA,MAAMC,OAAO,GAAGlB,OAAO,CAACmB,GAAR,CAAaC,GAAD,IAAS,CAACA,GAAD,EAAM;IAAElB;EAAF,CAAN,CAArB,CAAhB;EAEAD,sBAAsB,CAACM,mBAAD,CAAtB;EAEA,oBACE,+BAAC,6BAAD;IAAe,KAAK,EAAEL;EAAtB,gBACE,+BAAC,uBAAD;IAAU,UAAU,EAAEgB;EAAtB,gBACE;IAAK,SAAS,EAAEG,sBAAA,CAAOnB;EAAvB,gBACE,+BAAC,yBAAD;IACE,SAAS,EAAEmB,sBAAA,CAAOC,MADpB;IAEE,MAAM,EAAE,MAAM;MACZ,IAAIR,cAAJ,EAAoB,oBAAO,+BAAC,cAAD,OAAP;MACpB,oBAAO,+BAAC,wBAAD;QAAQ,IAAI,EAAEZ,KAAK,CAACqB,IAApB;QAA0B,SAAS,EAAEF,sBAAA,CAAOG;MAA5C,EAAP;IACD,CALH;IAME,IAAI,EAAE9B;EANR,EADF,eAUE,+BAAC,oCAAD;IAAW,SAAS,EAAE2B,sBAAA,CAAOI,IAA7B;IAAmC,IAAI,EAAE,GAAzC;IAA8C,MAAM,EAAEf;EAAtD,gBACE,+BAAC,+BAAD;IAAM,SAAS,EAAEW,sBAAA,CAAO1B;EAAxB,GAAkCA,OAAlC,CADF,eAEE,+BAAC,yCAAD;IAAe,SAAS,EAAE0B,sBAAA,CAAOK;EAAjC,gBACE,+BAAC,kCAAD;IACE,MAAM,EAAEpB,aADV;IAEE,WAAW,EAAGqB,CAAD,IAAOA,CAAC,CAACC,eAAF,EAFtB,CAE2C;IAF3C;IAGE,OAAO,EAAErB,mBAHX;IAIE,cAAc,EAAG,GAAED,aAAa,GAAG,MAAH,GAAY,MAAO;EAJrD,EADF,CAFF,eAUE,+BAAC,+BAAD,qBACE,+BAAC,uCAAD;IAAY,IAAI,EAAEb;EAAlB,gBACE,+BAAC,uBAAD;IAAO,KAAK,MAAZ;IAAa,OAAO,eAAE,+BAAC,8BAAD;MAAe,SAAS,EAAEI,SAA1B;MAAqC,YAAY,EAAEC;IAAnD;EAAtB,EADF,CADF,CAVF,CAVF,CADF,CADF,CADF;AAiCD"}
+{"version":3,"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","context","TargetCorner","onSidebarTogglerChange","userUseScopeQuery","scope","useScopeQuery","isMobile","useIsMobile","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","Context","map","ctx","styles","topbar","name","whiteCorner","main","splitter","e","stopPropagation"],"sources":["scope.tsx"],"sourcesContent":["import 'reset-css';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport React, { useReducer, ComponentType } from 'react';\nimport { Route } from 'react-router-dom';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';\nimport { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport { ScopeOverview } from './scope-overview';\nimport styles from './scope.module.scss';\nimport ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';\nimport { ScopeModel } from '..';\n\nexport type ScopeProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  scopeUi: ScopeUI;\n  badgeSlot: ScopeBadgeSlot;\n  overviewLineSlot: OverviewLineSlot;\n  cornerSlot: CornerSlot;\n  context: ScopeContextType[];\n  userUseScopeQuery?: () => { scope: ScopeModel | undefined };\n  onSidebarTogglerChange: (callback: () => void) => void;\n  TargetCorner?: ComponentType;\n};\n\n/**\n * root component of the scope\n */\nexport function Scope({\n  routeSlot,\n  menuSlot,\n  sidebar,\n  scopeUi,\n  badgeSlot,\n  overviewLineSlot,\n  cornerSlot,\n  context = [],\n  TargetCorner,\n  onSidebarTogglerChange,\n  userUseScopeQuery,\n}: ScopeProps) {\n  const { scope } = userUseScopeQuery ? userUseScopeQuery() : useScopeQuery();\n  const isMobile = useIsMobile();\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  if (!scope) {\n    return <FullLoader />;\n  }\n  const CornerOverride = TargetCorner || cornerSlot?.values()[0];\n  scopeUi.setComponents(scope.components);\n  const Context = context.map((ctx) => [ctx, { scope }] as ComponentTuple);\n\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  return (\n    <ScopeProvider scope={scope}>\n      <Composer components={Context}>\n        <div className={styles.scope}>\n          <TopBar\n            className={styles.topbar}\n            Corner={() => {\n              if (CornerOverride) return <CornerOverride />;\n              return <Corner name={scope.name} className={styles.whiteCorner} />;\n            }}\n            menu={menuSlot}\n          />\n\n          <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>\n            <Pane className={styles.sidebar}>{sidebar}</Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={isSidebarOpen}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot}>\n                <Route index element={<ScopeOverview badgeSlot={badgeSlot} overviewSlot={overviewLineSlot} />} />\n              </SlotRouter>\n            </Pane>\n          </SplitPane>\n        </div>\n      </Composer>\n    </ScopeProvider>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.785",
+  "version": "0.0.788",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.785"
+    "version": "0.0.788"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -26,37 +26,37 @@
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/base-ui.utils.composer": "1.0.0",
-    "@teambit/scope.models.scope-model": "0.0.170",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.170",
-    "@teambit/cli": "0.0.519",
-    "@teambit/component": "0.0.785",
-    "@teambit/logger": "0.0.612",
-    "@teambit/aspect-loader": "0.0.785",
+    "@teambit/scope.models.scope-model": "0.0.172",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.172",
+    "@teambit/cli": "0.0.521",
+    "@teambit/component": "0.0.788",
+    "@teambit/logger": "0.0.614",
+    "@teambit/aspect-loader": "0.0.788",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/builder": "0.0.785",
-    "@teambit/compiler": "0.0.785",
-    "@teambit/envs": "0.0.785",
-    "@teambit/express": "0.0.617",
-    "@teambit/graphql": "0.0.785",
+    "@teambit/builder": "0.0.788",
+    "@teambit/compiler": "0.0.788",
+    "@teambit/envs": "0.0.788",
+    "@teambit/express": "0.0.619",
+    "@teambit/graphql": "0.0.788",
     "@teambit/harmony.modules.requireable-component": "0.0.484",
-    "@teambit/isolator": "0.0.785",
+    "@teambit/isolator": "0.0.788",
     "@teambit/legacy-bit-id": "0.0.399",
-    "@teambit/ui": "0.0.785",
+    "@teambit/ui": "0.0.788",
     "@teambit/workspace.modules.match-pattern": "0.0.489",
-    "@teambit/component.ui.component-drawer": "0.0.67",
+    "@teambit/component.ui.component-drawer": "0.0.69",
     "@teambit/design.ui.tree": "0.0.6",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.584",
-    "@teambit/command-bar": "0.0.785",
-    "@teambit/component-tree": "0.0.573",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.586",
+    "@teambit/command-bar": "0.0.788",
+    "@teambit/component-tree": "0.0.576",
     "@teambit/component.modules.component-url": "0.0.125",
     "@teambit/component.ui.component-filters": "0.0.7",
-    "@teambit/sidebar": "0.0.785",
+    "@teambit/sidebar": "0.0.788",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.menu": "0.0.487",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.499",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.488",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.174",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.176",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.195",
     "@teambit/ui-foundation.ui.corner": "0.0.498",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
@@ -71,8 +71,8 @@
     "@teambit/scope.ui.scope-details": "0.0.501"
   },
   "devDependencies": {
-    "@types/semver": "7.3.4",
     "@types/react": "^17.0.8",
+    "@types/semver": "7.3.4",
     "@types/fs-extra": "9.0.7",
     "@types/lodash": "4.14.165",
     "@types/lodash.flatten": "4.4.6",
@@ -86,7 +86,7 @@
   },
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.300",
+    "@teambit/legacy": "1.0.303",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1657337177086.js → preview-1657709114119.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.785/dist/scope.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.785/dist/scope.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.788/dist/scope.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.788/dist/scope.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/scope.ui.runtime.tsx

@@ -27,6 +27,7 @@ import { ScopeMenu, ScopeUseBox } from './ui/menu';
 import { ScopeAspect } from './scope.aspect';
 import { Scope } from './ui/scope';
 import { scopeDrawer } from './scope.ui.drawer';
+import { GetScopeOptions } from './get-scope-options';
 
 export type ScopeBadge = ComponentType;
 
@@ -114,6 +115,24 @@ export class ScopeUI {
     return this;
   }
 
+  getScope(options: GetScopeOptions) {
+    return (
+      <Scope
+        TargetCorner={options.Corner}
+        routeSlot={this.routeSlot}
+        menuSlot={this.menuSlot}
+        sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}
+        scopeUi={this}
+        userUseScopeQuery={options.useScope}
+        badgeSlot={this.scopeBadgeSlot}
+        overviewLineSlot={this.overviewSlot}
+        context={this.getContext()}
+        onSidebarTogglerChange={this.setSidebarToggle}
+        cornerSlot={this.cornerSlot}
+      />
+    );
+  }
+
   /**
    * register a new line beneath the scope overview section.
    */
@@ -135,7 +154,7 @@ export class ScopeUI {
     return this;
   };
 
-  private registerExplicitRoutes() {
+  private applyMenuRoutes() {
     this.registerMenuRoutes([
       {
         path: this.componentUi.routePath,
@@ -143,9 +162,17 @@ export class ScopeUI {
       },
       {
         path: '/',
-        element: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,
+        element: this.getScopeMenu(),
       },
     ]);
+  }
+
+  getScopeMenu() {
+    return <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />;
+  }
+
+  private registerExplicitRoutes() {
+    this.applyMenuRoutes();
     this.registerRoutes([
       {
         path: this.componentUi.routePath,
@@ -247,7 +274,7 @@ export class ScopeUI {
     this.drawerWidgetSlot.register(widgets);
   };
 
-  uiRoot(): UIRoot {
+  registerDefaultDrawers() {
     this.sidebar.registerDrawer(
       scopeDrawer({
         treeWidgets: this.sidebarSlot,
@@ -255,6 +282,10 @@ export class ScopeUI {
         drawerWidgetSlot: this.drawerWidgetSlot,
       })
     );
+  }
+
+  uiRoot(): UIRoot {
+    this.registerDefaultDrawers();
     const [setKeyBindHandler] = this.commandBarUI.addCommand({
       id: 'sidebar.toggle', // TODO - extract to a component!
       action: () => {},
@@ -376,15 +407,15 @@ export class ScopeUI {
       <FilterWidget key={'workspace-filter-widget'} />,
       <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,
     ]);
-    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
+    if (ui) ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => <ScopeUseBox />);
     scopeUi.registerSidebarLink(() => (
-      <MenuLinkItem exact href="/" icon="comps">
+      <MenuLinkItem exact href="" icon="comps">
         Gallery
       </MenuLinkItem>
     ));
-    scopeUi.registerExplicitRoutes();
+    if (ui) scopeUi.registerExplicitRoutes();
 
     return scopeUi;
   }

package/ui/scope.tsx

@@ -7,7 +7,7 @@ import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitt
 import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
 import { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';
 import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
-import React, { useReducer } from 'react';
+import React, { useReducer, ComponentType } from 'react';
 import { Route } from 'react-router-dom';
 import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
 import { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';
@@ -15,6 +15,7 @@ import { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';
 import { ScopeOverview } from './scope-overview';
 import styles from './scope.module.scss';
 import ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';
+import { ScopeModel } from '..';
 
 export type ScopeProps = {
   routeSlot: RouteSlot;
@@ -25,7 +26,9 @@ export type ScopeProps = {
   overviewLineSlot: OverviewLineSlot;
   cornerSlot: CornerSlot;
   context: ScopeContextType[];
+  userUseScopeQuery?: () => { scope: ScopeModel | undefined };
   onSidebarTogglerChange: (callback: () => void) => void;
+  TargetCorner?: ComponentType;
 };
 
 /**
@@ -40,16 +43,18 @@ export function Scope({
   overviewLineSlot,
   cornerSlot,
   context = [],
+  TargetCorner,
   onSidebarTogglerChange,
+  userUseScopeQuery,
 }: ScopeProps) {
-  const { scope } = useScopeQuery();
+  const { scope } = userUseScopeQuery ? userUseScopeQuery() : useScopeQuery();
   const isMobile = useIsMobile();
   const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
   if (!scope) {
     return <FullLoader />;
   }
-  const CornerOverride = cornerSlot?.values()[0];
+  const CornerOverride = TargetCorner || cornerSlot?.values()[0];
   scopeUi.setComponents(scope.components);
   const Context = context.map((ctx) => [ctx, { scope }] as ComponentTuple);