@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/tabs/collapsible-tab.js

@@ -0,0 +1,91 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import TabLink from './tab-link.js';
+import { CustomItem } from './custom-item.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/data-tests.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+
+function noop() {}
+
+const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
+  let {
+    selected,
+    child,
+    handleSelect = noop,
+    collapsed = false,
+    tabIndex
+  } = _ref;
+
+  if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+    return child;
+  }
+
+  const {
+    title,
+    disabled,
+    href,
+    className,
+    activeClassName,
+    collapsedClassName,
+    collapsedActiveClassName
+  } = child.props;
+  const titleClasses = classNames(modules_02138f4a.title, className, {
+    [modules_02138f4a.selected]: selected,
+    [modules_02138f4a.collapsed]: collapsed,
+    [activeClassName]: selected,
+    [collapsedClassName]: collapsed,
+    [collapsedActiveClassName]: collapsed && selected
+  });
+  return /*#__PURE__*/React.createElement(TabLink, {
+    title: title,
+    isSelected: selected,
+    active: true,
+    href: href,
+    innerClassName: titleClasses,
+    className: titleClasses,
+    disabled: disabled,
+    onPlainLeftClick: handleSelect,
+    tabIndex: tabIndex,
+    collapsed: collapsed
+  });
+});
+TabTitle.propTypes = {
+  child: PropTypes.element,
+  handleSelect: PropTypes.func,
+  selected: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  tabIndex: PropTypes.number
+};
+
+const getTabTitles = _ref2 => {
+  let {
+    items,
+    selected = 0,
+    collapsed,
+    onSelect = noop,
+    ...props
+  } = _ref2;
+  return items.map((tab, index) => {
+    const key = tab.props.id || String(index);
+    const isSelected = selected === key;
+    return /*#__PURE__*/React.createElement(TabTitle, _extends({
+      key: key,
+      handleSelect: onSelect(key),
+      selected: isSelected,
+      child: tab,
+      index: index,
+      collapsed: collapsed,
+      disabled: tab.props.disabled
+    }, props));
+  });
+};
+
+export { getTabTitles as default };

package/dist/tabs/collapsible-tabs.js

