@skbkontur/react-ui 0.0.0-001618ff8c → 0.0.0-044e274f2c

package/components/Tabs/Indicator/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","throttle","globalObject","isInstanceOf","LayoutEvents","EmotionConsumer","getRootNode","rootNode","getDOMRect","ThemeContext","getStyles","TabsContext","TabsDataTids","Indicator","_class","_Indicator","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","styles","eventListener","removeTabUpdatesListener","reflow","_this$context","getTab","activeTab","node","nodeStyles","stylesUpdated","some","prop","setState","_inheritsLoose","_proto","prototype","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","_this2","createElement","emotion","Consumer","theme","renderMain","_this$context2","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","className","cx","root","style","ref","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"sources":["Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.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  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    const styles = this.styles;\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={this.emotion.cx(\n          styles.root(this.theme),\n          indicators.primary && styles.primary(this.theme),\n          indicators.success && styles.success(this.theme),\n          indicators.warning && styles.warning(this.theme),\n          indicators.error && styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement)) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Tabs/Indicator.js",
+  "module": "Indicator",
+  "types": "../Indicator.d.ts",
+  "sideEffects": false
+}

package/components/Tabs/Indicator.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { TabsContextType } from './TabsContext';
 export interface IndicatorProps {
     className?: string;
@@ -6,24 +6,25 @@ export interface IndicatorProps {
         on: (x0: () => void) => () => void;
     };
     vertical: boolean;
-    context?: TabsContextType;
 }
 export interface IndicatorState {
     styles: React.CSSProperties;
 }
 export declare class Indicator extends React.Component<IndicatorProps, IndicatorState> {
+    static contextType: React.Context<TabsContextType<any>>;
+    context: TabsContextType;
     state: IndicatorState;
     private theme;
+    private emotion;
+    private styles;
     private eventListener;
     private removeTabUpdatesListener;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
-    render(): JSX.Element;
+    componentDidUpdate(): void;
+    render(): React.JSX.Element;
     private renderMain;
     private reflow;
-    private throttledReflow;
     private getStyles;
 }
-export declare const IndicatorWithContext: (props: IndicatorProps) => JSX.Element;
-export default IndicatorWithContext;

package/components/Tabs/Indicator.styles/Indicator.styles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        height: ", ";\n        position: absolute;\n        transition: all 0.2s ease-out;\n        border-radius: ", ";\n      "])), t.tabColorFocus, t.tabBorderWidth, t.tabIndicatorBorderRadius);
+    },
+    primary: function primary(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorError);
+    }
+  });
+};

package/components/Tabs/Indicator.styles/Indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memoizeStyle","getStyles","emotion","root","t","css","_templateObject","_taggedTemplateLiteralLoose","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","_templateObject2","tabColorPrimary","success","_templateObject3","tabColorSuccess","warning","_templateObject4","tabColorWarning","error","_templateObject5","tabColorError"],"sources":["Indicator.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorFocus};\n        height: ${t.tabBorderWidth};\n        position: absolute;\n        transition: all 0.2s ease-out;\n        border-radius: ${t.tabIndicatorBorderRadius};\n      `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorPrimary};\n      `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorSuccess};\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorWarning};\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorError};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACFH,CAAC,CAACI,aAAa;QACnBJ,CAAC,CAACK,cAAc;;;QAGTL,CAAC,CAACM,wBAAwB;;MAE/C,CAAC;;MAEDC,OAAO,WAAAA,QAACP,CAAQ,EAAE;QAChB,OAAOF,OAAO,CAACG,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;QACFH,CAAC,CAACS,eAAe;;MAEnC,CAAC;;MAEDC,OAAO,WAAAA,QAACV,CAAQ,EAAE;QAChB,OAAOF,OAAO,CAACG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;QACFH,CAAC,CAACY,eAAe;;MAEnC,CAAC;;MAEDC,OAAO,WAAAA,QAACb,CAAQ,EAAE;QAChB,OAAOF,OAAO,CAACG,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;QACFH,CAAC,CAACe,eAAe;;MAEnC,CAAC;;MAEDC,KAAK,WAAAA,MAAChB,CAAQ,EAAE;QACd,OAAOF,OAAO,CAACG,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;QACFH,CAAC,CAACkB,aAAa;;MAEjC;IACF,CAAC,CAAC","ignoreList":[]}

