@teambit/sidebar 0.0.627 → 0.0.629

package/__preview-1642994756471.js

@@ -0,0 +1 @@
+

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

@@ -111,12 +111,15 @@ function SideBar(_ref) {
   }), /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuSection, {
     items: items
   }), drawerSlot.toArray().map(([id, drawer]) => {
-    if (!drawer || !drawer.name) return null;
+    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,
-      name: drawer.name
+      name: drawer.name,
+      Widget: drawer.widget,
+      Context: drawer.Context
     }, /*#__PURE__*/_react().default.createElement(drawer.render, null));
   }));
 }

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"],"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;AAC7B,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;AAJf,oBAME,+BAAC,MAAD,CAAQ,MAAR,OANF,CADF;AAUD,GAZA,CAFH,CADF;AAkBD","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        return (\n          <DrawerUI\n            isOpen={openDrawerList.includes(id)}\n            onToggle={() => handleDrawerToggle(id)}\n            key={id}\n            name={drawer.name}\n          >\n            <drawer.render />\n          </DrawerUI>\n        );\n      })}\n    </div>\n  );\n}\n"]}
+{"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"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/sidebar",
-  "version": "0.0.627",
+  "version": "0.0.629",
   "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "sidebar",
-    "version": "0.0.627"
+    "version": "0.0.629"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -17,9 +17,9 @@
     "@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.627",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.486",
-    "@teambit/ui": "0.0.627",
+    "@teambit/component": "0.0.629",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.488",
+    "@teambit/ui": "0.0.629",
     "@teambit/design.ui.surfaces.menu.section": "0.0.347"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.208",
+    "@teambit/legacy": "1.0.209",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -61,7 +61,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.208",
+        "@teambit/legacy": "1.0.209",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

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

@@ -35,12 +35,15 @@ export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
       <MenuSection items={items} />
       {drawerSlot.toArray().map(([id, 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}
             name={drawer.name}
+            Widget={drawer.widget}
+            Context={drawer.Context}
           >
             <drawer.render />
           </DrawerUI>