@jetbrains/ring-ui 4.0.39 → 4.0.43

package/components/avatar/avatar.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 .avatar {
+  display: inline-block;
   object-fit: cover;
   object-position: center;
 

package/components/avatar/avatar.examples.js

@@ -21,7 +21,8 @@ export const avatar = () => {
         {Object.keys(Size).map(size => (
           <div className="avatar-demo" key={size}>
             <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} url={avatarDataUri} round/>
+            <Avatar size={Size[size]} username="Jet Brains"/>
+            <Avatar size={Size[size]} username="Jet Brains" round/>
             <Avatar size={Size[size]}/>
           </div>
         ))}
@@ -38,7 +39,7 @@ avatar.parameters = {
   .avatar-demo {
     display: flex;
     justify-content: space-between;
-    width: 200px;
+    width: 240px;
     margin-bottom: 16px;
   }
 </style>`

package/components/avatar/avatar.js

@@ -6,6 +6,7 @@ import {encodeURL, isDataURI, parseQueryString} from '../global/url';
 import {getPixelRatio} from '../global/dom';
 
 import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
 
 /**
  * @name Avatar
@@ -30,7 +31,8 @@ export default class Avatar extends PureComponent {
     url: PropTypes.string,
     round: PropTypes.bool,
     subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number
+    subavatarSize: PropTypes.number,
+    username: PropTypes.string
   };
 
   static defaultProps = {
@@ -53,7 +55,17 @@ export default class Avatar extends PureComponent {
   };
 
   render() {
-    const {size, url, dpr, style, round, subavatar, subavatarSize, ...restProps} = this.props;
+    const {
+      size,
+      url,
+      dpr,
+      style,
+      round,
+      subavatar,
+      subavatarSize,
+      username,
+      ...restProps
+    } = this.props;
     const sizeString = `${size}px`;
     const subavatarSizeString = `${subavatarSize}px`;
     const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
@@ -76,9 +88,19 @@ export default class Avatar extends PureComponent {
         <span
           {...restProps}
           data-test="avatar"
-          className={classNames(styles.avatar, styles.empty, this.props.className)}
+          className={
+            classNames(styles.avatar, this.props.className, {[styles.empty]: username == null})
+          }
           style={styleObj}
-        />
+        >{
+            username != null && (
+              <FallbackAvatar
+                size={size}
+                round={round}
+                username={username}
+              />
+            )
+          }</span>
       );
     }
 

package/components/avatar/fallback-avatar.js

@@ -0,0 +1,136 @@
+import React, {useMemo} from 'react';
+import PropTypes from 'prop-types';
+
+import getUID from '../global/get-uid';
+
+const colorPairs = [
+  ['#60A800', '#D5CA00'],
+  ['#21D370', '#03E9E1'],
+  ['#3BA1FF', '#36E97D'],
+  ['#00C243', '#00FFFF'],
+  ['#4BE098', '#627FFF'],
+  ['#168BFA', '#26F7C7'],
+  ['#9D4CFF', '#39D3C3'],
+  ['#0A81F6', '#0ACFF6'],
+  ['#765AF8', '#5A91F8'],
+  ['#9E54FF', '#0ACFF6'],
+  ['#B345F1', '#669DFF'],
+  ['#765AF8', '#C059EE'],
+  ['#9039D0', '#C239D0'],
+  ['#9F2AFF', '#FD56FD'],
+  ['#AB3AF2', '#E40568'],
+  ['#9F2AFF', '#E9A80B'],
+  ['#D50F6B', '#E73AE8'],
+  ['#ED5502', '#E73AE8'],
+  ['#ED358C', '#DBED18'],
+  ['#ED358C', '#F9902E'],
+  ['#FF7500', '#FFCA00']
+];
+
+const Sizes = {
+  18: {
+    radius: 2,
+    text: {x: 9, y: 13},
+    fontSize: '11px',
+    textAnchor: 'middle'
+  },
+  24: {
+    radius: 3,
+    text: {x: 2, y: 13},
+    fontSize: '11px',
+    underscore: {x: 3, y: 17}
+  },
+  32: {
+    radius: 3,
+    text: {x: 3, y: 17},
+    fontSize: '13px',
+    letterSpacing: 1,
+    underscore: {x: 4, y: 22}
+  },
+  40: {
+    radius: 3,
+    text: {x: 5, y: 19},
+    fontSize: '15px',
+    letterSpacing: 1,
+    underscore: {x: 6, y: 28}
+  }
+};
+
+const sizeKeys = Object.keys(Sizes).map(Number);
+
+function extractLetters(name) {
+  const names = name.split(/[\s._]+/).filter(Boolean);
+  if (names.length >= 2) {
+    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+  } else if (names.length === 1) {
+    if (names[0].length >= 2) {
+      return names[0].slice(0, 2).toUpperCase();
+    } else {
+      return `${names[0][0].toUpperCase()}X`;
+    }
+  } else {
+    return 'XX';
+  }
+}
+
+// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+const BASE = 32;
+function hashCode(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+export default function FallbackAvatar({username, size, round}) {
+  const hash = Math.abs(hashCode(username.toLowerCase()));
+  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+  const sizeKey = possibleSizeKeys.length > 0
+    ? Math.min(...possibleSizeKeys)
+    : Math.max(...sizeKeys);
+  const sizes = Sizes[sizeKey];
+  const radius = round ? '50%' : sizes.radius;
+  const gradientId = useMemo(() => getUID('gradient-'), []);
+  return (
+    <svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor={fromColor} offset="0"/>
+          <stop stopColor={toColor} offset="1"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect
+          fill={`url(#${gradientId})`}
+          x="0"
+          y="0"
+          width={sizeKey}
+          height={sizeKey}
+          rx={radius}
+          ry={radius}
+        />
+        <text
+          x={sizes.text.x}
+          y={sizes.text.y}
+          fontFamily="Arial, Helvetica, sans-serif"
+          fontSize={sizes.fontSize}
+          letterSpacing={sizes.letterSpacing}
+          fill="#FFFFFF"
+          textAnchor={sizes.textAnchor}
+        >
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+      </g>
+    </svg>
+  );
+}
+
+FallbackAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  round: PropTypes.bool
+};

package/components/dropdown/dropdown.examples.js

@@ -3,12 +3,14 @@ import chevronDownIcon from '@jetbrains/icons/chevron-down';
 
 import reactDecorator from '../../.storybook/react-decorator';
 
+import {ActiveItemContext} from '../list/list';
+
 import Popup from '@jetbrains/ring-ui/components/popup/popup';
 import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
 import Button from '@jetbrains/ring-ui/components/button/button';
 import Link from '@jetbrains/ring-ui/components/link/link';
 import {Input} from '@jetbrains/ring-ui/components/input/input';
-
+import getUID from '@jetbrains/ring-ui/components/global/get-uid';
 import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
 
 export default {
@@ -45,6 +47,39 @@ export const withCustomAnchorAndPopup = () => (
   </Dropdown>
 );
 
+export const withCustomAnchorAndPopupAndContentAccessibilityHandling = () => {
+  const listId = getUID('popup-menu-list-id');
+
+  return (
+    <ActiveItemContext.Provider>
+      <Dropdown anchor={({active}) => (
+        <ActiveItemContext.ValueContext.Consumer>
+          {activeItemId => {
+            const anchorAriaProps = active && activeItemId
+              ? {'aria-owns': listId, 'aria-activedescendant': activeItemId}
+              : {};
+            return (
+              <Button
+                {...anchorAriaProps}
+                delayed
+              >Edit</Button>
+            );
+          }}
+        </ActiveItemContext.ValueContext.Consumer>
+      )}
+      >
+        <PopupMenu
+          id={listId}
+          ariaLabel="My options menu"
+          closeOnSelect
+          activateFirstItem
+          data={['Cut', 'Copy', 'Paste'].map(label => ({label, key: label.toLowerCase()}))}
+        />
+      </Dropdown>
+    </ActiveItemContext.Provider>
+  );
+};
+
 withCustomAnchorAndPopup.storyName = 'with custom anchor and popup';
 
 export const withActiveClassName = () => (

package/components/dropdown-menu/dropdown-menu.examples.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import DropdownMenu from '@jetbrains/ring-ui/components/dropdown-menu/dropdown-menu';
+
+export default {
+  title: 'Components/DropdownMenu',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a menu in a dropdown.',
+    hermione: {
+      actions: [
+        {type: 'click', selector: '[data-test~=ring-dropdown]'},
+        {
+          type: 'capture',
+          name: 'dropdown',
+          selector: ['[data-test~=ring-dropdown]', '[data-test~=ring-popup]']
+        }
+      ]
+    },
+    a11y: {element: '*[data-test~=ring-dropdown]'}
+  }
+};
+
+export const basic = () => {
+  const data = [
+    {label: 'Item'},
+    {label: 'Link to jetbrains.com', href: 'http://www.jetbrains.com'},
+    {rgItemType: DropdownMenu.ListProps.Type.SEPARATOR},
+    {rgItemType: DropdownMenu.ListProps.Type.LINK, label: 'Link Item'},
+    {
+      rgItemType: DropdownMenu.ListProps.Type.LINK,
+      label: 'Link Item With Additional Class',
+      className: 'test'
+    },
+    {rgItemType: DropdownMenu.ListProps.Type.SEPARATOR, description: 'Separator With Description'},
+    {rgItemType: DropdownMenu.ListProps.Type.TITLE, label: 'Title'},
+    {rgItemType: DropdownMenu.ListProps.Type.ITEM, label: '1 Element in group'},
+    {rgItemType: DropdownMenu.ListProps.Type.ITEM, label: '2 Element in group'}
+  ];
+
+  return <DropdownMenu data={data} anchor={'Click me!'}/>;
+};
+
+basic.storyName = 'DropdownMenu';

package/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,107 @@
+import React, {useMemo, cloneElement} from 'react';
+import PropTypes from 'prop-types';
+
+import List, {ActiveItemContext} from '../list/list';
+import Dropdown from '../dropdown/dropdown';
+import PopupMenu from '../popup-menu/popup-menu';
+import getUID from '../global/get-uid';
+import Anchor from '../dropdown/anchor';
+
+const {children, ...dropdownPropTypes} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType
+} = PopupMenu.propTypes || {};
+
+const defaultAriaLabel = 'Dropdown menu';
+
+function DropdownAnchorWrapper({anchor, pinned, active, activeListItemId, listId, ...restProps}) {
+  const anchorAriaProps = useMemo(() => ({
+    ...(listId ? {'aria-haspopup': 'true'} : {}),
+    ...(activeListItemId ? {'aria-activedescendant': activeListItemId, 'aria-owns': listId} : {}),
+    ...(active ? {'aria-expanded': 'true'} : {})
+  }), [active, activeListItemId, listId]);
+
+  const anchorProps = useMemo(
+    () => ({active, pinned, ...restProps, ...anchorAriaProps}),
+    [pinned, active, restProps, anchorAriaProps]
+  );
+
+  if (typeof anchor === 'string') {
+    return (
+      <Anchor
+        {...anchorProps}
+        pinned={`${pinned}`}
+      >{anchor}</Anchor>
+    );
+  }
+  if (typeof anchor === 'function') {
+    return anchor(anchorProps);
+  }
+  if (!Array.isArray(anchor)) {
+    return cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorProps);
+  }
+  return (
+    <div {...anchorAriaProps}>{anchor}</div>
+  );
+}
+
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+
+const DropdownMenu = React.forwardRef(function DropdownMenu(
+  {id, anchor, ariaLabel, data, menuProps, ...restDropdownProps},
+  forwardedRef
+) {
+  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+
+  return (
+    <ActiveItemContext.Provider>
+      <Dropdown
+        anchor={({pinned, active, ...restAnchorProps}) => (
+          <ActiveItemContext.ValueContext.Consumer>
+            {activeItemId => (
+              <DropdownAnchorWrapper
+                anchor={anchor}
+                pinned={pinned}
+                active={active}
+                activeListItemId={activeItemId}
+                listId={listId}
+                {...restAnchorProps}
+              />
+            )}
+          </ActiveItemContext.ValueContext.Consumer>
+        )}
+        {...restDropdownProps}
+      >
+        <PopupMenu
+          ref={forwardedRef}
+          id={listId}
+          ariaLabel={ariaLabel || defaultAriaLabel}
+          closeOnSelect
+          activateFirstItem
+          data={data}
+          {...menuProps}
+        />
+      </Dropdown>
+    </ActiveItemContext.Provider>
+  );
+});
+
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+
+DropdownMenu.ListProps = List.ListProps;
+
+export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import PopupMenu from '../popup-menu/popup-menu';
+import Anchor from '../dropdown/anchor';
+
+import DropdownMenu from './dropdown-menu';
+
+const waitForCondition = (condition, rejectMessage) => new Promise((resolve, reject) => {
+  const interval = 10;
+  const maxWaitingTime = 2000;
+  let remainingTime = maxWaitingTime;
+
+  const intervalId = setInterval(() => {
+    if (condition()) {
+      clearInterval(intervalId);
+      resolve();
+    } else if (remainingTime < 0) {
+      clearInterval(intervalId);
+      reject(new Error(rejectMessage));
+    } else {
+      remainingTime -= interval;
+    }
+  }, interval);
+});
+
+describe('Dropdown Menu', () => {
+  const shallowDropdownMenu = props => shallow(<DropdownMenu id="test-list-id" {...props}/>);
+  const mountDropdownMenu = props => mount(<DropdownMenu id="test-list-id" {...props}/>);
+
+  const mountAndWaitForMenuContent = async props => {
+    const wrapper = mountDropdownMenu(props);
+
+    wrapper.find('button').getDOMNode().click();
+    await waitForCondition(
+      () => !!wrapper.find(PopupMenu).length,
+      'List was not rendered in a dropdown menu'
+    );
+
+    return wrapper;
+  };
+
+  it('should create component', () => {
+    shallowDropdownMenu({anchor: 'Anchor text'}).should.exist;
+  });
+
+  it('should open List', async () => {
+    const wrapper = await mountAndWaitForMenuContent({anchor: 'Anchor text'});
+
+    const list = wrapper.find(PopupMenu).instance().list;
+    list.should.exist;
+
+    //We need it to maintain compatibility between Dropdown Menu and List
+    list.props.data.length.should.equal(0);
+  });
+
+  it('should pass params to List', async () => {
+    const wrapper = await mountAndWaitForMenuContent({
+      anchor: 'Anchor text',
+      data: [{key: 'key1'}]
+    });
+
+    shallow(wrapper.find(PopupMenu).instance().list.renderItem({index: 1})).should.exist;
+  });
+
+  it('should add accessibility attributes to anchor', async () => {
+    const wrapper = await mountAndWaitForMenuContent({
+      anchor: 'Anchor text',
+      data: [{key: 'key1'}, {key: 'key2'}]
+    });
+
+    const anchorProps = wrapper.update().find(Anchor).props();
+    anchorProps['aria-owns'].should.equal('test-list-id');
+    anchorProps['aria-activedescendant'].should.contain(':key1');
+  });
+});

package/components/header/header.examples.js

@@ -13,8 +13,7 @@ import hubConfig from '../../.storybook/hub-config';
 import Link from '@jetbrains/ring-ui/components/link/link';
 
 
-import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
-import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
+import DropdownMenu from '@jetbrains/ring-ui/components/dropdown-menu/dropdown-menu';
 import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
 
 import Theme from '@jetbrains/ring-ui/components/global/theme';
@@ -77,13 +76,13 @@ export const header = ({isCompact, ...args}) => {
             <TrayIcon title="Help" icon={helpIcon}/>
             <TrayIcon title="What's new" icon={giftIcon}/>
             <TrayIcon title="Search" icon={searchIcon}/>
-            <Dropdown
-              anchor={({active}) => (
-                <TrayIcon title="Settings" active={active} icon={settingsIcon}/>
+            <DropdownMenu
+              data={[{label: 'Test'}, {label: 'Test2'}]}
+              anchor={({active, pinned, ...ariaProps}) => (
+                <TrayIcon title="Settings" active={active} icon={settingsIcon} {...ariaProps}/>
               )}
-            >
-              <PopupMenu top={-12} closeOnSelect data={[{label: 'Test'}, {label: 'Test2'}]}/>
-            </Dropdown>
+              menuProps={{top: -12}}
+            />
             <SmartServices auth={auth}/>
             <SmartProfile auth={auth} hasUpdates LinkComponent={Comp}/>
           </Tray>

package/components/header/profile.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import Avatar, {Size} from '../avatar/avatar';
 import Button from '../button/button';
-import Dropdown from '../dropdown/dropdown';
+import DropdownMenu from '../dropdown-menu/dropdown-menu';
 import PopupMenu from '../popup-menu/popup-menu';
 
 import styles from './header.css';
@@ -162,21 +162,20 @@ export default class Profile extends PureComponent {
     ].filter(it => !!it);
 
     return (
-      <Dropdown
+      <DropdownMenu
         {...props}
         title={user.name}
         anchor={anchor}
+        data={renderPopupItems(items)}
         data-test="ring-profile"
         className={classNames(styles.profile, className)}
-      >
-        <PopupMenu
-          closeOnSelect={closeOnSelect}
-          data={renderPopupItems(items)}
-          left={-2}
-          top={-8}
-          sidePadding={32}
-        />
-      </Dropdown>
+        menuProps={{
+          closeOnSelect,
+          left: -2,
+          top: -8,
+          sidePadding: 32
+        }}
+      />
     );
   }
 }

package/components/link/link.js

@@ -39,7 +39,6 @@ export function linkHOC(ComposedComponent) {
   return class Link extends Component {
     static propTypes = {
       className: PropTypes.string,
-      role: PropTypes.string,
       innerClassName: PropTypes.string,
       active: PropTypes.bool,
       inherit: PropTypes.bool,
@@ -71,7 +70,6 @@ export function linkHOC(ComposedComponent) {
         className,
         'data-test': dataTest,
         href,
-        role,
         innerClassName, children, onPlainLeftClick, onClick,
         ...props
       } = this.props;
@@ -94,7 +92,6 @@ export function linkHOC(ComposedComponent) {
         return (
           <button
             type="button"
-            role={role || 'button'}
             {...props}
             className={classes}
             onClick={onClick || onPlainLeftClick}
@@ -107,7 +104,6 @@ export function linkHOC(ComposedComponent) {
         <ComposedComponent
           {...props}
           href={href}
-          role={role || 'link'}
           className={classes}
           onClick={onClick}
           onPlainLeftClick={onPlainLeftClick}

package/components/list/list.js

@@ -80,7 +80,6 @@ export default class List extends Component {
   static propTypes = {
     id: PropTypes.string,
     className: PropTypes.string,
-    role: PropTypes.string,
     hint: PropTypes.node,
     hintOnSelection: PropTypes.string,
     data: PropTypes.array,
@@ -120,7 +119,6 @@ export default class List extends Component {
     shortcuts: false,
     renderOptimization: true,
     disableMoveDownOverflow: false,
-    role: 'list',
     ariaLabel: 'List'
   };
 
@@ -492,10 +490,7 @@ export default class List extends Component {
 
       // Hack around SelectNG implementation
       const {selectedLabel, originalModel, ...cleanedProps} = item;
-      const itemProps = Object.assign({
-        rgItemType: DEFAULT_ITEM_TYPE,
-        role: 'listitem'
-      }, cleanedProps);
+      const itemProps = Object.assign({rgItemType: DEFAULT_ITEM_TYPE}, cleanedProps);
 
       if (itemProps.url) {
         itemProps.href = itemProps.url;
@@ -575,7 +570,11 @@ export default class List extends Component {
           )}
         </CellMeasurer>
       )
-      : cloneElement(el, {key: itemKey});
+      : (
+        <div role="row" id={itemId} key={itemKey}>
+          <div role="cell">{cloneElement(el)}</div>
+        </div>
+      );
   };
 
   addItemDataTestToProp = props => {
@@ -684,6 +683,7 @@ export default class List extends Component {
       >
         <div
           aria-label={this.props.ariaLabel}
+          role="grid"
           style={maxHeight
             ? {maxHeight: this.getVisibleListHeight(this.props)}
             : null
@@ -729,8 +729,6 @@ export default class List extends Component {
         <div
           id={this.props.id}
           ref={this.containerRef}
-          role={this.props.role}
-          tabIndex={-1}
           className={classes}
           onMouseOut={this.props.onMouseOut}
           onBlur={this.props.onMouseOut}

package/components/list/list__item.js

@@ -61,7 +61,6 @@ export default class ListItem extends PureComponent {
     onMouseOver: PropTypes.func,
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,
-    role: PropTypes.string,
     'data-test': PropTypes.string
   };
 
@@ -98,7 +97,6 @@ export default class ListItem extends PureComponent {
       onMouseUp,
       rightNodes,
       leftNodes,
-      role,
       ...restProps
     } = this.props;
 
@@ -159,7 +157,6 @@ export default class ListItem extends PureComponent {
         <button
           id={this.id}
           type="button"
-          role={role}
           tabIndex={tabIndex}
           onClick={onClick}
           onMouseOver={onMouseOver}

package/components/pager/pager.js

@@ -33,6 +33,7 @@ export default class Pager extends PureComponent {
     className: PropTypes.string,
     translations: PropTypes.object,
     loader: PropTypes.bool,
+    loaderNavigation: PropTypes.bool,
     hrefFunc: PropTypes.func //function which generates href for all pager's buttons based on pager state passed as a function parameter, either this function or onPageChange should be provided
   };
 
@@ -53,6 +54,7 @@ export default class Pager extends PureComponent {
       previousPage: 'Previous'
     },
     loader: false,
+    loaderNavigation: false,
     onPageSizeChange: () => {},
     onLoadPage: () => {}
   };
@@ -109,7 +111,7 @@ export default class Pager extends PureComponent {
         href={this.generateHref(page)}
         key={key}
         active={active}
-        disabled={this.props.loader && !active}
+        disabled={this.props.loader && !active && !this.props.loaderNavigation}
         loader={this.props.loader && active}
         {...this.getClickProps(this.handlePageChange(page))}
       >
@@ -187,7 +189,7 @@ export default class Pager extends PureComponent {
 
     return (
       <div className={style.links}>
-        {prevLinkAvailable && !this.props.loader
+        {prevLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
           ? (
             <Link
               href={prevLinkHref}
@@ -202,7 +204,7 @@ export default class Pager extends PureComponent {
           )
         }
 
-        {nextLinkAvailable && !this.props.loader
+        {nextLinkAvailable && (!this.props.loader || this.props.loaderNavigation)
           ? (
             <Link
               href={nextLinkHref}

package/components/popup-menu/popup-menu.js

@@ -26,14 +26,6 @@ export default class PopupMenu extends Popup {
     closeOnSelect: false
   };
 
-  static getDerivedStateFromProps(props) {
-    return {
-      data: (props.data || []).map(dataItem => ({
-        role: 'menuitem', ...dataItem
-      }))
-    };
-  }
-
   onSelect = (item, event) => {
     if (this.props.closeOnSelect) {
       this._onCloseAttempt(event);
@@ -47,14 +39,12 @@ export default class PopupMenu extends Popup {
 
   /** @override */
   getInternalContent() {
-    const {className, data, ...props} = this.props;
+    const {className, ...props} = this.props;
 
     return (
       <div>
         <List
-          role="menu"
           ref={this.listRef}
-          data={this.state.data}
           {...props}
           maxHeight={this.popup && this.popup.style.maxHeight}
           shortcuts={this.shouldUseShortcuts()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.0.39",
+  "version": "4.0.43",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -68,7 +68,7 @@
     "@babel/cli": "^7.15.4",
     "@babel/eslint-parser": "^7.15.4",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.0.32",
+    "@jetbrains/generator-ring-ui": "^4.0.33",
     "@jetbrains/stylelint-config": "^2.0.1",
     "@primer/octicons": "^15.1.0",
     "@storybook/addon-a11y": "6.3.8",
@@ -85,7 +85,7 @@
     "@storybook/manager-webpack5": "^6.3.8",
     "@storybook/source-loader": "6.3.8",
     "@storybook/theming": "6.3.8",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "angular": "^1.8.2",
@@ -112,7 +112,7 @@
     "husky": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^3.0.0",
-    "jest": "~27.1.1",
+    "jest": "~27.2.0",
     "jest-teamcity": "^1.10.0",
     "karma": "^6.3.4",
     "karma-chrome-launcher": "3.1.0",
@@ -137,9 +137,9 @@
     "stylelint": "^13.13.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.11",
-    "terser-webpack-plugin": "^5.2.3",
+    "terser-webpack-plugin": "^5.2.4",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.52.0",
+    "webpack": "^5.52.1",
     "webpack-cli": "^4.8.0",
     "xmlappend": "^1.0.4",
     "yo": "^4.3.0"
@@ -148,18 +148,18 @@
     "core-js": ">=3.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "webpack": "^5.52.0"
+    "webpack": "^5.52.1"
   },
   "dependencies": {
     "@babel/core": "^7.15.5",
     "@jetbrains/angular-elastic": "^2.5.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.1",
     "@jetbrains/icons": "^3.17.1",
-    "@jetbrains/logos": "^1.4.23",
+    "@jetbrains/logos": "^1.4.24",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@ungap/url-search-params": "^0.2.2",
     "babel-loader": "^8.2.2",
-    "babel-plugin-transform-define": "^2.0.0",
+    "babel-plugin-transform-define": "^2.0.1",
     "browserslist": "^4.16.6",
     "change-case": "^4.1.1",
     "classnames": "^2.3.1",
@@ -207,5 +207,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "d65158d2c7348b13f76ea18c4c0d6b5d656dd8d7"
+  "gitHead": "ef0147be4eea764b49b5cd663b3daf92a56e0618"
 }