@semcore/tab-line 3.0.11 → 3.0.13

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.13] - 2022-10-07
+
+### Changed
+
+- Updated major dependency `@semcore/neighbor-location` [2.3.15 ~> 3.0.0]
+
+## [3.0.12] - 2022-10-04
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.11 ~> 4.5.12], `@semcore/neighbor-location` [2.3.15 ~> 2.3.16], `@semcore/utils` [3.37.1 ~> 3.37.2]).
+
 ## [3.0.11] - 2022-09-07
 
 ### Fixed
@@ -32,42 +44,6 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.9 ~> 4.5.10], `@semcore/neighbor-location` [2.3.13 ~> 2.3.14], `@semcore/utils` [3.36.0 ~> 3.37.0]).
 
-## [3.0.6] - 2022-08-11
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.8 ~> 4.5.9], `@semcore/neighbor-location` [2.3.12 ~> 2.3.13], `@semcore/utils` [3.35.1 ~> 3.36.0]).
-
-## [3.0.5] - 2022-07-22
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.6 ~> 4.5.7], `@semcore/neighbor-location` [2.3.10 ~> 2.3.11], `@semcore/utils` [3.34.0 ~> 3.35.0]).
-
-## [3.0.4] - 2022-07-14
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/neighbor-location` [2.3.9 ~> 2.3.10]).
-
-## [3.0.3] - 2022-06-02
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.4 ~> 4.5.5], `@semcore/neighbor-location` [2.3.7 ~> 2.3.8], `@semcore/utils` [3.32.2 ~> 3.33.0]).
-
-## [3.0.2] - 2022-05-31
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.3 ~> 4.5.4], `@semcore/neighbor-location` [2.3.6 ~> 2.3.7], `@semcore/utils` [3.32.1 ~> 3.32.2]).
-
-## [3.0.1] - 2022-05-19
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.1 ~> 4.5.3], `@semcore/neighbor-location` [2.3.5 ~> 2.3.6], `@semcore/utils` [3.32.0 ~> 3.32.1]).
-
 ## [3.0.0] - 2022-05-17
 
 ### BREAK

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright ©, 2022, Semrush Inc. (written by Roman Lysov, Sergey Kobets, Mikhail Karachev, Julia Mnizhek, Elena Krasnopolskaia, Mikhail Sereniti).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/cjs/TabLine.js

@@ -35,7 +35,7 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/e
 
 var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
 
-var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-location"));
+var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
 
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 
@@ -56,23 +56,23 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabLine_zegbq_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_zegbq_gg_.__underlined_zegbq_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_zegbq_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_zegbq_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_zegbq_gg_:active,.___STabLineItem_zegbq_gg_:focus,.___STabLineItem_zegbq_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_zegbq_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_zegbq_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_zegbq_gg_ .___SText_zegbq_gg_:not(:last-child){margin-right:8px}.___STabLineItem_zegbq_gg_ .___SAddon_zegbq_gg_:not(:last-child){margin-right:8px}.___SIndicator_zegbq_gg_,.___STabLineItem_zegbq_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_zegbq_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_zegbq_gg_.__selected_zegbq_gg_{flex-shrink:0}.___STabLineItem_zegbq_gg_.__disabled_zegbq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_zegbq_gg_.__keyboardFocused_zegbq_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_zegbq_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_zegbq_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_zegbq_gg_._size_m_zegbq_gg_{height:28px;min-width:18px}.___STabLineItem_zegbq_gg_._size_m_zegbq_gg_ .___SText_zegbq_gg_{font-size:14px;line-height:1.42}.___STabLineItem_zegbq_gg_._size_l_zegbq_gg_{height:40px;min-width:26px}.___STabLineItem_zegbq_gg_._size_l_zegbq_gg_ .___SText_zegbq_gg_{font-size:16px;line-height:1.5}.___STabLineItem_zegbq_gg_._neighborLocation_left_zegbq_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_zegbq_gg_:after{transition:none}.___SIndicator_zegbq_gg_{transition:none}}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___STabLine_vg2jz_gg_ {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n}\n\n.___STabLine_vg2jz_gg_.__underlined_vg2jz_gg_ {\n  border-bottom: 1px solid #c4c7cf;\n}\n\n.___STabLineItem_vg2jz_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  touch-action: manipulation;\n  white-space: nowrap;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n  outline: none;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: visible;\n  outline: 0;\n  text-align: center;\n  vertical-align: middle;\n  font-family: inherit;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  color: #191b23;\n  margin-right: 16px\n}\n\n.___STabLineItem_vg2jz_gg_::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n\n.___STabLineItem_vg2jz_gg_:active,\n  .___STabLineItem_vg2jz_gg_:hover,\n  .___STabLineItem_vg2jz_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___STabLineItem_vg2jz_gg_::after {\n    content: '';\n    left: 0;\n    width: 100%;\n    background-color: transparent;\n    transition: background-color 0.2s;\n  }\n\n.___STabLineItem_vg2jz_gg_:hover::after {\n    background-color: #c4c7cf;\n  }\n\n.___STabLineItem_vg2jz_gg_ .___SText_vg2jz_gg_:not(:last-child) {\n    margin-right: 8px;\n  }\n\n.___STabLineItem_vg2jz_gg_ .___SAddon_vg2jz_gg_:not(:last-child) {\n    margin-right: 8px;\n  }\n\n.___SIndicator_vg2jz_gg_,\n.___STabLineItem_vg2jz_gg_::after {\n  position: absolute;\n  display: block;\n  bottom: -1px;\n  height: 2px;\n}\n\n.___SIndicator_vg2jz_gg_ {\n  transition: transform 0.5s ease;\n  background-color: #008ff8;\n  will-change: transform;\n}\n\n.___STabLineItem_vg2jz_gg_.__selected_vg2jz_gg_ {\n  flex-shrink: 0;\n}\n\n.___STabLineItem_vg2jz_gg_.__disabled_vg2jz_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___STabLineItem_vg2jz_gg_.__keyboardFocused_vg2jz_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SText_vg2jz_gg_ {\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.___SAddon_vg2jz_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___STabLineItem_vg2jz_gg_._size_m_vg2jz_gg_ {\n  height: 28px;\n  min-width: 18px\n}\n\n.___STabLineItem_vg2jz_gg_._size_m_vg2jz_gg_ .___SText_vg2jz_gg_ {\n    font-size: 14px;\n    line-height: 1.42;\n  }\n\n.___STabLineItem_vg2jz_gg_._size_l_vg2jz_gg_ {\n  height: 40px;\n  min-width: 26px\n}\n\n.___STabLineItem_vg2jz_gg_._size_l_vg2jz_gg_ .___SText_vg2jz_gg_ {\n    font-size: 16px;\n    line-height: 1.5;\n  }\n\n.___STabLineItem_vg2jz_gg_._neighborLocation_left_vg2jz_gg_ {\n  margin-right: 0;\n}\n\n@media (prefers-reduced-motion) {\n    .___STabLineItem_vg2jz_gg_::after {\n      transition: none;\n    }\n\n  .___SIndicator_vg2jz_gg_ {\n    transition: none;\n  }\n}\n"
 /*__inner_css_end__*/
-, "zegbq_gg_")
+, "vg2jz_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabLine": "___STabLine_zegbq_gg_",
-  "_underlined": "__underlined_zegbq_gg_",
-  "__STabLineItem": "___STabLineItem_zegbq_gg_",
-  "__SText": "___SText_zegbq_gg_",
-  "__SAddon": "___SAddon_zegbq_gg_",
-  "__SIndicator": "___SIndicator_zegbq_gg_",
-  "_selected": "__selected_zegbq_gg_",
-  "_disabled": "__disabled_zegbq_gg_",
-  "_keyboardFocused": "__keyboardFocused_zegbq_gg_",
-  "_size_m": "_size_m_zegbq_gg_",
-  "_size_l": "_size_l_zegbq_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_zegbq_gg_"
+  "__STabLine": "___STabLine_vg2jz_gg_",
+  "_underlined": "__underlined_vg2jz_gg_",
+  "__STabLineItem": "___STabLineItem_vg2jz_gg_",
+  "__SText": "___SText_vg2jz_gg_",
+  "__SAddon": "___SAddon_vg2jz_gg_",
+  "__SIndicator": "___SIndicator_vg2jz_gg_",
+  "_selected": "__selected_vg2jz_gg_",
+  "_disabled": "__disabled_vg2jz_gg_",
+  "_keyboardFocused": "__keyboardFocused_vg2jz_gg_",
+  "_size_m": "_size_m_vg2jz_gg_",
+  "_size_l": "_size_l_vg2jz_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_vg2jz_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -204,26 +204,32 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(TabLineRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
 
 function TabLineItem(props) {
-  var _ref2 = arguments[0],
-      _ref6;
-
+  var _ref2 = arguments[0];
   var STabLineItem = _flexBox.Box;
   var Children = props.Children,
       styles = props.styles,
       addonLeft = props.addonLeft,
-      addonRight = props.addonRight;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, (0, _core.assignProps)({
-    "type": "button",
-    "tag": "button",
-    "role": "tab"
-  }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
-    tag: addonLeft
-  }) : null, (0, _addonTextChildren["default"])(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
-    tag: addonRight
-  }) : null);
+      addonRight = props.addonRight,
+      neighborLocation = props.neighborLocation;
+  return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
+    neighborLocation: neighborLocation
+  }, function (neighborLocation) {
+    var _ref6;
+
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, (0, _core.assignProps)({
+      "tag": "button",
+      "neighborLocation": neighborLocation,
+      "type": "button",
+      "role": "tab"
+    }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
+      tag: addonLeft
+    }) : null, (0, _addonTextChildren["default"])(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
+      tag: addonRight
+    }) : null);
+  });
 }
 
-TabLineItem.enhance = [(0, _keyboardFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()];
+TabLineItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
 
 function Text(props) {
   var _ref3 = arguments[0],

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","sstyled","Component","defaultValue","underlined","a11yEnhance","TabLineItem","STabLineItem","addonLeft","addonRight","addonTextChildren","TabLine","Item","Text","Addon","enhance","keyboardFocusEnhance","neighborLocationEnhance","SText","SAddon","createComponent"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  $observer;\n  $observerTab;\n  $indicator = React.createRef();\n  $tabsParent = React.createRef();\n\n  constructor(props) {\n    super(props);\n    this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n    this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  calculateStylesIndicator = () => {\n    const indicator = this.$indicator.current;\n    const tabsParent = this.$tabsParent.current;\n    if (!indicator || !tabsParent) return false;\n    const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n      (node) => node.getAttribute('value') === String(this.asProps.value),\n    );\n    if (!tab) return false;\n    this.$observerTab.observe(tab);\n    const { offsetLeft, offsetWidth } = tab;\n    const positionLeftParent =\n      tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n    indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n    indicator.style.width = `${offsetWidth}px`;\n  };\n\n  componentDidMount() {\n    if (this.$tabsParent.current) {\n      this.$observer.observe(this.$tabsParent.current);\n    }\n    this.calculateStylesIndicator();\n  }\n\n  componentDidUpdate() {\n    this.$observerTab.disconnect();\n    this.calculateStylesIndicator();\n  }\n\n  componentWillUnmount() {\n    this.$observer.disconnect();\n    this.$observerTab.disconnect();\n  }\n\n  getItemProps(props) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabLine = Root;\n    const SIndicator = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SIndicator ref={this.$indicator} />\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n      {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n      {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n    </STabLineItem>,\n  );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"mappings":"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"}
+{"version":3,"file":"TabLine.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","sstyled","Component","defaultValue","underlined","a11yEnhance","TabLineItem","STabLineItem","addonLeft","addonRight","neighborLocation","addonTextChildren","TabLine","Item","Text","Addon","enhance","keyboardFocusEnhance","SText","SAddon","createComponent"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  $observer;\n  $observerTab;\n  $indicator = React.createRef();\n  $tabsParent = React.createRef();\n\n  constructor(props) {\n    super(props);\n    this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n    this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  calculateStylesIndicator = () => {\n    const indicator = this.$indicator.current;\n    const tabsParent = this.$tabsParent.current;\n    if (!indicator || !tabsParent) return false;\n    const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n      (node) => node.getAttribute('value') === String(this.asProps.value),\n    );\n    if (!tab) return false;\n    this.$observerTab.observe(tab);\n    const { offsetLeft, offsetWidth } = tab;\n    const positionLeftParent =\n      tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n    indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n    indicator.style.width = `${offsetWidth}px`;\n  };\n\n  componentDidMount() {\n    if (this.$tabsParent.current) {\n      this.$observer.observe(this.$tabsParent.current);\n    }\n    this.calculateStylesIndicator();\n  }\n\n  componentDidUpdate() {\n    this.$observerTab.disconnect();\n    this.calculateStylesIndicator();\n  }\n\n  componentWillUnmount() {\n    this.$observer.disconnect();\n    this.$observerTab.disconnect();\n  }\n\n  getItemProps(props) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabLine = Root;\n    const SIndicator = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SIndicator ref={this.$indicator} />\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag=\"button\"\n            neighborLocation={neighborLocation}\n            type=\"button\"\n            role=\"tab\"\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )\n      }\n    </NeighborLocation.Detect>\n  );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"mappings":"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"}

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabLineValue = string | number | boolean;\n\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n  extends IBoxProps,\n    INeighborLocationProps {\n  /** TabLine size\n   * @default m\n   * */\n  size?: 'm' | 'l' | false;\n  /** Adds a bottom border for the entire component\n   * @default true\n   * */\n  underlined?: boolean;\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n}\n\nexport interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state  */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabLineValue;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabLineContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabLineHandlers {\n  value: (value: TabLineValue) => void;\n}\n\ndeclare const TabLine: (<T, V extends TabLineValue = TabLineValue>(\n  props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabLine;\n"],"mappings":""}

package/lib/es6/TabLine.js

@@ -25,7 +25,7 @@ import { Box } from '@semcore/flex-box';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
-import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
+import NeighborLocation from '@semcore/neighbor-location';
 import ResizeObserver from 'resize-observer-polyfill';
 
 /*__reshadow-styles__:"./style/tab-line.shadow.css"*/
@@ -33,23 +33,23 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabLine_zegbq_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_zegbq_gg_.__underlined_zegbq_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_zegbq_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_zegbq_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_zegbq_gg_:active,.___STabLineItem_zegbq_gg_:focus,.___STabLineItem_zegbq_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_zegbq_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_zegbq_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_zegbq_gg_ .___SText_zegbq_gg_:not(:last-child){margin-right:8px}.___STabLineItem_zegbq_gg_ .___SAddon_zegbq_gg_:not(:last-child){margin-right:8px}.___SIndicator_zegbq_gg_,.___STabLineItem_zegbq_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_zegbq_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_zegbq_gg_.__selected_zegbq_gg_{flex-shrink:0}.___STabLineItem_zegbq_gg_.__disabled_zegbq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_zegbq_gg_.__keyboardFocused_zegbq_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_zegbq_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_zegbq_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_zegbq_gg_._size_m_zegbq_gg_{height:28px;min-width:18px}.___STabLineItem_zegbq_gg_._size_m_zegbq_gg_ .___SText_zegbq_gg_{font-size:14px;line-height:1.42}.___STabLineItem_zegbq_gg_._size_l_zegbq_gg_{height:40px;min-width:26px}.___STabLineItem_zegbq_gg_._size_l_zegbq_gg_ .___SText_zegbq_gg_{font-size:16px;line-height:1.5}.___STabLineItem_zegbq_gg_._neighborLocation_left_zegbq_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_zegbq_gg_:after{transition:none}.___SIndicator_zegbq_gg_{transition:none}}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___STabLine_vg2jz_gg_ {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n}\n\n.___STabLine_vg2jz_gg_.__underlined_vg2jz_gg_ {\n  border-bottom: 1px solid #c4c7cf;\n}\n\n.___STabLineItem_vg2jz_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  touch-action: manipulation;\n  white-space: nowrap;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n  outline: none;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: visible;\n  outline: 0;\n  text-align: center;\n  vertical-align: middle;\n  font-family: inherit;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  color: #191b23;\n  margin-right: 16px\n}\n\n.___STabLineItem_vg2jz_gg_::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n\n.___STabLineItem_vg2jz_gg_:active,\n  .___STabLineItem_vg2jz_gg_:hover,\n  .___STabLineItem_vg2jz_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___STabLineItem_vg2jz_gg_::after {\n    content: '';\n    left: 0;\n    width: 100%;\n    background-color: transparent;\n    transition: background-color 0.2s;\n  }\n\n.___STabLineItem_vg2jz_gg_:hover::after {\n    background-color: #c4c7cf;\n  }\n\n.___STabLineItem_vg2jz_gg_ .___SText_vg2jz_gg_:not(:last-child) {\n    margin-right: 8px;\n  }\n\n.___STabLineItem_vg2jz_gg_ .___SAddon_vg2jz_gg_:not(:last-child) {\n    margin-right: 8px;\n  }\n\n.___SIndicator_vg2jz_gg_,\n.___STabLineItem_vg2jz_gg_::after {\n  position: absolute;\n  display: block;\n  bottom: -1px;\n  height: 2px;\n}\n\n.___SIndicator_vg2jz_gg_ {\n  transition: transform 0.5s ease;\n  background-color: #008ff8;\n  will-change: transform;\n}\n\n.___STabLineItem_vg2jz_gg_.__selected_vg2jz_gg_ {\n  flex-shrink: 0;\n}\n\n.___STabLineItem_vg2jz_gg_.__disabled_vg2jz_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___STabLineItem_vg2jz_gg_.__keyboardFocused_vg2jz_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___SText_vg2jz_gg_ {\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.___SAddon_vg2jz_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___STabLineItem_vg2jz_gg_._size_m_vg2jz_gg_ {\n  height: 28px;\n  min-width: 18px\n}\n\n.___STabLineItem_vg2jz_gg_._size_m_vg2jz_gg_ .___SText_vg2jz_gg_ {\n    font-size: 14px;\n    line-height: 1.42;\n  }\n\n.___STabLineItem_vg2jz_gg_._size_l_vg2jz_gg_ {\n  height: 40px;\n  min-width: 26px\n}\n\n.___STabLineItem_vg2jz_gg_._size_l_vg2jz_gg_ .___SText_vg2jz_gg_ {\n    font-size: 16px;\n    line-height: 1.5;\n  }\n\n.___STabLineItem_vg2jz_gg_._neighborLocation_left_vg2jz_gg_ {\n  margin-right: 0;\n}\n\n@media (prefers-reduced-motion) {\n    .___STabLineItem_vg2jz_gg_::after {\n      transition: none;\n    }\n\n  .___SIndicator_vg2jz_gg_ {\n    transition: none;\n  }\n}\n"
 /*__inner_css_end__*/
-, "zegbq_gg_")
+, "vg2jz_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabLine": "___STabLine_zegbq_gg_",
-  "_underlined": "__underlined_zegbq_gg_",
-  "__STabLineItem": "___STabLineItem_zegbq_gg_",
-  "__SText": "___SText_zegbq_gg_",
-  "__SAddon": "___SAddon_zegbq_gg_",
-  "__SIndicator": "___SIndicator_zegbq_gg_",
-  "_selected": "__selected_zegbq_gg_",
-  "_disabled": "__disabled_zegbq_gg_",
-  "_keyboardFocused": "__keyboardFocused_zegbq_gg_",
-  "_size_m": "_size_m_zegbq_gg_",
-  "_size_l": "_size_l_zegbq_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_zegbq_gg_"
+  "__STabLine": "___STabLine_vg2jz_gg_",
+  "_underlined": "__underlined_vg2jz_gg_",
+  "__STabLineItem": "___STabLineItem_vg2jz_gg_",
+  "__SText": "___SText_vg2jz_gg_",
+  "__SAddon": "___SAddon_vg2jz_gg_",
+  "__SIndicator": "___SIndicator_vg2jz_gg_",
+  "_selected": "__selected_vg2jz_gg_",
+  "_disabled": "__disabled_vg2jz_gg_",
+  "_keyboardFocused": "__keyboardFocused_vg2jz_gg_",
+  "_size_m": "_size_m_vg2jz_gg_",
+  "_size_l": "_size_l_vg2jz_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_vg2jz_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -193,26 +193,32 @@ _defineProperty(TabLineRoot, "defaultProps", {
 _defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
 
 function TabLineItem(props) {
-  var _ref2 = arguments[0],
-      _ref6;
-
+  var _ref2 = arguments[0];
   var STabLineItem = Box;
   var Children = props.Children,
       styles = props.styles,
       addonLeft = props.addonLeft,
-      addonRight = props.addonRight;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, _assignProps2({
-    "type": "button",
-    "tag": "button",
-    "role": "tab"
-  }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabLine.Item.Addon, {
-    tag: addonLeft
-  }) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(TabLine.Item.Addon, {
-    tag: addonRight
-  }) : null);
+      addonRight = props.addonRight,
+      neighborLocation = props.neighborLocation;
+  return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
+    neighborLocation: neighborLocation
+  }, function (neighborLocation) {
+    var _ref6;
+
+    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, _assignProps2({
+      "tag": "button",
+      "neighborLocation": neighborLocation,
+      "type": "button",
+      "role": "tab"
+    }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabLine.Item.Addon, {
+      tag: addonLeft
+    }) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(TabLine.Item.Addon, {
+      tag: addonRight
+    }) : null);
+  });
 }
 
-TabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
+TabLineItem.enhance = [keyboardFocusEnhance()];
 
 function Text(props) {
   var _ref3 = arguments[0],

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  $observer;\n  $observerTab;\n  $indicator = React.createRef();\n  $tabsParent = React.createRef();\n\n  constructor(props) {\n    super(props);\n    this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n    this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  calculateStylesIndicator = () => {\n    const indicator = this.$indicator.current;\n    const tabsParent = this.$tabsParent.current;\n    if (!indicator || !tabsParent) return false;\n    const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n      (node) => node.getAttribute('value') === String(this.asProps.value),\n    );\n    if (!tab) return false;\n    this.$observerTab.observe(tab);\n    const { offsetLeft, offsetWidth } = tab;\n    const positionLeftParent =\n      tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n    indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n    indicator.style.width = `${offsetWidth}px`;\n  };\n\n  componentDidMount() {\n    if (this.$tabsParent.current) {\n      this.$observer.observe(this.$tabsParent.current);\n    }\n    this.calculateStylesIndicator();\n  }\n\n  componentDidUpdate() {\n    this.$observerTab.disconnect();\n    this.calculateStylesIndicator();\n  }\n\n  componentWillUnmount() {\n    this.$observer.disconnect();\n    this.$observerTab.disconnect();\n  }\n\n  getItemProps(props) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabLine = Root;\n    const SIndicator = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SIndicator ref={this.$indicator} />\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n      {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n      {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n    </STabLineItem>,\n  );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"mappings":"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"}
+{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","neighborLocation","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  $observer;\n  $observerTab;\n  $indicator = React.createRef();\n  $tabsParent = React.createRef();\n\n  constructor(props) {\n    super(props);\n    this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n    this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  calculateStylesIndicator = () => {\n    const indicator = this.$indicator.current;\n    const tabsParent = this.$tabsParent.current;\n    if (!indicator || !tabsParent) return false;\n    const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n      (node) => node.getAttribute('value') === String(this.asProps.value),\n    );\n    if (!tab) return false;\n    this.$observerTab.observe(tab);\n    const { offsetLeft, offsetWidth } = tab;\n    const positionLeftParent =\n      tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n    indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n    indicator.style.width = `${offsetWidth}px`;\n  };\n\n  componentDidMount() {\n    if (this.$tabsParent.current) {\n      this.$observer.observe(this.$tabsParent.current);\n    }\n    this.calculateStylesIndicator();\n  }\n\n  componentDidUpdate() {\n    this.$observerTab.disconnect();\n    this.calculateStylesIndicator();\n  }\n\n  componentWillUnmount() {\n    this.$observer.disconnect();\n    this.$observerTab.disconnect();\n  }\n\n  getItemProps(props) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabLine = Root;\n    const SIndicator = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n\n    return sstyled(styles)(\n      <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SIndicator ref={this.$indicator} />\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag=\"button\"\n            neighborLocation={neighborLocation}\n            type=\"button\"\n            role=\"tab\"\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )\n      }\n    </NeighborLocation.Detect>\n  );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"mappings":"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"}

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabLineValue = string | number | boolean;\n\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n  extends IBoxProps,\n    INeighborLocationProps {\n  /** TabLine size\n   * @default m\n   * */\n  size?: 'm' | 'l' | false;\n  /** Adds a bottom border for the entire component\n   * @default true\n   * */\n  underlined?: boolean;\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n}\n\nexport interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state  */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabLineValue;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabLineContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabLineHandlers {\n  value: (value: TabLineValue) => void;\n}\n\ndeclare const TabLine: (<T, V extends TabLineValue = TabLineValue>(\n  props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabLine;\n"],"mappings":""}

package/package.json

@@ -1,20 +1,16 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
-  "scripts": {
-    "build": "build --source=js",
-    "test": "jest"
-  },
   "dependencies": {
     "@semcore/flex-box": "^4",
-    "@semcore/neighbor-location": "^2",
+    "@semcore/neighbor-location": "^3",
     "@semcore/utils": "^3.30",
     "resize-observer-polyfill": "1.5.1"
   },
@@ -31,6 +27,11 @@
     "directory": "semcore/tab-line"
   },
   "devDependencies": {
+    "@types/react": "16.8 - 17",
     "@semcore/jest-preset-ui": "1.0.0"
+  },
+  "scripts": {
+    "build": "pnpm semcore-builder --source=js",
+    "test": "jest"
   }
-}
+}

package/lib/cjs/index.d.ts

@@ -1,60 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabLineValue = string | number | boolean;
-
-export interface ITabLineProps<T extends TabLineValue = TabLineValue>
-  extends IBoxProps,
-    INeighborLocationProps {
-  /** TabLine size
-   * @default m
-   * */
-  size?: 'm' | 'l' | false;
-  /** Adds a bottom border for the entire component
-   * @default true
-   * */
-  underlined?: boolean;
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
-  /** Makes a tab selected. This property is determined automatically depending on the value. */
-  selected?: boolean;
-  /** Disabled state  */
-  disabled?: boolean;
-  /** Tab value */
-  value?: TabLineValue;
-  /** Left addon tag */
-  addonLeft?: React.ElementType;
-  /** Right addon tag  */
-  addonRight?: React.ElementType;
-}
-
-export interface ITabLineContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabLineHandlers {
-  value: (value: TabLineValue) => void;
-}
-
-declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
-  props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabLine;

package/lib/es6/index.d.ts

@@ -1,60 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabLineValue = string | number | boolean;
-
-export interface ITabLineProps<T extends TabLineValue = TabLineValue>
-  extends IBoxProps,
-    INeighborLocationProps {
-  /** TabLine size
-   * @default m
-   * */
-  size?: 'm' | 'l' | false;
-  /** Adds a bottom border for the entire component
-   * @default true
-   * */
-  underlined?: boolean;
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
-  /** Makes a tab selected. This property is determined automatically depending on the value. */
-  selected?: boolean;
-  /** Disabled state  */
-  disabled?: boolean;
-  /** Tab value */
-  value?: TabLineValue;
-  /** Left addon tag */
-  addonLeft?: React.ElementType;
-  /** Right addon tag  */
-  addonRight?: React.ElementType;
-}
-
-export interface ITabLineContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabLineHandlers {
-  value: (value: TabLineValue) => void;
-}
-
-declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
-  props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabLine;