@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/select/select.css

@@ -1,236 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value button-shadow from "../button/button.css";
-
-.select {
-  position: relative;
-
-  display: inline-block;
-
-  white-space: nowrap;
-
-  color: var(--ring-text-color);
-}
-
-.toolbar {
-  border-top: 1px solid var(--ring-line-color);
-}
-
-.button {
-  width: 100%;
-  padding: 0;
-
-  text-align: left;
-
-  [dir="rtl"] & {
-    text-align: right;
-    direction: ltr;
-  }
-
-  .toolbar & {
-    height: calc(4 * unit);
-    margin: unit 0;
-  }
-
-  &.buttonSpaced {
-    padding: 0 calc(2 * unit);
-  }
-}
-
-.icons {
-  position: absolute;
-  top: 0;
-  right: 5px;
-  bottom: 0;
-
-  transition: color var(--ring-ease);
-
-  color: var(--ring-icon-secondary-color);
-
-  line-height: normal;
-
-  .inputMode & {
-    font-size: var(--ring-font-size);
-  }
-}
-
-.selectedIcon {
-  composes: resetButton from "../global/global.css";
-
-  position: relative;
-  top: 3px;
-
-  display: inline-block;
-
-  width: calc(2 * unit);
-  height: calc(2 * unit);
-  margin: 0 4px;
-
-  background-repeat: no-repeat;
-  background-position: center;
-
-  background-size: contain;
-}
-
-.clearIcon {
-  padding: 0 3px;
-
-  vertical-align: -2px;
-}
-
-.sizeS {
-  width: calc(unit * 12);
-}
-
-.sizeM {
-  width: calc(unit * 30);
-}
-
-.sizeL {
-  width: calc(unit * 50);
-}
-
-.sizeFULL {
-  width: 100%;
-}
-
-.sizeAUTO {
-  max-width: 100%;
-}
-
-.buttonMode {
-  position: relative;
-
-  cursor: pointer;
-}
-
-.value {
-  composes: ellipsis from "../global/global.css";
-  composes: font from "../global/global.css";
-
-  display: inline-block;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(unit * 4 + 1px);
-  padding: 0 0 3px;
-
-  cursor: pointer;
-  transition: color var(--ring-ease), border-color var(--ring-ease);
-  text-align: left;
-  vertical-align: top;
-
-  color: var(--ring-text-color);
-
-  border: none;
-  border-bottom: 1px solid var(--ring-borders-color);
-  outline: none;
-  background: transparent;
-
-  &:focus {
-    border-color: var(--ring-main-color);
-  }
-
-  &.open,
-  &:active {
-    border-color: transparent;
-  }
-
-  &::-moz-focus-inner {
-    padding: 0;
-
-    border: 0;
-    outline: 0;
-  }
-}
-
-.buttonContainer {
-  position: relative;
-
-  font-size: var(--ring-font-size);
-}
-
-.buttonValue {
-  composes: ellipsis from "../global/global.css";
-
-  display: block;
-
-  width: 100%;
-  padding-left: unit;
-
-  text-align: left;
-  vertical-align: calc(0 - unit);
-}
-
-.buttonValue:focus-visible {
-  box-shadow: button-shadow var(--ring-main-color);
-}
-
-.buttonValueOpen.buttonValueOpen {
-  box-shadow: button-shadow var(--ring-main-color);
-}
-
-.buttonValueEmpty.buttonValueEmpty {
-  color: var(--ring-disabled-color);
-}
-
-.heightS .buttonValue {
-  font-size: var(--ring-font-size);
-}
-
-.label {
-  position: relative;
-
-  color: var(--ring-secondary-color);
-}
-
-.select:hover .value,
-.select:hover .icons,
-:focus-visible + .icons,
-.value:focus,
-.value:focus + .icons,
-.open,
-.open + .icons,
-.buttonValueOpen + .icons {
-  transition: none;
-
-  color: var(--ring-main-color);
-}
-
-.disabled {
-  pointer-events: none;
-
-  color: var(--ring-disabled-color);
-
-  & .value {
-    color: var(--ring-disabled-color);
-    border-bottom-style: dashed;
-  }
-}
-
-.avatar {
-  margin-right: 4px;
-
-  vertical-align: -5px;
-}
-
-.popup {
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 40);
-}
-
-.chevron.chevron {
-  padding: 0 3px;
-
-  transition: none;
-  vertical-align: -1px;
-
-  color: inherit;
-}
-
-.chevronIcon.chevronIcon {
-  transition: none;
-
-  color: inherit;
-}

