@opensumi/ide-main-layout 3.9.1-next-1748523870.0 → 3.9.1-next-1748574990.0

package/src/browser/main-layout.contribution.ts

@@ -39,85 +39,34 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { ContributionProvider, Domain, IEventBus, WithEventBus, localize } from '@opensumi/ide-core-common';
-import { Command, CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
+import { CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
 
-import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER, IMainLayoutService } from '../common';
+import { DROP_EXTEND_VIEW_CONTAINER, DROP_PANEL_CONTAINER, DROP_VIEW_CONTAINER, IMainLayoutService } from '../common';
 
-import { BottomDropArea, RightDropArea } from './drop-area/drop-area';
+import {
+  EXPAND_BOTTOM_PANEL,
+  EXPAND_PANEL_COMMAND,
+  IS_VISIBLE_BOTTOM_PANEL_COMMAND,
+  IS_VISIBLE_EXTEND_VIEW_COMMAND,
+  IS_VISIBLE_LEFT_PANEL_COMMAND,
+  IS_VISIBLE_PANEL_COMMAND,
+  IS_VISIBLE_RIGHT_PANEL_COMMAND,
+  IS_VISIBLE_VIEW_COMMAND,
+  RETRACT_BOTTOM_PANEL,
+  RETRACT_PANEL_COMMAND,
+  TOGGLE_BOTTOM_PANEL_COMMAND,
+  TOGGLE_EXTEND_VIEW_COMMAND,
+  TOGGLE_LEFT_PANEL_COMMAND,
+  TOGGLE_PANEL_COMMAND,
+  TOGGLE_RIGHT_PANEL_COMMAND,
+  TOGGLE_VIEW_COMMAND,
+  WORKBENCH_ACTION_CLOSEPANEL,
+  WORKBENCH_ACTION_CLOSESIDECAR,
+} from './command';
+import { ExtendViewDropArea, PanelDropArea, ViewDropArea } from './drop-area/drop-area';
 import { ViewQuickOpenHandler } from './quick-open-view';
 import { BottomTabRenderer, LeftTabRenderer, RightTabRenderer } from './tabbar/renderer.view';
 
-// NOTE 左右侧面板的展开、折叠命令请使用组合命令 activity-bar.left.toggle，layout命令仅做折叠展开，不处理tab激活逻辑
-export const HIDE_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.hide',
-  label: '%main-layout.left-panel.hide%',
-};
-
-export const WORKBENCH_ACTION_CLOSESIDECAR: Command = {
-  id: 'workbench.action.closeSidebar',
-  label: '%main-layout.sidebar.hide%',
-};
-
-export const SHOW_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.show',
-  label: '%main-layout.left-panel.show%',
-};
-export const TOGGLE_LEFT_PANEL_COMMAND: MenuCommandDesc = {
-  id: 'main-layout.left-panel.toggle',
-  label: '%main-layout.left-panel.toggle%',
-};
-export const HIDE_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.hide',
-  label: '%main-layout.right-panel.hide%',
-};
-export const SHOW_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.show',
-  label: '%main-layout.right-panel.show%',
-};
-export const TOGGLE_RIGHT_PANEL_COMMAND: MenuCommandDesc = {
-  id: 'main-layout.right-panel.toggle',
-  label: '%main-layout.right-panel.toggle%',
-};
-
-export const HIDE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.hide',
-  label: '%main-layout.bottom-panel.hide%',
-};
-
-export const WORKBENCH_ACTION_CLOSEPANEL: Command = {
-  id: 'workbench.action.closePanel',
-  delegate: HIDE_BOTTOM_PANEL_COMMAND.id,
-};
-
-export const SHOW_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.show',
-  label: '%main-layout.bottom-panel.show%',
-};
-export const TOGGLE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.toggle',
-  iconClass: getIcon('minus'),
-  label: '%layout.tabbar.toggle%',
-};
-export const IS_VISIBLE_BOTTOM_PANEL_COMMAND: Command = {
-  id: 'main-layout.bottom-panel.is-visible',
-};
-export const IS_VISIBLE_LEFT_PANEL_COMMAND: Command = {
-  id: 'main-layout.left-panel.is-visible',
-};
-export const IS_VISIBLE_RIGHT_PANEL_COMMAND: Command = {
-  id: 'main-layout.right-panel.is-visible',
-};
-export const EXPAND_BOTTOM_PANEL: Command = {
-  id: 'main-layout.bottom-panel.expand',
-  label: '%layout.tabbar.expand%',
-  iconClass: getIcon('expand'),
-};
-export const RETRACT_BOTTOM_PANEL: Command = {
-  id: 'main-layout.bottom-panel.retract',
-  label: '%layout.tabbar.retract%',
-  iconClass: getIcon('shrink'),
-};
-
 @Domain(
   CommandContribution,
   ClientAppContribution,
@@ -196,15 +145,20 @@ export class MainLayoutModuleContribution
   }
 
   registerComponent(registry: ComponentRegistry): void {
-    registry.register(DROP_RIGHT_CONTAINER, [], {
-      component: RightDropArea,
+    registry.register(DROP_EXTEND_VIEW_CONTAINER, [], {
+      component: ExtendViewDropArea,
+      hideTab: true,
+      containerId: DROP_EXTEND_VIEW_CONTAINER,
+    });
+    registry.register(DROP_PANEL_CONTAINER, [], {
+      component: PanelDropArea,
       hideTab: true,
-      containerId: DROP_RIGHT_CONTAINER,
+      containerId: DROP_PANEL_CONTAINER,
     });
-    registry.register(DROP_BOTTOM_CONTAINER, [], {
-      component: BottomDropArea,
+    registry.register(DROP_VIEW_CONTAINER, [], {
+      component: ViewDropArea,
       hideTab: true,
-      containerId: DROP_BOTTOM_CONTAINER,
+      containerId: DROP_VIEW_CONTAINER,
     });
   }
 
@@ -217,78 +171,75 @@ export class MainLayoutModuleContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry) {
-    registry.registerSlotRenderer(SlotLocation.right, RightTabRenderer);
-    registry.registerSlotRenderer(SlotLocation.left, LeftTabRenderer);
-    registry.registerSlotRenderer(SlotLocation.bottom, BottomTabRenderer);
-  }
-
-  registerCommands(commands: CommandRegistry): void {
-    // @deprecated
-    commands.registerCommand(HIDE_LEFT_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, false);
+    registry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
+      isLatter: true,
+      supportedActions: {
+        accordion: true,
       },
     });
-    // @deprecated
-    commands.registerCommand(SHOW_LEFT_PANEL_COMMAND, {
-      execute: (size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, true, size);
+    registry.registerSlotRenderer(SlotLocation.view, LeftTabRenderer, {
+      supportedActions: {
+        accordion: true,
       },
     });
-    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.left, show, size);
+    registry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
+      isLatter: true,
+      supportedActions: {
+        expand: true,
+        toggle: true,
       },
     });
+  }
 
