@skbkontur/react-ui 0.0.0-edbe8cfc5c → 0.0.0-ee57da3e1e

package/components/Switcher/switcherTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/components/Tabs/Indicator/Indicator.js

@@ -0,0 +1,133 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import throttle from 'lodash.throttle';
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { styles } from "../Indicator.styles";
+import { TabsContext } from "../TabsContext";
+import { TabsDataTids } from "../Tabs";
+export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Indicator, _React$Component);
+
+  function Indicator() {
+    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.context = _this.context;
+    _this.state = {
+      styles: {}
+    };
+    _this.eventListener = null;
+    _this.removeTabUpdatesListener = null;
+    _this.reflow = throttle(function () {
+      var _this$context = _this.context,
+          getTab = _this$context.getTab,
+          activeTab = _this$context.activeTab;
+      var node = getTab(activeTab);
+
+      var nodeStyles = _this.getStyles(node);
+
+      var stylesUpdated = ['left', 'top', 'width', 'height'].some(function (prop) {
+        return nodeStyles[prop] !== _this.state.styles[prop];
+      });
+
+      if (stylesUpdated) {
+        _this.setState({
+          styles: nodeStyles
+        });
+      }
+    }, 100);
+    return _this;
+  }
+
+  var _proto = Indicator.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.eventListener = LayoutEvents.addListener(this.reflow);
+    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);
+    this.reflow();
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.reflow.cancel();
+
+    if (this.eventListener) {
+      this.eventListener.remove();
+    }
+
+    if (this.removeTabUpdatesListener) {
+      this.removeTabUpdatesListener();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.reflow();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this$context2 = this.context,
+        getTab = _this$context2.getTab,
+        activeTab = _this$context2.activeTab;
+    var node = getTab(activeTab);
+    var indicators = node && node.getIndicators && node.getIndicators() || {
+      error: false,
+      warning: false,
+      success: false,
+      primary: false,
+      disabled: false
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": TabsDataTids.indicatorRoot,
+      className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
+      style: this.state.styles,
+      ref: this.setRootNode
+    });
+  };
+
+  _proto.getStyles = function getStyles(node) {
+    var htmlNode = getRootNode(node);
+
+    if (htmlNode && htmlNode instanceof HTMLElement) {
+      var rect = getDOMRect(htmlNode);
+
+      if (this.props.vertical) {
+        return {
+          width: this.theme.tabBorderWidth,
+          left: htmlNode.offsetLeft,
+          top: htmlNode.offsetTop,
+          height: rect.bottom - rect.top
+        };
+      }
+
+      var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
+      return {
+        left: htmlNode.offsetLeft,
+        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
+        width: rect.right - rect.left
+      };
+    }
+
+    return {};
+  };
+
+  return Indicator;
+}(React.Component), _class2.contextType = TabsContext, _temp)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","TabsDataTids","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } 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\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      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\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    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={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 (htmlNode && htmlNode instanceof 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"]}

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,23 @@ 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 eventListener;
     private removeTabUpdatesListener;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
+    componentDidUpdate(): void;
     render(): 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 { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorError);
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Indicator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEYD,IAAAA,CAAC,CAACE,cAFd;;;AAKmBF,IAAAA,CAAC,CAACG,wBALrB;;AAOD,GATgC;;AAWjCC,EAAAA,OAXiC,mBAWzBJ,CAXyB,EAWf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACK,eADlB;;AAGD,GAfgC;;AAiBjCC,EAAAA,OAjBiC,mBAiBzBN,CAjByB,EAiBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACO,eADlB;;AAGD,GArBgC;;AAuBjCC,EAAAA,OAvBiC,mBAuBzBR,CAvByB,EAuBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACS,eADlB;;AAGD,GA3BgC;;AA6BjCC,EAAAA,KA7BiC,iBA6B3BV,CA7B2B,EA6BjB;AACd,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACW,aADlB;;AAGD,GAjCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return 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 css`\n      background: ${t.tabColorPrimary};\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      background: ${t.tabColorSuccess};\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      background: ${t.tabColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.tabColorError};\n    `;\n  },\n});\n"]}

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,8 @@
-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 { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    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,250 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import invariant from 'invariant';
+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 { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
+import { styles, horizontalStyles, verticalStyles, globalClasses } from "../Tab.styles";
+export var TabDataTids = {
+  root: 'Tab__root'
+};
+export
+/**
+* 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
+*/
+var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Tab, _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 _assertThisInitialized(_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
+
+
+      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;
+  }
+
+  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(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 _cx;
+
+    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'];
+
+    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 ? verticalStyles : horizontalStyles;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Component, {
+      "data-tid": TabDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _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
+    }, /*#__PURE__*/React.createElement(ResizeDetector, {
+      onResize: this.context.notifyUpdate
+    }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.focus(this.theme), globalClasses.focus)
+    })));
+  };
+
+  return Tab;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = TabsContext, _class2.defaultProps = {
+  component: 'a',
+  href: ''
+}, _temp)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Tab.tsx"],"names":["React","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","TabDataTids","root","Tab","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","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","Component","isActive","isVertical","vertical","orientationStyles","setRootNode","active","focus","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\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 { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, 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> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = '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 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      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\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 { children, disabled, error, warning, success, primary, 'aria-describedby': ariaDescribedby } = 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 ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\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        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\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    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/components/Tabs/Tab/package.json

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