@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/cjs/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tab.tsx"],"names":["TabDataTids","root","Tab","rootNode","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","emotion","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","styles","setRootNode","active","cx","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","displayName","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/getVisualStateDataAttributes';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\n/**\n * @deprecated use SizeProp\n */\nexport type TabSize = SizeProp;\n\nexport interface TabProps<T extends string = string>\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    CommonProps {\n  /**\n   * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * `HTML`-аттрибут `href`.\n   */\n  href?: string;\n\n  /**\n   * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.\n   */\n  id?: T;\n\n  /**\n   * `HTML`-событие `onclick`.\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * `HTML`-событие `onkeydown`.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Переводит компонент в отключенное состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Визуальное состояние ошибки.\n   */\n  error?: boolean;\n\n  /**\n   * Визуальное состояние предупреждения.\n   */\n  warning?: boolean;\n\n  /**\n   * Визуальное состояние успеха.\n   */\n  success?: boolean;\n\n  /**\n   * Визуальное состояние главного элемента.\n   */\n  primary?: boolean;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Вложенный элемент компонента `<Tabs />`.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n  public static displayName = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? getVerticalStyles(this.emotion) : getHorizontalStyles(this.emotion);\n    const styles = getStyles(this.emotion);\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={this.emotion.cx({\n            [styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={this.emotion.cx(globalClasses.focus, {\n                [styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/cjs/components/Tabs/Tab.md

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+
+const [active, setActive] = React.useState('/fuji');
+
+const NavLink = props => <a {...props} />;
+
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

package/cjs/components/Tabs/Tab.styles.d.ts

@@ -0,0 +1,34 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const getStyles: (emotion: Emotion) => {
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+};
+export declare const getHorizontalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+};
+export declare const getVerticalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+};

package/cjs/components/Tabs/Tab.styles.js

@@ -0,0 +1,234 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.globalClasses = exports.getVerticalStyles = exports.getStyles = exports.getHorizontalStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
+
+
+
+var _helpers = require("./helpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+
+var globalClasses = (0, _Emotion.prefix)('tab')({
+  focus: 'focus' });exports.globalClasses = globalClasses;
+
+
+var getStyles = function getStyles(emotion) {
+  function tabRoot(t, size) {
+    return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])),
+    t.tabBorderWidth,
+
+    t.tabTextColorDefault,
+
+
+    (0, _helpers.fontSize)(t, size),
+    (0, _helpers.lineHeight)(t, size),
+    (0, _helpers.paddingX)(t, size),
+    (0, _helpers.paddingX)(t, size),
+    (0, _helpers.paddingY)(t, size), t.tabBorderWidth,
+    (0, _helpers.paddingY)(t, size),
+
+
+    t.transitionDuration, t.transitionTimingFunction,
+
+
+
+    t.tabBorderWidth, t.tabColorHover);
+
+
+
+
+
+
+  }
+
+  function tabVertical(t, size) {
+    return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])),
+
+    t.tabBorderWidth,
+
+
+
+    (0, _DimensionFunctions.shift)((0, _helpers.paddingX)(t, size), "-" + t.tabBorderWidth),
+    (0, _helpers.paddingX)(t, size),
+
+
+
+    t.tabBorderWidth, t.tabColorHover,
+
+
+    globalClasses.focus,
+
+    t.tabBorderWidth);
+
+
+
+  }
+
+  function tabFocus(t, size) {
+    return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])),
+    t.tabOutlineWidth, t.tabColorFocus,
+    t.tabBorderWidth,
+    (0, _helpers.paddingX)(t, size),
+
+    (0, _helpers.paddingX)(t, size));
+
+
+  }
+
+  return (0, _Emotion.memoizeStyle)({
+    rootSmall: function rootSmall(t) {
+      return tabRoot(t, 'small');
+    },
+
+    rootMedium: function rootMedium(t) {
+      return tabRoot(t, 'medium');
+    },
+
+    rootLarge: function rootLarge(t) {
+      return tabRoot(t, 'large');
+    },
+
+    verticalSmall: function verticalSmall(t) {
+      return tabVertical(t, 'small');
+    },
+
+    verticalMedium: function verticalMedium(t) {
+      return tabVertical(t, 'medium');
+    },
+
+    verticalLarge: function verticalLarge(t) {
+      return tabVertical(t, 'large');
+    },
+
+    focusSmall: function focusSmall(t) {
+      return tabFocus(t, 'small');
+    },
+
+    focusMedium: function focusMedium(t) {
+      return tabFocus(t, 'medium');
+    },
+
+    focusLarge: function focusLarge(t) {
+      return tabFocus(t, 'large');
+    },
+
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: rgba(\n          ", ",\n          ", ",\n          ", ",\n          0.5\n        );\n        cursor: default;\n      "])),
+
+      ColorFunctions.red(t.tabTextColorDefault),
+      ColorFunctions.green(t.tabTextColorDefault),
+      ColorFunctions.blue(t.tabTextColorDefault));
+
+
+
+
+    },
+
+    active: function active() {
+      return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: default;\n      "])));
+
+
+    } });
+
+};exports.getStyles = getStyles;
+
+var getHorizontalStyles = function getHorizontalStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      active: function active(t) {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])),
+
+        t.tabBorderWidth);
+
+
+      },
+
+      disabled: function disabled() {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+
+
+
+
+      },
+
+      primary: function primary(t) {
+        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverPrimary);
+
+
+      },
+
+      success: function success(t) {
+        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverSuccess);
+
+
+      },
+
+      warning: function warning(t) {
+        return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverWarning);
+
+
+      },
+
+      error: function error(t) {
+        return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverError);
+
+
+      } }));};exports.getHorizontalStyles = getHorizontalStyles;
+
+
+var getVerticalStyles = function getVerticalStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      active: function active(t) {
+        return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])),
+
+        t.tabBorderWidth);
+
+
+      },
+
+      disabled: function disabled() {
+        return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+
+
+
+
+      },
+
+      primary: function primary(t) {
+        return emotion.css(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverPrimary);
+
+
+      },
+
+      success: function success(t) {
+        return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverSuccess);
+
+
+      },
+
+      warning: function warning(t) {
+        return emotion.css(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverWarning);
+
+
+      },
+
+      error: function error(t) {
+        return emotion.css(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+
+        t.tabColorHoverError);
+
+
+      } }));};exports.getVerticalStyles = getVerticalStyles;

package/cjs/components/Tabs/Tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","getStyles","emotion","tabRoot","t","size","css","tabBorderWidth","tabTextColorDefault","transitionDuration","transitionTimingFunction","tabColorHover","tabVertical","tabFocus","tabOutlineWidth","tabColorFocus","rootSmall","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","focusSmall","focusMedium","focusLarge","disabled","ColorFunctions","red","green","blue","active","getHorizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","getVerticalStyles"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const getStyles = (emotion: Emotion) => {\n  function tabRoot(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n  }\n\n  function tabVertical(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n  }\n\n  function tabFocus(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n  }\n\n  return memoizeStyle({\n    rootSmall(t: Theme) {\n      return tabRoot(t, 'small');\n    },\n\n    rootMedium(t: Theme) {\n      return tabRoot(t, 'medium');\n    },\n\n    rootLarge(t: Theme) {\n      return tabRoot(t, 'large');\n    },\n\n    verticalSmall(t: Theme) {\n      return tabVertical(t, 'small');\n    },\n\n    verticalMedium(t: Theme) {\n      return tabVertical(t, 'medium');\n    },\n\n    verticalLarge(t: Theme) {\n      return tabVertical(t, 'large');\n    },\n\n    focusSmall(t: Theme) {\n      return tabFocus(t, 'small');\n    },\n\n    focusMedium(t: Theme) {\n      return tabFocus(t, 'medium');\n    },\n\n    focusLarge(t: Theme) {\n      return tabFocus(t, 'large');\n    },\n\n    disabled(t: Theme) {\n      return emotion.css`\n        color: rgba(\n          ${ColorFunctions.red(t.tabTextColorDefault)},\n          ${ColorFunctions.green(t.tabTextColorDefault)},\n          ${ColorFunctions.blue(t.tabTextColorDefault)},\n          0.5\n        );\n        cursor: default;\n      `;\n    },\n\n    active() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n  });\n};\n\nexport const getHorizontalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n\nexport const getVerticalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n"]}

