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

package/components/checkbox/checkbox.js

@@ -1,13 +1,10 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark';
 import minusIcon from '@jetbrains/icons/remove-10px';
-
 import Icon from '../icon/icon';
-
 import styles from './checkbox.css';
-
 /**
  * @name Checkbox
  */
@@ -15,86 +12,55 @@ import styles from './checkbox.css';
  * Displays a checkbox.
  */
 export default class Checkbox extends PureComponent {
-
-  static propTypes = {
-    name: PropTypes.string,
-    label: PropTypes.string,
-    className: PropTypes.string,
-    containerClassName: PropTypes.string,
-    containerStyle: PropTypes.object,
-    cellClassName: PropTypes.string,
-    labelClassName: PropTypes.string,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    indeterminate: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    if (this.input != null) {
-      this.input.indeterminate = this.props.indeterminate;
+    static propTypes = {
+        name: PropTypes.string,
+        label: PropTypes.string,
+        className: PropTypes.string,
+        containerClassName: PropTypes.string,
+        containerStyle: PropTypes.object,
+        cellClassName: PropTypes.string,
+        labelClassName: PropTypes.string,
+        defaultChecked: PropTypes.bool,
+        checked: PropTypes.bool,
+        indeterminate: PropTypes.bool,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
+        children: PropTypes.node
+    };
+    static defaultProps = {
+        indeterminate: false
+    };
+    componentDidMount() {
+        if (this.input != null) {
+            this.input.indeterminate = this.props.indeterminate;
+        }
     }
-  }
-
-  componentDidUpdate(prevProps) {
-    const {indeterminate} = this.props;
-    if (this.input != null && indeterminate !== prevProps.indeterminate) {
-      this.input.indeterminate = this.props.indeterminate;
+    componentDidUpdate(prevProps) {
+        const { indeterminate } = this.props;
+        if (this.input != null && indeterminate !== prevProps.indeterminate) {
+            this.input.indeterminate = this.props.indeterminate;
+        }
     }
-  }
-
-  inputRef = el => {
-    if (el != null) {
-      el.indeterminate = this.props.indeterminate;
-    }
-    this.input = el;
-  };
-
-  render() {
-    const {
-      children,
-      label,
-      className,
-      containerClassName,
-      containerStyle,
-      cellClassName,
-      labelClassName,
-      indeterminate,
-      ...restProps
-    } = this.props;
-
-    const classes = classNames(styles.input, className);
-    const containerClasses = classNames(styles.checkbox, containerClassName);
-    const cellClasses = classNames(styles.cell, cellClassName);
-    const labelClasses = classNames(styles.label, labelClassName);
-
-    return (
-      <label
-        className={containerClasses}
-        style={containerStyle}
-        data-test="ring-checkbox"
-      >
-        <input
-          {...restProps}
-          data-checked={restProps.checked}
-          ref={this.inputRef}
-          type="checkbox"
-          className={classes}
-        />
+    input;
+    inputRef = (el) => {
+        if (el != null) {
+            el.indeterminate = this.props.indeterminate;
+        }
+        this.input = el;
+    };
+    render() {
+        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, ...restProps } = this.props;
+        const classes = classNames(styles.input, className);
+        const containerClasses = classNames(styles.checkbox, containerClassName);
+        const cellClasses = classNames(styles.cell, cellClassName);
+        const labelClasses = classNames(styles.label, labelClassName);
+        return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
+        <input {...restProps} data-checked={restProps.checked} ref={this.inputRef} type="checkbox" className={classes}/>
         <span className={cellClasses}>
-          <Icon
-            glyph={checkmarkIcon}
-            className={styles.check}
-          />
-          <Icon
-            glyph={minusIcon}
-            className={styles.minus}
-          />
+          <Icon glyph={checkmarkIcon} className={styles.check}/>
+          <Icon glyph={minusIcon} className={styles.minus}/>
         </span>
         <span className={labelClasses}>{label || children}</span>
-      </label>
-    );
-  }
+      </label>);
+    }
 }

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

