Merge 6.x into master (#7657)

* RG-2293 Get rid of side effects in setState updater function of Select component (#7574)

* 6.0.50

* RG-2462 switch sidebar and main background in dark theme (#7565)

(cherry picked from commit 647dd76)

* 6.0.51

* Support passing theme down via React Context (#7592)

* 6.0.52

* RG-2420 chore: undeprecate "Badge" in 6.x version

* Chore: export GLOBAL_DARK_CLASS_NAME constant [publish]

* 6.0.53

* JT-83359 Enable back controlling shortcuts by having '.ring-js-shortcuts' on parent, removed in 473d554 (#7637)

* RG-2473 don't unmount react root because it can be reused later (#7656)

minor: log auth error

* Revert "RG-2420 chore: undeprecate "Badge" in 6.x version"

This reverts commit 580369f.

---------

Co-authored-by: Veniamin Krol <153412+vkrol@users.noreply.github.com>
Co-authored-by: JetBrains Ring UI Automation <npmjs-buildserver@jetbrains.com>

Author: 3 people

.storybook/preview.ts

@@ -6,7 +6,7 @@ import URLSearchParams from '@ungap/url-search-params';
 import {Component} from '@storybook/addon-docs';
 import {Parameters} from '@storybook/react';
 
-import Theme, {applyTheme} from '../src/global/theme';
+import Theme, {applyTheme, GLOBAL_DARK_CLASS_NAME} from '../src/global/theme';
 
 import styles from './preview.css';
 import strictModeDecorator from './strict-mode-decorator';
@@ -47,7 +47,7 @@ export const parameters = {
     default: 'Light',
     list: [
       {name: 'Light', color: '#FFF'},
-      {name: 'Dark', class: 'ring-ui-theme-dark', color: '#23272b'}
+      {name: 'Dark', class: GLOBAL_DARK_CLASS_NAME, color: '#23272b'}
     ]
   }
 };

src/global/theme.stories.tsx

@@ -5,7 +5,7 @@ import Text from '../text/text';
 
 import Select from '../select/select';
 
-import Theme, {ThemeProvider} from './theme';
+import Theme, {GLOBAL_DARK_CLASS_NAME, ThemeProvider} from './theme';
 
 export default {
   title: 'Components/Theme Provider'
@@ -29,7 +29,7 @@ const ThemedWrapper: React.FC<{children: React.ReactNode}> = ({children}) => (
 export const basic = () => {
   const ThemeExample: React.FC = () => (
     <div>
-      <div className="ring-ui-theme-dark">
+      <div className={GLOBAL_DARK_CLASS_NAME}>
         <ThemedWrapper>
           <Text>This is dark (via global css class)</Text>
         </ThemedWrapper>

src/global/theme.tsx

@@ -29,7 +29,7 @@ enum Theme {
 
 export const ThemeContext = createContext<{theme: Theme.LIGHT | Theme.DARK}>({theme: Theme.LIGHT});
 
-const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
+export const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
 
 const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 

src/header/smart-profile.tsx

@@ -46,7 +46,8 @@ export default class SmartProfile extends PureComponent<SmartProfileProps, Smart
     try {
       await this.props.auth.login();
     } catch (err) {
-      // do nothing
+      // eslint-disable-next-line no-console
+      console.debug('Profile login errored', err);
     } finally {
       this.setState({loading: false});
     }

src/login-dialog/service.tsx

@@ -28,6 +28,9 @@ export default function showAuthDialog(props: LoginDialogAttrs = {onCancel: noop
   });
 
   return () => {
-    reactRoot.unmount();
+    renderLoginDialog({
+      ...props,
+      show: false
+    });
   };
 }

src/shortcuts/core.ts

@@ -218,9 +218,11 @@ class Shortcuts {
       !(element instanceof HTMLElement) ||
       key == null ||
       element.matches(this.ALLOW_SHORTCUTS_SELECTOR) ||
-      (element.dataset.enabledShortcuts != null
-        ? element.dataset.enabledShortcuts.split(',').includes(key)
-        : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)
+      element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null ||
+      (
+        element.dataset.enabledShortcuts != null &&
+        element.dataset.enabledShortcuts.split(',').includes(key)
+      )
     ) {
       return false;
     }