package/components/Tabs/Indicator.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Tabs/Indicator.styles.js",
+  "module": "Indicator.styles",
+  "types": "../Indicator.styles.d.ts",
+  "sideEffects": false
+}

package/components/Tabs/Indicator.styles.d.ts

@@ -1,9 +1,9 @@
-import { ITheme } from '../../lib/theming/Theme';
-declare const jsStyles: {
-    root(t: ITheme): string;
-    primary(t: ITheme): string;
-    success(t: ITheme): string;
-    warning(t: ITheme): string;
-    error(t: ITheme): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };
-export default jsStyles;

package/components/Tabs/Tab/Tab.js

@@ -0,0 +1,206 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class, _Tab;
+import React from 'react';
+import invariant from 'invariant';
+import { globalObject } from '@skbkontur/global-object';
+import { ResizeDetector } from "../../../internal/ResizeDetector";
+import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
+import { keyListener } from "../../../lib/events/keyListener";
+import { isFunctionalComponent } from "../../../lib/utils";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
+import { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from "../Tab.styles";
+export var TabDataTids = {
+  root: 'Tab__root'
+};
+
+/**
+ * Вложенный элемент компонента `<Tabs />`.
+ */
+export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Component) {
+  function Tab(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.context = _this.context;
+    _this.getProps = createPropsGetter(Tab.defaultProps);
+    _this.state = {
+      focusedByKeyboard: false
+    };
+    _this.tabComponent = null;
+    _this.getUnderlyingNode = function () {
+      return _this.tabComponent;
+    };
+    _this.getId = function () {
+      return _this.props.id || _this.getProps().href;
+    };
+    _this.refTabComponent = function (instance) {
+      _this.tabComponent = instance;
+    };
+    _this.getTabInstance = function () {
+      return _this;
+    };
+    _this.switchTab = function (event) {
+      if (_this.props.disabled) {
+        event.preventDefault();
+        return;
+      }
+      var _this$getProps = _this.getProps(),
+        href = _this$getProps.href,
+        component = _this$getProps.component;
+      var id = _this.props.id || href;
+      if (_this.props.onClick) {
+        _this.props.onClick(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+      }
+      if (typeof id === 'string') {
+        _this.context.switchTab(id);
+      }
+      if (component === 'a' && !href) {
+        event.preventDefault();
+      }
+    };
+    _this.handleKeyDown = function (e) {
+      if (_this.props.disabled) {
+        return;
+      }
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+        if (e.defaultPrevented) {
+          return;
+        }
+      }
+      var id = _this.getId();
+      if (typeof id !== 'string') {
+        return;
+      }
+      if (!isKeyArrow(e)) {
+        return;
+      }
+      e.preventDefault();
+      var delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;
+      _this.context.shiftFocus(id, delta);
+    };
+    _this.handleFocus = function () {
+      if (_this.props.disabled) {
+        return;
+      }
+
+      // focus event fires before keyDown eventlistener
+      // so we should check focusKeyPressed in async way
+      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+        if (keyListener.isTabPressed || keyListener.isArrowPressed) {
+          _this.setState({
+            focusedByKeyboard: true
+          });
+        }
+      });
+    };
+    _this.handleBlur = function () {
+      if (_this.props.disabled) {
+        return;
+      }
+      _this.setState({
+        focusedByKeyboard: false
+      });
+    };
+    invariant(_this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');
+    return _this;
+  }
+  _inheritsLoose(Tab, _React$Component);
+  var _proto = Tab.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var id = this.getId();
+    if (typeof id === 'string') {
+      this.context.addTab(id, this.getTabInstance);
+    }
+  };
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    if (this.context.activeTab === this.props.id) {
+      this.context.notifyUpdate();
+    }
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var id = this.getId();
+    if (typeof id === 'string') {
+      this.context.removeTab(id);
+    }
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      _this2.styles = getStyles(_this2.emotion);
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
+    });
+  };
+  _proto.getIndicators = function getIndicators() {
+    return {
+      error: Boolean(this.props.error),
+      warning: Boolean(this.props.warning),
+      success: Boolean(this.props.success),
+      primary: Boolean(this.props.primary),
+      disabled: Boolean(this.props.disabled)
+    };
+  };
+  _proto.renderMain = function renderMain() {
+    var _this$emotion$cx, _this$emotion$cx2;
+    var _this$props = this.props,
+      children = _this$props.children,
+      disabled = _this$props.disabled,
+      error = _this$props.error,
+      warning = _this$props.warning,
+      success = _this$props.success,
+      primary = _this$props.primary,
+      ariaDescribedby = _this$props['aria-describedby'],
+      ariaLabel = _this$props['aria-label'];
+    var _this$getProps2 = this.getProps(),
+      Component = _this$getProps2.component,
+      href = _this$getProps2.href;
+    var isActive = false;
+    var isVertical = false;
+    var id = this.getId();
+    if (typeof id === 'string') {
+      isActive = this.context.activeTab === this.getId();
+      isVertical = this.context.vertical;
+    }
+    var orientationStyles = isVertical ? getVerticalStyles(this.emotion) : getHorizontalStyles(this.emotion);
+    var styles = this.styles;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, getVisualStateDataAttributes({
+      active: isActive,
+      disabled: disabled
+    }), this.props), /*#__PURE__*/React.createElement(Component, {
+      "data-tid": TabDataTids.root,
+      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.rootSmall(this.theme)] = this.context.size === 'small', _this$emotion$cx[styles.rootMedium(this.theme)] = this.context.size === 'medium', _this$emotion$cx[styles.rootLarge(this.theme)] = this.context.size === 'large', _this$emotion$cx[styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _this$emotion$cx[styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _this$emotion$cx[styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _this$emotion$cx[orientationStyles.primary(this.theme)] = !!primary, _this$emotion$cx[orientationStyles.success(this.theme)] = !!success, _this$emotion$cx[orientationStyles.warning(this.theme)] = !!warning, _this$emotion$cx[orientationStyles.error(this.theme)] = !!error, _this$emotion$cx[styles.active()] = !!isActive, _this$emotion$cx[orientationStyles.active(this.theme)] = !!isActive, _this$emotion$cx[styles.disabled(this.theme)] = !!disabled, _this$emotion$cx[orientationStyles.disabled()] = !!disabled, _this$emotion$cx)),
+      onBlur: this.handleBlur,
+      onClick: this.switchTab,
+      onFocus: this.handleFocus,
+      onKeyDown: this.handleKeyDown,
+      tabIndex: disabled ? -1 : 0,
+      ref: isFunctionalComponent(Component) ? null : this.refTabComponent,
+      href: href,
+      "aria-describedby": ariaDescribedby,
+      "aria-label": ariaLabel
+    }, /*#__PURE__*/React.createElement(ResizeDetector, {
+      onResize: this.context.notifyUpdate
+    }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
+      className: this.emotion.cx(globalClasses.focus, (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.focusSmall(this.theme)] = this.context.size === 'small', _this$emotion$cx2[styles.focusMedium(this.theme)] = this.context.size === 'medium', _this$emotion$cx2[styles.focusLarge(this.theme)] = this.context.size === 'large', _this$emotion$cx2))
+    })));
+  };
+  return Tab;
+}(React.Component), _Tab.__KONTUR_REACT_UI__ = 'Tab', _Tab.displayName = 'Tab', _Tab.contextType = TabsContext, _Tab.defaultProps = {
+  component: 'a',
+  href: ''
+}, _Tab)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","getVisualStateDataAttributes","ThemeContext","TabsContext","TabsContextDefaultValue","getHorizontalStyles","getStyles","getVerticalStyles","globalClasses","TabDataTids","root","Tab","_class","_Tab","_React$Component","props","_this","call","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","_inheritsLoose","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","emotion","styles","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_this$emotion$cx","_this$emotion$cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","_extends","rootNodeRef","setRootNode","active","className","cx","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","onResize","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"sources":["Tab.tsx"],"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 { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/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\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 styles!: ReturnType<typeof getStyles>;\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          this.styles = getStyles(this.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 = this.styles;\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"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Tab/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Tabs/Tab.js",
+  "module": "Tab",
+  "types": "../Tab.d.ts",
+  "sideEffects": false
+}