-    // @deprecated
-    commands.registerCommand(HIDE_RIGHT_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, false);
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(TOGGLE_VIEW_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.view, show, size);
       },
     });
-    // @deprecated
-    commands.registerCommand(SHOW_RIGHT_PANEL_COMMAND, {
-      execute: (size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, true, size);
+    commands.registerCommand(TOGGLE_EXTEND_VIEW_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.extendView, show, size);
       },
     });
-    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND, {
+    commands.registerCommand(TOGGLE_PANEL_COMMAND, {
       execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.right, show, size);
+        this.mainLayoutService.toggleSlot(SlotLocation.panel, show, size);
       },
     });
+    commands.registerCommand(IS_VISIBLE_VIEW_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.view),
+    });
+    commands.registerCommand(IS_VISIBLE_EXTEND_VIEW_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.extendView),
+    });
+    commands.registerCommand(IS_VISIBLE_PANEL_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.panel),
+    });
+    // TODO: 下个版本废弃掉
+    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND);
+    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND);
+    commands.registerCommand(TOGGLE_BOTTOM_PANEL_COMMAND);
+    commands.registerCommand(EXPAND_BOTTOM_PANEL);
+    commands.registerCommand(RETRACT_BOTTOM_PANEL);
+    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND);
+    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND);
+    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND);
 
     commands.registerCommand(WORKBENCH_ACTION_CLOSESIDECAR, {
       execute: () =>
         Promise.all([
-          this.mainLayoutService.toggleSlot(SlotLocation.left, false),
-          this.mainLayoutService.toggleSlot(SlotLocation.right, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.view, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.extendView, false),
         ]),
     });
 
