@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/dropdown/dropdown.tsx

@@ -0,0 +1,224 @@
+import React, {
+  cloneElement,
+  Component,
+  HTMLAttributes,
+  ReactNode,
+  ReactElement
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import dataTests from '../global/data-tests';
+import {PopupAttrs} from '../popup/popup';
+
+import {isArray} from '../global/typescript-utils';
+
+import Anchor from './anchor';
+import styles from './dropdown.css';
+
+export interface AnchorProps {
+  active: boolean
+  pinned: boolean
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLElement> {
+  anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode)
+  children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode)
+  initShown: boolean
+  clickMode: boolean
+  hoverMode: boolean
+  hoverShowTimeOut: number
+  hoverHideTimeOut: number
+  onShow: (() => void)
+  onHide: (() => void)
+  activeClassName?: string | null | undefined
+  'data-test'?: string | null | undefined
+}
+
+interface DropdownState {
+  show: boolean,
+  pinned: boolean
+}
+
+/**
+ * @name Dropdown
+ */
+
+export default class Dropdown extends Component<DropdownProps, DropdownState> {
+  static propTypes = {
+    /**
+     * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
+     * React element should render some interactive HTML element like `button` or `a`
+     */
+    anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+    initShown: PropTypes.bool,
+    className: PropTypes.string,
+    activeClassName: PropTypes.string,
+    clickMode: PropTypes.bool,
+    hoverMode: PropTypes.bool,
+    hoverShowTimeOut: PropTypes.number,
+    hoverHideTimeOut: PropTypes.number,
+    onShow: PropTypes.func,
+    onHide: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    'data-test': PropTypes.string
+  };
+
+  static defaultProps = {
+    initShown: false,
+    clickMode: true,
+    hoverMode: false,
+    hoverShowTimeOut: 300,
+    hoverHideTimeOut: 600,
+    onShow: () => {},
+    onHide: () => {},
+    onMouseEnter: () => {},
+    onMouseLeave: () => {}
+  };
+
+  state = {
+    show: this.props.initShown,
+    pinned: false
+  };
+
+  onClick = () => {
+    const {show, pinned} = this.state;
+    let nextPinned = pinned;
+
+    if (this.props.hoverMode) {
+      if (!pinned) {
+        nextPinned = true;
+
+        if (show) {
+          this.setState({pinned: true});
+          return;
+        }
+      } else {
+        nextPinned = false;
+      }
+    }
+
+    this._toggle(!show, nextPinned);
+  };
+
+  onChildCloseAttempt = () => {
+    let nextPinned = this.state.pinned;
+    if (this.props.hoverMode) {
+      nextPinned = false;
+    }
+
+    this._toggle(false, nextPinned);
+  };
+
+  hoverTimer?: number | null;
+
+  onMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+    this._clearTimer();
+    this.props.onMouseEnter?.(event);
+
+    this.hoverTimer = window.setTimeout(() => {
+      if (!this.state.show) {
+        this._toggle(true);
+      }
+    }, this.props.hoverShowTimeOut);
+  };
+
+  onMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+    this.props.onMouseLeave?.(event);
+    if (this.state.pinned) {
+      return;
+    }
+
+    this._clearTimer();
+
+    this.hoverTimer = window.setTimeout(() => {
+      if (this.state.show) {
+        this._toggle(false);
+      }
+    }, this.props.hoverHideTimeOut);
+  };
+
+  handlePopupInteraction = () => {
+    this.setState(({pinned}) => (pinned ? null : {pinned: true}));
+  };
+
+  toggle(show = !this.state.show) {
+    this._toggle(show);
+  }
+
+  _toggle(show: boolean, pinned = this.state.pinned) {
+    this.setState({show, pinned}, () => (show ? this.props.onShow() : this.props.onHide()));
+  }
+
+  _clearTimer() {
+    if (this.hoverTimer) {
+      clearTimeout(this.hoverTimer);
+      this.hoverTimer = null;
+    }
+  }
+
+  render() {
+    const {show, pinned} = this.state;
+    const {
+      initShown, onShow, onHide, hoverShowTimeOut, hoverHideTimeOut,
+      children, anchor, className, activeClassName, hoverMode, clickMode, 'data-test': dataTest,
+      ...restProps
+    } = this.props;
+
+    const classes = classNames(styles.dropdown, className, {
+      [activeClassName ?? '']: activeClassName != null && show
+    });
+
+    let anchorElement;
+
+    const active = hoverMode ? pinned : show;
+
+    switch (typeof anchor) {
+      case 'string':
+        anchorElement = (<Anchor active={active}>{anchor}</Anchor>);
+        break;
+      case 'function':
+        anchorElement = anchor({active: show, pinned});
+        break;
+
+      default:
+        if (isArray(anchor) || typeof anchor.type === 'string') {
+          anchorElement = anchor;
+        } else {
+          anchorElement = cloneElement(anchor, {active});
+        }
+    }
+
+    const childProps = {
+      hidden: !show,
+      onCloseAttempt: this.onChildCloseAttempt,
+      onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
+      onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
+      dontCloseOnAnchorClick: true
+    };
+
+    return (
+      <div
+        data-test={dataTests('ring-dropdown', dataTest)}
+        {...restProps}
+        onClick={clickMode ? this.onClick : undefined}
+        // anchorElement should be a `button` or an `a`
+        role="presentation"
+        onMouseEnter={hoverMode ? this.onMouseEnter : undefined}
+        onMouseLeave={hoverMode ? this.onMouseLeave : undefined}
+        className={classes}
+      >
+        {anchorElement}
+        {typeof children === 'function'
+          ? children(childProps)
+          : cloneElement(children as ReactElement<PopupAttrs>, childProps)}
+      </div>
+    );
+  }
+}
+
+export type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>
+
+export {Anchor};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import DropdownMenu from './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.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import PopupMenu from '../popup-menu/popup-menu';
+import Anchor from '../dropdown/anchor';
+
+import DropdownMenu, {DropdownMenuProps} from './dropdown-menu';
+
+const waitForCondition = (condition: () => boolean, rejectMessage: string) =>
+  new Promise<void>((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 = <T, >(props: DropdownMenuProps<T>) =>
+    shallow(<DropdownMenu id="test-list-id" {...props}/>);
+  const mountDropdownMenu = <T, >(props: DropdownMenuProps<T>) =>
+    mount(<DropdownMenu id="test-list-id" {...props}/>);
+
+  const mountAndWaitForMenuContent = async <T, >(props: DropdownMenuProps<T>) => {
+    const wrapper = mountDropdownMenu(props);
+
+    wrapper.find('button').getDOMNode<HTMLElement>().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>(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>(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/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,156 @@
+import React, {
+  useMemo,
+  cloneElement,
+  ComponentType,
+  ReactElement,
+  ReactNodeArray,
+  HTMLAttributes,
+  SyntheticEvent,
+  Ref
+} from 'react';
+import PropTypes from 'prop-types';
+
+import List, {ActiveItemContext, SelectHandlerParams} from '../list/list';
+import Dropdown, {AnchorProps, DropdownAttrs} from '../dropdown/dropdown';
+import PopupMenu, {PopupMenuAttrs, PopupMenuProps} from '../popup-menu/popup-menu';
+import getUID from '../global/get-uid';
+import Anchor from '../dropdown/anchor';
+
+import {isArray} from '../global/typescript-utils';
+
+import {ListDataItem} from '../list/consts';
+
+const {children, ...dropdownPropTypes} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType
+} = (PopupMenu as ComponentType<PopupMenuProps>).propTypes || {};
+
+const defaultAriaLabel = 'Dropdown menu';
+
+export interface DropdownAnchorWrapperProps extends AnchorProps {
+  anchor: ReactElement | ReactNodeArray | string
+    | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null)
+  activeListItemId?: string | null | undefined
+  listId?: string | undefined
+}
+
+function DropdownAnchorWrapper({
+  anchor,
+  pinned,
+  active,
+  activeListItemId,
+  listId,
+  ...restProps
+}: DropdownAnchorWrapperProps) {
+  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]
+  );
+
+  const anchorComponentProps = useMemo(
+    () => ({...anchorProps, pinned: `${anchorProps.pinned}`}),
+    [anchorProps]
+  );
+
+  if (typeof anchor === 'string') {
+    return (
+      <Anchor
+        {...anchorComponentProps}
+      >{anchor}</Anchor>
+    );
+  }
+  if (typeof anchor === 'function') {
+    return anchor(({active, pinned, ...restProps}), anchorAriaProps);
+  }
+  if (!isArray(anchor)) {
+    return cloneElement(
+      anchor,
+      typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps
+    );
+  }
+  return (
+    <div {...anchorAriaProps}>{anchor}</div>
+  );
+}
+
+export interface DropdownMenuProps<T = unknown> extends
+  Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+  anchor: ReactElement | ReactNodeArray | string
+    | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null)
+  data?: readonly ListDataItem<T>[] | undefined
+  ariaLabel?: string | null | undefined
+  onSelect?: ((
+    item: ListDataItem<T>,
+    event: Event | SyntheticEvent,
+    params?: SelectHandlerParams,
+  ) => void) | undefined
+  menuProps?: PopupMenuAttrs<T> | null | undefined
+}
+
+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<T = unknown>(
+  {id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps}: DropdownMenuProps<T>,
+  forwardedRef: Ref<PopupMenu<T>>
+) {
+  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>
+  );
+}) as <T = unknown>(props: DropdownMenuProps<T> & { ref?: Ref<PopupMenu> }) => ReactElement | null;
+
+(DropdownMenu as ComponentType<unknown>).propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+
+export default Object.assign(DropdownMenu, {ListProps: List.ListProps});

