@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,276 +0,0 @@
-@import "../global/variables.css";
-@import "../button/button.css";
-
-@value unit from "../global/global.css";
-@value overInputZIndex: 2;
-@value inputGap: calc(unit * 3);
-
-.queryAssist {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: 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

@@ -1,333 +0,0 @@
-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: {
-    new (props: QueryAssistProps): {
-        _propsCache: QueryAssistProps & React.RefAttributes<unknown>;
-        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        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>;
-        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 {};