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

package/components/table-legacy/table-legacy.css

@@ -0,0 +1,346 @@
+@import "./table-legacy__toolbar.css";
+
+:global(.ring-table) {
+  width: 100%;
+
+  border-spacing: 0;
+
+  border-collapse: collapse;
+  background-color: transparent;
+
+  font-size: var(--ring-font-size);
+}
+
+:global(.ring-table__header) {
+  display: table-row;
+
+  background-color: var(--ring-sidebar-background-color);
+}
+
+:global(.ring-table__header-checkbox) {
+  position: relative;
+  top: 1px;
+  left: -2px;
+
+  display: inline-block;
+}
+
+:global(.ring-table__title) {
+  position: relative;
+
+  display: table-cell;
+
+  padding: 0 var(--ring-unit);
+
+  text-align: left;
+  white-space: nowrap;
+
+  color: var(--ring-text-color);
+  border-top: 1px solid var(--ring-sidebar-background-color);
+  border-bottom: 1px solid var(--ring-line-color);
+
+  font-size: var(--ring-font-size-smaller);
+  font-weight: normal;
+  line-height: 23px;
+}
+
+:global(.ring-table__title.ring-table__title_active) {
+  font-weight: bold;
+}
+
+:global(.ring-table__title:first-child) {
+  padding-left: calc(var(--ring-unit) * 4);
+}
+
+/* Have to emulate right border because of Fx weird bug —
+*  https://jetpass.myjetbrains.com/youtrack/issue/JPS-1634
+*  Removing border-collapse: collapse from .ring-table helps too,
+*  but to implement nested items markup without it is next to impossible.
+**/
+:global(.ring-table__title::after) {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  bottom: 0;
+
+  display: block;
+
+  width: 1px;
+
+  content: normal;
+
+  background-color: var(--ring-sidebar-background-color);
+}
+
+:global(.ring-table__title_border::after) {
+  content: "";
+}
+
+:global(.ring-table__title_nested) {
+  padding-left: calc(var(--ring-unit) * 5);
+}
+
+/* fix header checkbox position in nested table */
+:global(.ring-table__title_nested.ring-table__header-checkbox) {
+  left: -26px;
+}
+
+:global(.ring-table__toggle) {
+  position: relative;
+  top: 9px;
+
+  display: inline-block;
+
+  width: 12px;
+  height: 9px;
+
+  margin-left: calc(var(--ring-unit) * 2);
+  padding-bottom: 21px;
+
+  cursor: pointer;
+
+  color: var(--ring-line-color);
+
+  font-size: 14px;
+}
+
+:global(.ring-table__toggle:hover) {
+  color: var(--ring-text-color);
+}
+
+:global(.ring-table__toggle-icon) {
+  float: right;
+}
+
+:global(.ring-table__toggle-icon:hover) {
+  color: var(--ring-link-hover-color);
+}
+
+:global(.ring-table__column-inline-avatar) {
+  display: inline-block;
+
+  vertical-align: middle;
+}
+
+:global(.ring-table__column-inline-avatar-img) {
+  margin: -6px 8px;
+}
+
+:global(.ring-table__column_selector) {
+  min-width: calc(3 * var(--ring-unit));
+  padding: 0 !important;
+
+  text-align: center;
+}
+
+:global(.ring-table__selector) {
+  display: inline-block;
+
+  margin: 0 0 0 calc(var(--ring-unit) / 2);
+}
+
+:global(.ring-table__column) {
+  display: table-cell;
+
+  padding: calc(var(--ring-unit) - 2px) var(--ring-unit);
+
+  vertical-align: middle;
+  white-space: nowrap;
+
+  border-collapse: collapse;
+  border-width: 1px;
+  border-color: var(--ring-line-color);
+  border-top-style: solid;
+  border-bottom-style: solid;
+}
+
+/* Avoid vertical gaps in the middle of the table */
+:global(.ring-table__column:last-child) {
+  width: 100%;
+}
+
+:global(.ring-table__column:first-child) {
+  padding-left: calc(4 * var(--ring-unit));
+}
+
+:global(.ring-table__column.ring-table__column_gap) {
+  border-bottom-color: transparent !important;
+  background-color: var(--ring-line-color);
+}
+
+/* Combined class is required here for specificity */
+:global(.ring-table__column.ring-table__column_toggle) {
+  width: calc(var(--ring-unit) * 2);
+  padding: 0;
+
+  text-align: right;
+
+  vertical-align: top;
+}
+
+:global(.ring-table__column_right) {
+  text-align: right;
+}
+
+:global(.ring-table__column_gray) {
+  color: var(--ring-secondary-color);
+}
+
+:global(.ring-table__column_snuggle-right) {
+  padding-right: 0;
+}
+
+:global(.ring-table__column_snuggle-left) {
+  padding-left: 0;
+}
+
+:global(.ring-table__column_align-right) {
+  text-align: right;
+}
+
+:global(.ring-table__column_gap) {
+  padding-left: calc(var(--ring-unit) * 2) !important;
+}
+
+:global(.ring-table__column-title) {
+  font-weight: bold;
+}
+
+:global(.ring-table__column_wide) {
+  min-width: calc(10 * var(--ring-unit));
+}
+
+:global(.ring-table__column_limited) {
+  overflow: hidden;
+
+  max-width: calc(50 * var(--ring-unit));
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:global(.ring-table__column_unlimited) {
+  overflow: hidden;
+
+  width: 100%;
+  max-width: 1px;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:global(.ring-table__column_narrow) {
+  min-width: calc(3 * var(--ring-unit));
+  padding: 0 !important;
+}
+
+:global(.ring-table__column-list:not(:last-child)::after) {
+  content: ", ";
+}
+
+:global(.ring-table__row) {
+  display: table-row;
+
+  width: 100%;
+  height: calc(5 * var(--ring-unit));
+}
+
+:global(.ring-table__row .ring-table__row_ghost) {
+  background-color: var(--ring-content-background-color);
+}
+
+:global(.ring-table__row .ring-table__row_implicit) {
+  opacity: 0.5;
+}
+
+:global(.ring-table__row:hover) {
+  background-color: var(--ring-sidebar-background-color);
+}
+
+:global(.ring-table__row:hover .ring-table__column_gap) {
+  background-color: var(--ring-line-color);
+}
+
+:global(.ring-table__row .ring-table__row_unselectable:hover) {
+  background-color: initial;
+}
+
+:global(.ring-table__row .ring-table__row_checked) {
+  background-color: var(--ring-selected-background-color);
+}
+
+:global(.ring-table__row .ring-table__row_active-checked) {
+  background-color: var(--ring-selected-background-color);
+}
+
+:global(.ring-table__row .ring-table__row_active.ring-table__column) {
+  border-color: var(--ring-main-color);
+  border-top-style: double; /* Using double to override border-top-color because of border collapsed */
+}
+
+:global(.ring-table__row .ring-table__row_active.ring-table__column_gap) {
+  border-color: var(--ring-line-color);
+  border-top-style: none;
+}
+
+:global(.ring-table__row .ring-table__row_active.sidebar__btn) {
+  visibility: visible;
+}
+
+:global(.ring-table__group) {
+  display: table-row-group;
+}
+
+:global(.ring-table__description) {
+  margin-left: var(--ring-unit);
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+:global(.ring-table__avatar) {
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit) + 3px); /* If avatar is missing */
+}
+
+:global(.ring-table__avatar-img) {
+  width: calc(3 * var(--ring-unit));
+  height: calc(3 * var(--ring-unit));
+}
+
+:global(.ring-table__header_sticky) {
+  position: fixed;
+
+  /* Set z-index to avoid overlaying icons in rows and fixed header */
+
+  z-index: var(--ring-fixed-z-index);
+  top: 0;
+
+  display: none;
+
+  width: auto;
+}
+
+:global(.table__pager) {
+  padding: calc(4 * var(--ring-unit)) calc(4 * var(--ring-unit));
+}
+
+:global(.table__pager-links) {
+  margin-bottom: calc(2 * var(--ring-unit));
+}
+
+:global(.table__pager-link) {
+  display: inline-block;
+
+  margin-right: calc(4 * var(--ring-unit));
+}
+
+:global(.table__pager-link_disabled) {
+  color: var(--ring-secondary-color);
+}
+
+:global(.table__pager-select) {
+  display: inline-block;
+  float: right;
+}

package/components/table-legacy/table-legacy__toolbar.css

@@ -0,0 +1,25 @@
+:global(.ring-table__toolbar) {
+  background: inherit;
+}
+
+:global(.ring-table__toolbar-controls) {
+  position: relative;
+
+  display: block;
+
+  min-height: calc(var(--ring-unit) * 3);
+
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+
+  white-space: initial;
+
+  background: inherit;
+
+  &:global(.ring-table__toolbar-controls_fixed) {
+    position: fixed;
+    z-index: calc(var(--ring-fixed-z-index) + 1);
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+}

package/components/tabs/collapsible-more.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+import { TabProps } from './tab';
+export interface FakeMoreButtonProps {
+    hasActiveChildren: boolean;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+}
+export declare const AnchorLink: {
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): React.JSX.Element;
+    propTypes: {
+        hasActiveChildren: PropTypes.Requireable<boolean>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+    };
+};
+export interface MoreButtonProps {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    morePopupBeforeEnd: ReactNode;
+}
+export declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => React.JSX.Element | null>;
+export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => React.JSX.Element>;

package/components/tabs/collapsible-more.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import classNames from 'classnames';
+import chevronDownIcon from '@jetbrains/icons/chevron-10px';
+import PropTypes from 'prop-types';
+import { Directions } from '../popup/popup.consts';
+import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
+import Dropdown from '../dropdown/dropdown';
+import Link from '../link/link';
+import Icon from '../icon/icon';
+import styles from './tabs.css';
+import getTabTitles from './collapsible-tab';
+import { CustomItem } from './custom-item';
+export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }) => {
+    const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
+    return (<Link title={'More'} className={classnames} {...restProps}>
+      {'More'}
+      <Icon glyph={chevronDownIcon} className={styles.chevron}/></Link>);
+};
+AnchorLink.propTypes = {
+    hasActiveChildren: PropTypes.bool,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string
+};
+const morePopupDirections = [
+    Directions.BOTTOM_CENTER,
+    Directions.BOTTOM_LEFT,
+    Directions.BOTTOM_RIGHT
+];
+export const MoreButton = React.memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }) => {
+    const onSelectHandler = React.useCallback((listItem) => {
+        if (listItem.disabled === true || listItem.custom === true) {
+            return;
+        }
+        const cb = onSelect(String(listItem.key));
+        cb();
+    }, [onSelect]);
+    const hasActiveChild = React.useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);
+    const data = React.useMemo(() => {
+        const popupItems = getTabTitles({
+            items,
+            selected,
+            collapsed: true
+        }).map(tab => {
+            const disabled = tab.props.disabled === true;
+            const custom = tab.props.child.type === CustomItem;
+            return ({
+                template: tab,
+                key: tab.key,
+                rgItemType: ListProps.Type.CUSTOM,
+                className: morePopupItemClassName,
+                disabled,
+                custom
+            });
+        });
+        if (morePopupBeforeEnd) {
+            popupItems.push({
+                template: morePopupBeforeEnd,
+                key: 'before-end-content',
+                className: styles.morePopupBeforeEnd,
+                rgItemType: ListProps.Type.CUSTOM
+            });
+        }
+        return popupItems;
+    }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
+    const popupAnchor = React.useMemo(() => (<AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChild}/>), [hasActiveChild, moreActiveClassName, moreClassName]);
+    const popup = React.useMemo(() => (<PopupMenu directions={morePopupDirections} className={morePopupClassName} onSelect={onSelectHandler} data={data}/>), [data, morePopupClassName, onSelectHandler]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (<div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
+      <Dropdown hoverMode anchor={popupAnchor}>
+        {popup}
+      </Dropdown>
+    </div>);
+});
+MoreButton.propTypes = {
+    children: PropTypes.node,
+    items: PropTypes.array,
+    selected: PropTypes.string,
+    onSelect: PropTypes.func,
+    toMeasure: PropTypes.bool,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string,
+    morePopupClassName: PropTypes.string,
+    morePopupItemClassName: PropTypes.string,
+    morePopupBeforeEnd: PropTypes.element
+};
+MoreButton.displayName = 'MoreButton';
+export const FakeMoreButton = React.memo(({ moreClassName, moreActiveClassName, hasActiveChildren }) => (<div className={classNames(styles.moreButton, styles.title)}>
+    <AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChildren} tabIndex={-1} disabled/>
+  </div>));
+FakeMoreButton.propTypes = {
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string,
+    hasActiveChildren: PropTypes.bool
+};
+FakeMoreButton.displayName = 'FakeMoreButton';

