@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/query-assist/query-assist.css

@@ -0,0 +1,275 @@
+@import "../global/variables.css";
+@import "../button/button.css";
+
+@value overInputZIndex: 2;
+@value inputGap: calc(var(--ring-unit) * 3);
+
+.queryAssist {
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
+  --ring-input-padding-block: 1px;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-height: calc(var(--ring-input-padding-inline) * 3);
+  padding: var(--ring-input-padding-block) var(--ring-input-padding-inline);
+
+  transition: border-color var(--ring-ease);
+
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  &:focus-within {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
+  }
+
+  .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+}
+
+.queryAssistDisabled {
+  color: var(--ring-disabled-color);
+  border-color: var(--ring-border-disabled-color);
+  background-color: var(--ring-disabled-background-color);
+
+  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+}
+
+.huge {
+  max-height: calc(var(--ring-input-padding-inline) * 4);
+
+  padding: 0 0 0 var(--ring-input-padding-inline);
+
+  & .actions {
+    padding-right: var(--ring-input-padding-inline);
+  }
+
+  [dir="rtl"] & {
+    padding: 0 var(--ring-input-padding-inline) 0 0;
+
+    & .actions {
+      padding: 0 var(--ring-input-padding-inline);
+    }
+  }
+}
+
+.input {
+  overflow: hidden;
+
+  flex-grow: 1;
+
+  margin: 0;
+
+  cursor: text;
+
+  transition: border-color var(--ring-ease);
+  white-space: nowrap;
+
+  color: var(--ring-text-color);
+  outline: none;
+  background: transparent;
+
+  font: inherit;
+  scrollbar-width: none;
+
+  caret-color: var(--ring-main-color);
+}
+
+.letter-text {
+  color: var(--ring-warning-color);
+}
+
+.letterDefault,
+.letter-field-name {
+  color: var(--ring-text-color);
+}
+
+.letter-field-value {
+  color: var(--ring-link-color);
+}
+
+.letter-operator {
+  color: var(--ring-secondary-color);
+}
+
+.letter-error {
+  padding-bottom: 1px;
+
+  border-bottom: 1px solid var(--ring-icon-error-color);
+}
+
+.highlight {
+  font-weight: 600;
+}
+
+.service {
+  color: var(--ring-secondary-color);
+}
+
+.placeholder {
+  composes: resetButton from "../global/global.css";
+
+  position: absolute;
+
+  display: block;
+  overflow: hidden;
+
+  width: calc(100% - var(--ring-input-padding-inline) * 4);
+  padding-left: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
+
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+
+  [dir="rtl"] & {
+    padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);
+
+    text-align: right;
+  }
+}
+
+.hugePlaceholder {
+  padding-left: 0;
+}
+
+.letter {
+  display: inline;
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  max-height: calc(var(--ring-input-padding-inline) * 2);
+  padding-left: var(--ring-input-padding-inline);
+
+  line-height: inherit;
+
+  [dir="rtl"] & {
+    padding: 0 var(--ring-input-padding-inline) 0 0;
+  }
+}
+
+.icon {
+  padding-right: var(--ring-input-padding-inline);
+
+  color: var(--ring-icon-secondary-color);
+
+  [dir="rtl"] & {
+    padding: 0 0 0 var(--ring-input-padding-inline);
+  }
+}
+
+.rightSearchButton {
+  padding: 5px 9px;
+
+  cursor: pointer;
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  border: 1px solid var(--ring-borders-color);
+  border-right: 0;
+  border-radius: var(--ring-border-radius);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  .queryAssist.queryAssist:focus-within & {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  .queryAssist:hover & {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  [dir="rtl"] & {
+    border-right: 1px solid var(--ring-borders-color);
+    border-left: 0;
+    border-radius: var(--ring-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.clear {
+  top: 1px;
+
+  padding-right: 0;
+
+  [dir="rtl"] & {
+    padding-right: var(--ring-input-padding-inline);
+    padding-left: 0;
+  }
+}
+
+.input::-webkit-scrollbar {
+  display: none;
+}
+
+.withoutGlass {
+  padding-left: 0;
+
+  [dir="rtl"] & {
+    padding-right: calc(var(--ring-input-padding-block) * 3);
+  }
+}
+
+.loaderActive {
+  padding-right: calc(var(--ring-input-padding-inline) - var(--ring-input-padding-block));
+}
+
+.loaderOnTheRight {
+  padding-right: 0;
+
+  [dir="rtl"] & {
+    padding-left: 0;
+  }
+}
+
+.inputRevertOrder {
+  order: -1;
+}

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

@@ -0,0 +1,306 @@
+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 Button from '../button/button';
+import Icon from '../icon/icon';
+import { Size } from '../input/input';
+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;
+    prevCaret?: number | null;
+    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 {
+    onApply: (change: QueryAssistChange) => void;
+    onChange: (change: QueryAssistChange) => void;
+    onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
+    onClear: () => void;
+    onFocusChange: (change: FocusChange) => void;
+    translations?: QueryAssistTranslations | null | undefined;
+    autoOpen?: boolean | null | undefined | 'force';
+    caret?: number | null | undefined;
+    clear?: boolean | null | undefined;
+    className?: string | null | undefined;
+    popupClassName?: string | null | undefined;
+    inputClassName?: 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;
+    huge?: boolean | null | undefined;
+    size: Size;
+}
+export 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: {
+        /**
+         * Open suggestions popup during the initial render
+         */
+        autoOpen: PropTypes.Requireable<string | 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>;
+        /**
+         * Additional class for the input
+         */
+        inputClassName: 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>;
+        huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onApply: typeof noop;
+        onChange: typeof noop;
+        onApplySuggestion: typeof noop;
+        onClear: typeof noop;
+        onFocusChange: typeof noop;
+        size: Size;
+    };
+    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;
+    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) => 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, replace?: boolean) => 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(): "" | React.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 Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | 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;
+    listShortcutsMap: ShortcutsMap;
+    renderActions(): React.ReactNode[];
+    render(): React.JSX.Element;
+}
+export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
+export declare const RerenderableQueryAssist: React.ForwardRefExoticComponent<QueryAssistProps & React.RefAttributes<QueryAssist>>;
+export {};