@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/tabs/tab-link.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
+    isSelected: boolean;
+    collapsed?: boolean;
+    title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+}
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): React.JSX.Element;
+declare namespace TabLink {
+    var propTypes: {
+        isSelected: PropTypes.Requireable<boolean>;
+        collapsed: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof TabLink>;
+export default _default;

package/components/tabs/tab-link.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import Link from '../link/link';
+import styles from './tabs.css';
+function TabLink({ isSelected, title, collapsed, ...restProps }) {
+    const renderedTitle = typeof title === 'function'
+        ? title(isSelected, collapsed)
+        : title;
+    return (<Link {...restProps}>
+      {() => (<div className={styles.container}>
+          <span className={styles.visible}>{renderedTitle}</span>
+          {/* hack for preserving constant tab width*/}
+          <span className={styles.hidden}>{renderedTitle}</span>
+          <span className={styles.hiddenBold}>{renderedTitle}</span>
+          <span className={styles.hiddenRegular}>{renderedTitle}</span>
+        </div>)}
+    </Link>);
+}
+TabLink.propTypes = {
+    isSelected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
+};
+export default memo(TabLink);

package/components/tabs/tab.d.ts

@@ -0,0 +1,27 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
+export interface TabProps {
+    title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
+    id?: string | null | undefined;
+    className?: string | null | undefined;
+    children?: ReactNode;
+    'data-test'?: string | null | undefined;
+    alwaysHidden?: boolean | null | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    activeClassName?: string | null | undefined;
+    collapsedClassName?: string | null | undefined;
+    collapsedActiveClassName?: string | null | undefined;
+}
+export default class Tab extends PureComponent<TabProps> {
+    static propTypes: {
+        title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>>;
+        id: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/tabs/tab.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+export default class Tab extends PureComponent {
+    static propTypes = {
+        title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+        id: PropTypes.string,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, children, 'data-test': dataTest } = this.props;
+        return (<div data-test={dataTests('ring-tab', dataTest)} className={classNames(className)}>
+        {children}
+      </div>);
+    }
+}

package/components/tabs/tabs.css

@@ -0,0 +1,224 @@
+@import "../global/variables.css";
+
+/* ensure styles order */
+@import "../link/link.css";
+
+@value dark from "../global/variables_dark.css";
+@value unit from "../global/global.css";
+@value line-shadow: inset 0 -1px 0 0;
+@value selected-line-shadow: inset 0 -2px 0 0;
+
+:root {
+  --ring-selected-tab-color: var(--ring-text-color);
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  --ring-selected-tab-color: var(--ring-main-color);
+}
+
+.tabs {
+  composes: font from "../global/global.css";
+}
+
+.titles {
+  display: inline-block;
+
+  margin-bottom: calc(unit * 2);
+}
+
+.titles {
+  box-shadow: line-shadow var(--ring-line-color);
+}
+
+.title {
+  composes: font from "../global/global.css";
+
+  position: relative;
+
+  display: inline-block;
+
+  padding: 0;
+
+  cursor: pointer;
+
+  color: inherit;
+
+  border: none;
+  border-radius: 0;
+  background: none;
+
+  line-height: calc(unit * 4);
+
+  &:hover,
+  &:active {
+    &.selected,
+    &.collapsed {
+      color: inherit;
+      box-shadow: selected-line-shadow var(--ring-text-color);
+    }
+
+    &:not(.selected),
+    &:not(.collapsed) {
+      color: var(--ring-link-hover-color);
+      outline-style: none;
+      box-shadow: inset 0 -1px 0 0 var(--ring-link-hover-color);
+    }
+  }
+
+  &:focus-visible {
+    color: var(--ring-main-color);
+    box-shadow: selected-line-shadow var(--ring-main-color);
+  }
+
+  &[disabled] {
+    pointer-events: none;
+  }
+}
+
+.title.titleLegacy {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.title + .title {
+  margin-left: calc(unit * 3);
+}
+
+.title[disabled] {
+  color: var(--ring-disabled-color);
+}
+
+.selected {
+  cursor: default;
+
+  color: var(--ring-active-text-color);
+
+  outline: none;
+  box-shadow: selected-line-shadow var(--ring-selected-tab-color);
+
+  font-weight: bold;
+}
+
+.visible {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  text-align: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.hidden {
+  display: flex;
+  visibility: hidden;
+}
+
+.hiddenBold {
+  display: flex;
+  visibility: hidden;
+
+  height: 0;
+
+  font-weight: bold;
+}
+
+.hiddenRegular {
+  display: flex;
+  visibility: hidden;
+
+  height: 0;
+
+  font-weight: normal;
+}
+
+.tabCounter {
+  padding-left: 8px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 19px; /* prevent jumps in Firefox */
+}
+
+.autoCollapseContainer {
+  position: relative;
+}
+
+.autoCollapse {
+  position: relative;
+
+  display: inline-flex;
+  visibility: hidden;
+  overflow: hidden;
+
+  max-width: 100%;
+}
+
+.autoCollapse .title {
+  flex-shrink: 0;
+}
+
+.rendered.adjusted {
+  visibility: visible;
+  overflow: visible;
+}
+
+.measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  height: 0;
+  margin: 0;
+
+  pointer-events: none;
+
+  opacity: 0;
+}
+
+.morePopup {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsed.collapsed {
+  width: 100%;
+
+  border-bottom: none;
+  box-shadow: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.collapsed.collapsed[disabled] {
+  color: var(--ring-disabled-color);
+}
+
+.collapsed .visible,
+.collapsed .hidden {
+  text-align: left;
+}
+
+.chevron {
+  padding-left: 4px;
+}
+
+.morePopupBeforeEnd.morePopupBeforeEnd.morePopupBeforeEnd {
+  padding: 0;
+}
+
+.morePopupBeforeEnd ~ div {
+  display: none;
+}

package/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @name Tabs
+ */
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

package/components/tabs/tabs.js

@@ -0,0 +1,7 @@
+/**
+ * @name Tabs
+ */
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

package/components/tabs-ng/tabs-ng.js

@@ -0,0 +1,206 @@
+import angular from 'angular';
+
+import className from 'classnames';
+
+import styles from '../tabs/tabs.css';
+
+import template from './tabs-ng__template';
+
+/**
+ * @name Tabs Ng
+ */
+
+const angularModule = angular.module('Ring.tabs', []);
+
+angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope) {
+  return {
+    restrict: 'E',
+    transclude: true,
+    template,
+    replace: true,
+
+    scope: {
+      tabParameter: '@',
+      tabsClass: '=',
+      control: '=?',
+      disableLocationChanging: '='
+    },
+
+    controller: function controller($scope) {
+      $scope.panes = [];
+      $scope.current = null;
+      $scope.styles = styles;
+
+      function getTabIdFromUrl() {
+        return $location.search()[$scope.tabParameter];
+      }
+
+      function doSelect(newPane, skipUrlUpdate) {
+        if (newPane === $scope.current || newPane.ngDisabled) {
+          return;
+        }
+
+        for (let index = 0; index < $scope.panes.length; index++) {
+          const pane = $scope.panes[index];
+
+          // Update current tab
+          if (pane === newPane || pane.tabId === newPane) {
+            $scope.current = newPane;
+            pane.selected = true;
+
+            if (!skipUrlUpdate) {
+              $location.search($scope.tabParameter, newPane.tabId);
+            }
+          } else { // Deselect all other
+            pane.selected = false;
+          }
+        }
+      }
+
+      function getNextPaneIndex(reverseOrder) {
+        const currentTabIndex = $scope.panes.indexOf($scope.current);
+        let next = currentTabIndex;
+
+        do {
+          next += (reverseOrder ? -1 : 1);
+        } while (next > -1 && next < $scope.panes.length && $scope.panes[next].ngDisabled);
+
+        if (next >= $scope.panes.length) {
+          next = $scope.panes.length - 1;
+        } else if (next < 0) {
+          next = 0;
+        }
+
+        // if no suitable tab found till the end of array
+        if ($scope.panes[next].ngDisabled) {
+          return currentTabIndex;
+        }
+
+        return next;
+      }
+
+      function getCurrentTab() {
+        const currentTabId = getTabIdFromUrl();
+
+        if (currentTabId) {
+          const currentTab = $scope.panes.find(pane => pane.tabId === currentTabId);
+
+          if (currentTab && !currentTab.ngDisabled) {
+            return currentTab;
+          } else {
+            return $scope.panes[getNextPaneIndex()];
+          }
+        } else {
+          return $scope.panes[0];
+        }
+      }
+
+      // controller methods
+
+      function checkCurrentTab() {
+        if ($scope.panes.length) {
+          doSelect(getCurrentTab(), true);
+        }
+      }
+
+      this.addTab = tab => {
+        $scope.panes.push(tab);
+
+        if ($scope.panes.length === 1 || tab.tabId === getTabIdFromUrl()) {
+          doSelect(tab, true);
+        }
+      };
+
+      this.removeTab = tab => {
+        const index = $scope.panes.indexOf(tab);
+
+        $scope.panes.splice(index, 1);
+        checkCurrentTab();
+      };
+
+      this.checkPane = checkCurrentTab;
+
+      // scope
+
+      $scope.$on('$destroy', $rootScope.$on('$routeUpdate', checkCurrentTab));
+
+      // Exposed methods
+      $scope.control = {};
+
+      $scope.control.isLast =
+        () => $scope.panes.indexOf($scope.current) === $scope.panes.length - 1;
+
+      $scope.control.isFirst = () => $scope.panes.indexOf($scope.current) === 0;
+
+      $scope.control.select = pane => {
+        doSelect(pane, $scope.disableLocationChanging);
+      };
+
+      $scope.control.next = () => {
+        const next = getNextPaneIndex();
+        doSelect($scope.panes[next], $scope.disableLocationChanging);
+      };
+
+      $scope.control.prev = () => {
+        const prev = getNextPaneIndex(true);
+        doSelect($scope.panes[prev], $scope.disableLocationChanging);
+      };
+
+      $scope.keyMap = {
+        next: $scope.control.next,
+        prev: $scope.control.prev,
+        focus: () => {
+          $scope.focus = !$scope.focus;
+          return !$scope.focus;
+        }
+      };
+
+      // For some reason ng-class doesn't work properly on tabs.
+      // From time to time several tabs look like selected despite correct scope state.
+      // I think this bug depends on the frequency of addTab calls (actually on digests)
+      // and ng-class detection of added and removed classes becomes broken.
+      // @maxim.erekhinskiy
+      $scope.tabClass = pane => className(styles.title, styles.titleLegacy, {
+        [styles.selected]: pane.selected
+      });
+
+      this.$onInit = () => {
+        if (!$scope.tabParameter) {
+          $scope.tabParameter = 'tab';
+        }
+      };
+    }
+  };
+});
+
+angularModule.directive('rgTabsPane', function rgTabsPaneDirective() {
+  return {
+    require: '^rgTabs',
+    restrict: 'E',
+    transclude: true,
+
+    scope: {
+      title: '@',
+      counter: '@',
+      tabId: '@?',
+      tabIndex: '@?',
+      selected: '=?',
+      ngDisabled: '=?'
+    },
+
+    link: function link(scope, element, attrs, tabsCtrl) {
+      scope.tabId = scope.tabId || scope.title.toLowerCase().replace(' ', '-');
+      scope.tabIndex = scope.tabIndex ? +scope.tabIndex : 0;
+
+      tabsCtrl.addTab(scope);
+
+      scope.$on('$destroy', () => {
+        tabsCtrl.removeTab(scope);
+      });
+    },
+
+    template: '<div class="ring-tabs__content" ng-class="{\'ring-tabs__content_active\':selected}" ng-if="selected" ng-transclude></div>'
+  };
+});
+
+export default angularModule.name;

package/components/tabs-ng/tabs-ng.stories.js

@@ -0,0 +1,30 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import RingTabs from './tabs-ng';
+
+export default {
+  title: 'Legacy Angular/Tabs Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Displays a tabset.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [RingTabs]);
+
+  return `
+      <rg-tabs class="container container_tabs">
+        <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
+        <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
+        <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
+        <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
+        <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
+      </rg-tabs>
+    `;
+};
+
+basic.storyName = 'basic';

package/components/tabs-ng/tabs-ng.test.js

@@ -0,0 +1,76 @@
+import 'angular';
+import 'angular-route';
+import 'angular-mocks';
+
+import styles from '../tabs/tabs.css';
+
+import Tabs from './tabs-ng';
+
+describe('Tabs Ng', () => {
+  let $rootScope;
+  let $compile;
+
+  function getActiveTab(element) {
+    return {
+      title: element[0].querySelector('[data-test-active="true"]'),
+      content: element[0].querySelector('div[ng-transclude]')
+    };
+  }
+
+  beforeEach(window.module(Tabs));
+
+  /* global inject */
+  beforeEach(inject((_$rootScope_, _$compile_) => {
+    $rootScope = _$rootScope_;
+    $compile = _$compile_;
+  }));
+
+  describe('DOM', () => {
+    it('Empty tabs', () => {
+      const element = $compile(
+        '<rg-tabs>' +
+        '</rg-tabs>'
+      )($rootScope);
+
+      $rootScope.$digest();
+      element[0].className.should.contain(styles.tabs);
+    });
+
+    it('One tab', () => {
+      const element = $compile(
+        '<rg-tabs>' +
+        '<rg-tabs-pane x-title="General">' +
+        'General' +
+        '</rg-tabs-pane>' +
+        '</rg-tabs>'
+      )($rootScope);
+
+      $rootScope.$digest();
+      const tab = getActiveTab(element);
+
+      tab.title.firstChild.should.contain.text('General');
+      tab.content.should.contain.text('General');
+    });
+
+    it('Two tabs', () => {
+      const element = $compile(
+        '<rg-tabs>' +
+        '<rg-tabs-pane x-title="General">' +
+        'General' +
+        '</rg-tabs-pane>' +
+        '<rg-tabs-pane x-title="Second">' +
+        'Second' +
+        '</rg-tabs-pane>' +
+        '</rg-tabs>'
+      )($rootScope);
+      element.isolateScope().control.next();
+
+      $rootScope.$digest();
+
+      const tab = getActiveTab(element);
+
+      tab.title.firstChild.should.contain.text('Second');
+      tab.content.should.contain.text('Second');
+    });
+  });
+});

package/components/tabs-ng/tabs-ng__template.js

@@ -0,0 +1,38 @@
+export default `<div
+  ng-class=":: styles.tabs"
+  rg-shortcuts="ring-tabs"
+  shortcuts-map="keyMap"
+  shortcuts-focus="focus"
+>
+  <div
+    ng-class=":: [styles.titles, tabsClass]"
+    role="tablist"
+  >
+    <button
+      role="tab"
+      type="button"
+      ng-repeat="pane in panes | orderBy:'tabIndex'"
+      ng-click="control.select(pane)"
+      ng-attr-tabindex="{{(pane.selected || pane.ngDisabled) ? -1 : 0}}"
+      ng-disabled="pane.ngDisabled"
+      data-test="ring-tab"
+      ng-attr-data-test-active="{{pane.selected  ? 'true' : 'false'}}"
+      ng-attr-class="{{ tabClass(pane) }}"
+    ><span
+      ng-class=":: styles.visible">{{pane.title}}<span
+      ng-class=":: styles.tabCounter"
+      ng-show="pane.counter !== undefined">{{ pane.counter }}</span
+    ></span><!--
+      hack for preserving constant tab width
+    --><span ng-class=":: styles.hidden">{{pane.title}}<span
+      ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
+      <span ng-class=":: styles.hiddenBold">{{pane.title}}<span
+        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
+      <span ng-class=":: styles.hiddenRegular">{{pane.title}}<span
+        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
+    </button>
+  </div>
+
+  <div ng-transclude></div>
+
+</div>`;