@@ -3,9 +3,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
+import CheckboxNG from './checkbox-ng';
 
 export default {
   title: 'Legacy Angular/Checkbox Ng',

package/components/code/code.d.ts

@@ -0,0 +1,43 @@
+import React, { PureComponent, Ref } from 'react';
+import PropTypes from 'prop-types';
+import highlight from 'highlight.js/lib/core';
+declare function noop(): void;
+export interface CodeProps {
+    code: string;
+    inline: boolean;
+    softWrap: boolean;
+    replacer: ((element: HTMLElement | null) => void);
+    className?: string | null | undefined;
+    language?: string | null | undefined;
+    codeRef?: Ref<HTMLElement> | null | undefined;
+}
+/**
+ * @name Code
+ */
+export default class Code extends PureComponent<CodeProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        code: PropTypes.Validator<string>;
+        inline: PropTypes.Requireable<boolean>;
+        softWrap: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        replacer: PropTypes.Requireable<(...args: any[]) => any>;
+        codeRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }>>;
+    };
+    static defaultProps: {
+        inline: boolean;
+        softWrap: boolean;
+        replacer: typeof noop;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    code?: HTMLElement | null;
+    highlight(): Promise<void>;
+    get codeRef(): HTMLElement | null | undefined;
+    get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
+    render(): JSX.Element;
+}
+declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { code, highlight };

package/components/code/code.js

@@ -1,118 +1,94 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import highlight from 'highlight.js/lib/core';
-
 import normalizeIndent from '../global/normalize-indent';
 import trivialTemplateTag from '../global/trivial-template-tag';
 import memoize from '../global/memoize';
-
 import styles from './code.css';
 import highlightStyles from './highlight.css';
