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

package/components/dialog/dialog.js

@@ -1,183 +1,125 @@
-import React, {PureComponent} from 'react';
-import {createPortal} from 'react-dom';
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
-
-import {AdaptiveIsland} from '../island/island';
+import { AdaptiveIsland } from '../island/island';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import Shortcuts from '../shortcuts/shortcuts';
 import TabTrap from '../tab-trap/tab-trap';
 import Button from '../button/button';
-
-import {PopupTarget} from '../popup/popup.target';
-
-import {preventerFactory as scrollPreventerFactory} from './dialog__body-scroll-preventer';
+import { PopupTarget } from '../popup/popup.target';
+import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
 import styles from './dialog.css';
-
 /**
  * @name Dialog
  */
-
-function noop() {}
-
+function noop() { }
 export default class Dialog extends PureComponent {
-  static propTypes = {
-    label: PropTypes.string,
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
-    show: PropTypes.bool.isRequired,
-    showCloseButton: PropTypes.bool,
-    closeButtonInside: PropTypes.bool,
-    onOverlayClick: PropTypes.func,
-    onEscPress: PropTypes.func,
-    onCloseClick: PropTypes.func,
-    // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
-    // Use it if you don't need different behaviors for this cases.
-    onCloseAttempt: PropTypes.func,
-    // focusTrap may break popups inside dialog, so use it carefully
-    trapFocus: PropTypes.bool,
-    portalTarget: PropTypes.instanceOf(HTMLElement),
-    autoFocusFirst: PropTypes.bool,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    label: 'Dialog',
-    onOverlayClick: noop,
-    onEscPress: noop,
-    onCloseClick: noop,
-    onCloseAttempt: noop,
-    showCloseButton: false,
-    closeButtonInside: false,
-    trapFocus: false,
-    autoFocusFirst: true
-  };
-
-  state = {
-    shortcutsScope: getUID('ring-dialog-')
-  };
-
-  componentDidMount() {
-    this.toggleScrollPreventer();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.show !== this.props.show) {
-      this.toggleScrollPreventer();
+    static propTypes = {
+        label: PropTypes.string,
+        className: PropTypes.string,
+        contentClassName: PropTypes.string,
+        children: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.node),
+            PropTypes.node
+        ]),
+        show: PropTypes.bool.isRequired,
+        showCloseButton: PropTypes.bool,
+        closeButtonInside: PropTypes.bool,
+        onOverlayClick: PropTypes.func,
+        onEscPress: PropTypes.func,
+        onCloseClick: PropTypes.func,
+        // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
+        // Use it if you don't need different behaviors for this cases.
+        onCloseAttempt: PropTypes.func,
+        // focusTrap may break popups inside dialog, so use it carefully
+        trapFocus: PropTypes.bool,
+        portalTarget: PropTypes.instanceOf(HTMLElement),
+        autoFocusFirst: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        label: 'Dialog',
+        onOverlayClick: noop,
+        onEscPress: noop,
+        onCloseClick: noop,
+        onCloseAttempt: noop,
+        showCloseButton: false,
+        closeButtonInside: false,
+        trapFocus: false,
+        autoFocusFirst: true
+    };
+    state = {
+        shortcutsScope: getUID('ring-dialog-')
+    };
+    componentDidMount() {
+        this.toggleScrollPreventer();
     }
