@semcore/tab-line 3.2.9 → 3.3.0

package/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.2.9] - 2023-02-20
+## [3.3.0] - 2023-02-23
+
+### Fixed
+
+- Fixed underline width glitching by rebuilding internal animation mechanism.
+
+## [3.2.10] - 2023-02-21
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.8 ~> 4.7.9], `@semcore/neighbor-location` [3.1.14 ~> 3.1.15], `@semcore/utils` [3.46.1 ~> 3.47.0]).
+- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.9 ~> 4.7.10], `@semcore/neighbor-location` [3.1.15 ~> 3.1.16], `@semcore/utils` [3.47.0 ~> 3.47.1]).
 
 ## [3.2.8] - 2023-02-09
 

package/lib/cjs/TabLine.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,9 +19,7 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -37,42 +37,28 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a
 
 var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
 
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /*__reshadow-styles__:"./style/tab-line.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabLine_24527_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_24527_gg_.__underlined_24527_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_24527_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_24527_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_24527_gg_:active,.___STabLineItem_24527_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_24527_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_24527_gg_::after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}@media (hover:hover){.___STabLineItem_24527_gg_:hover::after{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_24527_gg_ .___SAddon_24527_gg_:not(:last-child),.___STabLineItem_24527_gg_ .___SText_24527_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SIndicator_24527_gg_,.___STabLineItem_24527_gg_::after{position:absolute;display:block;bottom:-1px;height:3px}.___SIndicator_24527_gg_{transition:transform calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out;background-color:var(--intergalactic-border-info-active, #006dca);will-change:transform}.___STabLineItem_24527_gg_.__selected_24527_gg_{flex-shrink:0}.___STabLineItem_24527_gg_.__disabled_24527_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_24527_gg_.__keyboardFocused_24527_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_24527_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_24527_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_24527_gg_._size_m_24527_gg_{height:28px;min-width:18px}.___STabLineItem_24527_gg_._size_m_24527_gg_ .___SText_24527_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_24527_gg_._size_l_24527_gg_{height:40px;min-width:26px}.___STabLineItem_24527_gg_._size_l_24527_gg_ .___SText_24527_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_24527_gg_._neighborLocation_left_24527_gg_{margin-right:0}@media (prefers-reduced-motion){.___SIndicator_24527_gg_,.___STabLineItem_24527_gg_::after{transition:none}}"
+".___STabLine_14v3w_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_14v3w_gg_.__underlined_14v3w_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_14v3w_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_14v3w_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_14v3w_gg_:active,.___STabLineItem_14v3w_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_14v3w_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_14v3w_gg_::after,.___STabLineItem_14v3w_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_14v3w_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_14v3w_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_14v3w_gg_ .___SAddon_14v3w_gg_:not(:last-child),.___STabLineItem_14v3w_gg_ .___SText_14v3w_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_14v3w_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_{flex-shrink:0}.___STabLineItem_14v3w_gg_.__disabled_14v3w_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_14v3w_gg_.__keyboardFocused_14v3w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_14v3w_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_14v3w_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_14v3w_gg_._size_m_14v3w_gg_{height:28px;min-width:18px}.___STabLineItem_14v3w_gg_._size_m_14v3w_gg_ .___SText_14v3w_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_14v3w_gg_._size_l_14v3w_gg_{height:40px;min-width:26px}.___STabLineItem_14v3w_gg_._size_l_14v3w_gg_ .___SText_14v3w_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_14v3w_gg_._neighborLocation_left_14v3w_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_14v3w_gg_::after,.___STabLineItem_14v3w_gg_::before{transition:none}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_::after{transition-delay:0;transition:none}.___SCaret_14v3w_gg_{display:none}}"
 /*__inner_css_end__*/
-, "24527_gg_")
+, "14v3w_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabLine": "___STabLine_24527_gg_",
-  "_underlined": "__underlined_24527_gg_",
-  "__STabLineItem": "___STabLineItem_24527_gg_",
-  "__SText": "___SText_24527_gg_",
-  "__SAddon": "___SAddon_24527_gg_",
-  "__SIndicator": "___SIndicator_24527_gg_",
-  "_selected": "__selected_24527_gg_",
-  "_disabled": "__disabled_24527_gg_",
-  "_keyboardFocused": "__keyboardFocused_24527_gg_",
-  "_size_m": "_size_m_24527_gg_",
-  "_size_l": "_size_l_24527_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_24527_gg_"
+  "__STabLine": "___STabLine_14v3w_gg_",
+  "_underlined": "__underlined_14v3w_gg_",
+  "__STabLineItem": "___STabLineItem_14v3w_gg_",
+  "_selected": "__selected_14v3w_gg_",
+  "__SText": "___SText_14v3w_gg_",
+  "__SAddon": "___SAddon_14v3w_gg_",
+  "__SCaret": "___SCaret_14v3w_gg_",
+  "_disabled": "__disabled_14v3w_gg_",
+  "_keyboardFocused": "__keyboardFocused_14v3w_gg_",
+  "_size_m": "_size_m_14v3w_gg_",
+  "_size_l": "_size_l_14v3w_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_14v3w_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -87,41 +73,45 @@ var optionsA11yEnhance = {
 var TabLineRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(TabLineRoot, _Component);
 
