@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/message/message.css

@@ -9,7 +9,8 @@
 
   max-width: calc(var(--ring-unit) * 40);
 
-  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 5);
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2)
+    calc(var(--ring-unit) * 5);
 
   text-align: left;
 

package/components/message/message.js

@@ -10,8 +10,8 @@ import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
 import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
 /**
-  * @name Message
-  */
+ * @name Message
+ */
 const UNIT = 8;
 const TAIL_SIZE = 11;
 const getTailOffsets = (offset) => ({
@@ -19,14 +19,14 @@ const getTailOffsets = (offset) => ({
     [Directions.BOTTOM_LEFT]: {
         top: 0,
         right: offset - UNIT - TAIL_SIZE,
-        transform: 'rotate(135deg)'
+        transform: 'rotate(135deg)',
     },
     [Directions.BOTTOM_CENTER]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
     [Directions.TOP_RIGHT]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
     [Directions.TOP_LEFT]: {
         bottom: -TAIL_SIZE,
         right: offset + UNIT - TAIL_SIZE,
-        transform: 'rotate(-45deg)'
+        transform: 'rotate(-45deg)',
     },
     [Directions.TOP_CENTER]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
     [Directions.RIGHT_TOP]: { bottom: offset + UNIT - TAIL_SIZE, left: 0, transform: 'rotate(45deg)' },
@@ -35,10 +35,10 @@ const getTailOffsets = (offset) => ({
     [Directions.LEFT_TOP]: {
         bottom: offset - UNIT - TAIL_SIZE,
         right: -TAIL_SIZE,
-        transform: 'rotate(-135deg)'
+        transform: 'rotate(-135deg)',
     },
     [Directions.LEFT_BOTTOM]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
-    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' }
+    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
 });
 /**
  * Displays a popup containing a message.
@@ -47,12 +47,20 @@ export default class Message extends Component {
     static defaultProps = {
         icon: gift,
         directions: [
-            Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
-            Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
-            Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
-            Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
+            Directions.TOP_RIGHT,
+            Directions.TOP_LEFT,
+            Directions.TOP_CENTER,
+            Directions.BOTTOM_RIGHT,
+            Directions.BOTTOM_LEFT,
+            Directions.BOTTOM_CENTER,
+            Directions.RIGHT_TOP,
+            Directions.RIGHT_BOTTOM,
+            Directions.RIGHT_CENTER,
+            Directions.LEFT_TOP,
+            Directions.LEFT_BOTTOM,
+            Directions.LEFT_CENTER,
         ],
-        theme: Theme.DARK
+        theme: Theme.DARK,
     };
     state = {};
     static Directions = Directions;
@@ -75,33 +83,34 @@ export default class Message extends Component {
             return DEFAULT_OFFSET;
         }
         const offset = Math.floor(anchor.offsetWidth / 2);
-        const isOpenedToRight = this.state.direction != null &&
-            [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
+        const isOpenedToRight = this.state.direction != null && [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
         if (popupProps?.left && isOpenedToRight) {
             return offset - popupProps?.left;
         }
         return offset;
     }
     render() {
-        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme } = this.props;
+        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme, } = this.props;
         const classes = classNames(styles.message, className, {
-            [darkStyles.dark]: theme === Theme.DARK
+            [darkStyles.dark]: theme === Theme.DARK,
         });
         const tailClasses = classNames(styles.tail, tailClassName);
-        const popupDirections = this.props.direction
-            ? [this.props.direction]
-            : this.props.directions;
+        const popupDirections = this.props.direction ? [this.props.direction] : this.props.directions;
         const { direction } = this.state;
         return (<I18nContext.Consumer>
         {({ translate }) => (<WithThemeClasses theme={theme}>
             {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
                 <ThemeProvider theme={theme} passToPopups>
-                  {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+                  {direction && <div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>}
 
                   {icon && <Icon className={styles.icon} glyph={icon}/>}
-                  {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
+                  {title && (<h1 data-test="rgMessageTitle" className={styles.title}>
+                      {title}
+                    </h1>)}
                   {children && <div className={styles.description}>{children}</div>}
-                  {(onClose || buttonProps) && (<Button className={styles.gotIt} onClick={onClose} primary {...buttonProps}>{translations?.gotIt ?? translate('gotIt')}</Button>)}
+                  {(onClose || buttonProps) && (<Button className={styles.gotIt} onClick={onClose} primary {...buttonProps}>
+                      {translations?.gotIt ?? translate('gotIt')}
+                    </Button>)}
                   {onDismiss && (<Button onClick={onDismiss} text>
                       {translations?.dismiss ?? translate('dismiss')}
                     </Button>)}

package/components/old-browsers-message/old-browsers-message.js

@@ -15,10 +15,10 @@ function changeSmileClickListener(event) {
     const target = (event.target || event.srcElement);
     smileChanges++;
     function rand(min, max) {
-        return Math.round((Math.random() * (max - min))) + min;
+        return Math.round(Math.random() * (max - min)) + min;
     }
     function getRandomEye() {
-        return eyes[rand(0, (eyes.length - 1))];
+        return eyes[rand(0, eyes.length - 1)];
     }
     function getRandomSmile() {
         if (smileChanges >= MAX_SMILE_CHANGES) {

package/components/old-browsers-message/white-list.js

@@ -9,15 +9,14 @@ if (!SUPPORTED_BROWSERS) {
 }
 const SUPPORTED = SUPPORTED_BROWSERS || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
-export const WHITE_LIST = SUPPORTED.
-    reduce((acc, item) => {
+export const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
     const [, browserName, version] = item.match(/(\S+)\s(\S+)/) ?? [];
     if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
         return acc;
     }
     return {
         ...acc,
-        [browserName]: parseInt(version, 10)
+        [browserName]: parseInt(version, 10),
     };
 }, {});
 export function isBrowserInWhiteList() {

package/components/pager/pager.js

@@ -28,7 +28,7 @@ export default class Pager extends PureComponent {
         loader: false,
         loaderNavigation: false,
         onPageSizeChange: () => { },
-        onLoadPage: () => { }
+        onLoadPage: () => { },
     };
     static contextType = I18nContext;
     getSelectOptions() {
@@ -36,7 +36,7 @@ export default class Pager extends PureComponent {
         const { translate } = this.context;
         const data = pageSizes.map(size => ({
             key: size,
-            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`
+            label: `${size} ${this.props.translations?.perPage ?? translate('perPage')}`,
         }));
         const selected = data.find(it => it.key === pageSize);
         return { selected, data };
@@ -93,18 +93,16 @@ export default class Pager extends PureComponent {
     }
     getPageSizeSelector() {
         const selectOptions = this.getSelectOptions();
-        return !this.props.disablePageSizeSelector &&
-            (<div data-test="ring-pager-page-size-selector" className={style.pageSize}>
+        return (!this.props.disablePageSizeSelector && (<div data-test="ring-pager-page-size-selector" className={style.pageSize}>
           <Select data={selectOptions.data} selected={selectOptions.selected} onSelect={this.handlePageSizeChange} type={Select.Type.INLINE} disabled={this.props.loader}/>
-        </div>);
+        </div>));
     }
     getPagerLinks() {
         const { translate } = this.context;
         const prevLinkAvailable = this.props.currentPage !== 1;
-        const nextLinkAvailable = this.props.openTotal ||
-            this.props.currentPage !== this.getTotalPages();
-        const nextIcon = (<Icon glyph={chevronRightIcon} key="icon"/>);
-        const prevIcon = (<Icon glyph={chevronLeftIcon} key="icon"/>);
+        const nextLinkAvailable = this.props.openTotal || this.props.currentPage !== this.getTotalPages();
+        const nextIcon = <Icon glyph={chevronRightIcon} key="icon"/>;
+        const prevIcon = <Icon glyph={chevronLeftIcon} key="icon"/>;
         const prevText = this.props.translations?.previousPage ?? translate('previousPage');
         const nextText = this.props.translations?.nextPage ?? translate('nextPage');
         const nextLinkContent = [<span key="text">{nextText}</span>, nextIcon];
@@ -113,20 +111,22 @@ export default class Pager extends PureComponent {
         const nextLinkHref = this.generateHref(this.props.currentPage + 1);
         const disabledLinkClasses = classNames({
             [style.link]: true,
-            [style.linkDisabled]: true
+            [style.linkDisabled]: true,
         });
         return (<div className={style.links}>
-        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
-                ? (<Link href={prevLinkHref} className={style.link} {...this.getClickProps(this.handlePrevClick)}>{prevLinkContent}</Link>)
-                : (<span className={disabledLinkClasses}>
-              {prevIcon}<span key="text">{prevText}</span>
-            </span>)}
+        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (<Link href={prevLinkHref} className={style.link} {...this.getClickProps(this.handlePrevClick)}>
+            {prevLinkContent}
+          </Link>) : (<span className={disabledLinkClasses}>
+            {prevIcon}
+            <span key="text">{prevText}</span>
+          </span>)}
 
-        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
-                ? (<Link href={nextLinkHref} className={style.link} {...this.getClickProps(this.handleNextClick)}>{nextLinkContent}</Link>)
-                : (<span className={disabledLinkClasses}>
-              <span key="text">{nextText}</span>{nextIcon}
-            </span>)}
+        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation) ? (<Link href={nextLinkHref} className={style.link} {...this.getClickProps(this.handleNextClick)}>
+            {nextLinkContent}
+          </Link>) : (<span className={disabledLinkClasses}>
+            <span key="text">{nextText}</span>
+            {nextIcon}
+          </span>)}
       </div>);
     }
     generateHref(page) {
@@ -168,16 +168,14 @@ export default class Pager extends PureComponent {
         for (let i = start; i <= end; i++) {
             buttons.push(this.getButton(i, i, i, i === currentPage));
         }
-        const lastPageButtonAvailable = !this.props.disableLastPageButton &&
-            (end < totalPages && !this.props.openTotal) ||
+        const lastPageButtonAvailable = (!this.props.disableLastPageButton && end < totalPages && !this.props.openTotal) ||
             (this.props.openTotal && this.props.canLoadLastPageWithOpenTotal);
         return (<div>
         {this.getPagerLinks()}
 
         <div className={style.actions}>
           <ButtonToolbar>
-            {start > 1 &&
-                this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
+            {start > 1 && this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}
 
             <ButtonGroup>
               {start > 1 && this.getButton(start - 1, '...')}
@@ -186,10 +184,13 @@ export default class Pager extends PureComponent {
 
               {end < totalPages && this.getButton(end + 1, '...')}
 
-              {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>{'...'}</Button>)}
+              {end === totalPages && this.props.openTotal && (<Button href={this.generateHref(end + 1)} disabled={this.props.loader} {...this.getClickProps(this.handleLoadMore(end + 1))}>
+                  {'...'}
+                </Button>)}
             </ButtonGroup>
 
-            {lastPageButtonAvailable && this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
+            {lastPageButtonAvailable &&
+                this.getButton(this.props.openTotal ? -1 : totalPages, this.props.translations?.lastPage ?? translate('lastPage'))}
           </ButtonToolbar>
 
           {this.getPageSizeSelector()}
@@ -199,9 +200,7 @@ export default class Pager extends PureComponent {
     render() {
         const classes = classNames(style.pager, this.props.className);
         return (<div data-test="ring-pager" className={classes}>
-        {this.getTotalPages() > 1 || this.props.openTotal
-                ? this.getPagerContent()
-                : this.getPageSizeSelector()}
+        {this.getTotalPages() > 1 || this.props.openTotal ? this.getPagerContent() : this.getPageSizeSelector()}
       </div>);
     }
 }

package/components/permissions/permissions.js

@@ -37,9 +37,7 @@ export default class Permissions {
     _permissionCache;
     constructor(auth, config = {}) {
         this.query = Permissions.getPermissionQuery(config.services);
-        this.namesConverter = config.prefix
-            ? Permissions.getDefaultNamesConverter(config.prefix)
-            : config.namesConverter;
+        this.namesConverter = config.prefix ? Permissions.getDefaultNamesConverter(config.prefix) : config.namesConverter;
         if (!auth) {
             throw new Error('Parameter auth is required');
         }
@@ -49,12 +47,12 @@ export default class Permissions {
         this._subscribed = false;
         this._permissionCache = new PermissionCache(null, this.namesConverter);
     }
-    _defaultDatasource = (query) => (this._auth.http.get(Permissions.API_PERMISSION_CACHE_PATH, {
+    _defaultDatasource = (query) => this._auth.http.get(Permissions.API_PERMISSION_CACHE_PATH, {
         query: {
             fields: 'permission/key,global,projects(id)',
-            query
-        }
-    }));
+            query,
+        },
+    });
     /**
      * Returns function, which cuts off prefix from server-side permission name
      *
@@ -111,11 +109,9 @@ export default class Permissions {
             return cache;
         }
         if (hasCacheControl('NO_STORE', options)) {
-            return this._loadPermissions().
-                then(cachedPermissions => new PermissionCache(cachedPermissions, this.namesConverter));
+            return this._loadPermissions().then(cachedPermissions => new PermissionCache(cachedPermissions, this.namesConverter));
         }
-        const permissions = this._loadPermissions().
-            then(cachedPermissions => this.set(cachedPermissions));
+        const permissions = this._loadPermissions().then(cachedPermissions => this.set(cachedPermissions));
         this._setCache(permissions);
         return permissions;
         function hasCacheControl(value, _options) {
@@ -168,8 +164,7 @@ export default class Permissions {
      */
     bindVariable(object, propertyName, permissions, projectId) {
         object[propertyName] = false;
-        return this.check(permissions, projectId).
-            then(permitted => {
+        return this.check(permissions, projectId).then(permitted => {
             object[propertyName] = permitted;
             return permitted;
         });

package/components/permissions/permissions__cache.js

@@ -43,7 +43,7 @@ export default class PermissionCache {
             if (key) {
                 _permissionCache[key] = {
                     global: permission.global,
-                    projectIdSet: this.constructor._toProjectIdSet(permission.projects)
+                    projectIdSet: this.constructor._toProjectIdSet(permission.projects),
                 };
             }
             return _permissionCache;
@@ -139,7 +139,7 @@ export default class PermissionCache {
         let result = this.and(lexems, projectId);
         while (lexems.length > 0 && lexems[0] !== ')') {
             if (lexems.shift() !== '|') {
-                throw new Error('Operator \'|\' was expected');
+                throw new Error("Operator '|' was expected");
             }
             result = this.and(lexems, projectId) || result;
         }
@@ -173,7 +173,7 @@ export default class PermissionCache {
             lexems.shift();
         }
         const result = this.term(lexems, projectId);
-        return (notCounter % 2 === 0) ? result : !result;
+        return notCounter % 2 === 0 ? result : !result;
     }
     /**
      * @param {string[]} lexems
@@ -191,7 +191,7 @@ export default class PermissionCache {
             result = this.or(lexems, projectId);
             // Expect ')'
             if (lexems.shift() !== ')') {
-                throw new Error('Operator \')\' was expected');
+                throw new Error("Operator ')' was expected");
             }
         }
         else {
@@ -207,8 +207,7 @@ export default class PermissionCache {
     testPermission(permissionName, projectId) {
         const permissionCache = this.permissionCache;
         const convertedName = this.namesConverter(permissionName);
-        const cachedPermission = permissionCache?.[permissionName] ||
-            convertedName && permissionCache?.[convertedName];
+        const cachedPermission = permissionCache?.[permissionName] || (convertedName && permissionCache?.[convertedName]);
         // Hasn't the permission in any project
         if (!cachedPermission) {
             return false;
@@ -219,7 +218,7 @@ export default class PermissionCache {
         }
         if (projectId) {
             // if projectId is specified check that the permission is given in the project
-            return cachedPermission.projectIdSet != null && (projectId in cachedPermission.projectIdSet);
+            return cachedPermission.projectIdSet != null && projectId in cachedPermission.projectIdSet;
         }
         else {
             return true;

package/components/popup/popup.consts.js

@@ -18,8 +18,14 @@ export var Directions;
  * @type {Array.<string>}
  */
 export const DEFAULT_DIRECTIONS = [
-    Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.TOP_LEFT, Directions.TOP_RIGHT,
-    Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.LEFT_TOP, Directions.LEFT_BOTTOM
+    Directions.BOTTOM_RIGHT,
+    Directions.BOTTOM_LEFT,
+    Directions.TOP_LEFT,
+    Directions.TOP_RIGHT,
+    Directions.RIGHT_TOP,
+    Directions.RIGHT_BOTTOM,
+    Directions.LEFT_TOP,
+    Directions.LEFT_BOTTOM,
 ];
 /**
  * @enum {number}

package/components/popup/popup.js

@@ -20,7 +20,7 @@ const isPossibleClientSideNavigation = (event) => {
     const target = event.target;
     const link = target.closest('a');
     // Taken from https://github.com/nanostores/router/blob/80a333db4cf0789fda21a02715ebabca15192642/index.js#L58-L69
-    return link &&
+    return (link &&
         event.button === 0 && // Left mouse button
         link.target !== '_blank' && // Not for new tab
         link.origin === location.origin && // Not external link
@@ -31,14 +31,14 @@ const isPossibleClientSideNavigation = (event) => {
         !event.metaKey && // Not open in new tab by user
         !event.ctrlKey && // Not open in new tab by user
         !event.shiftKey && // Not open in new window by user
-        !event.defaultPrevented;
+        !event.defaultPrevented);
 };
 const stop = (event) => {
     if (!isPossibleClientSideNavigation(event)) {
         event.stopPropagation();
     }
 };
-export const getPopupContainer = (target) => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
+export const getPopupContainer = (target) => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
  * @name Popup
@@ -64,10 +64,10 @@ export default class Popup extends PureComponent {
         attached: false,
         trapFocus: false,
         autoFocusFirst: false,
-        legacy: false
+        legacy: false,
     };
     state = {
-        display: Display.SHOWING
+        display: Display.SHOWING,
     };
     componentDidMount() {
         if (!this.props.client) {
@@ -109,15 +109,13 @@ export default class Popup extends PureComponent {
     uid = getUID('popup-');
     calculateDisplay = (prevState) => ({
         ...prevState,
-        display: this.props.hidden
-            ? Display.SHOWING
-            : Display.SHOWN
+        display: this.props.hidden ? Display.SHOWING : Display.SHOWN,
     });
     static PopupProps = {
         Directions,
         Dimension,
         MinWidth,
-        MaxHeight
+        MaxHeight,
     };
     portalRef = (el) => {
         this.node = el;
@@ -152,7 +150,7 @@ export default class Popup extends PureComponent {
             left,
             offset,
             maxHeight,
-            minWidth
+            minWidth,
         });
     }
     _updateDirection = (newDirection) => {
@@ -239,11 +237,9 @@ export default class Popup extends PureComponent {
      * @private
      */
     _onDocumentClick = (evt) => {
-        if (this.container && evt.target instanceof Node && this.container.contains(evt.target) ||
+        if ((this.container && evt.target instanceof Node && this.container.contains(evt.target)) ||
             !this._listenersEnabled ||
-            (this.props.dontCloseOnAnchorClick &&
-                evt.target instanceof Node &&
-                this._getAnchor()?.contains(evt.target))) {
+            (this.props.dontCloseOnAnchorClick && evt.target instanceof Node && this._getAnchor()?.contains(evt.target))) {
             return;
         }
         this.props.onOutsideClick(evt);
@@ -251,26 +247,23 @@ export default class Popup extends PureComponent {
     };
     getInternalContent() {
         const { trapFocus, autoFocusFirst, children } = this.props;
-        return trapFocus
-            ? (<TabTrap autoFocusFirst={autoFocusFirst} focusBackOnExit>
-          {children}
-        </TabTrap>)
-            : children;
+        return trapFocus ? (<TabTrap autoFocusFirst={autoFocusFirst} focusBackOnExit>
+        {children}
+      </TabTrap>) : (children);
     }
     shortcutsScope = this.uid;
     shortcutsMap = {
-        esc: this._onEscPress
+        esc: this._onEscPress,
     };
     render() {
-        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest } = this.props;
+        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, } = this.props;
         const showing = this.state.display === Display.SHOWING;
         const classes = classNames(className, styles.popup, {
             [styles.attached]: attached,
             [styles.hidden]: hidden,
-            [styles.showing]: showing
+            [styles.showing]: showing,
         });
-        const direction = (this.state.direction || '').
-            toLowerCase().replace(/[_]/g, '-');
+        const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
         return (<PopupTargetContext.Consumer>
         {value => {
                 this.ringPopupTarget = value;
@@ -279,16 +272,17 @@ export default class Popup extends PureComponent {
                 onClick={stop} 
                 // This handler only blocks bubbling through React portal
                 role="presentation" ref={this.portalRef}>
-              {this.shouldUseShortcuts() &&
-                        (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+              {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
 
-              {(client || this.state.client) && (keepMounted || !hidden) && createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
-                  <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
-                    // mouse handlers are used to track clicking on inner elements
-                    role="presentation">
-                    {this.getInternalContent()}
-                  </div>
-                </PopupTarget>, this.getContainer() || document.body)}
+              {(client || this.state.client) &&
+                        (keepMounted || !hidden) &&
+                        createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
+                    <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
+                        // mouse handlers are used to track clicking on inner elements
+                        role="presentation">
+                      {this.getInternalContent()}
+                    </div>
+                  </PopupTarget>, this.getContainer() || document.body)}
             </span>);
             }}
       </PopupTargetContext.Consumer>);

package/components/popup/popup.target.js

@@ -2,9 +2,9 @@ import { createContext, forwardRef } from 'react';
 export const PopupTargetContext = createContext(undefined);
 export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {
     const target = (<div {...restProps} data-portaltarget={id} ref={ref}>
-        {typeof children !== 'function' && children}
-      </div>);
+      {typeof children !== 'function' && children}
+    </div>);
     return (<PopupTargetContext.Provider value={id}>
-        {typeof children === 'function' ? children(target) : target}
-      </PopupTargetContext.Provider>);
+      {typeof children === 'function' ? children(target) : target}
+    </PopupTargetContext.Provider>);
 });