@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,62 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Theme from '../global/theme';
+export interface ProgressBarProps extends HTMLAttributes<HTMLElement> {
+    max: number;
+    value: number;
+    theme: Theme;
+    label: string;
+    global?: boolean | null | undefined;
+}
+/**
+ * @name Progress Bar
+ */
+export default class ProgressBar extends PureComponent<ProgressBarProps> {
+    /**
+     * @param {number} value The progress task value
+     * @param {number} max The maximum value
+     * @return {number} The progress task value in percents
+     * @private
+     */
+    static toPercent(value: number, max: number): number;
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        /**
+         * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+         * Should be placed directly inside body, will be positioned right below .ring-header
+         * if placed adjacent to it.
+         * @type {boolean}
+         */
+        global: PropTypes.Requireable<boolean>;
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        /**
+         * A floating point number that specifies minimum completion rate for a task to be considered
+         * complete. Default value is 1.0.
+         * @type {number}
+         */
+        max: PropTypes.Requireable<number>;
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        max: number;
+        value: number;
+        theme: Theme;
+        label: string;
+    };
+    progressbarWrapper?: (HTMLElement | null);
+    progressbarWrapperRef: (el: HTMLElement | null) => void;
+    progressbar?: (HTMLElement | null);
+    progressbarRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}
+export declare type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>;

package/components/progress-bar/progress-bar.js

@@ -1,103 +1,75 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Theme from '../global/theme';
-
 import styles from './progress-bar.css';
-
 /**
  * @name Progress Bar
  */
 export default class ProgressBar extends PureComponent {
-  /**
-   * @param {number} value The progress task value
-   * @param {number} max The maximum value
-   * @return {number} The progress task value in percents
-   * @private
-   */
-  static toPercent(value, max) {
-    const HUNDRED_PERCENT = 100;
-    const percents = (value * HUNDRED_PERCENT) / max;
-    return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
-  }
-
-  static propTypes = {
-    label: PropTypes.string,
-    theme: PropTypes.string,
-
     /**
-     * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
-     * Should be placed directly inside body, will be positioned right below .ring-header
-     * if placed adjacent to it.
-     * @type {boolean}
+     * @param {number} value The progress task value
+     * @param {number} max The maximum value
+     * @return {number} The progress task value in percents
+     * @private
      */
-    global: PropTypes.bool,
-
-    /**
-     * Custom class
-     * @type {string}
-     */
-    className: PropTypes.string,
-
-    style: PropTypes.object,
-
-    /**
-     * A floating point number that specifies minimum completion rate for a task to be considered
-     * complete. Default value is 1.0.
-     * @type {number}
-     */
-    max: PropTypes.number,
-
-    /**
-     * A floating point number that specifies current task completion rate.
-     * @type {number}
-     */
-    value: PropTypes.number
-  };
-
-  static defaultProps = {
-    max: 1.0,
-    value: 0,
-    theme: Theme.LIGHT,
-    label: 'Progress'
-  };
-
-  progressbarWrapperRef = el => {
-    this.progressbarWrapper = el;
-  };
-
-  progressbarRef = el => {
-    this.progressbar = el;
-  };
-
-  render() {
-    const {theme, className, global, max, value, label, ...otherProps} = this.props;
-
-    const width = value ? `${ProgressBar.toPercent(value, max)}%` : null;
-    const classes = classNames(styles.progressBar, className, {
-      [styles.light]: theme === Theme.LIGHT,
-      [styles.dark]: theme === Theme.DARK,
-      [styles.globalMode]: global
-    });
-
-    return (
-      <div
-        {...otherProps}
-        className={classes}
-        ref={this.progressbarWrapperRef}
-      >
-        <div
-          className={styles.line}
-          ref={this.progressbarRef}
-          role="progressbar"
-          aria-label={label}
-          aria-valuenow={value}
-          aria-valuemin={0}
-          aria-valuemax={max}
-          style={{width}}
-        />
-      </div>
-    );
-  }
+    static toPercent(value, max) {
+        const HUNDRED_PERCENT = 100;
+        const percents = (value * HUNDRED_PERCENT) / max;
+        return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
+    }
+    static propTypes = {
+        label: PropTypes.string,
+        theme: PropTypes.string,
+        /**
+         * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+         * Should be placed directly inside body, will be positioned right below .ring-header
+         * if placed adjacent to it.
+         * @type {boolean}
+         */
+        global: PropTypes.bool,
+        /**
+         * Custom class
+         * @type {string}
+         */
+        className: PropTypes.string,
+        style: PropTypes.object,
+        /**
+         * A floating point number that specifies minimum completion rate for a task to be considered
+         * complete. Default value is 1.0.
+         * @type {number}
+         */
+        max: PropTypes.number,
+        /**
+         * A floating point number that specifies current task completion rate.
+         * @type {number}
+         */
+        value: PropTypes.number
+    };
+    static defaultProps = {
+        max: 1.0,
+        value: 0,
+        theme: Theme.LIGHT,
+        label: 'Progress'
+    };
+    progressbarWrapper;
+    progressbarWrapperRef = (el) => {
+        this.progressbarWrapper = el;
+    };
+    progressbar;
+    progressbarRef = (el) => {
+        this.progressbar = el;
+    };
+    render() {
+        const { theme, className, global, max, value, label, ...otherProps } = this.props;
+        const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
+        const classes = classNames(styles.progressBar, className, {
+            [styles.light]: theme === Theme.LIGHT,
+            [styles.dark]: theme === Theme.DARK,
+            [styles.globalMode]: global
+        });
+        return (<div {...otherProps} className={classes} ref={this.progressbarWrapperRef}>
+        <div className={styles.line} ref={this.progressbarRef} role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max} style={{ width }}/>
+      </div>);
+    }
 }