-  var _super = _createSuper(TabLineRoot);
+  var _super = (0, _createSuper2["default"])(TabLineRoot);
 
-  function TabLineRoot(props) {
+  function TabLineRoot() {
     var _this;
 
     (0, _classCallCheck2["default"])(this, TabLineRoot);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observer", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observerTab", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$indicator", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$tabsParent", /*#__PURE__*/_react["default"].createRef());
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      animation: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemRefs", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationStartTimeout", -1);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnimationStart", function () {
+      var _this$state$animation;
+
+      if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
+        _this.setState({
+          animation: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.state.animation), {}, {
+            started: true
+          })
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnimationEnd", function () {
+      _this.setState({
+        animation: null
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (value) {
       return function (e) {
         _this.handlers.value(value, e);
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calculateStylesIndicator", function () {
-      var indicator = _this.$indicator.current;
-      var tabsParent = _this.$tabsParent.current;
-      if (!indicator || !tabsParent) return false;
-      var tab = Array.from(tabsParent.querySelectorAll('[data-ui-name="TabLine.Item"]')).find(function (node) {
-        return node.getAttribute('value') === String(_this.asProps.value);
-      });
-      if (!tab) return false;
-
-      _this.$observerTab.observe(tab);
-
-      var offsetLeft = tab.offsetLeft,
-          offsetWidth = tab.offsetWidth;
-      var positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
-      indicator.style.transform = "translateX(".concat(offsetLeft - positionLeftParent, "px)");
-      indicator.style.width = "".concat(offsetWidth, "px");
-    });
-    _this.$observer = new _resizeObserverPolyfill["default"](_this.calculateStylesIndicator);
-    _this.$observerTab = new _resizeObserverPolyfill["default"](_this.calculateStylesIndicator);
     return _this;
   }
 
@@ -132,30 +122,41 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         value: null
       };
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.$tabsParent.current) {
-        this.$observer.observe(this.$tabsParent.current);
-      }
-
-      this.calculateStylesIndicator();
-    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.$observerTab.disconnect();
-      this.calculateStylesIndicator();
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.value !== null && this.props.value !== null && prevProps.value !== this.props.value) {
+        var fromNode = this.itemRefs[prevProps.value];
+        var toNode = this.itemRefs[this.props.value];
+        var containerNode = this.containerRef.current;
+        if (!fromNode || !toNode || !containerNode) return;
+        var containerRect = containerNode.getBoundingClientRect();
+        var fromRect = fromNode.getBoundingClientRect();
+        var toRect = toNode.getBoundingClientRect();
+        var animation = {
+          fromLeft: fromRect.x - containerRect.x,
+          fromWidth: fromRect.width,
+          toLeft: toRect.x - containerRect.x,
+          toWidth: toRect.width,
+          started: false
+        };
+        this.setState({
+          animation: animation
+        });
+        clearTimeout(this.animationStartTimeout);
+        this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.$observer.disconnect();
-      this.$observerTab.disconnect();
+      clearTimeout(this.animationStartTimeout);
     }
   }, {
     key: "getItemProps",
     value: function getItemProps(props) {
+      var _this2 = this;
+
       var _this$asProps = this.asProps,
           value = _this$asProps.value,
           size = _this$asProps.size;
@@ -166,9 +167,36 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         onClick: this.bindHandlerClick(props.value),
         tabIndex: isSelected ? 0 : -1,
         'aria-posinset': value,
-        'aria-selected': isSelected
+        'aria-selected': isSelected,
+        ref: function ref(node) {
+          return _this2.itemRefs[props.value] = node;
+        }
       };
     }
