chore: update mobx to 6, use mobx-react-lite

2026-09-24 16:04:36 +08:00 · 2021-01-18 21:29:09 +03:00
parent 519f80362b
commit 3333d7da15
180 changed files with 900 additions and 1513 deletions
@@ -47,7 +47,7 @@ module.exports = {
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: false }],
    ["@babel/plugin-proposal-object-rest-spread", { loose: true, useBuiltIns: true }],
    'reshadow/babel',
    /*!prod &&*/[
@@ -7,7 +7,7 @@ const ESLintPlugin = require('eslint-webpack-plugin');
 // Temporary solution to remove wrong warning messages (it's was fixed https://github.com/microsoft/TypeScript/pull/35200 in typescript 3.8)
 class IgnoreNotFoundExportPlugin {
  apply(compiler) {
-    const messageRegExp = /export '.*'( \(reexported as '.*'\))? was not found in/
+    const messageRegExp = /export '.*'( \(imported as '.*'\))? was not found in/
    function doneHook(stats) {
      stats.compilation.warnings = stats.compilation.warnings.filter(function (warn) {
        if (messageRegExp.test(warn.message)) {
@@ -25,6 +25,15 @@ class IgnoreNotFoundExportPlugin {
 }

 module.exports = (env, argv) => {
+  process.env.NODE_ENV = argv.mode || 'development'
+
+  function getBaseStyleLoader() {
+    if(argv.mode !== 'production') {
+      return 'style-loader'
+    }
+    return MiniCssExtractPlugin.loader;
+  }
+
  function generateStyleLoaders(options = { hasModule: false }) {
    const moduleScope = options.hasModule ? 'local' : 'global';
    const modules = {
@@ -39,12 +48,7 @@ module.exports = (env, argv) => {
    ];

    return [
-      {
-        loader: MiniCssExtractPlugin.loader,
-        options: {
-          hot: argv.mode !== 'production',
-        },
-      },
+      getBaseStyleLoader(),
      'cache-loader',
      {
        loader: 'css-loader',
@@ -76,8 +80,6 @@ module.exports = (env, argv) => {
    ];
  }

-  process.env.NODE_ENV = argv.mode || 'development'
-
  var babelLoader = {
    loader: 'babel-loader',
    options: {
@@ -91,6 +93,11 @@ module.exports = (env, argv) => {
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
      modules: [resolve('node_modules'), resolve('../../node_modules')],
+      // fallback: { 
+      //   "crypto": require.resolve("crypto-browserify"),
+      //   "stream": require.resolve("stream-browserify"),
+      //   "readable-stream": require.resolve("readable-stream")
+      // },
      alias: {
        react: 'preact/compat',
        react$: 'preact/compat',
@@ -124,12 +131,7 @@ module.exports = (env, argv) => {
            {
              include: /node_modules/,
              use: [
-                {
-                  loader: MiniCssExtractPlugin.loader,
-                  options: {
-                    hot: argv.mode !== 'production',
-                  },
-                },
+                getBaseStyleLoader(),
                'css-loader',
                'sass-loader'
              ]
@@ -141,7 +143,7 @@ module.exports = (env, argv) => {
        },
      ]
    },
-    devtool: 'cheap-module-source-map',
+    devtool: 'source-map',
    plugins: [
      // new ESLintPlugin(options), //TODO: maybe later
      new ForkTsCheckerWebpackPlugin({
@@ -21,7 +21,6 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), {
    //   chunks: 'all',
    // },
    // minimize: false,
-    // namedModules: false,
    // concatenateModules: false,
  },
  plugins: [
@@ -38,7 +38,6 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), {
    usedExports: true,
    sideEffects: true,
    minimize: true,
-    namedModules: true,
    concatenateModules: true,
  },
  plugins: [
@@ -18,17 +18,18 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), {
    'webpack-dev-server/client?http://localhost:3100',
    './src/index.ts',
  ],
+  mode: 'development',
  devServer: {
    hot: true,
    proxy: {
      '/api': {
-        target: argv.server,
+        target: 'http://stage-aws.web.dbeaver.net:8095/',
      },
    },
  },
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
  optimization: {
-    namedModules: true,
+    moduleIds: "named"
  },
  plugins: [
    new CopyWebpackPlugin({
@@ -38,7 +39,7 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), {
      _VERSION_: JSON.stringify(package.version),
    }),
    new HtmlWebpackPlugin({ template: resolve('src/index.html.ejs'), inject: 'html', version: package.version }),
-    new webpack.HotModuleReplacementPlugin(), // enable HMR globally
+    // new webpack.HotModuleReplacementPlugin(),
    // new BundleAnalyzerPlugin()
  ],
 });
@@ -10,57 +10,58 @@
    "clean-dist": "rimraf lib/*"
  },
  "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
    "@csstools/postcss-sass": "^4.0.0",
+    "@types/md5": "^2.2.1",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.1.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-plugin-transform-typescript-metadata": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-typescript-metadata": "^0.3.1",
    "cache-loader": "^4.1.0",
-    "copy-webpack-plugin": "^6.1.0",
-    "css-loader": "^4.3.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.0.1",
    "declaration-bundler-webpack-plugin": "^1.0.3",
-    "eslint": "^7.8.1",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-airbnb-typescript": "^11.0.0",
+    "eslint": "^7.18.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-standard-with-typescript": "^19.0.1",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-import-helpers": "^1.1.0",
-    "eslint-plugin-jest": "^24.0.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.3",
-    "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-standard": "^5.0.0",
    "eslint-webpack-plugin": "^2.4.1",
    "fork-ts-checker-webpack-plugin": "^5.1.0",
    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.4.1",
-    "json5-loader": "^4.0.0",
+    "html-webpack-plugin": "^5.0.0-beta.5",
+    "json5-loader": "^4.0.1",
    "lerna": "^3.22.1",
-    "mini-css-extract-plugin": "^0.11.1",
-    "mobx": "^5.15.6",
-    "mobx-react": "^6.3.0",
-    "node-sass": "^4.14.1",
+    "md5": "^2.3.0",
+    "mini-css-extract-plugin": "^1.3.4",
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
+    "node-sass": "^5.0.0",
    "peer-deps-externals-webpack-plugin": "^1.0.4",
    "postcss-discard-comments": "^4.0.2",
-    "postcss-loader": "^4.0.1",
+    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^2.1.1",
-    "preact": "^10.5.9",
+    "preact": "^10.5.10",
    "preact-render-to-string": "^5.1.12",
    "preact-ssr-prepass": "^1.1.3",
    "preact-jsx-runtime": "^1.2.0",
@@ -68,17 +69,17 @@
    "react-dom": "^16.13.1",
    "reakit": "^1.3.4",
    "reflect-metadata": "^0.1.13",
-    "sass-loader": "^8.0.0",
-    "source-map-loader": "^1.1.0",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.3",
-    "typescript": "^4.0.2",
+    "sass-loader": "^10.1.1",
+    "source-map-loader": "^2.0.0",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.14",
+    "typescript": "^4.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.1.4"
+    "webpack": "^5.15.0",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
  },
  "dependencies": {}
 }
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useLayoutEffect, useRef } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { useService } from '@cloudbeaver/core-di';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { useService } from '@cloudbeaver/core-di';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';

 import { useService } from '@cloudbeaver/core-di';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';

 import { useService } from '@cloudbeaver/core-di';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { Button } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useRef, useLayoutEffect } from 'react';
 import styled, { css } from 'reshadow';

@@ -7,7 +7,7 @@
 */

 import { computed } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { useFocus } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { TreeNode } from '@cloudbeaver/core-blocks';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import styled, { css } from 'reshadow';

@@ -7,7 +7,7 @@
 */

 import { computed } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext, useMemo } from 'react';
 import styled from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { useNode } from '../../shared/NodesManager/useNode';
 import { NavigationNode } from './NavigationNode';
@@ -7,7 +7,7 @@
 */

 import { computed } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';

 import { useController } from '@cloudbeaver/core-di';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { AppLogo } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { useService } from '@cloudbeaver/core-di';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { Icon } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import type { ButtonHTMLAttributes } from 'react';
 import { Button } from 'reakit/Button';
 import styled, { css } from 'reshadow';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import type { ButtonHTMLAttributes } from 'react';
 import styled from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useState, useCallback, ChangeEvent, useRef, useEffect
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useEffect, useRef, useCallback, ChangeEvent
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import type { TabElementProps } from '@cloudbeaver/core-blocks';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import type { Style } from '@cloudbeaver/core-theming';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,11 +6,10 @@
 * you may not use this file except in compliance with the License.
 */

-import type { ReactElement } from 'react';
-
+import type { TabPanelElement } from '@cloudbeaver/core-blocks';
 import { AppContext, IServiceInjector } from '@cloudbeaver/core-di';

-export function TabContext(injector: IServiceInjector, Panel: () => ReactElement | null) {
+export function TabContext(injector: IServiceInjector, Panel: TabPanelElement) {
  return (
    <AppContext app={injector}>
      <Panel />
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { Icon } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { CommonDialogWrapper, DialogComponent, DialogComponentProps } from '@cloudbeaver/core-dialogs';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { Button } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { createHash } from 'crypto';
+import md5 from 'md5';

 import { injectable } from '@cloudbeaver/core-di';

@@ -29,9 +29,7 @@ export class AuthProviderService {
    const credentialsProcessed = { ...credentials };
    for (const parameter of provider.credentialParameters) {
      if (parameter.encryption === 'hash' && parameter.id in credentialsProcessed) {
-        const md5Hash = createHash('md5')
-          .update(credentialsProcessed[parameter.id])
-          .digest('hex')
+        const md5Hash = md5(credentialsProcessed[parameter.id])
          .toUpperCase();
        credentialsProcessed[parameter.id] = md5Hash;
      }
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useLayoutEffect, useCallback, useState, useRef, useContext
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext, useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useCallback, useMemo, useState, useContext
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { css, use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { css, use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import styled from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import type { PlaceholderContainer } from './PlaceholderContainer';

@@ -7,7 +7,7 @@
 */

 import { computed } from 'mobx';
-import { observer, useLocalStore } from 'mobx-react';
+import { observer, useLocalStore } from 'mobx-react-lite';
 import { useCallback, useMemo } from 'react';
 import styled from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useCallback, useRef, useState, useLayoutEffect
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect } from 'react';
 import {
  useMenuState,
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { Button } from '@cloudbeaver/core-blocks';
 import type { INotificationExtraProps, NotificationComponent } from '@cloudbeaver/core-events';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { INotificationProcessExtraProps, ENotificationType, NotificationComponent } from '@cloudbeaver/core-events';
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { Button } from '@cloudbeaver/core-blocks';
 import type { ENotificationType } from '@cloudbeaver/core-events';
@@ -7,7 +7,7 @@
 */

 import { observable, computed } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useState, useCallback, useMemo } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import {
  useContext, useCallback, useMemo, Children
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext, useCallback } from 'react';
 import styled, { use } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext, useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { use } from 'reshadow';

 import { useStyles } from '@cloudbeaver/core-theming';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import type { ReactElement } from 'react';
+export type TabPanelElement = React.FunctionComponent<any> | (() => React.ReactElement | null);

 export interface ITab {
  tabId: string;
@@ -16,7 +16,7 @@ export interface ITab {
  onClose?: () => void;
  onActivate: () => void;

-  panel: () => ReactElement | null;
+  panel: TabPanelElement;
 }

 export interface ITabContainer {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { useStyles, Style } from '@cloudbeaver/core-theming';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { useStyles, Style } from '@cloudbeaver/core-theming';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { useStyles, Style } from '@cloudbeaver/core-theming';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { useStyles, Style } from '@cloudbeaver/core-theming';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { Loader, PropertiesTable, useTab } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';

 import { FormGroup, InputField } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { TextPlaceholder, useTab, ObjectPropertyInfoForm, FormBox, FormBoxElement, FormGroup, InputGroup, Loader, useTabState, ExceptionMessage } from '@cloudbeaver/core-blocks';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { TabTitle, Tab, TabContainerTabComponent } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';

 import { AdministrationTools, AdministrationItemContentProps, ADMINISTRATION_TOOLS_STYLES } from '@cloudbeaver/core-administration';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { StaticImage } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { StaticImage } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useContext, useCallback, useRef, useEffect } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -7,7 +7,7 @@
 */

 import { computed } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';

 import { Loader } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useState, useMemo } from 'react';

 import { ItemListSearch, ItemList } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { useService } from '@cloudbeaver/core-di';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import { Button } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';

 import {
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useRef } from 'react';
 import {
  Dialog,
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { useObserver } from 'mobx-react';
+import { useObserver } from 'mobx-react-lite';
 import styled from 'reshadow';

 import { Icon } from '@cloudbeaver/core-blocks';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer, useObserver } from 'mobx-react';
+import { observer, useObserver } from 'mobx-react-lite';
 import {
  forwardRef, Ref, useCallback
 } from 'react';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import type { TLocalizationToken } from './TLocalizationToken';
 import { useTranslate } from './useTranslate';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { Portal } from 'reakit/Portal';
 import styled, { css } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo } from 'react';
 import styled from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { Snackbar } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
@@ -56,7 +56,7 @@
      @include stripes-background($mdc-theme-secondary);
    }

-    &[|disabled] {
+    &[use|disabled] {
      opacity: .85;
    }
  }
@@ -122,7 +122,7 @@
      height: 16px;
      padding: 0;

-      &[|expanded] {
+      &[use|expanded] {
        transform: rotate(180deg);
      }
    }
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { useObserver } from 'mobx-react';
+import { useObserver } from 'mobx-react-lite';
 import { useMemo, useRef, useState } from 'react';
 import { create } from 'reshadow';

@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled, { use, css } from 'reshadow';

 import { ConfigurationWizardService } from '@cloudbeaver/core-administration';
@@ -6,7 +6,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';

 import type { AdministrationItemDrawerProps } from '@cloudbeaver/core-administration';
@@ -7,7 +7,7 @@
 * you may not use this file except in compliance with the License.
 */

-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';

 import { FormGroup, InputGroup, InputField } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
--- a/Show More
+++ b/Show More