-  }
-
-  componentWillUnmount() {
-    this.scrollPreventer.reset();
-  }
-
-  scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
-
-  uid = getUID('dialog-');
-
-  toggleScrollPreventer() {
-    if (this.props.show) {
-      this.scrollPreventer.prevent();
-    } else {
-      this.scrollPreventer.reset();
+    componentDidUpdate(prevProps) {
+        if (prevProps.show !== this.props.show) {
+            this.toggleScrollPreventer();
+        }
     }
-  }
-
-  handleClick = event => {
-    this.props.onOverlayClick(event);
-    this.props.onCloseAttempt(event);
-  };
-
-  onCloseClick = event => {
-    this.props.onCloseClick(event);
-    this.props.onCloseAttempt(event);
-  };
-
-  getShortcutsMap = () => {
-    const onEscape = event => {
-      if (this.props.show) {
-        this.props.onEscPress(event);
+    componentWillUnmount() {
+        this.scrollPreventer.reset();
+    }
+    scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
+    uid = getUID('dialog-');
+    toggleScrollPreventer() {
+        if (this.props.show) {
+            this.scrollPreventer.prevent();
+        }
+        else {
+            this.scrollPreventer.reset();
+        }
+    }
+    handleClick = (event) => {
+        this.props.onOverlayClick(event);
+        this.props.onCloseAttempt(event);
+    };
+    onCloseClick = (event) => {
+        this.props.onCloseClick(event);
         this.props.onCloseAttempt(event);
-      }
     };
-
-    return {
-      esc: onEscape
+    getShortcutsMap = () => {
+        const onEscape = (event) => {
+            if (this.props.show) {
+                this.props.onEscPress(event);
+                this.props.onCloseAttempt(event);
+            }
+        };
+        return {
+            esc: onEscape
+        };
     };
-  };
-
-  dialogRef = tabTrap => {
-    this.dialog = tabTrap && tabTrap.node;
-  };
-
-  render() {
-    const {show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick,
-      children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside,
-      portalTarget, label, ...restProps} = this.props;
-    const classes = classNames(styles.container, className);
-    const shortcutsMap = this.getShortcutsMap();
-
-    return show && createPortal(
-      <PopupTarget id={this.uid} className={styles.popupTarget}>
-        {
-          target => (
-            <TabTrap
-              trapDisabled={!trapFocus}
-              data-test={dataTests('ring-dialog-container', dataTest)}
-              ref={this.dialogRef}
-              className={classes}
-              role="presentation"
-              {...restProps}
-            >
-              <Shortcuts
-                map={shortcutsMap}
-                scope={this.state.shortcutsScope}
-              />
-              {(onOverlayClick !== noop || onCloseAttempt !== noop) && (
-                <div
-                  // click handler is duplicated in close button
-                  role="presentation"
-                  className={styles.clickableOverlay}
-                  onClick={this.handleClick}
-                />
-              )}
+    dialog;
+    dialogRef = (tabTrap) => {
+        this.dialog = tabTrap && tabTrap.node;
+    };
+    render() {
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, ...restProps } = this.props;
+        const classes = classNames(styles.container, className);
+        const shortcutsMap = this.getShortcutsMap();
+        return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+        {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
+              <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope}/>
+              {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
+                // click handler is duplicated in close button
+                role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
               <div className={styles.innerContainer}>
-                <AdaptiveIsland
-                  className={classNames(styles.content, contentClassName)}
-                  data-test="ring-dialog"
-                  role="dialog"
-                  aria-label={label}
-                >
+                <AdaptiveIsland className={classNames(styles.content, contentClassName)} data-test="ring-dialog" role="dialog" aria-label={label}>
                   {children}
                   {showCloseButton &&
-                    (
-                      <Button
-                        icon={closeIcon}
-                        data-test="ring-dialog-close-button"
-                        className={classNames(styles.closeButton, {
-                          [styles.closeButtonOutside]: !closeButtonInside,
-                          [styles.closeButtonInside]: closeButtonInside
-                        })}
-                        iconClassName={styles.closeIcon}
-                        onClick={this.onCloseClick}
-                        aria-label="close dialog"
-                      />
-                    )
-                  }
+                    (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
+                            [styles.closeButtonOutside]: !closeButtonInside,
+                            [styles.closeButtonInside]: closeButtonInside
+                        })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} aria-label="close dialog"/>)}
                 </AdaptiveIsland>
               </div>
               {target}
-            </TabTrap>
-          )
-        }
-      </PopupTarget>,
-      portalTarget instanceof HTMLElement ? portalTarget : document.body
-    );
-  }
+            </TabTrap>)}
+      </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body);
+    }
 }

package/components/dialog/dialog__body-scroll-preventer.d.ts

@@ -0,0 +1,9 @@
+export declare const preventerFactory: (key: string | number) => {
+    prevent: () => void;
+    reset: () => void;
+};
+declare const _default: {
+    prevent: () => void;
+    reset: () => void;
+};
+export default _default;

package/components/dialog/dialog__body-scroll-preventer.js

@@ -1,59 +1,43 @@
 import scrollbarWidth from 'scrollbar-width';
-
 import styles from './dialog.css';
-
 const isPrevented = new Set();
 let previousDocumentWidth = null;
