@teambit/sidebar 0.0.881 → 0.0.882

package/dist/index.js

@@ -28,29 +28,21 @@ Object.defineProperty(exports, "SidebarUI", {
   }
 });
 exports.default = void 0;
-
 function _sidebar() {
   const data = require("./sidebar.aspect");
-
   _sidebar = function () {
     return data;
   };
-
   return data;
 }
-
 function _sidebarUi() {
   const data = require("./sidebar.ui.runtime");
-
   _sidebarUi = function () {
     return data;
   };
-
   return data;
 }
-
 var _default = _sidebar().SidebarAspect;
-
 exports.default = _default;
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SidebarAspect"],"sources":["index.ts"],"sourcesContent":["import { SidebarAspect } from './sidebar.aspect';\n\nexport { SidebarUI, SidebarItemSlot, SidebarItem } from './sidebar.ui.runtime';\nexport { SidebarAspect };\nexport default SidebarAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;eAEeA,wB"}
+{"version":3,"names":["SidebarAspect"],"sources":["index.ts"],"sourcesContent":["import { SidebarAspect } from './sidebar.aspect';\n\nexport { SidebarUI, SidebarItemSlot, SidebarItem } from './sidebar.ui.runtime';\nexport { SidebarAspect };\nexport default SidebarAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAA+E,eAEhEA,wBAAa;AAAA"}

package/dist/sidebar.aspect.js

@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SidebarAspect = void 0;
-
 function _harmony() {
   const data = require("@teambit/harmony");
-
   _harmony = function () {
     return data;
   };
-
   return data;
 }
-
 const SidebarAspect = _harmony().Aspect.create({
   id: 'teambit.ui-foundation/sidebar'
 });
-
 exports.SidebarAspect = SidebarAspect;
 
 //# sourceMappingURL=sidebar.aspect.js.map

package/dist/sidebar.aspect.js.map

@@ -1 +1 @@
-{"version":3,"names":["SidebarAspect","Aspect","create","id"],"sources":["sidebar.aspect.ts"],"sourcesContent":["import { Aspect } from '@teambit/harmony';\n\nexport const SidebarAspect = Aspect.create({\n  id: 'teambit.ui-foundation/sidebar',\n});\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,aAAa,GAAGC,iBAAA,CAAOC,MAAP,CAAc;EACzCC,EAAE,EAAE;AADqC,CAAd,CAAtB"}
+{"version":3,"names":["SidebarAspect","Aspect","create","id"],"sources":["sidebar.aspect.ts"],"sourcesContent":["import { Aspect } from '@teambit/harmony';\n\nexport const SidebarAspect = Aspect.create({\n  id: 'teambit.ui-foundation/sidebar',\n});\n"],"mappings":";;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,aAAa,GAAGC,iBAAM,CAACC,MAAM,CAAC;EACzCC,EAAE,EAAE;AACN,CAAC,CAAC;AAAC"}

package/dist/sidebar.composition.js

@@ -1,22 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Logo = void 0;
-
 function _react() {
   const data = _interopRequireDefault(require("react"));
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 const Logo = () => /*#__PURE__*/_react().default.createElement("div", {
   style: {
     height: '100%',
@@ -29,7 +24,6 @@ const Logo = () => /*#__PURE__*/_react().default.createElement("div", {
   },
   src: "https://static.bit.dev/extensions-icons/sidebar.svg"
 }));
-
 exports.Logo = Logo;
 
 //# sourceMappingURL=sidebar.composition.js.map

package/dist/sidebar.composition.js.map

@@ -1 +1 @@
-{"version":3,"names":["Logo","height","display","justifyContent","width"],"sources":["sidebar.composition.tsx"],"sourcesContent":["import React from 'react';\n\nexport const Logo = () => (\n  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>\n    <img style={{ width: 70 }} src=\"https://static.bit.dev/extensions-icons/sidebar.svg\" />\n  </div>\n);\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,IAAI,GAAG,mBAClB;EAAK,KAAK,EAAE;IAAEC,MAAM,EAAE,MAAV;IAAkBC,OAAO,EAAE,MAA3B;IAAmCC,cAAc,EAAE;EAAnD;AAAZ,gBACE;EAAK,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAT,CAAZ;EAA2B,GAAG,EAAC;AAA/B,EADF,CADK"}
+{"version":3,"names":["Logo","height","display","justifyContent","width"],"sources":["sidebar.composition.tsx"],"sourcesContent":["import React from 'react';\n\nexport const Logo = () => (\n  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>\n    <img style={{ width: 70 }} src=\"https://static.bit.dev/extensions-icons/sidebar.svg\" />\n  </div>\n);\n"],"mappings":";;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,IAAI,GAAG,mBAClB;EAAK,KAAK,EAAE;IAAEC,MAAM,EAAE,MAAM;IAAEC,OAAO,EAAE,MAAM;IAAEC,cAAc,EAAE;EAAS;AAAE,gBACxE;EAAK,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAE;EAAC,GAAG,EAAC;AAAqD,EAAG,CAE1F;AAAC"}

package/dist/sidebar.ui.runtime.js

@@ -1,86 +1,61 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.promise.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SidebarUI = void 0;
-
 function _extends2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
   _extends2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
   _defineProperty2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _harmony() {
   const data = require("@teambit/harmony");
-
   _harmony = function () {
     return data;
   };
-
   return data;
 }
-
 function _ui() {
   const data = require("@teambit/ui");
-
   _ui = function () {
     return data;
   };
-
   return data;
 }
-
 function _react() {
   const data = _interopRequireDefault(require("react"));
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 function _sidebar() {
   const data = require("./sidebar.aspect");
-
   _sidebar = function () {
     return data;
   };
-
   return data;
 }
-
 function _ui2() {
   const data = require("./ui");
-
   _ui2 = function () {
     return data;
   };
-
   return data;
 }
-
 class SidebarUI {
   constructor(drawerSlot) {
     this.drawerSlot = drawerSlot;
@@ -90,31 +65,27 @@ class SidebarUI {
       }, props));
     });
   }
+
   /**
    * register a new drawer into the component sidebar.
    */
-
-
   registerDrawer(...drawer) {
     this.drawerSlot.register(drawer);
     return this;
   }
+
   /**
    * render the sidebar.
    */
 
-
   static async provider(deps, config, [drawerSlot]) {
     return new SidebarUI(drawerSlot);
   }
-
 }
-
 exports.SidebarUI = SidebarUI;
 (0, _defineProperty2().default)(SidebarUI, "runtime", _ui().UIRuntime);
 (0, _defineProperty2().default)(SidebarUI, "slots", [_harmony().Slot.withType()]);
 (0, _defineProperty2().default)(SidebarUI, "dependencies", []);
-
 _sidebar().SidebarAspect.addRuntime(SidebarUI);
 
 //# sourceMappingURL=sidebar.ui.runtime.js.map

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 = {\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"}
+{"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,SAAS,CAAC;EACrBC,WAAW,CAASC,UAAsB,EAAE;IAAA,KAAxBA,UAAsB,GAAtBA,UAAsB;IAAA,gDAahCC,KAA4B,IAAK;MACzC,oBAAO,+BAAC,cAAO;QAAC,UAAU,EAAE,IAAI,CAACD;MAAW,GAAKC,KAAK,EAAY;IACpE,CAAC;EAf4C;;EAE7C;AACF;AACA;EACEC,cAAc,CAAC,GAAGC,MAAoB,EAAE;IACtC,IAAI,CAACH,UAAU,CAACI,QAAQ,CAACD,MAAM,CAAC;IAChC,OAAO,IAAI;EACb;;EAEA;AACF;AACA;;EAWE,aAAaE,QAAQ,CAACC,IAAI,EAAEC,MAAM,EAAE,CAACP,UAAU,CAAe,EAAE;IAC9D,OAAO,IAAIF,SAAS,CAACE,UAAU,CAAC;EAClC;AACF;AAAC;AAAA,gCA3BYF,SAAS,aAkBHU,eAAS;AAAA,gCAlBfV,SAAS,WAoBL,CAACW,eAAI,CAACC,QAAQ,EAAc,CAAC;AAAA,gCApBjCZ,SAAS,kBAsBE,EAAE;AAO1Ba,wBAAa,CAACC,UAAU,CAACd,SAAS,CAAC"}

package/dist/ui/index.js

@@ -15,14 +15,11 @@ Object.defineProperty(exports, "SideBarProps", {
     return _sideBar().SideBarProps;
   }
 });
-
 function _sideBar() {
   const data = require("./side-bar");
-
   _sideBar = function () {
     return data;
   };
-
   return data;
 }
 

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SideBar, SideBarProps } from './side-bar';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SideBar, SideBarProps } from './side-bar';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}

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

