@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/tabs/collapsible-tabs.js

@@ -1,314 +1,196 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import fastdom from 'fastdom';
-
 import styles from './tabs.css';
-import {FakeMoreButton, MoreButton} from './collapsible-more';
+import { FakeMoreButton, MoreButton } from './collapsible-more';
 import getTabTitles from './collapsible-tab';
-
 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 = ({
-  elements, children, selectedIndex, dispatch
-}) => 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 ?? 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]);
-
-export const CollapsibleTabs = ({
-  children,
-  selected,
-  onSelect,
-  moreClassName,
-  moreActiveClassName,
-  morePopupClassName,
-  morePopupBeforeEnd,
-  morePopupItemClassName,
-  initialVisibleItems
-}) => {
-  const [elements, dispatch] = React.useReducer(visibilityReducer, DEFAULT_STATE);
-  const [preparedElements, setPreparedElements] = React.useState({visible: [], hidden: []});
-
-  const measureRef = React.useRef(null);
-
-  const selectedIndex = React.useMemo(() => children.
-    filter(tab => tab.props.alwaysHidden !== true).
-    findIndex(tab => tab.props.id === selected) ?? 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
+export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }) => {
+    const [sizes, setSizes] = React.useState({ tabs: [], more: undefined });
+    const [lastVisibleIndex, setLastVisibleIndex] = React.useState(null);
+    const elements = { sizes, lastVisibleIndex };
+    const [preparedElements, setPreparedElements] = React.useState({
+        visible: [],
+        hidden: []
     });
-  }, [
-    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(() => {
-      const res = children.reduce((accumulator, tab) => {
-        if (tab.props.alwaysHidden !== true &&
-          accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
-          accumulator.visible.push(tab);
-        } else {
-          accumulator.hidden.push(tab);
+    const measureRef = React.useRef(null);
+    const selectedIndex = React.useMemo(() => children.
+        filter(tab => tab.props.alwaysHidden !== true).
+        findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
+    const visibleElements = React.useMemo(() => {
+        let items;
+        if (preparedElements.ready) {
+            items = preparedElements.visible;
         }
-
-        return accumulator;
-      }, {visible: [], hidden: [], ready: elements.lastVisibleIndex !== null});
-
-      if (selectedIndex > (elements.lastVisibleIndex ?? 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(
-    styles.titles,
-    styles.autoCollapse,
-    isAdjusted && styles.adjusted
-  );
-
-  return (
-    <div className={styles.autoCollapseContainer}>
+        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 = 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 ?? 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) {
+            setLastVisibleIndex(tabsToRender.length - 1);
+        }
+    }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+    // Prepare list of visible and hidden elements
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            const res = children.reduce((accumulator, tab) => {
+                if (tab.props.alwaysHidden !== true &&
+                    accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
+                    accumulator.visible.push(tab);
+                }
+                else {
+                    accumulator.hidden.push(tab);
+                }
+                return accumulator;
+            }, { visible: [], hidden: [], ready: elements.lastVisibleIndex !== null });
+            if (selectedIndex > (elements.lastVisibleIndex ?? 0)) {
+                const selectedItem = children.find(tab => !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]);
+            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(() => setSizes({ more: moreButtonWidth, tabs: tabsWidth }));
+            }
+        });
+        return () => {
+            fastdom.clear(measureTask);
+        };
+    }, [children, elements.sizes.more, elements.sizes.tabs]);
+    // Start observers to listen resizing and mutation
+    React.useEffect(() => {
+        if (measureRef.current === null) {
+            return undefined;
+        }
+        let measureTask = () => { };
+        const 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(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
+    return (<div className={styles.autoCollapseContainer}>
       <div className={classNames(className, styles.rendered)}>
         {visibleElements}
-        <MoreButton
-          moreClassName={moreClassName}
-          moreActiveClassName={moreActiveClassName}
-          morePopupClassName={morePopupClassName}
-          morePopupBeforeEnd={morePopupBeforeEnd}
-          morePopupItemClassName={morePopupItemClassName}
-          items={preparedElements.hidden}
-          selected={selected}
-          onSelect={onSelect}
-        />
+        <MoreButton moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} morePopupClassName={morePopupClassName} morePopupBeforeEnd={morePopupBeforeEnd} morePopupItemClassName={morePopupItemClassName} items={preparedElements.hidden} selected={selected} onSelect={onSelect}/>
       </div>
       <div ref={measureRef} className={classNames(className, styles.measure)}>
         {childrenToMeasure}
-        <FakeMoreButton
-          hasActiveChildren={
-            preparedElements.hidden.some(
-              item => item.props.alwaysHidden && item.props.id === selected
-            )
-          }
-          moreClassName={moreClassName}
-          moreActiveClassName={moreActiveClassName}
-        />
+        <FakeMoreButton hasActiveChildren={preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected)} moreClassName={moreClassName} moreActiveClassName={moreActiveClassName}/>
       </div>
-    </div>
-  );
+    </div>);
 };
-
 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
+    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
 };
-
 export default React.memo(CollapsibleTabs);

package/components/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>;
+    };
+};

package/components/tabs/custom-item.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-
-export const CustomItem = ({children}) => children;
+export const CustomItem = ({ children }) => children;
 CustomItem.propTypes = {
-  children: PropTypes.node.isRequired
+    children: PropTypes.node.isRequired
 };

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

@@ -0,0 +1,33 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { CollapsibleTabsProps } from './collapsible-tabs';
+import { CustomItem } from './custom-item';
+import { TabProps } from './tab';
+export { CustomItem };
+declare type Children = readonly Children[] | ReactElement<TabProps> | null | boolean;
+export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
+    children: Children;
+    onSelect: (key: string) => void;
+    className?: string | null | undefined;
+    autoCollapse?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+declare class Tabs extends PureComponent<TabsProps> {
+    static propTypes: {
+        selected: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        href: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-test': PropTypes.Requireable<string>;
+        autoCollapse: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        onSelect(): void;
+    };
+    handleSelect: (arg: string) => () => void;
+    getTabTitle: (child: ReactElement<TabProps>, i: number) => JSX.Element;
+    render(): JSX.Element;
+}
+export declare type TabsAttrs = JSX.LibraryManagedAttributes<typeof Tabs, TabsProps>;
+export default Tabs;