-
-const prevent = key => {
-  if (isPrevented.has(key)) {
-    return;
-  }
-
-  isPrevented.add(key);
-
-  if (isPrevented.size > 1) {
-    return;
-  }
-
-  const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
-    getComputedStyle(document.documentElement).overflowY === 'scroll';
-  document.documentElement.classList.add(styles.documentWithoutScroll);
-
-  const scrollWidth = scrollbarWidth();
-
-  if (documentHasScroll && scrollWidth > 0) {
-    previousDocumentWidth = document.documentElement.style.width;
-    document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
-  }
+const prevent = (key) => {
+    if (isPrevented.has(key)) {
+        return;
+    }
+    isPrevented.add(key);
+    if (isPrevented.size > 1) {
+        return;
+    }
+    const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
+        getComputedStyle(document.documentElement).overflowY === 'scroll';
+    document.documentElement.classList.add(styles.documentWithoutScroll);
+    const scrollWidth = scrollbarWidth();
+    if (documentHasScroll && scrollWidth != null && scrollWidth > 0) {
+        previousDocumentWidth = document.documentElement.style.width;
+        document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
+    }
 };
-
-const reset = key => {
-  if (isPrevented.size === 0) {
-    return;
-  }
-
-  isPrevented.delete(key);
-
-  if (isPrevented.size > 0) {
-    return;
-  }
-
-  document.documentElement.classList.remove(styles.documentWithoutScroll);
-
-  if (previousDocumentWidth !== null) {
-    document.documentElement.style.width = previousDocumentWidth;
-    previousDocumentWidth = null;
-  }
+const reset = (key) => {
+    if (isPrevented.size === 0) {
+        return;
+    }
+    isPrevented.delete(key);
+    if (isPrevented.size > 0) {
+        return;
+    }
+    document.documentElement.classList.remove(styles.documentWithoutScroll);
+    if (previousDocumentWidth !== null) {
+        document.documentElement.style.width = previousDocumentWidth;
+        previousDocumentWidth = null;
+    }
 };
-
-export const preventerFactory = key => {
-  const preventerKey = key || Math.random();
-
-  return {
-    prevent: () => prevent(preventerKey),
-    reset: () => reset(preventerKey)
-  };
+export const preventerFactory = (key) => {
+    const preventerKey = key || Math.random();
+    return {
+        prevent: () => prevent(preventerKey),
+        reset: () => reset(preventerKey)
+    };
 };
-
 export default preventerFactory('default-preventer');

package/components/dialog-ng/dialog-ng.examples.js

@@ -2,12 +2,12 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import InputNG from '@jetbrains/ring-ui/components/input-ng/input-ng';
-import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
+import ButtonNG from '../button-ng/button-ng';
+import SelectNG from '../select-ng/select-ng';
+import InputNG from '../input-ng/input-ng';
+import SidebarNG from '../sidebar-ng/sidebar-ng';
 
-import DialogNG from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
+import DialogNG from './dialog-ng';
 
 export default {
   title: 'Legacy Angular/Dialog Ng',

package/components/dialog-ng/dialog-ng__template.js

@@ -3,6 +3,7 @@ export default `<div
   ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
   ng-click="dialog.handleClick($event)"
   ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
+  ng-attr-data-test="ring-dialog-container"
 >
   <div ng-class="[dialog.dialogStyles.innerContainer]">
     <div data-anchor="dialog-container"

package/components/docked-panel-ng/docked-panel-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import PanelNG from '@jetbrains/ring-ui/components/panel-ng/panel-ng';
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import PanelNG from '../panel-ng/panel-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import DockedPanelNG from '@jetbrains/ring-ui/components/docked-panel-ng/docked-panel-ng';
+import DockedPanelNG from './docked-panel-ng';
 
 export default {
   title: 'Legacy Angular/Docked Panel Ng',

package/components/dropdown/anchor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonAttrs } from '../button/button';
+declare const _default: React.MemoExoticComponent<{
+    ({ children, className, ...restProps }: ButtonAttrs): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+}>;
+export default _default;

package/components/dropdown/anchor.js

@@ -1,32 +1,16 @@
-import React, {memo} from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import chevronDown from '@jetbrains/icons/chevron-10px';
 import classNames from 'classnames';
-
 import Icon from '../icon/icon';
-
 import Button from '../button/button';
-
 import styles from './dropdown.css';
-
-const Anchor = ({children, className, ...restProps}) => (
-  <Button
-    data-test-ring-dropdown-anchor
-    text
-    className={classNames(styles.anchor, className)}
-    {...restProps}
-  >
+const Anchor = ({ children, className, ...restProps }) => (<Button data-test-ring-dropdown-anchor text className={classNames(styles.anchor, className)} {...restProps}>
     {children}
-    <Icon
-      glyph={chevronDown}
-      className={styles.chevron}
-    />
-  </Button>
-);
-
+    <Icon glyph={chevronDown} className={styles.chevron}/>
+  </Button>);
 Anchor.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
+    children: PropTypes.node,
+    className: PropTypes.string
 };
-
 export default memo(Anchor);

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,77 @@
+import React, { Component, HTMLAttributes, ReactNode, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { PopupAttrs } from '../popup/popup';
+import Anchor from './anchor';
+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.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<PropTypes.ReactElementLike | ((...args: any[]) => any)>;
+        initShown: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        activeClassName: PropTypes.Requireable<string>;
+        clickMode: PropTypes.Requireable<boolean>;
+        hoverMode: PropTypes.Requireable<boolean>;
+        hoverShowTimeOut: PropTypes.Requireable<number>;
+        hoverHideTimeOut: PropTypes.Requireable<number>;
+        onShow: PropTypes.Requireable<(...args: any[]) => any>;
+        onHide: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        initShown: boolean;
+        clickMode: boolean;
+        hoverMode: boolean;
+        hoverShowTimeOut: number;
+        hoverHideTimeOut: number;
+        onShow: () => void;
+        onHide: () => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    state: {
+        show: boolean;
+        pinned: boolean;
+    };
+    onClick: () => void;
+    onChildCloseAttempt: () => void;
+    hoverTimer?: number | null;
+    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void;
+    handlePopupInteraction: () => void;
+    toggle(show?: boolean): void;
+    _toggle(show: boolean, pinned?: boolean): void;
+    _clearTimer(): void;
+    render(): JSX.Element;
+}
+export declare type DropdownAttrs = JSX.LibraryManagedAttributes<typeof Dropdown, DropdownProps>;
+export { Anchor };