package/components/tabs/collapsible-tab.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { TabProps } from './tab';
+export interface TabTitleProps {
+    selected: boolean;
+    child: ReactElement<TabProps> | null;
+    handleSelect?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    collapsed?: boolean | undefined;
+    tabIndex?: number | undefined;
+}
+export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'> {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined) | undefined;
+}
+declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => React.JSX.Element[];
+export default getTabTitles;

package/components/tabs/collapsible-tab.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './tabs.css';
+import TabLink from './tab-link';
+import { CustomItem } from './custom-item';
+function noop() { }
+const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect = noop, collapsed = false, tabIndex }) {
+    if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+        return child;
+    }
+    const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
+    const titleClasses = classNames(styles.title, className, {
+        [styles.selected]: selected,
+        [styles.collapsed]: collapsed,
+        [activeClassName ?? '']: selected,
+        [collapsedClassName ?? '']: collapsed,
+        [collapsedActiveClassName ?? '']: collapsed && selected
+    });
+    return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
+});
+TabTitle.propTypes = {
+    child: PropTypes.element,
+    handleSelect: PropTypes.func,
+    selected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    tabIndex: PropTypes.number
+};
+const getTabTitles = ({ items, selected = '0', collapsed, onSelect = () => undefined, ...props }) => items.map((tab, index) => {
+    const key = tab.props.id || String(index);
+    const isSelected = selected === key;
+    return (<TabTitle key={key} handleSelect={onSelect(key)} selected={isSelected} child={tab} collapsed={collapsed} {...props}/>);
+});
+export default getTabTitles;

package/components/tabs/collapsible-tabs.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabProps } from './tab';
+export interface CollapsibleTabsProps {
+    children: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    initialVisibleItems?: number | null | undefined;
+    morePopupBeforeEnd?: ReactNode;
+}
+export declare const CollapsibleTabs: {
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+}>;
+export default _default;