package/cjs/components/Tabs/Tabs.d.ts

@@ -0,0 +1,66 @@
+import React, { AriaAttributes } from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+import { Tab } from './Tab';
+declare type ValueBaseType = string;
+export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
+    /**
+     * Позволяет задать кастомный класс подчёркиванию таба.
+     */
+    indicatorClassName?: string;
+    /**
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: SizeProp;
+    /**
+     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
+     */
+    value: T;
+    /**
+     * Функция, позволяющая изменить текущий активный `<Tab />`.
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Переводит компонент в режим вертикального отображения.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * `CSS`-свойство `width`.
+     */
+    width?: number | string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+}
+export declare const TabsDataTids: {
+    readonly root: "Tabs__root";
+    readonly indicatorRoot: "Indicator__root";
+};
+declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
+/**
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ */
+export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static Tab: typeof Tab;
+    private theme;
+    private tabs;
+    private tabUpdates;
+    private listeners;
+    private setRootNode;
+    render(): JSX.Element;
+    private shiftFocus;
+    private notifyUpdate;
+    private switchTab;
+    private getTab;
+    private addTab;
+    private removeTab;
+}
+export {};

package/cjs/components/Tabs/Tabs.js

@@ -0,0 +1,197 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TabsDataTids = exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+
+
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _getRootNode = require("../../lib/rootNode/getRootNode");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _isInstanceOf = require("../../lib/isInstanceOf");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _Indicator = require("./Indicator");
+var _Tabs = require("./Tabs.styles");
+var _TabsContext = require("./TabsContext");
+var _Tab = require("./Tab");var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root' };exports.TabsDataTids = TabsDataTids;
+
+
+
+
+/**
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ */var
+
+Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Tabs.defaultProps);_this.
+
+
+
+
+
+    tabs = [];_this.
+
+    tabUpdates = {
+      on: function on(cb) {
+        var index = _this.listeners.push(cb);
+        return function () {
+          _this.listeners.splice(index, 1);
+        };
+      } };_this.
+
+
+    listeners = [];_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    shiftFocus = function (fromTab, delta) {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),tabs = _assertThisInitialize.tabs;
+      var index = tabs.findIndex(function (x) {return x.id === fromTab;});
+      var newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));
+      var tab = tabs[newIndex];
+
+      var tabNode = tab.getNode();
+      var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
+
+      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
+        htmlNode.focus();
+      }
+    };_this.
+
+    notifyUpdate = function () {
+      _this.listeners.forEach(function (cb) {return cb();});
+    };_this.
+
+    switchTab = function (id) {
+      var _this$props = _this.props,onValueChange = _this$props.onValueChange,value = _this$props.value;
+      if (id !== value && onValueChange) {
+        onValueChange(id);
+      }
+    };_this.
+
+    getTab = function (id) {
+      var _ref = _this.tabs.find(function (x) {return x.id === id;}) || {},_ref$getNode = _ref.getNode,getNode = _ref$getNode === void 0 ? null : _ref$getNode;
+      return getNode && getNode();
+    };_this.
+
+    addTab = function (id, getNode) {
+      _this.tabs = _this.tabs.concat({ id: id, getNode: getNode });
+    };_this.
+
+    removeTab = function (id) {
+      _this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
+    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName,ariaDescribedby = _this$props2['aria-describedby'];var _this$getProps = this.getProps(),vertical = _this$getProps.vertical,size = _this$getProps.size;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {var styles = (0, _Tabs.getStyles)(emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var _emotion$cx;_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.rootSmall(_this2.theme)] = size === 'small', _emotion$cx[styles.rootMedium(_this2.theme)] = size === 'medium', _emotion$cx[styles.rootLarge(_this2.theme)] = size === 'large', _emotion$cx[styles.vertical()] = vertical, _emotion$cx)), style: { width: width }, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, size: size, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.displayName = 'Tabs', _class2.defaultProps = { vertical: false, size: 'large' }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;