@semcore/tab-line 3.3.8 → 3.3.10

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.3.10] - 2023-04-14
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.18 ~> 4.7.19], `@semcore/neighbor-location` [3.1.24 ~> 3.1.25], `@semcore/utils` [3.50.0 ~> 3.50.2]).
+
+## [3.3.9] - 2023-04-11
+
+### Fixed
+
+- Fixed `aria-posinset` attribute value generation.
+
 ## [3.3.8] - 2023-03-28
 
 ### Changed

package/lib/cjs/TabLine.js

@@ -1,64 +1,39 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 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"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _core = _interopRequireWildcard(require("@semcore/core"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _flexBox = require("@semcore/flex-box");
-
 var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
-
 var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
-
 var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
-
 var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
-
 /*__reshadow-styles__:"./style/tab-line.shadow.css"*/
-var style = (
-/*__reshadow_css_start__*/
-_core.sstyled.insert(
-/*__inner_css_start__*/
-".___STabLine_1hbql_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1hbql_gg_.__underlined_1hbql_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1hbql_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_1hbql_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1hbql_gg_:active,.___STabLineItem_1hbql_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_1hbql_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_1hbql_gg_::after,.___STabLineItem_1hbql_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1hbql_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1hbql_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1hbql_gg_.__selected_1hbql_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1hbql_gg_ .___SAddon_1hbql_gg_:not(:last-child),.___STabLineItem_1hbql_gg_ .___SText_1hbql_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1hbql_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_1hbql_gg_.__selected_1hbql_gg_{flex-shrink:0}.___STabLineItem_1hbql_gg_.__disabled_1hbql_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_1hbql_gg_.__keyboardFocused_1hbql_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_1hbql_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1hbql_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1hbql_gg_._size_m_1hbql_gg_{height:28px;min-width:18px}.___STabLineItem_1hbql_gg_._size_m_1hbql_gg_ .___SText_1hbql_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1hbql_gg_._size_l_1hbql_gg_{height:40px;min-width:26px}.___STabLineItem_1hbql_gg_._size_l_1hbql_gg_ .___SText_1hbql_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1hbql_gg_._neighborLocation_left_1hbql_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1hbql_gg_::after,.___STabLineItem_1hbql_gg_::before{transition:none}.___STabLineItem_1hbql_gg_.__selected_1hbql_gg_::after{transition-delay:0;transition:none}.___SCaret_1hbql_gg_{display:none}}"
-/*__inner_css_end__*/
-, "1hbql_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__STabLine": "___STabLine_1hbql_gg_",
-  "_underlined": "__underlined_1hbql_gg_",
-  "__STabLineItem": "___STabLineItem_1hbql_gg_",
-  "_selected": "__selected_1hbql_gg_",
-  "__SText": "___SText_1hbql_gg_",
-  "__SAddon": "___SAddon_1hbql_gg_",
-  "__SCaret": "___SCaret_1hbql_gg_",
-  "_disabled": "__disabled_1hbql_gg_",
-  "_keyboardFocused": "__keyboardFocused_1hbql_gg_",
-  "_size_m": "_size_m_1hbql_gg_",
-  "_size_l": "_size_l_1hbql_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1hbql_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabLine_cx6w7_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_cx6w7_gg_.__underlined_cx6w7_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_cx6w7_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_cx6w7_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_cx6w7_gg_:active,.___STabLineItem_cx6w7_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_cx6w7_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_cx6w7_gg_::after,.___STabLineItem_cx6w7_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_cx6w7_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_cx6w7_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_cx6w7_gg_.__selected_cx6w7_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_cx6w7_gg_ .___SAddon_cx6w7_gg_:not(:last-child),.___STabLineItem_cx6w7_gg_ .___SText_cx6w7_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_cx6w7_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_cx6w7_gg_.__selected_cx6w7_gg_{flex-shrink:0}.___STabLineItem_cx6w7_gg_.__disabled_cx6w7_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_cx6w7_gg_.__keyboardFocused_cx6w7_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_cx6w7_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_cx6w7_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_cx6w7_gg_._size_m_cx6w7_gg_{height:28px;min-width:18px}.___STabLineItem_cx6w7_gg_._size_m_cx6w7_gg_ .___SText_cx6w7_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_cx6w7_gg_._size_l_cx6w7_gg_{height:40px;min-width:26px}.___STabLineItem_cx6w7_gg_._size_l_cx6w7_gg_ .___SText_cx6w7_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_cx6w7_gg_._neighborLocation_left_cx6w7_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_cx6w7_gg_::after,.___STabLineItem_cx6w7_gg_::before{transition:none}.___STabLineItem_cx6w7_gg_.__selected_cx6w7_gg_::after{transition-delay:0;transition:none}.___SCaret_cx6w7_gg_{display:none}}" /*__inner_css_end__*/, "cx6w7_gg_") /*__reshadow_css_end__*/, {
+  "__STabLine": "___STabLine_cx6w7_gg_",
+  "_underlined": "__underlined_cx6w7_gg_",
+  "__STabLineItem": "___STabLineItem_cx6w7_gg_",
+  "_selected": "__selected_cx6w7_gg_",
+  "__SText": "___SText_cx6w7_gg_",
+  "__SAddon": "___SAddon_cx6w7_gg_",
+  "__SCaret": "___SCaret_cx6w7_gg_",
+  "_disabled": "__disabled_cx6w7_gg_",
+  "_keyboardFocused": "__keyboardFocused_cx6w7_gg_",
+  "_size_m": "_size_m_cx6w7_gg_",
+  "_size_l": "_size_l_cx6w7_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_cx6w7_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -69,21 +44,15 @@ var optionsA11yEnhance = {
   },
   childSelector: ['role', 'tab']
 };