+  }, {
+    key: "getCaretProps",
+    value: function getCaretProps() {
+      var animation = this.state.animation;
+      if (!animation) return {};
+
+      if (animation.started) {
+        return {
+          style: {
+            left: animation.toLeft,
+            width: animation.toWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      } else {
+        return {
+          style: {
+            left: animation.fromLeft,
+            width: animation.fromWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -176,19 +204,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
           _ref5;
 
       var STabLine = _flexBox.Box;
-      var SIndicator = 'div';
+      var SCaret = 'div';
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
           Children = _this$asProps2.Children,
           controlsLength = _this$asProps2.controlsLength;
-      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, (0, _core.assignProps)({
-        "ref": this.$tabsParent,
-        "role": "tablist"
+      var animation = this.state.animation;
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLine, _ref5.cn("STabLine", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "role": "tablist",
+        "ref": this.containerRef
       }, _ref))), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], _ref5.cn("NeighborLocation", {
         "controlsLength": controlsLength
-      }), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(SIndicator, _ref5.cn("SIndicator", {
-        "ref": this.$indicator
-      })));
+      }), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/_react["default"].createElement(SCaret, _ref5.cn("SCaret", (0, _objectSpread2["default"])({}, this.getCaretProps()))));
     }
   }]);
   return TabLineRoot;
@@ -216,7 +243,7 @@ function TabLineItem(props) {
   }, function (neighborLocation) {
     var _ref6;
 
-    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, (0, _core.assignProps)({
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLineItem, _ref6.cn("STabLineItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
       "tag": "button",
       "neighborLocation": neighborLocation,
       "type": "button",
@@ -237,7 +264,7 @@ function Text(props) {
 
   var styles = props.styles;
   var SText = _flexBox.Box;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", _objectSpread({}, (0, _core.assignProps)({
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": "span"
   }, _ref3))));
 }