package/components/Tabs/Tab.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { TabsContextType } from './TabsContext';
 export interface TabIndicators {
     error: boolean;
@@ -9,109 +9,76 @@ export interface TabIndicators {
     primary: boolean;
     disabled: boolean;
 }
-export interface TabProps {
+export declare const TabDataTids: {
+    readonly root: "Tab__root";
+};
+export interface TabProps<T extends string = string> extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     /**
-     * Tab content
-     */
-    children?: React.ReactNode;
-    /**
-     * Component to use as a tab
+     * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).
      */
     component?: React.ComponentType<any> | string;
     /**
-     * Link href
+     * `HTML`-аттрибут `href`.
      */
     href?: string;
     /**
-     * Tab identifier
+     * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.
      */
-    id?: string;
+    id?: T;
     /**
-     * Click event
+     * `HTML`-событие `onclick`.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Click event
+     * `HTML`-событие `onkeydown`.
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     /**
-     * Disabled indicator
+     * Переводит компонент в отключенное состояние.
      */
     disabled?: boolean;
     /**
-     * Error indicator
+     * Визуальное состояние ошибки.
      */
     error?: boolean;
     /**
-     * Warning indicator
+     * Визуальное состояние предупреждения.
      */
     warning?: boolean;
     /**
-     * Success indicator
+     * Визуальное состояние успеха.
      */
     success?: boolean;
     /**
-     * Primary indicator
+     * Визуальное состояние главного элемента.
      */
     primary?: boolean;
-    /**
-     * Style property
-     */
-    style?: React.CSSProperties;
-    context?: TabsContextType;
 }
 export interface TabState {
     focusedByKeyboard: boolean;
 }
+type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
+ * Вложенный элемент компонента `<Tabs />`.
  */
-export declare class Tab extends React.Component<TabProps, TabState> {
+export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        component: PropTypes.Requireable<any>;
-        disabled: PropTypes.Requireable<boolean>;
-        href: PropTypes.Validator<string>;
-        id: PropTypes.Validator<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        context: PropTypes.Requireable<PropTypes.InferProps<{
-            vertical: PropTypes.Validator<boolean>;
-            activeTab: PropTypes.Validator<string>;
-            getTab: PropTypes.Validator<(...args: any[]) => any>;
-            addTab: PropTypes.Validator<(...args: any[]) => any>;
-            removeTab: PropTypes.Validator<(...args: any[]) => any>;
-            notifyUpdate: PropTypes.Validator<(...args: any[]) => any>;
-            switchTab: PropTypes.Validator<(...args: any[]) => any>;
-            shiftFocus: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-    };
-    static defaultProps: {
-        component: string;
-        href: string;
-    };
+    static displayName: string;
+    static contextType: React.Context<TabsContextType<any>>;
+    context: TabsContextType;
+    static defaultProps: DefaultProps;
+    private getProps;
     state: TabState;
     private theme;
+    private emotion;
+    private styles;
     private tabComponent;
-    private isArrowKeyPressed;
-    componentWillMount(): void;
+    private setRootNode;
+    constructor(props: TabProps<T>);
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     getIndicators(): {
         error: boolean;
         warning: boolean;
@@ -119,17 +86,14 @@ export declare class Tab extends React.Component<TabProps, TabState> {
         primary: boolean;
         disabled: boolean;
     };
-    getUnderlyingNode: () => Nullable<React.ReactElement<Tab>>;
+    getUnderlyingNode: () => Nullable<React.ReactElement<Tab<T>, string | React.JSXElementConstructor<any>>>;
     private renderMain;
     private getId;
     private refTabComponent;
-    private handleKeyDownGlobal;
     private getTabInstance;
     private switchTab;
-    private handleMouseDown;
     private handleKeyDown;
     private handleFocus;
     private handleBlur;
 }
-export declare const TabWithContext: (props: TabProps) => JSX.Element;
-export default TabWithContext;
+export {};

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