-
 var TabLineRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(TabLineRoot, _Component);
-
   var _super = (0, _createSuper2["default"])(TabLineRoot);
-
   function TabLineRoot() {
     var _this;
-
     (0, _classCallCheck2["default"])(this, TabLineRoot);
-
     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
@@ -93,7 +62,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     (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), {}, {
@@ -114,7 +82,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-
   (0, _createClass2["default"])(TabLineRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
@@ -154,19 +121,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getItemProps",
-    value: function getItemProps(props) {
+    value: function getItemProps(props, index) {
       var _this2 = this;
-
       var _this$asProps = this.asProps,
-          value = _this$asProps.value,
-          size = _this$asProps.size;
+        value = _this$asProps.value,
+        size = _this$asProps.size;
       var isSelected = value === props.value;
       return {
         size: size,
         selected: isSelected,
         onClick: this.bindHandlerClick(props.value),
         tabIndex: isSelected ? 0 : -1,
-        'aria-posinset': value,
+        'aria-posinset': index + 1,
         'aria-selected': isSelected,
         ref: function ref(node) {
           return _this2.itemRefs[props.value] = node;
@@ -178,7 +144,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     value: function getCaretProps() {
       var animation = this.state.animation;
       if (!animation) return {};
-
       if (animation.started) {
         return {
           style: {
@@ -201,14 +166,13 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-          _ref5;
-
+        _ref5;
       var STabLine = _flexBox.Box;
       var SCaret = 'div';
       var _this$asProps2 = this.asProps,
-          styles = _this$asProps2.styles,
-          Children = _this$asProps2.Children,
-          controlsLength = _this$asProps2.controlsLength;
+        styles = _this$asProps2.styles,
+        Children = _this$asProps2.Children,
+        controlsLength = _this$asProps2.controlsLength;
       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",
@@ -220,7 +184,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
   }]);
   return TabLineRoot;
 }(_core.Component);
-
 (0, _defineProperty2["default"])(TabLineRoot, "displayName", 'TabLine');
 (0, _defineProperty2["default"])(TabLineRoot, "style", style);
 (0, _defineProperty2["default"])(TabLineRoot, "defaultProps", {
@@ -229,20 +192,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
   underlined: true
 });
 (0, _defineProperty2["default"])(TabLineRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
-
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   var STabLineItem = _flexBox.Box;
   var Children = props.Children,
-      styles = props.styles,
-      addonLeft = props.addonLeft,
-      addonRight = props.addonRight,
-      neighborLocation = props.neighborLocation;
+    styles = props.styles,
+    addonLeft = props.addonLeft,
+    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", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
       "tag": "button",
       "neighborLocation": neighborLocation,
@@ -255,31 +216,25 @@ function TabLineItem(props) {
     }) : null);
   });
 }
-
 TabLineItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
-
 function Text(props) {
   var _ref3 = arguments[0],
-      _ref7;
-
+    _ref7;
   var styles = props.styles;
   var SText = _flexBox.Box;
   return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": "span"
   }, _ref3))));
 }
-
 function Addon(props) {
   var _ref4 = arguments[0],
-      _ref8;
-
+    _ref8;
   var styles = props.styles;
   var SAddon = _flexBox.Box;
   return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": "span"
   }, _ref4))));
 }