@@ -15,14 +15,11 @@ Object.defineProperty(exports, "SideBarProps", {
     return _sideBar().SideBarProps;
   }
 });
-
 function _sideBar() {
   const data = require("./side-bar");
-
   _sideBar = function () {
     return data;
   };
-
   return data;
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SideBar, SideBarProps } from './side-bar';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SideBar, SideBarProps } from './side-bar';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}

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

@@ -1,134 +1,99 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.array.sort.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideBar = SideBar;
-
 function _extends2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
   _extends2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _objectWithoutProperties2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
   _objectWithoutProperties2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _react() {
   const data = _interopRequireWildcard(require("react"));
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 function _lodash() {
   const data = require("lodash");
-
   _lodash = function () {
     return data;
   };
-
   return data;
 }
-
 function _classnames() {
   const data = _interopRequireDefault(require("classnames"));
-
   _classnames = function () {
     return data;
   };
-
   return data;
 }
-
 function _designUiSurfacesMenu() {
   const data = require("@teambit/design.ui.surfaces.menu.section");
-
   _designUiSurfacesMenu = function () {
     return data;
   };
-
   return data;
 }
-
 function _uiFoundationUiTree() {
   const data = require("@teambit/ui-foundation.ui.tree.drawer");
-
   _uiFoundationUiTree = function () {
     return data;
   };
-
   return data;
 }
-
 function _sideBarModule() {
   const data = _interopRequireDefault(require("./side-bar.module.scss"));
-
   _sideBarModule = function () {
     return data;
   };
-
   return data;
 }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * side bar component.
  */
 function SideBar(_ref) {
   let {
-    drawerSlot,
-    items = []
-  } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["drawerSlot", "items"]);
+      drawerSlot,
+      items = []
+    } = _ref,
+    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 handleDrawerToggle = id => {
     const isDrawerOpen = openDrawerList.includes(id);
-
     if (isDrawerOpen) {
       onToggleDrawer(list => list.filter(drawer => drawer !== id));
       return;
     }
-
     onToggleDrawer(list => list.concat(id));
   };
