@teambit/scope 0.0.844 → 0.0.845

package/dist/scope.ui.runtime.js

@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 require("core-js/modules/es.array.iterator.js");
 
+require("core-js/modules/es.array.sort.js");
+
 require("core-js/modules/es.promise.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -22,7 +24,7 @@ function _defineProperty2() {
 }
 
 function _lodash() {
-  const data = _interopRequireDefault(require("lodash.flatten"));
+  const data = require("lodash");
 
   _lodash = function () {
     return data;
@@ -290,11 +292,12 @@ class ScopeUI {
 
   getScope(options) {
     return /*#__PURE__*/_react().default.createElement(_scope2().Scope, {
+      TargetScopeOverview: options.TargetScopeOverview,
       TargetCorner: options.Corner,
       routeSlot: this.routeSlot,
       menuSlot: this.menuSlot,
       sidebar: /*#__PURE__*/_react().default.createElement(this.sidebar.render, {
-        itemSlot: this.sidebarItemSlot
+        items: this.listSidebarLinks()
       }),
       scopeUi: this,
       userUseScopeQuery: options.useScope,
@@ -302,7 +305,8 @@ class ScopeUI {
       overviewLineSlot: this.overviewSlot,
       context: this.getContext(),
       onSidebarTogglerChange: this.setSidebarToggle,
-      cornerSlot: this.cornerSlot
+      cornerSlot: this.cornerSlot,
+      paneClassName: options.paneClassName
     });
   }
   /**
@@ -411,7 +415,7 @@ class ScopeUI {
       value: this.componentUrlFunc
     }, children);
 
-    return (0, _lodash().default)(contexts).concat(ComponentUrlFuncProvider);
+    return (0, _lodash().flatten)(contexts).concat(ComponentUrlFuncProvider);
   }
 
   registerDefaultDrawers(assumeScopeInUrl = false) {
@@ -440,7 +444,7 @@ class ScopeUI {
           routeSlot: this.routeSlot,
           menuSlot: this.menuSlot,
           sidebar: /*#__PURE__*/_react().default.createElement(this.sidebar.render, {
-            itemSlot: this.sidebarItemSlot
+            items: this.listSidebarLinks()
           }),
           scopeUi: this,
           badgeSlot: this.scopeBadgeSlot,
@@ -452,6 +456,18 @@ class ScopeUI {
       }]
     };
   }
+
+  listSidebarLinks() {
+    const links = (0, _lodash().flatten)(this.sidebarItemSlot.values());
+    const sorted = links.sort((a, b) => {
+      const aWeight = (a === null || a === void 0 ? void 0 : a.weight) || 0;
+      const bWeight = (b === null || b === void 0 ? void 0 : b.weight) || 0;
+      return aWeight - bWeight;
+    });
+    return (0, _lodash().compact)(sorted.map(link => {
+      return link.component;
+    }));
+  }
   /** registers available components */
 
 
@@ -466,11 +482,15 @@ class ScopeUI {
     if (ui) ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => /*#__PURE__*/_react().default.createElement(_menu().ScopeUseBox, null));
-    if (config.showGallery) scopeUi.registerSidebarLink(() => /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuLinkItem, {
-      exact: true,
-      href: "/",
-      icon: "comps"
-    }, "Gallery"));
+    if (config.showGallery) scopeUi.registerSidebarLink({
+      component: function Gallery() {
+        return /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuLinkItem, {
+          exact: true,
+          href: "/",
+          icon: "comps"
+        }, "Gallery");
+      }
+    });
     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","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","assumeScopeInUrl","scopeDrawer","treeWidgets","filtersSlot","uiRoot","setKeyBindHandler","addCommand","action","displayName","keybinding","provider","ui","config","componentFiltersSlot","scopeUi","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","showGallery","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 } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ComponentUrlResolver, ComponentUrlProvider } from '@teambit/component.modules.component-url';\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 type ScopeUIConfig = {\n  showGallery: boolean;\n};\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(assumeScopeInUrl = false) {\n    this.sidebar.registerDrawer(\n      scopeDrawer({\n        treeWidgets: this.sidebarSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        assumeScopeInUrl,\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 defaultConfig = {\n    showGallery: true,\n  };\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI]: [UiUI, ComponentUI, SidebarUI, CommandBarUI],\n    config: ScopeUIConfig,\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    if (config.showGallery)\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":";;;;;;;;;;;;;;;;;;;;;;;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;;AAOA;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;;AA6BO,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,4DA8CoBC,MAAD,IAA0B;MAC7C,KAAKb,QAAL,CAAcc,QAAd,CAAuBD,MAAvB;MACA,OAAO,IAAP;IACD,CAjDC;IAAA;IAAA,0DAwIkBE,SAAD,IAA2B;MAC5C,KAAKR,YAAL,CAAkBO,QAAlB,CAA2BC,SAA3B;IACD,CA1IC;IAAA,+DA+IuBC,kBAAD,IAA6C;MACnEA,kBAAkB,CAACC,GAAnB,CAAwBC,iBAAD,IAAuB,KAAKhB,WAAL,CAAiBY,QAAjB,CAA0BI,iBAA1B,CAA9C;MACA,OAAO,IAAP;IACD,CAlJC;IAAA,6DAuJoB,CAAC,GAAGC,KAAJ,KAA6B;MACjD,KAAKb,eAAL,CAAqBQ,QAArB,CAA8BK,KAA9B;IACD,CAzJC;IAAA,yDA2JgB,CAAC,GAAGC,MAAJ,KAA6B;MAC7C,KAAKnB,OAAL,CAAaoB,cAAb,CAA4B,GAAGD,MAA/B;MACA,OAAO,IAAP;IACD,CA9JC;IAAA,wEAmKgCE,OAAD,IAA+B;MAC9D,KAAKV,2BAAL,CAAiCE,QAAjC,CAA0CQ,OAA1C;IACD,CArKC;IAAA,+DAuKuBC,OAAD,IAA0B;MAChD,KAAKZ,gBAAL,CAAsBG,QAAtB,CAA+BS,OAA/B;IACD,CAzKC;IAAA,uDAuNeC,UAAD,IAAkC;MAChD,KAAKzB,WAAL,CAAiB0B,gBAAjB,CAAkCD,UAAlC;IACD,CAzNC;IAAA,mDA2N8B,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,CA3N9B;EAAE;;EAIJ;AACF;AACA;EACEC,aAAa,CAAC,GAAGC,MAAJ,EAA0B;IACrC,KAAK5B,cAAL,CAAoBU,QAApB,CAA6BkB,MAA7B;IACA,OAAO,IAAP;EACD;;EAEDC,QAAQ,CAACC,OAAD,EAA2B;IACjC,oBACE,+BAAC,eAAD;MACE,YAAY,EAAEA,OAAO,CAACC,MADxB;MAEE,SAAS,EAAE,KAAKrC,SAFlB;MAGE,QAAQ,EAAE,KAAKE,QAHjB;MAIE,OAAO,eAAE,oCAAM,OAAN,CAAc,MAAd;QAAqB,QAAQ,EAAE,KAAKM;MAApC,EAJX;MAKE,OAAO,EAAE,IALX;MAME,iBAAiB,EAAE4B,OAAO,CAACE,QAN7B;MAOE,SAAS,EAAE,KAAKhC,cAPlB;MAQE,gBAAgB,EAAE,KAAKK,YARzB;MASE,OAAO,EAAE,KAAK4B,UAAL,EATX;MAUE,sBAAsB,EAAE,KAAKC,gBAV/B;MAWE,UAAU,EAAE,KAAK9B;IAXnB,EADF;EAeD;EAED;AACF;AACA;;;EACE+B,oBAAoB,CAAC,GAAGC,KAAJ,EAA2B;IAC7C,KAAK/B,YAAL,CAAkBK,QAAlB,CAA2B0B,KAA3B;IACA,OAAO,IAAP;EACD;EAED;AACF;AACA;;;EACEC,cAAc,CAAC5B,MAAD,EAAuB;IACnC,KAAKf,SAAL,CAAegB,QAAf,CAAwBD,MAAxB;IACA,OAAO,IAAP;EACD;;EAOO6B,eAAe,GAAG;IACxB,KAAKC,kBAAL,CAAwB,CACtB;MACEC,IAAI,EAAE,KAAK7C,WAAL,CAAiB8C,SADzB;MAEEC,OAAO,EAAE,KAAK/C,WAAL,CAAiBgD,OAAjB,CAAyBC,oBAAA,CAAYC,EAArC;IAFX,CADsB,EAKtB;MACEL,IAAI,EAAE,GADR;MAEEE,OAAO,EAAE,KAAKI,YAAL;IAFX,CALsB,CAAxB;EAUD;;EAEDA,YAAY,GAAG;IACb,oBAAO,+BAAC,iBAAD;MAAW,UAAU,EAAE,KAAK7C,cAA5B;MAA4C,YAAY,EAAE,KAAKE;IAA/D,EAAP;EACD;;EAEO4C,sBAAsB,GAAG;IAC/B,KAAKT,eAAL;IACA,KAAKD,cAAL,CAAoB,CAClB;MACEG,IAAI,EAAE,KAAK7C,WAAL,CAAiB8C,SADzB;MAEEC,OAAO,EAAE,KAAK/C,WAAL,CAAiBqD,cAAjB,CAAgCJ,oBAAA,CAAYC,EAA5C;IAFX,CADkB,CAApB;EAMD;;EAEDI,kBAAkB,CAAC,GAAGtC,SAAJ,EAA6B;IAC7C,KAAKV,cAAL,CAAoBS,QAApB,CAA6BC,SAA7B;EACD;;EAEDuC,cAAc,CAACC,MAAD,EAAiB;IAC7B,KAAK/C,UAAL,CAAgBM,QAAhB,CAAyByC,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,KAAKxD,WAAL,CAAiBI,QAAjB,CAA0BoD,OAA1B;IACA,OAAO,IAAP;EACD;;EAEO7B,UAAU,GAAG;IACnB,MAAM8B,QAAQ,GAAG,KAAKzD,WAAL,CAAiB0D,MAAjB,EAAjB,CADmB,CAEnB;;IACA,MAAMC,wBAA0C,GAAG,CAAC;MAAEC;IAAF,CAAD,kBACjD,+BAAC,wCAAD;MAAsB,KAAK,EAAE,KAAKZ;IAAlC,GAAqDY,QAArD,CADF;;IAIA,OAAO,IAAAC,iBAAA,EAAQJ,QAAR,EAAkBK,MAAlB,CAAyBH,wBAAzB,CAAP;EACD;;EAqCDI,sBAAsB,CAACC,gBAAgB,GAAG,KAApB,EAA2B;IAC/C,KAAKzE,OAAL,CAAaoB,cAAb,CACE,IAAAsD,sBAAA,EAAY;MACVC,WAAW,EAAE,KAAK1E,WADR;MAEV2E,WAAW,EAAE,KAAKjE,2BAFR;MAGVD,gBAAgB,EAAE,KAAKA,gBAHb;MAIV+D;IAJU,CAAZ,CADF;EAQD;;EAEDI,MAAM,GAAW;IACf,KAAKL,sBAAL;IACA,MAAM,CAACM,iBAAD,IAAsB,KAAK5E,YAAL,CAAkB6E,UAAlB,CAA6B;MACvD/B,EAAE,EAAE,gBADmD;MACjC;MACtBgC,MAAM,EAAE,MAAM,CAAE,CAFuC;MAGvDC,WAAW,EAAE,uBAH0C;MAIvDC,UAAU,EAAE;IAJ2C,CAA7B,CAA5B;IAMA,KAAK7C,gBAAL,GAAwByC,iBAAxB;IAEA,OAAO;MACLlE,MAAM,EAAE,CACN;QACE+B,IAAI,EAAE,IADR;QAEEE,OAAO,eACL,+BAAC,eAAD;UACE,SAAS,EAAE,KAAKhD,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,KAAK4B,UAAL,EAPX;UAQE,sBAAsB,EAAE,KAAKC,gBAR/B;UASE,UAAU,EAAE,KAAK9B;QATnB;MAHJ,CADM;IADH,CAAP;EAoBD;EAED;;;EA0CqB,aAAR4E,QAAQ,CACnB,CAACC,EAAD,EAAKtF,WAAL,EAAkBE,OAAlB,EAA2BE,YAA3B,CADmB,EAEnBmF,MAFmB,EAGnB,CACExF,SADF,EAEEE,QAFF,EAGEE,WAHF,EAIEE,cAJF,EAKEC,cALF,EAMEE,YANF,EAOED,eAPF,EAQEE,UARF,EASEC,YATF,EAUEC,WAVF,EAWEC,gBAXF,EAYE4E,oBAZF,CAHmB,EA8BnB;IACA,MAAMC,OAAO,GAAG,IAAI5F,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,EAed4E,oBAfc,CAAhB;IAiBAC,OAAO,CAACC,8BAAR,CAAuC,CAACC,8CAAD,EAAkBC,0CAAlB,CAAvC;IACAH,OAAO,CAACI,qBAAR,CAA8B,cAC5B,+BAAC,2BAAD;MAAc,GAAG,EAAE;IAAnB,EAD4B,eAE5B,+BAAC,+BAAD;MAAkB,GAAG,EAAE;IAAvB,EAF4B,CAA9B;IAIA,IAAIP,EAAJ,EAAQA,EAAE,CAACQ,YAAH,CAAgBL,OAAO,CAACV,MAAR,CAAegB,IAAf,CAAoBN,OAApB,CAAhB;IACRA,OAAO,CAACO,gBAAR,CAAyBP,OAAO,CAACzE,SAAjC;IACAyE,OAAO,CAACnC,kBAAR,CAA2B,mBAAM,+BAAC,mBAAD,OAAjC;IACA,IAAIiC,MAAM,CAACU,WAAX,EACER,OAAO,CAACS,mBAAR,CAA4B,mBAC1B,+BAAC,oCAAD;MAAc,KAAK,MAAnB;MAAoB,IAAI,EAAC,GAAzB;MAA6B,IAAI,EAAC;IAAlC,aADF;IAKF,IAAIZ,EAAJ,EAAQG,OAAO,CAACrC,sBAAR;IAER,OAAOqC,OAAP;EACD;;AArXkB;;;gCAAR5F,O,kBA8RW,CAACsG,cAAD,EAAWC,4BAAX,EAA4BC,wBAA5B,EAA2CC,qBAA3C,C;gCA9RXzG,O,aA+RM0G,e;gCA/RN1G,O,WAgSI,CACb2G,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;gCAhSJ5G,O,mBAgTY;EACrBoG,WAAW,EAAE;AADQ,C;eAwEVpG,O;;;AAEfoD,oBAAA,CAAYyD,UAAZ,CAAuB7G,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","TargetScopeOverview","Corner","listSidebarLinks","useScope","getContext","setSidebarToggle","paneClassName","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","assumeScopeInUrl","scopeDrawer","treeWidgets","filtersSlot","uiRoot","setKeyBindHandler","addCommand","action","displayName","keybinding","sorted","sort","a","b","aWeight","weight","bWeight","compact","link","component","provider","ui","config","componentFiltersSlot","scopeUi","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","showGallery","registerSidebarLink","Gallery","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","UIRuntime","Slot","withType","addRuntime"],"sources":["scope.ui.runtime.tsx"],"sourcesContent":["import type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { compact, flatten } from 'lodash';\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 } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ComponentUrlResolver, ComponentUrlProvider } from '@teambit/component.modules.component-url';\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 type ScopeUIConfig = {\n  showGallery: boolean;\n};\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        TargetScopeOverview={options.TargetScopeOverview}\n        TargetCorner={options.Corner}\n        routeSlot={this.routeSlot}\n        menuSlot={this.menuSlot}\n        sidebar={<this.sidebar.render items={this.listSidebarLinks()} />}\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        paneClassName={options.paneClassName}\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(assumeScopeInUrl = false) {\n    this.sidebar.registerDrawer(\n      scopeDrawer({\n        treeWidgets: this.sidebarSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        assumeScopeInUrl,\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 items={this.listSidebarLinks()} />}\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  listSidebarLinks() {\n    const links = flatten(this.sidebarItemSlot.values());\n    const sorted = links.sort((a, b) => {\n      const aWeight = a?.weight || 0;\n      const bWeight = b?.weight || 0;\n      return aWeight - bWeight;\n    });\n\n    return compact(sorted.map((link) => {\n      return link.component;\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 defaultConfig = {\n    showGallery: true,\n  };\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI]: [UiUI, ComponentUI, SidebarUI, CommandBarUI],\n    config: ScopeUIConfig,\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    if (config.showGallery)\n      scopeUi.registerSidebarLink({\n        component: function Gallery() {\n          return (\n            <MenuLinkItem exact href=\"/\" icon=\"comps\">\n              Gallery\n            </MenuLinkItem>\n          );\n        },\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-overview/scope-overview.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
+import { ComponentType } from 'react';
 import { ComponentModel } from '@teambit/component';
 import type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';
 export declare type ScopeOverviewProps = {
     badgeSlot: ScopeBadgeSlot;
     overviewSlot: OverviewLineSlot;
+    TargetOverview?: ComponentType;
 };
-export declare function ScopeOverview({ badgeSlot, overviewSlot }: ScopeOverviewProps): JSX.Element;
+export declare function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps): JSX.Element;
 declare type ScopeComponentCardProps = {
     component: ComponentModel;
     componentUrl?: string;

package/dist/ui/scope-overview/scope-overview.js

@@ -96,7 +96,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function ScopeOverview({
   badgeSlot,
-  overviewSlot
+  overviewSlot,
+  TargetOverview
 }) {
   const scope = (0, _react().useContext)(_scopeUiHooks().ScopeContext);
   const {
@@ -115,7 +116,7 @@ function ScopeOverview({
     overviewSlot: overviewSlot,
     description: scope.description,
     componentCount: scope.components.length
-  }), /*#__PURE__*/_react().default.createElement(_explorerUiGallery2().ComponentGrid, null, components.map((component, index) => {
+  }), TargetOverview ? /*#__PURE__*/_react().default.createElement(TargetOverview, null) : /*#__PURE__*/_react().default.createElement(_explorerUiGallery2().ComponentGrid, null, components.map((component, index) => {
     var _component$deprecatio;
 
     if ((_component$deprecatio = component.deprecation) !== null && _component$deprecatio !== void 0 && _component$deprecatio.isDeprecate) return null;

package/dist/ui/scope-overview/scope-overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScopeOverview","badgeSlot","overviewSlot","scope","useContext","ScopeContext","components","length","name","styles","container","icon","backgroundIconColor","description","map","component","index","deprecation","isDeprecate","ScopeComponentCard","componentUrl","shouldShowPreview","compositions","id","fullName","environment","version"],"sources":["scope-overview.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { ScopeDetails } from '@teambit/scope.ui.scope-details';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { EmptyScope } from '@teambit/scope.ui.empty-scope';\nimport { ComponentModel } from '@teambit/component';\nimport { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';\nimport styles from './scope-overview.module.scss';\nimport type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';\n\nexport type ScopeOverviewProps = {\n  badgeSlot: ScopeBadgeSlot;\n  overviewSlot: OverviewLineSlot;\n};\n\nexport function ScopeOverview({ badgeSlot, overviewSlot }: ScopeOverviewProps) {\n  const scope = useContext(ScopeContext);\n  const { components } = scope;\n  if (!components || components.length === 0) return <EmptyScope name={scope.name} />;\n\n  return (\n    <div className={styles.container}>\n      <ScopeDetails\n        scopeName={scope.name}\n        icon={scope.icon}\n        backgroundIconColor={scope.backgroundIconColor}\n        badgeSlot={badgeSlot}\n        overviewSlot={overviewSlot}\n        description={scope.description}\n        componentCount={scope.components.length}\n      />\n      <ComponentGrid>\n        {components.map((component, index) => {\n          if (component.deprecation?.isDeprecate) return null;\n          return (\n            <div key={index}>\n              <ScopeComponentCard component={component} />\n            </div>\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\ntype ScopeComponentCardProps = {\n  component: ComponentModel;\n  componentUrl?: string;\n};\n\nexport function ScopeComponentCard({ component, componentUrl }: ScopeComponentCardProps) {\n  const shouldShowPreview = component.compositions.length > 0;\n  return (\n    <ComponentCard\n      id={component.id.fullName}\n      envIcon={component.environment?.icon}\n      description={component.description}\n      version={component.version}\n      href={componentUrl}\n      preview={<PreviewPlaceholder component={component} shouldShowPreview={shouldShowPreview} />}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAAA;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;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAQO,SAASA,aAAT,CAAuB;EAAEC,SAAF;EAAaC;AAAb,CAAvB,EAAwE;EAC7E,MAAMC,KAAK,GAAG,IAAAC,mBAAA,EAAWC,4BAAX,CAAd;EACA,MAAM;IAAEC;EAAF,IAAiBH,KAAvB;EACA,IAAI,CAACG,UAAD,IAAeA,UAAU,CAACC,MAAX,KAAsB,CAAzC,EAA4C,oBAAO,+BAAC,sBAAD;IAAY,IAAI,EAAEJ,KAAK,CAACK;EAAxB,EAAP;EAE5C,oBACE;IAAK,SAAS,EAAEC,8BAAA,CAAOC;EAAvB,gBACE,+BAAC,uBAAD;IACE,SAAS,EAAEP,KAAK,CAACK,IADnB;IAEE,IAAI,EAAEL,KAAK,CAACQ,IAFd;IAGE,mBAAmB,EAAER,KAAK,CAACS,mBAH7B;IAIE,SAAS,EAAEX,SAJb;IAKE,YAAY,EAAEC,YALhB;IAME,WAAW,EAAEC,KAAK,CAACU,WANrB;IAOE,cAAc,EAAEV,KAAK,CAACG,UAAN,CAAiBC;EAPnC,EADF,eAUE,+BAAC,mCAAD,QACGD,UAAU,CAACQ,GAAX,CAAe,CAACC,SAAD,EAAYC,KAAZ,KAAsB;IAAA;;IACpC,6BAAID,SAAS,CAACE,WAAd,kDAAI,sBAAuBC,WAA3B,EAAwC,OAAO,IAAP;IACxC,oBACE;MAAK,GAAG,EAAEF;IAAV,gBACE,+BAAC,kBAAD;MAAoB,SAAS,EAAED;IAA/B,EADF,CADF;EAKD,CAPA,CADH,CAVF,CADF;AAuBD;;AAOM,SAASI,kBAAT,CAA4B;EAAEJ,SAAF;EAAaK;AAAb,CAA5B,EAAkF;EAAA;;EACvF,MAAMC,iBAAiB,GAAGN,SAAS,CAACO,YAAV,CAAuBf,MAAvB,GAAgC,CAA1D;EACA,oBACE,+BAAC,kCAAD;IACE,EAAE,EAAEQ,SAAS,CAACQ,EAAV,CAAaC,QADnB;IAEE,OAAO,2BAAET,SAAS,CAACU,WAAZ,0DAAE,sBAAuBd,IAFlC;IAGE,WAAW,EAAEI,SAAS,CAACF,WAHzB;IAIE,OAAO,EAAEE,SAAS,CAACW,OAJrB;IAKE,IAAI,EAAEN,YALR;IAME,OAAO,eAAE,+BAAC,+BAAD;MAAoB,SAAS,EAAEL,SAA/B;MAA0C,iBAAiB,EAAEM;IAA7D;EANX,EADF;AAUD"}
+{"version":3,"names":["ScopeOverview","badgeSlot","overviewSlot","TargetOverview","scope","useContext","ScopeContext","components","length","name","styles","container","icon","backgroundIconColor","description","map","component","index","deprecation","isDeprecate","ScopeComponentCard","componentUrl","shouldShowPreview","compositions","id","fullName","environment","version"],"sources":["scope-overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType } from 'react';\nimport { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { ScopeDetails } from '@teambit/scope.ui.scope-details';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { EmptyScope } from '@teambit/scope.ui.empty-scope';\nimport { ComponentModel } from '@teambit/component';\nimport { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';\nimport styles from './scope-overview.module.scss';\nimport type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';\n\nexport type ScopeOverviewProps = {\n  badgeSlot: ScopeBadgeSlot;\n  overviewSlot: OverviewLineSlot;\n  TargetOverview?: ComponentType;\n};\n\nexport function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps) {\n  const scope = useContext(ScopeContext);\n  const { components } = scope;\n  if (!components || components.length === 0) return <EmptyScope name={scope.name} />;\n\n  return (\n    <div className={styles.container}>\n      <ScopeDetails\n        scopeName={scope.name}\n        icon={scope.icon}\n        backgroundIconColor={scope.backgroundIconColor}\n        badgeSlot={badgeSlot}\n        overviewSlot={overviewSlot}\n        description={scope.description}\n        componentCount={scope.components.length}\n      />\n      {TargetOverview ? (\n        <TargetOverview />\n      ) : (\n        <ComponentGrid>\n          {components.map((component, index) => {\n            if (component.deprecation?.isDeprecate) return null;\n            return (\n              <div key={index}>\n                <ScopeComponentCard component={component} />\n              </div>\n            );\n          })}\n        </ComponentGrid>\n      )}\n    </div>\n  );\n}\n\ntype ScopeComponentCardProps = {\n  component: ComponentModel;\n  componentUrl?: string;\n};\n\nexport function ScopeComponentCard({ component, componentUrl }: ScopeComponentCardProps) {\n  const shouldShowPreview = component.compositions.length > 0;\n  return (\n    <ComponentCard\n      id={component.id.fullName}\n      envIcon={component.environment?.icon}\n      description={component.description}\n      version={component.version}\n      href={componentUrl}\n      preview={<PreviewPlaceholder component={component} shouldShowPreview={shouldShowPreview} />}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAAA;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;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AASO,SAASA,aAAT,CAAuB;EAAEC,SAAF;EAAaC,YAAb;EAA2BC;AAA3B,CAAvB,EAAwF;EAC7F,MAAMC,KAAK,GAAG,IAAAC,mBAAA,EAAWC,4BAAX,CAAd;EACA,MAAM;IAAEC;EAAF,IAAiBH,KAAvB;EACA,IAAI,CAACG,UAAD,IAAeA,UAAU,CAACC,MAAX,KAAsB,CAAzC,EAA4C,oBAAO,+BAAC,sBAAD;IAAY,IAAI,EAAEJ,KAAK,CAACK;EAAxB,EAAP;EAE5C,oBACE;IAAK,SAAS,EAAEC,8BAAA,CAAOC;EAAvB,gBACE,+BAAC,uBAAD;IACE,SAAS,EAAEP,KAAK,CAACK,IADnB;IAEE,IAAI,EAAEL,KAAK,CAACQ,IAFd;IAGE,mBAAmB,EAAER,KAAK,CAACS,mBAH7B;IAIE,SAAS,EAAEZ,SAJb;IAKE,YAAY,EAAEC,YALhB;IAME,WAAW,EAAEE,KAAK,CAACU,WANrB;IAOE,cAAc,EAAEV,KAAK,CAACG,UAAN,CAAiBC;EAPnC,EADF,EAUGL,cAAc,gBACb,+BAAC,cAAD,OADa,gBAGb,+BAAC,mCAAD,QACGI,UAAU,CAACQ,GAAX,CAAe,CAACC,SAAD,EAAYC,KAAZ,KAAsB;IAAA;;IACpC,6BAAID,SAAS,CAACE,WAAd,kDAAI,sBAAuBC,WAA3B,EAAwC,OAAO,IAAP;IACxC,oBACE;MAAK,GAAG,EAAEF;IAAV,gBACE,+BAAC,kBAAD;MAAoB,SAAS,EAAED;IAA/B,EADF,CADF;EAKD,CAPA,CADH,CAbJ,CADF;AA2BD;;AAOM,SAASI,kBAAT,CAA4B;EAAEJ,SAAF;EAAaK;AAAb,CAA5B,EAAkF;EAAA;;EACvF,MAAMC,iBAAiB,GAAGN,SAAS,CAACO,YAAV,CAAuBf,MAAvB,GAAgC,CAA1D;EACA,oBACE,+BAAC,kCAAD;IACE,EAAE,EAAEQ,SAAS,CAACQ,EAAV,CAAaC,QADnB;IAEE,OAAO,2BAAET,SAAS,CAACU,WAAZ,0DAAE,sBAAuBd,IAFlC;IAGE,WAAW,EAAEI,SAAS,CAACF,WAHzB;IAIE,OAAO,EAAEE,SAAS,CAACW,OAJrB;IAKE,IAAI,EAAEN,YALR;IAME,OAAO,eAAE,+BAAC,+BAAD;MAAoB,SAAS,EAAEL,SAA/B;MAA0C,iBAAiB,EAAEM;IAA7D;EANX,EADF;AAUD"}

package/dist/ui/scope.d.ts

@@ -12,13 +12,15 @@ export declare type ScopeProps = {
     overviewLineSlot: OverviewLineSlot;
     cornerSlot: CornerSlot;
     context: ScopeContextType[];
+    TargetScopeOverview?: ComponentType;
     userUseScopeQuery?: () => {
         scope: ScopeModel | undefined;
     };
     onSidebarTogglerChange: (callback: () => void) => void;
     TargetCorner?: ComponentType;
+    paneClassName?: string;
 };
 /**
  * root component of the scope
  */
-export declare function Scope({ routeSlot, menuSlot, sidebar, scopeUi, badgeSlot, overviewLineSlot, cornerSlot, context, TargetCorner, onSidebarTogglerChange, userUseScopeQuery, }: ScopeProps): JSX.Element;
+export declare function Scope({ routeSlot, menuSlot, sidebar, scopeUi, badgeSlot, overviewLineSlot, cornerSlot, context, paneClassName, TargetScopeOverview, TargetCorner, onSidebarTogglerChange, userUseScopeQuery, }: ScopeProps): JSX.Element;

package/dist/ui/scope.js

@@ -177,6 +177,8 @@ function Scope({
   overviewLineSlot,
   cornerSlot,
   context = [],
+  paneClassName,
+  TargetScopeOverview,
   TargetCorner,
   onSidebarTogglerChange,
   userUseScopeQuery
@@ -228,13 +230,16 @@ function Scope({
     ,
     onClick: handleSidebarToggle,
     tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} side panel`
-  })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, null, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
+  })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
+    className: paneClassName
+  }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
     slot: routeSlot
   }, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
     index: true,
     element: /*#__PURE__*/_react().default.createElement(_scopeOverview().ScopeOverview, {
       badgeSlot: badgeSlot,
-      overviewSlot: overviewLineSlot
+      overviewSlot: overviewLineSlot,
+      TargetOverview: TargetScopeOverview
     })
   })))))));
 }

package/dist/ui/scope.js.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;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;;;;;;AAkBA;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,YAToB;EAUpBC,sBAVoB;EAWpBC;AAXoB,CAAf,EAYQ;EACb,MAAM;IAAEC;EAAF,IAAYD,iBAAiB,GAAGA,iBAAiB,EAApB,GAAyB,IAAAE,8BAAA,GAA5D;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,YAAY,KAAIF,UAAJ,aAAIA,UAAJ,uBAAIA,UAAU,CAAEkB,MAAZ,GAAqB,CAArB,CAAJ,CAAnC;EACArB,OAAO,CAACsB,aAAR,CAAsBd,KAAK,CAACe,UAA5B;EACA,MAAMC,OAAO,GAAGpB,OAAO,CAACqB,GAAR,CAAaC,GAAD,IAAS,CAACA,GAAD,EAAM;IAAElB;EAAF,CAAN,CAArB,CAAhB;EAEAF,sBAAsB,CAACO,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,EAAEhC;EANR,EADF,eAUE,+BAAC,oCAAD;IAAW,SAAS,EAAE6B,sBAAA,CAAOI,IAA7B;IAAmC,IAAI,EAAE,GAAzC;IAA8C,MAAM,EAAEf;EAAtD,gBACE,+BAAC,+BAAD;IAAM,SAAS,EAAEW,sBAAA,CAAO5B;EAAxB,GAAkCA,OAAlC,CADF,eAEE,+BAAC,yCAAD;IAAe,SAAS,EAAE4B,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,EAAEf;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","paneClassName","TargetScopeOverview","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  TargetScopeOverview?: ComponentType;\n  userUseScopeQuery?: () => { scope: ScopeModel | undefined };\n  onSidebarTogglerChange: (callback: () => void) => void;\n  TargetCorner?: ComponentType;\n  paneClassName?: string;\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  paneClassName,\nTargetScopeOverview,\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 className={paneClassName}>\n              <SlotRouter slot={routeSlot}>\n                <Route\n                  index\n                  element={\n                    <ScopeOverview\n                      badgeSlot={badgeSlot}\n                      overviewSlot={overviewLineSlot}\n                      TargetOverview={TargetScopeOverview}\n                    />\n                  }\n                />\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.844",
+  "version": "0.0.845",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.844"
+    "version": "0.0.845"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -16,51 +16,50 @@
     "fs-extra": "10.0.0",
     "lodash": "4.17.21",
     "multimatch": "5.0.0",
-    "lodash.flatten": "4.4.0",
     "reset-css": "5.0.1",
     "classnames": "2.2.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
+    "@teambit/scope.models.scope-model": "0.0.222",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.222",
+    "@teambit/cli": "0.0.564",
+    "@teambit/component": "0.0.845",
+    "@teambit/logger": "0.0.657",
     "@teambit/harmony": "0.3.3",
-    "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
-    "@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.221",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.221",
-    "@teambit/cli": "0.0.563",
-    "@teambit/component": "0.0.844",
-    "@teambit/logger": "0.0.656",
-    "@teambit/aspect-loader": "0.0.844",
+    "@teambit/aspect-loader": "0.0.845",
     "@teambit/bit-error": "0.0.400",
-    "@teambit/builder": "0.0.844",
-    "@teambit/compiler": "0.0.844",
-    "@teambit/envs": "0.0.844",
-    "@teambit/express": "0.0.661",
-    "@teambit/graphql": "0.0.844",
+    "@teambit/builder": "0.0.845",
+    "@teambit/compiler": "0.0.845",
+    "@teambit/envs": "0.0.845",
+    "@teambit/express": "0.0.662",
+    "@teambit/graphql": "0.0.845",
     "@teambit/harmony.modules.requireable-component": "0.0.490",
-    "@teambit/isolator": "0.0.844",
+    "@teambit/isolator": "0.0.845",
     "@teambit/legacy-bit-id": "0.0.414",
-    "@teambit/ui": "0.0.844",
+    "@teambit/ui": "0.0.845",
     "@teambit/workspace.modules.match-pattern": "0.0.495",
     "@teambit/component-id": "0.0.417",
-    "@teambit/component.ui.component-drawer": "0.0.118",
+    "@teambit/component.ui.component-drawer": "0.0.119",
     "@teambit/design.ui.tree": "0.0.12",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.635",
-    "@teambit/command-bar": "0.0.844",
-    "@teambit/component-tree": "0.0.632",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.636",
+    "@teambit/command-bar": "0.0.845",
+    "@teambit/component-tree": "0.0.633",
     "@teambit/component.modules.component-url": "0.0.140",
     "@teambit/component.ui.component-filters.component-filter-context": "0.0.7",
     "@teambit/component.ui.component-filters.deprecate-filter": "0.0.7",
     "@teambit/component.ui.component-filters.env-filter": "0.0.13",
-    "@teambit/sidebar": "0.0.844",
+    "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
+    "@teambit/sidebar": "0.0.845",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.493",
     "@teambit/ui-foundation.ui.menu": "0.0.493",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.496",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.505",
-    "@teambit/lane-id": "0.0.82",
+    "@teambit/lane-id": "0.0.83",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.226",
+    "@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.ui.hooks.use-scope": "0.0.227",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.201",
     "@teambit/ui-foundation.ui.corner": "0.0.504",
     "@teambit/ui-foundation.ui.full-loader": "0.0.492",
@@ -68,7 +67,7 @@
     "@teambit/ui-foundation.ui.top-bar": "0.0.499",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.122",
     "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.122",
-    "@teambit/explorer.ui.gallery.component-card": "0.0.502",
+    "@teambit/explorer.ui.gallery.component-card": "0.0.503",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.492",
     "@teambit/preview.ui.preview-placeholder": "0.0.493",
     "@teambit/scope.ui.empty-scope": "0.0.500",
@@ -79,7 +78,6 @@
     "@types/semver": "7.3.4",
     "@types/fs-extra": "9.0.7",
     "@types/lodash": "4.14.165",
-    "@types/lodash.flatten": "4.4.6",
     "@types/classnames": "2.2.11",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -90,7 +88,7 @@
   },
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.344",
+    "@teambit/legacy": "1.0.345",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1662281577904.js → preview-1662521943539.js}

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

package/scope.ui.runtime.tsx

@@ -1,5 +1,5 @@
-import flatten from 'lodash.flatten';
 import type { ComponentUI, ComponentModel } from '@teambit/component';
+import { compact, flatten } from 'lodash';
 import { ComponentAspect } from '@teambit/component';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
@@ -123,10 +123,11 @@ export class ScopeUI {
   getScope(options: GetScopeOptions) {
     return (
       <Scope
+        TargetScopeOverview={options.TargetScopeOverview}
         TargetCorner={options.Corner}
         routeSlot={this.routeSlot}
         menuSlot={this.menuSlot}
-        sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}
+        sidebar={<this.sidebar.render items={this.listSidebarLinks()} />}
         scopeUi={this}
         userUseScopeQuery={options.useScope}
         badgeSlot={this.scopeBadgeSlot}
@@ -134,6 +135,7 @@ export class ScopeUI {
         context={this.getContext()}
         onSidebarTogglerChange={this.setSidebarToggle}
         cornerSlot={this.cornerSlot}
+        paneClassName={options.paneClassName}
       />
     );
   }
@@ -308,7 +310,7 @@ export class ScopeUI {
             <Scope
               routeSlot={this.routeSlot}
               menuSlot={this.menuSlot}
-              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}
+              sidebar={<this.sidebar.render items={this.listSidebarLinks()} />}
               scopeUi={this}
               badgeSlot={this.scopeBadgeSlot}
               overviewLineSlot={this.overviewSlot}
@@ -322,6 +324,19 @@ export class ScopeUI {
     };
   }
 
+  listSidebarLinks() {
+    const links = flatten(this.sidebarItemSlot.values());
+    const sorted = links.sort((a, b) => {
+      const aWeight = a?.weight || 0;
+      const bWeight = b?.weight || 0;
+      return aWeight - bWeight;
+    });
+
+    return compact(sorted.map((link) => {
+      return link.component;
+    }));
+  }
+
   /** registers available components */
   setComponents = (components: ComponentModel[]) => {
     this.componentUi.updateComponents(components);
@@ -421,11 +436,15 @@ export class ScopeUI {
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => <ScopeUseBox />);
     if (config.showGallery)
-      scopeUi.registerSidebarLink(() => (
-        <MenuLinkItem exact href="/" icon="comps">
-          Gallery
-        </MenuLinkItem>
-      ));
+      scopeUi.registerSidebarLink({
+        component: function Gallery() {
+          return (
+            <MenuLinkItem exact href="/" icon="comps">
+              Gallery
+            </MenuLinkItem>
+          );
+        },
+      });
     if (ui) scopeUi.registerExplicitRoutes();
 
     return scopeUi;

package/ui/scope-overview/scope-overview.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, ComponentType } from 'react';
 import { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { ScopeDetails } from '@teambit/scope.ui.scope-details';
@@ -12,9 +12,10 @@ import type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';
 export type ScopeOverviewProps = {
   badgeSlot: ScopeBadgeSlot;
   overviewSlot: OverviewLineSlot;
+  TargetOverview?: ComponentType;
 };
 
-export function ScopeOverview({ badgeSlot, overviewSlot }: ScopeOverviewProps) {
+export function ScopeOverview({ badgeSlot, overviewSlot, TargetOverview }: ScopeOverviewProps) {
   const scope = useContext(ScopeContext);
   const { components } = scope;
   if (!components || components.length === 0) return <EmptyScope name={scope.name} />;
@@ -30,16 +31,20 @@ export function ScopeOverview({ badgeSlot, overviewSlot }: ScopeOverviewProps) {
         description={scope.description}
         componentCount={scope.components.length}
       />
-      <ComponentGrid>
-        {components.map((component, index) => {
-          if (component.deprecation?.isDeprecate) return null;
-          return (
-            <div key={index}>
-              <ScopeComponentCard component={component} />
-            </div>
-          );
-        })}
-      </ComponentGrid>
+      {TargetOverview ? (
+        <TargetOverview />
+      ) : (
+        <ComponentGrid>
+          {components.map((component, index) => {
+            if (component.deprecation?.isDeprecate) return null;
+            return (
+              <div key={index}>
+                <ScopeComponentCard component={component} />
+              </div>
+            );
+          })}
+        </ComponentGrid>
+      )}
     </div>
   );
 }