package/components/progress-bar-ng/progress-bar-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import RingProgressBar from '@jetbrains/ring-ui/components/progress-bar-ng/progress-bar-ng';
+import RingProgressBar from './progress-bar-ng';
 
 const disableAnimations = window.location.search.includes('block-animations');
 

package/components/promised-click-ng/promised-click-ng.examples.js

@@ -2,9 +2,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 PromisedClickNG from '@jetbrains/ring-ui/components/promised-click-ng/promised-click-ng';
+import PromisedClickNG from './promised-click-ng';
 
 export default {
   title: 'Legacy Angular/Promised Click Ng',

package/components/query-assist/query-assist.d.ts

@@ -0,0 +1,332 @@
+import React, { Component, ComponentRef, ReactNode, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import Caret, { Position } from '../caret/caret';
+import PopupMenu from '../popup-menu/popup-menu';
+import Theme from '../global/theme';
+import Button from '../button/button';
+import { ShortcutsMap } from '../shortcuts/core';
+import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
+declare function noop(): void;
+export interface QueryAssistTranslations {
+    searchTitle: string;
+    clearTitle: string;
+}
+export interface FocusChange {
+    focus: boolean;
+}
+export interface QueryAssistChange {
+    query: string;
+    caret: number;
+    focus?: boolean;
+    selection?: Position | number | null;
+    dirty?: boolean;
+    suggestionsQuery?: string;
+}
+export interface QueryAssistResponse {
+    query?: string | undefined;
+    caret?: number | undefined;
+    styleRanges?: readonly StyleRange[] | undefined;
+    suggestions?: readonly QueryAssistSuggestion[] | undefined;
+}
+export interface QueryAssistRequestParams {
+    query: string;
+    caret: number;
+    omitSuggestions?: boolean;
+}
+export interface QueryAssistProps {
+    theme: Theme;
+    onApply: (change: QueryAssistChange) => void;
+    onChange: (change: QueryAssistChange) => void;
+    onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
+    onClear: () => void;
+    onFocusChange: (change: FocusChange) => void;
+    translations: QueryAssistTranslations;
+    autoOpen?: boolean | null | undefined;
+    caret?: number | null | undefined;
+    clear?: boolean | null | undefined;
+    className?: string | null | undefined;
+    popupClassName?: string | null | undefined;
+    dataSource: (params: QueryAssistRequestParams) => Promise<QueryAssistResponse> | QueryAssistResponse;
+    delay?: number | null | undefined;
+    disabled?: boolean | undefined;
+    focus?: boolean | null | undefined;
+    hint?: string | null | undefined;
+    hintOnSelection?: string | null | undefined;
+    glass?: boolean | null | undefined;
+    loader?: boolean | null | undefined;
+    placeholder?: string | null | undefined;
+    query?: string | null | undefined;
+    useCustomItemRender?: boolean | null | undefined;
+    actions?: ReactNode[] | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+interface StyleRange {
+    style: string;
+    start: number;
+    length: number;
+}
+interface QueryAssistState {
+    dirty: boolean | undefined;
+    query: string | null | undefined;
+    placeholderEnabled: boolean;
+    shortcuts?: boolean;
+    suggestions: readonly QueryAssistSuggestion[];
+    showPopup: boolean;
+    prevQuery?: string | null | undefined;
+    loading?: boolean;
+    styleRanges?: readonly StyleRange[];
+}
+interface CaretPositionParams {
+    fromContentEditable?: boolean | null | undefined;
+    forceSetCaret?: boolean | null | undefined;
+}
+interface HistoryEntry {
+    query: string | null | undefined;
+    caret: Position | number;
+}
+/**
+ * @name Query Assist
+ */
+/**
+ * ## Data source function
+
+ Component class calls a data source function when user input happens and passes an object with fields \`caret\`, \`focus\` and \`query\` as the only argument.
+ The function must return an object with the fields described below. The object can be optionally wrapped in a Promise.
+
+ ### Return object fields
+
+ \`caret\` and \`query\` should just return server values provided to data source function.
+ These fields allow the Query Assist component to recognise and drop earlier responses from the server.
+
+ + __caret__ (\`string=0\`) Caret from request
+ + __query__ (\`string=''\`) Query from request
+ + __styleRanges__ (\`Array<suggestion>=\`) Array of \`styleRange\` objects, used to highlight the request in the input field
+ + __suggestions__ (\`Array<styleRange>\`) Array of \`suggestion\` objects to show.
+
+ ### **styleRange** object fields
+
+ start \`number\` Range start (in characters)
+ length \`number\` Range length (in characters)
+ style \`string\` Style of the range. Possible values: \`text\`, \`field_value\`, \`field_name\`, \`operator\`
+
+ ### **suggestion** object fields
+
+ + __prefix__ \`string=\` Suggestion option prefix
+ + __option__ \`string\` Suggestion option
+ + __suffix__ \`string=\` Suggestion option suffix
+ + __description__ \`string=\` Suggestion option description. Is not visible when a group is set
+ + __matchingStart__ \`number\` (required when matchingEnd is set) Start of the highlighted part of an option in the suggestions list (in characters)
+ + __matchingEnd__ \`number\` (required when matchingEnd is set) End of the highlighted part of an option in the suggestions list (in characters)
+ + __caret__ \`number\` Caret position after option completion (in characters)
+ + __completionStart__ \`number\` Where to start insertion (or replacement, when completing with the \`Tab\` key) of the completion option (in characters)
+ + __completionEnd__ \`number\` Where to end insertion of the completion option (in characters)
+ + __group__ \`string=\` Group title. Options with the same title are grouped under it
+ + __icon__ \`string=\` Icon URI, Data URI is possible
+ */
+export default class QueryAssist extends Component<QueryAssistProps> {
+    static propTypes: {
+        theme: PropTypes.Requireable<string>;
+        /**
+         * Open suggestions popup during the initial render
+         */
+        autoOpen: PropTypes.Requireable<boolean>;
+        /**
+         * Initial caret position
+         */
+        caret: PropTypes.Requireable<number>;
+        /**
+         * Show clickable "cross" icon on the right which clears the query
+         */
+        clear: PropTypes.Requireable<boolean>;
+        /**
+         * Additional class for the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Additional class for the popup
+         */
+        popupClassName: PropTypes.Requireable<string>;
+        /**
+         * Data source function
+         */
+        dataSource: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Input debounce delay
+         */
+        delay: PropTypes.Requireable<number>;
+        /**
+         * Disable the component
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Initial focus
+         */
+        focus: PropTypes.Requireable<boolean>;
+        /**
+         * Hint under the suggestions list
+         */
+        hint: PropTypes.Requireable<string>;
+        /**
+         * Hint under the suggestions list visible when a suggestion is selected
+         */
+        hintOnSelection: PropTypes.Requireable<string>;
+        /**
+         * Show clickable "glass" icon on the right which applies the query
+         */
+        glass: PropTypes.Requireable<boolean>;
+        /**
+         * Show loader when a data request is in process
+         */
+        loader: PropTypes.Requireable<boolean>;
+        /**
+         * Field placeholder value
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Called when the query is applied. An object with fields `caret`, `focus` and `query` is passed as an argument
+         */
+        onApply: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the query is changed. An object with fields `caret` and `query` is passed as an argument
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the query is cleared. Called without arguments
+         */
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the suggestion is applied
+         */
+        onApplySuggestion: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the focus status is changed. An object with fields `focus` is passed as an argument
+         */
+        onFocusChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Initial query
+         */
+        query: PropTypes.Requireable<string>;
+        useCustomItemRender: PropTypes.Requireable<boolean>;
+        translations: PropTypes.Requireable<object>;
+        actions: PropTypes.Requireable<any[]>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        theme: Theme;
+        onApply: typeof noop;
+        onChange: typeof noop;
+        onApplySuggestion: typeof noop;
+        onClear: typeof noop;
+        onFocusChange: typeof noop;
+        translations: {
+            searchTitle: string;
+            clearTitle: string;
+        };
+    };
+    static getDerivedStateFromProps({ query }: QueryAssistProps, { prevQuery }: QueryAssistState): Partial<QueryAssistState>;
+    constructor(props: QueryAssistProps);
+    state: QueryAssistState;
+    componentDidMount(): void;
+    shouldComponentUpdate(props: QueryAssistProps, state: QueryAssistState): boolean;
+    componentDidUpdate(prevProps: QueryAssistProps): void;
+    static ngModelStateField: string;
+    static Theme: typeof Theme;
+    immediateState: QueryAssistChange;
+    requestData?: (afterCompletion?: boolean) => void;
+    ngModelStateField: string;
+    historyStack: HistoryEntry[];
+    mouseIsDownOnPopup?: boolean;
+    handleFocusChange: (e: SyntheticEvent) => void;
+    node?: HTMLElement | null;
+    nodeRef: (node: HTMLElement | null) => void;
+    updateFocus({ focus, caret }: QueryAssistProps): void;
+    setCaretPosition: (params?: CaretPositionParams) => void;
+    scrollInput(): void;
+    getQuery(): string;
+    isRenderingGlassOrLoader(): boolean | undefined;
+    togglePlaceholder: () => void;
+    isComposing?: boolean;
+    handleInput: (e: Event | SyntheticEvent) => void;
+    handleEnter: (e: React.KeyboardEvent) => void;
+    handleTab: (e: Event) => boolean | void;
+    setState: (state: Partial<QueryAssistState>, resolve?: (() => void) | undefined) => void;
+    private _pushHistory;
+    undo: (e: Event) => void;
+    handlePaste: (e: React.ClipboardEvent) => void;
+    handleCaretMove: (e: Event | SyntheticEvent) => void;
+    handleStyleRangesResponse: ({ suggestions, ...restProps }: QueryAssistResponse) => Promise<void>;
+    handleResponse: ({ query, caret, styleRanges, suggestions }: QueryAssistResponse, afterCompletion?: boolean) => Promise<void>;
+    handleApply: () => void;
+    handleComplete: (data?: SuggestionItem | undefined, replace?: boolean | undefined) => void;
+    requestStyleRanges: () => Promise<void>;
+    requestHandler: (afterCompletion?: boolean) => Promise<void>;
+    sendRequest(params: QueryAssistRequestParams): Promise<QueryAssistResponse>;
+    getPopupOffset(suggestions: readonly QueryAssistSuggestion[]): number;
+    handleCtrlSpace: (e: Event) => void;
+    trackPopupMouseState: (e: SyntheticEvent) => void;
+    trackCompositionState: (e: SyntheticEvent) => void;
+    closePopup: () => void;
+    clearQuery: () => void;
+    blurInput(): void;
+    /**
+     * Optionally setup data request delay. For each component create a separate
+     * instance of the delayed function. This may help reduce the load on the server
+     * when the user quickly inputs data.
+     */
+    setupRequestHandler(delay?: number | null): void;
+    private _renderSuggestion;
+    renderSuggestions(): import("../list/consts").ListDataItem<SuggestionItem>[];
+    renderQuery(): "" | JSX.Element[] | null | undefined;
+    setFocus(focus: boolean | null | undefined): void;
+    input?: HTMLElement | null;
+    caret?: Caret;
+    inputRef: (node: HTMLElement | null) => void;
+    _popup?: PopupMenu<SuggestionItem> | null;
+    popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
+    placeholder?: HTMLElement | null;
+    placeholderRef: (node: HTMLElement | null) => void;
+    glass?: ComponentRef<typeof Button> | null;
+    glassRef: (node: ComponentRef<typeof Button> | null) => void;
+    loader?: HTMLElement | null;
+    loaderRef: (node: HTMLElement | null) => void;
+    clear?: ComponentRef<typeof Button> | null;
+    clearRef: (node: ComponentRef<typeof Button> | null) => void;
+    shortcutsScope: string;
+    shortcutsMap: ShortcutsMap;
+    renderActions(): React.ReactNode[];
+    render(): JSX.Element;
+}
+export declare type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
+export declare const RerenderableQueryAssist: {
+    new (props: QueryAssistProps): {
+        _propsCache: Readonly<QueryAssistProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void | Element | React.Component<QueryAssistProps, any, any>;
+        node?: HTMLElement | null | undefined;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<QueryAssistProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): React.ReactNode;
+        readonly props: Readonly<QueryAssistProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<QueryAssistProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<QueryAssistProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<QueryAssistProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<QueryAssistProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<QueryAssistProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+};
+export {};