package/components/error-bubble/error-bubble.examples.tsx

@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Select, {SingleSelectAttrs} from '../select/select';
+
+import Dialog from '../dialog/dialog';
+import {Header, Content} from '../island/island';
+import '../form/form.css';
+import '../input-size/input-size.css';
+
+import ErrorBubble from './error-bubble';
+
+export default {
+  title: 'Components/ErrorBubble',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      'Displays an error bubble near the wrapped input component when a non-empty string is passed to the `error` prop. * Passes any prop except `className` down to the input.'
+  }
+};
+
+export const basic = () => {
+  class ErrorBubbleDemo extends Component {
+    state = {value: null};
+
+    render() {
+      const {value} = this.state;
+
+      return (
+        <ErrorBubble<SingleSelectAttrs>
+          error={value ? null : 'Value is required'}
+          onSelect={selected => this.setState({value: selected})}
+          inputPlaceholder="enter something"
+        >
+          <Select
+            type={Select.Type.BUTTON}
+            size={Select.Size.M}
+            data={[{key: 0, label: 'One'}, {key: 1, label: 'Two'}]}
+          />
+        </ErrorBubble>
+      );
+    }
+  }
+
+  return <ErrorBubbleDemo/>;
+};
+
+basic.storyName = 'basic';
+
+export const inDialogForm = () => {
+  class ErrorBubbleDemo extends Component {
+    state = {value: null};
+
+    render() {
+      const {value} = this.state;
+
+      return (
+        <Dialog label="Dialog" show>
+          <Header>Dialog example</Header>
+          <Content>
+            <form className="ring-form">
+              <div className="ring-form__group">
+                <label htmlFor="select" className="ring-form__label">Field name</label>
+                <div className="ring-form__control ring-form__control_small">
+                  <ErrorBubble<SingleSelectAttrs>
+                    error={value ? null : 'Value is required'}
+                    onSelect={selected => this.setState({value: selected})}
+                    inputPlaceholder="enter something"
+                  >
+                    <Select
+                      id="select"
+                      type={Select.Type.BUTTON}
+                      size={Select.Size.M}
+                      data={[{key: 0, label: 'One'}, {key: 1, label: 'Two'}]}
+                    />
+                  </ErrorBubble>
+                </div>
+              </div>
+            </form>
+          </Content>
+        </Dialog>
+      );
+    }
+  }
+
+  return <ErrorBubbleDemo/>;
+};
+
+inDialogForm.storyName = 'in dialog form';
+
+inDialogForm.parameters = {
+  hermione: {captureSelector: ['*[data-test~=ring-dialog]', '*[data-test~=ring-error-bubble]']},
+  a11y: {element: '*[data-test~=ring-dialog],*[data-test~=ring-error-bubble]'}
+};

