@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/dropdown/dropdown.js

@@ -1,185 +1,148 @@
-import React, {cloneElement, Component} from 'react';
+import React, { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
-
+import { isArray } from '../global/typescript-utils';
 import Anchor from './anchor';
 import styles from './dropdown.css';
-
 /**
  * @name Dropdown
  */
-
 export default class Dropdown extends Component {
-  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;
+    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;
+            }
         }
-      } else {
-        nextPinned = false;
-      }
-    }
-
-    this._toggle(!show, nextPinned);
-  };
-
-  onChildCloseAttempt = () => {
-    let nextPinned = this.state.pinned;
-    if (this.props.hoverMode) {
-      nextPinned = false;
-    }
-
-    this._toggle(false, nextPinned);
-  };
-
-  onMouseEnter = event => {
-    this._clearTimer();
-    this.props.onMouseEnter(event);
-
-    this.hoverTimer = setTimeout(() => {
-      if (!this.state.show) {
-        this._toggle(true);
-      }
-    }, this.props.hoverShowTimeOut);
-  };
-
-  onMouseLeave = event => {
-    this.props.onMouseLeave(event);
-    if (this.state.pinned) {
-      return;
+        this._toggle(!show, nextPinned);
+    };
+    onChildCloseAttempt = () => {
+        let nextPinned = this.state.pinned;
+        if (this.props.hoverMode) {
+            nextPinned = false;
+        }
+        this._toggle(false, nextPinned);
+    };
+    hoverTimer;
+    onMouseEnter = (event) => {
+        this._clearTimer();
+        this.props.onMouseEnter?.(event);
+        this.hoverTimer = window.setTimeout(() => {
+            if (!this.state.show) {
+                this._toggle(true);
+            }
+        }, this.props.hoverShowTimeOut);
+    };
+    onMouseLeave = (event) => {
+        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);
     }
-
-    this._clearTimer();
-
-    this.hoverTimer = 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, 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;
+    _toggle(show, pinned = this.state.pinned) {
+        this.setState({ show, pinned }, () => (show ? this.props.onShow() : this.props.onHide()));
     }
-  }
-
-  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 (typeof anchor.type === 'string' || Array.isArray(anchor)) {
-          anchorElement = anchor;
-        } else {
-          anchorElement = cloneElement(anchor, {active});
+    _clearTimer() {
+        if (this.hoverTimer) {
+            clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
         }
     }
-
-    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}
+    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}
-      >
+        role="presentation" onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
         {anchorElement}
-        {typeof children === 'function' ? children(childProps) : cloneElement(children, childProps)}
-      </div>
-    );
-  }
+        {typeof children === 'function'
+                ? children(childProps)
+                : cloneElement(children, childProps)}
+      </div>);
+    }
 }
-
-export {Anchor};
+export { Anchor };

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent } from 'react';
+import { SelectHandlerParams } from '../list/list';
+import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
+import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
+import { ListDataItem } from '../list/consts';
+export interface DropdownAnchorWrapperProps extends AnchorProps {
+    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    activeListItemId?: string | null | undefined;
+    listId?: string | undefined;
+}
+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;
+}
+declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
+    ref?: React.Ref<PopupMenu<unknown>> | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
+    ListProps: {
+        Type: typeof import("../list/consts").Type;
+        Dimension: typeof import("../list/consts").Dimension;
+    };
+};
+export default _default;

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

@@ -1,117 +1,56 @@
-import React, {useMemo, cloneElement} from 'react';
+import React, { useMemo, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-
-import List, {ActiveItemContext} from '../list/list';
+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 || {};
-
+import { isArray } from '../global/typescript-utils';
+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]
-  );
-
-  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 (!Array.isArray(anchor)) {
-    return cloneElement(
-      anchor,
-      typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps
-    );
-  }
-  return (
-    <div {...anchorAriaProps}>{anchor}</div>
-  );
+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]);
+    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>);
 }
-
 DropdownAnchorWrapper.propTypes = {
-  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
-  pinned: PropTypes.bool,
-  active: PropTypes.bool,
-  activeListItemId: PropTypes.string,
-  listId: PropTypes.string
+    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}
-        />
+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>
-  );
+    </ActiveItemContext.Provider>);
 });
-
 DropdownMenu.propTypes = {
-  id: idPropType,
-  data: dataPropType,
-  ariaLabel: ariaLabelPropType,
-  onSelect: onSelectPropType,
-  menuProps: PropTypes.object,
-  ...dropdownPropTypes
+    id: idPropType,
+    data: dataPropType,
+    ariaLabel: ariaLabelPropType,
+    onSelect: onSelectPropType,
+    menuProps: PropTypes.object,
+    ...dropdownPropTypes
 };
-
-DropdownMenu.ListProps = List.ListProps;
-
-export default DropdownMenu;
+export default Object.assign(DropdownMenu, { ListProps: List.ListProps });

package/components/error-bubble/error-bubble-legacy.css

@@ -20,7 +20,7 @@
 
   border-radius: var(--ring-border-radius);
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-family: var(--ring-font-family);
 

package/components/error-bubble/error-bubble.css

@@ -30,7 +30,7 @@
   border-radius: var(--ring-border-radius);
 
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-size: 12px;
   line-height: 22px;

package/components/error-bubble/error-bubble.d.ts

@@ -0,0 +1,18 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+export declare 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.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/error-bubble/error-bubble.js

@@ -1,50 +1,28 @@
-import React, {Children, cloneElement, PureComponent} from 'react';
+import React, { Children, cloneElement, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Popup from '../popup/popup';
-
-import {Directions} from '../popup/popup.consts';
-
+import { Directions } from '../popup/popup.consts';
 import styles from './error-bubble.css';
 /**
  * @name Error Bubble
  */
-
 export default class ErrorBubble extends PureComponent {
-  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, child => cloneElement(child, 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"
-            >
+    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, (child) => 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>
-    );
-  }
+          </Popup>)}
+      </div>);
+    }
 }
-

package/components/error-message/error-message.d.ts

@@ -0,0 +1,25 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { IconType } from '../icon/icon';
+export interface ErrorMessageProps {
+    children?: ReactNode;
+    icon?: string | IconType | null | undefined;
+    code?: string | null | undefined;
+    message?: string | null | undefined;
+    description?: string | null | undefined;
+    className?: string | null | undefined;
+}
+/**
+ * @name Error Message
+ */
+export default class ErrorMessage extends Component<ErrorMessageProps> {
+    static propTypes: {
+        icon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        code: PropTypes.Requireable<string>;
+        message: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}