-
 var TabLine = (0, _core["default"])(TabLineRoot, {
   Item: [TabLineItem, {
     Text: Text,

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"TabLine.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_keyboardFocusEnhance","_a11yEnhance","_neighborLocation","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","animation","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","e","handlers","_createClass2","key","uncontrolledProps","componentDidUpdate","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","componentWillUnmount","getItemProps","index","_this2","_this$asProps","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","assignProps","Component","defaultValue","underlined","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","_default","exports"],"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, index) {\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': index + 1,\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/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "default", {
     return _TabLine["default"];
   }
 });
-
 var _TabLine = _interopRequireDefault(require("./TabLine"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.js","names":["_TabLine","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA"}

package/lib/es6/TabLine.js

@@ -17,29 +17,20 @@ 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';
-
 /*__reshadow-styles__:"./style/tab-line.shadow.css"*/
-var style = (
-/*__reshadow_css_start__*/
-_sstyled.insert(
-/*__inner_css_start__*/
-".___STabLine_1hbql_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1hbql_gg_.__underlined_1hbql_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1hbql_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_1hbql_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1hbql_gg_:active,.___STabLineItem_1hbql_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_1hbql_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_1hbql_gg_::after,.___STabLineItem_1hbql_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1hbql_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1hbql_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1hbql_gg_.__selected_1hbql_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1hbql_gg_ .___SAddon_1hbql_gg_:not(:last-child),.___STabLineItem_1hbql_gg_ .___SText_1hbql_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1hbql_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_1hbql_gg_.__selected_1hbql_gg_{flex-shrink:0}.___STabLineItem_1hbql_gg_.__disabled_1hbql_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_1hbql_gg_.__keyboardFocused_1hbql_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_1hbql_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1hbql_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1hbql_gg_._size_m_1hbql_gg_{height:28px;min-width:18px}.___STabLineItem_1hbql_gg_._size_m_1hbql_gg_ .___SText_1hbql_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1hbql_gg_._size_l_1hbql_gg_{height:40px;min-width:26px}.___STabLineItem_1hbql_gg_._size_l_1hbql_gg_ .___SText_1hbql_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1hbql_gg_._neighborLocation_left_1hbql_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1hbql_gg_::after,.___STabLineItem_1hbql_gg_::before{transition:none}.___STabLineItem_1hbql_gg_.__selected_1hbql_gg_::after{transition-delay:0;transition:none}.___SCaret_1hbql_gg_{display:none}}"
-/*__inner_css_end__*/
-, "1hbql_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__STabLine": "___STabLine_1hbql_gg_",
-  "_underlined": "__underlined_1hbql_gg_",
-  "__STabLineItem": "___STabLineItem_1hbql_gg_",
-  "_selected": "__selected_1hbql_gg_",
-  "__SText": "___SText_1hbql_gg_",
-  "__SAddon": "___SAddon_1hbql_gg_",
-  "__SCaret": "___SCaret_1hbql_gg_",
-  "_disabled": "__disabled_1hbql_gg_",
-  "_keyboardFocused": "__keyboardFocused_1hbql_gg_",
-  "_size_m": "_size_m_1hbql_gg_",
-  "_size_l": "_size_l_1hbql_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1hbql_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabLine_cx6w7_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_cx6w7_gg_.__underlined_cx6w7_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_cx6w7_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_cx6w7_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_cx6w7_gg_:active,.___STabLineItem_cx6w7_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_cx6w7_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_cx6w7_gg_::after,.___STabLineItem_cx6w7_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_cx6w7_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_cx6w7_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_cx6w7_gg_.__selected_cx6w7_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_cx6w7_gg_ .___SAddon_cx6w7_gg_:not(:last-child),.___STabLineItem_cx6w7_gg_ .___SText_cx6w7_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_cx6w7_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_cx6w7_gg_.__selected_cx6w7_gg_{flex-shrink:0}.___STabLineItem_cx6w7_gg_.__disabled_cx6w7_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_cx6w7_gg_.__keyboardFocused_cx6w7_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_cx6w7_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_cx6w7_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_cx6w7_gg_._size_m_cx6w7_gg_{height:28px;min-width:18px}.___STabLineItem_cx6w7_gg_._size_m_cx6w7_gg_ .___SText_cx6w7_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_cx6w7_gg_._size_l_cx6w7_gg_{height:40px;min-width:26px}.___STabLineItem_cx6w7_gg_._size_l_cx6w7_gg_ .___SText_cx6w7_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_cx6w7_gg_._neighborLocation_left_cx6w7_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_cx6w7_gg_::after,.___STabLineItem_cx6w7_gg_::before{transition:none}.___STabLineItem_cx6w7_gg_.__selected_cx6w7_gg_::after{transition-delay:0;transition:none}.___SCaret_cx6w7_gg_{display:none}}" /*__inner_css_end__*/, "cx6w7_gg_") /*__reshadow_css_end__*/, {
+  "__STabLine": "___STabLine_cx6w7_gg_",
+  "_underlined": "__underlined_cx6w7_gg_",
+  "__STabLineItem": "___STabLineItem_cx6w7_gg_",
+  "_selected": "__selected_cx6w7_gg_",
+  "__SText": "___SText_cx6w7_gg_",
+  "__SAddon": "___SAddon_cx6w7_gg_",
+  "__SCaret": "___SCaret_cx6w7_gg_",
+  "_disabled": "__disabled_cx6w7_gg_",
+  "_keyboardFocused": "__keyboardFocused_cx6w7_gg_",
+  "_size_m": "_size_m_cx6w7_gg_",
+  "_size_l": "_size_l_cx6w7_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_cx6w7_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -50,36 +41,24 @@ var optionsA11yEnhance = {
   },
   childSelector: ['role', 'tab']
 };
-
 var TabLineRoot = /*#__PURE__*/function (_Component) {
   _inherits(TabLineRoot, _Component);
-
   var _super = _createSuper(TabLineRoot);
-
   function TabLineRoot() {
     var _this;
-
     _classCallCheck(this, TabLineRoot);
-
     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));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       animation: null
     });
