@teambit/sidebar 0.0.844 → 0.0.847

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

@@ -6,7 +6,10 @@ import { SideBarProps } from './ui';
 export declare type ComponentTypeProps = {
     component: ComponentModel;
 };
-export declare type SidebarItem = ComponentType;
+export declare type SidebarItem = {
+    weight?: number;
+    component?: ComponentType;
+};
 export declare type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
 export declare type DrawerSlot = SlotRegistry<DrawerType[]>;
 export declare class SidebarUI {

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

@@ -1 +1 @@
-{"version":3,"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"sources":["sidebar.ui.runtime.tsx"],"sourcesContent":["import { ComponentModel } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { UIRuntime } from '@teambit/ui';\nimport React, { ComponentType } from 'react';\n\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { SidebarAspect } from './sidebar.aspect';\nimport { SideBar, SideBarProps } from './ui';\n\nexport type ComponentTypeProps = {\n  component: ComponentModel;\n};\n\nexport type SidebarItem = ComponentType;\n\nexport type SidebarItemSlot = SlotRegistry<SidebarItem[]>;\n\nexport type DrawerSlot = SlotRegistry<DrawerType[]>;\n\nexport class SidebarUI {\n  constructor(private drawerSlot: DrawerSlot) {}\n\n  /**\n   * register a new drawer into the component sidebar.\n   */\n  registerDrawer(...drawer: DrawerType[]) {\n    this.drawerSlot.register(drawer);\n    return this;\n  }\n\n  /**\n   * render the sidebar.\n   */\n  render = (props: Partial<SideBarProps>) => {\n    return <SideBar drawerSlot={this.drawerSlot} {...props}></SideBar>;\n  };\n\n  static runtime = UIRuntime;\n\n  static slots = [Slot.withType<DrawerType>()];\n\n  static dependencies = [];\n\n  static async provider(deps, config, [drawerSlot]: [DrawerSlot]) {\n    return new SidebarUI(drawerSlot);\n  }\n}\n\nSidebarAspect.addRuntime(SidebarUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAYO,MAAMA,SAAN,CAAgB;EACrBC,WAAW,CAASC,UAAT,EAAiC;IAAA,KAAxBA,UAAwB,GAAxBA,UAAwB;IAAA,gDAalCC,KAAD,IAAkC;MACzC,oBAAO,+BAAC,cAAD;QAAS,UAAU,EAAE,KAAKD;MAA1B,GAA0CC,KAA1C,EAAP;IACD,CAf2C;EAAE;EAE9C;AACF;AACA;;;EACEC,cAAc,CAAC,GAAGC,MAAJ,EAA0B;IACtC,KAAKH,UAAL,CAAgBI,QAAhB,CAAyBD,MAAzB;IACA,OAAO,IAAP;EACD;EAED;AACF;AACA;;;EAWuB,aAARE,QAAQ,CAACC,IAAD,EAAOC,MAAP,EAAe,CAACP,UAAD,CAAf,EAA2C;IAC9D,OAAO,IAAIF,SAAJ,CAAcE,UAAd,CAAP;EACD;;AA1BoB;;;gCAAVF,S,aAkBMU,e;gCAlBNV,S,WAoBI,CAACW,eAAA,CAAKC,QAAL,EAAD,C;gCApBJZ,S,kBAsBW,E;;AAOxBa,wBAAA,CAAcC,UAAd,CAAyBd,SAAzB"}
+{"version":3,"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"sources":["sidebar.ui.runtime.tsx"],"sourcesContent":["import { ComponentModel } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { UIRuntime } from '@teambit/ui';\nimport React, { ComponentType } from 'react';\n\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { SidebarAspect } from './sidebar.aspect';\nimport { SideBar, SideBarProps } from './ui';\n\nexport type ComponentTypeProps = {\n  component: ComponentModel;\n};\n\nexport type SidebarItem = {\n  weight?: number,\n  component?: ComponentType\n};\n\nexport type SidebarItemSlot = SlotRegistry<SidebarItem[]>;\n\nexport type DrawerSlot = SlotRegistry<DrawerType[]>;\n\nexport class SidebarUI {\n  constructor(private drawerSlot: DrawerSlot) {}\n\n  /**\n   * register a new drawer into the component sidebar.\n   */\n  registerDrawer(...drawer: DrawerType[]) {\n    this.drawerSlot.register(drawer);\n    return this;\n  }\n\n  /**\n   * render the sidebar.\n   */\n  render = (props: Partial<SideBarProps>) => {\n    return <SideBar drawerSlot={this.drawerSlot} {...props}></SideBar>;\n  };\n\n  static runtime = UIRuntime;\n\n  static slots = [Slot.withType<DrawerType>()];\n\n  static dependencies = [];\n\n  static async provider(deps, config, [drawerSlot]: [DrawerSlot]) {\n    return new SidebarUI(drawerSlot);\n  }\n}\n\nSidebarAspect.addRuntime(SidebarUI);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAeO,MAAMA,SAAN,CAAgB;EACrBC,WAAW,CAASC,UAAT,EAAiC;IAAA,KAAxBA,UAAwB,GAAxBA,UAAwB;IAAA,gDAalCC,KAAD,IAAkC;MACzC,oBAAO,+BAAC,cAAD;QAAS,UAAU,EAAE,KAAKD;MAA1B,GAA0CC,KAA1C,EAAP;IACD,CAf2C;EAAE;EAE9C;AACF;AACA;;;EACEC,cAAc,CAAC,GAAGC,MAAJ,EAA0B;IACtC,KAAKH,UAAL,CAAgBI,QAAhB,CAAyBD,MAAzB;IACA,OAAO,IAAP;EACD;EAED;AACF;AACA;;;EAWuB,aAARE,QAAQ,CAACC,IAAD,EAAOC,MAAP,EAAe,CAACP,UAAD,CAAf,EAA2C;IAC9D,OAAO,IAAIF,SAAJ,CAAcE,UAAd,CAAP;EACD;;AA1BoB;;;gCAAVF,S,aAkBMU,e;gCAlBNV,S,WAoBI,CAACW,eAAA,CAAKC,QAAL,EAAD,C;gCApBJZ,S,kBAsBW,E;;AAOxBa,wBAAA,CAAcC,UAAd,CAAyBd,SAAzB"}

package/dist/ui/side-bar/side-bar.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';
+import React, { ComponentType } from 'react';
+import { DrawerSlot } from '../../sidebar.ui.runtime';
 export declare type SideBarProps = {
     /**
      * slot of registered drawers.
@@ -8,9 +8,9 @@ export declare type SideBarProps = {
     /**
      * slot of registered items to the main section at the top.
      */
-    itemSlot?: SidebarItemSlot;
+    items?: ComponentType[];
 } & React.HTMLAttributes<HTMLDivElement>;
 /**
  * side bar component.
  */
-export declare function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps): JSX.Element;
+export declare function SideBar({ drawerSlot, items, ...rest }: SideBarProps): JSX.Element;

package/dist/ui/side-bar/side-bar.js

@@ -101,16 +101,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function SideBar(_ref) {
   let {
     drawerSlot,
-    itemSlot
+    items = []
   } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["drawerSlot", "itemSlot"]);
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["drawerSlot", "items"]);
   const drawers = (0, _lodash().flatten)(drawerSlot.values()).filter(drawer => {
     var _drawer$isHidden;
 
     return !(drawer !== null && drawer !== void 0 && (_drawer$isHidden = drawer.isHidden) !== null && _drawer$isHidden !== void 0 && _drawer$isHidden.call(drawer));
   }).sort(sortFn);
   const [openDrawerList, onToggleDrawer] = (0, _react().useState)(drawers.map(drawer => drawer.id));
-  const items = (0, _react().useMemo)(() => (0, _lodash().flatten)(itemSlot === null || itemSlot === void 0 ? void 0 : itemSlot.values()), [itemSlot]);
 
   const handleDrawerToggle = id => {
     const isDrawerOpen = openDrawerList.includes(id);

package/dist/ui/side-bar/side-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["SideBar","drawerSlot","itemSlot","rest","drawers","flatten","values","filter","drawer","isHidden","sort","sortFn","openDrawerList","onToggleDrawer","useState","map","id","items","useMemo","handleDrawerToggle","isDrawerOpen","includes","list","concat","styles","sidebar","name","isOpen","classNames","sidebarDrawer","open","widgets","Context","first","second","order"],"sources":["side-bar.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport classNames from 'classnames';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';\nimport styles from './side-bar.module.scss';\n\nexport type SideBarProps = {\n  /**\n   * slot of registered drawers.\n   */\n  drawerSlot: DrawerSlot;\n  /**\n   * slot of registered items to the main section at the top.\n   */\n  itemSlot?: SidebarItemSlot;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * side bar component.\n */\nexport function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {\n  const drawers = flatten(drawerSlot.values())\n    .filter((drawer) => !drawer?.isHidden?.())\n    .sort(sortFn);\n\n  const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>(drawers.map((drawer) => drawer.id));\n  const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);\n\n  const handleDrawerToggle = (id: string) => {\n    const isDrawerOpen = openDrawerList.includes(id);\n    if (isDrawerOpen) {\n      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n      return;\n    }\n    onToggleDrawer((list) => list.concat(id));\n  };\n\n  return (\n    <div {...rest} className={styles.sidebar}>\n      <MenuSection items={items} />\n      {drawers.map((drawer) => {\n        if (!drawer || !drawer.name) return null;\n        // consider passing collapse all as a prop so each drawer collapses itself\n        const isOpen = openDrawerList.includes(drawer.id);\n\n        return (\n          <DrawerUI\n            className={classNames(styles.sidebarDrawer, isOpen && styles.open)}\n            isOpen={isOpen}\n            onToggle={() => handleDrawerToggle(drawer.id)}\n            key={drawer.id}\n            name={drawer.name}\n            Widgets={drawer.widgets}\n            Context={drawer.Context}\n          >\n            <drawer.render />\n          </DrawerUI>\n        );\n      })}\n    </div>\n  );\n}\nfunction sortFn(first: DrawerType, second: DrawerType) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first.order ?? 0) - (second.order ?? 0);\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;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAaA;AACA;AACA;AACO,SAASA,OAAT,OAAkE;EAAA,IAAjD;IAAEC,UAAF;IAAcC;EAAd,CAAiD;EAAA,IAAtBC,IAAsB;EACvE,MAAMC,OAAO,GAAG,IAAAC,iBAAA,EAAQJ,UAAU,CAACK,MAAX,EAAR,EACbC,MADa,CACLC,MAAD;IAAA;;IAAA,OAAY,EAACA,MAAD,aAACA,MAAD,mCAACA,MAAM,CAAEC,QAAT,6CAAC,sBAAAD,MAAM,CAAP,CAAZ;EAAA,CADM,EAEbE,IAFa,CAERC,MAFQ,CAAhB;EAIA,MAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,IAAAC,iBAAA,EAAiCV,OAAO,CAACW,GAAR,CAAaP,MAAD,IAAYA,MAAM,CAACQ,EAA/B,CAAjC,CAAzC;EACA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAb,iBAAA,EAAQH,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEI,MAAV,EAAR,CAAd,EAA2C,CAACJ,QAAD,CAA3C,CAAd;;EAEA,MAAMiB,kBAAkB,GAAIH,EAAD,IAAgB;IACzC,MAAMI,YAAY,GAAGR,cAAc,CAACS,QAAf,CAAwBL,EAAxB,CAArB;;IACA,IAAII,YAAJ,EAAkB;MAChBP,cAAc,CAAES,IAAD,IAAUA,IAAI,CAACf,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKQ,EAAnC,CAAX,CAAd;MACA;IACD;;IACDH,cAAc,CAAES,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAYP,EAAZ,CAAX,CAAd;EACD,CAPD;;EASA,oBACE,mEAASb,IAAT;IAAe,SAAS,EAAEqB,wBAAA,CAAOC;EAAjC,iBACE,+BAAC,mCAAD;IAAa,KAAK,EAAER;EAApB,EADF,EAEGb,OAAO,CAACW,GAAR,CAAaP,MAAD,IAAY;IACvB,IAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACkB,IAAvB,EAA6B,OAAO,IAAP,CADN,CAEvB;;IACA,MAAMC,MAAM,GAAGf,cAAc,CAACS,QAAf,CAAwBb,MAAM,CAACQ,EAA/B,CAAf;IAEA,oBACE,+BAAC,8BAAD;MACE,SAAS,EAAE,IAAAY,qBAAA,EAAWJ,wBAAA,CAAOK,aAAlB,EAAiCF,MAAM,IAAIH,wBAAA,CAAOM,IAAlD,CADb;MAEE,MAAM,EAAEH,MAFV;MAGE,QAAQ,EAAE,MAAMR,kBAAkB,CAACX,MAAM,CAACQ,EAAR,CAHpC;MAIE,GAAG,EAAER,MAAM,CAACQ,EAJd;MAKE,IAAI,EAAER,MAAM,CAACkB,IALf;MAME,OAAO,EAAElB,MAAM,CAACuB,OANlB;MAOE,OAAO,EAAEvB,MAAM,CAACwB;IAPlB,gBASE,+BAAC,MAAD,CAAQ,MAAR,OATF,CADF;EAaD,CAlBA,CAFH,CADF;AAwBD;;AACD,SAASrB,MAAT,CAAgBsB,KAAhB,EAAmCC,MAAnC,EAAuD;EAAA;;EACrD;EACA;EACA;EAEA,OAAO,iBAACD,KAAK,CAACE,KAAP,uDAAgB,CAAhB,sBAAsBD,MAAM,CAACC,KAA7B,yDAAsC,CAAtC,CAAP;AACD"}
+{"version":3,"names":["SideBar","drawerSlot","items","rest","drawers","flatten","values","filter","drawer","isHidden","sort","sortFn","openDrawerList","onToggleDrawer","useState","map","id","handleDrawerToggle","isDrawerOpen","includes","list","concat","styles","sidebar","name","isOpen","classNames","sidebarDrawer","open","widgets","Context","first","second","order"],"sources":["side-bar.tsx"],"sourcesContent":["import React, { useState, ComponentType } from 'react';\nimport { flatten } from 'lodash';\nimport classNames from 'classnames';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { DrawerSlot } from '../../sidebar.ui.runtime';\nimport styles from './side-bar.module.scss';\n\nexport type SideBarProps = {\n  /**\n   * slot of registered drawers.\n   */\n  drawerSlot: DrawerSlot;\n  /**\n   * slot of registered items to the main section at the top.\n   */\n  items?: ComponentType[];\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * side bar component.\n */\nexport function SideBar({ drawerSlot, items = [], ...rest }: SideBarProps) {\n  const drawers = flatten(drawerSlot.values())\n    .filter((drawer) => !drawer?.isHidden?.())\n    .sort(sortFn);\n\n  const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>(drawers.map((drawer) => drawer.id));\n\n  const handleDrawerToggle = (id: string) => {\n    const isDrawerOpen = openDrawerList.includes(id);\n    if (isDrawerOpen) {\n      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n      return;\n    }\n    onToggleDrawer((list) => list.concat(id));\n  };\n\n  return (\n    <div {...rest} className={styles.sidebar}>\n      <MenuSection items={items} />\n      {drawers.map((drawer) => {\n        if (!drawer || !drawer.name) return null;\n        // consider passing collapse all as a prop so each drawer collapses itself\n        const isOpen = openDrawerList.includes(drawer.id);\n\n        return (\n          <DrawerUI\n            className={classNames(styles.sidebarDrawer, isOpen && styles.open)}\n            isOpen={isOpen}\n            onToggle={() => handleDrawerToggle(drawer.id)}\n            key={drawer.id}\n            name={drawer.name}\n            Widgets={drawer.widgets}\n            Context={drawer.Context}\n          >\n            <drawer.render />\n          </DrawerUI>\n        );\n      })}\n    </div>\n  );\n}\nfunction sortFn(first: DrawerType, second: DrawerType) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first.order ?? 0) - (second.order ?? 0);\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;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAaA;AACA;AACA;AACO,SAASA,OAAT,OAAoE;EAAA,IAAnD;IAAEC,UAAF;IAAcC,KAAK,GAAG;EAAtB,CAAmD;EAAA,IAAtBC,IAAsB;EACzE,MAAMC,OAAO,GAAG,IAAAC,iBAAA,EAAQJ,UAAU,CAACK,MAAX,EAAR,EACbC,MADa,CACLC,MAAD;IAAA;;IAAA,OAAY,EAACA,MAAD,aAACA,MAAD,mCAACA,MAAM,CAAEC,QAAT,6CAAC,sBAAAD,MAAM,CAAP,CAAZ;EAAA,CADM,EAEbE,IAFa,CAERC,MAFQ,CAAhB;EAIA,MAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,IAAAC,iBAAA,EAAiCV,OAAO,CAACW,GAAR,CAAaP,MAAD,IAAYA,MAAM,CAACQ,EAA/B,CAAjC,CAAzC;;EAEA,MAAMC,kBAAkB,GAAID,EAAD,IAAgB;IACzC,MAAME,YAAY,GAAGN,cAAc,CAACO,QAAf,CAAwBH,EAAxB,CAArB;;IACA,IAAIE,YAAJ,EAAkB;MAChBL,cAAc,CAAEO,IAAD,IAAUA,IAAI,CAACb,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKQ,EAAnC,CAAX,CAAd;MACA;IACD;;IACDH,cAAc,CAAEO,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAYL,EAAZ,CAAX,CAAd;EACD,CAPD;;EASA,oBACE,mEAASb,IAAT;IAAe,SAAS,EAAEmB,wBAAA,CAAOC;EAAjC,iBACE,+BAAC,mCAAD;IAAa,KAAK,EAAErB;EAApB,EADF,EAEGE,OAAO,CAACW,GAAR,CAAaP,MAAD,IAAY;IACvB,IAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACgB,IAAvB,EAA6B,OAAO,IAAP,CADN,CAEvB;;IACA,MAAMC,MAAM,GAAGb,cAAc,CAACO,QAAf,CAAwBX,MAAM,CAACQ,EAA/B,CAAf;IAEA,oBACE,+BAAC,8BAAD;MACE,SAAS,EAAE,IAAAU,qBAAA,EAAWJ,wBAAA,CAAOK,aAAlB,EAAiCF,MAAM,IAAIH,wBAAA,CAAOM,IAAlD,CADb;MAEE,MAAM,EAAEH,MAFV;MAGE,QAAQ,EAAE,MAAMR,kBAAkB,CAACT,MAAM,CAACQ,EAAR,CAHpC;MAIE,GAAG,EAAER,MAAM,CAACQ,EAJd;MAKE,IAAI,EAAER,MAAM,CAACgB,IALf;MAME,OAAO,EAAEhB,MAAM,CAACqB,OANlB;MAOE,OAAO,EAAErB,MAAM,CAACsB;IAPlB,gBASE,+BAAC,MAAD,CAAQ,MAAR,OATF,CADF;EAaD,CAlBA,CAFH,CADF;AAwBD;;AACD,SAASnB,MAAT,CAAgBoB,KAAhB,EAAmCC,MAAnC,EAAuD;EAAA;;EACrD;EACA;EACA;EAEA,OAAO,iBAACD,KAAK,CAACE,KAAP,uDAAgB,CAAhB,sBAAsBD,MAAM,CAACC,KAA7B,yDAAsC,CAAtC,CAAP;AACD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/sidebar",
-  "version": "0.0.844",
+  "version": "0.0.847",
   "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "sidebar",
-    "version": "0.0.844"
+    "version": "0.0.847"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -14,10 +14,10 @@
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
-    "@teambit/design.ui.surfaces.menu.section": "0.0.347",
-    "@teambit/component": "0.0.844",
+    "@teambit/component": "0.0.847",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.505",
-    "@teambit/ui": "0.0.844"
+    "@teambit/ui": "0.0.847",
+    "@teambit/design.ui.surfaces.menu.section": "0.0.347"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -30,7 +30,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.344",
+    "@teambit/legacy": "1.0.346",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

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

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

package/sidebar.ui.runtime.tsx

@@ -11,7 +11,10 @@ export type ComponentTypeProps = {
   component: ComponentModel;
 };
 
-export type SidebarItem = ComponentType;
+export type SidebarItem = {
+  weight?: number,
+  component?: ComponentType
+};
 
 export type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
 

package/ui/side-bar/side-bar.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, ComponentType } from 'react';
 import { flatten } from 'lodash';
 import classNames from 'classnames';
 import { MenuSection } from '@teambit/design.ui.surfaces.menu.section';
 import { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
-import { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';
+import { DrawerSlot } from '../../sidebar.ui.runtime';
 import styles from './side-bar.module.scss';
 
 export type SideBarProps = {
@@ -14,19 +14,18 @@ export type SideBarProps = {
   /**
    * slot of registered items to the main section at the top.
    */
-  itemSlot?: SidebarItemSlot;
+  items?: ComponentType[];
 } & React.HTMLAttributes<HTMLDivElement>;
 
 /**
  * side bar component.
  */
-export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
+export function SideBar({ drawerSlot, items = [], ...rest }: SideBarProps) {
   const drawers = flatten(drawerSlot.values())
     .filter((drawer) => !drawer?.isHidden?.())
     .sort(sortFn);
 
   const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>(drawers.map((drawer) => drawer.id));
-  const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);
 
   const handleDrawerToggle = (id: string) => {
     const isDrawerOpen = openDrawerList.includes(id);