@jetbrains/ring-ui 5.1.1 → 5.1.3

package/dist/tabs/collapsible-tabs.js

@@ -1,3 +1,14 @@
+import { j as _slicedToArray, m as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -5,25 +16,42 @@ 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 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.parse-float.js';
 import '../popup/popup.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.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.string.split.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/es.string.iterator.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.splice.js';
+import 'core-js/modules/es.string.match.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 '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 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -31,17 +59,21 @@ 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 '../link/link.js';
-import 'focus-visible';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
+import 'core-js/modules/es.number.constructor.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';
@@ -49,6 +81,7 @@ import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.starts-with.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../_helpers/checkbox.js';
@@ -67,61 +100,76 @@ import '../_helpers/button__classes.js';
 import './custom-item.js';
 import './tab-link.js';
 
-const DEFAULT_DEBOUNCE_INTERVAL = 100;
-const MEASURE_TOLERANCE = 0.5;
-const CollapsibleTabs = _ref => {
-  let {
-    children,
-    selected,
-    onSelect,
-    moreClassName,
-    moreActiveClassName,
-    morePopupClassName,
-    morePopupBeforeEnd,
-    morePopupItemClassName,
-    initialVisibleItems
-  } = _ref;
-  const [sizes, setSizes] = React.useState({
-    tabs: [],
-    more: undefined
-  });
-  const [lastVisibleIndex, setLastVisibleIndex] = React.useState(null);
-  const elements = {
-    sizes,
-    lastVisibleIndex
+var DEFAULT_DEBOUNCE_INTERVAL = 100;
+var MEASURE_TOLERANCE = 0.5;
+var CollapsibleTabs = function CollapsibleTabs(_ref) {
+  var children = _ref.children,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect,
+    moreClassName = _ref.moreClassName,
+    moreActiveClassName = _ref.moreActiveClassName,
+    morePopupClassName = _ref.morePopupClassName,
+    morePopupBeforeEnd = _ref.morePopupBeforeEnd,
+    morePopupItemClassName = _ref.morePopupItemClassName,
+    initialVisibleItems = _ref.initialVisibleItems;
+  var _React$useState = React.useState({
+      tabs: [],
+      more: undefined
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    sizes = _React$useState2[0],
+    setSizes = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    lastVisibleIndex = _React$useState4[0],
+    setLastVisibleIndex = _React$useState4[1];
+  var elements = {
+    sizes: sizes,
+    lastVisibleIndex: lastVisibleIndex
   };
-  const [preparedElements, setPreparedElements] = React.useState({
-    visible: [],
-    hidden: []
-  });
-  const measureRef = React.useRef(null);
-  const selectedIndex = React.useMemo(() => {
+  var _React$useState5 = React.useState({
+      visible: [],
+      hidden: []
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    preparedElements = _React$useState6[0],
+    setPreparedElements = _React$useState6[1];
+  var measureRef = React.useRef(null);
+  var selectedIndex = React.useMemo(function () {
     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;
+    return (_children$filter$find = children.filter(function (tab) {
+      return tab.props.alwaysHidden !== true;
+    }).findIndex(function (tab) {
+      return tab.props.id === selected;
+    })) !== null && _children$filter$find !== void 0 ? _children$filter$find : null;
   }, [children, selected]);
-  const visibleElements = React.useMemo(() => {
-    let items;
+  var visibleElements = React.useMemo(function () {
+    var items;
     if (preparedElements.ready) {
       items = preparedElements.visible;
     } else {
-      items = initialVisibleItems ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems) : [];
+      items = initialVisibleItems ? children.filter(function (item) {
+        return item.props.alwaysHidden !== true;
+      }).slice(0, initialVisibleItems) : [];
     }
     return getTabTitles({
-      items,
-      selected,
-      onSelect
+      items: items,
+      selected: selected,
+      onSelect: onSelect
     });
   }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
-  const adjustTabs = 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++) {
+  var adjustTabs = React.useCallback(function (entry) {
+    var containerWidth = entry.contentRect.width;
+    var _elements$sizes = elements.sizes,
+      tabsSizes = _elements$sizes.tabs,
+      _elements$sizes$more = _elements$sizes.more,
+      more = _elements$sizes$more === void 0 ? 0 : _elements$sizes$more;
+    var renderMore = children.some(function (tab) {
+      return tab.props.alwaysHidden;
+    });
+    var tabsToRender = [];
+    var filledWidth = renderMore ? more !== null && more !== void 0 ? more : 0 : 0;
+    for (var i = 0; i < tabsSizes.length; i++) {
       if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
         filledWidth += tabsSizes[i];
         tabsToRender.push(tabsSizes[i]);
@@ -130,25 +178,25 @@ const CollapsibleTabs = _ref => {
       }
     }
     if (tabsToRender.length < tabsSizes.length && !renderMore) {
-      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+      for (var _i = tabsToRender.length - 1; _i >= 0; _i--) {
         if (filledWidth + more < containerWidth + MEASURE_TOLERANCE) {
           filledWidth += more;
           renderMore = true;
           break;
         } else {
-          filledWidth -= tabsToRender[i];
+          filledWidth -= tabsToRender[_i];
           tabsToRender.pop();
         }
       }
     }
     if (selectedIndex > tabsToRender.length - 1) {
-      const selectedWidth = tabsSizes[selectedIndex];
-      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+      var selectedWidth = tabsSizes[selectedIndex];
+      for (var _i2 = tabsToRender.length - 1; _i2 >= 0; _i2--) {
         if (filledWidth + selectedWidth < containerWidth + MEASURE_TOLERANCE) {
           filledWidth += selectedWidth;
           break;
         } else {
-          filledWidth -= tabsToRender[i];
+          filledWidth -= tabsToRender[_i2];
           tabsToRender.pop();
         }
       }
@@ -158,10 +206,10 @@ const CollapsibleTabs = _ref => {
     }
   }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
   // Prepare list of visible and hidden elements
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
+  React.useEffect(function () {
+    var timeout = setTimeout(function () {
       var _elements$lastVisible2;
-      const res = children.reduce((accumulator, tab) => {
+      var res = children.reduce(function (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);
@@ -175,86 +223,102 @@ const CollapsibleTabs = _ref => {
         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);
+        var selectedItem = children.find(function (tab) {
+          return !tab.props.alwaysHidden && tab.props.id === selected;
+        });
         if (selectedItem != null) {
           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]);
+      var allVisibleTheSame = res.visible.length === preparedElements.visible.length && res.visible.every(function (item, index) {
+        return item === preparedElements.visible[index];
+      });
+      var allHiddenTheSame = res.hidden.length === preparedElements.hidden.length && res.hidden.every(function (item, index) {
+        return item === preparedElements.hidden[index];
+      });
       if (!allVisibleTheSame || !allHiddenTheSame || preparedElements.ready !== res.ready) {
-        fastdom.mutate(() => setPreparedElements(res));
+        fastdom.mutate(function () {
+          return setPreparedElements(res);
+        });
       }
     }, DEFAULT_DEBOUNCE_INTERVAL);
-    return () => {
+    return function () {
       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);
+  var childrenToMeasure = React.useMemo(function () {
+    var items = children.filter(function (tab) {
+      return tab.props.alwaysHidden !== true;
+    });
     return getTabTitles({
-      items,
+      items: items,
       tabIndex: -1
     });
   }, [children]);
   // Initial measure for tabs and more button sizes
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (measureRef.current == null) {
       return undefined;
     }
-    const measureTask = fastdom.measure(() => {
+    var measureTask = fastdom.measure(function () {
       var _container$children;
-      const container = measureRef.current;
-      const descendants = [...((_container$children = container?.children) !== null && _container$children !== void 0 ? _container$children : [])];
-      const moreButton = descendants.pop();
-      let moreButtonWidth = moreButton.offsetWidth;
-      const {
-        marginLeft: moreButtonMarginLeft,
-        marginRight: moreButtonMarginRight
-      } = getComputedStyle(moreButton);
+      var container = measureRef.current;
+      var descendants = _toConsumableArray((_container$children = container === null || container === void 0 ? void 0 : container.children) !== null && _container$children !== void 0 ? _container$children : []);
+      var moreButton = descendants.pop();
+      var moreButtonWidth = moreButton.offsetWidth;
+      var _getComputedStyle = getComputedStyle(moreButton),
+        moreButtonMarginLeft = _getComputedStyle.marginLeft,
+        moreButtonMarginRight = _getComputedStyle.marginRight;
       moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
-      const tabsWidth = descendants.map(node => {
-        const {
-          marginLeft,
-          marginRight
-        } = getComputedStyle(node);
-        const width = node.getBoundingClientRect().width;
+      var tabsWidth = descendants.map(function (node) {
+        var _getComputedStyle2 = getComputedStyle(node),
+          marginLeft = _getComputedStyle2.marginLeft,
+          marginRight = _getComputedStyle2.marginRight;
+        var 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);
+      var newSummaryWidth = tabsWidth.reduce(function (acc, curr) {
+        return acc + curr;
+      }, 0);
+      var oldSummaryWidth = elements.sizes.tabs.reduce(function (acc, curr) {
+        return acc + curr;
+      }, 0);
       if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
-        fastdom.mutate(() => setSizes({
-          more: moreButtonWidth,
-          tabs: tabsWidth
-        }));
+        fastdom.mutate(function () {
+          return setSizes({
+            more: moreButtonWidth,
+            tabs: tabsWidth
+          });
+        });
       }
     });
-    return () => {
+    return function () {
       fastdom.clear(measureTask);
     };
   }, [children, elements.sizes.more, elements.sizes.tabs]);
   // Start observers to listen resizing and mutation
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (measureRef.current === null) {
       return undefined;
     }
-    let measureTask = () => {};
-    const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
+    var measureTask = function measureTask() {};
+    var resizeObserver = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
         fastdom.clear(measureTask);
-        measureTask = fastdom.mutate(() => adjustTabs(entry));
+        measureTask = fastdom.mutate(function () {
+          return adjustTabs(entry);
+        });
       });
     });
     resizeObserver.observe(measureRef.current);
-    return () => {
+    return function () {
       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);
+  var isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
+  var 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", {
@@ -272,7 +336,9 @@ const CollapsibleTabs = _ref => {
     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),
+    hasActiveChildren: preparedElements.hidden.some(function (item) {
+      return item.props.alwaysHidden && item.props.id === selected;
+    }),
     moreClassName: moreClassName,
     moreActiveClassName: moreActiveClassName
   })));

package/dist/tabs/custom-item.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 
-const CustomItem = _ref => {
-  let {
-    children
-  } = _ref;
+var CustomItem = function CustomItem(_ref) {
+  var children = _ref.children;
   return children;
 };
 CustomItem.propTypes = {

package/dist/tabs/dumb-tabs.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactElement } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { CollapsibleTabsProps } from './collapsible-tabs';
 import { CustomItem } from './custom-item';
@@ -9,6 +9,7 @@ export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'chil
     children: Children;
     onSelect: (key: string) => void;
     className?: string | null | undefined;
+    tabContainerClassName?: string | null | undefined;
     autoCollapse?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
 }
@@ -16,6 +17,7 @@ declare class Tabs extends PureComponent<TabsProps> {
     static propTypes: {
         selected: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        tabContainerClassName: PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
@@ -26,8 +28,8 @@ declare class Tabs extends PureComponent<TabsProps> {
         onSelect(): void;
     };
     handleSelect: (arg: string) => () => void;
-    getTabTitle: (child: ReactElement<TabProps>, i: number) => JSX.Element;
-    render(): JSX.Element;
+    getTabTitle: (child: ReactElement<TabProps>, i: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export type TabsAttrs = JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
 export default Tabs;