-    commands.registerCommand(SHOW_BOTTOM_PANEL_COMMAND, {
+    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL, {
       execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.bottom, true);
+        this.mainLayoutService.toggleSlot(SlotLocation.panel, false);
       },
     });
 
-    commands.registerCommand(HIDE_BOTTOM_PANEL_COMMAND, {
-      execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.bottom, false);
-      },
-    });
-    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL);
-    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.getTabbarService('bottom').currentContainerId.get() !== '',
-    });
-    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
-    });
-    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
-    });
-
     commands.registerCommand(
       {
         id: 'view.outward.right-panel.hide',
@@ -359,14 +310,14 @@ export class MainLayoutModuleContribution
     });
 
     Object.entries({
-      [SlotLocation.left]: [
+      [SlotLocation.view]: [
         EXPLORER_CONTAINER_ID,
         SEARCH_CONTAINER_ID,
         SCM_CONTAINER_ID,
         DEBUG_CONTAINER_ID,
         EXTENSION_CONTAINER_ID,
       ],
-      [SlotLocation.bottom]: [
+      [SlotLocation.panel]: [
         MARKER_CONTAINER_ID,
         OUTPUT_CONTAINER_ID,
         DEBUG_CONSOLE_CONTAINER_ID,
@@ -396,24 +347,24 @@ export class MainLayoutModuleContribution
     });
 
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_LEFT_PANEL_COMMAND,
+      command: TOGGLE_VIEW_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_RIGHT_PANEL_COMMAND,
+      command: TOGGLE_EXTEND_VIEW_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_BOTTOM_PANEL_COMMAND as MenuCommandDesc,
+      command: TOGGLE_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: EXPAND_BOTTOM_PANEL as MenuCommandDesc,
+      command: EXPAND_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
       when: '!bottomFullExpanded',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: RETRACT_BOTTOM_PANEL as MenuCommandDesc,
+      command: RETRACT_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
       when: 'bottomFullExpanded',
     });
@@ -431,20 +382,24 @@ export class MainLayoutModuleContribution
   protected registerSideToggleKey() {
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+b',
-      command: TOGGLE_LEFT_PANEL_COMMAND.id,
+      command: TOGGLE_VIEW_COMMAND.id,
+    });
+    this.keybindingRegistry.registerKeybinding({
+      keybinding: 'ctrlcmd+alt+b',
+      command: TOGGLE_EXTEND_VIEW_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+j',
-      command: TOGGLE_BOTTOM_PANEL_COMMAND.id,
+      command: TOGGLE_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: EXPAND_BOTTOM_PANEL.id,
+      command: EXPAND_PANEL_COMMAND.id,
       when: '!bottomFullExpanded',
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: RETRACT_BOTTOM_PANEL.id,
+      command: RETRACT_PANEL_COMMAND.id,
       when: 'bottomFullExpanded',
     });
   }

package/src/browser/tabbar/TABBAR_CONFIG_USAGE.md

@@ -0,0 +1,141 @@
+# Tabbar 配置使用指南
+
+## 概述
+
+现在支持在注册插槽渲染器时传入 `tabbarConfig` 配置，用于控制 tabbar 的布局行为。这样不同的插槽渲染器可以根据自己的实现特点提供相应的配置。
+
+## 配置接口
+
+```typescript
+export interface TabbarConfig {
+  /** 是否为后置位置（bar 在 panel 右侧或底下） */
+  isLatter: boolean;
+  /** 支持的操作类型 */
+  supportedActions?: {
+    expand?: boolean;
+    toggle?: boolean;
+    accordion?: boolean;
+  };
+}
+```
+
+## 使用方式
+
+### 1. 注册带配置的插槽渲染器
+
+```typescript
+import { SlotLocation } from '@opensumi/ide-core-browser';
+import { slotRendererRegistry } from '@opensumi/ide-core-browser/lib/react-providers';
+
+// 注册左侧面板渲染器（bar 在 panel 左侧）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.view, LeftTabRenderer, {
+  isLatter: false, // bar 在 panel 左侧
+  supportedActions: {
+    accordion: true, // 支持手风琴
+  },
+});
+
+// 注册右侧面板渲染器（bar 在 panel 右侧）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
+  isLatter: true, // bar 在 panel 右侧
+  supportedActions: {
+    accordion: true,
+  },
+});
+
+// 注册底部面板渲染器（bar 在 panel 底下）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
+  isLatter: true, // bar 在 panel 底下
+  supportedActions: {
+    expand: true, // 支持展开/收缩
+    toggle: true, // 支持 toggle 行为
+  },
+});
+```
+
+### 2. 自定义插槽渲染器的配置
+
+如果你有自定义的插槽渲染器，可以根据具体的布局实现来设置配置：
+
+```typescript
+// 自定义的水平布局渲染器
+class HorizontalTabRenderer extends React.Component {
+  // 实现水平布局，bar 在左侧
+}
+
+// 注册时指定配置
+slotRendererRegistry.registerSlotRenderer('customLocation', HorizontalTabRenderer, {
+  isLatter: false, // bar 在左侧
+  supportedActions: {
+    accordion: false, // 不支持手风琴
+    expand: false, // 不支持展开
+  },
+});
+```
+
+### 3. 配置的优先级
+
+配置采用以下优先级：
+
+1. **插槽渲染器配置**：通过 `registerSlotRenderer` 传入的 `tabbarConfig`
+2. **默认配置**：基于 location 的默认配置
+
+```typescript
+// 在策略中获取配置的逻辑
+protected getIsLatter(): boolean {
+  if (this.tabbarConfig?.isLatter !== undefined) {
+    return this.tabbarConfig.isLatter; // 优先使用渲染器配置
+  }
+  // 默认配置：扩展视图和底部面板为后置位置
+  return this.location === 'extendView' || this.location === 'panel';
+}
+```
+
+## 实际应用场景
+
+### 场景 1：自定义右侧面板布局
+
+如果你的右侧面板采用了特殊的布局，bar 实际在左侧：
+
+```typescript
+slotRendererRegistry.registerSlotRenderer(SlotLocation.extendView, CustomRightRenderer, {
+  isLatter: false, // 虽然是右侧面板，但 bar 在左侧
+});
+```
+
+### 场景 2：底部面板的变体
+
+底部面板的不同实现可能有不同的布局：
+
+```typescript
+// 传统底部面板：bar 在上方
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, TraditionalBottomRenderer, {
+  isLatter: false, // bar 在 panel 上方
+  supportedActions: {
+    expand: true,
+    toggle: true,
+  },
+});
+
+// 现代底部面板：bar 在下方
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, ModernBottomRenderer, {
+  isLatter: true, // bar 在 panel 下方
+  supportedActions: {
+    expand: true,
+    toggle: true,
+  },
+});
+```
+
+## 注意事项
+
+1. **向后兼容**：如果不提供 `tabbarConfig`，会使用默认配置
+2. **配置验证**：确保 `isLatter` 的值与实际的渲染器布局一致
+3. **动态更新**：目前配置在注册时确定，不支持运行时动态修改
+
+## 好处
+
+- **灵活性**：不同的渲染器可以有不同的布局配置
+- **解耦合**：策略不再硬编码位置相关的配置
+- **可扩展**：新的渲染器可以轻松定义自己的配置
+- **清晰性**：配置意图明确，便于理解和维护

package/src/browser/tabbar/bar.view.tsx

