@teambit/scope 0.0.1019 → 0.0.1021

package/dist/{preview-1679062502420.js → preview-1679542267429.js}

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

package/dist/ui/scope.js

@@ -177,7 +177,7 @@ function Scope({
     size: 264,
     layout: sidebarOpenness
   }, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
-    className: _scopeModule().default.sidebar
+    className: (0, _classnames().default)(_scopeModule().default.sidebar, !isSidebarOpen && _scopeModule().default.collapsed)
   }, sidebar), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _scopeModule().default.splitter
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {

package/dist/ui/scope.js.map

@@ -1 +1 @@
-{"version":3,"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","PaneWrapper","context","paneClassName","TargetScopeOverview","TargetCorner","onSidebarTogglerChange","userUseScopeQuery","scopeClassName","scope","useScopeQuery","isMobile","useIsMobile","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","Context","map","ctx","classNames","styles","topbar","name","whiteCorner","main","splitter","e","stopPropagation","pane","PaneContainer","children","Wrapper"],"sources":["scope.tsx"],"sourcesContent":["import React, { useReducer, ComponentType, ReactNode } from 'react';\nimport 'reset-css';\nimport classNames from 'classnames';\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 { 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  scopeClassName?: string;\n  PaneWrapper?: ComponentType<{ children: ReactNode }>;\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  PaneWrapper,\n  context = [],\n  paneClassName,\n  TargetScopeOverview,\n  TargetCorner,\n  onSidebarTogglerChange,\n  userUseScopeQuery,\n  scopeClassName,\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={classNames(styles.scope, scopeClassName)}>\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\n            {\n              /**\n               * @hack - discuss with Ran why we need a PaneWrapper as a parent of the Pane\n               * conditionally rendering it makes sure that it doesn't break the code tab layout\n               */\n              (PaneWrapper && (\n                <PaneContainer Wrapper={PaneWrapper}>\n                  <Pane className={classNames(paneClassName, styles.pane)}>\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                </PaneContainer>\n              )) || (\n                <Pane className={classNames(paneClassName, styles.pane)}>\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              )\n            }\n          </SplitPane>\n        </div>\n      </Composer>\n    </ScopeProvider>\n  );\n}\n\nfunction PaneContainer({\n  children,\n  Wrapper,\n}: {\n  children: ReactNode;\n  Wrapper: ComponentType<{ children: ReactNode }>;\n}) {\n  return <Wrapper>{children}</Wrapper>;\n}\n"],"mappings":"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"}
+{"version":3,"names":["Scope","routeSlot","menuSlot","sidebar","scopeUi","badgeSlot","overviewLineSlot","cornerSlot","PaneWrapper","context","paneClassName","TargetScopeOverview","TargetCorner","onSidebarTogglerChange","userUseScopeQuery","scopeClassName","scope","useScopeQuery","isMobile","useIsMobile","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","CornerOverride","values","setComponents","components","Context","map","ctx","classNames","styles","topbar","name","whiteCorner","main","collapsed","splitter","e","stopPropagation","pane","PaneContainer","children","Wrapper"],"sources":["scope.tsx"],"sourcesContent":["import React, { useReducer, ComponentType, ReactNode } from 'react';\nimport 'reset-css';\nimport classNames from 'classnames';\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 { 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  scopeClassName?: string;\n  PaneWrapper?: ComponentType<{ children: ReactNode }>;\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  PaneWrapper,\n  context = [],\n  paneClassName,\n  TargetScopeOverview,\n  TargetCorner,\n  onSidebarTogglerChange,\n  userUseScopeQuery,\n  scopeClassName,\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={classNames(styles.scope, scopeClassName)}>\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={classNames(styles.sidebar, !isSidebarOpen && styles.collapsed)}>{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\n            {\n              /**\n               * @hack - discuss with Ran why we need a PaneWrapper as a parent of the Pane\n               * conditionally rendering it makes sure that it doesn't break the code tab layout\n               */\n              (PaneWrapper && (\n                <PaneContainer Wrapper={PaneWrapper}>\n                  <Pane className={classNames(paneClassName, styles.pane)}>\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                </PaneContainer>\n              )) || (\n                <Pane className={classNames(paneClassName, styles.pane)}>\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              )\n            }\n          </SplitPane>\n        </div>\n      </Composer>\n    </ScopeProvider>\n  );\n}\n\nfunction PaneContainer({\n  children,\n  Wrapper,\n}: {\n  children: ReactNode;\n  Wrapper: ComponentType<{ children: ReactNode }>;\n}) {\n  return <Wrapper>{children}</Wrapper>;\n}\n"],"mappings":"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"}

package/dist/ui/scope.module.scss

@@ -19,7 +19,6 @@
 
 .main {
   flex: 1 1;
-
   height: 100%;
   overflow: hidden;
 }
@@ -37,8 +36,12 @@
   min-width: 100px;
   max-width: 85%;
   position: relative;
-
+  overflow: unset;
   height: 100%;
