@jetbrains/ring-ui-built 6.0.1

package/components/tabs/collapsible-more.js

@@ -0,0 +1,222 @@
+import { e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.map.js';
+import React from 'react';
+import classNames from 'classnames';
+import chevronDown from '@jetbrains/icons/chevron-10px';
+import PropTypes from 'prop-types';
+import { Directions } from '../popup/popup.consts.js';
+import PopupMenu, { ListProps } from '../popup-menu/popup-menu.js';
+import Dropdown from '../dropdown/dropdown.js';
+import Link from '../link/link.js';
+import Icon from '../icon/icon.js';
+import { m as modules_02138f4a } from '../_helpers/tab-link.js';
+import getTabTitles from './collapsible-tab.js';
+import { CustomItem } from './custom-item.js';
+import 'core-js/modules/es.array.concat.js';
+import '../popup/popup.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.target.js';
+import '../list/list.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'core-js/modules/es.array.find.js';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/memoize.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.weak-map.js';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import 'core-js/modules/es.array.index-of.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import 'core-js/modules/es.array.from.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../global/typescript-utils.js';
+import '../_helpers/anchor.js';
+import '../button/button.js';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../icon/icon__constants.js';
+import '../_helpers/link.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.string.starts-with.js';
+
+var _excluded = ["hasActiveChildren", "moreClassName", "moreActiveClassName"];
+var AnchorLink = function AnchorLink(_ref) {
+  var hasActiveChildren = _ref.hasActiveChildren,
+    moreClassName = _ref.moreClassName,
+    moreActiveClassName = _ref.moreActiveClassName,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var classnames = classNames(modules_02138f4a.title, hasActiveChildren && modules_02138f4a.selected, hasActiveChildren && moreActiveClassName, moreClassName);
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    title: 'More',
+    className: classnames
+  }, restProps), 'More', /*#__PURE__*/React.createElement(Icon, {
+    glyph: chevronDown,
+    className: modules_02138f4a.chevron
+  }));
+};
+AnchorLink.propTypes = {
+  hasActiveChildren: PropTypes.bool,
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string
+};
+var morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
+var MoreButton = /*#__PURE__*/React.memo(function (_ref2) {
+  var items = _ref2.items,
+    selected = _ref2.selected,
+    onSelect = _ref2.onSelect,
+    moreClassName = _ref2.moreClassName,
+    moreActiveClassName = _ref2.moreActiveClassName,
+    morePopupClassName = _ref2.morePopupClassName,
+    morePopupItemClassName = _ref2.morePopupItemClassName,
+    morePopupBeforeEnd = _ref2.morePopupBeforeEnd;
+  var onSelectHandler = React.useCallback(function (listItem) {
+    if (listItem.disabled === true || listItem.custom === true) {
+      return;
+    }
+    var cb = onSelect(String(listItem.key));
+    cb();
+  }, [onSelect]);
+  var hasActiveChild = React.useMemo(function () {
+    return items.some(function (item) {
+      return item.props.alwaysHidden && item.props.id === selected;
+    });
+  }, [items, selected]);
+  var data = React.useMemo(function () {
+    var popupItems = getTabTitles({
+      items,
+      selected,
+      collapsed: true
+    }).map(function (tab) {
+      var disabled = tab.props.disabled === true;
+      var 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: modules_02138f4a.morePopupBeforeEnd,
+        rgItemType: ListProps.Type.CUSTOM
+      });
+    }
+    return popupItems;
+  }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
+  var popupAnchor = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(AnchorLink, {
+      moreClassName: moreClassName,
+      moreActiveClassName: moreActiveClassName,
+      hasActiveChildren: hasActiveChild
+    });
+  }, [hasActiveChild, moreActiveClassName, moreClassName]);
+  var popup = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(PopupMenu, {
+      directions: morePopupDirections,
+      className: morePopupClassName,
+      onSelect: onSelectHandler,
+      data: data
+    });
+  }, [data, morePopupClassName, onSelectHandler]);
+  if (items.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(modules_02138f4a.title, moreClassName, hasActiveChild && moreActiveClassName)
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    hoverMode: true,
+    anchor: popupAnchor
+  }, popup));
+});
+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';
+var FakeMoreButton = /*#__PURE__*/React.memo(function (_ref3) {
+  var moreClassName = _ref3.moreClassName,
+    moreActiveClassName = _ref3.moreActiveClassName,
+    hasActiveChildren = _ref3.hasActiveChildren;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(modules_02138f4a.moreButton, modules_02138f4a.title)
+  }, /*#__PURE__*/React.createElement(AnchorLink, {
+    moreClassName: moreClassName,
+    moreActiveClassName: moreActiveClassName,
+    hasActiveChildren: hasActiveChildren,
+    tabIndex: -1,
+    disabled: true
+  }));
+});
+FakeMoreButton.propTypes = {
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string,
+  hasActiveChildren: PropTypes.bool
+};
+FakeMoreButton.displayName = 'FakeMoreButton';
+
+export { AnchorLink, FakeMoreButton, MoreButton };

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,88 @@
+import { f as _extends, e as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.map.js';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { m as modules_02138f4a, T as TabLink } from '../_helpers/tab-link.js';
+import { CustomItem } from './custom-item.js';
+import '../link/link.js';
+import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.array.concat.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+
+var _excluded = ["items", "selected", "collapsed", "onSelect"];
+function noop() {}
+var TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
+  var selected = _ref.selected,
+    child = _ref.child,
+    _ref$handleSelect = _ref.handleSelect,
+    handleSelect = _ref$handleSelect === void 0 ? noop : _ref$handleSelect,
+    _ref$collapsed = _ref.collapsed,
+    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    tabIndex = _ref.tabIndex;
+  if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+    return child;
+  }
+  var _child$props = child.props,
+    title = _child$props.title,
+    titleProps = _child$props.titleProps,
+    disabled = _child$props.disabled,
+    href = _child$props.href,
+    className = _child$props.className,
+    activeClassName = _child$props.activeClassName,
+    collapsedClassName = _child$props.collapsedClassName,
+    collapsedActiveClassName = _child$props.collapsedActiveClassName;
+  var titleClasses = classNames(modules_02138f4a.title, className, {
+    [modules_02138f4a.selected]: selected,
+    [modules_02138f4a.collapsed]: collapsed,
+    [activeClassName !== null && activeClassName !== void 0 ? activeClassName : '']: selected,
+    [collapsedClassName !== null && collapsedClassName !== void 0 ? collapsedClassName : '']: collapsed,
+    [collapsedActiveClassName !== null && collapsedActiveClassName !== void 0 ? collapsedActiveClassName : '']: collapsed && selected
+  });
+  return /*#__PURE__*/React.createElement(TabLink, _extends({
+    title: title,
+    isSelected: selected,
+    active: true,
+    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
+};
+var getTabTitles = function getTabTitles(_ref2) {
+  var items = _ref2.items,
+    _ref2$selected = _ref2.selected,
+    selected = _ref2$selected === void 0 ? '0' : _ref2$selected,
+    collapsed = _ref2.collapsed,
+    _ref2$onSelect = _ref2.onSelect,
+    onSelect = _ref2$onSelect === void 0 ? function () {
+      return undefined;
+    } : _ref2$onSelect,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return items.map(function (tab, index) {
+    var key = tab.props.id || String(index);
+    var isSelected = selected === key;
+    return /*#__PURE__*/React.createElement(TabTitle, _extends({
+      key: key,
+      handleSelect: onSelect(key),
+      selected: isSelected,
+      child: tab,
+      collapsed: collapsed
+    }, props));
+  });
+};
+
+export { getTabTitles as default };

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;