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

package/components/Switcher/package.json

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

package/components/Switcher/switcherTheme/package.json

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

package/components/Switcher/switcherTheme/switcherTheme.js

@@ -0,0 +1,23 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getSwitcherTheme = function getSwitcherTheme(theme) {
+  return ThemeFactory.create({
+    btnBorderWidth: theme.switcherButtonBorderWidth,
+    btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
+    btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,
+    btnLineHeightSmall: theme.switcherButtonLineHeightSmall,
+    btnFontSizeSmall: theme.switcherButtonFontSizeSmall,
+    btnPaddingXSmall: theme.switcherButtonPaddingXSmall,
+    btnPaddingYSmall: theme.switcherButtonPaddingYSmall,
+    btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,
+    btnLineHeightMedium: theme.switcherButtonLineHeightMedium,
+    btnFontSizeMedium: theme.switcherButtonFontSizeMedium,
+    btnPaddingXMedium: theme.switcherButtonPaddingXMedium,
+    btnPaddingYMedium: theme.switcherButtonPaddingYMedium,
+    btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,
+    btnLineHeightLarge: theme.switcherButtonLineHeightLarge,
+    btnFontSizeLarge: theme.switcherButtonFontSizeLarge,
+    btnPaddingXLarge: theme.switcherButtonPaddingXLarge,
+    btnPaddingYLarge: theme.switcherButtonPaddingYLarge,
+    btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge
+  }, theme);
+};

package/components/Switcher/switcherTheme/switcherTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["switcherTheme.ts"],"names":["ThemeFactory","getSwitcherTheme","theme","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEF,KAAK,CAACG,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEJ,KAAK,CAACK,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEN,KAAK,CAACO,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAER,KAAK,CAACS,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEhB,KAAK,CAACiB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAElB,KAAK,CAACmB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAEpB,KAAK,CAACqB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEtB,KAAK,CAACuB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE1B,KAAK,CAAC2B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE5B,KAAK,CAAC6B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEhC,KAAK,CAACiC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAElC,KAAK,CAACmC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAEpC,KAAK,CAACqC,+BArB9B,EADK;;AAwBLrC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}

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,139 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import throttle from 'lodash.throttle';
+import { globalObject } from '@skbkontur/global-object';
+import { isInstanceOf } from "../../../lib/isInstanceOf";
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } 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(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      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
+    };
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": TabsDataTids.indicatorRoot,
+      className: this.emotion.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 (isInstanceOf(htmlNode, globalObject.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","globalObject","isInstanceOf","LayoutEvents","EmotionConsumer","getRootNode","rootNode","getDOMRect","ThemeContext","getStyles","TabsContext","TabsDataTids","Indicator","context","state","styles","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","emotion","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","cx","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';\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\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          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 = getStyles(this.emotion);\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"]}

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,27 +1,29 @@
-import * as React from 'react';
-import { TabsContextType } from './TabsContext';
-export interface IndicatorProps {
-    className?: string;
-    tabUpdates: {
-        on: (x0: () => void) => () => void;
-    };
-    vertical: boolean;
-    context?: TabsContextType;
-}
-export interface IndicatorState {
-    styles: React.CSSProperties;
-}
-export declare class Indicator extends React.Component<IndicatorProps, IndicatorState> {
-    state: IndicatorState;
-    private eventListener;
-    private removeTabUpdatesListener;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
-    render(): JSX.Element;
-    private reflow;
-    private throttledReflow;
-    private getStyles;
-}
-export declare const IndicatorWithContext: (props: IndicatorProps) => JSX.Element;
-export default IndicatorWithContext;
+import React from 'react';
+import { TabsContextType } from './TabsContext';
+export interface IndicatorProps {
+    className?: string;
+    tabUpdates: {
+        on: (x0: () => void) => () => void;
+    };
+    vertical: boolean;
+}
+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 eventListener;
+    private removeTabUpdatesListener;
+    private setRootNode;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private reflow;
+    private getStyles;
+}

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

@@ -0,0 +1,24 @@
+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,"sources":["Indicator.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","t","css","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACE,aADlB;AAEYF,QAAAA,CAAC,CAACG,cAFd;;;AAKmBH,QAAAA,CAAC,CAACI,wBALrB;;AAOD,OATU;;AAWXC,MAAAA,OAXW,mBAWHL,CAXG,EAWO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACM,eADlB;;AAGD,OAfU;;AAiBXC,MAAAA,OAjBW,mBAiBHP,CAjBG,EAiBO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACQ,eADlB;;AAGD,OArBU;;AAuBXC,MAAAA,OAvBW,mBAuBHT,CAvBG,EAuBO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACU,eADlB;;AAGD,OA3BU;;AA6BXC,MAAAA,KA7BW,iBA6BLX,CA7BK,EA6BK;AACd,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACY,aADlB;;AAGD,OAjCU,EAAD,CADW,GAAlB","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"]}

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

@@ -0,0 +1,9 @@
+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;
+};

package/components/Tabs/Tab/Tab.js

@@ -0,0 +1,253 @@
+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 { 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/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'
+};
+/**
+ * @deprecated use SizeProp
+ */
+
+export
+/**
+* Вложенный элемент компонента `<Tabs />`.
+*/
+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
+
+
+      globalObject.requestAnimationFrame == null ? void 0 : 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;
+  }
+
+  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;
+      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 = getStyles(this.emotion);
+    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), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.displayName = '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","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","getVisualStateDataAttributes","ThemeContext","TabsContext","TabsContextDefaultValue","getHorizontalStyles","getStyles","getVerticalStyles","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","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","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"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/components/Tabs/Tab/package.json

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