@jetbrains/ring-ui 4.0.40 → 4.0.44

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

@@ -61,7 +61,6 @@ export const withCustomAnchorAndPopupAndContentAccessibilityHandling = () => {
             return (
               <Button
                 {...anchorAriaProps}
-                has-popup="true"
                 delayed
               >Edit</Button>
             );

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,110 @@
+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,
+  onSelect: onSelectPropType
+} = 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(({active, pinned, ...restProps}), anchorAriaProps);
+  }
+  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, onSelect, 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}
+          onSelect={onSelect}
+          {...menuProps}
+        />
+      </Dropdown>
+    </ActiveItemContext.Provider>
+  );
+});
+
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.0.40",
+  "version": "4.0.44",
   "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": "b4464ac8063c70217a57f059aa1ae71c7c538073"
+  "gitHead": "00b6bd2545cdb03747a9db9517bd063a1d4033b3"
 }