@@ -248,7 +275,7 @@ function Addon(props) {
 
   var styles = props.styles;
   var SAddon = _flexBox.Box;
-  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, (0, _core.assignProps)({
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": "span"
   }, _ref4))));
 }

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","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":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,kBAAkB,GAAG;EACzBC,gBAAgB,EAAE,0BAACC,eAAD,EAAqB;IACrC,IAAIA,eAAJ,EAAqB;MACnBA,eAAe,CAACC,KAAhB;MACAD,eAAe,CAACE,KAAhB;IACD;EACF,CANwB;EAOzBC,aAAa,EAAE,CAAC,MAAD,EAAS,KAAT;AAPU,CAA3B;;IAUMC,W;;;;;EAeJ,qBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACjB,0BAAMA,KAAN;IADiB;IAAA;IAAA,4GAHNC,iBAAA,CAAMC,SAAN,EAGM;IAAA,6GAFLD,iBAAA,CAAMC,SAAN,EAEK;IAAA,qGAYA,UAACC,KAAD;MAAA,OAAW,UAACC,CAAD,EAAO;QACnC,MAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;MACD,CAFkB;IAAA,CAZA;IAAA,6GAgBQ,YAAM;MAC/B,IAAME,SAAS,GAAG,MAAKC,UAAL,CAAgBC,OAAlC;MACA,IAAMC,UAAU,GAAG,MAAKC,WAAL,CAAiBF,OAApC;MACA,IAAI,CAACF,SAAD,IAAc,CAACG,UAAnB,EAA+B,OAAO,KAAP;MAC/B,IAAME,GAAG,GAAGC,KAAK,CAACC,IAAN,CAAWJ,UAAU,CAACK,gBAAX,CAA4B,+BAA5B,CAAX,EAAyEC,IAAzE,CACV,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,YAAL,CAAkB,OAAlB,MAA+BC,MAAM,CAAC,MAAKC,OAAL,CAAahB,KAAd,CAA/C;MAAA,CADU,CAAZ;MAGA,IAAI,CAACQ,GAAL,EAAU,OAAO,KAAP;;MACV,MAAKS,YAAL,CAAkBC,OAAlB,CAA0BV,GAA1B;;MACA,IAAQW,UAAR,GAAoCX,GAApC,CAAQW,UAAR;MAAA,IAAoBC,WAApB,GAAoCZ,GAApC,CAAoBY,WAApB;MACA,IAAMC,kBAAkB,GACtBf,UAAU,CAACgB,UAAX,GAAwBC,QAAQ,CAACjB,UAAU,CAACkB,KAAX,CAAiBC,WAAlB,EAA+B,EAA/B,CAAhC,IAAsE,CADxE;MAEAtB,SAAS,CAACqB,KAAV,CAAgBE,SAAhB,wBAA0CP,UAAU,GAAGE,kBAAvD;MACAlB,SAAS,CAACqB,KAAV,CAAgBG,KAAhB,aAA2BP,WAA3B;IACD,CA9BkB;IAEjB,MAAKQ,SAAL,GAAiB,IAAIC,kCAAJ,CAAmB,MAAKC,wBAAxB,CAAjB;IACA,MAAKb,YAAL,GAAoB,IAAIY,kCAAJ,CAAmB,MAAKC,wBAAxB,CAApB;IAHiB;EAIlB;;;;WAED,6BAAoB;MAClB,OAAO;QACL9B,KAAK,EAAE;MADF,CAAP;IAGD;;;WAsBD,6BAAoB;MAClB,IAAI,KAAKO,WAAL,CAAiBF,OAArB,EAA8B;QAC5B,KAAKuB,SAAL,CAAeV,OAAf,CAAuB,KAAKX,WAAL,CAAiBF,OAAxC;MACD;;MACD,KAAKyB,wBAAL;IACD;;;WAED,8BAAqB;MACnB,KAAKb,YAAL,CAAkBc,UAAlB;MACA,KAAKD,wBAAL;IACD;;;WAED,gCAAuB;MACrB,KAAKF,SAAL,CAAeG,UAAf;MACA,KAAKd,YAAL,CAAkBc,UAAlB;IACD;;;WAED,sBAAalC,KAAb,EAAoB;MAClB,oBAAwB,KAAKmB,OAA7B;MAAA,IAAQhB,KAAR,iBAAQA,KAAR;MAAA,IAAegC,IAAf,iBAAeA,IAAf;MACA,IAAMC,UAAU,GAAGjC,KAAK,KAAKH,KAAK,CAACG,KAAnC;MACA,OAAO;QACLgC,IAAI,EAAJA,IADK;QAELE,QAAQ,EAAED,UAFL;QAGLE,OAAO,EAAE,KAAKC,gBAAL,CAAsBvC,KAAK,CAACG,KAA5B,CAHJ;QAILqC,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAJvB;QAKL,iBAAiBjC,KALZ;QAML,iBAAiBiC;MANZ,CAAP;IAQD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMK,QAAQ,GAKMC,YALpB;MACA,IAAMC,UAAU,GAAG,KAAnB;MACA,qBAA6C,KAAKxB,OAAlD;MAAA,IAAQyB,MAAR,kBAAQA,MAAR;MAAA,IAAgBC,QAAhB,kBAAgBA,QAAhB;MAAA,IAA0BC,cAA1B,kBAA0BA,cAA1B;MAEA,eAAO,IAAAC,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,QAAD;QAAA,OAA4B,KAAKlC,WAAjC;QAAA,QAAmD;MAAnD,yBACE,gCAAC,4BAAD;QAAA,kBAAkCoC;MAAlC,iBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,UAAD;QAAA,OAAiB,KAAKvC;MAAtB,GAJF,CADF;IAQD;;;EA1FuByC,e;;iCAApBjD,W,iBACiB,S;iCADjBA,W,WAEW4B,K;iCAFX5B,W,kBAGkB;EACpBkD,YAAY,EAAE,IADM;EAEpBd,IAAI,EAAE,GAFc;EAGpBe,UAAU,EAAE;AAHQ,C;iCAHlBnD,W,aAQa,CAAC,IAAAoD,uBAAA,EAAY1D,kBAAZ,CAAD,C;;AAqFnB,SAAS2D,WAAT,CAAqBpD,KAArB,EAA4B;EAAA;EAC1B,IAAMqD,YAAY,GAQAX,YARlB;EACA,IAAQG,QAAR,GAAsE7C,KAAtE,CAAQ6C,QAAR;EAAA,IAAkBD,MAAlB,GAAsE5C,KAAtE,CAAkB4C,MAAlB;EAAA,IAA0BU,SAA1B,GAAsEtD,KAAtE,CAA0BsD,SAA1B;EAAA,IAAqCC,UAArC,GAAsEvD,KAAtE,CAAqCuD,UAArC;EAAA,IAAiDC,gBAAjD,GAAsExD,KAAtE,CAAiDwD,gBAAjD;EAEA,oBACE,gCAAC,4BAAD,CAAkB,MAAlB;IAAyB,gBAAgB,EAAEA;EAA3C,GACG,UAACA,gBAAD;IAAA;;IAAA,eACC,IAAAT,aAAA,EAAQH,MAAR,CADD,eAEG,gCAAC,YAAD;MAAA,OAEM,QAFN;MAAA,oBAGoBY,gBAHpB;MAAA,QAIO,QAJP;MAAA,QAKO;IALP,aAOGF,SAAS,gBAAG,gCAAC,OAAD,CAAS,IAAT,CAAc,KAAd;MAAoB,GAAG,EAAEA;IAAzB,EAAH,GAA4C,IAPxD,EAQG,IAAAG,6BAAA,EAAkBZ,QAAlB,EAA4Ba,OAAO,CAACC,IAAR,CAAaC,IAAzC,EAA+CF,OAAO,CAACC,IAAR,CAAaE,KAA5D,CARH,EASGN,UAAU,gBAAG,gCAAC,OAAD,CAAS,IAAT,CAAc,KAAd;MAAoB,GAAG,EAAEA;IAAzB,EAAH,GAA6C,IAT1D,CAFH;EAAA,CADH,CADF;AAmBD;;AAEDH,WAAW,CAACU,OAAZ,GAAsB,CAAC,IAAAC,gCAAA,GAAD,CAAtB;;AAEA,SAASH,IAAT,CAAc5D,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAQ4C,MAAR,GAAmB5C,KAAnB,CAAQ4C,MAAR;EACA,IAAMoB,KAAK,GAC2BtB,YADtC;EACA,eAAO,IAAAK,aAAA,EAAQH,MAAR,CAAP,eAAuB,gCAAC,KAAD;IAAA,OAAwB;EAAxB,YAAvB;AACD;;AAED,SAASiB,KAAT,CAAe7D,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQ4C,MAAR,GAAmB5C,KAAnB,CAAQ4C,MAAR;EACA,IAAMqB,MAAM,GAC2BvB,YADvC;EACA,eAAO,IAAAK,aAAA,EAAQH,MAAR,CAAP,eAAuB,gCAAC,MAAD;IAAA,OAAyB;EAAzB,YAAvB;AACD;;AAED,IAAMc,OAAO,GAAG,IAAAQ,gBAAA,EAAgBnE,WAAhB,EAA6B;EAC3C4D,IAAI,EAAE,CAACP,WAAD,EAAc;IAAEQ,IAAI,EAAJA,IAAF;IAAQC,KAAK,EAALA;EAAR,CAAd;AADqC,CAA7B,CAAhB;eAIeH,O"}
+{"version":3,"file":"TabLine.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","animation","React","createRef","state","started","setState","value","e","handlers","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","style","left","onTransitionEnd","handleAnimationEnd","STabLine","Box","SCaret","styles","Children","controlsLength","sstyled","getCaretProps","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';\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  state = { animation: null };\n  itemRefs = {};\n  containerRef = React.createRef();\n  animationStartTimeout = -1;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    if (\n      prevProps.value !== null &&\n      this.props.value !== null &&\n      prevProps.value !== this.props.value\n    ) {\n      const fromNode = this.itemRefs[prevProps.value];\n      const toNode = this.itemRefs[this.props.value];\n      const containerNode = this.containerRef.current;\n\n      if (!fromNode || !toNode || !containerNode) return;\n      const containerRect = containerNode.getBoundingClientRect();\n      const fromRect = fromNode.getBoundingClientRect();\n      const toRect = toNode.getBoundingClientRect();\n      const animation = {\n        fromLeft: fromRect.x - containerRect.x,\n        fromWidth: fromRect.width,\n        toLeft: toRect.x - containerRect.x,\n        toWidth: toRect.width,\n        started: false,\n      };\n      this.setState({ animation });\n      clearTimeout(this.animationStartTimeout);\n      this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n    }\n  }\n  componentWillUnmount() {\n    clearTimeout(this.animationStartTimeout);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\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      ref: (node) => (this.itemRefs[props.value] = node),\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\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/style/tab-line.shadow.css

@@ -48,17 +48,26 @@ STabLineItem {
     text-decoration: none;
   }
 
+  &::before,
   &::after {
     content: '';
+    position: absolute;
     left: 0;
+    bottom: -1px;
+    height: 3px;
     width: 100%;
     background-color: transparent;
-    transition: background-color 0.2s;
   }
-
-  &:hover::after {
+  &::before {
+    transition: background-color calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
+  }
+  &:hover::before {
     background-color: var(--intergalactic-border-primary, #c4c7cf);
   }
+  &[selected]::after {
+    transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
+    background-color: var(--intergalactic-border-info-active, #006dca);
+  }
 
   & SText:not(:last-child) {
     margin-right: var(--intergalactic-spacing-2x, 8px);
@@ -68,19 +77,12 @@ STabLineItem {
     margin-right: var(--intergalactic-spacing-2x, 8px);
   }
 }
-
-SIndicator,
-STabLineItem::after {
+SCaret {
   position: absolute;
-  display: block;
   bottom: -1px;
   height: 3px;
-}
-
-SIndicator {
-  transition: transform calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
   background-color: var(--intergalactic-border-info-active, #006dca);
-  will-change: transform;
+  transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
 STabLineItem[selected] {
@@ -134,12 +136,17 @@ STabLineItem[neighborLocation='left'] {
 
 @media (prefers-reduced-motion) {
   STabLineItem {
+    &::before,
     &::after {
       transition: none;
     }
+    &[selected]::after {
+      transition-delay: 0;
+      transition: none;
+    }
   }
 
-  SIndicator {
-    transition: none;
+  SCaret {
+    display: none;
   }
 }

package/lib/es6/TabLine.js

@@ -1,24 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
@@ -26,30 +17,29 @@ 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 from '@semcore/neighbor-location';
-import ResizeObserver from 'resize-observer-polyfill';
 
 /*__reshadow-styles__:"./style/tab-line.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabLine_24527_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_24527_gg_.__underlined_24527_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_24527_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_24527_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_24527_gg_:active,.___STabLineItem_24527_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_24527_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_24527_gg_::after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}@media (hover:hover){.___STabLineItem_24527_gg_:hover::after{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_24527_gg_ .___SAddon_24527_gg_:not(:last-child),.___STabLineItem_24527_gg_ .___SText_24527_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SIndicator_24527_gg_,.___STabLineItem_24527_gg_::after{position:absolute;display:block;bottom:-1px;height:3px}.___SIndicator_24527_gg_{transition:transform calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out;background-color:var(--intergalactic-border-info-active, #006dca);will-change:transform}.___STabLineItem_24527_gg_.__selected_24527_gg_{flex-shrink:0}.___STabLineItem_24527_gg_.__disabled_24527_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_24527_gg_.__keyboardFocused_24527_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_24527_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_24527_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_24527_gg_._size_m_24527_gg_{height:28px;min-width:18px}.___STabLineItem_24527_gg_._size_m_24527_gg_ .___SText_24527_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_24527_gg_._size_l_24527_gg_{height:40px;min-width:26px}.___STabLineItem_24527_gg_._size_l_24527_gg_ .___SText_24527_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_24527_gg_._neighborLocation_left_24527_gg_{margin-right:0}@media (prefers-reduced-motion){.___SIndicator_24527_gg_,.___STabLineItem_24527_gg_::after{transition:none}}"
+".___STabLine_14v3w_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_14v3w_gg_.__underlined_14v3w_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_14v3w_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_14v3w_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_14v3w_gg_:active,.___STabLineItem_14v3w_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_14v3w_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_14v3w_gg_::after,.___STabLineItem_14v3w_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_14v3w_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_14v3w_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_14v3w_gg_ .___SAddon_14v3w_gg_:not(:last-child),.___STabLineItem_14v3w_gg_ .___SText_14v3w_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_14v3w_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_{flex-shrink:0}.___STabLineItem_14v3w_gg_.__disabled_14v3w_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_14v3w_gg_.__keyboardFocused_14v3w_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_14v3w_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_14v3w_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_14v3w_gg_._size_m_14v3w_gg_{height:28px;min-width:18px}.___STabLineItem_14v3w_gg_._size_m_14v3w_gg_ .___SText_14v3w_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_14v3w_gg_._size_l_14v3w_gg_{height:40px;min-width:26px}.___STabLineItem_14v3w_gg_._size_l_14v3w_gg_ .___SText_14v3w_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_14v3w_gg_._neighborLocation_left_14v3w_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_14v3w_gg_::after,.___STabLineItem_14v3w_gg_::before{transition:none}.___STabLineItem_14v3w_gg_.__selected_14v3w_gg_::after{transition-delay:0;transition:none}.___SCaret_14v3w_gg_{display:none}}"
 /*__inner_css_end__*/
-, "24527_gg_")
+, "14v3w_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabLine": "___STabLine_24527_gg_",
-  "_underlined": "__underlined_24527_gg_",
-  "__STabLineItem": "___STabLineItem_24527_gg_",
-  "__SText": "___SText_24527_gg_",
-  "__SAddon": "___SAddon_24527_gg_",
-  "__SIndicator": "___SIndicator_24527_gg_",
-  "_selected": "__selected_24527_gg_",
-  "_disabled": "__disabled_24527_gg_",
-  "_keyboardFocused": "__keyboardFocused_24527_gg_",
-  "_size_m": "_size_m_24527_gg_",
-  "_size_l": "_size_l_24527_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_24527_gg_"
+  "__STabLine": "___STabLine_14v3w_gg_",
+  "_underlined": "__underlined_14v3w_gg_",
+  "__STabLineItem": "___STabLineItem_14v3w_gg_",
+  "_selected": "__selected_14v3w_gg_",
+  "__SText": "___SText_14v3w_gg_",
+  "__SAddon": "___SAddon_14v3w_gg_",
+  "__SCaret": "___SCaret_14v3w_gg_",
+  "_disabled": "__disabled_14v3w_gg_",
+  "_keyboardFocused": "__keyboardFocused_14v3w_gg_",
+  "_size_m": "_size_m_14v3w_gg_",
+  "_size_l": "_size_l_14v3w_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_14v3w_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -66,47 +56,51 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper(TabLineRoot);
 
-  function TabLineRoot(props) {
+  function TabLineRoot() {
     var _this;
 
     _classCallCheck(this, TabLineRoot);
 
-    _this = _super.call(this, props);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "$observer", void 0);
+    _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "$observerTab", void 0);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      animation: null
+    });
 
-    _defineProperty(_assertThisInitialized(_this), "$indicator", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", {});
 
-    _defineProperty(_assertThisInitialized(_this), "$tabsParent", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
-      return function (e) {
-        _this.handlers.value(value, e);
-      };
+    _defineProperty(_assertThisInitialized(_this), "animationStartTimeout", -1);
+
+    _defineProperty(_assertThisInitialized(_this), "handleAnimationStart", function () {
+      var _this$state$animation;
+
+      if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
+        _this.setState({
+          animation: _objectSpread(_objectSpread({}, _this.state.animation), {}, {
+            started: true
+          })
+        });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "calculateStylesIndicator", function () {
-      var indicator = _this.$indicator.current;
-      var tabsParent = _this.$tabsParent.current;
-      if (!indicator || !tabsParent) return false;
-      var tab = Array.from(tabsParent.querySelectorAll('[data-ui-name="TabLine.Item"]')).find(function (node) {
-        return node.getAttribute('value') === String(_this.asProps.value);
+    _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function () {
+      _this.setState({
+        animation: null
       });
-      if (!tab) return false;
-
-      _this.$observerTab.observe(tab);
+    });
 
-      var offsetLeft = tab.offsetLeft,
-          offsetWidth = tab.offsetWidth;
-      var positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
-      indicator.style.transform = "translateX(".concat(offsetLeft - positionLeftParent, "px)");
-      indicator.style.width = "".concat(offsetWidth, "px");
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
+      return function (e) {
+        _this.handlers.value(value, e);
+      };
     });
 
-    _this.$observer = new ResizeObserver(_this.calculateStylesIndicator);
-    _this.$observerTab = new ResizeObserver(_this.calculateStylesIndicator);
     return _this;
   }
 
@@ -117,30 +111,41 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         value: null
       };
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.$tabsParent.current) {
-        this.$observer.observe(this.$tabsParent.current);
-      }
-
-      this.calculateStylesIndicator();
-    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.$observerTab.disconnect();
-      this.calculateStylesIndicator();
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.value !== null && this.props.value !== null && prevProps.value !== this.props.value) {
+        var fromNode = this.itemRefs[prevProps.value];
+        var toNode = this.itemRefs[this.props.value];
+        var containerNode = this.containerRef.current;
+        if (!fromNode || !toNode || !containerNode) return;
+        var containerRect = containerNode.getBoundingClientRect();
+        var fromRect = fromNode.getBoundingClientRect();
+        var toRect = toNode.getBoundingClientRect();
+        var animation = {
+          fromLeft: fromRect.x - containerRect.x,
+          fromWidth: fromRect.width,
+          toLeft: toRect.x - containerRect.x,
+          toWidth: toRect.width,
+          started: false
+        };
+        this.setState({
+          animation: animation
+        });
+        clearTimeout(this.animationStartTimeout);
+        this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.$observer.disconnect();
-      this.$observerTab.disconnect();
+      clearTimeout(this.animationStartTimeout);
     }
   }, {
     key: "getItemProps",
     value: function getItemProps(props) {
+      var _this2 = this;
+
       var _this$asProps = this.asProps,
           value = _this$asProps.value,
           size = _this$asProps.size;
@@ -151,9 +156,36 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         onClick: this.bindHandlerClick(props.value),
         tabIndex: isSelected ? 0 : -1,
         'aria-posinset': value,
-        'aria-selected': isSelected
+        'aria-selected': isSelected,
+        ref: function ref(node) {
+          return _this2.itemRefs[props.value] = node;
+        }
       };
     }
+  }, {
+    key: "getCaretProps",
+    value: function getCaretProps() {
+      var animation = this.state.animation;
+      if (!animation) return {};
+
+      if (animation.started) {
+        return {
+          style: {
+            left: animation.toLeft,
+            width: animation.toWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      } else {
+        return {
+          style: {
+            left: animation.fromLeft,
+            width: animation.fromWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -161,19 +193,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
           _ref5;
 
       var STabLine = Box;
-      var SIndicator = 'div';
+      var SCaret = 'div';
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
           Children = _this$asProps2.Children,
           controlsLength = _this$asProps2.controlsLength;
+      var animation = this.state.animation;
       return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, _assignProps({
-        "ref": this.$tabsParent,
-        "role": "tablist"
+        "role": "tablist",
+        "ref": this.containerRef
       }, _ref))), /*#__PURE__*/React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
         "controlsLength": controlsLength
-      }), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))), /*#__PURE__*/React.createElement(SIndicator, _ref5.cn("SIndicator", {
-        "ref": this.$indicator
-      })));
+      }), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
     }
   }]);
 

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","animation","createRef","state","started","setState","value","e","handlers","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","style","left","onTransitionEnd","handleAnimationEnd","STabLine","SCaret","styles","Children","controlsLength","getCaretProps","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';\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  state = { animation: null };\n  itemRefs = {};\n  containerRef = React.createRef();\n  animationStartTimeout = -1;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    if (\n      prevProps.value !== null &&\n      this.props.value !== null &&\n      prevProps.value !== this.props.value\n    ) {\n      const fromNode = this.itemRefs[prevProps.value];\n      const toNode = this.itemRefs[this.props.value];\n      const containerNode = this.containerRef.current;\n\n      if (!fromNode || !toNode || !containerNode) return;\n      const containerRect = containerNode.getBoundingClientRect();\n      const fromRect = fromNode.getBoundingClientRect();\n      const toRect = toNode.getBoundingClientRect();\n      const animation = {\n        fromLeft: fromRect.x - containerRect.x,\n        fromWidth: fromRect.width,\n        toLeft: toRect.x - containerRect.x,\n        toWidth: toRect.width,\n        started: false,\n      };\n      this.setState({ animation });\n      clearTimeout(this.animationStartTimeout);\n      this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n    }\n  }\n  componentWillUnmount() {\n    clearTimeout(this.animationStartTimeout);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\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      ref: (node) => (this.itemRefs[props.value] = node),\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\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/style/tab-line.shadow.css

