CB-4469 tabs reshadow refactor

webapp/packages/core-administration/src/AdministrationItem/IAdministrationItem.ts

@@ -5,8 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
-
 import type { IRouteParams } from './IRouteParams';
 
 export enum AdministrationItemType {
@@ -24,7 +22,6 @@ export interface AdministrationItemDrawerProps {
   item: IAdministrationItem;
   configurationWizard: boolean;
   onSelect: (id: string) => void;
-  style: ComponentStyle;
   disabled?: boolean;
 }
 export type AdministrationItemDrawerComponent = React.FunctionComponent<AdministrationItemDrawerProps>;

webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx

@@ -33,6 +33,7 @@ interface IContextMenuProps extends Omit<ButtonHTMLAttributes<any>, 'children'>
   onVisibleSwitch?: (visible: boolean) => void;
 }
 
+// TODO the click doesn't work for React components as children
 export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
   forwardRef(function ContextMenu(
     { mouseContextMenu, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, ...props },

webapp/packages/core-ui/src/SideBarPanel/SideBarPanel.tsx

@@ -6,69 +6,55 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-blocks';
+import { s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks';
 
-import { BASE_TAB_STYLES } from '../Tabs/Tab/BASE_TAB_STYLES';
-import { UNDERLINE_TAB_STYLES } from '../Tabs/Tab/UnderlineTabStyles';
+import TabStyles from '../Tabs/Tab/Tab.m.css';
+import { TabUnderlineStyleRegistry } from '../Tabs/Tab/TabStyleRegistries';
 import { TabList } from '../Tabs/TabList';
+import TabPanelStyles from '../Tabs/TabPanel.m.css';
 import { TabPanelList } from '../Tabs/TabPanelList';
 import type { TabsContainer } from '../Tabs/TabsContainer/TabsContainer';
 import { TabsState } from '../Tabs/TabsState';
-
-const tabsStyles = css`
-  TabList {
-    display: flex;
-    position: relative;
-    flex-shrink: 0;
-    align-items: center;
-    overflow: auto;
-  }
-  TabPanel {
-    display: flex;
-    flex-direction: column;
-  }
-  tab-outer:only-child {
-    display: none;
-  }
-`;
-
-const formStyles = css`
-  box {
-    composes: theme-background-surface theme-text-on-surface from global;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-    overflow: auto;
-  }
-  content-box {
-    composes: theme-border-color-background from global;
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: auto;
-  }
-`;
+import styles from './shared/SideBarPanel.m.css';
+import SideBarPanelTab from './shared/SideBarPanelTab.m.css';
+import SideBarPanelTabPanel from './shared/SideBarPanelTabPanel.m.css';
 
 interface Props {
   container: TabsContainer;
 }
 
+const sideBarPanelRegistry: StyleRegistry = [
+  ...TabUnderlineStyleRegistry,
+  [
+    TabStyles,
+    {
+      mode: 'append',
+      styles: [SideBarPanelTab],
+    },
+  ],
+  [
+    TabPanelStyles,
+    {
+      mode: 'append',
+      styles: [SideBarPanelTabPanel],
+    },
+  ],
+];
+
 export const SideBarPanel = observer<Props>(function SideBarPanel({ container }) {
-  const tabStyle = [BASE_TAB_STYLES, tabsStyles, UNDERLINE_TAB_STYLES];
+  const style = useS(styles);
 
-  return styled(useStyles(tabStyle, formStyles))(
-    <TabsState container={container} lazy>
-      <box>
-        <TabList style={tabStyle} />
-        <content-box>
-          <TabPanelList style={tabStyle} />
-        </content-box>
-      </box>
-    </TabsState>,
+  return (
+    <SContext registry={sideBarPanelRegistry}>
+      <TabsState container={container} lazy>
+        <div className={s(style, { box: true })}>
+          <TabList className={s(style, { tabList: true })} />
+          <div className={s(style, { contentBox: true })}>
+            <TabPanelList />
+          </div>
+        </div>
+      </TabsState>
+    </SContext>
   );
 });

webapp/packages/core-ui/src/SideBarPanel/shared/SideBarPanel.m.css

@@ -0,0 +1,33 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.tabList {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  overflow: auto;
+}
+
+.box {
+  composes: theme-background-surface theme-text-on-surface from global;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+.contentBox {
+  composes: theme-border-color-background from global;
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+}

webapp/packages/core-ui/src/SideBarPanel/shared/SideBarPanelTab.m.css

@@ -0,0 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.tabOuter:only-child {
+  display: none;
+}

webapp/packages/core-ui/src/SideBarPanel/shared/SideBarPanelTabPanel.m.css

@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.tabPanel {
+  display: flex;
+  flex-direction: column;
+}