Merge branch 'master' of https://github.com/molstar/molstar into color-theme-typing

package.json

@@ -94,23 +94,23 @@
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/time": "^3.1.1",
-    "@graphql-codegen/typescript": "^2.4.7",
+    "@graphql-codegen/typescript": "^2.4.8",
     "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
-    "@graphql-codegen/typescript-graphql-request": "^4.4.2",
-    "@graphql-codegen/typescript-operations": "^2.3.4",
+    "@graphql-codegen/typescript-graphql-request": "^4.4.5",
+    "@graphql-codegen/typescript-operations": "^2.3.5",
     "@types/cors": "^2.8.12",
     "@types/gl": "^4.1.0",
     "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "benchmark": "^2.1.4",
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.1.0",
     "cpx2": "^4.2.0",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "extra-watch-webpack-plugin": "^1.0.3",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.1",
@@ -122,14 +122,14 @@
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sass": "^1.49.9",
+    "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
-    "simple-git": "^3.3.0",
+    "simple-git": "^3.5.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^27.1.4",
     "typescript": "^4.6.3",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
@@ -141,7 +141,7 @@
     "@types/node-fetch": "^2.6.1",
     "@types/swagger-ui-dist": "3.30.1",
     "argparse": "^2.0.1",
-    "body-parser": "^1.19.2",
+    "body-parser": "^1.20.0",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^4.17.3",
@@ -150,7 +150,7 @@
     "immutable": "^4.0.0",
     "node-fetch": "^2.6.7",
     "rxjs": "^7.5.5",
-    "swagger-ui-dist": "^4.6.2",
+    "swagger-ui-dist": "^4.10.3",
     "tslib": "^2.3.1",
     "util.promisify": "^1.1.1",
     "xhr2": "^0.2.1"

src/mol-plugin-ui/base.tsx

@@ -13,7 +13,7 @@ import { Icon, ArrowRightSvg, ArrowDropDownSvg } from './controls/icons';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginUIContext);
 
-export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P, S, SS> {
+export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P & { children?: any }, S, SS> {
     static contextType = PluginReactContext;
     readonly plugin: PluginUIContext;
 

src/mol-plugin-ui/controls/color.tsx

@@ -92,7 +92,7 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
     }
 }
 
-let _colors: React.ReactFragment | undefined = void 0;
+let _colors: any = void 0;
 export function ColorOptions() {
     if (_colors) return _colors;
     _colors = <>{DefaultColorSwatch.map(v =>

src/mol-plugin-ui/controls/common.tsx

@@ -21,7 +21,8 @@ export class ControlGroup extends React.Component<{
     onHeaderClick?: () => void,
     noTopMargin?: boolean,
     childrenClassName?: string,
-    maxHeight?: string
+    maxHeight?: string,
+    children?: any
 }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initialExpanded };
 
@@ -335,7 +336,7 @@ export class ToggleButton extends React.PureComponent<ToggleButtonProps> {
     }
 }
 
-export class ExpandGroup extends React.PureComponent<{ header: string, headerStyle?: React.CSSProperties, initiallyExpanded?: boolean, accent?: boolean, noOffset?: boolean, marginTop?: 0 | string, headerLeftMargin?: string }, { isExpanded: boolean }> {
+export class ExpandGroup extends React.PureComponent<{ children?: any, header: string, headerStyle?: React.CSSProperties, initiallyExpanded?: boolean, accent?: boolean, noOffset?: boolean, marginTop?: 0 | string, headerLeftMargin?: string }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initiallyExpanded };
 
     toggleExpanded = () => this.setState({ isExpanded: !this.state.isExpanded });

src/mol-plugin-ui/plugin.tsx

@@ -23,7 +23,7 @@ import { Asset } from '../mol-util/assets';
 import { BehaviorSubject } from 'rxjs';
 import { useBehavior } from './hooks/use-behavior';
 
-export class Plugin extends React.Component<{ plugin: PluginUIContext }, {}> {
+export class Plugin extends React.Component<{ plugin: PluginUIContext, children?: any }, {}> {
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
         return <div className={`msp-layout-region msp-layout-${kind}`}>
             <div className='msp-layout-static'>
@@ -39,7 +39,7 @@ export class Plugin extends React.Component<{ plugin: PluginUIContext }, {}> {
     }
 }
 
-export class PluginContextContainer extends React.Component<{ plugin: PluginUIContext }> {
+export class PluginContextContainer extends React.Component<{ plugin: PluginUIContext, children?: any }> {
     render() {
         return <PluginReactContext.Provider value={this.props.plugin}>
             <div className='msp-plugin'>

src/mol-plugin-ui/viewport/help.tsx

@@ -37,7 +37,7 @@ export class BindingsHelp extends React.PureComponent<{ bindings: { [k: string]:
     }
 }
 
-export class HelpText extends React.PureComponent {
+export class HelpText extends React.PureComponent<{ children?: any }> {
     render() {
         return <div className='msp-help-text'>
             <div>{this.props.children}</div>
@@ -45,7 +45,7 @@ export class HelpText extends React.PureComponent {
     }
 }
 
-export class HelpGroup extends React.PureComponent<{ header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
+export class HelpGroup extends React.PureComponent<{ children?: any, header: string, initiallyExpanded?: boolean }, { isExpanded: boolean }> {
     state = {
         header: this.props.header,
         isExpanded: !!this.props.initiallyExpanded