@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/link-ng/link-ng.test.js

@@ -0,0 +1,29 @@
+/*global inject*/
+import 'angular';
+import 'angular-mocks';
+
+import linkStyles from '../link/link.css';
+
+import Link from './link-ng';
+
+describe('LinkNg', () => {
+  let element;
+  let scope;
+  let $compile;
+
+  beforeEach(window.module(Link));
+
+  beforeEach(inject(($rootScope, _$compile_) => {
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+    element = $compile('<rg-link href="http://google.com"></rg-link>')(scope)[0];
+  }));
+
+  it('should replace with a tag', () => {
+    element.should.match(`a.${linkStyles.link.split(' ')[0]}`);
+  });
+
+  it('should pass attributes to a tag', () => {
+    element.should.have.attribute('href', 'http://google.com');
+  });
+});

package/components/list/consts.d.ts

@@ -0,0 +1,77 @@
+import React, { ComponentType, ReactNode, ReactElement, SyntheticEvent } from 'react';
+import { LinkProps } from '../link/link';
+import { IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
+/**
+ * @enum {number}
+ */
+export declare enum Type {
+    SEPARATOR = 0,
+    LINK = 1,
+    ITEM = 2,
+    HINT = 3,
+    CUSTOM = 4,
+    TITLE = 5,
+    MARGIN = 6
+}
+export declare enum Dimension {
+    ITEM_PADDING = 16,
+    ITEM_HEIGHT = 32,
+    COMPACT_ITEM_HEIGHT = 24,
+    SEPARATOR_HEIGHT = 25,
+    SEPARATOR_FIRST_HEIGHT = 16,
+    SEPARATOR_TEXT_HEIGHT = 18,
+    TITLE_HEIGHT = 42,
+    INNER_PADDING = 8,
+    MARGIN = 8
+}
+export declare const DEFAULT_ITEM_TYPE = Type.ITEM;
+export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' | 'onMouseUp'>> & {
+    rgItemType?: Type | null | undefined;
+    key?: string | number | null | undefined;
+    disabled?: boolean | undefined;
+    details?: string | null | undefined;
+    hoverClassName?: string | null | undefined;
+    compact?: boolean | null | undefined;
+    className?: string | null | undefined;
+    url?: string | undefined;
+    showGeneratedAvatar?: boolean | null | undefined;
+    username?: string | null | undefined;
+    avatar?: string | null | undefined;
+    subavatar?: string | null | undefined;
+    glyph?: IconType | string | null | undefined;
+    icon?: string | undefined;
+    iconSize?: Size | null | undefined;
+    rightGlyph?: IconType | string | null | undefined;
+    title?: string | null | undefined;
+    level?: number | null | undefined;
+    checkbox?: boolean | undefined;
+    description?: ReactNode;
+    label?: ReactNode;
+    rightNodes?: ReactNode;
+    leftNodes?: ReactNode;
+    tagName?: keyof JSX.IntrinsicElements | null | undefined;
+    selectedLabel?: string | null | undefined;
+    originalModel?: never;
+    LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
+    template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    labelWrapper?: (children: ReactNode) => ReactElement;
+    custom?: boolean | null | undefined;
+    onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
+    onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
+};
+export interface ListDataItemAddProps {
+    className?: string;
+    compact?: boolean | null | undefined;
+    hover: boolean;
+    onMouseOver: (e: SyntheticEvent) => void;
+    tabIndex: number;
+    scrolling: boolean;
+    onMouseUp?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onClick: (e: SyntheticEvent) => void;
+    onCheckboxChange: (e: React.ChangeEvent) => void;
+    isFirst?: boolean;
+    'data-test'?: string | null | undefined;
+}
+export type ListDataItemProps<T = unknown> = Omit<ListDataItem<T>, keyof ListDataItemAddProps> & ListDataItemAddProps;

package/components/list/consts.js