@@ -0,0 +1,362 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import fastdom from 'fastdom';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import { MoreButton, FakeMoreButton } from './collapsible-more.js';
+import getTabTitles from './collapsible-tab.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '@jetbrains/icons/chevron-10px';
+import '../popup/popup.consts.js';
+import '../popup-menu/popup-menu.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/data-tests.js';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.target.js';
+import '../list/list.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 '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.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 '../dropdown/dropdown.js';
+import '../_helpers/anchor.js';
+import '../button/button.js';
+import '../global/theme.js';
+import '../_helpers/button__classes.js';
+import './custom-item.js';
+import './tab-link.js';
+
+const DEFAULT_DEBOUNCE_INTERVAL = 100;
+const MEASURE_TOLERANCE = 0.5;
+const DEFAULT_STATE = {
+  lastVisibleIndex: null,
+  sizes: {
+    tabs: [],
+    more: null
+  }
+};
+const ACTIONS = {
+  MEASURE_TABS: 'MEASURE_TABS',
+  DEFINE_LAST_VISIBLE_INDEX: 'DEFINE_LAST_VISIBLE_INDEX'
+};
+
+function visibilityReducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.MEASURE_TABS:
+      {
+        const {
+          more,
+          tabs
+        } = action;
+        return { ...state,
+          sizes: {
+            more,
+            tabs
+          }
+        };
+      }
+
+    case ACTIONS.DEFINE_LAST_VISIBLE_INDEX:
+      {
+        const {
+          lastVisibleIndex
+        } = action;
+        return { ...state,
+          lastVisibleIndex
+        };
+      }
+
+    default:
+      throw new Error();
+  }
+}
+
+const useAdjustHandler = _ref => {
+  let {
+    elements,
+    children,
+    selectedIndex,
+    dispatch
+  } = _ref;
+  return React.useCallback(entry => {
+    const containerWidth = entry.contentRect.width;
+    const {
+      tabs: tabsSizes,
+      more = 0
+    } = elements.sizes;
+    let renderMore = children.some(tab => tab.props.alwaysHidden);
+    const tabsToRender = [];
+    let filledWidth = renderMore ? more !== null && more !== void 0 ? more : 0 : 0;
+
+    for (let i = 0; i < tabsSizes.length; i++) {
+      if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
+        filledWidth += tabsSizes[i];
+        tabsToRender.push(tabsSizes[i]);
+      } else {
+        break;
+      }
+    }
+
+    if (tabsToRender.length < tabsSizes.length && !renderMore) {
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+        if (filledWidth + more < containerWidth + MEASURE_TOLERANCE) {
+          filledWidth += more;
+          renderMore = true;
+          break;
+        } else {
+          filledWidth -= tabsToRender[i];
+          tabsToRender.pop();
+        }
+      }
+    }
+
+    if (selectedIndex > tabsToRender.length - 1) {
+      const selectedWidth = tabsSizes[selectedIndex];
+
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+        if (filledWidth + selectedWidth < containerWidth + MEASURE_TOLERANCE) {
+          filledWidth += selectedWidth;
+          break;
+        } else {
+          filledWidth -= tabsToRender[i];
+          tabsToRender.pop();
+        }
+      }
+    }
+
+    if (elements.lastVisibleIndex !== tabsToRender.length - 1) {
+      dispatch({
+        type: ACTIONS.DEFINE_LAST_VISIBLE_INDEX,
+        lastVisibleIndex: tabsToRender.length - 1
+      });
+    }
+  }, [children, dispatch, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+};
+
+const CollapsibleTabs = _ref2 => {
+  let {
+    children,
+    selected,
+    onSelect,
+    moreClassName,
+    moreActiveClassName,
+    morePopupClassName,
+    morePopupBeforeEnd,
+    morePopupItemClassName,
+    initialVisibleItems
+  } = _ref2;
+  const [elements, dispatch] = React.useReducer(visibilityReducer, DEFAULT_STATE);
+  const [preparedElements, setPreparedElements] = React.useState({
+    visible: [],
+    hidden: []
+  });
+  const measureRef = React.useRef(null);
+  const selectedIndex = React.useMemo(() => {
+    var _children$filter$find;
+
+    return (_children$filter$find = children.filter(tab => tab.props.alwaysHidden !== true).findIndex(tab => tab.props.id === selected)) !== null && _children$filter$find !== void 0 ? _children$filter$find : null;
+  }, [children, selected]);
+  const visibleElements = React.useMemo(() => {
+    let items;
+
+    if (preparedElements.ready) {
+      items = preparedElements.visible;
+    } else {
+      items = initialVisibleItems ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems) : [];
+    }
+
+    return getTabTitles({
+      items,
+      selected,
+      onSelect
+    });
+  }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
+  const adjustTabs = useAdjustHandler({
+    dispatch,
+    elements,
+    children,
+    selectedIndex
+  }); // Prepare list of visible and hidden elements
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      var _elements$lastVisible2;
+
+      const res = children.reduce((accumulator, tab) => {
+        var _elements$lastVisible;
+
+        if (tab.props.alwaysHidden !== true && accumulator.visible.length - 1 < ((_elements$lastVisible = elements.lastVisibleIndex) !== null && _elements$lastVisible !== void 0 ? _elements$lastVisible : 0)) {
+          accumulator.visible.push(tab);
+        } else {
+          accumulator.hidden.push(tab);
+        }
+
+        return accumulator;
+      }, {
+        visible: [],
+        hidden: [],
+        ready: elements.lastVisibleIndex !== null
+      });
+
+      if (selectedIndex > ((_elements$lastVisible2 = elements.lastVisibleIndex) !== null && _elements$lastVisible2 !== void 0 ? _elements$lastVisible2 : 0)) {
+        const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
+        res.visible.push(selectedItem);
+      }
+
+      const allVisibleTheSame = res.visible.length === preparedElements.visible.length && res.visible.every((item, index) => item === preparedElements.visible[index]);
+      const allHiddenTheSame = res.hidden.length === preparedElements.hidden.length && res.hidden.every((item, index) => item === preparedElements.hidden[index]);
+
+      if (!allVisibleTheSame || !allHiddenTheSame || preparedElements.ready !== res.ready) {
+        fastdom.mutate(() => setPreparedElements(res));
+      }
+    }, DEFAULT_DEBOUNCE_INTERVAL);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]); // Get list of all possibly visible elements to render in a measure container
+
+  const childrenToMeasure = React.useMemo(() => {
+    const items = children.filter(tab => tab.props.alwaysHidden !== true);
+    return getTabTitles({
+      items,
+      tabIndex: -1
+    });
+  }, [children]); // Initial measure for tabs and more button sizes
+
+  React.useEffect(() => {
+    if (measureRef.current == null) {
+      return undefined;
+    }
+
+    const measureTask = fastdom.measure(() => {
+      const container = measureRef.current;
+      const descendants = [...container.children];
+      const moreButton = descendants.pop();
+      let moreButtonWidth = moreButton.offsetWidth;
+      const {
+        marginLeft: moreButtonMarginLeft,
+        marginRight: moreButtonMarginRight
+      } = getComputedStyle(moreButton);
+      moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
+      const tabsWidth = descendants.map(node => {
+        const {
+          marginLeft,
+          marginRight
+        } = getComputedStyle(node);
+        const width = node.getBoundingClientRect().width;
+        return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
+      });
+      const newSummaryWidth = tabsWidth.reduce((acc, curr) => acc + curr, 0);
+      const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => acc + curr, 0);
+
+      if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
+        fastdom.mutate(() => dispatch({
+          type: ACTIONS.MEASURE_TABS,
+          more: moreButtonWidth,
+          tabs: tabsWidth
+        }));
+      }
+    });
+    return () => {
+      fastdom.clear(measureTask);
+    };
+  }, [children, elements.sizes.more, elements.sizes.tabs]); // Start observers to listen resizing and mutation
+
+  React.useEffect(() => {
+    let measureTask = null;
+    let resizeObserver = null;
+
+    if (measureRef.current === null) {
+      return undefined;
+    }
+
+    resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        fastdom.clear(measureTask);
+        measureTask = fastdom.mutate(() => adjustTabs(entry));
+      });
+    });
+    resizeObserver.observe(measureRef.current);
+    return () => {
+      fastdom.clear(measureTask);
+      resizeObserver.disconnect();
+    };
+  }, [adjustTabs]);
+  const isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
+  const className = classNames(modules_02138f4a.titles, modules_02138f4a.autoCollapse, isAdjusted && modules_02138f4a.adjusted);
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_02138f4a.autoCollapseContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(className, modules_02138f4a.rendered)
+  }, visibleElements, /*#__PURE__*/React.createElement(MoreButton, {
+    moreClassName: moreClassName,
+    moreActiveClassName: moreActiveClassName,
+    morePopupClassName: morePopupClassName,
+    morePopupBeforeEnd: morePopupBeforeEnd,
+    morePopupItemClassName: morePopupItemClassName,
+    items: preparedElements.hidden,
+    selected: selected,
+    onSelect: onSelect
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: measureRef,
+    className: classNames(className, modules_02138f4a.measure)
+  }, childrenToMeasure, /*#__PURE__*/React.createElement(FakeMoreButton, {
+    hasActiveChildren: preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected),
+    moreClassName: moreClassName,
+    moreActiveClassName: moreActiveClassName
+  })));
+};
+CollapsibleTabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string,
+  morePopupClassName: PropTypes.string,
+  morePopupItemClassName: PropTypes.string,
+  initialVisibleItems: PropTypes.number,
+  morePopupBeforeEnd: PropTypes.element
+};
+var CollapsibleTabs$1 = /*#__PURE__*/React.memo(CollapsibleTabs);
+
+export { CollapsibleTabs, CollapsibleTabs$1 as default };

