@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/dist/table/table.js

@@ -1,5 +1,5 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { arrayMove, List } from 'react-movable';
@@ -13,6 +13,7 @@ import { m as modules_1db4bbca } from '../_helpers/table.js';
 import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
 import disableHoverHOC from './disable-hover-hoc.js';
 import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
+import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../shortcuts/core.js';
 import 'combokeys';
@@ -120,7 +121,7 @@ class Table extends PureComponent {
     _defineProperty(this, "onCheckboxChange", e => {
       const {
         checked
-      } = e.target;
+      } = e.currentTarget;
       const {
         selection,
         onSelect
@@ -240,10 +241,10 @@ class Table extends PureComponent {
         props
       } = _ref3;
       const empty = /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-        colSpan: this.props.columns.length || '1',
+        colSpan: this.props.columns.length || 1,
         className: modules_1db4bbca.tableMessage
       }, renderEmpty ? renderEmpty() : null));
-      const tbody = (children || []).length > 0 ? children : empty;
+      const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
       return /*#__PURE__*/React.createElement("table", {
         className: classes,
         "data-test": "ring-table"
@@ -255,10 +256,14 @@ class Table extends PureComponent {
     const renderItem = _ref4 => {
       let {
         value,
-        index,
         props = {},
         isDragged
       } = _ref4;
+
+      if (value == null) {
+        return null;
+      }
+
       const {
         ref,
         ...restProps
@@ -267,7 +272,6 @@ class Table extends PureComponent {
         innerRef: ref,
         key: getItemKey(value),
         level: getItemLevel(value),
-        index: index,
         item: value,
         showFocus: selection.isFocused(value),
         autofocus: selection.isFocused(value),
@@ -329,7 +333,33 @@ class Table extends PureComponent {
 
 }
 
-_defineProperty(Table, "propTypes", {
+_defineProperty(Table, "defaultProps", {
+  isItemSelectable: () => true,
+  loading: false,
+  onSort: () => {},
+  onReorder: () => {},
+  getItemKey: item => item.id,
+  sortKey: 'id',
+  sortOrder: true,
+  draggable: false,
+  alwaysShowDragHandle: false,
+  stickyHeader: true,
+  getItemLevel: () => 0,
+  getItemClassName: () => null,
+  getItemDataTest: () => null,
+  isItemCollapsible: () => false,
+  isParentCollapsible: () => false,
+  isItemCollapsed: () => false,
+  onItemCollapse: () => {},
+  onItemExpand: () => {},
+  onItemDoubleClick: () => {},
+  onItemClick: () => {},
+  remoteSelection: false,
+  isDisabledSelectionVisible: () => false,
+  getCheckboxTooltip: () => undefined
+});
+
+Table.propTypes = {
   className: PropTypes.string,
   loaderClassName: PropTypes.string,
   data: PropTypes.array.isRequired,
@@ -356,49 +386,39 @@ _defineProperty(Table, "propTypes", {
   onItemExpand: PropTypes.func,
   isDisabledSelectionVisible: PropTypes.func,
   getCheckboxTooltip: PropTypes.func,
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  onItemDoubleClick: PropTypes.func,
+  onItemClick: PropTypes.func,
   // focusSensorHOC
   focused: PropTypes.bool,
   onFocusRestore: PropTypes.func,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
   // selectionShortcutsHOC
   selection: PropTypes.instanceOf(Selection).isRequired,
   selectable: PropTypes.bool,
   onSelect: PropTypes.func,
-  onItemDoubleClick: PropTypes.func,
-  onItemClick: PropTypes.func,
   shortcutsMap: PropTypes.object,
   // disableHoverHOC
   disabledHover: PropTypes.bool,
   remoteSelection: PropTypes.bool,
   renderEmpty: PropTypes.func
-});
+};
 
-_defineProperty(Table, "defaultProps", {
-  isItemSelectable: () => true,
-  loading: false,
-  onSort: () => {},
-  onReorder: () => {},
-  getItemKey: item => item.id,
-  sortKey: 'id',
-  sortOrder: true,
-  draggable: false,
-  alwaysShowDragHandle: false,
-  stickyHeader: true,
-  getItemLevel: () => 0,
-  getItemClassName: () => null,
-  getItemDataTest: () => null,
-  isItemCollapsible: () => false,
-  isParentCollapsible: () => false,
-  isItemCollapsed: () => false,
-  onItemCollapse: () => {},
-  onItemExpand: () => {},
-  onItemDoubleClick: () => {},
-  onItemClick: () => {},
-  remoteSelection: false,
-  isDisabledSelectionVisible: () => {},
-  getCheckboxTooltip: () => {}
-});
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table))); // eslint-disable-next-line react/no-multi-comp
+
+
+class TableContainer extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "Table", getContainer());
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(this.Table, this.props);
+  }
+
+}
 
-var Table$1 = disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+_defineProperty(TableContainer, "propTypes", getContainer().propTypes);
 
-export { Table, Table$1 as default };
+export { Table, TableContainer as default };

package/dist/table-legacy-ng/table-legacy-ng.js

@@ -48,6 +48,7 @@ import '@jetbrains/icons/close';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
@@ -84,6 +85,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';

package/dist/table-legacy-ng/table-legacy-ng__pager.js

@@ -34,6 +34,7 @@ import '@jetbrains/icons/close';
 import 'deep-equal';
 import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
@@ -74,6 +75,8 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../input/input.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import '../global/rerender-hoc.js';
 import '../global/fuzzy-highlight.js';

package/dist/table-ng/smart-table-ng.js

@@ -11,6 +11,7 @@ import '../table/table.js';
 import 'classnames';
 import 'react-movable';
 import '../global/focus-sensor-hoc.js';
+import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';

package/dist/table-ng/table-ng.js

@@ -1,5 +1,5 @@
 import angularComponentFactory from '../global/angular-component-factory.js';
-import Table from '../table/table.js';
+import TableContainer from '../table/table.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'angular';
 import 'react';
@@ -10,6 +10,7 @@ import 'prop-types';
 import 'classnames';
 import 'react-movable';
 import '../global/focus-sensor-hoc.js';
+import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../global/get-uid.js';
 import '../shortcuts/shortcuts.js';
@@ -59,6 +60,6 @@ import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../table/cell.js';
 
-var tableNg = angularComponentFactory(Table, 'Table').name;
+var tableNg = angularComponentFactory(TableContainer, 'Table').name;
 
 export { tableNg as default };

package/dist/tabs/collapsible-more.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+import { TabProps } from './tab';
+export interface FakeMoreButtonProps {
+    hasActiveChildren: boolean;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+}
+export declare const AnchorLink: {
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): JSX.Element;
+    propTypes: {
+        hasActiveChildren: PropTypes.Requireable<boolean>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+    };
+};
+export interface MoreButtonProps {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    morePopupBeforeEnd: ReactNode;
+}
+export declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => JSX.Element | null>;
+export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => JSX.Element>;

package/dist/tabs/collapsible-more.js

@@ -56,6 +56,7 @@ 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 '../global/theme.js';

package/dist/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/dist/tabs/collapsible-tab.js

@@ -39,9 +39,9 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
   const titleClasses = classNames(modules_02138f4a.title, className, {
     [modules_02138f4a.selected]: selected,
     [modules_02138f4a.collapsed]: collapsed,
-    [activeClassName]: selected,
-    [collapsedClassName]: collapsed,
-    [collapsedActiveClassName]: collapsed && selected
+    [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, {
     title: title,
@@ -67,9 +67,9 @@ TabTitle.propTypes = {
 const getTabTitles = _ref2 => {
   let {
     items,
-    selected = 0,
+    selected = '0',
     collapsed,
-    onSelect = noop,
+    onSelect = () => undefined,
     ...props
   } = _ref2;
   return items.map((tab, index) => {
@@ -80,9 +80,7 @@ const getTabTitles = _ref2 => {
       handleSelect: onSelect(key),
       selected: isSelected,
       child: tab,
-      index: index,
-      collapsed: collapsed,
-      disabled: tab.props.disabled
+      collapsed: collapsed
     }, props));
   });
 };

package/dist/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;

package/dist/tabs/collapsible-tabs.js

@@ -57,6 +57,7 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 import '../dropdown/dropdown.js';
+import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '../button/button.js';
 import '../global/theme.js';
@@ -66,57 +67,53 @@ import './tab-link.js';
 
 const DEFAULT_DEBOUNCE_INTERVAL = 100;
 const MEASURE_TOLERANCE = 0.5;
-const DEFAULT_STATE = {
-  lastVisibleIndex: null,
-  sizes: {
+const CollapsibleTabs = _ref => {
+  let {
+    children,
+    selected,
+    onSelect,
+    moreClassName,
+    moreActiveClassName,
+    morePopupClassName,
+    morePopupBeforeEnd,
+    morePopupItemClassName,
+    initialVisibleItems
+  } = _ref;
+  const [sizes, setSizes] = React.useState({
     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
-          }
-        };
-      }
+    more: undefined
+  });
+  const [lastVisibleIndex, setLastVisibleIndex] = React.useState(null);
+  const elements = {
+    sizes,
+    lastVisibleIndex
+  };
+  const [preparedElements, setPreparedElements] = React.useState({
+    visible: [],
+    hidden: []
+  });
+  const measureRef = React.useRef(null);
+  const selectedIndex = React.useMemo(() => {
+    var _children$filter$find;
 
-    case ACTIONS.DEFINE_LAST_VISIBLE_INDEX:
-      {
-        const {
-          lastVisibleIndex
-        } = action;
-        return { ...state,
-          lastVisibleIndex
-        };
-      }
+    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;
 
-    default:
-      throw new Error();
-  }
-}
+    if (preparedElements.ready) {
+      items = preparedElements.visible;
+    } else {
+      items = initialVisibleItems ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems) : [];
+    }
 
-const useAdjustHandler = _ref => {
-  let {
-    elements,
-    children,
-    selectedIndex,
-    dispatch
-  } = _ref;
-  return React.useCallback(entry => {
+    return getTabTitles({
+      items,
+      selected,
+      onSelect
+    });
+  }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
+  const adjustTabs = React.useCallback(entry => {
     const containerWidth = entry.contentRect.width;
     const {
       tabs: tabsSizes,
@@ -163,58 +160,9 @@ const useAdjustHandler = _ref => {
     }
 
     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) : [];
+      setLastVisibleIndex(tabsToRender.length - 1);
     }
-
-    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
+  }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]); // Prepare list of visible and hidden elements
 
   React.useEffect(() => {
     const timeout = setTimeout(() => {
@@ -238,7 +186,10 @@ const CollapsibleTabs = _ref2 => {
 
       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);
+
+        if (selectedItem != null) {
+          res.visible.push(selectedItem);
+        }
       }
 
       const allVisibleTheSame = res.visible.length === preparedElements.visible.length && res.visible.every((item, index) => item === preparedElements.visible[index]);
@@ -267,8 +218,10 @@ const CollapsibleTabs = _ref2 => {
     }
 
     const measureTask = fastdom.measure(() => {
+      var _container$children;
+
       const container = measureRef.current;
-      const descendants = [...container.children];
+      const descendants = [...((_container$children = container === null || container === void 0 ? void 0 : container.children) !== null && _container$children !== void 0 ? _container$children : [])];
       const moreButton = descendants.pop();
       let moreButtonWidth = moreButton.offsetWidth;
       const {
@@ -288,8 +241,7 @@ const CollapsibleTabs = _ref2 => {
       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,
+        fastdom.mutate(() => setSizes({
           more: moreButtonWidth,
           tabs: tabsWidth
         }));
@@ -301,14 +253,13 @@ const CollapsibleTabs = _ref2 => {
   }, [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 => {
+    let measureTask = () => {};
+
+    const resizeObserver = new ResizeObserver(entries => {
       entries.forEach(entry => {
         fastdom.clear(measureTask);
         measureTask = fastdom.mutate(() => adjustTabs(entry));

package/dist/tabs/custom-item.d.ts

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { ReactElement } from 'react';
+import { TabProps } from './tab';
+export declare const CustomItem: {
+    ({ children }: TabProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+};