@teambit/sidebar 0.0.632 → 0.0.636

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

@@ -8,14 +8,14 @@ export declare type ComponentTypeProps = {
 };
 export declare type SidebarItem = ComponentType;
 export declare type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
-export declare type DrawerSlot = SlotRegistry<DrawerType>;
+export declare type DrawerSlot = SlotRegistry<DrawerType[]>;
 export declare class SidebarUI {
     private drawerSlot;
     constructor(drawerSlot: DrawerSlot);
     /**
      * register a new drawer into the component sidebar.
      */
-    registerDrawer(drawer: DrawerType): this;
+    registerDrawer(...drawer: DrawerType[]): this;
     /**
      * render the sidebar.
      */

package/dist/sidebar.ui.runtime.js

@@ -95,7 +95,7 @@ class SidebarUI {
    */
 
 
-  registerDrawer(drawer) {
+  registerDrawer(...drawer) {
     this.drawerSlot.register(drawer);
     return this;
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["sidebar.ui.runtime.tsx"],"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,MAAMA,SAAN,CAAgB;AACrBC,EAAAA,WAAW,CAASC,UAAT,EAAiC;AAAA,SAAxBA,UAAwB,GAAxBA,UAAwB;AAAA,oDAalCC,KAAD,IAAkC;AACzC,0BAAO,+BAAC,cAAD;AAAS,QAAA,UAAU,EAAE,KAAKD;AAA1B,SAA0CC,KAA1C,EAAP;AACD,KAf2C;AAAE;AAE9C;AACF;AACA;;;AACEC,EAAAA,cAAc,CAACC,MAAD,EAAqB;AACjC,SAAKH,UAAL,CAAgBI,QAAhB,CAAyBD,MAAzB;AACA,WAAO,IAAP;AACD;AAED;AACF;AACA;;;AAWuB,eAARE,QAAQ,CAACC,IAAD,EAAOC,MAAP,EAAe,CAACP,UAAD,CAAf,EAA2C;AAC9D,WAAO,IAAIF,SAAJ,CAAcE,UAAd,CAAP;AACD;;AA1BoB;;;gCAAVF,S,aAkBMU,e;gCAlBNV,S,WAoBI,CAACW,gBAAKC,QAAL,EAAD,C;gCApBJZ,S,kBAsBW,E;;AAOxBa,yBAAcC,UAAd,CAAyBd,SAAzB","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"]}
+{"version":3,"sources":["sidebar.ui.runtime.tsx"],"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,MAAMA,SAAN,CAAgB;AACrBC,EAAAA,WAAW,CAASC,UAAT,EAAiC;AAAA,SAAxBA,UAAwB,GAAxBA,UAAwB;AAAA,oDAalCC,KAAD,IAAkC;AACzC,0BAAO,+BAAC,cAAD;AAAS,QAAA,UAAU,EAAE,KAAKD;AAA1B,SAA0CC,KAA1C,EAAP;AACD,KAf2C;AAAE;AAE9C;AACF;AACA;;;AACEC,EAAAA,cAAc,CAAC,GAAGC,MAAJ,EAA0B;AACtC,SAAKH,UAAL,CAAgBI,QAAhB,CAAyBD,MAAzB;AACA,WAAO,IAAP;AACD;AAED;AACF;AACA;;;AAWuB,eAARE,QAAQ,CAACC,IAAD,EAAOC,MAAP,EAAe,CAACP,UAAD,CAAf,EAA2C;AAC9D,WAAO,IAAIF,SAAJ,CAAcE,UAAd,CAAP;AACD;;AA1BoB;;;gCAAVF,S,aAkBMU,e;gCAlBNV,S,WAoBI,CAACW,gBAAKC,QAAL,EAAD,C;gCApBJZ,S,kBAsBW,E;;AAOxBa,yBAAcC,UAAd,CAAyBd,SAAzB","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"]}

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

@@ -5,6 +5,9 @@ export declare type SideBarProps = {
      * slot of registered drawers.
      */
     drawerSlot: DrawerSlot;
+    /**
+     * slot of registered items to the main section at the top.
+     */
     itemSlot?: SidebarItemSlot;
 } & React.HTMLAttributes<HTMLDivElement>;
 /**

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

@@ -87,12 +87,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * side bar component.
  */
 function SideBar(_ref) {
+  var _drawers$;
+
   let {
     drawerSlot,
     itemSlot
   } = _ref,
       rest = (0, _objectWithoutProperties2().default)(_ref, ["drawerSlot", "itemSlot"]);
-  const [openDrawerList, onToggleDrawer] = (0, _react().useState)([drawerSlot.toArray()[0][0]]);
+  const drawers = (0, _lodash().flatten)(drawerSlot.values());
+  const [openDrawerList, onToggleDrawer] = (0, _react().useState)([(_drawers$ = drawers[0]) === null || _drawers$ === void 0 ? void 0 : _drawers$.id]);
   const items = (0, _react().useMemo)(() => (0, _lodash().flatten)(itemSlot === null || itemSlot === void 0 ? void 0 : itemSlot.values()), [itemSlot]);
 
   const handleDrawerToggle = id => {
@@ -110,13 +113,13 @@ function SideBar(_ref) {
     className: _sideBarModule().default.sidebar
   }), /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuSection, {
     items: items
-  }), drawerSlot.toArray().map(([id, drawer]) => {
+  }), drawers.map(drawer => {
     if (!drawer || !drawer.name) return null; // consider passing collapse all as a prop so each drawer collapses itself
 
     return /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
-      isOpen: openDrawerList.includes(id),
-      onToggle: () => handleDrawerToggle(id),
-      key: id,
+      isOpen: openDrawerList.includes(drawer.id),
+      onToggle: () => handleDrawerToggle(drawer.id),
+      key: drawer.id,
       name: drawer.name,
       Widget: drawer.widget,
       Context: drawer.Context

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

@@ -1 +1 @@
-{"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","openDrawerList","onToggleDrawer","toArray","items","values","handleDrawerToggle","id","isDrawerOpen","includes","list","filter","drawer","concat","styles","sidebar","map","name","widget","Context"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAWA;AACA;AACA;AACO,SAASA,OAAT,OAAkE;AAAA,MAAjD;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAiD;AAAA,MAAtBC,IAAsB;AACvE,QAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,uBAAS,CAACJ,UAAU,CAACK,OAAX,GAAqB,CAArB,EAAwB,CAAxB,CAAD,CAAT,CAAzC;AACA,QAAMC,KAAK,GAAG,sBAAQ,MAAM,uBAAQL,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEM,MAAV,EAAR,CAAd,EAA2C,CAACN,QAAD,CAA3C,CAAd;;AAEA,QAAMO,kBAAkB,GAAIC,EAAD,IAAgB;AACzC,UAAMC,YAAY,GAAGP,cAAc,CAACQ,QAAf,CAAwBF,EAAxB,CAArB;;AACA,QAAIC,YAAJ,EAAkB;AAChBN,MAAAA,cAAc,CAAEQ,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKL,EAAnC,CAAX,CAAd;AACA;AACD;;AACDL,IAAAA,cAAc,CAAEQ,IAAD,IAAUA,IAAI,CAACG,MAAL,CAAYN,EAAZ,CAAX,CAAd;AACD,GAPD;;AASA,sBACE,mEAASP,IAAT;AAAe,IAAA,SAAS,EAAEc,yBAAOC;AAAjC,mBACE,+BAAC,mCAAD;AAAa,IAAA,KAAK,EAAEX;AAApB,IADF,EAEGN,UAAU,CAACK,OAAX,GAAqBa,GAArB,CAAyB,CAAC,CAACT,EAAD,EAAKK,MAAL,CAAD,KAAkB;AAC1C,QAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACK,IAAvB,EAA6B,OAAO,IAAP,CADa,CAE1C;;AACA,wBACE,+BAAC,8BAAD;AACE,MAAA,MAAM,EAAEhB,cAAc,CAACQ,QAAf,CAAwBF,EAAxB,CADV;AAEE,MAAA,QAAQ,EAAE,MAAMD,kBAAkB,CAACC,EAAD,CAFpC;AAGE,MAAA,GAAG,EAAEA,EAHP;AAIE,MAAA,IAAI,EAAEK,MAAM,CAACK,IAJf;AAKE,MAAA,MAAM,EAAEL,MAAM,CAACM,MALjB;AAME,MAAA,OAAO,EAAEN,MAAM,CAACO;AANlB,oBAQE,+BAAC,MAAD,CAAQ,MAAR,OARF,CADF;AAYD,GAfA,CAFH,CADF;AAqBD","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { 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  itemSlot?: SidebarItemSlot;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * side bar component.\n */\nexport function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {\n  const [openDrawerList, onToggleDrawer] = useState([drawerSlot.toArray()[0][0]]);\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      {drawerSlot.toArray().map(([id, drawer]) => {\n        if (!drawer || !drawer.name) return null;\n        // consider passing collapse all as a prop so each drawer collapses itself\n        return (\n          <DrawerUI\n            isOpen={openDrawerList.includes(id)}\n            onToggle={() => handleDrawerToggle(id)}\n            key={id}\n            name={drawer.name}\n            Widget={drawer.widget}\n            Context={drawer.Context}\n          >\n            <drawer.render />\n          </DrawerUI>\n        );\n      })}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","drawers","values","openDrawerList","onToggleDrawer","id","items","handleDrawerToggle","isDrawerOpen","includes","list","filter","drawer","concat","styles","sidebar","map","name","widget","Context"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAaA;AACA;AACA;AACO,SAASA,OAAT,OAAkE;AAAA;;AAAA,MAAjD;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAiD;AAAA,MAAtBC,IAAsB;AACvE,QAAMC,OAAO,GAAG,uBAAQH,UAAU,CAACI,MAAX,EAAR,CAAhB;AACA,QAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,uBAAiC,cAACH,OAAO,CAAC,CAAD,CAAR,8CAAC,UAAYI,EAAb,CAAjC,CAAzC;AACA,QAAMC,KAAK,GAAG,sBAAQ,MAAM,uBAAQP,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEG,MAAV,EAAR,CAAd,EAA2C,CAACH,QAAD,CAA3C,CAAd;;AAEA,QAAMQ,kBAAkB,GAAIF,EAAD,IAAgB;AACzC,UAAMG,YAAY,GAAGL,cAAc,CAACM,QAAf,CAAwBJ,EAAxB,CAArB;;AACA,QAAIG,YAAJ,EAAkB;AAChBJ,MAAAA,cAAc,CAAEM,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKP,EAAnC,CAAX,CAAd;AACA;AACD;;AACDD,IAAAA,cAAc,CAAEM,IAAD,IAAUA,IAAI,CAACG,MAAL,CAAYR,EAAZ,CAAX,CAAd;AACD,GAPD;;AASA,sBACE,mEAASL,IAAT;AAAe,IAAA,SAAS,EAAEc,yBAAOC;AAAjC,mBACE,+BAAC,mCAAD;AAAa,IAAA,KAAK,EAAET;AAApB,IADF,EAEGL,OAAO,CAACe,GAAR,CAAaJ,MAAD,IAAY;AACvB,QAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACK,IAAvB,EAA6B,OAAO,IAAP,CADN,CAEvB;;AACA,wBACE,+BAAC,8BAAD;AACE,MAAA,MAAM,EAAEd,cAAc,CAACM,QAAf,CAAwBG,MAAM,CAACP,EAA/B,CADV;AAEE,MAAA,QAAQ,EAAE,MAAME,kBAAkB,CAACK,MAAM,CAACP,EAAR,CAFpC;AAGE,MAAA,GAAG,EAAEO,MAAM,CAACP,EAHd;AAIE,MAAA,IAAI,EAAEO,MAAM,CAACK,IAJf;AAKE,MAAA,MAAM,EAAEL,MAAM,CAACM,MALjB;AAME,MAAA,OAAO,EAAEN,MAAM,CAACO;AANlB,oBAQE,+BAAC,MAAD,CAAQ,MAAR,OARF,CADF;AAYD,GAfA,CAFH,CADF;AAqBD","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { 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  const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>([drawers[0]?.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        return (\n          <DrawerUI\n            isOpen={openDrawerList.includes(drawer.id)}\n            onToggle={() => handleDrawerToggle(drawer.id)}\n            key={drawer.id}\n            name={drawer.name}\n            Widget={drawer.widget}\n            Context={drawer.Context}\n          >\n            <drawer.render />\n          </DrawerUI>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,31 +1,31 @@
 {
   "name": "@teambit/sidebar",
-  "version": "0.0.632",
+  "version": "0.0.636",
   "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "sidebar",
-    "version": "0.0.632"
+    "version": "0.0.636"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
-    "lodash": "4.17.21",
     "classnames": "2.2.6",
+    "lodash": "4.17.21",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.separator": "4.1.1",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.632",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.488",
-    "@teambit/ui": "0.0.632",
+    "@teambit/component": "0.0.636",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.489",
+    "@teambit/ui": "0.0.636",
     "@teambit/design.ui.surfaces.menu.section": "0.0.347"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
-    "@types/lodash": "4.14.165",
     "@types/classnames": "2.2.11",
+    "@types/lodash": "4.14.165",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",

package/sidebar.ui.runtime.tsx

@@ -15,7 +15,7 @@ export type SidebarItem = ComponentType;
 
 export type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
 
-export type DrawerSlot = SlotRegistry<DrawerType>;
+export type DrawerSlot = SlotRegistry<DrawerType[]>;
 
 export class SidebarUI {
   constructor(private drawerSlot: DrawerSlot) {}
@@ -23,7 +23,7 @@ export class SidebarUI {
   /**
    * register a new drawer into the component sidebar.
    */
-  registerDrawer(drawer: DrawerType) {
+  registerDrawer(...drawer: DrawerType[]) {
     this.drawerSlot.register(drawer);
     return this;
   }

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

@@ -10,7 +10,9 @@ export type SideBarProps = {
    * slot of registered drawers.
    */
   drawerSlot: DrawerSlot;
-
+  /**
+   * slot of registered items to the main section at the top.
+   */
   itemSlot?: SidebarItemSlot;
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -18,7 +20,8 @@ export type SideBarProps = {
  * side bar component.
  */
 export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
-  const [openDrawerList, onToggleDrawer] = useState([drawerSlot.toArray()[0][0]]);
+  const drawers = flatten(drawerSlot.values());
+  const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>([drawers[0]?.id]);
   const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);
 
   const handleDrawerToggle = (id: string) => {
@@ -33,14 +36,14 @@ export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
   return (
     <div {...rest} className={styles.sidebar}>
       <MenuSection items={items} />
-      {drawerSlot.toArray().map(([id, drawer]) => {
+      {drawers.map((drawer) => {
         if (!drawer || !drawer.name) return null;
         // consider passing collapse all as a prop so each drawer collapses itself
         return (
           <DrawerUI
-            isOpen={openDrawerList.includes(id)}
-            onToggle={() => handleDrawerToggle(id)}
-            key={id}
+            isOpen={openDrawerList.includes(drawer.id)}
+            onToggle={() => handleDrawerToggle(drawer.id)}
+            key={drawer.id}
             name={drawer.name}
             Widget={drawer.widget}
             Context={drawer.Context}