-
     _defineProperty(_assertThisInitialized(_this), "itemRefs", {});
-
     _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
-
     _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), {}, {
@@ -88,22 +67,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function () {
       _this.setState({
         animation: null
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
       return function (e) {
         _this.handlers.value(value, e);
       };
     });
-
     return _this;
   }
-
   _createClass(TabLineRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
@@ -143,19 +118,18 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getItemProps",
-    value: function getItemProps(props) {
+    value: function getItemProps(props, index) {
       var _this2 = this;
-
       var _this$asProps = this.asProps,
-          value = _this$asProps.value,
-          size = _this$asProps.size;
+        value = _this$asProps.value,
+        size = _this$asProps.size;
       var isSelected = value === props.value;
       return {
         size: size,
         selected: isSelected,
         onClick: this.bindHandlerClick(props.value),
         tabIndex: isSelected ? 0 : -1,
-        'aria-posinset': value,
+        'aria-posinset': index + 1,
         'aria-selected': isSelected,
         ref: function ref(node) {
           return _this2.itemRefs[props.value] = node;
@@ -167,7 +141,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     value: function getCaretProps() {
       var animation = this.state.animation;
       if (!animation) return {};
-
       if (animation.started) {
         return {
           style: {
@@ -190,14 +163,13 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-          _ref5;
-
+        _ref5;
       var STabLine = Box;
       var SCaret = 'div';
       var _this$asProps2 = this.asProps,
-          styles = _this$asProps2.styles,
-          Children = _this$asProps2.Children,
-          controlsLength = _this$asProps2.controlsLength;
+        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({
         "role": "tablist",
@@ -207,35 +179,28 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
     }
   }]);
-
   return TabLineRoot;
 }(Component);
-
 _defineProperty(TabLineRoot, "displayName", 'TabLine');
-
 _defineProperty(TabLineRoot, "style", style);
-
 _defineProperty(TabLineRoot, "defaultProps", {
   defaultValue: null,
   size: 'm',
   underlined: true
 });
-
 _defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
-
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   var STabLineItem = Box;
   var Children = props.Children,
-      styles = props.styles,
-      addonLeft = props.addonLeft,
-      addonRight = props.addonRight,
-      neighborLocation = props.neighborLocation;
+    styles = props.styles,
+    addonLeft = props.addonLeft,
+    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,
@@ -248,31 +213,25 @@ function TabLineItem(props) {
     }) : null);
   });
 }
-
 TabLineItem.enhance = [keyboardFocusEnhance()];
-
 function Text(props) {
   var _ref3 = arguments[0],
-      _ref7;
-
+    _ref7;
   var styles = props.styles;
   var SText = Box;
   return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps3({
     "tag": "span"
   }, _ref3))));
 }
-
 function Addon(props) {
   var _ref4 = arguments[0],
-      _ref8;
-
+    _ref8;
   var styles = props.styles;
   var SAddon = Box;
   return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, _assignProps4({
     "tag": "span"
   }, _ref4))));
 }
-
 var TabLine = createComponent(TabLineRoot, {
   Item: [TabLineItem, {
     Text: Text,

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","animation","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_createClass","key","uncontrolledProps","componentDidUpdate","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","componentWillUnmount","getItemProps","index","_this2","_this$asProps","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4"],"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, index) {\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': index + 1,\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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW"}

package/package.json

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