@@ -48,17 +48,26 @@ STabLineItem {
     text-decoration: none;
   }
 
+  &::before,
   &::after {
     content: '';
+    position: absolute;
     left: 0;
+    bottom: -1px;
+    height: 3px;
     width: 100%;
     background-color: transparent;
-    transition: background-color 0.2s;
   }
-
-  &:hover::after {
+  &::before {
+    transition: background-color calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
+  }
+  &:hover::before {
     background-color: var(--intergalactic-border-primary, #c4c7cf);
   }
+  &[selected]::after {
+    transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
+    background-color: var(--intergalactic-border-info-active, #006dca);
+  }
 
   & SText:not(:last-child) {
     margin-right: var(--intergalactic-spacing-2x, 8px);
@@ -68,19 +77,12 @@ STabLineItem {
     margin-right: var(--intergalactic-spacing-2x, 8px);
   }
 }
-
-SIndicator,
-STabLineItem::after {
+SCaret {
   position: absolute;
-  display: block;
   bottom: -1px;
   height: 3px;
-}
-
-SIndicator {
-  transition: transform calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
   background-color: var(--intergalactic-border-info-active, #006dca);
-  will-change: transform;
+  transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
 STabLineItem[selected] {
@@ -134,12 +136,17 @@ STabLineItem[neighborLocation='left'] {
 
 @media (prefers-reduced-motion) {
   STabLineItem {
+    &::before,
     &::after {
       transition: none;
     }
+    &[selected]::after {
+      transition-delay: 0;
+      transition: none;
+    }
   }
 
-  SIndicator {
-    transition: none;
+  SCaret {
+    display: none;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "3.2.9",
+  "version": "3.3.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",