@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/tabs/collapsible-more.js

@@ -1,183 +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 { 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'}
-      innerClassName={classnames}
-      className={classnames}
-      {...restProps}
-    >
+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'} innerClassName={classnames} className={classnames} {...restProps}>
       {'More'}
-      <Icon
-        glyph={chevronDownIcon}
-        className={styles.chevron}
-      /></Link>
-  );
+      <Icon glyph={chevronDownIcon} className={styles.chevron}/></Link>);
 };
-
 AnchorLink.propTypes = {
-  hasActiveChildren: PropTypes.bool,
-  moreClassName: PropTypes.string,
-  moreActiveClassName: PropTypes.string
+    hasActiveChildren: PropTypes.bool,
+    moreClassName: PropTypes.string,
+    moreActiveClassName: PropTypes.string
 };
-
 const morePopupDirections = [
-  Directions.BOTTOM_CENTER,
-  Directions.BOTTOM_LEFT,
-  Directions.BOTTOM_RIGHT
+    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;
+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(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;
     }
-
-    const cb = onSelect(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}
-      >
+    return (<div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
+      <Dropdown hoverMode anchor={popupAnchor}>
         {popup}
       </Dropdown>
-    </div>
-  );
+    </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
+    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>
-));
+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
+    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) => JSX.Element[];
+export default getTabTitles;

package/components/tabs/collapsible-tab.js

@@ -1,90 +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,
-    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}
-      innerClassName={titleClasses}
-      className={titleClasses}
-      disabled={disabled}
-      onPlainLeftClick={handleSelect}
-      tabIndex={tabIndex}
-      collapsed={collapsed}
-    />
-  );
+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} innerClassName={titleClasses} 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
+    child: PropTypes.element,
+    handleSelect: PropTypes.func,
+    selected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    tabIndex: PropTypes.number
 };
-
-const getTabTitles = ({
-  items,
-  selected = 0,
-  collapsed,
-  onSelect = noop,
-  ...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}
-      index={index}
-      collapsed={collapsed}
-      disabled={tab.props.disabled}
-      {...props}
-    />
-  );
+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): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        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): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        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;