+
+  &.collapsed {
+    overflow: hidden;
+  }
 }
 
 .pane {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.1019",
+  "version": "0.0.1021",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.1019"
+    "version": "0.0.1021"
   },
   "dependencies": {
     "fs-extra": "10.0.0",
@@ -26,59 +26,59 @@
     "@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/ui-foundation.ui.tree.drawer": "0.0.511",
-    "@teambit/scope.models.scope-model": "0.0.341",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.341",
-    "@teambit/aspect-loader": "0.0.1019",
-    "@teambit/cli": "0.0.683",
-    "@teambit/compiler": "0.0.1019",
-    "@teambit/component": "0.0.1019",
-    "@teambit/envs": "0.0.1019",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.512",
+    "@teambit/scope.models.scope-model": "0.0.342",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.342",
+    "@teambit/aspect-loader": "0.0.1021",
+    "@teambit/cli": "0.0.684",
+    "@teambit/compiler": "0.0.1021",
+    "@teambit/component": "0.0.1021",
+    "@teambit/envs": "0.0.1021",
     "@teambit/harmony.modules.requireable-component": "0.0.491",
-    "@teambit/isolator": "0.0.1019",
-    "@teambit/logger": "0.0.776",
+    "@teambit/isolator": "0.0.1021",
+    "@teambit/logger": "0.0.777",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/builder": "0.0.1019",
-    "@teambit/dependency-resolver": "0.0.1019",
-    "@teambit/express": "0.0.781",
-    "@teambit/graph": "0.0.1019",
-    "@teambit/graphql": "0.0.1019",
+    "@teambit/builder": "0.0.1021",
+    "@teambit/dependency-resolver": "0.0.1021",
+    "@teambit/express": "0.0.782",
+    "@teambit/graph": "0.0.1021",
+    "@teambit/graphql": "0.0.1021",
     "@teambit/legacy-bit-id": "0.0.423",
-    "@teambit/ui": "0.0.1019",
+    "@teambit/ui": "0.0.1021",
     "@teambit/workspace.modules.match-pattern": "0.0.498",
     "@teambit/component-id": "0.0.427",
-    "@teambit/component.ui.component-drawer": "0.0.241",
+    "@teambit/component.ui.component-drawer": "0.0.242",
     "@teambit/design.ui.tree": "0.0.16",
-    "@teambit/lanes.hooks.use-lane-components": "0.0.145",
-    "@teambit/lanes.hooks.use-lanes": "0.0.146",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.108",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.758",
-    "@teambit/command-bar": "0.0.1019",
-    "@teambit/component-tree": "0.0.807",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.146",
+    "@teambit/lanes.hooks.use-lanes": "0.0.147",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.109",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.759",
+    "@teambit/command-bar": "0.0.1021",
+    "@teambit/component-tree": "0.0.809",
     "@teambit/component.modules.component-url": "0.0.151",
-    "@teambit/component.ui.component-filters.component-filter-context": "0.0.115",
-    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.115",
-    "@teambit/component.ui.component-filters.env-filter": "0.0.121",
-    "@teambit/component.ui.component-filters.show-main-filter": "0.0.108",
-    "@teambit/sidebar": "0.0.1019",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.116",
+    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.116",
+    "@teambit/component.ui.component-filters.env-filter": "0.0.122",
+    "@teambit/component.ui.component-filters.show-main-filter": "0.0.109",
+    "@teambit/sidebar": "0.0.1021",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.menu": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
-    "@teambit/lane-id": "0.0.200",
+    "@teambit/lane-id": "0.0.201",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.346",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.347",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.206",
     "@teambit/ui-foundation.ui.corner": "0.0.508",
     "@teambit/ui-foundation.ui.full-loader": "0.0.495",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.188",
     "@teambit/ui-foundation.ui.top-bar": "0.0.505",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.132",
+    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.132",
     "@teambit/explorer.ui.gallery.component-card": "0.0.507",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/preview.ui.preview-placeholder": "0.0.496",
     "@teambit/scope.ui.empty-scope": "0.0.503",
-    "@teambit/scope.ui.scope-details": "0.0.515",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.132",
-    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.132"
+    "@teambit/scope.ui.scope-details": "0.0.515"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -95,7 +95,7 @@
   },
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.462",
+    "@teambit/legacy": "1.0.464",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/ui/scope.module.scss

@@ -19,7 +19,6 @@
 
 .main {
   flex: 1 1;
-
   height: 100%;
   overflow: hidden;
 }
@@ -37,8 +36,12 @@
   min-width: 100px;
   max-width: 85%;
   position: relative;
-
+  overflow: unset;
   height: 100%;
+
+  &.collapsed {
+    overflow: hidden;
+  }
 }
 
 .pane {

package/ui/scope.tsx

@@ -83,7 +83,7 @@ export function Scope({
           />
 
           <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>
-            <Pane className={styles.sidebar}>{sidebar}</Pane>
+            <Pane className={classNames(styles.sidebar, !isSidebarOpen && styles.collapsed)}>{sidebar}</Pane>
             <HoverSplitter className={styles.splitter}>
               <Collapser
                 isOpen={isSidebarOpen}