-
   return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
     className: _sideBarModule().default.sidebar
   }), /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuSection, {
     items: items
   }), drawers.map(drawer => {
-    if (!drawer || !drawer.name) return null; // consider passing collapse all as a prop so each drawer collapses itself
-
+    if (!drawer || !drawer.name) return null;
+    // consider passing collapse all as a prop so each drawer collapses itself
     const isOpen = openDrawerList.includes(drawer.id);
     return /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
       className: (0, _classnames().default)(_sideBarModule().default.sidebarDrawer, isOpen && _sideBarModule().default.open),
@@ -141,13 +106,12 @@ function SideBar(_ref) {
     }, /*#__PURE__*/_react().default.createElement(drawer.render, null));
   }));
 }
-
 function sortFn(first, second) {
   var _first$order, _second$order;
-
   // 0  - equal
   // <0 - first < second
   // >0 - first > second
+
   return ((_first$order = first.order) !== null && _first$order !== void 0 ? _first$order : 0) - ((_second$order = second.order) !== null && _second$order !== void 0 ? _second$order : 0);
 }
 

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

@@ -1 +1 @@
-{"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"}
+{"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;AAA4C;AAAA;AAa5C;AACA;AACA;AACO,SAASA,OAAO,OAAoD;EAAA,IAAnD;MAAEC,UAAU;MAAEC,KAAK,GAAG;IAA0B,CAAC;IAApBC,IAAI;EACvD,MAAMC,OAAO,GAAG,IAAAC,iBAAO,EAACJ,UAAU,CAACK,MAAM,EAAE,CAAC,CACzCC,MAAM,CAAEC,MAAM;IAAA;IAAA,OAAK,EAACA,MAAM,aAANA,MAAM,mCAANA,MAAM,CAAEC,QAAQ,6CAAhB,sBAAAD,MAAM,CAAc;EAAA,EAAC,CACzCE,IAAI,CAACC,MAAM,CAAC;EAEf,MAAM,CAACC,cAAc,EAAEC,cAAc,CAAC,GAAG,IAAAC,iBAAQ,EAAyBV,OAAO,CAACW,GAAG,CAAEP,MAAM,IAAKA,MAAM,CAACQ,EAAE,CAAC,CAAC;EAE7G,MAAMC,kBAAkB,GAAID,EAAU,IAAK;IACzC,MAAME,YAAY,GAAGN,cAAc,CAACO,QAAQ,CAACH,EAAE,CAAC;IAChD,IAAIE,YAAY,EAAE;MAChBL,cAAc,CAAEO,IAAI,IAAKA,IAAI,CAACb,MAAM,CAAEC,MAAM,IAAKA,MAAM,KAAKQ,EAAE,CAAC,CAAC;MAChE;IACF;IACAH,cAAc,CAAEO,IAAI,IAAKA,IAAI,CAACC,MAAM,CAACL,EAAE,CAAC,CAAC;EAC3C,CAAC;EAED,oBACE,mEAASb,IAAI;IAAE,SAAS,EAAEmB,wBAAM,CAACC;EAAQ,iBACvC,+BAAC,mCAAW;IAAC,KAAK,EAAErB;EAAM,EAAG,EAC5BE,OAAO,CAACW,GAAG,CAAEP,MAAM,IAAK;IACvB,IAAI,CAACA,MAAM,IAAI,CAACA,MAAM,CAACgB,IAAI,EAAE,OAAO,IAAI;IACxC;IACA,MAAMC,MAAM,GAAGb,cAAc,CAACO,QAAQ,CAACX,MAAM,CAACQ,EAAE,CAAC;IAEjD,oBACE,+BAAC,8BAAQ;MACP,SAAS,EAAE,IAAAU,qBAAU,EAACJ,wBAAM,CAACK,aAAa,EAAEF,MAAM,IAAIH,wBAAM,CAACM,IAAI,CAAE;MACnE,MAAM,EAAEH,MAAO;MACf,QAAQ,EAAE,MAAMR,kBAAkB,CAACT,MAAM,CAACQ,EAAE,CAAE;MAC9C,GAAG,EAAER,MAAM,CAACQ,EAAG;MACf,IAAI,EAAER,MAAM,CAACgB,IAAK;MAClB,OAAO,EAAEhB,MAAM,CAACqB,OAAQ;MACxB,OAAO,EAAErB,MAAM,CAACsB;IAAQ,gBAExB,+BAAC,MAAM,CAAC,MAAM,OAAG,CACR;EAEf,CAAC,CAAC,CACE;AAEV;AACA,SAASnB,MAAM,CAACoB,KAAiB,EAAEC,MAAkB,EAAE;EAAA;EACrD;EACA;EACA;;EAEA,OAAO,iBAACD,KAAK,CAACE,KAAK,uDAAI,CAAC,sBAAKD,MAAM,CAACC,KAAK,yDAAI,CAAC,CAAC;AACjD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/sidebar",
-  "version": "0.0.881",
+  "version": "0.0.882",
   "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "sidebar",
-    "version": "0.0.881"
+    "version": "0.0.882"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -14,9 +14,9 @@
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
-    "@teambit/component": "0.0.881",
+    "@teambit/component": "0.0.882",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.507",
-    "@teambit/ui": "0.0.881",
+    "@teambit/ui": "0.0.882",
     "@teambit/design.ui.surfaces.menu.section": "0.0.348"
   },
   "devDependencies": {

package/{preview-1666409808293.js → preview-1666496165706.js}

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