@@ -0,0 +1,29 @@
+/**
+ * @enum {number}
+ */
+export var Type;
+(function (Type) {
+    Type[Type["SEPARATOR"] = 0] = "SEPARATOR";
+    Type[Type["LINK"] = 1] = "LINK";
+    Type[Type["ITEM"] = 2] = "ITEM";
+    Type[Type["HINT"] = 3] = "HINT";
+    Type[Type["CUSTOM"] = 4] = "CUSTOM";
+    Type[Type["TITLE"] = 5] = "TITLE";
+    Type[Type["MARGIN"] = 6] = "MARGIN";
+})(Type || (Type = {}));
+// TODO refactor to plain object in 6.0
+export var Dimension;
+(function (Dimension) {
+    Dimension[Dimension["ITEM_PADDING"] = 16] = "ITEM_PADDING";
+    Dimension[Dimension["ITEM_HEIGHT"] = 32] = "ITEM_HEIGHT";
+    Dimension[Dimension["COMPACT_ITEM_HEIGHT"] = 24] = "COMPACT_ITEM_HEIGHT";
+    Dimension[Dimension["SEPARATOR_HEIGHT"] = 25] = "SEPARATOR_HEIGHT";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    Dimension[Dimension["SEPARATOR_FIRST_HEIGHT"] = 16] = "SEPARATOR_FIRST_HEIGHT";
+    Dimension[Dimension["SEPARATOR_TEXT_HEIGHT"] = 18] = "SEPARATOR_TEXT_HEIGHT";
+    Dimension[Dimension["TITLE_HEIGHT"] = 42] = "TITLE_HEIGHT";
+    Dimension[Dimension["INNER_PADDING"] = 8] = "INNER_PADDING";
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    Dimension[Dimension["MARGIN"] = 8] = "MARGIN";
+})(Dimension || (Dimension = {}));
+export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -0,0 +1,301 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value listSpacing: unit;
+
+.list {
+  position: relative;
+
+  z-index: 1;
+
+  border-radius: var(--ring-border-radius);
+
+  line-height: normal;
+}
+
+.simpleInner {
+  overflow: auto;
+}
+
+.scrolling {
+  pointer-events: none;
+}
+
+.separator {
+  display: block;
+
+  min-height: listSpacing;
+
+  margin-top: listSpacing;
+  padding: 0 calc(unit * 2) 1px;
+
+  text-align: right;
+  white-space: nowrap;
+
+  color: var(--ring-secondary-color);
+  border-top: 1px solid var(--ring-line-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lower);
+}
+
+.separator_first {
+  margin-top: 0;
+  padding-top: 0;
+
+  border: none;
+}
+
+.item {
+  display: block;
+
+  box-sizing: border-box;
+
+  width: 100%;
+
+  text-align: left;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-decoration: none;
+
+  outline: none;
+
+  font-size: var(--ring-font-size);
+}
+
+.item.item {
+  padding: 3px calc(unit * 2) 5px;
+
+  line-height: calc(unit * 3);
+}
+
+.itemContainer {
+  position: relative;
+}
+
+.compact {
+  line-height: calc(unit * 2);
+}
+
+.error {
+  cursor: default;
+
+  /* Override ring-link */
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    color: var(--ring-error-color);
+  }
+}
+
+.add {
+  padding: unit calc(2 * unit);
+
+  line-height: calc(4 * unit);
+}
+
+.top {
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+}
+
+.left {
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.label {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  [dir="rtl"] & {
+    text-align: right;
+    direction: ltr;
+  }
+}
+
+.description {
+  overflow: hidden;
+  flex-shrink: 100;
+
+  padding-left: unit;
+
+  text-align: right;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  font-weight: 400;
+  line-height: var(--ring-line-height-lowest);
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+
+.details {
+  margin-bottom: 6px;
+
+  white-space: normal;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.padded {
+  margin-left: 20px;
+}
+
+/* Override :last-child */
+.hint.hint {
+  margin-bottom: 0;
+
+  border-top: 1px solid var(--ring-line-color);
+  background-color: var(--ring-sidebar-background-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.action {
+  cursor: pointer;
+
+  color: var(--ring-text-color);
+}
+
+/* override link */
+.actionLink.actionLink {
+  transition: none;
+}
+
+.hover:not(.error) {
+  background-color: var(--ring-selected-background-color);
+}
+
+.icon {
+  display: inline-block;
+
+  width: 20px;
+  height: 20px;
+  margin-left: calc(unit * 2);
+
+  background-repeat: no-repeat;
+  background-position: center;
+
+  background-size: contain;
+}
+
+.highlight {
+  color: var(--ring-link-hover-color);
+}
+
+.service {
+  color: var(--ring-secondary-color);
+}
+
+.glyph {
+  float: left;
+
+  width: 20px;
+
+  margin-right: unit;
+
+  color: var(--ring-icon-secondary-color);
+}
+
+.avatar {
+  composes: glyph;
+
+  top: 0;
+
+  height: 20px;
+
+  object-fit: cover;
+  object-position: center;
+}
+
+.rightGlyph {
+  composes: glyph;
+
+  float: right;
+
+  margin-right: 0;
+  margin-left: calc(unit * 2);
+}
+
+.checkboxContainer {
+  position: absolute;
+  top: 7px;
+  left: 19px;
+
+  width: 20px;
+  height: 20px;
+  margin-right: unit;
+}
+
+.compact .checkboxContainer {
+  top: 0;
+
+  width: calc(unit * 2);
+  height: calc(unit * 2);
+}
+
+.title {
+  display: block;
+
+  margin-top: 10px;
+  margin-bottom: 6px;
+  padding: listSpacing calc(unit * 2) 0;
+
+  text-align: left;
+
+  [dir="rtl"] & {
+    text-align: right;
+    direction: ltr;
+  }
+}
+
+.title_first {
+  margin-top: 0;
+}
+
+.text {
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.fade {
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: calc(unit * 3);
+
+  pointer-events: none;
+
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ring-content-background-color));
+}
+
+.disabled {
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+}

package/components/list/list.d.ts

@@ -0,0 +1,195 @@
+/**
+ * @name List
+ */
+import React, { Component, ReactNode, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import VirtualizedList, { ListRowProps } from 'react-virtualized/dist/es/List';
+import { Size } from 'react-virtualized/dist/es/AutoSizer';
+import { WindowScrollerChildProps } from 'react-virtualized/dist/es/WindowScroller';
+import { ShortcutsMap } from '../shortcuts/core';
+import ListHint from './list__hint';
+import { Dimension, ListDataItem, ListDataItemProps, Type } from './consts';
+export type { ListDataItem };
+declare function noop(): void;
+/**
+ * @param {Type} listItemType
+ * @param {Object} item list item
+ */
+declare function isItemType<T>(listItemType: Type, item: ListDataItem<T>): boolean;
+export interface SelectHandlerParams {
+    tryKeepOpen?: boolean;
+}
+export interface ListProps<T = unknown> {
+    data: readonly ListDataItem<T>[];
+    restoreActiveIndex: boolean;
+    activateSingleItem: boolean;
+    activateFirstItem: boolean;
+    onMouseOut: (e: SyntheticEvent<HTMLElement>) => void;
+    onSelect: (item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void;
+    onScrollToBottom: () => void;
+    onResize: (info: Size) => void;
+    shortcuts: boolean;
+    shortcutsMap?: ShortcutsMap;
+    renderOptimization: boolean;
+    disableMoveDownOverflow: boolean;
+    ariaLabel: string;
+    id?: string | undefined;
+    className?: string | null | undefined;
+    hint?: ReactNode;
+    hintOnSelection?: string | null | undefined;
+    maxHeight?: number | null | undefined;
+    activeIndex?: number | null | undefined;
+    useMouseUp?: boolean | null | undefined;
+    visible?: boolean | null | undefined;
+    disableMoveOverflow?: boolean | null | undefined;
+    compact?: boolean | null | undefined;
+    disableScrollToActive?: boolean | null | undefined;
+    hidden?: boolean | null | undefined;
+}
+export declare const ActiveItemContext: {
+    ValueContext: React.Context<string | undefined>;
+    UpdateContext: React.Context<(value: string | undefined) => void>;
+    Provider: {
+        ({ children }: import("../global/create-stateful-context").ProviderProps): React.JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+        displayName: string;
+    };
+    useUpdate: (value: string | undefined, skipUpdate?: boolean | undefined) => void;
+    Updater: React.MemoExoticComponent<{
+        ({ value, skipUpdate }: import("../global/create-stateful-context").UpdaterProps<string | undefined>): null;
+        displayName: string;
+    }>;
+};
+export interface ListState<T = unknown> {
+    activeIndex: number | null;
+    prevActiveIndex: number | null;
+    prevData: ListDataItem<T>[];
+    activeItem: ListDataItem<T> | null;
+    needScrollToActive: boolean;
+    scrolling: boolean;
+    hasOverflow: boolean;
+    disabledHover: boolean;
+    scrolledToBottom: boolean;
+}
+interface RenderVirtualizedInnerParams extends Partial<WindowScrollerChildProps> {
+    height: number;
+    maxHeight?: number;
+    autoHeight?: boolean;
+    rowCount: number;
+}
+/**
+ * @name List
+ * @constructor
+ * @extends {ReactComponent}
+ */
+/**
+ * Displays a list of items.
+ */
+export default class List<T = unknown> extends Component<ListProps<T>, ListState<T>> {
+    static propTypes: {
+        id: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        hintOnSelection: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        maxHeight: PropTypes.Requireable<number>;
+        activeIndex: PropTypes.Requireable<number>;
+        restoreActiveIndex: PropTypes.Requireable<boolean>;
+        activateSingleItem: PropTypes.Requireable<boolean>;
+        activateFirstItem: PropTypes.Requireable<boolean>;
+        shortcuts: PropTypes.Requireable<boolean>;
+        shortcutsMap: PropTypes.Requireable<object>;
+        onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        onResize: PropTypes.Requireable<(...args: any[]) => any>;
+        useMouseUp: PropTypes.Requireable<boolean>;
+        visible: PropTypes.Requireable<boolean>;
+        renderOptimization: PropTypes.Requireable<boolean>;
+        disableMoveOverflow: PropTypes.Requireable<boolean>;
+        disableMoveDownOverflow: PropTypes.Requireable<boolean>;
+        compact: PropTypes.Requireable<boolean>;
+        disableScrollToActive: PropTypes.Requireable<boolean>;
+        hidden: PropTypes.Requireable<boolean>;
+        ariaLabel: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        data: never[];
+        restoreActiveIndex: boolean;
+        activateSingleItem: boolean;
+        activateFirstItem: boolean;
+        onMouseOut: typeof noop;
+        onSelect: typeof noop;
+        onScrollToBottom: typeof noop;
+        onResize: typeof noop;
+        shortcuts: boolean;
+        renderOptimization: boolean;
+        disableMoveDownOverflow: boolean;
+        ariaLabel: string;
+    };
+    state: ListState<T>;
+    static getDerivedStateFromProps(nextProps: ListProps, prevState: ListState): {
+        prevActiveIndex: number | null | undefined;
+        prevData: readonly ListDataItem<unknown>[];
+    };
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: ListProps<T>, nextState: ListState<T>): boolean;
+    componentDidUpdate(prevProps: ListProps<T>): void;
+    componentWillUnmount(): void;
+    scheduleScrollListener: (cb: () => void) => void;
+    scheduleHoverListener: (cb: () => void) => void;
+    static isItemType: typeof isItemType;
+    static ListHint: typeof ListHint;
+    static ListProps: {
+        Type: typeof Type;
+        Dimension: typeof Dimension;
+    };
+    virtualizedList?: VirtualizedList | null;
+    unmounted?: boolean;
+    container?: HTMLElement | null;
+    hoverHandler: (arg: number) => () => void;
+    private _bufferSize;
+    sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
+    private _cache;
+    private _hasActivatableItems;
+    hasActivatableItems(): any;
+    activateFirst: () => void;
+    selectHandler: (arg: number) => (event: Event | SyntheticEvent, tryKeepOpen?: boolean) => void;
+    checkboxHandler: (arg: number) => (event: SyntheticEvent) => void;
+    upHandler: (e: KeyboardEvent) => void;
+    downHandler: (e: KeyboardEvent) => void;
+    homeHandler: (e: KeyboardEvent) => void;
+    endHandler: (e: KeyboardEvent) => void;
+    onDocumentMouseMove: () => void;
+    onDocumentKeyDown: (e: KeyboardEvent) => void;
+    moveHandler(index: number, retryCallback: (e: KeyboardEvent) => void, e: KeyboardEvent): void;
+    mouseHandler: () => void;
+    scrollHandler: () => void;
+    enterHandler: (event: KeyboardEvent, shortcut?: string) => boolean;
+    getFirst(): ListDataItem<T> | undefined;
+    getSelected(): ListDataItem<T> | null;
+    clearSelected: () => void;
+    defaultItemHeight(): Dimension.ITEM_HEIGHT | Dimension.COMPACT_ITEM_HEIGHT;
+    scrollEndHandler: () => void;
+    checkOverflow: () => void;
+    getVisibleListHeight(maxHeight: number): number;
+    private _deprecatedGenerateKeyFromContent;
+    getId(item: ListDataItem<T> | null): string | undefined;
+    renderItem: ({ index, style, isScrolling, parent, key }: Partial<ListRowProps>) => React.JSX.Element;
+    addItemDataTestToProp: (props: ListDataItemProps<T>) => ListDataItemProps<T>;
+    virtualizedListRef: (el: VirtualizedList | null) => void;
+    containerRef: (el: HTMLElement | null) => void;
+    private _inner?;
+    get inner(): HTMLElement | null | undefined;
+    renderVirtualizedInner({ height, maxHeight, autoHeight, rowCount, isScrolling, onChildScroll, scrollTop, registerChild }: RenderVirtualizedInnerParams): React.JSX.Element;
+    renderVirtualized(maxHeight: number | null | undefined, rowCount: number): React.JSX.Element;
+    renderSimple(maxHeight: number | null | undefined, rowCount: number): React.JSX.Element;
+    id: string;
+    shortcutsScope: string;
+    shortcutsMap: ShortcutsMap;
+    /** @override */
+    render(): React.JSX.Element;
+}
+export type ListAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof List, ListProps<T>>;