package/components/error-bubble/error-bubble.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Input, {InputAttrs} from '../input/input';
+
+import ErrorBubble, {ErrorBubbleProps} from './error-bubble';
+
+const ERROR_BUBBLE_SELECTOR = '[data-test="ring-error-bubble"]';
+
+describe('Error Bubble', () => {
+  const shallowErrorBubble = (params?: Partial<ErrorBubbleProps<Omit<InputAttrs, 'ref'>>>) =>
+    shallow(
+      <ErrorBubble {...params}>
+        <Input/>
+      </ErrorBubble>
+    );
+  const mountErrorBubble = (params?: Partial<ErrorBubbleProps<Omit<InputAttrs, 'ref'>>>) => mount(
+    <ErrorBubble {...params}>
+      <Input/>
+    </ErrorBubble>
+  );
+
+  it('should create component', () => {
+    mountErrorBubble().should.have.type(ErrorBubble);
+  });
+
+  it('should wrap children with div', () => {
+    shallowErrorBubble().should.have.tagName('div');
+  });
+
+  it('should not show error bubble by default', () => {
+    shallowErrorBubble().should.not.have.descendants(ERROR_BUBBLE_SELECTOR);
+  });
+
+  it('should show error bubble', () => {
+    shallowErrorBubble({error: 'test'}).should.have.descendants(ERROR_BUBBLE_SELECTOR);
+  });
+
+  it('should use passed className', () => {
+    shallowErrorBubble({error: 'test', className: 'test-class'}).should.have.descendants('.test-class');
+  });
+});