package/components/select/select.d.ts

@@ -1,303 +0,0 @@
-import React, { ButtonHTMLAttributes, Component, ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, SyntheticEvent } from 'react';
-import { SelectHandlerParams } from '../list/list';
-import { Size } from '../input/input';
-import { LabelType } from '../control-label/control-label';
-import { ListDataItem } from '../list/consts';
-import { Directions } from '../popup/popup.consts';
-import { ControlsHeight } from '../global/controls-height';
-import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
-/**
- * @name Select
- */
-declare function noop(): void;
-/**
- * @enum {number}
- */
-export declare enum Type {
-    BUTTON = "BUTTON",
-    INPUT = "INPUT",
-    CUSTOM = "CUSTOM",
-    INLINE = "INLINE",
-    INPUT_WITHOUT_CONTROLS = "INPUT_WITHOUT_CONTROLS"
-}
-type SelectItemData<T> = T & {
-    key: string | number;
-    isResetItem?: boolean | null | undefined;
-    separator?: boolean | null | undefined;
-};
-export type SelectItem<T = unknown> = ListDataItem<SelectItemData<T>>;
-declare function getLowerCaseLabel<T>(item: SelectItem<T>): string | null;
-declare function doesLabelMatch<T>(itemToCheck: SelectItem<T>, fn: (label: string) => boolean): boolean;
-export interface Add {
-    alwaysVisible?: boolean | null | undefined;
-    regexp?: RegExp | null | undefined;
-    minlength?: number | null | undefined;
-    label?: ((filterString: string) => string) | string | null | undefined;
-    prefix?: string | null | undefined;
-    delayed?: boolean | null | undefined;
-}
-export interface DataTestProps {
-    'data-test'?: string | null | undefined;
-}
-export interface CustomAnchorProps {
-    wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {
-        ref: RefCallback<HTMLElement>;
-    };
-    buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> & {
-        onClick: () => void;
-    } & DataTestProps;
-    popup: ReactNode;
-}
-export type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
-export interface BaseSelectProps<T = unknown> {
-    data: readonly SelectItem<T>[];
-    filter: boolean | Filter<T>;
-    filterIcon?: string | ComponentType | null | undefined;
-    filterRef?: Ref<HTMLInputElement>;
-    clear: boolean;
-    loading: boolean;
-    disabled: boolean;
-    loadingMessage?: string;
-    notFoundMessage?: string;
-    type: Type;
-    size: Size;
-    hideSelected: boolean;
-    allowAny: boolean;
-    maxHeight: number;
-    hideArrow: boolean;
-    showPopup: boolean;
-    directions: readonly Directions[];
-    label: string | null;
-    selectedLabel: ReactNode;
-    labelType?: LabelType;
-    inputPlaceholder: string;
-    shortcutsEnabled: boolean;
-    tryKeepOpen?: boolean;
-    onBeforeOpen: () => void;
-    onLoadMore: () => void;
-    onOpen: () => void;
-    onFilter: (value: string) => void;
-    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur: () => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
-    onDeselect: (selected: SelectItem<T> | null) => void;
-    onOutsideClick: (e: PointerEvent) => void;
-    onAdd: (value: string) => void;
-    onDone: () => void;
-    onReset: () => void;
-    dir: 'ltr' | 'rtl';
-    renderBottomToolbar?: () => ReactNode;
-    renderTopToolbar?: () => ReactNode;
-    height?: ControlsHeight | undefined;
-    targetElement?: HTMLElement | null | undefined;
-    className?: string | null | undefined;
-    buttonClassName?: string | null | undefined;
-    id?: string | undefined;
-    getInitial?: (() => string) | null | undefined;
-    minWidth?: number | undefined;
-    popupClassName?: string | null | undefined;
-    popupStyle?: CSSProperties | undefined;
-    top?: number | undefined;
-    left?: number | undefined;
-    renderOptimization?: boolean | undefined;
-    ringPopupTarget?: string | null | undefined;
-    error?: ReactNode | null | undefined;
-    hint?: ReactNode;
-    add?: Add | null | undefined;
-    compact?: boolean | null | undefined;
-    customAnchor?: CustomAnchor | null | undefined;
-    disableMoveOverflow?: boolean | null | undefined;
-    disableScrollToActive?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-export interface SingleSelectProps<T = unknown> extends BaseSelectProps<T> {
-    multiple: false;
-    onClose: (selected: SelectItem<T> | null) => void;
-    onChange: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
-    selected?: SelectItem<T> | null | undefined;
-    tags?: null | undefined;
-}
-export interface MultipleSelectProps<T = unknown> extends BaseSelectProps<T> {
-    multiple: true | Multiple;
-    selected: readonly SelectItem<T>[];
-    onClose: (selected: SelectItem<T>[]) => void;
-    onChange: (selected: SelectItem<T>[], event?: Event | SyntheticEvent) => void;
-    tags?: Tags | boolean | null | undefined;
-}
-export type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
-interface AddButton {
-    prefix: string | null | undefined;
-    label: string;
-    delayed: boolean;
-}
-export interface SelectState<T = unknown> {
-    data: SelectItem<T>[];
-    shownData: SelectItem<T>[];
-    selected: SelectItem<T> | SelectItem<T>[] | null | undefined;
-    selectedIndex: number | null;
-    filterValue: string;
-    shortcutsEnabled: boolean;
-    popupShortcuts: boolean;
-    showPopup: boolean;
-    prevData: readonly SelectItem<T>[];
-    prevSelected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined;
-    prevMultiple: Multiple | boolean | null | undefined;
-    multipleMap: Record<string, boolean>;
-    addButton: AddButton | null;
-    focused?: boolean;
-}
-/**
- * @name Select
- * @constructor
- * @extends {Component}
- */
-/**
- * Displays a select.
- */
-export default class Select<T = unknown> extends Component<SelectProps<T>, SelectState<T>> {
-    static defaultProps: {
-        data: never[];
-        filter: boolean;
-        filterIcon: null;
-        filterRef: typeof noop;
-        multiple: boolean;
-        clear: boolean;
-        loading: boolean;
-        disabled: boolean;
-        type: Type;
-        size: Size;
-        targetElement: null;
-        hideSelected: boolean;
-        allowAny: boolean;
-        hideArrow: boolean;
-        showPopup: boolean;
-        maxHeight: number;
-        directions: Directions[];
-        selected: null;
-        label: null;
-        selectedLabel: null;
-        inputPlaceholder: string;
-        hint: null;
-        shortcutsEnabled: boolean;
-        onBeforeOpen: typeof noop;
-        onLoadMore: typeof noop;
-        onOpen: typeof noop;
-        onClose: typeof noop;
-        onFilter: typeof noop;
-        onFocus: typeof noop;
-        onBlur: typeof noop;
-        onKeyDown: typeof noop;
-        onSelect: typeof noop;
-        onDeselect: typeof noop;
-        onOutsideClick: typeof noop;
-        onChange: typeof noop;
-        onAdd: typeof noop;
-        onDone: typeof noop;
-        onReset: typeof noop;
-        tags: null;
-        ringPopupTarget: null;
-        dir: string;
-    };
-    static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
-    state: SelectState<T>;
-    componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>): void;
-    static contextType: React.Context<ControlsHeight>;
-    static Type: typeof Type;
-    static Size: typeof Size;
-    id: string;
-    shortcutsScope: string;
-    listId: string;
-    private _focusHandler;
-    private _blurHandler;
-    node?: HTMLElement | null;
-    nodeRef: (el: HTMLElement | null) => void;
-    _popup: SelectPopup<SelectItemData<T>> | null;
-    onEmptyPopupEnter: () => void;
-    focus: () => void;
-    private _onEnter;
-    private _onEsc;
-    _inputShortcutHandler: () => void;
-    getValueForFilter(selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined): string;
-    _getSelectedIndex(selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined, data: readonly SelectItem<T>[]): number | null;
-    popupRef: (el: SelectPopup<SelectItemData<T>> | null) => void;
-    _getResetOption(): SelectItem<T> | null;
-    _prependResetOption(shownData: SelectItem<T>[]): SelectItem<T>[];
-    private _renderPopup;
-    _showPopup(): void;
-    _hidePopup(tryFocusAnchor?: boolean): void;
-    addHandler: () => void;
-    getToolbar(): React.JSX.Element | null;
-    getTopbar(): React.ReactNode;
-    getLowerCaseLabel: typeof getLowerCaseLabel;
-    doesLabelMatch: typeof doesLabelMatch;
-    getFilterFn(): FilterFn<T>;
-    getListItems(rawFilterString: string, data?: SelectItem<T>[]): SelectItem<T>[];
-    filterValue(): string;
-    filterValue(setValue: string): void;
-    isInputMode(): boolean;
-    _clickHandler: () => void;
-    _openPopupIfClosed: () => void;
-    _filterChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    private _setFilter;
-    private _rebuildMultipleMap;
-    _redrawPopup: () => void;
-    _listSelectHandler: (selected: SelectItem<T>, event?: Event, opts?: SelectHandlerParams) => void;
-    _listSelectAllHandler: (isSelectAll?: boolean) => void;
-    private _onCloseAttempt;
-    clearFilter: (e?: SyntheticEvent) => void;
-    clear: (event?: Event | SyntheticEvent) => boolean;
-    _selectionIsEmpty(): boolean;
-    private _getLabel;
-    private _getPlaceholder;
-    _getSelectedString(): string | null;
-    private _getIcons;
-    private _getAvatar;
-    filter?: HTMLInputElement | null;
-    filterRef: (el: HTMLInputElement | null) => void;
-    getShortcutsMap(): {
-        enter: () => true | undefined;
-        esc: (event: KeyboardEvent) => boolean | undefined;
-        up: () => void;
-        down: () => void;
-        right: typeof noop;
-        left: typeof noop;
-        'shift+up': typeof noop;
-        'shift+down': typeof noop;
-        space: typeof noop;
-    };
-    renderSelect(activeItemId: string | undefined): React.JSX.Element;
-    render(): React.JSX.Element;
-}
-export type SingleSelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SingleSelectProps<T>>;
-export type MultipleSelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, MultipleSelectProps<T>>;
-export type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
-export declare const RerenderableSelect: {
-    new (props: SelectProps<unknown>): {
-        _propsCache: SelectProps<unknown> & React.RefAttributes<unknown>;
-        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        setState<K extends keyof SelectState<unknown>>(state: SelectState<unknown> | ((prevState: Readonly<SelectState<unknown>>, props: Readonly<SelectProps<unknown>>) => SelectState<unknown> | Pick<SelectState<unknown>, K> | null) | Pick<SelectState<unknown>, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<SelectProps<unknown>>;
-        state: Readonly<SelectState<unknown>>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<SelectProps<unknown>>, prevState: Readonly<SelectState<unknown>>): any;
-        componentDidUpdate?(prevProps: Readonly<SelectProps<unknown>>, prevState: Readonly<SelectState<unknown>>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<SelectProps<unknown>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<SelectProps<unknown>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<SelectProps<unknown>>, nextState: Readonly<SelectState<unknown>>, nextContext: any): void;
-    };
-};
-export {};