@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.1

package/dist/tabs/collapsible-tab.js

@@ -1,90 +0,0 @@
-import { a as _objectWithoutProperties, b 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 '../global/data-tests.js';
-import '../link/clickableLink.js';
-
-function noop() {}
-
-const TabTitle = /*#__PURE__*/React.memo(_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
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, ["items", "selected", "collapsed", "onSelect"]);
-
-  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 default getTabTitles;

package/dist/tabs/collapsible-tabs.js

@@ -1,361 +0,0 @@
-import { c as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.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 '@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/list.js';
-import '../list/list__item.js';
-import '../avatar/avatar.js';
-import '../global/url.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__svg.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 _objectSpread2(_objectSpread2({}, state), {}, {
-          sizes: {
-            more,
-            tabs
-          }
-        });
-      }
-
-    case ACTIONS.DEFINE_LAST_VISIBLE_INDEX:
-      {
-        const {
-          lastVisibleIndex
-        } = action;
-        return _objectSpread2(_objectSpread2({}, 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;
-    }
-
-    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', '');
-      }); // eslint-disable-next-line no-param-reassign
-
-      const newSummaryWidth = tabsWidth.reduce((acc, curr) => acc += curr, 0); // eslint-disable-next-line no-param-reassign
-
-      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
-        }));
-      }
-    }); // eslint-disable-next-line consistent-return
-
-    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;
-    }
-
-    resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        fastdom.clear(measureTask);
-        measureTask = fastdom.mutate(() => adjustTabs(entry));
-      });
-    });
-    resizeObserver.observe(measureRef.current); // eslint-disable-next-line consistent-return
-
-    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 default CollapsibleTabs$1;
-export { CollapsibleTabs };

package/dist/tabs/custom-item.js

@@ -1,13 +0,0 @@
-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

@@ -1,159 +0,0 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _extends } from '../_helpers/_rollupPluginBabelHelpers.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';
-import '../link/link.js';
-import 'focus-visible';
-import '../link/clickableLink.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 '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
-import '@jetbrains/icons/remove-10px';
-import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.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 _this$props = this.props,
-          {
-      className,
-      children,
-      selected,
-      theme,
-      autoCollapse,
-      'data-test': dataTest
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["className", "children", "selected", "theme", "autoCollapse", "data-test"]);
-
-    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 default Tabs$1;