@@ -5,6 +5,7 @@ import { Badge, Icon } from '@opensumi/ide-components';
 import {
   ComponentRegistryInfo,
   ComponentRegistryProvider,
+  Event,
   KeybindingRegistry,
   addClassName,
   getIcon,
@@ -17,7 +18,6 @@ import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions
 import { Layout } from '@opensumi/ide-core-browser/lib/components/layout/layout';
 import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
 import { IProgressService } from '@opensumi/ide-core-browser/lib/progress';
-import { observableValue } from '@opensumi/ide-monaco/lib/common/observable';
 
 import { IMainLayoutService } from '../../common';
 
@@ -110,20 +110,20 @@ export const TabbarViewBase: FC<ITabbarViewProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    setContainers(
-      splitVisibleTabs(
-        tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
-        visibleCount,
-      ),
-    );
-    const disposable = tabbarService.onStateChange(() => {
+    const updateContainers = () => {
       setContainers(
         splitVisibleTabs(
           tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
           visibleCount,
         ),
       );
-    });
+    };
+
+    updateContainers();
+    const disposable = Event.any<any>(
+      tabbarService.onDidRegisterContainer,
+      tabbarService.onStateChange,
+    )(updateContainers);
     return () => {
       disposable.dispose();
     };
@@ -154,9 +154,6 @@ export const TabbarViewBase: FC<ITabbarViewProps> = (props) => {
       if (!containerId) {
         return null;
       }
-      if (side && component.options?.hideLocationTab?.includes(side)) {
-        return null;
-      }
 
       tabbarService.updateTabInMoreKey(containerId, false);
       let ref: HTMLLIElement | null;
@@ -424,9 +421,6 @@ export const ChatTabbarRenderer2: FC<{ barSize?: number; style?: CSSProperties }
   const { barSize = 32, style } = props;
   const { side } = useContext(TabbarConfig);
   const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
-  useEffect(() => {
-    tabbarService.setIsLatter(true);
-  }, [tabbarService]);
   const styles_right_tab_bar = useDesignStyles(styles.ai_right_tab_bar, 'ai_right_tab_bar');
   const styles_right_tab = useDesignStyles(styles.ai_right_tab, 'ai_right_tab');
 

package/src/browser/tabbar/panel.view.tsx

@@ -224,7 +224,7 @@ const BottomPanelView: React.FC<{
         </div>
         <div className={styles_panel_toolbar_container}>
           {titleMenu && <InlineActionBar menus={titleMenu} />}
-          <InlineMenuBar menus={tabbarService.commonTitleMenu} moreAtFirst />
+          {tabbarService.commonTitleMenu && <InlineMenuBar menus={tabbarService.commonTitleMenu} moreAtFirst />}
         </div>
       </div>
       <div className={styles.container_wrap} ref={(ele) => (ref.current = ele)}>
@@ -240,7 +240,7 @@ const BottomPanelView: React.FC<{
           <AccordionContainer
             views={component.views}
             alignment='horizontal'
-            minSize={component.options!.miniSize}
+            minSize={component.options!.miniSize || 200}
             containerId={component.options!.containerId}
           />
         )}

package/src/browser/tabbar/renderer.view.tsx

@@ -34,7 +34,7 @@ export const TabbarConfig = createContext<{
   direction: Layout.direction;
   fullSize: number;
 }>({
-  side: SlotLocation.left,
+  side: SlotLocation.view,
   direction: EDirection.LeftToRight,
   fullSize: 0,
 });
@@ -114,7 +114,7 @@ export const RightTabRenderer = ({
   tabpanelView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.right}
+    side={SlotLocation.extendView}
     direction={EDirection.RightToLeft}
     id={VIEW_CONTAINERS.RIGHT_TABBAR_PANEL}
     className={cls(className, 'right-slot')}
@@ -134,7 +134,7 @@ export const LeftTabRenderer = ({
   tabbarView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.left}
+    side={SlotLocation.view}
     direction={EDirection.LeftToRight}
     id={VIEW_CONTAINERS.LEFT_TABBAR_PANEL}
     className={cls(className, 'left-slot')}
@@ -154,7 +154,7 @@ export const BottomTabRenderer = ({
   tabbarView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.bottom}
+    side={SlotLocation.panel}
     id={VIEW_CONTAINERS.BOTTOM_TABBAR_PANEL}
     direction={EDirection.BottomToTop}
     className={cls(className, 'bottom-slot')}