-
-function noop() {}
-
-const registerLanguage = memoize(async language => {
-  const languageExports = await import(
+function noop() { }
+const registerLanguage = memoize(async (language) => {
+    const languageExports = await import(
     /* webpackChunkName: "highlight-[request]" */
-    `highlight.js/lib/languages/${language}`
-  );
-  highlight.registerLanguage(language, languageExports.default);
+    `highlight.js/lib/languages/${language}`);
+    highlight.registerLanguage(language, languageExports.default);
 });
-
 /**
  * @name Code
  */
-
 export default class Code extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    code: PropTypes.string.isRequired,
-    inline: PropTypes.bool,
-    softWrap: PropTypes.bool,
-    language: PropTypes.string,
-    replacer: PropTypes.func,
-    codeRef: PropTypes.oneOfType([
-      PropTypes.shape({current: PropTypes.instanceOf(Element)}),
-      PropTypes.func
-    ])
-  };
-
-  static defaultProps = {
-    inline: false,
-    softWrap: false,
-    replacer: noop
-  };
-
-  componentDidMount() {
-    this.highlight();
-  }
-
-  componentDidUpdate() {
-    this.highlight();
-  }
-
-  async highlight() {
-    const codeRef = this.codeRef;
-    if (codeRef == null) {
-      return;
+    static propTypes = {
+        className: PropTypes.string,
+        code: PropTypes.string.isRequired,
+        inline: PropTypes.bool,
+        softWrap: PropTypes.bool,
+        language: PropTypes.string,
+        replacer: PropTypes.func,
+        codeRef: PropTypes.oneOfType([
+            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+            PropTypes.func
+        ])
+    };
+    static defaultProps = {
+        inline: false,
+        softWrap: false,
+        replacer: noop
+    };
+    componentDidMount() {
+        this.highlight();
     }
-    const {language, inline, replacer} = this.props;
-    if (!inline) {
-      if (language != null && highlight.getLanguage(language) == null) {
-        await registerLanguage(language);
-      }
-      highlight.highlightElement(codeRef);
+    componentDidUpdate() {
+        this.highlight();
     }
-    replacer(codeRef);
-  }
-
-  get codeRef() {
-    const {codeRef} = this.props;
-    return !codeRef || this.isFunctionCodeRef ? this.code : codeRef.current;
-  }
-
-  get isFunctionCodeRef() {
-    return typeof (this.props.codeRef) === 'function';
-  }
-
-  get initCodeRef() {
-    const {codeRef} = this.props;
-    if (codeRef && !this.isFunctionCodeRef) {
-      return codeRef;
+    code;
+    async highlight() {
+        const codeRef = this.codeRef;
+        if (codeRef == null) {
+            return;
+        }
+        const { language, inline, replacer } = this.props;
+        if (!inline) {
+            if (language != null && highlight.getLanguage(language) == null) {
+                await registerLanguage(language);
+            }
+            // @ts-expect-error https://github.com/highlightjs/highlight.js/issues/2945
+            highlight.highlightElement(codeRef);
+        }
+        replacer(codeRef);
     }
-    return ref => {
-      this.code = ref;
-      if (this.isFunctionCodeRef) {
-        codeRef(this.code);
-      }
-    };
-  }
-
-  render() {
-    const {code, className, inline, softWrap, language} = this.props;
-
-    const Tag = inline ? 'span' : 'pre';
-    const classes = classNames(styles.code, className, language, {
-      [styles.inline]: inline,
-      [styles.softWrap]: softWrap
-    });
-
-    return (
-      <Tag className={classes}>
-        <code
-          // should be focusable because it can be scrollable
-          tabIndex={inline ? -1 : 0}
-          ref={this.initCodeRef}
-          className={highlightStyles.highlightContainer}
-        >
+    get codeRef() {
+        const { codeRef } = this.props;
+        return !codeRef || typeof codeRef === 'function' ? this.code : codeRef.current;
+    }
+    get initCodeRef() {
+        const { codeRef } = this.props;
+        const isFunctionCodeRef = typeof codeRef === 'function';
+        if (codeRef && !isFunctionCodeRef) {
+            return codeRef;
+        }
+        return (ref) => {
+            this.code = ref;
+            if (isFunctionCodeRef) {
+                codeRef(this.code);
+            }
+        };
+    }
+    render() {
+        const { code, className, inline, softWrap, language } = this.props;
+        const Tag = inline ? 'span' : 'pre';
+        const classes = classNames(styles.code, className, language, {
+            [styles.inline]: inline,
+            [styles.softWrap]: softWrap
+        });
+        return (<Tag className={classes}>
+        <code 
+        // should be focusable because it can be scrollable
+        tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
           {normalizeIndent(code)}
         </code>
-      </Tag>
-    );
-  }
+      </Tag>);
+    }
 }
-
-const code = trivialTemplateTag(source => <Code code={source}/>);
-
-export {code, highlight};
+const code = trivialTemplateTag((source) => <Code code={source}/>);
+export { code, highlight };

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import CompilerNG from '@jetbrains/ring-ui/components/compiler-ng/compiler-ng';
+import CompilerNG from './compiler-ng';
 
 export default {
   title: 'Legacy Angular/Compiler Ng',

package/components/confirm/confirm.d.ts

@@ -0,0 +1,48 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ConfirmProps {
+    text: string;
+    description: ReactNode;
+    show: boolean;
+    rejectOnEsc: boolean;
+    inProgress: boolean;
+    cancelIsDefault: boolean;
+    confirmLabel: string;
+    rejectLabel: string;
+    onConfirm: ((event: React.MouseEvent<HTMLButtonElement>) => void);
+    onReject: ((event?: React.MouseEvent<HTMLButtonElement>) => void);
+    className?: string | undefined;
+}
+/**
+ * @name Confirm
+ */
+export default class Confirm extends PureComponent<ConfirmProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        show: PropTypes.Requireable<boolean>;
+        rejectOnEsc: PropTypes.Requireable<boolean>;
+        inProgress: PropTypes.Requireable<boolean>;
+        cancelIsDefault: PropTypes.Requireable<boolean>;
+        confirmLabel: PropTypes.Requireable<string>;
+        rejectLabel: PropTypes.Requireable<string>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onReject: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        text: null;
+        description: null;
+        show: boolean;
+        rejectOnEsc: boolean;
+        inProgress: boolean;
+        cancelIsDefault: boolean;
+        confirmLabel: string;
+        rejectLabel: string;
+        onConfirm: () => void;
+        onReject: () => void;
+    };
+    onEscPress: () => void;
+    render(): JSX.Element;
+}
+export declare type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -1,101 +1,59 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-
 import Dialog from '../dialog/dialog';
 import Button from '../button/button';
-import {Content, Header} from '../island/island';
+import { Content, Header } from '../island/island';
 import Panel from '../panel/panel';
-
 import styles from './confirm.css';
-
 /**
  * @name Confirm
  */
-
 export default class Confirm extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    text: PropTypes.string,
-    description: PropTypes.node,
-
-    show: PropTypes.bool,
-    rejectOnEsc: PropTypes.bool,
-    inProgress: PropTypes.bool,
-    cancelIsDefault: PropTypes.bool,
-    confirmLabel: PropTypes.string,
-    rejectLabel: PropTypes.string,
-
-    onConfirm: PropTypes.func,
-    onReject: PropTypes.func
-  };
-
-  static defaultProps = {
-    text: null,
-    description: null,
-    show: false,
-    rejectOnEsc: true,
-    inProgress: false,
-    cancelIsDefault: false,
-    confirmLabel: 'OK',
-    rejectLabel: 'Cancel',
-    onConfirm: () => {},
-    onReject: () => {}
-  };
-
-  onEscPress = () => {
-    if (this.props.rejectOnEsc) {
-      this.props.onReject();
-    }
-  };
-
-  render() {
-    const {
-      show,
-      className,
-      inProgress,
-      cancelIsDefault,
-      text,
-      description,
-      confirmLabel,
-      rejectLabel,
-      onConfirm,
-      onReject
-    } = this.props;
-
-    return (
-      <Dialog
-        label={text || description}
-        className={className}
-        onEscPress={this.onEscPress}
-        show={show}
-        trapFocus
-        data-test="ring-confirm"
-      >
+    static propTypes = {
+        className: PropTypes.string,
+        text: PropTypes.string,
+        description: PropTypes.node,
+        show: PropTypes.bool,
+        rejectOnEsc: PropTypes.bool,
+        inProgress: PropTypes.bool,
+        cancelIsDefault: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        rejectLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onReject: PropTypes.func
+    };
+    static defaultProps = {
+        text: null,
+        description: null,
+        show: false,
+        rejectOnEsc: true,
+        inProgress: false,
+        cancelIsDefault: false,
+        confirmLabel: 'OK',
+        rejectLabel: 'Cancel',
+        onConfirm: () => { },
+        onReject: () => { }
+    };
+    onEscPress = () => {
+        if (this.props.rejectOnEsc) {
+            this.props.onReject();
+        }
+    };
+    render() {
+        const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject } = this.props;
+        return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm">
         {text && <Header>{text}</Header>}
         <Content>
           {description && <div className={styles.description}>{description}</div>}
         </Content>
         <Panel>
-          <Button
-            data-test="confirm-ok-button"
-            primary={!cancelIsDefault}
-            loader={inProgress}
-            disabled={inProgress}
-            onClick={onConfirm}
-          >
+          <Button data-test="confirm-ok-button" primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
             {confirmLabel}
           </Button>
-          <Button
-            data-test="confirm-reject-button"
-            onClick={onReject}
-            disabled={inProgress}
-            primary={cancelIsDefault}
-          >
+          <Button data-test="confirm-reject-button" onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
             {rejectLabel}
           </Button>
         </Panel>
-      </Dialog>
-    );
-  }
+      </Dialog>);
+    }
 }
-

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

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import {hideConfirm} from '@jetbrains/ring-ui/components/confirm-service/confirm-service';
+import {hideConfirm} from '../confirm-service/confirm-service';
 
-import ConfirmNG from '@jetbrains/ring-ui/components/confirm-ng/confirm-ng';
+import ConfirmNG from './confirm-ng';
 
 export default {
   title: 'Legacy Angular/Confirm Ng',

package/components/confirm-service/confirm-service.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * @name Confirm Service
+ */
+export declare const containerElement: HTMLDivElement;
+export interface ConfirmServiceParams {
+    text?: string | undefined;
+    description?: ReactNode;
+    cancelIsDefault?: boolean | undefined;
+    confirmLabel?: string | undefined;
+    rejectLabel?: string | undefined;
+    onBeforeConfirm?: (() => void) | undefined;
+}
+export default function confirm({ text, description, confirmLabel, rejectLabel, cancelIsDefault, onBeforeConfirm }: ConfirmServiceParams): Promise<void>;
+export declare function hideConfirm(): void;