package/components/error-bubble/error-bubble.tsx

@@ -0,0 +1,57 @@
+import React, {Children, cloneElement, PureComponent, ReactElement} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Popup from '../popup/popup';
+
+import {Directions} from '../popup/popup.consts';
+
+import styles from './error-bubble.css';
+
+export type ErrorBubbleProps<P> = Partial<P> & {
+  className?: string | null | undefined
+  children: ReactElement<P> | ReactElement<P>[]
+  error?: string | null | undefined
+}
+
+/**
+ * @name Error Bubble
+ */
+
+export default class ErrorBubble<P> extends PureComponent<ErrorBubbleProps<P>> {
+  static propTypes = {
+    error: PropTypes.string,
+    className: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  render() {
+    const {children, className, ...restProps} = this.props;
+
+    const errorBubbleClasses = classNames(styles.errorBubble, className);
+
+    return (
+      <div className={styles.errorBubbleWrapper}>
+        {Children.map(children as ErrorBubbleProps<P>['children'], (child: ReactElement<P>) =>
+          cloneElement(child, {...child.props, ...restProps}))}
+        {restProps.error && (
+          <Popup
+            trapFocus={false}
+            className={styles.errorBubblePopup}
+            hidden={false}
+            attached={false}
+            directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}
+          >
+            <div
+              className={errorBubbleClasses}
+              data-test="ring-error-bubble"
+            >
+              {restProps.error}
+            </div>
+          </Popup>
+        )}
+      </div>
+    );
+  }
+}
+