package/dist/tabs/custom-item.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+const CustomItem = _ref => {
+  let {
+    children
+  } = _ref;
+  return children;
+};
+CustomItem.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { CustomItem };

package/dist/tabs/dumb-tabs.js

@@ -0,0 +1,164 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import memoize from '../global/memoize.js';
+import Theme, { withTheme } from '../global/theme.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_02138f4a } from '../_helpers/tabs.js';
+import TabLink from './tab-link.js';
+import CollapsibleTabs from './collapsible-tabs.js';
+import { CustomItem } from './custom-item.js';
+export { CustomItem } from './custom-item.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import 'core-js/modules/es.string.replace.js';
+import 'fastdom';
+import './collapsible-more.js';
+import '@jetbrains/icons/chevron-10px';
+import '../popup/popup.consts.js';
+import '../popup-menu/popup-menu.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.target.js';
+import '../list/list.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/create-stateful-context.js';
+import '../list/list__link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.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 '../dropdown/dropdown.js';
+import '../_helpers/anchor.js';
+import '../button/button.js';
+import '../_helpers/button__classes.js';
+import './collapsible-tab.js';
+
+class Tabs extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "handleSelect", memoize(key => () => this.props.onSelect(key)));
+
+    _defineProperty(this, "getTabTitle", (child, i) => {
+      if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+        return child;
+      }
+
+      const {
+        selected
+      } = this.props;
+      const {
+        title,
+        id,
+        disabled,
+        href,
+        className,
+        activeClassName
+      } = child.props;
+      const key = id || String(i);
+      const isSelected = key === selected;
+      const titleClasses = classNames(modules_02138f4a.title, className, isSelected && activeClassName, {
+        [modules_02138f4a.selected]: isSelected
+      });
+      return /*#__PURE__*/React.createElement(TabLink, {
+        title: title,
+        isSelected: isSelected,
+        active: true,
+        key: key,
+        href: href,
+        innerClassName: titleClasses,
+        className: titleClasses,
+        disabled: disabled,
+        onPlainLeftClick: this.handleSelect(key)
+      });
+    });
+  }
+
+  render() {
+    const {
+      className,
+      children,
+      selected,
+      theme,
+      autoCollapse,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_02138f4a.tabs, className, modules_02138f4a[theme]);
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      "data-test": joinDataTestAttributes('ring-dumb-tabs', dataTest)
+    }, autoCollapse === true ? /*#__PURE__*/React.createElement(CollapsibleTabs, _extends({}, restProps, {
+      onSelect: this.handleSelect,
+      selected: selected
+    }), childrenArray) : /*#__PURE__*/React.createElement("div", {
+      className: modules_02138f4a.titles
+    }, childrenArray.map(this.getTabTitle)), /*#__PURE__*/React.createElement("div", {
+      className: modules_02138f4a.tab
+    }, childrenArray.find((_ref, i) => {
+      let {
+        props
+      } = _ref;
+      return (props.id || String(i)) === selected;
+    })));
+  }
+
+}
+
+_defineProperty(Tabs, "propTypes", {
+  theme: PropTypes.string,
+  selected: PropTypes.string,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSelect: PropTypes.func,
+  'data-test': PropTypes.string,
+  autoCollapse: PropTypes.bool
+});
+
+_defineProperty(Tabs, "defaultProps", {
+  onSelect() {}
+
+});
+
+_defineProperty(Tabs, "Theme", Theme);
+
+var Tabs$1 = withTheme()(Tabs);
+
+export { Tabs$1 as default };